@remotion/promo-pages 4.0.373 → 4.0.375

package/dist/Homepage.js

@@ -25,7 +25,7 @@ import { createContext as createContext2, useContext } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef2,
-  useContext as useContext12,
+  useContext as useContext13,
   useEffect as useEffect3,
   useMemo as useMemo10,
   useState as useState6
@@ -36,7 +36,7 @@ import { createContext as createContext3 } from "react";
 import React3, { useCallback, useMemo as useMemo22, useState } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 import {
-  createContext as createContext9,
+  createContext as createContext10,
   useLayoutEffect,
   useMemo as useMemo7,
   useRef as useRef2,
@@ -66,14 +66,16 @@ import React5, {
 import { jsx as jsx42 } from "react/jsx-runtime";
 import { createContext as createContext6, useContext as useContext3, useEffect, useRef, useState as useState3 } from "react";
 import { jsx as jsx52 } from "react/jsx-runtime";
-import { createContext as createContext8, useCallback as useCallback4, useContext as useContext7 } from "react";
+import { createContext as createContext9, useCallback as useCallback4, useContext as useContext8 } from "react";
+import { createContext as createContext8 } from "react";
+import * as React6 from "react";
 import { jsx as jsx62 } from "react/jsx-runtime";
-import { useContext as useContext9 } from "react";
-import { createContext as createContext10 } from "react";
-import { jsx as jsx72 } from "react/jsx-runtime";
-import { useContext as useContext8, useMemo as useMemo8 } from "react";
-import { useContext as useContext11, useMemo as useMemo9 } from "react";
 import { useContext as useContext10 } from "react";
+import { createContext as createContext11 } from "react";
+import { jsx as jsx72 } from "react/jsx-runtime";
+import { useContext as useContext9, useMemo as useMemo8 } from "react";
+import { useContext as useContext12, useMemo as useMemo9 } from "react";
+import { useContext as useContext11 } from "react";
 import { jsx as jsx82 } from "react/jsx-runtime";
 import { jsx as jsx92 } from "react/jsx-runtime";
 import {
@@ -84,12 +86,12 @@ import {
   useRef as useRef4,
   useState as useState7
 } from "react";
-import React10, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle3, useRef as useRef3 } from "react";
+import React11, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle3, useRef as useRef3 } from "react";
 import { jsx as jsx102 } from "react/jsx-runtime";
 import { jsx as jsx11 } from "react/jsx-runtime";
-import { useContext as useContext13, useEffect as useEffect5, useState as useState9 } from "react";
+import { useContext as useContext14, useEffect as useEffect5, useState as useState9 } from "react";
 import {
-  createContext as createContext11,
+  createContext as createContext12,
   useCallback as useCallback6,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo11,
@@ -97,12 +99,12 @@ import {
 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext27 } from "react";
-import React11, { createContext as createContext12, useMemo as useMemo12 } from "react";
+import React12, { createContext as createContext13, useMemo as useMemo12 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
-import { useContext as useContext14 } from "react";
-import { createContext as createContext13, useEffect as useEffect6, useState as useState10 } from "react";
+import { useContext as useContext15 } from "react";
+import { createContext as createContext14, useEffect as useEffect6, useState as useState10 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
-import { createContext as createContext14, useMemo as useMemo13, useReducer } from "react";
+import { createContext as createContext15, useMemo as useMemo13, useReducer } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
@@ -113,8 +115,6 @@ import {
   useRef as useRef12,
   useState as useState15
 } from "react";
-import { createContext as createContext15 } from "react";
-import * as React14 from "react";
 import { useContext as useContext17, useLayoutEffect as useLayoutEffect4, useRef as useRef7 } from "react";
 import React15, {
   createContext as createContext16,
@@ -328,7 +328,7 @@ function validateFps(fps, location, isGif) {
     throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
   }
 }
-function cancelRender(err) {
+function cancelRenderInternal(scope, err) {
   let error;
   if (isErrorLike(err)) {
     error = err;
@@ -340,9 +340,14 @@ function cancelRender(err) {
   } else {
     error = Error("Rendering was cancelled");
   }
-  window.remotion_cancelledError = error.stack;
+  if (scope) {
+    scope.remotion_cancelledError = error.stack;
+  }
   throw error;
 }
+function cancelRender(err) {
+  return cancelRenderInternal(typeof window !== "undefined" ? window : undefined, err);
+}
 function interpolateFunction(input, inputRange, outputRange, options) {
   const { extrapolateLeft, extrapolateRight, easing } = options;
   let result = input;
@@ -748,7 +753,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.373", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.375", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1041,6 +1046,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (override) {
     return override;
   }
+  if (typeof window === "undefined" || typeof window.remotion_inputProps === "undefined") {
+    throw new Error("Cannot call `getInputProps()` - window.remotion_inputProps is not set. This API is only available if you are in the Studio, or while you are rendering server-side.");
+  }
   const param = window.remotion_inputProps;
   if (!param) {
     return {};
@@ -1198,7 +1206,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, ResolveCompositionContext, resolveCompositionsRef, needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
-}, PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally", ResolveCompositionConfig = ({ children }) => {
+}, PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally", ResolveCompositionConfigInStudio = ({ children }) => {
   const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState4(null);
   const { compositions, canvasContent, currentCompositionMetadata } = useContext4(CompositionManager);
   const { fastRefreshes, manualRefreshes } = useContext4(NonceContext);
@@ -1494,7 +1502,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
           props: {
             ...composition.defaultProps ?? {},
             ...selectedEditorProps ?? {},
-            ...typeof window === "undefined" || env.isPlayer ? {} : getInputProps() ?? {}
+            ...typeof window === "undefined" || env.isPlayer || !window.remotion_inputProps ? {} : getInputProps() ?? {}
           },
           defaultCodec: null,
           defaultOutName: null,
@@ -1504,6 +1512,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
         }
       };
     }
+    if (!context) {
+      return null;
+    }
     if (!context[composition.id]) {
       return null;
     }
@@ -1634,8 +1645,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, error = (options, ...args) => {
   return console.error(...transformArgs({ args, logLevel: "error", tag: options.tag }));
-}, Log, handles, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = (scope, environment, label, options) => {
-  if (typeof label !== "string" && typeof label !== "undefined") {
+}, Log, handles, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = ({
+  scope,
+  environment,
+  label,
+  options
+}) => {
+  if (typeof label !== "string" && label !== null) {
     throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
   }
   const handle = Math.random();
@@ -1658,7 +1674,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
             DELAY_RENDER_CALLSTACK_TOKEN,
             called
           ].filter(truthy2).join(" ");
-          cancelRender(Error(message));
+          cancelRenderInternal(scope, Error(message));
         }, timeoutToUse)
       };
     }
@@ -1667,7 +1683,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
     scope.remotion_renderReady = false;
   }
   return handle;
-}, continueRenderInternal = (scope, handle, environment) => {
+}, continueRenderInternal = ({
+  scope,
+  handle,
+  environment,
+  logLevel
+}) => {
   if (typeof handle === "undefined") {
     throw new TypeError("The continueRender() method must be called with a parameter that is the return value of delayRender(). No value was passed.");
   }
@@ -1687,7 +1708,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
           DELAY_RENDER_CLEAR_TOKEN,
           `${Date.now() - startTime}ms`
         ].filter(truthy2).join(" ");
-        Log.verbose({ logLevel: window.remotion_logLevel, tag: "delayRender()" }, message);
+        Log.verbose({ logLevel, tag: "delayRender()" }, message);
         delete scope.remotion_delayRenderTimeouts[handle];
       }
       return false;
@@ -1697,16 +1718,42 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (handles.length === 0 && typeof scope !== "undefined") {
     scope.remotion_renderReady = true;
   }
+}, LogLevelContext, useLogLevel = () => {
+  const { logLevel } = React6.useContext(LogLevelContext);
+  if (logLevel === null) {
+    throw new Error("useLogLevel must be used within a LogLevelProvider");
+  }
+  return logLevel;
+}, useMountTime = () => {
+  const { mountTime } = React6.useContext(LogLevelContext);
+  if (mountTime === null) {
+    throw new Error("useMountTime must be used within a LogLevelProvider");
+  }
+  return mountTime;
 }, DelayRenderContextType, useDelayRender = () => {
   const environment = useRemotionEnvironment();
-  const scope = useContext7(DelayRenderContextType);
+  const scope = useContext8(DelayRenderContextType);
+  const logLevel = useLogLevel();
   const delayRender2 = useCallback4((label, options) => {
-    return delayRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), environment, label, options);
+    return delayRenderInternal({
+      scope: scope ?? (typeof window !== "undefined" ? window : undefined),
+      environment,
+      label: label ?? null,
+      options: options ?? {}
+    });
   }, [environment, scope]);
   const continueRender2 = useCallback4((handle) => {
-    continueRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), handle, environment);
-  }, [environment, scope]);
-  return { delayRender: delayRender2, continueRender: continueRender2 };
+    continueRenderInternal({
+      scope: scope ?? (typeof window !== "undefined" ? window : undefined),
+      handle,
+      environment,
+      logLevel
+    });
+  }, [environment, logLevel, scope]);
+  const cancelRender2 = useCallback4((err) => {
+    return cancelRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), err);
+  }, [scope]);
+  return { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 };
 }, SetTimelineContext, TimelineContext, TimelineContextProvider = ({ children, frameState }) => {
   const [playing, setPlaying] = useState5(false);
   const imperativePlaying = useRef2(false);
@@ -1772,7 +1819,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     children
   });
 }, useUnsafeVideoConfig = () => {
-  const context = useContext8(SequenceContext);
+  const context = useContext9(SequenceContext);
   const ctxWidth = context?.width ?? null;
   const ctxHeight = context?.height ?? null;
   const ctxDuration = context?.durationInFrames ?? null;
@@ -1812,7 +1859,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [ctxDuration, ctxHeight, ctxWidth, video]);
 }, useVideoConfig = () => {
   const videoConfig = useUnsafeVideoConfig();
-  const context = useContext9(CanUseRemotionHooks);
+  const context = useContext10(CanUseRemotionHooks);
   const isPlayer = useIsPlayer();
   if (!videoConfig) {
     if (typeof window !== "undefined" && window.remotion_isPlayer || isPlayer) {
@@ -1829,7 +1876,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return videoConfig;
 }, useCurrentFrame = () => {
-  const canUseRemotionHooks = useContext10(CanUseRemotionHooks);
+  const canUseRemotionHooks = useContext11(CanUseRemotionHooks);
   const env = useRemotionEnvironment();
   if (!canUseRemotionHooks) {
     if (env.isPlayer) {
@@ -1838,7 +1885,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
   }
   const frame = useTimelinePosition();
-  const context = useContext10(SequenceContext);
+  const context = useContext11(SequenceContext);
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return frame - contextOffset;
 }, Freeze = ({
@@ -1868,8 +1915,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
       return active(frame);
     }
   }, [active, frame]);
-  const timelineContext = useContext11(TimelineContext);
-  const sequenceContext = useContext11(SequenceContext);
+  const timelineContext = useContext12(TimelineContext);
+  const sequenceContext = useContext12(SequenceContext);
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
   const timelineValue = useMemo9(() => {
     if (!isActive) {
@@ -1922,8 +1969,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }, ref) => {
   const { layout = "absolute-fill" } = other;
   const [id] = useState6(() => String(Math.random()));
-  const parentSequence = useContext12(SequenceContext);
-  const { rootId } = useContext12(TimelineContext);
+  const parentSequence = useContext13(SequenceContext);
+  const { rootId } = useContext13(TimelineContext);
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
@@ -1948,8 +1995,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const videoConfig = useVideoConfig();
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext12(SequenceManager);
-  const { hidden } = useContext12(SequenceVisibilityToggleContext);
+  const { registerSequence, unregisterSequence } = useContext13(SequenceManager);
+  const { hidden } = useContext13(SequenceVisibilityToggleContext);
   const premounting = useMemo10(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
@@ -2413,7 +2460,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     children
   });
 }, ArtifactThumbnail, Artifact = ({ filename, content, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext13(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext14(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
   const [id] = useState9(() => {
@@ -2491,7 +2538,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
 }, LoopContext, useLoop = () => {
-  return React11.useContext(LoopContext);
+  return React12.useContext(LoopContext);
 }, Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
   const currentFrame = useCurrentFrame();
   const { durationInFrames: compDuration } = useVideoConfig();
@@ -2579,7 +2626,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return src.slice(0, hashIndex);
 }, usePreload = (src) => {
-  const preloads2 = useContext14(PreloadContext);
+  const preloads2 = useContext15(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -2875,18 +2922,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return "anonymous";
   }
   return;
-}, LogLevelContext, useLogLevel = () => {
-  const { logLevel } = React14.useContext(LogLevelContext);
-  if (logLevel === null) {
-    throw new Error("useLogLevel must be used within a LogLevelProvider");
-  }
-  return logLevel;
-}, useMountTime = () => {
-  const { mountTime } = React14.useContext(LogLevelContext);
-  if (mountTime === null) {
-    throw new Error("useMountTime must be used within a LogLevelProvider");
-  }
-  return mountTime;
 }, playAndHandleNotAllowedError = ({
   mediaRef,
   mediaType,
@@ -5393,14 +5428,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
               children: /* @__PURE__ */ jsx28(PrefetchProvider, {
                 children: /* @__PURE__ */ jsx28(SequenceManagerProvider, {
                   children: /* @__PURE__ */ jsx28(RenderAssetManagerProvider, {
-                    children: /* @__PURE__ */ jsx28(ResolveCompositionConfig, {
-                      children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
-                        numberOfAudioTags,
-                        audioLatencyHint,
-                        children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
-                          children: /* @__PURE__ */ jsx28(BufferingProvider, {
-                            children
-                          })
+                    children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
+                      numberOfAudioTags,
+                      audioLatencyHint,
+                      children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
+                        children: /* @__PURE__ */ jsx28(BufferingProvider, {
+                          children
                         })
                       })
                     })
@@ -6823,8 +6856,12 @@ var init_esm = __esm(() => {
       window.remotion_delayRenderTimeouts = {};
     }
   }
-  DelayRenderContextType = createContext8(null);
-  SetTimelineContext = createContext9({
+  LogLevelContext = createContext8({
+    logLevel: "info",
+    mountTime: 0
+  });
+  DelayRenderContextType = createContext9(null);
+  SetTimelineContext = createContext10({
     setFrame: () => {
       throw new Error("default");
     },
@@ -6832,7 +6869,7 @@ var init_esm = __esm(() => {
       throw new Error("default");
     }
   });
-  TimelineContext = createContext9({
+  TimelineContext = createContext10({
     frame: {},
     playing: false,
     playbackRate: 1,
@@ -6845,11 +6882,11 @@ var init_esm = __esm(() => {
     },
     audioAndVideoTags: { current: [] }
   });
-  CanUseRemotionHooks = createContext10(false);
+  CanUseRemotionHooks = createContext11(false);
   RegularSequence = forwardRef2(RegularSequenceRefForwardingFunction);
   PremountedPostmountedSequence = forwardRef2(PremountedPostmountedSequenceRefForwardingFunction);
   Sequence = forwardRef2(SequenceRefForwardingFunction);
-  Canvas = React10.forwardRef(CanvasRefForwardingFunction);
+  Canvas = React11.forwardRef(CanvasRefForwardingFunction);
   AnimatedImage = forwardRef3(({
     src,
     width,
@@ -6957,7 +6994,7 @@ var init_esm = __esm(() => {
       ...props
     });
   });
-  RenderAssetManager = createContext11({
+  RenderAssetManager = createContext12({
     registerRenderAsset: () => {
       return;
     },
@@ -6968,21 +7005,17 @@ var init_esm = __esm(() => {
   });
   ArtifactThumbnail = Symbol("Thumbnail");
   Artifact.Thumbnail = ArtifactThumbnail;
-  LoopContext = createContext12(null);
+  LoopContext = createContext13(null);
   Loop.useLoop = useLoop;
-  PreloadContext = createContext13({});
+  PreloadContext = createContext14({});
   preloads = {};
   updaters = [];
-  DurationsContext = createContext14({
+  DurationsContext = createContext15({
     durations: {},
     setDurations: () => {
       throw new Error("context missing");
     }
   });
-  LogLevelContext = createContext15({
-    logLevel: "info",
-    mountTime: 0
-  });
   SharedAudioContext = createContext16(null);
   didWarn = {};
   BufferingContextReact = React16.createContext(null);
@@ -7100,7 +7133,7 @@ var init_esm = __esm(() => {
     resolveVideoConfig,
     useResolvedVideoConfig,
     resolveCompositionsRef,
-    ResolveCompositionConfig,
+    ResolveCompositionConfigInStudio,
     REMOTION_STUDIO_CONTAINER_ELEMENT,
     RenderAssetManager,
     persistCurrentFrame,
@@ -7207,7 +7240,7 @@ __export(exports_esm, {
   Lottie: () => Lottie
 });
 import lottie from "lottie-web";
-import { useEffect as useEffect40, useRef as useRef33, useState as useState37 } from "react";
+import { useEffect as useEffect40, useRef as useRef36, useState as useState37 } from "react";
 import { jsx as jsx59 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -7272,10 +7305,10 @@ var getLottieMetadata = (animationData) => {
   }
   validatePlaybackRate2(playbackRate);
   validateLoop(loop);
-  const animationRef = useRef33(null);
-  const currentFrameRef = useRef33(null);
-  const containerRef = useRef33(null);
-  const onAnimationLoadedRef = useRef33(onAnimationLoaded);
+  const animationRef = useRef36(null);
+  const currentFrameRef = useRef36(null);
+  const containerRef = useRef36(null);
+  const onAnimationLoadedRef = useRef36(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender, continueRender } = useDelayRender();
   const [handle] = useState37(() => delayRender("Waiting for Lottie animation to load"));
@@ -7377,7 +7410,7 @@ var init_esm2 = __esm(() => {
 });
 
 // ../design/dist/esm/index.mjs
-import { useCallback as useCallback18, useRef as useRef18, useState as useState22 } from "react";
+import { useCallback as useCallback18, useRef as useRef22, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -8718,7 +8751,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React6, { useEffect as useEffect23, useMemo as useMemo33, useState as useState21 } from "react";
+import React7, { useEffect as useEffect23, useMemo as useMemo33, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -12859,65 +12892,69 @@ var extrudeAndTransformElement = (options) => {
 init_esm();
 import { jsx as jsx37, Fragment } from "react/jsx-runtime";
 import { jsx as jsx210, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect24, useMemo as useMemo210, useRef as useRef18 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
-import React34 from "react";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+import React42 from "react";
 import { jsx as jsx53 } from "react/jsx-runtime";
-import { jsx as jsx63, jsxs as jsxs23 } from "react/jsx-runtime";
-import { jsx as jsx73 } from "react/jsx-runtime";
-import * as React322 from "react";
-import * as ReactDOM4 from "react-dom";
-import React7 from "react";
-import * as React42 from "react";
+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 * as React52 from "react";
+import { jsx as jsx93 } from "react/jsx-runtime";
+import * as React34 from "react";
+import * as ReactDOM4 from "react-dom";
+import React9 from "react";
 import * as React62 from "react";
-import { Fragment as Fragment2, jsx as jsx93 } from "react/jsx-runtime";
 import { jsx as jsx103 } from "react/jsx-runtime";
+import * as React72 from "react";
 import * as React8 from "react";
-import { jsx as jsx112 } from "react/jsx-runtime";
-import * as React12 from "react";
-import * as React9 from "react";
-import * as ReactDOM from "react-dom";
+import { Fragment as Fragment2, jsx as jsx112 } from "react/jsx-runtime";
 import { jsx as jsx122 } from "react/jsx-runtime";
-import * as React102 from "react";
-import * as React112 from "react";
+import * as React10 from "react";
 import { jsx as jsx132 } from "react/jsx-runtime";
-import * as React13 from "react";
-import * as React142 from "react";
+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 * as React162 from "react";
+import * as React122 from "react";
+import * as React13 from "react";
+import { jsx as jsx152 } from "react/jsx-runtime";
 import * as React152 from "react";
-import * as React20 from "react";
-import * as React172 from "react";
-import { useLayoutEffect as useLayoutEffect32, useEffect as useEffect72 } from "react";
-import * as ReactDOM2 from "react-dom";
+import * as React162 from "react";
+import { jsx as jsx162 } from "react/jsx-runtime";
 import * as React18 from "react";
-import { jsx as jsx152 } from "react/jsx-runtime";
+import * as React172 from "react";
+import * as React22 from "react";
 import * as React19 from "react";
-import { jsx as jsx162 } from "react/jsx-runtime";
-import * as React212 from "react";
-import ReactDOM3 from "react-dom";
+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 * as React22 from "react";
+import * as React212 from "react";
+import { jsx as jsx182 } from "react/jsx-runtime";
 import * as React23 from "react";
+import ReactDOM3 from "react-dom";
+import { jsx as jsx192 } from "react/jsx-runtime";
 import * as React24 from "react";
-import { jsx as jsx182 } from "react/jsx-runtime";
-import * as React312 from "react";
-import * as React272 from "react";
-import { useState as useState112 } from "react";
 import * as React252 from "react";
 import * as React26 from "react";
-import * as React30 from "react";
+import { jsx as jsx202 } from "react/jsx-runtime";
+import * as React332 from "react";
 import * as React29 from "react";
+import { useState as useState112 } from "react";
+import * as React272 from "react";
 import * as React28 from "react";
-import { Fragment as Fragment52, jsx as jsx192, jsxs as jsxs32 } from "react/jsx-runtime";
+import * as React322 from "react";
+import * as React312 from "react";
+import * as React30 from "react";
+import { Fragment as Fragment52, jsx as jsx212, jsxs as jsxs4 } from "react/jsx-runtime";
 import { forwardRef as forwardRef132, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef122, createElement as createElement6 } from "react";
-import * as React332 from "react";
-import { jsx as jsx202, jsxs as jsxs4 } from "react/jsx-runtime";
-import { jsx as jsx212 } from "react/jsx-runtime";
-import { jsx as jsx223 } from "react/jsx-runtime";
+import * as React352 from "react";
+import { jsx as jsx223, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx232 } from "react/jsx-runtime";
+import { jsx as jsx242 } from "react/jsx-runtime";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -12936,7 +12973,7 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React6.useState({
+  const [state, setState] = React7.useState({
     progress: 0,
     isActive: false
   });
@@ -12948,7 +12985,7 @@ var useHoverTransforms = (ref, disabled) => {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -13023,8 +13060,8 @@ var useHoverTransforms = (ref, disabled) => {
   return state;
 };
 var useClickTransforms = (ref) => {
-  const [hoverProgress, setHoverProgress] = React6.useState(0);
-  React6.useEffect(() => {
+  const [hoverProgress, setHoverProgress] = React7.useState(0);
+  React7.useEffect(() => {
     const element = getChildNodeFrom(ref.current);
     if (!element) {
       return;
@@ -13147,6 +13184,7 @@ var Outer = ({
   const depth = depthFromHover;
   const frontFace = reduceMatrices([
     translateZ(-depth / 2 + depthFromClick),
+    translateZ(1.1),
     transformation
   ]);
   const centerOriented = reduceMatrices([
@@ -13197,10 +13235,56 @@ var Outer = ({
     ]
   });
 };
-var Button = ({ children, className, disabled, depth, ...buttonProps }) => {
+var viewBox = 100;
+var lines = 8;
+var translated2 = "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 Spinner = ({ size, duration }) => {
+  const style = useMemo210(() => {
+    return {
+      width: size,
+      height: size
+    };
+  }, [size]);
+  const pathsRef = useRef18([]);
+  useEffect24(() => {
+    const animate = () => {
+      const now = performance.now();
+      for (let index = 0;index < lines; index++) {
+        const path = pathsRef.current[index];
+        if (!path)
+          continue;
+        const progress = (now / 1000 - index * (duration / lines)) % duration / duration;
+        const opacity = 1 - 0.85 * progress;
+        path.style.opacity = opacity.toString();
+      }
+      requestAnimationFrame(animate);
+    };
+    const id = requestAnimationFrame(animate);
+    return () => {
+      cancelAnimationFrame(id);
+    };
+  }, [duration]);
+  return /* @__PURE__ */ jsx38("svg", {
+    style,
+    viewBox: `0 0 ${viewBox} ${viewBox}`,
+    children: new Array(lines).fill(true).map((_, index) => {
+      return /* @__PURE__ */ jsx38("path", {
+        ref: (el) => pathsRef.current[index] = el,
+        style: {
+          rotate: `${index * Math.PI * 2 / lines}rad`,
+          transformOrigin: "center center",
+          opacity: 1
+        },
+        d: translated2,
+        fill: "currentColor"
+      }, index);
+    })
+  });
+};
+var Button = ({ children, className, disabled, depth, loading, ...buttonProps }) => {
   const [dimensions, setDimensions] = useState22(null);
-  const ref = useRef18(null);
-  const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled));
+  const ref = useRef22(null);
+  const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
   const onPointerEnter = useCallback18((e) => {
     if (e.pointerType !== "mouse") {
       return;
@@ -13235,18 +13319,30 @@ var Button = ({ children, className, disabled, depth, ...buttonProps }) => {
       };
     });
   }, []);
-  const content = /* @__PURE__ */ jsx38("button", {
+  const content = /* @__PURE__ */ jsxs23("button", {
     type: "button",
-    disabled,
-    className: cn("text-text", "flex", "justify-center", "bg-button-bg", "items-center", "font-brand", "border-solid", "text-[1em]", "rounded-lg", "border-black", "border-2", "border-b-4", "cursor-pointer", "px-4", "h-12", "flex", "flex-row", "items-center", "disabled:cursor-default", "disabled:border-gray-500", "disabled:text-gray-500", className),
+    disabled: disabled || loading,
+    className: cn("text-text", "flex", "justify-center", "bg-button-bg", "items-center", "font-brand", "border-solid", "text-[1em]", "rounded-lg", "border-black", "border-2", "border-b-4", "cursor-pointer", "px-4", "h-12", "flex", "flex-row", "items-center", "disabled:cursor-default", "disabled:opacity-50", "relative", "overflow-hidden", className),
     ...buttonProps,
-    children
+    children: [
+      /* @__PURE__ */ jsx43("div", {
+        className: cn(loading && "invisible", "inline-flex"),
+        children
+      }),
+      loading ? /* @__PURE__ */ jsx43("div", {
+        className: cn("absolute w-full h-full flex inset-0 items-center justify-center text-inherit bg-inherit"),
+        children: /* @__PURE__ */ jsx43(Spinner, {
+          size: 20,
+          duration: 1
+        })
+      }) : null
+    ]
   });
-  return /* @__PURE__ */ jsx38("div", {
+  return /* @__PURE__ */ jsx43("div", {
     ref,
     className: "contents",
     onPointerEnter,
-    children: dimensions && (isActive || progress > 0) ? /* @__PURE__ */ jsx38(Outer, {
+    children: dimensions && (isActive || progress > 0) ? /* @__PURE__ */ jsx43(Outer, {
       parentRef: ref,
       width: dimensions.width,
       height: dimensions.height,
@@ -13257,8 +13353,8 @@ var Button = ({ children, className, disabled, depth, ...buttonProps }) => {
     }) : content
   });
 };
-var Card = React34.forwardRef(({ children, className, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx43("div", {
+var Card = React42.forwardRef(({ children, className, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx53("div", {
     ref,
     className: cn("rounded-lg border-2 border-black bg-card-bg text-text border-b-4", className),
     ...rest,
@@ -13268,18 +13364,18 @@ var Card = React34.forwardRef(({ children, className, ...rest }, ref) => {
 Card.displayName = "Card";
 var d = "M143.056 81.4934C147.25 77.2994 147.25 70.4506 143.056 66.2566C138.862 62.0627 132.013 62.0627 127.819 66.2566L86.1875 107.888L69.1809 90.8816C64.9869 86.6877 58.1381 86.6877 53.9441 90.8816C49.7502 95.0756 49.7502 101.924 53.9441 106.118L78.5691 130.743C82.7631 134.937 89.6119 134.937 93.8059 130.743L143.056 81.4934Z";
 var CheckIcon = (props) => {
-  return /* @__PURE__ */ jsx53("svg", {
+  return /* @__PURE__ */ jsx63("svg", {
     ...props,
     viewBox: "50.79867500000001 63.11117499999997 95.40282500000015 70.77732499999999",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx53("path", {
+    children: /* @__PURE__ */ jsx63("path", {
       d,
       fill: "currentcolor"
     })
   });
 };
-var Triangle = ({ rotated: rotated2 }) => /* @__PURE__ */ jsx63("svg", {
+var Triangle = ({ rotated: rotated2 }) => /* @__PURE__ */ jsx73("svg", {
   width: "12px",
   height: "7px",
   viewBox: "0 0 12 7",
@@ -13287,7 +13383,7 @@ var Triangle = ({ rotated: rotated2 }) => /* @__PURE__ */ jsx63("svg", {
   style: {
     transform: rotated2 ? "rotate(180deg)" : "rotate(0deg)"
   },
-  children: /* @__PURE__ */ jsx63("path", {
+  children: /* @__PURE__ */ jsx73("path", {
     className: "fill-text",
     d: "M7.17096 0.475588C6.73198 0.0764969 6.01906 0.0764969 5.58007 0.475588L1.08483 4.56228C0.761737 4.85601 0.666915 5.29341 0.84251 5.67654C1.01811 6.05966 1.42549 6.3087 1.88203 6.3087H10.8725C11.3255 6.3087 11.7364 6.05966 11.912 5.67654C12.0876 5.29341 11.9893 4.85601 11.6697 4.56228L7.17448 0.475588H7.17096Z"
   })
@@ -13322,11 +13418,11 @@ var Counter = ({
   const increment = () => {
     setCount(count + step);
   };
-  return /* @__PURE__ */ jsxs23(Card, {
+  return /* @__PURE__ */ jsxs32(Card, {
     style: container2,
     className: cn("w-[140px] flex flex-row overflow-hidden"),
     children: [
-      /* @__PURE__ */ jsx63("input", {
+      /* @__PURE__ */ jsx73("input", {
         className: "fontbrand text-2xl font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums",
         type: "number",
         onClick: (e) => e.currentTarget.select(),
@@ -13346,28 +13442,28 @@ var Counter = ({
           }
         }
       }),
-      /* @__PURE__ */ jsxs23("div", {
+      /* @__PURE__ */ jsxs32("div", {
         className: "flex flex-col  h-full",
         children: [
-          /* @__PURE__ */ jsx63("button", {
+          /* @__PURE__ */ jsx73("button", {
             type: "button",
             className: "border-0 flex-1 p-0 pt-[5px] bg-transparent",
             style: {
               ...buttonContainer
             },
             onClick: increment,
-            children: /* @__PURE__ */ jsx63(Triangle, {
+            children: /* @__PURE__ */ jsx73(Triangle, {
               rotated: false
             })
           }),
-          /* @__PURE__ */ jsx63("button", {
+          /* @__PURE__ */ jsx73("button", {
             type: "button",
             className: "border-0 flex-1 p-0 bg-transparent pb-[5px] pl-[1px]",
             style: {
               ...buttonContainer
             },
             onClick: decrement,
-            children: /* @__PURE__ */ jsx63(Triangle, {
+            children: /* @__PURE__ */ jsx73(Triangle, {
               rotated: true
             })
           })
@@ -13376,12 +13472,20 @@ var Counter = ({
     ]
   });
 };
+var Input = React52.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx83("input", {
+    ref,
+    className: cn("w-full 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 PlanePaperIcon = (props) => {
-  return /* @__PURE__ */ jsx73("svg", {
+  return /* @__PURE__ */ jsx93("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     viewBox: "0 0 576 512",
-    children: /* @__PURE__ */ jsx73("path", {
+    children: /* @__PURE__ */ jsx93("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"
     })
@@ -13401,18 +13505,18 @@ function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForD
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React42.createContext(defaultContext);
+    const BaseContext = React62.createContext(defaultContext);
     const index = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     function Provider(props) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName][index] || BaseContext;
-      const value = React42.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ jsx83(Context.Provider, { value, children });
+      const value = React62.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ jsx103(Context.Provider, { value, children });
     }
     function useContext210(consumerName, scope) {
       const Context = scope?.[scopeName][index] || BaseContext;
-      const context = React42.useContext(Context);
+      const context = React62.useContext(Context);
       if (context)
         return context;
       if (defaultContext !== undefined)
@@ -13424,11 +13528,11 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React42.createContext(defaultContext);
+      return React62.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React42.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
+      return React62.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
     };
   };
   createScope.scopeName = scopeName;
@@ -13449,7 +13553,7 @@ function composeContextScopes(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React42.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React62.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -13466,45 +13570,45 @@ function composeRefs(...refs) {
   return (node) => refs.forEach((ref) => setRef(ref, node));
 }
 function useComposedRefs(...refs) {
-  return React52.useCallback(composeRefs(...refs), refs);
+  return React72.useCallback(composeRefs(...refs), refs);
 }
-var Slot = React62.forwardRef((props, forwardedRef) => {
+var Slot = React8.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  const childrenArray = React62.Children.toArray(children);
+  const childrenArray = React8.Children.toArray(children);
   const slottable = childrenArray.find(isSlottable);
   if (slottable) {
     const newElement = slottable.props.children;
     const newChildren = childrenArray.map((child) => {
       if (child === slottable) {
-        if (React62.Children.count(newElement) > 1)
-          return React62.Children.only(null);
-        return React62.isValidElement(newElement) ? newElement.props.children : null;
+        if (React8.Children.count(newElement) > 1)
+          return React8.Children.only(null);
+        return React8.isValidElement(newElement) ? newElement.props.children : null;
       } else {
         return child;
       }
     });
-    return /* @__PURE__ */ jsx93(SlotClone, { ...slotProps, ref: forwardedRef, children: React62.isValidElement(newElement) ? React62.cloneElement(newElement, undefined, newChildren) : null });
+    return /* @__PURE__ */ jsx112(SlotClone, { ...slotProps, ref: forwardedRef, children: React8.isValidElement(newElement) ? React8.cloneElement(newElement, undefined, newChildren) : null });
   }
-  return /* @__PURE__ */ jsx93(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  return /* @__PURE__ */ jsx112(SlotClone, { ...slotProps, ref: forwardedRef, children });
 });
 Slot.displayName = "Slot";
-var SlotClone = React62.forwardRef((props, forwardedRef) => {
+var SlotClone = React8.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  if (React62.isValidElement(children)) {
+  if (React8.isValidElement(children)) {
     const childrenRef = getElementRef(children);
-    return React62.cloneElement(children, {
+    return React8.cloneElement(children, {
       ...mergeProps(slotProps, children.props),
       ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
     });
   }
-  return React62.Children.count(children) > 1 ? React62.Children.only(null) : null;
+  return React8.Children.count(children) > 1 ? React8.Children.only(null) : null;
 });
 SlotClone.displayName = "SlotClone";
 var Slottable = ({ children }) => {
-  return /* @__PURE__ */ jsx93(Fragment2, { children });
+  return /* @__PURE__ */ jsx112(Fragment2, { children });
 };
 function isSlottable(child) {
-  return React62.isValidElement(child) && child.type === Slottable;
+  return React8.isValidElement(child) && child.type === Slottable;
 }
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -13548,36 +13652,36 @@ function createCollection(name) {
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React7.useRef(null);
-    const itemMap = React7.useRef(/* @__PURE__ */ new Map).current;
-    return /* @__PURE__ */ jsx103(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    const ref = React9.useRef(null);
+    const itemMap = React9.useRef(/* @__PURE__ */ new Map).current;
+    return /* @__PURE__ */ jsx122(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
-  const CollectionSlot = React7.forwardRef((props, forwardedRef) => {
+  const CollectionSlot = React9.forwardRef((props, forwardedRef) => {
     const { scope, children } = props;
     const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
     const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-    return /* @__PURE__ */ jsx103(Slot, { ref: composedRefs, children });
+    return /* @__PURE__ */ jsx122(Slot, { ref: composedRefs, children });
   });
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
-  const CollectionItemSlot = React7.forwardRef((props, forwardedRef) => {
+  const CollectionItemSlot = React9.forwardRef((props, forwardedRef) => {
     const { scope, children, ...itemData } = props;
-    const ref = React7.useRef(null);
+    const ref = React9.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-    React7.useEffect(() => {
+    React9.useEffect(() => {
       context.itemMap.set(ref, { ref, ...itemData });
       return () => void context.itemMap.delete(ref);
     });
-    return /* @__PURE__ */ jsx103(Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+    return /* @__PURE__ */ jsx122(Slot, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
   });
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React7.useCallback(() => {
+    const getItems = React9.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode)
         return [];
@@ -13594,9 +13698,9 @@ function createCollection(name) {
     createCollectionScope
   ];
 }
-var DirectionContext = React8.createContext(undefined);
+var DirectionContext = React10.createContext(undefined);
 function useDirection(localDir) {
-  const globalDir = React8.useContext(DirectionContext);
+  const globalDir = React10.useContext(DirectionContext);
   return localDir || globalDir || "ltr";
 }
 var NODES = [
@@ -13618,13 +13722,13 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Node2 = React9.forwardRef((props, forwardedRef) => {
+  const Node2 = React112.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot : node;
     if (typeof window !== "undefined") {
       window[Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ jsx122(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx142(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
@@ -13634,15 +13738,15 @@ function dispatchDiscreteCustomEvent(target, event) {
     ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 function useCallbackRef(callback) {
-  const callbackRef = React102.useRef(callback);
-  React102.useEffect(() => {
+  const callbackRef = React122.useRef(callback);
+  React122.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React102.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React122.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
-  React112.useEffect(() => {
+  React13.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onEscapeKeyDown(event);
@@ -13657,12 +13761,12 @@ var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
 var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
 var originalBodyPointerEvents;
-var DismissableLayerContext = React12.createContext({
+var DismissableLayerContext = React14.createContext({
   layers: /* @__PURE__ */ new Set,
   layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set,
   branches: /* @__PURE__ */ new Set
 });
-var DismissableLayer = React12.forwardRef((props, forwardedRef) => {
+var DismissableLayer = React14.forwardRef((props, forwardedRef) => {
   const {
     disableOutsidePointerEvents = false,
     onEscapeKeyDown,
@@ -13672,10 +13776,10 @@ var DismissableLayer = React12.forwardRef((props, forwardedRef) => {
     onDismiss,
     ...layerProps
   } = props;
-  const context = React12.useContext(DismissableLayerContext);
-  const [node, setNode] = React12.useState(null);
+  const context = React14.useContext(DismissableLayerContext);
+  const [node, setNode] = React14.useState(null);
   const ownerDocument = node?.ownerDocument ?? globalThis?.document;
-  const [, force] = React12.useState({});
+  const [, force] = React14.useState({});
   const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
   const layers = Array.from(context.layers);
   const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
@@ -13713,7 +13817,7 @@ var DismissableLayer = React12.forwardRef((props, forwardedRef) => {
       onDismiss();
     }
   }, ownerDocument);
-  React12.useEffect(() => {
+  React14.useEffect(() => {
     if (!node)
       return;
     if (disableOutsidePointerEvents) {
@@ -13731,7 +13835,7 @@ var DismissableLayer = React12.forwardRef((props, forwardedRef) => {
       }
     };
   }, [node, ownerDocument, disableOutsidePointerEvents, context]);
-  React12.useEffect(() => {
+  React14.useEffect(() => {
     return () => {
       if (!node)
         return;
@@ -13740,12 +13844,12 @@ var DismissableLayer = React12.forwardRef((props, forwardedRef) => {
       dispatchUpdate();
     };
   }, [node, context]);
-  React12.useEffect(() => {
+  React14.useEffect(() => {
     const handleUpdate = () => force({});
     document.addEventListener(CONTEXT_UPDATE, handleUpdate);
     return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
   }, []);
-  return /* @__PURE__ */ jsx132(Primitive.div, {
+  return /* @__PURE__ */ jsx152(Primitive.div, {
     ...layerProps,
     ref: composedRefs,
     style: {
@@ -13759,11 +13863,11 @@ var DismissableLayer = React12.forwardRef((props, forwardedRef) => {
 });
 DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
 var BRANCH_NAME = "DismissableLayerBranch";
-var DismissableLayerBranch = React12.forwardRef((props, forwardedRef) => {
-  const context = React12.useContext(DismissableLayerContext);
-  const ref = React12.useRef(null);
+var DismissableLayerBranch = React14.forwardRef((props, forwardedRef) => {
+  const context = React14.useContext(DismissableLayerContext);
+  const ref = React14.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
-  React12.useEffect(() => {
+  React14.useEffect(() => {
     const node = ref.current;
     if (node) {
       context.branches.add(node);
@@ -13772,14 +13876,14 @@ var DismissableLayerBranch = React12.forwardRef((props, forwardedRef) => {
       };
     }
   }, [context.branches]);
-  return /* @__PURE__ */ jsx132(Primitive.div, { ...props, ref: composedRefs });
+  return /* @__PURE__ */ jsx152(Primitive.div, { ...props, ref: composedRefs });
 });
 DismissableLayerBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
   const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
-  const isPointerInsideReactTreeRef = React12.useRef(false);
-  const handleClickRef = React12.useRef(() => {});
-  React12.useEffect(() => {
+  const isPointerInsideReactTreeRef = React14.useRef(false);
+  const handleClickRef = React14.useRef(() => {});
+  React14.useEffect(() => {
     const handlePointerDown = (event) => {
       if (event.target && !isPointerInsideReactTreeRef.current) {
         let handleAndDispatchPointerDownOutsideEvent2 = function() {
@@ -13814,8 +13918,8 @@ function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?
 }
 function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
   const handleFocusOutside = useCallbackRef(onFocusOutside);
-  const isFocusInsideReactTreeRef = React12.useRef(false);
-  React12.useEffect(() => {
+  const isFocusInsideReactTreeRef = React14.useRef(false);
+  React14.useEffect(() => {
     const handleFocus = (event) => {
       if (event.target && !isFocusInsideReactTreeRef.current) {
         const eventDetail = { originalEvent: event };
@@ -13849,7 +13953,7 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
 }
 var count = 0;
 function useFocusGuards() {
-  React13.useEffect(() => {
+  React152.useEffect(() => {
     const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
     document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
     document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
@@ -13873,7 +13977,7 @@ var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
 var FOCUS_SCOPE_NAME = "FocusScope";
-var FocusScope = React142.forwardRef((props, forwardedRef) => {
+var FocusScope = React162.forwardRef((props, forwardedRef) => {
   const {
     loop = false,
     trapped = false,
@@ -13881,12 +13985,12 @@ var FocusScope = React142.forwardRef((props, forwardedRef) => {
     onUnmountAutoFocus: onUnmountAutoFocusProp,
     ...scopeProps
   } = props;
-  const [container22, setContainer] = React142.useState(null);
+  const [container22, setContainer] = React162.useState(null);
   const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
   const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
-  const lastFocusedElementRef = React142.useRef(null);
+  const lastFocusedElementRef = React162.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node));
-  const focusScope = React142.useRef({
+  const focusScope = React162.useRef({
     paused: false,
     pause() {
       this.paused = true;
@@ -13895,7 +13999,7 @@ var FocusScope = React142.forwardRef((props, forwardedRef) => {
       this.paused = false;
     }
   }).current;
-  React142.useEffect(() => {
+  React162.useEffect(() => {
     if (trapped) {
       let handleFocusIn2 = function(event) {
         if (focusScope.paused || !container22)
@@ -13937,7 +14041,7 @@ var FocusScope = React142.forwardRef((props, forwardedRef) => {
       };
     }
   }, [trapped, container22, focusScope.paused]);
-  React142.useEffect(() => {
+  React162.useEffect(() => {
     if (container22) {
       focusScopesStack.add(focusScope);
       const previouslyFocusedElement = document.activeElement;
@@ -13968,7 +14072,7 @@ var FocusScope = React142.forwardRef((props, forwardedRef) => {
       };
     }
   }, [container22, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
-  const handleKeyDown = React142.useCallback((event) => {
+  const handleKeyDown = React162.useCallback((event) => {
     if (!loop && !trapped)
       return;
     if (focusScope.paused)
@@ -13995,7 +14099,7 @@ var FocusScope = React142.forwardRef((props, forwardedRef) => {
       }
     }
   }, [loop, trapped, focusScope.paused]);
-  return /* @__PURE__ */ jsx142(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
+  return /* @__PURE__ */ jsx162(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
 });
 FocusScope.displayName = FOCUS_SCOPE_NAME;
 function focusFirst(candidates, { select = false } = {}) {
@@ -14084,13 +14188,13 @@ function arrayRemove(array, item) {
 function removeLinks(items) {
   return items.filter((item) => item.tagName !== "A");
 }
-var useLayoutEffect22 = Boolean(globalThis?.document) ? React152.useLayoutEffect : () => {};
-var useReactId = React162["useId".toString()] || (() => {
+var useLayoutEffect22 = Boolean(globalThis?.document) ? React172.useLayoutEffect : () => {};
+var useReactId = React18["useId".toString()] || (() => {
   return;
 });
 var count2 = 0;
 function useId(deterministicId) {
-  const [id, setId] = React162.useState(useReactId());
+  const [id, setId] = React18.useState(useReactId());
   useLayoutEffect22(() => {
     if (!deterministicId)
       setId((reactId) => reactId ?? String(count2++));
@@ -15608,7 +15712,7 @@ var computePosition2 = (reference, floating, options) => {
     platform: platformWithCache
   });
 };
-var index = typeof document !== "undefined" ? useLayoutEffect32 : useEffect72;
+var index = typeof document !== "undefined" ? useLayoutEffect32 : useEffect82;
 function deepEqual(a, b) {
   if (a === b) {
     return true;
@@ -15669,7 +15773,7 @@ function roundByDPR(element, value) {
   return Math.round(value * dpr) / dpr;
 }
 function useLatestRef(value) {
-  const ref = React172.useRef(value);
+  const ref = React19.useRef(value);
   index(() => {
     ref.current = value;
   });
@@ -15692,7 +15796,7 @@ function useFloating(options) {
     whileElementsMounted,
     open
   } = options;
-  const [data, setData] = React172.useState({
+  const [data, setData] = React19.useState({
     x: 0,
     y: 0,
     strategy,
@@ -15700,19 +15804,19 @@ function useFloating(options) {
     middlewareData: {},
     isPositioned: false
   });
-  const [latestMiddleware, setLatestMiddleware] = React172.useState(middleware);
+  const [latestMiddleware, setLatestMiddleware] = React19.useState(middleware);
   if (!deepEqual(latestMiddleware, middleware)) {
     setLatestMiddleware(middleware);
   }
-  const [_reference, _setReference] = React172.useState(null);
-  const [_floating, _setFloating] = React172.useState(null);
-  const setReference = React172.useCallback((node) => {
+  const [_reference, _setReference] = React19.useState(null);
+  const [_floating, _setFloating] = React19.useState(null);
+  const setReference = React19.useCallback((node) => {
     if (node !== referenceRef.current) {
       referenceRef.current = node;
       _setReference(node);
     }
   }, []);
-  const setFloating = React172.useCallback((node) => {
+  const setFloating = React19.useCallback((node) => {
     if (node !== floatingRef.current) {
       floatingRef.current = node;
       _setFloating(node);
@@ -15720,13 +15824,13 @@ function useFloating(options) {
   }, []);
   const referenceEl = externalReference || _reference;
   const floatingEl = externalFloating || _floating;
-  const referenceRef = React172.useRef(null);
-  const floatingRef = React172.useRef(null);
-  const dataRef = React172.useRef(data);
+  const referenceRef = React19.useRef(null);
+  const floatingRef = React19.useRef(null);
+  const dataRef = React19.useRef(data);
   const hasWhileElementsMounted = whileElementsMounted != null;
   const whileElementsMountedRef = useLatestRef(whileElementsMounted);
   const platformRef = useLatestRef(platform2);
-  const update = React172.useCallback(() => {
+  const update = React19.useCallback(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
     }
@@ -15760,7 +15864,7 @@ function useFloating(options) {
       }));
     }
   }, [open]);
-  const isMountedRef = React172.useRef(false);
+  const isMountedRef = React19.useRef(false);
   index(() => {
     isMountedRef.current = true;
     return () => {
@@ -15779,17 +15883,17 @@ function useFloating(options) {
       update();
     }
   }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
-  const refs = React172.useMemo(() => ({
+  const refs = React19.useMemo(() => ({
     reference: referenceRef,
     floating: floatingRef,
     setReference,
     setFloating
   }), [setReference, setFloating]);
-  const elements = React172.useMemo(() => ({
+  const elements = React19.useMemo(() => ({
     reference: referenceEl,
     floating: floatingEl
   }), [referenceEl, floatingEl]);
-  const floatingStyles = React172.useMemo(() => {
+  const floatingStyles = React19.useMemo(() => {
     const initialStyles = {
       position: strategy,
       left: 0,
@@ -15815,7 +15919,7 @@ function useFloating(options) {
       top: y
     };
   }, [strategy, transform, elements.floating, data.x, data.y]);
-  return React172.useMemo(() => ({
+  return React19.useMemo(() => ({
     ...data,
     update,
     refs,
@@ -15883,22 +15987,22 @@ var arrow3 = (options, deps) => ({
   options: [options, deps]
 });
 var NAME = "Arrow";
-var Arrow = React18.forwardRef((props, forwardedRef) => {
+var Arrow = React20.forwardRef((props, forwardedRef) => {
   const { children, width = 10, height = 5, ...arrowProps } = props;
-  return /* @__PURE__ */ jsx152(Primitive.svg, {
+  return /* @__PURE__ */ jsx172(Primitive.svg, {
     ...arrowProps,
     ref: forwardedRef,
     width,
     height,
     viewBox: "0 0 30 10",
     preserveAspectRatio: "none",
-    children: props.asChild ? children : /* @__PURE__ */ jsx152("polygon", { points: "0,0 30,0 15,10" })
+    children: props.asChild ? children : /* @__PURE__ */ jsx172("polygon", { points: "0,0 30,0 15,10" })
   });
 });
 Arrow.displayName = NAME;
 var Root2 = Arrow;
 function useSize(element) {
-  const [size4, setSize] = React19.useState(undefined);
+  const [size4, setSize] = React212.useState(undefined);
   useLayoutEffect22(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
@@ -15936,25 +16040,25 @@ var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props) => {
   const { __scopePopper, children } = props;
-  const [anchor, setAnchor] = React20.useState(null);
-  return /* @__PURE__ */ jsx162(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
+  const [anchor, setAnchor] = React22.useState(null);
+  return /* @__PURE__ */ jsx182(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
 };
 Popper.displayName = POPPER_NAME;
 var ANCHOR_NAME = "PopperAnchor";
-var PopperAnchor = React20.forwardRef((props, forwardedRef) => {
+var PopperAnchor = React22.forwardRef((props, forwardedRef) => {
   const { __scopePopper, virtualRef, ...anchorProps } = props;
   const context = usePopperContext(ANCHOR_NAME, __scopePopper);
-  const ref = React20.useRef(null);
+  const ref = React22.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
-  React20.useEffect(() => {
+  React22.useEffect(() => {
     context.onAnchorChange(virtualRef?.current || ref.current);
   });
-  return virtualRef ? null : /* @__PURE__ */ jsx162(Primitive.div, { ...anchorProps, ref: composedRefs });
+  return virtualRef ? null : /* @__PURE__ */ jsx182(Primitive.div, { ...anchorProps, ref: composedRefs });
 });
 PopperAnchor.displayName = ANCHOR_NAME;
 var CONTENT_NAME = "PopperContent";
 var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME);
-var PopperContent = React20.forwardRef((props, forwardedRef) => {
+var PopperContent = React22.forwardRef((props, forwardedRef) => {
   const {
     __scopePopper,
     side = "bottom",
@@ -15972,9 +16076,9 @@ var PopperContent = React20.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = usePopperContext(CONTENT_NAME, __scopePopper);
-  const [content, setContent] = React20.useState(null);
+  const [content, setContent] = React22.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
-  const [arrow4, setArrow] = React20.useState(null);
+  const [arrow4, setArrow] = React22.useState(null);
   const arrowSize = useSize(arrow4);
   const arrowWidth = arrowSize?.width ?? 0;
   const arrowHeight = arrowSize?.height ?? 0;
@@ -16034,12 +16138,12 @@ var PopperContent = React20.forwardRef((props, forwardedRef) => {
   const arrowX = middlewareData.arrow?.x;
   const arrowY = middlewareData.arrow?.y;
   const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
-  const [contentZIndex, setContentZIndex] = React20.useState();
+  const [contentZIndex, setContentZIndex] = React22.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  return /* @__PURE__ */ jsx162("div", {
+  return /* @__PURE__ */ jsx182("div", {
     ref: refs.setFloating,
     "data-radix-popper-content-wrapper": "",
     style: {
@@ -16057,14 +16161,14 @@ var PopperContent = React20.forwardRef((props, forwardedRef) => {
       }
     },
     dir: props.dir,
-    children: /* @__PURE__ */ jsx162(PopperContentProvider, {
+    children: /* @__PURE__ */ jsx182(PopperContentProvider, {
       scope: __scopePopper,
       placedSide,
       onArrowChange: setArrow,
       arrowX,
       arrowY,
       shouldHideArrow: cannotCenterArrow,
-      children: /* @__PURE__ */ jsx162(Primitive.div, {
+      children: /* @__PURE__ */ jsx182(Primitive.div, {
         "data-side": placedSide,
         "data-align": placedAlign,
         ...contentProps,
@@ -16085,11 +16189,11 @@ var OPPOSITE_SIDE = {
   bottom: "top",
   left: "right"
 };
-var PopperArrow = React20.forwardRef(function PopperArrow2(props, forwardedRef) {
+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__ */ jsx162("span", {
+  return /* @__PURE__ */ jsx182("span", {
     ref: contentContext.onArrowChange,
     style: {
       position: "absolute",
@@ -16110,7 +16214,7 @@ var PopperArrow = React20.forwardRef(function PopperArrow2(props, forwardedRef)
       }[contentContext.placedSide],
       visibility: contentContext.shouldHideArrow ? "hidden" : undefined
     },
-    children: /* @__PURE__ */ jsx162(Root2, {
+    children: /* @__PURE__ */ jsx182(Root2, {
       ...arrowProps,
       ref: forwardedRef,
       style: {
@@ -16164,12 +16268,12 @@ var Anchor = PopperAnchor;
 var Content = PopperContent;
 var Arrow2 = PopperArrow;
 var PORTAL_NAME = "Portal";
-var Portal = React212.forwardRef((props, forwardedRef) => {
+var Portal = React23.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
-  const [mounted, setMounted] = React212.useState(false);
+  const [mounted, setMounted] = React23.useState(false);
   useLayoutEffect22(() => setMounted(true), []);
   const container22 = containerProp || mounted && globalThis?.document?.body;
-  return container22 ? ReactDOM3.createPortal(/* @__PURE__ */ jsx172(Primitive.div, { ...portalProps, ref: forwardedRef }), container22) : null;
+  return container22 ? ReactDOM3.createPortal(/* @__PURE__ */ jsx192(Primitive.div, { ...portalProps, ref: forwardedRef }), container22) : null;
 });
 Portal.displayName = PORTAL_NAME;
 function useControllableState({
@@ -16181,7 +16285,7 @@ function useControllableState({
   const isControlled = prop !== undefined;
   const value = isControlled ? prop : uncontrolledProp;
   const handleChange = useCallbackRef(onChange);
-  const setValue = React22.useCallback((nextValue) => {
+  const setValue = React24.useCallback((nextValue) => {
     if (isControlled) {
       const setter = nextValue;
       const value2 = typeof nextValue === "function" ? setter(prop) : nextValue;
@@ -16197,11 +16301,11 @@ function useUncontrolledState({
   defaultProp,
   onChange
 }) {
-  const uncontrolledState = React22.useState(defaultProp);
+  const uncontrolledState = React24.useState(defaultProp);
   const [value] = uncontrolledState;
-  const prevValueRef = React22.useRef(value);
+  const prevValueRef = React24.useRef(value);
   const handleChange = useCallbackRef(onChange);
-  React22.useEffect(() => {
+  React24.useEffect(() => {
     if (prevValueRef.current !== value) {
       handleChange(value);
       prevValueRef.current = value;
@@ -16210,8 +16314,8 @@ function useUncontrolledState({
   return uncontrolledState;
 }
 function usePrevious(value) {
-  const ref = React23.useRef({ value, previous: value });
-  return React23.useMemo(() => {
+  const ref = React252.useRef({ value, previous: value });
+  return React252.useMemo(() => {
     if (ref.current.value !== value) {
       ref.current.previous = ref.current.value;
       ref.current.value = value;
@@ -16220,8 +16324,8 @@ function usePrevious(value) {
   }, [value]);
 }
 var NAME2 = "VisuallyHidden";
-var VisuallyHidden = React24.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx182(Primitive.span, {
+var VisuallyHidden = React26.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx202(Primitive.span, {
     ...props,
     ref: forwardedRef,
     style: {
@@ -16428,7 +16532,7 @@ function useCallbackRef2(initialValue, callback) {
   ref.callback = callback;
   return ref.facade;
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React252.useLayoutEffect : React252.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React272.useLayoutEffect : React272.useEffect;
 var currentValues = new WeakMap;
 function useMergeRefs(refs, defaultValue) {
   var callbackRef = useCallbackRef2(defaultValue || null, function(newValue) {
@@ -16550,7 +16654,7 @@ var SideCar = function(_a) {
   if (!Target) {
     throw new Error("Sidecar medium not found");
   }
-  return React26.createElement(Target, __assign({}, rest));
+  return React28.createElement(Target, __assign({}, rest));
 };
 SideCar.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -16561,9 +16665,9 @@ var effectCar = createSidecarMedium();
 var nothing = function() {
   return;
 };
-var RemoveScroll = React272.forwardRef(function(props, parentRef) {
-  var ref = React272.useRef(null);
-  var _a = React272.useState({
+var RemoveScroll = React29.forwardRef(function(props, parentRef) {
+  var ref = React29.useRef(null);
+  var _a = React29.useState({
     onScrollCapture: nothing,
     onWheelCapture: nothing,
     onTouchMoveCapture: nothing
@@ -16572,7 +16676,7 @@ var RemoveScroll = React272.forwardRef(function(props, parentRef) {
   var SideCar2 = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = __assign(__assign({}, rest), callbacks);
-  return React272.createElement(React272.Fragment, null, enabled && React272.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React272.cloneElement(React272.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React272.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
+  return React29.createElement(React29.Fragment, null, enabled && React29.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React29.cloneElement(React29.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React29.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
 });
 RemoveScroll.defaultProps = {
   enabled: true,
@@ -16640,7 +16744,7 @@ var stylesheetSingleton = function() {
 var styleHookSingleton = function() {
   var sheet = stylesheetSingleton();
   return function(styles, isDynamic) {
-    React28.useEffect(function() {
+    React30.useEffect(function() {
       sheet.add(styles);
       return function() {
         sheet.remove();
@@ -16745,7 +16849,7 @@ var getCurrentUseCounter = function() {
   return isFinite(counter) ? counter : 0;
 };
 var useLockAttribute = function() {
-  React29.useEffect(function() {
+  React312.useEffect(function() {
     document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
     return function() {
       var newCounter = getCurrentUseCounter() - 1;
@@ -16760,10 +16864,10 @@ var useLockAttribute = function() {
 var RemoveScrollBar = function(_a) {
   var { noRelative, noImportant, gapMode: _b } = _a, gapMode = _b === undefined ? "margin" : _b;
   useLockAttribute();
-  var gap = React29.useMemo(function() {
+  var gap = React312.useMemo(function() {
     return getGapWidth(gapMode);
   }, [gapMode]);
-  return React29.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
+  return React312.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
 };
 var passiveSupported = false;
 if (typeof window !== "undefined") {
@@ -16890,16 +16994,16 @@ var generateStyle = function(id) {
 var idCounter = 0;
 var lockStack = [];
 function RemoveScrollSideCar(props) {
-  var shouldPreventQueue = React30.useRef([]);
-  var touchStartRef = React30.useRef([0, 0]);
-  var activeAxis = React30.useRef();
-  var id = React30.useState(idCounter++)[0];
-  var Style2 = React30.useState(styleSingleton)[0];
-  var lastProps = React30.useRef(props);
-  React30.useEffect(function() {
+  var shouldPreventQueue = React322.useRef([]);
+  var touchStartRef = React322.useRef([0, 0]);
+  var activeAxis = React322.useRef();
+  var id = React322.useState(idCounter++)[0];
+  var Style2 = React322.useState(styleSingleton)[0];
+  var lastProps = React322.useRef(props);
+  React322.useEffect(function() {
     lastProps.current = props;
   }, [props]);
-  React30.useEffect(function() {
+  React322.useEffect(function() {
     if (props.inert) {
       document.body.classList.add("block-interactivity-".concat(id));
       var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
@@ -16915,7 +17019,7 @@ function RemoveScrollSideCar(props) {
     }
     return;
   }, [props.inert, props.lockRef.current, props.shards]);
-  var shouldCancelEvent = React30.useCallback(function(event, parent) {
+  var shouldCancelEvent = React322.useCallback(function(event, parent) {
     if ("touches" in event && event.touches.length === 2) {
       return !lastProps.current.allowPinchZoom;
     }
@@ -16951,7 +17055,7 @@ function RemoveScrollSideCar(props) {
     var cancelingAxis = activeAxis.current || currentAxis;
     return handleScroll(cancelingAxis, parent, event, cancelingAxis === "h" ? deltaX : deltaY, true);
   }, []);
-  var shouldPrevent = React30.useCallback(function(_event) {
+  var shouldPrevent = React322.useCallback(function(_event) {
     var event = _event;
     if (!lockStack.length || lockStack[lockStack.length - 1] !== Style2) {
       return;
@@ -16978,7 +17082,7 @@ function RemoveScrollSideCar(props) {
       }
     }
   }, []);
-  var shouldCancel = React30.useCallback(function(name, delta, target, should) {
+  var shouldCancel = React322.useCallback(function(name, delta, target, should) {
     var event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
     shouldPreventQueue.current.push(event);
     setTimeout(function() {
@@ -16987,17 +17091,17 @@ function RemoveScrollSideCar(props) {
       });
     }, 1);
   }, []);
-  var scrollTouchStart = React30.useCallback(function(event) {
+  var scrollTouchStart = React322.useCallback(function(event) {
     touchStartRef.current = getTouchXY(event);
     activeAxis.current = undefined;
   }, []);
-  var scrollWheel = React30.useCallback(function(event) {
+  var scrollWheel = React322.useCallback(function(event) {
     shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  var scrollTouchMove = React30.useCallback(function(event) {
+  var scrollTouchMove = React322.useCallback(function(event) {
     shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  React30.useEffect(function() {
+  React322.useEffect(function() {
     lockStack.push(Style2);
     props.setCallbacks({
       onScrollCapture: scrollWheel,
@@ -17017,7 +17121,7 @@ function RemoveScrollSideCar(props) {
     };
   }, []);
   var { removeScrollBar, inert } = props;
-  return React30.createElement(React30.Fragment, null, inert ? React30.createElement(Style2, { styles: generateStyle(id) }) : null, removeScrollBar ? React30.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null);
+  return React322.createElement(React322.Fragment, null, inert ? React322.createElement(Style2, { styles: generateStyle(id) }) : null, removeScrollBar ? React322.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null);
 }
 function getOutermostShadowParent(node) {
   var shadowParent = null;
@@ -17031,8 +17135,8 @@ function getOutermostShadowParent(node) {
   return shadowParent;
 }
 var sidecar_default = exportSidecar(effectCar, RemoveScrollSideCar);
-var ReactRemoveScroll = React312.forwardRef(function(props, ref) {
-  return React312.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
+var ReactRemoveScroll = React332.forwardRef(function(props, ref) {
+  return React332.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
 });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
@@ -17064,9 +17168,9 @@ var Select = (props) => {
     required
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  const [trigger, setTrigger] = React322.useState(null);
-  const [valueNode, setValueNode] = React322.useState(null);
-  const [valueNodeHasChildren, setValueNodeHasChildren] = React322.useState(false);
+  const [trigger, setTrigger] = React34.useState(null);
+  const [valueNode, setValueNode] = React34.useState(null);
+  const [valueNodeHasChildren, setValueNodeHasChildren] = React34.useState(false);
   const direction = useDirection(dir);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
@@ -17078,11 +17182,11 @@ var Select = (props) => {
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const triggerPointerDownPosRef = React322.useRef(null);
+  const triggerPointerDownPosRef = React34.useRef(null);
   const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
-  const [nativeOptionsSet, setNativeOptionsSet] = React322.useState(/* @__PURE__ */ new Set);
+  const [nativeOptionsSet, setNativeOptionsSet] = React34.useState(/* @__PURE__ */ new Set);
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
-  return /* @__PURE__ */ jsx192(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs32(SelectProvider, {
+  return /* @__PURE__ */ jsx212(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs4(SelectProvider, {
     required,
     scope: __scopeSelect,
     trigger,
@@ -17100,12 +17204,12 @@ var Select = (props) => {
     triggerPointerDownPosRef,
     disabled,
     children: [
-      /* @__PURE__ */ jsx192(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx192(SelectNativeOptionsProvider, {
+      /* @__PURE__ */ jsx212(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx212(SelectNativeOptionsProvider, {
         scope: props.__scopeSelect,
-        onNativeOptionAdd: React322.useCallback((option) => {
+        onNativeOptionAdd: React34.useCallback((option) => {
           setNativeOptionsSet((prev) => new Set(prev).add(option));
         }, []),
-        onNativeOptionRemove: React322.useCallback((option) => {
+        onNativeOptionRemove: React34.useCallback((option) => {
           setNativeOptionsSet((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
@@ -17114,7 +17218,7 @@ var Select = (props) => {
         }, []),
         children
       }) }),
-      isFormControl ? /* @__PURE__ */ jsxs32(BubbleSelect, {
+      isFormControl ? /* @__PURE__ */ jsxs4(BubbleSelect, {
         "aria-hidden": true,
         required,
         tabIndex: -1,
@@ -17124,7 +17228,7 @@ var Select = (props) => {
         onChange: (event) => setValue(event.target.value),
         disabled,
         children: [
-          value === undefined ? /* @__PURE__ */ jsx192("option", { value: "" }) : null,
+          value === undefined ? /* @__PURE__ */ jsx212("option", { value: "" }) : null,
           Array.from(nativeOptionsSet)
         ]
       }, nativeSelectKey) : null
@@ -17133,7 +17237,7 @@ var Select = (props) => {
 };
 Select.displayName = SELECT_NAME;
 var TRIGGER_NAME = "SelectTrigger";
-var SelectTrigger = React322.forwardRef((props, forwardedRef) => {
+var SelectTrigger = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, disabled = false, ...triggerProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
@@ -17154,7 +17258,7 @@ var SelectTrigger = React322.forwardRef((props, forwardedRef) => {
       resetTypeahead();
     }
   };
-  return /* @__PURE__ */ jsx192(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx192(Primitive.button, {
+  return /* @__PURE__ */ jsx212(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx212(Primitive.button, {
     type: "button",
     role: "combobox",
     "aria-controls": context.contentId,
@@ -17201,7 +17305,7 @@ var SelectTrigger = React322.forwardRef((props, forwardedRef) => {
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 var VALUE_NAME = "SelectValue";
-var SelectValue = React322.forwardRef((props, forwardedRef) => {
+var SelectValue = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
   const context = useSelectContext(VALUE_NAME, __scopeSelect);
   const { onValueNodeHasChildrenChange } = context;
@@ -17210,43 +17314,43 @@ var SelectValue = React322.forwardRef((props, forwardedRef) => {
   useLayoutEffect22(() => {
     onValueNodeHasChildrenChange(hasChildren);
   }, [onValueNodeHasChildrenChange, hasChildren]);
-  return /* @__PURE__ */ jsx192(Primitive.span, {
+  return /* @__PURE__ */ jsx212(Primitive.span, {
     ...valueProps,
     ref: composedRefs,
     style: { pointerEvents: "none" },
-    children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx192(Fragment52, { children: placeholder }) : children
+    children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx212(Fragment52, { children: placeholder }) : children
   });
 });
 SelectValue.displayName = VALUE_NAME;
 var ICON_NAME = "SelectIcon";
-var SelectIcon = React322.forwardRef((props, forwardedRef) => {
+var SelectIcon = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, children, ...iconProps } = props;
-  return /* @__PURE__ */ jsx192(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
+  return /* @__PURE__ */ jsx212(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
 });
 SelectIcon.displayName = ICON_NAME;
 var PORTAL_NAME2 = "SelectPortal";
 var SelectPortal = (props) => {
-  return /* @__PURE__ */ jsx192(Portal, { asChild: true, ...props });
+  return /* @__PURE__ */ jsx212(Portal, { asChild: true, ...props });
 };
 SelectPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "SelectContent";
-var SelectContent = React322.forwardRef((props, forwardedRef) => {
+var SelectContent = React34.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(CONTENT_NAME2, props.__scopeSelect);
-  const [fragment, setFragment] = React322.useState();
+  const [fragment, setFragment] = React34.useState();
   useLayoutEffect22(() => {
     setFragment(new DocumentFragment);
   }, []);
   if (!context.open) {
     const frag = fragment;
-    return frag ? ReactDOM4.createPortal(/* @__PURE__ */ jsx192(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx192(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx192("div", { children: props.children }) }) }), frag) : null;
+    return frag ? ReactDOM4.createPortal(/* @__PURE__ */ jsx212(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx212(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx212("div", { children: props.children }) }) }), frag) : null;
   }
-  return /* @__PURE__ */ jsx192(SelectContentImpl, { ...props, ref: forwardedRef });
+  return /* @__PURE__ */ jsx212(SelectContentImpl, { ...props, ref: forwardedRef });
 });
 SelectContent.displayName = CONTENT_NAME2;
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME2);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
-var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
+var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     position = "item-aligned",
@@ -17266,20 +17370,20 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
-  const [content, setContent] = React322.useState(null);
-  const [viewport, setViewport] = React322.useState(null);
+  const [content, setContent] = React34.useState(null);
+  const [viewport, setViewport] = React34.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
-  const [selectedItem, setSelectedItem] = React322.useState(null);
-  const [selectedItemText, setSelectedItemText] = React322.useState(null);
+  const [selectedItem, setSelectedItem] = React34.useState(null);
+  const [selectedItemText, setSelectedItemText] = React34.useState(null);
   const getItems = useCollection(__scopeSelect);
-  const [isPositioned, setIsPositioned] = React322.useState(false);
-  const firstValidItemFoundRef = React322.useRef(false);
-  React322.useEffect(() => {
+  const [isPositioned, setIsPositioned] = React34.useState(false);
+  const firstValidItemFoundRef = React34.useRef(false);
+  React34.useEffect(() => {
     if (content)
       return hideOthers(content);
   }, [content]);
   useFocusGuards();
-  const focusFirst2 = React322.useCallback((candidates) => {
+  const focusFirst2 = React34.useCallback((candidates) => {
     const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
     const [lastItem] = restItems.slice(-1);
     const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
@@ -17296,14 +17400,14 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
         return;
     }
   }, [getItems, viewport]);
-  const focusSelectedItem = React322.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
-  React322.useEffect(() => {
+  const focusSelectedItem = React34.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
+  React34.useEffect(() => {
     if (isPositioned) {
       focusSelectedItem();
     }
   }, [isPositioned, focusSelectedItem]);
   const { onOpenChange, triggerPointerDownPosRef } = context;
-  React322.useEffect(() => {
+  React34.useEffect(() => {
     if (content) {
       let pointerMoveDelta = { x: 0, y: 0 };
       const handlePointerMove = (event) => {
@@ -17333,7 +17437,7 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
       };
     }
   }, [content, onOpenChange, triggerPointerDownPosRef]);
-  React322.useEffect(() => {
+  React34.useEffect(() => {
     const close = () => onOpenChange(false);
     window.addEventListener("blur", close);
     window.addEventListener("resize", close);
@@ -17350,7 +17454,7 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
       setTimeout(() => nextItem.ref.current.focus());
     }
   });
-  const itemRefCallback = React322.useCallback((node, value, disabled) => {
+  const itemRefCallback = React34.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -17359,8 +17463,8 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
         firstValidItemFoundRef.current = true;
     }
   }, [context.value]);
-  const handleItemLeave = React322.useCallback(() => content?.focus(), [content]);
-  const itemTextRefCallback = React322.useCallback((node, value, disabled) => {
+  const handleItemLeave = React34.useCallback(() => content?.focus(), [content]);
+  const itemTextRefCallback = React34.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -17380,7 +17484,7 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
     hideWhenDetached,
     avoidCollisions
   } : {};
-  return /* @__PURE__ */ jsx192(SelectContentProvider, {
+  return /* @__PURE__ */ jsx212(SelectContentProvider, {
     scope: __scopeSelect,
     content,
     viewport,
@@ -17394,7 +17498,7 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
     position,
     isPositioned,
     searchRef,
-    children: /* @__PURE__ */ jsx192(Combination_default, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsx192(FocusScope, {
+    children: /* @__PURE__ */ jsx212(Combination_default, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsx212(FocusScope, {
       asChild: true,
       trapped: context.open,
       onMountAutoFocus: (event) => {
@@ -17404,14 +17508,14 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
         context.trigger?.focus({ preventScroll: true });
         event.preventDefault();
       }),
-      children: /* @__PURE__ */ jsx192(DismissableLayer, {
+      children: /* @__PURE__ */ jsx212(DismissableLayer, {
         asChild: true,
         disableOutsidePointerEvents: true,
         onEscapeKeyDown,
         onPointerDownOutside,
         onFocusOutside: (event) => event.preventDefault(),
         onDismiss: () => context.onOpenChange(false),
-        children: /* @__PURE__ */ jsx192(SelectPosition, {
+        children: /* @__PURE__ */ jsx212(SelectPosition, {
           role: "listbox",
           id: context.contentId,
           "data-state": context.open ? "open" : "closed",
@@ -17455,18 +17559,18 @@ var SelectContentImpl = React322.forwardRef((props, forwardedRef) => {
 });
 SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
-var SelectItemAlignedPosition = React322.forwardRef((props, forwardedRef) => {
+var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(CONTENT_NAME2, __scopeSelect);
-  const [contentWrapper, setContentWrapper] = React322.useState(null);
-  const [content, setContent] = React322.useState(null);
+  const [contentWrapper, setContentWrapper] = React34.useState(null);
+  const [content, setContent] = React34.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
   const getItems = useCollection(__scopeSelect);
-  const shouldExpandOnScrollRef = React322.useRef(false);
-  const shouldRepositionRef = React322.useRef(true);
+  const shouldExpandOnScrollRef = React34.useRef(false);
+  const shouldRepositionRef = React34.useRef(true);
   const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
-  const position = React322.useCallback(() => {
+  const position = React34.useCallback(() => {
     if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
       const triggerRect = context.trigger.getBoundingClientRect();
       const contentRect = content.getBoundingClientRect();
@@ -17547,24 +17651,24 @@ var SelectItemAlignedPosition = React322.forwardRef((props, forwardedRef) => {
     onPlaced
   ]);
   useLayoutEffect22(() => position(), [position]);
-  const [contentZIndex, setContentZIndex] = React322.useState();
+  const [contentZIndex, setContentZIndex] = React34.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  const handleScrollButtonChange = React322.useCallback((node) => {
+  const handleScrollButtonChange = React34.useCallback((node) => {
     if (node && shouldRepositionRef.current === true) {
       position();
       focusSelectedItem?.();
       shouldRepositionRef.current = false;
     }
   }, [position, focusSelectedItem]);
-  return /* @__PURE__ */ jsx192(SelectViewportProvider, {
+  return /* @__PURE__ */ jsx212(SelectViewportProvider, {
     scope: __scopeSelect,
     contentWrapper,
     shouldExpandOnScrollRef,
     onScrollButtonChange: handleScrollButtonChange,
-    children: /* @__PURE__ */ jsx192("div", {
+    children: /* @__PURE__ */ jsx212("div", {
       ref: setContentWrapper,
       style: {
         display: "flex",
@@ -17572,7 +17676,7 @@ var SelectItemAlignedPosition = React322.forwardRef((props, forwardedRef) => {
         position: "fixed",
         zIndex: contentZIndex
       },
-      children: /* @__PURE__ */ jsx192(Primitive.div, {
+      children: /* @__PURE__ */ jsx212(Primitive.div, {
         ...popperProps,
         ref: composedRefs,
         style: {
@@ -17586,7 +17690,7 @@ var SelectItemAlignedPosition = React322.forwardRef((props, forwardedRef) => {
 });
 SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
 var POPPER_POSITION_NAME = "SelectPopperPosition";
-var SelectPopperPosition = React322.forwardRef((props, forwardedRef) => {
+var SelectPopperPosition = React34.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     align = "start",
@@ -17594,7 +17698,7 @@ var SelectPopperPosition = React322.forwardRef((props, forwardedRef) => {
     ...popperProps
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  return /* @__PURE__ */ jsx192(Content, {
+  return /* @__PURE__ */ jsx212(Content, {
     ...popperScope,
     ...popperProps,
     ref: forwardedRef,
@@ -17616,20 +17720,20 @@ var SelectPopperPosition = React322.forwardRef((props, forwardedRef) => {
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME2, {});
 var VIEWPORT_NAME = "SelectViewport";
-var SelectViewport = React322.forwardRef((props, forwardedRef) => {
+var SelectViewport = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, nonce, ...viewportProps } = props;
   const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
   const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);
-  const prevScrollTopRef = React322.useRef(0);
-  return /* @__PURE__ */ jsxs32(Fragment52, { children: [
-    /* @__PURE__ */ jsx192("style", {
+  const prevScrollTopRef = React34.useRef(0);
+  return /* @__PURE__ */ jsxs4(Fragment52, { children: [
+    /* @__PURE__ */ jsx212("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__ */ jsx192(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx192(Primitive.div, {
+    /* @__PURE__ */ jsx212(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx212(Primitive.div, {
       "data-radix-select-viewport": "",
       role: "presentation",
       ...viewportProps,
@@ -17670,22 +17774,22 @@ var SelectViewport = React322.forwardRef((props, forwardedRef) => {
 SelectViewport.displayName = VIEWPORT_NAME;
 var GROUP_NAME = "SelectGroup";
 var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-var SelectGroup = React322.forwardRef((props, forwardedRef) => {
+var SelectGroup = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...groupProps } = props;
   const groupId = useId();
-  return /* @__PURE__ */ jsx192(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx192(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
+  return /* @__PURE__ */ jsx212(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx212(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
 });
 SelectGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "SelectLabel";
-var SelectLabel = React322.forwardRef((props, forwardedRef) => {
+var SelectLabel = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...labelProps } = props;
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-  return /* @__PURE__ */ jsx192(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx212(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
 });
 SelectLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "SelectItem";
 var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-var SelectItem = React322.forwardRef((props, forwardedRef) => {
+var SelectItem = React34.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     value,
@@ -17696,8 +17800,8 @@ var SelectItem = React322.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(ITEM_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
   const isSelected = context.value === value;
-  const [textValue, setTextValue] = React322.useState(textValueProp ?? "");
-  const [isFocused, setIsFocused] = React322.useState(false);
+  const [textValue, setTextValue] = React34.useState(textValueProp ?? "");
+  const [isFocused, setIsFocused] = React34.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, (node) => contentContext.itemRefCallback?.(node, value, disabled));
   const textId = useId();
   const handleSelect = () => {
@@ -17709,21 +17813,21 @@ var SelectItem = React322.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__ */ jsx192(SelectItemContextProvider, {
+  return /* @__PURE__ */ jsx212(SelectItemContextProvider, {
     scope: __scopeSelect,
     value,
     disabled,
     textId,
     isSelected,
-    onItemTextChange: React322.useCallback((node) => {
+    onItemTextChange: React34.useCallback((node) => {
       setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
     }, []),
-    children: /* @__PURE__ */ jsx192(Collection.ItemSlot, {
+    children: /* @__PURE__ */ jsx212(Collection.ItemSlot, {
       scope: __scopeSelect,
       value,
       disabled,
       textValue,
-      children: /* @__PURE__ */ jsx192(Primitive.div, {
+      children: /* @__PURE__ */ jsx212(Primitive.div, {
         role: "option",
         "aria-labelledby": textId,
         "data-highlighted": isFocused ? "" : undefined,
@@ -17764,39 +17868,39 @@ var SelectItem = React322.forwardRef((props, forwardedRef) => {
 });
 SelectItem.displayName = ITEM_NAME;
 var ITEM_TEXT_NAME = "SelectItemText";
-var SelectItemText = React322.forwardRef((props, forwardedRef) => {
+var SelectItemText = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, ...itemTextProps } = props;
   const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
   const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
   const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
-  const [itemTextNode, setItemTextNode] = React322.useState(null);
+  const [itemTextNode, setItemTextNode] = React34.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 = React322.useMemo(() => /* @__PURE__ */ jsx192("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
+  const nativeOption = React34.useMemo(() => /* @__PURE__ */ jsx212("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__ */ jsxs32(Fragment52, { children: [
-    /* @__PURE__ */ jsx192(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
+  return /* @__PURE__ */ jsxs4(Fragment52, { children: [
+    /* @__PURE__ */ jsx212(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
     itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM4.createPortal(itemTextProps.children, context.valueNode) : null
   ] });
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 var ITEM_INDICATOR_NAME = "SelectItemIndicator";
-var SelectItemIndicator = React322.forwardRef((props, forwardedRef) => {
+var SelectItemIndicator = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...itemIndicatorProps } = props;
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-  return itemContext.isSelected ? /* @__PURE__ */ jsx192(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
+  return itemContext.isSelected ? /* @__PURE__ */ jsx212(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-var SelectScrollUpButton = React322.forwardRef((props, forwardedRef) => {
+var SelectScrollUpButton = React34.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React322.useState(false);
+  const [canScrollUp, setCanScrollUp] = React34.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -17811,7 +17915,7 @@ var SelectScrollUpButton = React322.forwardRef((props, forwardedRef) => {
       return () => viewport.removeEventListener("scroll", handleScroll22);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
-  return canScrollUp ? /* @__PURE__ */ jsx192(SelectScrollButtonImpl, {
+  return canScrollUp ? /* @__PURE__ */ jsx212(SelectScrollButtonImpl, {
     ...props,
     ref: composedRefs,
     onAutoScroll: () => {
@@ -17824,10 +17928,10 @@ var SelectScrollUpButton = React322.forwardRef((props, forwardedRef) => {
 });
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-var SelectScrollDownButton = React322.forwardRef((props, forwardedRef) => {
+var SelectScrollDownButton = React34.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React322.useState(false);
+  const [canScrollDown, setCanScrollDown] = React34.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -17843,7 +17947,7 @@ var SelectScrollDownButton = React322.forwardRef((props, forwardedRef) => {
       return () => viewport.removeEventListener("scroll", handleScroll22);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
-  return canScrollDown ? /* @__PURE__ */ jsx192(SelectScrollButtonImpl, {
+  return canScrollDown ? /* @__PURE__ */ jsx212(SelectScrollButtonImpl, {
     ...props,
     ref: composedRefs,
     onAutoScroll: () => {
@@ -17855,25 +17959,25 @@ var SelectScrollDownButton = React322.forwardRef((props, forwardedRef) => {
   }) : null;
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-var SelectScrollButtonImpl = React322.forwardRef((props, forwardedRef) => {
+var SelectScrollButtonImpl = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React322.useRef(null);
+  const autoScrollTimerRef = React34.useRef(null);
   const getItems = useCollection(__scopeSelect);
-  const clearAutoScrollTimer = React322.useCallback(() => {
+  const clearAutoScrollTimer = React34.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
       autoScrollTimerRef.current = null;
     }
   }, []);
-  React322.useEffect(() => {
+  React34.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
   useLayoutEffect22(() => {
     const activeItem = getItems().find((item) => item.ref.current === document.activeElement);
     activeItem?.ref.current?.scrollIntoView({ block: "nearest" });
   }, [getItems]);
-  return /* @__PURE__ */ jsx192(Primitive.div, {
+  return /* @__PURE__ */ jsx212(Primitive.div, {
     "aria-hidden": true,
     ...scrollIndicatorProps,
     ref: forwardedRef,
@@ -17895,29 +17999,29 @@ var SelectScrollButtonImpl = React322.forwardRef((props, forwardedRef) => {
   });
 });
 var SEPARATOR_NAME = "SelectSeparator";
-var SelectSeparator = React322.forwardRef((props, forwardedRef) => {
+var SelectSeparator = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...separatorProps } = props;
-  return /* @__PURE__ */ jsx192(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx212(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
 });
 SelectSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME2 = "SelectArrow";
-var SelectArrow = React322.forwardRef((props, forwardedRef) => {
+var SelectArrow = React34.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(ARROW_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(ARROW_NAME2, __scopeSelect);
-  return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx192(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
+  return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx212(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
 });
 SelectArrow.displayName = ARROW_NAME2;
 function shouldShowPlaceholder(value) {
   return value === "" || value === undefined;
 }
-var BubbleSelect = React322.forwardRef((props, forwardedRef) => {
+var BubbleSelect = React34.forwardRef((props, forwardedRef) => {
   const { value, ...selectProps } = props;
-  const ref = React322.useRef(null);
+  const ref = React34.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
   const prevValue = usePrevious(value);
-  React322.useEffect(() => {
+  React34.useEffect(() => {
     const select = ref.current;
     const selectProto = window.HTMLSelectElement.prototype;
     const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
@@ -17928,14 +18032,14 @@ var BubbleSelect = React322.forwardRef((props, forwardedRef) => {
       select.dispatchEvent(event);
     }
   }, [prevValue, value]);
-  return /* @__PURE__ */ jsx192(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx192("select", { ...selectProps, ref: composedRefs, defaultValue: value }) });
+  return /* @__PURE__ */ jsx212(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx212("select", { ...selectProps, ref: composedRefs, defaultValue: value }) });
 });
 BubbleSelect.displayName = "BubbleSelect";
 function useTypeaheadSearch(onSearchChange) {
   const handleSearchChange = useCallbackRef(onSearchChange);
-  const searchRef = React322.useRef("");
-  const timerRef = React322.useRef(0);
-  const handleTypeaheadSearch = React322.useCallback((key) => {
+  const searchRef = React34.useRef("");
+  const timerRef = React34.useRef(0);
+  const handleTypeaheadSearch = React34.useCallback((key) => {
     const search = searchRef.current + key;
     handleSearchChange(search);
     (function updateSearch(value) {
@@ -17945,11 +18049,11 @@ function useTypeaheadSearch(onSearchChange) {
         timerRef.current = window.setTimeout(() => updateSearch(""), 1000);
     })(search);
   }, [handleSearchChange]);
-  const resetTypeahead = React322.useCallback(() => {
+  const resetTypeahead = React34.useCallback(() => {
     searchRef.current = "";
     window.clearTimeout(timerRef.current);
   }, []);
-  React322.useEffect(() => {
+  React34.useEffect(() => {
     return () => window.clearTimeout(timerRef.current);
   }, []);
   return [searchRef, handleTypeaheadSearch, resetTypeahead];
@@ -18038,104 +18142,104 @@ var ChevronDown = createLucideIcon("ChevronDown", [
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 var Select2 = Root222;
 var SelectValue2 = Value;
-var SelectTrigger2 = React332.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(Trigger, {
+var SelectTrigger2 = React352.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Trigger, {
   ref,
   className: cn("flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand", className),
   ...props,
   children: [
     children,
-    /* @__PURE__ */ jsx202(Icon, {
+    /* @__PURE__ */ jsx223(Icon, {
       asChild: true,
-      children: /* @__PURE__ */ jsx202(ChevronDown, {
+      children: /* @__PURE__ */ jsx223(ChevronDown, {
         className: "h-4 w-4 opacity-50"
       })
     })
   ]
 }));
 SelectTrigger2.displayName = Trigger.displayName;
-var SelectScrollUpButton2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx202(ScrollUpButton, {
+var SelectScrollUpButton2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(ScrollUpButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
-  children: /* @__PURE__ */ jsx202(ChevronUp, {
+  children: /* @__PURE__ */ jsx223(ChevronUp, {
     className: "h-4 w-4"
   })
 }));
 SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
-var SelectScrollDownButton2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx202(ScrollDownButton, {
+var SelectScrollDownButton2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(ScrollDownButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
-  children: /* @__PURE__ */ jsx202(ChevronDown, {
+  children: /* @__PURE__ */ jsx223(ChevronDown, {
     className: "h-4 w-4"
   })
 }));
 SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
-var SelectContent2 = React332.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx202(Portal2, {
-  children: /* @__PURE__ */ jsxs4(Content2, {
+var SelectContent2 = React352.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx223(Portal2, {
+  children: /* @__PURE__ */ jsxs5(Content2, {
     ref,
     className: cn(" border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
     position,
     ...props,
     children: [
-      /* @__PURE__ */ jsx202(SelectScrollUpButton2, {}),
-      /* @__PURE__ */ jsx202(Viewport, {
+      /* @__PURE__ */ jsx223(SelectScrollUpButton2, {}),
+      /* @__PURE__ */ jsx223(Viewport, {
         className: cn("p-1", position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"),
         children
       }),
-      /* @__PURE__ */ jsx202(SelectScrollDownButton2, {})
+      /* @__PURE__ */ jsx223(SelectScrollDownButton2, {})
     ]
   })
 }));
 SelectContent2.displayName = Content2.displayName;
-var SelectLabel2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx202(Label, {
+var SelectLabel2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(Label, {
   ref,
   className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
   ...props
 }));
 SelectLabel2.displayName = Label.displayName;
-var SelectItem2 = React332.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(Item, {
+var SelectItem2 = React352.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Item, {
   ref,
   className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand", className),
   ...props,
   children: [
-    /* @__PURE__ */ jsx202("span", {
+    /* @__PURE__ */ jsx223("span", {
       className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
-      children: /* @__PURE__ */ jsx202(ItemIndicator, {
-        children: /* @__PURE__ */ jsx202(Check, {
+      children: /* @__PURE__ */ jsx223(ItemIndicator, {
+        children: /* @__PURE__ */ jsx223(Check, {
           className: "h-4 w-4"
         })
       })
     }),
-    /* @__PURE__ */ jsx202(ItemText, {
+    /* @__PURE__ */ jsx223(ItemText, {
       children
     })
   ]
 }));
 SelectItem2.displayName = Item.displayName;
-var SelectSeparator2 = React332.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx202(Separator, {
+var SelectSeparator2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(Separator, {
   ref,
   className: cn("-mx-1 my-1 h-px bg-muted", className),
   ...props
 }));
 SelectSeparator2.displayName = Separator.displayName;
 var Switch = ({ active, onToggle }) => {
-  return /* @__PURE__ */ jsx212("div", {
+  return /* @__PURE__ */ jsx232("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__ */ jsx212("div", {
+    children: /* @__PURE__ */ jsx232("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 Triangle2 = (props) => {
-  return /* @__PURE__ */ jsx223("svg", {
+  return /* @__PURE__ */ jsx242("svg", {
     viewBox: "0 0 127 131",
     fill: "none",
     ...props,
-    children: /* @__PURE__ */ jsx223("path", {
+    children: /* @__PURE__ */ jsx242("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"
     })
@@ -19463,10 +19567,10 @@ function cn2(...inputs) {
 
 // src/components/homepage/InfoTooltip.tsx
 import { useState as useState34 } from "react";
-import { jsx as jsx39, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs6 } from "react/jsx-runtime";
 var InfoTooltip = ({ text }) => {
   const [isVisible, setIsVisible] = useState34(false);
-  return /* @__PURE__ */ jsxs5("span", {
+  return /* @__PURE__ */ jsxs6("span", {
     className: "relative inline-block ml-1 text-gray-600 cursor-default",
     onPointerEnter: () => setIsVisible(true),
     onMouseLeave: () => setIsVisible(false),
@@ -19475,7 +19579,7 @@ var InfoTooltip = ({ text }) => {
         style: { fontSize: "1rem" },
         children: "ⓘ"
       }),
-      isVisible && /* @__PURE__ */ jsxs5("span", {
+      isVisible && /* @__PURE__ */ jsxs6("span", {
         className: "absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white p-2 rounded text-xs whitespace-nowrap z-10 cursor-default",
         children: [
           text,
@@ -19489,7 +19593,7 @@ var InfoTooltip = ({ text }) => {
 };
 
 // src/components/homepage/PricingBulletPoint.tsx
-import { jsx as jsx40, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs8 } from "react/jsx-runtime";
 var container3 = {
   display: "flex",
   flexDirection: "row",
@@ -19503,7 +19607,7 @@ var greyCircle = {
   backgroundColor: "var(--footer-border)"
 };
 var PricingBulletPoint = ({ text, checked, children }) => {
-  const checkmarkSVG = /* @__PURE__ */ jsxs7("svg", {
+  const checkmarkSVG = /* @__PURE__ */ jsxs8("svg", {
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
@@ -19525,13 +19629,13 @@ var PricingBulletPoint = ({ text, checked, children }) => {
       })
     ]
   });
-  return /* @__PURE__ */ jsxs7("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     style: container3,
     children: [
       checked ? checkmarkSVG : /* @__PURE__ */ jsx40("div", {
         style: greyCircle
       }),
-      /* @__PURE__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs8("div", {
         className: "fontbrand text-lg\t",
         children: [
           text,
@@ -19543,7 +19647,7 @@ var PricingBulletPoint = ({ text, checked, children }) => {
 };
 
 // src/components/homepage/FreePricing.tsx
-import { jsx as jsx41, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs9 } from "react/jsx-runtime";
 var Container = ({
   children
 }) => {
@@ -19588,7 +19692,7 @@ var SmallPriceTag = ({ children }) => {
   });
 };
 var FreePricing = () => {
-  return /* @__PURE__ */ jsxs8(Container, {
+  return /* @__PURE__ */ jsxs9(Container, {
     children: [
       /* @__PURE__ */ jsx41(Audience, {
         children: "For individuals and companies of up to 3 people"
@@ -19620,7 +19724,7 @@ var textUnitWrapper = {
   flexDirection: "column"
 };
 var EnterpriseLicense = () => {
-  return /* @__PURE__ */ jsxs8(Container, {
+  return /* @__PURE__ */ jsxs9(Container, {
     children: [
       /* @__PURE__ */ jsx41(Audience, {
         children: "For advanced needs"
@@ -19653,7 +19757,7 @@ var EnterpriseLicense = () => {
         checked: true
       }),
       /* @__PURE__ */ jsx41(PricingBulletPoint, {
-        text: /* @__PURE__ */ jsxs8("span", {
+        text: /* @__PURE__ */ jsxs9("span", {
           children: [
             /* @__PURE__ */ jsx41("a", {
               href: "https://www.remotion.dev/editor-starter",
@@ -19671,7 +19775,7 @@ var EnterpriseLicense = () => {
       }),
       /* @__PURE__ */ jsx41("div", {
         className: "flex flex-row justify-end",
-        children: /* @__PURE__ */ jsxs8("div", {
+        children: /* @__PURE__ */ jsxs9("div", {
           style: {
             ...textUnitWrapper,
             alignItems: "flex-end"
@@ -19718,7 +19822,7 @@ var CompanyPricing = () => {
   const totalPriceString = useMemo41(() => {
     return formatPrice(totalPrice);
   }, [formatPrice, totalPrice]);
-  return /* @__PURE__ */ jsxs8(Container, {
+  return /* @__PURE__ */ jsxs9(Container, {
     children: [
       /* @__PURE__ */ jsx41(Audience, {
         children: "For collaborations and companies of 4+ people"
@@ -19748,10 +19852,10 @@ var CompanyPricing = () => {
       /* @__PURE__ */ jsx41("div", {
         style: { height: 30 }
       }),
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs9("div", {
         className: "flex flex-col md:flex-row md:items-center",
         children: [
-          /* @__PURE__ */ jsxs8("div", {
+          /* @__PURE__ */ jsxs9("div", {
             style: textUnitWrapper,
             children: [
               /* @__PURE__ */ jsx41("div", {
@@ -19768,7 +19872,7 @@ var CompanyPricing = () => {
             style: { flex: 3 },
             className: "hidden md:block"
           }),
-          /* @__PURE__ */ jsxs8("div", {
+          /* @__PURE__ */ jsxs9("div", {
             className: "flex flex-row items-center justify-between mt-3 md:mt-0",
             children: [
               /* @__PURE__ */ jsx41(Counter, {
@@ -19776,7 +19880,7 @@ var CompanyPricing = () => {
                 setCount: setDevSeatCount,
                 minCount: 1
               }),
-              /* @__PURE__ */ jsxs8(SmallPriceTag, {
+              /* @__PURE__ */ jsxs9(SmallPriceTag, {
                 children: [
                   "$",
                   new Intl.NumberFormat("en-US", {
@@ -19791,10 +19895,10 @@ var CompanyPricing = () => {
       /* @__PURE__ */ jsx41("div", {
         style: { height: 14 }
       }),
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs9("div", {
         className: "flex flex-col md:flex-row md:items-center",
         children: [
-          /* @__PURE__ */ jsxs8("div", {
+          /* @__PURE__ */ jsxs9("div", {
             style: textUnitWrapper,
             children: [
               /* @__PURE__ */ jsx41("div", {
@@ -19815,7 +19919,7 @@ var CompanyPricing = () => {
             style: { flex: 3 },
             className: "hidden md:block"
           }),
-          /* @__PURE__ */ jsxs8("div", {
+          /* @__PURE__ */ jsxs9("div", {
             className: "flex flex-row items-center justify-between mt-3 md:mt-0",
             children: [
               /* @__PURE__ */ jsx41(Counter, {
@@ -19824,7 +19928,7 @@ var CompanyPricing = () => {
                 minCount: 0,
                 step: 1000
               }),
-              /* @__PURE__ */ jsxs8(SmallPriceTag, {
+              /* @__PURE__ */ jsxs9(SmallPriceTag, {
                 children: [
                   "$",
                   new Intl.NumberFormat("en-US", {
@@ -19841,10 +19945,10 @@ var CompanyPricing = () => {
       }),
       /* @__PURE__ */ jsx41("div", {
         className: "flex flex-row justify-end",
-        children: /* @__PURE__ */ jsxs8("div", {
+        children: /* @__PURE__ */ jsxs9("div", {
           style: { ...textUnitWrapper, alignItems: "flex-end" },
           children: [
-            /* @__PURE__ */ jsxs8(PriceTag, {
+            /* @__PURE__ */ jsxs9(PriceTag, {
               children: [
                 totalPriceString,
                 "/mo"
@@ -19865,7 +19969,7 @@ var CompanyPricing = () => {
             ...textUnitWrapper,
             alignItems: "flex-end"
           },
-          children: /* @__PURE__ */ jsxs8("a", {
+          children: /* @__PURE__ */ jsxs9("a", {
             href: "https://remotion.pro/dashboard",
             className: "font-brand text-brand flex flex-row items-center gap-1 no-underline",
             children: [
@@ -19889,9 +19993,9 @@ var CompanyPricing = () => {
 };
 
 // src/components/homepage/Pricing.tsx
-import { jsx as jsx44, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs10 } from "react/jsx-runtime";
 var Pricing = () => {
-  return /* @__PURE__ */ jsxs9("div", {
+  return /* @__PURE__ */ jsxs10("div", {
     style: {
       display: "flex",
       flexDirection: "column",
@@ -19907,7 +20011,7 @@ var Pricing = () => {
           justifyContent: "center",
           display: "flex"
         },
-        children: /* @__PURE__ */ jsxs9("div", {
+        children: /* @__PURE__ */ jsxs10("div", {
           style: {
             fontFamily: "GTPlanar"
           },
@@ -19940,7 +20044,7 @@ var Pricing = () => {
 
 // src/components/homepage/BackgroundAnimation.tsx
 import { useEffect as useEffect37 } from "react";
-import { jsx as jsx46, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs11 } from "react/jsx-runtime";
 "use client";
 var rx = 0.2;
 var ry = 0.45;
@@ -19972,7 +20076,7 @@ var BackgroundAnimation = () => {
   }, [css]);
   return /* @__PURE__ */ jsx46("div", {
     className: " w-full h-full min-w-0 m-auto lg:relative lg:min-w-[700px] lg:max-w-[1200px] lg:ml-auto lg:left-auto pointer-events-none",
-    children: /* @__PURE__ */ jsxs10("svg", {
+    children: /* @__PURE__ */ jsxs11("svg", {
       className: "translate-y-[-30%] lg:translate-y-[-50%]",
       viewBox: "0 0 1 1",
       style: {
@@ -20027,7 +20131,7 @@ var BackgroundAnimation = () => {
 };
 
 // src/components/homepage/CommunityStatsItems.tsx
-import { jsx as jsx47, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs12 } from "react/jsx-runtime";
 var StatItemContent = ({
   content,
   width,
@@ -20060,10 +20164,10 @@ var Pill = ({ children, className }) => {
   });
 };
 var InstallsPerMonth = () => {
-  return /* @__PURE__ */ jsxs11(Pill, {
+  return /* @__PURE__ */ jsxs12(Pill, {
     className: "w-[30%] flex-col",
     children: [
-      /* @__PURE__ */ jsxs11("div", {
+      /* @__PURE__ */ jsxs12("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -20102,10 +20206,10 @@ var InstallsPerMonth = () => {
   });
 };
 var PagesOfDocs = () => {
-  return /* @__PURE__ */ jsxs11(Pill, {
+  return /* @__PURE__ */ jsxs12(Pill, {
     className: "flex-col",
     children: [
-      /* @__PURE__ */ jsxs11("div", {
+      /* @__PURE__ */ jsxs12("div", {
         style: { display: "flex", alignItems: "center" },
         children: [
           /* @__PURE__ */ jsx47(StatItemContent, {
@@ -20140,7 +20244,7 @@ var PagesOfDocs = () => {
     ]
   });
 };
-var TemplatesAndExamples = () => /* @__PURE__ */ jsxs11(Pill, {
+var TemplatesAndExamples = () => /* @__PURE__ */ jsxs12(Pill, {
   className: "w-[30%] flex items-center flex-row",
   children: [
     /* @__PURE__ */ jsx47(StatItemContent, {
@@ -20158,10 +20262,10 @@ var TemplatesAndExamples = () => /* @__PURE__ */ jsxs11(Pill, {
   ]
 });
 var GitHubStars = () => {
-  return /* @__PURE__ */ jsxs11(Pill, {
+  return /* @__PURE__ */ jsxs12(Pill, {
     className: "w-[30%] flex-col",
     children: [
-      /* @__PURE__ */ jsxs11("div", {
+      /* @__PURE__ */ jsxs12("div", {
         style: { display: "flex", alignItems: "center" },
         children: [
           /* @__PURE__ */ jsx47(StatItemContent, {
@@ -20198,7 +20302,7 @@ var GitHubStars = () => {
 var DiscordMembers = () => {
   return /* @__PURE__ */ jsx47(Pill, {
     className: "w-[30%]",
-    children: /* @__PURE__ */ jsxs11("div", {
+    children: /* @__PURE__ */ jsxs12("div", {
       style: {
         width: "80%",
         display: "flex",
@@ -20206,7 +20310,7 @@ var DiscordMembers = () => {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsxs11("div", {
+        /* @__PURE__ */ jsxs12("div", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -20255,7 +20359,7 @@ var DiscordMembers = () => {
 var Contributors = () => {
   return /* @__PURE__ */ jsx47(Pill, {
     className: "w-[30%]",
-    children: /* @__PURE__ */ jsxs11("div", {
+    children: /* @__PURE__ */ jsxs12("div", {
       style: { display: "flex", justifyContent: "center" },
       children: [
         /* @__PURE__ */ jsx47("div", {
@@ -20275,7 +20379,7 @@ var Contributors = () => {
             width: "65px"
           })
         }),
-        /* @__PURE__ */ jsxs11("div", {
+        /* @__PURE__ */ jsxs12("div", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -20317,14 +20421,14 @@ var SectionTitle = ({
 };
 
 // src/components/homepage/CommunityStats.tsx
-import { jsx as jsx49, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs13 } from "react/jsx-runtime";
 var SectionLink = ({ href, children }) => /* @__PURE__ */ jsx49("a", {
   target: "_blank",
   href,
   className: "no-underline text-inherit contents",
   children
 });
-var CommunityStats = () => /* @__PURE__ */ jsxs12("div", {
+var CommunityStats = () => /* @__PURE__ */ jsxs13("div", {
   className: "m-auto max-w-[700px] text-center",
   children: [
     /* @__PURE__ */ jsx49(SectionTitle, {
@@ -20334,7 +20438,7 @@ var CommunityStats = () => /* @__PURE__ */ jsxs12("div", {
       className: "fontbrand text-center mb-10 -mt-4",
       children: "Join a thriving community of developers."
     }),
-    /* @__PURE__ */ jsxs12("div", {
+    /* @__PURE__ */ jsxs13("div", {
       className: "flex flex-wrap justify-between gap-4 w-full items-center",
       children: [
         /* @__PURE__ */ jsx49(SectionLink, {
@@ -20384,19 +20488,19 @@ init_esm();
 init_esm();
 init_esm();
 init_esm();
-import { jsx as jsx50, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs14 } from "react/jsx-runtime";
 import { jsx as jsx213, jsxs as jsxs24, Fragment as Fragment6 } from "react/jsx-runtime";
 import React40 from "react";
-import { useContext as useContext210, useEffect as useEffect24, useState as useState35 } from "react";
+import { useContext as useContext210, useEffect as useEffect210, useState as useState35 } from "react";
 import { useContext as useContext40, useEffect as useEffect38 } from "react";
 import { jsx as jsx310 } from "react/jsx-runtime";
-import { useCallback as useCallback27, useRef as useRef30 } from "react";
+import { useCallback as useCallback27, useRef as useRef32 } from "react";
 import { useEffect as useEffect39, useState as useState210 } from "react";
 import { useContext as useContext42, useEffect as useEffect62, useRef as useRef42 } from "react";
 import { useEffect as useEffect42 } from "react";
-import { useCallback as useCallback28, useContext as useContext37, useMemo as useMemo42, useRef as useRef210, useState as useState36 } from "react";
-import { useEffect as useEffect52, useRef as useRef32 } from "react";
-import { useCallback as useCallback32, useEffect as useEffect73, useMemo as useMemo210, useState as useState42 } from "react";
+import { useCallback as useCallback28, useContext as useContext37, useMemo as useMemo42, useRef as useRef24, useState as useState36 } from "react";
+import { useEffect as useEffect52, useRef as useRef33 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect72, useMemo as useMemo212, useState as useState42 } from "react";
 import {
   forwardRef as forwardRef26,
   useEffect as useEffect142,
@@ -20406,7 +20510,7 @@ import {
   useRef as useRef112,
   useState as useState132
 } from "react";
-import React103, {
+import React102, {
   Suspense as Suspense2,
   forwardRef as forwardRef27,
   useCallback as useCallback112,
@@ -20430,12 +20534,12 @@ import {
   useMemo as useMemo52,
   useState as useState82
 } from "react";
-import { useEffect as useEffect82, useRef as useRef62, useState as useState72 } from "react";
+import { useEffect as useEffect83, useRef as useRef62, useState as useState72 } from "react";
 import { jsx as jsx74, jsxs as jsxs52 } from "react/jsx-runtime";
 import { useCallback as useCallback72, useEffect as useEffect102, useMemo as useMemo62, useRef as useRef72, useState as useState92 } from "react";
-import { jsx as jsx84, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs62 } from "react/jsx-runtime";
 import { useMemo as useMemo72 } from "react";
-import { jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsxs as jsxs7 } from "react/jsx-runtime";
 import { useMemo as useMemo82 } from "react";
 import { jsx as jsx94, jsxs as jsxs82, Fragment as Fragment22 } from "react/jsx-runtime";
 import React82 from "react";
@@ -21116,7 +21220,7 @@ var PlayIcon = () => {
   });
 };
 var PauseIcon = () => {
-  return /* @__PURE__ */ jsxs13("svg", {
+  return /* @__PURE__ */ jsxs14("svg", {
     viewBox: "0 0 100 100",
     width: ICON_SIZE2,
     height: ICON_SIZE2,
@@ -21150,7 +21254,7 @@ var FullscreenIcon = ({
   const out = isFullscreen ? 0 : strokeWidth2 / 2;
   const middleInset = isFullscreen ? strokeWidth2 * 1.6 : strokeWidth2 / 2;
   const inset = isFullscreen ? strokeWidth2 * 1.6 : strokeWidth2 * 2;
-  return /* @__PURE__ */ jsxs13("svg", {
+  return /* @__PURE__ */ jsxs14("svg", {
     viewBox: `0 0 ${viewSize} ${viewSize}`,
     height: fullscreenIconSize,
     width: fullscreenIconSize,
@@ -21555,7 +21659,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect24(() => {
+  useEffect210(() => {
     if (currentPlaybackRate) {
       emitter.dispatchRateChange(currentPlaybackRate);
     }
@@ -21610,12 +21714,12 @@ var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
   const [hasPlayed, setHasPlayed] = useState36(false);
   const frame = Internals.Timeline.useTimelinePosition();
-  const playStart = useRef210(frame);
+  const playStart = useRef24(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
   const audioContext = useContext37(Internals.SharedAudioContext);
   const { audioAndVideoTags } = useContext37(Internals.TimelineContext);
-  const frameRef = useRef210(frame);
+  const frameRef = useRef24(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
@@ -21910,7 +22014,7 @@ var getIsBackgrounded = () => {
   return document.visibilityState === "hidden";
 };
 var useIsBackgrounded = () => {
-  const isBackgrounded = useRef32(getIsBackgrounded());
+  const isBackgrounded = useRef33(getIsBackgrounded());
   useEffect52(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
@@ -22082,7 +22186,7 @@ var useElementSize = (ref, options2) => {
       }
     };
   });
-  const observer = useMemo210(() => {
+  const observer = useMemo212(() => {
     if (typeof ResizeObserver === "undefined") {
       return null;
     }
@@ -22140,7 +22244,7 @@ var useElementSize = (ref, options2) => {
       };
     });
   }, [ref]);
-  useEffect73(() => {
+  useEffect72(() => {
     if (!observer) {
       return;
     }
@@ -22154,7 +22258,7 @@ var useElementSize = (ref, options2) => {
       }
     };
   }, [observer, ref, updateSize]);
-  useEffect73(() => {
+  useEffect72(() => {
     if (!options2.triggerOnWindowResize) {
       return;
     }
@@ -22163,13 +22267,13 @@ var useElementSize = (ref, options2) => {
       window.removeEventListener("resize", updateSize);
     };
   }, [options2.triggerOnWindowResize, updateSize]);
-  useEffect73(() => {
+  useEffect72(() => {
     elementSizeHooks.push(updateSize);
     return () => {
       elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
     };
   }, [updateSize]);
-  return useMemo210(() => {
+  return useMemo212(() => {
     if (!size4) {
       return null;
     }
@@ -22382,7 +22486,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState72(initialIsVisible);
   const ref = useRef62(null);
-  useEffect82(() => {
+  useEffect83(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         setIsComponentVisible(false);
@@ -22726,12 +22830,12 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
       position: "absolute"
     };
   }, [durationInFrames, inFrame, outFrame]);
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs62("div", {
     ref: containerRef,
     onPointerDown,
     style: containerStyle,
     children: [
-      /* @__PURE__ */ jsxs6("div", {
+      /* @__PURE__ */ jsxs62("div", {
         style: barBackground,
         children: [
           /* @__PURE__ */ jsx84("div", {
@@ -22767,7 +22871,7 @@ var PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
   }, [maxTimeLabelWidth]);
   const isLastFrame = frame === durationInFrames - 1;
   const frameToDisplay = isLastFrame ? frame + 1 : frame;
-  return /* @__PURE__ */ jsxs72("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     style: timeLabel,
     children: [
       formatTime(frameToDisplay / fps),
@@ -23285,7 +23389,7 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
   }, [doubleClickToFullscreen, handleDoubleClick, handlePointerDown, onClick]);
   return returnValue;
 };
-var reactVersion = React103.version.split(".")[0];
+var reactVersion = React102.version.split(".")[0];
 if (reactVersion === "0") {
   throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
@@ -23800,7 +23904,8 @@ var SharedPlayerContexts = ({
   initiallyMuted,
   logLevel,
   audioLatencyHint,
-  volumePersistenceKey
+  volumePersistenceKey,
+  inputProps
 }) => {
   const compositionManagerContext = useMemo132(() => {
     const context = {
@@ -23820,11 +23925,29 @@ var SharedPlayerContexts = ({
         }
       ],
       folders: [],
-      currentCompositionMetadata: null,
+      currentCompositionMetadata: {
+        defaultCodec: null,
+        defaultOutName: null,
+        defaultPixelFormat: null,
+        defaultProResProfile: null,
+        defaultVideoImageFormat: null,
+        durationInFrames,
+        fps,
+        height: compositionHeight,
+        width: compositionWidth,
+        props: inputProps
+      },
       canvasContent: { type: "composition", compositionId: "player-comp" }
     };
     return context;
-  }, [component, durationInFrames, compositionHeight, compositionWidth, fps]);
+  }, [
+    component,
+    durationInFrames,
+    compositionHeight,
+    compositionWidth,
+    fps,
+    inputProps
+  ]);
   const [mediaMuted, setMediaMuted] = useState122(() => initiallyMuted);
   const [mediaVolume, setMediaVolume] = useState122(() => getPreferredVolume(volumePersistenceKey ?? null));
   const mediaVolumeContextValue = useMemo132(() => {
@@ -23867,19 +23990,17 @@ var SharedPlayerContexts = ({
           value: timelineContext,
           children: /* @__PURE__ */ jsx133(Internals.CompositionManager.Provider, {
             value: compositionManagerContext,
-            children: /* @__PURE__ */ jsx133(Internals.ResolveCompositionConfig, {
-              children: /* @__PURE__ */ jsx133(Internals.PrefetchProvider, {
-                children: /* @__PURE__ */ jsx133(Internals.DurationsContextProvider, {
-                  children: /* @__PURE__ */ jsx133(Internals.MediaVolumeContext.Provider, {
-                    value: mediaVolumeContextValue,
-                    children: /* @__PURE__ */ jsx133(Internals.SetMediaVolumeContext.Provider, {
-                      value: setMediaVolumeContextValue,
-                      children: /* @__PURE__ */ jsx133(Internals.SharedAudioContextProvider, {
-                        numberOfAudioTags: numberOfSharedAudioTags,
-                        audioLatencyHint,
-                        children: /* @__PURE__ */ jsx133(Internals.BufferingProvider, {
-                          children
-                        })
+            children: /* @__PURE__ */ jsx133(Internals.PrefetchProvider, {
+              children: /* @__PURE__ */ jsx133(Internals.DurationsContextProvider, {
+                children: /* @__PURE__ */ jsx133(Internals.MediaVolumeContext.Provider, {
+                  value: mediaVolumeContextValue,
+                  children: /* @__PURE__ */ jsx133(Internals.SetMediaVolumeContext.Provider, {
+                    value: setMediaVolumeContextValue,
+                    children: /* @__PURE__ */ jsx133(Internals.SharedAudioContextProvider, {
+                      numberOfAudioTags: numberOfSharedAudioTags,
+                      audioLatencyHint,
+                      children: /* @__PURE__ */ jsx133(Internals.BufferingProvider, {
+                        children
                       })
                     })
                   })
@@ -24179,6 +24300,7 @@ var PlayerFn = ({
       logLevel,
       audioLatencyHint,
       volumePersistenceKey,
+      inputProps: actualInputProps,
       children: /* @__PURE__ */ jsx143(Internals.SetTimelineContext.Provider, {
         value: setTimelineContextValue,
         children: /* @__PURE__ */ jsx143(PlayerEmitterProvider, {
@@ -24426,6 +24548,7 @@ var ThumbnailFn = ({
       initiallyMuted: true,
       logLevel,
       audioLatencyHint: "playback",
+      inputProps: passedInputProps,
       children: /* @__PURE__ */ jsx163(ThumbnailEmitterContext.Provider, {
         value: emitter,
         children: /* @__PURE__ */ jsx163(ThumbnailUI_default, {
@@ -24451,7 +24574,7 @@ import {
   useCallback as useCallback43,
   useEffect as useEffect55,
   useMemo as useMemo53,
-  useRef as useRef39,
+  useRef as useRef41,
   useState as useState47
 } from "react";
 
@@ -25235,13 +25358,13 @@ import {
   createRef as createRef4,
   useCallback as useCallback35,
   useEffect as useEffect46,
-  useRef as useRef36,
+  useRef as useRef38,
   useState as useState40
 } from "react";
 
 // src/components/homepage/Demo/Card.tsx
 init_esm();
-import { useCallback as useCallback31, useRef as useRef31 } from "react";
+import { useCallback as useCallback31, useRef as useRef34 } from "react";
 
 // src/components/homepage/Demo/math.ts
 var paddingAndMargin = 20;
@@ -25276,7 +25399,7 @@ var getIndexFromPosition = (clientX, clientY) => {
 
 // src/components/homepage/Demo/Switcher.tsx
 import { useCallback as useCallback29 } from "react";
-import { jsx as jsx55, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs15 } from "react/jsx-runtime";
 var Switcher = ({ type, theme, onTap }) => {
   const onPointerDown = useCallback29((e) => {
     e.stopPropagation();
@@ -25301,7 +25424,7 @@ var Switcher = ({ type, theme, onTap }) => {
       alignItems: "center",
       display: "flex"
     },
-    children: /* @__PURE__ */ jsxs14("svg", {
+    children: /* @__PURE__ */ jsxs15("svg", {
       style: { height: switcherSize / 2 },
       viewBox: "0 0 320 512",
       children: [
@@ -25319,7 +25442,7 @@ var Switcher = ({ type, theme, onTap }) => {
 };
 
 // src/components/homepage/Demo/Card.tsx
-import { jsx as jsx57, jsxs as jsxs15, Fragment as Fragment7 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs16, Fragment as Fragment7 } from "react/jsx-runtime";
 var arePositionsEqual = (a, b) => {
   return a.every((pos, i) => {
     return pos.x === b[i].x && pos.y === b[i].y;
@@ -25339,7 +25462,7 @@ var Card2 = ({
   onClickRight
 }) => {
   const refToUse = refsToUse[index2];
-  const stopPrevious = useRef31([]);
+  const stopPrevious = useRef34([]);
   let newIndices = [...indices];
   const applyPositions = useCallback31((except) => {
     let stopped = false;
@@ -25496,7 +25619,7 @@ var Card2 = ({
       borderRadius: 13,
       cursor: "grab"
     },
-    children: /* @__PURE__ */ jsxs15(AbsoluteFill, {
+    children: /* @__PURE__ */ jsxs16(AbsoluteFill, {
       style: {
         backgroundColor: color,
         borderRadius: 12
@@ -25504,7 +25627,7 @@ var Card2 = ({
       className: "transition-opacity duration-200",
       children: [
         content,
-        withSwitcher ? /* @__PURE__ */ jsxs15(Fragment7, {
+        withSwitcher ? /* @__PURE__ */ jsxs16(Fragment7, {
           children: [
             /* @__PURE__ */ jsx57(Switcher, {
               onTap: onClickLeft,
@@ -25525,7 +25648,7 @@ var Card2 = ({
 
 // src/components/homepage/Demo/CurrentCountry.tsx
 init_esm();
-import { jsx as jsx58, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs17 } from "react/jsx-runtime";
 var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
   const { fps } = useVideoConfig();
   const frame = useCurrentFrame();
@@ -25540,7 +25663,7 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
     frame,
     delay: 10
   });
-  return /* @__PURE__ */ jsxs16(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs17(AbsoluteFill, {
     style: { overflow: "hidden" },
     children: [
       /* @__PURE__ */ jsx58(AbsoluteFill, {
@@ -25558,7 +25681,7 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
           })
         })
       }),
-      /* @__PURE__ */ jsxs16(AbsoluteFill, {
+      /* @__PURE__ */ jsxs17(AbsoluteFill, {
         style: {
           alignItems: "center",
           justifyContent: "center"
@@ -25607,7 +25730,7 @@ import {
   useCallback as useCallback33,
   useEffect as useEffect45,
   useImperativeHandle as useImperativeHandle13,
-  useRef as useRef35
+  useRef as useRef37
 } from "react";
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
@@ -25679,7 +25802,7 @@ var DisplayedEmoji = ({ emoji }) => {
 };
 
 // src/components/homepage/Demo/EmojiCard.tsx
-import { jsx as jsx61, jsxs as jsxs17, Fragment as Fragment8 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs18, Fragment as Fragment8 } from "react/jsx-runtime";
 var applyTransforms = ({ ref1, ref2, ref3, transforms }) => {
   ref1.style.transform = `translateX(${transforms[0]}%)`;
   ref2.style.transform = `translateX(${transforms[1]}%)`;
@@ -25720,10 +25843,10 @@ var emojiStyle = {
   top: "calc(50% - 50px)"
 };
 var EmojiCardRefFn = ({ emojiIndex }, ref) => {
-  const ref1 = useRef35(null);
-  const ref2 = useRef35(null);
-  const ref3 = useRef35(null);
-  const transforms = useRef35([-100, 0, 100]);
+  const ref1 = useRef37(null);
+  const ref2 = useRef37(null);
+  const ref3 = useRef37(null);
+  const transforms = useRef37([-100, 0, 100]);
   const onLeft = useCallback33(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
@@ -25775,7 +25898,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
     });
   }, []);
   const env = useRemotionEnvironment();
-  return /* @__PURE__ */ jsxs17(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs18(AbsoluteFill, {
     style: {
       justifyContent: "center",
       alignItems: "center",
@@ -25807,7 +25930,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
           children: /* @__PURE__ */ jsx61(DisplayedEmoji, {
             emoji: emojiIndex
           })
-        }) : /* @__PURE__ */ jsxs17(Fragment8, {
+        }) : /* @__PURE__ */ jsxs18(Fragment8, {
           children: [
             /* @__PURE__ */ jsx61("div", {
               ref: ref1,
@@ -25861,7 +25984,7 @@ var Minus = ({ leftOffset, minusSignOpacity }) => {
 };
 
 // src/components/homepage/Demo/DigitWheel.tsx
-import { jsx as jsx67, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs19 } from "react/jsx-runtime";
 var DURATION = 25;
 var items = 10;
 var NUM_WIDTH = 36;
@@ -25905,7 +26028,7 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
   const rotation = progresses.map((p, i) => {
     return p * offsets[i];
   }).reduce((a, b) => a + b, 0) + rotations[0];
-  return /* @__PURE__ */ jsxs18("div", {
+  return /* @__PURE__ */ jsxs19("div", {
     style: {
       position: "relative",
       width: NUM_WIDTH,
@@ -25966,14 +26089,14 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
 };
 
 // src/components/homepage/Demo/TemperatureNumber.tsx
-import { jsx as jsx68, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs20 } from "react/jsx-runtime";
 var TemperatureNumber = ({ theme, temperatureInCelsius }) => {
   const temperatureInFahrenheit = temperatureInCelsius * 9 / 5 + 32;
   const celsiusDegree = Math.abs(temperatureInCelsius);
   const fahrenheitDegree = Math.abs(temperatureInFahrenheit);
   const paddedCelsiusDegree = String(celsiusDegree).padStart(fahrenheitDegree.toFixed(0).length, "0").split("");
   const paddedFahrenheitDegree = fahrenheitDegree.toFixed(0).padStart(paddedCelsiusDegree.length, "0").split("");
-  return /* @__PURE__ */ jsxs19("div", {
+  return /* @__PURE__ */ jsxs20("div", {
     style: {
       lineHeight: 1.1,
       fontFamily: "GTPlanar",
@@ -26021,13 +26144,13 @@ var TemperatureNumber = ({ theme, temperatureInCelsius }) => {
 };
 
 // src/components/homepage/Demo/Temperature.tsx
-import { jsx as jsx69, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs21 } from "react/jsx-runtime";
 var Temperature = ({ theme, city, temperatureInCelsius }) => {
   if (temperatureInCelsius === null) {
     return null;
   }
   return /* @__PURE__ */ jsx69(AbsoluteFill, {
-    children: /* @__PURE__ */ jsxs20(AbsoluteFill, {
+    children: /* @__PURE__ */ jsxs21(AbsoluteFill, {
       style: {
         alignItems: "center",
         justifyContent: "center",
@@ -26035,7 +26158,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
         paddingRight: 20
       },
       children: [
-        /* @__PURE__ */ jsxs20("div", {
+        /* @__PURE__ */ jsxs21("div", {
           style: {
             color: "#0b84f3",
             fontFamily: "GTPlanar",
@@ -26061,7 +26184,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
 // src/components/homepage/Demo/TrendingRepos.tsx
 init_esm();
 import { useMemo as useMemo47 } from "react";
-import { jsx as jsx70, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs25 } from "react/jsx-runtime";
 var TrendingRepoItem = ({ repo, theme, number }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
@@ -26083,7 +26206,7 @@ var TrendingRepoItem = ({ repo, theme, number }) => {
       opacity: progress
     };
   }, [progress, theme]);
-  return /* @__PURE__ */ jsxs21("div", {
+  return /* @__PURE__ */ jsxs25("div", {
     style: item,
     children: [
       number,
@@ -26114,7 +26237,7 @@ var TrendingRepos = ({ theme, trending }) => {
         paddingLeft: 20,
         paddingRight: 20
       },
-      children: /* @__PURE__ */ jsxs21("div", {
+      children: /* @__PURE__ */ jsxs25("div", {
         children: [
           /* @__PURE__ */ jsx70("div", {
             style: {
@@ -26176,14 +26299,14 @@ var Cards = ({
   location,
   trending
 }) => {
-  const container4 = useRef36(null);
+  const container4 = useRef38(null);
   const [refs] = useState40(() => {
     return new Array(4).fill(true).map(() => {
       return createRef4();
     });
   });
-  const positions = useRef36(getInitialPositions());
-  const shouldBePositions = useRef36(getInitialPositions());
+  const positions = useRef38(getInitialPositions());
+  const shouldBePositions = useRef38(getInitialPositions());
   const { isRendering } = useRemotionEnvironment();
   useEffect46(() => {
     const { current } = container4;
@@ -26201,7 +26324,7 @@ var Cards = ({
       current.removeEventListener("click", onClick);
     };
   }, [onToggle]);
-  const ref = useRef36(null);
+  const ref = useRef38(null);
   const onLeft = useCallback35(() => {
     ref.current?.onRight();
     onRightPress();
@@ -26247,7 +26370,7 @@ var Cards = ({
 };
 
 // src/components/homepage/Demo/Comp.tsx
-import { jsx as jsx75, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs27 } from "react/jsx-runtime";
 var getDataAndProps = async () => {
   const location = await fetch("https://bugs-git-homepage-player-remotion.vercel.app/api/location").then((res) => res.json());
   const trending = await fetch(`https://bugs.remotion.dev/trending?lat=${location.latitude}&lng=${location.longitude}&country=${location.country}`).then((res) => res.json()).then((data) => {
@@ -26308,7 +26431,7 @@ var HomepageVideoComp = ({
       c.free();
     };
   }, []);
-  return /* @__PURE__ */ jsxs25(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs27(AbsoluteFill, {
     style: {
       backgroundColor: theme === "dark" ? "#222" : "#fafafa"
     },
@@ -26378,7 +26501,7 @@ var DemoErrorIcon = () => {
 };
 
 // src/components/homepage/Demo/DoneCheckmark.tsx
-import { jsx as jsx79, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs28 } from "react/jsx-runtime";
 var DoneCheckmark = () => {
   return /* @__PURE__ */ jsx79("div", {
     style: {
@@ -26391,7 +26514,7 @@ var DoneCheckmark = () => {
       justifyContent: "center",
       animation: "jump 0.2s ease-out"
     },
-    children: /* @__PURE__ */ jsxs27("svg", {
+    children: /* @__PURE__ */ jsxs28("svg", {
       viewBox: "0 0 20 20",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -26420,7 +26543,7 @@ var DoneCheckmark = () => {
 };
 
 // src/components/homepage/Demo/Progress.tsx
-import { jsx as jsx80, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs29 } from "react/jsx-runtime";
 var Progress = ({ progress }) => {
   const inner2 = makeCircle({
     radius: 10
@@ -26430,7 +26553,7 @@ var Progress = ({ progress }) => {
     closePath: false,
     radius: 10
   });
-  return /* @__PURE__ */ jsxs28("svg", {
+  return /* @__PURE__ */ jsxs29("svg", {
     viewBox: `0 0 ${inner2.width} ${inner2.height}`,
     style: { overflow: "visible", height: 22 },
     children: [
@@ -26453,20 +26576,20 @@ var Progress = ({ progress }) => {
 
 // src/components/homepage/Demo/Spinner.tsx
 import { useMemo as useMemo49 } from "react";
-import { jsx as jsx81, jsxs as jsxs29, Fragment as Fragment9 } from "react/jsx-runtime";
-var viewBox = 100;
-var lines = 8;
+import { jsx as jsx81, jsxs as jsxs30, Fragment as Fragment9 } from "react/jsx-runtime";
+var viewBox2 = 100;
+var lines2 = 8;
 var className2 = "__remotion_spinner_line";
 var remotionSpinnerAnimation = "__remotion_spinner_animation";
-var translated2 = "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 Spinner = ({ size: size4, duration }) => {
+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 = useMemo49(() => {
     return {
       width: size4,
       height: size4
     };
   }, [size4]);
-  return /* @__PURE__ */ jsxs29(Fragment9, {
+  return /* @__PURE__ */ jsxs30(Fragment9, {
     children: [
       /* @__PURE__ */ jsx81("style", {
         type: "text/css",
@@ -26487,16 +26610,16 @@ var Spinner = ({ size: size4, duration }) => {
       }),
       /* @__PURE__ */ jsx81("svg", {
         style: style2,
-        viewBox: `0 0 ${viewBox} ${viewBox}`,
-        children: new Array(lines).fill(true).map((_, index2) => {
+        viewBox: `0 0 ${viewBox2} ${viewBox2}`,
+        children: new Array(lines2).fill(true).map((_, index2) => {
           return /* @__PURE__ */ jsx81("path", {
             className: className2,
             style: {
-              rotate: `${index2 * Math.PI * 2 / lines}rad`,
+              rotate: `${index2 * Math.PI * 2 / lines2}rad`,
               transformOrigin: "center center",
-              animationDelay: `${index2 * (duration / lines) - duration}s`
+              animationDelay: `${index2 * (duration / lines2) - duration}s`
             },
-            d: translated2,
+            d: translated3,
             fill: PALETTE.TEXT_COLOR
           }, index2);
         })
@@ -26594,7 +26717,7 @@ var RenderButton = ({ renderData, onError }) => {
     disabled: !renderData || state.type !== "idle",
     children: state.type === "error" ? /* @__PURE__ */ jsx85(DemoErrorIcon, {}) : state.type === "done" ? /* @__PURE__ */ jsx85(DoneCheckmark, {}) : state.type === "progress" ? /* @__PURE__ */ jsx85(Progress, {
       progress: state.progress
-    }) : state.type === "invoking" ? /* @__PURE__ */ jsx85(Spinner, {
+    }) : state.type === "invoking" ? /* @__PURE__ */ jsx85(Spinner2, {
       size: 20,
       duration: 1
     }) : /* @__PURE__ */ jsx85("svg", {
@@ -26613,7 +26736,7 @@ var RenderButton = ({ renderData, onError }) => {
 };
 
 // src/components/homepage/Demo/DownloadNudge.tsx
-import { jsx as jsx87, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs31 } from "react/jsx-runtime";
 var origWidth = 77;
 var scale = 0.4;
 var Icon3 = () => {
@@ -26643,10 +26766,10 @@ var DownloadNudge = () => {
       paddingRight: 22,
       paddingTop: 20
     },
-    children: /* @__PURE__ */ jsxs30("div", {
+    children: /* @__PURE__ */ jsxs31("div", {
       children: [
         /* @__PURE__ */ jsx87(Icon3, {}),
-        /* @__PURE__ */ jsxs30("div", {
+        /* @__PURE__ */ jsxs31("div", {
           style: {
             fontFamily: FONTS.GTPLANAR,
             fontSize: 15,
@@ -26673,7 +26796,7 @@ var DownloadNudge = () => {
 };
 
 // src/components/homepage/Demo/DragAndDropNudge.tsx
-import { jsx as jsx88, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs34 } from "react/jsx-runtime";
 var origWidth2 = 37;
 var scale2 = 0.4;
 var Icon5 = () => {
@@ -26703,7 +26826,7 @@ var DragAndDropNudge = () => {
       marginTop: 50
     },
     className: "ml-4 lg:-ml-5",
-    children: /* @__PURE__ */ jsxs31("div", {
+    children: /* @__PURE__ */ jsxs34("div", {
       children: [
         /* @__PURE__ */ jsx88("div", {
           style: {
@@ -26724,7 +26847,7 @@ var DragAndDropNudge = () => {
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
 init_esm();
-import { useCallback as useCallback39, useEffect as useEffect49, useMemo as useMemo51, useRef as useRef37, useState as useState45 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect49, useMemo as useMemo51, useRef as useRef39, useState as useState45 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
 import { useCallback as useCallback38, useEffect as useEffect48, useMemo as useMemo50, useState as useState43 } from "react";
@@ -26769,7 +26892,7 @@ var useElementSize2 = (ref) => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { jsx as jsx89, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs36 } from "react/jsx-runtime";
 var getFrameFromX2 = (clientX, durationInFrames, width2) => {
   const pos = clientX;
   const frame = Math.round(interpolate2(pos, [0, width2], [0, durationInFrames - 1], {
@@ -26853,7 +26976,7 @@ var PlayerSeekBar2 = ({
   outFrame,
   playerRef
 }) => {
-  const containerRef = useRef37(null);
+  const containerRef = useRef39(null);
   const barHovered = useHoverState2(containerRef, false);
   const size4 = useElementSize2(containerRef.current);
   const [playing, setPlaying] = useState45(false);
@@ -26978,12 +27101,12 @@ var PlayerSeekBar2 = ({
       position: "absolute"
     };
   }, [durationInFrames, inFrame, outFrame]);
-  return /* @__PURE__ */ jsxs34("div", {
+  return /* @__PURE__ */ jsxs36("div", {
     ref: containerRef,
     onPointerDown,
     style: containerStyle3,
     children: [
-      /* @__PURE__ */ jsxs34("div", {
+      /* @__PURE__ */ jsxs36("div", {
         style: barBackground2,
         children: [
           /* @__PURE__ */ jsx89("div", {
@@ -27002,7 +27125,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback40, useEffect as useEffect50, useRef as useRef38, useState as useState46 } from "react";
+import { useCallback as useCallback40, useEffect as useEffect50, useRef as useRef40, useState as useState46 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx90 } from "react/jsx-runtime";
@@ -27062,7 +27185,7 @@ import { jsx as jsx91 } from "react/jsx-runtime";
 var PlayerVolume = ({ playerRef }) => {
   const [muted, setIsMuted] = useState46(() => playerRef.current?.isMuted() ?? true);
   const [isHovered, setIsHovered] = useState46(false);
-  const timerRef = useRef38(null);
+  const timerRef = useRef40(null);
   useEffect50(() => {
     const { current } = playerRef;
     if (!current) {
@@ -27210,7 +27333,7 @@ var TimeDisplay = ({ fps, playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayerControls.tsx
-import { jsx as jsx98, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs37 } from "react/jsx-runtime";
 var Separator2 = () => {
   return /* @__PURE__ */ jsx98("div", {
     style: {
@@ -27220,7 +27343,7 @@ var Separator2 = () => {
   });
 };
 var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
-  return /* @__PURE__ */ jsxs36("div", {
+  return /* @__PURE__ */ jsxs37("div", {
     className: "flex flex-row items-center bg-pane",
     children: [
       /* @__PURE__ */ jsx98(PlayPauseButton, {
@@ -27264,7 +27387,7 @@ var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
 
 // src/components/homepage/Demo/ThemeNudge.tsx
 import React59 from "react";
-import { jsx as jsx99, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs38 } from "react/jsx-runtime";
 var origWidth3 = 21;
 var scale3 = 0.4;
 var Icon6 = () => {
@@ -27299,9 +27422,9 @@ var ThemeNudge = () => {
       position: "absolute",
       right: 0
     },
-    children: /* @__PURE__ */ jsxs37("div", {
+    children: /* @__PURE__ */ jsxs38("div", {
       children: [
-        /* @__PURE__ */ jsxs37("div", {
+        /* @__PURE__ */ jsxs38("div", {
           style: {
             fontFamily: FONTS.GTPLANAR,
             fontSize: 15,
@@ -27312,7 +27435,7 @@ var ThemeNudge = () => {
             marginTop: 5
           },
           children: [
-            /* @__PURE__ */ jsxs37("a", {
+            /* @__PURE__ */ jsxs38("a", {
               href: "#",
               onClick: toggleTheme,
               className: "bluelink",
@@ -27334,7 +27457,7 @@ var ThemeNudge = () => {
 };
 
 // src/components/homepage/Demo/index.tsx
-import { jsx as jsx100, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs39 } from "react/jsx-runtime";
 var style3 = {
   width: "100%",
   aspectRatio: "640 / 360",
@@ -27351,7 +27474,7 @@ var playerWrapper = {
 var Demo = () => {
   const { colorMode } = useColorMode();
   const [data2, setData] = useState47(null);
-  const ref = useRef39(null);
+  const ref = useRef41(null);
   const [isFullscreen, setIsFullscreen] = useState47(false);
   const [cardOrder, setCardOrder] = useState47([0, 1, 2, 3]);
   const [emojiIndex, setEmojiIndex] = useState47(0);
@@ -27402,21 +27525,21 @@ var Demo = () => {
   const onError = useCallback43(() => {
     setError(true);
   }, []);
-  return /* @__PURE__ */ jsxs38("div", {
+  return /* @__PURE__ */ jsxs39("div", {
     children: [
       /* @__PURE__ */ jsx100("br", {}),
       /* @__PURE__ */ jsx100("br", {}),
       /* @__PURE__ */ jsx100(SectionTitle, {
         children: "Demo"
       }),
-      /* @__PURE__ */ jsxs38("div", {
+      /* @__PURE__ */ jsxs39("div", {
         style: { height: 140, position: "relative" },
         children: [
           /* @__PURE__ */ jsx100(DragAndDropNudge, {}),
           /* @__PURE__ */ jsx100(ThemeNudge, {})
         ]
       }),
-      /* @__PURE__ */ jsxs38("div", {
+      /* @__PURE__ */ jsxs39("div", {
         style: playerWrapper,
         children: [
           /* @__PURE__ */ jsx100(Player, {
@@ -27498,15 +27621,15 @@ var ClearButton = (props) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef31, useEffect as useEffect57, useImperativeHandle as useImperativeHandle14, useRef as useRef41 } from "react";
+import { forwardRef as forwardRef31, useEffect as useEffect57, useImperativeHandle as useImperativeHandle14, useRef as useRef45 } 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 useEffect56, useRef as useRef40, useState as useState48 } from "react";
+import { forwardRef as forwardRef30, useCallback as useCallback45, useEffect as useEffect56, useRef as useRef43, useState as useState48 } from "react";
 import { jsx as jsx105 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
-  const targetRef = useRef40(null);
+  const targetRef = useRef43(null);
   useEffect56(() => {
     refs.forEach((ref) => {
       if (!ref)
@@ -27521,9 +27644,9 @@ var useCombinedRefs = function(...refs) {
   return targetRef;
 };
 var VideoPlayerWithControls = forwardRef30(({ playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay }, ref) => {
-  const videoRef = useRef40(null);
+  const videoRef = useRef43(null);
   const metaRef = useCombinedRefs(ref, videoRef);
-  const playerRef = useRef40(null);
+  const playerRef = useRef43(null);
   const [playerInitTime] = useState48(Date.now());
   const videoError = useCallback45((event) => onError(event), [onError]);
   const onImageLoad = useCallback45((event) => {
@@ -27608,7 +27731,7 @@ var getVideoToPlayUrl = (muxId) => {
   return `https://stream.mux.com/${muxId}.m3u8`;
 };
 var MuxVideoForward = ({ muxId, ...props }, ref) => {
-  const videoRef = useRef41(null);
+  const videoRef = useRef45(null);
   const vidUrl = getVideoToPlayUrl(muxId);
   useImperativeHandle14(ref, () => videoRef.current, []);
   useEffect57(() => {
@@ -27639,9 +27762,9 @@ var MuxVideoForward = ({ muxId, ...props }, ref) => {
 var MuxVideo = forwardRef31(MuxVideoForward);
 
 // src/components/homepage/EditorStarterSection.tsx
-import { jsx as jsx108, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs40 } from "react/jsx-runtime";
 var EditorStarterSection = () => {
-  return /* @__PURE__ */ jsxs39("div", {
+  return /* @__PURE__ */ jsxs40("div", {
     children: [
       /* @__PURE__ */ jsx108(SectionTitle, {
         children: "Build your own video editor"
@@ -27649,7 +27772,7 @@ var EditorStarterSection = () => {
       /* @__PURE__ */ jsx108("br", {}),
       /* @__PURE__ */ jsx108("div", {
         className: "card flex p-0 overflow-hidden",
-        children: /* @__PURE__ */ jsxs39("div", {
+        children: /* @__PURE__ */ jsxs40("div", {
           className: "flex-1 flex flex-col lg:flex-row justify-center",
           children: [
             /* @__PURE__ */ jsx108("div", {
@@ -27663,7 +27786,7 @@ var EditorStarterSection = () => {
                 muted: true
               })
             }),
-            /* @__PURE__ */ jsxs39("div", {
+            /* @__PURE__ */ jsxs40("div", {
               className: "p-6 flex-1 flex flex-col h-full",
               children: [
                 /* @__PURE__ */ jsx108("div", {
@@ -27677,7 +27800,7 @@ var EditorStarterSection = () => {
                 /* @__PURE__ */ jsx108("div", {
                   className: "h-5"
                 }),
-                /* @__PURE__ */ jsxs39("div", {
+                /* @__PURE__ */ jsxs40("div", {
                   className: "flex gap-2 items-center",
                   children: [
                     /* @__PURE__ */ jsx108("a", {
@@ -27725,7 +27848,7 @@ var EditorStarterSection_default = EditorStarterSection;
 
 // src/components/homepage/EvaluateRemotion.tsx
 import { useEffect as useEffect58, useState as useState49 } from "react";
-import { jsx as jsx109, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs41 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
   const [dailyAvatars, setDailyAvatars] = useState49([]);
   useEffect58(() => {
@@ -27755,10 +27878,10 @@ var EvaluateRemotionSection = () => {
     }
     setDailyAvatars(selectedAvatars);
   }, []);
-  return /* @__PURE__ */ jsxs40("div", {
+  return /* @__PURE__ */ jsxs41("div", {
     className: "flex flex-col lg:flex-row gap-2",
     children: [
-      /* @__PURE__ */ jsxs40("div", {
+      /* @__PURE__ */ jsxs41("div", {
         className: "card flex-1 flex flex-col",
         children: [
           /* @__PURE__ */ jsx109("div", {
@@ -27784,7 +27907,7 @@ var EvaluateRemotionSection = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs40("div", {
+      /* @__PURE__ */ jsxs41("div", {
         className: "card flex-1 flex flex-col",
         children: [
           /* @__PURE__ */ jsx109("div", {
@@ -27798,7 +27921,7 @@ var EvaluateRemotionSection = () => {
           /* @__PURE__ */ jsx109("div", {
             className: "flex-1"
           }),
-          /* @__PURE__ */ jsxs40("div", {
+          /* @__PURE__ */ jsxs41("div", {
             className: "flex flex-row justify-between",
             children: [
               /* @__PURE__ */ jsx109("a", {
@@ -27828,7 +27951,7 @@ var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/IfYouKnowReact.tsx
 import { useEffect as useEffect59, useState as useState50 } from "react";
-import { jsx as jsx110, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs43 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
     return false;
@@ -27848,7 +27971,7 @@ var IfYouKnowReact = () => {
       setVid("/img/compose.mp4");
     }
   }, []);
-  return /* @__PURE__ */ jsxs41("div", {
+  return /* @__PURE__ */ jsxs43("div", {
     className: "flex flex-col lg:flex-row text-left justify-start lg:justify-end items-start lg:mb-0 gap-6 mt-8",
     children: [
       /* @__PURE__ */ jsx110("video", {
@@ -27859,9 +27982,9 @@ var IfYouKnowReact = () => {
         loop: true,
         className: "w-[500px] cursor-default! relative lg:-translate-x-8 -mb-40 lg:mt-0 lg:mb-0"
       }),
-      /* @__PURE__ */ jsxs41("div", {
+      /* @__PURE__ */ jsxs43("div", {
         children: [
-          /* @__PURE__ */ jsxs41("h2", {
+          /* @__PURE__ */ jsxs43("h2", {
             className: "text-4xl fontbrand pt-20",
             children: [
               /* @__PURE__ */ jsx110("span", {
@@ -27878,7 +28001,7 @@ var IfYouKnowReact = () => {
           /* @__PURE__ */ jsx110("div", {
             className: "h-4"
           }),
-          /* @__PURE__ */ jsxs41("a", {
+          /* @__PURE__ */ jsxs43("a", {
             className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
             href: "/docs/the-fundamentals",
             children: [
@@ -27903,7 +28026,7 @@ var IfYouKnowReact = () => {
 
 // src/components/homepage/NewsletterButton.tsx
 import { useCallback as useCallback46, useState as useState51 } from "react";
-import { jsx as jsx111, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs45 } from "react/jsx-runtime";
 var NewsletterButton = () => {
   const [email, setEmail] = useState51("");
   const [submitting, setSubmitting] = useState51(false);
@@ -27935,32 +28058,32 @@ var NewsletterButton = () => {
       className: "flex flex-col",
       children: /* @__PURE__ */ jsx111("div", {
         className: "w-full",
-        children: /* @__PURE__ */ jsxs43("div", {
+        children: /* @__PURE__ */ jsxs45("div", {
           className: "flex flex-col flex-1",
           children: [
             /* @__PURE__ */ jsx111(SectionTitle, {
               children: "Newsletter"
             }),
-            /* @__PURE__ */ jsxs43("form", {
+            /* @__PURE__ */ jsxs45("form", {
               onSubmit: handleSubmit,
               style: {
                 width: "100%"
               },
               children: [
-                /* @__PURE__ */ jsxs43("div", {
+                /* @__PURE__ */ jsxs45("div", {
                   className: "fontbrand text-center mb-10 -mt-4",
                   children: [
                     "Read about new features and noteworthy updates we have made on Remotion once in a while.",
                     " "
                   ]
                 }),
-                /* @__PURE__ */ jsxs43("div", {
+                /* @__PURE__ */ jsxs45("div", {
                   className: "flex flex-col md:flex-row gap-2 justify-center",
                   children: [
-                    /* @__PURE__ */ jsx111("input", {
-                      className: "w-full dark:bg-[#121212] md:max-w-[400px] rounded-lg border-effect border-black outline-none h-14 px-3 fontbrand text-lg box-border",
+                    /* @__PURE__ */ jsx111(Input, {
                       disabled: submitting,
                       value: email,
+                      className: "md:max-w-[400px]",
                       onChange: (e) => setEmail(e.target.value),
                       type: "email",
                       required: true,
@@ -27990,21 +28113,21 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect60, useRef as useRef43, useState as useState53 } from "react";
-import { jsx as jsx114, jsxs as jsxs45 } from "react/jsx-runtime";
+import { useEffect as useEffect60, useRef as useRef46, useState as useState53 } from "react";
+import { jsx as jsx114, jsxs as jsxs46 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
   marginLeft: 10
 };
 var ParameterizeAndEdit = () => {
-  const ref = useRef43(null);
+  const ref = useRef46(null);
   const [vid, setVid] = useState53("/img/editing-vp9-chrome.webm");
   useEffect60(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
     }
   }, []);
-  return /* @__PURE__ */ jsxs45("div", {
+  return /* @__PURE__ */ jsxs46("div", {
     ref,
     className: "flex flex-col lg:flex-row justify-start lg:justify-end items-start gap-6 mt-20 lg:mt-0",
     children: [
@@ -28023,11 +28146,11 @@ var ParameterizeAndEdit = () => {
           }
         })
       }),
-      /* @__PURE__ */ jsxs45("div", {
+      /* @__PURE__ */ jsxs46("div", {
         style: { flex: 1 },
         className: "font-brand pt-4",
         children: [
-          /* @__PURE__ */ jsxs45("h2", {
+          /* @__PURE__ */ jsxs46("h2", {
             className: "fontbrand text-4xl",
             children: [
               "Edit ",
@@ -28037,7 +28160,7 @@ var ParameterizeAndEdit = () => {
               })
             ]
           }),
-          /* @__PURE__ */ jsxs45("p", {
+          /* @__PURE__ */ jsxs46("p", {
             className: "leading-relaxed",
             children: [
               "Parameterize your video by passing data.",
@@ -28048,10 +28171,10 @@ var ParameterizeAndEdit = () => {
           /* @__PURE__ */ jsx114("div", {
             className: "h-4"
           }),
-          /* @__PURE__ */ jsxs45("div", {
+          /* @__PURE__ */ jsxs46("div", {
             className: "leading-6",
             children: [
-              /* @__PURE__ */ jsxs45("a", {
+              /* @__PURE__ */ jsxs46("a", {
                 className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                 href: "/docs/studio",
                 children: [
@@ -28069,7 +28192,7 @@ var ParameterizeAndEdit = () => {
                 ]
               }),
               /* @__PURE__ */ jsx114("br", {}),
-              /* @__PURE__ */ jsxs45("a", {
+              /* @__PURE__ */ jsxs46("a", {
                 className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                 href: "/player",
                 children: [
@@ -28087,7 +28210,7 @@ var ParameterizeAndEdit = () => {
                 ]
               }),
               /* @__PURE__ */ jsx114("br", {}),
-              /* @__PURE__ */ jsxs45("a", {
+              /* @__PURE__ */ jsxs46("a", {
                 className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                 href: "/docs/editor-starter",
                 children: [
@@ -28113,15 +28236,15 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect61, useRef as useRef45, useState as useState55 } from "react";
-import { jsx as jsx116, jsxs as jsxs46 } from "react/jsx-runtime";
+import { useEffect as useEffect61, useRef as useRef47, useState as useState55 } from "react";
+import { jsx as jsx116, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
   marginLeft: 10
 };
 var RealMP4Videos = () => {
-  const ref = useRef45(null);
-  const videoRef = useRef45(null);
+  const ref = useRef47(null);
+  const videoRef = useRef47(null);
   const [vid, setVid] = useState55("/img/render-progress.webm");
   useEffect61(() => {
     if (isWebkit()) {
@@ -28145,7 +28268,7 @@ var RealMP4Videos = () => {
     observer.observe(current);
     return () => observer.unobserve(current);
   }, []);
-  return /* @__PURE__ */ jsxs46("div", {
+  return /* @__PURE__ */ jsxs47("div", {
     ref,
     className: "flex flex-col lg:flex-row mt-40 lg:mt-30 gap-6",
     children: [
@@ -28168,10 +28291,10 @@ var RealMP4Videos = () => {
         })
       }),
       " ",
-      /* @__PURE__ */ jsxs46("div", {
+      /* @__PURE__ */ jsxs47("div", {
         className: "font-brand",
         children: [
-          /* @__PURE__ */ jsxs46("h2", {
+          /* @__PURE__ */ jsxs47("h2", {
             className: "text-4xl fontbrand",
             children: [
               /* @__PURE__ */ jsx116("span", {
@@ -28181,7 +28304,7 @@ var RealMP4Videos = () => {
               " rendering"
             ]
           }),
-          /* @__PURE__ */ jsxs46("p", {
+          /* @__PURE__ */ jsxs47("p", {
             className: "leading-relaxed",
             children: [
               "Render the video .mp4 or other formats. ",
@@ -28193,10 +28316,10 @@ var RealMP4Videos = () => {
           /* @__PURE__ */ jsx116("div", {
             className: "h-4"
           }),
-          /* @__PURE__ */ jsxs46("div", {
+          /* @__PURE__ */ jsxs47("div", {
             className: "leading-6",
             children: [
-              /* @__PURE__ */ jsxs46("a", {
+              /* @__PURE__ */ jsxs47("a", {
                 className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                 href: "/docs/render",
                 children: [
@@ -28214,7 +28337,7 @@ var RealMP4Videos = () => {
                 ]
               }),
               /* @__PURE__ */ jsx116("br", {}),
-              /* @__PURE__ */ jsxs46("a", {
+              /* @__PURE__ */ jsxs47("a", {
                 className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                 href: "/lambda",
                 children: [
@@ -28240,7 +28363,7 @@ var RealMP4Videos = () => {
 };
 
 // src/components/homepage/TrustedByBanner.tsx
-import { jsx as jsx117, jsxs as jsxs47, Fragment as Fragment10 } from "react/jsx-runtime";
+import { jsx as jsx117, jsxs as jsxs48, Fragment as Fragment10 } from "react/jsx-runtime";
 var TrustedByBanner = () => {
   const logos = [
     {
@@ -28260,7 +28383,7 @@ var TrustedByBanner = () => {
     {
       id: "logo2",
       url: "https://www.musixmatch.com/",
-      light: /* @__PURE__ */ jsxs47("svg", {
+      light: /* @__PURE__ */ jsxs48("svg", {
         height: "40",
         viewBox: "0 0 229 48",
         fill: "none",
@@ -28320,7 +28443,7 @@ var TrustedByBanner = () => {
     {
       id: "logo3",
       url: "https://www.wistia.com/",
-      light: /* @__PURE__ */ jsxs47("svg", {
+      light: /* @__PURE__ */ jsxs48("svg", {
         height: "30",
         viewBox: "0 0 165 36",
         fill: "none",
@@ -28353,7 +28476,7 @@ var TrustedByBanner = () => {
       })
     }
   ];
-  return /* @__PURE__ */ jsxs47(Fragment10, {
+  return /* @__PURE__ */ jsxs48(Fragment10, {
     children: [
       /* @__PURE__ */ jsx117("h3", {
         className: "text-center mt-20 mb-10",
@@ -28374,8 +28497,8 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useEffect as useEffect63, useRef as useRef46, useState as useState56 } from "react";
-import { jsx as jsx118, jsxs as jsxs48 } from "react/jsx-runtime";
+import { useEffect as useEffect63, useRef as useRef48, useState as useState56 } from "react";
+import { jsx as jsx118, jsxs as jsxs49 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
   "Captions",
@@ -28430,8 +28553,8 @@ var VideoAppsShowcase = () => {
   const [activeTab, setActiveTab] = useState56(0);
   const [isMuted, setIsMuted] = useState56(true);
   const [isPlaying, setIsPlaying] = useState56(false);
-  const videoRef = useRef46(null);
-  const containerRef = useRef46(null);
+  const videoRef = useRef48(null);
+  const containerRef = useRef48(null);
   useEffect63(() => {
     const video = videoRef.current;
     if (video) {
@@ -28466,7 +28589,7 @@ var VideoAppsShowcase = () => {
       setIsMuted(newMutedState);
     }
   };
-  return /* @__PURE__ */ jsxs48("div", {
+  return /* @__PURE__ */ jsxs49("div", {
     ref: containerRef,
     children: [
       /* @__PURE__ */ jsx118(SectionTitle, {
@@ -28484,10 +28607,10 @@ var VideoAppsShowcase = () => {
       }),
       /* @__PURE__ */ jsx118("div", {
         className: "card flex p-0 overflow-hidden",
-        children: /* @__PURE__ */ jsxs48("div", {
+        children: /* @__PURE__ */ jsxs49("div", {
           className: "flex-1 flex flex-col lg:flex-row justify-center",
           children: [
-            /* @__PURE__ */ jsxs48("div", {
+            /* @__PURE__ */ jsxs49("div", {
               className: "w-full max-w-[500px] aspect-square relative overflow-hidden bg-[#eee] cursor-pointer",
               onClick: handlePlayPause,
               children: [
@@ -28545,7 +28668,7 @@ var VideoAppsShowcase = () => {
                 })
               ]
             }),
-            /* @__PURE__ */ jsxs48("div", {
+            /* @__PURE__ */ jsxs49("div", {
               className: "p-6 flex-1 flex flex-col h-full",
               children: [
                 /* @__PURE__ */ jsx118("div", {
@@ -28563,7 +28686,7 @@ var VideoAppsShowcase = () => {
                 /* @__PURE__ */ jsx118("div", {
                   className: "h-5"
                 }),
-                /* @__PURE__ */ jsxs48("a", {
+                /* @__PURE__ */ jsxs49("a", {
                   className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                   href: videoApps[activeTab].link,
                   children: [
@@ -28590,7 +28713,7 @@ var VideoAppsShowcase = () => {
           justifyContent: "center",
           display: "flex"
         },
-        children: /* @__PURE__ */ jsxs48("div", {
+        children: /* @__PURE__ */ jsxs49("div", {
           style: {
             fontFamily: "GTPlanar"
           },
@@ -29184,9 +29307,9 @@ var Blank = (props) => {
 };
 
 // src/components/icons/code-hike.tsx
-import { jsx as jsx120, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs50 } from "react/jsx-runtime";
 var CodeHike = (props) => {
-  return /* @__PURE__ */ jsxs49("svg", {
+  return /* @__PURE__ */ jsxs50("svg", {
     ...props,
     viewBox: "-100 -100 200 200",
     fill: "currentColor",
@@ -29256,9 +29379,9 @@ var MusicIcon = (props) => {
 };
 
 // src/components/icons/next.tsx
-import { jsx as jsx127, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs51 } from "react/jsx-runtime";
 var NextIcon = ({ style: style4 }) => {
-  return /* @__PURE__ */ jsxs50("svg", {
+  return /* @__PURE__ */ jsxs51("svg", {
     fill: "none",
     viewBox: "0 0 180 180",
     style: style4,
@@ -29279,7 +29402,7 @@ var NextIcon = ({ style: style4 }) => {
           r: "90"
         })
       }),
-      /* @__PURE__ */ jsxs50("g", {
+      /* @__PURE__ */ jsxs51("g", {
         mask: "url(#mask0_292_250)",
         children: [
           /* @__PURE__ */ jsx127("circle", {
@@ -29301,9 +29424,9 @@ var NextIcon = ({ style: style4 }) => {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs50("defs", {
+      /* @__PURE__ */ jsxs51("defs", {
         children: [
-          /* @__PURE__ */ jsxs50("linearGradient", {
+          /* @__PURE__ */ jsxs51("linearGradient", {
             gradientUnits: "userSpaceOnUse",
             id: "paint0_linear_292_250",
             x1: "109",
@@ -29321,7 +29444,7 @@ var NextIcon = ({ style: style4 }) => {
               })
             ]
           }),
-          /* @__PURE__ */ jsxs50("linearGradient", {
+          /* @__PURE__ */ jsxs51("linearGradient", {
             gradientUnits: "userSpaceOnUse",
             id: "paint1_linear_292_250",
             x1: "121",
@@ -29346,9 +29469,9 @@ var NextIcon = ({ style: style4 }) => {
 };
 
 // src/components/icons/overlay.tsx
-import { jsx as jsx128, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx128, jsxs as jsxs53 } from "react/jsx-runtime";
 var OverlayIcon = (props) => {
-  return /* @__PURE__ */ jsxs51("svg", {
+  return /* @__PURE__ */ jsxs53("svg", {
     viewBox: "0 0 576 512",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
@@ -29383,9 +29506,9 @@ var PromptToVideoIcon = (props) => {
 };
 
 // src/components/icons/recorder.tsx
-import { jsx as jsx130, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx130, jsxs as jsxs55 } from "react/jsx-runtime";
 var Recorder = (props) => {
-  return /* @__PURE__ */ jsxs53("svg", {
+  return /* @__PURE__ */ jsxs55("svg", {
     viewBox: "0 0 700 700",
     ...props,
     children: [
@@ -29408,7 +29531,7 @@ var Recorder = (props) => {
 };
 
 // src/components/icons/remix.tsx
-import { jsx as jsx131, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx131, jsxs as jsxs56 } from "react/jsx-runtime";
 var ReactRouterIcon = (props) => {
   return /* @__PURE__ */ jsx131("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -29418,7 +29541,7 @@ var ReactRouterIcon = (props) => {
     version: "1.1",
     preserveAspectRatio: "xMidYMid",
     ...props,
-    children: /* @__PURE__ */ jsxs55("g", {
+    children: /* @__PURE__ */ jsxs56("g", {
       children: [
         /* @__PURE__ */ jsx131("path", {
           d: "M78.0659341,92.5875806 C90.8837956,92.5875806 101.274726,82.1966508 101.274726,69.3787894 C101.274726,56.5609279 90.8837956,46.1699982 78.0659341,46.1699982 C65.2480726,46.1699982 54.8571429,56.5609279 54.8571429,69.3787894 C54.8571429,82.1966508 65.2480726,92.5875806 78.0659341,92.5875806 Z M23.2087913,139.005163 C36.0266526,139.005163 46.4175825,128.614233 46.4175825,115.796372 C46.4175825,102.97851 36.0266526,92.5875806 23.2087913,92.5875806 C10.3909298,92.5875806 0,102.97851 0,115.796372 C0,128.614233 10.3909298,139.005163 23.2087913,139.005163 Z M232.791209,139.005163 C245.60907,139.005163 256,128.614233 256,115.796372 C256,102.97851 245.60907,92.5875806 232.791209,92.5875806 C219.973347,92.5875806 209.582418,102.97851 209.582418,115.796372 C209.582418,128.614233 219.973347,139.005163 232.791209,139.005163 Z",
@@ -29434,9 +29557,9 @@ var ReactRouterIcon = (props) => {
 };
 
 // src/components/icons/render-server.tsx
-import { jsx as jsx134, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx134, jsxs as jsxs57 } from "react/jsx-runtime";
 var RenderServerIcon = (props) => {
-  return /* @__PURE__ */ jsxs56("svg", {
+  return /* @__PURE__ */ jsxs57("svg", {
     ...props,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -29689,7 +29812,7 @@ var useMobileLayout = () => {
 };
 
 // src/components/homepage/MoreTemplatesButton.tsx
-import { jsx as jsx147, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx147, jsxs as jsxs58 } from "react/jsx-runtime";
 var icon6 = {
   height: 16,
   marginLeft: 10
@@ -29699,7 +29822,7 @@ var MoreTemplatesButton = () => {
   return /* @__PURE__ */ jsx147("a", {
     href: "/templates",
     className: "no-underline text-inherit",
-    children: /* @__PURE__ */ jsxs57(Button, {
+    children: /* @__PURE__ */ jsxs58(Button, {
       className: "right-0 border-2 rounded-full text-inherit px-4 py-2 fontbrand font-semibold text-sm flex flex-row items-center h-10",
       children: [
         mobileLayout ? "Templates" : "Find a template",
@@ -29718,7 +29841,7 @@ var MoreTemplatesButton = () => {
 };
 
 // src/components/homepage/TemplateIcon.tsx
-import { jsx as jsx148, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx148, jsxs as jsxs59 } from "react/jsx-runtime";
 var icon7 = {
   display: "flex",
   width: 36,
@@ -29739,7 +29862,7 @@ var outer = {
 };
 var TemplateIcon = ({ children, label: label3 }) => {
   const mobileLayout = useMobileLayout();
-  return /* @__PURE__ */ jsxs58("span", {
+  return /* @__PURE__ */ jsxs59("span", {
     style: outer,
     children: [
       /* @__PURE__ */ jsx148("div", {
@@ -29755,7 +29878,7 @@ var TemplateIcon = ({ children, label: label3 }) => {
 };
 
 // src/components/homepage/ChooseTemplate.tsx
-import { jsx as jsx149, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx149, jsxs as jsxs60 } from "react/jsx-runtime";
 var ChooseTemplate = () => {
   return /* @__PURE__ */ jsx149("div", {
     style: {
@@ -29767,7 +29890,7 @@ var ChooseTemplate = () => {
         position: "relative",
         textAlign: "center"
       },
-      children: /* @__PURE__ */ jsxs59("div", {
+      children: /* @__PURE__ */ jsxs60("div", {
         className: "no-scroll-bar",
         style: {
           display: "inline-flex",
@@ -29804,7 +29927,7 @@ var ChooseTemplate = () => {
 import { useState as useState57 } from "react";
 
 // src/components/homepage/GitHubButton.tsx
-import { jsx as jsx150, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx150, jsxs as jsxs61 } from "react/jsx-runtime";
 var GithubIcon = () => {
   return /* @__PURE__ */ jsx150("svg", {
     viewBox: "0 0 496 512",
@@ -29816,7 +29939,7 @@ var GithubIcon = () => {
   });
 };
 var GithubButton = () => {
-  return /* @__PURE__ */ jsxs60("div", {
+  return /* @__PURE__ */ jsxs61("div", {
     className: "flex flex-row items-center text-base",
     children: [
       /* @__PURE__ */ jsx150(GithubIcon, {}),
@@ -29834,15 +29957,15 @@ var GithubButton = () => {
 };
 
 // src/components/homepage/GetStartedStrip.tsx
-import { jsx as jsx151, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx151, jsxs as jsxs63 } from "react/jsx-runtime";
 var GetStarted = () => {
   const [clicked, setClicked] = useState57(null);
-  return /* @__PURE__ */ jsxs61("div", {
+  return /* @__PURE__ */ jsxs63("div", {
     className: "flex flex-col lg:flex-row items-center justify-center text-center w-full",
     children: [
       /* @__PURE__ */ jsx151("div", {
         className: "w-full lg:w-auto",
-        children: /* @__PURE__ */ jsxs61("div", {
+        children: /* @__PURE__ */ jsxs63("div", {
           className: "flex flex-row w-full relative",
           children: [
             clicked ? /* @__PURE__ */ jsx151("div", {
@@ -29920,9 +30043,9 @@ var GetStarted = () => {
 };
 
 // src/components/homepage/WriteInReact.tsx
-import { jsx as jsx154, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx154, jsxs as jsxs65 } from "react/jsx-runtime";
 var WriteInReact = () => {
-  return /* @__PURE__ */ jsxs62("div", {
+  return /* @__PURE__ */ jsxs65("div", {
     children: [
       /* @__PURE__ */ jsx154("h1", {
         className: "text-5xl lg:text-[5em] text-center fontbrand font-black leading-none ",
@@ -29931,7 +30054,7 @@ var WriteInReact = () => {
         },
         children: "Make videos programmatically."
       }),
-      /* @__PURE__ */ jsxs62("p", {
+      /* @__PURE__ */ jsxs65("p", {
         style: {
           textShadow: "0 5px 30px var(--background)"
         },
@@ -29954,7 +30077,7 @@ var WriteInReact = () => {
 };
 
 // src/components/Homepage.tsx
-import { jsx as jsx156, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx156, jsxs as jsxs66 } from "react/jsx-runtime";
 "use client";
 var NewLanding = ({ colorMode, setColorMode }) => {
   return /* @__PURE__ */ jsx156(ColorModeProvider, {
@@ -29962,7 +30085,7 @@ var NewLanding = ({ colorMode, setColorMode }) => {
     setColorMode,
     children: /* @__PURE__ */ jsx156("div", {
       className: "w-full relative",
-      children: /* @__PURE__ */ jsxs63("div", {
+      children: /* @__PURE__ */ jsxs66("div", {
         style: { overflow: "hidden" },
         children: [
           /* @__PURE__ */ jsx156("div", {
@@ -29972,7 +30095,7 @@ var NewLanding = ({ colorMode, setColorMode }) => {
           /* @__PURE__ */ jsx156("br", {}),
           /* @__PURE__ */ jsx156("br", {}),
           /* @__PURE__ */ jsx156("br", {}),
-          /* @__PURE__ */ jsxs63("div", {
+          /* @__PURE__ */ jsxs66("div", {
             className: "max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 overflow-x-clip md:overflow-x-visible relative",
             children: [
               /* @__PURE__ */ jsx156(WriteInReact, {}),