@makeswift/runtime 0.5.2 → 0.5.4

package/dist/Box.cjs.js

@@ -40,7 +40,7 @@ var index = require("./index.cjs2.js");
 var boxModels = require("./box-models.cjs.js");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");

package/dist/Box.es.js

@@ -38,7 +38,7 @@ import { a as useBoxAnimation, b as areBoxAnimationPropsEqual, B as BackgroundsC
 import { p as parse, c as createBox } from "./box-models.es.js";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
+import "./constants.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";

package/dist/Button.cjs.js

@@ -39,7 +39,7 @@ var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");

package/dist/Button.es.js

@@ -37,7 +37,7 @@ import { cx } from "@emotion/css";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
+import "./constants.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";

package/dist/Carousel.cjs.js

@@ -43,7 +43,7 @@ var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");

package/dist/Carousel.es.js

@@ -41,7 +41,7 @@ import { cx } from "@emotion/css";
 import { jsxs, jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
+import "./constants.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";

package/dist/Countdown.cjs.js

@@ -37,7 +37,7 @@ var next = require("./index.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");

package/dist/Countdown.es.js

@@ -35,7 +35,7 @@ import { o as useStyle, r as responsiveStyle, s as colorToString } from "./index
 import { jsx, jsxs } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
+import "./constants.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";

package/dist/Divider.cjs.js

@@ -6,7 +6,7 @@ var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");

package/dist/Divider.es.js

@@ -4,7 +4,7 @@ import { cx } from "@emotion/css";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
+import "./constants.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";

package/dist/Embed.cjs.js

@@ -7,7 +7,7 @@ var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");

package/dist/Embed.es.js

@@ -5,7 +5,7 @@ import { cx } from "@emotion/css";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
+import "./constants.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";

package/dist/Form.cjs.js

@@ -42,7 +42,7 @@ var index = require("./index.cjs3.js");
 var boxModels = require("./box-models.cjs.js");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");

package/dist/Form.es.js

@@ -41,7 +41,7 @@ import { L as Link } from "./index.es3.js";
 import { g as getBox } from "./box-models.es.js";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
+import "./constants.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";

package/dist/Image.cjs.js

@@ -10,7 +10,7 @@ var nextVersion = require("./next-version.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");

package/dist/Image.es.js

@@ -8,7 +8,7 @@ import { m as major } from "./next-version.es.js";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
+import "./constants.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";

package/dist/LiveProvider.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
 var next = require("./index.cjs.js");
-var reactPage = require("./react-page.cjs.js");
+var constants = require("./constants.cjs.js");
 var actions = require("./actions.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
@@ -37,13 +37,13 @@ function LiveProvider({
   children,
   rootElements
 }) {
-  const store = React.useMemo(() => reactPage.configureStore({
+  const store = React.useMemo(() => constants.configureStore({
     preloadedState: next.storeContextDefaultValue.getState(),
     rootElements
   }), [rootElements]);
   React.useEffect(() => {
     var _a;
-    const unregisterDocuments = Array.from((_a = rootElements == null ? void 0 : rootElements.entries()) != null ? _a : []).map(([documentKey, rootElement]) => store.dispatch(actions.registerDocumentEffect(reactPage.createDocument(documentKey, rootElement))));
+    const unregisterDocuments = Array.from((_a = rootElements == null ? void 0 : rootElements.entries()) != null ? _a : []).map(([documentKey, rootElement]) => store.dispatch(actions.registerDocumentEffect(constants.createDocument(documentKey, rootElement))));
     return () => {
       unregisterDocuments.forEach((unregisterDocument) => {
         unregisterDocument();

package/dist/LiveProvider.es.js

@@ -1,7 +1,7 @@
 import { useMemo, useEffect } from "react";
-import { U as storeContextDefaultValue, V as StoreContext, W as MakeswiftProvider } from "./index.es.js";
-import { q as configureStore, c as createDocument } from "./react-page.es.js";
-import { G as registerDocumentEffect } from "./actions.es.js";
+import { T as storeContextDefaultValue, U as StoreContext, V as MakeswiftProvider } from "./index.es.js";
+import { q as configureStore, c as createDocument } from "./constants.es.js";
+import { F as registerDocumentEffect } from "./actions.es.js";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";

package/dist/Navigation.cjs.js

@@ -48,7 +48,7 @@ require("./next-version.cjs.js");
 require("next/package.json");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");

package/dist/Navigation.es.js

@@ -47,7 +47,7 @@ import "./next-version.es.js";
 import "next/package.json";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
+import "./constants.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";

package/dist/PreviewProvider.cjs.js

@@ -24,7 +24,7 @@ var next = require("./index.cjs.js");
 var redux = require("redux");
 var thunk = require("redux-thunk");
 var immutable = require("immutable");
-var reactPage = require("./react-page.cjs.js");
+var constants = require("./constants.cjs.js");
 var actions = require("./actions.cjs.js");
 var boxModels = require("./box-models.cjs.js");
 var slot = require("./slot.cjs.js");
@@ -74,24 +74,24 @@ function apply(data, operation) {
 function getInitialState({
   rootElements
 } = {}) {
-  return reactPage.getInitialState({ rootElements });
+  return constants.getInitialState({ rootElements });
 }
 function getReadOnlyDocumentsStateSlice(state) {
   return state;
 }
 function getDocument(state, documentKey) {
-  return reactPage.getDocument$1(getReadOnlyDocumentsStateSlice(state), documentKey);
+  return constants.getDocument$1(getReadOnlyDocumentsStateSlice(state), documentKey);
 }
 function reducer$1(state = getInitialState(), action) {
   var _a;
-  const nextState = reactPage.reducer(state, action);
+  const nextState = constants.reducer(state, action);
   switch (action.type) {
     case actions.ActionTypes.CHANGE_DOCUMENT: {
       const currentRootElement = (_a = getDocument(nextState, action.payload.documentKey)) == null ? void 0 : _a.rootElement;
       if (currentRootElement == null)
         return nextState;
       const nextRootElement = apply(currentRootElement, action.payload.operation);
-      return currentRootElement === nextRootElement ? nextState : new Map(nextState).set(action.payload.documentKey, reactPage.createDocument(action.payload.documentKey, nextRootElement));
+      return currentRootElement === nextRootElement ? nextState : new Map(nextState).set(action.payload.documentKey, constants.createDocument(action.payload.documentKey, nextRootElement));
     }
     default:
       return nextState;
@@ -99,12 +99,12 @@ function reducer$1(state = getInitialState(), action) {
 }
 const reducer = redux.combineReducers({
   documents: reducer$1,
-  reactComponents: reactPage.reducer$1,
+  reactComponents: constants.reducer$1,
   boxModels: boxModels.reducer,
-  componentsMeta: reactPage.reducer$2,
-  propControllers: reactPage.reducer$3,
-  propControllerHandles: reactPage.reducer$4,
-  isInBuilder: reactPage.reducer$5
+  componentsMeta: constants.reducer$2,
+  propControllers: constants.reducer$3,
+  propControllerHandles: constants.reducer$4,
+  isInBuilder: constants.reducer$5
 });
 function getBoxModelsStateSlice(state) {
   return state.boxModels;
@@ -122,13 +122,13 @@ function getComponentsMetaStateSlice(state) {
   return state.componentsMeta;
 }
 function getComponentsMeta(state) {
-  return reactPage.getComponentsMeta(getComponentsMetaStateSlice(state));
+  return constants.getComponentsMeta(getComponentsMetaStateSlice(state));
 }
 function getPropControllersStateSlice(state) {
   return state.propControllers;
 }
 function getComponentPropControllerDescriptors(state, componentType) {
-  return reactPage.getComponentPropControllerDescriptors$1(getPropControllersStateSlice(state), componentType);
+  return constants.getComponentPropControllerDescriptors$1(getPropControllersStateSlice(state), componentType);
 }
 function getPropControllerHandlesStateSlice(state) {
   return state.propControllerHandles;
@@ -355,7 +355,7 @@ function messageChannelMiddleware() {
 }
 function createAndRegisterPropControllers(documentKey, elementKey) {
   return (dispatch, getState) => {
-    const descriptors = reactPage.getElementPropControllerDescriptors(getState(), documentKey, elementKey);
+    const descriptors = constants.getElementPropControllerDescriptors(getState(), documentKey, elementKey);
     if (descriptors == null)
       return null;
     const propControllers = Object.entries(descriptors).reduce((acc, [propName, descriptor]) => {
@@ -372,9 +372,9 @@ function propControllerHandlesMiddleware() {
       switch (action.type) {
         case actions.ActionTypes.REGISTER_COMPONENT_HANDLE: {
           const { documentKey, elementKey, componentHandle } = action.payload;
-          const element = reactPage.getElement(getState(), documentKey, elementKey);
+          const element = constants.getElement(getState(), documentKey, elementKey);
           const propControllers = dispatch(createAndRegisterPropControllers(documentKey, elementKey));
-          if (element != null && !reactPage.isElementReference(element) && reactPage.isPropControllersHandle(componentHandle)) {
+          if (element != null && !constants.isElementReference(element) && constants.isPropControllersHandle(componentHandle)) {
             dispatch(actions.registerPropControllersHandle(documentKey, elementKey, componentHandle));
             componentHandle.setPropControllers(propControllers);
           }
@@ -382,13 +382,13 @@ function propControllerHandlesMiddleware() {
         }
         case actions.ActionTypes.UNREGISTER_COMPONENT_HANDLE: {
           const { documentKey, elementKey } = action.payload;
-          const handle = reactPage.getPropControllersHandle(getPropControllerHandlesStateSlice(getState()), documentKey, elementKey);
+          const handle = constants.getPropControllersHandle(getPropControllerHandlesStateSlice(getState()), documentKey, elementKey);
           handle == null ? void 0 : handle.setPropControllers(null);
           dispatch(actions.unregisterPropControllers(documentKey, elementKey));
           break;
         }
         case actions.ActionTypes.MESSAGE_HOST_PROP_CONTROLLER: {
-          const propController = reactPage.getPropController(getPropControllerHandlesStateSlice(getState()), action.payload.documentKey, action.payload.elementKey, action.payload.propName);
+          const propController = constants.getPropController(getPropControllerHandlesStateSlice(getState()), action.payload.documentKey, action.payload.elementKey, action.payload.propName);
           if (propController)
             propController.recv(action.payload.message);
         }
@@ -427,7 +427,7 @@ function PreviewProvider({
   }), [client, rootElements]);
   React.useEffect(() => {
     var _a;
-    const unregisterDocuments = Array.from((_a = rootElements == null ? void 0 : rootElements.entries()) != null ? _a : []).map(([documentKey, rootElement]) => store.dispatch(actions.registerDocumentEffect(reactPage.createDocument(documentKey, rootElement))));
+    const unregisterDocuments = Array.from((_a = rootElements == null ? void 0 : rootElements.entries()) != null ? _a : []).map(([documentKey, rootElement]) => store.dispatch(actions.registerDocumentEffect(constants.createDocument(documentKey, rootElement))));
     return () => {
       unregisterDocuments.forEach((unregisterDocument) => {
         unregisterDocument();

package/dist/PreviewProvider.es.js

@@ -18,12 +18,12 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { useMemo, useEffect } from "react";
-import { T as deepEqual, U as storeContextDefaultValue, V as StoreContext, W as MakeswiftProvider } from "./index.es.js";
+import { Q as deepEqual, T as storeContextDefaultValue, U as StoreContext, V as MakeswiftProvider } from "./index.es.js";
 import { createStore, applyMiddleware, combineReducers } from "redux";
 import thunk from "redux-thunk";
 import { removeIn, setIn } from "immutable";
-import { z as getInitialState$1, A as reducer$2, B as getDocument$1, c as createDocument, C as getComponentsMeta$1, D as getComponentPropControllerDescriptors$1, E as getPropController, F as getPropControllersHandle, G as getElement, H as getElementPropControllerDescriptors, i as isElementReference, I as isPropControllersHandle, J as reducer$3, K as reducer$5, L as reducer$6, M as reducer$7, N as reducer$8 } from "./react-page.es.js";
-import { A as ActionTypes, o as unregisterMeasurable, p as registerMeasurable, q as registerBuilderComponent, v as changeElementBoxModels, w as changeDocumentElementSize, x as handleWheel, y as handlePointerMove, z as setIsInBuilder, B as unregisterBuilderComponent, C as unregisterPropControllers, D as registerPropControllers, E as registerPropControllersHandle, F as messageBuilderPropController, G as registerDocumentEffect } from "./actions.es.js";
+import { z as getInitialState$1, A as reducer$2, B as getDocument$1, c as createDocument, C as getComponentsMeta$1, D as getComponentPropControllerDescriptors$1, E as getPropController, F as getPropControllersHandle, G as getElement, H as getElementPropControllerDescriptors, i as isElementReference, I as isPropControllersHandle, J as reducer$3, K as reducer$5, L as reducer$6, N as reducer$7, O as reducer$8 } from "./constants.es.js";
+import { A as ActionTypes, n as unregisterMeasurable, o as registerMeasurable, p as registerBuilderComponent, q as changeElementBoxModels, v as changeDocumentElementSize, w as handleWheel, x as handlePointerMove, y as setIsInBuilder, z as unregisterBuilderComponent, B as unregisterPropControllers, C as registerPropControllers, D as registerPropControllersHandle, E as messageBuilderPropController, F as registerDocumentEffect } from "./actions.es.js";
 import { i as isMeasurable, a as getMeasurables$1, b as getBoxModels$1, m as measure, d as getBoxModel$1, r as reducer$4 } from "./box-models.es.js";
 import { a5 as createPropController } from "./slot.es.js";
 import { a as serializeControls } from "./control-serialization.es.js";

package/dist/Root.cjs.js

@@ -9,7 +9,7 @@ var index = require("./index.cjs2.js");
 var css = require("@emotion/css");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");

package/dist/Root.es.js

@@ -8,7 +8,7 @@ import { B as BackgroundsContainer, G as GridItem } from "./index.es2.js";
 import { injectGlobal, cache } from "@emotion/css";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
+import "./constants.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";

package/dist/SocialLinks.cjs.js

@@ -41,7 +41,7 @@ require("scroll-into-view-if-needed");
 require("next/link");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");

package/dist/SocialLinks.es.js

@@ -40,7 +40,7 @@ import "scroll-into-view-if-needed";
 import "next/link";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
+import "./constants.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";

package/dist/Text.cjs.js

@@ -39,7 +39,7 @@ var boxModels = require("./box-models.cjs.js");
 var slateReact = require("slate-react");
 var Lists = require("@convertkit/slate-lists");
 var next = require("./index.cjs.js");
-var reactPage = require("./react-page.cjs.js");
+var constants = require("./constants.cjs.js");
 var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
 var index = require("./index.cjs3.js");
@@ -101,11 +101,11 @@ function useTypographyMark(value) {
   var _a, _b, _c;
   const typography = next.useTypography((_a = value == null ? void 0 : value.id) != null ? _a : null);
   const swatchIds = [
-    ...reactPage.getTypographyStyleSwatchIds(value == null ? void 0 : value.style),
-    ...reactPage.getTypographyStyleSwatchIds(typography == null ? void 0 : typography.style)
+    ...constants.getTypographyStyleSwatchIds(value == null ? void 0 : value.style),
+    ...constants.getTypographyStyleSwatchIds(typography == null ? void 0 : typography.style)
   ];
   const swatches = next.useSwatches(swatchIds);
-  return overrideTypographyStyle((_b = typography == null ? void 0 : typography.style.map(withColor(swatches.filter(reactPage.isNonNullable)))) != null ? _b : [], (_c = value == null ? void 0 : value.style.map(withColor(swatches.filter(reactPage.isNonNullable)))) != null ? _c : []);
+  return overrideTypographyStyle((_b = typography == null ? void 0 : typography.style.map(withColor(swatches.filter(constants.isNonNullable)))) != null ? _b : [], (_c = value == null ? void 0 : value.style.map(withColor(swatches.filter(constants.isNonNullable)))) != null ? _c : []);
 }
 function Mark(_a) {
   var _b = _a, {

package/dist/Text.es.js

@@ -37,7 +37,7 @@ import { g as getBox } from "./box-models.es.js";
 import { Editor } from "slate-react";
 import Lists from "@convertkit/slate-lists";
 import { J as useTypography, K as useSwatches, G as findDeviceOverride, o as useStyle, r as responsiveStyle, L as shallowMergeFallbacks, s as colorToString, u as useIsInBuilder } from "./index.es.js";
-import { w as getTypographyStyleSwatchIds, l as isNonNullable } from "./react-page.es.js";
+import { w as getTypographyStyleSwatchIds, l as isNonNullable } from "./constants.es.js";
 import { cx } from "@emotion/css";
 import { jsx } from "react/jsx-runtime";
 import { L as Link } from "./index.es3.js";

package/dist/Video.cjs.js

@@ -27,7 +27,7 @@ var placeholders = require("./placeholders.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
+require("./constants.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");
@@ -66,6 +66,10 @@ const Video = React.forwardRef(function Video2({
   borderRadius
 }, ref) {
   const canPlayUrl = video && video.url != null && ReactPlayer__default["default"].canPlay(video.url);
+  const [shouldRenderReactPlayer, setShouldRenderReactPlayer] = React.useState(false);
+  React.useEffect(() => {
+    setShouldRenderReactPlayer(true);
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ref,
     id,
@@ -87,7 +91,7 @@ const Video = React.forwardRef(function Video2({
           right: 0,
           bottom: 0
         },
-        children: canPlayUrl === true ? /* @__PURE__ */ jsxRuntime.jsx(ReactPlayer__default["default"], __spreadProps(__spreadValues({}, video), {
+        children: shouldRenderReactPlayer && canPlayUrl === true ? /* @__PURE__ */ jsxRuntime.jsx(ReactPlayer__default["default"], __spreadProps(__spreadValues({}, video), {
           width: "100%",
           height: "100%",
           config: {

package/dist/Video.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.cjs.js","sources":["../src/components/builtin/Video/Video.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { forwardRef, Ref } from 'react'\nimport ReactPlayer from 'react-player'\n\nimport { ElementIDValue, VideoValue } from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { placeholders } from '../../utils/placeholders'\n\ntype Props = {\n  id?: ElementIDValue\n  video?: VideoValue\n  width?: string\n  margin?: string\n  borderRadius?: string\n}\n\nconst ASPECT_RATIO = 16 / 9\n\nconst Video = forwardRef(function Video(\n  { id, video, width, margin, borderRadius }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url)\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'column', overflow: 'hidden' }),\n        width,\n        margin,\n        borderRadius,\n      )}\n    >\n      <div style={{ position: 'relative', paddingTop: `${100 / ASPECT_RATIO}%` }}>\n        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>\n          {canPlayUrl === true ? (\n            <ReactPlayer\n              {...video}\n              width=\"100%\"\n              height=\"100%\"\n              config={{\n                vimeo: { playerOptions: { background: video != null && !video.controls } },\n                wistia: {\n                  options: {\n                    endVideoBehavior: video != null && video.loop === true ? 'loop' : 'default',\n                  },\n                },\n              }}\n            />\n          ) : (\n            <img width=\"100%\" src={placeholders.video.src} alt=\"Video Placeholder\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n})\n\nexport default Video\n"],"names":["ASPECT_RATIO","Video","forwardRef","id","video","width","margin","borderRadius","ref","canPlayUrl","url","ReactPlayer","canPlay","cx","useStyle","display","flexDirection","overflow","position","paddingTop","top","left","right","bottom","_jsx","vimeo","playerOptions","background","controls","wistia","options","endVideoBehavior","loop","placeholders","src"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,eAAe,KAAK;AAEpBC,MAAAA,QAAQC,MAAAA,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAOC;AAAAA,EAAQC;AAAAA,GAC5BC,KACA;AACMC,QAAAA,aAAaL,SAASA,MAAMM,OAAO,QAAQC,qBAAAA,WAAYC,QAAQR,MAAMM,GAA1B;AAG/C,wCAAA,OAAA;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAWG,OACTC,cAAS;AAAA,MAAEC,SAAS;AAAA,MAAQC,eAAe;AAAA,MAAUC,UAAU;AAAA,IAAA,CAAvD,GACRZ,OACAC,QACAC,YAJW;AAAA,IAOb,yCAAA,OAAA;AAAA,MAAK,OAAO;AAAA,QAAEW,UAAU;AAAA,QAAYC,YAAa,GAAE,MAAMnB;AAAAA,MAAzD;AAAA,MACE,yCAAA,OAAA;AAAA,QAAK,OAAO;AAAA,UAAEkB,UAAU;AAAA,UAAYE,KAAK;AAAA,UAAGC,MAAM;AAAA,UAAGC,OAAO;AAAA,UAAGC,QAAQ;AAAA,QAAvE;AAAA,QAAA,UACGd,eAAe,OACde,2BAAAA,IAACb,qBAAAA,6CACKP;UACJ,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAQ;AAAA,YACNqB,OAAO;AAAA,cAAEC,eAAe;AAAA,gBAAEC,YAAYvB,SAAS,QAAQ,CAACA,MAAMwB;AAAAA,cAAtC;AAAA,YADlB;AAAA,YAENC,QAAQ;AAAA,cACNC,SAAS;AAAA,gBACPC,kBAAkB3B,SAAS,QAAQA,MAAM4B,SAAS,OAAO,SAAS;AAAA,cAD3D;AAAA,YADH;AAAA,UAFF;AAAA,QAAA,EAJV,IAcAR,2BAAA,IAAA,OAAA;AAAA,UAAK,OAAM;AAAA,UAAO,KAAKS,aAAAA,aAAa7B,MAAM8B;AAAAA,UAAK,KAAI;AAAA,QAAA,CAAnD;AAAA,MAAA,CAhBJ;AAAA,IAAA,CADF;AAAA,EAAA,CAXJ;AAkCD,CAxCuB;;"}
+{"version":3,"file":"Video.cjs.js","sources":["../src/components/builtin/Video/Video.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { forwardRef, Ref, useEffect, useState } from 'react'\nimport ReactPlayer from 'react-player'\n\nimport { ElementIDValue, VideoValue } from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { placeholders } from '../../utils/placeholders'\n\ntype Props = {\n  id?: ElementIDValue\n  video?: VideoValue\n  width?: string\n  margin?: string\n  borderRadius?: string\n}\n\nconst ASPECT_RATIO = 16 / 9\n\nconst Video = forwardRef(function Video(\n  { id, video, width, margin, borderRadius }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url)\n  /**\n   * @see https://github.com/cookpete/react-player/issues/1428\n   */\n  const [shouldRenderReactPlayer, setShouldRenderReactPlayer] = useState(false)\n\n  useEffect(() => {\n    setShouldRenderReactPlayer(true)\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'column', overflow: 'hidden' }),\n        width,\n        margin,\n        borderRadius,\n      )}\n    >\n      <div style={{ position: 'relative', paddingTop: `${100 / ASPECT_RATIO}%` }}>\n        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>\n          {shouldRenderReactPlayer && canPlayUrl === true ? (\n            <ReactPlayer\n              {...video}\n              width=\"100%\"\n              height=\"100%\"\n              config={{\n                vimeo: { playerOptions: { background: video != null && !video.controls } },\n                wistia: {\n                  options: {\n                    endVideoBehavior: video != null && video.loop === true ? 'loop' : 'default',\n                  },\n                },\n              }}\n            />\n          ) : (\n            <img width=\"100%\" src={placeholders.video.src} alt=\"Video Placeholder\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n})\n\nexport default Video\n"],"names":["ASPECT_RATIO","Video","forwardRef","id","video","width","margin","borderRadius","ref","canPlayUrl","url","ReactPlayer","canPlay","shouldRenderReactPlayer","setShouldRenderReactPlayer","useState","useEffect","cx","useStyle","display","flexDirection","overflow","position","paddingTop","top","left","right","bottom","vimeo","playerOptions","background","controls","wistia","options","endVideoBehavior","loop","_jsx","placeholders","src"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,eAAe,KAAK;AAEpBC,MAAAA,QAAQC,MAAAA,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAOC;AAAAA,EAAQC;AAAAA,GAC5BC,KACA;AACMC,QAAAA,aAAaL,SAASA,MAAMM,OAAO,QAAQC,qBAAAA,WAAYC,QAAQR,MAAMM,GAA1B;AAI3C,QAAA,CAACG,yBAAyBC,8BAA8BC,MAAAA,SAAS,KAAD;AAEtEC,QAAAA,UAAU,MAAM;AACdF,+BAA2B,IAAD;AAAA,EADnB,GAEN,CAFM,CAAA;AAKP,wCAAA,OAAA;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAWG,OACTC,cAAS;AAAA,MAAEC,SAAS;AAAA,MAAQC,eAAe;AAAA,MAAUC,UAAU;AAAA,IAAA,CAAvD,GACRhB,OACAC,QACAC,YAJW;AAAA,IAOb,yCAAA,OAAA;AAAA,MAAK,OAAO;AAAA,QAAEe,UAAU;AAAA,QAAYC,YAAa,GAAE,MAAMvB;AAAAA,MAAzD;AAAA,MACE,yCAAA,OAAA;AAAA,QAAK,OAAO;AAAA,UAAEsB,UAAU;AAAA,UAAYE,KAAK;AAAA,UAAGC,MAAM;AAAA,UAAGC,OAAO;AAAA,UAAGC,QAAQ;AAAA,QAAvE;AAAA,QACGd,UAAAA,2BAA2BJ,eAAe,sCACxCE,qBAAAA,YAAD,iCACMP,QADN;AAAA,UAEE,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAQ;AAAA,YACNwB,OAAO;AAAA,cAAEC,eAAe;AAAA,gBAAEC,YAAY1B,SAAS,QAAQ,CAACA,MAAM2B;AAAAA,cAAtC;AAAA,YADlB;AAAA,YAENC,QAAQ;AAAA,cACNC,SAAS;AAAA,gBACPC,kBAAkB9B,SAAS,QAAQA,MAAM+B,SAAS,OAAO,SAAS;AAAA,cAD3D;AAAA,YADH;AAAA,UAFF;AAAA,QAAA,EAJV,IAcAC,2BAAA,IAAA,OAAA;AAAA,UAAK,OAAM;AAAA,UAAO,KAAKC,aAAAA,aAAajC,MAAMkC;AAAAA,UAAK,KAAI;AAAA,QAAA,CAAnD;AAAA,MAAA,CAhBJ;AAAA,IAAA,CADF;AAAA,EAAA,CAXJ;AAkCD,CAhDuB;;"}

package/dist/Video.es.js

@@ -18,14 +18,14 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { cx } from "@emotion/css";
-import { forwardRef } from "react";
+import { forwardRef, useState, useEffect } from "react";
 import ReactPlayer from "react-player";
 import { o as useStyle } from "./index.es.js";
 import { p as placeholders } from "./placeholders.es.js";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
+import "./constants.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";
@@ -60,6 +60,10 @@ const Video = forwardRef(function Video2({
   borderRadius
 }, ref) {
   const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url);
+  const [shouldRenderReactPlayer, setShouldRenderReactPlayer] = useState(false);
+  useEffect(() => {
+    setShouldRenderReactPlayer(true);
+  }, []);
   return /* @__PURE__ */ jsx("div", {
     ref,
     id,
@@ -81,7 +85,7 @@ const Video = forwardRef(function Video2({
           right: 0,
           bottom: 0
         },
-        children: canPlayUrl === true ? /* @__PURE__ */ jsx(ReactPlayer, __spreadProps(__spreadValues({}, video), {
+        children: shouldRenderReactPlayer && canPlayUrl === true ? /* @__PURE__ */ jsx(ReactPlayer, __spreadProps(__spreadValues({}, video), {
           width: "100%",
           height: "100%",
           config: {

package/dist/Video.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.es.js","sources":["../src/components/builtin/Video/Video.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { forwardRef, Ref } from 'react'\nimport ReactPlayer from 'react-player'\n\nimport { ElementIDValue, VideoValue } from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { placeholders } from '../../utils/placeholders'\n\ntype Props = {\n  id?: ElementIDValue\n  video?: VideoValue\n  width?: string\n  margin?: string\n  borderRadius?: string\n}\n\nconst ASPECT_RATIO = 16 / 9\n\nconst Video = forwardRef(function Video(\n  { id, video, width, margin, borderRadius }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url)\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'column', overflow: 'hidden' }),\n        width,\n        margin,\n        borderRadius,\n      )}\n    >\n      <div style={{ position: 'relative', paddingTop: `${100 / ASPECT_RATIO}%` }}>\n        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>\n          {canPlayUrl === true ? (\n            <ReactPlayer\n              {...video}\n              width=\"100%\"\n              height=\"100%\"\n              config={{\n                vimeo: { playerOptions: { background: video != null && !video.controls } },\n                wistia: {\n                  options: {\n                    endVideoBehavior: video != null && video.loop === true ? 'loop' : 'default',\n                  },\n                },\n              }}\n            />\n          ) : (\n            <img width=\"100%\" src={placeholders.video.src} alt=\"Video Placeholder\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n})\n\nexport default Video\n"],"names":["ASPECT_RATIO","Video","forwardRef","id","video","width","margin","borderRadius","ref","canPlayUrl","url","ReactPlayer","canPlay","cx","useStyle","display","flexDirection","overflow","position","paddingTop","top","left","right","bottom","_jsx","vimeo","playerOptions","background","controls","wistia","options","endVideoBehavior","loop","placeholders","src"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,eAAe,KAAK;AAEpBC,MAAAA,QAAQC,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAOC;AAAAA,EAAQC;AAAAA,GAC5BC,KACA;AACMC,QAAAA,aAAaL,SAASA,MAAMM,OAAO,QAAQC,YAAYC,QAAQR,MAAMM,GAA1B;AAG/C,6BAAA,OAAA;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAWG,GACTC,SAAS;AAAA,MAAEC,SAAS;AAAA,MAAQC,eAAe;AAAA,MAAUC,UAAU;AAAA,IAAA,CAAvD,GACRZ,OACAC,QACAC,YAJW;AAAA,IAOb,8BAAA,OAAA;AAAA,MAAK,OAAO;AAAA,QAAEW,UAAU;AAAA,QAAYC,YAAa,GAAE,MAAMnB;AAAAA,MAAzD;AAAA,MACE,8BAAA,OAAA;AAAA,QAAK,OAAO;AAAA,UAAEkB,UAAU;AAAA,UAAYE,KAAK;AAAA,UAAGC,MAAM;AAAA,UAAGC,OAAO;AAAA,UAAGC,QAAQ;AAAA,QAAvE;AAAA,QAAA,UACGd,eAAe,OACde,oBAAC,8CACKpB;UACJ,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAQ;AAAA,YACNqB,OAAO;AAAA,cAAEC,eAAe;AAAA,gBAAEC,YAAYvB,SAAS,QAAQ,CAACA,MAAMwB;AAAAA,cAAtC;AAAA,YADlB;AAAA,YAENC,QAAQ;AAAA,cACNC,SAAS;AAAA,gBACPC,kBAAkB3B,SAAS,QAAQA,MAAM4B,SAAS,OAAO,SAAS;AAAA,cAD3D;AAAA,YADH;AAAA,UAFF;AAAA,QAAA,EAJV,IAcAR,oBAAA,OAAA;AAAA,UAAK,OAAM;AAAA,UAAO,KAAKS,aAAa7B,MAAM8B;AAAAA,UAAK,KAAI;AAAA,QAAA,CAAnD;AAAA,MAAA,CAhBJ;AAAA,IAAA,CADF;AAAA,EAAA,CAXJ;AAkCD,CAxCuB;;"}
+{"version":3,"file":"Video.es.js","sources":["../src/components/builtin/Video/Video.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { forwardRef, Ref, useEffect, useState } from 'react'\nimport ReactPlayer from 'react-player'\n\nimport { ElementIDValue, VideoValue } from '../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { placeholders } from '../../utils/placeholders'\n\ntype Props = {\n  id?: ElementIDValue\n  video?: VideoValue\n  width?: string\n  margin?: string\n  borderRadius?: string\n}\n\nconst ASPECT_RATIO = 16 / 9\n\nconst Video = forwardRef(function Video(\n  { id, video, width, margin, borderRadius }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url)\n  /**\n   * @see https://github.com/cookpete/react-player/issues/1428\n   */\n  const [shouldRenderReactPlayer, setShouldRenderReactPlayer] = useState(false)\n\n  useEffect(() => {\n    setShouldRenderReactPlayer(true)\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'column', overflow: 'hidden' }),\n        width,\n        margin,\n        borderRadius,\n      )}\n    >\n      <div style={{ position: 'relative', paddingTop: `${100 / ASPECT_RATIO}%` }}>\n        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>\n          {shouldRenderReactPlayer && canPlayUrl === true ? (\n            <ReactPlayer\n              {...video}\n              width=\"100%\"\n              height=\"100%\"\n              config={{\n                vimeo: { playerOptions: { background: video != null && !video.controls } },\n                wistia: {\n                  options: {\n                    endVideoBehavior: video != null && video.loop === true ? 'loop' : 'default',\n                  },\n                },\n              }}\n            />\n          ) : (\n            <img width=\"100%\" src={placeholders.video.src} alt=\"Video Placeholder\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n})\n\nexport default Video\n"],"names":["ASPECT_RATIO","Video","forwardRef","id","video","width","margin","borderRadius","ref","canPlayUrl","url","ReactPlayer","canPlay","shouldRenderReactPlayer","setShouldRenderReactPlayer","useState","useEffect","cx","useStyle","display","flexDirection","overflow","position","paddingTop","top","left","right","bottom","vimeo","playerOptions","background","controls","wistia","options","endVideoBehavior","loop","_jsx","placeholders","src"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,eAAe,KAAK;AAEpBC,MAAAA,QAAQC,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAOC;AAAAA,EAAQC;AAAAA,GAC5BC,KACA;AACMC,QAAAA,aAAaL,SAASA,MAAMM,OAAO,QAAQC,YAAYC,QAAQR,MAAMM,GAA1B;AAI3C,QAAA,CAACG,yBAAyBC,8BAA8BC,SAAS,KAAD;AAEtEC,YAAU,MAAM;AACdF,+BAA2B,IAAD;AAAA,EADnB,GAEN,CAFM,CAAA;AAKP,6BAAA,OAAA;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAWG,GACTC,SAAS;AAAA,MAAEC,SAAS;AAAA,MAAQC,eAAe;AAAA,MAAUC,UAAU;AAAA,IAAA,CAAvD,GACRhB,OACAC,QACAC,YAJW;AAAA,IAOb,8BAAA,OAAA;AAAA,MAAK,OAAO;AAAA,QAAEe,UAAU;AAAA,QAAYC,YAAa,GAAE,MAAMvB;AAAAA,MAAzD;AAAA,MACE,8BAAA,OAAA;AAAA,QAAK,OAAO;AAAA,UAAEsB,UAAU;AAAA,UAAYE,KAAK;AAAA,UAAGC,MAAM;AAAA,UAAGC,OAAO;AAAA,UAAGC,QAAQ;AAAA,QAAvE;AAAA,QACGd,UAAAA,2BAA2BJ,eAAe,2BACxC,aAAD,iCACML,QADN;AAAA,UAEE,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAQ;AAAA,YACNwB,OAAO;AAAA,cAAEC,eAAe;AAAA,gBAAEC,YAAY1B,SAAS,QAAQ,CAACA,MAAM2B;AAAAA,cAAtC;AAAA,YADlB;AAAA,YAENC,QAAQ;AAAA,cACNC,SAAS;AAAA,gBACPC,kBAAkB9B,SAAS,QAAQA,MAAM+B,SAAS,OAAO,SAAS;AAAA,cAD3D;AAAA,YADH;AAAA,UAFF;AAAA,QAAA,EAJV,IAcAC,oBAAA,OAAA;AAAA,UAAK,OAAM;AAAA,UAAO,KAAKC,aAAajC,MAAMkC;AAAAA,UAAK,KAAI;AAAA,QAAA,CAAnD;AAAA,MAAA,CAhBJ;AAAA,IAAA,CADF;AAAA,EAAA,CAXJ;AAkCD,CAhDuB;;"}

package/dist/actions.cjs.js

@@ -34,8 +34,7 @@ const ActionTypes = {
   HANDLE_POINTER_MOVE: "HANDLE_POINTER_MOVE",
   API_RESOURCE_FULFILLED: "API_RESOURCE_FULFILLED",
   INTROSPECTED_RESOURCES_FULFILLED: "INTROSPECTED_RESOURCES_FULFILLED",
-  TYPOGRAPHIES_FULFILLED: "TYPOGRAPHIES_FULFILLED",
-  RESTORE_API_RESOURCES_CACHE: "RESTORE_API_RESOURCES_CACHE"
+  TYPOGRAPHIES_FULFILLED: "TYPOGRAPHIES_FULFILLED"
 };
 function init() {
   return { type: ActionTypes.INIT };
@@ -206,9 +205,6 @@ function introspectedResourcesFulfilled(introspectedResourceIds, introspectedRes
     payload: { introspectedResourceIds, introspectedResources }
   };
 }
-function restoreAPIResourcesCache(serializedState) {
-  return { type: ActionTypes.RESTORE_API_RESOURCES_CACHE, payload: { serializedState } };
-}
 exports.ActionTypes = ActionTypes;
 exports.apiResourceFulfilled = apiResourceFulfilled;
 exports.changeApiResource = changeApiResource;
@@ -234,7 +230,6 @@ exports.registerMeasurable = registerMeasurable;
 exports.registerPropControllers = registerPropControllers;
 exports.registerPropControllersHandle = registerPropControllersHandle;
 exports.registerReactComponentEffect = registerReactComponentEffect;
-exports.restoreAPIResourcesCache = restoreAPIResourcesCache;
 exports.scrollDocumentElement = scrollDocumentElement;
 exports.setIsInBuilder = setIsInBuilder;
 exports.typographiesFulfilled = typographiesFulfilled;