@remotion/promo-pages 4.0.404 → 4.0.406

package/dist/Homepage.js

@@ -108,7 +108,7 @@ import { createContext as createContext14, useEffect as useEffect5, useState as
 import { jsx as jsx14 } from "react/jsx-runtime";
 import { createContext as createContext15, useMemo as useMemo13, useReducer } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import {
+import React18, {
   forwardRef as forwardRef4,
   useContext as useContext25,
   useEffect as useEffect12,
@@ -212,7 +212,7 @@ import {
   useState as useState19
 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
-import {
+import React30, {
   forwardRef as forwardRef9,
   useContext as useContext33,
   useEffect as useEffect19,
@@ -343,7 +343,7 @@ function cancelRenderInternal(scope, err) {
     error = Error("Rendering was cancelled");
   }
   if (scope) {
-    scope.remotion_cancelledError = error.stack;
+    scope.remotion_cancelledError = getErrorStackWithMessage(error);
   }
   throw error;
 }
@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.404", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.406", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1589,6 +1589,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { playing, imperativePlaying } = useContext6(TimelineContext);
   const { setPlaying } = useContext6(SetTimelineContext);
   return useMemo6(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
+}, getErrorStackWithMessage = (error) => {
+  const stack = error.stack ?? "";
+  return stack.startsWith("Error:") ? stack : `${error.message}
+${stack}`;
 }, isErrorLike = (err) => {
   if (err instanceof Error) {
     return true;
@@ -1675,7 +1679,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
           DELAY_RENDER_CALLSTACK_TOKEN,
           called
         ].filter(truthy).join(" ");
-        cancelRenderInternal(scope, Error(message));
+        if (environment.isClientSideRendering) {
+          scope.remotion_cancelledError = getErrorStackWithMessage(Error(message));
+        } else {
+          cancelRenderInternal(scope, Error(message));
+        }
       }, timeoutToUse)
     };
   }
@@ -3006,8 +3014,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ref
 }) => {
   let connected = null;
+  let disposed = false;
   return {
     attemptToConnect: () => {
+      if (disposed) {
+        throw new Error("SharedElementSourceNode has been disposed");
+      }
       if (!connected && ref.current) {
         const mediaElementSourceNode = audioContext.createMediaElementSource(ref.current);
         connected = mediaElementSourceNode;
@@ -3018,6 +3030,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
         throw new Error("Audio element not connected");
       }
       return connected;
+    },
+    cleanup: () => {
+      if (connected) {
+        connected.disconnect();
+        connected = null;
+      }
+      disposed = true;
     }
   };
 }, warned = false, warnOnce = (logLevel) => {
@@ -3099,6 +3118,16 @@ Check that all your Remotion packages are on the same version. If your dependenc
       };
     });
   }, [audioContext, numberOfAudioTags]);
+  const effectToUse = React15.useInsertionEffect ?? React15.useLayoutEffect;
+  effectToUse(() => {
+    return () => {
+      requestAnimationFrame(() => {
+        refs.forEach(({ mediaElementSourceNode }) => {
+          mediaElementSourceNode?.cleanup();
+        });
+      });
+    };
+  }, [refs]);
   const takenAudios = useRef6(new Array(numberOfAudioTags).fill(false));
   const rerenderAudios = useCallback7(() => {
     refs.forEach(({ ref, id }) => {
@@ -3143,7 +3172,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
       mediaElementSourceNode,
       premounting,
       audioMounted: Boolean(ref.current),
-      postmounting
+      postmounting,
+      cleanupOnMediaTagUnmount: () => {}
     };
     audios.current?.push(newElem);
     rerenderAudios();
@@ -3268,7 +3298,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
       mediaElementSourceNode,
       premounting,
       audioMounted: Boolean(el.current),
-      postmounting
+      postmounting,
+      cleanupOnMediaTagUnmount: () => {
+        mediaElementSourceNode?.cleanup();
+      }
     };
   });
   const effectToUse = React15.useInsertionEffect ?? React15.useLayoutEffect;
@@ -4524,7 +4557,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
     props.muted,
     props.loop
   ]);
-  const { el: audioRef, mediaElementSourceNode } = useSharedAudio({
+  const {
+    el: audioRef,
+    mediaElementSourceNode,
+    cleanupOnMediaTagUnmount
+  } = useSharedAudio({
     aud: propsToPass,
     audioId: id,
     premounting: Boolean(sequenceContext?.premounting),
@@ -4571,6 +4608,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
+  const effectToUse = React18.useInsertionEffect ?? React18.useLayoutEffect;
+  effectToUse(() => {
+    return () => {
+      requestAnimationFrame(() => {
+        cleanupOnMediaTagUnmount();
+      });
+    };
+  }, [cleanupOnMediaTagUnmount]);
   useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, [audioRef]);
@@ -5794,6 +5839,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
       ref: videoRef
     });
   }, [context.audioContext]);
+  const effectToUse = React30.useInsertionEffect ?? React30.useLayoutEffect;
+  effectToUse(() => {
+    return () => {
+      requestAnimationFrame(() => {
+        sharedSource?.cleanup();
+      });
+    };
+  }, [sharedSource]);
   const {
     volume,
     muted,
@@ -7313,7 +7366,7 @@ __export(exports_esm, {
   Lottie: () => Lottie
 });
 import lottie from "lottie-web";
-import { useEffect as useEffect38, useRef as useRef37, useState as useState37 } from "react";
+import { useEffect as useEffect43, useRef as useRef43, useState as useState40 } from "react";
 import { jsx as jsx61 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -7378,21 +7431,21 @@ var getLottieMetadata = (animationData) => {
   }
   validatePlaybackRate2(playbackRate);
   validateLoop(loop);
-  const animationRef = useRef37(null);
-  const currentFrameRef = useRef37(null);
-  const containerRef = useRef37(null);
-  const onAnimationLoadedRef = useRef37(onAnimationLoaded);
+  const animationRef = useRef43(null);
+  const currentFrameRef = useRef43(null);
+  const containerRef = useRef43(null);
+  const onAnimationLoadedRef = useRef43(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender, continueRender } = useDelayRender();
-  const [handle] = useState37(() => delayRender("Waiting for Lottie animation to load"));
-  useEffect38(() => {
+  const [handle] = useState40(() => delayRender("Waiting for Lottie animation to load"));
+  useEffect43(() => {
     return () => {
       continueRender(handle);
     };
   }, [handle, continueRender]);
   const frame = useCurrentFrame();
   currentFrameRef.current = frame;
-  useEffect38(() => {
+  useEffect43(() => {
     if (!containerRef.current) {
       return;
     }
@@ -7437,17 +7490,17 @@ var getLottieMetadata = (animationData) => {
     renderer,
     continueRender
   ]);
-  useEffect38(() => {
+  useEffect43(() => {
     if (animationRef.current && direction) {
       animationRef.current.setDirection(direction === "backward" ? -1 : 1);
     }
   }, [direction]);
-  useEffect38(() => {
+  useEffect43(() => {
     if (animationRef.current && playbackRate) {
       animationRef.current.setSpeed(playbackRate);
     }
   }, [playbackRate]);
-  useEffect38(() => {
+  useEffect43(() => {
     if (!animationRef.current) {
       return;
     }
@@ -14017,47 +14070,49 @@ import React42 from "react";
 import { jsx as jsx53 } from "react/jsx-runtime";
 import { jsx as jsx63 } from "react/jsx-runtime";
 import { jsx as jsx73, jsxs as jsxs32 } from "react/jsx-runtime";
-import React52 from "react";
 import { jsx as jsx83 } from "react/jsx-runtime";
+import React52 from "react";
 import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
 import * as React342 from "react";
 import * as ReactDOM4 from "react-dom";
 import React92 from "react";
 import * as React62 from "react";
-import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx122 } from "react/jsx-runtime";
 import * as React72 from "react";
 import * as React8 from "react";
-import { Fragment as Fragment22, jsx as jsx112 } from "react/jsx-runtime";
-import { jsx as jsx122 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx132 } from "react/jsx-runtime";
+import { jsx as jsx142 } from "react/jsx-runtime";
 import * as React10 from "react";
-import { jsx as jsx132 } from "react/jsx-runtime";
+import { jsx as jsx152 } from "react/jsx-runtime";
 import * as React14 from "react";
 import * as React112 from "react";
 import * as ReactDOM from "react-dom";
-import { jsx as jsx142 } from "react/jsx-runtime";
+import { jsx as jsx162 } from "react/jsx-runtime";
 import * as React122 from "react";
 import * as React13 from "react";
-import { jsx as jsx152 } from "react/jsx-runtime";
+import { jsx as jsx172 } from "react/jsx-runtime";
 import * as React152 from "react";
 import * as React162 from "react";
-import { jsx as jsx162 } from "react/jsx-runtime";
-import * as React18 from "react";
+import { jsx as jsx182 } from "react/jsx-runtime";
+import * as React182 from "react";
 import * as React172 from "react";
 import * as React22 from "react";
 import * as React19 from "react";
 import { useLayoutEffect as useLayoutEffect32, useEffect as useEffect82 } from "react";
 import * as ReactDOM2 from "react-dom";
 import * as React20 from "react";
-import { jsx as jsx172 } from "react/jsx-runtime";
+import { jsx as jsx192 } from "react/jsx-runtime";
 import * as React212 from "react";
-import { jsx as jsx182 } from "react/jsx-runtime";
+import { jsx as jsx202 } from "react/jsx-runtime";
 import * as React23 from "react";
 import ReactDOM3 from "react-dom";
-import { jsx as jsx192 } from "react/jsx-runtime";
+import { jsx as jsx213 } from "react/jsx-runtime";
 import * as React24 from "react";
 import * as React252 from "react";
 import * as React262 from "react";
-import { jsx as jsx202 } from "react/jsx-runtime";
+import { jsx as jsx223 } from "react/jsx-runtime";
 import * as React332 from "react";
 import * as React29 from "react";
 import { useState as useState112 } from "react";
@@ -14065,16 +14120,43 @@ import * as React27 from "react";
 import * as React282 from "react";
 import * as React322 from "react";
 import * as React31 from "react";
-import * as React30 from "react";
-import { Fragment as Fragment5, jsx as jsx213, jsxs as jsxs42 } from "react/jsx-runtime";
+import * as React302 from "react";
+import { Fragment as Fragment5, jsx as jsx232, jsxs as jsxs42 } from "react/jsx-runtime";
 import { forwardRef as forwardRef132, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef122, createElement as createElement6 } from "react";
 import * as React35 from "react";
-import { jsx as jsx223, jsxs as jsxs52 } from "react/jsx-runtime";
-import { jsx as jsx232 } from "react/jsx-runtime";
-import React362 from "react";
-import { jsx as jsx242 } from "react/jsx-runtime";
+import { jsx as jsx242, jsxs as jsxs52 } from "react/jsx-runtime";
 import { jsx as jsx252 } from "react/jsx-runtime";
+import * as React48 from "react";
+import * as React362 from "react";
+import { jsx as jsx262 } from "react/jsx-runtime";
+import * as React46 from "react";
+import React39 from "react";
+import * as React37 from "react";
+import * as React38 from "react";
+import { Fragment as Fragment222, jsx as jsx272 } from "react/jsx-runtime";
+import { jsx as jsx282 } from "react/jsx-runtime";
+import React210 from "react";
+import { jsx as jsx292 } from "react/jsx-runtime";
+import * as React41 from "react";
+import * as React40 from "react";
+import * as React422 from "react";
+import * as ReactDOM5 from "react-dom";
+import { jsx as jsx302 } from "react/jsx-runtime";
+import * as React43 from "react";
+import * as React44 from "react";
+import * as React2122 from "react";
+import * as React45 from "react";
+import { jsx as jsx322 } from "react/jsx-runtime";
+import { jsx as jsx332 } from "react/jsx-runtime";
+import * as React213 from "react";
+import * as React47 from "react";
+import { jsx as jsx342 } from "react/jsx-runtime";
+import * as React49 from "react";
+import { jsx as jsx352 } from "react/jsx-runtime";
+import React50 from "react";
+import { jsx as jsx362 } from "react/jsx-runtime";
+import { jsx as jsx372 } from "react/jsx-runtime";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -14597,20 +14679,36 @@ var Counter = ({
     ]
   });
 };
+var InlineCode = ({ children }) => {
+  return /* @__PURE__ */ jsx83("code", {
+    className: "font-brand text-brand",
+    children
+  });
+};
 var Input = React52.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx83("input", {
+  return /* @__PURE__ */ jsx93("input", {
     ref,
     className: cn("w-full bg-white dark:bg-[#121212] rounded-lg border-2 border-b-4 border-black outline-none h-14 px-3 fontbrand text-lg box-border", className),
     ...props
   });
 });
 Input.displayName = "Input";
+var Link = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx102("a", {
+    ...props,
+    className: cn(className, "text-brand underline underline-offset-4"),
+    children: props.children
+  });
+};
 var PlanePaperIcon = (props) => {
-  return /* @__PURE__ */ jsx93("svg", {
+  return /* @__PURE__ */ jsx112("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     viewBox: "0 0 576 512",
-    children: /* @__PURE__ */ jsx93("path", {
+    children: /* @__PURE__ */ jsx112("path", {
       fill: "currentcolor",
       d: "M169.9 280L94.9 448.6 461.2 280 169.9 280zm291.3-48L94.9 63.4 169.9 232 461.2 232zM34.8 465.6L128 256 34.8 46.4C33 42.2 32 37.6 32 33 32 14.8 46.7 0 64.8 0 69.5 0 74.2 1 78.5 3L554.2 222c13.3 6.1 21.8 19.4 21.8 34s-8.5 27.9-21.8 34L78.5 509c-4.3 2-9 3-13.7 3-18.1 0-32.8-14.8-32.8-33 0-4.6 1-9.2 2.8-13.4z"
     })
@@ -14637,7 +14735,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName][index] || BaseContext;
       const value = React62.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ jsx102(Context.Provider, { value, children });
+      return /* @__PURE__ */ jsx122(Context.Provider, { value, children });
     }
     function useContext210(consumerName, scope) {
       const Context = scope?.[scopeName][index] || BaseContext;
@@ -14712,9 +14810,9 @@ var Slot = React8.forwardRef((props, forwardedRef) => {
         return child;
       }
     });
-    return /* @__PURE__ */ jsx112(SlotClone, { ...slotProps, ref: forwardedRef, children: React8.isValidElement(newElement) ? React8.cloneElement(newElement, undefined, newChildren) : null });
+    return /* @__PURE__ */ jsx132(SlotClone, { ...slotProps, ref: forwardedRef, children: React8.isValidElement(newElement) ? React8.cloneElement(newElement, undefined, newChildren) : null });
   }
-  return /* @__PURE__ */ jsx112(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  return /* @__PURE__ */ jsx132(SlotClone, { ...slotProps, ref: forwardedRef, children });
 });
 Slot.displayName = "Slot";
 var SlotClone = React8.forwardRef((props, forwardedRef) => {
@@ -14730,7 +14828,7 @@ var SlotClone = React8.forwardRef((props, forwardedRef) => {
 });
 SlotClone.displayName = "SlotClone";
 var Slottable = ({ children }) => {
-  return /* @__PURE__ */ jsx112(Fragment22, { children });
+  return /* @__PURE__ */ jsx132(Fragment22, { children });
 };
 function isSlottable(child) {
   return React8.isValidElement(child) && child.type === Slottable;
@@ -14779,7 +14877,7 @@ function createCollection(name) {
     const { scope, children } = props;
     const ref = React92.useRef(null);
     const itemMap = React92.useRef(/* @__PURE__ */ new Map).current;
-    return /* @__PURE__ */ jsx122(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    return /* @__PURE__ */ jsx142(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
@@ -14787,7 +14885,7 @@ function createCollection(name) {
     const { scope, children } = props;
     const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
     const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-    return /* @__PURE__ */ jsx122(Slot, { ref: composedRefs, children });
+    return /* @__PURE__ */ jsx142(Slot, { ref: composedRefs, children });
   });
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
@@ -14801,7 +14899,7 @@ function createCollection(name) {
       context.itemMap.set(ref, { ref, ...itemData });
       return () => void context.itemMap.delete(ref);
     });
-    return /* @__PURE__ */ jsx122(Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+    return /* @__PURE__ */ jsx142(Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
   });
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection(scope) {
@@ -14853,7 +14951,7 @@ var Primitive = NODES.reduce((primitive, node) => {
     if (typeof window !== "undefined") {
       window[Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ jsx142(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx162(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
@@ -14974,7 +15072,7 @@ var DismissableLayer = React14.forwardRef((props, forwardedRef) => {
     document.addEventListener(CONTEXT_UPDATE, handleUpdate);
     return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
   }, []);
-  return /* @__PURE__ */ jsx152(Primitive.div, {
+  return /* @__PURE__ */ jsx172(Primitive.div, {
     ...layerProps,
     ref: composedRefs,
     style: {
@@ -15001,7 +15099,7 @@ var DismissableLayerBranch = React14.forwardRef((props, forwardedRef) => {
       };
     }
   }, [context.branches]);
-  return /* @__PURE__ */ jsx152(Primitive.div, { ...props, ref: composedRefs });
+  return /* @__PURE__ */ jsx172(Primitive.div, { ...props, ref: composedRefs });
 });
 DismissableLayerBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
@@ -15224,7 +15322,7 @@ var FocusScope = React162.forwardRef((props, forwardedRef) => {
       }
     }
   }, [loop, trapped, focusScope.paused]);
-  return /* @__PURE__ */ jsx162(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
+  return /* @__PURE__ */ jsx182(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
 });
 FocusScope.displayName = FOCUS_SCOPE_NAME;
 function focusFirst(candidates, { select = false } = {}) {
@@ -15314,12 +15412,12 @@ function removeLinks(items) {
   return items.filter((item) => item.tagName !== "A");
 }
 var useLayoutEffect22 = Boolean(globalThis?.document) ? React172.useLayoutEffect : () => {};
-var useReactId = React18["useId".toString()] || (() => {
+var useReactId = React182["useId".toString()] || (() => {
   return;
 });
 var count2 = 0;
 function useId(deterministicId) {
-  const [id, setId] = React18.useState(useReactId());
+  const [id, setId] = React182.useState(useReactId());
   useLayoutEffect22(() => {
     if (!deterministicId)
       setId((reactId) => reactId ?? String(count2++));
@@ -17114,14 +17212,14 @@ var arrow3 = (options, deps) => ({
 var NAME = "Arrow";
 var Arrow = React20.forwardRef((props, forwardedRef) => {
   const { children, width = 10, height = 5, ...arrowProps } = props;
-  return /* @__PURE__ */ jsx172(Primitive.svg, {
+  return /* @__PURE__ */ jsx192(Primitive.svg, {
     ...arrowProps,
     ref: forwardedRef,
     width,
     height,
     viewBox: "0 0 30 10",
     preserveAspectRatio: "none",
-    children: props.asChild ? children : /* @__PURE__ */ jsx172("polygon", { points: "0,0 30,0 15,10" })
+    children: props.asChild ? children : /* @__PURE__ */ jsx192("polygon", { points: "0,0 30,0 15,10" })
   });
 });
 Arrow.displayName = NAME;
@@ -17166,7 +17264,7 @@ var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props) => {
   const { __scopePopper, children } = props;
   const [anchor, setAnchor] = React22.useState(null);
-  return /* @__PURE__ */ jsx182(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
+  return /* @__PURE__ */ jsx202(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
 };
 Popper.displayName = POPPER_NAME;
 var ANCHOR_NAME = "PopperAnchor";
@@ -17178,7 +17276,7 @@ var PopperAnchor = React22.forwardRef((props, forwardedRef) => {
   React22.useEffect(() => {
     context.onAnchorChange(virtualRef?.current || ref.current);
   });
-  return virtualRef ? null : /* @__PURE__ */ jsx182(Primitive.div, { ...anchorProps, ref: composedRefs });
+  return virtualRef ? null : /* @__PURE__ */ jsx202(Primitive.div, { ...anchorProps, ref: composedRefs });
 });
 PopperAnchor.displayName = ANCHOR_NAME;
 var CONTENT_NAME = "PopperContent";
@@ -17268,7 +17366,7 @@ var PopperContent = React22.forwardRef((props, forwardedRef) => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  return /* @__PURE__ */ jsx182("div", {
+  return /* @__PURE__ */ jsx202("div", {
     ref: refs.setFloating,
     "data-radix-popper-content-wrapper": "",
     style: {
@@ -17286,14 +17384,14 @@ var PopperContent = React22.forwardRef((props, forwardedRef) => {
       }
     },
     dir: props.dir,
-    children: /* @__PURE__ */ jsx182(PopperContentProvider, {
+    children: /* @__PURE__ */ jsx202(PopperContentProvider, {
       scope: __scopePopper,
       placedSide,
       onArrowChange: setArrow,
       arrowX,
       arrowY,
       shouldHideArrow: cannotCenterArrow,
-      children: /* @__PURE__ */ jsx182(Primitive.div, {
+      children: /* @__PURE__ */ jsx202(Primitive.div, {
         "data-side": placedSide,
         "data-align": placedAlign,
         ...contentProps,
@@ -17318,7 +17416,7 @@ var PopperArrow = React22.forwardRef(function PopperArrow2(props, forwardedRef)
   const { __scopePopper, ...arrowProps } = props;
   const contentContext = useContentContext(ARROW_NAME, __scopePopper);
   const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
-  return /* @__PURE__ */ jsx182("span", {
+  return /* @__PURE__ */ jsx202("span", {
     ref: contentContext.onArrowChange,
     style: {
       position: "absolute",
@@ -17339,7 +17437,7 @@ var PopperArrow = React22.forwardRef(function PopperArrow2(props, forwardedRef)
       }[contentContext.placedSide],
       visibility: contentContext.shouldHideArrow ? "hidden" : undefined
     },
-    children: /* @__PURE__ */ jsx182(Root2, {
+    children: /* @__PURE__ */ jsx202(Root2, {
       ...arrowProps,
       ref: forwardedRef,
       style: {
@@ -17398,7 +17496,7 @@ var Portal = React23.forwardRef((props, forwardedRef) => {
   const [mounted, setMounted] = React23.useState(false);
   useLayoutEffect22(() => setMounted(true), []);
   const container22 = containerProp || mounted && globalThis?.document?.body;
-  return container22 ? ReactDOM3.createPortal(/* @__PURE__ */ jsx192(Primitive.div, { ...portalProps, ref: forwardedRef }), container22) : null;
+  return container22 ? ReactDOM3.createPortal(/* @__PURE__ */ jsx213(Primitive.div, { ...portalProps, ref: forwardedRef }), container22) : null;
 });
 Portal.displayName = PORTAL_NAME;
 function useControllableState({
@@ -17450,7 +17548,7 @@ function usePrevious(value) {
 }
 var NAME2 = "VisuallyHidden";
 var VisuallyHidden = React262.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx202(Primitive.span, {
+  return /* @__PURE__ */ jsx223(Primitive.span, {
     ...props,
     ref: forwardedRef,
     style: {
@@ -17869,7 +17967,7 @@ var stylesheetSingleton = function() {
 var styleHookSingleton = function() {
   var sheet = stylesheetSingleton();
   return function(styles, isDynamic) {
-    React30.useEffect(function() {
+    React302.useEffect(function() {
       sheet.add(styles);
       return function() {
         sheet.remove();
@@ -18311,7 +18409,7 @@ var Select = (props) => {
   const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
   const [nativeOptionsSet, setNativeOptionsSet] = React342.useState(/* @__PURE__ */ new Set);
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
-  return /* @__PURE__ */ jsx213(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs42(SelectProvider, {
+  return /* @__PURE__ */ jsx232(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs42(SelectProvider, {
     required,
     scope: __scopeSelect,
     trigger,
@@ -18329,7 +18427,7 @@ var Select = (props) => {
     triggerPointerDownPosRef,
     disabled,
     children: [
-      /* @__PURE__ */ jsx213(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx213(SelectNativeOptionsProvider, {
+      /* @__PURE__ */ jsx232(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx232(SelectNativeOptionsProvider, {
         scope: props.__scopeSelect,
         onNativeOptionAdd: React342.useCallback((option) => {
           setNativeOptionsSet((prev) => new Set(prev).add(option));
@@ -18353,7 +18451,7 @@ var Select = (props) => {
         onChange: (event) => setValue(event.target.value),
         disabled,
         children: [
-          value === undefined ? /* @__PURE__ */ jsx213("option", { value: "" }) : null,
+          value === undefined ? /* @__PURE__ */ jsx232("option", { value: "" }) : null,
           Array.from(nativeOptionsSet)
         ]
       }, nativeSelectKey) : null
@@ -18383,7 +18481,7 @@ var SelectTrigger = React342.forwardRef((props, forwardedRef) => {
       resetTypeahead();
     }
   };
-  return /* @__PURE__ */ jsx213(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx213(Primitive.button, {
+  return /* @__PURE__ */ jsx232(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx232(Primitive.button, {
     type: "button",
     role: "combobox",
     "aria-controls": context.contentId,
@@ -18439,23 +18537,23 @@ var SelectValue = React342.forwardRef((props, forwardedRef) => {
   useLayoutEffect22(() => {
     onValueNodeHasChildrenChange(hasChildren);
   }, [onValueNodeHasChildrenChange, hasChildren]);
-  return /* @__PURE__ */ jsx213(Primitive.span, {
+  return /* @__PURE__ */ jsx232(Primitive.span, {
     ...valueProps,
     ref: composedRefs,
     style: { pointerEvents: "none" },
-    children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx213(Fragment5, { children: placeholder }) : children
+    children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx232(Fragment5, { children: placeholder }) : children
   });
 });
 SelectValue.displayName = VALUE_NAME;
 var ICON_NAME = "SelectIcon";
 var SelectIcon = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, children, ...iconProps } = props;
-  return /* @__PURE__ */ jsx213(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
+  return /* @__PURE__ */ jsx232(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
 });
 SelectIcon.displayName = ICON_NAME;
 var PORTAL_NAME2 = "SelectPortal";
 var SelectPortal = (props) => {
-  return /* @__PURE__ */ jsx213(Portal, { asChild: true, ...props });
+  return /* @__PURE__ */ jsx232(Portal, { asChild: true, ...props });
 };
 SelectPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "SelectContent";
@@ -18467,9 +18565,9 @@ var SelectContent = React342.forwardRef((props, forwardedRef) => {
   }, []);
   if (!context.open) {
     const frag = fragment;
-    return frag ? ReactDOM4.createPortal(/* @__PURE__ */ jsx213(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx213(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx213("div", { children: props.children }) }) }), frag) : null;
+    return frag ? ReactDOM4.createPortal(/* @__PURE__ */ jsx232(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx232(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx232("div", { children: props.children }) }) }), frag) : null;
   }
-  return /* @__PURE__ */ jsx213(SelectContentImpl, { ...props, ref: forwardedRef });
+  return /* @__PURE__ */ jsx232(SelectContentImpl, { ...props, ref: forwardedRef });
 });
 SelectContent.displayName = CONTENT_NAME2;
 var CONTENT_MARGIN = 10;
@@ -18609,7 +18707,7 @@ var SelectContentImpl = React342.forwardRef((props, forwardedRef) => {
     hideWhenDetached,
     avoidCollisions
   } : {};
-  return /* @__PURE__ */ jsx213(SelectContentProvider, {
+  return /* @__PURE__ */ jsx232(SelectContentProvider, {
     scope: __scopeSelect,
     content,
     viewport,
@@ -18623,7 +18721,7 @@ var SelectContentImpl = React342.forwardRef((props, forwardedRef) => {
     position,
     isPositioned,
     searchRef,
-    children: /* @__PURE__ */ jsx213(Combination_default, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsx213(FocusScope, {
+    children: /* @__PURE__ */ jsx232(Combination_default, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsx232(FocusScope, {
       asChild: true,
       trapped: context.open,
       onMountAutoFocus: (event) => {
@@ -18633,14 +18731,14 @@ var SelectContentImpl = React342.forwardRef((props, forwardedRef) => {
         context.trigger?.focus({ preventScroll: true });
         event.preventDefault();
       }),
-      children: /* @__PURE__ */ jsx213(DismissableLayer, {
+      children: /* @__PURE__ */ jsx232(DismissableLayer, {
         asChild: true,
         disableOutsidePointerEvents: true,
         onEscapeKeyDown,
         onPointerDownOutside,
         onFocusOutside: (event) => event.preventDefault(),
         onDismiss: () => context.onOpenChange(false),
-        children: /* @__PURE__ */ jsx213(SelectPosition, {
+        children: /* @__PURE__ */ jsx232(SelectPosition, {
           role: "listbox",
           id: context.contentId,
           "data-state": context.open ? "open" : "closed",
@@ -18788,12 +18886,12 @@ var SelectItemAlignedPosition = React342.forwardRef((props, forwardedRef) => {
       shouldRepositionRef.current = false;
     }
   }, [position, focusSelectedItem]);
-  return /* @__PURE__ */ jsx213(SelectViewportProvider, {
+  return /* @__PURE__ */ jsx232(SelectViewportProvider, {
     scope: __scopeSelect,
     contentWrapper,
     shouldExpandOnScrollRef,
     onScrollButtonChange: handleScrollButtonChange,
-    children: /* @__PURE__ */ jsx213("div", {
+    children: /* @__PURE__ */ jsx232("div", {
       ref: setContentWrapper,
       style: {
         display: "flex",
@@ -18801,7 +18899,7 @@ var SelectItemAlignedPosition = React342.forwardRef((props, forwardedRef) => {
         position: "fixed",
         zIndex: contentZIndex
       },
-      children: /* @__PURE__ */ jsx213(Primitive.div, {
+      children: /* @__PURE__ */ jsx232(Primitive.div, {
         ...popperProps,
         ref: composedRefs,
         style: {
@@ -18823,7 +18921,7 @@ var SelectPopperPosition = React342.forwardRef((props, forwardedRef) => {
     ...popperProps
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  return /* @__PURE__ */ jsx213(Content, {
+  return /* @__PURE__ */ jsx232(Content, {
     ...popperScope,
     ...popperProps,
     ref: forwardedRef,
@@ -18852,13 +18950,13 @@ var SelectViewport = React342.forwardRef((props, forwardedRef) => {
   const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);
   const prevScrollTopRef = React342.useRef(0);
   return /* @__PURE__ */ jsxs42(Fragment5, { children: [
-    /* @__PURE__ */ jsx213("style", {
+    /* @__PURE__ */ jsx232("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}`
       },
       nonce
     }),
-    /* @__PURE__ */ jsx213(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx213(Primitive.div, {
+    /* @__PURE__ */ jsx232(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx232(Primitive.div, {
       "data-radix-select-viewport": "",
       role: "presentation",
       ...viewportProps,
@@ -18902,14 +19000,14 @@ var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GR
 var SelectGroup = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...groupProps } = props;
   const groupId = useId();
-  return /* @__PURE__ */ jsx213(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx213(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
+  return /* @__PURE__ */ jsx232(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx232(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
 });
 SelectGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "SelectLabel";
 var SelectLabel = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...labelProps } = props;
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-  return /* @__PURE__ */ jsx213(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx232(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
 });
 SelectLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "SelectItem";
@@ -18938,7 +19036,7 @@ var SelectItem = React342.forwardRef((props, forwardedRef) => {
   if (value === "") {
     throw new Error("A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.");
   }
-  return /* @__PURE__ */ jsx213(SelectItemContextProvider, {
+  return /* @__PURE__ */ jsx232(SelectItemContextProvider, {
     scope: __scopeSelect,
     value,
     disabled,
@@ -18947,12 +19045,12 @@ var SelectItem = React342.forwardRef((props, forwardedRef) => {
     onItemTextChange: React342.useCallback((node) => {
       setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
     }, []),
-    children: /* @__PURE__ */ jsx213(Collection.ItemSlot, {
+    children: /* @__PURE__ */ jsx232(Collection.ItemSlot, {
       scope: __scopeSelect,
       value,
       disabled,
       textValue,
-      children: /* @__PURE__ */ jsx213(Primitive.div, {
+      children: /* @__PURE__ */ jsx232(Primitive.div, {
         role: "option",
         "aria-labelledby": textId,
         "data-highlighted": isFocused ? "" : undefined,
@@ -19002,14 +19100,14 @@ var SelectItemText = React342.forwardRef((props, forwardedRef) => {
   const [itemTextNode, setItemTextNode] = React342.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setItemTextNode(node), itemContext.onItemTextChange, (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled));
   const textContent = itemTextNode?.textContent;
-  const nativeOption = React342.useMemo(() => /* @__PURE__ */ jsx213("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
+  const nativeOption = React342.useMemo(() => /* @__PURE__ */ jsx232("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__ */ jsxs42(Fragment5, { children: [
-    /* @__PURE__ */ jsx213(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
+    /* @__PURE__ */ jsx232(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
     itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM4.createPortal(itemTextProps.children, context.valueNode) : null
   ] });
 });
@@ -19018,7 +19116,7 @@ var ITEM_INDICATOR_NAME = "SelectItemIndicator";
 var SelectItemIndicator = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...itemIndicatorProps } = props;
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-  return itemContext.isSelected ? /* @__PURE__ */ jsx213(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
+  return itemContext.isSelected ? /* @__PURE__ */ jsx232(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
@@ -19040,7 +19138,7 @@ var SelectScrollUpButton = React342.forwardRef((props, forwardedRef) => {
       return () => viewport.removeEventListener("scroll", handleScroll22);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
-  return canScrollUp ? /* @__PURE__ */ jsx213(SelectScrollButtonImpl, {
+  return canScrollUp ? /* @__PURE__ */ jsx232(SelectScrollButtonImpl, {
     ...props,
     ref: composedRefs,
     onAutoScroll: () => {
@@ -19072,7 +19170,7 @@ var SelectScrollDownButton = React342.forwardRef((props, forwardedRef) => {
       return () => viewport.removeEventListener("scroll", handleScroll22);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
-  return canScrollDown ? /* @__PURE__ */ jsx213(SelectScrollButtonImpl, {
+  return canScrollDown ? /* @__PURE__ */ jsx232(SelectScrollButtonImpl, {
     ...props,
     ref: composedRefs,
     onAutoScroll: () => {
@@ -19102,7 +19200,7 @@ var SelectScrollButtonImpl = React342.forwardRef((props, forwardedRef) => {
     const activeItem = getItems().find((item) => item.ref.current === document.activeElement);
     activeItem?.ref.current?.scrollIntoView({ block: "nearest" });
   }, [getItems]);
-  return /* @__PURE__ */ jsx213(Primitive.div, {
+  return /* @__PURE__ */ jsx232(Primitive.div, {
     "aria-hidden": true,
     ...scrollIndicatorProps,
     ref: forwardedRef,
@@ -19126,7 +19224,7 @@ var SelectScrollButtonImpl = React342.forwardRef((props, forwardedRef) => {
 var SEPARATOR_NAME = "SelectSeparator";
 var SelectSeparator = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...separatorProps } = props;
-  return /* @__PURE__ */ jsx213(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx232(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
 });
 SelectSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME2 = "SelectArrow";
@@ -19135,7 +19233,7 @@ var SelectArrow = React342.forwardRef((props, forwardedRef) => {
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(ARROW_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(ARROW_NAME2, __scopeSelect);
-  return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx213(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
+  return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx232(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
 });
 SelectArrow.displayName = ARROW_NAME2;
 function shouldShowPlaceholder(value) {
@@ -19157,7 +19255,7 @@ var BubbleSelect = React342.forwardRef((props, forwardedRef) => {
       select.dispatchEvent(event);
     }
   }, [prevValue, value]);
-  return /* @__PURE__ */ jsx213(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx213("select", { ...selectProps, ref: composedRefs, defaultValue: value }) });
+  return /* @__PURE__ */ jsx232(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx232("select", { ...selectProps, ref: composedRefs, defaultValue: value }) });
 });
 BubbleSelect.displayName = "BubbleSelect";
 function useTypeaheadSearch(onSearchChange) {
@@ -19273,51 +19371,51 @@ var SelectTrigger2 = React35.forwardRef(({ className, children, ...props }, ref)
   ...props,
   children: [
     children,
-    /* @__PURE__ */ jsx223(Icon, {
+    /* @__PURE__ */ jsx242(Icon, {
       asChild: true,
-      children: /* @__PURE__ */ jsx223(ChevronDown, {
+      children: /* @__PURE__ */ jsx242(ChevronDown, {
         className: "h-4 w-4 opacity-50"
       })
     })
   ]
 }));
 SelectTrigger2.displayName = Trigger.displayName;
-var SelectScrollUpButton2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(ScrollUpButton, {
+var SelectScrollUpButton2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx242(ScrollUpButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
-  children: /* @__PURE__ */ jsx223(ChevronUp, {
+  children: /* @__PURE__ */ jsx242(ChevronUp, {
     className: "h-4 w-4"
   })
 }));
 SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
-var SelectScrollDownButton2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(ScrollDownButton, {
+var SelectScrollDownButton2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx242(ScrollDownButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
-  children: /* @__PURE__ */ jsx223(ChevronDown, {
+  children: /* @__PURE__ */ jsx242(ChevronDown, {
     className: "h-4 w-4"
   })
 }));
 SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
-var SelectContent2 = React35.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx223(Portal2, {
+var SelectContent2 = React35.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx242(Portal2, {
   children: /* @__PURE__ */ jsxs52(Content2, {
     ref,
     className: cn(" border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
     position,
     ...props,
     children: [
-      /* @__PURE__ */ jsx223(SelectScrollUpButton2, {}),
-      /* @__PURE__ */ jsx223(Viewport, {
+      /* @__PURE__ */ jsx242(SelectScrollUpButton2, {}),
+      /* @__PURE__ */ jsx242(Viewport, {
         className: cn("p-1", position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"),
         children
       }),
-      /* @__PURE__ */ jsx223(SelectScrollDownButton2, {})
+      /* @__PURE__ */ jsx242(SelectScrollDownButton2, {})
     ]
   })
 }));
 SelectContent2.displayName = Content2.displayName;
-var SelectLabel2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(Label, {
+var SelectLabel2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx242(Label, {
   ref,
   className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
   ...props
@@ -19328,188 +19426,1317 @@ var SelectItem2 = React35.forwardRef(({ className, children, ...props }, 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,
   children: [
-    /* @__PURE__ */ jsx223("span", {
+    /* @__PURE__ */ jsx242("span", {
       className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
-      children: /* @__PURE__ */ jsx223(ItemIndicator, {
-        children: /* @__PURE__ */ jsx223(Check, {
+      children: /* @__PURE__ */ jsx242(ItemIndicator, {
+        children: /* @__PURE__ */ jsx242(Check, {
           className: "h-4 w-4"
         })
       })
     }),
-    /* @__PURE__ */ jsx223(ItemText, {
+    /* @__PURE__ */ jsx242(ItemText, {
       children
     })
   ]
 }));
 SelectItem2.displayName = Item.displayName;
-var SelectSeparator2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(Separator, {
+var SelectSeparator2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx242(Separator, {
   ref,
   className: cn("-mx-1 my-1 h-px bg-muted", className),
   ...props
 }));
 SelectSeparator2.displayName = Separator.displayName;
 var Switch = ({ active, onToggle }) => {
-  return /* @__PURE__ */ jsx232("div", {
+  return /* @__PURE__ */ jsx252("div", {
     "data-active": active,
     className: "h-8 transition-all rounded-full w-14 border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative",
     onClick: onToggle,
-    children: /* @__PURE__ */ jsx232("div", {
+    children: /* @__PURE__ */ jsx252("div", {
       "data-active": active,
       className: "h-4 w-4 box-content left-[4px] top-[3px] transition-all rounded-full bg-white border-2 border-black absolute data-[active=true]:left-[calc(100%-24px)]"
     })
   });
 };
-var Textarea = React362.forwardRef(({ className, style, ...props }, ref) => {
-  return /* @__PURE__ */ jsx242("textarea", {
-    ref,
-    className: cn("w-full bg-white dark:bg-[#121212] rounded-lg border-2 border-b-4 border-black outline-none px-3 py-3 fontbrand text-lg box-border field-sizing-content min-h-[90px]", className),
-    style: {
-      ...style
-    },
-    ...props
-  });
-});
-Textarea.displayName = "Textarea";
-var Triangle2 = (props) => {
-  return /* @__PURE__ */ jsx252("svg", {
-    viewBox: "0 0 127 131",
-    fill: "none",
-    ...props,
-    children: /* @__PURE__ */ jsx252("path", {
-      d: "M28.5644 0.011261C25.8196 0.159241 23.6077 0.591782 21.3786 1.43413C20.2669 1.84959 18.4446 2.75455 17.4418 3.38062C13.2472 5.993 10.0496 9.9201 8.38209 14.4903C8.04973 15.3953 7.15007 18.2809 6.5713 20.2672C2.71476 33.5453 0.525761 48.0643 0.0558711 63.4312C-0.0186237 65.8785 -0.0186237 71.7066 0.0558711 74.1141C0.371041 84.3018 1.35093 93.4992 3.12735 102.879C3.84937 106.675 5.00691 111.774 5.67736 114.091C7.04692 118.798 9.84334 122.805 13.8202 125.741C16.4848 127.711 19.5105 129.031 22.8627 129.68C24.4787 129.993 26.6104 130.135 28.1805 130.033C30.3523 129.89 34.6616 129.316 38.1628 128.695C53.9442 125.901 68.5223 120.898 81.7422 113.738C90.1143 109.202 97.2715 104.29 104.177 98.3312C111.059 92.4007 116.927 86.0206 122.09 78.8608C123.287 77.2045 123.889 76.237 124.491 75.019C126.038 71.8773 126.766 68.7527 126.76 65.2582C126.76 62.0027 126.141 59.1114 124.806 56.1518C124.164 54.7233 123.551 53.6988 122.176 51.7523C117.11 44.5868 111.489 38.3433 104.635 32.2762C94.011 22.8739 81.3927 15.1619 67.3017 9.45339C64.2474 8.21835 61.239 7.13128 57.6174 5.95315C49.9502 3.46598 40.4607 1.30891 32.4324 0.233231C31.1718 0.0624847 29.4584 -0.0342712 28.5644 0.011261Z",
-      fill: "currentcolor"
-    })
-  });
-};
-
-// src/components/homepage/FreePricing.tsx
-import React39, { useCallback as useCallback26, useMemo as useMemo43 } from "react";
-
-// ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
-var CLASS_PART_SEPARATOR2 = "-";
-var createClassGroupUtils2 = (config) => {
-  const classMap = createClassMap2(config);
-  const {
-    conflictingClassGroups,
-    conflictingClassGroupModifiers
-  } = config;
-  const getClassGroupId = (className) => {
-    const classParts = className.split(CLASS_PART_SEPARATOR2);
-    if (classParts[0] === "" && classParts.length !== 1) {
-      classParts.shift();
+var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+function composeEventHandlers2(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler?.(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler?.(event);
     }
-    return getGroupRecursive2(classParts, classMap) || getGroupIdForArbitraryProperty2(className);
   };
-  const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
-    const conflicts = conflictingClassGroups[classGroupId] || [];
-    if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
-      return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
+}
+function createContextScope2(scopeName, createContextScopeDeps = []) {
+  let defaultContexts = [];
+  function createContext32(rootComponentName, defaultContext) {
+    const BaseContext = React362.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 = React362.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ jsx262(Context.Provider, { value, children });
+    };
+    Provider.displayName = rootComponentName + "Provider";
+    function useContext222(consumerName, scope) {
+      const Context = scope?.[scopeName]?.[index2] || BaseContext;
+      const context = React362.useContext(Context);
+      if (context)
+        return context;
+      if (defaultContext !== undefined)
+        return defaultContext;
+      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
     }
-    return conflicts;
+    return [Provider, useContext222];
+  }
+  const createScope = () => {
+    const scopeContexts = defaultContexts.map((defaultContext) => {
+      return React362.createContext(defaultContext);
+    });
+    return function useScope(scope) {
+      const contexts = scope?.[scopeName] || scopeContexts;
+      return React362.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
+    };
   };
-  return {
-    getClassGroupId,
-    getConflictingClassGroupIds
+  createScope.scopeName = scopeName;
+  return [createContext32, composeContextScopes2(createScope, ...createContextScopeDeps)];
+}
+function composeContextScopes2(...scopes) {
+  const baseScope = scopes[0];
+  if (scopes.length === 1)
+    return baseScope;
+  const createScope = () => {
+    const scopeHooks = scopes.map((createScope2) => ({
+      useScope: createScope2(),
+      scopeName: createScope2.scopeName
+    }));
+    return function useComposedScopes(overrideScopes) {
+      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
+        const scopeProps = useScope(overrideScopes);
+        const currentScope = scopeProps[`__scope${scopeName}`];
+        return { ...nextScopes2, ...currentScope };
+      }, {});
+      return React362.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+    };
   };
-};
-var getGroupRecursive2 = (classParts, classPartObject) => {
-  if (classParts.length === 0) {
-    return classPartObject.classGroupId;
-  }
-  const currentClassPart = classParts[0];
-  const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
-  const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive2(classParts.slice(1), nextClassPartObject) : undefined;
-  if (classGroupFromNextClassPart) {
-    return classGroupFromNextClassPart;
-  }
-  if (classPartObject.validators.length === 0) {
-    return;
-  }
-  const classRest = classParts.join(CLASS_PART_SEPARATOR2);
-  return classPartObject.validators.find(({
-    validator
-  }) => validator(classRest))?.classGroupId;
-};
-var arbitraryPropertyRegex2 = /^\[(.+)\]$/;
-var getGroupIdForArbitraryProperty2 = (className) => {
-  if (arbitraryPropertyRegex2.test(className)) {
-    const arbitraryPropertyClassName = arbitraryPropertyRegex2.exec(className)[1];
-    const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(":"));
-    if (property) {
-      return "arbitrary.." + property;
-    }
+  createScope.scopeName = baseScope.scopeName;
+  return createScope;
+}
+function setRef2(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== undefined) {
+    ref.current = value;
   }
-};
-var createClassMap2 = (config) => {
-  const {
-    theme,
-    prefix
-  } = config;
-  const classMap = {
-    nextPart: new Map,
-    validators: []
-  };
-  const prefixedClassGroupEntries = getPrefixedClassGroupEntries2(Object.entries(config.classGroups), prefix);
-  prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => {
-    processClassesRecursively2(classGroup, classMap, classGroupId, theme);
-  });
-  return classMap;
-};
-var processClassesRecursively2 = (classGroup, classPartObject, classGroupId, theme) => {
-  classGroup.forEach((classDefinition) => {
-    if (typeof classDefinition === "string") {
-      const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart2(classPartObject, classDefinition);
-      classPartObjectToEdit.classGroupId = classGroupId;
-      return;
-    }
-    if (typeof classDefinition === "function") {
-      if (isThemeGetter2(classDefinition)) {
-        processClassesRecursively2(classDefinition(theme), classPartObject, classGroupId, theme);
-        return;
+}
+function composeRefs2(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef2(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
       }
-      classPartObject.validators.push({
-        validator: classDefinition,
-        classGroupId
-      });
-      return;
-    }
-    Object.entries(classDefinition).forEach(([key, classGroup2]) => {
-      processClassesRecursively2(classGroup2, getPart2(classPartObject, key), classGroupId, theme);
+      return cleanup;
     });
-  });
-};
-var getPart2 = (classPartObject, path) => {
-  let currentClassPartObject = classPartObject;
-  path.split(CLASS_PART_SEPARATOR2).forEach((pathPart) => {
-    if (!currentClassPartObject.nextPart.has(pathPart)) {
-      currentClassPartObject.nextPart.set(pathPart, {
-        nextPart: new Map,
-        validators: []
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0;i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef2(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs2(...refs) {
+  return React37.useCallback(composeRefs2(...refs), refs);
+}
+function createSlot(ownerName) {
+  const SlotClone2 = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React38.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React38.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable2);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React38.Children.count(newElement) > 1)
+            return React38.Children.only(null);
+          return React38.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
       });
+      return /* @__PURE__ */ jsx272(SlotClone2, { ...slotProps, ref: forwardedRef, children: React38.isValidElement(newElement) ? React38.cloneElement(newElement, undefined, newChildren) : null });
     }
-    currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
+    return /* @__PURE__ */ jsx272(SlotClone2, { ...slotProps, ref: forwardedRef, children });
   });
-  return currentClassPartObject;
-};
-var isThemeGetter2 = (func) => func.isThemeGetter;
-var getPrefixedClassGroupEntries2 = (classGroupEntries, prefix) => {
-  if (!prefix) {
-    return classGroupEntries;
-  }
-  return classGroupEntries.map(([classGroupId, classGroup]) => {
-    const prefixedClassGroup = classGroup.map((classDefinition) => {
-      if (typeof classDefinition === "string") {
-        return prefix + classDefinition;
-      }
-      if (typeof classDefinition === "object") {
-        return Object.fromEntries(Object.entries(classDefinition).map(([key, value]) => [prefix + key, value]));
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+function createSlotClone(ownerName) {
+  const SlotClone2 = React38.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React38.isValidElement(children)) {
+      const childrenRef = getElementRef2(children);
+      const props2 = mergeProps2(slotProps, children.props);
+      if (children.type !== React38.Fragment) {
+        props2.ref = forwardedRef ? composeRefs2(forwardedRef, childrenRef) : childrenRef;
       }
-      return classDefinition;
-    });
-    return [classGroupId, prefixedClassGroup];
+      return React38.cloneElement(children, props2);
+    }
+    return React38.Children.count(children) > 1 ? React38.Children.only(null) : null;
   });
-};
-var createLruCache2 = (maxCacheSize) => {
+  SlotClone2.displayName = `${ownerName}.SlotClone`;
+  return SlotClone2;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function isSlottable2(child) {
+  return React38.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps2(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef2(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+function createCollection2(name) {
+  const PROVIDER_NAME = name + "CollectionProvider";
+  const [createCollectionContext, createCollectionScope2] = createContextScope2(PROVIDER_NAME);
+  const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
+  const CollectionProvider = (props) => {
+    const { scope, children } = props;
+    const ref = React39.useRef(null);
+    const itemMap = React39.useRef(/* @__PURE__ */ new Map).current;
+    return /* @__PURE__ */ jsx282(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+  };
+  CollectionProvider.displayName = PROVIDER_NAME;
+  const COLLECTION_SLOT_NAME = name + "CollectionSlot";
+  const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
+  const CollectionSlot = React39.forwardRef((props, forwardedRef) => {
+    const { scope, children } = props;
+    const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
+    const composedRefs = useComposedRefs2(forwardedRef, context.collectionRef);
+    return /* @__PURE__ */ jsx282(CollectionSlotImpl, { ref: composedRefs, children });
+  });
+  CollectionSlot.displayName = COLLECTION_SLOT_NAME;
+  const ITEM_SLOT_NAME = name + "CollectionItemSlot";
+  const ITEM_DATA_ATTR = "data-radix-collection-item";
+  const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
+  const CollectionItemSlot = React39.forwardRef((props, forwardedRef) => {
+    const { scope, children, ...itemData } = props;
+    const ref = React39.useRef(null);
+    const composedRefs = useComposedRefs2(forwardedRef, ref);
+    const context = useCollectionContext(ITEM_SLOT_NAME, scope);
+    React39.useEffect(() => {
+      context.itemMap.set(ref, { ref, ...itemData });
+      return () => void context.itemMap.delete(ref);
+    });
+    return /* @__PURE__ */ jsx282(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+  });
+  CollectionItemSlot.displayName = ITEM_SLOT_NAME;
+  function useCollection2(scope) {
+    const context = useCollectionContext(name + "CollectionConsumer", scope);
+    const getItems = React39.useCallback(() => {
+      const collectionNode = context.collectionRef.current;
+      if (!collectionNode)
+        return [];
+      const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
+      const items = Array.from(context.itemMap.values());
+      const orderedItems = items.sort((a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current));
+      return orderedItems;
+    }, [context.collectionRef, context.itemMap]);
+    return getItems;
+  }
+  return [
+    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
+    useCollection2,
+    createCollectionScope2
+  ];
+}
+var __instanciated = /* @__PURE__ */ new WeakMap;
+var OrderedDict = class _OrderedDict extends Map {
+  #keys;
+  constructor(entries) {
+    super(entries);
+    this.#keys = [...super.keys()];
+    __instanciated.set(this, true);
+  }
+  set(key, value) {
+    if (__instanciated.get(this)) {
+      if (this.has(key)) {
+        this.#keys[this.#keys.indexOf(key)] = key;
+      } else {
+        this.#keys.push(key);
+      }
+    }
+    super.set(key, value);
+    return this;
+  }
+  insert(index2, key, value) {
+    const has = this.has(key);
+    const length2 = this.#keys.length;
+    const relativeIndex = toSafeInteger(index2);
+    let actualIndex = relativeIndex >= 0 ? relativeIndex : length2 + relativeIndex;
+    const safeIndex = actualIndex < 0 || actualIndex >= length2 ? -1 : actualIndex;
+    if (safeIndex === this.size || has && safeIndex === this.size - 1 || safeIndex === -1) {
+      this.set(key, value);
+      return this;
+    }
+    const size4 = this.size + (has ? 0 : 1);
+    if (relativeIndex < 0) {
+      actualIndex++;
+    }
+    const keys = [...this.#keys];
+    let nextValue;
+    let shouldSkip = false;
+    for (let i = actualIndex;i < size4; i++) {
+      if (actualIndex === i) {
+        let nextKey = keys[i];
+        if (keys[i] === key) {
+          nextKey = keys[i + 1];
+        }
+        if (has) {
+          this.delete(key);
+        }
+        nextValue = this.get(nextKey);
+        this.set(key, value);
+      } else {
+        if (!shouldSkip && keys[i - 1] === key) {
+          shouldSkip = true;
+        }
+        const currentKey = keys[shouldSkip ? i : i - 1];
+        const currentValue = nextValue;
+        nextValue = this.get(currentKey);
+        this.delete(currentKey);
+        this.set(currentKey, currentValue);
+      }
+    }
+    return this;
+  }
+  with(index2, key, value) {
+    const copy = new _OrderedDict(this);
+    copy.insert(index2, key, value);
+    return copy;
+  }
+  before(key) {
+    const index2 = this.#keys.indexOf(key) - 1;
+    if (index2 < 0) {
+      return;
+    }
+    return this.entryAt(index2);
+  }
+  setBefore(key, newKey, value) {
+    const index2 = this.#keys.indexOf(key);
+    if (index2 === -1) {
+      return this;
+    }
+    return this.insert(index2, newKey, value);
+  }
+  after(key) {
+    let index2 = this.#keys.indexOf(key);
+    index2 = index2 === -1 || index2 === this.size - 1 ? -1 : index2 + 1;
+    if (index2 === -1) {
+      return;
+    }
+    return this.entryAt(index2);
+  }
+  setAfter(key, newKey, value) {
+    const index2 = this.#keys.indexOf(key);
+    if (index2 === -1) {
+      return this;
+    }
+    return this.insert(index2 + 1, newKey, value);
+  }
+  first() {
+    return this.entryAt(0);
+  }
+  last() {
+    return this.entryAt(-1);
+  }
+  clear() {
+    this.#keys = [];
+    return super.clear();
+  }
+  delete(key) {
+    const deleted = super.delete(key);
+    if (deleted) {
+      this.#keys.splice(this.#keys.indexOf(key), 1);
+    }
+    return deleted;
+  }
+  deleteAt(index2) {
+    const key = this.keyAt(index2);
+    if (key !== undefined) {
+      return this.delete(key);
+    }
+    return false;
+  }
+  at(index2) {
+    const key = at(this.#keys, index2);
+    if (key !== undefined) {
+      return this.get(key);
+    }
+  }
+  entryAt(index2) {
+    const key = at(this.#keys, index2);
+    if (key !== undefined) {
+      return [key, this.get(key)];
+    }
+  }
+  indexOf(key) {
+    return this.#keys.indexOf(key);
+  }
+  keyAt(index2) {
+    return at(this.#keys, index2);
+  }
+  from(key, offset4) {
+    const index2 = this.indexOf(key);
+    if (index2 === -1) {
+      return;
+    }
+    let dest = index2 + offset4;
+    if (dest < 0)
+      dest = 0;
+    if (dest >= this.size)
+      dest = this.size - 1;
+    return this.at(dest);
+  }
+  keyFrom(key, offset4) {
+    const index2 = this.indexOf(key);
+    if (index2 === -1) {
+      return;
+    }
+    let dest = index2 + offset4;
+    if (dest < 0)
+      dest = 0;
+    if (dest >= this.size)
+      dest = this.size - 1;
+    return this.keyAt(dest);
+  }
+  find(predicate, thisArg) {
+    let index2 = 0;
+    for (const entry of this) {
+      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+        return entry;
+      }
+      index2++;
+    }
+    return;
+  }
+  findIndex(predicate, thisArg) {
+    let index2 = 0;
+    for (const entry of this) {
+      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+        return index2;
+      }
+      index2++;
+    }
+    return -1;
+  }
+  filter(predicate, thisArg) {
+    const entries = [];
+    let index2 = 0;
+    for (const entry of this) {
+      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+        entries.push(entry);
+      }
+      index2++;
+    }
+    return new _OrderedDict(entries);
+  }
+  map(callbackfn, thisArg) {
+    const entries = [];
+    let index2 = 0;
+    for (const entry of this) {
+      entries.push([entry[0], Reflect.apply(callbackfn, thisArg, [entry, index2, this])]);
+      index2++;
+    }
+    return new _OrderedDict(entries);
+  }
+  reduce(...args) {
+    const [callbackfn, initialValue] = args;
+    let index2 = 0;
+    let accumulator = initialValue ?? this.at(0);
+    for (const entry of this) {
+      if (index2 === 0 && args.length === 1) {
+        accumulator = entry;
+      } else {
+        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
+      }
+      index2++;
+    }
+    return accumulator;
+  }
+  reduceRight(...args) {
+    const [callbackfn, initialValue] = args;
+    let accumulator = initialValue ?? this.at(-1);
+    for (let index2 = this.size - 1;index2 >= 0; index2--) {
+      const entry = this.at(index2);
+      if (index2 === this.size - 1 && args.length === 1) {
+        accumulator = entry;
+      } else {
+        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
+      }
+    }
+    return accumulator;
+  }
+  toSorted(compareFn) {
+    const entries = [...this.entries()].sort(compareFn);
+    return new _OrderedDict(entries);
+  }
+  toReversed() {
+    const reversed = new _OrderedDict;
+    for (let index2 = this.size - 1;index2 >= 0; index2--) {
+      const key = this.keyAt(index2);
+      const element = this.get(key);
+      reversed.set(key, element);
+    }
+    return reversed;
+  }
+  toSpliced(...args) {
+    const entries = [...this.entries()];
+    entries.splice(...args);
+    return new _OrderedDict(entries);
+  }
+  slice(start, end) {
+    const result = new _OrderedDict;
+    let stop = this.size - 1;
+    if (start === undefined) {
+      return result;
+    }
+    if (start < 0) {
+      start = start + this.size;
+    }
+    if (end !== undefined && end > 0) {
+      stop = end - 1;
+    }
+    for (let index2 = start;index2 <= stop; index2++) {
+      const key = this.keyAt(index2);
+      const element = this.get(key);
+      result.set(key, element);
+    }
+    return result;
+  }
+  every(predicate, thisArg) {
+    let index2 = 0;
+    for (const entry of this) {
+      if (!Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+        return false;
+      }
+      index2++;
+    }
+    return true;
+  }
+  some(predicate, thisArg) {
+    let index2 = 0;
+    for (const entry of this) {
+      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+        return true;
+      }
+      index2++;
+    }
+    return false;
+  }
+};
+function at(array, index2) {
+  if ("at" in Array.prototype) {
+    return Array.prototype.at.call(array, index2);
+  }
+  const actualIndex = toSafeIndex(array, index2);
+  return actualIndex === -1 ? undefined : array[actualIndex];
+}
+function toSafeIndex(array, index2) {
+  const length2 = array.length;
+  const relativeIndex = toSafeInteger(index2);
+  const actualIndex = relativeIndex >= 0 ? relativeIndex : length2 + relativeIndex;
+  return actualIndex < 0 || actualIndex >= length2 ? -1 : actualIndex;
+}
+function toSafeInteger(number) {
+  return number !== number || number === 0 ? 0 : Math.trunc(number);
+}
+var useLayoutEffect222 = globalThis?.document ? React40.useLayoutEffect : () => {};
+var useReactId2 = React41[" useId ".trim().toString()] || (() => {
+  return;
+});
+var count3 = 0;
+function useId2(deterministicId) {
+  const [id, setId] = React41.useState(useReactId2());
+  useLayoutEffect222(() => {
+    if (!deterministicId)
+      setId((reactId) => reactId ?? String(count3++));
+  }, [deterministicId]);
+  return deterministicId || (id ? `radix-${id}` : "");
+}
+var NODES2 = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive2 = NODES2.reduce((primitive, node) => {
+  const Slot2 = createSlot(`Primitive.${node}`);
+  const Node2 = React422.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot2 : node;
+    if (typeof window !== "undefined") {
+      window[Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ jsx302(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
+}, {});
+function useCallbackRef3(callback) {
+  const callbackRef = React43.useRef(callback);
+  React43.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React43.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+}
+var useInsertionEffect = React44[" useInsertionEffect ".trim().toString()] || useLayoutEffect222;
+function useControllableState2({
+  prop,
+  defaultProp,
+  onChange = () => {},
+  caller
+}) {
+  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState2({
+    defaultProp,
+    onChange
+  });
+  const isControlled = prop !== undefined;
+  const value = isControlled ? prop : uncontrolledProp;
+  if (true) {
+    const isControlledRef = React44.useRef(prop !== undefined);
+    React44.useEffect(() => {
+      const wasControlled = isControlledRef.current;
+      if (wasControlled !== isControlled) {
+        const from = wasControlled ? "controlled" : "uncontrolled";
+        const to = isControlled ? "controlled" : "uncontrolled";
+        console.warn(`${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`);
+      }
+      isControlledRef.current = isControlled;
+    }, [isControlled, caller]);
+  }
+  const setValue = React44.useCallback((nextValue) => {
+    if (isControlled) {
+      const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+      if (value2 !== prop) {
+        onChangeRef.current?.(value2);
+      }
+    } else {
+      setUncontrolledProp(nextValue);
+    }
+  }, [isControlled, prop, setUncontrolledProp, onChangeRef]);
+  return [value, setValue];
+}
+function useUncontrolledState2({
+  defaultProp,
+  onChange
+}) {
+  const [value, setValue] = React44.useState(defaultProp);
+  const prevValueRef = React44.useRef(value);
+  const onChangeRef = React44.useRef(onChange);
+  useInsertionEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  React44.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      onChangeRef.current?.(value);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef]);
+  return [value, setValue, onChangeRef];
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
+var DirectionContext2 = React45.createContext(undefined);
+function useDirection2(localDir) {
+  const globalDir = React45.useContext(DirectionContext2);
+  return localDir || globalDir || "ltr";
+}
+var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
+var EVENT_OPTIONS2 = { bubbles: false, cancelable: true };
+var GROUP_NAME2 = "RovingFocusGroup";
+var [Collection2, useCollection2, createCollectionScope2] = createCollection2(GROUP_NAME2);
+var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope2(GROUP_NAME2, [createCollectionScope2]);
+var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME2);
+var RovingFocusGroup = React46.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx332(Collection2.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx332(Collection2.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx332(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
+});
+RovingFocusGroup.displayName = GROUP_NAME2;
+var RovingFocusGroupImpl = React46.forwardRef((props, forwardedRef) => {
+  const {
+    __scopeRovingFocusGroup,
+    orientation,
+    loop = false,
+    dir,
+    currentTabStopId: currentTabStopIdProp,
+    defaultCurrentTabStopId,
+    onCurrentTabStopIdChange,
+    onEntryFocus,
+    preventScrollOnEntryFocus = false,
+    ...groupProps
+  } = props;
+  const ref = React46.useRef(null);
+  const composedRefs = useComposedRefs2(forwardedRef, ref);
+  const direction = useDirection2(dir);
+  const [currentTabStopId, setCurrentTabStopId] = useControllableState2({
+    prop: currentTabStopIdProp,
+    defaultProp: defaultCurrentTabStopId ?? null,
+    onChange: onCurrentTabStopIdChange,
+    caller: GROUP_NAME2
+  });
+  const [isTabbingBackOut, setIsTabbingBackOut] = React46.useState(false);
+  const handleEntryFocus = useCallbackRef3(onEntryFocus);
+  const getItems = useCollection2(__scopeRovingFocusGroup);
+  const isClickFocusRef = React46.useRef(false);
+  const [focusableItemsCount, setFocusableItemsCount] = React46.useState(0);
+  React46.useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
+      return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
+    }
+  }, [handleEntryFocus]);
+  return /* @__PURE__ */ jsx332(RovingFocusProvider, {
+    scope: __scopeRovingFocusGroup,
+    orientation,
+    dir: direction,
+    loop,
+    currentTabStopId,
+    onItemFocus: React46.useCallback((tabStopId) => setCurrentTabStopId(tabStopId), [setCurrentTabStopId]),
+    onItemShiftTab: React46.useCallback(() => setIsTabbingBackOut(true), []),
+    onFocusableItemAdd: React46.useCallback(() => setFocusableItemsCount((prevCount) => prevCount + 1), []),
+    onFocusableItemRemove: React46.useCallback(() => setFocusableItemsCount((prevCount) => prevCount - 1), []),
+    children: /* @__PURE__ */ jsx332(Primitive2.div, {
+      tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
+      "data-orientation": orientation,
+      ...groupProps,
+      ref: composedRefs,
+      style: { outline: "none", ...props.style },
+      onMouseDown: composeEventHandlers2(props.onMouseDown, () => {
+        isClickFocusRef.current = true;
+      }),
+      onFocus: composeEventHandlers2(props.onFocus, (event) => {
+        const isKeyboardFocus = !isClickFocusRef.current;
+        if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+          const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS2);
+          event.currentTarget.dispatchEvent(entryFocusEvent);
+          if (!entryFocusEvent.defaultPrevented) {
+            const items = getItems().filter((item) => item.focusable);
+            const activeItem = items.find((item) => item.active);
+            const currentItem = items.find((item) => item.id === currentTabStopId);
+            const candidateItems = [activeItem, currentItem, ...items].filter(Boolean);
+            const candidateNodes = candidateItems.map((item) => item.ref.current);
+            focusFirst2(candidateNodes, preventScrollOnEntryFocus);
+          }
+        }
+        isClickFocusRef.current = false;
+      }),
+      onBlur: composeEventHandlers2(props.onBlur, () => setIsTabbingBackOut(false))
+    })
+  });
+});
+var ITEM_NAME2 = "RovingFocusGroupItem";
+var RovingFocusGroupItem = React46.forwardRef((props, forwardedRef) => {
+  const {
+    __scopeRovingFocusGroup,
+    focusable = true,
+    active = false,
+    tabStopId,
+    children,
+    ...itemProps
+  } = props;
+  const autoId = useId2();
+  const id = tabStopId || autoId;
+  const context = useRovingFocusContext(ITEM_NAME2, __scopeRovingFocusGroup);
+  const isCurrentTabStop = context.currentTabStopId === id;
+  const getItems = useCollection2(__scopeRovingFocusGroup);
+  const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
+  React46.useEffect(() => {
+    if (focusable) {
+      onFocusableItemAdd();
+      return () => onFocusableItemRemove();
+    }
+  }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
+  return /* @__PURE__ */ jsx332(Collection2.ItemSlot, {
+    scope: __scopeRovingFocusGroup,
+    id,
+    focusable,
+    active,
+    children: /* @__PURE__ */ jsx332(Primitive2.span, {
+      tabIndex: isCurrentTabStop ? 0 : -1,
+      "data-orientation": context.orientation,
+      ...itemProps,
+      ref: forwardedRef,
+      onMouseDown: composeEventHandlers2(props.onMouseDown, (event) => {
+        if (!focusable)
+          event.preventDefault();
+        else
+          context.onItemFocus(id);
+      }),
+      onFocus: composeEventHandlers2(props.onFocus, () => context.onItemFocus(id)),
+      onKeyDown: composeEventHandlers2(props.onKeyDown, (event) => {
+        if (event.key === "Tab" && event.shiftKey) {
+          context.onItemShiftTab();
+          return;
+        }
+        if (event.target !== event.currentTarget)
+          return;
+        const focusIntent = getFocusIntent(event, context.orientation, context.dir);
+        if (focusIntent !== undefined) {
+          if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey)
+            return;
+          event.preventDefault();
+          const items = getItems().filter((item) => item.focusable);
+          let candidateNodes = items.map((item) => item.ref.current);
+          if (focusIntent === "last")
+            candidateNodes.reverse();
+          else if (focusIntent === "prev" || focusIntent === "next") {
+            if (focusIntent === "prev")
+              candidateNodes.reverse();
+            const currentIndex = candidateNodes.indexOf(event.currentTarget);
+            candidateNodes = context.loop ? wrapArray2(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
+          }
+          setTimeout(() => focusFirst2(candidateNodes));
+        }
+      }),
+      children: typeof children === "function" ? children({ isCurrentTabStop, hasTabStop: currentTabStopId != null }) : children
+    })
+  });
+});
+RovingFocusGroupItem.displayName = ITEM_NAME2;
+var MAP_KEY_TO_FOCUS_INTENT = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+function getDirectionAwareKey(key, dir) {
+  if (dir !== "rtl")
+    return key;
+  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+}
+function getFocusIntent(event, orientation, dir) {
+  const key = getDirectionAwareKey(event.key, dir);
+  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key))
+    return;
+  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key))
+    return;
+  return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function focusFirst2(candidates, preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidate of candidates) {
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)
+      return;
+    candidate.focus({ preventScroll });
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)
+      return;
+  }
+}
+function wrapArray2(array, startIndex) {
+  return array.map((_, index2) => array[(startIndex + index2) % array.length]);
+}
+var Root3 = RovingFocusGroup;
+var Item2 = RovingFocusGroupItem;
+function useStateMachine(initialState, machine) {
+  return React47.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState);
+}
+var Presence = (props) => {
+  const { present, children } = props;
+  const presence = usePresence(present);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React213.Children.only(children);
+  const ref = useComposedRefs2(presence.ref, getElementRef3(child));
+  const forceMount = typeof children === "function";
+  return forceMount || presence.isPresent ? React213.cloneElement(child, { ref }) : null;
+};
+Presence.displayName = "Presence";
+function usePresence(present) {
+  const [node, setNode] = React213.useState();
+  const stylesRef = React213.useRef(null);
+  const prevPresentRef = React213.useRef(present);
+  const prevAnimationNameRef = React213.useRef("none");
+  const initialState = present ? "mounted" : "unmounted";
+  const [state, send] = useStateMachine(initialState, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  React213.useEffect(() => {
+    const currentAnimationName = getAnimationName(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  useLayoutEffect222(() => {
+    const styles = stylesRef.current;
+    const wasPresent = prevPresentRef.current;
+    const hasPresentChanged = wasPresent !== present;
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.current;
+      const currentAnimationName = getAnimationName(styles);
+      if (present) {
+        send("MOUNT");
+      } else if (currentAnimationName === "none" || styles?.display === "none") {
+        send("UNMOUNT");
+      } else {
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        if (wasPresent && isAnimating) {
+          send("ANIMATION_OUT");
+        } else {
+          send("UNMOUNT");
+        }
+      }
+      prevPresentRef.current = present;
+    }
+  }, [present, send]);
+  useLayoutEffect222(() => {
+    if (node) {
+      let timeoutId;
+      const ownerWindow = node.ownerDocument.defaultView ?? window;
+      const handleAnimationEnd = (event) => {
+        const currentAnimationName = getAnimationName(stylesRef.current);
+        const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
+        if (event.target === node && isCurrentAnimation) {
+          send("ANIMATION_END");
+          if (!prevPresentRef.current) {
+            const currentFillMode = node.style.animationFillMode;
+            node.style.animationFillMode = "forwards";
+            timeoutId = ownerWindow.setTimeout(() => {
+              if (node.style.animationFillMode === "forwards") {
+                node.style.animationFillMode = currentFillMode;
+              }
+            });
+          }
+        }
+      };
+      const handleAnimationStart = (event) => {
+        if (event.target === node) {
+          prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+        }
+      };
+      node.addEventListener("animationstart", handleAnimationStart);
+      node.addEventListener("animationcancel", handleAnimationEnd);
+      node.addEventListener("animationend", handleAnimationEnd);
+      return () => {
+        ownerWindow.clearTimeout(timeoutId);
+        node.removeEventListener("animationstart", handleAnimationStart);
+        node.removeEventListener("animationcancel", handleAnimationEnd);
+        node.removeEventListener("animationend", handleAnimationEnd);
+      };
+    } else {
+      send("ANIMATION_END");
+    }
+  }, [node, send]);
+  return {
+    isPresent: ["mounted", "unmountSuspended"].includes(state),
+    ref: React213.useCallback((node2) => {
+      stylesRef.current = node2 ? getComputedStyle(node2) : null;
+      setNode(node2);
+    }, [])
+  };
+}
+function getAnimationName(styles) {
+  return styles?.animationName || "none";
+}
+function getElementRef3(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+var TABS_NAME = "Tabs";
+var [createTabsContext, createTabsScope] = createContextScope2(TABS_NAME, [
+  createRovingFocusGroupScope
+]);
+var useRovingFocusGroupScope = createRovingFocusGroupScope();
+var [TabsProvider, useTabsContext] = createTabsContext(TABS_NAME);
+var Tabs = React48.forwardRef((props, forwardedRef) => {
+  const {
+    __scopeTabs,
+    value: valueProp,
+    onValueChange,
+    defaultValue,
+    orientation = "horizontal",
+    dir,
+    activationMode = "automatic",
+    ...tabsProps
+  } = props;
+  const direction = useDirection2(dir);
+  const [value, setValue] = useControllableState2({
+    prop: valueProp,
+    onChange: onValueChange,
+    defaultProp: defaultValue ?? "",
+    caller: TABS_NAME
+  });
+  return /* @__PURE__ */ jsx342(TabsProvider, {
+    scope: __scopeTabs,
+    baseId: useId2(),
+    value,
+    onValueChange: setValue,
+    orientation,
+    dir: direction,
+    activationMode,
+    children: /* @__PURE__ */ jsx342(Primitive2.div, {
+      dir: direction,
+      "data-orientation": orientation,
+      ...tabsProps,
+      ref: forwardedRef
+    })
+  });
+});
+Tabs.displayName = TABS_NAME;
+var TAB_LIST_NAME = "TabsList";
+var TabsList = React48.forwardRef((props, forwardedRef) => {
+  const { __scopeTabs, loop = true, ...listProps } = props;
+  const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
+  return /* @__PURE__ */ jsx342(Root3, {
+    asChild: true,
+    ...rovingFocusGroupScope,
+    orientation: context.orientation,
+    dir: context.dir,
+    loop,
+    children: /* @__PURE__ */ jsx342(Primitive2.div, {
+      role: "tablist",
+      "aria-orientation": context.orientation,
+      ...listProps,
+      ref: forwardedRef
+    })
+  });
+});
+TabsList.displayName = TAB_LIST_NAME;
+var TRIGGER_NAME2 = "TabsTrigger";
+var TabsTrigger = React48.forwardRef((props, forwardedRef) => {
+  const { __scopeTabs, value, disabled = false, ...triggerProps } = props;
+  const context = useTabsContext(TRIGGER_NAME2, __scopeTabs);
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);
+  const triggerId = makeTriggerId(context.baseId, value);
+  const contentId = makeContentId(context.baseId, value);
+  const isSelected = value === context.value;
+  return /* @__PURE__ */ jsx342(Item2, {
+    asChild: true,
+    ...rovingFocusGroupScope,
+    focusable: !disabled,
+    active: isSelected,
+    children: /* @__PURE__ */ jsx342(Primitive2.button, {
+      type: "button",
+      role: "tab",
+      "aria-selected": isSelected,
+      "aria-controls": contentId,
+      "data-state": isSelected ? "active" : "inactive",
+      "data-disabled": disabled ? "" : undefined,
+      disabled,
+      id: triggerId,
+      ...triggerProps,
+      ref: forwardedRef,
+      onMouseDown: composeEventHandlers2(props.onMouseDown, (event) => {
+        if (!disabled && event.button === 0 && event.ctrlKey === false) {
+          context.onValueChange(value);
+        } else {
+          event.preventDefault();
+        }
+      }),
+      onKeyDown: composeEventHandlers2(props.onKeyDown, (event) => {
+        if ([" ", "Enter"].includes(event.key))
+          context.onValueChange(value);
+      }),
+      onFocus: composeEventHandlers2(props.onFocus, () => {
+        const isAutomaticActivation = context.activationMode !== "manual";
+        if (!isSelected && !disabled && isAutomaticActivation) {
+          context.onValueChange(value);
+        }
+      })
+    })
+  });
+});
+TabsTrigger.displayName = TRIGGER_NAME2;
+var CONTENT_NAME3 = "TabsContent";
+var TabsContent = React48.forwardRef((props, forwardedRef) => {
+  const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
+  const context = useTabsContext(CONTENT_NAME3, __scopeTabs);
+  const triggerId = makeTriggerId(context.baseId, value);
+  const contentId = makeContentId(context.baseId, value);
+  const isSelected = value === context.value;
+  const isMountAnimationPreventedRef = React48.useRef(isSelected);
+  React48.useEffect(() => {
+    const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
+    return () => cancelAnimationFrame(rAF);
+  }, []);
+  return /* @__PURE__ */ jsx342(Presence, { present: forceMount || isSelected, children: ({ present }) => /* @__PURE__ */ jsx342(Primitive2.div, {
+    "data-state": isSelected ? "active" : "inactive",
+    "data-orientation": context.orientation,
+    role: "tabpanel",
+    "aria-labelledby": triggerId,
+    hidden: !present,
+    id: contentId,
+    tabIndex: 0,
+    ...contentProps,
+    ref: forwardedRef,
+    style: {
+      ...props.style,
+      animationDuration: isMountAnimationPreventedRef.current ? "0s" : undefined
+    },
+    children: present && children
+  }) });
+});
+TabsContent.displayName = CONTENT_NAME3;
+function makeTriggerId(baseId, value) {
+  return `${baseId}-trigger-${value}`;
+}
+function makeContentId(baseId, value) {
+  return `${baseId}-content-${value}`;
+}
+var Root23 = Tabs;
+var List = TabsList;
+var Trigger2 = TabsTrigger;
+var Content3 = TabsContent;
+var Tabs2 = Root23;
+var TabsList2 = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx352(List, {
+  ref,
+  className: cn("inline-flex items-center justify-center bg-white p-1 border-2 border-black border-b-4 rounded-full", className),
+  ...props
+}));
+TabsList2.displayName = List.displayName;
+var TabsTrigger2 = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx352(Trigger2, {
+  ref,
+  className: cn("inline-flex items-center border-none font-brand bg-transparent justify-center whitespace-nowrap rounded-full px-3 py-1.5 text-sm ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-brand data-[state=active]:text-white data-[state=inactive]:hover:bg-gray-100", className),
+  ...props
+}));
+TabsTrigger2.displayName = Trigger2.displayName;
+var TabsContent2 = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx352(Content3, {
+  ref,
+  className: cn("mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className),
+  ...props
+}));
+TabsContent2.displayName = Content3.displayName;
+var Textarea = React50.forwardRef(({ className, style, ...props }, ref) => {
+  return /* @__PURE__ */ jsx362("textarea", {
+    ref,
+    className: cn("w-full bg-white dark:bg-[#121212] rounded-lg border-2 border-b-4 border-black outline-none px-3 py-3 fontbrand text-lg box-border field-sizing-content min-h-[90px]", className),
+    style: {
+      ...style
+    },
+    ...props
+  });
+});
+Textarea.displayName = "Textarea";
+var Triangle2 = (props) => {
+  return /* @__PURE__ */ jsx372("svg", {
+    viewBox: "0 0 127 131",
+    fill: "none",
+    ...props,
+    children: /* @__PURE__ */ jsx372("path", {
+      d: "M28.5644 0.011261C25.8196 0.159241 23.6077 0.591782 21.3786 1.43413C20.2669 1.84959 18.4446 2.75455 17.4418 3.38062C13.2472 5.993 10.0496 9.9201 8.38209 14.4903C8.04973 15.3953 7.15007 18.2809 6.5713 20.2672C2.71476 33.5453 0.525761 48.0643 0.0558711 63.4312C-0.0186237 65.8785 -0.0186237 71.7066 0.0558711 74.1141C0.371041 84.3018 1.35093 93.4992 3.12735 102.879C3.84937 106.675 5.00691 111.774 5.67736 114.091C7.04692 118.798 9.84334 122.805 13.8202 125.741C16.4848 127.711 19.5105 129.031 22.8627 129.68C24.4787 129.993 26.6104 130.135 28.1805 130.033C30.3523 129.89 34.6616 129.316 38.1628 128.695C53.9442 125.901 68.5223 120.898 81.7422 113.738C90.1143 109.202 97.2715 104.29 104.177 98.3312C111.059 92.4007 116.927 86.0206 122.09 78.8608C123.287 77.2045 123.889 76.237 124.491 75.019C126.038 71.8773 126.766 68.7527 126.76 65.2582C126.76 62.0027 126.141 59.1114 124.806 56.1518C124.164 54.7233 123.551 53.6988 122.176 51.7523C117.11 44.5868 111.489 38.3433 104.635 32.2762C94.011 22.8739 81.3927 15.1619 67.3017 9.45339C64.2474 8.21835 61.239 7.13128 57.6174 5.95315C49.9502 3.46598 40.4607 1.30891 32.4324 0.233231C31.1718 0.0624847 29.4584 -0.0342712 28.5644 0.011261Z",
+      fill: "currentcolor"
+    })
+  });
+};
+
+// src/components/homepage/FreePricing.tsx
+import React53, { useCallback as useCallback30, useMemo as useMemo45 } from "react";
+
+// ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
+var CLASS_PART_SEPARATOR2 = "-";
+var createClassGroupUtils2 = (config) => {
+  const classMap = createClassMap2(config);
+  const {
+    conflictingClassGroups,
+    conflictingClassGroupModifiers
+  } = config;
+  const getClassGroupId = (className) => {
+    const classParts = className.split(CLASS_PART_SEPARATOR2);
+    if (classParts[0] === "" && classParts.length !== 1) {
+      classParts.shift();
+    }
+    return getGroupRecursive2(classParts, classMap) || getGroupIdForArbitraryProperty2(className);
+  };
+  const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
+    const conflicts = conflictingClassGroups[classGroupId] || [];
+    if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
+      return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
+    }
+    return conflicts;
+  };
+  return {
+    getClassGroupId,
+    getConflictingClassGroupIds
+  };
+};
+var getGroupRecursive2 = (classParts, classPartObject) => {
+  if (classParts.length === 0) {
+    return classPartObject.classGroupId;
+  }
+  const currentClassPart = classParts[0];
+  const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
+  const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive2(classParts.slice(1), nextClassPartObject) : undefined;
+  if (classGroupFromNextClassPart) {
+    return classGroupFromNextClassPart;
+  }
+  if (classPartObject.validators.length === 0) {
+    return;
+  }
+  const classRest = classParts.join(CLASS_PART_SEPARATOR2);
+  return classPartObject.validators.find(({
+    validator
+  }) => validator(classRest))?.classGroupId;
+};
+var arbitraryPropertyRegex2 = /^\[(.+)\]$/;
+var getGroupIdForArbitraryProperty2 = (className) => {
+  if (arbitraryPropertyRegex2.test(className)) {
+    const arbitraryPropertyClassName = arbitraryPropertyRegex2.exec(className)[1];
+    const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(":"));
+    if (property) {
+      return "arbitrary.." + property;
+    }
+  }
+};
+var createClassMap2 = (config) => {
+  const {
+    theme,
+    prefix
+  } = config;
+  const classMap = {
+    nextPart: new Map,
+    validators: []
+  };
+  const prefixedClassGroupEntries = getPrefixedClassGroupEntries2(Object.entries(config.classGroups), prefix);
+  prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => {
+    processClassesRecursively2(classGroup, classMap, classGroupId, theme);
+  });
+  return classMap;
+};
+var processClassesRecursively2 = (classGroup, classPartObject, classGroupId, theme) => {
+  classGroup.forEach((classDefinition) => {
+    if (typeof classDefinition === "string") {
+      const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart2(classPartObject, classDefinition);
+      classPartObjectToEdit.classGroupId = classGroupId;
+      return;
+    }
+    if (typeof classDefinition === "function") {
+      if (isThemeGetter2(classDefinition)) {
+        processClassesRecursively2(classDefinition(theme), classPartObject, classGroupId, theme);
+        return;
+      }
+      classPartObject.validators.push({
+        validator: classDefinition,
+        classGroupId
+      });
+      return;
+    }
+    Object.entries(classDefinition).forEach(([key, classGroup2]) => {
+      processClassesRecursively2(classGroup2, getPart2(classPartObject, key), classGroupId, theme);
+    });
+  });
+};
+var getPart2 = (classPartObject, path) => {
+  let currentClassPartObject = classPartObject;
+  path.split(CLASS_PART_SEPARATOR2).forEach((pathPart) => {
+    if (!currentClassPartObject.nextPart.has(pathPart)) {
+      currentClassPartObject.nextPart.set(pathPart, {
+        nextPart: new Map,
+        validators: []
+      });
+    }
+    currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
+  });
+  return currentClassPartObject;
+};
+var isThemeGetter2 = (func) => func.isThemeGetter;
+var getPrefixedClassGroupEntries2 = (classGroupEntries, prefix) => {
+  if (!prefix) {
+    return classGroupEntries;
+  }
+  return classGroupEntries.map(([classGroupId, classGroup]) => {
+    const prefixedClassGroup = classGroup.map((classDefinition) => {
+      if (typeof classDefinition === "string") {
+        return prefix + classDefinition;
+      }
+      if (typeof classDefinition === "object") {
+        return Object.fromEntries(Object.entries(classDefinition).map(([key, value]) => [prefix + key, value]));
+      }
+      return classDefinition;
+    });
+    return [classGroupId, prefixedClassGroup];
+  });
+};
+var createLruCache2 = (maxCacheSize) => {
   if (maxCacheSize < 1) {
     return {
       get: () => {
@@ -20702,10 +21929,10 @@ function cn2(...inputs) {
 }
 
 // src/components/homepage/InfoTooltip.tsx
-import { useState as useState34 } from "react";
+import { useState as useState38 } from "react";
 import { jsx as jsx45, jsxs as jsxs7 } from "react/jsx-runtime";
 var InfoTooltip = ({ text }) => {
-  const [isVisible, setIsVisible] = useState34(false);
+  const [isVisible, setIsVisible] = useState38(false);
   return /* @__PURE__ */ jsxs7("span", {
     className: "relative inline-block ml-1 text-gray-600 cursor-default",
     onPointerEnter: () => setIsVisible(true),
@@ -20943,9 +22170,9 @@ var icon = {
   marginLeft: 4
 };
 var CompanyPricing = () => {
-  const [devSeatCount, setDevSeatCount] = React39.useState(1);
-  const [cloudRenders, setCloudRenders] = React39.useState(1000);
-  const formatPrice = useCallback26((price) => {
+  const [devSeatCount, setDevSeatCount] = React53.useState(1);
+  const [cloudRenders, setCloudRenders] = React53.useState(1000);
+  const formatPrice = useCallback30((price) => {
     const formatter = new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
@@ -20953,10 +22180,10 @@ var CompanyPricing = () => {
     });
     return formatter.format(price);
   }, []);
-  const totalPrice = useMemo43(() => {
+  const totalPrice = useMemo45(() => {
     return Math.max(100, devSeatCount * SEAT_PRICE + Math.ceil(cloudRenders / 1000) * RENDER_UNIT_PRICE);
   }, [cloudRenders, devSeatCount]);
-  const totalPriceString = useMemo43(() => {
+  const totalPriceString = useMemo45(() => {
     return formatPrice(totalPrice);
   }, [formatPrice, totalPrice]);
   return /* @__PURE__ */ jsxs9(Container, {
@@ -21177,7 +22404,7 @@ var Pricing = () => {
 };
 
 // src/components/homepage/BackgroundAnimation.tsx
-import { useEffect as useEffect35 } from "react";
+import { useEffect as useEffect40 } from "react";
 import { jsx as jsx49, jsxs as jsxs11 } from "react/jsx-runtime";
 "use client";
 var rx = 0.2;
@@ -21203,7 +22430,7 @@ var BackgroundAnimation = () => {
       }
     }  
   `;
-  useEffect35(() => {
+  useEffect40(() => {
     const _style = document.createElement("style");
     _style.innerHTML = css;
     document.head.appendChild(_style);
@@ -21623,20 +22850,20 @@ init_esm();
 init_esm();
 init_esm();
 import { jsx as jsx56, jsxs as jsxs14 } from "react/jsx-runtime";
-import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment6 } from "react/jsx-runtime";
-import React41 from "react";
-import { useContext as useContext210, useEffect as useEffect36, useState as useState35 } from "react";
-import { useContext as useContext40, useLayoutEffect as useLayoutEffect15 } from "react";
+import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment8 } from "react/jsx-runtime";
+import React55 from "react";
+import { useContext as useContext210, useEffect as useEffect41, useState as useState39 } from "react";
+import { useContext as useContext42, useLayoutEffect as useLayoutEffect16 } from "react";
 import { jsx as jsx311 } from "react/jsx-runtime";
-import { useCallback as useCallback27, useRef as useRef33 } from "react";
+import { useCallback as useCallback31, useRef as useRef38 } from "react";
 import { useEffect as useEffect210, useState as useState210 } from "react";
-import { useContext as useContext42, useEffect as useEffect52, useRef as useRef42 } from "react";
-import { useEffect as useEffect37 } from "react";
-import { useCallback as useCallback28, useContext as useContext37, useMemo as useMemo44, useRef as useRef24, useState as useState36 } from "react";
-import { useEffect as useEffect42, useRef as useRef34 } from "react";
+import { useContext as useContext43, useEffect as useEffect52, useRef as useRef42 } from "react";
+import { useEffect as useEffect310 } from "react";
+import { useCallback as useCallback210, useContext as useContext37, useMemo as useMemo46, useRef as useRef24, useState as useState310 } from "react";
+import { useEffect as useEffect42, useRef as useRef39 } from "react";
 import { useCallback as useCallback32, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
-  forwardRef as forwardRef26,
+  forwardRef as forwardRef210,
   useEffect as useEffect132,
   useImperativeHandle as useImperativeHandle22,
   useLayoutEffect as useLayoutEffect23,
@@ -21646,7 +22873,7 @@ import {
 } from "react";
 import React102, {
   Suspense as Suspense2,
-  forwardRef as forwardRef27,
+  forwardRef as forwardRef31,
   useCallback as useCallback112,
   useContext as useContext62,
   useEffect as useEffect122,
@@ -21657,8 +22884,8 @@ import React102, {
 } from "react";
 import { useCallback as useCallback82, useEffect as useEffect102, useMemo as useMemo92, useRef as useRef82, useState as useState102 } from "react";
 import { jsx as jsx410 } from "react/jsx-runtime";
-import { useCallback as useCallback52, useMemo as useMemo45, useRef as useRef52, useState as useState62 } from "react";
-import React38, { useCallback as useCallback42, useMemo as useMemo34, useState as useState52 } from "react";
+import { useCallback as useCallback52, useMemo as useMemo47, useRef as useRef52, useState as useState62 } from "react";
+import React310, { useCallback as useCallback42, useMemo as useMemo34, useState as useState52 } from "react";
 import { jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx64, jsxs as jsxs43 } from "react/jsx-runtime";
 import {
@@ -22477,7 +23704,7 @@ var studioStyle = {
 };
 var BufferingIndicator = ({ type }) => {
   const style = type === "player" ? playerStyle : studioStyle;
-  return /* @__PURE__ */ jsxs24(Fragment6, {
+  return /* @__PURE__ */ jsxs24(Fragment8, {
     children: [
       /* @__PURE__ */ jsx214("style", {
         type: "text/css",
@@ -22654,8 +23881,8 @@ var calculateOuter = ({
     overflow: overflowVisible ? "visible" : "hidden"
   };
 };
-var PlayerEventEmitterContext = React41.createContext(undefined);
-var ThumbnailEmitterContext = React41.createContext(undefined);
+var PlayerEventEmitterContext = React55.createContext(undefined);
+var ThumbnailEmitterContext = React55.createContext(undefined);
 
 class PlayerEmitter {
   listeners = {
@@ -22769,11 +23996,11 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext40(Internals.BufferingContextReact);
+  const bufferManager = useContext42(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useLayoutEffect15(() => {
+  useLayoutEffect16(() => {
     const clear1 = bufferManager.listenForBuffering(() => {
       bufferManager.buffering.current = true;
       emitter.dispatchWaiting({});
@@ -22789,12 +24016,12 @@ var useBufferStateEmitter = (emitter) => {
   }, [bufferManager, emitter]);
 };
 var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
-  const [emitter] = useState35(() => new PlayerEmitter);
+  const [emitter] = useState39(() => new PlayerEmitter);
   const bufferManager = useContext210(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect36(() => {
+  useEffect41(() => {
     if (currentPlaybackRate) {
       emitter.dispatchRateChange(currentPlaybackRate);
     }
@@ -22847,7 +24074,7 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 };
 var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
-  const [hasPlayed, setHasPlayed] = useState36(false);
+  const [hasPlayed, setHasPlayed] = useState310(false);
   const frame = Internals.Timeline.useTimelinePosition();
   const playStart = useRef24(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
@@ -22870,14 +24097,14 @@ var usePlayer = () => {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
   const { buffering } = bufferingContext;
-  const seek2 = useCallback28((newFrame) => {
+  const seek2 = useCallback210((newFrame) => {
     if (video?.id) {
       setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
     }
     frameRef.current = newFrame;
     emitter.dispatchSeek(newFrame);
   }, [emitter, setTimelinePosition, video?.id]);
-  const play = useCallback28((e) => {
+  const play = useCallback210((e) => {
     if (imperativePlaying.current) {
       return;
     }
@@ -22903,7 +24130,7 @@ var usePlayer = () => {
     seek2,
     audioAndVideoTags
   ]);
-  const pause = useCallback28(() => {
+  const pause = useCallback210(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;
       setPlaying(false);
@@ -22911,7 +24138,7 @@ var usePlayer = () => {
       audioContext?.audioContext?.suspend();
     }
   }, [emitter, imperativePlaying, setPlaying, audioContext]);
-  const pauseAndReturnToPlayStart = useCallback28(() => {
+  const pauseAndReturnToPlayStart = useCallback210(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;
       frameRef.current = playStart.current;
@@ -22926,7 +24153,7 @@ var usePlayer = () => {
     }
   }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
   const videoId = video?.id;
-  const frameBack = useCallback28((frames) => {
+  const frameBack = useCallback210((frames) => {
     if (!videoId) {
       return null;
     }
@@ -22945,7 +24172,7 @@ var usePlayer = () => {
       };
     });
   }, [imperativePlaying, setFrame, videoId]);
-  const frameForward = useCallback28((frames) => {
+  const frameForward = useCallback210((frames) => {
     if (!videoId) {
       return null;
     }
@@ -22964,23 +24191,23 @@ var usePlayer = () => {
       };
     });
   }, [videoId, imperativePlaying, lastFrame, setFrame]);
-  const toggle = useCallback28((e) => {
+  const toggle = useCallback210((e) => {
     if (imperativePlaying.current) {
       pause();
     } else {
       play(e);
     }
   }, [imperativePlaying, pause, play]);
-  const isPlaying = useCallback28(() => {
+  const isPlaying = useCallback210(() => {
     return imperativePlaying.current;
   }, [imperativePlaying]);
-  const getCurrentFrame = useCallback28(() => {
+  const getCurrentFrame = useCallback210(() => {
     return frameRef.current;
   }, [frameRef]);
-  const isBuffering = useCallback28(() => {
+  const isBuffering = useCallback210(() => {
     return buffering.current;
   }, [buffering]);
-  const returnValue = useMemo44(() => {
+  const returnValue = useMemo46(() => {
     return {
       frameBack,
       frameForward,
@@ -23023,7 +24250,7 @@ var useBrowserMediaSession = ({
   playbackRate
 }) => {
   const { playing, pause, play, emitter, getCurrentFrame, seek: seek2 } = usePlayer();
-  useEffect37(() => {
+  useEffect310(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -23036,7 +24263,7 @@ var useBrowserMediaSession = ({
       navigator.mediaSession.playbackState = "paused";
     }
   }, [browserMediaControlsBehavior.mode, playing]);
-  useEffect37(() => {
+  useEffect310(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -23066,7 +24293,7 @@ var useBrowserMediaSession = ({
     playbackRate,
     videoConfig
   ]);
-  useEffect37(() => {
+  useEffect310(() => {
     if (!navigator.mediaSession) {
       return;
     }
@@ -23159,7 +24386,7 @@ var getIsBackgrounded = () => {
   return document.visibilityState === "hidden";
 };
 var useIsBackgrounded = () => {
-  const isBackgrounded = useRef34(getIsBackgrounded());
+  const isBackgrounded = useRef39(getIsBackgrounded());
   useEffect42(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
@@ -23186,7 +24413,7 @@ var usePlayback = ({
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const isBackgroundedRef = useIsBackgrounded();
   const lastTimeUpdateEvent = useRef42(null);
-  const context = useContext42(Internals.BufferingContextReact);
+  const context = useContext43(Internals.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -23469,7 +24696,7 @@ var DefaultVolumeSlider = ({
       ...common
     };
   }, [isVertical]);
-  const randomId = typeof React38.useId === "undefined" ? "volume-slider" : React38.useId();
+  const randomId = typeof React310.useId === "undefined" ? "volume-slider" : React310.useId();
   const [randomClass] = useState52(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
   const onVolumeChange = useCallback42((e) => {
     setVolume(parseFloat(e.target.value));
@@ -23567,7 +24794,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     }
     setMediaMuted((mute) => !mute);
   }, [isVolume0, setMediaMuted, setMediaVolume]);
-  const parentDivStyle = useMemo45(() => {
+  const parentDivStyle = useMemo47(() => {
     return {
       display: "inline-flex",
       background: "none",
@@ -23578,7 +24805,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       ...displayVerticalVolumeSlider && { position: "relative" }
     };
   }, [displayVerticalVolumeSlider]);
-  const volumeContainer = useMemo45(() => {
+  const volumeContainer = useMemo47(() => {
     return {
       display: "inline",
       width: ICON_SIZE2,
@@ -23603,10 +24830,10 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       children: isMutedOrZero ? /* @__PURE__ */ jsx64(VolumeOffIcon, {}) : /* @__PURE__ */ jsx64(VolumeOnIcon, {})
     });
   }, [onBlur, onClick, volumeContainer]);
-  const muteButton = useMemo45(() => {
+  const muteButton = useMemo47(() => {
     return renderMuteButton ? renderMuteButton({ muted: mediaMuted, volume: mediaVolume }) : renderDefaultMuteButton({ muted: mediaMuted, volume: mediaVolume });
   }, [mediaMuted, mediaVolume, renderDefaultMuteButton, renderMuteButton]);
-  const volumeSlider = useMemo45(() => {
+  const volumeSlider = useMemo47(() => {
     return (focused || hover) && !mediaMuted && !Internals.isIosSafari() ? (renderVolumeSlider ?? renderDefaultVolumeSlider)({
       isVertical: displayVerticalVolumeSlider,
       volume: mediaVolume,
@@ -25017,7 +26244,7 @@ var PlayerUI = ({
     })
   });
 };
-var PlayerUI_default = forwardRef27(PlayerUI);
+var PlayerUI_default = forwardRef31(PlayerUI);
 var DEFAULT_VOLUME_PERSISTANCE_KEY = "remotion.volumePreference";
 var persistVolume = (volume, logLevel, volumePersistenceKey) => {
   if (typeof window === "undefined") {
@@ -25502,7 +26729,7 @@ var PlayerFn = ({
     })
   });
 };
-var forward = forwardRef26;
+var forward = forwardRef210;
 var Player = forward(PlayerFn);
 var useThumbnail = () => {
   const emitter = useContext72(ThumbnailEmitterContext);
@@ -25724,11 +26951,11 @@ var Thumbnail = forward2(ThumbnailFn);
 
 // src/components/homepage/Demo/index.tsx
 import {
-  useCallback as useCallback43,
-  useEffect as useEffect51,
-  useMemo as useMemo56,
-  useRef as useRef43,
-  useState as useState47
+  useCallback as useCallback46,
+  useEffect as useEffect56,
+  useMemo as useMemo58,
+  useRef as useRef49,
+  useState as useState49
 } from "react";
 
 // ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/extends.js
@@ -26477,15 +27704,15 @@ var UNDERLAY_RED = curriedTransparentize$1(0.9, RED);
 var BLUE_TEXT = curriedDarken$1(0.3, "#42e9f5");
 
 // src/components/homepage/layout/use-color-mode.tsx
-import React43, { useContext as useContext41, useMemo as useMemo46 } from "react";
+import React56, { useContext as useContext44, useMemo as useMemo48 } from "react";
 import { jsx as jsx57 } from "react/jsx-runtime";
-var Context = React43.createContext(undefined);
+var Context = React56.createContext(undefined);
 var ColorModeProvider = ({
   children,
   colorMode,
   setColorMode
 }) => {
-  const value = useMemo46(() => {
+  const value = useMemo48(() => {
     return { colorMode, setColorMode };
   }, [colorMode, setColorMode]);
   return /* @__PURE__ */ jsx57(Context.Provider, {
@@ -26494,7 +27721,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext41(Context);
+  const context = useContext44(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }
@@ -26503,21 +27730,21 @@ function useColorMode() {
 
 // src/components/homepage/Demo/Comp.tsx
 init_esm();
-import { useCallback as useCallback36, useEffect as useEffect45, useMemo as useMemo50, useState as useState41 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect48, useMemo as useMemo53, useState as useState45 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 init_esm();
 import {
   createRef as createRef4,
-  useCallback as useCallback35,
-  useEffect as useEffect43,
-  useRef as useRef39,
-  useState as useState40
+  useCallback as useCallback37,
+  useEffect as useEffect47,
+  useRef as useRef46,
+  useState as useState43
 } from "react";
 
 // src/components/homepage/Demo/Card.tsx
 init_esm();
-import { useCallback as useCallback31, useRef as useRef35 } from "react";
+import { useCallback as useCallback35, useRef as useRef40 } from "react";
 
 // src/components/homepage/Demo/math.ts
 var paddingAndMargin = 20;
@@ -26551,10 +27778,10 @@ var getIndexFromPosition = (clientX, clientY) => {
 };
 
 // src/components/homepage/Demo/Switcher.tsx
-import { useCallback as useCallback29 } from "react";
+import { useCallback as useCallback33 } from "react";
 import { jsx as jsx58, jsxs as jsxs15 } from "react/jsx-runtime";
 var Switcher = ({ type, theme, onTap }) => {
-  const onPointerDown = useCallback29((e) => {
+  const onPointerDown = useCallback33((e) => {
     e.stopPropagation();
     onTap();
   }, [onTap]);
@@ -26595,7 +27822,7 @@ var Switcher = ({ type, theme, onTap }) => {
 };
 
 // src/components/homepage/Demo/Card.tsx
-import { jsx as jsx59, jsxs as jsxs16, Fragment as Fragment8 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs16, Fragment as Fragment9 } from "react/jsx-runtime";
 var arePositionsEqual = (a, b) => {
   return a.every((pos, i) => {
     return pos.x === b[i].x && pos.y === b[i].y;
@@ -26615,9 +27842,9 @@ var Card2 = ({
   onClickRight
 }) => {
   const refToUse = refsToUse[index2];
-  const stopPrevious = useRef35([]);
+  const stopPrevious = useRef40([]);
   let newIndices = [...indices];
-  const applyPositions = useCallback31((except) => {
+  const applyPositions = useCallback35((except) => {
     let stopped = false;
     stopPrevious.current.forEach((s) => {
       s();
@@ -26690,7 +27917,7 @@ var Card2 = ({
       update();
     });
   }, [newIndices, onUpdate, positions, refsToUse, shouldBePositions]);
-  const onPointerDown = useCallback31((e) => {
+  const onPointerDown = useCallback35((e) => {
     e.currentTarget.setPointerCapture(e.pointerId);
     const cardLeft = refToUse.current.offsetLeft;
     const cardTop = refToUse.current.offsetTop;
@@ -26751,7 +27978,7 @@ var Card2 = ({
     }, { once: true });
     refToUse.current.addEventListener("pointermove", onMove);
   }, [applyPositions, index2, positions, refToUse, shouldBePositions]);
-  const onPointerUp = useCallback31((e) => {
+  const onPointerUp = useCallback35((e) => {
     e.currentTarget.releasePointerCapture(e.pointerId);
   }, []);
   const { x, y } = getPositionForIndex(index2);
@@ -26780,7 +28007,7 @@ var Card2 = ({
       className: "transition-opacity duration-200",
       children: [
         content,
-        withSwitcher ? /* @__PURE__ */ jsxs16(Fragment8, {
+        withSwitcher ? /* @__PURE__ */ jsxs16(Fragment9, {
           children: [
             /* @__PURE__ */ jsx59(Switcher, {
               onTap: onClickLeft,
@@ -26879,23 +28106,23 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
 // src/components/homepage/Demo/EmojiCard.tsx
 init_esm();
 import {
-  forwardRef as forwardRef29,
-  useCallback as useCallback33,
-  useEffect as useEffect41,
+  forwardRef as forwardRef33,
+  useCallback as useCallback36,
+  useEffect as useEffect46,
   useImperativeHandle as useImperativeHandle14,
-  useRef as useRef38
+  useRef as useRef45
 } from "react";
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
 init_esm();
-import { useEffect as useEffect40, useMemo as useMemo48, useState as useState39 } from "react";
+import { useEffect as useEffect45, useMemo as useMemo50, useState as useState41 } from "react";
 import { jsx as jsx65 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
-  const [data, setData] = useState39(null);
+  const [data, setData] = useState41(null);
   const { durationInFrames, fps } = useVideoConfig();
-  const [browser, setBrowser] = useState39(typeof document !== "undefined");
+  const [browser, setBrowser] = useState41(typeof document !== "undefined");
   const { delayRender, continueRender } = useDelayRender();
-  const src = useMemo48(() => {
+  const src = useMemo50(() => {
     if (emoji === "melting") {
       return "https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json";
     }
@@ -26907,8 +28134,8 @@ var DisplayedEmoji = ({ emoji }) => {
     }
     throw new Error("Unknown emoji");
   }, [emoji]);
-  const [handle] = useState39(() => delayRender());
-  useEffect40(() => {
+  const [handle] = useState41(() => delayRender());
+  useEffect45(() => {
     Promise.all([
       fetch(src).then((res) => res.json()),
       Promise.resolve().then(() => (init_esm2(), exports_esm)).then(({ Lottie: Lottie2, getLottieMetadata: getLottieMetadata2 }) => ({
@@ -26926,7 +28153,7 @@ var DisplayedEmoji = ({ emoji }) => {
       cancelRender(err);
     });
   }, [handle, src, continueRender]);
-  useEffect40(() => {
+  useEffect45(() => {
     if (typeof document !== "undefined") {
       setBrowser(true);
     }
@@ -26955,7 +28182,7 @@ var DisplayedEmoji = ({ emoji }) => {
 };
 
 // src/components/homepage/Demo/EmojiCard.tsx
-import { jsx as jsx67, jsxs as jsxs18, Fragment as Fragment9 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs18, Fragment as Fragment10 } from "react/jsx-runtime";
 var applyTransforms = ({ ref1, ref2, ref3, transforms }) => {
   ref1.style.transform = `translateX(${transforms[0]}%)`;
   ref2.style.transform = `translateX(${transforms[1]}%)`;
@@ -26996,11 +28223,11 @@ var emojiStyle = {
   top: "calc(50% - 50px)"
 };
 var EmojiCardRefFn = ({ emojiIndex }, ref) => {
-  const ref1 = useRef38(null);
-  const ref2 = useRef38(null);
-  const ref3 = useRef38(null);
-  const transforms = useRef38([-100, 0, 100]);
-  const onLeft = useCallback33(() => {
+  const ref1 = useRef45(null);
+  const ref2 = useRef45(null);
+  const ref3 = useRef45(null);
+  const transforms = useRef45([-100, 0, 100]);
+  const onLeft = useCallback36(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -27011,7 +28238,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  const onRight = useCallback33(() => {
+  const onRight = useCallback36(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -27022,7 +28249,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  useEffect41(() => {
+  useEffect46(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -27039,7 +28266,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       onRight
     };
   }, [onLeft, onRight]);
-  useEffect41(() => {
+  useEffect46(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -27083,7 +28310,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
           children: /* @__PURE__ */ jsx67(DisplayedEmoji, {
             emoji: emojiIndex
           })
-        }) : /* @__PURE__ */ jsxs18(Fragment9, {
+        }) : /* @__PURE__ */ jsxs18(Fragment10, {
           children: [
             /* @__PURE__ */ jsx67("div", {
               ref: ref1,
@@ -27112,7 +28339,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
     ]
   });
 };
-var EmojiCard = forwardRef29(EmojiCardRefFn);
+var EmojiCard = forwardRef33(EmojiCardRefFn);
 
 // src/components/homepage/Demo/Temperature.tsx
 init_esm();
@@ -27336,7 +28563,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
 
 // src/components/homepage/Demo/TrendingRepos.tsx
 init_esm();
-import { useMemo as useMemo49 } from "react";
+import { useMemo as useMemo51 } from "react";
 import { jsx as jsx75, jsxs as jsxs25 } from "react/jsx-runtime";
 var TrendingRepoItem = ({ repo, theme, number }) => {
   const frame = useCurrentFrame();
@@ -27349,7 +28576,7 @@ var TrendingRepoItem = ({ repo, theme, number }) => {
     },
     delay: number * 10 + 20
   });
-  const item = useMemo49(() => {
+  const item = useMemo51(() => {
     return {
       lineHeight: 1.1,
       fontFamily: "GTPlanar",
@@ -27452,16 +28679,16 @@ var Cards = ({
   location,
   trending
 }) => {
-  const container4 = useRef39(null);
-  const [refs] = useState40(() => {
+  const container4 = useRef46(null);
+  const [refs] = useState43(() => {
     return new Array(4).fill(true).map(() => {
       return createRef4();
     });
   });
-  const positions = useRef39(getInitialPositions());
-  const shouldBePositions = useRef39(getInitialPositions());
+  const positions = useRef46(getInitialPositions());
+  const shouldBePositions = useRef46(getInitialPositions());
   const { isRendering } = useRemotionEnvironment();
-  useEffect43(() => {
+  useEffect47(() => {
     const { current } = container4;
     if (!current) {
       return;
@@ -27477,12 +28704,12 @@ var Cards = ({
       current.removeEventListener("click", onClick);
     };
   }, [onToggle]);
-  const ref = useRef39(null);
-  const onLeft = useCallback35(() => {
+  const ref = useRef46(null);
+  const onLeft = useCallback37(() => {
     ref.current?.onRight();
     onRightPress();
   }, [onRightPress]);
-  const onRight = useCallback35(() => {
+  const onRight = useCallback37(() => {
     ref.current?.onLeft();
     onLeftPress();
   }, [onLeftPress]);
@@ -27551,12 +28778,12 @@ var HomepageVideoComp = ({
   onClickLeft,
   onClickRight
 }) => {
-  const [rerenders, setRerenders] = useState41(0);
-  const onUpdate = useCallback36((newIndices) => {
+  const [rerenders, setRerenders] = useState45(0);
+  const onUpdate = useCallback38((newIndices) => {
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
   }, [rerenders, updateCardOrder]);
-  const emoji = useMemo50(() => {
+  const emoji = useMemo53(() => {
     if ((emojiIndex + 1e4 * 3) % 3 === 1) {
       return "melting";
     }
@@ -27565,7 +28792,7 @@ var HomepageVideoComp = ({
     }
     return "partying-face";
   }, [emojiIndex]);
-  const audioSrc = useMemo50(() => {
+  const audioSrc = useMemo53(() => {
     if (emoji === "fire") {
       return fireAudio;
     }
@@ -27574,7 +28801,7 @@ var HomepageVideoComp = ({
     }
     return sadAudio;
   }, [emoji]);
-  useEffect45(() => {
+  useEffect48(() => {
     const a = prefetch(fireAudio);
     const b = prefetch(partyHornAudio);
     const c = prefetch(sadAudio);
@@ -27622,7 +28849,7 @@ var DemoError = () => {
 };
 
 // src/components/homepage/Demo/DemoRender.tsx
-import React55, { useCallback as useCallback37 } from "react";
+import React67, { useCallback as useCallback39 } from "react";
 import { z } from "zod";
 
 // src/components/homepage/Demo/DemoErrorIcon.tsx
@@ -27728,21 +28955,21 @@ var Progress = ({ progress }) => {
 };
 
 // src/components/homepage/Demo/Spinner.tsx
-import { useMemo as useMemo51 } from "react";
-import { jsx as jsx87, jsxs as jsxs30, Fragment as Fragment10 } from "react/jsx-runtime";
+import { useMemo as useMemo55 } from "react";
+import { jsx as jsx87, jsxs as jsxs30, Fragment as Fragment11 } from "react/jsx-runtime";
 var viewBox2 = 100;
 var lines2 = 8;
 var className2 = "__remotion_spinner_line";
 var remotionSpinnerAnimation = "__remotion_spinner_animation";
 var translated3 = "M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z";
 var Spinner2 = ({ size: size4, duration }) => {
-  const style2 = useMemo51(() => {
+  const style2 = useMemo55(() => {
     return {
       width: size4,
       height: size4
     };
   }, [size4]);
-  return /* @__PURE__ */ jsxs30(Fragment10, {
+  return /* @__PURE__ */ jsxs30(Fragment11, {
     children: [
       /* @__PURE__ */ jsx87("style", {
         type: "text/css",
@@ -27820,10 +29047,10 @@ var style2 = {
   justifyContent: "center"
 };
 var RenderButton = ({ renderData, onError }) => {
-  const [state, setState] = React55.useState({
+  const [state, setState] = React67.useState({
     type: "idle"
   });
-  const triggerRender = useCallback37(async () => {
+  const triggerRender = useCallback39(async () => {
     if (renderData === null) {
       return;
     }
@@ -28000,13 +29227,13 @@ var DragAndDropNudge = () => {
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
 init_esm();
-import { useCallback as useCallback39, useEffect as useEffect47, useMemo as useMemo55, useRef as useRef40, useState as useState45 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect50, useMemo as useMemo57, useRef as useRef47, useState as useState47 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback38, useEffect as useEffect46, useMemo as useMemo53, useState as useState43 } from "react";
+import { useCallback as useCallback40, useEffect as useEffect49, useMemo as useMemo56, useState as useState46 } from "react";
 var useElementSize2 = (ref) => {
-  const [size4, setSize] = useState43(null);
-  const observer = useMemo53(() => {
+  const [size4, setSize] = useState46(null);
+  const observer = useMemo56(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
     }
@@ -28017,7 +29244,7 @@ var useElementSize2 = (ref) => {
       });
     });
   }, []);
-  const updateSize = useCallback38(() => {
+  const updateSize = useCallback40(() => {
     if (ref === null) {
       return;
     }
@@ -28027,7 +29254,7 @@ var useElementSize2 = (ref) => {
       height: rect[0].height
     });
   }, [ref]);
-  useEffect46(() => {
+  useEffect49(() => {
     updateSize();
     if (!observer) {
       return;
@@ -28082,8 +29309,8 @@ var findBodyInWhichDivIsLocated2 = (div) => {
   return current;
 };
 var useHoverState2 = (ref, hideControlsWhenPointerDoesntMove) => {
-  const [hovered, setHovered] = useState45(false);
-  useEffect47(() => {
+  const [hovered, setHovered] = useState47(false);
+  useEffect50(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -28129,12 +29356,12 @@ var PlayerSeekBar2 = ({
   outFrame,
   playerRef
 }) => {
-  const containerRef = useRef40(null);
+  const containerRef = useRef47(null);
   const barHovered = useHoverState2(containerRef, false);
   const size4 = useElementSize2(containerRef.current);
-  const [playing, setPlaying] = useState45(false);
-  const [frame, setFrame] = useState45(0);
-  useEffect47(() => {
+  const [playing, setPlaying] = useState47(false);
+  const [frame, setFrame] = useState47(0);
+  useEffect50(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -28147,7 +29374,7 @@ var PlayerSeekBar2 = ({
       current.removeEventListener("frameupdate", onFrameUpdate);
     };
   }, [playerRef]);
-  useEffect47(() => {
+  useEffect50(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -28165,11 +29392,11 @@ var PlayerSeekBar2 = ({
       current.removeEventListener("pause", onPause);
     };
   }, [playerRef]);
-  const [dragging, setDragging] = useState45({
+  const [dragging, setDragging] = useState47({
     dragging: false
   });
   const width2 = size4?.width ?? 0;
-  const onPointerDown = useCallback39((e) => {
+  const onPointerDown = useCallback41((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -28183,7 +29410,7 @@ var PlayerSeekBar2 = ({
     });
     onSeekStart();
   }, [durationInFrames, width2, playerRef, playing, onSeekStart]);
-  const onPointerMove = useCallback39((e) => {
+  const onPointerMove = useCallback41((e) => {
     if (!size4) {
       throw new Error("Player has no size");
     }
@@ -28194,7 +29421,7 @@ var PlayerSeekBar2 = ({
     const _frame = getFrameFromX2(e.clientX - posLeft, durationInFrames, size4.width);
     playerRef.current.seekTo(_frame);
   }, [dragging.dragging, durationInFrames, playerRef, size4]);
-  const onPointerUp = useCallback39(() => {
+  const onPointerUp = useCallback41(() => {
     setDragging({
       dragging: false
     });
@@ -28208,7 +29435,7 @@ var PlayerSeekBar2 = ({
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, playerRef]);
-  useEffect47(() => {
+  useEffect50(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -28220,7 +29447,7 @@ var PlayerSeekBar2 = ({
       body.removeEventListener("pointerup", onPointerUp);
     };
   }, [dragging.dragging, onPointerMove, onPointerUp]);
-  const knobStyle = useMemo55(() => {
+  const knobStyle = useMemo57(() => {
     return {
       height: KNOB_SIZE3,
       width: KNOB_SIZE3,
@@ -28234,7 +29461,7 @@ var PlayerSeekBar2 = ({
       transition: "opacity 0.s ease"
     };
   }, [barHovered, durationInFrames, frame, width2]);
-  const fillStyle = useMemo55(() => {
+  const fillStyle = useMemo57(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -28243,7 +29470,7 @@ var PlayerSeekBar2 = ({
       borderRadius: BAR_HEIGHT3 / 2
     };
   }, [durationInFrames, frame, inFrame]);
-  const active = useMemo55(() => {
+  const active = useMemo57(() => {
     return {
       height: BAR_HEIGHT3,
       backgroundColor: "var(--ifm-font-color-base)",
@@ -28278,7 +29505,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback40, useEffect as useEffect48, useRef as useRef41, useState as useState46 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect51, useRef as useRef48, useState as useState48 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx95 } from "react/jsx-runtime";
@@ -28336,10 +29563,10 @@ var IsMutedIcon = (props) => {
 // src/components/homepage/Demo/PlayerVolume.tsx
 import { jsx as jsx97 } from "react/jsx-runtime";
 var PlayerVolume = ({ playerRef }) => {
-  const [muted, setIsMuted] = useState46(() => playerRef.current?.isMuted() ?? true);
-  const [isHovered, setIsHovered] = useState46(false);
-  const timerRef = useRef41(null);
-  useEffect48(() => {
+  const [muted, setIsMuted] = useState48(() => playerRef.current?.isMuted() ?? true);
+  const [isHovered, setIsHovered] = useState48(false);
+  const timerRef = useRef48(null);
+  useEffect51(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -28352,14 +29579,14 @@ var PlayerVolume = ({ playerRef }) => {
       current.removeEventListener("mutechange", onMutedChange);
     };
   }, [playerRef]);
-  useEffect48(() => {
+  useEffect51(() => {
     if (isHovered) {
       document.body.style.userSelect = "none";
     } else {
       document.body.style.userSelect = "auto";
     }
   }, [isHovered]);
-  const onClick = useCallback40(() => {
+  const onClick = useCallback43(() => {
     if (timerRef.current !== null) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
@@ -28397,7 +29624,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React58, { useCallback as useCallback41, useEffect as useEffect49 } from "react";
+import React70, { useCallback as useCallback45, useEffect as useEffect53 } from "react";
 import { jsx as jsx98 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -28414,8 +29641,8 @@ var playerButtonStyle2 = {
   color: PALETTE.TEXT_COLOR
 };
 var PlayPauseButton = ({ playerRef }) => {
-  const [playing, setPlaying] = React58.useState(true);
-  useEffect49(() => {
+  const [playing, setPlaying] = React70.useState(true);
+  useEffect53(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -28433,7 +29660,7 @@ var PlayPauseButton = ({ playerRef }) => {
       current.removeEventListener("pause", onPause);
     };
   }, [playerRef]);
-  const onToggle = useCallback41(() => {
+  const onToggle = useCallback45(() => {
     playerRef.current?.toggle();
   }, [playerRef]);
   const playPauseIconStyle = {
@@ -28452,7 +29679,7 @@ var PlayPauseButton = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/TimeDisplay.tsx
-import React59, { useEffect as useEffect50 } from "react";
+import React71, { useEffect as useEffect55 } from "react";
 import { jsx as jsx99 } from "react/jsx-runtime";
 var formatTime2 = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
@@ -28460,8 +29687,8 @@ var formatTime2 = (timeInSeconds) => {
   return `${String(minutes)}:${String(seconds).padStart(2, "0")}`;
 };
 var TimeDisplay = ({ fps, playerRef }) => {
-  const [time, setTime] = React59.useState(0);
-  useEffect50(() => {
+  const [time, setTime] = React71.useState(0);
+  useEffect55(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -28539,7 +29766,7 @@ var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
 };
 
 // src/components/homepage/Demo/ThemeNudge.tsx
-import React60 from "react";
+import React73 from "react";
 import { jsx as jsx101, jsxs as jsxs38 } from "react/jsx-runtime";
 var origWidth3 = 21;
 var scale3 = 0.4;
@@ -28561,7 +29788,7 @@ var Icon6 = () => {
 };
 var ThemeNudge = () => {
   const { colorMode, setColorMode } = useColorMode();
-  const toggleTheme = React60.useCallback((e) => {
+  const toggleTheme = React73.useCallback((e) => {
     e.preventDefault();
     setColorMode(colorMode === "dark" ? "light" : "dark");
   }, [colorMode, setColorMode]);
@@ -28626,13 +29853,13 @@ var playerWrapper = {
 };
 var Demo = () => {
   const { colorMode } = useColorMode();
-  const [data2, setData] = useState47(null);
-  const ref = useRef43(null);
-  const [isFullscreen, setIsFullscreen] = useState47(false);
-  const [cardOrder, setCardOrder] = useState47([0, 1, 2, 3]);
-  const [emojiIndex, setEmojiIndex] = useState47(0);
-  const [error2, setError] = useState47(false);
-  useEffect51(() => {
+  const [data2, setData] = useState49(null);
+  const ref = useRef49(null);
+  const [isFullscreen, setIsFullscreen] = useState49(false);
+  const [cardOrder, setCardOrder] = useState49([0, 1, 2, 3]);
+  const [emojiIndex, setEmojiIndex] = useState49(0);
+  const [error2, setError] = useState49(false);
+  useEffect56(() => {
     getDataAndProps().then((d2) => {
       setData(d2);
     }).catch((err) => {
@@ -28640,7 +29867,7 @@ var Demo = () => {
       setError(true);
     });
   }, []);
-  useEffect51(() => {
+  useEffect56(() => {
     const { current: playerRef } = ref;
     if (!playerRef || !data2) {
       return;
@@ -28653,10 +29880,10 @@ var Demo = () => {
       playerRef.removeEventListener("fullscreenchange", onFullscreenChange);
     };
   }, [data2]);
-  const updateCardOrder = useCallback43((newCardOrder) => {
+  const updateCardOrder = useCallback46((newCardOrder) => {
     setCardOrder(newCardOrder);
   }, []);
-  const props = useMemo56(() => {
+  const props = useMemo58(() => {
     return {
       theme: colorMode,
       onToggle: () => {
@@ -28675,7 +29902,7 @@ var Demo = () => {
       emojiIndex
     };
   }, [cardOrder, emojiIndex, colorMode, data2, updateCardOrder]);
-  const onError = useCallback43(() => {
+  const onError = useCallback46(() => {
     setError(true);
   }, []);
   return /* @__PURE__ */ jsxs39("div", {
@@ -28784,16 +30011,16 @@ var ClearButton = (props) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef31, useEffect as useEffect55, useImperativeHandle as useImperativeHandle15, useRef as useRef46 } from "react";
+import { forwardRef as forwardRef36, useEffect as useEffect58, useImperativeHandle as useImperativeHandle15, useRef as useRef51 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef30, useCallback as useCallback45, useEffect as useEffect53, useRef as useRef45, useState as useState48 } from "react";
+import { forwardRef as forwardRef35, useCallback as useCallback47, useEffect as useEffect57, useRef as useRef50, useState as useState50 } from "react";
 import { jsx as jsx107 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
-  const targetRef = useRef45(null);
-  useEffect53(() => {
+  const targetRef = useRef50(null);
+  useEffect57(() => {
     refs.forEach((ref) => {
       if (!ref)
         return;
@@ -28806,13 +30033,13 @@ var useCombinedRefs = function(...refs) {
   }, [refs]);
   return targetRef;
 };
-var VideoPlayerWithControls = forwardRef30(({ playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay }, ref) => {
-  const videoRef = useRef45(null);
+var VideoPlayerWithControls = forwardRef35(({ playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay }, ref) => {
+  const videoRef = useRef50(null);
   const metaRef = useCombinedRefs(ref, videoRef);
-  const playerRef = useRef45(null);
-  const [playerInitTime] = useState48(Date.now());
-  const videoError = useCallback45((event) => onError(event), [onError]);
-  const onImageLoad = useCallback45((event) => {
+  const playerRef = useRef50(null);
+  const [playerInitTime] = useState50(Date.now());
+  const videoError = useCallback47((event) => onError(event), [onError]);
+  const onImageLoad = useCallback47((event) => {
     const [w, h] = [event.target.width, event.target.height];
     if (w && h) {
       onSize({ width: w, height: h });
@@ -28822,12 +30049,12 @@ var VideoPlayerWithControls = forwardRef30(({ playbackId, poster, currentTime, o
       console.error("Error getting img dimensions", event);
     }
   }, [onLoaded, onSize]);
-  useEffect53(() => {
+  useEffect57(() => {
     const img = new Image;
     img.onload = (evt) => onImageLoad(evt);
     img.src = poster;
   }, [onImageLoad, poster]);
-  useEffect53(() => {
+  useEffect57(() => {
     const video = videoRef.current;
     const src = `https://stream.mux.com/${playbackId}.m3u8`;
     let hls;
@@ -28870,7 +30097,7 @@ var VideoPlayerWithControls = forwardRef30(({ playbackId, poster, currentTime, o
       }
     };
   }, [playbackId, playerInitTime, videoError, videoRef]);
-  useEffect53(() => {
+  useEffect57(() => {
     const video = videoRef.current;
     if (currentTime && video) {
       video.currentTime = currentTime;
@@ -28894,10 +30121,10 @@ var getVideoToPlayUrl = (muxId) => {
   return `https://stream.mux.com/${muxId}.m3u8`;
 };
 var MuxVideoForward = ({ muxId, ...props }, ref) => {
-  const videoRef = useRef46(null);
+  const videoRef = useRef51(null);
   const vidUrl = getVideoToPlayUrl(muxId);
   useImperativeHandle15(ref, () => videoRef.current, []);
-  useEffect55(() => {
+  useEffect58(() => {
     let hls;
     if (videoRef.current) {
       const { current } = videoRef;
@@ -28922,7 +30149,7 @@ var MuxVideoForward = ({ muxId, ...props }, ref) => {
     ...props
   });
 };
-var MuxVideo = forwardRef31(MuxVideoForward);
+var MuxVideo = forwardRef36(MuxVideoForward);
 
 // src/components/homepage/EditorStarterSection.tsx
 import { jsx as jsx109, jsxs as jsxs40 } from "react/jsx-runtime";
@@ -29010,11 +30237,11 @@ var EditorStarterSection = () => {
 var EditorStarterSection_default = EditorStarterSection;
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { useEffect as useEffect56, useState as useState49 } from "react";
+import { useEffect as useEffect59, useState as useState51 } from "react";
 import { jsx as jsx110, jsxs as jsxs41 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
-  const [dailyAvatars, setDailyAvatars] = useState49([]);
-  useEffect56(() => {
+  const [dailyAvatars, setDailyAvatars] = useState51([]);
+  useEffect59(() => {
     const avatars = experts.map((expert) => expert.image);
     const selectedAvatars = [];
     for (let i = 0;i < 3; i++) {
@@ -29096,7 +30323,7 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/IfYouKnowReact.tsx
-import { useEffect as useEffect57, useState as useState50 } from "react";
+import { useEffect as useEffect60, useState as useState53 } from "react";
 import { jsx as jsx111, jsxs as jsxs44 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
@@ -29111,8 +30338,8 @@ var icon2 = {
   marginLeft: 10
 };
 var IfYouKnowReact = () => {
-  const [vid, setVid] = useState50("/img/compose.webm");
-  useEffect57(() => {
+  const [vid, setVid] = useState53("/img/compose.webm");
+  useEffect60(() => {
     if (isWebkit()) {
       setVid("/img/compose.mp4");
     }
@@ -29171,13 +30398,13 @@ var IfYouKnowReact = () => {
 };
 
 // src/components/homepage/NewsletterButton.tsx
-import { useCallback as useCallback46, useState as useState51 } from "react";
+import { useCallback as useCallback48, useState as useState55 } from "react";
 import { jsx as jsx114, jsxs as jsxs46 } from "react/jsx-runtime";
 var NewsletterButton = () => {
-  const [email, setEmail] = useState51("");
-  const [submitting, setSubmitting] = useState51(false);
-  const [subscribed, setSubscribed] = useState51(false);
-  const handleSubmit = useCallback46(async (e) => {
+  const [email, setEmail] = useState55("");
+  const [submitting, setSubmitting] = useState55(false);
+  const [subscribed, setSubscribed] = useState55(false);
+  const handleSubmit = useCallback48(async (e) => {
     try {
       setSubmitting(true);
       e.preventDefault();
@@ -29259,16 +30486,16 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect58, useRef as useRef47, useState as useState53 } from "react";
+import { useEffect as useEffect61, useRef as useRef53, useState as useState56 } from "react";
 import { jsx as jsx116, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
   marginLeft: 10
 };
 var ParameterizeAndEdit = () => {
-  const ref = useRef47(null);
-  const [vid, setVid] = useState53("/img/editing-vp9-chrome.webm");
-  useEffect58(() => {
+  const ref = useRef53(null);
+  const [vid, setVid] = useState56("/img/editing-vp9-chrome.webm");
+  useEffect61(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
     }
@@ -29382,22 +30609,22 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect59, useRef as useRef48, useState as useState55 } from "react";
+import { useEffect as useEffect63, useRef as useRef55, useState as useState57 } from "react";
 import { jsx as jsx117, jsxs as jsxs48 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
   marginLeft: 10
 };
 var RealMP4Videos = () => {
-  const ref = useRef48(null);
-  const videoRef = useRef48(null);
-  const [vid, setVid] = useState55("/img/render-progress.webm");
-  useEffect59(() => {
+  const ref = useRef55(null);
+  const videoRef = useRef55(null);
+  const [vid, setVid] = useState57("/img/render-progress.webm");
+  useEffect63(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
     }
   }, []);
-  useEffect59(() => {
+  useEffect63(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -29509,7 +30736,7 @@ var RealMP4Videos = () => {
 };
 
 // src/components/homepage/TrustedByBanner.tsx
-import { jsx as jsx118, jsxs as jsxs49, Fragment as Fragment11 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs49, Fragment as Fragment12 } from "react/jsx-runtime";
 var TrustedByBanner = () => {
   const logos = [
     {
@@ -29622,7 +30849,7 @@ var TrustedByBanner = () => {
       })
     }
   ];
-  return /* @__PURE__ */ jsxs49(Fragment11, {
+  return /* @__PURE__ */ jsxs49(Fragment12, {
     children: [
       /* @__PURE__ */ jsx118("h3", {
         className: "text-center mt-20 mb-10",
@@ -29643,7 +30870,7 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useEffect as useEffect60, useRef as useRef49, useState as useState56 } from "react";
+import { useEffect as useEffect65, useRef as useRef56, useState as useState58 } from "react";
 import { jsx as jsx119, jsxs as jsxs50 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
@@ -29696,12 +30923,12 @@ var icon5 = {
   marginLeft: 10
 };
 var VideoAppsShowcase = () => {
-  const [activeTab, setActiveTab] = useState56(0);
-  const [isMuted, setIsMuted] = useState56(true);
-  const [isPlaying, setIsPlaying] = useState56(false);
-  const videoRef = useRef49(null);
-  const containerRef = useRef49(null);
-  useEffect60(() => {
+  const [activeTab, setActiveTab] = useState58(0);
+  const [isMuted, setIsMuted] = useState58(true);
+  const [isPlaying, setIsPlaying] = useState58(false);
+  const videoRef = useRef56(null);
+  const containerRef = useRef56(null);
+  useEffect65(() => {
     const video = videoRef.current;
     if (video) {
       video.pause();
@@ -30104,8 +31331,8 @@ var FEATURED_TEMPLATES = [
     description: "AI-powered code generation for Remotion",
     longerDescription: 'A SaaS template for "Prompt to Motion Graphics" products. Generates Remotion code, streams it to the frontend, and compiles and previews it in the browser.',
     promoBanner: {
-      width: 1002,
-      height: 720,
+      width: 1920,
+      height: 1080,
       src: "/img/prompt-to-motion-graphics.png"
     },
     cliId: "prompt-to-motion-graphics",
@@ -31142,7 +32369,7 @@ var ChooseTemplate = () => {
 };
 
 // src/components/homepage/GetStartedStrip.tsx
-import { useState as useState57 } from "react";
+import { useState as useState59 } from "react";
 
 // src/components/homepage/GitHubButton.tsx
 import { jsx as jsx154, jsxs as jsxs66 } from "react/jsx-runtime";
@@ -31177,7 +32404,7 @@ var GithubButton = () => {
 // src/components/homepage/GetStartedStrip.tsx
 import { jsx as jsx156, jsxs as jsxs67 } from "react/jsx-runtime";
 var GetStarted = () => {
-  const [clicked, setClicked] = useState57(null);
+  const [clicked, setClicked] = useState59(null);
   return /* @__PURE__ */ jsxs67("div", {
     className: "flex flex-col lg:flex-row items-center justify-center text-center w-full",
     children: [