@remotion/promo-pages 4.0.490 → 4.0.492

package/dist/prompts/PromptsShow.js

@@ -17367,9 +17367,9 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
 });
 
 // ../design/dist/esm/index.mjs
-import * as React23 from "react";
+import * as React24 from "react";
 import * as React3 from "react";
-import { Fragment as Fragment2, jsx as jsx43 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx43 } from "react/jsx-runtime";
 import React52, { useCallback as useCallback27, useRef as useRef210, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
@@ -18712,7 +18712,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React32, { useEffect as useEffect21, useMemo as useMemo42, useState as useState23 } from "react";
+import React33, { useEffect as useEffect21, useMemo as useMemo42, useState as useState23 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -21505,6 +21505,7 @@ import * as React6 from "react";
 import React7, { useMemo as useMemo6, useRef as useRef2 } from "react";
 import { useContext as useContext8, useMemo as useMemo7 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
+import React9 from "react";
 import {
   forwardRef as forwardRef3,
   useCallback as useCallback6,
@@ -21530,11 +21531,11 @@ import { useContext as useContext13 } from "react";
 import { useContext as useContext12, useMemo as useMemo10 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 import { createContext as createContext14 } from "react";
-import React11, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
+import React12, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
-import React12, { createContext as createContext15 } from "react";
+import React13, { createContext as createContext15 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-import React13, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
+import React14, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
 import { useContext as useContext15, useRef as useRef5 } from "react";
 import { createContext as createContext16 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
@@ -21546,7 +21547,7 @@ import {
   useRef as useRef9,
   useState as useState6
 } from "react";
-import React15, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
+import React16, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
 import { useEffect as useEffect4, useMemo as useMemo15, useRef as useRef7 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
@@ -21562,7 +21563,7 @@ import {
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 import { forwardRef as forwardRef7, useCallback as useCallback14, useContext as useContext30 } from "react";
-import React16, { createContext as createContext18, useMemo as useMemo18 } from "react";
+import React17, { createContext as createContext18, useMemo as useMemo18 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import { useContext as useContext19 } from "react";
 import { createContext as createContext19, useEffect as useEffect6, useState as useState9 } from "react";
@@ -21570,7 +21571,7 @@ import { jsx as jsx17 } from "react/jsx-runtime";
 import { createContext as createContext20, useMemo as useMemo19, useReducer } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import { useCallback as useCallback13 } from "react";
-import React22, {
+import React23, {
   forwardRef as forwardRef5,
   useContext as useContext28,
   useEffect as useEffect14,
@@ -21580,7 +21581,7 @@ import React22, {
   useState as useState14
 } from "react";
 import { useContext as useContext21, useLayoutEffect as useLayoutEffect5, useRef as useRef14 } from "react";
-import React19, {
+import React20, {
   createContext as createContext21,
   createRef as createRef2,
   useCallback as useCallback9,
@@ -21604,7 +21605,7 @@ import {
 } from "react";
 import { useCallback as useCallback11, useMemo as useMemo25, useRef as useRef16 } from "react";
 import { useContext as useContext25, useMemo as useMemo24 } from "react";
-import React20, {
+import React21, {
   useCallback as useCallback10,
   useContext as useContext24,
   useEffect as useEffect9,
@@ -21614,7 +21615,7 @@ import React20, {
   useState as useState12
 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
-import React21 from "react";
+import React22 from "react";
 import { useEffect as useEffect10, useState as useState13 } from "react";
 import { useEffect as useEffect11, useRef as useRef17 } from "react";
 import { useEffect as useEffect13 } from "react";
@@ -21672,10 +21673,10 @@ import {
   useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
-import React29, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
+import React30, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
-import React30 from "react";
+import React31 from "react";
 import {
   useCallback as useCallback21,
   useImperativeHandle as useImperativeHandle8,
@@ -21684,14 +21685,14 @@ import {
   useState as useState19
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
-import React31 from "react";
+import React32 from "react";
 import { useMemo as useMemo34 } from "react";
 import { createContext as createContext24, useContext as useContext34, useMemo as useMemo33 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 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 React34 from "react";
+import React35, { createContext as createContext25 } from "react";
+import React36, { useContext as useContext35 } from "react";
 import { useCallback as useCallback24 } from "react";
 import {
   useCallback as useCallback22,
@@ -21702,7 +21703,7 @@ import {
   useState as useState20
 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
-import React37, {
+import React38, {
   forwardRef as forwardRef13,
   useCallback as useCallback23,
   useContext as useContext37,
@@ -21715,16 +21716,15 @@ import React37, {
 import { useEffect as useEffect18 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
-import React39, { useMemo as useMemo37 } from "react";
+import React40, { useMemo as useMemo37 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
-import {
-  Children,
+import React42, {
   forwardRef as forwardRef14,
   useMemo as useMemo38
 } from "react";
-import React40 from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
-import React42 from "react";
+import React41 from "react";
+import { jsx as jsx37, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+import React43 from "react";
 import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext39 } from "react";
 import {
   forwardRef as forwardRef15,
@@ -22802,6 +22802,7 @@ var InnerComposition = ({
   }
   const { folderName, parentName } = useContext9(FolderContext);
   const stack = compProps.stack ?? null;
+  const componentFromProps = "component" in compProps ? compProps.component : null;
   useEffect2(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
@@ -22819,6 +22820,7 @@ var InnerComposition = ({
       defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
       nonce: nonce.get(),
       parentFolderName: parentName,
+      componentFromProps,
       schema: schema ?? null,
       calculateMetadata: compProps.calculateMetadata ?? null,
       stack
@@ -22837,6 +22839,7 @@ var InnerComposition = ({
     width,
     nonce,
     parentName,
+    componentFromProps,
     schema,
     compProps.calculateMetadata,
     stack,
@@ -22895,11 +22898,30 @@ var Composition = (props) => {
   });
 };
 var componentsToAddStacksTo = [];
+var sequenceComponent = null;
 var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.490";
+var setSequenceComponent = (component) => {
+  sequenceComponent = component;
+};
+var getSequenceComponent = () => sequenceComponent;
+var getSingleChildComponent = (children) => {
+  const mountedChildren = React9.Children.toArray(children);
+  if (mountedChildren.length !== 1) {
+    return null;
+  }
+  const child = mountedChildren[0];
+  if (!React9.isValidElement(child)) {
+    return null;
+  }
+  if (typeof child.type !== "function" && typeof child.type !== "object") {
+    return null;
+  }
+  return child.type;
+};
+var VERSION = "4.0.492";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -23499,7 +23521,7 @@ var sequenceSchemaDefaultLayoutNone = {
 var PremountContext = createContext14({
   premountFramesRemaining: 0
 });
-var SequenceManager = React11.createContext({
+var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
@@ -23508,19 +23530,19 @@ var SequenceManager = React11.createContext({
   },
   sequences: []
 });
-var SequenceManagerRefContext = React11.createContext({
+var SequenceManagerRefContext = React12.createContext({
   current: []
 });
 var makeSequencePropsSubscriptionKey = (key) => {
-  return `${key.nodePath.join(".")}.${key.sequenceKeys.join(".")}.${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
+  return `${key.absolutePath}\x00${key.nodePath.join(".")}\x00${key.sequenceKeys.join(".")}\x00${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
 };
-var VisualModePropStatusesContext = React11.createContext({
+var VisualModePropStatusesContext = React12.createContext({
   propStatuses: {}
 });
-var VisualModePropStatusesRefContext = React11.createContext({
+var VisualModePropStatusesRefContext = React12.createContext({
   current: {}
 });
-var VisualModeDragOverridesContext = React11.createContext({
+var VisualModeDragOverridesContext = React12.createContext({
   getDragOverrides: () => {
     throw new Error("VisualModeDragOverridesContext not initialized");
   },
@@ -23528,7 +23550,7 @@ var VisualModeDragOverridesContext = React11.createContext({
     throw new Error("VisualModeDragOverridesContext not initialized");
   }
 });
-var VisualModeSettersContext = React11.createContext({
+var VisualModeSettersContext = React12.createContext({
   setDragOverrides: () => {
     throw new Error("VisualModeSettersContext not initialized");
   },
@@ -23692,7 +23714,7 @@ var IsNotInsideSeriesProvider = ({ children }) => {
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React12.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React13.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
@@ -25761,6 +25783,9 @@ var computeEffectiveSchemaValuesDotNotation = ({
         shouldResortToDefaultValueIfUndefined: false
       });
     }
+    if (field?.type === "asset" && typeof value === "string" && value.startsWith(FILE_TOKEN)) {
+      value = `${window.remotion_staticBase}/${value.slice(FILE_TOKEN.length)}`;
+    }
     if (value === undefined) {
       propsToDelete.add(key);
     }
@@ -25859,7 +25884,7 @@ var withInteractivitySchema = ({
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
-      return React13.createElement(Component, {
+      return React14.createElement(Component, {
         ...props,
         controls: null,
         ref
@@ -25870,7 +25895,7 @@ var withInteractivitySchema = ({
     const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
     if (props.controls) {
-      return React13.createElement(Component, {
+      return React14.createElement(Component, {
         ...props,
         ref
       });
@@ -25928,7 +25953,7 @@ var withInteractivitySchema = ({
       schemaKeys: activeKeys,
       propsToDelete
     });
-    return React13.createElement(Component, {
+    return React14.createElement(Component, {
       ...mergedProps,
       controls,
       ref
@@ -25954,6 +25979,7 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
   _remotionInternalDocumentationLink: documentationLink,
+  _remotionInternalSingleChildComponent: singleChildComponent,
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
@@ -26100,7 +26126,8 @@ var RegularSequenceRefForwardingFunction = ({
           getStack: () => stackRef.current,
           refForOutline: refForOutline ?? null,
           isInsideSeries,
-          frozenFrame: registeredFrozenFrame
+          frozenFrame: registeredFrozenFrame,
+          singleChildComponent: singleChildComponent ?? null
         });
       } else {
         registerSequence({
@@ -26125,11 +26152,13 @@ var RegularSequenceRefForwardingFunction = ({
           src: isMedia.data.src,
           getStack: () => stackRef.current,
           startMediaFrom: startMediaFrom ?? isMedia.data.startMediaFrom,
+          mediaFrameAtSequenceZero,
           volume: isMedia.data.volumes,
           refForOutline: refForOutline ?? null,
           isInsideSeries,
           frozenFrame: registeredFrozenFrame,
-          frozenMediaFrame
+          frozenMediaFrame,
+          singleChildComponent: singleChildComponent ?? null
         });
       }
       return () => {
@@ -26156,7 +26185,8 @@ var RegularSequenceRefForwardingFunction = ({
       effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
       refForOutline: refForOutline ?? null,
       isInsideSeries,
-      frozenFrame: registeredFrozenFrame
+      frozenFrame: registeredFrozenFrame,
+      singleChildComponent: singleChildComponent ?? null
     });
     return () => {
       unregisterSequence(id);
@@ -26188,7 +26218,9 @@ var RegularSequenceRefForwardingFunction = ({
     isInsideSeries,
     registeredFrozenFrame,
     startMediaFrom,
-    frozenMediaFrame
+    mediaFrameAtSequenceZero,
+    frozenMediaFrame,
+    singleChildComponent
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -26690,7 +26722,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
     ...props
   });
 };
-var Canvas = React15.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React16.forwardRef(CanvasRefForwardingFunction);
 var CACHE_SIZE = 5;
 var getActualTime = ({
   loopBehavior,
@@ -26851,6 +26883,12 @@ var resolveAnimatedImageSource = (src) => {
   return new URL(src, window.origin).href;
 };
 var animatedImageSchema = {
+  src: {
+    type: "asset",
+    default: undefined,
+    description: "Source",
+    keyframable: false
+  },
   ...baseSchema,
   playbackRate: {
     type: "number",
@@ -27268,7 +27306,7 @@ var calculateMediaDuration = ({
 };
 var LoopContext = createContext18(null);
 var useLoop = () => {
-  return React16.useContext(LoopContext);
+  return React17.useContext(LoopContext);
 };
 var Loop = ({
   durationInFrames,
@@ -28119,7 +28157,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       };
     });
   }, [audioContext, numberOfAudioTags]);
-  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
+  const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -28138,7 +28176,9 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
         return;
       }
       if (data === undefined) {
-        current.src = EMPTY_AUDIO;
+        if (current.src !== EMPTY_AUDIO) {
+          current.src = EMPTY_AUDIO;
+        }
         return;
       }
       if (!data) {
@@ -28207,7 +28247,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       if (prevA.id === id) {
         const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting && prevA.postmounting === postmounting;
         if (isTheSame) {
-          return prevA;
+          return prevA.audioMounted === audioMounted ? prevA : { ...prevA, audioMounted };
         }
         changed = true;
         return {
@@ -28219,7 +28259,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
           audioMounted
         };
       }
-      return prevA;
+      return prevA.audioMounted === audioMounted ? prevA : { ...prevA, audioMounted };
     });
     if (changed) {
       rerenderAudios();
@@ -28258,16 +28298,19 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
+  const sharedAudioTagElements = useMemo21(() => {
+    return refs.map(({ id, ref }) => {
+      return /* @__PURE__ */ jsx19("audio", {
+        ref,
+        preload: "metadata",
+        src: EMPTY_AUDIO
+      }, id);
+    });
+  }, [refs]);
   return /* @__PURE__ */ jsxs2(SharedAudioTagsContext.Provider, {
     value: audioTagsValue,
     children: [
-      refs.map(({ id, ref }) => {
-        return /* @__PURE__ */ jsx19("audio", {
-          ref,
-          preload: "metadata",
-          src: EMPTY_AUDIO
-        }, id);
-      }),
+      sharedAudioTagElements,
       children
     ]
   });
@@ -28284,7 +28327,7 @@ var useSharedAudio = ({
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
     }
-    const el = React19.createRef();
+    const el = React20.createRef();
     const mediaElementSourceNode = audioCtx?.audioContext ? makeSharedElementSourceNode({
       audioContext: audioCtx.audioContext,
       ref: el
@@ -28303,7 +28346,7 @@ var useSharedAudio = ({
       }
     };
   });
-  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
+  const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
@@ -28728,6 +28771,7 @@ var useMediaInTimeline = ({
       showInTimeline: true,
       nonce: nonce.get(),
       startMediaFrom: 0 - startsAt,
+      mediaFrameAtSequenceZero: null,
       doesVolumeChange,
       loopDisplay,
       playbackRate,
@@ -28854,7 +28898,7 @@ var useBufferManager = (logLevel, mountTime) => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
-var BufferingContextReact = React20.createContext(null);
+var BufferingContextReact = React21.createContext(null);
 var BufferingProvider = ({ children }) => {
   const { logLevel, mountTime } = useContext24(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
@@ -29067,7 +29111,7 @@ var getMediaSyncAction = (input) => {
   return { type: "none" };
 };
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React21.useRef({
+  const lastUpdate = React22.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -29820,7 +29864,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  const effectToUse = React22.useInsertionEffect ?? React22.useLayoutEffect;
+  const effectToUse = React23.useInsertionEffect ?? React23.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -30361,16 +30405,16 @@ var isMissingPaintRecordError = (error2) => {
   return error2 instanceof DOMException && error2.name === "InvalidStateError";
 };
 var missingPaintRecordMessage = "HtmlInCanvas: Expected the element to be inside the viewport during rendering, but Chrome had no cached paint record for it.";
-var resizeOffscreenCanvas = ({
-  offscreen,
+var resizePaintTarget = ({
+  target,
   width,
   height
 }) => {
-  if (offscreen.width !== width) {
-    offscreen.width = width;
+  if (target.width !== width) {
+    target.width = width;
   }
-  if (offscreen.height !== height) {
-    offscreen.height = height;
+  if (target.height !== height) {
+    target.height = height;
   }
 };
 var defaultOnPaint = ({
@@ -30386,7 +30430,7 @@ var defaultOnPaint = ({
   const transform = ctx.drawElementImage(elementImage, 0, 0);
   element.style.transform = transform.toString();
 };
-var HtmlInCanvasAncestorContext = createContext23(false);
+var HtmlInCanvasAncestorContext = createContext23(null);
 var HtmlInCanvasContent = forwardRef9(({
   width,
   height,
@@ -30398,20 +30442,22 @@ var HtmlInCanvasContent = forwardRef9(({
   controls,
   style
 }, ref) => {
-  const isInsideAncestorHtmlInCanvas = useContext31(HtmlInCanvasAncestorContext);
+  const ancestor = useContext31(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
   const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const { isRendering } = useRemotionEnvironment();
+  const { isClientSideRendering, isRendering } = useRemotionEnvironment();
+  const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
+  const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
   if (!isHtmlInCanvasSupported()) {
     cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
   }
   const canvas2dRef = useRef22(null);
-  const offscreenRef = useRef22(null);
+  const paintTargetRef = useRef22(null);
   const divRef = useRef22(null);
-  const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}`;
+  const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}-${usesDirectLayoutCanvas ? "direct" : "offscreen"}`;
   const setLayoutCanvasRef = useCallback16((node) => {
     canvas2dRef.current = node;
     if (typeof ref === "function") {
@@ -30434,17 +30480,19 @@ var HtmlInCanvasContent = forwardRef9(({
   const initializedRef = useRef22(false);
   const onInitCleanupRef = useRef22(null);
   const unmountedRef = useRef22(false);
+  const ancestorRef = useRef22(ancestor);
+  ancestorRef.current = ancestor;
   const onPaintCb = useCallback16(async () => {
     const element = divRef.current;
     if (!element) {
       throw new Error("Canvas or scene element not found");
     }
-    const offscreen = offscreenRef.current;
-    if (!offscreen) {
-      throw new Error("HtmlInCanvas: offscreen canvas not ready (transferControlToOffscreen failed or canvas is remounting)");
+    const paintTarget = paintTargetRef.current;
+    if (!paintTarget) {
+      throw new Error("HtmlInCanvas: paint target is not ready because the canvas is remounting");
     }
-    resizeOffscreenCanvas({
-      offscreen,
+    resizePaintTarget({
+      target: paintTarget,
       width: canvasWidth,
       height: canvasHeight
     });
@@ -30455,22 +30503,30 @@ var HtmlInCanvasContent = forwardRef9(({
       }
       const handle = delayRender("onPaint");
       if (!initializedRef.current) {
-        let initImage = null;
-        try {
-          initImage = placeholderCanvas.captureElementImage(element);
-        } catch (error2) {
-          if (isMissingPaintRecordError(error2) && !isRendering) {} else if (isMissingPaintRecordError(error2)) {
-            throw new Error(missingPaintRecordMessage);
-          } else {
+        const currentOnInit = onInitRef.current;
+        if (!currentOnInit) {
+          initializedRef.current = true;
+        } else {
+          let initImage;
+          try {
+            initImage = placeholderCanvas.captureElementImage(element);
+          } catch (error2) {
+            if (isMissingPaintRecordError(error2) && canRetryMissingPaintRecord) {
+              continueRender2(handle);
+              return;
+            }
+            if (isMissingPaintRecordError(error2)) {
+              throw new Error(missingPaintRecordMessage);
+            }
             throw error2;
           }
-        }
-        if (initImage) {
           initializedRef.current = true;
-          const currentOnInit = onInitRef.current;
-          if (currentOnInit) {
+          try {
+            if (paintTarget instanceof HTMLCanvasElement) {
+              throw new Error("HtmlInCanvas: onInit requires an OffscreenCanvas paint target");
+            }
             const cleanup = await currentOnInit({
-              canvas: offscreen,
+              canvas: paintTarget,
               element,
               elementImage: initImage,
               pixelDensity: resolvedPixelDensity
@@ -30483,15 +30539,16 @@ var HtmlInCanvasContent = forwardRef9(({
             } else {
               onInitCleanupRef.current = cleanup;
             }
+          } finally {
+            initImage.close();
           }
         }
       }
-      const handler = onPaintRef.current ?? defaultOnPaint;
       let elImage;
       try {
         elImage = placeholderCanvas.captureElementImage(element);
       } catch (error2) {
-        if (isMissingPaintRecordError(error2) && !isRendering) {
+        if (isMissingPaintRecordError(error2) && canRetryMissingPaintRecord) {
           continueRender2(handle);
           return;
         }
@@ -30500,20 +30557,41 @@ var HtmlInCanvasContent = forwardRef9(({
         }
         throw error2;
       }
-      await handler({
-        canvas: offscreen,
-        element,
-        elementImage: elImage,
-        pixelDensity: resolvedPixelDensity
-      });
-      await runEffectChain({
-        state: chainState.get(canvasWidth, canvasHeight),
-        source: offscreen,
-        effects: effectsRef.current,
-        output: offscreen,
-        width: canvasWidth,
-        height: canvasHeight
-      });
+      try {
+        const currentOnPaint = onPaintRef.current;
+        if (currentOnPaint) {
+          if (paintTarget instanceof HTMLCanvasElement) {
+            throw new Error("HtmlInCanvas: onPaint requires an OffscreenCanvas paint target");
+          }
+          const paintResult = currentOnPaint({
+            canvas: paintTarget,
+            element,
+            elementImage: elImage,
+            pixelDensity: resolvedPixelDensity
+          });
+          if (paintResult) {
+            await paintResult;
+          }
+        } else {
+          defaultOnPaint({
+            canvas: paintTarget,
+            element,
+            elementImage: elImage,
+            pixelDensity: resolvedPixelDensity
+          });
+        }
+        await runEffectChain({
+          state: chainState.get(canvasWidth, canvasHeight),
+          source: paintTarget,
+          effects: effectsRef.current,
+          output: paintTarget,
+          width: canvasWidth,
+          height: canvasHeight
+        });
+      } finally {
+        elImage.close();
+      }
+      ancestorRef.current?.requestParentPaint();
       continueRender2(handle);
     } catch (error2) {
       cancelRender2(error2);
@@ -30525,7 +30603,7 @@ var HtmlInCanvasContent = forwardRef9(({
     continueRender2,
     cancelRender2,
     resolvedPixelDensity,
-    isRendering
+    canRetryMissingPaintRecord
   ]);
   useLayoutEffect9(() => {
     const placeholder = canvas2dRef.current;
@@ -30533,10 +30611,10 @@ var HtmlInCanvasContent = forwardRef9(({
       throw new Error("Canvas not found");
     }
     placeholder.layoutSubtree = true;
-    const offscreen = placeholder.transferControlToOffscreen();
-    offscreenRef.current = offscreen;
-    resizeOffscreenCanvas({
-      offscreen,
+    const paintTarget = usesDirectLayoutCanvas ? placeholder : placeholder.transferControlToOffscreen();
+    paintTargetRef.current = paintTarget;
+    resizePaintTarget({
+      target: paintTarget,
       width: canvasWidth,
       height: canvasHeight
     });
@@ -30545,13 +30623,19 @@ var HtmlInCanvasContent = forwardRef9(({
     placeholder.addEventListener("paint", onPaintCb);
     return () => {
       placeholder.removeEventListener("paint", onPaintCb);
-      offscreenRef.current = null;
+      paintTargetRef.current = null;
       initializedRef.current = false;
       unmountedRef.current = true;
       onInitCleanupRef.current?.();
       onInitCleanupRef.current = null;
     };
-  }, [onPaintCb, cancelRender2, canvasWidth, canvasHeight]);
+  }, [
+    onPaintCb,
+    cancelRender2,
+    canvasWidth,
+    canvasHeight,
+    usesDirectLayoutCanvas
+  ]);
   const onPaintChangedRef = useRef22(false);
   useLayoutEffect9(() => {
     if (!onPaintChangedRef.current) {
@@ -30590,11 +30674,15 @@ var HtmlInCanvasContent = forwardRef9(({
       ...style ?? {}
     };
   }, [height, style, width]);
-  if (isInsideAncestorHtmlInCanvas) {
-    throw new Error("<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.");
-  }
+  const ancestorValue = useMemo30(() => {
+    return {
+      requestParentPaint: () => {
+        canvas2dRef.current?.requestPaint?.();
+      }
+    };
+  }, []);
   return /* @__PURE__ */ jsx25(HtmlInCanvasAncestorContext.Provider, {
-    value: true,
+    value: ancestorValue,
     children: /* @__PURE__ */ jsx25("canvas", {
       ref: setLayoutCanvasRef,
       width: canvasWidth,
@@ -31322,6 +31410,12 @@ var NativeImgInner = ({
 };
 var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
+  src: {
+    type: "asset",
+    default: undefined,
+    description: "Source",
+    keyframable: false
+  },
   ...baseSchema,
   ...transformSchema
 };
@@ -31532,7 +31626,7 @@ var makeInteractiveElement = (tag, displayName) => {
       _remotionInternalStack: stack,
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive",
       outlineRef: refForOutline,
-      children: React29.createElement(tag, {
+      children: React30.createElement(tag, {
         ...props2,
         ref: callbackRef
       })
@@ -31596,7 +31690,7 @@ var Interactive = {
   Text: makeInteractiveElement("text", "<Interactive.Text>"),
   Ul: makeInteractiveElement("ul", "<Interactive.Ul>")
 };
-var compositionsRef = React30.createRef();
+var compositionsRef = React31.createRef();
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -31745,7 +31839,7 @@ var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
 };
-var MaxMediaCacheSizeContext = React31.createContext(null);
+var MaxMediaCacheSizeContext = React32.createContext(null);
 var Root = null;
 var listeners = [];
 var getRoot = () => {
@@ -32018,7 +32112,7 @@ var resolveVideoConfigOrCatch = (params) => {
     };
   }
 };
-var SequenceStackTracesUpdateContext = React33.createContext(() => {});
+var SequenceStackTracesUpdateContext = React34.createContext(() => {});
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
     const param = window.remotion_envVariables;
@@ -32044,7 +32138,7 @@ var setupEnvVariables = () => {
     window.process.env[key] = env[key];
   });
 };
-var CurrentScaleContext = React34.createContext(null);
+var CurrentScaleContext = React35.createContext(null);
 var PreviewSizeContext = createContext25({
   setSize: () => {
     return;
@@ -32068,7 +32162,7 @@ var calculateScale = ({
   }
   return Number(previewSize);
 };
-var PixelDensityContext = React35.createContext(null);
+var PixelDensityContext = React36.createContext(null);
 var getOffthreadVideoSource = ({
   src,
   transparent,
@@ -32335,7 +32429,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React37.useInsertionEffect ?? React37.useLayoutEffect;
+  const effectToUse = React38.useInsertionEffect ?? React38.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -32711,20 +32805,20 @@ var OffthreadVideo = ({
 addSequenceStackTraces(OffthreadVideo);
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 function useRemotionContexts() {
-  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);
+  const compositionManagerCtx = React40.useContext(CompositionManager);
+  const timelineContext = React40.useContext(TimelineContext);
+  const setTimelineContext = React40.useContext(SetTimelineContext);
+  const sequenceContext = React40.useContext(SequenceContext);
+  const nonceContext = React40.useContext(NonceContext);
+  const canUseRemotionHooksContext = React40.useContext(CanUseRemotionHooks);
+  const preloadContext = React40.useContext(PreloadContext);
+  const resolveCompositionContext = React40.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React40.useContext(RenderAssetManager);
+  const sequenceManagerContext = React40.useContext(SequenceManager);
+  const sequenceManagerRefContext = React40.useContext(SequenceManagerRefContext);
+  const visualModePropStatusesRefContext = React40.useContext(VisualModePropStatusesRefContext);
+  const bufferManagerContext = React40.useContext(BufferingContextReact);
+  const logLevelContext = React40.useContext(LogLevelContext);
   return useMemo37(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -32898,6 +32992,8 @@ var Internals = {
   BufferingProvider,
   BufferingContextReact,
   getComponentsToAddStacksTo,
+  getSequenceComponent,
+  getSingleChildComponent,
   CurrentScaleContext,
   PixelDensityContext,
   PreviewSizeContext,
@@ -32955,75 +33051,139 @@ var Internals = {
   fromField
 };
 var flattenChildren = (children) => {
-  const childrenArray = React40.Children.toArray(children);
+  const childrenArray = React41.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React40.Fragment) {
+    if (child.type === React41.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
     return flatChildren;
   }, []);
 };
-var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
+var seriesSequenceSchema = {
+  durationInFrames: Interactive.baseSchema.durationInFrames,
+  name: Interactive.sequenceSchema.name,
+  hidden: Interactive.sequenceSchema.hidden,
+  showInTimeline: Interactive.sequenceSchema.showInTimeline,
+  freeze: Interactive.baseSchema.freeze,
+  layout: Interactive.sequenceSchema.layout
+};
+var SeriesSequenceInner = forwardRef14(({
+  offset = 0,
+  className = "",
+  stack = null,
+  _remotionInternalRender = null,
+  ...props2
+}, ref) => {
   useRequireToBeInsideSeries();
+  if (_remotionInternalRender) {
+    return _remotionInternalRender({ ...props2, offset, className: className || undefined, stack }, ref);
+  }
   return /* @__PURE__ */ jsx37(IsNotInsideSeriesProvider, {
-    children
+    children: props2.children
   });
-};
-var SeriesSequence = forwardRef14(SeriesSequenceRefForwardingFunction);
+});
+var SeriesSequence = Interactive.withSchema({
+  Component: SeriesSequenceInner,
+  componentName: "<Series.Sequence>",
+  componentIdentity: "dev.remotion.remotion.Series.Sequence",
+  schema: seriesSequenceSchema,
+  supportsEffects: false
+});
 var SequenceWithoutSchemaWithRef = SequenceWithoutSchema;
+var validateSeriesSequenceProps = ({
+  durationInFrames,
+  offset: offsetProp,
+  index,
+  childrenLength
+}) => {
+  const debugInfo = `index = ${index}, duration = ${durationInFrames}`;
+  if (index !== childrenLength - 1 || durationInFrames !== Infinity) {
+    validateDurationInFrames(durationInFrames, {
+      component: `of a <Series.Sequence /> component`,
+      allowFloats: true
+    });
+  }
+  const offset = offsetProp ?? 0;
+  if (Number.isNaN(offset)) {
+    throw new TypeError(`The "offset" property of a <Series.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
+  }
+  if (!Number.isFinite(offset)) {
+    throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+  }
+  if (offset % 1 !== 0) {
+    throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+  }
+  return offset;
+};
 var SeriesInner = (props2) => {
   const childrenValue = useMemo38(() => {
-    let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
-    return Children.map(flattenedChildren, (child, i) => {
+    const renderChildren = (i, startFrame) => {
+      if (i === flattenedChildren.length) {
+        return null;
+      }
+      const child = flattenedChildren[i];
       const castedChild = child;
       if (typeof castedChild === "string") {
         if (castedChild.trim() === "") {
-          return null;
+          return renderChildren(i + 1, startFrame);
         }
         throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but you passed a string "${castedChild}"`);
       }
       if (castedChild.type !== SeriesSequence) {
         throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but got ${castedChild} instead`);
       }
-      const debugInfo = `index = ${i}, duration = ${castedChild.props.durationInFrames}`;
-      const durationInFramesProp = castedChild.props.durationInFrames;
-      const {
-        durationInFrames,
-        children: _children,
-        from,
-        name,
-        ...passedProps
-      } = castedChild.props;
-      if (i !== flattenedChildren.length - 1 || durationInFramesProp !== Infinity) {
-        validateDurationInFrames(durationInFramesProp, {
-          component: `of a <Series.Sequence /> component`,
-          allowFloats: true
-        });
-      }
-      const offset = castedChild.props.offset ?? 0;
-      if (Number.isNaN(offset)) {
-        throw new TypeError(`The "offset" property of a <Series.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
-      }
-      if (!Number.isFinite(offset)) {
-        throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-      }
-      if (offset % 1 !== 0) {
-        throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-      }
-      const currentStartFrame = startFrame + offset;
-      startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx37(SequenceWithoutSchemaWithRef, {
-        ref: castedChild.ref,
-        name: name || "<Series.Sequence>",
-        _remotionInternalDocumentationLink: name ? undefined : "https://www.remotion.dev/docs/series",
-        from: currentStartFrame,
-        durationInFrames: durationInFramesProp,
-        ...passedProps,
-        children: child
+      const castedElement = castedChild;
+      validateSeriesSequenceProps({
+        durationInFrames: castedElement.props.durationInFrames,
+        offset: castedElement.props.offset,
+        index: i,
+        childrenLength: flattenedChildren.length
       });
-    });
+      return React42.cloneElement(castedElement, {
+        _remotionInternalRender: (resolvedProps, ref) => {
+          const durationInFramesProp = resolvedProps.durationInFrames;
+          const {
+            durationInFrames: _durationInFrames,
+            children: sequenceChildren,
+            offset: offsetProp,
+            controls,
+            stack,
+            from: _from,
+            name,
+            ...passedProps
+          } = resolvedProps;
+          const offset = validateSeriesSequenceProps({
+            durationInFrames: durationInFramesProp,
+            offset: offsetProp,
+            index: i,
+            childrenLength: flattenedChildren.length
+          });
+          const currentStartFrame = startFrame + offset;
+          const nextStartFrame = startFrame + durationInFramesProp + offset;
+          return /* @__PURE__ */ jsxs3(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx37(SequenceWithoutSchemaWithRef, {
+                ref,
+                name: name || "<Series.Sequence>",
+                _remotionInternalDocumentationLink: name ? undefined : "https://www.remotion.dev/docs/series",
+                _remotionInternalStack: stack ?? undefined,
+                controls: controls ?? undefined,
+                from: currentStartFrame,
+                durationInFrames: durationInFramesProp,
+                ...passedProps,
+                children: /* @__PURE__ */ jsx37(IsNotInsideSeriesProvider, {
+                  children: sequenceChildren
+                })
+              }),
+              renderChildren(i + 1, nextStartFrame)
+            ]
+          });
+        }
+      });
+    };
+    return renderChildren(0, 0);
   }, [props2.children]);
   return /* @__PURE__ */ jsx37(IsInsideSeriesContainer, {
     children: /* @__PURE__ */ jsx37(Sequence, {
@@ -33139,7 +33299,7 @@ var Still = (props2) => {
     durationInFrames: 1,
     fps: 1
   };
-  return React42.createElement(Composition, newProps);
+  return React43.createElement(Composition, newProps);
 };
 addSequenceStackTraces(Still);
 var roundTo6Commas = (num) => {
@@ -33618,13 +33778,14 @@ var Config = new Proxy(proxyObj, {
 });
 Sequence.displayName = "Sequence";
 addSequenceStackTraces(Sequence);
+setSequenceComponent(Sequence);
 addSequenceStackTraces(Composition);
 addSequenceStackTraces(Folder);
 
 // ../shapes/dist/esm/index.mjs
 import React, { useCallback as useCallback26, useMemo as useMemo40, useRef as useRef29 } from "react";
 import { version } from "react-dom";
-import { jsx as jsx40, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs4 } 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";
@@ -33826,7 +33987,7 @@ var RenderSvg = ({
   const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects);
   const videoConfig = Internals.useUnsafeVideoConfig();
   const reactSupportsTransformOrigin = doesReactSupportTransformOriginProperty(version);
-  const svg = /* @__PURE__ */ jsxs3("svg", {
+  const svg = /* @__PURE__ */ jsxs4("svg", {
     ref: effects.length === 0 || !videoConfig ? setSvgRef : undefined,
     width,
     height,
@@ -33852,7 +34013,7 @@ var RenderSvg = ({
           }
           const prevX = prevInstruction.x;
           const prevY = prevInstruction.y;
-          return /* @__PURE__ */ jsxs3(React.Fragment, {
+          return /* @__PURE__ */ jsxs4(React.Fragment, {
             children: [
               /* @__PURE__ */ jsx40("path", {
                 d: `M ${prevX} ${prevY} ${i.cp1x} ${i.cp1y}`,
@@ -36534,7 +36695,7 @@ var extrudeAndTransformElement = (options) => {
 
 // ../design/dist/esm/index.mjs
 import { jsx as jsx212, Fragment as Fragment3 } from "react/jsx-runtime";
-import { jsx as jsx312, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx312, jsxs as jsxs6 } from "react/jsx-runtime";
 import { useEffect as useEffect22, 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";
@@ -36547,12 +36708,12 @@ import React72 from "react";
 import { jsx as jsx103 } from "react/jsx-runtime";
 import { jsx as jsx113 } from "react/jsx-runtime";
 import { jsx as jsx123 } from "react/jsx-runtime";
-import * as React36 from "react";
+import * as React362 from "react";
 import * as ReactDOM4 from "react-dom";
-import React112 from "react";
+import React11 from "react";
 import * as React8 from "react";
 import { jsx as jsx132 } from "react/jsx-runtime";
-import * as React9 from "react";
+import * as React92 from "react";
 import * as React10 from "react";
 import { Fragment as Fragment5, jsx as jsx142 } from "react/jsx-runtime";
 import { jsx as jsx152 } from "react/jsx-runtime";
@@ -36562,15 +36723,15 @@ import * as React162 from "react";
 import * as React132 from "react";
 import * as ReactDOM from "react-dom";
 import { jsx as jsx172 } from "react/jsx-runtime";
-import * as React14 from "react";
-import * as React152 from "react";
+import * as React142 from "react";
+import * as React15 from "react";
 import { jsx as jsx182 } from "react/jsx-runtime";
-import * as React17 from "react";
+import * as React172 from "react";
 import * as React18 from "react";
 import { jsx as jsx192 } from "react/jsx-runtime";
 import * as React202 from "react";
-import * as React192 from "react";
-import * as React24 from "react";
+import * as React19 from "react";
+import * as React242 from "react";
 import * as React212 from "react";
 import { useLayoutEffect as useLayoutEffect32, useEffect as useEffect82 } from "react";
 import * as ReactDOM2 from "react-dom";
@@ -36588,30 +36749,30 @@ import { jsx as jsx232 } from "react/jsx-runtime";
 import * as React352 from "react";
 import * as React312 from "react";
 import { useState as useState112 } from "react";
-import * as React292 from "react";
+import * as React29 from "react";
 import * as React302 from "react";
 import * as React342 from "react";
 import * as React332 from "react";
 import * as React322 from "react";
-import { Fragment as Fragment8, jsx as jsx242, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx242, jsxs as jsxs42 } from "react/jsx-runtime";
 import { forwardRef as forwardRef142, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef132, createElement as createElement6 } from "react";
-import * as React372 from "react";
-import { jsx as jsx252, jsxs as jsxs52 } from "react/jsx-runtime";
+import * as React37 from "react";
+import { jsx as jsx252, jsxs as jsxs5 } from "react/jsx-runtime";
 import { jsx as jsx262 } from "react/jsx-runtime";
 import * as React49 from "react";
-import * as React38 from "react";
+import * as React382 from "react";
 import { jsx as jsx272 } from "react/jsx-runtime";
 import * as React47 from "react";
 import React402 from "react";
-import * as React392 from "react";
-import { Fragment as Fragment22, jsx as jsx282 } from "react/jsx-runtime";
+import * as React39 from "react";
+import { Fragment as Fragment222, 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 React422 from "react";
-import * as React41 from "react";
-import * as React43 from "react";
+import * as React412 from "react";
+import * as React432 from "react";
 import * as ReactDOM5 from "react-dom";
 import { jsx as jsx302 } from "react/jsx-runtime";
 import * as React44 from "react";
@@ -36663,7 +36824,7 @@ function useComposedRefs(...refs) {
   return React3.useCallback(composeRefs(...refs), refs);
 }
 var REACT_LAZY_TYPE = Symbol.for("react.lazy");
-var use = React23[" use ".trim().toString()];
+var use = React24[" use ".trim().toString()];
 function isPromiseLike(value) {
   return typeof value === "object" && value !== null && "then" in value;
 }
@@ -36672,25 +36833,25 @@ function isLazyComponent(element) {
 }
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React23.forwardRef((props, forwardedRef) => {
+  const Slot2 = React24.forwardRef((props, forwardedRef) => {
     let { children, ...slotProps } = props;
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    const childrenArray = React23.Children.toArray(children);
+    const childrenArray = React24.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable);
     if (slottable) {
       const newElement = slottable.props.children;
       const newChildren = childrenArray.map((child) => {
         if (child === slottable) {
-          if (React23.Children.count(newElement) > 1)
-            return React23.Children.only(null);
-          return React23.isValidElement(newElement) ? newElement.props.children : null;
+          if (React24.Children.count(newElement) > 1)
+            return React24.Children.only(null);
+          return React24.isValidElement(newElement) ? newElement.props.children : null;
         } else {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx43(SlotClone, { ...slotProps, ref: forwardedRef, children: React23.isValidElement(newElement) ? React23.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx43(SlotClone, { ...slotProps, ref: forwardedRef, children: React24.isValidElement(newElement) ? React24.cloneElement(newElement, undefined, newChildren) : null });
     }
     return /* @__PURE__ */ jsx43(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
@@ -36699,20 +36860,20 @@ function createSlot(ownerName) {
 }
 var Slot = /* @__PURE__ */ createSlot("Slot");
 function createSlotClone(ownerName) {
-  const SlotClone = React23.forwardRef((props, forwardedRef) => {
+  const SlotClone = React24.forwardRef((props, forwardedRef) => {
     let { children, ...slotProps } = props;
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    if (React23.isValidElement(children)) {
+    if (React24.isValidElement(children)) {
       const childrenRef = getElementRef(children);
       const props2 = mergeProps(slotProps, children.props);
-      if (children.type !== React23.Fragment) {
+      if (children.type !== React24.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
       }
-      return React23.cloneElement(children, props2);
+      return React24.cloneElement(children, props2);
     }
-    return React23.Children.count(children) > 1 ? React23.Children.only(null) : null;
+    return React24.Children.count(children) > 1 ? React24.Children.only(null) : null;
   });
   SlotClone.displayName = `${ownerName}.SlotClone`;
   return SlotClone;
@@ -36720,7 +36881,7 @@ function createSlotClone(ownerName) {
 var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
 function createSlottable(ownerName) {
   const Slottable2 = ({ children }) => {
-    return /* @__PURE__ */ jsx43(Fragment2, { children });
+    return /* @__PURE__ */ jsx43(Fragment22, { children });
   };
   Slottable2.displayName = `${ownerName}.Slottable`;
   Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
@@ -36728,7 +36889,7 @@ function createSlottable(ownerName) {
 }
 var Slottable = /* @__PURE__ */ createSlottable("Slottable");
 function isSlottable(child) {
-  return React23.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+  return React24.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -36785,7 +36946,7 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React32.useState({
+  const [state, setState] = React33.useState({
     progress: 0,
     isActive: false
   });
@@ -36797,7 +36958,7 @@ var useHoverTransforms = (ref, disabled) => {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -36872,8 +37033,8 @@ var useHoverTransforms = (ref, disabled) => {
   return state;
 };
 var useClickTransforms = (ref) => {
-  const [hoverProgress, setHoverProgress] = React32.useState(0);
-  React32.useEffect(() => {
+  const [hoverProgress, setHoverProgress] = React33.useState(0);
+  React33.useEffect(() => {
     const element = getChildNodeFrom(ref.current);
     if (!element) {
       return;
@@ -37017,7 +37178,7 @@ var Outer = ({
     description: "rect",
     transformations: centerOriented
   });
-  return /* @__PURE__ */ jsxs5("div", {
+  return /* @__PURE__ */ jsxs6("div", {
     className: "relative",
     style: { width, height },
     children: [
@@ -37449,7 +37610,7 @@ function composeRefs2(...refs) {
   return (node) => refs.forEach((ref) => setRef22(ref, node));
 }
 function useComposedRefs2(...refs) {
-  return React9.useCallback(composeRefs2(...refs), refs);
+  return React92.useCallback(composeRefs2(...refs), refs);
 }
 var Slot2 = React10.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
@@ -37531,13 +37692,13 @@ function createCollection(name) {
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React112.useRef(null);
-    const itemMap = React112.useRef(/* @__PURE__ */ new Map).current;
+    const ref = React11.useRef(null);
+    const itemMap = React11.useRef(/* @__PURE__ */ new Map).current;
     return /* @__PURE__ */ jsx152(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
-  const CollectionSlot = React112.forwardRef((props, forwardedRef) => {
+  const CollectionSlot = React11.forwardRef((props, forwardedRef) => {
     const { scope, children } = props;
     const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
     const composedRefs = useComposedRefs2(forwardedRef, context.collectionRef);
@@ -37546,12 +37707,12 @@ function createCollection(name) {
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
-  const CollectionItemSlot = React112.forwardRef((props, forwardedRef) => {
+  const CollectionItemSlot = React11.forwardRef((props, forwardedRef) => {
     const { scope, children, ...itemData } = props;
-    const ref = React112.useRef(null);
+    const ref = React11.useRef(null);
     const composedRefs = useComposedRefs2(forwardedRef, ref);
     const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-    React112.useEffect(() => {
+    React11.useEffect(() => {
       context.itemMap.set(ref, { ref, ...itemData });
       return () => void context.itemMap.delete(ref);
     });
@@ -37560,7 +37721,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React112.useCallback(() => {
+    const getItems = React11.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode)
         return [];
@@ -37617,15 +37778,15 @@ function dispatchDiscreteCustomEvent(target, event2) {
     ReactDOM.flushSync(() => target.dispatchEvent(event2));
 }
 function useCallbackRef(callback) {
-  const callbackRef = React14.useRef(callback);
-  React14.useEffect(() => {
+  const callbackRef = React142.useRef(callback);
+  React142.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React14.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React142.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
-  React152.useEffect(() => {
+  React15.useEffect(() => {
     const handleKeyDown = (event2) => {
       if (event2.key === "Escape") {
         onEscapeKeyDown(event2);
@@ -37832,7 +37993,7 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
 }
 var count = 0;
 function useFocusGuards() {
-  React17.useEffect(() => {
+  React172.useEffect(() => {
     const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
     document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
     document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
@@ -38067,7 +38228,7 @@ function arrayRemove(array, item) {
 function removeLinks(items) {
   return items.filter((item) => item.tagName !== "A");
 }
-var useLayoutEffect22 = Boolean(globalThis?.document) ? React192.useLayoutEffect : () => {};
+var useLayoutEffect22 = Boolean(globalThis?.document) ? React19.useLayoutEffect : () => {};
 var useReactId = React202["useId".toString()] || (() => {
   return;
 });
@@ -39919,17 +40080,17 @@ var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props) => {
   const { __scopePopper, children } = props;
-  const [anchor, setAnchor] = React24.useState(null);
+  const [anchor, setAnchor] = React242.useState(null);
   return /* @__PURE__ */ jsx213(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
 };
 Popper.displayName = POPPER_NAME;
 var ANCHOR_NAME = "PopperAnchor";
-var PopperAnchor = React24.forwardRef((props, forwardedRef) => {
+var PopperAnchor = React242.forwardRef((props, forwardedRef) => {
   const { __scopePopper, virtualRef, ...anchorProps } = props;
   const context = usePopperContext(ANCHOR_NAME, __scopePopper);
-  const ref = React24.useRef(null);
+  const ref = React242.useRef(null);
   const composedRefs = useComposedRefs2(forwardedRef, ref);
-  React24.useEffect(() => {
+  React242.useEffect(() => {
     context.onAnchorChange(virtualRef?.current || ref.current);
   });
   return virtualRef ? null : /* @__PURE__ */ jsx213(Primitive.div, { ...anchorProps, ref: composedRefs });
@@ -39937,7 +40098,7 @@ var PopperAnchor = React24.forwardRef((props, forwardedRef) => {
 PopperAnchor.displayName = ANCHOR_NAME;
 var CONTENT_NAME = "PopperContent";
 var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME);
-var PopperContent = React24.forwardRef((props, forwardedRef) => {
+var PopperContent = React242.forwardRef((props, forwardedRef) => {
   const {
     __scopePopper,
     side = "bottom",
@@ -39955,9 +40116,9 @@ var PopperContent = React24.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = usePopperContext(CONTENT_NAME, __scopePopper);
-  const [content, setContent] = React24.useState(null);
+  const [content, setContent] = React242.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContent(node));
-  const [arrow4, setArrow] = React24.useState(null);
+  const [arrow4, setArrow] = React242.useState(null);
   const arrowSize = useSize(arrow4);
   const arrowWidth = arrowSize?.width ?? 0;
   const arrowHeight = arrowSize?.height ?? 0;
@@ -40017,7 +40178,7 @@ var PopperContent = React24.forwardRef((props, forwardedRef) => {
   const arrowX = middlewareData.arrow?.x;
   const arrowY = middlewareData.arrow?.y;
   const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
-  const [contentZIndex, setContentZIndex] = React24.useState();
+  const [contentZIndex, setContentZIndex] = React242.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
@@ -40068,7 +40229,7 @@ var OPPOSITE_SIDE = {
   bottom: "top",
   left: "right"
 };
-var PopperArrow = React24.forwardRef(function PopperArrow2(props, forwardedRef) {
+var PopperArrow = React242.forwardRef(function PopperArrow2(props, forwardedRef) {
   const { __scopePopper, ...arrowProps } = props;
   const contentContext = useContentContext(ARROW_NAME, __scopePopper);
   const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
@@ -40411,7 +40572,7 @@ function useCallbackRef2(initialValue, callback) {
   ref.callback = callback;
   return ref.facade;
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React292.useLayoutEffect : React292.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React29.useLayoutEffect : React29.useEffect;
 var currentValues = new WeakMap;
 function useMergeRefs(refs, defaultValue) {
   var callbackRef = useCallbackRef2(defaultValue || null, function(newValue) {
@@ -41047,9 +41208,9 @@ var Select = (props) => {
     required
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  const [trigger, setTrigger] = React36.useState(null);
-  const [valueNode, setValueNode] = React36.useState(null);
-  const [valueNodeHasChildren, setValueNodeHasChildren] = React36.useState(false);
+  const [trigger, setTrigger] = React362.useState(null);
+  const [valueNode, setValueNode] = React362.useState(null);
+  const [valueNodeHasChildren, setValueNodeHasChildren] = React362.useState(false);
   const direction = useDirection(dir);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
@@ -41061,11 +41222,11 @@ var Select = (props) => {
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const triggerPointerDownPosRef = React36.useRef(null);
+  const triggerPointerDownPosRef = React362.useRef(null);
   const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
-  const [nativeOptionsSet, setNativeOptionsSet] = React36.useState(/* @__PURE__ */ new Set);
+  const [nativeOptionsSet, setNativeOptionsSet] = React362.useState(/* @__PURE__ */ new Set);
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
-  return /* @__PURE__ */ jsx242(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs4(SelectProvider, {
+  return /* @__PURE__ */ jsx242(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs42(SelectProvider, {
     required,
     scope: __scopeSelect,
     trigger,
@@ -41085,10 +41246,10 @@ var Select = (props) => {
     children: [
       /* @__PURE__ */ jsx242(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx242(SelectNativeOptionsProvider, {
         scope: props.__scopeSelect,
-        onNativeOptionAdd: React36.useCallback((option) => {
+        onNativeOptionAdd: React362.useCallback((option) => {
           setNativeOptionsSet((prev) => new Set(prev).add(option));
         }, []),
-        onNativeOptionRemove: React36.useCallback((option) => {
+        onNativeOptionRemove: React362.useCallback((option) => {
           setNativeOptionsSet((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
@@ -41097,7 +41258,7 @@ var Select = (props) => {
         }, []),
         children
       }) }),
-      isFormControl ? /* @__PURE__ */ jsxs4(BubbleSelect, {
+      isFormControl ? /* @__PURE__ */ jsxs42(BubbleSelect, {
         "aria-hidden": true,
         required,
         tabIndex: -1,
@@ -41116,7 +41277,7 @@ var Select = (props) => {
 };
 Select.displayName = SELECT_NAME;
 var TRIGGER_NAME = "SelectTrigger";
-var SelectTrigger = React36.forwardRef((props, forwardedRef) => {
+var SelectTrigger = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, disabled = false, ...triggerProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
@@ -41184,7 +41345,7 @@ var SelectTrigger = React36.forwardRef((props, forwardedRef) => {
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 var VALUE_NAME = "SelectValue";
-var SelectValue = React36.forwardRef((props, forwardedRef) => {
+var SelectValue = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
   const context = useSelectContext(VALUE_NAME, __scopeSelect);
   const { onValueNodeHasChildrenChange } = context;
@@ -41202,7 +41363,7 @@ var SelectValue = React36.forwardRef((props, forwardedRef) => {
 });
 SelectValue.displayName = VALUE_NAME;
 var ICON_NAME = "SelectIcon";
-var SelectIcon = React36.forwardRef((props, forwardedRef) => {
+var SelectIcon = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, children, ...iconProps } = props;
   return /* @__PURE__ */ jsx242(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
 });
@@ -41213,9 +41374,9 @@ var SelectPortal = (props) => {
 };
 SelectPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "SelectContent";
-var SelectContent = React36.forwardRef((props, forwardedRef) => {
+var SelectContent = React362.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(CONTENT_NAME2, props.__scopeSelect);
-  const [fragment, setFragment] = React36.useState();
+  const [fragment, setFragment] = React362.useState();
   useLayoutEffect22(() => {
     setFragment(new DocumentFragment);
   }, []);
@@ -41229,7 +41390,7 @@ SelectContent.displayName = CONTENT_NAME2;
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME2);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
-var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
+var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     position = "item-aligned",
@@ -41249,20 +41410,20 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
-  const [content, setContent] = React36.useState(null);
-  const [viewport, setViewport] = React36.useState(null);
+  const [content, setContent] = React362.useState(null);
+  const [viewport, setViewport] = React362.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContent(node));
-  const [selectedItem, setSelectedItem] = React36.useState(null);
-  const [selectedItemText, setSelectedItemText] = React36.useState(null);
+  const [selectedItem, setSelectedItem] = React362.useState(null);
+  const [selectedItemText, setSelectedItemText] = React362.useState(null);
   const getItems = useCollection(__scopeSelect);
-  const [isPositioned, setIsPositioned] = React36.useState(false);
-  const firstValidItemFoundRef = React36.useRef(false);
-  React36.useEffect(() => {
+  const [isPositioned, setIsPositioned] = React362.useState(false);
+  const firstValidItemFoundRef = React362.useRef(false);
+  React362.useEffect(() => {
     if (content)
       return hideOthers(content);
   }, [content]);
   useFocusGuards();
-  const focusFirst2 = React36.useCallback((candidates) => {
+  const focusFirst2 = React362.useCallback((candidates) => {
     const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
     const [lastItem] = restItems.slice(-1);
     const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
@@ -41279,14 +41440,14 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
         return;
     }
   }, [getItems, viewport]);
-  const focusSelectedItem = React36.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
-  React36.useEffect(() => {
+  const focusSelectedItem = React362.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
+  React362.useEffect(() => {
     if (isPositioned) {
       focusSelectedItem();
     }
   }, [isPositioned, focusSelectedItem]);
   const { onOpenChange, triggerPointerDownPosRef } = context;
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     if (content) {
       let pointerMoveDelta = { x: 0, y: 0 };
       const handlePointerMove = (event2) => {
@@ -41316,7 +41477,7 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
       };
     }
   }, [content, onOpenChange, triggerPointerDownPosRef]);
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     const close = () => onOpenChange(false);
     window.addEventListener("blur", close);
     window.addEventListener("resize", close);
@@ -41333,7 +41494,7 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
       setTimeout(() => nextItem.ref.current.focus());
     }
   });
-  const itemRefCallback = React36.useCallback((node, value, disabled) => {
+  const itemRefCallback = React362.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -41342,8 +41503,8 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
         firstValidItemFoundRef.current = true;
     }
   }, [context.value]);
-  const handleItemLeave = React36.useCallback(() => content?.focus(), [content]);
-  const itemTextRefCallback = React36.useCallback((node, value, disabled) => {
+  const handleItemLeave = React362.useCallback(() => content?.focus(), [content]);
+  const itemTextRefCallback = React362.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -41438,18 +41599,18 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
 });
 SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
-var SelectItemAlignedPosition = React36.forwardRef((props, forwardedRef) => {
+var SelectItemAlignedPosition = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(CONTENT_NAME2, __scopeSelect);
-  const [contentWrapper, setContentWrapper] = React36.useState(null);
-  const [content, setContent] = React36.useState(null);
+  const [contentWrapper, setContentWrapper] = React362.useState(null);
+  const [content, setContent] = React362.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContent(node));
   const getItems = useCollection(__scopeSelect);
-  const shouldExpandOnScrollRef = React36.useRef(false);
-  const shouldRepositionRef = React36.useRef(true);
+  const shouldExpandOnScrollRef = React362.useRef(false);
+  const shouldRepositionRef = React362.useRef(true);
   const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
-  const position = React36.useCallback(() => {
+  const position = React362.useCallback(() => {
     if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
       const triggerRect = context.trigger.getBoundingClientRect();
       const contentRect = content.getBoundingClientRect();
@@ -41530,12 +41691,12 @@ var SelectItemAlignedPosition = React36.forwardRef((props, forwardedRef) => {
     onPlaced
   ]);
   useLayoutEffect22(() => position(), [position]);
-  const [contentZIndex, setContentZIndex] = React36.useState();
+  const [contentZIndex, setContentZIndex] = React362.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  const handleScrollButtonChange = React36.useCallback((node) => {
+  const handleScrollButtonChange = React362.useCallback((node) => {
     if (node && shouldRepositionRef.current === true) {
       position();
       focusSelectedItem?.();
@@ -41569,7 +41730,7 @@ var SelectItemAlignedPosition = React36.forwardRef((props, forwardedRef) => {
 });
 SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
 var POPPER_POSITION_NAME = "SelectPopperPosition";
-var SelectPopperPosition = React36.forwardRef((props, forwardedRef) => {
+var SelectPopperPosition = React362.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     align = "start",
@@ -41599,13 +41760,13 @@ var SelectPopperPosition = React36.forwardRef((props, forwardedRef) => {
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME2, {});
 var VIEWPORT_NAME = "SelectViewport";
-var SelectViewport = React36.forwardRef((props, forwardedRef) => {
+var SelectViewport = React362.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 = React36.useRef(0);
-  return /* @__PURE__ */ jsxs4(Fragment8, { children: [
+  const prevScrollTopRef = React362.useRef(0);
+  return /* @__PURE__ */ jsxs42(Fragment8, { children: [
     /* @__PURE__ */ jsx242("style", {
       dangerouslySetInnerHTML: {
         __html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}`
@@ -41653,14 +41814,14 @@ var SelectViewport = React36.forwardRef((props, forwardedRef) => {
 SelectViewport.displayName = VIEWPORT_NAME;
 var GROUP_NAME = "SelectGroup";
 var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-var SelectGroup = React36.forwardRef((props, forwardedRef) => {
+var SelectGroup = React362.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 = React36.forwardRef((props, forwardedRef) => {
+var SelectLabel = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...labelProps } = props;
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
   return /* @__PURE__ */ jsx242(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
@@ -41668,7 +41829,7 @@ var SelectLabel = React36.forwardRef((props, forwardedRef) => {
 SelectLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "SelectItem";
 var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-var SelectItem = React36.forwardRef((props, forwardedRef) => {
+var SelectItem = React362.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     value,
@@ -41679,8 +41840,8 @@ var SelectItem = React36.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(ITEM_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
   const isSelected = context.value === value;
-  const [textValue, setTextValue] = React36.useState(textValueProp ?? "");
-  const [isFocused, setIsFocused] = React36.useState(false);
+  const [textValue, setTextValue] = React362.useState(textValueProp ?? "");
+  const [isFocused, setIsFocused] = React362.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => contentContext.itemRefCallback?.(node, value, disabled));
   const textId = useId();
   const handleSelect = () => {
@@ -41698,7 +41859,7 @@ var SelectItem = React36.forwardRef((props, forwardedRef) => {
     disabled,
     textId,
     isSelected,
-    onItemTextChange: React36.useCallback((node) => {
+    onItemTextChange: React362.useCallback((node) => {
       setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
     }, []),
     children: /* @__PURE__ */ jsx242(Collection.ItemSlot, {
@@ -41747,39 +41908,39 @@ var SelectItem = React36.forwardRef((props, forwardedRef) => {
 });
 SelectItem.displayName = ITEM_NAME;
 var ITEM_TEXT_NAME = "SelectItemText";
-var SelectItemText = React36.forwardRef((props, forwardedRef) => {
+var SelectItemText = React362.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] = React36.useState(null);
+  const [itemTextNode, setItemTextNode] = React362.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 = React36.useMemo(() => /* @__PURE__ */ jsx242("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
+  const nativeOption = React362.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);
     return () => onNativeOptionRemove(nativeOption);
   }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);
-  return /* @__PURE__ */ jsxs4(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs42(Fragment8, { children: [
     /* @__PURE__ */ jsx242(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
     itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM4.createPortal(itemTextProps.children, context.valueNode) : null
   ] });
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 var ITEM_INDICATOR_NAME = "SelectItemIndicator";
-var SelectItemIndicator = React36.forwardRef((props, forwardedRef) => {
+var SelectItemIndicator = React362.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 = React36.forwardRef((props, forwardedRef) => {
+var SelectScrollUpButton = React362.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React36.useState(false);
+  const [canScrollUp, setCanScrollUp] = React362.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -41807,10 +41968,10 @@ var SelectScrollUpButton = React36.forwardRef((props, forwardedRef) => {
 });
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-var SelectScrollDownButton = React36.forwardRef((props, forwardedRef) => {
+var SelectScrollDownButton = React362.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React36.useState(false);
+  const [canScrollDown, setCanScrollDown] = React362.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -41838,18 +41999,18 @@ var SelectScrollDownButton = React36.forwardRef((props, forwardedRef) => {
   }) : null;
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-var SelectScrollButtonImpl = React36.forwardRef((props, forwardedRef) => {
+var SelectScrollButtonImpl = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React36.useRef(null);
+  const autoScrollTimerRef = React362.useRef(null);
   const getItems = useCollection(__scopeSelect);
-  const clearAutoScrollTimer = React36.useCallback(() => {
+  const clearAutoScrollTimer = React362.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
       autoScrollTimerRef.current = null;
     }
   }, []);
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
   useLayoutEffect22(() => {
@@ -41878,13 +42039,13 @@ var SelectScrollButtonImpl = React36.forwardRef((props, forwardedRef) => {
   });
 });
 var SEPARATOR_NAME = "SelectSeparator";
-var SelectSeparator = React36.forwardRef((props, forwardedRef) => {
+var SelectSeparator = React362.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 = React36.forwardRef((props, forwardedRef) => {
+var SelectArrow = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(ARROW_NAME2, __scopeSelect);
@@ -41895,12 +42056,12 @@ SelectArrow.displayName = ARROW_NAME2;
 function shouldShowPlaceholder(value) {
   return value === "" || value === undefined;
 }
-var BubbleSelect = React36.forwardRef((props, forwardedRef) => {
+var BubbleSelect = React362.forwardRef((props, forwardedRef) => {
   const { value, ...selectProps } = props;
-  const ref = React36.useRef(null);
+  const ref = React362.useRef(null);
   const composedRefs = useComposedRefs2(forwardedRef, ref);
   const prevValue = usePrevious(value);
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     const select = ref.current;
     const selectProto = window.HTMLSelectElement.prototype;
     const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
@@ -41916,9 +42077,9 @@ var BubbleSelect = React36.forwardRef((props, forwardedRef) => {
 BubbleSelect.displayName = "BubbleSelect";
 function useTypeaheadSearch(onSearchChange) {
   const handleSearchChange = useCallbackRef(onSearchChange);
-  const searchRef = React36.useRef("");
-  const timerRef = React36.useRef(0);
-  const handleTypeaheadSearch = React36.useCallback((key) => {
+  const searchRef = React362.useRef("");
+  const timerRef = React362.useRef(0);
+  const handleTypeaheadSearch = React362.useCallback((key) => {
     const search = searchRef.current + key;
     handleSearchChange(search);
     (function updateSearch(value) {
@@ -41928,11 +42089,11 @@ function useTypeaheadSearch(onSearchChange) {
         timerRef.current = window.setTimeout(() => updateSearch(""), 1000);
     })(search);
   }, [handleSearchChange]);
-  const resetTypeahead = React36.useCallback(() => {
+  const resetTypeahead = React362.useCallback(() => {
     searchRef.current = "";
     window.clearTimeout(timerRef.current);
   }, []);
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     return () => window.clearTimeout(timerRef.current);
   }, []);
   return [searchRef, handleTypeaheadSearch, resetTypeahead];
@@ -42021,7 +42182,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 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Trigger, {
+var SelectTrigger2 = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(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,
@@ -42036,7 +42197,7 @@ var SelectTrigger2 = React372.forwardRef(({ className, children, ...props }, ref
   ]
 }));
 SelectTrigger2.displayName = Trigger.displayName;
-var SelectScrollUpButton2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollUpButton, {
+var SelectScrollUpButton2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollUpButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -42045,7 +42206,7 @@ var SelectScrollUpButton2 = React372.forwardRef(({ className, ...props }, ref) =
   })
 }));
 SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
-var SelectScrollDownButton2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollDownButton, {
+var SelectScrollDownButton2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollDownButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -42054,8 +42215,8 @@ var SelectScrollDownButton2 = React372.forwardRef(({ className, ...props }, ref)
   })
 }));
 SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
-var SelectContent2 = React372.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
-  children: /* @__PURE__ */ jsxs52(Content2, {
+var SelectContent2 = React37.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
+  children: /* @__PURE__ */ jsxs5(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),
     position,
@@ -42071,13 +42232,13 @@ var SelectContent2 = React372.forwardRef(({ className, children, position = "pop
   })
 }));
 SelectContent2.displayName = Content2.displayName;
-var SelectLabel2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Label, {
+var SelectLabel2 = React37.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 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Item, {
+var SelectItem2 = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(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,
@@ -42096,7 +42257,7 @@ var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) =
   ]
 }));
 SelectItem2.displayName = Item.displayName;
-var SelectSeparator2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Separator, {
+var SelectSeparator2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Separator, {
   ref,
   className: cn("-mx-1 my-1 h-px bg-muted", className),
   ...props
@@ -42129,19 +42290,19 @@ function composeEventHandlers2(originalEventHandler, ourEventHandler, { checkFor
 function createContextScope2(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React38.createContext(defaultContext);
+    const BaseContext = React382.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 = React38.useMemo(() => context, Object.values(context));
+      const value = React382.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 = React38.useContext(Context);
+      const context = React382.useContext(Context);
       if (context)
         return context;
       if (defaultContext !== undefined)
@@ -42152,11 +42313,11 @@ function createContextScope2(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React38.createContext(defaultContext);
+      return React382.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React38.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
+      return React382.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
     };
   };
   createScope.scopeName = scopeName;
@@ -42177,7 +42338,7 @@ function composeContextScopes2(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React38.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React382.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -42185,22 +42346,22 @@ function composeContextScopes2(...scopes) {
 }
 function createSlot2(ownerName) {
   const SlotClone2 = /* @__PURE__ */ createSlotClone2(ownerName);
-  const Slot22 = React392.forwardRef((props, forwardedRef) => {
+  const Slot22 = React39.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    const childrenArray = React392.Children.toArray(children);
+    const childrenArray = React39.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable3);
     if (slottable) {
       const newElement = slottable.props.children;
       const newChildren = childrenArray.map((child) => {
         if (child === slottable) {
-          if (React392.Children.count(newElement) > 1)
-            return React392.Children.only(null);
-          return React392.isValidElement(newElement) ? newElement.props.children : null;
+          if (React39.Children.count(newElement) > 1)
+            return React39.Children.only(null);
+          return React39.isValidElement(newElement) ? newElement.props.children : null;
         } else {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children: React392.isValidElement(newElement) ? React392.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children: React39.isValidElement(newElement) ? React39.cloneElement(newElement, undefined, newChildren) : null });
     }
     return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children });
   });
@@ -42208,24 +42369,24 @@ function createSlot2(ownerName) {
   return Slot22;
 }
 function createSlotClone2(ownerName) {
-  const SlotClone2 = React392.forwardRef((props, forwardedRef) => {
+  const SlotClone2 = React39.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    if (React392.isValidElement(children)) {
+    if (React39.isValidElement(children)) {
       const childrenRef = getElementRef3(children);
       const props2 = mergeProps3(slotProps, children.props);
-      if (children.type !== React392.Fragment) {
+      if (children.type !== React39.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
       }
-      return React392.cloneElement(children, props2);
+      return React39.cloneElement(children, props2);
     }
-    return React392.Children.count(children) > 1 ? React392.Children.only(null) : null;
+    return React39.Children.count(children) > 1 ? React39.Children.only(null) : null;
   });
   SlotClone2.displayName = `${ownerName}.SlotClone`;
   return SlotClone2;
 }
 var SLOTTABLE_IDENTIFIER2 = Symbol("radix.slottable");
 function isSlottable3(child) {
-  return React392.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER2;
+  return React39.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER2;
 }
 function mergeProps3(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -42619,7 +42780,7 @@ function toSafeIndex(array, index2) {
 function toSafeInteger(number) {
   return number !== number || number === 0 ? 0 : Math.trunc(number);
 }
-var useLayoutEffect222 = globalThis?.document ? React41.useLayoutEffect : () => {};
+var useLayoutEffect222 = globalThis?.document ? React412.useLayoutEffect : () => {};
 var useReactId2 = React422[" useId ".trim().toString()] || (() => {
   return;
 });
@@ -42653,7 +42814,7 @@ var NODES2 = [
 ];
 var Primitive2 = NODES2.reduce((primitive, node) => {
   const Slot3 = createSlot2(`Primitive.${node}`);
-  const Node2 = React43.forwardRef((props, forwardedRef) => {
+  const Node2 = React432.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot3 : node;
     if (typeof window !== "undefined") {
@@ -43254,7 +43415,7 @@ var ClipboardIcon = ({ size: size4 = 16, color = "currentColor" }) => {
 };
 
 // src/components/prompts/CopyPromptButton.tsx
-import { jsx as jsx46, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs7 } from "react/jsx-runtime";
 var CopyPromptButton = ({ prompt }) => {
   const [copied, setCopied] = useState40(false);
   const onCopy = useCallback38(() => {
@@ -43267,7 +43428,7 @@ var CopyPromptButton = ({ prompt }) => {
     onClick: onCopy,
     style: { width: 160 },
     depth: 0.6,
-    children: /* @__PURE__ */ jsxs6("div", {
+    children: /* @__PURE__ */ jsxs7("div", {
       className: "flex items-center flex-row flex-1 w-[130px]",
       children: [
         /* @__PURE__ */ jsx46(ClipboardIcon, {
@@ -43392,7 +43553,7 @@ var useHeartAnimation = () => {
 };
 
 // src/components/prompts/LikeButton.tsx
-import { jsx as jsx47, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs8 } from "react/jsx-runtime";
 var LikeButton = ({ submissionId, initialLikeCount }) => {
   const [liked, setLiked] = useState42(false);
   const [likeCount, setLikeCount] = useState42(initialLikeCount);
@@ -43430,7 +43591,7 @@ var LikeButton = ({ submissionId, initialLikeCount }) => {
     className: `font-brand rounded-full flex items-center ${liked ? "bg-brand text-white" : ""}`,
     onClick,
     style: { width: 90 },
-    children: /* @__PURE__ */ jsxs7("div", {
+    children: /* @__PURE__ */ jsxs8("div", {
       className: "flex items-center flex-row flex-1 w-[40px] justify-center",
       children: [
         /* @__PURE__ */ jsx47(Heart, {
@@ -45922,14 +46083,14 @@ import"react-dom";
 
 // src/components/prompts/MuxPlayer.tsx
 import { useCallback as useCallback42 } from "react";
-import { jsx as jsx48, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs9 } from "react/jsx-runtime";
 var MuxPlayer = ({ playbackId, title, rounded = true }) => {
   const onProviderChange = useCallback42((provider2, _e) => {
     if (isHLSProvider(provider2)) {
       provider2.library = () => import("hls.js");
     }
   }, []);
-  return /* @__PURE__ */ jsxs8(MediaPlayer2, {
+  return /* @__PURE__ */ jsxs9(MediaPlayer2, {
     src: `https://stream.mux.com/${playbackId}.m3u8`,
     crossOrigin: true,
     playsInline: true,
@@ -45955,7 +46116,7 @@ var MuxPlayer = ({ playbackId, title, rounded = true }) => {
 };
 
 // src/components/prompts/NewBackButton.tsx
-import { jsx as jsx49, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs10 } from "react/jsx-runtime";
 var NewBackButton = ({ text, link }) => {
   return /* @__PURE__ */ jsx49("div", {
     className: "justify-center items-center font-medium mb-4 block text-text",
@@ -45966,7 +46127,7 @@ var NewBackButton = ({ text, link }) => {
     children: /* @__PURE__ */ jsx49(Button, {
       href: link,
       className: "px-8 rounded-full text-sm h-10",
-      children: /* @__PURE__ */ jsxs9("div", {
+      children: /* @__PURE__ */ jsxs10("div", {
         className: "flex row items-center justify-start font-normal",
         children: [
           /* @__PURE__ */ jsx49("svg", {
@@ -46000,14 +46161,14 @@ var Page = ({ children, className, onDrop, onDragOver }) => {
 };
 
 // src/components/prompts/PromptsShow.tsx
-import { jsx as jsx51, jsxs as jsxs10, Fragment as Fragment13 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs11, Fragment as Fragment13 } from "react/jsx-runtime";
 var PromptsShowPage = ({ promptSubmission }) => {
   const avatarUrl = getAvatarUrl(promptSubmission);
   const authorName = getAuthorName(promptSubmission);
   const authorLink = promptSubmission.githubUsername ? `https://github.com/${promptSubmission.githubUsername}` : promptSubmission.xUsername ? `https://x.com/${promptSubmission.xUsername}` : null;
   return /* @__PURE__ */ jsx51(Page, {
     className: "flex-col",
-    children: /* @__PURE__ */ jsxs10("div", {
+    children: /* @__PURE__ */ jsxs11("div", {
       className: "m-auto max-w-[800px] w-full px-4 py-12",
       children: [
         /* @__PURE__ */ jsx51(NewBackButton, {
@@ -46021,9 +46182,9 @@ var PromptsShowPage = ({ promptSubmission }) => {
           className: "text-2xl font-brand font-black",
           children: promptSubmission.title
         }),
-        /* @__PURE__ */ jsxs10("div", {
+        /* @__PURE__ */ jsxs11("div", {
           children: [
-            /* @__PURE__ */ jsxs10("div", {
+            /* @__PURE__ */ jsxs11("div", {
               className: "flex items-center gap-3 mt-4 mb-4",
               children: [
                 avatarUrl && /* @__PURE__ */ jsx51("img", {
@@ -46033,9 +46194,9 @@ var PromptsShowPage = ({ promptSubmission }) => {
                   className: "rounded-full",
                   alt: authorName ? `${authorName}'s avatar` : "Author avatar"
                 }),
-                /* @__PURE__ */ jsxs10("div", {
+                /* @__PURE__ */ jsxs11("div", {
                   children: [
-                    /* @__PURE__ */ jsxs10("div", {
+                    /* @__PURE__ */ jsxs11("div", {
                       className: "text-sm font-brand",
                       children: [
                         "Prompted by",
@@ -46061,14 +46222,14 @@ var PromptsShowPage = ({ promptSubmission }) => {
                 })
               ]
             }),
-            /* @__PURE__ */ jsxs10("div", {
+            /* @__PURE__ */ jsxs11("div", {
               children: [
                 /* @__PURE__ */ jsx51(MuxPlayer, {
                   playbackId: promptSubmission.muxPlaybackId,
                   title: promptSubmission.title,
                   rounded: false
                 }),
-                promptSubmission.toolUsed && /* @__PURE__ */ jsxs10(Fragment13, {
+                promptSubmission.toolUsed && /* @__PURE__ */ jsxs11(Fragment13, {
                   children: [
                     /* @__PURE__ */ jsx51("h2", {
                       className: "font-brand font-bold mt-6 mb-2",
@@ -46080,7 +46241,7 @@ var PromptsShowPage = ({ promptSubmission }) => {
                     })
                   ]
                 }),
-                promptSubmission.modelUsed && /* @__PURE__ */ jsxs10(Fragment13, {
+                promptSubmission.modelUsed && /* @__PURE__ */ jsxs11(Fragment13, {
                   children: [
                     /* @__PURE__ */ jsx51("h2", {
                       className: "font-brand font-bold mt-6 mb-2",
@@ -46101,7 +46262,7 @@ var PromptsShowPage = ({ promptSubmission }) => {
                   style: { backgroundColor: "#272A36" },
                   children: promptSubmission.prompt
                 }),
-                /* @__PURE__ */ jsxs10("div", {
+                /* @__PURE__ */ jsxs11("div", {
                   className: "mt-6 flex items-center gap-2",
                   children: [
                     /* @__PURE__ */ jsx51(LikeButton, {