@remotion/promo-pages 4.0.474 → 4.0.475

package/dist/prompts/PromptsSubmit.js

@@ -717,7 +717,7 @@ function composeRefs3(...refs) {
   return (node) => refs.forEach((ref) => setRef3(ref, node));
 }
 function createClientComponent(Component2, options2) {
-  const forwardComponent = React53.forwardRef((props, forwardRef17) => {
+  const forwardComponent = React53.forwardRef((props, forwardRef18) => {
     let parentScopeRef = React53.useContext(ReactScopeContext), scopeRef = React53.useRef(null), stateRef = React53.useRef();
     if (!stateRef.current) {
       const state2 = createInternalState(), component = initComponent(Component2, state2, props, parentScopeRef.current);
@@ -740,7 +740,7 @@ function createClientComponent(Component2, options2) {
         attachToHost(state2, state2.el);
       }
       if (!state2.forwardRef) {
-        setRef3(forwardRef17, state2.component);
+        setRef3(forwardRef18, state2.component);
         state2.forwardRef = true;
       }
       return () => detachFromHost(state2);
@@ -1061,7 +1061,7 @@ function createServerComponent(Component2, options2) {
     let scope = React53.useContext(ReactScopeContext), component = createComponent(Component2, {
       props,
       scope: scope.current
-    }), host = new MaverickServerElement(component), attrs = {}, { style = {}, children, forwardRef: forwardRef17, ...renderProps } = props;
+    }), host = new MaverickServerElement(component), attrs = {}, { style = {}, children, forwardRef: forwardRef18, ...renderProps } = props;
     if (options2.props.size) {
       for (const prop2 of Object.keys(renderProps)) {
         if (!options2.props.has(prop2))
@@ -17369,8 +17369,8 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
 // ../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) {
@@ -18712,7 +18712,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 = ({
@@ -21665,69 +21665,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)
@@ -22896,7 +22898,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.474";
+var VERSION = "4.0.475";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -23263,6 +23265,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,
@@ -23815,6 +23823,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));
 };
@@ -23839,6 +23873,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)) {
@@ -23855,6 +23993,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) {
@@ -24610,6 +24751,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
@@ -24663,6 +24805,7 @@ var interpolateKeyframedStatus = ({
     }
     try {
       return interpolateColors(frame, inputRange, outputs, {
+        easing: easing.map(easingToFn),
         posterize: status.posterize
       });
     } catch {
@@ -26069,7 +26212,7 @@ var animatedImageSchema = {
     max: 10,
     step: 0.1,
     default: 1,
-    description: "Playback Rate",
+    description: "Playback rate",
     hiddenFromList: false,
     keyframable: false
   },
@@ -30400,7 +30543,100 @@ 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,
+      _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,
@@ -30411,15 +30647,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.`);
@@ -30427,12 +30663,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,
@@ -30445,7 +30681,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));
     });
@@ -30479,9 +30715,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
     })
@@ -30579,7 +30815,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 = () => {
@@ -30624,7 +30860,7 @@ var MediaEnabledProvider = ({
   audioEnabled
 }) => {
   const value = useMemo33(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
-  return /* @__PURE__ */ jsx30(MediaEnabledContext.Provider, {
+  return /* @__PURE__ */ jsx31(MediaEnabledContext.Provider, {
     value,
     children
   });
@@ -30648,25 +30884,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
                       })
@@ -30852,7 +31088,7 @@ var resolveVideoConfigOrCatch = (params) => {
     };
   }
 };
-var SequenceStackTracesUpdateContext = React32.createContext(() => {});
+var SequenceStackTracesUpdateContext = React33.createContext(() => {});
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
     const param = window.remotion_envVariables;
@@ -30878,7 +31114,7 @@ var setupEnvVariables = () => {
     window.process.env[key] = env[key];
   });
 };
-var CurrentScaleContext = React33.createContext(null);
+var CurrentScaleContext = React34.createContext(null);
 var PreviewSizeContext = createContext25({
   setSize: () => {
     return;
@@ -30902,7 +31138,7 @@ var calculateScale = ({
   }
   return Number(previewSize);
 };
-var PixelDensityContext = React34.createContext(null);
+var PixelDensityContext = React35.createContext(null);
 var getOffthreadVideoSource = ({
   src,
   transparent,
@@ -31084,7 +31320,7 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback20(() => {
+  const onErr = useCallback21(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -31094,7 +31330,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);
     }
@@ -31103,7 +31339,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx32(Img, {
+  return /* @__PURE__ */ jsx33(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -31159,7 +31395,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;
@@ -31169,7 +31405,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React36.useInsertionEffect ?? React36.useLayoutEffect;
+  const effectToUse = React37.useInsertionEffect ?? React37.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -31227,7 +31463,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     mediaVolume
   });
   warnAboutTooHighVolume(userPreferredVolume);
-  const getStack = useCallback21(() => {
+  const getStack = useCallback22(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -31332,7 +31568,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(() => {
@@ -31373,7 +31609,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     requestsVideoFrame: Boolean(onVideoFrame),
     isClientSideRendering: false
   });
-  return /* @__PURE__ */ jsx33("video", {
+  return /* @__PURE__ */ jsx34("video", {
     ref: videoRef,
     muted: muted || mediaMuted || userPreferredVolume <= 0,
     playsInline: true,
@@ -31385,7 +31621,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     ...nativeProps
   });
 };
-var VideoForPreview = forwardRef12(VideoForDevelopmentRefForwardingFunction);
+var VideoForPreview = forwardRef13(VideoForDevelopmentRefForwardingFunction);
 var InnerOffthreadVideo = (props2) => {
   const {
     startFrom,
@@ -31402,7 +31638,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") {
@@ -31416,13 +31652,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,
@@ -31437,7 +31673,7 @@ var InnerOffthreadVideo = (props2) => {
   }
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx34(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx35(OffthreadVideoForRendering, {
       pauseWhenBuffering: pauseWhenBuffering ?? false,
       ...otherProps,
       trimAfter: undefined,
@@ -31459,7 +31695,7 @@ var InnerOffthreadVideo = (props2) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx34(VideoForPreview, {
+  return /* @__PURE__ */ jsx35(VideoForPreview, {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -31508,7 +31744,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,
@@ -31544,20 +31780,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,
@@ -31592,33 +31828,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
                             })
@@ -31808,9 +32044,9 @@ var validateFrame = ({
   }
 };
 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);
@@ -31819,11 +32055,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(() => {
@@ -31867,7 +32103,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",
@@ -31878,8 +32114,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",
@@ -32361,7 +32597,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();
@@ -32552,13 +32788,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,
@@ -32588,7 +32824,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)];
@@ -32601,7 +32837,7 @@ var VideoForwardingFunction = (props2, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx38(Html5Video, {
+      return /* @__PURE__ */ jsx39(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         stack,
@@ -32609,7 +32845,7 @@ var VideoForwardingFunction = (props2, ref) => {
       });
     }
     const mediaDuration = durationFetched * fps;
-    return /* @__PURE__ */ jsx38(Loop, {
+    return /* @__PURE__ */ jsx39(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
         mediaDurationInFrames: mediaDuration,
@@ -32619,7 +32855,7 @@ var VideoForwardingFunction = (props2, ref) => {
       layout: "none",
       name,
       showInTimeline: false,
-      children: /* @__PURE__ */ jsx38(Html5Video, {
+      children: /* @__PURE__ */ jsx39(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         stack,
@@ -32628,13 +32864,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,
@@ -32649,14 +32885,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,
@@ -32669,7 +32905,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onAutoPlayError: onAutoPlayError ?? undefined
   });
 };
-var Html5Video = forwardRef15(VideoForwardingFunction);
+var Html5Video = forwardRef16(VideoForwardingFunction);
 addSequenceStackTraces(Html5Video);
 checkMultipleRemotionVersions();
 var proxyObj = {};
@@ -32698,9 +32934,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";
@@ -32887,11 +33123,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);
@@ -32905,7 +33141,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
         } : {
@@ -32925,17 +33161,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,
@@ -32943,7 +33179,7 @@ var RenderSvg = ({
                 strokeWidth: 2,
                 stroke: "black"
               }),
-              /* @__PURE__ */ jsx39("circle", {
+              /* @__PURE__ */ jsx40("circle", {
                 cx: i.cp2x,
                 cy: i.cp2y,
                 r: 3,
@@ -32958,7 +33194,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),
@@ -32973,7 +33209,7 @@ var RenderSvg = ({
   if (!videoConfig) {
     return svg;
   }
-  return /* @__PURE__ */ jsx39(Sequence, {
+  return /* @__PURE__ */ jsx40(Sequence, {
     layout: "none",
     from,
     hidden,
@@ -35086,8 +35322,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";
@@ -35098,7 +35334,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";
@@ -35137,7 +35373,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";
@@ -35147,21 +35383,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";
@@ -35179,7 +35415,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) {
@@ -35190,7 +35426,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;
       }
@@ -35203,7 +35439,7 @@ function composeRefs(...refs) {
           if (typeof cleanup == "function") {
             cleanup();
           } else {
-            setRef(refs[i], null);
+            setRef2(refs[i], null);
           }
         }
       };
@@ -35241,9 +35477,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;
@@ -35271,7 +35507,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;
@@ -35336,7 +35572,7 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React35.useState({
+  const [state, setState] = React32.useState({
     progress: 0,
     isActive: false
   });
@@ -35348,7 +35584,7 @@ var useHoverTransforms = (ref, disabled) => {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React35.useEffect(() => {
+  React32.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -35423,8 +35659,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;
@@ -35608,7 +35844,7 @@ var Spinner = ({ size, duration }) => {
       height: size
     };
   }, [size]);
-  const pathsRef = useRef30([]);
+  const pathsRef = useRef31([]);
   useEffect23(() => {
     const animate = () => {
       const now = performance.now();
@@ -35627,11 +35863,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`,
@@ -35654,9 +35890,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;
     }
@@ -35693,7 +35929,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();
   }, []);
@@ -35989,7 +36225,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) {
@@ -35997,7 +36233,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);
@@ -39095,9 +39331,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
@@ -39106,7 +39342,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,
@@ -39598,9 +39834,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,
@@ -39612,9 +39848,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,
@@ -39636,10 +39872,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);
@@ -39667,7 +39903,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);
@@ -39735,7 +39971,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;
@@ -39753,7 +39989,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 || "▼" });
 });
@@ -39764,9 +40000,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);
   }, []);
@@ -39780,7 +40016,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",
@@ -39800,20 +40036,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;
@@ -39830,14 +40066,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 = (event2) => {
@@ -39867,7 +40103,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);
@@ -39884,7 +40120,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) {
@@ -39893,8 +40129,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) {
@@ -39989,18 +40225,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();
@@ -40081,12 +40317,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?.();
@@ -40120,7 +40356,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",
@@ -40150,12 +40386,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: {
@@ -40204,14 +40440,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 });
@@ -40219,7 +40455,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,
@@ -40230,8 +40466,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 = () => {
@@ -40249,7 +40485,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, {
@@ -40298,16 +40534,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);
@@ -40320,17 +40556,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) {
@@ -40358,10 +40594,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) {
@@ -40389,18 +40625,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(() => {
@@ -40429,13 +40665,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);
@@ -40446,12 +40682,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");
@@ -40467,9 +40703,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) {
@@ -40479,11 +40715,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];
@@ -40572,7 +40808,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,
@@ -40587,7 +40823,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,
@@ -40596,7 +40832,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,
@@ -40605,7 +40841,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),
@@ -40622,13 +40858,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,
@@ -40647,7 +40883,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
@@ -40680,19 +40916,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)
@@ -40703,11 +40939,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;
@@ -40728,7 +40964,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;
@@ -40821,14 +41057,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);
@@ -40838,12 +41074,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);
     });
@@ -40852,7 +41088,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 [];
@@ -41170,13 +41406,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++));
@@ -41787,7 +42023,7 @@ var Triangle22 = (props) => {
 };
 
 // src/components/prompts/PromptsSubmit.tsx
-import { useCallback as useCallback38, useEffect as useEffect47, useRef as useRef49, useState as useState45 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect47, useRef as useRef50, useState as useState45 } from "react";
 
 // src/components/prompts/config.ts
 var REMOTION_PRO_ORIGIN = "https://www.remotion.pro";
@@ -41815,80 +42051,80 @@ function useMediaContext2() {
 var AirPlayButtonBridge = createReactComponent(AirPlayButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var AirPlayButton2 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var AirPlayButton2 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(AirPlayButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 AirPlayButton2.displayName = "AirPlayButton";
 var PlayButtonBridge = createReactComponent(PlayButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var PlayButton2 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var PlayButton2 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(PlayButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 PlayButton2.displayName = "PlayButton";
 var CaptionButtonBridge = createReactComponent(CaptionButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var CaptionButton2 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var CaptionButton2 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(CaptionButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 CaptionButton2.displayName = "CaptionButton";
 var FullscreenButtonBridge = createReactComponent(FullscreenButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var FullscreenButton2 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var FullscreenButton2 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(FullscreenButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 FullscreenButton2.displayName = "FullscreenButton";
 var MuteButtonBridge = createReactComponent(MuteButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var MuteButton2 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var MuteButton2 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(MuteButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 MuteButton2.displayName = "MuteButton";
 var PIPButtonBridge = createReactComponent(PIPButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var PIPButton2 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var PIPButton2 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(PIPButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 PIPButton2.displayName = "PIPButton";
 var SeekButtonBridge = createReactComponent(SeekButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var SeekButton2 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var SeekButton2 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(SeekButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 SeekButton2.displayName = "SeekButton";
 var LiveButtonBridge = createReactComponent(LiveButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var LiveButton2 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var LiveButton2 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(LiveButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 LiveButton2.displayName = "LiveButton";
@@ -41903,42 +42139,42 @@ var SliderValueBridge = createReactComponent(SliderValueInstance);
 var SliderBridge = createReactComponent(SliderInstance, {
   events: sliderCallbacks
 });
-var Root$5 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
-  return /* @__PURE__ */ React56.createElement(SliderBridge, { ...props, ref: forwardRef17 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
+var Root$5 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
+  return /* @__PURE__ */ React56.createElement(SliderBridge, { ...props, ref: forwardRef18 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$5.displayName = "Slider";
-var Thumb = React56.forwardRef((props, forwardRef17) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef17 }));
+var Thumb = React56.forwardRef((props, forwardRef18) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef18 }));
 Thumb.displayName = "SliderThumb";
-var Track = React56.forwardRef((props, forwardRef17) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef17 }));
+var Track = React56.forwardRef((props, forwardRef18) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef18 }));
 Track.displayName = "SliderTrack";
-var TrackFill = React56.forwardRef((props, forwardRef17) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef17 }));
+var TrackFill = React56.forwardRef((props, forwardRef18) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef18 }));
 TrackFill.displayName = "SliderTrackFill";
 var PreviewBridge = createReactComponent(SliderPreviewInstance);
-var Preview = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var Preview = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(PreviewBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 Preview.displayName = "SliderPreview";
-var Value2 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var Value2 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(SliderValueBridge, { ...props }, (props2, instance) => {
     const $text = useSignal(() => instance.getValueText(), instance);
-    return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2, ref: forwardRef17 }, $text, children);
+    return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2, ref: forwardRef18 }, $text, children);
   });
 });
 Value2.displayName = "SliderValue";
-var Steps = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var Steps = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   const $min = useSliderState("min"), $max = useSliderState("max"), $step = useSliderState("step"), steps = ($max - $min) / $step;
-  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef17 }, Array.from({ length: Math.floor(steps) + 1 }).map((_, step) => children(step)));
+  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef18 }, Array.from({ length: Math.floor(steps) + 1 }).map((_, step) => children(step)));
 });
 Steps.displayName = "SliderSteps";
 var VolumeSliderBridge = createReactComponent(VolumeSliderInstance, {
   events: sliderCallbacks,
   domEventsRegex: /^onMedia/
 });
-var Root$4 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
-  return /* @__PURE__ */ React56.createElement(VolumeSliderBridge, { ...props, ref: forwardRef17 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
+var Root$4 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
+  return /* @__PURE__ */ React56.createElement(VolumeSliderBridge, { ...props, ref: forwardRef18 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$4.displayName = "VolumeSlider";
 function createVTTCue(startTime = 0, endTime = 0, text = "") {
@@ -41962,20 +42198,20 @@ function appendParamsToURL2(baseUrl, params) {
   return url.toString();
 }
 var ThumbnailBridge = createReactComponent(ThumbnailInstance);
-var Root$3 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var Root$3 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(ThumbnailBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 Root$3.displayName = "Thumbnail";
-var Img2 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var Img2 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   const { src, img, crossOrigin } = useStateContext(ThumbnailInstance.state), $src = useSignal(src), $crossOrigin = useSignal(crossOrigin);
   return /* @__PURE__ */ React56.createElement(Primitive3.img, {
     crossOrigin: $crossOrigin,
     ...props,
     src: $src || undefined,
-    ref: composeRefs3(img.set, forwardRef17)
+    ref: composeRefs3(img.set, forwardRef18)
   }, children);
 });
 Img2.displayName = "ThumbnailImg";
@@ -41987,16 +42223,16 @@ var TimeSliderBridge = createReactComponent(TimeSliderInstance, {
   events: sliderCallbacks,
   domEventsRegex: /^onMedia/
 });
-var Root$2 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var Root$2 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   const $chapters = React56.useMemo(() => signal(null), []);
-  return /* @__PURE__ */ React56.createElement(TimeSliderContext.Provider, { value: { $chapters } }, /* @__PURE__ */ React56.createElement(TimeSliderBridge, { ...props, ref: forwardRef17 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children)));
+  return /* @__PURE__ */ React56.createElement(TimeSliderContext.Provider, { value: { $chapters } }, /* @__PURE__ */ React56.createElement(TimeSliderBridge, { ...props, ref: forwardRef18 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children)));
 });
 Root$2.displayName = "TimeSlider";
 var SliderChaptersBridge = createReactComponent(SliderChaptersInstance);
-var Chapters = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var Chapters = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(SliderChaptersBridge, { ...props }, (props2, instance) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, /* @__PURE__ */ React56.createElement(ChapterTracks, { instance }, children)));
 });
 Chapters.displayName = "SliderChapters";
@@ -42021,7 +42257,7 @@ function ChapterTracks({ instance, children }) {
   });
 }
 ChapterTracks.displayName = "SliderChapterTracks";
-var ChapterTitle = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var ChapterTitle = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   const { $chapters } = React56.useContext(TimeSliderContext), [title, setTitle] = React56.useState();
   React56.useEffect(() => {
     return effect(() => {
@@ -42029,14 +42265,14 @@ var ChapterTitle = React56.forwardRef(({ children, ...props }, forwardRef17) =>
       setTitle(cue?.text || "");
     });
   }, []);
-  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef17 }, title, children);
+  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef18 }, title, children);
 });
 ChapterTitle.displayName = "SliderChapterTitle";
-var Progress = React56.forwardRef((props, forwardRef17) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef17 }));
+var Progress = React56.forwardRef((props, forwardRef18) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef18 }));
 Progress.displayName = "SliderProgress";
 var SliderThumbnailBridge = createReactComponent(SliderThumbnailInstance);
-var ThumbnailRoot = React56.forwardRef(({ children, ...props }, forwardRef17) => {
-  return /* @__PURE__ */ React56.createElement(SliderThumbnailBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2, ref: composeRefs3(props2.ref, forwardRef17) }, children));
+var ThumbnailRoot = React56.forwardRef(({ children, ...props }, forwardRef18) => {
+  return /* @__PURE__ */ React56.createElement(SliderThumbnailBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2, ref: composeRefs3(props2.ref, forwardRef18) }, children));
 });
 ThumbnailRoot.displayName = "SliderThumbnail";
 var Thumbnail2 = {
@@ -42046,15 +42282,15 @@ var Thumbnail2 = {
 var VideoBridge = createReactComponent(SliderVideoInstance, {
   events: ["onCanPlay", "onError"]
 });
-var Video = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var Video = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(VideoBridge, { ...props }, (props2, instance) => /* @__PURE__ */ React56.createElement(VideoProvider2, {
     ...props2,
     instance,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 Video.displayName = "SliderVideo";
-var VideoProvider2 = React56.forwardRef(({ instance, children, ...props }, forwardRef17) => {
+var VideoProvider2 = React56.forwardRef(({ instance, children, ...props }, forwardRef18) => {
   const { canLoad } = useStateContext(mediaState), { src, video, crossOrigin } = instance.$state, $src = useSignal(src), $canLoad = useSignal(canLoad), $crossOrigin = useSignal(crossOrigin);
   return /* @__PURE__ */ React56.createElement(Primitive3.video, {
     style: { maxWidth: "unset" },
@@ -42064,24 +42300,24 @@ var VideoProvider2 = React56.forwardRef(({ instance, children, ...props }, forwa
     playsInline: true,
     preload: $canLoad ? "auto" : "none",
     crossOrigin: $crossOrigin || undefined,
-    ref: composeRefs3(video.set, forwardRef17)
+    ref: composeRefs3(video.set, forwardRef18)
   }, children);
 });
 VideoProvider2.displayName = "SliderVideoProvider";
 var RadioGroupBridge = createReactComponent(RadioGroupInstance, {
   events: ["onChange"]
 });
-var Root$1 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
-  return /* @__PURE__ */ React56.createElement(RadioGroupBridge, { ...props, ref: forwardRef17 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
+var Root$1 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
+  return /* @__PURE__ */ React56.createElement(RadioGroupBridge, { ...props, ref: forwardRef18 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$1.displayName = "RadioGroup";
 var ItemBridge$1 = createReactComponent(RadioInstance, {
   events: ["onChange", "onSelect"]
 });
-var Item$1 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var Item$1 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(ItemBridge$1, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 Item$1.displayName = "RadioItem";
@@ -42089,8 +42325,8 @@ var MenuBridge = createReactComponent(MenuInstance, {
   events: ["onOpen", "onClose"],
   domEventsRegex: /^onMedia/
 });
-var Root4 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
-  return /* @__PURE__ */ React56.createElement(MenuBridge, { ...props, ref: forwardRef17 }, (props2, instance) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
+var Root4 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
+  return /* @__PURE__ */ React56.createElement(MenuBridge, { ...props, ref: forwardRef18 }, (props2, instance) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
     style: { display: !instance.isSubmenu ? "contents" : undefined, ...props2.style }
   }, children));
@@ -42099,14 +42335,14 @@ Root4.displayName = "Menu";
 var ButtonBridge = createReactComponent(MenuButtonInstance, {
   events: ["onSelect"]
 });
-var Button2 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var Button2 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(ButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 Button2.displayName = "MenuButton";
-var Portal3 = React56.forwardRef(({ container: container3 = null, disabled = false, children, ...props }, forwardRef17) => {
+var Portal3 = React56.forwardRef(({ container: container3 = null, disabled = false, children, ...props }, forwardRef18) => {
   let fullscreen = useMediaState("fullscreen"), shouldPortal = disabled === "fullscreen" ? !fullscreen : !disabled;
   const target = React56.useMemo(() => {
     if (IS_SERVER3)
@@ -42117,45 +42353,45 @@ var Portal3 = React56.forwardRef(({ container: container3 = null, disabled = fal
   return !target || !shouldPortal ? children : createPortal3(/* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props,
     style: { display: "contents", ...props.style },
-    ref: forwardRef17
+    ref: forwardRef18
   }, children), target);
 });
 Portal3.displayName = "MenuPortal";
 var ItemsBridge = createReactComponent(MenuItemsInstance);
-var Items = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var Items = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(ItemsBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 Items.displayName = "MenuItems";
 var ItemBridge = createReactComponent(MenuItemInstance);
-var Item3 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var Item3 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(ItemBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 Item3.displayName = "MenuItem";
 var GestureBridge = createReactComponent(GestureInstance, {
   events: ["onWillTrigger", "onTrigger"]
 });
-var Gesture2 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
-  return /* @__PURE__ */ React56.createElement(GestureBridge, { ...props, ref: forwardRef17 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
+var Gesture2 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
+  return /* @__PURE__ */ React56.createElement(GestureBridge, { ...props, ref: forwardRef18 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
 });
 Gesture2.displayName = "Gesture";
 var TimeBridge = createReactComponent(TimeInstance);
-var Time2 = React56.forwardRef(({ children, ...props }, forwardRef17) => {
+var Time2 = React56.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React56.createElement(TimeBridge, { ...props }, (props2, instance) => /* @__PURE__ */ React56.createElement(TimeText, {
     ...props2,
     instance,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 Time2.displayName = "Time";
-var TimeText = React56.forwardRef(({ instance, children, ...props }, forwardRef17) => {
+var TimeText = React56.forwardRef(({ instance, children, ...props }, forwardRef18) => {
   const { timeText } = instance.$state, $timeText = useSignal(timeText);
-  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef17 }, $timeText, children);
+  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef18 }, $timeText, children);
 });
 TimeText.displayName = "TimeText";
 function useMediaPlayer() {
@@ -42259,27 +42495,27 @@ function getTrackValue(track) {
 var MediaAnnouncerBridge = createReactComponent(MediaAnnouncerInstance, {
   events: ["onChange"]
 });
-var MediaAnnouncer2 = React57.forwardRef(({ style, children, ...props }, forwardRef17) => {
+var MediaAnnouncer2 = React57.forwardRef(({ style, children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React57.createElement(MediaAnnouncerBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, {
     ...props2,
     style: { display: "contents", ...style },
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 MediaAnnouncer2.displayName = "MediaAnnouncer";
 var ControlsBridge = createReactComponent(ControlsInstance);
-var Root$52 = React57.forwardRef(({ children, ...props }, forwardRef17) => {
+var Root$52 = React57.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React57.createElement(ControlsBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 Root$52.displayName = "Controls";
 var ControlsGroupBridge = createReactComponent(ControlsGroupInstance);
-var Group = React57.forwardRef(({ children, ...props }, forwardRef17) => {
+var Group = React57.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React57.createElement(ControlsGroupBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 Group.displayName = "ControlsGroup";
@@ -42289,28 +42525,28 @@ function Root$42({ children, ...props }) {
 }
 Root$42.displayName = "Tooltip";
 var TriggerBridge = createReactComponent(TooltipTriggerInstance);
-var Trigger3 = React57.forwardRef(({ children, ...props }, forwardRef17) => {
+var Trigger3 = React57.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React57.createElement(TriggerBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 Trigger3.displayName = "TooltipTrigger";
 var ContentBridge = createReactComponent(TooltipContentInstance);
-var Content4 = React57.forwardRef(({ children, ...props }, forwardRef17) => {
+var Content4 = React57.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React57.createElement(ContentBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 Content4.displayName = "TooltipContent";
 var GoogleCastButtonBridge = createReactComponent(GoogleCastButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var GoogleCastButton2 = React57.forwardRef(({ children, ...props }, forwardRef17) => {
+var GoogleCastButton2 = React57.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React57.createElement(GoogleCastButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 GoogleCastButton2.displayName = "GoogleCastButton";
@@ -42318,29 +42554,29 @@ var QualitySliderBridge = createReactComponent(QualitySliderInstance, {
   events: sliderCallbacks,
   domEventsRegex: /^onMedia/
 });
-var Root$32 = React57.forwardRef(({ children, ...props }, forwardRef17) => {
-  return /* @__PURE__ */ React57.createElement(QualitySliderBridge, { ...props, ref: forwardRef17 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
+var Root$32 = React57.forwardRef(({ children, ...props }, forwardRef18) => {
+  return /* @__PURE__ */ React57.createElement(QualitySliderBridge, { ...props, ref: forwardRef18 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$32.displayName = "QualitySlider";
 var AudioGainSliderBridge = createReactComponent(AudioGainSliderInstance, {
   events: sliderCallbacks,
   domEventsRegex: /^onMedia/
 });
-var Root$22 = React57.forwardRef(({ children, ...props }, forwardRef17) => {
-  return /* @__PURE__ */ React57.createElement(AudioGainSliderBridge, { ...props, ref: forwardRef17 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
+var Root$22 = React57.forwardRef(({ children, ...props }, forwardRef18) => {
+  return /* @__PURE__ */ React57.createElement(AudioGainSliderBridge, { ...props, ref: forwardRef18 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$22.displayName = "AudioGainSlider";
 var SpeedSliderBridge = createReactComponent(SpeedSliderInstance, {
   events: sliderCallbacks,
   domEventsRegex: /^onMedia/
 });
-var Root$12 = React57.forwardRef(({ children, ...props }, forwardRef17) => {
-  return /* @__PURE__ */ React57.createElement(SpeedSliderBridge, { ...props, ref: forwardRef17 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
+var Root$12 = React57.forwardRef(({ children, ...props }, forwardRef18) => {
+  return /* @__PURE__ */ React57.createElement(SpeedSliderBridge, { ...props, ref: forwardRef18 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$12.displayName = "SpeedSlider";
-var Title = React57.forwardRef(({ children, ...props }, forwardRef17) => {
+var Title = React57.forwardRef(({ children, ...props }, forwardRef18) => {
   const $title = useMediaState("title");
-  return /* @__PURE__ */ React57.createElement(Primitive3.span, { ...props, ref: forwardRef17 }, $title, children);
+  return /* @__PURE__ */ React57.createElement(Primitive3.span, { ...props, ref: forwardRef18 }, $title, children);
 });
 Title.displayName = "Title";
 function useActiveTextCues(track) {
@@ -42370,17 +42606,17 @@ function useChapterTitle() {
   const $track = useActiveTextTrack("chapters"), $cues = useActiveTextCues($track);
   return $cues[0]?.text || "";
 }
-var ChapterTitle2 = React57.forwardRef(({ defaultText = "", children, ...props }, forwardRef17) => {
+var ChapterTitle2 = React57.forwardRef(({ defaultText = "", children, ...props }, forwardRef18) => {
   const $chapterTitle = useChapterTitle();
-  return /* @__PURE__ */ React57.createElement(Primitive3.span, { ...props, ref: forwardRef17 }, $chapterTitle || defaultText, children);
+  return /* @__PURE__ */ React57.createElement(Primitive3.span, { ...props, ref: forwardRef18 }, $chapterTitle || defaultText, children);
 });
 ChapterTitle2.displayName = "ChapterTitle";
 var CaptionsBridge = createReactComponent(CaptionsInstance);
-var Captions2 = React57.forwardRef(({ children, ...props }, forwardRef17) => {
-  return /* @__PURE__ */ React57.createElement(CaptionsBridge, { ...props, ref: forwardRef17 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
+var Captions2 = React57.forwardRef(({ children, ...props }, forwardRef18) => {
+  return /* @__PURE__ */ React57.createElement(CaptionsBridge, { ...props, ref: forwardRef18 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
 });
 Captions2.displayName = "Captions";
-var Root6 = React57.forwardRef(({ size: size5 = 96, children, ...props }, forwardRef17) => {
+var Root6 = React57.forwardRef(({ size: size5 = 96, children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React57.createElement("svg", {
     width: size5,
     height: size5,
@@ -42389,7 +42625,7 @@ var Root6 = React57.forwardRef(({ size: size5 = 96, children, ...props }, forwar
     "aria-hidden": "true",
     "data-part": "root",
     ...props,
-    ref: forwardRef17
+    ref: forwardRef18
   }, children);
 });
 var Track2 = React57.forwardRef(({ width = 8, children, ...props }, ref) => /* @__PURE__ */ React57.createElement("circle", {
@@ -42772,11 +43008,11 @@ var MediaPlayerBridge = createReactComponent(MediaPlayerInstance, {
   eventsRegex: /^onHls/,
   domEventsRegex: /^onMedia/
 });
-var MediaPlayer2 = React59.forwardRef(({ aspectRatio, children, ...props }, forwardRef17) => {
+var MediaPlayer2 = React59.forwardRef(({ aspectRatio, children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React59.createElement(MediaPlayerBridge, {
     ...props,
     src: props.src,
-    ref: forwardRef17,
+    ref: forwardRef18,
     style: {
       aspectRatio,
       ...props.style
@@ -42785,9 +43021,9 @@ var MediaPlayer2 = React59.forwardRef(({ aspectRatio, children, ...props }, forw
 });
 MediaPlayer2.displayName = "MediaPlayer";
 var MediaProviderBridge = createReactComponent(MediaProviderInstance);
-var MediaProvider2 = React59.forwardRef(({ loaders = [], children, iframeProps, mediaProps, ...props }, forwardRef17) => {
+var MediaProvider2 = React59.forwardRef(({ loaders = [], children, iframeProps, mediaProps, ...props }, forwardRef18) => {
   const reactLoaders = React59.useMemo(() => loaders.map((Loader) => new Loader), loaders);
-  return /* @__PURE__ */ React59.createElement(MediaProviderBridge, { ...props, loaders: reactLoaders, ref: forwardRef17 }, (props2, instance) => /* @__PURE__ */ React59.createElement("div", { ...props2 }, /* @__PURE__ */ React59.createElement(MediaOutlet, { provider: instance, mediaProps, iframeProps }), children));
+  return /* @__PURE__ */ React59.createElement(MediaProviderBridge, { ...props, loaders: reactLoaders, ref: forwardRef18 }, (props2, instance) => /* @__PURE__ */ React59.createElement("div", { ...props2 }, /* @__PURE__ */ React59.createElement(MediaOutlet, { provider: instance, mediaProps, iframeProps }), children));
 });
 MediaProvider2.displayName = "MediaProvider";
 function MediaOutlet({ provider: provider2, mediaProps, iframeProps }) {
@@ -42857,48 +43093,48 @@ function Track3({ lang, ...props }) {
 }
 Track3.displayName = "Track";
 var ToggleButtonBridge = createReactComponent(ToggleButtonInstance);
-var ToggleButton2 = React59.forwardRef(({ children, ...props }, forwardRef17) => {
+var ToggleButton2 = React59.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React59.createElement(ToggleButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React59.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 ToggleButton2.displayName = "ToggleButton";
 var PosterBridge = createReactComponent(PosterInstance);
-var Poster2 = React59.forwardRef(({ children, ...props }, forwardRef17) => {
+var Poster2 = React59.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React59.createElement(PosterBridge, {
     src: props.asChild && React59.isValidElement(children) ? children.props.src : undefined,
     ...props
   }, (props2, instance) => /* @__PURE__ */ React59.createElement(PosterImg, {
     ...props2,
     instance,
-    ref: composeRefs3(props2.ref, forwardRef17)
+    ref: composeRefs3(props2.ref, forwardRef18)
   }, children));
 });
 Poster2.displayName = "Poster";
-var PosterImg = React59.forwardRef(({ instance, children, ...props }, forwardRef17) => {
+var PosterImg = React59.forwardRef(({ instance, children, ...props }, forwardRef18) => {
   const { src, img, alt, crossOrigin, hidden } = instance.$state, $src = useSignal(src), $alt = useSignal(alt), $crossOrigin = useSignal(crossOrigin), $hidden = useSignal(hidden);
   return /* @__PURE__ */ React59.createElement(Primitive3.img, {
     ...props,
     src: $src || undefined,
     alt: $alt || undefined,
     crossOrigin: $crossOrigin || undefined,
-    ref: composeRefs3(img.set, forwardRef17),
+    ref: composeRefs3(img.set, forwardRef18),
     style: { display: $hidden ? "none" : undefined }
   }, children);
 });
 PosterImg.displayName = "PosterImg";
-var Root7 = React59.forwardRef(({ children, ...props }, forwardRef17) => {
+var Root7 = React59.forwardRef(({ children, ...props }, forwardRef18) => {
   return /* @__PURE__ */ React59.createElement(Primitive3.div, {
     translate: "yes",
     "aria-live": "off",
     "aria-atomic": "true",
     ...props,
-    ref: forwardRef17
+    ref: forwardRef18
   }, children);
 });
 Root7.displayName = "Caption";
-var Text = React59.forwardRef((props, forwardRef17) => {
+var Text = React59.forwardRef((props, forwardRef18) => {
   const textTrack = useMediaState("textTrack"), [activeCue, setActiveCue] = React59.useState();
   React59.useEffect(() => {
     if (!textTrack)
@@ -42918,7 +43154,7 @@ var Text = React59.forwardRef((props, forwardRef17) => {
     dangerouslySetInnerHTML: {
       __html: activeCue?.text || ""
     },
-    ref: forwardRef17
+    ref: forwardRef18
   });
 });
 Text.displayName = "CaptionText";
@@ -43068,7 +43304,7 @@ function createDefaultMediaLayout({
     thumbnails = null,
     translations,
     ...props
-  }, forwardRef17) => {
+  }, forwardRef18) => {
     const media = useMediaContext2(), $load = useSignal(media.$props.load), $canLoad = useMediaState("canLoad"), $viewType = useMediaState("viewType"), $streamType = useMediaState("streamType"), $smallWhen = createComputed(() => {
       return isBoolean(smallLayoutWhen) ? smallLayoutWhen : smallLayoutWhen(media.player.state);
     }, [smallLayoutWhen]), userPrefersAnnouncements = createSignal(true), userPrefersKeyboardAnimations = createSignal(true), isMatch = $viewType === type, isSmallLayout = $smallWhen(), isForcedLayout = isBoolean(smallLayoutWhen), isLoadLayout = $load === "play" && !$canLoad, canRender = $canLoad || isForcedLayout || isLoadLayout, colorSchemeClass = useColorSchemeClass(colorScheme), layoutEl = createSignal(null);
@@ -43081,7 +43317,7 @@ function createDefaultMediaLayout({
       "data-lg": !isSmallLayout ? "" : null,
       "data-size": isSmallLayout ? "sm" : "lg",
       "data-no-scrub-gesture": noScrubGesture ? "" : null,
-      ref: composeRefs3(layoutEl.set, forwardRef17)
+      ref: composeRefs3(layoutEl.set, forwardRef18)
     }, canRender && isMatch ? /* @__PURE__ */ React61.createElement(DefaultLayoutContext.Provider, {
       value: {
         disableTimeSlider,
@@ -43142,9 +43378,9 @@ function DefaultPlayButton({ tooltip }) {
   return /* @__PURE__ */ React61.createElement(DefaultTooltip, { content: $paused ? playText : pauseText, placement: tooltip }, /* @__PURE__ */ React61.createElement(PlayButton2, { className: "vds-play-button vds-button", "aria-label": playText }, $ended ? /* @__PURE__ */ React61.createElement(Icons.PlayButton.Replay, { className: "vds-icon" }) : $paused ? /* @__PURE__ */ React61.createElement(Icons.PlayButton.Play, { className: "vds-icon" }) : /* @__PURE__ */ React61.createElement(Icons.PlayButton.Pause, { className: "vds-icon" })));
 }
 DefaultPlayButton.displayName = "DefaultPlayButton";
-var DefaultMuteButton = React61.forwardRef(({ tooltip }, forwardRef17) => {
+var DefaultMuteButton = React61.forwardRef(({ tooltip }, forwardRef18) => {
   const { icons: Icons } = useDefaultLayoutContext(), muteText = useDefaultLayoutWord("Mute"), unmuteText = useDefaultLayoutWord("Unmute"), $muted = useMediaState("muted"), $volume = useMediaState("volume");
-  return /* @__PURE__ */ React61.createElement(DefaultTooltip, { content: $muted ? unmuteText : muteText, placement: tooltip }, /* @__PURE__ */ React61.createElement(MuteButton2, { className: "vds-mute-button vds-button", "aria-label": muteText, ref: forwardRef17 }, $muted || $volume == 0 ? /* @__PURE__ */ React61.createElement(Icons.MuteButton.Mute, { className: "vds-icon" }) : $volume < 0.5 ? /* @__PURE__ */ React61.createElement(Icons.MuteButton.VolumeLow, { className: "vds-icon" }) : /* @__PURE__ */ React61.createElement(Icons.MuteButton.VolumeHigh, { className: "vds-icon" })));
+  return /* @__PURE__ */ React61.createElement(DefaultTooltip, { content: $muted ? unmuteText : muteText, placement: tooltip }, /* @__PURE__ */ React61.createElement(MuteButton2, { className: "vds-mute-button vds-button", "aria-label": muteText, ref: forwardRef18 }, $muted || $volume == 0 ? /* @__PURE__ */ React61.createElement(Icons.MuteButton.Mute, { className: "vds-icon" }) : $volume < 0.5 ? /* @__PURE__ */ React61.createElement(Icons.MuteButton.VolumeLow, { className: "vds-icon" }) : /* @__PURE__ */ React61.createElement(Icons.MuteButton.VolumeHigh, { className: "vds-icon" })));
 });
 DefaultMuteButton.displayName = "DefaultMuteButton";
 function DefaultCaptionButton({ tooltip }) {
@@ -43920,7 +44156,7 @@ function DefaultTimeSlider() {
   }, /* @__PURE__ */ React61.createElement(Chapters, {
     className: "vds-slider-chapters",
     disabled: width < sliderChaptersMinWidth
-  }, (cues, forwardRef17) => cues.map((cue) => /* @__PURE__ */ React61.createElement("div", { className: "vds-slider-chapter", key: cue.startTime, ref: forwardRef17 }, /* @__PURE__ */ React61.createElement(Track, { className: "vds-slider-track" }), /* @__PURE__ */ React61.createElement(TrackFill, { className: "vds-slider-track-fill vds-slider-track" }), /* @__PURE__ */ React61.createElement(Progress, { className: "vds-slider-progress vds-slider-track" })))), /* @__PURE__ */ React61.createElement(Thumb, { className: "vds-slider-thumb" }), /* @__PURE__ */ React61.createElement(Preview, { className: "vds-slider-preview" }, thumbnails ? /* @__PURE__ */ React61.createElement(Thumbnail2.Root, {
+  }, (cues, forwardRef18) => cues.map((cue) => /* @__PURE__ */ React61.createElement("div", { className: "vds-slider-chapter", key: cue.startTime, ref: forwardRef18 }, /* @__PURE__ */ React61.createElement(Track, { className: "vds-slider-track" }), /* @__PURE__ */ React61.createElement(TrackFill, { className: "vds-slider-track-fill vds-slider-track" }), /* @__PURE__ */ React61.createElement(Progress, { className: "vds-slider-progress vds-slider-track" })))), /* @__PURE__ */ React61.createElement(Thumb, { className: "vds-slider-thumb" }), /* @__PURE__ */ React61.createElement(Preview, { className: "vds-slider-preview" }, thumbnails ? /* @__PURE__ */ React61.createElement(Thumbnail2.Root, {
     src: thumbnails,
     className: "vds-slider-thumbnail vds-thumbnail"
   }, /* @__PURE__ */ React61.createElement(Thumbnail2.Img, null)) : $RemotionSliderThumbnail && isRemotionSrc($src) ? /* @__PURE__ */ React61.createElement($RemotionSliderThumbnail, { className: "vds-slider-thumbnail vds-thumbnail" }) : null, /* @__PURE__ */ React61.createElement(ChapterTitle, { className: "vds-slider-chapter-title" }), /* @__PURE__ */ React61.createElement(Value2, { className: "vds-slider-value" })));
@@ -44024,7 +44260,7 @@ function AudioTitle({ title, chapterTitle }) {
   return /* @__PURE__ */ React61.createElement("span", { className: "vds-title-text" }, slot(slots, "title", title), slot(slots, "chapterTitle", /* @__PURE__ */ React61.createElement("span", { className: "vds-chapter-title" }, chapterTitle)));
 }
 AudioTitle.displayName = "AudioTitle";
-var DefaultKeyboardDisplay = React61.forwardRef(({ icons: Icons, ...props }, forwardRef17) => {
+var DefaultKeyboardDisplay = React61.forwardRef(({ icons: Icons, ...props }, forwardRef18) => {
   const [visible, setVisible] = React61.useState(false), [Icon4, setIcon] = React61.useState(null), [count4, setCount] = React61.useState(0), $lastKeyboardAction = useMediaState("lastKeyboardAction");
   React61.useEffect(() => {
     setCount((n2) => n2 + 1);
@@ -44051,7 +44287,7 @@ var DefaultKeyboardDisplay = React61.forwardRef(({ icons: Icons, ...props }, for
     ...props,
     className,
     "data-action": actionDataAttr,
-    ref: forwardRef17
+    ref: forwardRef18
   }, /* @__PURE__ */ React61.createElement("div", { className: "vds-kb-text-wrapper" }, /* @__PURE__ */ React61.createElement("div", { className: "vds-kb-text" }, $text)), /* @__PURE__ */ React61.createElement("div", { className: "vds-kb-bezel", key: count4 }, /* @__PURE__ */ React61.createElement("div", { className: "vds-kb-icon" }, /* @__PURE__ */ React61.createElement(Icon4, null)))) : null;
 });
 DefaultKeyboardDisplay.displayName = "DefaultKeyboardDisplay";
@@ -44263,10 +44499,10 @@ import"react-dom";
 "use client";
 
 // src/components/prompts/MuxPlayer.tsx
-import { useCallback as useCallback37 } from "react";
-import { jsx as jsx44, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useCallback as useCallback38 } from "react";
+import { jsx as jsx45, jsxs as jsxs6 } from "react/jsx-runtime";
 var MuxPlayer = ({ playbackId, title, rounded = true }) => {
-  const onProviderChange = useCallback37((provider2, _e) => {
+  const onProviderChange = useCallback38((provider2, _e) => {
     if (isHLSProvider(provider2)) {
       provider2.library = () => import("hls.js");
     }
@@ -44281,8 +44517,8 @@ var MuxPlayer = ({ playbackId, title, rounded = true }) => {
     className: `w-full aspect-video bg-black overflow-hidden ${rounded ? "rounded" : ""}`,
     onProviderChange,
     children: [
-      /* @__PURE__ */ jsx44(MediaProvider2, {}),
-      /* @__PURE__ */ jsx44(DefaultVideoLayout, {
+      /* @__PURE__ */ jsx45(MediaProvider2, {}),
+      /* @__PURE__ */ jsx45(DefaultVideoLayout, {
         icons: defaultLayoutIcons,
         slots: {
           captionButton: null,
@@ -44355,15 +44591,15 @@ var PromptsSubmitPage = () => {
     type: "idle"
   });
   const [isDragging, setIsDragging] = useState45(false);
-  const pollRef = useRef49(null);
+  const pollRef = useRef50(null);
   useEffect47(() => {
     return () => {
       if (pollRef.current)
         clearInterval(pollRef.current);
     };
   }, []);
-  const fileInputRef = useRef49(null);
-  const startUpload = useCallback38(async (file) => {
+  const fileInputRef = useRef50(null);
+  const startUpload = useCallback39(async (file) => {
     setUploadState({ type: "uploading", progress: 0 });
     try {
       const res = await fetch(`${REMOTION_PRO_ORIGIN}/api/prompts/upload`, {
@@ -44412,13 +44648,13 @@ var PromptsSubmitPage = () => {
       });
     }
   }, []);
-  const onFileSelect = useCallback38((e2) => {
+  const onFileSelect = useCallback39((e2) => {
     const file = e2.target.files?.[0];
     if (!file)
       return;
     startUpload(file);
   }, [startUpload]);
-  const onDrop = useCallback38((e2) => {
+  const onDrop = useCallback39((e2) => {
     e2.preventDefault();
     setIsDragging(false);
     if (uploadState.type !== "idle")
@@ -44430,21 +44666,21 @@ var PromptsSubmitPage = () => {
       return;
     startUpload(file);
   }, [startUpload, uploadState.type]);
-  const onDragOver = useCallback38((e2) => {
+  const onDragOver = useCallback39((e2) => {
     e2.preventDefault();
   }, []);
-  const onDragEnter = useCallback38(() => {
+  const onDragEnter = useCallback39(() => {
     if (uploadState.type === "idle") {
       setIsDragging(true);
     }
   }, [uploadState.type]);
-  const onDragLeave = useCallback38((e2) => {
+  const onDragLeave = useCallback39((e2) => {
     if (e2.currentTarget === e2.target) {
       setIsDragging(false);
     }
   }, []);
   const submitPossible = title.length > 0 && title.length <= 80 && prompt.length > 0 && usernameType && username.length > 0 && uploadState.type === "ready" && (submitStatus.type === "idle" || submitStatus.type === "error");
-  const submit = useCallback38(async () => {
+  const submit = useCallback39(async () => {
     if (!submitPossible || uploadState.type !== "ready")
       return;
     setSubmitStatus({ type: "submitting" });