: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = renderedProps;
this.projection = new ProjectionNodeConstructor(this.latestValues, renderedProps["data-framer-portal-id"]
: getClosestProjectingNode(this.parent));
this.projection.setOptions({
alwaysMeasureLayout: Boolean(drag) ||
(dragConstraints && isRefObject(dragConstraints)),
scheduleRender: () => this.scheduleRender(),
* TODO: Update options in an effect. This could be tricky as it'll be too late
* to update by the time layout animations run.
* We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
* ensuring it gets called if there's no potential layout animations.
animationType: typeof layout === "string" ? layout : "both",
initialPromotionConfig: initialLayoutGroupConfig,
for (const key in this.features) {
const feature = this.features[key];
feature.isMounted = true;
this.build(this.renderState, this.latestValues, this.options, this.props);
* Measure the current viewport box with or without transforms.
* Only measures axis-aligned boxes, rotate and skew must be manually
* removed with a re-render to work.
? this.measureInstanceViewportBox(this.current, this.props)
return this.latestValues[key];
setStaticValue(key, value) {
this.latestValues[key] = value;
* Update the provided props. Ensure any newly-added motion values are
* added to our map, old ones removed, and listeners updated.
update(props, presenceContext) {
if (props.transformTemplate || this.props.transformTemplate) {
this.prevProps = this.props;
this.prevPresenceContext = this.presenceContext;
this.presenceContext = presenceContext;
* Update prop event handlers ie onAnimationStart, onAnimationComplete
for (let i = 0; i < propEventHandlers.length; i++) {
const key = propEventHandlers[i];
if (this.propEventSubscriptions[key]) {
this.propEventSubscriptions[key]();
delete this.propEventSubscriptions[key];
const listenerName = ("on" + key);
const listener = props[listenerName];
this.propEventSubscriptions[key] = this.on(key, listener);
this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps, this), this.prevMotionValues);
if (this.handleChildMotionValue) {
this.handleChildMotionValue();
* Returns the variant definition with a given name.
return this.props.variants ? this.props.variants[name] : undefined;
* Returns the defined default transition on this component.
return this.props.transition;
getTransformPagePoint() {
return this.props.transformPagePoint;
getClosestVariantNode() {
return this.isVariantNode
? this.parent.getClosestVariantNode()
getVariantContext(startAtParent = false) {
return this.parent ? this.parent.getVariantContext() : undefined;
if (!this.isControllingVariants) {
const context = this.parent
? this.parent.getVariantContext() || {}
if (this.props.initial !== undefined) {
context.initial = this.props.initial;
for (let i = 0; i < numVariantProps; i++) {
const name = variantProps[i];
const prop = this.props[name];
if (isVariantLabel(prop) || prop === false) {
* Add a child visual element to our set of children.
const closestVariantNode = this.getClosestVariantNode();
if (closestVariantNode) {
closestVariantNode.variantChildren &&
closestVariantNode.variantChildren.add(child);
return () => closestVariantNode.variantChildren.delete(child);
* Add a motion value and bind it to this visual element.
// Remove existing value if it exists
const existingValue = this.values.get(key);
if (value !== existingValue) {
this.bindToMotionValue(key, value);
this.values.set(key, value);
this.latestValues[key] = value.get();
* Remove a motion value and unbind any active subscriptions.
const unsubscribe = this.valueSubscriptions.get(key);
this.valueSubscriptions.delete(key);
delete this.latestValues[key];
this.removeValueFromRenderState(key, this.renderState);
* Check whether we have a motion value for this key
return this.values.has(key);
getValue(key, defaultValue) {
if (this.props.values && this.props.values[key]) {
return this.props.values[key];
let value = this.values.get(key);
if (value === undefined && defaultValue !== undefined) {
value = motionValue(defaultValue === null ? undefined : defaultValue, { owner: this });
this.addValue(key, value);
* If we're trying to animate to a previously unencountered value,
* we need to check for it in our state and as a last resort read it
* directly from the instance (which might have performance implications).
let value = this.latestValues[key] !== undefined || !this.current
: (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
if (value !== undefined && value !== null) {
if (typeof value === "string" &&
(isNumericalString(value) || isZeroValueString(value))) {
// If this is a number read as a string, ie "0" or "200", convert it to a number
value = parseFloat(value);
else if (!findValueType(value) && complex.test(target)) {
value = animatable_none_getAnimatableNone(key, target);
this.setBaseTarget(key, isMotionValue(value) ? value.get() : value);
return isMotionValue(value) ? value.get() : value;
* Set the base target to later animate back to. This is currently
* only hydrated on creation and when we first read a value.
setBaseTarget(key, value) {
this.baseTarget[key] = value;
* Find the base target for a value thats been removed from all animation
const { initial } = this.props;
if (typeof initial === "string" || typeof initial === "object") {
const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) === null || _a === void 0 ? void 0 : _a.custom);
valueFromInitial = variant[key];
* If this value still exists in the current initial variant, read that.
if (initial && valueFromInitial !== undefined) {
* Alternatively, if this VisualElement config has defined a getBaseTarget
* so we can read the value from an alternative source, try that.
const target = this.getBaseTargetFromProps(this.props, key);
if (target !== undefined && !isMotionValue(target))
* If the value was initially defined on initial, but it doesn't any more,
* return undefined. Otherwise return the value as initially read from the DOM.
return this.initialValues[key] !== undefined &&
valueFromInitial === undefined
on(eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = new SubscriptionManager();
return this.events[eventName].add(callback);
notify(eventName, ...args) {
if (this.events[eventName]) {
this.events[eventName].notify(...args);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/DOMVisualElement.mjs
class DOMVisualElement extends VisualElement {
this.KeyframeResolver = DOMKeyframesResolver;
sortInstanceNodePosition(a, b) {
* compareDocumentPosition returns a bitmask, by using the bitwise &
* we're returning true if 2 in that bitmask is set to true. 2 is set
* to true if b preceeds a.
return a.compareDocumentPosition(b) & 2 ? 1 : -1;
getBaseTargetFromProps(props, key) {
removeValueFromRenderState(key, { vars, style }) {
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/HTMLVisualElement.mjs
function HTMLVisualElement_getComputedStyle(element) {
return window.getComputedStyle(element);
class HTMLVisualElement extends DOMVisualElement {
readValueFromInstance(instance, key) {
if (transformProps.has(key)) {
const defaultType = getDefaultValueType(key);
return defaultType ? defaultType.default || 0 : 0;
const computedStyle = HTMLVisualElement_getComputedStyle(instance);
const value = (isCSSVariableName(key)
? computedStyle.getPropertyValue(key)
: computedStyle[key]) || 0;
return typeof value === "string" ? value.trim() : value;
measureInstanceViewportBox(instance, { transformPagePoint }) {
return measureViewportBox(instance, transformPagePoint);
build(renderState, latestValues, options, props) {
buildHTMLStyles(renderState, latestValues, options, props.transformTemplate);
scrapeMotionValuesFromProps(props, prevProps, visualElement) {
return scrapeMotionValuesFromProps(props, prevProps, visualElement);
handleChildMotionValue() {
if (this.childSubscription) {
this.childSubscription();
delete this.childSubscription;
const { children } = this.props;
if (isMotionValue(children)) {
this.childSubscription = children.on("change", (latest) => {
this.current.textContent = `${latest}`;
renderInstance(instance, renderState, styleProp, projection) {
renderHTML(instance, renderState, styleProp, projection);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/SVGVisualElement.mjs
class SVGVisualElement extends DOMVisualElement {
getBaseTargetFromProps(props, key) {
readValueFromInstance(instance, key) {
if (transformProps.has(key)) {
const defaultType = getDefaultValueType(key);
return defaultType ? defaultType.default || 0 : 0;
key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
return instance.getAttribute(key);
measureInstanceViewportBox() {
scrapeMotionValuesFromProps(props, prevProps, visualElement) {
return scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps, visualElement);
build(renderState, latestValues, options, props) {
buildSVGAttrs(renderState, latestValues, options, this.isSVGTag, props.transformTemplate);
renderInstance(instance, renderState, styleProp, projection) {
renderSVG(instance, renderState, styleProp, projection);
this.isSVGTag = isSVGTag(instance.tagName);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/create-visual-element.mjs
const create_visual_element_createDomVisualElement = (Component, options) => {
return isSVGComponent(Component)
? new SVGVisualElement(options, { enableHardwareAcceleration: false })
: new HTMLVisualElement(options, {
allowProjection: Component !== external_React_.Fragment,
enableHardwareAcceleration: true,
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/layout.mjs
ProjectionNode: HTMLProjectionNode,
MeasureLayout: MeasureLayout,
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/motion.mjs
const preloadedFeatures = {
* HTML & SVG components, optimised for use with gestures and animation. These can be used as
* drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
const motion = /*@__PURE__*/ createMotionProxy((Component, config) => create_config_createDomMotionConfig(Component, config, preloadedFeatures, create_visual_element_createDomVisualElement));
* Create a DOM `motion` component with the provided string. This is primarily intended
* as a full alternative to `motion` for consumers who have to support environments that don't
* import { createDomMotionComponent } from "framer-motion"
* div: createDomMotionComponent('div')
function createDomMotionComponent(key) {
return createMotionComponent(createDomMotionConfig(key, { forwardMotionProps: false }, preloadedFeatures, createDomVisualElement));
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-is-mounted.mjs
function useIsMounted() {
const isMounted = (0,external_React_.useRef)(false);
useIsomorphicLayoutEffect(() => {
isMounted.current = true;
isMounted.current = false;