: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
const steps = stepsOrder.reduce((acc, key) => {
acc[key] = createRenderStep(() => (runNextFrame = true));
const processStep = (stepId) => {
steps[stepId].process(state);
const processBatch = () => {
const timestamp = MotionGlobalConfig.useManualTiming
state.delta = useDefaultElapsed
: Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
state.timestamp = timestamp;
state.isProcessing = true;
stepsOrder.forEach(processStep);
state.isProcessing = false;
if (runNextFrame && allowKeepAlive) {
useDefaultElapsed = false;
scheduleNextBatch(processBatch);
useDefaultElapsed = true;
if (!state.isProcessing) {
scheduleNextBatch(processBatch);
const schedule = stepsOrder.reduce((acc, key) => {
acc[key] = (process, keepAlive = false, immediate = false) => {
return step.schedule(process, keepAlive, immediate);
const cancel = (process) => stepsOrder.forEach((key) => steps[key].cancel(process));
return { schedule, cancel, state, steps };
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/frameloop/microtask.mjs
const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs
function useVisualElement(Component, visualState, props, createVisualElement) {
const { visualElement: parent } = (0,external_React_.useContext)(MotionContext);
const lazyContext = (0,external_React_.useContext)(LazyContext);
const presenceContext = (0,external_React_.useContext)(PresenceContext_PresenceContext);
const reducedMotionConfig = (0,external_React_.useContext)(MotionConfigContext).reducedMotion;
const visualElementRef = (0,external_React_.useRef)();
* If we haven't preloaded a renderer, check to see if we have one lazy-loaded
createVisualElement = createVisualElement || lazyContext.renderer;
if (!visualElementRef.current && createVisualElement) {
visualElementRef.current = createVisualElement(Component, {
blockInitialAnimation: presenceContext
? presenceContext.initial === false
const visualElement = visualElementRef.current;
(0,external_React_.useInsertionEffect)(() => {
visualElement && visualElement.update(props, presenceContext);
* Cache this value as we want to know whether HandoffAppearAnimations
* was present on initial render - it will be deleted after this.
const wantsHandoff = (0,external_React_.useRef)(Boolean(props[optimizedAppearDataAttribute] &&
!window.HandoffComplete));
useIsomorphicLayoutEffect(() => {
microtask.render(visualElement.render);
* Ideally this function would always run in a useEffect.
* However, if we have optimised appear animations to handoff from,
* it needs to happen synchronously to ensure there's no flash of
* incorrect styles in the event of a hydration error.
* So if we detect a situtation where optimised appear animations
* are running, we use useLayoutEffect to trigger animations.
if (wantsHandoff.current && visualElement.animationState) {
visualElement.animationState.animateChanges();
(0,external_React_.useEffect)(() => {
visualElement.updateFeatures();
if (!wantsHandoff.current && visualElement.animationState) {
visualElement.animationState.animateChanges();
if (wantsHandoff.current) {
wantsHandoff.current = false;
// This ensures all future calls to animateChanges() will run in useEffect
window.HandoffComplete = true;
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-ref-object.mjs
function isRefObject(ref) {
typeof ref === "object" &&
Object.prototype.hasOwnProperty.call(ref, "current"));
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs
* Creates a ref function that, when called, hydrates the provided
* external ref and VisualElement.
function useMotionRef(visualState, visualElement, externalRef) {
return (0,external_React_.useCallback)((instance) => {
instance && visualState.mount && visualState.mount(instance);
? visualElement.mount(instance)
: visualElement.unmount();
if (typeof externalRef === "function") {
else if (isRefObject(externalRef)) {
externalRef.current = instance;
* Only pass a new ref callback to React if we've received a visual element
* factory. Otherwise we'll be mounting/remounting every time externalRef
* or other dependencies change.
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/is-variant-label.mjs
* Decides if the supplied variable is variant label
function isVariantLabel(v) {
return typeof v === "string" || Array.isArray(v);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.mjs
function isAnimationControls(v) {
typeof v.start === "function");
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/variant-props.mjs
const variantPriorityOrder = [
const variantProps = ["initial", ...variantPriorityOrder];
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/is-controlling-variants.mjs
function isControllingVariants(props) {
return (isAnimationControls(props.animate) ||
variantProps.some((name) => isVariantLabel(props[name])));
function isVariantNode(props) {
return Boolean(isControllingVariants(props) || props.variants);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/utils.mjs
function getCurrentTreeVariants(props, context) {
if (isControllingVariants(props)) {
const { initial, animate } = props;
initial: initial === false || isVariantLabel(initial)
animate: isVariantLabel(animate) ? animate : undefined,
return props.inherit !== false ? context : {};
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/create.mjs
function useCreateMotionContext(props) {
const { initial, animate } = getCurrentTreeVariants(props, (0,external_React_.useContext)(MotionContext));
return (0,external_React_.useMemo)(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
function variantLabelsAsDependency(prop) {
return Array.isArray(prop) ? prop.join(" ") : prop;
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/definitions.mjs
drag: ["drag", "dragControls"],
hover: ["whileHover", "onHoverStart", "onHoverEnd"],
tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
layout: ["layout", "layoutId"],
const featureDefinitions = {};
for (const key in featureProps) {
featureDefinitions[key] = {
isEnabled: (props) => featureProps[key].some((name) => !!props[name]),
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/load-features.mjs
function loadFeatures(features) {
for (const key in features) {
featureDefinitions[key] = {
...featureDefinitions[key],
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs
const LayoutGroupContext = (0,external_React_.createContext)({});
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs
* Internal, exported only for usage in Framer
const SwitchLayoutGroupContext = (0,external_React_.createContext)({});
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/symbol.mjs
const motionComponentSymbol = Symbol.for("motionComponentSymbol");
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/index.mjs
* Create a `motion` component.
* This function accepts a Component argument, which can be either a string (ie "div"
* for `motion.div`), or an actual React component.
* Alongside this is a config option which provides a way of rendering the provided
* component "offline", or outside the React render cycle.
function motion_createMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) {
preloadedFeatures && loadFeatures(preloadedFeatures);
function MotionComponent(props, externalRef) {
* If we need to measure the element we load this functionality in a
* separate class component in order to gain access to getSnapshotBeforeUpdate.
...(0,external_React_.useContext)(MotionConfigContext),
layoutId: useLayoutId(props),
const { isStatic } = configAndProps;
const context = useCreateMotionContext(props);
const visualState = useVisualState(props, isStatic);
if (!isStatic && is_browser_isBrowser) {
* Create a VisualElement for this component. A VisualElement provides a common
* interface to renderer-specific APIs (ie DOM/Three.js etc) as well as
* providing a way of rendering to these APIs outside of the React render loop
* for more performant animations and interactions
context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement);
* Load Motion gesture and animation features. These are rendered as renderless
* components so each feature can optionally make use of React lifecycle methods.
const initialLayoutGroupConfig = (0,external_React_.useContext)(SwitchLayoutGroupContext);
const isStrict = (0,external_React_.useContext)(LazyContext).strict;
if (context.visualElement) {
MeasureLayout = context.visualElement.loadFeatures(
// Note: Pass the full new combined props to correctly re-render dynamic feature components.
configAndProps, isStrict, preloadedFeatures, initialLayoutGroupConfig);
* The mount order and hierarchy is specific to ensure our element ref
* is hydrated by the time features fire their effects.
return ((0,external_ReactJSXRuntime_namespaceObject.jsxs)(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? ((0,external_ReactJSXRuntime_namespaceObject.jsx)(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] }));
const ForwardRefComponent = (0,external_React_.forwardRef)(MotionComponent);
ForwardRefComponent[motionComponentSymbol] = Component;
return ForwardRefComponent;
function useLayoutId({ layoutId }) {
const layoutGroupId = (0,external_React_.useContext)(LayoutGroupContext).id;
return layoutGroupId && layoutId !== undefined
? layoutGroupId + "-" + layoutId
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/motion-proxy.mjs
* Convert any React component into a `motion` component. The provided component
* **must** use `React.forwardRef` to the underlying DOM component you want to animate.
* const Component = React.forwardRef((props, ref) => {
* return <div ref={ref} />
* const MotionComponent = motion(Component)
function createMotionProxy(createConfig) {
function custom(Component, customMotionComponentConfig = {}) {
return motion_createMotionComponent(createConfig(Component, customMotionComponentConfig));
if (typeof Proxy === "undefined") {
* A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
* Rather than generating them anew every render.
const componentCache = new Map();
return new Proxy(custom, {
* Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
* The prop name is passed through as `key` and we can use that to generate a `motion`
* DOM component with that name.
* If this element doesn't exist in the component cache, create it and cache.
if (!componentCache.has(key)) {
componentCache.set(key, custom(key));
return componentCache.get(key);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/lowercase-elements.mjs
* We keep these listed seperately as we use the lowercase tag names as part
* of the runtime bundle to detect SVG components
const lowercaseSVGElements = [
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs
function isSVGComponent(Component) {
* If it's not a string, it's a custom React component. Currently we only support
* HTML custom React components.
typeof Component !== "string" ||
* If it contains a dash, the element is a custom HTML webcomponent.
Component.includes("-")) {