unframer 2.18.0 → 2.18.2

package/src/framer.js

@@ -506965,6 +506965,7 @@ import { createElement, Fragment, } from 'react';
 import { useState, } from 'react';
 import * as React2 from 'react';
 import { Children, isValidElement, } from 'react';
+var __unframerNavigator = typeof window !== 'undefined' ? navigator : void 0;
 var require_memoize_browser_cjs = __commonJS({
   '../../../node_modules/@emotion/memoize/dist/memoize.browser.cjs.js'(exports,) {
     'use strict';
@@ -514127,7 +514128,8 @@ var defaultLayoutTransition = {
   ease: [0.4, 0, 0.1, 1,],
 };
 var userAgentContains = (string) =>
-  typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().includes(string,);
+  typeof __unframerNavigator !== 'undefined' && __unframerNavigator.userAgent &&
+  __unframerNavigator.userAgent.toLowerCase().includes(string,);
 var roundPoint = userAgentContains('applewebkit/',) && !userAgentContains('chrome/',) ? Math.round : noop;
 function roundAxis(axis,) {
   axis.min = roundPoint(axis.min,);
@@ -517370,7 +517372,7 @@ function steps(numSteps, direction = 'end',) {
   };
 }
 
-// /:https://app.framerstatic.com/framer.43KQGWBL.mjs
+// /:https://app.framerstatic.com/framer.3KX2OI4Q.mjs
 init_chunk_QLPHEVXG();
 import React4 from 'react';
 import { Suspense as Suspense3, } from 'react';
@@ -517378,6 +517380,7 @@ import { memo as memo2, startTransition as startTransition2, } from 'react';
 import ReactDOM from 'react-dom';
 import { createRef, } from 'react';
 import { cloneElement as cloneElement32, } from 'react';
+var __unframerNavigator2 = typeof window !== 'undefined' ? navigator : void 0;
 var require_hsluv = __commonJS({
   '../../../node_modules/hsluv/dist/hsluv.cjs'(exports,) {
     'use strict';
@@ -519209,7 +519212,7 @@ function isGenerator2(value,) {
 function isBot(userAgent,) {
   return /bot|-google|google-|yandex|ia_archiver/iu.test(userAgent,);
 }
-var shouldPreloadBasedOnUA = /* @__PURE__ */ (() => typeof window !== 'undefined' && !isBot(navigator.userAgent,))();
+var shouldPreloadBasedOnUA = /* @__PURE__ */ (() => typeof window !== 'undefined' && !isBot(__unframerNavigator2.userAgent,))();
 function useRoutePreloader(routeIds, enabled = true,) {
   const {
     getRoute,
@@ -520009,8 +520012,8 @@ function replaceHistoryState(data2, url, ignoreReplaceStateWrapper = false,) {
 }
 var maybeHasPopstateBug = true;
 var isImpactedPopstateBugChromiumVersion = /* @__PURE__ */ (() => {
-  if (typeof navigator === 'undefined') return false;
-  const userAgent = navigator.userAgent;
+  if (typeof __unframerNavigator2 === 'undefined') return false;
+  const userAgent = __unframerNavigator2.userAgent;
   const chromePos = userAgent.indexOf('Chrome/',);
   const chromiumVersion = +userAgent.slice(chromePos + 7, userAgent.indexOf('.', chromePos,),);
   return chromiumVersion > 101 && chromiumVersion < 128;
@@ -520038,7 +520041,7 @@ async function pushHistoryState(data2, url, awaitPaintBeforeUpdate = false, isNa
       console.error(msg,);
       (_a = window.__framer_events) == null ? void 0 : _a.push(['published_site_load_recoverable_error', {
         message: msg,
-        userAgent: navigator.userAgent,
+        userAgent: __unframerNavigator2.userAgent,
       },],);
     };
     window.addEventListener('popstate', popstateListener, {
@@ -520541,10 +520544,11 @@ var MarkSuspenseEffects = {
   End: MarkSuspenseEffectsEnd,
 };
 function renderPage(Page4, defaultPageStyle,) {
-  const style = {
+  const props = {
     style: defaultPageStyle,
+    'data-framer-root': true,
   };
-  return React4.isValidElement(Page4,) ? React4.cloneElement(Page4, style,) : React4.createElement(Page4, style,);
+  return React4.isValidElement(Page4,) ? React4.cloneElement(Page4, props,) : React4.createElement(Page4, props,);
 }
 var NotFoundError = class extends Error {};
 var NotFoundErrorBoundaryCaughtError = class extends Error {
@@ -525489,10 +525493,7 @@ var ProvideParentSize = (props) => {
   } = props;
   const value = React4.useMemo(() => ({
     parentSize,
-  }), // We are generating the memoKeys in runtime and react doesn't like it,
-  // but it should be safe to ignore.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [getParentWidth(parentSize,), getParentHeight(parentSize,),],);
+  }), [getParentWidth(parentSize,), getParentHeight(parentSize,),],);
   if (currentParentSize === 1) {
     return children
       ? /* @__PURE__ */ jsx(Fragment, {
@@ -528158,6 +528159,10 @@ function supportsThemes(presetId, skin,) {
   }
   return false;
 }
+function useIsStaticRenderer() {
+  const currentTarget = RenderTarget.current();
+  return currentTarget === RenderTarget.canvas || currentTarget === RenderTarget.export;
+}
 var asRecord = (object) => object;
 function memoize(fn,) {
   const cache2 = Object.create(Object.prototype,);
@@ -528500,7 +528505,7 @@ function htmlElementAsMotionComponent(asElem,) {
   return asElem && asElem !== 'search' && asElem !== 'slot' && asElem !== 'template' ? motion[asElem] : motion['div'];
 }
 var import_process = __toESM(require_browser(), 1,);
-var safeNavigator = typeof navigator !== 'undefined' ? navigator : void 0;
+var safeNavigator = typeof __unframerNavigator2 !== 'undefined' ? __unframerNavigator2 : void 0;
 var isBrowser2 = () => typeof document === 'object';
 var isWebKit = () => {
   var _a;
@@ -529583,9 +529588,9 @@ function useStyleAndRect(props,) {
       ...defaultStyle,
     };
   }
-  const onCanvas = RenderTarget.current() === RenderTarget.canvas;
+  const isRenderingStaticContent = useIsStaticRenderer();
   if (props.positionSticky) {
-    if (!onCanvas || inCodeComponent) {
+    if (!isRenderingStaticContent || inCodeComponent) {
       resultStyle.position = 'sticky';
       resultStyle.willChange = 'transform';
       resultStyle.zIndex = 1;
@@ -529594,7 +529599,7 @@ function useStyleAndRect(props,) {
       resultStyle.bottom = props.positionStickyBottom;
       resultStyle.left = props.positionStickyLeft;
     }
-  } else if (onCanvas && (props.positionFixed || props.positionAbsolute)) {
+  } else if (isRenderingStaticContent && (props.positionFixed || props.positionAbsolute)) {
     resultStyle.position = 'absolute';
   }
   if ('rotate' in resultStyle && resultStyle.rotate === void 0) {
@@ -530081,7 +530086,6 @@ var SharedIntersectionObserver = class {
 };
 var SharedIntersectionObserverContext = /* @__PURE__ */ createContext(/* @__PURE__ */ new Map(),);
 function useSharedIntersectionObserver(ref, callback, options,) {
-  if (typeof IntersectionObserver === 'undefined') return;
   const key7 = useConstant2(() => `${options.rootMargin}`);
   const observers2 = useContext(SharedIntersectionObserverContext,);
   const {
@@ -536355,9 +536359,7 @@ function useUpdateScrollOffset(ref, side, offset, cancelEmulatedTouchScrollAnima
       cancelEmulatedTouchScrollAnimation == null ? void 0 : cancelEmulatedTouchScrollAnimation();
       element[side] = Math.abs(offset,);
     }
-  }, // We only want to update on contentOffset changes
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [offset,],);
+  }, [offset,],);
 }
 var NativeScroll = /* @__PURE__ */ React4.forwardRef(function NativeScroll2(props, forwardedRef,) {
   const {
@@ -536827,10 +536829,6 @@ function useFXValues(values, enabled,) {
   }, [effect, enabled,],);
   return effect;
 }
-function useIsStaticRenderer() {
-  const currentTarget = RenderTarget.current();
-  return currentTarget === RenderTarget.canvas || currentTarget === RenderTarget.export;
-}
 var loopOptionsKeys = /* @__PURE__ */ new Set(['loopEffectEnabled', 'loopTransition', 'loop', 'loopRepeatType', 'loopRepeatDelay',],);
 var useDelay = () => {
   const timeoutRef = useRef();
@@ -537268,7 +537266,8 @@ function useAnimationVariants({
       opacity: targetOpacity,
     },),
     exit: exit ?? makeStyle(),
-  }), [animateVariant2, defaultStyles, enter, exit, opacity, targetOpacity, transformPerspective,],);
+  }), // biome-ignore lint/correctness/useExhaustiveDependencies: `defaultStyles` makes this memo re-run on every render, but that appears to be fine.
+  [animateVariant2, defaultStyles, enter, exit, opacity, targetOpacity, transformPerspective,],);
 }
 function useStyleAppearEffect(options, ref,) {
   const shouldReduceMotion = useReducedMotionConfig();
@@ -537310,9 +537309,7 @@ function useStyleAppearEffect(options, ref,) {
         }
       },);
     },),);
-  }, // All dependencies are object values or stable.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [],);
+  }, [],);
   const hasAnimatedOnce = options.animateOnce && playState.current.lastAppearState === true;
   const animateWithIntersectionObserver = !options.targets && options.styleAppearEffectEnabled && !options.scrollDirection &&
     !hasAnimatedOnce;
@@ -537917,7 +537914,14 @@ var SuspenseErrorBoundary = class extends Component {
 };
 var suspendPromise = /* @__PURE__ */ (() => typeof window !== 'undefined' ? new Promise(() => {},) : null)();
 function Suspend() {
-  if (typeof window === 'undefined' || window.__framer_STPD_OPT_OUT__) return null;
+  if (typeof window === 'undefined' || window.__framer_STPD_OPT_OUT__) {
+    return /* @__PURE__ */ jsx('div', {
+      hidden: true,
+      dangerouslySetInnerHTML: {
+        __html: '<!-- SuspenseThatPreservesDOM fallback rendered -->',
+      },
+    },);
+  }
   throw suspendPromise;
 }
 function SuspenseThatPreservesDom({
@@ -538047,16 +538051,25 @@ var DeprecatedContainerErrorBoundary = class extends Component {
     return hasError ? null : children;
   }
 };
-var IsInExternalComponentContext = /* @__PURE__ */ (() => React4.createContext(0,))();
-function useExternalComponentNestingLevel() {
-  return React4.useContext(IsInExternalComponentContext,);
+var ExternalComponentContext = /* @__PURE__ */ (() =>
+  React4.createContext({
+    level: 0,
+    scopeId: void 0,
+  },))();
+function useNearestExternalComponent() {
+  return React4.useContext(ExternalComponentContext,);
 }
 function IsExternalComponent({
   children,
+  scopeId,
 },) {
-  const count = React4.useContext(IsInExternalComponentContext,);
-  return /* @__PURE__ */ jsx(IsInExternalComponentContext.Provider, {
-    value: count + 1,
+  const level = React4.useContext(ExternalComponentContext,).level;
+  const newValue = React4.useMemo(() => ({
+    level: level + 1,
+    scopeId,
+  }), [level, scopeId,],);
+  return /* @__PURE__ */ jsx(ExternalComponentContext.Provider, {
+    value: newValue,
     children,
   },);
 }
@@ -538075,27 +538088,50 @@ function getErrorMessageFor(element, scopeId, nodeId,) {
     formatCodeCrashLocationFromSourceNode(scopeId, nodeId,)
   } \u2192 click \u201CShow Layer\u201D.`;
 }
-function shouldWrapComponentWithBoundary(externalModuleNestingLevel, isAuthoredByUser, isExternalComponent, inComponentSlot,) {
-  const isLocalComponentInstance =
-    // We know a component instance is local when it’s not nested inside any external component...
-    externalModuleNestingLevel === 0 ||
-    // ...or – “Ticker edge case” – when it’s nested inside an external component during React rendering,
-    // but is actually defined in a slot that’s passed into the component. (This is the “Ticker edge case”:
-    // if a site has a Ticker (or any other component with slots), and something in a Ticker’s slot crashes,
-    // we want to disable that something, not the whole ticker.)
-    externalModuleNestingLevel === 1 && inComponentSlot;
-  return (isAuthoredByUser || isExternalComponent) && isLocalComponentInstance;
-}
-function shouldWrapOverrideWithBoundary(externalModuleNestingLevel, inComponentSlot,) {
-  const isWrappingFrameLocalToProject =
-    // We know a frame is local when it’s not nested inside any external component...
-    externalModuleNestingLevel === 0 ||
-    // ...or – “Ticker edge case” – when it’s nested inside an external component during React rendering,
-    // but is actually defined in a slot that’s passed into the component. (This is the “Ticker edge case”:
-    // if a site has a Ticker (or any other component with slots), and an override in a Ticker’s slot crashes,
-    // we want to disable that override, not the whole ticker.)
-    externalModuleNestingLevel === 1 && inComponentSlot;
-  return isWrappingFrameLocalToProject;
+function shouldWrapComponentWithBoundary(
+  scopeIdOfThisComponent,
+  scopeIdOfNearestExternalComponent,
+  externalComponentLevel,
+  isAuthoredByUser,
+  isExternalComponent,
+  inComponentSlot,
+) {
+  const isLocalComponentInstance = isNodeLocalToProject(
+    scopeIdOfThisComponent,
+    scopeIdOfNearestExternalComponent,
+    externalComponentLevel,
+    inComponentSlot,
+  );
+  return (
+    // case 1: all (local instances) of (local) (code components)
+    isLocalComponentInstance && !isExternalComponent && isAuthoredByUser ||
+    // case 2: all (local instances) of (external components)
+    isLocalComponentInstance && isExternalComponent
+  );
+}
+function shouldWrapOverrideWithBoundary(
+  scopeIdOfNodeWithOverride,
+  scopeIdOfNearestExternalComponent,
+  externalComponentLevel,
+  inComponentSlot,
+) {
+  return isNodeLocalToProject(scopeIdOfNodeWithOverride, scopeIdOfNearestExternalComponent, externalComponentLevel, inComponentSlot,);
+}
+function isNodeLocalToProject(scopeIdOfThisNode, scopeIdOfNearestExternalComponent, externalComponentLevel, inComponentSlot,) {
+  if (externalComponentLevel === 0) return true;
+  const nodeIsDefinedInSameScopeAsExternalComponent = scopeIdOfThisNode === scopeIdOfNearestExternalComponent;
+  if (
+    // We know a component instance is local when it’s nested inside one external component,
+    externalComponentLevel === 1 &&
+    // and it lives in a slot,
+    inComponentSlot &&
+    // and it’s a slot of *that sole external component* (and not some other local component
+    // with slots that lives inside the external component).
+    nodeIsDefinedInSameScopeAsExternalComponent
+  ) {
+    return true;
+  }
+  return false;
 }
 var ContainerInner = /* @__PURE__ */ React4.forwardRef(({
   children,
@@ -538178,7 +538214,7 @@ var SmartComponentScopedContainer = /* @__PURE__ */ React4.forwardRef((props, re
   }
 },);
 function useWrapWithCodeBoundary(children, scopeId, nodeId, isAuthoredByUser, isExternalComponent, inComponentSlot,) {
-  const externalModuleNestingLevel = useExternalComponentNestingLevel();
+  const nearestExternalComponent = useNearestExternalComponent();
   if (
     // Those props will either be all undefined, which means the Container wasn’t codegenned yet,
     // and we should use the old ContainerErrorBoundary –
@@ -538190,7 +538226,9 @@ function useWrapWithCodeBoundary(children, scopeId, nodeId, isAuthoredByUser, is
     },);
   }
   const shouldWrapWithBoundary = shouldWrapComponentWithBoundary(
-    externalModuleNestingLevel,
+    scopeId,
+    nearestExternalComponent.scopeId,
+    nearestExternalComponent.level,
     isAuthoredByUser ?? false,
     isExternalComponent ?? false,
     inComponentSlot ?? false,
@@ -538204,6 +538242,7 @@ function useWrapWithCodeBoundary(children, scopeId, nodeId, isAuthoredByUser, is
   }
   if (isExternalComponent) {
     children = /* @__PURE__ */ jsx(IsExternalComponent, {
+      scopeId,
       children,
     },);
   }
@@ -539179,6 +539218,8 @@ var GracefullyDegradingErrorBoundary = class extends Component {
       error: void 0,
     },);
     __publicField(this, 'message', 'Made UI non-interactive due to an error',);
+    __publicField(this, 'messageFatal', 'Fatal error',);
+    __publicField(this, 'messageUser', 'Please check any custom code or code overrides',);
     __publicField(
       this,
       'messageReport',
@@ -539191,17 +539232,21 @@ var GracefullyDegradingErrorBoundary = class extends Component {
     };
   }
   componentDidCatch(error,) {
-    var _a, _b;
+    var _a, _b, _c;
     window.__framer_hadFatalError = true;
     if ('cause' in error) {
       error = error.cause;
     }
-    console.error(`${this.message} (see above). ${this.messageReport}.`,);
+    console.error(
+      `${isBot(__unframerNavigator2.userAgent,) ? this.message : this.messageFatal} (see above). ${
+        ((_a = this.context) == null ? void 0 : _a.codeBoundaries) ? this.messageUser : this.messageReport
+      }.`,
+    );
     const sampleRate = Math.random();
-    if (!((_a = this.context) == null ? void 0 : _a.codeBoundaries) && sampleRate > 0.01) return;
+    if (!((_b = this.context) == null ? void 0 : _b.codeBoundaries) && sampleRate > 0.01) return;
     if (sampleRate > 0.25) return;
     const stack = error instanceof Error && typeof error.stack === 'string' ? error.stack : null;
-    (_b = window.__framer_events) == null ? void 0 : _b.push(['published_site_load_error', {
+    (_c = window.__framer_events) == null ? void 0 : _c.push(['published_site_load_error', {
       message: String(error,),
       stack,
     },],);
@@ -539213,7 +539258,7 @@ var GracefullyDegradingErrorBoundary = class extends Component {
     const unwrappedError = 'cause' in error ? error.cause : error;
     const closingHTMLComment = /-->/gu;
     const closingHTMLCommentReplacement = '--!>';
-    const dom = isBot(navigator.userAgent,) ? ((_a = document.getElementById('main',)) == null ? void 0 : _a.innerHTML) || '' : // @FIXME: We should have a UI for fatal error recovery.
+    const dom = isBot(__unframerNavigator2.userAgent,) ? ((_a = document.getElementById('main',)) == null ? void 0 : _a.innerHTML) || '' : // @FIXME: We should have a UI for fatal error recovery.
     // We don't have a UI for fatal error recovery currently, so we just render nothing for regular users. If we were to throw, React would unmount too.
     // We do render instead of throwing, so that:
     // - `componentDidCatch` runs (if we throw here, it does not)
@@ -539443,8 +539488,8 @@ var preloadedRoutes = /* @__PURE__ */ new Set();
 var routeToNodesInViewport = /* @__PURE__ */ new Map();
 function getObserveRouteForPreloadingFn() {
   var _a;
-  const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || {};
-  const lowDeviceMemory = navigator.deviceMemory && navigator.deviceMemory > LOW_MEMORY_THRESHOLD;
+  const connection = __unframerNavigator2.connection || __unframerNavigator2.mozConnection || __unframerNavigator2.webkitConnection || {};
+  const lowDeviceMemory = __unframerNavigator2.deviceMemory && __unframerNavigator2.deviceMemory > LOW_MEMORY_THRESHOLD;
   let effectiveType, preloadDisabled, maxPreloadAmount;
   function updateConnection() {
     effectiveType = connection.effectiveType || '';
@@ -539959,7 +540004,7 @@ function useReplaceNestedLinks(nodeId, href, propsAddedByLink,) {
     if (!propsAddedByLink.href) return;
     event.preventDefault();
     event.stopPropagation();
-    const isAppleDevice = /Mac|iPod|iPhone|iPad/u.test(navigator.userAgent,);
+    const isAppleDevice = /Mac|iPod|iPhone|iPad/u.test(__unframerNavigator2.userAgent,);
     if (isAppleDevice ? event.metaKey : event.ctrlKey) {
       openExternalLink(propsAddedByLink.href, '', '_blank',);
       return;
@@ -546397,11 +546442,11 @@ function useHydratedBreakpointVariants(initial, mediaQueries, hydratedWithInitia
         },);
       }
     }
-  }, [instantTransition, forceUpdate, onCanvas,],);
+  }, [instantTransition, forceUpdate,],);
   useIsomorphicLayoutEffect2(() => {
     if (!onCanvas) return;
     setActiveVariantInstant(initial,);
-  }, [onCanvas, initial, setActiveVariantInstant,],);
+  }, [initial, setActiveVariantInstant,],);
   useIsomorphicLayoutEffect2(() => {
     if (!hydratedWithInitial || isInitialNavigation !== true) return;
     setActiveVariantInstant(baseVariant.current,);
@@ -546615,7 +546660,7 @@ var gamepadPoller = /* @__PURE__ */ createGamepadPoller();
 var GamepadContext = /* @__PURE__ */ React4.createContext(gamepadPoller,);
 function getGamepadInputs() {
   let firstConnectedGamepad = null;
-  const gamepads = navigator.getGamepads();
+  const gamepads = __unframerNavigator2.getGamepads();
   for (const gamepad of gamepads) {
     if (!gamepad) continue;
     if (!firstConnectedGamepad) firstConnectedGamepad = gamepad;
@@ -547384,8 +547429,13 @@ function withCodeBoundaryForOverrides(Component18, {
   const appliedOverride = tryToApplyOverride(Component18, override,);
   let hasErrorBeenLogged = false;
   function CodeBoundaryForOverrides(props, ref,) {
-    const externalComponentNestingLevel = useExternalComponentNestingLevel();
-    const shouldWrapWithBoundary = shouldWrapOverrideWithBoundary(externalComponentNestingLevel, inComponentSlot ?? false,);
+    const nearestExternalComponent = useNearestExternalComponent();
+    const shouldWrapWithBoundary = shouldWrapOverrideWithBoundary(
+      scopeId,
+      nearestExternalComponent.scopeId,
+      nearestExternalComponent.level,
+      inComponentSlot ?? false,
+    );
     if (shouldWrapWithBoundary) {
       if (appliedOverride.status === 'success') {
         return /* @__PURE__ */ jsx(CodeComponentBoundary, {
@@ -548393,7 +548443,8 @@ function getCustomFontName(fileName, properties,) {
   const fontFamily = font.preferredFamily || font.fontFamily;
   const isAssetVariableFont = Array.isArray(font.variationAxes,);
   if (isAssetVariableFont && fontFamily.toLowerCase().includes('variable',)) return fontFamily;
-  const variant = isAssetVariableFont ? 'Variable' : font.preferredSubFamily || font.fontSubFamily;
+  const variant = isAssetVariableFont ? 'Variable' : (font.preferredSubFamily || font.fontSubFamily).trim();
+  if (variant === '') return fontFamily;
   return `${fontFamily} ${variant}`;
 }
 var CustomFontSource = class {
@@ -550057,15 +550108,17 @@ var styles = /* @__PURE__ */ (() => [
     backgroundColor: 'transparent',
     outline: 'none',
   },),
+  css(`.${textInputWrapperClassName} .${inputClassName}::-webkit-datetime-edit`, {
+    // Prevent browsers from improvising the date/time placeholder height.
+    height: css.variable('--framer-input-font-line-height',/* FontLineHeight */
+    ),
+  },),
   css(`.${textInputWrapperClassName} .${inputClassName}.${emptyValueClassName}::-webkit-datetime-edit`, {
     color: css.variable('--framer-input-placeholder-color',/* PlaceholderColor */
     ),
     // This tells safari to use the color for the shadow dom elements.
     '-webkit-text-fill-color': css.variable('--framer-input-placeholder-color',/* PlaceholderColor */
     ),
-    // Prevent browsers from improvising the date/time placeholder height.
-    height: css.variable('--framer-input-font-line-height',/* FontLineHeight */
-    ),
     overflow: 'visible',
   },),
   css(
@@ -553892,19 +553945,11 @@ function useInitialRouteComponent(routes, homeNodeId,) {
 var package_default = {
   name: 'framer',
   version: '2.4.1',
-  main: 'build/index.js',
+  private: true,
   type: 'module',
-  exports: {
-    '.': './build/index.js',
-    './package.json': './package.json',
-    './*': './build/*',
-  },
-  files: ['build', 'CHANGELOG.md', 'README.md', 'LICENSE.md', 'postinstall.cjs',],
-  types: './build/index.d.ts',
   author: 'Framer',
   license: 'MIT',
   scripts: {
-    prepublishOnly: 'make build',
     coverage: 'yarn :jest --coverage',
     lint: 'yarn :eslint ./src --ext .ts,.tsx --format codeframe --quiet --cache',
     'lint:ci': 'yarn :eslint ./src --ext .ts,.tsx --format codeframe --quiet --cache --cache-strategy content',
@@ -553956,20 +554001,6 @@ var package_default = {
   tsdoc: {
     tsdocFlavor: 'AEDoc',
   },
-  framer: {
-    components: [{
-      name: 'Scroll',
-      children: true,
-      properties: [{
-        key: 'direction',
-        title: 'Direction',
-        kind: 'enum',
-        options: ['horizontal', 'vertical', 'both',],
-      },],
-    }, {
-      name: 'Page',
-    },],
-  },
   browserslist: ['extends @framer/browserslist-config/sites',],
 };
 var version = /* @__PURE__ */ (() => package_default.version)();

package/src/index.ts

@@ -9,6 +9,7 @@ export {
     WithFramerBreakpoints,
     ContextProviders,
     AdaptedLink,
+    withCSS,
 } from './react.js'
 
 export { Link, ResolveLinks }

package/src/react.tsx

@@ -9,6 +9,7 @@ import {
     useMemo,
     useSyncExternalStore,
 } from 'react'
+import { version } from './version.js'
 import {
     breakpointsStyles,
     breakpointsStylesLegacy,
@@ -162,7 +163,10 @@ export const WithFramerBreakpoints = forwardRef(function WithFramerBreakpoints<
             )
         } else {
             variants.set(realVariant, {
-                className: classNames('unframer unframer-hidden', `unframer-${breakpointName}`),
+                className: classNames(
+                    'unframer unframer-hidden',
+                    `unframer-${breakpointName}`,
+                ),
                 variant: realVariant,
                 breakpoints: [breakpointName],
             })
@@ -193,6 +197,7 @@ export const WithFramerBreakpoints = forwardRef(function WithFramerBreakpoints<
             )
         },
     )
+    parts.push(<DebugUnframerVersion />)
 
     return parts
 })
@@ -232,6 +237,7 @@ import {
     FramerLink as Link,
 } from './framer.js'
 import React from 'react'
+import { style } from 'real-framer-motion/client'
 
 type Routes = Record<string, { path: string }>
 
@@ -354,3 +360,49 @@ export function ContextProviders({
         </FetchClientProvider>
     )
 }
+
+const isFunction = (value: any): value is Function => {
+    return typeof value === 'function'
+}
+
+var framerCSSMarker = 'data-framer-css-ssr'
+
+/**
+ * Add Unframer debug information to debug websites using Unframer
+ */
+function DebugUnframerVersion() {
+    return (
+        <details style={{ display: 'none' }}>
+            Using{' '}
+            <a href='https://unframer.co' className=''>
+                Framer React Export
+            </a>{' '}
+            version {version}
+        </details>
+    )
+}
+
+// overrides the default withCSS which does not work with Astro because it does not simply renders style tags
+export const withCSS = (Component, escapedCSS, componentSerializationId) =>
+    forwardRef((props, ref) => {
+        const id3 = componentSerializationId
+
+        if (isFunction(escapedCSS)) escapedCSS = escapedCSS('PREVIEW')
+        const concatenatedCSS = Array.isArray(escapedCSS)
+            ? escapedCSS.join('\n')
+            : escapedCSS
+        return (
+            <>
+                <style
+                    {...{
+                        [framerCSSMarker]: true,
+                    }}
+                    data-framer-component={id3}
+                    dangerouslySetInnerHTML={{
+                        __html: concatenatedCSS,
+                    }}
+                />
+                <Component {...props} ref={ref} />
+            </>
+        )
+    })

package/src/version.ts

@@ -0,0 +1 @@
+export const version = '2.18.2'