@remotion/promo-pages 4.0.473 → 4.0.474

package/dist/Homepage.js

@@ -2332,7 +2332,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.473";
+var VERSION = "4.0.474";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2808,11 +2808,17 @@ var SequenceManager = React11.createContext({
   },
   sequences: []
 });
+var SequenceManagerRefContext = React11.createContext({
+  current: []
+});
 var makeSequencePropsSubscriptionKey = (key) => {
   return `${key.nodePath.join(".")}.${key.sequenceKeys.join(".")}.${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
 };
-var VisualModeCodeValuesContext = React11.createContext({
-  codeValues: {}
+var VisualModePropStatusesContext = React11.createContext({
+  propStatuses: {}
+});
+var VisualModePropStatusesRefContext = React11.createContext({
+  current: {}
 });
 var VisualModeDragOverridesContext = React11.createContext({
   getDragOverrides: () => {
@@ -2835,18 +2841,22 @@ var VisualModeSettersContext = React11.createContext({
   clearEffectDragOverrides: () => {
     throw new Error("VisualModeSettersContext not initialized");
   },
-  setCodeValues: () => {
+  setPropStatuses: () => {
     throw new Error("VisualModeSettersContext not initialized");
   }
 });
 var effectDragOverridesKey = (nodePath, effectIndex) => `${makeSequencePropsSubscriptionKey(nodePath)}.effects.${effectIndex}`;
 var SequenceManagerProvider = ({ children }) => {
   const [sequences, setSequences] = useState3([]);
+  const sequencesRef = useRef4(sequences);
+  sequencesRef.current = sequences;
   const [dragOverrides, setControlOverrides] = useState3({});
   const controlOverridesRef = useRef4(dragOverrides);
   controlOverridesRef.current = dragOverrides;
   const [effectDragOverridesState, setEffectDragOverridesState] = useState3({});
-  const [codeValues, setCodeValuesMapState] = useState3({});
+  const [propStatuses, setPropStatusesMapState] = useState3({});
+  const propStatusesRef = useRef4(propStatuses);
+  propStatusesRef.current = propStatuses;
   const setDragOverrides = useCallback5((nodePath, key, value) => {
     setControlOverrides((prev) => ({
       ...prev,
@@ -2890,8 +2900,8 @@ var SequenceManagerProvider = ({ children }) => {
       return next;
     });
   }, []);
-  const setCodeValues = useCallback5((nodePath, values) => {
-    setCodeValuesMapState((prev) => {
+  const setPropStatuses = useCallback5((nodePath, values) => {
+    setPropStatusesMapState((prev) => {
       const key = makeSequencePropsSubscriptionKey(nodePath);
       const prevKey = prev[key];
       const newKey = values(prevKey);
@@ -2922,11 +2932,11 @@ var SequenceManagerProvider = ({ children }) => {
   const getEffectDragOverrides = useCallback5((nodePath, effectIndex) => {
     return effectDragOverridesState[effectDragOverridesKey(nodePath, effectIndex)] ?? {};
   }, [effectDragOverridesState]);
-  const codeValuesContext = useMemo12(() => {
+  const propStatusesContext = useMemo12(() => {
     return {
-      codeValues
+      propStatuses
     };
-  }, [codeValues]);
+  }, [propStatuses]);
   const dragOverridesContext = useMemo12(() => {
     return {
       getDragOverrides,
@@ -2939,24 +2949,30 @@ var SequenceManagerProvider = ({ children }) => {
       clearDragOverrides,
       setEffectDragOverrides,
       clearEffectDragOverrides,
-      setCodeValues
+      setPropStatuses
     };
   }, [
     setDragOverrides,
     clearDragOverrides,
     setEffectDragOverrides,
     clearEffectDragOverrides,
-    setCodeValues
+    setPropStatuses
   ]);
-  return /* @__PURE__ */ jsx10(SequenceManager.Provider, {
-    value: sequenceContext,
-    children: /* @__PURE__ */ jsx10(VisualModeCodeValuesContext.Provider, {
-      value: codeValuesContext,
-      children: /* @__PURE__ */ jsx10(VisualModeDragOverridesContext.Provider, {
-        value: dragOverridesContext,
-        children: /* @__PURE__ */ jsx10(VisualModeSettersContext.Provider, {
-          value: settersContext,
-          children
+  return /* @__PURE__ */ jsx10(SequenceManagerRefContext.Provider, {
+    value: sequencesRef,
+    children: /* @__PURE__ */ jsx10(SequenceManager.Provider, {
+      value: sequenceContext,
+      children: /* @__PURE__ */ jsx10(VisualModePropStatusesRefContext.Provider, {
+        value: propStatusesRef,
+        children: /* @__PURE__ */ jsx10(VisualModePropStatusesContext.Provider, {
+          value: propStatusesContext,
+          children: /* @__PURE__ */ jsx10(VisualModeDragOverridesContext.Provider, {
+            value: dragOverridesContext,
+            children: /* @__PURE__ */ jsx10(VisualModeSettersContext.Provider, {
+              value: settersContext,
+              children
+            })
+          })
         })
       })
     })
@@ -4126,7 +4142,7 @@ var resolveDragOverrideValue = ({
   return { type: "resolved", value: interpolated };
 };
 var getEffectiveVisualModeValue = ({
-  codeValue,
+  propStatus,
   dragOverrideValue,
   defaultValue,
   frame = null,
@@ -4139,16 +4155,19 @@ var getEffectiveVisualModeValue = ({
   if (dragOverride.type === "resolved" && dragOverride.value !== undefined) {
     return dragOverride.value;
   }
-  if (codeValue.status === "keyframed" && frame !== null) {
-    return interpolateKeyframedStatus({
-      frame,
-      status: codeValue
-    });
+  if (propStatus.status === "keyframed") {
+    if (frame !== null) {
+      return interpolateKeyframedStatus({
+        frame,
+        status: propStatus
+      });
+    }
+    return shouldResortToDefaultValueIfUndefined ? defaultValue : undefined;
   }
-  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
+  if (propStatus.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
     return defaultValue;
   }
-  return codeValue.codeValue;
+  return propStatus.codeValue;
 };
 var OverrideIdsToNodePathsGettersContext = createContext16({
   overrideIdToNodePathMappings: {}
@@ -4160,18 +4179,18 @@ var OverrideIdsToNodePathsSettersContext = createContext16({
 });
 var mergeOverrides = ({
   descriptor,
-  codeOverrides,
+  propStatusOverrides,
   dragOverrides,
   frame
 }) => {
-  if (!codeOverrides && !dragOverrides) {
+  if (!propStatusOverrides && !dragOverrides) {
     return { params: descriptor.params, effectKey: descriptor.effectKey };
   }
   const merged = {
     ...descriptor.params
   };
-  if (codeOverrides) {
-    for (const [key, value] of Object.entries(codeOverrides)) {
+  if (propStatusOverrides) {
+    for (const [key, value] of Object.entries(propStatusOverrides)) {
       if (value !== undefined) {
         merged[key] = value;
       }
@@ -4193,16 +4212,27 @@ var mergeOverrides = ({
     effectKey: descriptor.definition.calculateKey(merged)
   };
 };
-var extractCodeOverrides = (propStatus) => {
+var resolvePropStatusOverrides = (propStatus, frame) => {
   if (!propStatus) {
     return null;
   }
   const out = {};
   let hasAny = false;
   for (const [key, status] of Object.entries(propStatus)) {
-    if (status.status !== "computed") {
+    if (status.status === "static") {
       out[key] = status.codeValue;
       hasAny = true;
+      continue;
+    }
+    if (status.status === "keyframed") {
+      const value = interpolateKeyframedStatus({
+        frame,
+        status
+      });
+      if (value !== null) {
+        out[key] = value;
+        hasAny = true;
+      }
     }
   }
   return hasAny ? out : null;
@@ -4218,12 +4248,12 @@ var useMemoizedEffectDefinitions = (effects) => {
   previousRef.current = definitions;
   return definitions;
 };
-var getEffectCodeValuesCtx = ({
-  codeValues,
+var getEffectPropStatusesCtx = ({
+  propStatuses,
   nodePath,
   effectIndex
 }) => {
-  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
+  const status = propStatuses[makeSequencePropsSubscriptionKey(nodePath)];
   if (!status) {
     return { type: "cannot-update-sequence", reason: "not-found" };
   }
@@ -4239,8 +4269,8 @@ var getEffectCodeValuesCtx = ({
   }
   return { type: "can-update-effect", props: effect.props };
 };
-var getCodeValuesCtx = (codeValues, nodePath) => {
-  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
+var getPropStatusesCtx = (propStatuses, nodePath) => {
+  const status = propStatuses[makeSequencePropsSubscriptionKey(nodePath)];
   if (!status) {
     return;
   }
@@ -4254,7 +4284,7 @@ var useMemoizedEffects = ({
   overrideId
 }) => {
   const previousRef = useRef5(null);
-  const { codeValues } = useContext15(VisualModeCodeValuesContext);
+  const { propStatuses } = useContext15(VisualModePropStatusesContext);
   const { getEffectDragOverrides } = useContext15(VisualModeDragOverridesContext);
   const frame = useCurrentFrame();
   const { overrideIdToNodePathMappings } = useContext15(OverrideIdsToNodePathsGettersContext);
@@ -4268,17 +4298,17 @@ var useMemoizedEffects = ({
         effectKey: descriptor.effectKey
       };
     }
-    const effectStatus = getEffectCodeValuesCtx({
-      codeValues,
+    const effectStatus = getEffectPropStatusesCtx({
+      propStatuses,
       nodePath,
       effectIndex: index
     });
-    const codeOverrides = effectStatus.type === "can-update-effect" ? extractCodeOverrides(effectStatus.props) : null;
+    const propStatusOverrides = effectStatus.type === "can-update-effect" ? resolvePropStatusOverrides(effectStatus.props, frame) : null;
     const dragOverridesMap = getEffectDragOverrides(nodePath, index);
     const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
     const { params, effectKey } = mergeOverrides({
       descriptor,
-      codeOverrides,
+      propStatusOverrides,
       dragOverrides,
       frame
     });
@@ -4430,15 +4460,15 @@ var computeEffectiveSchemaValuesDotNotation = ({
   const merged = {};
   const propsToDelete = new Set;
   for (const key of Object.keys(currentValue)) {
-    const codeValueStatus = propStatus?.[key] ?? null;
+    const status = propStatus?.[key] ?? null;
     const field = findFieldInSchema(schema, key);
     if (field?.type === "hidden") {
       continue;
     }
     let value;
-    if (codeValueStatus === null) {
+    if (status === null) {
       value = currentValue[key];
-    } else if (isKeyframedStatus(codeValueStatus)) {
+    } else if (isKeyframedStatus(status)) {
       if (field?.type === "array" || field?.keyframable === false) {
         value = currentValue[key];
       } else {
@@ -4451,18 +4481,18 @@ var computeEffectiveSchemaValuesDotNotation = ({
         } else if (frame !== null) {
           const interpolated = interpolateKeyframedStatus({
             frame,
-            status: codeValueStatus
+            status
           });
           value = interpolated ?? currentValue[key];
         } else {
           value = currentValue[key];
         }
       }
-    } else if (codeValueStatus.status === "computed") {
+    } else if (status.status === "computed") {
       value = currentValue[key];
     } else {
       value = getEffectiveVisualModeValue({
-        codeValue: codeValueStatus,
+        propStatus: status,
         dragOverrideValue: overrideValues[key],
         defaultValue: field?.default,
         frame,
@@ -4554,7 +4584,7 @@ var wrapInSchema = ({
         ref
       });
     }
-    const { codeValues } = useContext16(VisualModeCodeValuesContext);
+    const { propStatuses } = useContext16(VisualModePropStatusesContext);
     const { getDragOverrides } = useContext16(VisualModeDragOverridesContext);
     const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
@@ -4593,14 +4623,14 @@ var wrapInSchema = ({
         schema,
         currentValue: currentRuntimeValueDotNotation,
         overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
-        propStatus: nodePath === null ? undefined : getCodeValuesCtx(codeValues, nodePath),
+        propStatus: nodePath === null ? undefined : getPropStatusesCtx(propStatuses, nodePath),
         frame
       });
     }, [
       currentRuntimeValueDotNotation,
       getDragOverrides,
       nodePath,
-      codeValues,
+      propStatuses,
       frame
     ]);
     const activeKeys = selectActiveKeys(schema, valuesDotNotation);
@@ -5838,7 +5868,7 @@ var calculateMediaDuration = ({
     duration -= trimBefore;
   }
   const actualDuration = duration / playbackRate;
-  return Math.floor(actualDuration);
+  return Number(actualDuration.toFixed(10));
 };
 var LoopContext = createContext18(null);
 var useLoop = () => {
@@ -10960,6 +10990,8 @@ function useRemotionContexts() {
   const resolveCompositionContext = React38.useContext(ResolveCompositionContext);
   const renderAssetManagerContext = React38.useContext(RenderAssetManager);
   const sequenceManagerContext = React38.useContext(SequenceManager);
+  const sequenceManagerRefContext = React38.useContext(SequenceManagerRefContext);
+  const visualModePropStatusesRefContext = React38.useContext(VisualModePropStatusesRefContext);
   const bufferManagerContext = React38.useContext(BufferingContextReact);
   const logLevelContext = React38.useContext(LogLevelContext);
   return useMemo37(() => ({
@@ -10973,6 +11005,8 @@ function useRemotionContexts() {
     resolveCompositionContext,
     renderAssetManagerContext,
     sequenceManagerContext,
+    sequenceManagerRefContext,
+    visualModePropStatusesRefContext,
     bufferManagerContext,
     logLevelContext
   }), [
@@ -10986,6 +11020,8 @@ function useRemotionContexts() {
     resolveCompositionContext,
     renderAssetManagerContext,
     sequenceManagerContext,
+    sequenceManagerRefContext,
+    visualModePropStatusesRefContext,
     bufferManagerContext,
     logLevelContext
   ]);
@@ -11002,21 +11038,27 @@ var RemotionContextProvider = (props2) => {
           value: contexts.preloadContext,
           children: /* @__PURE__ */ jsx35(CompositionManager.Provider, {
             value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx35(SequenceManager.Provider, {
-              value: contexts.sequenceManagerContext,
-              children: /* @__PURE__ */ jsx35(RenderAssetManager.Provider, {
-                value: contexts.renderAssetManagerContext,
-                children: /* @__PURE__ */ jsx35(ResolveCompositionContext.Provider, {
-                  value: contexts.resolveCompositionContext,
-                  children: /* @__PURE__ */ jsx35(TimelineContext.Provider, {
-                    value: contexts.timelineContext,
-                    children: /* @__PURE__ */ jsx35(SetTimelineContext.Provider, {
-                      value: contexts.setTimelineContext,
-                      children: /* @__PURE__ */ jsx35(SequenceContext.Provider, {
-                        value: contexts.sequenceContext,
-                        children: /* @__PURE__ */ jsx35(BufferingContextReact.Provider, {
-                          value: contexts.bufferManagerContext,
-                          children
+            children: /* @__PURE__ */ jsx35(SequenceManagerRefContext.Provider, {
+              value: contexts.sequenceManagerRefContext,
+              children: /* @__PURE__ */ jsx35(SequenceManager.Provider, {
+                value: contexts.sequenceManagerContext,
+                children: /* @__PURE__ */ jsx35(VisualModePropStatusesRefContext.Provider, {
+                  value: contexts.visualModePropStatusesRefContext,
+                  children: /* @__PURE__ */ jsx35(RenderAssetManager.Provider, {
+                    value: contexts.renderAssetManagerContext,
+                    children: /* @__PURE__ */ jsx35(ResolveCompositionContext.Provider, {
+                      value: contexts.resolveCompositionContext,
+                      children: /* @__PURE__ */ jsx35(TimelineContext.Provider, {
+                        value: contexts.timelineContext,
+                        children: /* @__PURE__ */ jsx35(SetTimelineContext.Provider, {
+                          value: contexts.setTimelineContext,
+                          children: /* @__PURE__ */ jsx35(SequenceContext.Provider, {
+                            value: contexts.sequenceContext,
+                            children: /* @__PURE__ */ jsx35(BufferingContextReact.Provider, {
+                              value: contexts.bufferManagerContext,
+                              children
+                            })
+                          })
                         })
                       })
                     })
@@ -11047,10 +11089,12 @@ var Internals = {
   VideoForPreview,
   CompositionManager,
   CompositionSetters,
-  VisualModeCodeValuesContext,
+  VisualModePropStatusesContext,
+  VisualModePropStatusesRefContext,
   VisualModeDragOverridesContext,
   VisualModeSettersContext,
   SequenceManager,
+  SequenceManagerRefContext,
   SequenceStackTracesUpdateContext,
   wrapInSchema,
   sequenceSchema,
@@ -11169,8 +11213,8 @@ var Internals = {
   OverrideIdsToNodePathsSettersContext,
   findPropsToDelete,
   makeSequencePropsSubscriptionKey,
-  getCodeValuesCtx,
-  getEffectCodeValuesCtx,
+  getPropStatusesCtx,
+  getEffectPropStatusesCtx,
   hiddenField,
   durationInFramesField,
   fromField
@@ -12528,7 +12572,7 @@ var ExpertsPageContent = ({ Link }) => {
 import * as React23 from "react";
 import * as React8 from "react";
 import { Fragment as Fragment22, jsx as jsx45 } from "react/jsx-runtime";
-import React52, { useCallback as useCallback25, useRef as useRef28, useState as useState22 } from "react";
+import React52, { useCallback as useCallback25, useRef as useRef29, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -16636,7 +16680,7 @@ var PathInternals = {
 };
 
 // ../shapes/dist/esm/index.mjs
-import React3, { useMemo as useMemo42 } from "react";
+import React3, { useCallback as useCallback24, useMemo as useMemo42, useRef as useRef28 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx43, jsxs as jsxs5 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
@@ -16648,6 +16692,141 @@ import { jsx as jsx72 } from "react/jsx-runtime";
 import { jsx as jsx82 } from "react/jsx-runtime";
 import { jsx as jsx92 } from "react/jsx-runtime";
 import { jsx as jsx102 } from "react/jsx-runtime";
+var unitDir = (from, to) => {
+  const dx = to[0] - from[0];
+  const dy = to[1] - from[1];
+  const len = Math.sqrt(dx * dx + dy * dy);
+  return len === 0 ? [0, 0] : [dx / len, dy / len];
+};
+var buildArrowPath = (points, roundedIndices, cornerRadius) => {
+  const n = points.length;
+  if (cornerRadius === 0) {
+    return [
+      { type: "M", x: points[0][0], y: points[0][1] },
+      ...points.slice(1).map(([x, y]) => ({ type: "L", x, y })),
+      { type: "Z" }
+    ];
+  }
+  const d0 = unitDir(points[0], points[1]);
+  const startX = points[0][0] + d0[0] * cornerRadius;
+  const startY = points[0][1] + d0[1] * cornerRadius;
+  const instrs = [{ type: "M", x: startX, y: startY }];
+  for (let i = 1;i < n; i++) {
+    const curr = points[i];
+    if (roundedIndices.has(i)) {
+      const prev = points[i - 1];
+      const next = points[(i + 1) % n];
+      const dIn = unitDir(prev, curr);
+      const dOut = unitDir(curr, next);
+      instrs.push({
+        type: "L",
+        x: curr[0] - dIn[0] * cornerRadius,
+        y: curr[1] - dIn[1] * cornerRadius
+      }, {
+        type: "C",
+        cp1x: curr[0],
+        cp1y: curr[1],
+        cp2x: curr[0],
+        cp2y: curr[1],
+        x: curr[0] + dOut[0] * cornerRadius,
+        y: curr[1] + dOut[1] * cornerRadius
+      });
+    } else {
+      instrs.push({ type: "L", x: curr[0], y: curr[1] });
+    }
+  }
+  const dIn0 = unitDir(points[n - 1], points[0]);
+  instrs.push({
+    type: "L",
+    x: points[0][0] - dIn0[0] * cornerRadius,
+    y: points[0][1] - dIn0[1] * cornerRadius
+  }, {
+    type: "C",
+    cp1x: points[0][0],
+    cp1y: points[0][1],
+    cp2x: points[0][0],
+    cp2y: points[0][1],
+    x: startX,
+    y: startY
+  }, { type: "Z" });
+  return instrs;
+};
+var makeArrow = ({
+  length: length2 = 300,
+  headWidth = 185,
+  headLength = 120,
+  shaftWidth = 80,
+  direction = "right",
+  cornerRadius = 0
+}) => {
+  if (length2 <= 0 || headWidth <= 0 || headLength <= 0 || shaftWidth <= 0) {
+    throw new Error('All dimension parameters ("length", "headWidth", "headLength", "shaftWidth") must be positive numbers');
+  }
+  if (headWidth < shaftWidth) {
+    throw new Error(`"headWidth" must be greater than or equal to "shaftWidth", got headWidth=${headWidth} and shaftWidth=${shaftWidth}`);
+  }
+  if (headLength > length2) {
+    throw new Error(`"headLength" must be less than or equal to "length", got headLength=${headLength} and length=${length2}`);
+  }
+  const shaftTop = (headWidth - shaftWidth) / 2;
+  const shaftBottom = shaftTop + shaftWidth;
+  const shaftEnd = length2 - headLength;
+  const rightPoints = [
+    [0, shaftTop],
+    [shaftEnd, shaftTop],
+    [shaftEnd, 0],
+    [length2, headWidth / 2],
+    [shaftEnd, headWidth],
+    [shaftEnd, shaftBottom],
+    [0, shaftBottom]
+  ];
+  let points;
+  let width;
+  let height;
+  if (direction === "right") {
+    points = rightPoints;
+    width = length2;
+    height = headWidth;
+  } else if (direction === "left") {
+    points = rightPoints.map(([x, y]) => [length2 - x, y]);
+    width = length2;
+    height = headWidth;
+  } else if (direction === "down") {
+    points = [
+      [shaftTop, 0],
+      [shaftBottom, 0],
+      [shaftBottom, shaftEnd],
+      [headWidth, shaftEnd],
+      [headWidth / 2, length2],
+      [0, shaftEnd],
+      [shaftTop, shaftEnd]
+    ];
+    width = headWidth;
+    height = length2;
+  } else {
+    points = [
+      [shaftTop, length2],
+      [shaftBottom, length2],
+      [shaftBottom, headLength],
+      [headWidth, headLength],
+      [headWidth / 2, 0],
+      [0, headLength],
+      [shaftTop, headLength]
+    ];
+    width = headWidth;
+    height = length2;
+  }
+  const roundedIndices = direction === "right" || direction === "left" ? new Set([0, 2, 3, 4, 6]) : new Set([0, 1, 3, 4, 5]);
+  const instructions = buildArrowPath(points, roundedIndices, cornerRadius);
+  const path = serializeInstructions(instructions);
+  return {
+    path,
+    instructions,
+    width,
+    height,
+    transformOrigin: `${width / 2} ${height / 2}`
+  };
+};
 var doesReactSupportTransformOriginProperty = (version2) => {
   if (version2.includes("canary") || version2.includes("experimental")) {
     const last8Chars = parseInt(version2.slice(-8), 10);
@@ -16657,6 +16836,8 @@ var doesReactSupportTransformOriginProperty = (version2) => {
   return major > 18;
 };
 var RenderSvg = ({
+  defaultName,
+  documentationLink,
   width,
   height,
   path,
@@ -16664,7 +16845,16 @@ var RenderSvg = ({
   pathStyle,
   transformOrigin,
   debug,
+  effects = [],
   instructions,
+  pixelDensity,
+  durationInFrames,
+  from,
+  hidden,
+  name,
+  showInTimeline,
+  _experimentalControls: controls,
+  stack,
   ...props
 }) => {
   const actualStyle = useMemo42(() => {
@@ -16679,13 +16869,23 @@ var RenderSvg = ({
       ...pathStyle ?? {}
     };
   }, [pathStyle]);
+  const outlineRef = useRef28(null);
+  const setSvgRef = useCallback24((node) => {
+    outlineRef.current = node;
+  }, []);
+  const setCanvasRef = useCallback24((canvas) => {
+    outlineRef.current = canvas;
+  }, []);
+  const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects);
+  const videoConfig = Internals.useUnsafeVideoConfig();
   const reactSupportsTransformOrigin = doesReactSupportTransformOriginProperty(version);
-  return /* @__PURE__ */ jsxs5("svg", {
+  const svg = /* @__PURE__ */ jsxs5("svg", {
+    ref: effects.length === 0 || !videoConfig ? setSvgRef : undefined,
     width,
     height,
     viewBox: `0 0 ${width} ${height}`,
     xmlns: "http://www.w3.org/2000/svg",
-    style: actualStyle,
+    style: effects.length === 0 || !videoConfig ? actualStyle : { overflow: "visible" },
     children: [
       /* @__PURE__ */ jsx43("path", {
         ...reactSupportsTransformOrigin ? {
@@ -16740,7 +16940,160 @@ var RenderSvg = ({
       }) : null
     ]
   });
+  const content = effects.length === 0 ? svg : /* @__PURE__ */ jsx43(HtmlInCanvas, {
+    ref: setCanvasRef,
+    width: Math.ceil(width),
+    height: Math.ceil(height),
+    effects,
+    pixelDensity,
+    showInTimeline: false,
+    style: actualStyle,
+    _experimentalControls: controls,
+    children: svg
+  });
+  const stackProps = stack === undefined ? null : { stack };
+  if (!videoConfig) {
+    return svg;
+  }
+  return /* @__PURE__ */ jsx43(Sequence, {
+    layout: "none",
+    from,
+    hidden,
+    showInTimeline,
+    _experimentalControls: controls,
+    _remotionInternalEffects: memoizedEffectDefinitions,
+    durationInFrames,
+    name: name ?? defaultName,
+    _remotionInternalRefForOutline: outlineRef,
+    _remotionInternalDocumentationLink: name === undefined ? documentationLink : undefined,
+    ...stackProps,
+    children: content
+  });
+};
+var numberField = ({
+  defaultValue,
+  description,
+  hiddenFromList = false,
+  max,
+  min,
+  step = 1
+}) => {
+  return {
+    type: "number",
+    default: defaultValue,
+    description,
+    hiddenFromList,
+    max,
+    min,
+    step
+  };
+};
+var booleanField = ({
+  defaultValue,
+  description
+}) => {
+  return {
+    type: "boolean",
+    default: defaultValue,
+    description
+  };
+};
+var colorField = ({
+  defaultValue,
+  description
+}) => {
+  return {
+    type: "color",
+    default: defaultValue,
+    description
+  };
+};
+var enumField = ({
+  defaultValue,
+  description,
+  variants
+}) => {
+  return {
+    type: "enum",
+    default: defaultValue,
+    description,
+    variants: Object.fromEntries(variants.map((variant) => [variant, {}]))
+  };
 };
+var makeShapeSchema = (shapeFields) => {
+  return {
+    from: Internals.sequenceSchema.from,
+    durationInFrames: Internals.sequenceSchema.durationInFrames,
+    ...shapeFields,
+    fill: colorField({
+      defaultValue: "#0b84ff",
+      description: "Fill"
+    }),
+    ...Internals.sequenceVisualStyleSchema,
+    hidden: Internals.sequenceSchema.hidden
+  };
+};
+var arrowSchema = makeShapeSchema({
+  length: numberField({
+    defaultValue: 300,
+    description: "Length",
+    min: 0
+  }),
+  headWidth: numberField({
+    defaultValue: 185,
+    description: "Head Width",
+    min: 0
+  }),
+  headLength: numberField({
+    defaultValue: 120,
+    description: "Head Length",
+    min: 0
+  }),
+  shaftWidth: numberField({
+    defaultValue: 80,
+    description: "Shaft Width",
+    min: 0
+  }),
+  direction: enumField({
+    defaultValue: "right",
+    description: "Direction",
+    variants: ["right", "left", "up", "down"]
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var ArrowInner = ({
+  length: length2,
+  headWidth,
+  headLength,
+  shaftWidth,
+  direction,
+  cornerRadius,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx210(RenderSvg, {
+    defaultName: "<Arrow>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/arrow",
+    ...makeArrow({
+      length: length2,
+      headWidth,
+      headLength,
+      shaftWidth,
+      direction,
+      cornerRadius
+    }),
+    ...props
+  });
+};
+var Arrow = Internals.wrapInSchema({
+  Component: ArrowInner,
+  schema: arrowSchema,
+  supportsEffects: true
+});
+Internals.addSequenceStackTraces(Arrow);
 var makeCircle = ({ radius }) => {
   const instructions = [
     {
@@ -16781,6 +17134,83 @@ var makeCircle = ({ radius }) => {
     transformOrigin: `${radius} ${radius}`
   };
 };
+var circleSchema = makeShapeSchema({
+  radius: numberField({
+    defaultValue: 100,
+    description: "Radius",
+    min: 0
+  })
+});
+var CircleInner = ({ radius, ...props }) => {
+  return /* @__PURE__ */ jsx310(RenderSvg, {
+    defaultName: "<Circle>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/circle",
+    ...makeCircle({ radius }),
+    ...props
+  });
+};
+var Circle = Internals.wrapInSchema({
+  Component: CircleInner,
+  schema: circleSchema,
+  supportsEffects: true
+});
+Internals.addSequenceStackTraces(Circle);
+var makeEllipse = ({ rx, ry }) => {
+  const instructions = [
+    {
+      type: "M",
+      x: rx,
+      y: 0
+    },
+    {
+      type: "a",
+      rx,
+      ry,
+      xAxisRotation: 0,
+      largeArcFlag: true,
+      sweepFlag: false,
+      dx: 1,
+      dy: 0
+    },
+    {
+      type: "Z"
+    }
+  ];
+  const path = serializeInstructions(instructions);
+  return {
+    width: rx * 2,
+    height: ry * 2,
+    path,
+    instructions,
+    transformOrigin: `${rx} ${ry}`
+  };
+};
+var ellipseSchema = makeShapeSchema({
+  rx: numberField({
+    defaultValue: 100,
+    description: "X Radius",
+    min: 0
+  }),
+  ry: numberField({
+    defaultValue: 50,
+    description: "Y Radius",
+    min: 0
+  })
+});
+var EllipseInner = ({ rx, ry, ...props }) => {
+  return /* @__PURE__ */ jsx44(RenderSvg, {
+    defaultName: "<Ellipse>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/ellipse",
+    ...makeEllipse({ rx, ry }),
+    ...props
+  });
+};
+var Ellipse = Internals.wrapInSchema({
+  Component: EllipseInner,
+  schema: ellipseSchema,
+  supportsEffects: true
+});
+Internals.addSequenceStackTraces(Ellipse);
 var makeHeart = ({
   height,
   aspectRatio = 1.1,
@@ -16870,7 +17300,30 @@ var makeHeart = ({
     instructions
   };
 };
-var Heart = ({
+var heartSchema = makeShapeSchema({
+  height: numberField({
+    defaultValue: 100,
+    description: "Height",
+    min: 0
+  }),
+  aspectRatio: numberField({
+    defaultValue: 1.1,
+    description: "Aspect Ratio",
+    min: 0,
+    step: 0.01
+  }),
+  bottomRoundnessAdjustment: numberField({
+    defaultValue: 0,
+    description: "Bottom Roundness Adjustment",
+    step: 0.01
+  }),
+  depthAdjustment: numberField({
+    defaultValue: 0,
+    description: "Depth Adjustment",
+    step: 0.01
+  })
+});
+var HeartInner = ({
   aspectRatio,
   height,
   bottomRoundnessAdjustment = 0,
@@ -16878,6 +17331,8 @@ var Heart = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx52(RenderSvg, {
+    defaultName: "<Heart>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/heart",
     ...makeHeart({
       aspectRatio,
       height,
@@ -16887,6 +17342,12 @@ var Heart = ({
     ...props
   });
 };
+var Heart = Internals.wrapInSchema({
+  Component: HeartInner,
+  schema: heartSchema,
+  supportsEffects: true
+});
+Internals.addSequenceStackTraces(Heart);
 var getCoord = ({
   counterClockwise,
   actualProgress,
@@ -16992,6 +17453,54 @@ var makePie = ({
     transformOrigin: `${radius} ${radius}`
   };
 };
+var pieSchema = makeShapeSchema({
+  radius: numberField({
+    defaultValue: 100,
+    description: "Radius",
+    min: 0
+  }),
+  progress: numberField({
+    defaultValue: 0.5,
+    description: "Progress",
+    max: 1,
+    min: 0,
+    step: 0.01
+  }),
+  closePath: booleanField({
+    defaultValue: true,
+    description: "Close Path"
+  }),
+  counterClockwise: booleanField({
+    defaultValue: false,
+    description: "Counter Clockwise"
+  }),
+  rotation: numberField({
+    defaultValue: 0,
+    description: "Rotation",
+    step: 0.01
+  })
+});
+var PieInner = ({
+  radius,
+  progress,
+  closePath,
+  counterClockwise,
+  rotation,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx62(RenderSvg, {
+    defaultName: "<Pie>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/pie",
+    ...makePie({ radius, progress, closePath, counterClockwise, rotation }),
+    ...props
+  });
+};
+var Pie = Internals.wrapInSchema({
+  Component: PieInner,
+  schema: pieSchema,
+  supportsEffects: true
+});
+Internals.addSequenceStackTraces(Pie);
 var shortenVector = (vector, radius) => {
   const [x, y] = vector;
   const currentLength = Math.sqrt(x * x + y * y);
@@ -17116,6 +17625,104 @@ var joinPoints = (points, {
     ];
   }).flat(1);
 };
+function polygon({
+  points,
+  radius,
+  centerX,
+  centerY,
+  cornerRadius,
+  edgeRoundness
+}) {
+  const degreeIncrement = Math.PI * 2 / points;
+  const d = new Array(points).fill(0).map((_, i) => {
+    const angle = degreeIncrement * i - Math.PI / 2;
+    const point = {
+      x: centerX + radius * Math.cos(angle),
+      y: centerY + radius * Math.sin(angle)
+    };
+    return [point.x, point.y];
+  });
+  return joinPoints([...d, d[0]], {
+    edgeRoundness,
+    cornerRadius,
+    roundCornerStrategy: cornerRadius > 0 ? "bezier" : "arc"
+  });
+}
+var makePolygon = ({
+  points,
+  radius,
+  cornerRadius = 0,
+  edgeRoundness = null
+}) => {
+  if (points < 3) {
+    throw new Error(`"points" should be minimum 3, got ${points}`);
+  }
+  const width = 2 * radius;
+  const height = 2 * radius;
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const polygonPathInstructions = polygon({
+    points,
+    radius,
+    centerX,
+    centerY,
+    cornerRadius,
+    edgeRoundness
+  });
+  const reduced = reduceInstructions(polygonPathInstructions);
+  const path = resetPath(serializeInstructions(reduced));
+  const boundingBox = PathInternals.getBoundingBoxFromInstructions(reduced);
+  return {
+    path,
+    width: boundingBox.width,
+    height: boundingBox.height,
+    transformOrigin: `${centerX} ${centerY}`,
+    instructions: polygonPathInstructions
+  };
+};
+var polygonSchema = makeShapeSchema({
+  points: numberField({
+    defaultValue: 5,
+    description: "Points",
+    min: 3,
+    step: 1
+  }),
+  radius: numberField({
+    defaultValue: 100,
+    description: "Radius",
+    min: 0
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var PolygonInner = ({
+  points,
+  radius,
+  cornerRadius,
+  edgeRoundness,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx72(RenderSvg, {
+    defaultName: "<Polygon>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/polygon",
+    ...makePolygon({
+      points,
+      cornerRadius,
+      edgeRoundness,
+      radius
+    }),
+    ...props
+  });
+};
+var Polygon = Internals.wrapInSchema({
+  Component: PolygonInner,
+  schema: polygonSchema,
+  supportsEffects: true
+});
+Internals.addSequenceStackTraces(Polygon);
 var makeRect = ({
   width,
   height,
@@ -17144,6 +17751,257 @@ var makeRect = ({
     transformOrigin: transformOrigin.join(" ")
   };
 };
+var rectSchema = makeShapeSchema({
+  width: numberField({
+    defaultValue: 100,
+    description: "Width",
+    min: 0
+  }),
+  height: numberField({
+    defaultValue: 100,
+    description: "Height",
+    min: 0
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var RectInner = ({
+  width,
+  edgeRoundness,
+  height,
+  cornerRadius,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx82(RenderSvg, {
+    defaultName: "<Rect>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/rect",
+    ...makeRect({ height, width, edgeRoundness, cornerRadius }),
+    ...props
+  });
+};
+var Rect = Internals.wrapInSchema({
+  Component: RectInner,
+  schema: rectSchema,
+  supportsEffects: true
+});
+Internals.addSequenceStackTraces(Rect);
+var star = ({
+  centerX,
+  centerY,
+  points,
+  innerRadius,
+  outerRadius,
+  cornerRadius,
+  edgeRoundness
+}) => {
+  const degreeIncrement = Math.PI * 2 / (points * 2);
+  const d = new Array(points * 2).fill(true).map((_p, i) => {
+    const radius = i % 2 === 0 ? outerRadius : innerRadius;
+    const angle = degreeIncrement * i - Math.PI / 2;
+    const point = {
+      x: centerX + radius * Math.cos(angle),
+      y: centerY + radius * Math.sin(angle)
+    };
+    return [point.x, point.y];
+  });
+  return [
+    ...joinPoints([...d, d[0]], {
+      edgeRoundness,
+      cornerRadius,
+      roundCornerStrategy: cornerRadius > 0 ? "bezier" : "arc"
+    }),
+    { type: "Z" }
+  ];
+};
+var makeStar = ({
+  points,
+  innerRadius,
+  outerRadius,
+  cornerRadius = 0,
+  edgeRoundness = null
+}) => {
+  const width = outerRadius * 2;
+  const height = outerRadius * 2;
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const starPathInstructions = star({
+    centerX,
+    centerY,
+    points,
+    innerRadius,
+    outerRadius,
+    cornerRadius,
+    edgeRoundness
+  });
+  const reduced = reduceInstructions(starPathInstructions);
+  const path = resetPath(serializeInstructions(reduced));
+  const boundingBox = PathInternals.getBoundingBoxFromInstructions(reduced);
+  return {
+    path,
+    width: boundingBox.width,
+    height: boundingBox.height,
+    transformOrigin: `${centerX} ${centerY}`,
+    instructions: starPathInstructions
+  };
+};
+var starSchema = makeShapeSchema({
+  points: numberField({
+    defaultValue: 5,
+    description: "Points",
+    min: 3,
+    step: 1
+  }),
+  innerRadius: numberField({
+    defaultValue: 50,
+    description: "Inner Radius",
+    min: 0
+  }),
+  outerRadius: numberField({
+    defaultValue: 100,
+    description: "Outer Radius",
+    min: 0
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var StarInner = ({
+  innerRadius,
+  outerRadius,
+  points,
+  cornerRadius,
+  edgeRoundness,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx92(RenderSvg, {
+    defaultName: "<Star>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/star",
+    ...makeStar({
+      innerRadius,
+      outerRadius,
+      points,
+      cornerRadius,
+      edgeRoundness
+    }),
+    ...props
+  });
+};
+var Star = Internals.wrapInSchema({
+  Component: StarInner,
+  schema: starSchema,
+  supportsEffects: true
+});
+Internals.addSequenceStackTraces(Star);
+var makeTriangle = ({
+  length: length2,
+  direction = "right",
+  edgeRoundness = null,
+  cornerRadius = 0
+}) => {
+  if (typeof length2 !== "number") {
+    throw new Error(`"length" of a triangle must be a number, got ${JSON.stringify(length2)}`);
+  }
+  const longerDimension = length2;
+  const shorterSize = Math.sqrt(length2 ** 2 * 0.75);
+  const points = {
+    up: [
+      [longerDimension / 2, 0],
+      [0, shorterSize],
+      [longerDimension, shorterSize],
+      [longerDimension / 2, 0]
+    ],
+    right: [
+      [0, 0],
+      [0, longerDimension],
+      [shorterSize, longerDimension / 2],
+      [0, 0]
+    ],
+    down: [
+      [0, 0],
+      [longerDimension, 0],
+      [longerDimension / 2, shorterSize],
+      [0, 0]
+    ],
+    left: [
+      [shorterSize, 0],
+      [shorterSize, longerDimension],
+      [0, longerDimension / 2],
+      [shorterSize, 0]
+    ]
+  };
+  const transformOriginX = {
+    left: shorterSize / 3 * 2,
+    right: shorterSize / 3,
+    up: longerDimension / 2,
+    down: longerDimension / 2
+  }[direction];
+  const transformOriginY = {
+    up: shorterSize / 3 * 2,
+    down: shorterSize / 3,
+    left: longerDimension / 2,
+    right: longerDimension / 2
+  }[direction];
+  const instructions = [
+    ...joinPoints(points[direction], {
+      edgeRoundness,
+      cornerRadius,
+      roundCornerStrategy: "bezier"
+    }),
+    {
+      type: "Z"
+    }
+  ];
+  const path = serializeInstructions(instructions);
+  return {
+    path,
+    instructions,
+    width: direction === "up" || direction === "down" ? length2 : shorterSize,
+    height: direction === "up" || direction === "down" ? shorterSize : length2,
+    transformOrigin: `${transformOriginX} ${transformOriginY}`
+  };
+};
+var triangleSchema = makeShapeSchema({
+  length: numberField({
+    defaultValue: 100,
+    description: "Length",
+    min: 0
+  }),
+  direction: enumField({
+    defaultValue: "right",
+    description: "Direction",
+    variants: ["right", "left", "up", "down"]
+  }),
+  cornerRadius: numberField({
+    defaultValue: 0,
+    description: "Corner Radius",
+    min: 0
+  })
+});
+var TriangleInner = ({
+  length: length2,
+  direction,
+  edgeRoundness,
+  cornerRadius,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx102(RenderSvg, {
+    defaultName: "<Triangle>",
+    documentationLink: "https://www.remotion.dev/docs/shapes/triangle",
+    ...makeTriangle({ length: length2, direction, edgeRoundness, cornerRadius }),
+    ...props
+  });
+};
+var Triangle = Internals.wrapInSchema({
+  Component: TriangleInner,
+  schema: triangleSchema,
+  supportsEffects: true
+});
+Internals.addSequenceStackTraces(Triangle);
 
 // ../svg-3d-engine/dist/esm/index.mjs
 function truthy2(value) {
@@ -18210,7 +19068,7 @@ var extrudeAndTransformElement = (options) => {
 // ../design/dist/esm/index.mjs
 import { jsx as jsx212, Fragment as Fragment3 } from "react/jsx-runtime";
 import { jsx as jsx312, jsxs as jsxs6 } from "react/jsx-runtime";
-import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef29 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef30 } from "react";
 import { jsx as jsx46 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
 import React62 from "react";
@@ -18732,7 +19590,7 @@ var Spinner = ({ size, duration }) => {
       height: size
     };
   }, [size]);
-  const pathsRef = useRef29([]);
+  const pathsRef = useRef30([]);
   useEffect23(() => {
     const animate = () => {
       const now = performance.now();
@@ -18778,7 +19636,7 @@ var Button = ({
   ...rest
 }) => {
   const [dimensions, setDimensions] = useState22(null);
-  const ref = useRef28(null);
+  const ref = useRef29(null);
   const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
   const onPointerEnter = useCallback25((e) => {
     if (e.pointerType !== "mouse") {
@@ -18908,7 +19766,7 @@ var CheckIcon = (props) => {
     })
   });
 };
-var Triangle = ({ rotated: rotated2 }) => /* @__PURE__ */ jsx83("svg", {
+var Triangle2 = ({ rotated: rotated2 }) => /* @__PURE__ */ jsx83("svg", {
   width: "12px",
   height: "7px",
   viewBox: "0 0 12 7",
@@ -18990,7 +19848,7 @@ var Counter = ({
               ...buttonContainer
             },
             onClick: increment,
-            children: /* @__PURE__ */ jsx83(Triangle, {
+            children: /* @__PURE__ */ jsx83(Triangle2, {
               rotated: false
             })
           }),
@@ -19001,7 +19859,7 @@ var Counter = ({
               ...buttonContainer
             },
             onClick: decrement,
-            children: /* @__PURE__ */ jsx83(Triangle, {
+            children: /* @__PURE__ */ jsx83(Triangle2, {
               rotated: true
             })
           })
@@ -21541,7 +22399,7 @@ var arrow3 = (options, deps) => ({
   options: [options, deps]
 });
 var NAME = "Arrow";
-var Arrow = React222.forwardRef((props, forwardedRef) => {
+var Arrow2 = React222.forwardRef((props, forwardedRef) => {
   const { children, width = 10, height = 5, ...arrowProps } = props;
   return /* @__PURE__ */ jsx202(Primitive.svg, {
     ...arrowProps,
@@ -21553,8 +22411,8 @@ var Arrow = React222.forwardRef((props, forwardedRef) => {
     children: props.asChild ? children : /* @__PURE__ */ jsx202("polygon", { points: "0,0 30,0 15,10" })
   });
 });
-Arrow.displayName = NAME;
-var Root2 = Arrow;
+Arrow2.displayName = NAME;
+var Root2 = Arrow2;
 function useSize(element) {
   const [size4, setSize] = React232.useState(undefined);
   useLayoutEffect22(() => {
@@ -21820,7 +22678,7 @@ function getSideAndAlignFromPlacement(placement) {
 var Root22 = Popper;
 var Anchor = PopperAnchor;
 var Content = PopperContent;
-var Arrow2 = PopperArrow;
+var Arrow22 = PopperArrow;
 var PORTAL_NAME = "Portal";
 var Portal = React25.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
@@ -23564,7 +24422,7 @@ var SelectArrow = React362.forwardRef((props, forwardedRef) => {
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(ARROW_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(ARROW_NAME2, __scopeSelect);
-  return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx242(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
+  return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx242(Arrow22, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
 });
 SelectArrow.displayName = ARROW_NAME2;
 function shouldShowPlaceholder(value) {
@@ -24898,7 +25756,7 @@ var Textarea = React51.forwardRef(({ className, style, ...props }, ref) => {
   });
 });
 Textarea.displayName = "Textarea";
-var Triangle2 = (props) => {
+var Triangle22 = (props) => {
   return /* @__PURE__ */ jsx362("svg", {
     viewBox: "0 0 127 131",
     fill: "none",
@@ -24911,7 +25769,7 @@ var Triangle2 = (props) => {
 };
 
 // src/components/homepage/FreePricing.tsx
-import React53, { useCallback as useCallback35, useMemo as useMemo52 } from "react";
+import React53, { useCallback as useCallback36, useMemo as useMemo52 } from "react";
 
 // ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR2 = "-";
@@ -26558,7 +27416,7 @@ var CompanyPricing = () => {
   const [automatorsSelected, setAutomatorsSelected] = React53.useState(true);
   const [devSeatCount, setDevSeatCount] = React53.useState(3);
   const [cloudRenders, setCloudRenders] = React53.useState(1e4);
-  const formatPrice = useCallback35((price) => {
+  const formatPrice = useCallback36((price) => {
     const formatter = new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
@@ -27437,7 +28295,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx56(StatItemContent, {
-            content: "48k",
+            content: "49k",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -27622,8 +28480,8 @@ import { jsx as jsx314 } from "react/jsx-runtime";
 import { useEffect as useEffect210, useState as useState210 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
 import { useContext as useContext47, useEffect as useEffect52, useRef as useRef46 } from "react";
-import { useEffect as useEffect310, useRef as useRef210 } from "react";
-import { useCallback as useCallback36, useContext as useContext310, useMemo as useMemo53, useRef as useRef47, useState as useState39 } from "react";
+import { useEffect as useEffect310, useRef as useRef211 } from "react";
+import { useCallback as useCallback37, useContext as useContext310, useMemo as useMemo53, useRef as useRef47, useState as useState39 } from "react";
 import { useEffect as useEffect43, useRef as useRef310 } from "react";
 import { useCallback as useCallback210, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
@@ -27653,7 +28511,7 @@ import { jsx as jsx55 } from "react/jsx-runtime";
 import { useCallback as useCallback72, useEffect as useEffect112, useMemo as useMemo92, useRef as useRef82, useState as useState102 } from "react";
 import { jsx as jsx64 } from "react/jsx-runtime";
 import { useCallback as useCallback42, useMemo as useMemo410, useRef as useRef52, useState as useState62 } from "react";
-import React54, { useCallback as useCallback37, useMemo as useMemo310, useState as useState52 } from "react";
+import React54, { useCallback as useCallback38, useMemo as useMemo310, useState as useState52 } from "react";
 import { jsx as jsx74, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx84, jsxs as jsxs43 } from "react/jsx-runtime";
 import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo54, useState as useState82 } from "react";
@@ -29470,7 +30328,7 @@ var usePlayer = () => {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
   const { buffering } = bufferingContext;
-  const seek2 = useCallback36((newFrame) => {
+  const seek2 = useCallback37((newFrame) => {
     const frameToSeekTo = config ? Internals.TimelinePosition.clampFrameToCompositionRange(newFrame, config.durationInFrames) : Math.max(0, newFrame);
     if (video?.id) {
       setTimelinePosition((c2) => ({ ...c2, [video.id]: frameToSeekTo }));
@@ -29478,7 +30336,7 @@ var usePlayer = () => {
     frameRef.current = frameToSeekTo;
     emitter.dispatchSeek(frameToSeekTo);
   }, [config, emitter, setTimelinePosition, video?.id]);
-  const play = useCallback36((e) => {
+  const play = useCallback37((e) => {
     if (imperativePlaying.current) {
       return;
     }
@@ -29505,7 +30363,7 @@ var usePlayer = () => {
     seek2,
     audioAndVideoTags
   ]);
-  const pause = useCallback36(() => {
+  const pause = useCallback37(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;
       setPlaying(false);
@@ -29513,7 +30371,7 @@ var usePlayer = () => {
       audioContext?.suspend();
     }
   }, [emitter, imperativePlaying, setPlaying, audioContext]);
-  const pauseAndReturnToPlayStart = useCallback36(() => {
+  const pauseAndReturnToPlayStart = useCallback37(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;
       frameRef.current = playStart.current;
@@ -29528,7 +30386,7 @@ var usePlayer = () => {
     }
   }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
   const videoId = video?.id;
-  const frameBack = useCallback36((frames) => {
+  const frameBack = useCallback37((frames) => {
     if (!videoId) {
       return null;
     }
@@ -29547,7 +30405,7 @@ var usePlayer = () => {
       };
     });
   }, [imperativePlaying, setFrame, videoId]);
-  const frameForward = useCallback36((frames) => {
+  const frameForward = useCallback37((frames) => {
     if (!videoId) {
       return null;
     }
@@ -29566,20 +30424,20 @@ var usePlayer = () => {
       };
     });
   }, [videoId, imperativePlaying, lastFrame, setFrame]);
-  const toggle = useCallback36((e) => {
+  const toggle = useCallback37((e) => {
     if (imperativePlaying.current) {
       pause();
     } else {
       play(e);
     }
   }, [imperativePlaying, pause, play]);
-  const isPlaying = useCallback36(() => {
+  const isPlaying = useCallback37(() => {
     return imperativePlaying.current;
   }, [imperativePlaying]);
-  const getCurrentFrame = useCallback36(() => {
+  const getCurrentFrame = useCallback37(() => {
     return frameRef.current;
   }, [frameRef]);
-  const isBuffering = useCallback36(() => {
+  const isBuffering = useCallback37(() => {
     return buffering.current;
   }, [buffering]);
   const returnValue = useMemo53(() => {
@@ -29625,7 +30483,7 @@ var useBrowserMediaSession = ({
   playbackRate
 }) => {
   const { playing, pause, play, emitter, getCurrentFrame, seek: seek2 } = usePlayer();
-  const hasEverPlayed = useRef210(false);
+  const hasEverPlayed = useRef211(false);
   useEffect310(() => {
     if (playing) {
       hasEverPlayed.current = true;
@@ -30332,7 +31190,7 @@ var DefaultVolumeSlider = ({
   }, [isVertical]);
   const randomId = typeof React54.useId === "undefined" ? "volume-slider" : React54.useId();
   const [randomClass] = useState52(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
-  const onVolumeChange = useCallback37((e) => {
+  const onVolumeChange = useCallback38((e) => {
     setVolume(parseFloat(e.target.value));
   }, [setVolume]);
   const inputStyle = useMemo310(() => {
@@ -32518,7 +33376,7 @@ var Thumbnail = forward2(ThumbnailFn);
 
 // src/components/homepage/Demo/index.tsx
 import {
-  useCallback as useCallback53,
+  useCallback as useCallback55,
   useEffect as useEffect58,
   useMemo as useMemo67,
   useRef as useRef58,
@@ -33319,12 +34177,12 @@ import { jsx as jsx216 } from "react/jsx-runtime";
 import { jsx as jsx316 } from "react/jsx-runtime";
 import React63, { useMemo as useMemo63, useState as useState63 } from "react";
 import {
-  useCallback as useCallback38,
+  useCallback as useCallback39,
   useContext as useContext49,
   useEffect as useEffect212,
   useLayoutEffect as useLayoutEffect34,
   useMemo as useMemo412,
-  useRef as useRef211,
+  useRef as useRef212,
   useState as useState43
 } from "react";
 import { jsx as jsx412 } from "react/jsx-runtime";
@@ -36212,7 +37070,12 @@ var makeKeyframeBank = async ({
     }
     const roundedTimestamp = roundTo4Digits(timestamp);
     const firstFrameTimestamp = roundTo4Digits(frameTimestamps[0]);
+    const range = getRangeOfTimestamps();
+    if (!range) {
+      return false;
+    }
     const lastFrameTimestamp = roundTo4Digits(frameTimestamps[frameTimestamps.length - 1]);
+    const lastFrameEndTimestamp = roundTo4Digits(range.lastTimestamp);
     if (hasReachedEndOfVideo && roundedTimestamp > lastFrameTimestamp) {
       return true;
     }
@@ -36221,7 +37084,7 @@ var makeKeyframeBank = async ({
       const firstFrameDoesSatisfy = firstFrameIsInitialFrame && roundedTimestamp >= initialTimestampRequest;
       return firstFrameDoesSatisfy;
     }
-    if (roundedTimestamp - BIGGEST_ALLOWED_JUMP_FORWARD_SECONDS > lastFrameTimestamp) {
+    if (roundedTimestamp - BIGGEST_ALLOWED_JUMP_FORWARD_SECONDS > lastFrameEndTimestamp) {
       return false;
     }
     return true;
@@ -37915,13 +38778,13 @@ var VideoForPreviewAssertedShowing = ({
   ...props
 }) => {
   const src = usePreload22(unpreloadedSrc);
-  const canvasRef = useRef211(null);
+  const canvasRef = useRef212(null);
   const videoConfig = useUnsafeVideoConfig22();
   const frame = useCurrentFrame();
-  const mediaPlayerRef = useRef211(null);
-  const initialTrimBeforeRef = useRef211(trimBefore);
-  const initialTrimAfterRef = useRef211(trimAfter);
-  const initialOnVideoFrameRef = useRef211(onVideoFrame);
+  const mediaPlayerRef = useRef212(null);
+  const initialTrimBeforeRef = useRef212(trimBefore);
+  const initialTrimAfterRef = useRef212(trimAfter);
+  const initialOnVideoFrameRef = useRef212(onVideoFrame);
   const [initialRequestInit] = useState43(requestInit);
   const [mediaPlayerReady, setMediaPlayerReady] = useState43(false);
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState43(false);
@@ -37929,11 +38792,11 @@ var VideoForPreviewAssertedShowing = ({
   const { playbackRate: globalPlaybackRate } = Internals.usePlaybackRate();
   const sharedAudioContext = useContext49(SharedAudioContext22);
   const buffer = useBufferState();
-  const canvasRefCallback = useCallback38((canvas) => {
+  const canvasRefCallback = useCallback39((canvas) => {
     canvasRef.current = canvas;
     refForOutline.current = canvas;
   }, [refForOutline]);
-  const fallbackVideoRef = useCallback38((video) => {
+  const fallbackVideoRef = useCallback39((video) => {
     refForOutline.current = video;
   }, [refForOutline]);
   const [mediaMuted] = useMediaMutedState22();
@@ -37949,16 +38812,16 @@ var VideoForPreviewAssertedShowing = ({
   }
   warnAboutTooHighVolume22(userPreferredVolume);
   const effectChainState = useEffectChainState2();
-  const effectsRef = useRef211(effects);
+  const effectsRef = useRef212(effects);
   effectsRef.current = effects;
-  const effectChainStateRef = useRef211(effectChainState);
+  const effectChainStateRef = useRef212(effectChainState);
   effectChainStateRef.current = effectChainState;
   const parentSequence = useContext49(SequenceContext22);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
   const sequenceOffset = ((parentSequence?.cumulatedFrom ?? 0) + (parentSequence?.relativeFrom ?? 0)) / videoConfig.fps;
   const currentTime = frame / videoConfig.fps;
-  const currentTimeRef = useRef211(currentTime);
+  const currentTimeRef = useRef212(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload22(src);
   const buffering = useContext49(Internals.BufferingContextReact);
@@ -37967,16 +38830,16 @@ var VideoForPreviewAssertedShowing = ({
   }
   const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
   const isPlayerBuffering = Internals.useIsPlayerBuffering(buffering);
-  const initialPlaying = useRef211(playing && !isPlayerBuffering);
-  const initialIsPremounting = useRef211(isPremounting);
-  const initialIsPostmounting = useRef211(isPostmounting);
-  const initialGlobalPlaybackRate = useRef211(globalPlaybackRate);
-  const initialPlaybackRate = useRef211(playbackRate);
-  const initialMuted = useRef211(effectiveMuted);
-  const initialSequenceDuration = useRef211(videoConfig.durationInFrames);
-  const initialSequenceOffset = useRef211(sequenceOffset);
-  const hasDrawnRealFrameRef = useRef211(false);
-  const isPremountingRef = useRef211(isPremounting);
+  const initialPlaying = useRef212(playing && !isPlayerBuffering);
+  const initialIsPremounting = useRef212(isPremounting);
+  const initialIsPostmounting = useRef212(isPostmounting);
+  const initialGlobalPlaybackRate = useRef212(globalPlaybackRate);
+  const initialPlaybackRate = useRef212(playbackRate);
+  const initialMuted = useRef212(effectiveMuted);
+  const initialSequenceDuration = useRef212(videoConfig.durationInFrames);
+  const initialSequenceOffset = useRef212(sequenceOffset);
+  const hasDrawnRealFrameRef = useRef212(false);
+  const isPremountingRef = useRef212(isPremounting);
   isPremountingRef.current = isPremounting;
   useLayoutEffect34(() => {
     if (!_experimentalInitiallyDrawCachedFrame) {
@@ -38877,19 +39740,19 @@ var Video = Internals.wrapInSchema({
 Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
-import { useCallback as useCallback46, useEffect as useEffect50, useMemo as useMemo60, useState as useState48 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect50, useMemo as useMemo60, useState as useState48 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 import {
   createRef as createRef4,
-  useCallback as useCallback45,
+  useCallback as useCallback46,
   useEffect as useEffect49,
   useRef as useRef55,
   useState as useState47
 } from "react";
 
 // src/components/homepage/Demo/Card.tsx
-import { useCallback as useCallback41, useRef as useRef50 } from "react";
+import { useCallback as useCallback43, useRef as useRef50 } from "react";
 
 // src/components/homepage/Demo/math.ts
 var paddingAndMargin = 20;
@@ -38923,10 +39786,10 @@ var getIndexFromPosition = (clientX, clientY) => {
 };
 
 // src/components/homepage/Demo/Switcher.tsx
-import { useCallback as useCallback40 } from "react";
+import { useCallback as useCallback41 } from "react";
 import { jsx as jsx61, jsxs as jsxs15 } from "react/jsx-runtime";
 var Switcher = ({ type, theme, onTap }) => {
-  const onPointerDown = useCallback40((e) => {
+  const onPointerDown = useCallback41((e) => {
     e.stopPropagation();
     onTap();
   }, [onTap]);
@@ -38989,7 +39852,7 @@ var Card2 = ({
   const refToUse = refsToUse[index2];
   const stopPrevious = useRef50([]);
   let newIndices = [...indices];
-  const applyPositions = useCallback41((except) => {
+  const applyPositions = useCallback43((except) => {
     let stopped = false;
     stopPrevious.current.forEach((s) => {
       s();
@@ -39062,7 +39925,7 @@ var Card2 = ({
       update();
     });
   }, [newIndices, onUpdate, positions, refsToUse, shouldBePositions]);
-  const onPointerDown = useCallback41((e) => {
+  const onPointerDown = useCallback43((e) => {
     e.currentTarget.setPointerCapture(e.pointerId);
     const cardLeft = refToUse.current.offsetLeft;
     const cardTop = refToUse.current.offsetTop;
@@ -39123,7 +39986,7 @@ var Card2 = ({
     }, { once: true });
     refToUse.current.addEventListener("pointermove", onMove);
   }, [applyPositions, index2, positions, refToUse, shouldBePositions]);
-  const onPointerUp = useCallback41((e) => {
+  const onPointerUp = useCallback43((e) => {
     e.currentTarget.releasePointerCapture(e.pointerId);
   }, []);
   const { x, y } = getPositionForIndex(index2);
@@ -39250,7 +40113,7 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
 // src/components/homepage/Demo/EmojiCard.tsx
 import {
   forwardRef as forwardRef37,
-  useCallback as useCallback43,
+  useCallback as useCallback45,
   useEffect as useEffect48,
   useImperativeHandle as useImperativeHandle13,
   useRef as useRef53
@@ -39534,7 +40397,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
   const ref2 = useRef53(null);
   const ref3 = useRef53(null);
   const transforms = useRef53([-100, 0, 100]);
-  const onLeft = useCallback43(() => {
+  const onLeft = useCallback45(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -39545,7 +40408,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  const onRight = useCallback43(() => {
+  const onRight = useCallback45(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -40005,11 +40868,11 @@ var Cards = ({
     };
   }, [onToggle]);
   const ref = useRef55(null);
-  const onLeft = useCallback45(() => {
+  const onLeft = useCallback46(() => {
     ref.current?.onRight();
     onRightPress();
   }, [onRightPress]);
-  const onRight = useCallback45(() => {
+  const onRight = useCallback46(() => {
     ref.current?.onLeft();
     onLeftPress();
   }, [onLeftPress]);
@@ -40079,7 +40942,7 @@ var HomepageVideoComp = ({
   onClickRight
 }) => {
   const [rerenders, setRerenders] = useState48(0);
-  const onUpdate = useCallback46((newIndices) => {
+  const onUpdate = useCallback47((newIndices) => {
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
   }, [rerenders, updateCardOrder]);
@@ -40177,7 +41040,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.473";
+var VERSION2 = "4.0.474";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -44814,7 +45677,7 @@ var renderMediaOnWeb = (options2) => {
 };
 
 // src/components/homepage/Demo/DemoRender.tsx
-import React69, { useCallback as useCallback47 } from "react";
+import React69, { useCallback as useCallback48 } from "react";
 import { z } from "zod";
 
 // src/components/homepage/Demo/DemoErrorIcon.tsx
@@ -45015,7 +45878,7 @@ var RenderButton = ({ renderData, onError, playerRef }) => {
   const [state, setState] = React69.useState({
     type: "idle"
   });
-  const triggerRender = useCallback47(async () => {
+  const triggerRender = useCallback48(async () => {
     if (renderData === null) {
       return;
     }
@@ -45190,10 +46053,10 @@ var DragAndDropNudge = () => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback49, useEffect as useEffect53, useMemo as useMemo66, useRef as useRef56, useState as useState51 } from "react";
+import { useCallback as useCallback50, useEffect as useEffect53, useMemo as useMemo66, useRef as useRef56, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback48, useEffect as useEffect51, useMemo as useMemo64, useState as useState50 } from "react";
+import { useCallback as useCallback49, useEffect as useEffect51, useMemo as useMemo64, useState as useState50 } from "react";
 var useElementSize2 = (ref) => {
   const [size4, setSize] = useState50(null);
   const observer = useMemo64(() => {
@@ -45207,7 +46070,7 @@ var useElementSize2 = (ref) => {
       });
     });
   }, []);
-  const updateSize = useCallback48(() => {
+  const updateSize = useCallback49(() => {
     if (ref === null) {
       return;
     }
@@ -45359,7 +46222,7 @@ var PlayerSeekBar2 = ({
     dragging: false
   });
   const width2 = size4?.width ?? 0;
-  const onPointerDown = useCallback49((e) => {
+  const onPointerDown = useCallback50((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -45373,7 +46236,7 @@ var PlayerSeekBar2 = ({
     });
     onSeekStart();
   }, [durationInFrames, width2, playerRef, playing, onSeekStart]);
-  const onPointerMove = useCallback49((e) => {
+  const onPointerMove = useCallback50((e) => {
     if (!size4) {
       throw new Error("Player has no size");
     }
@@ -45384,7 +46247,7 @@ var PlayerSeekBar2 = ({
     const _frame = getFrameFromX2(e.clientX - posLeft, durationInFrames, size4.width);
     playerRef.current.seekTo(_frame);
   }, [dragging.dragging, durationInFrames, playerRef, size4]);
-  const onPointerUp = useCallback49(() => {
+  const onPointerUp = useCallback50(() => {
     setDragging({
       dragging: false
     });
@@ -45468,7 +46331,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback50, useEffect as useEffect55, useRef as useRef57, useState as useState54 } from "react";
+import { useCallback as useCallback51, useEffect as useEffect55, useRef as useRef57, useState as useState54 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx101 } from "react/jsx-runtime";
@@ -45549,7 +46412,7 @@ var PlayerVolume = ({ playerRef }) => {
       document.body.style.userSelect = "auto";
     }
   }, [isHovered]);
-  const onClick = useCallback50(() => {
+  const onClick = useCallback51(() => {
     if (timerRef.current !== null) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
@@ -45587,7 +46450,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React73, { useCallback as useCallback51, useEffect as useEffect56 } from "react";
+import React73, { useCallback as useCallback53, useEffect as useEffect56 } from "react";
 import { jsx as jsx107 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -45623,7 +46486,7 @@ var PlayPauseButton = ({ playerRef }) => {
       current.removeEventListener("pause", onPause);
     };
   }, [playerRef]);
-  const onToggle = useCallback51(() => {
+  const onToggle = useCallback53(() => {
     playerRef.current?.toggle();
   }, [playerRef]);
   const playPauseIconStyle = {
@@ -45844,7 +46707,7 @@ var Demo = () => {
       playerRef.removeEventListener("fullscreenchange", onFullscreenChange);
     };
   }, [data2]);
-  const updateCardOrder = useCallback53((newCardOrder) => {
+  const updateCardOrder = useCallback55((newCardOrder) => {
     setCardOrder(newCardOrder);
   }, []);
   const props = useMemo67(() => {
@@ -45866,7 +46729,7 @@ var Demo = () => {
       emojiIndex
     };
   }, [cardOrder, emojiIndex, colorMode, data2, updateCardOrder]);
-  const onError = useCallback53(() => {
+  const onError = useCallback55(() => {
     setError(true);
   }, []);
   return /* @__PURE__ */ jsxs39("div", {
@@ -46151,13 +47014,13 @@ var IfYouKnowReact = () => {
 };
 
 // src/components/homepage/NewsletterButton.tsx
-import { useCallback as useCallback55, useState as useState59 } from "react";
+import { useCallback as useCallback56, useState as useState59 } from "react";
 import { jsx as jsx118, jsxs as jsxs44 } from "react/jsx-runtime";
 var NewsletterButton = () => {
   const [email, setEmail] = useState59("");
   const [submitting, setSubmitting] = useState59(false);
   const [subscribed, setSubscribed] = useState59(false);
-  const handleSubmit = useCallback55(async (e) => {
+  const handleSubmit = useCallback56(async (e) => {
     try {
       setSubmitting(true);
       e.preventDefault();
@@ -46632,7 +47495,7 @@ import { forwardRef as forwardRef40, useEffect as useEffect66, useImperativeHand
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef39, useCallback as useCallback56, useEffect as useEffect65, useRef as useRef61, useState as useState64 } from "react";
+import { forwardRef as forwardRef39, useCallback as useCallback57, useEffect as useEffect65, useRef as useRef61, useState as useState64 } from "react";
 import { jsx as jsx124 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef61(null);
@@ -46654,8 +47517,8 @@ var VideoPlayerWithControls = forwardRef39(({ playbackId, poster, currentTime, o
   const metaRef = useCombinedRefs(ref, videoRef);
   const playerRef = useRef61(null);
   const [playerInitTime] = useState64(Date.now());
-  const videoError = useCallback56((event) => onError(event), [onError]);
-  const onImageLoad = useCallback56((event) => {
+  const videoError = useCallback57((event) => onError(event), [onError]);
+  const onImageLoad = useCallback57((event) => {
     const [w, h] = [event.target.width, event.target.height];
     if (w && h) {
       onSize({ width: w, height: h });
@@ -46819,7 +47682,7 @@ var icon6 = {
   height: 16,
   marginLeft: 10
 };
-var Arrow5 = () => /* @__PURE__ */ jsx127("svg", {
+var Arrow4 = () => /* @__PURE__ */ jsx127("svg", {
   style: icon6,
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 448 512",
@@ -46984,7 +47847,7 @@ var BuiltWithRemotionShowcase = () => {
                   href: videoApps[activeTab].link,
                   children: [
                     videoApps[activeTab].buttonText,
-                    /* @__PURE__ */ jsx127(Arrow5, {})
+                    /* @__PURE__ */ jsx127(Arrow4, {})
                   ]
                 })
               ]
@@ -48369,7 +49232,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx161("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "48k"
+        children: "49k"
       })
     ]
   });