, \"children\"> & {\n children?: \"children\" extends keyof P\n ? P[\"children\"] | MotionComponentProps[\"children\"]\n : MotionComponentProps
[\"children\"]\n }\n >\n\nexport interface MotionComponentOptions {\n forwardMotionProps?: boolean\n /**\n * Specify whether the component renders an HTML or SVG element.\n * This is useful when wrapping custom SVG components that need\n * SVG-specific attribute handling (like viewBox animation).\n * By default, Motion auto-detects based on the component name,\n * but custom React components are always treated as HTML.\n */\n type?: \"html\" | \"svg\"\n}\n\n/**\n * Create a `motion` component.\n *\n * This function accepts a Component argument, which can be either a string (ie \"div\"\n * for `motion.div`), or an actual React component.\n *\n * Alongside this is a config option which provides a way of rendering the provided\n * component \"offline\", or outside the React render cycle.\n */\nexport function createMotionComponent<\n Props,\n TagName extends keyof DOMMotionComponents | string = \"div\"\n>(\n Component: TagName | string | React.ComponentType,\n { forwardMotionProps = false, type }: MotionComponentOptions = {},\n preloadedFeatures?: FeaturePackages,\n createVisualElement?: CreateVisualElement\n) {\n preloadedFeatures && loadFeatures(preloadedFeatures)\n\n /**\n * Determine whether to use SVG or HTML rendering based on:\n * 1. Explicit `type` option (highest priority)\n * 2. Auto-detection via `isSVGComponent`\n */\n const isSVG = type ? type === \"svg\" : isSVGComponent(Component)\n const useVisualState = isSVG ? useSVGVisualState : useHTMLVisualState\n\n function MotionDOMComponent(\n props: MotionComponentProps,\n externalRef?: React.Ref\n ) {\n /**\n * If we need to measure the element we load this functionality in a\n * separate class component in order to gain access to getSnapshotBeforeUpdate.\n */\n let MeasureLayout: undefined | React.ComponentType\n\n const configAndProps = {\n ...useContext(MotionConfigContext),\n ...props,\n layoutId: useLayoutId(props),\n }\n\n const { isStatic } = configAndProps\n\n const context = useCreateMotionContext(props)\n\n const visualState = useVisualState(props, isStatic)\n\n if (!isStatic && typeof window !== \"undefined\") {\n useStrictMode(configAndProps, preloadedFeatures)\n\n const layoutProjection = getProjectionFunctionality(configAndProps)\n MeasureLayout = layoutProjection.MeasureLayout\n\n /**\n * Create a VisualElement for this component. A VisualElement provides a common\n * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as\n * providing a way of rendering to these APIs outside of the React render loop\n * for more performant animations and interactions\n */\n context.visualElement = useVisualElement(\n Component,\n visualState,\n configAndProps,\n createVisualElement,\n layoutProjection.ProjectionNode,\n isSVG\n )\n }\n\n /**\n * The mount order and hierarchy is specific to ensure our element ref\n * is hydrated by the time features fire their effects.\n */\n return (\n \n {MeasureLayout && context.visualElement ? (\n \n ) : null}\n {useRender(\n Component,\n props,\n useMotionRef<\n HTMLElement | SVGElement,\n HTMLRenderState | SVGRenderState\n >(visualState, context.visualElement, externalRef),\n visualState,\n isStatic,\n forwardMotionProps,\n isSVG\n )}\n \n )\n }\n\n MotionDOMComponent.displayName = `motion.${\n typeof Component === \"string\"\n ? Component\n : `create(${Component.displayName ?? Component.name ?? \"\"})`\n }`\n\n const ForwardRefMotionComponent = forwardRef(MotionDOMComponent as any)\n ;(ForwardRefMotionComponent as any)[motionComponentSymbol] = Component\n\n return ForwardRefMotionComponent as MotionComponent\n}\n\nfunction useLayoutId({ layoutId }: MotionProps) {\n const layoutGroupId = useContext(LayoutGroupContext).id\n return layoutGroupId && layoutId !== undefined\n ? layoutGroupId + \"-\" + layoutId\n : layoutId\n}\n\nfunction useStrictMode(\n configAndProps: MotionProps,\n preloadedFeatures?: FeaturePackages\n) {\n const isStrict = useContext(LazyContext).strict\n\n /**\n * If we're in development mode, check to make sure we're not rendering a motion component\n * as a child of LazyMotion, as this will break the file-size benefits of using it.\n */\n if (\n process.env.NODE_ENV !== \"production\" &&\n preloadedFeatures &&\n isStrict\n ) {\n const strictMessage =\n \"You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.\"\n configAndProps.ignoreStrict\n ? warning(false, strictMessage, \"lazy-strict-mode\")\n : invariant(false, strictMessage, \"lazy-strict-mode\")\n }\n}\n\nfunction getProjectionFunctionality(props: MotionProps) {\n const featureDefinitions = getInitializedFeatureDefinitions()\n const { drag, layout } = featureDefinitions\n\n if (!drag && !layout) return {}\n\n const combined = { ...drag, ...layout }\n\n return {\n MeasureLayout:\n drag?.isEnabled(props) || layout?.isEnabled(props)\n ? combined.MeasureLayout\n : undefined,\n ProjectionNode: combined.ProjectionNode,\n }\n}\n"],"names":["createContext","useRef","useLayoutEffect","useEffect","setFeatureDefinitions","getFeatureDefinitions","isMotionValue","isControllingVariants","isVariantLabel","useContext","useMemo","isForcedMotionValue","buildHTMLStyles","buildSVGAttrs","isSVGTag","Fragment","createElement","resolveMotionValue","checkIsControllingVariants","checkIsVariantNode","isAnimationControls","resolveVariantFromProps","scrapeHTMLMotionValuesFromProps","scrapeSVGMotionValuesFromProps","useInsertionEffect","useCallback","optimizedAppearDataAttribute","_jsxs","_jsx","forwardRef","warning","invariant"],"mappings":";;;;;;;MAWa,kBAAkB,GAAGA,mBAAa,CAA0B,EAAE;;ACL3E;;;;;;AAMG;AACG,SAAU,WAAW,CAAI,IAAa,EAAA;AACxC,IAAA,MAAM,GAAG,GAAGC,YAAM,CAAW,IAAI,CAAC;AAElC,IAAA,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI,EAAE;AACtB,QAAA,GAAG,CAAC,OAAO,GAAG,IAAI,EAAE;IACxB;IAEA,OAAO,GAAG,CAAC,OAAO;AACtB;;MCrBa,SAAS,GAAG,OAAO,MAAM,KAAK;;ACKpC,MAAM,yBAAyB,GAAG,SAAS,GAAGC,qBAAe,GAAGC;;ACEvE;;AAEG;MACU,eAAe;AACxB,gBAAgBH,mBAAa,CAA8B,IAAI;;AC8CnE;;AAEG;AACI,MAAM,mBAAmB,GAAGA,mBAAa,CAAsB;AAClE,IAAA,kBAAkB,EAAE,CAAC,CAAC,KAAK,CAAC;AAC5B,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,aAAa,EAAE,OAAO;AACzB,CAAA;;ACtDM,MAAM,WAAW,GAAGA,mBAAa,CAAmB,EAAE,MAAM,EAAE,KAAK,EAAE;;ACN5E,MAAM,YAAY,GAAG;AACjB,IAAA,SAAS,EAAE;QACP,SAAS;QACT,UAAU;QACV,YAAY;QACZ,UAAU;QACV,MAAM;QACN,aAAa;QACb,YAAY;QACZ,WAAW;AACd,KAAA;IACD,IAAI,EAAE,CAAC,MAAM,CAAC;AACd,IAAA,IAAI,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC;IAC9B,KAAK,EAAE,CAAC,YAAY,CAAC;AACrB,IAAA,KAAK,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,YAAY,CAAC;IACnD,GAAG,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,CAAC;IACvD,GAAG,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,UAAU,CAAC;AAC7D,IAAA,MAAM,EAAE,CAAC,aAAa,EAAE,iBAAiB,EAAE,iBAAiB,CAAC;AAC7D,IAAA,MAAM,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC;CACjC;AAED,IAAI,aAAa,GAAG,KAAK;AAEzB;;;AAGG;SACa,sBAAsB,GAAA;AAClC,IAAA,IAAI,aAAa;QAAE;IAEnB,MAAM,yBAAyB,GAAgC,EAAE;AAEjE,IAAA,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE;QAC5B,yBAAyB,CACrB,GAA6C,CAChD,GAAG;YACA,SAAS,EAAE,CAAC,KAAkB,KAC1B,YAAY,CAAC,GAAgC,CAAC,CAAC,IAAI,CAC/C,CAAC,IAAY,KAAK,CAAC,CAAC,KAAK,CAAC,IAA0B,CAAC,CACxD;SACR;IACL;IAEAI,+BAAqB,CAAC,yBAAyB,CAAC;IAChD,aAAa,GAAG,IAAI;AACxB;AAEA;;AAEG;SACa,gCAAgC,GAAA;AAC5C,IAAA,sBAAsB,EAAE;IACxB,OAAOC,+BAAqB,EAAE;AAClC;;ACrDM,SAAU,YAAY,CAAC,QAAyB,EAAA;AAClD,IAAA,MAAM,kBAAkB,GAAG,gCAAgC,EAAE;AAE7D,IAAA,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE;QACxB,kBAAkB,CAAC,GAAsC,CAAC,GAAG;YACzD,GAAG,kBAAkB,CAAC,GAAsC,CAAC;YAC7D,GAAG,QAAQ,CAAC,GAA4B,CAAC;SACrC;IACZ;IAEAD,+BAAqB,CAAC,kBAAkB,CAAC;AAC7C;;ACbA;;;;;AAKG;AACH,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAAoB;IAChD,SAAS;IACT,MAAM;IACN,UAAU;IACV,SAAS;IACT,OAAO;IACP,QAAQ;IACR,UAAU;IACV,YAAY;IACZ,mBAAmB;IACnB,QAAQ;IACR,SAAS;IACT,uBAAuB;IACvB,kBAAkB;IAClB,qBAAqB;IACrB,UAAU;IACV,aAAa;IACb,QAAQ;IACR,WAAW;IACX,0BAA0B;IAC1B,iBAAiB;IACjB,qBAAqB;IACrB,QAAQ;IACR,QAAQ;IACR,cAAc;IACd,YAAY;IACZ,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,WAAW;IACX,cAAc;IACd,UAAU;AACb,CAAA,CAAC;AAEF;;;;;;;AAOG;AACG,SAAU,iBAAiB,CAAC,GAAW,EAAA;AACzC,IAAA,QACI,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC;SACtB,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,WAAW,CAAC;AAC/C,QAAA,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC;AACxB,QAAA,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC;AACvB,QAAA,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC;AACvB,QAAA,GAAG,CAAC,UAAU,CAAC,UAAU,CAAC;AAC1B,QAAA,gBAAgB,CAAC,GAAG,CAAC,GAAwB,CAAC;AAEtD;;ACxDA,IAAI,aAAa,GAAG,CAAC,GAAW,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC;AAItD,SAAU,uBAAuB,CAAC,WAAyB,EAAA;IAC7D,IAAI,OAAO,WAAW,KAAK,UAAU;QAAE;;IAGvC,aAAa,GAAG,CAAC,GAAW,KACxB,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC;AACzE;AAEA;;;;;;;;;;;;AAYG;AACH,IAAI;AACA;;;;;;;AAOG;AACH,IAAA,MAAM,UAAU,GAAG,mBAAmB,GAAG,OAAO;IAChD,uBAAuB,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC;AACxD;AAAE,MAAM;;AAER;SAEgB,WAAW,CACvB,KAAkB,EAClB,KAAc,EACd,kBAA2B,EAAA;IAE3B,MAAM,aAAa,GAAgB,EAAE;AAErC,IAAA,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE;AACrB;;;;;;AAMG;QACH,IAAI,GAAG,KAAK,QAAQ,IAAI,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ;YAAE;AAE1D,QAAA,IAAIE,uBAAa,CAAC,KAAK,CAAC,GAAyB,CAAC,CAAC;YAAE;QAErD,IACI,aAAa,CAAC,GAAG,CAAC;aACjB,kBAAkB,KAAK,IAAI,IAAI,iBAAiB,CAAC,GAAG,CAAC,CAAC;aACtD,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;;aAElC,KAAK,CAAC,WAAgC,CAAC;AACpC,gBAAA,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,EAC/B;YACE,aAAa,CAAC,GAAwB,CAAC;gBACnC,KAAK,CAAC,GAAwB,CAAC;QACvC;IACJ;AAEA,IAAA,OAAO,aAAa;AACxB;;AC7EA;;;AAGG;AACI,MAAM,oBAAoB,GAAG;IAChC,SAAS;IACT,QAAQ;IACR,MAAM;IACN,MAAM;IACN,SAAS;IACT,GAAG;IACH,OAAO;IACP,MAAM;IACN,QAAQ;IACR,QAAQ;IACR,MAAM;IACN,UAAU;IACV,MAAM;IACN,SAAS;IACT,SAAS;IACT,UAAU;IACV,MAAM;IACN,MAAM;IACN,QAAQ;IACR,QAAQ;IACR,KAAK;IACL,MAAM;IACN,OAAO;IACP,KAAK;IACL,MAAM;CACT;;AC3BK,SAAU,cAAc,CAAC,SAA4C,EAAA;AACvE,IAAA;AACI;;;AAGG;IACH,OAAO,SAAS,KAAK,QAAQ;AAC7B;;AAEG;AACH,QAAA,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,EACzB;AACE,QAAA,OAAO,KAAK;IAChB;AAAO,SAAA;AACH;;AAEG;AACH,IAAA,oBAAoB,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,EAAE;AAC5C;;AAEG;AACH,QAAA,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAC1B;AACE,QAAA,OAAO,IAAI;IACf;AAEA,IAAA,OAAO,KAAK;AAChB;;ACnBO,MAAM,aAAa,mBAAmBN,mBAAa,CACtD,EAAE;;ACRA,SAAU,sBAAsB,CAClC,KAAkB,EAClB,OAA2B,EAAA;AAE3B,IAAA,IAAIO,+BAAqB,CAAC,KAAK,CAAC,EAAE;AAC9B,QAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK;QAClC,OAAO;YACH,OAAO,EACH,OAAO,KAAK,KAAK,IAAIC,wBAAc,CAAC,OAAO;AACvC,kBAAG;AACH,kBAAE,SAAS;AACnB,YAAA,OAAO,EAAEA,wBAAc,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,SAAS;SACzD;IACL;AACA,IAAA,OAAO,KAAK,CAAC,OAAO,KAAK,KAAK,GAAG,OAAO,GAAG,EAAE;AACjD;;ACZM,SAAU,sBAAsB,CAClC,KAAkB,EAAA;AAElB,IAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,sBAAsB,CAC/C,KAAK,EACLC,gBAAU,CAAC,aAAa,CAAC,CAC5B;IAED,OAAOC,aAAO,CACV,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAC5B,CAAC,yBAAyB,CAAC,OAAO,CAAC,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,CAC3E;AACL;AAEA,SAAS,yBAAyB,CAC9B,IAA6C,EAAA;AAE7C,IAAA,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI;AACtD;;ACvBO,MAAM,qBAAqB,GAAG,OAAwB;AACzD,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,SAAS,EAAE,EAAE;AACb,IAAA,eAAe,EAAE,EAAE;AACnB,IAAA,IAAI,EAAE,EAAE;AACX,CAAA,CAAC;;SCCc,iBAAiB,CAC7B,MAAsB,EACtB,MAA4D,EAC5D,KAAkB,EAAA;AAElB,IAAA,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE;AACtB,QAAA,IAAI,CAACJ,uBAAa,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAACK,6BAAmB,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE;YACjE,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAwB;QACpD;IACJ;AACJ;AAEA,SAAS,sBAAsB,CAC3B,EAAE,iBAAiB,EAAe,EAClC,WAA2B,EAAA;IAE3B,OAAOD,aAAO,CAAC,MAAK;AAChB,QAAA,MAAM,KAAK,GAAG,qBAAqB,EAAE;AAErC,QAAAE,yBAAe,CAAC,KAAK,EAAE,WAAW,EAAE,iBAAiB,CAAC;AAEtD,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;AACrD,IAAA,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AACrB;AAEA,SAAS,QAAQ,CACb,KAAkB,EAClB,WAA2B,EAAA;AAE3B,IAAA,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE;IACnC,MAAM,KAAK,GAAG,EAAE;AAEhB;;AAEG;AACH,IAAA,iBAAiB,CAAC,KAAK,EAAE,SAAgB,EAAE,KAAK,CAAC;AAEjD,IAAA,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,sBAAsB,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;AAEhE,IAAA,OAAO,KAAK;AAChB;AAEM,SAAU,YAAY,CACxB,KAA2C,EAC3C,WAA2B,EAAA;;IAG3B,MAAM,SAAS,GAAQ,EAAE;IACzB,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC;IAE1C,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,YAAY,KAAK,KAAK,EAAE;;AAE5C,QAAA,SAAS,CAAC,SAAS,GAAG,KAAK;;AAG3B,QAAA,KAAK,CAAC,UAAU;AACZ,YAAA,KAAK,CAAC,gBAAgB;AACtB,gBAAA,KAAK,CAAC,kBAAkB;AACpB,oBAAA,MAAM;;AAGd,QAAA,KAAK,CAAC,WAAW;YACb,KAAK,CAAC,IAAI,KAAK;AACX,kBAAE;AACF,kBAAE,CAAA,IAAA,EAAO,KAAK,CAAC,IAAI,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE;IACrD;AAEA,IAAA,IACI,KAAK,CAAC,QAAQ,KAAK,SAAS;AAC5B,SAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,QAAQ,CAAC,EACrD;AACE,QAAA,SAAS,CAAC,QAAQ,GAAG,CAAC;IAC1B;AAEA,IAAA,SAAS,CAAC,KAAK,GAAG,KAAK;AAEvB,IAAA,OAAO,SAAS;AACpB;;AClFO,MAAM,oBAAoB,GAAG,OAAuB;AACvD,IAAA,GAAG,qBAAqB,EAAE;AAC1B,IAAA,KAAK,EAAE,EAAE;AACZ,CAAA,CAAC;;ACGI,SAAU,WAAW,CACvB,KAAkB,EAClB,WAA2B,EAC3B,SAAkB,EAClB,SAAyE,EAAA;AAEzE,IAAA,MAAM,WAAW,GAAGF,aAAO,CAAC,MAAK;AAC7B,QAAA,MAAM,KAAK,GAAG,oBAAoB,EAAE;AAEpC,QAAAG,uBAAa,CACT,KAAK,EACL,WAAW,EACXC,kBAAQ,CAAC,SAAS,CAAC,EACnB,KAAK,CAAC,iBAAiB,EACvB,KAAK,CAAC,KAAK,CACd;QAED,OAAO;YACH,GAAG,KAAK,CAAC,KAAK;AACd,YAAA,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE;SAC5B;AACL,IAAA,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAEjB,IAAA,IAAI,KAAK,CAAC,KAAK,EAAE;QACb,MAAM,SAAS,GAAG,EAAE;QACpB,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,KAAY,EAAE,KAAK,CAAC;AACvD,QAAA,WAAW,CAAC,KAAK,GAAG,EAAE,GAAG,SAAS,EAAE,GAAG,WAAW,CAAC,KAAK,EAAE;IAC9D;AAEA,IAAA,OAAO,WAAW;AACtB;;SCzBgB,SAAS,CAIrB,SAAwD,EACxD,KAAkB,EAClB,GAAwC,EACxC,EACI,YAAY,GAC0D,EAC1E,QAAiB,EACjB,kBAAA,GAA8B,KAAK,EACnC,KAAe,EAAA;AAEf,IAAA,MAAM,cAAc,GAChB,CAAC,KAAK,IAAI,cAAc,CAAC,SAAS,CAAC,IAAI,WAAW,GAAG,YAAY;AAErE,IAAA,MAAM,WAAW,GAAG,cAAc,CAC9B,KAAY,EACZ,YAAY,EACZ,QAAQ,EACR,SAAgB,CACnB;AACD,IAAA,MAAM,aAAa,GAAG,WAAW,CAC7B,KAAK,EACL,OAAO,SAAS,KAAK,QAAQ,EAC7B,kBAAkB,CACrB;IACD,MAAM,YAAY,GACd,SAAS,KAAKC,cAAQ,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE;AAE3E;;;;AAIG;AACH,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK;AAC1B,IAAA,MAAM,gBAAgB,GAAGL,aAAO,CAC5B,OAAOJ,uBAAa,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,QAAQ,CAAC,EAC3D,CAAC,QAAQ,CAAC,CACb;IAED,OAAOU,mBAAa,CAAM,SAAS,EAAE;AACjC,QAAA,GAAG,YAAY;AACf,QAAA,QAAQ,EAAE,gBAAgB;AAC7B,KAAA,CAAC;AACN;;ACvBA,SAAS,SAAS,CACd,EACI,2BAA2B,EAC3B,iBAAiB,GACM,EAC3B,KAAkB,EAClB,OAA2B,EAC3B,eAA4C,EAAA;AAE5C,IAAA,MAAM,KAAK,GAAuB;QAC9B,YAAY,EAAE,gBAAgB,CAC1B,KAAK,EACL,OAAO,EACP,eAAe,EACf,2BAA2B,CAC9B;QACD,WAAW,EAAE,iBAAiB,EAAE;KACnC;AAED,IAAA,OAAO,KAAK;AAChB;AAEA,SAAS,gBAAgB,CACrB,KAAkB,EAClB,OAA2B,EAC3B,eAA4C,EAC5C,kBAA+C,EAAA;IAE/C,MAAM,MAAM,GAAmB,EAAE;IAEjC,MAAM,YAAY,GAAG,kBAAkB,CAAC,KAAK,EAAE,EAAE,CAAC;AAClD,IAAA,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE;QAC5B,MAAM,CAAC,GAAG,CAAC,GAAGC,4BAAkB,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IACvD;AAEA,IAAA,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK;AAChC,IAAA,MAAM,qBAAqB,GAAGC,+BAA0B,CAAC,KAAK,CAAC;AAC/D,IAAA,MAAM,aAAa,GAAGC,uBAAkB,CAAC,KAAK,CAAC;AAE/C,IAAA,IACI,OAAO;QACP,aAAa;AACb,QAAA,CAAC,qBAAqB;AACtB,QAAA,KAAK,CAAC,OAAO,KAAK,KAAK,EACzB;QACE,IAAI,OAAO,KAAK,SAAS;AAAE,YAAA,OAAO,GAAG,OAAO,CAAC,OAAO;QACpD,IAAI,OAAO,KAAK,SAAS;AAAE,YAAA,OAAO,GAAG,OAAO,CAAC,OAAO;IACxD;IAEA,IAAI,yBAAyB,GAAG;AAC5B,UAAE,eAAe,CAAC,OAAO,KAAK;UAC5B,KAAK;AACX,IAAA,yBAAyB,GAAG,yBAAyB,IAAI,OAAO,KAAK,KAAK;IAE1E,MAAM,YAAY,GAAG,yBAAyB,GAAG,OAAO,GAAG,OAAO;AAElE,IAAA,IACI,YAAY;QACZ,OAAO,YAAY,KAAK,SAAS;AACjC,QAAA,CAACC,6BAAmB,CAAC,YAAY,CAAC,EACpC;AACE,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,YAAY,GAAG,CAAC,YAAY,CAAC;AACxE,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAClC,MAAM,QAAQ,GAAGC,iCAAuB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAQ,CAAC;YAC/D,IAAI,QAAQ,EAAE;gBACV,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,MAAM,EAAE,GAAG,QAAQ;AACzD,gBAAA,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE;AACtB,oBAAA,IAAI,WAAW,GAAG,MAAM,CAAC,GAA0B,CAAC;AAEpD,oBAAA,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;AAC5B;;;AAGG;wBACH,MAAM,KAAK,GAAG;AACV,8BAAE,WAAW,CAAC,MAAM,GAAG;8BACrB,CAAC;AACP,wBAAA,WAAW,GAAG,WAAW,CAAC,KAAK,CAAQ;oBAC3C;AAEA,oBAAA,IAAI,WAAW,KAAK,IAAI,EAAE;AACtB,wBAAA,MAAM,CAAC,GAAG,CAAC,GAAG,WAAkC;oBACpD;gBACJ;AACA,gBAAA,KAAK,MAAM,GAAG,IAAI,aAAa,EAAE;oBAC7B,MAAM,CAAC,GAAG,CAAC,GAAG,aAAa,CACvB,GAAiC,CACb;gBAC5B;YACJ;QACJ;IACJ;AAEA,IAAA,OAAO,MAAM;AACjB;AAEO,MAAM,kBAAkB,GAC3B,CAAQ,MAAgC,KACxC,CAAC,KAAkB,EAAE,QAAiB,KAAwB;AAC1D,IAAA,MAAM,OAAO,GAAGZ,gBAAU,CAAC,aAAa,CAAC;AACzC,IAAA,MAAM,eAAe,GAAGA,gBAAU,CAAC,eAAe,CAAC;AACnD,IAAA,MAAM,IAAI,GAAG,MAAM,SAAS,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,eAAe,CAAC;AAErE,IAAA,OAAO,QAAQ,GAAG,IAAI,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC;AAChD;;ACvIG,MAAM,kBAAkB,iBAAiB,kBAAkB,CAAC;AAC/D,IAAA,2BAA2B,EAAEa,yCAA+B;AAC5D,IAAA,iBAAiB,EAAE,qBAAqB;AAC3C,CAAA,CAAC;;ACHK,MAAM,iBAAiB,iBAAiB,kBAAkB,CAAC;AAC9D,IAAA,2BAA2B,EAAEC,wCAA8B;AAC3D,IAAA,iBAAiB,EAAE,oBAAoB;AAC1C,CAAA,CAAC;;ACTK,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,uBAAuB;;ACOvE;;;AAGG;SACa,YAAY,CACxB,WAA+C,EAC/C,aAA8C,EAC9C,WAAiC,EAAA;AAEjC;;;;;;AAMG;AACH,IAAA,MAAM,oBAAoB,GAAGtB,YAAM,CAAC,WAAW,CAAC;IAChDuB,wBAAkB,CAAC,MAAK;AACpB,QAAA,oBAAoB,CAAC,OAAO,GAAG,WAAW;AAC9C,IAAA,CAAC,CAAC;;AAGF,IAAA,MAAM,UAAU,GAAGvB,YAAM,CAAsB,IAAI,CAAC;AAEpD,IAAA,OAAOwB,iBAAW,CACd,CAAC,QAAkB,KAAI;QACnB,IAAI,QAAQ,EAAE;AACV,YAAA,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;QACnC;QAEA,IAAI,aAAa,EAAE;AACf,YAAA,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,aAAa,CAAC,OAAO,EAAE;QACtE;AAEA,QAAA,MAAM,GAAG,GAAG,oBAAoB,CAAC,OAAO;AACxC,QAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;YAC3B,IAAI,QAAQ,EAAE;AACV,gBAAA,MAAM,OAAO,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC7B,gBAAA,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE;AAC/B,oBAAA,UAAU,CAAC,OAAO,GAAG,OAAO;gBAChC;YACJ;AAAO,iBAAA,IAAI,UAAU,CAAC,OAAO,EAAE;gBAC3B,UAAU,CAAC,OAAO,EAAE;AACpB,gBAAA,UAAU,CAAC,OAAO,GAAG,IAAI;YAC7B;iBAAO;gBACH,GAAG,CAAC,QAAQ,CAAC;YACjB;QACJ;aAAO,IAAI,GAAG,EAAE;AACV,YAAA,GAAwC,CAAC,OAAO,GAAG,QAAQ;QACjE;AACJ,IAAA,CAAC,EACD,CAAC,aAAa,CAAC,CAClB;AACL;;ACnCA;;AAEG;MACU,wBAAwB,GAAGzB,mBAAa,CACjD,EAAE;;AC3BA,SAAU,WAAW,CAAU,GAAQ,EAAA;AACzC,IAAA,QACI,GAAG;QACH,OAAO,GAAG,KAAK,QAAQ;AACvB,QAAA,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,SAAS,CAAC;AAE5D;;ACkBM,SAAU,gBAAgB,CAI5B,SAAwD,EACxD,WAE+C,EAC/C,KAAiD,EACjD,mBAAyD,EACzD,yBAA+B,EAC/B,KAAe,EAAA;IAEf,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,GAAGS,gBAAU,CAAC,aAAa,CAAC;AAC3D,IAAA,MAAM,WAAW,GAAGA,gBAAU,CAAC,WAAW,CAAC;AAC3C,IAAA,MAAM,eAAe,GAAGA,gBAAU,CAAC,eAAe,CAAC;AACnD,IAAA,MAAM,YAAY,GAAGA,gBAAU,CAAC,mBAAmB,CAAC;AACpD,IAAA,MAAM,mBAAmB,GAAG,YAAY,CAAC,aAAa;AACtD,IAAA,MAAM,cAAc,GAAG,YAAY,CAAC,cAAc;AAElD,IAAA,MAAM,gBAAgB,GAAGR,YAAM,CAErB,IAAI,CAAC;AAEf;;;AAGG;AACH,IAAA,MAAM,cAAc,GAAGA,YAAM,CAAC,KAAK,CAAC;AAEpC;;AAEG;IACH,mBAAmB;QACf,mBAAmB;YAClB,WAAW,CAAC,QAAgD;AAEjE,IAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,IAAI,mBAAmB,EAAE;AAClD,QAAA,gBAAgB,CAAC,OAAO,GAAG,mBAAmB,CAAC,SAAS,EAAE;YACtD,WAAW;YACX,MAAM;YACN,KAAK;YACL,eAAe;AACf,YAAA,qBAAqB,EAAE;AACnB,kBAAE,eAAe,CAAC,OAAO,KAAK;AAC9B,kBAAE,KAAK;YACX,mBAAmB;YACnB,cAAc;YACd,KAAK;AACR,SAAA,CAAC;AAEF;;;;;AAKG;QACH,IAAI,cAAc,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,EAAE;AACpD,YAAA,gBAAgB,CAAC,OAAO,CAAC,sBAAsB,GAAG,IAAI;QAC1D;IACJ;AAEA,IAAA,MAAM,aAAa,GAAG,gBAAgB,CAAC,OAAO;AAE9C;;;AAGG;AACH,IAAA,MAAM,wBAAwB,GAAGQ,gBAAU,CAAC,wBAAwB,CAAC;AAErE,IAAA,IACI,aAAa;QACb,CAAC,aAAa,CAAC,UAAU;QACzB,yBAAyB;AACzB,SAAC,aAAa,CAAC,IAAI,KAAK,MAAM,IAAI,aAAa,CAAC,IAAI,KAAK,KAAK,CAAC,EACjE;QACE,oBAAoB,CAChB,gBAAgB,CAAC,OAAQ,EACzB,KAAK,EACL,yBAAyB,EACzB,wBAAwB,CAC3B;IACL;AAEA,IAAA,MAAM,SAAS,GAAGR,YAAM,CAAC,KAAK,CAAC;IAC/BuB,wBAAkB,CAAC,MAAK;AACpB;;;AAGG;AACH,QAAA,IAAI,aAAa,IAAI,SAAS,CAAC,OAAO,EAAE;AACpC,YAAA,aAAa,CAAC,MAAM,CAAC,KAAK,EAAE,eAAe,CAAC;QAChD;AACJ,IAAA,CAAC,CAAC;AAEF;;;AAGG;AACH,IAAA,MAAM,iBAAiB,GACnB,KAAK,CAACE,sCAAkD,CAAC;AAC7D,IAAA,MAAM,YAAY,GAAGzB,YAAM,CACvB,OAAO,CAAC,iBAAiB,CAAC;QACtB,OAAO,MAAM,KAAK,WAAW;AAC7B,QAAA,CAAC,MAAM,CAAC,uBAAuB,GAAG,iBAAiB,CAAC;AACpD,QAAA,MAAM,CAAC,2BAA2B,GAAG,iBAAiB,CAAC,CAC9D;IAED,yBAAyB,CAAC,MAAK;AAC3B;;;AAGG;AACH,QAAA,cAAc,CAAC,OAAO,GAAG,IAAI;AAE7B,QAAA,IAAI,CAAC,aAAa;YAAE;AAEpB,QAAA,SAAS,CAAC,OAAO,GAAG,IAAI;AACxB,QAAA,MAAM,CAAC,eAAe,GAAG,IAAI;QAE7B,aAAa,CAAC,cAAc,EAAE;QAC9B,aAAa,CAAC,uBAAuB,EAAE;AAEvC;;;;;;;;;AASG;QACH,IAAI,YAAY,CAAC,OAAO,IAAI,aAAa,CAAC,cAAc,EAAE;AACtD,YAAA,aAAa,CAAC,cAAc,CAAC,cAAc,EAAE;QACjD;AACJ,IAAA,CAAC,CAAC;IAEFE,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,aAAa;YAAE;QAEpB,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,aAAa,CAAC,cAAc,EAAE;AACvD,YAAA,aAAa,CAAC,cAAc,CAAC,cAAc,EAAE;QACjD;AAEA,QAAA,IAAI,YAAY,CAAC,OAAO,EAAE;;YAEtB,cAAc,CAAC,MAAK;AAChB,gBAAA,MAAM,CAAC,2BAA2B,GAAG,iBAAiB,CAAC;AAC3D,YAAA,CAAC,CAAC;AAEF,YAAA,YAAY,CAAC,OAAO,GAAG,KAAK;QAChC;AAEA;;;AAGG;AACH,QAAA,aAAa,CAAC,gBAAgB,GAAG,SAAS;AAC9C,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,aAAc;AACzB;AAEA,SAAS,oBAAoB,CACzB,aAAiC,EACjC,KAAkB,EAClB,yBAA8B,EAC9B,sBAA+C,EAAA;AAE/C,IAAA,MAAM,EACF,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,eAAe,EACf,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,eAAe,GAClB,GAAG,KAAK;AAET,IAAA,aAAa,CAAC,UAAU,GAAG,IAAI,yBAAyB,CACpD,aAAa,CAAC,YAAY,EAC1B,KAAK,CAAC,uBAAuB;AACzB,UAAE;UACA,wBAAwB,CAAC,aAAa,CAAC,MAAM,CAAC,CACpC;AAEpB,IAAA,aAAa,CAAC,UAAU,CAAC,UAAU,CAAC;QAChC,QAAQ;QACR,MAAM;AACN,QAAA,mBAAmB,EACf,OAAO,CAAC,IAAI,CAAC,KAAK,eAAe,IAAI,WAAW,CAAC,eAAe,CAAC,CAAC;QACtE,aAAa;AACb;;;;;;AAMG;AACH,QAAA,aAAa,EAAE,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;QAC3D,sBAAsB;AACtB,QAAA,SAAS,EAAE,eAAe;QAC1B,YAAY;QACZ,UAAU;QACV,YAAY;AACf,KAAA,CAAC;AACN;AAEA,SAAS,wBAAwB,CAC7B,aAIC,EAAA;AAED,IAAA,IAAI,CAAC,aAAa;AAAE,QAAA,OAAO,SAAS;AAEpC,IAAA,OAAO,aAAa,CAAC,OAAO,CAAC,eAAe,KAAK;UAC3C,aAAa,CAAC;AAChB,UAAE,wBAAwB,CAAC,aAAa,CAAC,MAAM,CAAC;AACxD;;AC3LA;;;;;;;;AAQG;SACa,qBAAqB,CAIjC,SAAwD,EACxD,EAAE,kBAAkB,GAAG,KAAK,EAAE,IAAI,EAAA,GAA6B,EAAE,EACjE,iBAAmC,EACnC,mBAAyD,EAAA;AAEzD,IAAA,iBAAiB,IAAI,YAAY,CAAC,iBAAiB,CAAC;AAEpD;;;;AAIG;AACH,IAAA,MAAM,KAAK,GAAG,IAAI,GAAG,IAAI,KAAK,KAAK,GAAG,cAAc,CAAC,SAAS,CAAC;IAC/D,MAAM,cAAc,GAAG,KAAK,GAAG,iBAAiB,GAAG,kBAAkB;AAErE,IAAA,SAAS,kBAAkB,CACvB,KAAkC,EAClC,WAAiD,EAAA;AAEjD;;;AAGG;AACH,QAAA,IAAI,aAA2D;AAE/D,QAAA,MAAM,cAAc,GAAG;YACnB,GAAGM,gBAAU,CAAC,mBAAmB,CAAC;AAClC,YAAA,GAAG,KAAK;AACR,YAAA,QAAQ,EAAE,WAAW,CAAC,KAAK,CAAC;SAC/B;AAED,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc;AAEnC,QAAA,MAAM,OAAO,GAAG,sBAAsB,CAA2B,KAAK,CAAC;QAEvE,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC;QAEnD,IAAI,CAAC,QAAQ,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAC5C,YAAA,aAAa,CAAC,cAAc,EAAE,iBAAiB,CAAC;AAEhD,YAAA,MAAM,gBAAgB,GAAG,0BAA0B,CAAC,cAAc,CAAC;AACnE,YAAA,aAAa,GAAG,gBAAgB,CAAC,aAAa;AAE9C;;;;;AAKG;AACH,YAAA,OAAO,CAAC,aAAa,GAAG,gBAAgB,CACpC,SAAS,EACT,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,gBAAgB,CAAC,cAAc,EAC/B,KAAK,CACR;QACL;AAEA;;;AAGG;AACH,QAAA,QACIkB,eAAA,CAAC,aAAa,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EAAA,CACjC,aAAa,IAAI,OAAO,CAAC,aAAa,IACnCC,cAAA,CAAC,aAAa,EAAA,EACV,aAAa,EAAE,OAAO,CAAC,aAAa,EAAA,GAChC,cAAc,EAAA,CACpB,IACF,IAAI,EACP,SAAS,CACN,SAAS,EACT,KAAK,EACL,YAAY,CAGV,WAAW,EAAE,OAAO,CAAC,aAAa,EAAE,WAAW,CAAC,EAClD,WAAW,EACX,QAAQ,EACR,kBAAkB,EAClB,KAAK,CACR,CAAA,EAAA,CACoB;IAEjC;AAEA,IAAA,kBAAkB,CAAC,WAAW,GAAG,UAC7B,OAAO,SAAS,KAAK;AACjB,UAAE;AACF,UAAE,CAAA,OAAA,EAAU,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,EAAE,CAAA,CAAA,CACjE,EAAE;AAEF,IAAA,MAAM,yBAAyB,GAAGC,gBAAU,CAAC,kBAAyB,CAAC;AACrE,IAAA,yBAAiC,CAAC,qBAAqB,CAAC,GAAG,SAAS;AAEtE,IAAA,OAAO,yBAA4D;AACvE;AAEA,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAe,EAAA;IAC1C,MAAM,aAAa,GAAGpB,gBAAU,CAAC,kBAAkB,CAAC,CAAC,EAAE;AACvD,IAAA,OAAO,aAAa,IAAI,QAAQ,KAAK;AACjC,UAAE,aAAa,GAAG,GAAG,GAAG;UACtB,QAAQ;AAClB;AAEA,SAAS,aAAa,CAClB,cAA2B,EAC3B,iBAAmC,EAAA;IAEnC,MAAM,QAAQ,GAAGA,gBAAU,CAAC,WAAW,CAAC,CAAC,MAAM;AAE/C;;;AAGG;AACH,IAAA,IACI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;QACrC,iBAAiB;AACjB,QAAA,QAAQ,EACV;QACE,MAAM,aAAa,GACf,kJAAkJ;AACtJ,QAAA,cAAc,CAAC;cACTqB,mBAAO,CAAC,KAAK,EAAE,aAAa,EAAE,kBAAkB;cAChDC,qBAAS,CAAC,KAAK,EAAE,aAAa,EAAE,kBAAkB,CAAC;IAC7D;AACJ;AAEA,SAAS,0BAA0B,CAAC,KAAkB,EAAA;AAClD,IAAA,MAAM,kBAAkB,GAAG,gCAAgC,EAAE;AAC7D,IAAA,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,kBAAkB;AAE3C,IAAA,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,EAAE;IAE/B,MAAM,QAAQ,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,MAAM,EAAE;IAEvC,OAAO;AACH,QAAA,aAAa,EACT,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,MAAM,EAAE,SAAS,CAAC,KAAK;cAC3C,QAAQ,CAAC;AACX,cAAE,SAAS;QACnB,cAAc,EAAE,QAAQ,CAAC,cAAc;KAC1C;AACL;;;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/node_modules/.pnpm/framer-motion@12.40.0/node_modules/framer-motion/dist/cjs/index.js b/node_modules/.pnpm/framer-motion@12.40.0/node_modules/framer-motion/dist/cjs/index.js
deleted file mode 100644
index 42ab6019..00000000
--- a/node_modules/.pnpm/framer-motion@12.40.0/node_modules/framer-motion/dist/cjs/index.js
+++ /dev/null
@@ -1,3706 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var index = require('./index-6W16WHlG.js');
-var motionDom = require('motion-dom');
-var featureBundle = require('./feature-bundle-frRcWALD.js');
-var motionUtils = require('motion-utils');
-
-function _interopNamespaceDefault(e) {
- var n = Object.create(null);
- if (e) {
- Object.keys(e).forEach(function (k) {
- if (k !== 'default') {
- var d = Object.getOwnPropertyDescriptor(e, k);
- Object.defineProperty(n, k, d.get ? d : {
- enumerable: true,
- get: function () { return e[k]; }
- });
- }
- });
- }
- n.default = e;
- return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-/**
- * Taken from https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx
- */
-/**
- * Set a given ref to a given value
- * This utility takes care of different types of refs: callback refs and RefObject(s)
- */
-function setRef(ref, value) {
- if (typeof ref === "function") {
- return ref(value);
- }
- else if (ref !== null && ref !== undefined) {
- ref.current = value;
- }
-}
-/**
- * A utility to compose multiple refs together
- * Accepts callback refs and RefObject(s)
- */
-function composeRefs(...refs) {
- return (node) => {
- let hasCleanup = false;
- const cleanups = refs.map((ref) => {
- const cleanup = setRef(ref, node);
- if (!hasCleanup && typeof cleanup === "function") {
- hasCleanup = true;
- }
- return cleanup;
- });
- // React <19 will log an error to the console if a callback ref returns a
- // value. We don't use ref cleanups internally so this will only happen if a
- // user's ref callback returns a value, which we only expect if they are
- // using the cleanup functionality added in React 19.
- if (hasCleanup) {
- return () => {
- for (let i = 0; i < cleanups.length; i++) {
- const cleanup = cleanups[i];
- if (typeof cleanup === "function") {
- cleanup();
- }
- else {
- setRef(refs[i], null);
- }
- }
- };
- }
- };
-}
-/**
- * A custom hook that composes multiple refs
- * Accepts callback refs and RefObject(s)
- */
-function useComposedRefs(...refs) {
- // eslint-disable-next-line react-hooks/exhaustive-deps
- return React__namespace.useCallback(composeRefs(...refs), refs);
-}
-
-/**
- * Measurement functionality has to be within a separate component
- * to leverage snapshot lifecycle.
- */
-class PopChildMeasure extends React__namespace.Component {
- getSnapshotBeforeUpdate(prevProps) {
- const element = this.props.childRef.current;
- if (motionDom.isHTMLElement(element) && prevProps.isPresent && !this.props.isPresent && this.props.pop !== false) {
- const parent = element.offsetParent;
- const parentWidth = motionDom.isHTMLElement(parent)
- ? parent.offsetWidth || 0
- : 0;
- const parentHeight = motionDom.isHTMLElement(parent)
- ? parent.offsetHeight || 0
- : 0;
- const computedStyle = getComputedStyle(element);
- const size = this.props.sizeRef.current;
- size.height = parseFloat(computedStyle.height);
- size.width = parseFloat(computedStyle.width);
- size.top = element.offsetTop;
- size.left = element.offsetLeft;
- size.right = parentWidth - size.width - size.left;
- size.bottom = parentHeight - size.height - size.top;
- size.direction = computedStyle.direction;
- }
- return null;
- }
- /**
- * Required with getSnapshotBeforeUpdate to stop React complaining.
- */
- componentDidUpdate() { }
- render() {
- return this.props.children;
- }
-}
-function PopChild({ children, isPresent, anchorX, anchorY, root, pop }) {
- const id = React.useId();
- const ref = React.useRef(null);
- const size = React.useRef({
- width: 0,
- height: 0,
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- direction: "ltr",
- });
- const { nonce } = React.useContext(index.MotionConfigContext);
- /**
- * In React 19, refs are passed via props.ref instead of element.ref.
- * We check props.ref first (React 19) and fall back to element.ref (React 18).
- */
- const childRef = children.props?.ref ??
- children?.ref;
- const composedRef = useComposedRefs(ref, childRef);
- /**
- * We create and inject a style block so we can apply this explicit
- * sizing in a non-destructive manner by just deleting the style block.
- *
- * We can't apply size via render as the measurement happens
- * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
- * styles directly on the DOM node, we might be overwriting
- * styles set via the style prop.
- */
- React.useInsertionEffect(() => {
- const { width, height, top, left, right, bottom, direction } = size.current;
- if (isPresent || pop === false || !ref.current || !width || !height)
- return;
- const isRTL = direction === "rtl";
- const x = anchorX === "left"
- ? (isRTL ? `right: ${right}` : `left: ${left}`)
- : (isRTL ? `left: ${left}` : `right: ${right}`);
- const y = anchorY === "bottom" ? `bottom: ${bottom}` : `top: ${top}`;
- ref.current.dataset.motionPopId = id;
- const style = document.createElement("style");
- if (nonce)
- style.nonce = nonce;
- const parent = root ?? document.head;
- parent.appendChild(style);
- if (style.sheet) {
- style.sheet.insertRule(`
- [data-motion-pop-id="${id}"] {
- position: absolute !important;
- width: ${width}px !important;
- height: ${height}px !important;
- ${x}px !important;
- ${y}px !important;
- }
- `);
- }
- return () => {
- ref.current?.removeAttribute("data-motion-pop-id");
- if (parent.contains(style)) {
- parent.removeChild(style);
- }
- };
- }, [isPresent]);
- return (jsxRuntime.jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, pop: pop, children: pop === false
- ? children
- : React__namespace.cloneElement(children, { ref: composedRef }) }));
-}
-
-const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, anchorY, root }) => {
- const presenceChildren = index.useConstant(newChildrenMap);
- const id = React.useId();
- let isReusedContext = true;
- let context = React.useMemo(() => {
- isReusedContext = false;
- return {
- id,
- initial,
- isPresent,
- custom,
- onExitComplete: (childId) => {
- presenceChildren.set(childId, true);
- for (const isComplete of presenceChildren.values()) {
- if (!isComplete)
- return; // can stop searching when any is incomplete
- }
- onExitComplete && onExitComplete();
- },
- register: (childId) => {
- presenceChildren.set(childId, false);
- return () => presenceChildren.delete(childId);
- },
- };
- }, [isPresent, presenceChildren, onExitComplete]);
- /**
- * If the presence of a child affects the layout of the components around it,
- * we want to make a new context value to ensure they get re-rendered
- * so they can detect that layout change.
- */
- if (presenceAffectsLayout && isReusedContext) {
- context = { ...context };
- }
- React.useMemo(() => {
- presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
- }, [isPresent]);
- /**
- * If there's no `motion` components to fire exit animations, we want to remove this
- * component immediately.
- */
- React__namespace.useEffect(() => {
- !isPresent &&
- !presenceChildren.size &&
- onExitComplete &&
- onExitComplete();
- }, [isPresent]);
- children = (jsxRuntime.jsx(PopChild, { pop: mode === "popLayout", isPresent: isPresent, anchorX: anchorX, anchorY: anchorY, root: root, children: children }));
- return (jsxRuntime.jsx(index.PresenceContext.Provider, { value: context, children: children }));
-};
-function newChildrenMap() {
- return new Map();
-}
-
-const getChildKey = (child) => child.key || "";
-function onlyElements(children) {
- const filtered = [];
- // We use forEach here instead of map as map mutates the component key by preprending `.$`
- React.Children.forEach(children, (child) => {
- if (React.isValidElement(child))
- filtered.push(child);
- });
- return filtered;
-}
-
-/**
- * `AnimatePresence` enables the animation of components that have been removed from the tree.
- *
- * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
- *
- * Any `motion` components that have an `exit` property defined will animate out when removed from
- * the tree.
- *
- * ```jsx
- * import { motion, AnimatePresence } from 'framer-motion'
- *
- * export const Items = ({ items }) => (
- *
- * {items.map(item => (
- *
- * ))}
- *
- * )
- * ```
- *
- * You can sequence exit animations throughout a tree using variants.
- *
- * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
- * once all `motion` components have finished animating out. Likewise, any components using
- * `usePresence` all need to call `safeToRemove`.
- *
- * @public
- */
-const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", anchorY = "top", root }) => {
- const [isParentPresent, safeToRemove] = featureBundle.usePresence(propagate);
- /**
- * Filter any children that aren't ReactElements. We can only track components
- * between renders with a props.key.
- */
- const presentChildren = React.useMemo(() => onlyElements(children), [children]);
- /**
- * Track the keys of the currently rendered children. This is used to
- * determine which children are exiting.
- */
- const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
- /**
- * If `initial={false}` we only want to pass this to components in the first render.
- */
- const isInitialRender = React.useRef(true);
- /**
- * A ref containing the currently present children. When all exit animations
- * are complete, we use this to re-render the component with the latest children
- * *committed* rather than the latest children *rendered*.
- */
- const pendingPresentChildren = React.useRef(presentChildren);
- /**
- * Track which exiting children have finished animating out.
- */
- const exitComplete = index.useConstant(() => new Map());
- /**
- * Track which components are currently processing exit to prevent duplicate processing.
- */
- const exitingComponents = React.useRef(new Set());
- /**
- * Save children to render as React state. To ensure this component is concurrent-safe,
- * we check for exiting children via an effect.
- */
- const [diffedChildren, setDiffedChildren] = React.useState(presentChildren);
- const [renderedChildren, setRenderedChildren] = React.useState(presentChildren);
- index.useIsomorphicLayoutEffect(() => {
- isInitialRender.current = false;
- pendingPresentChildren.current = presentChildren;
- /**
- * Update complete status of exiting children.
- */
- for (let i = 0; i < renderedChildren.length; i++) {
- const key = getChildKey(renderedChildren[i]);
- if (!presentKeys.includes(key)) {
- if (exitComplete.get(key) !== true) {
- exitComplete.set(key, false);
- }
- }
- else {
- exitComplete.delete(key);
- exitingComponents.current.delete(key);
- }
- }
- }, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
- const exitingChildren = [];
- if (presentChildren !== diffedChildren) {
- let nextChildren = [...presentChildren];
- /**
- * Loop through all the currently rendered components and decide which
- * are exiting.
- */
- for (let i = 0; i < renderedChildren.length; i++) {
- const child = renderedChildren[i];
- const key = getChildKey(child);
- if (!presentKeys.includes(key)) {
- nextChildren.splice(i, 0, child);
- exitingChildren.push(child);
- }
- }
- /**
- * If we're in "wait" mode, and we have exiting children, we want to
- * only render these until they've all exited.
- */
- if (mode === "wait" && exitingChildren.length) {
- nextChildren = exitingChildren;
- }
- setRenderedChildren(onlyElements(nextChildren));
- setDiffedChildren(presentChildren);
- /**
- * Early return to ensure once we've set state with the latest diffed
- * children, we can immediately re-render.
- */
- return null;
- }
- if (process.env.NODE_ENV !== "production" &&
- mode === "wait" &&
- renderedChildren.length > 1) {
- console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
- }
- /**
- * If we've been provided a forceRender function by the LayoutGroupContext,
- * we can use it to force a re-render amongst all surrounding components once
- * all components have finished animating out.
- */
- const { forceRender } = React.useContext(index.LayoutGroupContext);
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderedChildren.map((child) => {
- const key = getChildKey(child);
- const isPresent = propagate && !isParentPresent
- ? false
- : presentChildren === renderedChildren ||
- presentKeys.includes(key);
- const onExit = () => {
- if (exitingComponents.current.has(key)) {
- return;
- }
- if (exitComplete.has(key)) {
- exitingComponents.current.add(key);
- exitComplete.set(key, true);
- }
- else {
- return;
- }
- let isEveryExitComplete = true;
- exitComplete.forEach((isExitComplete) => {
- if (!isExitComplete)
- isEveryExitComplete = false;
- });
- if (isEveryExitComplete) {
- forceRender?.();
- setRenderedChildren(pendingPresentChildren.current);
- propagate && safeToRemove?.();
- onExitComplete && onExitComplete();
- }
- };
- return (jsxRuntime.jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial
- ? undefined
- : false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, root: root, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, anchorY: anchorY, children: child }, key));
- }) }));
-};
-
-/**
- * Note: Still used by components generated by old versions of Framer
- *
- * @deprecated
- */
-const DeprecatedLayoutGroupContext = React.createContext(null);
-
-function useIsMounted() {
- const isMounted = React.useRef(false);
- index.useIsomorphicLayoutEffect(() => {
- isMounted.current = true;
- return () => {
- isMounted.current = false;
- };
- }, []);
- return isMounted;
-}
-
-function useForceUpdate() {
- const isMounted = useIsMounted();
- const [forcedRenderCount, setForcedRenderCount] = React.useState(0);
- const forceRender = React.useCallback(() => {
- isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
- }, [forcedRenderCount]);
- /**
- * Defer this to the end of the next animation frame in case there are multiple
- * synchronous calls.
- */
- const deferredForceRender = React.useCallback(() => motionDom.frame.postRender(forceRender), [forceRender]);
- return [deferredForceRender, forcedRenderCount];
-}
-
-const shouldInheritGroup = (inherit) => inherit === true;
-const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
-const LayoutGroup = ({ children, id, inherit = true }) => {
- const layoutGroupContext = React.useContext(index.LayoutGroupContext);
- const deprecatedLayoutGroupContext = React.useContext(DeprecatedLayoutGroupContext);
- const [forceRender, key] = useForceUpdate();
- const context = React.useRef(null);
- const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
- if (context.current === null) {
- if (shouldInheritId(inherit) && upstreamId) {
- id = id ? upstreamId + "-" + id : upstreamId;
- }
- context.current = {
- id,
- group: shouldInheritGroup(inherit)
- ? layoutGroupContext.group || motionDom.nodeGroup()
- : motionDom.nodeGroup(),
- };
- }
- const memoizedContext = React.useMemo(() => ({ ...context.current, forceRender }), [key]);
- return (jsxRuntime.jsx(index.LayoutGroupContext.Provider, { value: memoizedContext, children: children }));
-};
-
-/**
- * Used in conjunction with the `m` component to reduce bundle size.
- *
- * `m` is a version of the `motion` component that only loads functionality
- * critical for the initial render.
- *
- * `LazyMotion` can then be used to either synchronously or asynchronously
- * load animation and gesture support.
- *
- * ```jsx
- * // Synchronous loading
- * import { LazyMotion, m, domAnimation } from "framer-motion"
- *
- * function App() {
- * return (
- *
- *
- *
- * )
- * }
- *
- * // Asynchronous loading
- * import { LazyMotion, m } from "framer-motion"
- *
- * function App() {
- * return (
- * import('./path/to/domAnimation')}>
- *
- *
- * )
- * }
- * ```
- *
- * @public
- */
-function LazyMotion({ children, features, strict = false }) {
- const [, setIsLoaded] = React.useState(!isLazyBundle(features));
- const loadedRenderer = React.useRef(undefined);
- /**
- * If this is a synchronous load, load features immediately
- */
- if (!isLazyBundle(features)) {
- const { renderer, ...loadedFeatures } = features;
- loadedRenderer.current = renderer;
- index.loadFeatures(loadedFeatures);
- }
- React.useEffect(() => {
- if (isLazyBundle(features)) {
- features().then(({ renderer, ...loadedFeatures }) => {
- index.loadFeatures(loadedFeatures);
- loadedRenderer.current = renderer;
- setIsLoaded(true);
- });
- }
- }, []);
- return (jsxRuntime.jsx(index.LazyContext.Provider, { value: { renderer: loadedRenderer.current, strict }, children: children }));
-}
-function isLazyBundle(features) {
- return typeof features === "function";
-}
-
-/**
- * `MotionConfig` is used to set configuration options for all children `motion` components.
- *
- * ```jsx
- * import { motion, MotionConfig } from "framer-motion"
- *
- * export function App() {
- * return (
- *
- *
- *
- * )
- * }
- * ```
- *
- * @public
- */
-function MotionConfig({ children, isValidProp, ...config }) {
- isValidProp && index.loadExternalIsValidProp(isValidProp);
- /**
- * Inherit props from any parent MotionConfig components
- */
- const parentConfig = React.useContext(index.MotionConfigContext);
- config = { ...parentConfig, ...config };
- config.transition = motionDom.resolveTransition(config.transition, parentConfig.transition);
- /**
- * Don't allow isStatic to change between renders as it affects how many hooks
- * motion components fire.
- */
- config.isStatic = index.useConstant(() => config.isStatic);
- /**
- * Creating a new config context object will re-render every `motion` component
- * every time it renders. So we only want to create a new one sparingly.
- */
- const context = React.useMemo(() => config, [
- JSON.stringify(config.transition),
- config.transformPagePoint,
- config.reducedMotion,
- config.skipAnimations,
- ]);
- return (jsxRuntime.jsx(index.MotionConfigContext.Provider, { value: context, children: children }));
-}
-
-const ReorderContext = React.createContext(null);
-
-function createMotionProxy(preloadedFeatures, createVisualElement) {
- if (typeof Proxy === "undefined") {
- return index.createMotionComponent;
- }
- /**
- * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
- * Rather than generating them anew every render.
- */
- const componentCache = new Map();
- const factory = (Component, options) => {
- return index.createMotionComponent(Component, options, preloadedFeatures, createVisualElement);
- };
- /**
- * Support for deprecated`motion(Component)` pattern
- */
- const deprecatedFactoryFunction = (Component, options) => {
- if (process.env.NODE_ENV !== "production") {
- motionUtils.warnOnce(false, "motion() is deprecated. Use motion.create() instead.");
- }
- return factory(Component, options);
- };
- return new Proxy(deprecatedFactoryFunction, {
- /**
- * 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 (key === "create")
- return factory;
- /**
- * If this element doesn't exist in the component cache, create it and cache.
- */
- if (!componentCache.has(key)) {
- componentCache.set(key, index.createMotionComponent(key, undefined, preloadedFeatures, createVisualElement));
- }
- return componentCache.get(key);
- },
- });
-}
-
-const motion = /*@__PURE__*/ createMotionProxy(featureBundle.featureBundle, featureBundle.createDomVisualElement);
-
-function checkReorder(order, value, offset, velocity) {
- if (!velocity)
- return order;
- const index = order.findIndex((item) => item.value === value);
- if (index === -1)
- return order;
- const nextOffset = velocity > 0 ? 1 : -1;
- const nextItem = order[index + nextOffset];
- if (!nextItem)
- return order;
- const item = order[index];
- const nextLayout = nextItem.layout;
- const nextItemCenter = motionDom.mixNumber(nextLayout.min, nextLayout.max, 0.5);
- if ((nextOffset === 1 && item.layout.max + offset > nextItemCenter) ||
- (nextOffset === -1 && item.layout.min + offset < nextItemCenter)) {
- return motionUtils.moveItem(order, index, index + nextOffset);
- }
- return order;
-}
-
-function ReorderGroupComponent({ children, as = "ul", axis = "y", onReorder, values, ...props }, externalRef) {
- const Component = index.useConstant(() => motion[as]);
- const order = [];
- const isReordering = React.useRef(false);
- const groupRef = React.useRef(null);
- motionUtils.invariant(Boolean(values), "Reorder.Group must be provided a values prop", "reorder-values");
- const context = {
- axis,
- groupRef,
- registerItem: (value, layout) => {
- // If the entry was already added, update it rather than adding it again
- const idx = order.findIndex((entry) => value === entry.value);
- if (idx !== -1) {
- order[idx].layout = layout[axis];
- }
- else {
- order.push({ value: value, layout: layout[axis] });
- }
- order.sort(compareMin);
- },
- updateOrder: (item, offset, velocity) => {
- if (isReordering.current)
- return;
- const newOrder = checkReorder(order, item, offset, velocity);
- if (order !== newOrder) {
- isReordering.current = true;
- // Find which two values swapped and apply that swap
- // to the full values array. This preserves unmeasured
- // items (e.g. in virtualized lists).
- const newValues = [...values];
- for (let i = 0; i < newOrder.length; i++) {
- if (order[i].value !== newOrder[i].value) {
- const a = values.indexOf(order[i].value);
- const b = values.indexOf(newOrder[i].value);
- if (a !== -1 && b !== -1) {
- [newValues[a], newValues[b]] = [newValues[b], newValues[a]];
- }
- break;
- }
- }
- onReorder(newValues);
- }
- },
- };
- React.useEffect(() => {
- isReordering.current = false;
- });
- // Combine refs if external ref is provided
- const setRef = (element) => {
- groupRef.current = element;
- if (typeof externalRef === "function") {
- externalRef(element);
- }
- else if (externalRef) {
- externalRef.current = element;
- }
- };
- /**
- * Disable browser scroll anchoring on the group container.
- * When items reorder, scroll anchoring can cause the browser to adjust
- * the scroll position, which interferes with drag position calculations.
- */
- const groupStyle = {
- overflowAnchor: "none",
- ...props.style,
- };
- return (jsxRuntime.jsx(Component, { ...props, style: groupStyle, ref: setRef, ignoreStrict: true, children: jsxRuntime.jsx(ReorderContext.Provider, { value: context, children: children }) }));
-}
-const ReorderGroup = /*@__PURE__*/ React.forwardRef(ReorderGroupComponent);
-function compareMin(a, b) {
- return a.layout.min - b.layout.min;
-}
-
-/**
- * Creates a `MotionValue` to track the state and velocity of a value.
- *
- * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
- *
- * ```jsx
- * export const MyComponent = () => {
- * const scale = useMotionValue(1)
- *
- * return
- * }
- * ```
- *
- * @param initial - The initial state.
- *
- * @public
- */
-function useMotionValue(initial) {
- const value = index.useConstant(() => motionDom.motionValue(initial));
- /**
- * If this motion value is being used in static mode, like on
- * the Framer canvas, force components to rerender when the motion
- * value is updated.
- */
- const { isStatic } = React.useContext(index.MotionConfigContext);
- if (isStatic) {
- const [, setLatest] = React.useState(initial);
- React.useEffect(() => value.on("change", setLatest), []);
- }
- return value;
-}
-
-function useCombineMotionValues(values, combineValues) {
- /**
- * Initialise the returned motion value. This remains the same between renders.
- */
- const value = useMotionValue(combineValues());
- /**
- * Create a function that will update the template motion value with the latest values.
- * This is pre-bound so whenever a motion value updates it can schedule its
- * execution in Framesync. If it's already been scheduled it won't be fired twice
- * in a single frame.
- */
- const updateValue = () => value.set(combineValues());
- /**
- * Synchronously update the motion value with the latest values during the render.
- * This ensures that within a React render, the styles applied to the DOM are up-to-date.
- */
- updateValue();
- /**
- * Subscribe to all motion values found within the template. Whenever any of them change,
- * schedule an update.
- */
- index.useIsomorphicLayoutEffect(() => {
- const scheduleUpdate = () => motionDom.frame.preRender(updateValue, false, true);
- const subscriptions = values.map((v) => v.on("change", scheduleUpdate));
- return () => {
- subscriptions.forEach((unsubscribe) => unsubscribe());
- motionDom.cancelFrame(updateValue);
- };
- });
- return value;
-}
-
-function useComputed(compute) {
- /**
- * Open session of collectMotionValues. Any MotionValue that calls get()
- * will be saved into this array.
- */
- motionDom.collectMotionValues.current = [];
- compute();
- const value = useCombineMotionValues(motionDom.collectMotionValues.current, compute);
- /**
- * Synchronously close session of collectMotionValues.
- */
- motionDom.collectMotionValues.current = undefined;
- return value;
-}
-
-function useTransform(input, inputRangeOrTransformer, outputRangeOrMap, options) {
- if (typeof input === "function") {
- return useComputed(input);
- }
- /**
- * Detect if outputRangeOrMap is an output map (object with keys)
- * rather than an output range (array).
- */
- const isOutputMap = outputRangeOrMap !== undefined &&
- !Array.isArray(outputRangeOrMap) &&
- typeof inputRangeOrTransformer !== "function";
- if (isOutputMap) {
- return useMapTransform(input, inputRangeOrTransformer, outputRangeOrMap, options);
- }
- const outputRange = outputRangeOrMap;
- const transformer = typeof inputRangeOrTransformer === "function"
- ? inputRangeOrTransformer
- : motionDom.transform(inputRangeOrTransformer, outputRange, options);
- const result = Array.isArray(input)
- ? useListTransform(input, transformer)
- : useListTransform([input], ([latest]) => transformer(latest));
- const inputAccelerate = !Array.isArray(input)
- ? input.accelerate
- : undefined;
- if (inputAccelerate &&
- !inputAccelerate.isTransformed &&
- typeof inputRangeOrTransformer !== "function" &&
- Array.isArray(outputRangeOrMap) &&
- options?.clamp !== false) {
- result.accelerate = {
- ...inputAccelerate,
- times: inputRangeOrTransformer,
- keyframes: outputRangeOrMap,
- isTransformed: true,
- ...(options?.ease ? { ease: options.ease } : {}),
- };
- }
- return result;
-}
-function useListTransform(values, transformer) {
- const latest = index.useConstant(() => []);
- return useCombineMotionValues(values, () => {
- latest.length = 0;
- const numValues = values.length;
- for (let i = 0; i < numValues; i++) {
- latest[i] = values[i].get();
- }
- return transformer(latest);
- });
-}
-function useMapTransform(inputValue, inputRange, outputMap, options) {
- /**
- * Capture keys once to ensure hooks are called in consistent order.
- */
- const keys = index.useConstant(() => Object.keys(outputMap));
- const output = index.useConstant(() => ({}));
- for (const key of keys) {
- output[key] = useTransform(inputValue, inputRange, outputMap[key], options);
- }
- return output;
-}
-
-const threshold = 50;
-const maxSpeed = 25;
-const overflowStyles = new Set(["auto", "scroll"]);
-// Track initial scroll limits per scrollable element (Bug 1 fix)
-const initialScrollLimits = new WeakMap();
-const activeScrollEdge = new WeakMap();
-// Track which group element is currently dragging to clear state on end
-let currentGroupElement = null;
-function resetAutoScrollState() {
- if (currentGroupElement) {
- const scrollableAncestor = findScrollableAncestor(currentGroupElement, "y");
- if (scrollableAncestor) {
- activeScrollEdge.delete(scrollableAncestor);
- initialScrollLimits.delete(scrollableAncestor);
- }
- // Also try x axis
- const scrollableAncestorX = findScrollableAncestor(currentGroupElement, "x");
- if (scrollableAncestorX && scrollableAncestorX !== scrollableAncestor) {
- activeScrollEdge.delete(scrollableAncestorX);
- initialScrollLimits.delete(scrollableAncestorX);
- }
- currentGroupElement = null;
- }
-}
-function isScrollableElement(element, axis) {
- const style = getComputedStyle(element);
- const overflow = axis === "x" ? style.overflowX : style.overflowY;
- const isDocumentScroll = element === document.body ||
- element === document.documentElement;
- return overflowStyles.has(overflow) || isDocumentScroll;
-}
-function findScrollableAncestor(element, axis) {
- let current = element?.parentElement;
- while (current) {
- if (isScrollableElement(current, axis)) {
- return current;
- }
- current = current.parentElement;
- }
- return null;
-}
-function getScrollAmount(pointerPosition, scrollElement, axis) {
- const rect = scrollElement.getBoundingClientRect();
- const start = axis === "x" ? Math.max(0, rect.left) : Math.max(0, rect.top);
- const end = axis === "x" ? Math.min(window.innerWidth, rect.right) : Math.min(window.innerHeight, rect.bottom);
- const distanceFromStart = pointerPosition - start;
- const distanceFromEnd = end - pointerPosition;
- if (distanceFromStart < threshold) {
- const intensity = 1 - distanceFromStart / threshold;
- return { amount: -maxSpeed * intensity * intensity, edge: "start" };
- }
- else if (distanceFromEnd < threshold) {
- const intensity = 1 - distanceFromEnd / threshold;
- return { amount: maxSpeed * intensity * intensity, edge: "end" };
- }
- return { amount: 0, edge: null };
-}
-function autoScrollIfNeeded(groupElement, pointerPosition, axis, velocity) {
- if (!groupElement)
- return;
- // Track the group element for cleanup
- currentGroupElement = groupElement;
- const scrollableAncestor = findScrollableAncestor(groupElement, axis);
- if (!scrollableAncestor)
- return;
- // Convert pointer position from page coordinates to viewport coordinates.
- // The gesture system uses pageX/pageY but getBoundingClientRect() returns
- // viewport-relative coordinates, so we need to account for page scroll.
- const viewportPointerPosition = pointerPosition - (axis === "x" ? window.scrollX : window.scrollY);
- const { amount: scrollAmount, edge } = getScrollAmount(viewportPointerPosition, scrollableAncestor, axis);
- // If not in any threshold zone, clear all state
- if (edge === null) {
- activeScrollEdge.delete(scrollableAncestor);
- initialScrollLimits.delete(scrollableAncestor);
- return;
- }
- const currentActiveEdge = activeScrollEdge.get(scrollableAncestor);
- const isDocumentScroll = scrollableAncestor === document.body ||
- scrollableAncestor === document.documentElement;
- // If not currently scrolling this edge, check velocity to see if we should start
- if (currentActiveEdge !== edge) {
- // Only start scrolling if velocity is towards the edge
- const shouldStart = (edge === "start" && velocity < 0) ||
- (edge === "end" && velocity > 0);
- if (!shouldStart)
- return;
- // Activate this edge
- activeScrollEdge.set(scrollableAncestor, edge);
- // Record initial scroll limit (prevents infinite scroll)
- const maxScroll = axis === "x"
- ? scrollableAncestor.scrollWidth - (isDocumentScroll ? window.innerWidth : scrollableAncestor.clientWidth)
- : scrollableAncestor.scrollHeight - (isDocumentScroll ? window.innerHeight : scrollableAncestor.clientHeight);
- initialScrollLimits.set(scrollableAncestor, maxScroll);
- }
- // Cap scrolling at initial limit (prevents infinite scroll)
- if (scrollAmount > 0) {
- const initialLimit = initialScrollLimits.get(scrollableAncestor);
- const currentScroll = axis === "x"
- ? (isDocumentScroll ? window.scrollX : scrollableAncestor.scrollLeft)
- : (isDocumentScroll ? window.scrollY : scrollableAncestor.scrollTop);
- if (currentScroll >= initialLimit)
- return;
- }
- // Apply scroll
- if (axis === "x") {
- if (isDocumentScroll) {
- window.scrollBy({ left: scrollAmount });
- }
- else {
- scrollableAncestor.scrollLeft += scrollAmount;
- }
- }
- else {
- if (isDocumentScroll) {
- window.scrollBy({ top: scrollAmount });
- }
- else {
- scrollableAncestor.scrollTop += scrollAmount;
- }
- }
-}
-
-function useDefaultMotionValue(value, defaultValue = 0) {
- return motionDom.isMotionValue(value) ? value : useMotionValue(defaultValue);
-}
-function ReorderItemComponent({ children, style = {}, value, as = "li", onDrag, onDragEnd, layout = true, ...props }, externalRef) {
- const Component = index.useConstant(() => motion[as]);
- const context = React.useContext(ReorderContext);
- const point = {
- x: useDefaultMotionValue(style.x),
- y: useDefaultMotionValue(style.y),
- };
- const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
- motionUtils.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group", "reorder-item-child");
- const { axis, registerItem, updateOrder, groupRef } = context;
- return (jsxRuntime.jsx(Component, { drag: axis, ...props, dragSnapToOrigin: true, style: { ...style, x: point.x, y: point.y, zIndex }, layout: layout, onDrag: (event, gesturePoint) => {
- const { velocity, point: pointerPoint } = gesturePoint;
- const offset = point[axis].get();
- // Always attempt to update order - checkReorder handles the logic
- updateOrder(value, offset, velocity[axis]);
- autoScrollIfNeeded(groupRef.current, pointerPoint[axis], axis, velocity[axis]);
- onDrag && onDrag(event, gesturePoint);
- }, onDragEnd: (event, gesturePoint) => {
- resetAutoScrollState();
- onDragEnd && onDragEnd(event, gesturePoint);
- }, onLayoutMeasure: (measured) => {
- registerItem(value, measured);
- }, ref: externalRef, ignoreStrict: true, children: children }));
-}
-const ReorderItem = /*@__PURE__*/ React.forwardRef(ReorderItemComponent);
-
-var namespace = /*#__PURE__*/Object.freeze({
- __proto__: null,
- Group: ReorderGroup,
- Item: ReorderItem
-});
-
-function isDOMKeyframes(keyframes) {
- return typeof keyframes === "object" && !Array.isArray(keyframes);
-}
-
-function resolveSubjects(subject, keyframes, scope, selectorCache) {
- if (subject == null) {
- return [];
- }
- if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
- return motionDom.resolveElements(subject, scope, selectorCache);
- }
- else if (subject instanceof NodeList) {
- return Array.from(subject);
- }
- else if (Array.isArray(subject)) {
- return subject.filter((s) => s != null);
- }
- else {
- return [subject];
- }
-}
-
-function calculateRepeatDuration(duration, repeat, repeatDelay) {
- return duration * (repeat + 1) + repeatDelay * repeat;
-}
-
-/**
- * Given a absolute or relative time definition and current/prev time state of the sequence,
- * calculate an absolute time for the next keyframes.
- */
-function calcNextTime(current, next, prev, labels) {
- if (typeof next === "number") {
- return next;
- }
- else if (next.startsWith("-") || next.startsWith("+")) {
- return Math.max(0, current + parseFloat(next));
- }
- else if (next === "<") {
- return prev;
- }
- else if (next.startsWith("<")) {
- return Math.max(0, prev + parseFloat(next.slice(1)));
- }
- else {
- return labels.get(next) ?? current;
- }
-}
-
-function eraseKeyframes(sequence, startTime, endTime) {
- for (let i = 0; i < sequence.length; i++) {
- const keyframe = sequence[i];
- if (keyframe.at > startTime && keyframe.at < endTime) {
- motionUtils.removeItem(sequence, keyframe);
- // If we remove this item we have to push the pointer back one
- i--;
- }
- }
-}
-function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
- /**
- * Erase every existing value between currentTime and targetTime,
- * this will essentially splice this timeline into any currently
- * defined ones.
- */
- eraseKeyframes(sequence, startTime, endTime);
- for (let i = 0; i < keyframes.length; i++) {
- sequence.push({
- value: keyframes[i],
- at: motionDom.mixNumber(startTime, endTime, offset[i]),
- easing: motionUtils.getEasingForSegment(easing, i),
- });
- }
-}
-
-/**
- * Take an array of times that represent repeated keyframes. For instance
- * if we have original times of [0, 0.5, 1] then our repeated times will
- * be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back
- * down to a 0-1 scale.
- *
- * `repeatDelayUnits` is the repeatDelay expressed in units of a single
- * iteration's duration, so the total span equals `(repeat + 1) + repeat * repeatDelayUnits`.
- */
-function normalizeTimes(times, repeat, repeatDelayUnits = 0) {
- const totalUnits = repeat + 1 + repeat * repeatDelayUnits;
- for (let i = 0; i < times.length; i++) {
- times[i] = times[i] / totalUnits;
- }
-}
-
-function compareByTime(a, b) {
- if (a.at === b.at) {
- if (a.value === null)
- return 1;
- if (b.value === null)
- return -1;
- return 0;
- }
- else {
- return a.at - b.at;
- }
-}
-
-const defaultSegmentEasing = "easeInOut";
-const MAX_REPEAT = 20;
-function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators) {
- const defaultDuration = defaultTransition.duration || 0.3;
- const animationDefinitions = new Map();
- const sequences = new Map();
- const elementCache = {};
- const timeLabels = new Map();
- let prevTime = 0;
- let currentTime = 0;
- let totalDuration = 0;
- /**
- * Build the timeline by mapping over the sequence array and converting
- * the definitions into keyframes and offsets with absolute time values.
- * These will later get converted into relative offsets in a second pass.
- */
- for (let i = 0; i < sequence.length; i++) {
- const segment = sequence[i];
- /**
- * If this is a timeline label, mark it and skip the rest of this iteration.
- */
- if (typeof segment === "string") {
- timeLabels.set(segment, currentTime);
- continue;
- }
- else if (!Array.isArray(segment)) {
- timeLabels.set(segment.name, calcNextTime(currentTime, segment.at, prevTime, timeLabels));
- continue;
- }
- let [subject, keyframes, transition = {}] = segment;
- /**
- * If a relative or absolute time value has been specified we need to resolve
- * it in relation to the currentTime.
- */
- if (transition.at !== undefined) {
- currentTime = calcNextTime(currentTime, transition.at, prevTime, timeLabels);
- }
- /**
- * Keep track of the maximum duration in this definition. This will be
- * applied to currentTime once the definition has been parsed.
- */
- let maxDuration = 0;
- const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
- const valueKeyframesAsList = keyframesAsList(valueKeyframes);
- const { delay = 0, times = motionDom.defaultOffset(valueKeyframesAsList), type = defaultTransition.type || "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
- let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
- /**
- * Resolve stagger() if defined.
- */
- const calculatedDelay = typeof delay === "function"
- ? delay(elementIndex, numSubjects)
- : delay;
- /**
- * If this animation should and can use a spring, generate a spring easing function.
- */
- const numKeyframes = valueKeyframesAsList.length;
- const createGenerator = motionDom.isGenerator(type)
- ? type
- : generators?.[type || "keyframes"];
- if (numKeyframes <= 2 && createGenerator) {
- /**
- * As we're creating an easing function from a spring,
- * ideally we want to generate it using the real distance
- * between the two keyframes. However this isn't always
- * possible - in these situations we use 0-100.
- */
- let absoluteDelta = 100;
- if (numKeyframes === 2 &&
- isNumberKeyframesArray(valueKeyframesAsList)) {
- const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
- absoluteDelta = Math.abs(delta);
- }
- const springTransition = {
- ...defaultTransition,
- ...remainingTransition,
- };
- if (duration !== undefined) {
- springTransition.duration = motionUtils.secondsToMilliseconds(duration);
- }
- const springEasing = motionDom.createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
- ease = springEasing.ease;
- duration = springEasing.duration;
- }
- duration ?? (duration = defaultDuration);
- const startTime = currentTime + calculatedDelay;
- /**
- * If there's only one time offset of 0, fill in a second with length 1
- */
- if (times.length === 1 && times[0] === 0) {
- times[1] = 1;
- }
- /**
- * Fill out if offset if fewer offsets than keyframes
- */
- const remainder = times.length - valueKeyframesAsList.length;
- remainder > 0 && motionDom.fillOffset(times, remainder);
- /**
- * If only one value has been set, ie [1], push a null to the start of
- * the keyframe array. This will let us mark a keyframe at this point
- * that will later be hydrated with the previous value.
- */
- valueKeyframesAsList.length === 1 &&
- valueKeyframesAsList.unshift(null);
- /**
- * Segments can't express `repeat: Infinity` or very large
- * counts — they'd leave dead time after the segment or
- * explode the keyframe array. Ignore with a warning.
- */
- if (repeat) {
- motionUtils.warning(repeat < MAX_REPEAT, `Sequence segments can't repeat ${repeat} times — ignoring repeat option. Use a value below ${MAX_REPEAT} or apply repeat at the sequence level instead.`);
- }
- if (repeat && repeat < MAX_REPEAT) {
- /**
- * Express repeatDelay in units of a single iteration's duration
- * so it can be added to the per-iteration time offsets below
- * before they're normalized to 0-1.
- */
- const repeatDelayUnits = duration > 0 ? repeatDelay / duration : 0;
- duration = calculateRepeatDuration(duration, repeat, repeatDelay);
- const originalKeyframes = [...valueKeyframesAsList];
- const originalTimes = [...times];
- ease = Array.isArray(ease) ? [...ease] : [ease];
- const originalEase = [...ease];
- /**
- * For reverse/mirror, alternate iterations play the segment
- * backwards. mirror matches JSAnimation's mirroredGenerator:
- * reversed keyframes, easings unchanged. reverse matches
- * JSAnimation's iterationProgress = 1 - p: reversed
- * keyframes, easing array reversed AND each function easing
- * mapped through reverseEasing (string easings unchanged —
- * they're resolved later by the keyframes engine).
- */
- const isFlipping = repeatType === "reverse" || repeatType === "mirror";
- let flippedKeyframes = originalKeyframes;
- let flippedEases = originalEase;
- if (isFlipping) {
- flippedKeyframes = [...originalKeyframes].reverse();
- if (repeatType === "reverse") {
- flippedEases = [...originalEase]
- .reverse()
- .map((e) => typeof e === "function"
- ? motionUtils.reverseEasing(e)
- : e);
- }
- }
- for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
- const isFlipped = isFlipping && repeatIndex % 2 === 0;
- const iterKeyframes = isFlipped
- ? flippedKeyframes
- : originalKeyframes;
- const iterEase = isFlipped ? flippedEases : originalEase;
- const iterStartOffset = (repeatIndex + 1) * (1 + repeatDelayUnits);
- /**
- * If repeatDelay is set, hold the previous iteration's
- * final value through the delay by inserting a keyframe
- * at the moment the next iteration begins.
- */
- if (repeatDelayUnits > 0) {
- valueKeyframesAsList.push(valueKeyframesAsList[valueKeyframesAsList.length - 1]);
- times.push(iterStartOffset);
- ease.push("linear");
- }
- valueKeyframesAsList.push(...iterKeyframes);
- for (let keyframeIndex = 0; keyframeIndex < iterKeyframes.length; keyframeIndex++) {
- times.push(originalTimes[keyframeIndex] + iterStartOffset);
- ease.push(keyframeIndex === 0
- ? "linear"
- : motionUtils.getEasingForSegment(iterEase, keyframeIndex - 1));
- }
- }
- normalizeTimes(times, repeat, repeatDelayUnits);
- }
- const targetTime = startTime + duration;
- /**
- * Add keyframes, mapping offsets to absolute time.
- */
- addKeyframes(valueSequence, valueKeyframesAsList, ease, times, startTime, targetTime);
- maxDuration = Math.max(calculatedDelay + duration, maxDuration);
- totalDuration = Math.max(targetTime, totalDuration);
- };
- if (motionDom.isMotionValue(subject)) {
- const subjectSequence = getSubjectSequence(subject, sequences);
- resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
- }
- else {
- const subjects = resolveSubjects(subject, keyframes, scope, elementCache);
- const numSubjects = subjects.length;
- /**
- * For every element in this segment, process the defined values.
- */
- for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
- /**
- * Cast necessary, but we know these are of this type
- */
- keyframes = keyframes;
- transition = transition;
- const thisSubject = subjects[subjectIndex];
- const subjectSequence = getSubjectSequence(thisSubject, sequences);
- for (const key in keyframes) {
- resolveValueSequence(keyframes[key], getValueTransition(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
- }
- }
- }
- prevTime = currentTime;
- currentTime += maxDuration;
- }
- /**
- * For every element and value combination create a new animation.
- */
- sequences.forEach((valueSequences, element) => {
- for (const key in valueSequences) {
- const valueSequence = valueSequences[key];
- /**
- * Arrange all the keyframes in ascending time order.
- */
- valueSequence.sort(compareByTime);
- const keyframes = [];
- const valueOffset = [];
- const valueEasing = [];
- /**
- * For each keyframe, translate absolute times into
- * relative offsets based on the total duration of the timeline.
- */
- for (let i = 0; i < valueSequence.length; i++) {
- const { at, value, easing } = valueSequence[i];
- keyframes.push(value);
- valueOffset.push(motionUtils.progress(0, totalDuration, at));
- valueEasing.push(easing || "easeOut");
- }
- /**
- * If the first keyframe doesn't land on offset: 0
- * provide one by duplicating the initial keyframe. This ensures
- * it snaps to the first keyframe when the animation starts.
- */
- if (valueOffset[0] !== 0) {
- valueOffset.unshift(0);
- keyframes.unshift(keyframes[0]);
- valueEasing.unshift(defaultSegmentEasing);
- }
- /**
- * If the last keyframe doesn't land on offset: 1
- * provide one with a null wildcard value. This will ensure it
- * stays static until the end of the animation.
- */
- if (valueOffset[valueOffset.length - 1] !== 1) {
- valueOffset.push(1);
- keyframes.push(null);
- }
- if (!animationDefinitions.has(element)) {
- animationDefinitions.set(element, {
- keyframes: {},
- transition: {},
- });
- }
- const definition = animationDefinitions.get(element);
- definition.keyframes[key] = keyframes;
- /**
- * Exclude `type` from defaultTransition since springs have been
- * converted to duration-based easing functions in resolveValueSequence.
- * Including `type: "spring"` would cause JSAnimation to error when
- * the merged keyframes array has more than 2 keyframes.
- */
- const { type: _type, ...remainingDefaultTransition } = defaultTransition;
- definition.transition[key] = {
- ...remainingDefaultTransition,
- duration: totalDuration,
- ease: valueEasing,
- times: valueOffset,
- ...sequenceTransition,
- };
- }
- });
- return animationDefinitions;
-}
-function getSubjectSequence(subject, sequences) {
- !sequences.has(subject) && sequences.set(subject, {});
- return sequences.get(subject);
-}
-function getValueSequence(name, sequences) {
- if (!sequences[name])
- sequences[name] = [];
- return sequences[name];
-}
-function keyframesAsList(keyframes) {
- return Array.isArray(keyframes) ? keyframes : [keyframes];
-}
-function getValueTransition(transition, key) {
- return transition && transition[key]
- ? {
- ...transition,
- ...transition[key],
- }
- : { ...transition };
-}
-const isNumber = (keyframe) => typeof keyframe === "number";
-const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
-
-function createDOMVisualElement(element) {
- const options = {
- presenceContext: null,
- props: {},
- visualState: {
- renderState: {
- transform: {},
- transformOrigin: {},
- style: {},
- vars: {},
- attrs: {},
- },
- latestValues: {},
- },
- };
- const node = motionDom.isSVGElement(element) && !motionDom.isSVGSVGElement(element)
- ? new motionDom.SVGVisualElement(options)
- : new motionDom.HTMLVisualElement(options);
- node.mount(element);
- motionDom.visualElementStore.set(element, node);
-}
-function createObjectVisualElement(subject) {
- const options = {
- presenceContext: null,
- props: {},
- visualState: {
- renderState: {
- output: {},
- },
- latestValues: {},
- },
- };
- const node = new motionDom.ObjectVisualElement(options);
- node.mount(subject);
- motionDom.visualElementStore.set(subject, node);
-}
-
-function isSingleValue(subject, keyframes) {
- return (motionDom.isMotionValue(subject) ||
- typeof subject === "number" ||
- (typeof subject === "string" && !isDOMKeyframes(keyframes)));
-}
-/**
- * Implementation
- */
-function animateSubject(subject, keyframes, options, scope) {
- const animations = [];
- if (isSingleValue(subject, keyframes)) {
- animations.push(motionDom.animateSingleValue(subject, isDOMKeyframes(keyframes)
- ? keyframes.default || keyframes
- : keyframes, options ? options.default || options : options));
- }
- else {
- // Gracefully handle null/undefined subjects (e.g., from querySelector returning null)
- if (subject == null) {
- return animations;
- }
- const subjects = resolveSubjects(subject, keyframes, scope);
- const numSubjects = subjects.length;
- motionUtils.invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
- for (let i = 0; i < numSubjects; i++) {
- const thisSubject = subjects[i];
- const createVisualElement = thisSubject instanceof Element
- ? createDOMVisualElement
- : createObjectVisualElement;
- if (!motionDom.visualElementStore.has(thisSubject)) {
- createVisualElement(thisSubject);
- }
- const visualElement = motionDom.visualElementStore.get(thisSubject);
- const transition = { ...options };
- /**
- * Resolve stagger function if provided.
- */
- if ("delay" in transition &&
- typeof transition.delay === "function") {
- transition.delay = transition.delay(i, numSubjects);
- }
- animations.push(...motionDom.animateTarget(visualElement, { ...keyframes, transition }, {}));
- }
- }
- return animations;
-}
-
-function animateSequence(sequence, options, scope) {
- const animations = [];
- /**
- * Pre-process: replace function segments with MotionValue segments,
- * subscribe callbacks immediately
- */
- const processedSequence = sequence.map((segment) => {
- if (Array.isArray(segment) && typeof segment[0] === "function") {
- const callback = segment[0];
- const mv = motionDom.motionValue(0);
- mv.on("change", callback);
- if (segment.length === 1) {
- return [mv, [0, 1]];
- }
- else if (segment.length === 2) {
- return [mv, [0, 1], segment[1]];
- }
- else {
- return [mv, segment[1], segment[2]];
- }
- }
- return segment;
- });
- const animationDefinitions = createAnimationsFromSequence(processedSequence, options, scope, { spring: motionDom.spring });
- animationDefinitions.forEach(({ keyframes, transition }, subject) => {
- animations.push(...animateSubject(subject, keyframes, transition));
- });
- return animations;
-}
-
-function isSequence(value) {
- return Array.isArray(value) && value.some(Array.isArray);
-}
-/**
- * Creates an animation function that is optionally scoped
- * to a specific element.
- */
-function createScopedAnimate(options = {}) {
- const { scope, reduceMotion, skipAnimations } = options;
- /**
- * Implementation
- */
- function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
- let animations = [];
- let animationOnComplete;
- const inherited = {};
- if (reduceMotion !== undefined)
- inherited.reduceMotion = reduceMotion;
- if (skipAnimations !== undefined)
- inherited.skipAnimations = skipAnimations;
- if (isSequence(subjectOrSequence)) {
- const { onComplete, ...sequenceOptions } = optionsOrKeyframes || {};
- if (typeof onComplete === "function") {
- animationOnComplete = onComplete;
- }
- animations = animateSequence(subjectOrSequence, { ...inherited, ...sequenceOptions }, scope);
- }
- else {
- // Extract top-level onComplete so it doesn't get applied per-value
- const { onComplete, ...rest } = options || {};
- if (typeof onComplete === "function") {
- animationOnComplete = onComplete;
- }
- animations = animateSubject(subjectOrSequence, optionsOrKeyframes, { ...inherited, ...rest }, scope);
- }
- const animation = new motionDom.GroupAnimationWithThen(animations);
- if (animationOnComplete) {
- animation.finished.then(animationOnComplete);
- }
- if (scope) {
- scope.animations.push(animation);
- animation.finished.then(() => {
- motionUtils.removeItem(scope.animations, animation);
- });
- }
- return animation;
- }
- return scopedAnimate;
-}
-const animate = createScopedAnimate();
-
-function animateElements(elementOrSelector, keyframes, options, scope) {
- // Gracefully handle null/undefined elements (e.g., from querySelector returning null)
- if (elementOrSelector == null) {
- return [];
- }
- const elements = motionDom.resolveElements(elementOrSelector, scope);
- const numElements = elements.length;
- motionUtils.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
- /**
- * WAAPI doesn't support interrupting animations.
- *
- * Therefore, starting animations requires a three-step process:
- * 1. Stop existing animations (write styles to DOM)
- * 2. Resolve keyframes (read styles from DOM)
- * 3. Create new animations (write styles to DOM)
- *
- * The hybrid `animate()` function uses AsyncAnimation to resolve
- * keyframes before creating new animations, which removes style
- * thrashing. Here, we have much stricter filesize constraints.
- * Therefore we do this in a synchronous way that ensures that
- * at least within `animate()` calls there is no style thrashing.
- *
- * In the motion-native-animate-mini-interrupt benchmark this
- * was 80% faster than a single loop.
- */
- const animationDefinitions = [];
- /**
- * Step 1: Build options and stop existing animations (write)
- */
- for (let i = 0; i < numElements; i++) {
- const element = elements[i];
- const elementTransition = { ...options };
- /**
- * Resolve stagger function if provided.
- */
- if (typeof elementTransition.delay === "function") {
- elementTransition.delay = elementTransition.delay(i, numElements);
- }
- for (const valueName in keyframes) {
- let valueKeyframes = keyframes[valueName];
- if (!Array.isArray(valueKeyframes)) {
- valueKeyframes = [valueKeyframes];
- }
- const valueOptions = {
- ...motionDom.getValueTransition(elementTransition, valueName),
- };
- valueOptions.duration && (valueOptions.duration = motionUtils.secondsToMilliseconds(valueOptions.duration));
- valueOptions.delay && (valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay));
- /**
- * If there's an existing animation playing on this element then stop it
- * before creating a new one.
- */
- const map = motionDom.getAnimationMap(element);
- const key = motionDom.animationMapKey(valueName, valueOptions.pseudoElement || "");
- const currentAnimation = map.get(key);
- currentAnimation && currentAnimation.stop();
- animationDefinitions.push({
- map,
- key,
- unresolvedKeyframes: valueKeyframes,
- options: {
- ...valueOptions,
- element,
- name: valueName,
- allowFlatten: !elementTransition.type && !elementTransition.ease,
- },
- });
- }
- }
- /**
- * Step 2: Resolve keyframes (read)
- */
- for (let i = 0; i < animationDefinitions.length; i++) {
- const { unresolvedKeyframes, options: animationOptions } = animationDefinitions[i];
- const { element, name, pseudoElement } = animationOptions;
- if (!pseudoElement && unresolvedKeyframes[0] === null) {
- unresolvedKeyframes[0] = motionDom.getComputedStyle(element, name);
- }
- motionDom.fillWildcards(unresolvedKeyframes);
- motionDom.applyPxDefaults(unresolvedKeyframes, name);
- /**
- * If we only have one keyframe, explicitly read the initial keyframe
- * from the computed style. This is to ensure consistency with WAAPI behaviour
- * for restarting animations, for instance .play() after finish, when it
- * has one vs two keyframes.
- */
- if (!pseudoElement && unresolvedKeyframes.length < 2) {
- unresolvedKeyframes.unshift(motionDom.getComputedStyle(element, name));
- }
- animationOptions.keyframes = unresolvedKeyframes;
- }
- /**
- * Step 3: Create new animations (write)
- */
- const animations = [];
- for (let i = 0; i < animationDefinitions.length; i++) {
- const { map, key, options: animationOptions } = animationDefinitions[i];
- const animation = new motionDom.NativeAnimation(animationOptions);
- map.set(key, animation);
- animation.finished.finally(() => map.delete(key));
- animations.push(animation);
- }
- return animations;
-}
-
-const createScopedWaapiAnimate = (scope) => {
- function scopedAnimate(elementOrSelector, keyframes, options) {
- return new motionDom.GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
- }
- return scopedAnimate;
-};
-const animateMini = /*@__PURE__*/ createScopedWaapiAnimate();
-
-function canUseNativeTimeline(target) {
- if (typeof window === "undefined")
- return false;
- return target ? motionDom.supportsViewTimeline() : motionDom.supportsScrollTimeline();
-}
-
-/**
- * A time in milliseconds, beyond which we consider the scroll velocity to be 0.
- */
-const maxElapsed = 50;
-const createAxisInfo = () => ({
- current: 0,
- offset: [],
- progress: 0,
- scrollLength: 0,
- targetOffset: 0,
- targetLength: 0,
- containerLength: 0,
- velocity: 0,
-});
-const createScrollInfo = () => ({
- time: 0,
- x: createAxisInfo(),
- y: createAxisInfo(),
-});
-const keys = {
- x: {
- length: "Width",
- position: "Left",
- },
- y: {
- length: "Height",
- position: "Top",
- },
-};
-function updateAxisInfo(element, axisName, info, time) {
- const axis = info[axisName];
- const { length, position } = keys[axisName];
- const prev = axis.current;
- const prevTime = info.time;
- axis.current = Math.abs(element[`scroll${position}`]);
- axis.scrollLength = element[`scroll${length}`] - element[`client${length}`];
- axis.offset.length = 0;
- axis.offset[0] = 0;
- axis.offset[1] = axis.scrollLength;
- axis.progress = motionUtils.progress(0, axis.scrollLength, axis.current);
- const elapsed = time - prevTime;
- axis.velocity =
- elapsed > maxElapsed
- ? 0
- : motionUtils.velocityPerSecond(axis.current - prev, elapsed);
-}
-function updateScrollInfo(element, info, time) {
- updateAxisInfo(element, "x", info, time);
- updateAxisInfo(element, "y", info, time);
- info.time = time;
-}
-
-function calcInset(element, container) {
- const inset = { x: 0, y: 0 };
- let current = element;
- while (current && current !== container) {
- if (motionDom.isHTMLElement(current)) {
- inset.x += current.offsetLeft;
- inset.y += current.offsetTop;
- current = current.offsetParent;
- }
- else if (current.tagName === "svg") {
- /**
- * This isn't an ideal approach to measuring the offset of tags.
- * It would be preferable, given they behave like HTMLElements in most ways
- * to use offsetLeft/Top. But these don't exist on . Likewise we
- * can't use .getBBox() like most SVG elements as these provide the offset
- * relative to the SVG itself, which for is usually 0x0.
- */
- const svgBoundingBox = current.getBoundingClientRect();
- current = current.parentElement;
- const parentBoundingBox = current.getBoundingClientRect();
- inset.x += svgBoundingBox.left - parentBoundingBox.left;
- inset.y += svgBoundingBox.top - parentBoundingBox.top;
- }
- else if (current instanceof SVGGraphicsElement) {
- const { x, y } = current.getBBox();
- inset.x += x;
- inset.y += y;
- let svg = null;
- let parent = current.parentNode;
- while (!svg) {
- if (parent.tagName === "svg") {
- svg = parent;
- }
- parent = current.parentNode;
- }
- current = svg;
- }
- else {
- break;
- }
- }
- return inset;
-}
-
-const namedEdges = {
- start: 0,
- center: 0.5,
- end: 1,
-};
-function resolveEdge(edge, length, inset = 0) {
- let delta = 0;
- /**
- * If we have this edge defined as a preset, replace the definition
- * with the numerical value.
- */
- if (edge in namedEdges) {
- edge = namedEdges[edge];
- }
- /**
- * Handle unit values
- */
- if (typeof edge === "string") {
- const asNumber = parseFloat(edge);
- if (edge.endsWith("px")) {
- delta = asNumber;
- }
- else if (edge.endsWith("%")) {
- edge = asNumber / 100;
- }
- else if (edge.endsWith("vw")) {
- delta = (asNumber / 100) * document.documentElement.clientWidth;
- }
- else if (edge.endsWith("vh")) {
- delta = (asNumber / 100) * document.documentElement.clientHeight;
- }
- else {
- edge = asNumber;
- }
- }
- /**
- * If the edge is defined as a number, handle as a progress value.
- */
- if (typeof edge === "number") {
- delta = length * edge;
- }
- return inset + delta;
-}
-
-const defaultOffset = [0, 0];
-function resolveOffset(offset, containerLength, targetLength, targetInset) {
- let offsetDefinition = Array.isArray(offset) ? offset : defaultOffset;
- let targetPoint = 0;
- let containerPoint = 0;
- if (typeof offset === "number") {
- /**
- * If we're provided offset: [0, 0.5, 1] then each number x should become
- * [x, x], so we default to the behaviour of mapping 0 => 0 of both target
- * and container etc.
- */
- offsetDefinition = [offset, offset];
- }
- else if (typeof offset === "string") {
- offset = offset.trim();
- if (offset.includes(" ")) {
- offsetDefinition = offset.split(" ");
- }
- else {
- /**
- * If we're provided a definition like "100px" then we want to apply
- * that only to the top of the target point, leaving the container at 0.
- * Whereas a named offset like "end" should be applied to both.
- */
- offsetDefinition = [offset, namedEdges[offset] ? offset : `0`];
- }
- }
- targetPoint = resolveEdge(offsetDefinition[0], targetLength, targetInset);
- containerPoint = resolveEdge(offsetDefinition[1], containerLength);
- return targetPoint - containerPoint;
-}
-
-const ScrollOffset = {
- Enter: [
- [0, 1],
- [1, 1],
- ],
- Exit: [
- [0, 0],
- [1, 0],
- ],
- Any: [
- [1, 0],
- [0, 1],
- ],
- All: [
- [0, 0],
- [1, 1],
- ],
-};
-
-const point = { x: 0, y: 0 };
-function getTargetSize(target) {
- return "getBBox" in target && target.tagName !== "svg"
- ? target.getBBox()
- : { width: target.clientWidth, height: target.clientHeight };
-}
-function resolveOffsets(container, info, options) {
- const { offset: offsetDefinition = ScrollOffset.All } = options;
- const { target = container, axis = "y" } = options;
- const lengthLabel = axis === "y" ? "height" : "width";
- const inset = target !== container ? calcInset(target, container) : point;
- /**
- * Measure the target and container. If they're the same thing then we
- * use the container's scrollWidth/Height as the target, from there
- * all other calculations can remain the same.
- */
- const targetSize = target === container
- ? { width: container.scrollWidth, height: container.scrollHeight }
- : getTargetSize(target);
- const containerSize = {
- width: container.clientWidth,
- height: container.clientHeight,
- };
- /**
- * Reset the length of the resolved offset array rather than creating a new one.
- * TODO: More reusable data structures for targetSize/containerSize would also be good.
- */
- info[axis].offset.length = 0;
- /**
- * Populate the offset array by resolving the user's offset definition into
- * a list of pixel scroll offets.
- */
- let hasChanged = !info[axis].interpolate;
- const numOffsets = offsetDefinition.length;
- for (let i = 0; i < numOffsets; i++) {
- const offset = resolveOffset(offsetDefinition[i], containerSize[lengthLabel], targetSize[lengthLabel], inset[axis]);
- if (!hasChanged && offset !== info[axis].interpolatorOffsets[i]) {
- hasChanged = true;
- }
- info[axis].offset[i] = offset;
- }
- /**
- * If the pixel scroll offsets have changed, create a new interpolator function
- * to map scroll value into a progress.
- */
- if (hasChanged) {
- info[axis].interpolate = motionDom.interpolate(info[axis].offset, motionDom.defaultOffset(offsetDefinition), { clamp: false });
- info[axis].interpolatorOffsets = [...info[axis].offset];
- }
- info[axis].progress = motionUtils.clamp(0, 1, info[axis].interpolate(info[axis].current));
-}
-
-function measure(container, target = container, info) {
- /**
- * Find inset of target within scrollable container
- */
- info.x.targetOffset = 0;
- info.y.targetOffset = 0;
- if (target !== container) {
- let node = target;
- while (node && node !== container) {
- info.x.targetOffset += node.offsetLeft;
- info.y.targetOffset += node.offsetTop;
- node = node.offsetParent;
- }
- }
- info.x.targetLength =
- target === container ? target.scrollWidth : target.clientWidth;
- info.y.targetLength =
- target === container ? target.scrollHeight : target.clientHeight;
- info.x.containerLength = container.clientWidth;
- info.y.containerLength = container.clientHeight;
- /**
- * In development mode ensure scroll containers aren't position: static as this makes
- * it difficult to measure their relative positions. The document scrolling element
- * is exempt: offsetParent measurements naturally resolve relative to the document.
- */
- if (process.env.NODE_ENV !== "production") {
- if (container &&
- target &&
- target !== container &&
- container !== document.documentElement &&
- container !== document.scrollingElement &&
- container !== document.body) {
- motionUtils.warnOnce(getComputedStyle(container).position !== "static", "Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly.");
- }
- }
-}
-function createOnScrollHandler(element, onScroll, info, options = {}) {
- return {
- measure: (time) => {
- measure(element, options.target, info);
- updateScrollInfo(element, info, time);
- if (options.offset || options.target) {
- resolveOffsets(element, info, options);
- }
- },
- notify: () => onScroll(info),
- };
-}
-
-const scrollListeners = new WeakMap();
-const resizeListeners = new WeakMap();
-const onScrollHandlers = new WeakMap();
-const scrollSize = new WeakMap();
-const dimensionCheckProcesses = new WeakMap();
-const getEventTarget = (element) => element === document.scrollingElement ? window : element;
-function scrollInfo(onScroll, { container = document.scrollingElement, trackContentSize = false, ...options } = {}) {
- if (!container)
- return motionUtils.noop;
- let containerHandlers = onScrollHandlers.get(container);
- /**
- * Get the onScroll handlers for this container.
- * If one isn't found, create a new one.
- */
- if (!containerHandlers) {
- containerHandlers = new Set();
- onScrollHandlers.set(container, containerHandlers);
- }
- /**
- * Create a new onScroll handler for the provided callback.
- */
- const info = createScrollInfo();
- const containerHandler = createOnScrollHandler(container, onScroll, info, options);
- containerHandlers.add(containerHandler);
- /**
- * Check if there's a scroll event listener for this container.
- * If not, create one.
- */
- if (!scrollListeners.has(container)) {
- const measureAll = () => {
- for (const handler of containerHandlers) {
- handler.measure(motionDom.frameData.timestamp);
- }
- motionDom.frame.preUpdate(notifyAll);
- };
- const notifyAll = () => {
- for (const handler of containerHandlers) {
- handler.notify();
- }
- };
- const listener = () => motionDom.frame.read(measureAll);
- scrollListeners.set(container, listener);
- const target = getEventTarget(container);
- window.addEventListener("resize", listener);
- if (container !== document.documentElement) {
- resizeListeners.set(container, motionDom.resize(container, listener));
- }
- target.addEventListener("scroll", listener);
- listener();
- }
- /**
- * Enable content size tracking if requested and not already enabled.
- */
- if (trackContentSize && !dimensionCheckProcesses.has(container)) {
- const listener = scrollListeners.get(container);
- // Store initial scroll dimensions (object is reused to avoid allocation)
- const size = {
- width: container.scrollWidth,
- height: container.scrollHeight,
- };
- scrollSize.set(container, size);
- // Add frame-based scroll dimension checking to detect content changes
- const checkScrollDimensions = () => {
- const newWidth = container.scrollWidth;
- const newHeight = container.scrollHeight;
- if (size.width !== newWidth || size.height !== newHeight) {
- listener();
- size.width = newWidth;
- size.height = newHeight;
- }
- };
- // Schedule with keepAlive=true to run every frame
- const dimensionCheckProcess = motionDom.frame.read(checkScrollDimensions, true);
- dimensionCheckProcesses.set(container, dimensionCheckProcess);
- }
- const listener = scrollListeners.get(container);
- motionDom.frame.read(listener, false, true);
- return () => {
- motionDom.cancelFrame(listener);
- /**
- * Check if we even have any handlers for this container.
- */
- const currentHandlers = onScrollHandlers.get(container);
- if (!currentHandlers)
- return;
- currentHandlers.delete(containerHandler);
- if (currentHandlers.size)
- return;
- /**
- * If no more handlers, remove the scroll listener too.
- */
- const scrollListener = scrollListeners.get(container);
- scrollListeners.delete(container);
- if (scrollListener) {
- getEventTarget(container).removeEventListener("scroll", scrollListener);
- resizeListeners.get(container)?.();
- window.removeEventListener("resize", scrollListener);
- }
- // Clean up scroll dimension checking
- const dimensionCheckProcess = dimensionCheckProcesses.get(container);
- if (dimensionCheckProcess) {
- motionDom.cancelFrame(dimensionCheckProcess);
- dimensionCheckProcesses.delete(container);
- }
- scrollSize.delete(container);
- };
-}
-
-/**
- * Maps from ProgressIntersection pairs used by Motion's preset offsets to
- * ViewTimeline named ranges. Returns undefined for unrecognised patterns,
- * which signals the caller to fall back to JS-based scroll tracking.
- */
-const presets = [
- [ScrollOffset.Enter, "entry"],
- [ScrollOffset.Exit, "exit"],
- [ScrollOffset.Any, "cover"],
- [ScrollOffset.All, "contain"],
-];
-const stringToProgress = {
- start: 0,
- end: 1,
-};
-function parseStringOffset(s) {
- const parts = s.trim().split(/\s+/);
- if (parts.length !== 2)
- return undefined;
- const a = stringToProgress[parts[0]];
- const b = stringToProgress[parts[1]];
- if (a === undefined || b === undefined)
- return undefined;
- return [a, b];
-}
-function normaliseOffset(offset) {
- if (offset.length !== 2)
- return undefined;
- const result = [];
- for (const item of offset) {
- if (Array.isArray(item)) {
- result.push(item);
- }
- else if (typeof item === "string") {
- const parsed = parseStringOffset(item);
- if (!parsed)
- return undefined;
- result.push(parsed);
- }
- else {
- return undefined;
- }
- }
- return result;
-}
-function matchesPreset(offset, preset) {
- const normalised = normaliseOffset(offset);
- if (!normalised)
- return false;
- for (let i = 0; i < 2; i++) {
- const o = normalised[i];
- const p = preset[i];
- if (o[0] !== p[0] || o[1] !== p[1])
- return false;
- }
- return true;
-}
-function offsetToViewTimelineRange(offset) {
- if (!offset) {
- return { rangeStart: "contain 0%", rangeEnd: "contain 100%" };
- }
- for (const [preset, name] of presets) {
- if (matchesPreset(offset, preset)) {
- return { rangeStart: `${name} 0%`, rangeEnd: `${name} 100%` };
- }
- }
- return undefined;
-}
-
-const timelineCache = new Map();
-function scrollTimelineFallback(options) {
- const currentTime = { value: 0 };
- const cancel = scrollInfo((info) => {
- currentTime.value = info[options.axis].progress * 100;
- }, options);
- return { currentTime, cancel };
-}
-function getTimeline({ source, container, ...options }) {
- const { axis } = options;
- if (source)
- container = source;
- let containerCache = timelineCache.get(container);
- if (!containerCache) {
- containerCache = new Map();
- timelineCache.set(container, containerCache);
- }
- const targetKey = options.target ?? "self";
- let targetCache = containerCache.get(targetKey);
- if (!targetCache) {
- targetCache = {};
- containerCache.set(targetKey, targetCache);
- }
- const axisKey = axis + (options.offset ?? []).join(",");
- if (!targetCache[axisKey]) {
- if (options.target && canUseNativeTimeline(options.target)) {
- const range = offsetToViewTimelineRange(options.offset);
- if (range) {
- targetCache[axisKey] = new ViewTimeline({
- subject: options.target,
- axis,
- });
- }
- else {
- targetCache[axisKey] = scrollTimelineFallback({
- container,
- ...options,
- });
- }
- }
- else if (canUseNativeTimeline()) {
- targetCache[axisKey] = new ScrollTimeline({
- source: container,
- axis,
- });
- }
- else {
- targetCache[axisKey] = scrollTimelineFallback({
- container,
- ...options,
- });
- }
- }
- return targetCache[axisKey];
-}
-
-function attachToAnimation(animation, options) {
- const timeline = getTimeline(options);
- const range = options.target
- ? offsetToViewTimelineRange(options.offset)
- : undefined;
- /**
- * Use native timeline when:
- * - No target: ScrollTimeline (existing behaviour)
- * - Target with mappable offset: ViewTimeline with named range
- * - Target with unmappable offset: fall back to JS observe
- */
- const useNative = options.target
- ? canUseNativeTimeline(options.target) && !!range
- : canUseNativeTimeline();
- return animation.attachTimeline({
- timeline: useNative ? timeline : undefined,
- ...(range &&
- useNative && {
- rangeStart: range.rangeStart,
- rangeEnd: range.rangeEnd,
- }),
- observe: (valueAnimation) => {
- valueAnimation.pause();
- return motionDom.observeTimeline((progress) => {
- valueAnimation.time =
- valueAnimation.iterationDuration * progress;
- }, timeline);
- },
- });
-}
-
-/**
- * Currently, we only support element tracking with `scrollInfo`, though in
- * the future we can also offer ViewTimeline support.
- */
-function isElementTracking(options) {
- return options && (options.target || options.offset);
-}
-
-/**
- * If the onScroll function has two arguments, it's expecting
- * more specific information about the scroll from scrollInfo.
- */
-function isOnScrollWithInfo(onScroll) {
- return onScroll.length === 2;
-}
-function attachToFunction(onScroll, options) {
- if (isOnScrollWithInfo(onScroll) || isElementTracking(options)) {
- return scrollInfo((info) => {
- onScroll(info[options.axis].progress, info);
- }, options);
- }
- else {
- return motionDom.observeTimeline(onScroll, getTimeline(options));
- }
-}
-
-function scroll(onScroll, { axis = "y", container = document.scrollingElement, ...options } = {}) {
- if (!container)
- return motionUtils.noop;
- const optionsWithDefaults = { axis, container, ...options };
- return typeof onScroll === "function"
- ? attachToFunction(onScroll, optionsWithDefaults)
- : attachToAnimation(onScroll, optionsWithDefaults);
-}
-
-const thresholds = {
- some: 0,
- all: 1,
-};
-function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
- const elements = motionDom.resolveElements(elementOrSelector);
- const activeIntersections = new WeakMap();
- const onIntersectionChange = (entries) => {
- entries.forEach((entry) => {
- const onEnd = activeIntersections.get(entry.target);
- /**
- * If there's no change to the intersection, we don't need to
- * do anything here.
- */
- if (entry.isIntersecting === Boolean(onEnd))
- return;
- if (entry.isIntersecting) {
- const newOnEnd = onStart(entry.target, entry);
- if (typeof newOnEnd === "function") {
- activeIntersections.set(entry.target, newOnEnd);
- }
- else {
- observer.unobserve(entry.target);
- }
- }
- else if (typeof onEnd === "function") {
- onEnd(entry);
- activeIntersections.delete(entry.target);
- }
- });
- };
- const observer = new IntersectionObserver(onIntersectionChange, {
- root,
- rootMargin,
- threshold: typeof amount === "number" ? amount : thresholds[amount],
- });
- elements.forEach((element) => observer.observe(element));
- return () => observer.disconnect();
-}
-
-const m = /*@__PURE__*/ createMotionProxy();
-
-function useUnmountEffect(callback) {
- return React.useEffect(() => () => callback(), []);
-}
-
-/**
- * @public
- */
-const domAnimation = {
- renderer: featureBundle.createDomVisualElement,
- ...featureBundle.animations,
- ...featureBundle.gestureAnimations,
-};
-
-/**
- * @public
- */
-const domMax = {
- ...domAnimation,
- ...featureBundle.drag,
- ...featureBundle.layout,
-};
-
-/**
- * @public
- */
-const domMin = {
- renderer: featureBundle.createDomVisualElement,
- ...featureBundle.animations,
-};
-
-function useMotionValueEvent(value, event, callback) {
- /**
- * useInsertionEffect will create subscriptions before any other
- * effects will run. Effects run upwards through the tree so it
- * can be that binding a useLayoutEffect higher up the tree can
- * miss changes from lower down the tree.
- */
- React.useInsertionEffect(() => value.on(event, callback), [value, event, callback]);
-}
-
-const createScrollMotionValues = () => ({
- scrollX: motionDom.motionValue(0),
- scrollY: motionDom.motionValue(0),
- scrollXProgress: motionDom.motionValue(0),
- scrollYProgress: motionDom.motionValue(0),
-});
-const isRefPending = (ref) => {
- if (!ref)
- return false;
- return !ref.current;
-};
-function makeAccelerateConfig(axis, options, container, target) {
- return {
- // Refs attach child-first; defer so target.current is populated
- // before scroll() reads it.
- factory: (animation) => {
- let cleanup;
- const start = () => {
- // A provided ref may be hydrated by an effect declared after
- // useScroll (or in a parent). Don't attach to the window
- // scroll in the meantime — that result gets cached and would
- // permanently mistrack. Wait until the ref resolves.
- if (isRefPending(container) || isRefPending(target)) {
- motionDom.microtask.read(start);
- return;
- }
- cleanup = scroll(animation, {
- ...options,
- axis,
- container: container?.current || undefined,
- target: target?.current || undefined,
- });
- };
- motionDom.microtask.read(start);
- return () => {
- motionDom.cancelMicrotask(start);
- cleanup?.();
- };
- },
- times: [0, 1],
- keyframes: [0, 1],
- ease: (v) => v,
- duration: 1,
- };
-}
-function canAccelerateScroll(target, offset) {
- if (typeof window === "undefined")
- return false;
- return target
- ? motionDom.supportsViewTimeline() && !!offsetToViewTimelineRange(offset)
- : motionDom.supportsScrollTimeline();
-}
-function useScroll({ container, target, ...options } = {}) {
- const values = index.useConstant(createScrollMotionValues);
- if (canAccelerateScroll(target, options.offset)) {
- values.scrollXProgress.accelerate = makeAccelerateConfig("x", options, container, target);
- values.scrollYProgress.accelerate = makeAccelerateConfig("y", options, container, target);
- }
- const scrollAnimation = React.useRef(null);
- const needsStart = React.useRef(false);
- const start = React.useCallback(() => {
- scrollAnimation.current = scroll((_progress, { x, y, }) => {
- values.scrollX.set(x.current);
- values.scrollXProgress.set(x.progress);
- values.scrollY.set(y.current);
- values.scrollYProgress.set(y.progress);
- }, {
- ...options,
- container: container?.current || undefined,
- target: target?.current || undefined,
- });
- return () => {
- scrollAnimation.current?.();
- };
- }, [container, target, JSON.stringify(options.offset)]);
- index.useIsomorphicLayoutEffect(() => {
- needsStart.current = false;
- if (isRefPending(container) || isRefPending(target)) {
- needsStart.current = true;
- return;
- }
- else {
- return start();
- }
- }, [start]);
- React.useEffect(() => {
- if (!needsStart.current)
- return;
- // Defer to a microtask so any sibling/parent effect that hydrates the
- // ref has a chance to run first.
- let cleanup;
- const tryStart = () => {
- const containerPending = isRefPending(container);
- const targetPending = isRefPending(target);
- motionUtils.invariant(!containerPending, "Container ref is defined but not hydrated", "use-scroll-ref");
- motionUtils.invariant(!targetPending, "Target ref is defined but not hydrated", "use-scroll-ref");
- if (!containerPending && !targetPending)
- cleanup = start();
- };
- motionDom.microtask.read(tryStart);
- return () => {
- motionDom.cancelMicrotask(tryStart);
- cleanup?.();
- };
- }, [start]);
- return values;
-}
-
-/**
- * @deprecated useElementScroll is deprecated. Convert to useScroll({ container: ref })
- */
-function useElementScroll(ref) {
- if (process.env.NODE_ENV === "development") {
- motionUtils.warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
- }
- return useScroll({ container: ref });
-}
-
-/**
- * @deprecated useViewportScroll is deprecated. Convert to useScroll()
- */
-function useViewportScroll() {
- if (process.env.NODE_ENV !== "production") {
- motionUtils.warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
- }
- return useScroll();
-}
-
-/**
- * Combine multiple motion values into a new one using a string template literal.
- *
- * ```jsx
- * import {
- * motion,
- * useSpring,
- * useMotionValue,
- * useMotionTemplate
- * } from "framer-motion"
- *
- * function Component() {
- * const shadowX = useSpring(0)
- * const shadowY = useMotionValue(0)
- * const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
- *
- * return
- * }
- * ```
- *
- * @public
- */
-function useMotionTemplate(fragments, ...values) {
- /**
- * Create a function that will build a string from the latest motion values.
- */
- const numFragments = fragments.length;
- function buildValue() {
- let output = ``;
- for (let i = 0; i < numFragments; i++) {
- output += fragments[i];
- const value = values[i];
- if (value) {
- output += motionDom.isMotionValue(value) ? value.get() : value;
- }
- }
- return output;
- }
- return useCombineMotionValues(values.filter(motionDom.isMotionValue), buildValue);
-}
-
-function useFollowValue(source, options = {}) {
- const { isStatic } = React.useContext(index.MotionConfigContext);
- const getFromSource = () => (motionDom.isMotionValue(source) ? source.get() : source);
- // isStatic will never change, allowing early hooks return
- if (isStatic) {
- return useTransform(getFromSource);
- }
- const value = useMotionValue(getFromSource());
- React.useInsertionEffect(() => {
- return motionDom.attachFollow(value, source, options);
- }, [value, JSON.stringify(options)]);
- return value;
-}
-
-function useSpring(source, options = {}) {
- return useFollowValue(source, { type: "spring", ...options });
-}
-
-function useAnimationFrame(callback) {
- const initialTimestamp = React.useRef(0);
- const { isStatic } = React.useContext(index.MotionConfigContext);
- React.useEffect(() => {
- if (isStatic)
- return;
- const provideTimeSinceStart = ({ timestamp, delta }) => {
- if (!initialTimestamp.current)
- initialTimestamp.current = timestamp;
- callback(timestamp - initialTimestamp.current, delta);
- };
- motionDom.frame.update(provideTimeSinceStart, true);
- return () => motionDom.cancelFrame(provideTimeSinceStart);
- }, [callback]);
-}
-
-function useTime() {
- const time = useMotionValue(0);
- useAnimationFrame((t) => time.set(t));
- return time;
-}
-
-/**
- * Creates a `MotionValue` that updates when the velocity of the provided `MotionValue` changes.
- *
- * ```javascript
- * const x = useMotionValue(0)
- * const xVelocity = useVelocity(x)
- * const xAcceleration = useVelocity(xVelocity)
- * ```
- *
- * @public
- */
-function useVelocity(value) {
- const velocity = useMotionValue(value.getVelocity());
- const updateVelocity = () => {
- const latest = value.getVelocity();
- velocity.set(latest);
- /**
- * If we still have velocity, schedule an update for the next frame
- * to keep checking until it is zero.
- */
- if (latest)
- motionDom.frame.update(updateVelocity);
- };
- useMotionValueEvent(value, "change", () => {
- // Schedule an update to this value at the end of the current frame.
- motionDom.frame.update(updateVelocity, false, true);
- });
- return velocity;
-}
-
-class WillChangeMotionValue extends motionDom.MotionValue {
- constructor() {
- super(...arguments);
- this.isEnabled = false;
- }
- add(name) {
- if (motionDom.transformProps.has(name) || motionDom.acceleratedValues.has(name)) {
- this.isEnabled = true;
- this.update();
- }
- }
- update() {
- this.set(this.isEnabled ? "transform" : "auto");
- }
-}
-
-function useWillChange() {
- return index.useConstant(() => new WillChangeMotionValue("auto"));
-}
-
-/**
- * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
- *
- * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
- * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
- *
- * It will actively respond to changes and re-render your components with the latest setting.
- *
- * ```jsx
- * export function Sidebar({ isOpen }) {
- * const shouldReduceMotion = useReducedMotion()
- * const closedX = shouldReduceMotion ? 0 : "-100%"
- *
- * return (
- *
- * )
- * }
- * ```
- *
- * @return boolean
- *
- * @public
- */
-function useReducedMotion() {
- /**
- * Lazy initialisation of prefersReducedMotion
- */
- !motionDom.hasReducedMotionListener.current && motionDom.initPrefersReducedMotion();
- const [shouldReduceMotion] = React.useState(motionDom.prefersReducedMotion.current);
- if (process.env.NODE_ENV !== "production") {
- motionUtils.warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
- }
- /**
- * TODO See if people miss automatically updating shouldReduceMotion setting
- */
- return shouldReduceMotion;
-}
-
-function useReducedMotionConfig() {
- const reducedMotionPreference = useReducedMotion();
- const { reducedMotion } = React.useContext(index.MotionConfigContext);
- if (reducedMotion === "never") {
- return false;
- }
- else if (reducedMotion === "always") {
- return true;
- }
- else {
- return reducedMotionPreference;
- }
-}
-
-function stopAnimation(visualElement) {
- visualElement.values.forEach((value) => value.stop());
-}
-function setVariants(visualElement, variantLabels) {
- const reversedLabels = [...variantLabels].reverse();
- reversedLabels.forEach((key) => {
- const variant = visualElement.getVariant(key);
- variant && motionDom.setTarget(visualElement, variant);
- if (visualElement.variantChildren) {
- visualElement.variantChildren.forEach((child) => {
- setVariants(child, variantLabels);
- });
- }
- });
-}
-function setValues(visualElement, definition) {
- if (Array.isArray(definition)) {
- return setVariants(visualElement, definition);
- }
- else if (typeof definition === "string") {
- return setVariants(visualElement, [definition]);
- }
- else {
- motionDom.setTarget(visualElement, definition);
- }
-}
-/**
- * @public
- */
-function animationControls() {
- /**
- * Track whether the host component has mounted.
- */
- let hasMounted = false;
- /**
- * A collection of linked component animation controls.
- */
- const subscribers = new Set();
- const controls = {
- subscribe(visualElement) {
- subscribers.add(visualElement);
- return () => void subscribers.delete(visualElement);
- },
- start(definition, transitionOverride) {
- motionUtils.invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
- const animations = [];
- subscribers.forEach((visualElement) => {
- animations.push(motionDom.animateVisualElement(visualElement, definition, {
- transitionOverride,
- }));
- });
- return Promise.all(animations);
- },
- set(definition) {
- motionUtils.invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
- return subscribers.forEach((visualElement) => {
- setValues(visualElement, definition);
- });
- },
- stop() {
- subscribers.forEach((visualElement) => {
- stopAnimation(visualElement);
- });
- },
- mount() {
- hasMounted = true;
- return () => {
- hasMounted = false;
- controls.stop();
- };
- },
- };
- return controls;
-}
-
-function useAnimate() {
- const scope = index.useConstant(() => ({
- current: null, // Will be hydrated by React
- animations: [],
- }));
- const reduceMotion = useReducedMotionConfig() ?? undefined;
- const { skipAnimations } = React.useContext(index.MotionConfigContext);
- const animate = React.useMemo(() => createScopedAnimate({ scope, reduceMotion, skipAnimations }), [scope, reduceMotion, skipAnimations]);
- useUnmountEffect(() => {
- scope.animations.forEach((animation) => animation.stop());
- scope.animations.length = 0;
- });
- return [scope, animate];
-}
-
-function useAnimateMini() {
- const scope = index.useConstant(() => ({
- current: null, // Will be hydrated by React
- animations: [],
- }));
- const animate = index.useConstant(() => createScopedWaapiAnimate(scope));
- useUnmountEffect(() => {
- scope.animations.forEach((animation) => animation.stop());
- });
- return [scope, animate];
-}
-
-/**
- * Creates `LegacyAnimationControls`, which can be used to manually start, stop
- * and sequence animations on one or more components.
- *
- * The returned `LegacyAnimationControls` should be passed to the `animate` property
- * of the components you want to animate.
- *
- * These components can then be animated with the `start` method.
- *
- * ```jsx
- * import * as React from 'react'
- * import { motion, useAnimation } from 'framer-motion'
- *
- * export function MyComponent(props) {
- * const controls = useAnimation()
- *
- * controls.start({
- * x: 100,
- * transition: { duration: 0.5 },
- * })
- *
- * return
- * }
- * ```
- *
- * @returns Animation controller with `start` and `stop` methods
- *
- * @public
- */
-function useAnimationControls() {
- const controls = index.useConstant(animationControls);
- index.useIsomorphicLayoutEffect(controls.mount, []);
- return controls;
-}
-const useAnimation = useAnimationControls;
-
-function usePresenceData() {
- const context = React.useContext(index.PresenceContext);
- return context ? context.custom : undefined;
-}
-
-/**
- * Attaches an event listener directly to the provided DOM element.
- *
- * Bypassing React's event system can be desirable, for instance when attaching non-passive
- * event handlers.
- *
- * ```jsx
- * const ref = useRef(null)
- *
- * useDomEvent(ref, 'wheel', onWheel, { passive: false })
- *
- * return
- * ```
- *
- * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.
- * @param eventName - Name of the event you want listen for.
- * @param handler - Function to fire when receiving the event.
- * @param options - Options to pass to `Event.addEventListener`.
- *
- * @public
- */
-function useDomEvent(ref, eventName, handler, options) {
- React.useEffect(() => {
- const element = ref.current;
- if (handler && element) {
- return motionDom.addDomEvent(element, eventName, handler, options);
- }
- }, [ref, eventName, handler, options]);
-}
-
-/**
- * Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
- *
- * ```jsx
- * const dragControls = useDragControls()
- *
- * function startDrag(event) {
- * dragControls.start(event, { snapToCursor: true })
- * }
- *
- * return (
- * <>
- *
- *
- *
- * )
- * ```
- *
- * @public
- */
-class DragControls {
- constructor() {
- this.componentControls = new Set();
- }
- /**
- * Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
- *
- * @internal
- */
- subscribe(controls) {
- this.componentControls.add(controls);
- return () => this.componentControls.delete(controls);
- }
- /**
- * Start a drag gesture on every `motion` component that has this set of drag controls
- * passed into it via the `dragControls` prop.
- *
- * ```jsx
- * dragControls.start(e, {
- * snapToCursor: true
- * })
- * ```
- *
- * @param event - PointerEvent
- * @param options - Options
- *
- * @public
- */
- start(event, options) {
- this.componentControls.forEach((controls) => {
- controls.start(event.nativeEvent || event, options);
- });
- }
- /**
- * Cancels a drag gesture.
- *
- * ```jsx
- * dragControls.cancel()
- * ```
- *
- * @public
- */
- cancel() {
- this.componentControls.forEach((controls) => {
- controls.cancel();
- });
- }
- /**
- * Stops a drag gesture.
- *
- * ```jsx
- * dragControls.stop()
- * ```
- *
- * @public
- */
- stop() {
- this.componentControls.forEach((controls) => {
- controls.stop();
- });
- }
-}
-const createDragControls = () => new DragControls();
-/**
- * Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop
- * and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we
- * might want to initiate that dragging from a different component than the draggable one.
- *
- * By creating a `dragControls` using the `useDragControls` hook, we can pass this into
- * the draggable component's `dragControls` prop. It exposes a `start` method
- * that can start dragging from pointer events on other components.
- *
- * ```jsx
- * const dragControls = useDragControls()
- *
- * function startDrag(event) {
- * dragControls.start(event, { snapToCursor: true })
- * }
- *
- * return (
- * <>
- *
- *
- *
- * )
- * ```
- *
- * @public
- */
-function useDragControls() {
- return index.useConstant(createDragControls);
-}
-
-/**
- * Checks if a component is a `motion` component.
- */
-function isMotionComponent(component) {
- return (component !== null &&
- typeof component === "object" &&
- index.motionComponentSymbol in component);
-}
-
-/**
- * Unwraps a `motion` component and returns either a string for `motion.div` or
- * the React component for `motion(Component)`.
- *
- * If the component is not a `motion` component it returns undefined.
- */
-function unwrapMotionComponent(component) {
- if (isMotionComponent(component)) {
- return component[index.motionComponentSymbol];
- }
- return undefined;
-}
-
-function useInstantLayoutTransition() {
- return startTransition;
-}
-function startTransition(callback) {
- if (!motionDom.rootProjectionNode.current)
- return;
- motionDom.rootProjectionNode.current.isUpdating = false;
- motionDom.rootProjectionNode.current.blockUpdate();
- callback && callback();
-}
-
-function useResetProjection() {
- const reset = React.useCallback(() => {
- const root = motionDom.rootProjectionNode.current;
- if (!root)
- return;
- root.resetTree();
- }, []);
- return reset;
-}
-
-/**
- * Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
- *
- * An index value can be passed to the returned `cycle` function to cycle to a specific index.
- *
- * ```jsx
- * import * as React from "react"
- * import { motion, useCycle } from "framer-motion"
- *
- * export const MyComponent = () => {
- * const [x, cycleX] = useCycle(0, 50, 100)
- *
- * return (
- * cycleX()}
- * />
- * )
- * }
- * ```
- *
- * @param items - items to cycle through
- * @returns [currentState, cycleState]
- *
- * @public
- */
-function useCycle(...items) {
- const index = React.useRef(0);
- const [item, setItem] = React.useState(items[index.current]);
- const runCycle = React.useCallback((next) => {
- index.current =
- typeof next !== "number"
- ? motionUtils.wrap(0, items.length, index.current + 1)
- : next;
- setItem(items[index.current]);
- },
- // The array will change on each call, but by putting items.length at
- // the front of this array, we guarantee the dependency comparison will match up
- // eslint-disable-next-line react-hooks/exhaustive-deps
- [items.length, ...items]);
- return [item, runCycle];
-}
-
-function useInView(ref, { root, margin, amount, once = false, initial = false, } = {}) {
- const [isInView, setInView] = React.useState(initial);
- React.useEffect(() => {
- if (!ref.current || (once && isInView))
- return;
- const onEnter = () => {
- setInView(true);
- return once ? undefined : () => setInView(false);
- };
- const options = {
- root: (root && root.current) || undefined,
- margin,
- amount,
- };
- return inView(ref.current, onEnter, options);
- }, [root, ref, margin, once, amount]);
- return isInView;
-}
-
-function useInstantTransition() {
- const [forceUpdate, forcedRenderCount] = useForceUpdate();
- const startInstantLayoutTransition = useInstantLayoutTransition();
- const unlockOnFrameRef = React.useRef(-1);
- React.useEffect(() => {
- /**
- * Unblock after two animation frames, otherwise this will unblock too soon.
- */
- motionDom.frame.postRender(() => motionDom.frame.postRender(() => {
- /**
- * If the callback has been called again after the effect
- * triggered this 2 frame delay, don't unblock animations. This
- * prevents the previous effect from unblocking the current
- * instant transition too soon. This becomes more likely when
- * used in conjunction with React.startTransition().
- */
- if (forcedRenderCount !== unlockOnFrameRef.current)
- return;
- motionUtils.MotionGlobalConfig.instantAnimations = false;
- }));
- }, [forcedRenderCount]);
- return (callback) => {
- startInstantLayoutTransition(() => {
- motionUtils.MotionGlobalConfig.instantAnimations = true;
- forceUpdate();
- callback();
- unlockOnFrameRef.current = forcedRenderCount + 1;
- });
- };
-}
-function disableInstantTransitions() {
- motionUtils.MotionGlobalConfig.instantAnimations = false;
-}
-
-function usePageInView() {
- const [isInView, setIsInView] = React.useState(true);
- React.useEffect(() => {
- const handleVisibilityChange = () => setIsInView(!document.hidden);
- if (document.hidden) {
- handleVisibilityChange();
- }
- document.addEventListener("visibilitychange", handleVisibilityChange);
- return () => {
- document.removeEventListener("visibilitychange", handleVisibilityChange);
- };
- }, []);
- return isInView;
-}
-
-/**
- * Creates a `transformPagePoint` function that accounts for SVG viewBox scaling.
- *
- * When dragging SVG elements inside an SVG with a viewBox that differs from
- * the rendered dimensions (e.g., `viewBox="0 0 100 100"` but rendered at 500x500 pixels),
- * pointer coordinates need to be transformed to match the SVG's coordinate system.
- *
- * @example
- * ```jsx
- * function App() {
- * const svgRef = useRef(null)
- *
- * return (
- *
- *
- *
- * )
- * }
- * ```
- *
- * @param svgRef - A React ref to the SVG element
- * @returns A transformPagePoint function for use with MotionConfig
- *
- * @public
- */
-function transformViewBoxPoint(svgRef) {
- return (point) => {
- const svg = svgRef.current;
- if (!svg) {
- return point;
- }
- // Get the viewBox attribute
- const viewBox = svg.viewBox?.baseVal;
- if (!viewBox || (viewBox.width === 0 && viewBox.height === 0)) {
- // No viewBox or empty viewBox - no transformation needed
- return point;
- }
- // Get the rendered dimensions of the SVG
- const bbox = svg.getBoundingClientRect();
- if (bbox.width === 0 || bbox.height === 0) {
- return point;
- }
- // Calculate scale factors
- const scaleX = viewBox.width / bbox.width;
- const scaleY = viewBox.height / bbox.height;
- // Get the SVG's position on the page
- const svgX = bbox.left + window.scrollX;
- const svgY = bbox.top + window.scrollY;
- // Transform the point:
- // 1. Calculate position relative to SVG
- // 2. Scale by viewBox/viewport ratio
- // 3. Add back the SVG position (but in SVG coordinates)
- return {
- x: (point.x - svgX) * scaleX + svgX,
- y: (point.y - svgY) * scaleY + svgY,
- };
- };
-}
-
-/**
- * Creates a `transformPagePoint` function that corrects pointer coordinates
- * for a parent container with CSS transforms (rotation, scale, skew).
- *
- * When dragging elements inside a transformed parent, pointer coordinates
- * need to be transformed through the inverse of the parent's transform
- * so the drag offset is in local space.
- *
- * Works with both static and continuously animating transforms.
- *
- * @example
- * ```jsx
- * function App() {
- * const ref = useRef(null)
- *
- * return (
- *
- *
- *
- *
- *
- * )
- * }
- * ```
- *
- * @param parentRef - A React ref to the transformed parent element
- * @returns A transformPagePoint function for use with MotionConfig
- *
- * @public
- */
-function correctParentTransform(parentRef) {
- return (point) => {
- const parent = parentRef.current;
- if (!parent)
- return point;
- const inv = getInverseMatrix(parent);
- if (!inv)
- return point;
- // Get center of rotation in page space
- const rect = parent.getBoundingClientRect();
- const cx = rect.left + window.scrollX + rect.width / 2;
- const cy = rect.top + window.scrollY + rect.height / 2;
- // Transform (point - center) through inverse, then add center back
- const dx = point.x - cx;
- const dy = point.y - cy;
- return {
- x: cx + inv.a * dx + inv.c * dy,
- y: cy + inv.b * dx + inv.d * dy,
- };
- };
-}
-function getInverseMatrix(element) {
- const { transform } = getComputedStyle(element);
- if (!transform || transform === "none")
- return null;
- const match = transform.match(/^matrix3d\((.*)\)$/u) ||
- transform.match(/^matrix\((.*)\)$/u);
- if (!match)
- return null;
- const v = match[1].split(",").map(Number);
- const is3d = transform.startsWith("matrix3d");
- const a = v[0], b = v[1];
- const c = is3d ? v[4] : v[2];
- const d = is3d ? v[5] : v[3];
- const det = a * d - b * c;
- if (Math.abs(det) < 1e-10)
- return null;
- return { a: d / det, b: -b / det, c: -c / det, d: a / det };
-}
-
-const appearAnimationStore = new Map();
-const appearComplete = new Map();
-
-const appearStoreId = (elementId, valueName) => {
- const key = motionDom.transformProps.has(valueName) ? "transform" : valueName;
- return `${elementId}: ${key}`;
-};
-
-function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
- const storeId = appearStoreId(elementId, valueName);
- const optimisedAnimation = appearAnimationStore.get(storeId);
- if (!optimisedAnimation) {
- return null;
- }
- const { animation, startTime } = optimisedAnimation;
- function cancelAnimation() {
- window.MotionCancelOptimisedAnimation?.(elementId, valueName, frame);
- }
- /**
- * We can cancel the animation once it's finished now that we've synced
- * with Motion.
- *
- * Prefer onfinish over finished as onfinish is backwards compatible with
- * older browsers.
- */
- animation.onfinish = cancelAnimation;
- if (startTime === null || window.MotionHandoffIsComplete?.(elementId)) {
- /**
- * If the startTime is null, this animation is the Paint Ready detection animation
- * and we can cancel it immediately without handoff.
- *
- * Or if we've already handed off the animation then we're now interrupting it.
- * In which case we need to cancel it.
- */
- cancelAnimation();
- return null;
- }
- else {
- return startTime;
- }
-}
-
-/**
- * A single time to use across all animations to manually set startTime
- * and ensure they're all in sync.
- */
-let startFrameTime;
-/**
- * A dummy animation to detect when Chrome is ready to start
- * painting the page and hold off from triggering the real animation
- * until then. We only need one animation to detect paint ready.
- *
- * https://bugs.chromium.org/p/chromium/issues/detail?id=1406850
- */
-let readyAnimation;
-/**
- * Keep track of animations that were suspended vs cancelled so we
- * can easily resume them when we're done measuring layout.
- */
-const suspendedAnimations = new Set();
-function resumeSuspendedAnimations() {
- suspendedAnimations.forEach((data) => {
- data.animation.play();
- data.animation.startTime = data.startTime;
- });
- suspendedAnimations.clear();
-}
-function startOptimizedAppearAnimation(element, name, keyframes, options, onReady) {
- // Prevent optimised appear animations if Motion has already started animating.
- if (window.MotionIsMounted) {
- return;
- }
- const id = element.dataset[motionDom.optimizedAppearDataId];
- if (!id)
- return;
- window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
- const storeId = appearStoreId(id, name);
- if (!readyAnimation) {
- readyAnimation = motionDom.startWaapiAnimation(element, name, [keyframes[0], keyframes[0]],
- /**
- * 10 secs is basically just a super-safe duration to give Chrome
- * long enough to get the animation ready.
- */
- { duration: 10000, ease: "linear" });
- appearAnimationStore.set(storeId, {
- animation: readyAnimation,
- startTime: null,
- });
- /**
- * If there's no readyAnimation then there's been no instantiation
- * of handoff animations.
- */
- window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
- window.MotionHasOptimisedAnimation = (elementId, valueName) => {
- if (!elementId)
- return false;
- /**
- * Keep a map of elementIds that have started animating. We check
- * via ID instead of Element because of hydration errors and
- * pre-hydration checks. We also actively record IDs as they start
- * animating rather than simply checking for data-appear-id as
- * this attrbute might be present but not lead to an animation, for
- * instance if the element's appear animation is on a different
- * breakpoint.
- */
- if (!valueName) {
- return appearComplete.has(elementId);
- }
- const animationId = appearStoreId(elementId, valueName);
- return Boolean(appearAnimationStore.get(animationId));
- };
- window.MotionHandoffMarkAsComplete = (elementId) => {
- if (appearComplete.has(elementId)) {
- appearComplete.set(elementId, true);
- }
- };
- window.MotionHandoffIsComplete = (elementId) => {
- return appearComplete.get(elementId) === true;
- };
- /**
- * We only need to cancel transform animations as
- * they're the ones that will interfere with the
- * layout animation measurements.
- */
- window.MotionCancelOptimisedAnimation = (elementId, valueName, frame, canResume) => {
- const animationId = appearStoreId(elementId, valueName);
- const data = appearAnimationStore.get(animationId);
- if (!data)
- return;
- if (frame && canResume === undefined) {
- /**
- * Wait until the end of the subsequent frame to cancel the animation
- * to ensure we don't remove the animation before the main thread has
- * had a chance to resolve keyframes and render.
- */
- frame.postRender(() => {
- frame.postRender(() => {
- data.animation.cancel();
- });
- });
- }
- else {
- data.animation.cancel();
- }
- if (frame && canResume) {
- suspendedAnimations.add(data);
- frame.render(resumeSuspendedAnimations);
- }
- else {
- appearAnimationStore.delete(animationId);
- /**
- * If there are no more animations left, we can remove the cancel function.
- * This will let us know when we can stop checking for conflicting layout animations.
- */
- if (!appearAnimationStore.size) {
- window.MotionCancelOptimisedAnimation = undefined;
- }
- }
- };
- window.MotionCheckAppearSync = (visualElement, valueName, value) => {
- const appearId = motionDom.getOptimisedAppearId(visualElement);
- if (!appearId)
- return;
- const valueIsOptimised = window.MotionHasOptimisedAnimation?.(appearId, valueName);
- const externalAnimationValue = visualElement.props.values?.[valueName];
- if (!valueIsOptimised || !externalAnimationValue)
- return;
- const removeSyncCheck = value.on("change", (latestValue) => {
- if (externalAnimationValue.get() !== latestValue) {
- window.MotionCancelOptimisedAnimation?.(appearId, valueName);
- removeSyncCheck();
- }
- });
- return removeSyncCheck;
- };
- }
- const startAnimation = () => {
- readyAnimation.cancel();
- const appearAnimation = motionDom.startWaapiAnimation(element, name, keyframes, options);
- /**
- * Record the time of the first started animation. We call performance.now() once
- * here and once in handoff to ensure we're getting
- * close to a frame-locked time. This keeps all animations in sync.
- */
- if (startFrameTime === undefined) {
- startFrameTime = performance.now();
- }
- appearAnimation.startTime = startFrameTime;
- appearAnimationStore.set(storeId, {
- animation: appearAnimation,
- startTime: startFrameTime,
- });
- if (onReady)
- onReady(appearAnimation);
- };
- appearComplete.set(id, false);
- if (readyAnimation.ready) {
- readyAnimation.ready.then(startAnimation).catch(motionUtils.noop);
- }
- else {
- startAnimation();
- }
-}
-
-const createObject = () => ({});
-class StateVisualElement extends motionDom.VisualElement {
- constructor() {
- super(...arguments);
- this.measureInstanceViewportBox = motionDom.createBox;
- }
- build() { }
- resetTransform() { }
- restoreTransform() { }
- removeValueFromRenderState() { }
- renderInstance() { }
- scrapeMotionValuesFromProps() {
- return createObject();
- }
- getBaseTargetFromProps() {
- return undefined;
- }
- readValueFromInstance(_state, key, options) {
- return options.initialState[key] || 0;
- }
- sortInstanceNodePosition() {
- return 0;
- }
-}
-const useVisualState = index.makeUseVisualState({
- scrapeMotionValuesFromProps: createObject,
- createRenderState: createObject,
-});
-/**
- * This is not an officially supported API and may be removed
- * on any version.
- */
-function useAnimatedState(initialState) {
- const [animationState, setAnimationState] = React.useState(initialState);
- const visualState = useVisualState({}, false);
- const element = index.useConstant(() => {
- return new StateVisualElement({
- props: {
- onUpdate: (v) => {
- setAnimationState({ ...v });
- },
- },
- visualState,
- presenceContext: null,
- }, { initialState });
- });
- React.useLayoutEffect(() => {
- element.mount({});
- return () => element.unmount();
- }, [element]);
- const startAnimation = index.useConstant(() => (animationDefinition) => {
- return motionDom.animateVisualElement(element, animationDefinition);
- });
- return [animationState, startAnimation];
-}
-
-let id = 0;
-const AnimateSharedLayout = ({ children }) => {
- React__namespace.useEffect(() => {
- motionUtils.invariant(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
- }, []);
- return (jsxRuntime.jsx(LayoutGroup, { id: index.useConstant(() => `asl-${id++}`), children: children }));
-};
-
-// Keep things reasonable and avoid scale: Infinity. In practise we might need
-// to add another value, opacity, that could interpolate scaleX/Y [0,0.01] => [0,1]
-// to simply hide content at unreasonable scales.
-const maxScale = 100000;
-const invertScale = (scale) => scale > 0.001 ? 1 / scale : maxScale;
-let hasWarned = false;
-/**
- * Returns a `MotionValue` each for `scaleX` and `scaleY` that update with the inverse
- * of their respective parent scales.
- *
- * This is useful for undoing the distortion of content when scaling a parent component.
- *
- * By default, `useInvertedScale` will automatically fetch `scaleX` and `scaleY` from the nearest parent.
- * By passing other `MotionValue`s in as `useInvertedScale({ scaleX, scaleY })`, it will invert the output
- * of those instead.
- *
- * ```jsx
- * const MyComponent = () => {
- * const { scaleX, scaleY } = useInvertedScale()
- * return
- * }
- * ```
- *
- * @deprecated
- */
-function useInvertedScale(scale) {
- let parentScaleX = useMotionValue(1);
- let parentScaleY = useMotionValue(1);
- const { visualElement } = React.useContext(index.MotionContext);
- motionUtils.invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
- motionUtils.warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
- hasWarned = true;
- if (scale) {
- parentScaleX = scale.scaleX || parentScaleX;
- parentScaleY = scale.scaleY || parentScaleY;
- }
- else if (visualElement) {
- parentScaleX = visualElement.getValue("scaleX", 1);
- parentScaleY = visualElement.getValue("scaleY", 1);
- }
- const scaleX = useTransform(parentScaleX, invertScale);
- const scaleY = useTransform(parentScaleY, invertScale);
- return { scaleX, scaleY };
-}
-
-exports.LayoutGroupContext = index.LayoutGroupContext;
-exports.MotionConfigContext = index.MotionConfigContext;
-exports.MotionContext = index.MotionContext;
-exports.PresenceContext = index.PresenceContext;
-exports.SwitchLayoutGroupContext = index.SwitchLayoutGroupContext;
-exports.filterProps = index.filterProps;
-exports.isBrowser = index.isBrowser;
-exports.isValidMotionProp = index.isValidMotionProp;
-exports.makeUseVisualState = index.makeUseVisualState;
-exports.useIsomorphicLayoutEffect = index.useIsomorphicLayoutEffect;
-Object.defineProperty(exports, "VisualElement", {
- enumerable: true,
- get: function () { return motionDom.VisualElement; }
-});
-Object.defineProperty(exports, "addScaleCorrector", {
- enumerable: true,
- get: function () { return motionDom.addScaleCorrector; }
-});
-Object.defineProperty(exports, "animateVisualElement", {
- enumerable: true,
- get: function () { return motionDom.animateVisualElement; }
-});
-Object.defineProperty(exports, "arc", {
- enumerable: true,
- get: function () { return motionDom.arc; }
-});
-Object.defineProperty(exports, "buildTransform", {
- enumerable: true,
- get: function () { return motionDom.buildTransform; }
-});
-Object.defineProperty(exports, "calcLength", {
- enumerable: true,
- get: function () { return motionDom.calcLength; }
-});
-Object.defineProperty(exports, "createBox", {
- enumerable: true,
- get: function () { return motionDom.createBox; }
-});
-Object.defineProperty(exports, "delay", {
- enumerable: true,
- get: function () { return motionDom.delay; }
-});
-Object.defineProperty(exports, "optimizedAppearDataAttribute", {
- enumerable: true,
- get: function () { return motionDom.optimizedAppearDataAttribute; }
-});
-Object.defineProperty(exports, "resolveMotionValue", {
- enumerable: true,
- get: function () { return motionDom.resolveMotionValue; }
-});
-Object.defineProperty(exports, "visualElementStore", {
- enumerable: true,
- get: function () { return motionDom.visualElementStore; }
-});
-exports.addPointerEvent = featureBundle.addPointerEvent;
-exports.addPointerInfo = featureBundle.addPointerInfo;
-exports.animations = featureBundle.animations;
-exports.distance = featureBundle.distance;
-exports.distance2D = featureBundle.distance2D;
-exports.useIsPresent = featureBundle.useIsPresent;
-exports.usePresence = featureBundle.usePresence;
-Object.defineProperty(exports, "MotionGlobalConfig", {
- enumerable: true,
- get: function () { return motionUtils.MotionGlobalConfig; }
-});
-exports.AnimatePresence = AnimatePresence;
-exports.AnimateSharedLayout = AnimateSharedLayout;
-exports.DeprecatedLayoutGroupContext = DeprecatedLayoutGroupContext;
-exports.DragControls = DragControls;
-exports.LayoutGroup = LayoutGroup;
-exports.LazyMotion = LazyMotion;
-exports.MotionConfig = MotionConfig;
-exports.PopChild = PopChild;
-exports.PresenceChild = PresenceChild;
-exports.Reorder = namespace;
-exports.WillChangeMotionValue = WillChangeMotionValue;
-exports.animate = animate;
-exports.animateMini = animateMini;
-exports.animationControls = animationControls;
-exports.correctParentTransform = correctParentTransform;
-exports.createScopedAnimate = createScopedAnimate;
-exports.disableInstantTransitions = disableInstantTransitions;
-exports.domAnimation = domAnimation;
-exports.domMax = domMax;
-exports.domMin = domMin;
-exports.inView = inView;
-exports.isMotionComponent = isMotionComponent;
-exports.m = m;
-exports.motion = motion;
-exports.scroll = scroll;
-exports.scrollInfo = scrollInfo;
-exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
-exports.transformViewBoxPoint = transformViewBoxPoint;
-exports.unwrapMotionComponent = unwrapMotionComponent;
-exports.useAnimate = useAnimate;
-exports.useAnimateMini = useAnimateMini;
-exports.useAnimation = useAnimation;
-exports.useAnimationControls = useAnimationControls;
-exports.useAnimationFrame = useAnimationFrame;
-exports.useComposedRefs = useComposedRefs;
-exports.useCycle = useCycle;
-exports.useDeprecatedAnimatedState = useAnimatedState;
-exports.useDeprecatedInvertedScale = useInvertedScale;
-exports.useDomEvent = useDomEvent;
-exports.useDragControls = useDragControls;
-exports.useElementScroll = useElementScroll;
-exports.useFollowValue = useFollowValue;
-exports.useForceUpdate = useForceUpdate;
-exports.useInView = useInView;
-exports.useInstantLayoutTransition = useInstantLayoutTransition;
-exports.useInstantTransition = useInstantTransition;
-exports.useMotionTemplate = useMotionTemplate;
-exports.useMotionValue = useMotionValue;
-exports.useMotionValueEvent = useMotionValueEvent;
-exports.usePageInView = usePageInView;
-exports.usePresenceData = usePresenceData;
-exports.useReducedMotion = useReducedMotion;
-exports.useReducedMotionConfig = useReducedMotionConfig;
-exports.useResetProjection = useResetProjection;
-exports.useScroll = useScroll;
-exports.useSpring = useSpring;
-exports.useTime = useTime;
-exports.useTransform = useTransform;
-exports.useUnmountEffect = useUnmountEffect;
-exports.useVelocity = useVelocity;
-exports.useViewportScroll = useViewportScroll;
-exports.useWillChange = useWillChange;
-Object.keys(motionDom).forEach(function (k) {
- if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
- enumerable: true,
- get: function () { return motionDom[k]; }
- });
-});
-Object.keys(motionUtils).forEach(function (k) {
- if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
- enumerable: true,
- get: function () { return motionUtils[k]; }
- });
-});
-//# sourceMappingURL=index.js.map
diff --git a/node_modules/.pnpm/framer-motion@12.40.0/node_modules/framer-motion/dist/cjs/index.js.map b/node_modules/.pnpm/framer-motion@12.40.0/node_modules/framer-motion/dist/cjs/index.js.map
deleted file mode 100644
index 75943bc8..00000000
--- a/node_modules/.pnpm/framer-motion@12.40.0/node_modules/framer-motion/dist/cjs/index.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/utils/use-composed-ref.ts","../../src/components/AnimatePresence/PopChild.tsx","../../src/components/AnimatePresence/PresenceChild.tsx","../../src/components/AnimatePresence/utils.ts","../../src/components/AnimatePresence/index.tsx","../../src/context/DeprecatedLayoutGroupContext.ts","../../src/utils/use-is-mounted.ts","../../src/utils/use-force-update.ts","../../src/components/LayoutGroup/index.tsx","../../src/components/LazyMotion/index.tsx","../../src/components/MotionConfig/index.tsx","../../src/context/ReorderContext.ts","../../src/render/components/create-proxy.ts","../../src/render/components/motion/proxy.ts","../../src/components/Reorder/utils/check-reorder.ts","../../src/components/Reorder/Group.tsx","../../src/value/use-motion-value.ts","../../src/value/use-combine-values.ts","../../src/value/use-computed.ts","../../src/value/use-transform.ts","../../src/components/Reorder/utils/auto-scroll.ts","../../src/components/Reorder/Item.tsx","../../src/animation/utils/is-dom-keyframes.ts","../../src/animation/animate/resolve-subjects.ts","../../src/animation/sequence/utils/calc-repeat-duration.ts","../../src/animation/sequence/utils/calc-time.ts","../../src/animation/sequence/utils/edit.ts","../../src/animation/sequence/utils/normalize-times.ts","../../src/animation/sequence/utils/sort.ts","../../src/animation/sequence/create.ts","../../src/animation/utils/create-visual-element.ts","../../src/animation/animate/subject.ts","../../src/animation/animate/sequence.ts","../../src/animation/animate/index.ts","../../src/animation/animators/waapi/animate-elements.ts","../../src/animation/animators/waapi/animate-style.ts","../../src/render/dom/scroll/utils/can-use-native-timeline.ts","../../src/render/dom/scroll/info.ts","../../src/render/dom/scroll/offsets/inset.ts","../../src/render/dom/scroll/offsets/edge.ts","../../src/render/dom/scroll/offsets/offset.ts","../../src/render/dom/scroll/offsets/presets.ts","../../src/render/dom/scroll/offsets/index.ts","../../src/render/dom/scroll/on-scroll-handler.ts","../../src/render/dom/scroll/track.ts","../../src/render/dom/scroll/utils/offset-to-range.ts","../../src/render/dom/scroll/utils/get-timeline.ts","../../src/render/dom/scroll/attach-animation.ts","../../src/render/dom/scroll/utils/is-element-tracking.ts","../../src/render/dom/scroll/attach-function.ts","../../src/render/dom/scroll/index.ts","../../src/render/dom/viewport/index.ts","../../src/render/components/m/proxy.ts","../../src/utils/use-unmount-effect.ts","../../src/render/dom/features-animation.ts","../../src/render/dom/features-max.ts","../../src/render/dom/features-min.ts","../../src/utils/use-motion-value-event.ts","../../src/value/use-scroll.ts","../../src/value/scroll/use-element-scroll.ts","../../src/value/scroll/use-viewport-scroll.ts","../../src/value/use-motion-template.ts","../../src/value/use-follow-value.ts","../../src/value/use-spring.ts","../../src/utils/use-animation-frame.ts","../../src/value/use-time.ts","../../src/value/use-velocity.ts","../../src/value/use-will-change/WillChangeMotionValue.ts","../../src/value/use-will-change/index.ts","../../src/utils/reduced-motion/use-reduced-motion.ts","../../src/utils/reduced-motion/use-reduced-motion-config.ts","../../src/animation/hooks/animation-controls.ts","../../src/animation/hooks/use-animate.ts","../../src/animation/hooks/use-animate-style.ts","../../src/animation/hooks/use-animation.ts","../../src/components/AnimatePresence/use-presence-data.ts","../../src/events/use-dom-event.ts","../../src/gestures/drag/use-drag-controls.ts","../../src/motion/utils/is-motion-component.ts","../../src/motion/utils/unwrap-motion-component.ts","../../src/projection/use-instant-layout-transition.ts","../../src/projection/use-reset-projection.ts","../../src/utils/use-cycle.ts","../../src/utils/use-in-view.ts","../../src/utils/use-instant-transition.ts","../../src/utils/use-page-in-view.ts","../../src/utils/transform-viewbox-point.ts","../../src/utils/transform-rotated-parent.ts","../../src/animation/optimized-appear/store.ts","../../src/animation/optimized-appear/store-id.ts","../../src/animation/optimized-appear/handoff.ts","../../src/animation/optimized-appear/start.ts","../../src/animation/hooks/use-animated-state.ts","../../src/components/AnimateSharedLayout.tsx","../../src/value/use-inverted-scale.ts"],"sourcesContent":["/**\n * Taken from https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx\n */\nimport * as React from \"react\"\n\ntype PossibleRef = React.Ref | undefined\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef(ref: PossibleRef, value: T): void | (() => void) {\n if (typeof ref === \"function\") {\n return ref(value)\n } else if (ref !== null && ref !== undefined) {\n ;(ref as React.MutableRefObject).current = value\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs(...refs: PossibleRef[]): React.RefCallback {\n return (node) => {\n let hasCleanup = false\n const cleanups = refs.map((ref) => {\n const cleanup = setRef(ref, node)\n if (!hasCleanup && typeof cleanup === \"function\") {\n hasCleanup = true\n }\n return cleanup\n })\n // React <19 will log an error to the console if a callback ref returns a\n // value. We don't use ref cleanups internally so this will only happen if a\n // user's ref callback returns a value, which we only expect if they are\n // using the cleanup functionality added in React 19.\n if (hasCleanup) {\n return () => {\n for (let i = 0; i < cleanups.length; i++) {\n const cleanup = cleanups[i]\n if (typeof cleanup === \"function\") {\n cleanup()\n } else {\n setRef(refs[i], null)\n }\n }\n }\n }\n }\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs(...refs: PossibleRef[]): React.RefCallback {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs)\n}\n\nexport { useComposedRefs }\n","\"use client\"\n\nimport { isHTMLElement } from \"motion-dom\"\nimport * as React from \"react\"\nimport { useContext, useId, useInsertionEffect, useRef } from \"react\"\n\nimport { MotionConfigContext } from \"../../context/MotionConfigContext\"\nimport { useComposedRefs } from \"../../utils/use-composed-ref\"\n\ninterface Size {\n width: number\n height: number\n top: number\n left: number\n right: number\n bottom: number\n direction: string\n}\n\ninterface Props {\n children: React.ReactElement\n isPresent: boolean\n anchorX?: \"left\" | \"right\"\n anchorY?: \"top\" | \"bottom\"\n root?: HTMLElement | ShadowRoot\n pop?: boolean\n}\n\ninterface MeasureProps extends Props {\n childRef: React.RefObject\n sizeRef: React.RefObject\n}\n\n/**\n * Measurement functionality has to be within a separate component\n * to leverage snapshot lifecycle.\n */\nclass PopChildMeasure extends React.Component {\n getSnapshotBeforeUpdate(prevProps: MeasureProps) {\n const element = this.props.childRef.current\n if (isHTMLElement(element) && prevProps.isPresent && !this.props.isPresent && this.props.pop !== false) {\n const parent = element.offsetParent\n const parentWidth = isHTMLElement(parent)\n ? parent.offsetWidth || 0\n : 0\n const parentHeight = isHTMLElement(parent)\n ? parent.offsetHeight || 0\n : 0\n\n const computedStyle = getComputedStyle(element)\n const size = this.props.sizeRef.current!\n size.height = parseFloat(computedStyle.height)\n size.width = parseFloat(computedStyle.width)\n size.top = element.offsetTop\n size.left = element.offsetLeft\n size.right = parentWidth - size.width - size.left\n size.bottom = parentHeight - size.height - size.top\n size.direction = computedStyle.direction\n }\n\n return null\n }\n\n /**\n * Required with getSnapshotBeforeUpdate to stop React complaining.\n */\n componentDidUpdate() {}\n\n render() {\n return this.props.children\n }\n}\n\nexport function PopChild({ children, isPresent, anchorX, anchorY, root, pop }: Props) {\n const id = useId()\n const ref = useRef(null)\n const size = useRef({\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n direction: \"ltr\",\n })\n const { nonce } = useContext(MotionConfigContext)\n /**\n * In React 19, refs are passed via props.ref instead of element.ref.\n * We check props.ref first (React 19) and fall back to element.ref (React 18).\n */\n const childRef =\n (children.props as { ref?: React.Ref })?.ref ??\n (children as unknown as { ref?: React.Ref })?.ref\n const composedRef = useComposedRefs(ref, childRef)\n\n /**\n * We create and inject a style block so we can apply this explicit\n * sizing in a non-destructive manner by just deleting the style block.\n *\n * We can't apply size via render as the measurement happens\n * in getSnapshotBeforeUpdate (post-render), likewise if we apply the\n * styles directly on the DOM node, we might be overwriting\n * styles set via the style prop.\n */\n useInsertionEffect(() => {\n const { width, height, top, left, right, bottom, direction } = size.current\n if (isPresent || pop === false || !ref.current || !width || !height) return\n\n const isRTL = direction === \"rtl\"\n const x = anchorX === \"left\"\n ? (isRTL ? `right: ${right}` : `left: ${left}`)\n : (isRTL ? `left: ${left}` : `right: ${right}`)\n const y = anchorY === \"bottom\" ? `bottom: ${bottom}` : `top: ${top}`\n\n ref.current.dataset.motionPopId = id\n\n const style = document.createElement(\"style\")\n if (nonce) style.nonce = nonce\n\n const parent = root ?? document.head\n parent.appendChild(style)\n\n if (style.sheet) {\n style.sheet.insertRule(`\n [data-motion-pop-id=\"${id}\"] {\n position: absolute !important;\n width: ${width}px !important;\n height: ${height}px !important;\n ${x}px !important;\n ${y}px !important;\n }\n `)\n }\n\n return () => {\n ref.current?.removeAttribute(\"data-motion-pop-id\")\n if (parent.contains(style)) {\n parent.removeChild(style)\n }\n }\n }, [isPresent])\n\n return (\n \n {pop === false\n ? children\n : React.cloneElement(children as any, { ref: composedRef })}\n \n )\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { useId, useMemo } from \"react\"\nimport {\n PresenceContext,\n type PresenceContextProps,\n} from \"../../context/PresenceContext\"\nimport { VariantLabels } from \"../../motion/types\"\nimport { useConstant } from \"../../utils/use-constant\"\nimport { PopChild } from \"./PopChild\"\n\ninterface PresenceChildProps {\n children: React.ReactElement\n isPresent: boolean\n onExitComplete?: () => void\n initial?: false | VariantLabels\n custom?: any\n presenceAffectsLayout: boolean\n mode: \"sync\" | \"popLayout\" | \"wait\"\n anchorX?: \"left\" | \"right\"\n anchorY?: \"top\" | \"bottom\"\n root?: HTMLElement | ShadowRoot\n}\n\nexport const PresenceChild = ({\n children,\n initial,\n isPresent,\n onExitComplete,\n custom,\n presenceAffectsLayout,\n mode,\n anchorX,\n anchorY,\n root\n}: PresenceChildProps) => {\n const presenceChildren = useConstant(newChildrenMap)\n const id = useId()\n\n let isReusedContext = true\n let context = useMemo((): PresenceContextProps => {\n isReusedContext = false\n return {\n id,\n initial,\n isPresent,\n custom,\n onExitComplete: (childId: string) => {\n presenceChildren.set(childId, true)\n\n for (const isComplete of presenceChildren.values()) {\n if (!isComplete) return // can stop searching when any is incomplete\n }\n\n onExitComplete && onExitComplete()\n },\n register: (childId: string) => {\n presenceChildren.set(childId, false)\n return () => presenceChildren.delete(childId)\n },\n }\n }, [isPresent, presenceChildren, onExitComplete])\n\n /**\n * If the presence of a child affects the layout of the components around it,\n * we want to make a new context value to ensure they get re-rendered\n * so they can detect that layout change.\n */\n if (presenceAffectsLayout && isReusedContext) {\n context = { ...context }\n }\n\n useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n }, [isPresent])\n\n /**\n * If there's no `motion` components to fire exit animations, we want to remove this\n * component immediately.\n */\n React.useEffect(() => {\n !isPresent &&\n !presenceChildren.size &&\n onExitComplete &&\n onExitComplete()\n }, [isPresent])\n\n children = (\n \n {children}\n \n )\n\n return (\n \n {children}\n \n )\n}\n\nfunction newChildrenMap(): Map {\n return new Map()\n}\n","import { isValidElement, Children, ReactElement, ReactNode } from \"react\"\n\nexport type ComponentKey = string | number\n\nexport const getChildKey = (child: ReactElement): ComponentKey =>\n child.key || \"\"\n\nexport function onlyElements(children: ReactNode): ReactElement[] {\n const filtered: ReactElement[] = []\n\n // We use forEach here instead of map as map mutates the component key by preprending `.$`\n Children.forEach(children, (child) => {\n if (isValidElement(child)) filtered.push(child)\n })\n\n return filtered\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { useContext, useMemo, useRef, useState } from \"react\"\nimport { LayoutGroupContext } from \"../../context/LayoutGroupContext\"\nimport { useConstant } from \"../../utils/use-constant\"\nimport { useIsomorphicLayoutEffect } from \"../../utils/use-isomorphic-effect\"\nimport { PresenceChild } from \"./PresenceChild\"\nimport { AnimatePresenceProps } from \"./types\"\nimport { usePresence } from \"./use-presence\"\nimport { ComponentKey, getChildKey, onlyElements } from \"./utils\"\n\n/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```jsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n * \n * {items.map(item => (\n * \n * ))}\n * \n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * If a child contains multiple `motion` components with `exit` props, it will only unmount the child\n * once all `motion` components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nexport const AnimatePresence = ({\n children,\n custom,\n initial = true,\n onExitComplete,\n presenceAffectsLayout = true,\n mode = \"sync\",\n propagate = false,\n anchorX = \"left\",\n anchorY = \"top\",\n root\n}: React.PropsWithChildren) => {\n const [isParentPresent, safeToRemove] = usePresence(propagate)\n\n /**\n * Filter any children that aren't ReactElements. We can only track components\n * between renders with a props.key.\n */\n const presentChildren = useMemo(() => onlyElements(children), [children])\n\n /**\n * Track the keys of the currently rendered children. This is used to\n * determine which children are exiting.\n */\n const presentKeys =\n propagate && !isParentPresent ? [] : presentChildren.map(getChildKey)\n\n /**\n * If `initial={false}` we only want to pass this to components in the first render.\n */\n const isInitialRender = useRef(true)\n\n /**\n * A ref containing the currently present children. When all exit animations\n * are complete, we use this to re-render the component with the latest children\n * *committed* rather than the latest children *rendered*.\n */\n const pendingPresentChildren = useRef(presentChildren)\n\n /**\n * Track which exiting children have finished animating out.\n */\n const exitComplete = useConstant(() => new Map())\n\n /**\n * Track which components are currently processing exit to prevent duplicate processing.\n */\n const exitingComponents = useRef(new Set())\n\n /**\n * Save children to render as React state. To ensure this component is concurrent-safe,\n * we check for exiting children via an effect.\n */\n const [diffedChildren, setDiffedChildren] = useState(presentChildren)\n const [renderedChildren, setRenderedChildren] = useState(presentChildren)\n\n useIsomorphicLayoutEffect(() => {\n isInitialRender.current = false\n pendingPresentChildren.current = presentChildren\n\n /**\n * Update complete status of exiting children.\n */\n for (let i = 0; i < renderedChildren.length; i++) {\n const key = getChildKey(renderedChildren[i])\n\n if (!presentKeys.includes(key)) {\n if (exitComplete.get(key) !== true) {\n exitComplete.set(key, false)\n }\n } else {\n exitComplete.delete(key)\n exitingComponents.current.delete(key)\n }\n }\n }, [renderedChildren, presentKeys.length, presentKeys.join(\"-\")])\n\n const exitingChildren: any[] = []\n\n if (presentChildren !== diffedChildren) {\n let nextChildren = [...presentChildren]\n\n /**\n * Loop through all the currently rendered components and decide which\n * are exiting.\n */\n for (let i = 0; i < renderedChildren.length; i++) {\n const child = renderedChildren[i]\n const key = getChildKey(child)\n\n if (!presentKeys.includes(key)) {\n nextChildren.splice(i, 0, child)\n exitingChildren.push(child)\n }\n }\n\n /**\n * If we're in \"wait\" mode, and we have exiting children, we want to\n * only render these until they've all exited.\n */\n if (mode === \"wait\" && exitingChildren.length) {\n nextChildren = exitingChildren\n }\n\n setRenderedChildren(onlyElements(nextChildren))\n setDiffedChildren(presentChildren)\n\n /**\n * Early return to ensure once we've set state with the latest diffed\n * children, we can immediately re-render.\n */\n return null\n }\n\n if (\n process.env.NODE_ENV !== \"production\" &&\n mode === \"wait\" &&\n renderedChildren.length > 1\n ) {\n console.warn(\n `You're attempting to animate multiple children within AnimatePresence, but its mode is set to \"wait\". This will lead to odd visual behaviour.`\n )\n }\n\n /**\n * If we've been provided a forceRender function by the LayoutGroupContext,\n * we can use it to force a re-render amongst all surrounding components once\n * all components have finished animating out.\n */\n const { forceRender } = useContext(LayoutGroupContext)\n\n return (\n <>\n {renderedChildren.map((child) => {\n const key = getChildKey(child)\n\n const isPresent =\n propagate && !isParentPresent\n ? false\n : presentChildren === renderedChildren ||\n presentKeys.includes(key)\n\n const onExit = () => {\n if (exitingComponents.current.has(key)) {\n return\n }\n\n if (exitComplete.has(key)) {\n exitingComponents.current.add(key)\n exitComplete.set(key, true)\n } else {\n return\n }\n\n let isEveryExitComplete = true\n exitComplete.forEach((isExitComplete) => {\n if (!isExitComplete) isEveryExitComplete = false\n })\n\n if (isEveryExitComplete) {\n forceRender?.()\n setRenderedChildren(pendingPresentChildren.current)\n\n propagate && safeToRemove?.()\n\n onExitComplete && onExitComplete()\n }\n }\n\n return (\n \n {child}\n \n )\n })}\n \n )\n}\n","\"use client\"\n\nimport { createContext } from \"react\"\n\n/**\n * Note: Still used by components generated by old versions of Framer\n *\n * @deprecated\n */\nexport const DeprecatedLayoutGroupContext = createContext(null)\n","\"use client\"\n\nimport { useRef } from \"react\"\nimport { useIsomorphicLayoutEffect } from \"./use-isomorphic-effect\"\n\nexport function useIsMounted() {\n const isMounted = useRef(false)\n useIsomorphicLayoutEffect(() => {\n isMounted.current = true\n\n return () => {\n isMounted.current = false\n }\n }, [])\n\n return isMounted\n}\n","\"use client\"\n\nimport { frame } from \"motion-dom\"\nimport { useCallback, useState } from \"react\"\nimport { useIsMounted } from \"./use-is-mounted\"\n\nexport function useForceUpdate(): [VoidFunction, number] {\n const isMounted = useIsMounted()\n const [forcedRenderCount, setForcedRenderCount] = useState(0)\n\n const forceRender = useCallback(() => {\n isMounted.current && setForcedRenderCount(forcedRenderCount + 1)\n }, [forcedRenderCount])\n\n /**\n * Defer this to the end of the next animation frame in case there are multiple\n * synchronous calls.\n */\n const deferredForceRender = useCallback(\n () => frame.postRender(forceRender),\n [forceRender]\n )\n\n return [deferredForceRender, forcedRenderCount]\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { MutableRefObject, useContext, useMemo, useRef } from \"react\"\nimport {\n LayoutGroupContext,\n LayoutGroupContextProps,\n} from \"../../context/LayoutGroupContext\"\nimport { DeprecatedLayoutGroupContext } from \"../../context/DeprecatedLayoutGroupContext\"\nimport { nodeGroup } from \"../../projection\"\nimport { useForceUpdate } from \"../../utils/use-force-update\"\n\ntype InheritOption = boolean | \"id\"\n\nexport interface Props {\n id?: string\n inherit?: InheritOption\n}\n\nconst shouldInheritGroup = (inherit: InheritOption) => inherit === true\nconst shouldInheritId = (inherit: InheritOption) =>\n shouldInheritGroup(inherit === true) || inherit === \"id\"\n\nexport const LayoutGroup: React.FunctionComponent<\n React.PropsWithChildren\n> = ({ children, id, inherit = true }) => {\n const layoutGroupContext = useContext(LayoutGroupContext)\n const deprecatedLayoutGroupContext = useContext(\n DeprecatedLayoutGroupContext\n )\n const [forceRender, key] = useForceUpdate()\n const context = useRef(\n null\n ) as MutableRefObject\n\n const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext\n if (context.current === null) {\n if (shouldInheritId(inherit) && upstreamId) {\n id = id ? upstreamId + \"-\" + id : upstreamId\n }\n\n context.current = {\n id,\n group: shouldInheritGroup(inherit)\n ? layoutGroupContext.group || nodeGroup()\n : nodeGroup(),\n }\n }\n\n const memoizedContext = useMemo(\n () => ({ ...context.current, forceRender }),\n [key]\n )\n\n return (\n \n {children}\n \n )\n}\n","\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { LazyContext } from \"../../context/LazyContext\"\nimport { loadFeatures } from \"../../motion/features/load-features\"\nimport { FeatureBundle, LazyFeatureBundle } from \"../../motion/features/types\"\nimport { CreateVisualElement } from \"../../render/types\"\nimport { LazyProps } from \"./types\"\n\n/**\n * Used in conjunction with the `m` component to reduce bundle size.\n *\n * `m` is a version of the `motion` component that only loads functionality\n * critical for the initial render.\n *\n * `LazyMotion` can then be used to either synchronously or asynchronously\n * load animation and gesture support.\n *\n * ```jsx\n * // Synchronous loading\n * import { LazyMotion, m, domAnimation } from \"framer-motion\"\n *\n * function App() {\n * return (\n * \n * \n * \n * )\n * }\n *\n * // Asynchronous loading\n * import { LazyMotion, m } from \"framer-motion\"\n *\n * function App() {\n * return (\n * import('./path/to/domAnimation')}>\n * \n * \n * )\n * }\n * ```\n *\n * @public\n */\nexport function LazyMotion({ children, features, strict = false }: LazyProps) {\n const [, setIsLoaded] = useState(!isLazyBundle(features))\n const loadedRenderer = useRef(undefined)\n\n /**\n * If this is a synchronous load, load features immediately\n */\n if (!isLazyBundle(features)) {\n const { renderer, ...loadedFeatures } = features\n loadedRenderer.current = renderer\n loadFeatures(loadedFeatures)\n }\n\n useEffect(() => {\n if (isLazyBundle(features)) {\n features().then(({ renderer, ...loadedFeatures }) => {\n loadFeatures(loadedFeatures)\n loadedRenderer.current = renderer\n setIsLoaded(true)\n })\n }\n }, [])\n\n return (\n \n {children}\n \n )\n}\n\nfunction isLazyBundle(\n features: FeatureBundle | LazyFeatureBundle\n): features is LazyFeatureBundle {\n return typeof features === \"function\"\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { useContext, useMemo } from \"react\"\nimport { resolveTransition } from \"motion-dom\"\nimport { MotionConfigContext } from \"../../context/MotionConfigContext\"\nimport {\n loadExternalIsValidProp,\n IsValidProp,\n} from \"../../render/dom/utils/filter-props\"\nimport { useConstant } from \"../../utils/use-constant\"\n\nexport interface MotionConfigProps extends Partial {\n children?: React.ReactNode\n isValidProp?: IsValidProp\n}\n\n/**\n * `MotionConfig` is used to set configuration options for all children `motion` components.\n *\n * ```jsx\n * import { motion, MotionConfig } from \"framer-motion\"\n *\n * export function App() {\n * return (\n * \n * \n * \n * )\n * }\n * ```\n *\n * @public\n */\nexport function MotionConfig({\n children,\n isValidProp,\n ...config\n}: MotionConfigProps) {\n isValidProp && loadExternalIsValidProp(isValidProp)\n\n /**\n * Inherit props from any parent MotionConfig components\n */\n const parentConfig = useContext(MotionConfigContext)\n config = { ...parentConfig, ...config }\n\n config.transition = resolveTransition(\n config.transition,\n parentConfig.transition\n )\n\n /**\n * Don't allow isStatic to change between renders as it affects how many hooks\n * motion components fire.\n */\n config.isStatic = useConstant(() => config.isStatic)\n\n /**\n * Creating a new config context object will re-render every `motion` component\n * every time it renders. So we only want to create a new one sparingly.\n */\n const context = useMemo(\n () => config,\n [\n JSON.stringify(config.transition),\n config.transformPagePoint,\n config.reducedMotion,\n config.skipAnimations,\n ]\n )\n\n return (\n \n {children}\n \n )\n}\n","\"use client\"\n\nimport { createContext } from \"react\"\nimport { ReorderContextProps } from \"../components/Reorder/types\"\n\nexport const ReorderContext = createContext | null>(\n null\n)\n","import { warnOnce } from \"motion-utils\"\nimport { createMotionComponent, MotionComponentOptions } from \"../../motion\"\nimport { FeaturePackages } from \"../../motion/features/types\"\nimport { MotionProps } from \"../../motion/types\"\nimport { DOMMotionComponents } from \"../dom/types\"\nimport { CreateVisualElement } from \"../types\"\n\n/**\n * I'd rather the return type of `custom` to be implicit but this throws\n * incorrect relative paths in the exported types and API Extractor throws\n * a wobbly.\n */\ntype ComponentProps = React.PropsWithoutRef &\n React.RefAttributes\nexport type CustomDomComponent = React.ComponentType<\n ComponentProps\n>\n\ntype MotionProxy = typeof createMotionComponent &\n DOMMotionComponents & { create: typeof createMotionComponent }\n\nexport function createMotionProxy(\n preloadedFeatures?: FeaturePackages,\n createVisualElement?: CreateVisualElement\n): MotionProxy {\n if (typeof Proxy === \"undefined\") {\n return createMotionComponent as MotionProxy\n }\n\n /**\n * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.\n * Rather than generating them anew every render.\n */\n const componentCache = new Map()\n\n const factory = (Component: string, options?: MotionComponentOptions) => {\n return createMotionComponent(\n Component,\n options,\n preloadedFeatures,\n createVisualElement\n )\n }\n\n /**\n * Support for deprecated`motion(Component)` pattern\n */\n const deprecatedFactoryFunction = (\n Component: string,\n options?: MotionComponentOptions\n ) => {\n if (process.env.NODE_ENV !== \"production\") {\n warnOnce(\n false,\n \"motion() is deprecated. Use motion.create() instead.\"\n )\n }\n return factory(Component, options)\n }\n\n return new Proxy(deprecatedFactoryFunction, {\n /**\n * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.\n * The prop name is passed through as `key` and we can use that to generate a `motion`\n * DOM component with that name.\n */\n get: (_target, key: string) => {\n if (key === \"create\") return factory\n\n /**\n * If this element doesn't exist in the component cache, create it and cache.\n */\n if (!componentCache.has(key)) {\n componentCache.set(\n key,\n createMotionComponent(\n key,\n undefined,\n preloadedFeatures,\n createVisualElement\n )\n )\n }\n\n return componentCache.get(key)!\n },\n }) as MotionProxy\n}\n","import { createDomVisualElement } from \"../../dom/create-visual-element\"\nimport { createMotionProxy } from \"../create-proxy\"\nimport { featureBundle } from \"./feature-bundle\"\n\nexport const motion = /*@__PURE__*/ createMotionProxy(\n featureBundle,\n createDomVisualElement\n)\n","import { mixNumber } from \"motion-dom\"\nimport { moveItem } from \"motion-utils\"\nimport { ItemData } from \"../types\"\n\nexport function checkReorder(\n order: ItemData[],\n value: T,\n offset: number,\n velocity: number\n): ItemData[] {\n if (!velocity) return order\n\n const index = order.findIndex((item) => item.value === value)\n\n if (index === -1) return order\n\n const nextOffset = velocity > 0 ? 1 : -1\n const nextItem = order[index + nextOffset]\n\n if (!nextItem) return order\n\n const item = order[index]\n const nextLayout = nextItem.layout\n const nextItemCenter = mixNumber(nextLayout.min, nextLayout.max, 0.5)\n\n if (\n (nextOffset === 1 && item.layout.max + offset > nextItemCenter) ||\n (nextOffset === -1 && item.layout.min + offset < nextItemCenter)\n ) {\n return moveItem(order, index, index + nextOffset)\n }\n\n return order\n}\n","\"use client\"\n\nimport { invariant } from \"motion-utils\"\nimport * as React from \"react\"\nimport { forwardRef, FunctionComponent, JSX, useEffect, useRef } from \"react\"\nimport { ReorderContext } from \"../../context/ReorderContext\"\nimport { motion } from \"../../render/components/motion/proxy\"\nimport { HTMLMotionProps } from \"../../render/html/types\"\nimport { useConstant } from \"../../utils/use-constant\"\nimport {\n DefaultGroupElement,\n ItemData,\n ReorderContextProps,\n ReorderElementTag,\n} from \"./types\"\nimport { checkReorder } from \"./utils/check-reorder\"\n\nexport interface Props<\n V,\n TagName extends ReorderElementTag = DefaultGroupElement\n> {\n /**\n * A HTML element to render this component as. Defaults to `\"ul\"`.\n *\n * @public\n */\n as?: TagName\n\n /**\n * The axis to reorder along. By default, items will be draggable on this axis.\n * To make draggable on both axes, set ``\n *\n * @public\n */\n axis?: \"x\" | \"y\"\n\n /**\n * A callback to fire with the new value order. For instance, if the values\n * are provided as a state from `useState`, this could be the set state function.\n *\n * @public\n */\n onReorder: (newOrder: V[]) => void\n\n /**\n * The latest values state.\n *\n * ```jsx\n * function Component() {\n * const [items, setItems] = useState([0, 1, 2])\n *\n * return (\n * \n * {items.map((item) => )}\n * \n * )\n * }\n * ```\n *\n * @public\n */\n values: V[]\n}\n\ntype ReorderGroupProps<\n V,\n TagName extends ReorderElementTag = DefaultGroupElement\n> = Props &\n Omit, \"values\"> &\n React.PropsWithChildren<{}>\n\nexport function ReorderGroupComponent<\n V,\n TagName extends ReorderElementTag = DefaultGroupElement\n>(\n {\n children,\n as = \"ul\" as TagName,\n axis = \"y\",\n onReorder,\n values,\n ...props\n }: ReorderGroupProps,\n externalRef?: React.ForwardedRef\n): JSX.Element {\n const Component = useConstant(\n () => motion[as as keyof typeof motion]\n ) as FunctionComponent<\n React.PropsWithChildren & { ref?: React.Ref }>\n >\n\n const order: ItemData[] = []\n const isReordering = useRef(false)\n const groupRef = useRef(null)\n\n invariant(\n Boolean(values),\n \"Reorder.Group must be provided a values prop\",\n \"reorder-values\"\n )\n\n const context: ReorderContextProps = {\n axis,\n groupRef,\n registerItem: (value, layout) => {\n // If the entry was already added, update it rather than adding it again\n const idx = order.findIndex((entry) => value === entry.value)\n if (idx !== -1) {\n order[idx].layout = layout[axis]\n } else {\n order.push({ value: value, layout: layout[axis] })\n }\n order.sort(compareMin)\n },\n updateOrder: (item, offset, velocity) => {\n if (isReordering.current) return\n\n const newOrder = checkReorder(order, item, offset, velocity)\n\n if (order !== newOrder) {\n isReordering.current = true\n\n // Find which two values swapped and apply that swap\n // to the full values array. This preserves unmeasured\n // items (e.g. in virtualized lists).\n const newValues = [...values]\n for (let i = 0; i < newOrder.length; i++) {\n if (order[i].value !== newOrder[i].value) {\n const a = values.indexOf(order[i].value)\n const b = values.indexOf(newOrder[i].value)\n if (a !== -1 && b !== -1) {\n ;[newValues[a], newValues[b]] = [newValues[b], newValues[a]]\n }\n break\n }\n }\n onReorder(newValues)\n }\n },\n }\n\n useEffect(() => {\n isReordering.current = false\n })\n\n // Combine refs if external ref is provided\n const setRef = (element: Element | null) => {\n ;(groupRef as React.MutableRefObject).current = element\n if (typeof externalRef === \"function\") {\n externalRef(element)\n } else if (externalRef) {\n ;(\n externalRef as React.MutableRefObject\n ).current = element\n }\n }\n\n /**\n * Disable browser scroll anchoring on the group container.\n * When items reorder, scroll anchoring can cause the browser to adjust\n * the scroll position, which interferes with drag position calculations.\n */\n const groupStyle = {\n overflowAnchor: \"none\" as const,\n ...props.style,\n }\n\n return (\n \n \n {children}\n \n \n )\n}\n\nexport const ReorderGroup = /*@__PURE__*/ forwardRef(ReorderGroupComponent) as <\n Values extends any[],\n TagName extends ReorderElementTag = DefaultGroupElement\n>(\n props: Omit<\n ReorderGroupProps,\n \"values\" | \"onReorder\"\n > & {\n values: Values\n onReorder: (newOrder: Values) => void\n } & { ref?: React.ForwardedRef }\n) => ReturnType\n\nfunction compareMin(a: ItemData, b: ItemData) {\n return a.layout.min - b.layout.min\n}\n","\"use client\"\n\nimport { motionValue, MotionValue } from \"motion-dom\"\nimport { useContext, useEffect, useState } from \"react\"\nimport { MotionConfigContext } from \"../context/MotionConfigContext\"\nimport { useConstant } from \"../utils/use-constant\"\n\n/**\n * Creates a `MotionValue` to track the state and velocity of a value.\n *\n * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.\n *\n * ```jsx\n * export const MyComponent = () => {\n * const scale = useMotionValue(1)\n *\n * return \n * }\n * ```\n *\n * @param initial - The initial state.\n *\n * @public\n */\nexport function useMotionValue(initial: T): MotionValue {\n const value = useConstant(() => motionValue(initial))\n\n /**\n * If this motion value is being used in static mode, like on\n * the Framer canvas, force components to rerender when the motion\n * value is updated.\n */\n const { isStatic } = useContext(MotionConfigContext)\n if (isStatic) {\n const [, setLatest] = useState(initial)\n useEffect(() => value.on(\"change\", setLatest), [])\n }\n\n return value\n}\n","\"use client\"\n\nimport { cancelFrame, frame, MotionValue } from \"motion-dom\"\nimport { useIsomorphicLayoutEffect } from \"../utils/use-isomorphic-effect\"\nimport { useMotionValue } from \"./use-motion-value\"\n\nexport function useCombineMotionValues(\n values: MotionValue[],\n combineValues: () => R\n) {\n /**\n * Initialise the returned motion value. This remains the same between renders.\n */\n const value = useMotionValue(combineValues())\n\n /**\n * Create a function that will update the template motion value with the latest values.\n * This is pre-bound so whenever a motion value updates it can schedule its\n * execution in Framesync. If it's already been scheduled it won't be fired twice\n * in a single frame.\n */\n const updateValue = () => value.set(combineValues())\n\n /**\n * Synchronously update the motion value with the latest values during the render.\n * This ensures that within a React render, the styles applied to the DOM are up-to-date.\n */\n updateValue()\n\n /**\n * Subscribe to all motion values found within the template. Whenever any of them change,\n * schedule an update.\n */\n useIsomorphicLayoutEffect(() => {\n const scheduleUpdate = () => frame.preRender(updateValue, false, true)\n const subscriptions = values.map((v) => v.on(\"change\", scheduleUpdate))\n\n return () => {\n subscriptions.forEach((unsubscribe) => unsubscribe())\n cancelFrame(updateValue)\n }\n })\n\n return value\n}\n","\"use client\"\n\nimport { collectMotionValues, type MotionValue } from \"motion-dom\"\nimport { useCombineMotionValues } from \"./use-combine-values\"\n\nexport function useComputed(compute: () => O): MotionValue {\n /**\n * Open session of collectMotionValues. Any MotionValue that calls get()\n * will be saved into this array.\n */\n collectMotionValues.current = []\n\n compute()\n\n const value = useCombineMotionValues(collectMotionValues.current, compute)\n\n /**\n * Synchronously close session of collectMotionValues.\n */\n collectMotionValues.current = undefined\n\n return value\n}\n","\"use client\"\n\nimport {\n AnyResolvedKeyframe,\n MotionValue,\n transform,\n TransformOptions,\n} from \"motion-dom\"\nimport { useConstant } from \"../utils/use-constant\"\nimport { useCombineMotionValues } from \"./use-combine-values\"\nimport { useComputed } from \"./use-computed\"\n\nexport type InputRange = number[]\ntype SingleTransformer = (input: I) => O\ntype MultiTransformer = (input: I[]) => O\ntype Transformer =\n | SingleTransformer\n /**\n * Ideally, this would be typed in all instances, but to type this\n * more accurately requires the tuple support in TypeScript 4:\n * https://gist.github.com/InventingWithMonster/c4d23752a0fae7888596c4ff6d92733a\n */\n | MultiTransformer\n\ninterface OutputMap {\n [key: string]: O[]\n}\n\n/**\n * Create multiple `MotionValue`s that transform the output of another `MotionValue` by mapping it from one range of values into multiple output ranges.\n *\n * @remarks\n *\n * This is useful when you want to derive multiple values from a single input value.\n * The keys of the output map must remain constant across renders.\n *\n * ```jsx\n * export const MyComponent = () => {\n * const x = useMotionValue(0)\n * const { opacity, scale } = useTransform(x, [0, 100], {\n * opacity: [0, 1],\n * scale: [0.5, 1]\n * })\n *\n * return (\n * \n * )\n * }\n * ```\n *\n * @param inputValue - `MotionValue`\n * @param inputRange - A linear series of numbers (either all increasing or decreasing)\n * @param outputMap - An object where keys map to output ranges. Each output range must be the same length as `inputRange`.\n * @param options - Transform options applied to all outputs\n *\n * @returns An object with the same keys as `outputMap`, where each value is a `MotionValue`\n *\n * @public\n */\nexport function useTransform>(\n inputValue: MotionValue,\n inputRange: InputRange,\n outputMap: T,\n options?: TransformOptions\n): { [K in keyof T]: MotionValue }\n\n/**\n * Create a `MotionValue` that transforms the output of another `MotionValue` by mapping it from one range of values into another.\n *\n * @remarks\n *\n * Given an input range of `[-200, -100, 100, 200]` and an output range of\n * `[0, 1, 1, 0]`, the returned `MotionValue` will:\n *\n * - When provided a value between `-200` and `-100`, will return a value between `0` and `1`.\n * - When provided a value between `-100` and `100`, will return `1`.\n * - When provided a value between `100` and `200`, will return a value between `1` and `0`\n *\n *\n * The input range must be a linear series of numbers. The output range\n * can be any value type supported by Motion: numbers, colors, shadows, etc.\n *\n * Every value in the output range must be of the same type and in the same format.\n *\n * ```jsx\n * export const MyComponent = () => {\n * const x = useMotionValue(0)\n * const xRange = [-200, -100, 100, 200]\n * const opacityRange = [0, 1, 1, 0]\n * const opacity = useTransform(x, xRange, opacityRange)\n *\n * return (\n * \n * )\n * }\n * ```\n *\n * @param inputValue - `MotionValue`\n * @param inputRange - A linear series of numbers (either all increasing or decreasing)\n * @param outputRange - A series of numbers, colors or strings. Must be the same length as `inputRange`.\n * @param options -\n *\n * - clamp: boolean. Clamp values to within the given range. Defaults to `true`\n * - ease: EasingFunction[]. Easing functions to use on the interpolations between each value in the input and output ranges. If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition between each.\n *\n * @returns `MotionValue`\n *\n * @public\n */\nexport function useTransform(\n value: MotionValue,\n inputRange: InputRange,\n outputRange: O[],\n options?: TransformOptions\n): MotionValue\n\n/**\n * Create a `MotionValue` that transforms the output of another `MotionValue` through a function.\n * In this example, `y` will always be double `x`.\n *\n * ```jsx\n * export const MyComponent = () => {\n * const x = useMotionValue(10)\n * const y = useTransform(x, value => value * 2)\n *\n * return \n * }\n * ```\n *\n * @param input - A `MotionValue` that will pass its latest value through `transform` to update the returned `MotionValue`.\n * @param transform - A function that accepts the latest value from `input` and returns a new value.\n * @returns `MotionValue`\n *\n * @public\n */\nexport function useTransform(\n input: MotionValue,\n transformer: SingleTransformer\n): MotionValue\n\n/**\n * Pass an array of `MotionValue`s and a function to combine them. In this example, `z` will be the `x` multiplied by `y`.\n *\n * ```jsx\n * export const MyComponent = () => {\n * const x = useMotionValue(0)\n * const y = useMotionValue(0)\n * const z = useTransform([x, y], ([latestX, latestY]) => latestX * latestY)\n *\n * return \n * }\n * ```\n *\n * @param input - An array of `MotionValue`s that will pass their latest values through `transform` to update the returned `MotionValue`.\n * @param transform - A function that accepts the latest values from `input` and returns a new value.\n * @returns `MotionValue`\n *\n * @public\n */\nexport function useTransform(\n input:\n | MotionValue[]\n | MotionValue
