@remotion/promo-pages 4.0.374 → 4.0.375

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/design.js

@@ -753,7 +753,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.374", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.375", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1046,6 +1046,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (override) {
     return override;
   }
+  if (typeof window === "undefined" || typeof window.remotion_inputProps === "undefined") {
+    throw new Error("Cannot call `getInputProps()` - window.remotion_inputProps is not set. This API is only available if you are in the Studio, or while you are rendering server-side.");
+  }
   const param = window.remotion_inputProps;
   if (!param) {
     return {};
@@ -1203,7 +1206,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, ResolveCompositionContext, resolveCompositionsRef, needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
-}, PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally", ResolveCompositionConfig = ({ children }) => {
+}, PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally", ResolveCompositionConfigInStudio = ({ children }) => {
   const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState4(null);
   const { compositions, canvasContent, currentCompositionMetadata } = useContext4(CompositionManager);
   const { fastRefreshes, manualRefreshes } = useContext4(NonceContext);
@@ -1499,7 +1502,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
           props: {
             ...composition.defaultProps ?? {},
             ...selectedEditorProps ?? {},
-            ...typeof window === "undefined" || env.isPlayer ? {} : getInputProps() ?? {}
+            ...typeof window === "undefined" || env.isPlayer || !window.remotion_inputProps ? {} : getInputProps() ?? {}
           },
           defaultCodec: null,
           defaultOutName: null,
@@ -1509,6 +1512,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
         }
       };
     }
+    if (!context) {
+      return null;
+    }
     if (!context[composition.id]) {
       return null;
     }
@@ -5422,14 +5428,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
               children: /* @__PURE__ */ jsx28(PrefetchProvider, {
                 children: /* @__PURE__ */ jsx28(SequenceManagerProvider, {
                   children: /* @__PURE__ */ jsx28(RenderAssetManagerProvider, {
-                    children: /* @__PURE__ */ jsx28(ResolveCompositionConfig, {
-                      children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
-                        numberOfAudioTags,
-                        audioLatencyHint,
-                        children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
-                          children: /* @__PURE__ */ jsx28(BufferingProvider, {
-                            children
-                          })
+                    children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
+                      numberOfAudioTags,
+                      audioLatencyHint,
+                      children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
+                        children: /* @__PURE__ */ jsx28(BufferingProvider, {
+                          children
                         })
                       })
                     })
@@ -7129,7 +7133,7 @@ var init_esm = __esm(() => {
     resolveVideoConfig,
     useResolvedVideoConfig,
     resolveCompositionsRef,
-    ResolveCompositionConfig,
+    ResolveCompositionConfigInStudio,
     REMOTION_STUDIO_CONTAINER_ELEMENT,
     RenderAssetManager,
     persistCurrentFrame,
@@ -13004,6 +13008,7 @@ var Outer = ({
   const depth = depthFromHover;
   const frontFace = reduceMatrices([
     translateZ(-depth / 2 + depthFromClick),
+    translateZ(1.1),
     transformation
   ]);
   const centerOriented = reduceMatrices([
@@ -13145,7 +13150,7 @@ var Button = ({ children, className, disabled, depth, loading, ...buttonProps })
     ...buttonProps,
     children: [
       /* @__PURE__ */ jsx43("div", {
-        className: cn(loading && "invisible"),
+        className: cn(loading && "invisible", "inline-flex"),
         children
       }),
       loading ? /* @__PURE__ */ jsx43("div", {
@@ -18066,216 +18071,324 @@ var Triangle2 = (props) => {
 };
 
 // src/components/design.tsx
-import { useCallback as useCallback26, useState as useState34 } from "react";
-import { jsx as jsx39, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useCallback as useCallback27, useState as useState35 } from "react";
+
+// src/components/ManageTeamMembers.tsx
+import React36, { useCallback as useCallback26, useState as useState34 } from "react";
+import { jsx as jsx39, jsxs as jsxs6, Fragment as Fragment6 } from "react/jsx-runtime";
+function generateId() {
+  return Math.random().toString(36).substr(2, 9);
+}
+var initialMembers = [
+  { id: generateId(), name: "alice" },
+  { id: generateId(), name: "bob" }
+];
+var Row = ({ value, onChange, onDelete, disableDelete }) => {
+  return /* @__PURE__ */ jsxs6("div", {
+    className: "flex flex-row gap-2",
+    children: [
+      /* @__PURE__ */ jsx39(Input, {
+        placeholder: "Enter username",
+        className: "w-full block flex-1",
+        value,
+        onChange: (e) => onChange(e.target.value)
+      }),
+      /* @__PURE__ */ jsx39(Button, {
+        className: "rounded-full h-14 w-14 justify-center items-center",
+        onClick: onDelete,
+        type: "button",
+        disabled: disableDelete,
+        "aria-label": "Delete member",
+        children: /* @__PURE__ */ jsx39("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 384 512",
+          className: "h-4",
+          children: /* @__PURE__ */ jsx39("path", {
+            fill: "currentcolor",
+            d: "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"
+          })
+        })
+      })
+    ]
+  });
+};
+var ManageTeamMembers = () => {
+  const [members, setMembers] = useState34(initialMembers);
+  const displayedMembers = [...members, { id: "NEW", name: "" }];
+  const updateMember = useCallback26((idx, value) => {
+    if (idx === members.length) {
+      if (value.trim() !== "") {
+        setMembers((prev) => [...prev, { id: generateId(), name: value }]);
+      }
+    } else {
+      setMembers((prev) => prev.map((m, i) => i === idx ? { ...m, name: value } : m));
+    }
+  }, [members.length]);
+  const deleteMember = useCallback26((idx) => {
+    setMembers((prev) => prev.filter((_, i) => i !== idx));
+  }, []);
+  const [loading, setLoading] = useState34(false);
+  const save = useCallback26(() => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+  }, []);
+  return /* @__PURE__ */ jsxs6(Fragment6, {
+    children: [
+      /* @__PURE__ */ jsx39("h2", {
+        children: "Manage team members"
+      }),
+      /* @__PURE__ */ jsx39("p", {
+        className: "font-brand",
+        children: "Add a new team member to your team."
+      }),
+      displayedMembers.map((member, idx) => /* @__PURE__ */ jsxs6(React36.Fragment, {
+        children: [
+          /* @__PURE__ */ jsx39(Row, {
+            value: member.name,
+            onChange: (val) => updateMember(idx, val),
+            onDelete: idx < members.length ? () => deleteMember(idx) : undefined,
+            disableDelete: idx >= members.length
+          }),
+          /* @__PURE__ */ jsx39("div", {
+            className: "h-2"
+          })
+        ]
+      }, idx)),
+      /* @__PURE__ */ jsx39("div", {
+        className: "h-4"
+      }),
+      /* @__PURE__ */ jsx39("div", {
+        className: "flex flex-row justify-end",
+        children: /* @__PURE__ */ jsx39(Button, {
+          className: "bg-brand text-white",
+          loading,
+          onClick: save,
+          children: "Save"
+        })
+      })
+    ]
+  });
+};
+
+// src/components/design.tsx
+import { jsx as jsx40, jsxs as jsxs8 } from "react/jsx-runtime";
 var Explainer = ({ children }) => {
-  return /* @__PURE__ */ jsx39("div", {
-    children: /* @__PURE__ */ jsx39("div", {
+  return /* @__PURE__ */ jsx40("div", {
+    children: /* @__PURE__ */ jsx40("div", {
       className: "text-gray-500 font-brand text-sm mb-2",
       children
     })
   });
 };
 var DesignPage = () => {
-  const [count3, setCount] = useState34(10);
-  const [active, setActive] = useState34(false);
-  const [submitButtonActive, setSubmitButtonActive] = useState34(true);
-  const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState34(true);
-  const onClick = useCallback26(() => {
+  const [count3, setCount] = useState35(10);
+  const [active, setActive] = useState35(false);
+  const [submitButtonActive, setSubmitButtonActive] = useState35(true);
+  const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState35(true);
+  const onClick = useCallback27(() => {
     setSubmitButtonActive(false);
     setTimeout(() => {
       setSubmitButtonActive(true);
     }, 1000);
   }, []);
-  const onClickPrimary = useCallback26(() => {
+  const onClickPrimary = useCallback27(() => {
     setSubmitButtonPrimaryActive(false);
     setTimeout(() => {
       setSubmitButtonPrimaryActive(true);
     }, 1000);
   }, []);
-  return /* @__PURE__ */ jsx39("div", {
+  const [saving, setSaving] = useState35(false);
+  const save = useCallback27(() => {
+    setSaving(true);
+    setTimeout(() => {
+      setSaving(false);
+    }, 1000);
+  }, []);
+  return /* @__PURE__ */ jsx40("div", {
     className: "bg-[var(--background)] relative",
-    children: /* @__PURE__ */ jsxs6("div", {
+    children: /* @__PURE__ */ jsxs8("div", {
       className: "max-w-[800px] mx-auto pt-10 pb-10 px-4",
       children: [
-        /* @__PURE__ */ jsx39("h1", {
+        /* @__PURE__ */ jsx40("h1", {
           children: "@remotion/design"
         }),
-        /* @__PURE__ */ jsx39("a", {
+        /* @__PURE__ */ jsx40("a", {
           href: "https://github.com/remotion-dev/remotion/blob/main/packages/promo-pages/src/components/design.tsx",
           className: "font-brand text-brand",
           target: "_blank",
           children: "View source"
         }),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39("h2", {
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40("h2", {
           className: "text-brand",
           children: "<Button />"
         }),
-        /* @__PURE__ */ jsx39(Explainer, {
+        /* @__PURE__ */ jsx40(Explainer, {
           children: "Button with label"
         }),
-        /* @__PURE__ */ jsx39(Button, {
+        /* @__PURE__ */ jsx40(Button, {
           children: "Click me"
         }),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39(Explainer, {
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40(Explainer, {
           children: "Disabled"
         }),
-        /* @__PURE__ */ jsxs6(Button, {
+        /* @__PURE__ */ jsxs8(Button, {
           disabled: true,
           children: [
             "Don't",
             " click me"
           ]
         }),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39(Explainer, {
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40(Explainer, {
           children: "Primary"
         }),
-        /* @__PURE__ */ jsx39(Button, {
+        /* @__PURE__ */ jsx40(Button, {
           className: "bg-brand text-white",
           children: "Primary"
         }),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39(Explainer, {
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40(Explainer, {
           children: "Click to disable"
         }),
-        /* @__PURE__ */ jsx39(Button, {
+        /* @__PURE__ */ jsx40(Button, {
           onClick,
           loading: !submitButtonActive,
           children: "Submit"
         }),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39(Explainer, {
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40(Explainer, {
           children: "Click to disable (primary)"
         }),
-        /* @__PURE__ */ jsx39(Button, {
+        /* @__PURE__ */ jsx40(Button, {
           onClick: onClickPrimary,
           className: "bg-brand text-white",
           loading: !submitButtonPrimaryActive,
           children: "Submit"
         }),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39(Explainer, {
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40(Explainer, {
           children: "Loading state"
         }),
-        /* @__PURE__ */ jsx39(Button, {
+        /* @__PURE__ */ jsx40(Button, {
           onClick,
           loading: true,
           children: "Loading"
         }),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39(Explainer, {
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40(Explainer, {
           children: "Loading state (primary)"
         }),
-        /* @__PURE__ */ jsx39(Button, {
+        /* @__PURE__ */ jsx40(Button, {
           onClick,
           className: "bg-brand text-white",
           loading: true,
           children: "Loading"
         }),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39(Explainer, {
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40(Explainer, {
           children: "Rounded"
         }),
-        /* @__PURE__ */ jsx39(Button, {
+        /* @__PURE__ */ jsx40(Button, {
           className: "rounded-full",
           children: "Rounded"
         }),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39(Explainer, {
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40(Explainer, {
           children: "Full width"
         }),
-        /* @__PURE__ */ jsx39(Button, {
+        /* @__PURE__ */ jsx40(Button, {
           className: "w-full",
           children: "Choose a template"
         }),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39(Explainer, {
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40(Explainer, {
           children: "Full width rounded"
         }),
-        /* @__PURE__ */ jsx39(Button, {
+        /* @__PURE__ */ jsx40(Button, {
           className: "w-full rounded-full",
           children: "Fully rounded"
         }),
-        /* @__PURE__ */ jsx39("div", {
+        /* @__PURE__ */ jsx40("div", {
           className: "h-8"
         }),
-        /* @__PURE__ */ jsx39(Explainer, {
+        /* @__PURE__ */ jsx40(Explainer, {
           children: "Circular"
         }),
-        /* @__PURE__ */ jsx39(Button, {
+        /* @__PURE__ */ jsx40(Button, {
           className: "rounded-full bg-brand w-12 h-12"
         }),
-        /* @__PURE__ */ jsx39("div", {
+        /* @__PURE__ */ jsx40("div", {
           className: "h-8"
         }),
-        /* @__PURE__ */ jsx39("h2", {
+        /* @__PURE__ */ jsx40("h2", {
           className: "text-brand",
           children: "<Counter />"
         }),
-        /* @__PURE__ */ jsx39(Counter, {
+        /* @__PURE__ */ jsx40(Counter, {
           count: count3,
           setCount,
           minCount: 1,
           step: 1
         }),
-        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx40("br", {}),
         " ",
-        /* @__PURE__ */ jsx39("h2", {
+        /* @__PURE__ */ jsx40("h2", {
           className: "text-brand",
           children: "<Switch />"
         }),
-        /* @__PURE__ */ jsx39(Switch, {
+        /* @__PURE__ */ jsx40(Switch, {
           active,
           onToggle: () => setActive((e) => !e)
         }),
-        /* @__PURE__ */ jsx39("br", {}),
+        /* @__PURE__ */ jsx40("br", {}),
         " ",
-        /* @__PURE__ */ jsx39("h2", {
+        /* @__PURE__ */ jsx40("h2", {
           className: "text-brand",
           children: "<Card />"
         }),
-        /* @__PURE__ */ jsxs6(Card, {
+        /* @__PURE__ */ jsxs8(Card, {
           className: "px-4 py-4",
           children: [
-            /* @__PURE__ */ jsx39("h3", {
+            /* @__PURE__ */ jsx40("h3", {
               className: "text-text",
               children: "Card"
             }),
-            /* @__PURE__ */ jsx39("div", {
+            /* @__PURE__ */ jsx40("div", {
               className: "text-gray-500",
               children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
             })
           ]
         }),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39("h2", {
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40("h2", {
           className: "text-brand",
           children: "<Select />"
         }),
-        /* @__PURE__ */ jsxs6(Select2, {
+        /* @__PURE__ */ jsxs8(Select2, {
           defaultValue: "option1",
           children: [
-            /* @__PURE__ */ jsx39(SelectTrigger2, {
+            /* @__PURE__ */ jsx40(SelectTrigger2, {
               style: { width: "200px" },
-              children: /* @__PURE__ */ jsx39(SelectValue2, {
+              children: /* @__PURE__ */ jsx40(SelectValue2, {
                 placeholder: "Select an option"
               })
             }),
-            /* @__PURE__ */ jsxs6(SelectContent2, {
+            /* @__PURE__ */ jsxs8(SelectContent2, {
               children: [
-                /* @__PURE__ */ jsx39(SelectItem2, {
+                /* @__PURE__ */ jsx40(SelectItem2, {
                   value: "option1",
                   children: "Option 1"
                 }),
-                /* @__PURE__ */ jsx39(SelectItem2, {
+                /* @__PURE__ */ jsx40(SelectItem2, {
                   value: "option2",
                   children: "Option 2"
                 }),
-                /* @__PURE__ */ jsx39(SelectItem2, {
+                /* @__PURE__ */ jsx40(SelectItem2, {
                   value: "option3",
                   children: "Option 3"
                 })
@@ -18283,42 +18396,47 @@ var DesignPage = () => {
             })
           ]
         }),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39("h2", {
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40("h2", {
           className: "text-brand",
           children: "<Input />"
         }),
-        /* @__PURE__ */ jsx39(Input, {
+        /* @__PURE__ */ jsx40(Input, {
           placeholder: "Enter your email"
         }),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39("h1", {
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40("h1", {
           children: "Example form set"
         }),
-        /* @__PURE__ */ jsx39("br", {}),
-        /* @__PURE__ */ jsx39("h2", {
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40("h2", {
           children: "Change email"
         }),
-        /* @__PURE__ */ jsx39("p", {
+        /* @__PURE__ */ jsx40("p", {
           className: "font-brand",
           children: "A email will be sent to the new email address. You will need to click on the link in the email to confirm the change."
         }),
-        /* @__PURE__ */ jsx39(Input, {
+        /* @__PURE__ */ jsx40(Input, {
           placeholder: "Enter your email",
           className: "w-full block"
         }),
-        /* @__PURE__ */ jsx39("div", {
+        /* @__PURE__ */ jsx40("div", {
           className: "h-2"
         }),
-        /* @__PURE__ */ jsx39("div", {
+        /* @__PURE__ */ jsx40("div", {
           className: "flex flex-row justify-end",
-          children: /* @__PURE__ */ jsx39(Button, {
+          children: /* @__PURE__ */ jsx40(Button, {
             className: "bg-brand text-white",
+            loading: saving,
+            onClick: save,
             children: "Change"
           })
-        })
+        }),
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40("br", {}),
+        /* @__PURE__ */ jsx40(ManageTeamMembers, {})
       ]
     })
   });

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/homepage/Pricing.js

@@ -753,7 +753,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.374", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.375", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1046,6 +1046,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (override) {
     return override;
   }
+  if (typeof window === "undefined" || typeof window.remotion_inputProps === "undefined") {
+    throw new Error("Cannot call `getInputProps()` - window.remotion_inputProps is not set. This API is only available if you are in the Studio, or while you are rendering server-side.");
+  }
   const param = window.remotion_inputProps;
   if (!param) {
     return {};
@@ -1203,7 +1206,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, ResolveCompositionContext, resolveCompositionsRef, needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
-}, PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally", ResolveCompositionConfig = ({ children }) => {
+}, PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally", ResolveCompositionConfigInStudio = ({ children }) => {
   const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState4(null);
   const { compositions, canvasContent, currentCompositionMetadata } = useContext4(CompositionManager);
   const { fastRefreshes, manualRefreshes } = useContext4(NonceContext);
@@ -1499,7 +1502,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
           props: {
             ...composition.defaultProps ?? {},
             ...selectedEditorProps ?? {},
-            ...typeof window === "undefined" || env.isPlayer ? {} : getInputProps() ?? {}
+            ...typeof window === "undefined" || env.isPlayer || !window.remotion_inputProps ? {} : getInputProps() ?? {}
           },
           defaultCodec: null,
           defaultOutName: null,
@@ -1509,6 +1512,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
         }
       };
     }
+    if (!context) {
+      return null;
+    }
     if (!context[composition.id]) {
       return null;
     }
@@ -5422,14 +5428,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
               children: /* @__PURE__ */ jsx28(PrefetchProvider, {
                 children: /* @__PURE__ */ jsx28(SequenceManagerProvider, {
                   children: /* @__PURE__ */ jsx28(RenderAssetManagerProvider, {
-                    children: /* @__PURE__ */ jsx28(ResolveCompositionConfig, {
-                      children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
-                        numberOfAudioTags,
-                        audioLatencyHint,
-                        children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
-                          children: /* @__PURE__ */ jsx28(BufferingProvider, {
-                            children
-                          })
+                    children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
+                      numberOfAudioTags,
+                      audioLatencyHint,
+                      children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
+                        children: /* @__PURE__ */ jsx28(BufferingProvider, {
+                          children
                         })
                       })
                     })
@@ -7129,7 +7133,7 @@ var init_esm = __esm(() => {
     resolveVideoConfig,
     useResolvedVideoConfig,
     resolveCompositionsRef,
-    ResolveCompositionConfig,
+    ResolveCompositionConfigInStudio,
     REMOTION_STUDIO_CONTAINER_ELEMENT,
     RenderAssetManager,
     persistCurrentFrame,
@@ -13004,6 +13008,7 @@ var Outer = ({
   const depth = depthFromHover;
   const frontFace = reduceMatrices([
     translateZ(-depth / 2 + depthFromClick),
+    translateZ(1.1),
     transformation
   ]);
   const centerOriented = reduceMatrices([
@@ -13145,7 +13150,7 @@ var Button = ({ children, className, disabled, depth, loading, ...buttonProps })
     ...buttonProps,
     children: [
       /* @__PURE__ */ jsx43("div", {
-        className: cn(loading && "invisible"),
+        className: cn(loading && "invisible", "inline-flex"),
         children
       }),
       loading ? /* @__PURE__ */ jsx43("div", {