@remotion/promo-pages 4.0.474 → 4.0.476

package/dist/template-modal-content.js

@@ -35,8 +35,8 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // ../design/dist/esm/index.mjs
 import * as React23 from "react";
 import * as React3 from "react";
-import { Fragment as Fragment2, jsx as jsx41 } from "react/jsx-runtime";
-import React52, { useCallback as useCallback25, useRef as useRef29, useState as useState22 } from "react";
+import { Fragment as Fragment2, jsx as jsx43 } from "react/jsx-runtime";
+import React52, { useCallback as useCallback26, useRef as useRef210, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -1378,7 +1378,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React35, { useEffect as useEffect22, useMemo as useMemo42, useState as useState21 } from "react";
+import React32, { useEffect as useEffect22, useMemo as useMemo42, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -4331,69 +4331,71 @@ import { forwardRef as forwardRef11, useCallback as useCallback17, useState as u
 import { jsx as jsx27 } from "react/jsx-runtime";
 import { useCallback as useCallback18, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
+import React29, { forwardRef as forwardRef12, useCallback as useCallback19, useRef as useRef25 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
-import React29 from "react";
+import React30 from "react";
 import {
-  useCallback as useCallback19,
+  useCallback as useCallback20,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo32,
-  useRef as useRef25,
+  useRef as useRef26,
   useState as useState18
 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-import React30 from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+import React31 from "react";
 import { useMemo as useMemo34 } from "react";
 import { createContext as createContext24, useContext as useContext34, useMemo as useMemo33 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
 import { jsx as jsx31 } from "react/jsx-runtime";
-import React32 from "react";
-import React33, { createContext as createContext25 } from "react";
-import React34, { useContext as useContext35 } from "react";
-import { useCallback as useCallback22 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+import React33 from "react";
+import React34, { createContext as createContext25 } from "react";
+import React35, { useContext as useContext35 } from "react";
+import { useCallback as useCallback23 } from "react";
 import {
-  useCallback as useCallback20,
+  useCallback as useCallback21,
   useContext as useContext36,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo35,
   useState as useState19
 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
-import React36, {
-  forwardRef as forwardRef12,
-  useCallback as useCallback21,
+import { jsx as jsx33 } from "react/jsx-runtime";
+import React37, {
+  forwardRef as forwardRef13,
+  useCallback as useCallback22,
   useContext as useContext37,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
-  useRef as useRef26,
+  useRef as useRef27,
   useState as useState20
 } from "react";
 import { useEffect as useEffect19 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
 import { jsx as jsx34 } from "react/jsx-runtime";
-import React38, { useMemo as useMemo37 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
+import React39, { useMemo as useMemo37 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
 import {
   Children,
-  forwardRef as forwardRef13,
+  forwardRef as forwardRef14,
   useMemo as useMemo38
 } from "react";
-import React39 from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
-import React41 from "react";
-import { forwardRef as forwardRef15, useCallback as useCallback23, useContext as useContext39 } from "react";
+import React40 from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+import React42 from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback24, useContext as useContext39 } from "react";
 import {
-  forwardRef as forwardRef14,
+  forwardRef as forwardRef15,
   useContext as useContext38,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo39,
-  useRef as useRef27
+  useRef as useRef28
 } from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
 import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var __defProp2 = Object.defineProperty;
 var __export2 = (target, all) => {
   for (var name in all)
@@ -5562,7 +5564,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.474";
+var VERSION = "4.0.476";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -5929,6 +5931,12 @@ var PremountContext = createContext14({
   premountFramesRemaining: 0
 });
 var sequenceVisualStyleSchema = {
+  "style.transformOrigin": {
+    type: "transform-origin",
+    step: 1,
+    default: "50% 50%",
+    description: "Transform origin"
+  },
   "style.translate": {
     type: "translate",
     step: 1,
@@ -5990,6 +5998,18 @@ var hiddenField = {
   default: false,
   description: "Hidden"
 };
+var showInTimelineField = {
+  type: "hidden"
+};
+var sequenceNameField = {
+  type: "hidden"
+};
+var extendSchemaWithSequenceName = (schema) => {
+  return {
+    name: sequenceNameField,
+    ...schema
+  };
+};
 var durationInFramesField = {
   type: "number",
   default: undefined,
@@ -6003,8 +6023,9 @@ var fromField = {
   step: 1,
   hiddenFromList: true
 };
-var sequenceSchema = {
+var sequenceSchema = extendSchemaWithSequenceName({
   hidden: hiddenField,
+  showInTimeline: showInTimelineField,
   from: fromField,
   durationInFrames: durationInFramesField,
   layout: {
@@ -6016,12 +6037,13 @@ var sequenceSchema = {
       none: {}
     }
   }
-};
-var sequenceSchemaWithoutFrom = {
+});
+var sequenceSchemaWithoutFrom = extendSchemaWithSequenceName({
   hidden: hiddenField,
+  showInTimeline: showInTimelineField,
   durationInFrames: durationInFramesField,
   layout: sequenceSchema.layout
-};
+});
 var sequenceSchemaDefaultLayoutNone = {
   ...sequenceSchema,
   layout: {
@@ -6365,81 +6387,6 @@ function bezier(mX1, mY1, mX2, mY2) {
     return calcBezier(getTForX(clampedX), mY1, mY2);
   };
 }
-var clampUnit = (t) => Math.min(1, Math.max(0, t));
-
-class Easing {
-  static step0(n) {
-    return n > 0 ? 1 : 0;
-  }
-  static step1(n) {
-    return n >= 1 ? 1 : 0;
-  }
-  static linear(t) {
-    return t;
-  }
-  static ease(t) {
-    return Easing.bezier(0.42, 0, 1, 1)(t);
-  }
-  static quad(t) {
-    return t * t;
-  }
-  static cubic(t) {
-    return t * t * t;
-  }
-  static poly(n) {
-    return (t) => t ** n;
-  }
-  static sin(t) {
-    return 1 - Math.cos(t * Math.PI / 2);
-  }
-  static circle(t) {
-    const u = clampUnit(t);
-    return 1 - Math.sqrt(1 - u * u);
-  }
-  static exp(t) {
-    return 2 ** (10 * (t - 1));
-  }
-  static elastic(bounciness = 1) {
-    const p = bounciness * Math.PI;
-    return (t) => 1 - Math.cos(t * Math.PI / 2) ** 3 * Math.cos(t * p);
-  }
-  static back(s = 1.70158) {
-    return (t) => t * t * ((s + 1) * t - s);
-  }
-  static bounce(t) {
-    const u = clampUnit(t);
-    if (u < 1 / 2.75) {
-      return 7.5625 * u * u;
-    }
-    if (u < 2 / 2.75) {
-      const t2_ = u - 1.5 / 2.75;
-      return 7.5625 * t2_ * t2_ + 0.75;
-    }
-    if (u < 2.5 / 2.75) {
-      const t2_ = u - 2.25 / 2.75;
-      return 7.5625 * t2_ * t2_ + 0.9375;
-    }
-    const t2 = u - 2.625 / 2.75;
-    return 7.5625 * t2 * t2 + 0.984375;
-  }
-  static bezier(x1, y1, x2, y2) {
-    return bezier(x1, y1, x2, y2);
-  }
-  static in(easing) {
-    return easing;
-  }
-  static out(easing) {
-    return (t) => 1 - easing(1 - t);
-  }
-  static inOut(easing) {
-    return (t) => {
-      if (t < 0.5) {
-        return easing(t * 2) / 2;
-      }
-      return 1 - easing((1 - t) * 2) / 2;
-    };
-  }
-}
 var normalizeNumber = (value) => {
   return Math.round(value * 1e6) / 1e6;
 };
@@ -6481,6 +6428,32 @@ var lengthUnits = new Set([
   "vw"
 ]);
 var cssNumberRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/;
+var transformOriginKeywords = new Set([
+  "left",
+  "center",
+  "right",
+  "top",
+  "bottom"
+]);
+var transformOriginKeywordOptions = (keyword) => {
+  if (keyword === "left") {
+    return [{ axis: "x", value: { value: 0, unit: "%" } }];
+  }
+  if (keyword === "right") {
+    return [{ axis: "x", value: { value: 100, unit: "%" } }];
+  }
+  if (keyword === "top") {
+    return [{ axis: "y", value: { value: 0, unit: "%" } }];
+  }
+  if (keyword === "bottom") {
+    return [{ axis: "y", value: { value: 100, unit: "%" } }];
+  }
+  return [
+    { axis: "x", value: { value: 50, unit: "%" } },
+    { axis: "y", value: { value: 50, unit: "%" } }
+  ];
+};
+var transformOriginCenter = { value: 50, unit: "%" };
 var stringifyNumber = (value) => {
   return String(normalizeNumber(value));
 };
@@ -6505,6 +6478,110 @@ var parseStringInterpolationComponent = (component, value) => {
   }
   throw new TypeError(`Cannot interpolate "${value}" because "${unit}" is not a supported translate or rotate unit`);
 };
+var parseTransformOriginLengthPercentage = ({
+  component,
+  value,
+  allowPercentage
+}) => {
+  const match = cssNumberRegex.exec(component);
+  if (match === null) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported transform-origin ${allowPercentage ? "length-percentage" : "z length"}`);
+  }
+  const unit = match[2] ?? null;
+  const numberValue = Number(match[1]);
+  if (!Number.isFinite(numberValue)) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not finite`);
+  }
+  if (unit === null || !lengthUnits.has(unit) || !allowPercentage && unit === "%") {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported transform-origin ${allowPercentage ? "length-percentage" : "z length"}`);
+  }
+  return { value: numberValue, unit };
+};
+var parseTransformOriginToken = (component, value) => {
+  const lower = component.toLowerCase();
+  if (transformOriginKeywords.has(lower)) {
+    return { type: "keyword", keyword: lower };
+  }
+  return {
+    type: "length-percentage",
+    parsed: parseTransformOriginLengthPercentage({
+      component,
+      value,
+      allowPercentage: true
+    })
+  };
+};
+var parseTwoTransformOriginKeywords = (first, second, value) => {
+  const candidates = [];
+  for (const firstOption of transformOriginKeywordOptions(first)) {
+    for (const secondOption of transformOriginKeywordOptions(second)) {
+      if (firstOption.axis === secondOption.axis) {
+        continue;
+      }
+      candidates.push(firstOption.axis === "x" ? [firstOption.value, secondOption.value] : [secondOption.value, firstOption.value]);
+    }
+  }
+  if (candidates.length === 0) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${first} ${second}" is not a valid transform-origin keyword pair`);
+  }
+  return candidates[0];
+};
+var parseTransformOriginXY = (parts, value) => {
+  if (parts.length === 1) {
+    const token = parseTransformOriginToken(parts[0], value);
+    if (token.type === "length-percentage") {
+      return [token.parsed, transformOriginCenter];
+    }
+    if (token.keyword === "top" || token.keyword === "bottom") {
+      return [
+        transformOriginCenter,
+        transformOriginKeywordOptions(token.keyword)[0].value
+      ];
+    }
+    return [
+      transformOriginKeywordOptions(token.keyword)[0].value,
+      transformOriginCenter
+    ];
+  }
+  const first = parseTransformOriginToken(parts[0], value);
+  const second = parseTransformOriginToken(parts[1], value);
+  if (first.type === "length-percentage" && second.type === "length-percentage") {
+    return [first.parsed, second.parsed];
+  }
+  if (first.type === "keyword" && second.type === "keyword") {
+    return parseTwoTransformOriginKeywords(first.keyword, second.keyword, value);
+  }
+  const keyword = first.type === "keyword" ? first : second.type === "keyword" ? second : null;
+  const length2 = first.type === "length-percentage" ? first.parsed : second.type === "length-percentage" ? second.parsed : null;
+  if (keyword === null || length2 === null) {
+    throw new Error("Expected a keyword and a length-percentage value");
+  }
+  const keywordIsFirst = first.type === "keyword";
+  if (keyword.keyword === "left" || keyword.keyword === "right") {
+    if (!keywordIsFirst) {
+      throw new TypeError(`Cannot interpolate "${value}" because horizontal transform-origin keywords must come before a length-percentage value`);
+    }
+    return [transformOriginKeywordOptions(keyword.keyword)[0].value, length2];
+  }
+  if (keyword.keyword === "top" || keyword.keyword === "bottom") {
+    return [length2, transformOriginKeywordOptions(keyword.keyword)[0].value];
+  }
+  return keywordIsFirst ? [transformOriginCenter, length2] : [length2, transformOriginCenter];
+};
+var parseTransformOriginValue = (output, parts) => {
+  const [x, y] = parseTransformOriginXY(parts.slice(0, 2), output);
+  const z = parts[2] === undefined ? { value: 0, unit: null } : parseTransformOriginLengthPercentage({
+    component: parts[2],
+    value: output,
+    allowPercentage: false
+  });
+  return {
+    kind: "translate",
+    values: [x.value, y.value, z.value],
+    units: [x.unit, y.unit, z.unit],
+    dimensions: parts[2] === undefined ? 2 : 3
+  };
+};
 var parseStringInterpolationValue = (output) => {
   if (typeof output === "number") {
     if (!Number.isFinite(output)) {
@@ -6521,6 +6598,9 @@ var parseStringInterpolationValue = (output) => {
   if (parts.length < 1 || parts.length > 3 || parts[0] === "") {
     throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
   }
+  if (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {
+    return parseTransformOriginValue(output, parts);
+  }
   const parsed = parts.map((part) => parseStringInterpolationComponent(part, output));
   const [{ kind }] = parsed;
   for (const part of parsed) {
@@ -6732,82 +6812,432 @@ function checkValidInputRange(arr) {
     }
   }
 }
-function checkInfiniteRange(name, arr) {
-  if (arr.length < 1) {
-    throw new Error(name + " must have at least 1 element");
-  }
-  for (const element of arr) {
-    if (typeof element !== "number") {
-      throw new Error(`${name} must contain only numbers`);
-    }
-    if (!Number.isFinite(element)) {
-      throw new Error(`${name} must contain only finite numbers, but got [${arr.join(",")}]`);
+function checkInfiniteRange(name, arr) {
+  if (arr.length < 1) {
+    throw new Error(name + " must have at least 1 element");
+  }
+  for (const element of arr) {
+    if (typeof element !== "number") {
+      throw new Error(`${name} must contain only numbers`);
+    }
+    if (!Number.isFinite(element)) {
+      throw new Error(`${name} must contain only finite numbers, but got [${arr.join(",")}]`);
+    }
+  }
+}
+function assertValidInterpolateEasingOption(easing, inputRangeLength) {
+  if (easing === undefined) {
+    return;
+  }
+  if (typeof easing === "function") {
+    return;
+  }
+  const expectedLength = inputRangeLength - 1;
+  if (easing.length !== expectedLength) {
+    throw new Error(`When easing is an array, it must have one entry per segment between keyframes (length inputRange.length - 1 = ${expectedLength}), but got length ${easing.length}`);
+  }
+  for (let i = 0;i < easing.length; i++) {
+    if (typeof easing[i] !== "function") {
+      throw new Error(`easing[${i}] must be a function`);
+    }
+  }
+}
+function assertValidInterpolatePosterizeOption(posterize) {
+  if (posterize === undefined) {
+    return;
+  }
+  if (typeof posterize !== "number" || !Number.isFinite(posterize) || posterize <= 0) {
+    throw new Error(`posterize must be a positive finite number, but got ${posterize}`);
+  }
+}
+function interpolate(input, inputRange, outputRange, options) {
+  if (typeof input === "undefined") {
+    throw new Error("input can not be undefined");
+  }
+  if (typeof inputRange === "undefined") {
+    throw new Error("inputRange can not be undefined");
+  }
+  if (typeof outputRange === "undefined") {
+    throw new Error("outputRange can not be undefined");
+  }
+  if (inputRange.length !== outputRange.length) {
+    throw new Error("inputRange (" + inputRange.length + ") and outputRange (" + outputRange.length + ") must have the same length");
+  }
+  checkInfiniteRange("inputRange", inputRange);
+  checkValidInputRange(inputRange);
+  assertValidInterpolateEasingOption(options?.easing, inputRange.length);
+  assertValidInterpolatePosterizeOption(options?.posterize);
+  if (typeof input !== "number") {
+    throw new TypeError("Cannot interpolate an input which is not a number");
+  }
+  if (!Array.isArray(outputRange)) {
+    throw new Error("outputRange must contain only numbers");
+  }
+  const hasStringOutput = outputRange.some((output) => typeof output === "string");
+  if (hasStringOutput) {
+    if (!outputRange.every((output) => typeof output === "string" || typeof output === "number")) {
+      throw new TypeError("outputRange must contain only numbers, or supported scale, translate, and rotate strings");
+    }
+    return interpolateString({ input, inputRange, outputRange, options });
+  }
+  if (outputRange.every((output) => Array.isArray(output))) {
+    return interpolateTuple({ input, inputRange, outputRange, options });
+  }
+  if (!outputRange.every((output) => typeof output === "number")) {
+    throw new TypeError("outputRange must contain only numbers, numeric tuples, or supported scale, translate, and rotate strings");
+  }
+  checkInfiniteRange("outputRange", outputRange);
+  return interpolateNumber({ input, inputRange, outputRange, options });
+}
+var validateFrame = ({
+  allowFloats,
+  durationInFrames,
+  frame
+}) => {
+  if (typeof frame === "undefined") {
+    throw new TypeError(`Argument missing for parameter "frame"`);
+  }
+  if (typeof frame !== "number") {
+    throw new TypeError(`Argument passed for "frame" is not a number: ${frame}`);
+  }
+  if (!Number.isFinite(frame)) {
+    throw new RangeError(`Frame ${frame} is not finite`);
+  }
+  if (frame % 1 !== 0 && !allowFloats) {
+    throw new RangeError(`Argument for frame must be an integer, but got ${frame}`);
+  }
+  if (frame < 0 && frame < -durationInFrames) {
+    throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the lowest frame that can be rendered is ${-durationInFrames}`);
+  }
+  if (frame > durationInFrames - 1) {
+    throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the highest frame that can be rendered is ${durationInFrames - 1}`);
+  }
+};
+var validateSpringDuration = (dur) => {
+  if (typeof dur === "undefined") {
+    return;
+  }
+  if (typeof dur !== "number") {
+    throw new TypeError(`A "duration" of a spring must be a "number" but is "${typeof dur}"`);
+  }
+  if (Number.isNaN(dur)) {
+    throw new TypeError('A "duration" of a spring is NaN, which it must not be');
+  }
+  if (!Number.isFinite(dur)) {
+    throw new TypeError('A "duration" of a spring must be finite, but is ' + dur);
+  }
+  if (dur <= 0) {
+    throw new TypeError('A "duration" of a spring must be positive, but is ' + dur);
+  }
+};
+var defaultSpringConfig = {
+  damping: 10,
+  mass: 1,
+  stiffness: 100,
+  overshootClamping: false
+};
+var advanceCache = {};
+function advance({
+  animation,
+  now,
+  config
+}) {
+  const { toValue: toValue2, lastTimestamp, current, velocity } = animation;
+  const deltaTime = Math.min(now - lastTimestamp, 64);
+  if (config.damping <= 0) {
+    throw new Error("Spring damping must be greater than 0, otherwise the spring() animation will never end, causing an infinite loop.");
+  }
+  const c2 = config.damping;
+  const m = config.mass;
+  const k = config.stiffness;
+  const cacheKey = [
+    toValue2,
+    lastTimestamp,
+    current,
+    velocity,
+    c2,
+    m,
+    k,
+    now
+  ].join("-");
+  if (advanceCache[cacheKey]) {
+    return advanceCache[cacheKey];
+  }
+  const v0 = -velocity;
+  const x0 = toValue2 - current;
+  const zeta = c2 / (2 * Math.sqrt(k * m));
+  const omega0 = Math.sqrt(k / m);
+  const omega1 = omega0 * Math.sqrt(1 - zeta ** 2);
+  const t = deltaTime / 1000;
+  const sin1 = Math.sin(omega1 * t);
+  const cos1 = Math.cos(omega1 * t);
+  const underDampedEnvelope = Math.exp(-zeta * omega0 * t);
+  const underDampedFrag1 = underDampedEnvelope * (sin1 * ((v0 + zeta * omega0 * x0) / omega1) + x0 * cos1);
+  const underDampedPosition = toValue2 - underDampedFrag1;
+  const underDampedVelocity = zeta * omega0 * underDampedFrag1 - underDampedEnvelope * (cos1 * (v0 + zeta * omega0 * x0) - omega1 * x0 * sin1);
+  const criticallyDampedEnvelope = Math.exp(-omega0 * t);
+  const criticallyDampedPosition = toValue2 - criticallyDampedEnvelope * (x0 + (v0 + omega0 * x0) * t);
+  const criticallyDampedVelocity = criticallyDampedEnvelope * (v0 * (t * omega0 - 1) + t * x0 * omega0 * omega0);
+  const animationNode = {
+    toValue: toValue2,
+    prevPosition: current,
+    lastTimestamp: now,
+    current: zeta < 1 ? underDampedPosition : criticallyDampedPosition,
+    velocity: zeta < 1 ? underDampedVelocity : criticallyDampedVelocity
+  };
+  advanceCache[cacheKey] = animationNode;
+  return animationNode;
+}
+var calculationCache = {};
+function springCalculation({
+  frame,
+  fps,
+  config = {}
+}) {
+  const from = 0;
+  const to = 1;
+  const cacheKey = [
+    frame,
+    fps,
+    config.damping,
+    config.mass,
+    config.overshootClamping,
+    config.stiffness
+  ].join("-");
+  if (calculationCache[cacheKey]) {
+    return calculationCache[cacheKey];
+  }
+  let animation = {
+    lastTimestamp: 0,
+    current: from,
+    toValue: to,
+    velocity: 0,
+    prevPosition: 0
+  };
+  const frameClamped = Math.max(0, frame);
+  const unevenRest = frameClamped % 1;
+  for (let f = 0;f <= Math.floor(frameClamped); f++) {
+    if (f === Math.floor(frameClamped)) {
+      f += unevenRest;
+    }
+    const time = f / fps * 1000;
+    animation = advance({
+      animation,
+      now: time,
+      config: {
+        ...defaultSpringConfig,
+        ...config
+      }
+    });
+  }
+  calculationCache[cacheKey] = animation;
+  return animation;
+}
+var cache = new Map;
+function measureSpring({
+  fps,
+  config = {},
+  threshold = 0.005
+}) {
+  if (typeof threshold !== "number") {
+    throw new TypeError(`threshold must be a number, got ${threshold} of type ${typeof threshold}`);
+  }
+  if (threshold === 0) {
+    return Infinity;
+  }
+  if (threshold === 1) {
+    return 0;
+  }
+  if (isNaN(threshold)) {
+    throw new TypeError("Threshold is NaN");
+  }
+  if (!Number.isFinite(threshold)) {
+    throw new TypeError("Threshold is not finite");
+  }
+  if (threshold < 0) {
+    throw new TypeError("Threshold is below 0");
+  }
+  const cacheKey = [
+    fps,
+    config.damping,
+    config.mass,
+    config.overshootClamping,
+    config.stiffness,
+    threshold
+  ].join("-");
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey);
+  }
+  validateFps(fps, "to the measureSpring() function", false);
+  let frame = 0;
+  let finishedFrame = 0;
+  const calc = () => {
+    return springCalculation({
+      fps,
+      frame,
+      config
+    });
+  };
+  let animation = calc();
+  const calcDifference = () => {
+    return Math.abs(animation.current - animation.toValue);
+  };
+  let difference = calcDifference();
+  while (difference >= threshold) {
+    frame++;
+    animation = calc();
+    difference = calcDifference();
+  }
+  finishedFrame = frame;
+  for (let i = 0;i < 20; i++) {
+    frame++;
+    animation = calc();
+    difference = calcDifference();
+    if (difference >= threshold) {
+      i = 0;
+      finishedFrame = frame + 1;
+    }
+  }
+  cache.set(cacheKey, finishedFrame);
+  return finishedFrame;
+}
+function spring({
+  frame: passedFrame,
+  fps,
+  config = {},
+  from = 0,
+  to = 1,
+  durationInFrames: passedDurationInFrames,
+  durationRestThreshold,
+  delay = 0,
+  reverse = false
+}) {
+  validateSpringDuration(passedDurationInFrames);
+  validateFrame({
+    frame: passedFrame,
+    durationInFrames: Infinity,
+    allowFloats: true
+  });
+  validateFps(fps, "to spring()", false);
+  const needsToCalculateNaturalDuration = reverse || typeof passedDurationInFrames !== "undefined";
+  const naturalDuration = needsToCalculateNaturalDuration ? measureSpring({
+    fps,
+    config,
+    threshold: durationRestThreshold
+  }) : undefined;
+  const naturalDurationGetter = needsToCalculateNaturalDuration ? {
+    get: () => naturalDuration
+  } : {
+    get: () => {
+      throw new Error("did not calculate natural duration, this is an error with Remotion. Please report");
     }
+  };
+  const reverseProcessed = reverse ? (passedDurationInFrames ?? naturalDurationGetter.get()) - passedFrame : passedFrame;
+  const delayProcessed = reverseProcessed + (reverse ? delay : -delay);
+  const durationProcessed = passedDurationInFrames === undefined ? delayProcessed : delayProcessed / (passedDurationInFrames / naturalDurationGetter.get());
+  if (passedDurationInFrames && delayProcessed > passedDurationInFrames) {
+    return to;
   }
+  const spr = springCalculation({
+    fps,
+    frame: durationProcessed,
+    config
+  });
+  const inner = config.overshootClamping ? to >= from ? Math.min(spr.current, to) : Math.max(spr.current, to) : spr.current;
+  const interpolated = from === 0 && to === 1 ? inner : interpolate(inner, [0, 1], [from, to]);
+  return interpolated;
 }
-function assertValidInterpolateEasingOption(easing, inputRangeLength) {
-  if (easing === undefined) {
-    return;
+var clampUnit = (t) => Math.min(1, Math.max(0, t));
+var springEasingDurationInFrames = 30;
+
+class Easing {
+  static step0(n) {
+    return n > 0 ? 1 : 0;
   }
-  if (typeof easing === "function") {
-    return;
+  static step1(n) {
+    return n >= 1 ? 1 : 0;
   }
-  const expectedLength = inputRangeLength - 1;
-  if (easing.length !== expectedLength) {
-    throw new Error(`When easing is an array, it must have one entry per segment between keyframes (length inputRange.length - 1 = ${expectedLength}), but got length ${easing.length}`);
+  static linear(t) {
+    return t;
   }
-  for (let i = 0;i < easing.length; i++) {
-    if (typeof easing[i] !== "function") {
-      throw new Error(`easing[${i}] must be a function`);
-    }
+  static ease(t) {
+    return Easing.bezier(0.42, 0, 1, 1)(t);
   }
-}
-function assertValidInterpolatePosterizeOption(posterize) {
-  if (posterize === undefined) {
-    return;
+  static quad(t) {
+    return t * t;
   }
-  if (typeof posterize !== "number" || !Number.isFinite(posterize) || posterize <= 0) {
-    throw new Error(`posterize must be a positive finite number, but got ${posterize}`);
+  static cubic(t) {
+    return t * t * t;
   }
-}
-function interpolate(input, inputRange, outputRange, options) {
-  if (typeof input === "undefined") {
-    throw new Error("input can not be undefined");
+  static poly(n) {
+    return (t) => t ** n;
   }
-  if (typeof inputRange === "undefined") {
-    throw new Error("inputRange can not be undefined");
+  static sin(t) {
+    return 1 - Math.cos(t * Math.PI / 2);
   }
-  if (typeof outputRange === "undefined") {
-    throw new Error("outputRange can not be undefined");
+  static circle(t) {
+    const u = clampUnit(t);
+    return 1 - Math.sqrt(1 - u * u);
   }
-  if (inputRange.length !== outputRange.length) {
-    throw new Error("inputRange (" + inputRange.length + ") and outputRange (" + outputRange.length + ") must have the same length");
+  static exp(t) {
+    return 2 ** (10 * (t - 1));
   }
-  checkInfiniteRange("inputRange", inputRange);
-  checkValidInputRange(inputRange);
-  assertValidInterpolateEasingOption(options?.easing, inputRange.length);
-  assertValidInterpolatePosterizeOption(options?.posterize);
-  if (typeof input !== "number") {
-    throw new TypeError("Cannot interpolate an input which is not a number");
+  static elastic(bounciness = 1) {
+    const p = bounciness * Math.PI;
+    return (t) => 1 - Math.cos(t * Math.PI / 2) ** 3 * Math.cos(t * p);
   }
-  if (!Array.isArray(outputRange)) {
-    throw new Error("outputRange must contain only numbers");
+  static back(s = 1.70158) {
+    return (t) => t * t * ((s + 1) * t - s);
   }
-  const hasStringOutput = outputRange.some((output) => typeof output === "string");
-  if (hasStringOutput) {
-    if (!outputRange.every((output) => typeof output === "string" || typeof output === "number")) {
-      throw new TypeError("outputRange must contain only numbers, or supported scale, translate, and rotate strings");
+  static spring(config = {}) {
+    return (t) => {
+      if (t <= 0) {
+        return 0;
+      }
+      if (t >= 1) {
+        return 1;
+      }
+      return spring({
+        fps: springEasingDurationInFrames,
+        frame: t * springEasingDurationInFrames,
+        config,
+        durationInFrames: springEasingDurationInFrames
+      });
+    };
+  }
+  static bounce(t) {
+    const u = clampUnit(t);
+    if (u < 1 / 2.75) {
+      return 7.5625 * u * u;
     }
-    return interpolateString({ input, inputRange, outputRange, options });
+    if (u < 2 / 2.75) {
+      const t2_ = u - 1.5 / 2.75;
+      return 7.5625 * t2_ * t2_ + 0.75;
+    }
+    if (u < 2.5 / 2.75) {
+      const t2_ = u - 2.25 / 2.75;
+      return 7.5625 * t2_ * t2_ + 0.9375;
+    }
+    const t2 = u - 2.625 / 2.75;
+    return 7.5625 * t2 * t2 + 0.984375;
   }
-  if (outputRange.every((output) => Array.isArray(output))) {
-    return interpolateTuple({ input, inputRange, outputRange, options });
+  static bezier(x1, y1, x2, y2) {
+    return bezier(x1, y1, x2, y2);
   }
-  if (!outputRange.every((output) => typeof output === "number")) {
-    throw new TypeError("outputRange must contain only numbers, numeric tuples, or supported scale, translate, and rotate strings");
+  static in(easing) {
+    return easing;
+  }
+  static out(easing) {
+    return (t) => 1 - easing(1 - t);
+  }
+  static inOut(easing) {
+    return (t) => {
+      if (t < 0.5) {
+        return easing(t * 2) / 2;
+      }
+      return 1 - easing((1 - t) * 2) / 2;
+    };
   }
-  checkInfiniteRange("outputRange", outputRange);
-  return interpolateNumber({ input, inputRange, outputRange, options });
 }
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";
@@ -7276,6 +7706,7 @@ function processColor(color) {
 var interpolateColorsRGB = (value, inputRange, colors, options) => {
   const [r2, g, b2, a2] = [red, green, blue, opacity].map((f) => {
     const unrounded = interpolate(value, inputRange, colors.map((c2) => f(c2)), {
+      easing: options?.easing,
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
       posterize: options?.posterize
@@ -7329,6 +7760,7 @@ var interpolateKeyframedStatus = ({
     }
     try {
       return interpolateColors(frame, inputRange, outputs, {
+        easing: easing.map(easingToFn),
         posterize: status.posterize
       });
     } catch {
@@ -7803,7 +8235,8 @@ var wrapInSchema = ({
   schema,
   supportsEffects
 }) => {
-  const flatSchema = getFlatSchemaWithAllKeys(schema);
+  const schemaWithSequenceName = extendSchemaWithSequenceName(schema);
+  const flatSchema = getFlatSchemaWithAllKeys(schemaWithSequenceName);
   const flatKeys = Object.keys(flatSchema);
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
@@ -7842,7 +8275,7 @@ var wrapInSchema = ({
     const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys), runtimeValues);
     const controls = useMemo13(() => {
       return {
-        schema,
+        schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
         overrideId,
         supportsEffects
@@ -7850,7 +8283,7 @@ var wrapInSchema = ({
     }, [currentRuntimeValueDotNotation, overrideId]);
     const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
       return computeEffectiveSchemaValuesDotNotation({
-        schema,
+        schema: schemaWithSequenceName,
         currentValue: currentRuntimeValueDotNotation,
         overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
         propStatus: nodePath === null ? undefined : getPropStatusesCtx(propStatuses, nodePath),
@@ -7863,7 +8296,7 @@ var wrapInSchema = ({
       propStatuses,
       frame
     ]);
-    const activeKeys = selectActiveKeys(schema, valuesDotNotation);
+    const activeKeys = selectActiveKeys(schemaWithSequenceName, valuesDotNotation);
     const mergedProps = mergeValues({
       props,
       valuesDotNotation,
@@ -7905,6 +8338,7 @@ var RegularSequenceRefForwardingFunction = ({
   const parentSequence = useContext17(SequenceContext);
   const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
+  const absoluteFrom = (parentSequence?.absoluteFrom ?? 0) + from;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
     throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
@@ -7942,6 +8376,7 @@ var RegularSequenceRefForwardingFunction = ({
   const cumulatedNegativeFrom = currentSequenceStart - firstFrame;
   const contextValue = useMemo14(() => {
     return {
+      absoluteFrom,
       cumulatedFrom,
       relativeFrom: from,
       cumulatedNegativeFrom,
@@ -7957,6 +8392,7 @@ var RegularSequenceRefForwardingFunction = ({
     };
   }, [
     cumulatedFrom,
+    absoluteFrom,
     from,
     actualDurationInFrames,
     parentSequence,
@@ -7972,7 +8408,7 @@ var RegularSequenceRefForwardingFunction = ({
   const timelineClipName = useMemo14(() => {
     return name ?? "";
   }, [name]);
-  const resolvedDocumentationLink = documentationLink ?? (name === undefined ? "https://www.remotion.dev/docs/sequence" : null);
+  const resolvedDocumentationLink = documentationLink ?? "https://www.remotion.dev/docs/sequence";
   const env = useRemotionEnvironment();
   const isInsideSeries = useContext17(IsInsideSeriesContext);
   const inheritedStack = other?.stack ?? null;
@@ -8599,10 +9035,10 @@ var decodeImage = async ({
   if (!selectedTrack) {
     throw new Error("No selected track");
   }
-  const cache = [];
+  const cache2 = [];
   let durationFound = null;
   const getFrameByIndex = async (frameIndex) => {
-    const foundInCache = cache.find((c2) => c2.frameIndex === frameIndex);
+    const foundInCache = cache2.find((c2) => c2.frameIndex === frameIndex);
     if (foundInCache && foundInCache.frame) {
       return foundInCache;
     }
@@ -8613,7 +9049,7 @@ var decodeImage = async ({
     if (foundInCache) {
       foundInCache.frame = frame.image;
     } else {
-      cache.push({
+      cache2.push({
         frame: frame.image,
         frameIndex,
         timeInSeconds: frame.image.timestamp / 1e6
@@ -8626,7 +9062,7 @@ var decodeImage = async ({
     };
   };
   const clearCache = (closeToTimeInSec) => {
-    const itemsInCache = cache.filter((c2) => c2.frame);
+    const itemsInCache = cache2.filter((c2) => c2.frame);
     const sortByClosestToCurrentTime = itemsInCache.sort((a2, b2) => {
       const aDiff = Math.abs(a2.timeInSeconds - closeToTimeInSec);
       const bDiff = Math.abs(b2.timeInSeconds - closeToTimeInSec);
@@ -8649,7 +9085,7 @@ var decodeImage = async ({
       loopBehavior,
       timeInSec
     });
-    const framesBefore = cache.filter((c2) => c2.timeInSeconds <= actualTimeInSec);
+    const framesBefore = cache2.filter((c2) => c2.timeInSeconds <= actualTimeInSec);
     const biggestIndex = framesBefore.map((c2) => c2.frameIndex).reduce((a2, b2) => Math.max(a2, b2), 0);
     let i = biggestIndex;
     while (true) {
@@ -8692,7 +9128,7 @@ var decodeImage = async ({
       timeInSec
     });
     await ensureFrameBeforeAndAfter({ timeInSec: actualTimeInSec, loopBehavior });
-    const itemsInCache = cache.filter((c2) => c2.frame);
+    const itemsInCache = cache2.filter((c2) => c2.frame);
     const closest = itemsInCache.reduce((a2, b2) => {
       const aDiff = Math.abs(a2.timeInSeconds - actualTimeInSec);
       const bDiff = Math.abs(b2.timeInSeconds - actualTimeInSec);
@@ -8735,7 +9171,7 @@ var animatedImageSchema = {
     max: 10,
     step: 0.1,
     default: 1,
-    description: "Playback Rate",
+    description: "Playback rate",
     hiddenFromList: false,
     keyframable: false
   },
@@ -9153,7 +9589,7 @@ var Loop = ({
       durationInFrames,
       from,
       name: name ?? "<Loop>",
-      _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/loop" : undefined,
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/loop",
       _remotionInternalLoopDisplay: loopDisplay,
       layout: props.layout,
       style,
@@ -11542,7 +11978,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     premountDisplay: sequenceContext?.premountDisplay ?? null,
     postmountDisplay: sequenceContext?.postmountDisplay ?? null,
     loopDisplay: undefined,
-    documentationLink: name === undefined ? "https://www.remotion.dev/docs/html5-audio" : null,
+    documentationLink: "https://www.remotion.dev/docs/html5-audio",
     refForOutline: null
   });
   useMediaPlayback({
@@ -12036,7 +12472,7 @@ var SolidOuter = forwardRef8(({
     durationInFrames,
     name: name ?? "<Solid>",
     _remotionInternalRefForOutline: actualRef,
-    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/solid" : undefined,
+    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid",
     ...props2,
     children: /* @__PURE__ */ jsx24(SolidInner, {
       reference: actualRef,
@@ -12348,7 +12784,7 @@ var HtmlInCanvasInner = forwardRef9(({
   return /* @__PURE__ */ jsx25(Sequence, {
     durationInFrames: resolvedDuration,
     name: name ?? "<HtmlInCanvas>",
-    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/remotion/html-in-canvas" : undefined,
+    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas",
     _experimentalControls: controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     _remotionInternalRefForOutline: actualRef,
@@ -12912,7 +13348,7 @@ var NativeImgInner = ({
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
     _remotionInternalStack: stack,
-    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/img" : undefined,
+    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
     _remotionInternalIsMedia: { type: "image", src },
     name: name ?? "<Img>",
     _experimentalControls: controls,
@@ -13054,7 +13490,7 @@ var ImgInner = ({
     name: name ?? "<Img>",
     showInTimeline,
     stack,
-    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/img" : undefined,
+    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
     _experimentalControls: controls,
     _remotionInternalRefForOutline: refForOutline,
     ...canvasProps
@@ -13066,7 +13502,101 @@ var Img = wrapInSchema({
   supportsEffects: true
 });
 addSequenceStackTraces(Img);
-var compositionsRef = React29.createRef();
+var interactiveElementSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
+  ...sequenceVisualStyleSchema,
+  hidden: hiddenField
+};
+var setRef = (ref, value) => {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+};
+var makeInteractiveElement = (tag, displayName) => {
+  const Inner = forwardRef12((propsWithControls, ref) => {
+    const {
+      durationInFrames,
+      from,
+      hidden,
+      name,
+      showInTimeline,
+      stack,
+      _experimentalControls,
+      ...props2
+    } = propsWithControls;
+    const refForOutline = useRef25(null);
+    const callbackRef = useCallback19((element) => {
+      refForOutline.current = element;
+      setRef(ref, element);
+    }, [ref]);
+    return /* @__PURE__ */ jsx29(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      durationInFrames: durationInFrames ?? Infinity,
+      hidden,
+      name: name ?? displayName,
+      showInTimeline: showInTimeline ?? true,
+      _experimentalControls,
+      _remotionInternalStack: stack,
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive",
+      _remotionInternalRefForOutline: refForOutline,
+      children: React29.createElement(tag, {
+        ...props2,
+        ref: callbackRef
+      })
+    });
+  });
+  Inner.displayName = displayName;
+  const Wrapped = wrapInSchema({
+    Component: Inner,
+    schema: interactiveElementSchema,
+    supportsEffects: false
+  });
+  Wrapped.displayName = displayName;
+  addSequenceStackTraces(Wrapped);
+  return Wrapped;
+};
+var Interactive = {
+  A: makeInteractiveElement("a", "<Interactive.A>"),
+  Article: makeInteractiveElement("article", "<Interactive.Article>"),
+  Aside: makeInteractiveElement("aside", "<Interactive.Aside>"),
+  Button: makeInteractiveElement("button", "<Interactive.Button>"),
+  Circle: makeInteractiveElement("circle", "<Interactive.Circle>"),
+  Code: makeInteractiveElement("code", "<Interactive.Code>"),
+  Div: makeInteractiveElement("div", "<Interactive.Div>"),
+  Ellipse: makeInteractiveElement("ellipse", "<Interactive.Ellipse>"),
+  Em: makeInteractiveElement("em", "<Interactive.Em>"),
+  Footer: makeInteractiveElement("footer", "<Interactive.Footer>"),
+  G: makeInteractiveElement("g", "<Interactive.G>"),
+  H1: makeInteractiveElement("h1", "<Interactive.H1>"),
+  H2: makeInteractiveElement("h2", "<Interactive.H2>"),
+  H3: makeInteractiveElement("h3", "<Interactive.H3>"),
+  H4: makeInteractiveElement("h4", "<Interactive.H4>"),
+  H5: makeInteractiveElement("h5", "<Interactive.H5>"),
+  H6: makeInteractiveElement("h6", "<Interactive.H6>"),
+  Header: makeInteractiveElement("header", "<Interactive.Header>"),
+  Label: makeInteractiveElement("label", "<Interactive.Label>"),
+  Li: makeInteractiveElement("li", "<Interactive.Li>"),
+  Line: makeInteractiveElement("line", "<Interactive.Line>"),
+  Main: makeInteractiveElement("main", "<Interactive.Main>"),
+  Nav: makeInteractiveElement("nav", "<Interactive.Nav>"),
+  Ol: makeInteractiveElement("ol", "<Interactive.Ol>"),
+  P: makeInteractiveElement("p", "<Interactive.P>"),
+  Path: makeInteractiveElement("path", "<Interactive.Path>"),
+  Pre: makeInteractiveElement("pre", "<Interactive.Pre>"),
+  Rect: makeInteractiveElement("rect", "<Interactive.Rect>"),
+  Section: makeInteractiveElement("section", "<Interactive.Section>"),
+  Small: makeInteractiveElement("small", "<Interactive.Small>"),
+  Span: makeInteractiveElement("span", "<Interactive.Span>"),
+  Strong: makeInteractiveElement("strong", "<Interactive.Strong>"),
+  Svg: makeInteractiveElement("svg", "<Interactive.Svg>"),
+  Text: makeInteractiveElement("text", "<Interactive.Text>"),
+  Ul: makeInteractiveElement("ul", "<Interactive.Ul>")
+};
+var compositionsRef = React30.createRef();
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -13077,15 +13607,15 @@ var CompositionManagerProvider = ({
   const [folders, setFolders] = useState18([]);
   const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
   const [compositions, setCompositions] = useState18(initialCompositions);
-  const currentcompositionsRef = useRef25(compositions);
-  const updateCompositions = useCallback19((updateComps) => {
+  const currentcompositionsRef = useRef26(compositions);
+  const updateCompositions = useCallback20((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback19((comp) => {
+  const registerComposition = useCallback20((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -13093,12 +13623,12 @@ var CompositionManagerProvider = ({
       return [...comps, comp];
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback19((id) => {
+  const unregisterComposition = useCallback20((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback19((name, parent, nonce, stack) => {
+  const registerFolder = useCallback20((name, parent, nonce, stack) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -13111,7 +13641,7 @@ var CompositionManagerProvider = ({
       ];
     });
   }, []);
-  const unregisterFolder = useCallback19((name, parent) => {
+  const unregisterFolder = useCallback20((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -13145,9 +13675,9 @@ var CompositionManagerProvider = ({
       canvasContent
     };
   }, [compositions, folders, currentCompositionMetadata, canvasContent]);
-  return /* @__PURE__ */ jsx29(CompositionManager.Provider, {
+  return /* @__PURE__ */ jsx30(CompositionManager.Provider, {
     value: compositionManagerContextValue,
-    children: /* @__PURE__ */ jsx29(CompositionSetters.Provider, {
+    children: /* @__PURE__ */ jsx30(CompositionSetters.Provider, {
       value: compositionManagerSetters,
       children
     })
@@ -13245,7 +13775,7 @@ var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
 };
-var MaxMediaCacheSizeContext = React30.createContext(null);
+var MaxMediaCacheSizeContext = React31.createContext(null);
 var Root = null;
 var listeners = [];
 var getRoot = () => {
@@ -13290,7 +13820,7 @@ var MediaEnabledProvider = ({
   audioEnabled
 }) => {
   const value = useMemo33(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
-  return /* @__PURE__ */ jsx30(MediaEnabledContext.Provider, {
+  return /* @__PURE__ */ jsx31(MediaEnabledContext.Provider, {
     value,
     children
   });
@@ -13314,25 +13844,25 @@ var RemotionRootContexts = ({
   const logging = useMemo34(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
-  return /* @__PURE__ */ jsx31(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx32(LogLevelContext.Provider, {
     value: logging,
-    children: /* @__PURE__ */ jsx31(NonceContext.Provider, {
+    children: /* @__PURE__ */ jsx32(NonceContext.Provider, {
       value: nonceContext,
-      children: /* @__PURE__ */ jsx31(TimelineContextProvider, {
+      children: /* @__PURE__ */ jsx32(TimelineContextProvider, {
         frameState,
-        children: /* @__PURE__ */ jsx31(MediaEnabledProvider, {
+        children: /* @__PURE__ */ jsx32(MediaEnabledProvider, {
           videoEnabled,
           audioEnabled,
-          children: /* @__PURE__ */ jsx31(EditorPropsProvider, {
-            children: /* @__PURE__ */ jsx31(PrefetchProvider, {
-              children: /* @__PURE__ */ jsx31(SequenceManagerProvider, {
-                children: /* @__PURE__ */ jsx31(DurationsContextProvider, {
-                  children: /* @__PURE__ */ jsx31(BufferingProvider, {
-                    children: /* @__PURE__ */ jsx31(SharedAudioContextProvider, {
+          children: /* @__PURE__ */ jsx32(EditorPropsProvider, {
+            children: /* @__PURE__ */ jsx32(PrefetchProvider, {
+              children: /* @__PURE__ */ jsx32(SequenceManagerProvider, {
+                children: /* @__PURE__ */ jsx32(DurationsContextProvider, {
+                  children: /* @__PURE__ */ jsx32(BufferingProvider, {
+                    children: /* @__PURE__ */ jsx32(SharedAudioContextProvider, {
                       audioLatencyHint,
                       audioEnabled,
                       previewSampleRate,
-                      children: /* @__PURE__ */ jsx31(SharedAudioTagsContextProvider, {
+                      children: /* @__PURE__ */ jsx32(SharedAudioTagsContextProvider, {
                         numberOfAudioTags,
                         children
                       })
@@ -13518,7 +14048,7 @@ var resolveVideoConfigOrCatch = (params) => {
     };
   }
 };
-var SequenceStackTracesUpdateContext = React32.createContext(() => {});
+var SequenceStackTracesUpdateContext = React33.createContext(() => {});
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
     const param = window.remotion_envVariables;
@@ -13544,7 +14074,7 @@ var setupEnvVariables = () => {
     window.process.env[key] = env[key];
   });
 };
-var CurrentScaleContext = React33.createContext(null);
+var CurrentScaleContext = React34.createContext(null);
 var PreviewSizeContext = createContext25({
   setSize: () => {
     return;
@@ -13568,7 +14098,7 @@ var calculateScale = ({
   }
   return Number(previewSize);
 };
-var PixelDensityContext = React34.createContext(null);
+var PixelDensityContext = React35.createContext(null);
 var getOffthreadVideoSource = ({
   src,
   transparent,
@@ -13750,7 +14280,7 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback20(() => {
+  const onErr = useCallback21(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -13760,7 +14290,7 @@ var OffthreadVideoForRendering = ({
   const className = useMemo35(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback20((img) => {
+  const onImageFrame = useCallback21((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -13769,7 +14299,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx32(Img, {
+  return /* @__PURE__ */ jsx33(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -13825,7 +14355,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
-  const videoRef = useRef26(null);
+  const videoRef = useRef27(null);
   const sharedSource = useMemo36(() => {
     if (!context.audioContext) {
       return null;
@@ -13835,7 +14365,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React36.useInsertionEffect ?? React36.useLayoutEffect;
+  const effectToUse = React37.useInsertionEffect ?? React37.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -13893,7 +14423,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     mediaVolume
   });
   warnAboutTooHighVolume(userPreferredVolume);
-  const getStack = useCallback21(() => {
+  const getStack = useCallback22(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -13909,7 +14439,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     premountDisplay: parentSequence?.premountDisplay ?? null,
     postmountDisplay: parentSequence?.postmountDisplay ?? null,
     loopDisplay: undefined,
-    documentationLink: name === undefined ? onlyWarnForMediaSeekingError ? "https://www.remotion.dev/docs/offthreadvideo" : "https://www.remotion.dev/docs/html5-video" : null,
+    documentationLink: onlyWarnForMediaSeekingError ? "https://www.remotion.dev/docs/offthreadvideo" : "https://www.remotion.dev/docs/html5-video",
     refForOutline: videoRef
   });
   useMediaPlayback({
@@ -13998,7 +14528,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("error", errorHandler);
     };
   }, [onError, src]);
-  const currentOnDurationCallback = useRef26(onDuration);
+  const currentOnDurationCallback = useRef27(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
   useEffect20(() => {
@@ -14039,7 +14569,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     requestsVideoFrame: Boolean(onVideoFrame),
     isClientSideRendering: false
   });
-  return /* @__PURE__ */ jsx33("video", {
+  return /* @__PURE__ */ jsx34("video", {
+    ...nativeProps,
     ref: videoRef,
     muted: muted || mediaMuted || userPreferredVolume <= 0,
     playsInline: true,
@@ -14048,10 +14579,10 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     style: actualStyle,
     disableRemotePlayback: true,
     crossOrigin: crossOriginValue,
-    ...nativeProps
+    controls: false
   });
 };
-var VideoForPreview = forwardRef12(VideoForDevelopmentRefForwardingFunction);
+var VideoForPreview = forwardRef13(VideoForDevelopmentRefForwardingFunction);
 var InnerOffthreadVideo = (props2) => {
   const {
     startFrom,
@@ -14068,7 +14599,7 @@ var InnerOffthreadVideo = (props2) => {
   if (environment.isClientSideRendering) {
     throw new Error("<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const onDuration = useCallback22(() => {
+  const onDuration = useCallback23(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -14082,13 +14613,13 @@ var InnerOffthreadVideo = (props2) => {
     trimAfter
   });
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx34(Sequence, {
+    return /* @__PURE__ */ jsx35(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx34(InnerOffthreadVideo, {
+      children: /* @__PURE__ */ jsx35(InnerOffthreadVideo, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         trimAfter: undefined,
@@ -14103,7 +14634,7 @@ var InnerOffthreadVideo = (props2) => {
   }
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx34(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx35(OffthreadVideoForRendering, {
       pauseWhenBuffering: pauseWhenBuffering ?? false,
       ...otherProps,
       trimAfter: undefined,
@@ -14125,7 +14656,7 @@ var InnerOffthreadVideo = (props2) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx34(VideoForPreview, {
+  return /* @__PURE__ */ jsx35(VideoForPreview, {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -14174,7 +14705,7 @@ var OffthreadVideo = ({
   if (imageFormat) {
     throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
   }
-  return /* @__PURE__ */ jsx34(InnerOffthreadVideo, {
+  return /* @__PURE__ */ jsx35(InnerOffthreadVideo, {
     acceptableTimeShiftInSeconds,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -14210,20 +14741,20 @@ var OffthreadVideo = ({
 addSequenceStackTraces(OffthreadVideo);
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 function useRemotionContexts() {
-  const compositionManagerCtx = React38.useContext(CompositionManager);
-  const timelineContext = React38.useContext(TimelineContext);
-  const setTimelineContext = React38.useContext(SetTimelineContext);
-  const sequenceContext = React38.useContext(SequenceContext);
-  const nonceContext = React38.useContext(NonceContext);
-  const canUseRemotionHooksContext = React38.useContext(CanUseRemotionHooks);
-  const preloadContext = React38.useContext(PreloadContext);
-  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);
+  const compositionManagerCtx = React39.useContext(CompositionManager);
+  const timelineContext = React39.useContext(TimelineContext);
+  const setTimelineContext = React39.useContext(SetTimelineContext);
+  const sequenceContext = React39.useContext(SequenceContext);
+  const nonceContext = React39.useContext(NonceContext);
+  const canUseRemotionHooksContext = React39.useContext(CanUseRemotionHooks);
+  const preloadContext = React39.useContext(PreloadContext);
+  const resolveCompositionContext = React39.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React39.useContext(RenderAssetManager);
+  const sequenceManagerContext = React39.useContext(SequenceManager);
+  const sequenceManagerRefContext = React39.useContext(SequenceManagerRefContext);
+  const visualModePropStatusesRefContext = React39.useContext(VisualModePropStatusesRefContext);
+  const bufferManagerContext = React39.useContext(BufferingContextReact);
+  const logLevelContext = React39.useContext(LogLevelContext);
   return useMemo37(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -14258,33 +14789,33 @@ function useRemotionContexts() {
 }
 var RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
-  return /* @__PURE__ */ jsx35(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx36(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx35(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx36(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx35(NonceContext.Provider, {
+      children: /* @__PURE__ */ jsx36(NonceContext.Provider, {
         value: contexts.nonceContext,
-        children: /* @__PURE__ */ jsx35(PreloadContext.Provider, {
+        children: /* @__PURE__ */ jsx36(PreloadContext.Provider, {
           value: contexts.preloadContext,
-          children: /* @__PURE__ */ jsx35(CompositionManager.Provider, {
+          children: /* @__PURE__ */ jsx36(CompositionManager.Provider, {
             value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx35(SequenceManagerRefContext.Provider, {
+            children: /* @__PURE__ */ jsx36(SequenceManagerRefContext.Provider, {
               value: contexts.sequenceManagerRefContext,
-              children: /* @__PURE__ */ jsx35(SequenceManager.Provider, {
+              children: /* @__PURE__ */ jsx36(SequenceManager.Provider, {
                 value: contexts.sequenceManagerContext,
-                children: /* @__PURE__ */ jsx35(VisualModePropStatusesRefContext.Provider, {
+                children: /* @__PURE__ */ jsx36(VisualModePropStatusesRefContext.Provider, {
                   value: contexts.visualModePropStatusesRefContext,
-                  children: /* @__PURE__ */ jsx35(RenderAssetManager.Provider, {
+                  children: /* @__PURE__ */ jsx36(RenderAssetManager.Provider, {
                     value: contexts.renderAssetManagerContext,
-                    children: /* @__PURE__ */ jsx35(ResolveCompositionContext.Provider, {
+                    children: /* @__PURE__ */ jsx36(ResolveCompositionContext.Provider, {
                       value: contexts.resolveCompositionContext,
-                      children: /* @__PURE__ */ jsx35(TimelineContext.Provider, {
+                      children: /* @__PURE__ */ jsx36(TimelineContext.Provider, {
                         value: contexts.timelineContext,
-                        children: /* @__PURE__ */ jsx35(SetTimelineContext.Provider, {
+                        children: /* @__PURE__ */ jsx36(SetTimelineContext.Provider, {
                           value: contexts.setTimelineContext,
-                          children: /* @__PURE__ */ jsx35(SequenceContext.Provider, {
+                          children: /* @__PURE__ */ jsx36(SequenceContext.Provider, {
                             value: contexts.sequenceContext,
-                            children: /* @__PURE__ */ jsx35(BufferingContextReact.Provider, {
+                            children: /* @__PURE__ */ jsx36(BufferingContextReact.Provider, {
                               value: contexts.bufferManagerContext,
                               children
                             })
@@ -14432,51 +14963,27 @@ var Internals = {
   useMemoizedEffectDefinitions,
   createEffect,
   createWebGLContextError,
-  createWebGL2ContextError,
-  computeEffectiveSchemaValuesDotNotation,
-  interpolateKeyframedStatus,
-  makeStaticDragOverride,
-  makeKeyframedDragOverride,
-  resolveDragOverrideValue,
-  getStaticDragOverrideValue,
-  OverrideIdsToNodePathsGettersContext,
-  OverrideIdsToNodePathsSettersContext,
-  findPropsToDelete,
-  makeSequencePropsSubscriptionKey,
-  getPropStatusesCtx,
-  getEffectPropStatusesCtx,
-  hiddenField,
-  durationInFramesField,
-  fromField
-};
-var validateFrame = ({
-  allowFloats,
-  durationInFrames,
-  frame
-}) => {
-  if (typeof frame === "undefined") {
-    throw new TypeError(`Argument missing for parameter "frame"`);
-  }
-  if (typeof frame !== "number") {
-    throw new TypeError(`Argument passed for "frame" is not a number: ${frame}`);
-  }
-  if (!Number.isFinite(frame)) {
-    throw new RangeError(`Frame ${frame} is not finite`);
-  }
-  if (frame % 1 !== 0 && !allowFloats) {
-    throw new RangeError(`Argument for frame must be an integer, but got ${frame}`);
-  }
-  if (frame < 0 && frame < -durationInFrames) {
-    throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the lowest frame that can be rendered is ${-durationInFrames}`);
-  }
-  if (frame > durationInFrames - 1) {
-    throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the highest frame that can be rendered is ${durationInFrames - 1}`);
-  }
+  createWebGL2ContextError,
+  computeEffectiveSchemaValuesDotNotation,
+  interpolateKeyframedStatus,
+  makeStaticDragOverride,
+  makeKeyframedDragOverride,
+  resolveDragOverrideValue,
+  getStaticDragOverrideValue,
+  OverrideIdsToNodePathsGettersContext,
+  OverrideIdsToNodePathsSettersContext,
+  findPropsToDelete,
+  makeSequencePropsSubscriptionKey,
+  getPropStatusesCtx,
+  getEffectPropStatusesCtx,
+  hiddenField,
+  durationInFramesField,
+  fromField
 };
 var flattenChildren = (children) => {
-  const childrenArray = React39.Children.toArray(children);
+  const childrenArray = React40.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React39.Fragment) {
+    if (child.type === React40.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -14485,11 +14992,11 @@ var flattenChildren = (children) => {
 };
 var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
-  return /* @__PURE__ */ jsx36(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx37(IsNotInsideSeriesProvider, {
     children
   });
 };
-var SeriesSequence = forwardRef13(SeriesSequenceRefForwardingFunction);
+var SeriesSequence = forwardRef14(SeriesSequenceRefForwardingFunction);
 var SequenceWithoutSchemaWithRef = SequenceWithoutSchema;
 var SeriesInner = (props2) => {
   const childrenValue = useMemo38(() => {
@@ -14533,7 +15040,7 @@ var SeriesInner = (props2) => {
       }
       const currentStartFrame = startFrame + offset;
       startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx36(SequenceWithoutSchemaWithRef, {
+      return /* @__PURE__ */ jsx37(SequenceWithoutSchemaWithRef, {
         ref: castedChild.ref,
         name: name || "<Series.Sequence>",
         _remotionInternalDocumentationLink: name ? undefined : "https://www.remotion.dev/docs/series",
@@ -14544,8 +15051,8 @@ var SeriesInner = (props2) => {
       });
     });
   }, [props2.children]);
-  return /* @__PURE__ */ jsx36(IsInsideSeriesContainer, {
-    children: /* @__PURE__ */ jsx36(Sequence, {
+  return /* @__PURE__ */ jsx37(IsInsideSeriesContainer, {
+    children: /* @__PURE__ */ jsx37(Sequence, {
       layout: "none",
       name: "<Series>",
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series",
@@ -14562,240 +15069,6 @@ var Series = Object.assign(wrapInSchema({
   Sequence: SeriesSequence
 });
 addSequenceStackTraces(Series);
-var validateSpringDuration = (dur) => {
-  if (typeof dur === "undefined") {
-    return;
-  }
-  if (typeof dur !== "number") {
-    throw new TypeError(`A "duration" of a spring must be a "number" but is "${typeof dur}"`);
-  }
-  if (Number.isNaN(dur)) {
-    throw new TypeError('A "duration" of a spring is NaN, which it must not be');
-  }
-  if (!Number.isFinite(dur)) {
-    throw new TypeError('A "duration" of a spring must be finite, but is ' + dur);
-  }
-  if (dur <= 0) {
-    throw new TypeError('A "duration" of a spring must be positive, but is ' + dur);
-  }
-};
-var defaultSpringConfig = {
-  damping: 10,
-  mass: 1,
-  stiffness: 100,
-  overshootClamping: false
-};
-var advanceCache = {};
-function advance({
-  animation,
-  now,
-  config
-}) {
-  const { toValue: toValue2, lastTimestamp, current, velocity } = animation;
-  const deltaTime = Math.min(now - lastTimestamp, 64);
-  if (config.damping <= 0) {
-    throw new Error("Spring damping must be greater than 0, otherwise the spring() animation will never end, causing an infinite loop.");
-  }
-  const c2 = config.damping;
-  const m = config.mass;
-  const k = config.stiffness;
-  const cacheKey = [
-    toValue2,
-    lastTimestamp,
-    current,
-    velocity,
-    c2,
-    m,
-    k,
-    now
-  ].join("-");
-  if (advanceCache[cacheKey]) {
-    return advanceCache[cacheKey];
-  }
-  const v0 = -velocity;
-  const x0 = toValue2 - current;
-  const zeta = c2 / (2 * Math.sqrt(k * m));
-  const omega0 = Math.sqrt(k / m);
-  const omega1 = omega0 * Math.sqrt(1 - zeta ** 2);
-  const t = deltaTime / 1000;
-  const sin1 = Math.sin(omega1 * t);
-  const cos1 = Math.cos(omega1 * t);
-  const underDampedEnvelope = Math.exp(-zeta * omega0 * t);
-  const underDampedFrag1 = underDampedEnvelope * (sin1 * ((v0 + zeta * omega0 * x0) / omega1) + x0 * cos1);
-  const underDampedPosition = toValue2 - underDampedFrag1;
-  const underDampedVelocity = zeta * omega0 * underDampedFrag1 - underDampedEnvelope * (cos1 * (v0 + zeta * omega0 * x0) - omega1 * x0 * sin1);
-  const criticallyDampedEnvelope = Math.exp(-omega0 * t);
-  const criticallyDampedPosition = toValue2 - criticallyDampedEnvelope * (x0 + (v0 + omega0 * x0) * t);
-  const criticallyDampedVelocity = criticallyDampedEnvelope * (v0 * (t * omega0 - 1) + t * x0 * omega0 * omega0);
-  const animationNode = {
-    toValue: toValue2,
-    prevPosition: current,
-    lastTimestamp: now,
-    current: zeta < 1 ? underDampedPosition : criticallyDampedPosition,
-    velocity: zeta < 1 ? underDampedVelocity : criticallyDampedVelocity
-  };
-  advanceCache[cacheKey] = animationNode;
-  return animationNode;
-}
-var calculationCache = {};
-function springCalculation({
-  frame,
-  fps,
-  config = {}
-}) {
-  const from = 0;
-  const to = 1;
-  const cacheKey = [
-    frame,
-    fps,
-    config.damping,
-    config.mass,
-    config.overshootClamping,
-    config.stiffness
-  ].join("-");
-  if (calculationCache[cacheKey]) {
-    return calculationCache[cacheKey];
-  }
-  let animation = {
-    lastTimestamp: 0,
-    current: from,
-    toValue: to,
-    velocity: 0,
-    prevPosition: 0
-  };
-  const frameClamped = Math.max(0, frame);
-  const unevenRest = frameClamped % 1;
-  for (let f = 0;f <= Math.floor(frameClamped); f++) {
-    if (f === Math.floor(frameClamped)) {
-      f += unevenRest;
-    }
-    const time = f / fps * 1000;
-    animation = advance({
-      animation,
-      now: time,
-      config: {
-        ...defaultSpringConfig,
-        ...config
-      }
-    });
-  }
-  calculationCache[cacheKey] = animation;
-  return animation;
-}
-var cache = new Map;
-function measureSpring({
-  fps,
-  config = {},
-  threshold = 0.005
-}) {
-  if (typeof threshold !== "number") {
-    throw new TypeError(`threshold must be a number, got ${threshold} of type ${typeof threshold}`);
-  }
-  if (threshold === 0) {
-    return Infinity;
-  }
-  if (threshold === 1) {
-    return 0;
-  }
-  if (isNaN(threshold)) {
-    throw new TypeError("Threshold is NaN");
-  }
-  if (!Number.isFinite(threshold)) {
-    throw new TypeError("Threshold is not finite");
-  }
-  if (threshold < 0) {
-    throw new TypeError("Threshold is below 0");
-  }
-  const cacheKey = [
-    fps,
-    config.damping,
-    config.mass,
-    config.overshootClamping,
-    config.stiffness,
-    threshold
-  ].join("-");
-  if (cache.has(cacheKey)) {
-    return cache.get(cacheKey);
-  }
-  validateFps(fps, "to the measureSpring() function", false);
-  let frame = 0;
-  let finishedFrame = 0;
-  const calc = () => {
-    return springCalculation({
-      fps,
-      frame,
-      config
-    });
-  };
-  let animation = calc();
-  const calcDifference = () => {
-    return Math.abs(animation.current - animation.toValue);
-  };
-  let difference = calcDifference();
-  while (difference >= threshold) {
-    frame++;
-    animation = calc();
-    difference = calcDifference();
-  }
-  finishedFrame = frame;
-  for (let i = 0;i < 20; i++) {
-    frame++;
-    animation = calc();
-    difference = calcDifference();
-    if (difference >= threshold) {
-      i = 0;
-      finishedFrame = frame + 1;
-    }
-  }
-  cache.set(cacheKey, finishedFrame);
-  return finishedFrame;
-}
-function spring({
-  frame: passedFrame,
-  fps,
-  config = {},
-  from = 0,
-  to = 1,
-  durationInFrames: passedDurationInFrames,
-  durationRestThreshold,
-  delay = 0,
-  reverse = false
-}) {
-  validateSpringDuration(passedDurationInFrames);
-  validateFrame({
-    frame: passedFrame,
-    durationInFrames: Infinity,
-    allowFloats: true
-  });
-  validateFps(fps, "to spring()", false);
-  const needsToCalculateNaturalDuration = reverse || typeof passedDurationInFrames !== "undefined";
-  const naturalDuration = needsToCalculateNaturalDuration ? measureSpring({
-    fps,
-    config,
-    threshold: durationRestThreshold
-  }) : undefined;
-  const naturalDurationGetter = needsToCalculateNaturalDuration ? {
-    get: () => naturalDuration
-  } : {
-    get: () => {
-      throw new Error("did not calculate natural duration, this is an error with Remotion. Please report");
-    }
-  };
-  const reverseProcessed = reverse ? (passedDurationInFrames ?? naturalDurationGetter.get()) - passedFrame : passedFrame;
-  const delayProcessed = reverseProcessed + (reverse ? delay : -delay);
-  const durationProcessed = passedDurationInFrames === undefined ? delayProcessed : delayProcessed / (passedDurationInFrames / naturalDurationGetter.get());
-  if (passedDurationInFrames && delayProcessed > passedDurationInFrames) {
-    return to;
-  }
-  const spr = springCalculation({
-    fps,
-    frame: durationProcessed,
-    config
-  });
-  const inner = config.overshootClamping ? to >= from ? Math.min(spr.current, to) : Math.max(spr.current, to) : spr.current;
-  const interpolated = from === 0 && to === 1 ? inner : interpolate(inner, [0, 1], [from, to]);
-  return interpolated;
-}
 var problematicCharacters = {
   "%3A": ":",
   "%2F": "/",
@@ -15027,7 +15300,7 @@ var VideoForRenderingForwardFunction = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
-  const videoRef = useRef27(null);
+  const videoRef = useRef28(null);
   const sequenceContext = useContext38(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
@@ -15218,13 +15491,13 @@ var VideoForRenderingForwardFunction = ({
       delayRender2
     ]);
   }
-  return /* @__PURE__ */ jsx37("video", {
+  return /* @__PURE__ */ jsx38("video", {
     ref: videoRef,
     disableRemotePlayback: true,
     ...props2
   });
 };
-var VideoForRendering = forwardRef14(VideoForRenderingForwardFunction);
+var VideoForRendering = forwardRef15(VideoForRenderingForwardFunction);
 var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
@@ -15254,7 +15527,7 @@ var VideoForwardingFunction = (props2, ref) => {
     throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback23((src, durationInSeconds) => {
+  const onDuration = useCallback24((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
@@ -15267,7 +15540,7 @@ var VideoForwardingFunction = (props2, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx38(Html5Video, {
+      return /* @__PURE__ */ jsx39(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         stack,
@@ -15275,7 +15548,7 @@ var VideoForwardingFunction = (props2, ref) => {
       });
     }
     const mediaDuration = durationFetched * fps;
-    return /* @__PURE__ */ jsx38(Loop, {
+    return /* @__PURE__ */ jsx39(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
         mediaDurationInFrames: mediaDuration,
@@ -15285,7 +15558,7 @@ var VideoForwardingFunction = (props2, ref) => {
       layout: "none",
       name,
       showInTimeline: false,
-      children: /* @__PURE__ */ jsx38(Html5Video, {
+      children: /* @__PURE__ */ jsx39(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         stack,
@@ -15294,13 +15567,13 @@ var VideoForwardingFunction = (props2, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx38(Sequence, {
+    return /* @__PURE__ */ jsx39(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue === undefined ? undefined : trimAfterValue / (props2.playbackRate ?? 1),
       name,
-      children: /* @__PURE__ */ jsx38(Html5Video, {
+      children: /* @__PURE__ */ jsx39(Html5Video, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         onVideoFrame,
         ...otherProps,
@@ -15315,14 +15588,14 @@ var VideoForwardingFunction = (props2, ref) => {
     volume: props2.volume
   }, "Html5Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx38(VideoForRendering, {
+    return /* @__PURE__ */ jsx39(VideoForRendering, {
       onDuration,
       onVideoFrame: onVideoFrame ?? null,
       ...otherProps,
       ref
     });
   }
-  return /* @__PURE__ */ jsx38(VideoForPreview, {
+  return /* @__PURE__ */ jsx39(VideoForPreview, {
     onlyWarnForMediaSeekingError: false,
     ...otherProps,
     ref,
@@ -15335,7 +15608,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onAutoPlayError: onAutoPlayError ?? undefined
   });
 };
-var Html5Video = forwardRef15(VideoForwardingFunction);
+var Html5Video = forwardRef16(VideoForwardingFunction);
 addSequenceStackTraces(Html5Video);
 checkMultipleRemotionVersions();
 var proxyObj = {};
@@ -15364,9 +15637,9 @@ addSequenceStackTraces(Composition);
 addSequenceStackTraces(Folder);
 
 // ../shapes/dist/esm/index.mjs
-import React, { useCallback as useCallback24, useMemo as useMemo40, useRef as useRef28 } from "react";
+import React, { useCallback as useCallback25, useMemo as useMemo40, useRef as useRef29 } from "react";
 import { version } from "react-dom";
-import { jsx as jsx39, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs3 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
 import { jsx as jsx310 } from "react/jsx-runtime";
 import { jsx as jsx42 } from "react/jsx-runtime";
@@ -15553,11 +15826,11 @@ var RenderSvg = ({
       ...pathStyle ?? {}
     };
   }, [pathStyle]);
-  const outlineRef = useRef28(null);
-  const setSvgRef = useCallback24((node) => {
+  const outlineRef = useRef29(null);
+  const setSvgRef = useCallback25((node) => {
     outlineRef.current = node;
   }, []);
-  const setCanvasRef = useCallback24((canvas) => {
+  const setCanvasRef = useCallback25((canvas) => {
     outlineRef.current = canvas;
   }, []);
   const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects);
@@ -15571,7 +15844,7 @@ var RenderSvg = ({
     xmlns: "http://www.w3.org/2000/svg",
     style: effects.length === 0 || !videoConfig ? actualStyle : { overflow: "visible" },
     children: [
-      /* @__PURE__ */ jsx39("path", {
+      /* @__PURE__ */ jsx40("path", {
         ...reactSupportsTransformOrigin ? {
           transformOrigin
         } : {
@@ -15591,17 +15864,17 @@ var RenderSvg = ({
           const prevY = prevInstruction.y;
           return /* @__PURE__ */ jsxs3(React.Fragment, {
             children: [
-              /* @__PURE__ */ jsx39("path", {
+              /* @__PURE__ */ jsx40("path", {
                 d: `M ${prevX} ${prevY} ${i.cp1x} ${i.cp1y}`,
                 strokeWidth: 2,
                 stroke: "rgba(0, 0, 0, 0.4)"
               }),
-              /* @__PURE__ */ jsx39("path", {
+              /* @__PURE__ */ jsx40("path", {
                 d: `M ${i.x} ${i.y} ${i.cp2x} ${i.cp2y}`,
                 strokeWidth: 2,
                 stroke: "rgba(0, 0, 0, 0.4)"
               }),
-              /* @__PURE__ */ jsx39("circle", {
+              /* @__PURE__ */ jsx40("circle", {
                 cx: i.cp1x,
                 cy: i.cp1y,
                 r: 3,
@@ -15609,7 +15882,7 @@ var RenderSvg = ({
                 strokeWidth: 2,
                 stroke: "black"
               }),
-              /* @__PURE__ */ jsx39("circle", {
+              /* @__PURE__ */ jsx40("circle", {
                 cx: i.cp2x,
                 cy: i.cp2y,
                 r: 3,
@@ -15624,7 +15897,7 @@ var RenderSvg = ({
       }) : null
     ]
   });
-  const content = effects.length === 0 ? svg : /* @__PURE__ */ jsx39(HtmlInCanvas, {
+  const content = effects.length === 0 ? svg : /* @__PURE__ */ jsx40(HtmlInCanvas, {
     ref: setCanvasRef,
     width: Math.ceil(width),
     height: Math.ceil(height),
@@ -15639,7 +15912,7 @@ var RenderSvg = ({
   if (!videoConfig) {
     return svg;
   }
-  return /* @__PURE__ */ jsx39(Sequence, {
+  return /* @__PURE__ */ jsx40(Sequence, {
     layout: "none",
     from,
     hidden,
@@ -17752,8 +18025,8 @@ 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 jsxs5 } from "react/jsx-runtime";
-import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef30 } from "react";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef31 } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
 import React62 from "react";
 import { jsx as jsx63 } from "react/jsx-runtime";
@@ -17764,7 +18037,7 @@ import React72 from "react";
 import { jsx as jsx103 } from "react/jsx-runtime";
 import { jsx as jsx112 } from "react/jsx-runtime";
 import { jsx as jsx122 } from "react/jsx-runtime";
-import * as React362 from "react";
+import * as React36 from "react";
 import * as ReactDOM4 from "react-dom";
 import React112 from "react";
 import * as React8 from "react";
@@ -17803,7 +18076,7 @@ import * as React27 from "react";
 import * as React28 from "react";
 import { jsx as jsx232 } from "react/jsx-runtime";
 import * as React352 from "react";
-import * as React31 from "react";
+import * as React312 from "react";
 import { useState as useState112 } from "react";
 import * as React292 from "react";
 import * as React302 from "react";
@@ -17813,21 +18086,21 @@ import * as React322 from "react";
 import { Fragment as Fragment8, jsx as jsx242, jsxs as jsxs4 } from "react/jsx-runtime";
 import { forwardRef as forwardRef142, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef132, createElement as createElement6 } from "react";
-import * as React37 from "react";
+import * as React372 from "react";
 import { jsx as jsx252, jsxs as jsxs52 } from "react/jsx-runtime";
 import { jsx as jsx262 } from "react/jsx-runtime";
 import * as React49 from "react";
-import * as React382 from "react";
+import * as React38 from "react";
 import { jsx as jsx272 } from "react/jsx-runtime";
 import * as React47 from "react";
-import React40 from "react";
+import React402 from "react";
 import * as React392 from "react";
 import { Fragment as Fragment22, jsx as jsx282 } from "react/jsx-runtime";
 import { jsx as jsx292 } from "react/jsx-runtime";
 import React210 from "react";
 import { jsx as jsx2102 } from "react/jsx-runtime";
-import * as React42 from "react";
-import * as React412 from "react";
+import * as React422 from "react";
+import * as React41 from "react";
 import * as React43 from "react";
 import * as ReactDOM5 from "react-dom";
 import { jsx as jsx302 } from "react/jsx-runtime";
@@ -17845,7 +18118,7 @@ import { jsx as jsx342 } from "react/jsx-runtime";
 import React51 from "react";
 import { jsx as jsx352 } from "react/jsx-runtime";
 import { jsx as jsx362 } from "react/jsx-runtime";
-function setRef(ref, value) {
+function setRef2(ref, value) {
   if (typeof ref === "function") {
     return ref(value);
   } else if (ref !== null && ref !== undefined) {
@@ -17856,7 +18129,7 @@ function composeRefs(...refs) {
   return (node) => {
     let hasCleanup = false;
     const cleanups = refs.map((ref) => {
-      const cleanup = setRef(ref, node);
+      const cleanup = setRef2(ref, node);
       if (!hasCleanup && typeof cleanup == "function") {
         hasCleanup = true;
       }
@@ -17869,7 +18142,7 @@ function composeRefs(...refs) {
           if (typeof cleanup == "function") {
             cleanup();
           } else {
-            setRef(refs[i], null);
+            setRef2(refs[i], null);
           }
         }
       };
@@ -17907,9 +18180,9 @@ function createSlot(ownerName) {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx41(SlotClone, { ...slotProps, ref: forwardedRef, children: React23.isValidElement(newElement) ? React23.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx43(SlotClone, { ...slotProps, ref: forwardedRef, children: React23.isValidElement(newElement) ? React23.cloneElement(newElement, undefined, newChildren) : null });
     }
-    return /* @__PURE__ */ jsx41(SlotClone, { ...slotProps, ref: forwardedRef, children });
+    return /* @__PURE__ */ jsx43(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
@@ -17937,7 +18210,7 @@ function createSlotClone(ownerName) {
 var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
 function createSlottable(ownerName) {
   const Slottable2 = ({ children }) => {
-    return /* @__PURE__ */ jsx41(Fragment2, { children });
+    return /* @__PURE__ */ jsx43(Fragment2, { children });
   };
   Slottable2.displayName = `${ownerName}.Slottable`;
   Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
@@ -18002,7 +18275,7 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React35.useState({
+  const [state, setState] = React32.useState({
     progress: 0,
     isActive: false
   });
@@ -18014,7 +18287,7 @@ var useHoverTransforms = (ref, disabled) => {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React35.useEffect(() => {
+  React32.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -18089,8 +18362,8 @@ var useHoverTransforms = (ref, disabled) => {
   return state;
 };
 var useClickTransforms = (ref) => {
-  const [hoverProgress, setHoverProgress] = React35.useState(0);
-  React35.useEffect(() => {
+  const [hoverProgress, setHoverProgress] = React32.useState(0);
+  React32.useEffect(() => {
     const element = getChildNodeFrom(ref.current);
     if (!element) {
       return;
@@ -18274,7 +18547,7 @@ var Spinner = ({ size, duration }) => {
       height: size
     };
   }, [size]);
-  const pathsRef = useRef30([]);
+  const pathsRef = useRef31([]);
   useEffect23(() => {
     const animate = () => {
       const now = performance.now();
@@ -18293,11 +18566,11 @@ var Spinner = ({ size, duration }) => {
       cancelAnimationFrame(id);
     };
   }, [duration]);
-  return /* @__PURE__ */ jsx43("svg", {
+  return /* @__PURE__ */ jsx44("svg", {
     style,
     viewBox: `0 0 ${viewBox} ${viewBox}`,
     children: new Array(lines).fill(true).map((_, index) => {
-      return /* @__PURE__ */ jsx43("path", {
+      return /* @__PURE__ */ jsx44("path", {
         ref: (el) => pathsRef.current[index] = el,
         style: {
           rotate: `${index * Math.PI * 2 / lines}rad`,
@@ -18320,9 +18593,9 @@ var Button = ({
   ...rest
 }) => {
   const [dimensions, setDimensions] = useState22(null);
-  const ref = useRef29(null);
+  const ref = useRef210(null);
   const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
-  const onPointerEnter = useCallback25((e) => {
+  const onPointerEnter = useCallback26((e) => {
     if (e.pointerType !== "mouse") {
       return;
     }
@@ -18359,7 +18632,7 @@ var Button = ({
   const isDisabled = disabled || loading;
   const isAnchor = !asChild && "href" in rest && rest.href !== undefined;
   const sharedClasses = cn("text-text", "inline-flex", "justify-center", "bg-button-bg", "items-center", "font-brand", "border-solid", "text-[1em]", "rounded-lg", "border-black", "border-2", "border-b-4", "cursor-pointer", "px-4", "h-12", "flex-row", "items-center", "relative", "overflow-hidden", isDisabled && "cursor-default opacity-50", className);
-  const preventInteraction = useCallback25((e) => {
+  const preventInteraction = useCallback26((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
@@ -18655,7 +18928,7 @@ function composeContextScopes(...scopes) {
   createScope.scopeName = baseScope.scopeName;
   return createScope;
 }
-function setRef2(ref, value) {
+function setRef22(ref, value) {
   if (typeof ref === "function") {
     ref(value);
   } else if (ref !== null && ref !== undefined) {
@@ -18663,7 +18936,7 @@ function setRef2(ref, value) {
   }
 }
 function composeRefs2(...refs) {
-  return (node) => refs.forEach((ref) => setRef2(ref, node));
+  return (node) => refs.forEach((ref) => setRef22(ref, node));
 }
 function useComposedRefs2(...refs) {
   return React9.useCallback(composeRefs2(...refs), refs);
@@ -21761,9 +22034,9 @@ var effectCar = createSidecarMedium();
 var nothing = function() {
   return;
 };
-var RemoveScroll = React31.forwardRef(function(props, parentRef) {
-  var ref = React31.useRef(null);
-  var _a = React31.useState({
+var RemoveScroll = React312.forwardRef(function(props, parentRef) {
+  var ref = React312.useRef(null);
+  var _a = React312.useState({
     onScrollCapture: nothing,
     onWheelCapture: nothing,
     onTouchMoveCapture: nothing
@@ -21772,7 +22045,7 @@ var RemoveScroll = React31.forwardRef(function(props, parentRef) {
   var SideCar2 = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = __assign(__assign({}, rest), callbacks);
-  return React31.createElement(React31.Fragment, null, enabled && React31.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React31.cloneElement(React31.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React31.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
+  return React312.createElement(React312.Fragment, null, enabled && React312.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React312.cloneElement(React312.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React312.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
 });
 RemoveScroll.defaultProps = {
   enabled: true,
@@ -22264,9 +22537,9 @@ var Select = (props) => {
     required
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  const [trigger, setTrigger] = React362.useState(null);
-  const [valueNode, setValueNode] = React362.useState(null);
-  const [valueNodeHasChildren, setValueNodeHasChildren] = React362.useState(false);
+  const [trigger, setTrigger] = React36.useState(null);
+  const [valueNode, setValueNode] = React36.useState(null);
+  const [valueNodeHasChildren, setValueNodeHasChildren] = React36.useState(false);
   const direction = useDirection(dir);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
@@ -22278,9 +22551,9 @@ var Select = (props) => {
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const triggerPointerDownPosRef = React362.useRef(null);
+  const triggerPointerDownPosRef = React36.useRef(null);
   const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
-  const [nativeOptionsSet, setNativeOptionsSet] = React362.useState(/* @__PURE__ */ new Set);
+  const [nativeOptionsSet, setNativeOptionsSet] = React36.useState(/* @__PURE__ */ new Set);
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
   return /* @__PURE__ */ jsx242(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs4(SelectProvider, {
     required,
@@ -22302,10 +22575,10 @@ var Select = (props) => {
     children: [
       /* @__PURE__ */ jsx242(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx242(SelectNativeOptionsProvider, {
         scope: props.__scopeSelect,
-        onNativeOptionAdd: React362.useCallback((option) => {
+        onNativeOptionAdd: React36.useCallback((option) => {
           setNativeOptionsSet((prev) => new Set(prev).add(option));
         }, []),
-        onNativeOptionRemove: React362.useCallback((option) => {
+        onNativeOptionRemove: React36.useCallback((option) => {
           setNativeOptionsSet((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
@@ -22333,7 +22606,7 @@ var Select = (props) => {
 };
 Select.displayName = SELECT_NAME;
 var TRIGGER_NAME = "SelectTrigger";
-var SelectTrigger = React362.forwardRef((props, forwardedRef) => {
+var SelectTrigger = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, disabled = false, ...triggerProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
@@ -22401,7 +22674,7 @@ var SelectTrigger = React362.forwardRef((props, forwardedRef) => {
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 var VALUE_NAME = "SelectValue";
-var SelectValue = React362.forwardRef((props, forwardedRef) => {
+var SelectValue = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
   const context = useSelectContext(VALUE_NAME, __scopeSelect);
   const { onValueNodeHasChildrenChange } = context;
@@ -22419,7 +22692,7 @@ var SelectValue = React362.forwardRef((props, forwardedRef) => {
 });
 SelectValue.displayName = VALUE_NAME;
 var ICON_NAME = "SelectIcon";
-var SelectIcon = React362.forwardRef((props, forwardedRef) => {
+var SelectIcon = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, children, ...iconProps } = props;
   return /* @__PURE__ */ jsx242(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
 });
@@ -22430,9 +22703,9 @@ var SelectPortal = (props) => {
 };
 SelectPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "SelectContent";
-var SelectContent = React362.forwardRef((props, forwardedRef) => {
+var SelectContent = React36.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(CONTENT_NAME2, props.__scopeSelect);
-  const [fragment, setFragment] = React362.useState();
+  const [fragment, setFragment] = React36.useState();
   useLayoutEffect22(() => {
     setFragment(new DocumentFragment);
   }, []);
@@ -22446,7 +22719,7 @@ SelectContent.displayName = CONTENT_NAME2;
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME2);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
-var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
+var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     position = "item-aligned",
@@ -22466,20 +22739,20 @@ var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
-  const [content, setContent] = React362.useState(null);
-  const [viewport, setViewport] = React362.useState(null);
+  const [content, setContent] = React36.useState(null);
+  const [viewport, setViewport] = React36.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContent(node));
-  const [selectedItem, setSelectedItem] = React362.useState(null);
-  const [selectedItemText, setSelectedItemText] = React362.useState(null);
+  const [selectedItem, setSelectedItem] = React36.useState(null);
+  const [selectedItemText, setSelectedItemText] = React36.useState(null);
   const getItems = useCollection(__scopeSelect);
-  const [isPositioned, setIsPositioned] = React362.useState(false);
-  const firstValidItemFoundRef = React362.useRef(false);
-  React362.useEffect(() => {
+  const [isPositioned, setIsPositioned] = React36.useState(false);
+  const firstValidItemFoundRef = React36.useRef(false);
+  React36.useEffect(() => {
     if (content)
       return hideOthers(content);
   }, [content]);
   useFocusGuards();
-  const focusFirst2 = React362.useCallback((candidates) => {
+  const focusFirst2 = React36.useCallback((candidates) => {
     const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
     const [lastItem] = restItems.slice(-1);
     const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
@@ -22496,14 +22769,14 @@ var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
         return;
     }
   }, [getItems, viewport]);
-  const focusSelectedItem = React362.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
-  React362.useEffect(() => {
+  const focusSelectedItem = React36.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
+  React36.useEffect(() => {
     if (isPositioned) {
       focusSelectedItem();
     }
   }, [isPositioned, focusSelectedItem]);
   const { onOpenChange, triggerPointerDownPosRef } = context;
-  React362.useEffect(() => {
+  React36.useEffect(() => {
     if (content) {
       let pointerMoveDelta = { x: 0, y: 0 };
       const handlePointerMove = (event) => {
@@ -22533,7 +22806,7 @@ var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
       };
     }
   }, [content, onOpenChange, triggerPointerDownPosRef]);
-  React362.useEffect(() => {
+  React36.useEffect(() => {
     const close = () => onOpenChange(false);
     window.addEventListener("blur", close);
     window.addEventListener("resize", close);
@@ -22550,7 +22823,7 @@ var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
       setTimeout(() => nextItem.ref.current.focus());
     }
   });
-  const itemRefCallback = React362.useCallback((node, value, disabled) => {
+  const itemRefCallback = React36.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -22559,8 +22832,8 @@ var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
         firstValidItemFoundRef.current = true;
     }
   }, [context.value]);
-  const handleItemLeave = React362.useCallback(() => content?.focus(), [content]);
-  const itemTextRefCallback = React362.useCallback((node, value, disabled) => {
+  const handleItemLeave = React36.useCallback(() => content?.focus(), [content]);
+  const itemTextRefCallback = React36.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -22655,18 +22928,18 @@ var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
 });
 SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
-var SelectItemAlignedPosition = React362.forwardRef((props, forwardedRef) => {
+var SelectItemAlignedPosition = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(CONTENT_NAME2, __scopeSelect);
-  const [contentWrapper, setContentWrapper] = React362.useState(null);
-  const [content, setContent] = React362.useState(null);
+  const [contentWrapper, setContentWrapper] = React36.useState(null);
+  const [content, setContent] = React36.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContent(node));
   const getItems = useCollection(__scopeSelect);
-  const shouldExpandOnScrollRef = React362.useRef(false);
-  const shouldRepositionRef = React362.useRef(true);
+  const shouldExpandOnScrollRef = React36.useRef(false);
+  const shouldRepositionRef = React36.useRef(true);
   const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
-  const position = React362.useCallback(() => {
+  const position = React36.useCallback(() => {
     if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
       const triggerRect = context.trigger.getBoundingClientRect();
       const contentRect = content.getBoundingClientRect();
@@ -22747,12 +23020,12 @@ var SelectItemAlignedPosition = React362.forwardRef((props, forwardedRef) => {
     onPlaced
   ]);
   useLayoutEffect22(() => position(), [position]);
-  const [contentZIndex, setContentZIndex] = React362.useState();
+  const [contentZIndex, setContentZIndex] = React36.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  const handleScrollButtonChange = React362.useCallback((node) => {
+  const handleScrollButtonChange = React36.useCallback((node) => {
     if (node && shouldRepositionRef.current === true) {
       position();
       focusSelectedItem?.();
@@ -22786,7 +23059,7 @@ var SelectItemAlignedPosition = React362.forwardRef((props, forwardedRef) => {
 });
 SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
 var POPPER_POSITION_NAME = "SelectPopperPosition";
-var SelectPopperPosition = React362.forwardRef((props, forwardedRef) => {
+var SelectPopperPosition = React36.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     align = "start",
@@ -22816,12 +23089,12 @@ var SelectPopperPosition = React362.forwardRef((props, forwardedRef) => {
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME2, {});
 var VIEWPORT_NAME = "SelectViewport";
-var SelectViewport = React362.forwardRef((props, forwardedRef) => {
+var SelectViewport = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, nonce, ...viewportProps } = props;
   const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
   const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs2(forwardedRef, contentContext.onViewportChange);
-  const prevScrollTopRef = React362.useRef(0);
+  const prevScrollTopRef = React36.useRef(0);
   return /* @__PURE__ */ jsxs4(Fragment8, { children: [
     /* @__PURE__ */ jsx242("style", {
       dangerouslySetInnerHTML: {
@@ -22870,14 +23143,14 @@ var SelectViewport = React362.forwardRef((props, forwardedRef) => {
 SelectViewport.displayName = VIEWPORT_NAME;
 var GROUP_NAME = "SelectGroup";
 var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-var SelectGroup = React362.forwardRef((props, forwardedRef) => {
+var SelectGroup = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...groupProps } = props;
   const groupId = useId();
   return /* @__PURE__ */ jsx242(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx242(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
 });
 SelectGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "SelectLabel";
-var SelectLabel = React362.forwardRef((props, forwardedRef) => {
+var SelectLabel = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...labelProps } = props;
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
   return /* @__PURE__ */ jsx242(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
@@ -22885,7 +23158,7 @@ var SelectLabel = React362.forwardRef((props, forwardedRef) => {
 SelectLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "SelectItem";
 var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-var SelectItem = React362.forwardRef((props, forwardedRef) => {
+var SelectItem = React36.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     value,
@@ -22896,8 +23169,8 @@ var SelectItem = React362.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(ITEM_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
   const isSelected = context.value === value;
-  const [textValue, setTextValue] = React362.useState(textValueProp ?? "");
-  const [isFocused, setIsFocused] = React362.useState(false);
+  const [textValue, setTextValue] = React36.useState(textValueProp ?? "");
+  const [isFocused, setIsFocused] = React36.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => contentContext.itemRefCallback?.(node, value, disabled));
   const textId = useId();
   const handleSelect = () => {
@@ -22915,7 +23188,7 @@ var SelectItem = React362.forwardRef((props, forwardedRef) => {
     disabled,
     textId,
     isSelected,
-    onItemTextChange: React362.useCallback((node) => {
+    onItemTextChange: React36.useCallback((node) => {
       setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
     }, []),
     children: /* @__PURE__ */ jsx242(Collection.ItemSlot, {
@@ -22964,16 +23237,16 @@ var SelectItem = React362.forwardRef((props, forwardedRef) => {
 });
 SelectItem.displayName = ITEM_NAME;
 var ITEM_TEXT_NAME = "SelectItemText";
-var SelectItemText = React362.forwardRef((props, forwardedRef) => {
+var SelectItemText = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, ...itemTextProps } = props;
   const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
   const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
   const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
-  const [itemTextNode, setItemTextNode] = React362.useState(null);
+  const [itemTextNode, setItemTextNode] = React36.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setItemTextNode(node), itemContext.onItemTextChange, (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled));
   const textContent = itemTextNode?.textContent;
-  const nativeOption = React362.useMemo(() => /* @__PURE__ */ jsx242("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
+  const nativeOption = React36.useMemo(() => /* @__PURE__ */ jsx242("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
   const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
   useLayoutEffect22(() => {
     onNativeOptionAdd(nativeOption);
@@ -22986,17 +23259,17 @@ var SelectItemText = React362.forwardRef((props, forwardedRef) => {
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 var ITEM_INDICATOR_NAME = "SelectItemIndicator";
-var SelectItemIndicator = React362.forwardRef((props, forwardedRef) => {
+var SelectItemIndicator = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...itemIndicatorProps } = props;
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
   return itemContext.isSelected ? /* @__PURE__ */ jsx242(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-var SelectScrollUpButton = React362.forwardRef((props, forwardedRef) => {
+var SelectScrollUpButton = React36.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React362.useState(false);
+  const [canScrollUp, setCanScrollUp] = React36.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -23024,10 +23297,10 @@ var SelectScrollUpButton = React362.forwardRef((props, forwardedRef) => {
 });
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-var SelectScrollDownButton = React362.forwardRef((props, forwardedRef) => {
+var SelectScrollDownButton = React36.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React362.useState(false);
+  const [canScrollDown, setCanScrollDown] = React36.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -23055,18 +23328,18 @@ var SelectScrollDownButton = React362.forwardRef((props, forwardedRef) => {
   }) : null;
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-var SelectScrollButtonImpl = React362.forwardRef((props, forwardedRef) => {
+var SelectScrollButtonImpl = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React362.useRef(null);
+  const autoScrollTimerRef = React36.useRef(null);
   const getItems = useCollection(__scopeSelect);
-  const clearAutoScrollTimer = React362.useCallback(() => {
+  const clearAutoScrollTimer = React36.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
       autoScrollTimerRef.current = null;
     }
   }, []);
-  React362.useEffect(() => {
+  React36.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
   useLayoutEffect22(() => {
@@ -23095,13 +23368,13 @@ var SelectScrollButtonImpl = React362.forwardRef((props, forwardedRef) => {
   });
 });
 var SEPARATOR_NAME = "SelectSeparator";
-var SelectSeparator = React362.forwardRef((props, forwardedRef) => {
+var SelectSeparator = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...separatorProps } = props;
   return /* @__PURE__ */ jsx242(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
 });
 SelectSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME2 = "SelectArrow";
-var SelectArrow = React362.forwardRef((props, forwardedRef) => {
+var SelectArrow = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(ARROW_NAME2, __scopeSelect);
@@ -23112,12 +23385,12 @@ SelectArrow.displayName = ARROW_NAME2;
 function shouldShowPlaceholder(value) {
   return value === "" || value === undefined;
 }
-var BubbleSelect = React362.forwardRef((props, forwardedRef) => {
+var BubbleSelect = React36.forwardRef((props, forwardedRef) => {
   const { value, ...selectProps } = props;
-  const ref = React362.useRef(null);
+  const ref = React36.useRef(null);
   const composedRefs = useComposedRefs2(forwardedRef, ref);
   const prevValue = usePrevious(value);
-  React362.useEffect(() => {
+  React36.useEffect(() => {
     const select = ref.current;
     const selectProto = window.HTMLSelectElement.prototype;
     const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
@@ -23133,9 +23406,9 @@ var BubbleSelect = React362.forwardRef((props, forwardedRef) => {
 BubbleSelect.displayName = "BubbleSelect";
 function useTypeaheadSearch(onSearchChange) {
   const handleSearchChange = useCallbackRef(onSearchChange);
-  const searchRef = React362.useRef("");
-  const timerRef = React362.useRef(0);
-  const handleTypeaheadSearch = React362.useCallback((key) => {
+  const searchRef = React36.useRef("");
+  const timerRef = React36.useRef(0);
+  const handleTypeaheadSearch = React36.useCallback((key) => {
     const search = searchRef.current + key;
     handleSearchChange(search);
     (function updateSearch(value) {
@@ -23145,11 +23418,11 @@ function useTypeaheadSearch(onSearchChange) {
         timerRef.current = window.setTimeout(() => updateSearch(""), 1000);
     })(search);
   }, [handleSearchChange]);
-  const resetTypeahead = React362.useCallback(() => {
+  const resetTypeahead = React36.useCallback(() => {
     searchRef.current = "";
     window.clearTimeout(timerRef.current);
   }, []);
-  React362.useEffect(() => {
+  React36.useEffect(() => {
     return () => window.clearTimeout(timerRef.current);
   }, []);
   return [searchRef, handleTypeaheadSearch, resetTypeahead];
@@ -23238,7 +23511,7 @@ var ChevronDown = createLucideIcon("ChevronDown", [
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 var Select2 = Root222;
 var SelectValue2 = Value;
-var SelectTrigger2 = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Trigger, {
+var SelectTrigger2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Trigger, {
   ref,
   className: cn("flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand", className),
   ...props,
@@ -23253,7 +23526,7 @@ var SelectTrigger2 = React37.forwardRef(({ className, children, ...props }, ref)
   ]
 }));
 SelectTrigger2.displayName = Trigger.displayName;
-var SelectScrollUpButton2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollUpButton, {
+var SelectScrollUpButton2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollUpButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -23262,7 +23535,7 @@ var SelectScrollUpButton2 = React37.forwardRef(({ className, ...props }, ref) =>
   })
 }));
 SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
-var SelectScrollDownButton2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollDownButton, {
+var SelectScrollDownButton2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollDownButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -23271,7 +23544,7 @@ var SelectScrollDownButton2 = React37.forwardRef(({ className, ...props }, ref)
   })
 }));
 SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
-var SelectContent2 = React37.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
+var SelectContent2 = React372.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
   children: /* @__PURE__ */ jsxs52(Content2, {
     ref,
     className: cn(" border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
@@ -23288,13 +23561,13 @@ var SelectContent2 = React37.forwardRef(({ className, children, position = "popp
   })
 }));
 SelectContent2.displayName = Content2.displayName;
-var SelectLabel2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Label, {
+var SelectLabel2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Label, {
   ref,
   className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
   ...props
 }));
 SelectLabel2.displayName = Label.displayName;
-var SelectItem2 = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Item, {
+var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Item, {
   ref,
   className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand", className),
   ...props,
@@ -23313,7 +23586,7 @@ var SelectItem2 = React37.forwardRef(({ className, children, ...props }, ref) =>
   ]
 }));
 SelectItem2.displayName = Item.displayName;
-var SelectSeparator2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Separator, {
+var SelectSeparator2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Separator, {
   ref,
   className: cn("-mx-1 my-1 h-px bg-muted", className),
   ...props
@@ -23346,19 +23619,19 @@ function composeEventHandlers2(originalEventHandler, ourEventHandler, { checkFor
 function createContextScope2(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React382.createContext(defaultContext);
+    const BaseContext = React38.createContext(defaultContext);
     const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const value = React382.useMemo(() => context, Object.values(context));
+      const value = React38.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx272(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext222(consumerName, scope) {
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const context = React382.useContext(Context);
+      const context = React38.useContext(Context);
       if (context)
         return context;
       if (defaultContext !== undefined)
@@ -23369,11 +23642,11 @@ function createContextScope2(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React382.createContext(defaultContext);
+      return React38.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React382.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
+      return React38.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
     };
   };
   createScope.scopeName = scopeName;
@@ -23394,7 +23667,7 @@ function composeContextScopes2(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React382.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React38.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -23487,14 +23760,14 @@ function createCollection2(name) {
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React40.useRef(null);
-    const itemMap = React40.useRef(/* @__PURE__ */ new Map).current;
+    const ref = React402.useRef(null);
+    const itemMap = React402.useRef(/* @__PURE__ */ new Map).current;
     return /* @__PURE__ */ jsx292(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = createSlot2(COLLECTION_SLOT_NAME);
-  const CollectionSlot = React40.forwardRef((props, forwardedRef) => {
+  const CollectionSlot = React402.forwardRef((props, forwardedRef) => {
     const { scope, children } = props;
     const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
     const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
@@ -23504,12 +23777,12 @@ function createCollection2(name) {
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = createSlot2(ITEM_SLOT_NAME);
-  const CollectionItemSlot = React40.forwardRef((props, forwardedRef) => {
+  const CollectionItemSlot = React402.forwardRef((props, forwardedRef) => {
     const { scope, children, ...itemData } = props;
-    const ref = React40.useRef(null);
+    const ref = React402.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-    React40.useEffect(() => {
+    React402.useEffect(() => {
       context.itemMap.set(ref, { ref, ...itemData });
       return () => void context.itemMap.delete(ref);
     });
@@ -23518,7 +23791,7 @@ function createCollection2(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React40.useCallback(() => {
+    const getItems = React402.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode)
         return [];
@@ -23836,13 +24109,13 @@ function toSafeIndex(array, index2) {
 function toSafeInteger(number) {
   return number !== number || number === 0 ? 0 : Math.trunc(number);
 }
-var useLayoutEffect222 = globalThis?.document ? React412.useLayoutEffect : () => {};
-var useReactId2 = React42[" useId ".trim().toString()] || (() => {
+var useLayoutEffect222 = globalThis?.document ? React41.useLayoutEffect : () => {};
+var useReactId2 = React422[" useId ".trim().toString()] || (() => {
   return;
 });
 var count3 = 0;
 function useId2(deterministicId) {
-  const [id, setId] = React42.useState(useReactId2());
+  const [id, setId] = React422.useState(useReactId2());
   useLayoutEffect222(() => {
     if (!deterministicId)
       setId((reactId) => reactId ?? String(count3++));
@@ -24453,7 +24726,7 @@ var Triangle22 = (props) => {
 };
 
 // src/components/template-modal-content.tsx
-import { useCallback as useCallback38, useState as useState40 } from "react";
+import { useCallback as useCallback39, useState as useState40 } from "react";
 
 // ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR2 = "-";
@@ -25772,7 +26045,7 @@ function cn2(...inputs) {
 }
 
 // src/helpers/use-el-size.ts
-import { useCallback as useCallback36, useEffect as useEffect41, useMemo as useMemo51, useState as useState38 } from "react";
+import { useCallback as useCallback37, useEffect as useEffect41, useMemo as useMemo51, useState as useState38 } from "react";
 var useElementSize = (ref) => {
   const [size4, setSize] = useState38(null);
   const observer = useMemo51(() => {
@@ -25786,7 +26059,7 @@ var useElementSize = (ref) => {
       });
     });
   }, []);
-  const updateSize = useCallback36(() => {
+  const updateSize = useCallback37(() => {
     if (ref === null) {
       return;
     }
@@ -25820,27 +26093,27 @@ var useMobileLayout = () => {
 };
 
 // src/components/BackButton.tsx
-import { jsx as jsx44, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs6 } from "react/jsx-runtime";
 var BackButton = ({ color, text, link }) => {
-  return /* @__PURE__ */ jsx44("div", {
+  return /* @__PURE__ */ jsx45("div", {
     className: "justify-center items-center font-medium mb-4 block",
     style: {
       fontFamily: "GTPlanar",
       fontWeight: 500,
       color
     },
-    children: /* @__PURE__ */ jsx44(Button, {
+    children: /* @__PURE__ */ jsx45(Button, {
       href: link,
       className: "px-4 rounded-full text-sm h-10",
       children: /* @__PURE__ */ jsxs6("div", {
         className: "flex row items-center justify-center px-4",
         children: [
-          /* @__PURE__ */ jsx44("svg", {
+          /* @__PURE__ */ jsx45("svg", {
             className: "h-4 mr-[15px] inline-block",
             style: { color },
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "0 0 448 512",
-            children: /* @__PURE__ */ jsx44("path", {
+            children: /* @__PURE__ */ jsx45("path", {
               fill: "currentcolor",
               d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"
             })
@@ -25876,15 +26149,15 @@ var CommandCopyButton = ({ copied, customSvg }) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef36, useEffect as useEffect43, useImperativeHandle as useImperativeHandle11, useRef as useRef47 } from "react";
+import { forwardRef as forwardRef37, useEffect as useEffect43, useImperativeHandle as useImperativeHandle11, useRef as useRef48 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef35, useCallback as useCallback37, useEffect as useEffect42, useRef as useRef46, useState as useState39 } from "react";
+import { forwardRef as forwardRef36, useCallback as useCallback38, useEffect as useEffect42, useRef as useRef47, useState as useState39 } from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
-  const targetRef = useRef46(null);
+  const targetRef = useRef47(null);
   useEffect42(() => {
     refs.forEach((ref) => {
       if (!ref)
@@ -25898,13 +26171,13 @@ var useCombinedRefs = function(...refs) {
   }, [refs]);
   return targetRef;
 };
-var VideoPlayerWithControls = forwardRef35(({ playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay }, ref) => {
-  const videoRef = useRef46(null);
+var VideoPlayerWithControls = forwardRef36(({ playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay }, ref) => {
+  const videoRef = useRef47(null);
   const metaRef = useCombinedRefs(ref, videoRef);
-  const playerRef = useRef46(null);
+  const playerRef = useRef47(null);
   const [playerInitTime] = useState39(Date.now());
-  const videoError = useCallback37((event) => onError(event), [onError]);
-  const onImageLoad = useCallback37((event) => {
+  const videoError = useCallback38((event) => onError(event), [onError]);
+  const onImageLoad = useCallback38((event) => {
     const [w, h] = [event.target.width, event.target.height];
     if (w && h) {
       onSize({ width: w, height: h });
@@ -25986,7 +26259,7 @@ var getVideoToPlayUrl = (muxId) => {
   return `https://stream.mux.com/${muxId}.m3u8`;
 };
 var MuxVideoForward = ({ muxId, ...props }, ref) => {
-  const videoRef = useRef47(null);
+  const videoRef = useRef48(null);
   const vidUrl = getVideoToPlayUrl(muxId);
   useImperativeHandle11(ref, () => videoRef.current, []);
   useEffect43(() => {
@@ -26014,7 +26287,7 @@ var MuxVideoForward = ({ muxId, ...props }, ref) => {
     ...props
   });
 };
-var MuxVideo = forwardRef36(MuxVideoForward);
+var MuxVideo = forwardRef37(MuxVideoForward);
 
 // src/components/icons/tailwind.tsx
 import { jsx as jsx49, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -26079,7 +26352,7 @@ var copyTimeout = null;
 var TemplateModalContent = ({ template }) => {
   const [copied, setCopied] = useState40(false);
   const mobileLayout = useMobileLayout();
-  const copyCommand = useCallback38(async (command) => {
+  const copyCommand = useCallback39(async (command) => {
     clearTimeout(copyTimeout);
     const permissionName = "clipboard-write";
     try {