@eightshift/ui-components 1.0.5 → 1.1.0

package/dist/assets/wp-font-enhancements.css

@@ -1 +1 @@
-.edit-post-header,.components-popover,.edit-post-sidebar,.wp-block-post-title,.components-select-control__input,.components-base-control__field,.components-base-control__label,.components-combobox-control__suggestions-container,.components-input-control__label,.components-input-control__input,.components-checkbox-control__label,.components-menu-group__label,.components-menu-item__button,.components-notice .components-notice__content,.components-tooltip,.components-modal__header,.preferences-modal__section-title,.preferences-modal__section-description,.block-editor-inserter__tabs,.editor-list-view-sidebar,.edit-post-layout__footer,.components-snackbar,.components-text-control__input{font-family:Geist,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body.wp-admin{font-family:Geist,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"!important}
+.edit-post-header,.components-popover,.edit-post-sidebar,.wp-block-post-title,.components-select-control__input,.components-base-control__field,.components-base-control__label,.components-combobox-control__suggestions-container,.components-input-control__label,.components-input-control__input,.components-checkbox-control__label,.components-menu-group__label,.components-menu-item__button,.components-notice .components-notice__content,.components-tooltip,.components-modal__header,.preferences-modal__section-title,.preferences-modal__section-description,.block-editor-inserter__tabs,.editor-list-view-sidebar,.edit-post-layout__footer,.components-snackbar,.components-text-control__input{font-family:Geist,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body.wp-admin{font-family:Geist,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji!important}

package/dist/assets/wp-ui-enhancements.css

@@ -1 +1 @@
-.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(.components-panel__body-toggle,.editor-post-last-revision__title),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button{border-radius:.375rem!important}.components-input-control__container,.components-combobox-control__suggestions-container,.components-checkbox-control__input,.components-tooltip,button.components-toggle-group-control-option-base,.editor-post-visibility__password-input{border-radius:.25rem!important}.components-button-group .components-button:first-child{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.components-button-group .components-button:last-child{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.components-popover__content{border-radius:.5rem!important}.block-editor-inserter__search{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.components-base-control__label,.components-input-control__label,.components-custom-select-control__label{font-size:13px!important;font-weight:400!important;text-transform:none!important;letter-spacing:0em!important}.edit-post-sidebar{width:20rem!important}.block-list-appender.wp-block{position:static!important;padding:.25rem!important}.components-dropdown.block-editor-inserter{margin-left:auto!important;margin-right:auto!important;width:-moz-fit-content!important;width:fit-content!important}.block-editor-block-list__block-crash-warning{border-radius:.5rem!important;border-color:#b91c1c26!important;--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;--tw-shadow-color: rgb(185 28 28 / .1) !important;--tw-shadow: var(--tw-shadow-colored) !important}.block-editor-block-list__block-crash-warning .block-editor-warning__message{--tw-text-opacity: 1 !important;color:rgb(69 10 10 / var(--tw-text-opacity))!important}.block-editor-block-contextual-toolbar,.block-editor-block-parent-selector__button{border-radius:.5rem!important;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.block-editor-block-types-list .block-editor-block-types-list__item{border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item:after{content:var(--tw-content)!important;border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item svg{--tw-scale-x: 1.25;--tw-scale-y: 1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.block-editor-list-view-tree .block-editor-block-icon{border-radius:.25rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>*:first-child{border-top-left-radius:.5rem!important;border-bottom-left-radius:.5rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>*:last-child{border-top-right-radius:.5rem!important;border-bottom-right-radius:.5rem!important}.block-editor-block-inspector .block-editor-block-card .block-editor-block-icon{border-radius:.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender{width:-moz-fit-content;width:fit-content}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{width:2.25rem!important;height:2.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{border-radius:.375rem!important}
+.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:-webkit-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:-moz-any(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button{border-radius:.375rem!important}.edit-post-header__toolbar .components-button,.edit-post-header__settings .components-button,.edit-post-sidebar .components-button:not(:is(.components-panel__body-toggle,.editor-post-last-revision__title)),.components-snackbar,.components-toggle-group-control,.editor-post-publish-panel .components-button{border-radius:.375rem!important}.components-input-control__container,.components-combobox-control__suggestions-container,.components-checkbox-control__input,.components-tooltip,button.components-toggle-group-control-option-base,.editor-post-visibility__password-input{border-radius:.25rem!important}.components-button-group .components-button:first-child{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.components-button-group .components-button:last-child{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.components-popover__content{border-radius:.5rem!important}.block-editor-inserter__search{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important}.components-base-control__label,.components-input-control__label,.components-custom-select-control__label{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:400!important}.edit-post-sidebar{width:20rem!important}.block-list-appender.wp-block{padding:.25rem!important;position:static!important}.components-dropdown.block-editor-inserter{width:-moz-fit-content!important;width:fit-content!important;margin-left:auto!important;margin-right:auto!important}.block-editor-block-list__block-crash-warning{--tw-shadow:var(--tw-shadow-colored)!important;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;--tw-shadow-color:#b91c1c1a!important;border-color:#b91c1c26!important;border-radius:.5rem!important}.block-editor-block-list__block-crash-warning .block-editor-warning__message{--tw-text-opacity:1!important;color:rgb(69 10 10/var(--tw-text-opacity))!important}.block-editor-block-contextual-toolbar,.block-editor-block-parent-selector__button{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item{border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item:after{content:var(--tw-content)!important;border-radius:.5rem!important}.block-editor-block-types-list .block-editor-block-types-list__item svg{--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.block-editor-list-view-tree .block-editor-block-icon{border-radius:.25rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:first-child{border-top-left-radius:.5rem!important;border-bottom-left-radius:.5rem!important}.block-editor-list-view-tree .block-editor-list-view-leaf>:last-child{border-top-right-radius:.5rem!important;border-bottom-right-radius:.5rem!important}.block-editor-block-inspector .block-editor-block-card .block-editor-block-icon{border-radius:.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender{width:-moz-fit-content;width:fit-content}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{width:2.25rem!important;height:2.25rem!important}.block-list-appender.wp-block>.block-editor-default-block-appender .block-editor-inserter__toggle{border-radius:.375rem!important}

package/dist/{button-idVI4jmd.js → button-CD8Q1eok.js}

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { a as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "./Button-eebLs4cp.js";
-import { g as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, c as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $df56164dff5785e2$export$4338b53315abf666 } from "./utils-DIBzm1e4.js";
-import { b as $9bf71ea28793e738$export$c5251b9e124bf29 } from "./FocusScope-B9b0VMib.js";
+import { a as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "./Button-CbFrFO04.js";
+import { g as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, c as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $df56164dff5785e2$export$4338b53315abf666 } from "./utils-Dc35LwuT.js";
+import { b as $9bf71ea28793e738$export$c5251b9e124bf29 } from "./FocusScope-Bw-IatMO.js";
 import React__default, { useState, useRef, forwardRef, createContext } from "react";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-BAcFg5GO.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-DG2RfOUr.js";
-import { c as clsx } from "./lite-pbIeT7tm.js";
-import { T as Tooltip } from "./tooltip-T6H9uF-Z.js";
-import { _ as __ } from "./default-i18n-Bk1GxDHz.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-4oSz1ItD.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-EDDcM64A.js";
+import { c as clsx } from "./lite-DVmmD_-j.js";
+import { T as Tooltip } from "./tooltip-BRQ4tvZL.js";
+import { _ as __ } from "./default-i18n-BqwLkgZv.js";
 function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
   const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation = "horizontal" } = props;
   let [isInToolbar, setInToolbar] = useState(false);
@@ -19,25 +19,18 @@ function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
   const shouldReverse = direction === "rtl" && orientation === "horizontal";
   let focusManager = $9bf71ea28793e738$export$c5251b9e124bf29(ref);
   const onKeyDown = (e) => {
-    if (!e.currentTarget.contains(e.target))
-      return;
+    if (!e.currentTarget.contains(e.target)) return;
     if (orientation === "horizontal" && e.key === "ArrowRight" || orientation === "vertical" && e.key === "ArrowDown") {
-      if (shouldReverse)
-        focusManager.focusPrevious();
-      else
-        focusManager.focusNext();
+      if (shouldReverse) focusManager.focusPrevious();
+      else focusManager.focusNext();
     } else if (orientation === "horizontal" && e.key === "ArrowLeft" || orientation === "vertical" && e.key === "ArrowUp") {
-      if (shouldReverse)
-        focusManager.focusNext();
-      else
-        focusManager.focusPrevious();
+      if (shouldReverse) focusManager.focusNext();
+      else focusManager.focusPrevious();
     } else if (e.key === "Tab") {
       e.stopPropagation();
       lastFocused.current = document.activeElement;
-      if (e.shiftKey)
-        focusManager.focusFirst();
-      else
-        focusManager.focusLast();
+      if (e.shiftKey) focusManager.focusFirst();
+      else focusManager.focusLast();
       return;
     } else
       return;
@@ -46,8 +39,7 @@ function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
   };
   const lastFocused = useRef(null);
   const onBlur = (e) => {
-    if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current)
-      lastFocused.current = e.target;
+    if (!e.currentTarget.contains(e.relatedTarget) && !lastFocused.current) lastFocused.current = e.target;
   };
   const onFocus = (e) => {
     var _ref_current;
@@ -270,11 +262,7 @@ const ButtonGroup = ({ children, className, vertical, hidden, ...rest }) => {
   return /* @__PURE__ */ jsx(
     $13c3c67164f4d5be$export$4c260019440d418f,
     {
-      className: clsx(
-        "es-uic-flex",
-        vertical ? "es-uic-button-group-v es-uic-flex-col" : "es-uic-button-group-h",
-        className
-      ),
+      className: clsx("es-uic-flex", vertical ? "es-uic-button-group-v es-uic-flex-col" : "es-uic-button-group-h", className),
       orientation: vertical ? "vertical" : "horizontal",
       ...rest,
       children

package/dist/components/animated-visibility/animated-visibility.js

@@ -164,7 +164,12 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
   return { schedule, cancel, state, steps: steps2 };
 }
 const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
-function useVisualElement(Component2, visualState, props, createVisualElement) {
+function isRefObject(ref) {
+  return ref && typeof ref === "object" && Object.prototype.hasOwnProperty.call(ref, "current");
+}
+const SwitchLayoutGroupContext = createContext({});
+let scheduleHandoffComplete = false;
+function useVisualElement(Component2, visualState, props, createVisualElement, ProjectionNodeConstructor) {
   const { visualElement: parent } = useContext(MotionContext);
   const lazyContext = useContext(LazyContext);
   const presenceContext = useContext(PresenceContext);
@@ -182,6 +187,10 @@ function useVisualElement(Component2, visualState, props, createVisualElement) {
     });
   }
   const visualElement = visualElementRef.current;
+  const initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext);
+  if (visualElement && !visualElement.projection && ProjectionNodeConstructor && (visualElement.type === "html" || visualElement.type === "svg")) {
+    createProjectionNode$1(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);
+  }
   useInsertionEffect(() => {
     visualElement && visualElement.update(props, presenceContext);
   });
@@ -189,6 +198,7 @@ function useVisualElement(Component2, visualState, props, createVisualElement) {
   useIsomorphicLayoutEffect(() => {
     if (!visualElement)
       return;
+    visualElement.updateFeatures();
     microtask.render(visualElement.render);
     if (wantsHandoff.current && visualElement.animationState) {
       visualElement.animationState.animateChanges();
@@ -197,26 +207,59 @@ function useVisualElement(Component2, visualState, props, createVisualElement) {
   useEffect(() => {
     if (!visualElement)
       return;
-    visualElement.updateFeatures();
     if (!wantsHandoff.current && visualElement.animationState) {
       visualElement.animationState.animateChanges();
     }
     if (wantsHandoff.current) {
       wantsHandoff.current = false;
-      window.HandoffComplete = true;
+      if (!scheduleHandoffComplete) {
+        scheduleHandoffComplete = true;
+        queueMicrotask(completeHandoff);
+      }
     }
   });
   return visualElement;
 }
-function isRefObject(ref) {
-  return ref && typeof ref === "object" && Object.prototype.hasOwnProperty.call(ref, "current");
+function completeHandoff() {
+  window.HandoffComplete = true;
+}
+function createProjectionNode$1(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
+  const { layoutId, layout: layout2, drag: drag2, dragConstraints, layoutScroll, layoutRoot } = props;
+  visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(visualElement.parent));
+  visualElement.projection.setOptions({
+    layoutId,
+    layout: layout2,
+    alwaysMeasureLayout: Boolean(drag2) || dragConstraints && isRefObject(dragConstraints),
+    visualElement,
+    scheduleRender: () => visualElement.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 layout2 === "string" ? layout2 : "both",
+    initialPromotionConfig,
+    layoutScroll,
+    layoutRoot
+  });
+}
+function getClosestProjectingNode(visualElement) {
+  if (!visualElement)
+    return void 0;
+  return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
 }
 function useMotionRef(visualState, visualElement, externalRef) {
   return useCallback(
     (instance) => {
       instance && visualState.mount && visualState.mount(instance);
       if (visualElement) {
-        instance ? visualElement.mount(instance) : visualElement.unmount();
+        if (instance) {
+          visualElement.mount(instance);
+        } else {
+          visualElement.unmount();
+        }
       }
       if (externalRef) {
         if (typeof externalRef === "function") {
@@ -308,8 +351,22 @@ function loadFeatures(features) {
   }
 }
 const LayoutGroupContext = createContext({});
-const SwitchLayoutGroupContext = createContext({});
 const motionComponentSymbol = Symbol.for("motionComponentSymbol");
+const noop = (any) => any;
+let warning = noop;
+let invariant = noop;
+if (process.env.NODE_ENV !== "production") {
+  warning = (check, message) => {
+    if (!check && typeof console !== "undefined") {
+      console.warn(message);
+    }
+  };
+  invariant = (check, message) => {
+    if (!check) {
+      throw new Error(message);
+    }
+  };
+}
 function createMotionComponent({ preloadedFeatures: preloadedFeatures2, createVisualElement, useRender, useVisualState, Component: Component2 }) {
   preloadedFeatures2 && loadFeatures(preloadedFeatures2);
   function MotionComponent(props, externalRef) {
@@ -323,18 +380,10 @@ function createMotionComponent({ preloadedFeatures: preloadedFeatures2, createVi
     const context = useCreateMotionContext(props);
     const visualState = useVisualState(props, isStatic);
     if (!isStatic && isBrowser) {
-      context.visualElement = useVisualElement(Component2, visualState, configAndProps, createVisualElement);
-      const initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext);
-      const isStrict = useContext(LazyContext).strict;
-      if (context.visualElement) {
-        MeasureLayout2 = context.visualElement.loadFeatures(
-          // Note: Pass the full new combined props to correctly re-render dynamic feature components.
-          configAndProps,
-          isStrict,
-          preloadedFeatures2,
-          initialLayoutGroupConfig
-        );
-      }
+      useStrictMode(configAndProps, preloadedFeatures2);
+      const layoutProjection = getProjectionFunctionality(configAndProps);
+      MeasureLayout2 = layoutProjection.MeasureLayout;
+      context.visualElement = useVisualElement(Component2, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);
     }
     return jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout2 && context.visualElement ? jsx(MeasureLayout2, { visualElement: context.visualElement, ...configAndProps }) : null, useRender(Component2, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] });
   }
@@ -346,6 +395,23 @@ function useLayoutId({ layoutId }) {
   const layoutGroupId = useContext(LayoutGroupContext).id;
   return layoutGroupId && layoutId !== void 0 ? layoutGroupId + "-" + layoutId : layoutId;
 }
+function useStrictMode(configAndProps, preloadedFeatures2) {
+  const isStrict = useContext(LazyContext).strict;
+  if (process.env.NODE_ENV !== "production" && preloadedFeatures2 && isStrict) {
+    const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
+    configAndProps.ignoreStrict ? warning(false, strictMessage) : invariant(false, strictMessage);
+  }
+}
+function getProjectionFunctionality(props) {
+  const { drag: drag2, layout: layout2 } = featureDefinitions;
+  if (!drag2 && !layout2)
+    return {};
+  const combined = { ...drag2, ...layout2 };
+  return {
+    MeasureLayout: (drag2 === null || drag2 === void 0 ? void 0 : drag2.isEnabled(props)) || (layout2 === null || layout2 === void 0 ? void 0 : layout2.isEnabled(props)) ? combined.MeasureLayout : void 0,
+    ProjectionNode: combined.ProjectionNode
+  };
+}
 function createMotionProxy(createConfig) {
   function custom(Component2, customMotionComponentConfig = {}) {
     return createMotionComponent(createConfig(Component2, customMotionComponentConfig));
@@ -996,7 +1062,6 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
   }
   return values;
 }
-const noop = (any) => any;
 const { schedule: frame, cancel: cancelFrame, state: frameData, steps } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
 const svgMotionConfig = {
   useVisualState: makeUseVisualState({
@@ -1473,20 +1538,6 @@ function isNone(value) {
     return true;
   }
 }
-let warning = noop;
-let invariant = noop;
-if (process.env.NODE_ENV !== "production") {
-  warning = (check, message) => {
-    if (!check && typeof console !== "undefined") {
-      console.warn(message);
-    }
-  };
-  invariant = (check, message) => {
-    if (!check) {
-      throw new Error(message);
-    }
-  };
-}
 const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
 const splitCSSVariableRegex = (
   // eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
@@ -3403,7 +3454,7 @@ class MotionValue {
    * @internal
    */
   constructor(init, options = {}) {
-    this.version = "11.2.10";
+    this.version = "11.2.12";
     this.canTrackVelocity = null;
     this.events = {};
     this.updateAndNotify = (v, render = true) => {
@@ -3789,7 +3840,7 @@ function animateList(visualElement) {
 }
 function createAnimationState(visualElement) {
   let animate = animateList(visualElement);
-  const state = createState();
+  let state = createState();
   let isInitialRender = true;
   const buildResolvedTypeValues = (type) => (acc, definition) => {
     var _a;
@@ -3931,7 +3982,11 @@ function createAnimationState(visualElement) {
     animateChanges,
     setActive,
     setAnimateFunction,
-    getState: () => state
+    getState: () => state,
+    reset: () => {
+      state = createState();
+      isInitialRender = true;
+    }
   };
 }
 function checkVariantsDidChange(prev, next) {
@@ -3973,9 +4028,8 @@ class AnimationFeature extends Feature {
   }
   updateAnimationControlsSubscription() {
     const { animate } = this.node.getProps();
-    this.unmount();
     if (isAnimationControls(animate)) {
-      this.unmount = animate.subscribe(this.node);
+      this.unmountControls = animate.subscribe(this.node);
     }
   }
   /**
@@ -3992,6 +4046,9 @@ class AnimationFeature extends Feature {
     }
   }
   unmount() {
+    var _a;
+    this.node.animationState.reset();
+    (_a = this.unmountControls) === null || _a === void 0 ? void 0 : _a.call(this);
   }
 }
 let id$1 = 0;
@@ -4698,7 +4755,7 @@ class VisualElementDragControls {
     });
     const measureDragConstraints = () => {
       const { dragConstraints } = this.getProps();
-      if (isRefObject(dragConstraints)) {
+      if (isRefObject(dragConstraints) && dragConstraints.current) {
         this.constraints = this.resolveRefConstraints();
       }
     };
@@ -4708,7 +4765,7 @@ class VisualElementDragControls {
       projection.root && projection.root.updateScroll();
       projection.updateLayout();
     }
-    measureDragConstraints();
+    frame.read(measureDragConstraints);
     const stopResizeListener = addDomEvent(window, "resize", () => this.scalePositionWithinConstraints());
     const stopLayoutUpdateListener = projection.addEventListener("didUpdate", ({ delta, hasLayoutChanged }) => {
       if (this.isDragging && hasLayoutChanged) {
@@ -5314,6 +5371,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.eventHandlers = /* @__PURE__ */ new Map();
       this.hasTreeAnimated = false;
       this.updateScheduled = false;
+      this.scheduleUpdate = () => this.update();
       this.projectionUpdateScheduled = false;
       this.checkUpdateFailed = () => {
         if (this.isUpdating) {
@@ -5522,7 +5580,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     didUpdate() {
       if (!this.updateScheduled) {
         this.updateScheduled = true;
-        microtask.read(() => this.update());
+        microtask.read(this.scheduleUpdate);
       }
     }
     clearAllSnapshots() {
@@ -5591,7 +5649,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     resetTransform() {
       if (!resetTransform)
         return;
-      const isResetRequested = this.isLayoutDirty || this.shouldResetTransform;
+      const isResetRequested = this.isLayoutDirty || this.shouldResetTransform || this.options.alwaysMeasureLayout;
       const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
       const transformTemplate = this.getTransformTemplate();
       const transformTemplateValue = transformTemplate ? transformTemplate(this.latestValues, "") : void 0;
@@ -6343,7 +6401,7 @@ function updateMotionValuesFromProps(element, next, prev) {
         willChange.add(key);
       }
       if (process.env.NODE_ENV === "development") {
-        warnOnce(nextValue.version === "11.2.10", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.10 may not work as expected.`);
+        warnOnce(nextValue.version === "11.2.12", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.12 may not work as expected.`);
       }
     } else if (isMotionValue(prevValue)) {
       element.addValue(key, motionValue(nextValue, { owner: element }));
@@ -6373,8 +6431,6 @@ function updateMotionValuesFromProps(element, next, prev) {
 const visualElementStore = /* @__PURE__ */ new WeakMap();
 const valueTypes = [...dimensionValueTypes, color, complex];
 const findValueType = (v) => valueTypes.find(testValueType(v));
-const featureNames = Object.keys(featureDefinitions);
-const numFeatures = featureNames.length;
 const propEventHandlers = [
   "AnimationStart",
   "AnimationComplete",
@@ -6385,11 +6441,6 @@ const propEventHandlers = [
   "LayoutAnimationComplete"
 ];
 const numVariantProps = variantProps.length;
-function getClosestProjectingNode(visualElement) {
-  if (!visualElement)
-    return void 0;
-  return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
-}
 class VisualElement {
   /**
    * This method takes React props and returns found MotionValues. For example, HTML
@@ -6476,7 +6527,6 @@ class VisualElement {
     this.update(this.props, this.presenceContext);
   }
   unmount() {
-    var _a;
     visualElementStore.delete(this.current);
     this.projection && this.projection.unmount();
     cancelFrame(this.notifyUpdate);
@@ -6488,7 +6538,11 @@ class VisualElement {
       this.events[key].clear();
     }
     for (const key in this.features) {
-      (_a = this.features[key]) === null || _a === void 0 ? void 0 : _a.unmount();
+      const feature = this.features[key];
+      if (feature) {
+        feature.unmount();
+        feature.isMounted = false;
+      }
     }
     this.current = null;
   }
@@ -6515,59 +6569,24 @@ class VisualElement {
     }
     return this.sortInstanceNodePosition(this.current, other.current);
   }
-  loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures2, initialLayoutGroupConfig) {
-    let ProjectionNodeConstructor;
-    let MeasureLayout2;
-    if (process.env.NODE_ENV !== "production" && preloadedFeatures2 && isStrict) {
-      const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
-      renderedProps.ignoreStrict ? warning(false, strictMessage) : invariant(false, strictMessage);
-    }
-    for (let i = 0; i < numFeatures; i++) {
-      const name = featureNames[i];
-      const { isEnabled, Feature: FeatureConstructor, ProjectionNode, MeasureLayout: MeasureLayoutComponent } = featureDefinitions[name];
-      if (ProjectionNode)
-        ProjectionNodeConstructor = ProjectionNode;
-      if (isEnabled(renderedProps)) {
-        if (!this.features[name] && FeatureConstructor) {
-          this.features[name] = new FeatureConstructor(this);
-        }
-        if (MeasureLayoutComponent) {
-          MeasureLayout2 = MeasureLayoutComponent;
-        }
-      }
-    }
-    if ((this.type === "html" || this.type === "svg") && !this.projection && ProjectionNodeConstructor) {
-      const { layoutId, layout: layout2, drag: drag2, dragConstraints, layoutScroll, layoutRoot } = renderedProps;
-      this.projection = new ProjectionNodeConstructor(this.latestValues, renderedProps["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(this.parent));
-      this.projection.setOptions({
-        layoutId,
-        layout: layout2,
-        alwaysMeasureLayout: Boolean(drag2) || dragConstraints && isRefObject(dragConstraints),
-        visualElement: this,
-        scheduleRender: () => this.scheduleRender(),
-        /**
-         * TODO: Update options in an effect. This could be tricky as it'll be too late
-         * to update by the time layout animations run.
-         * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
-         * ensuring it gets called if there's no potential layout animations.
-         *
-         */
-        animationType: typeof layout2 === "string" ? layout2 : "both",
-        initialPromotionConfig: initialLayoutGroupConfig,
-        layoutScroll,
-        layoutRoot
-      });
-    }
-    return MeasureLayout2;
-  }
   updateFeatures() {
-    for (const key in this.features) {
-      const feature = this.features[key];
-      if (feature.isMounted) {
-        feature.update();
-      } else {
-        feature.mount();
-        feature.isMounted = true;
+    let key = "animation";
+    for (key in featureDefinitions) {
+      const featureDefinition = featureDefinitions[key];
+      if (!featureDefinition)
+        continue;
+      const { isEnabled, Feature: FeatureConstructor } = featureDefinition;
+      if (!this.features[key] && FeatureConstructor && isEnabled(this.props)) {
+        this.features[key] = new FeatureConstructor(this);
+      }
+      if (this.features[key]) {
+        const feature = this.features[key];
+        if (feature.isMounted) {
+          feature.update();
+        } else {
+          feature.mount();
+          feature.isMounted = true;
+        }
       }
     }
   }
@@ -7123,14 +7142,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
  * @preserve
  */
 const AnimatedVisibility = (props) => {
-  const {
-    visible,
-    className,
-    children,
-    noInitial = false,
-    transition = "slideFade",
-    ...other
-  } = props;
+  const { visible, className, children, noInitial = false, transition = "slideFade", ...other } = props;
   const transitions = {
     slideFade: {
       initial: { opacity: 0, y: -5 },

package/dist/components/base-control/base-control.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-Cyxp9ewv.js";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-WqetJduR.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**
  * Component that allows wrapping components with a common layout that includes a label and optional icon, subtitle, actions, and help text.
@@ -66,13 +66,7 @@ const BaseControl = (props) => {
           className: labelClassName
         }
       ),
-      inline && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: clsx("es-uic-ml-auto es-uic-flex es-uic-items-center es-uic-gap-1", controlContainerClassName),
-          children
-        }
-      ),
+      inline && /* @__PURE__ */ jsx("div", { className: clsx("es-uic-ml-auto es-uic-flex es-uic-items-center es-uic-gap-1", controlContainerClassName), children }),
       !inline && actions && /* @__PURE__ */ jsx("div", { className: clsx("es-uic-flex es-uic-items-center es-uic-gap-1", !inline && "es-uic-ml-auto"), children: actions })
     ] }),
     !inline && Array.isArray(children) && children.filter(Boolean).length > 1 && /* @__PURE__ */ jsx("div", { className: clsx("es-uic-space-y-1", controlContainerClassName), children }),