@remotion/promo-pages 4.0.474 → 4.0.475

package/dist/team.js

@@ -216,8 +216,8 @@ var TitleTeamCards = () => {
 // ../design/dist/esm/index.mjs
 import * as React23 from "react";
 import * as React3 from "react";
-import { Fragment as Fragment2, jsx as jsx41 } from "react/jsx-runtime";
-import React52, { useCallback as useCallback25, useRef as useRef29, useState as useState22 } from "react";
+import { Fragment as Fragment2, jsx as jsx44 } from "react/jsx-runtime";
+import React52, { useCallback as useCallback26, useRef as useRef210, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -1559,7 +1559,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React35, { useEffect as useEffect22, useMemo as useMemo42, useState as useState21 } from "react";
+import React32, { useEffect as useEffect22, useMemo as useMemo42, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -4512,69 +4512,71 @@ import { forwardRef as forwardRef11, useCallback as useCallback17, useState as u
 import { jsx as jsx27 } from "react/jsx-runtime";
 import { useCallback as useCallback18, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
+import React29, { forwardRef as forwardRef12, useCallback as useCallback19, useRef as useRef25 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
-import React29 from "react";
+import React30 from "react";
 import {
-  useCallback as useCallback19,
+  useCallback as useCallback20,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo32,
-  useRef as useRef25,
+  useRef as useRef26,
   useState as useState18
 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-import React30 from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+import React31 from "react";
 import { useMemo as useMemo34 } from "react";
 import { createContext as createContext24, useContext as useContext34, useMemo as useMemo33 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
 import { jsx as jsx31 } from "react/jsx-runtime";
-import React32 from "react";
-import React33, { createContext as createContext25 } from "react";
-import React34, { useContext as useContext35 } from "react";
-import { useCallback as useCallback22 } from "react";
+import { jsx as jsx322 } from "react/jsx-runtime";
+import React33 from "react";
+import React34, { createContext as createContext25 } from "react";
+import React35, { useContext as useContext35 } from "react";
+import { useCallback as useCallback23 } from "react";
 import {
-  useCallback as useCallback20,
+  useCallback as useCallback21,
   useContext as useContext36,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo35,
   useState as useState19
 } from "react";
-import { jsx as jsx322 } from "react/jsx-runtime";
-import React36, {
-  forwardRef as forwardRef12,
-  useCallback as useCallback21,
+import { jsx as jsx33 } from "react/jsx-runtime";
+import React37, {
+  forwardRef as forwardRef13,
+  useCallback as useCallback22,
   useContext as useContext37,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
-  useRef as useRef26,
+  useRef as useRef27,
   useState as useState20
 } from "react";
 import { useEffect as useEffect19 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
 import { jsx as jsx34 } from "react/jsx-runtime";
-import React38, { useMemo as useMemo37 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
+import React39, { useMemo as useMemo37 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
 import {
   Children,
-  forwardRef as forwardRef13,
+  forwardRef as forwardRef14,
   useMemo as useMemo38
 } from "react";
-import React39 from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
-import React41 from "react";
-import { forwardRef as forwardRef15, useCallback as useCallback23, useContext as useContext39 } from "react";
+import React40 from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+import React42 from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback24, useContext as useContext39 } from "react";
 import {
-  forwardRef as forwardRef14,
+  forwardRef as forwardRef15,
   useContext as useContext38,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo39,
-  useRef as useRef27
+  useRef as useRef28
 } from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
 import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var __defProp2 = Object.defineProperty;
 var __export2 = (target, all) => {
   for (var name in all)
@@ -5743,7 +5745,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.474";
+var VERSION = "4.0.475";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -6110,6 +6112,12 @@ var PremountContext = createContext14({
   premountFramesRemaining: 0
 });
 var sequenceVisualStyleSchema = {
+  "style.transformOrigin": {
+    type: "transform-origin",
+    step: 1,
+    default: "50% 50%",
+    description: "Transform origin"
+  },
   "style.translate": {
     type: "translate",
     step: 1,
@@ -6662,6 +6670,32 @@ var lengthUnits = new Set([
   "vw"
 ]);
 var cssNumberRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/;
+var transformOriginKeywords = new Set([
+  "left",
+  "center",
+  "right",
+  "top",
+  "bottom"
+]);
+var transformOriginKeywordOptions = (keyword) => {
+  if (keyword === "left") {
+    return [{ axis: "x", value: { value: 0, unit: "%" } }];
+  }
+  if (keyword === "right") {
+    return [{ axis: "x", value: { value: 100, unit: "%" } }];
+  }
+  if (keyword === "top") {
+    return [{ axis: "y", value: { value: 0, unit: "%" } }];
+  }
+  if (keyword === "bottom") {
+    return [{ axis: "y", value: { value: 100, unit: "%" } }];
+  }
+  return [
+    { axis: "x", value: { value: 50, unit: "%" } },
+    { axis: "y", value: { value: 50, unit: "%" } }
+  ];
+};
+var transformOriginCenter = { value: 50, unit: "%" };
 var stringifyNumber = (value) => {
   return String(normalizeNumber(value));
 };
@@ -6686,6 +6720,110 @@ var parseStringInterpolationComponent = (component, value) => {
   }
   throw new TypeError(`Cannot interpolate "${value}" because "${unit}" is not a supported translate or rotate unit`);
 };
+var parseTransformOriginLengthPercentage = ({
+  component,
+  value,
+  allowPercentage
+}) => {
+  const match = cssNumberRegex.exec(component);
+  if (match === null) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported transform-origin ${allowPercentage ? "length-percentage" : "z length"}`);
+  }
+  const unit = match[2] ?? null;
+  const numberValue = Number(match[1]);
+  if (!Number.isFinite(numberValue)) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not finite`);
+  }
+  if (unit === null || !lengthUnits.has(unit) || !allowPercentage && unit === "%") {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported transform-origin ${allowPercentage ? "length-percentage" : "z length"}`);
+  }
+  return { value: numberValue, unit };
+};
+var parseTransformOriginToken = (component, value) => {
+  const lower = component.toLowerCase();
+  if (transformOriginKeywords.has(lower)) {
+    return { type: "keyword", keyword: lower };
+  }
+  return {
+    type: "length-percentage",
+    parsed: parseTransformOriginLengthPercentage({
+      component,
+      value,
+      allowPercentage: true
+    })
+  };
+};
+var parseTwoTransformOriginKeywords = (first, second, value) => {
+  const candidates = [];
+  for (const firstOption of transformOriginKeywordOptions(first)) {
+    for (const secondOption of transformOriginKeywordOptions(second)) {
+      if (firstOption.axis === secondOption.axis) {
+        continue;
+      }
+      candidates.push(firstOption.axis === "x" ? [firstOption.value, secondOption.value] : [secondOption.value, firstOption.value]);
+    }
+  }
+  if (candidates.length === 0) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${first} ${second}" is not a valid transform-origin keyword pair`);
+  }
+  return candidates[0];
+};
+var parseTransformOriginXY = (parts, value) => {
+  if (parts.length === 1) {
+    const token = parseTransformOriginToken(parts[0], value);
+    if (token.type === "length-percentage") {
+      return [token.parsed, transformOriginCenter];
+    }
+    if (token.keyword === "top" || token.keyword === "bottom") {
+      return [
+        transformOriginCenter,
+        transformOriginKeywordOptions(token.keyword)[0].value
+      ];
+    }
+    return [
+      transformOriginKeywordOptions(token.keyword)[0].value,
+      transformOriginCenter
+    ];
+  }
+  const first = parseTransformOriginToken(parts[0], value);
+  const second = parseTransformOriginToken(parts[1], value);
+  if (first.type === "length-percentage" && second.type === "length-percentage") {
+    return [first.parsed, second.parsed];
+  }
+  if (first.type === "keyword" && second.type === "keyword") {
+    return parseTwoTransformOriginKeywords(first.keyword, second.keyword, value);
+  }
+  const keyword = first.type === "keyword" ? first : second.type === "keyword" ? second : null;
+  const length2 = first.type === "length-percentage" ? first.parsed : second.type === "length-percentage" ? second.parsed : null;
+  if (keyword === null || length2 === null) {
+    throw new Error("Expected a keyword and a length-percentage value");
+  }
+  const keywordIsFirst = first.type === "keyword";
+  if (keyword.keyword === "left" || keyword.keyword === "right") {
+    if (!keywordIsFirst) {
+      throw new TypeError(`Cannot interpolate "${value}" because horizontal transform-origin keywords must come before a length-percentage value`);
+    }
+    return [transformOriginKeywordOptions(keyword.keyword)[0].value, length2];
+  }
+  if (keyword.keyword === "top" || keyword.keyword === "bottom") {
+    return [length2, transformOriginKeywordOptions(keyword.keyword)[0].value];
+  }
+  return keywordIsFirst ? [transformOriginCenter, length2] : [length2, transformOriginCenter];
+};
+var parseTransformOriginValue = (output, parts) => {
+  const [x, y] = parseTransformOriginXY(parts.slice(0, 2), output);
+  const z = parts[2] === undefined ? { value: 0, unit: null } : parseTransformOriginLengthPercentage({
+    component: parts[2],
+    value: output,
+    allowPercentage: false
+  });
+  return {
+    kind: "translate",
+    values: [x.value, y.value, z.value],
+    units: [x.unit, y.unit, z.unit],
+    dimensions: parts[2] === undefined ? 2 : 3
+  };
+};
 var parseStringInterpolationValue = (output) => {
   if (typeof output === "number") {
     if (!Number.isFinite(output)) {
@@ -6702,6 +6840,9 @@ var parseStringInterpolationValue = (output) => {
   if (parts.length < 1 || parts.length > 3 || parts[0] === "") {
     throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
   }
+  if (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {
+    return parseTransformOriginValue(output, parts);
+  }
   const parsed = parts.map((part) => parseStringInterpolationComponent(part, output));
   const [{ kind }] = parsed;
   for (const part of parsed) {
@@ -7457,6 +7598,7 @@ function processColor(color) {
 var interpolateColorsRGB = (value, inputRange, colors, options) => {
   const [r2, g, b2, a2] = [red, green, blue, opacity].map((f) => {
     const unrounded = interpolate(value, inputRange, colors.map((c2) => f(c2)), {
+      easing: options?.easing,
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
       posterize: options?.posterize
@@ -7510,6 +7652,7 @@ var interpolateKeyframedStatus = ({
     }
     try {
       return interpolateColors(frame, inputRange, outputs, {
+        easing: easing.map(easingToFn),
         posterize: status.posterize
       });
     } catch {
@@ -8916,7 +9059,7 @@ var animatedImageSchema = {
     max: 10,
     step: 0.1,
     default: 1,
-    description: "Playback Rate",
+    description: "Playback rate",
     hiddenFromList: false,
     keyframable: false
   },
@@ -13247,7 +13390,100 @@ var Img = wrapInSchema({
   supportsEffects: true
 });
 addSequenceStackTraces(Img);
-var compositionsRef = React29.createRef();
+var interactiveElementSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
+  ...sequenceVisualStyleSchema,
+  hidden: hiddenField
+};
+var setRef = (ref, value) => {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+};
+var makeInteractiveElement = (tag, displayName) => {
+  const Inner = forwardRef12((propsWithControls, ref) => {
+    const {
+      durationInFrames,
+      from,
+      hidden,
+      name,
+      showInTimeline,
+      stack,
+      _experimentalControls,
+      ...props2
+    } = propsWithControls;
+    const refForOutline = useRef25(null);
+    const callbackRef = useCallback19((element) => {
+      refForOutline.current = element;
+      setRef(ref, element);
+    }, [ref]);
+    return /* @__PURE__ */ jsx29(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      durationInFrames: durationInFrames ?? Infinity,
+      hidden,
+      name: name ?? displayName,
+      showInTimeline: showInTimeline ?? true,
+      _experimentalControls,
+      _remotionInternalStack: stack,
+      _remotionInternalRefForOutline: refForOutline,
+      children: React29.createElement(tag, {
+        ...props2,
+        ref: callbackRef
+      })
+    });
+  });
+  Inner.displayName = displayName;
+  const Wrapped = wrapInSchema({
+    Component: Inner,
+    schema: interactiveElementSchema,
+    supportsEffects: false
+  });
+  Wrapped.displayName = displayName;
+  addSequenceStackTraces(Wrapped);
+  return Wrapped;
+};
+var Interactive = {
+  A: makeInteractiveElement("a", "<Interactive.A>"),
+  Article: makeInteractiveElement("article", "<Interactive.Article>"),
+  Aside: makeInteractiveElement("aside", "<Interactive.Aside>"),
+  Button: makeInteractiveElement("button", "<Interactive.Button>"),
+  Circle: makeInteractiveElement("circle", "<Interactive.Circle>"),
+  Code: makeInteractiveElement("code", "<Interactive.Code>"),
+  Div: makeInteractiveElement("div", "<Interactive.Div>"),
+  Ellipse: makeInteractiveElement("ellipse", "<Interactive.Ellipse>"),
+  Em: makeInteractiveElement("em", "<Interactive.Em>"),
+  Footer: makeInteractiveElement("footer", "<Interactive.Footer>"),
+  G: makeInteractiveElement("g", "<Interactive.G>"),
+  H1: makeInteractiveElement("h1", "<Interactive.H1>"),
+  H2: makeInteractiveElement("h2", "<Interactive.H2>"),
+  H3: makeInteractiveElement("h3", "<Interactive.H3>"),
+  H4: makeInteractiveElement("h4", "<Interactive.H4>"),
+  H5: makeInteractiveElement("h5", "<Interactive.H5>"),
+  H6: makeInteractiveElement("h6", "<Interactive.H6>"),
+  Header: makeInteractiveElement("header", "<Interactive.Header>"),
+  Label: makeInteractiveElement("label", "<Interactive.Label>"),
+  Li: makeInteractiveElement("li", "<Interactive.Li>"),
+  Line: makeInteractiveElement("line", "<Interactive.Line>"),
+  Main: makeInteractiveElement("main", "<Interactive.Main>"),
+  Nav: makeInteractiveElement("nav", "<Interactive.Nav>"),
+  Ol: makeInteractiveElement("ol", "<Interactive.Ol>"),
+  P: makeInteractiveElement("p", "<Interactive.P>"),
+  Path: makeInteractiveElement("path", "<Interactive.Path>"),
+  Pre: makeInteractiveElement("pre", "<Interactive.Pre>"),
+  Rect: makeInteractiveElement("rect", "<Interactive.Rect>"),
+  Section: makeInteractiveElement("section", "<Interactive.Section>"),
+  Small: makeInteractiveElement("small", "<Interactive.Small>"),
+  Span: makeInteractiveElement("span", "<Interactive.Span>"),
+  Strong: makeInteractiveElement("strong", "<Interactive.Strong>"),
+  Svg: makeInteractiveElement("svg", "<Interactive.Svg>"),
+  Text: makeInteractiveElement("text", "<Interactive.Text>"),
+  Ul: makeInteractiveElement("ul", "<Interactive.Ul>")
+};
+var compositionsRef = React30.createRef();
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -13258,15 +13494,15 @@ var CompositionManagerProvider = ({
   const [folders, setFolders] = useState18([]);
   const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
   const [compositions, setCompositions] = useState18(initialCompositions);
-  const currentcompositionsRef = useRef25(compositions);
-  const updateCompositions = useCallback19((updateComps) => {
+  const currentcompositionsRef = useRef26(compositions);
+  const updateCompositions = useCallback20((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback19((comp) => {
+  const registerComposition = useCallback20((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -13274,12 +13510,12 @@ var CompositionManagerProvider = ({
       return [...comps, comp];
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback19((id) => {
+  const unregisterComposition = useCallback20((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback19((name, parent, nonce, stack) => {
+  const registerFolder = useCallback20((name, parent, nonce, stack) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -13292,7 +13528,7 @@ var CompositionManagerProvider = ({
       ];
     });
   }, []);
-  const unregisterFolder = useCallback19((name, parent) => {
+  const unregisterFolder = useCallback20((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -13326,9 +13562,9 @@ var CompositionManagerProvider = ({
       canvasContent
     };
   }, [compositions, folders, currentCompositionMetadata, canvasContent]);
-  return /* @__PURE__ */ jsx29(CompositionManager.Provider, {
+  return /* @__PURE__ */ jsx30(CompositionManager.Provider, {
     value: compositionManagerContextValue,
-    children: /* @__PURE__ */ jsx29(CompositionSetters.Provider, {
+    children: /* @__PURE__ */ jsx30(CompositionSetters.Provider, {
       value: compositionManagerSetters,
       children
     })
@@ -13426,7 +13662,7 @@ var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
 };
-var MaxMediaCacheSizeContext = React30.createContext(null);
+var MaxMediaCacheSizeContext = React31.createContext(null);
 var Root = null;
 var listeners = [];
 var getRoot = () => {
@@ -13471,7 +13707,7 @@ var MediaEnabledProvider = ({
   audioEnabled
 }) => {
   const value = useMemo33(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
-  return /* @__PURE__ */ jsx30(MediaEnabledContext.Provider, {
+  return /* @__PURE__ */ jsx31(MediaEnabledContext.Provider, {
     value,
     children
   });
@@ -13495,25 +13731,25 @@ var RemotionRootContexts = ({
   const logging = useMemo34(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
-  return /* @__PURE__ */ jsx31(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx322(LogLevelContext.Provider, {
     value: logging,
-    children: /* @__PURE__ */ jsx31(NonceContext.Provider, {
+    children: /* @__PURE__ */ jsx322(NonceContext.Provider, {
       value: nonceContext,
-      children: /* @__PURE__ */ jsx31(TimelineContextProvider, {
+      children: /* @__PURE__ */ jsx322(TimelineContextProvider, {
         frameState,
-        children: /* @__PURE__ */ jsx31(MediaEnabledProvider, {
+        children: /* @__PURE__ */ jsx322(MediaEnabledProvider, {
           videoEnabled,
           audioEnabled,
-          children: /* @__PURE__ */ jsx31(EditorPropsProvider, {
-            children: /* @__PURE__ */ jsx31(PrefetchProvider, {
-              children: /* @__PURE__ */ jsx31(SequenceManagerProvider, {
-                children: /* @__PURE__ */ jsx31(DurationsContextProvider, {
-                  children: /* @__PURE__ */ jsx31(BufferingProvider, {
-                    children: /* @__PURE__ */ jsx31(SharedAudioContextProvider, {
+          children: /* @__PURE__ */ jsx322(EditorPropsProvider, {
+            children: /* @__PURE__ */ jsx322(PrefetchProvider, {
+              children: /* @__PURE__ */ jsx322(SequenceManagerProvider, {
+                children: /* @__PURE__ */ jsx322(DurationsContextProvider, {
+                  children: /* @__PURE__ */ jsx322(BufferingProvider, {
+                    children: /* @__PURE__ */ jsx322(SharedAudioContextProvider, {
                       audioLatencyHint,
                       audioEnabled,
                       previewSampleRate,
-                      children: /* @__PURE__ */ jsx31(SharedAudioTagsContextProvider, {
+                      children: /* @__PURE__ */ jsx322(SharedAudioTagsContextProvider, {
                         numberOfAudioTags,
                         children
                       })
@@ -13699,7 +13935,7 @@ var resolveVideoConfigOrCatch = (params) => {
     };
   }
 };
-var SequenceStackTracesUpdateContext = React32.createContext(() => {});
+var SequenceStackTracesUpdateContext = React33.createContext(() => {});
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
     const param = window.remotion_envVariables;
@@ -13725,7 +13961,7 @@ var setupEnvVariables = () => {
     window.process.env[key] = env[key];
   });
 };
-var CurrentScaleContext = React33.createContext(null);
+var CurrentScaleContext = React34.createContext(null);
 var PreviewSizeContext = createContext25({
   setSize: () => {
     return;
@@ -13749,7 +13985,7 @@ var calculateScale = ({
   }
   return Number(previewSize);
 };
-var PixelDensityContext = React34.createContext(null);
+var PixelDensityContext = React35.createContext(null);
 var getOffthreadVideoSource = ({
   src,
   transparent,
@@ -13931,7 +14167,7 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback20(() => {
+  const onErr = useCallback21(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -13941,7 +14177,7 @@ var OffthreadVideoForRendering = ({
   const className = useMemo35(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback20((img) => {
+  const onImageFrame = useCallback21((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -13950,7 +14186,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx322(Img, {
+  return /* @__PURE__ */ jsx33(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -14006,7 +14242,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
-  const videoRef = useRef26(null);
+  const videoRef = useRef27(null);
   const sharedSource = useMemo36(() => {
     if (!context.audioContext) {
       return null;
@@ -14016,7 +14252,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React36.useInsertionEffect ?? React36.useLayoutEffect;
+  const effectToUse = React37.useInsertionEffect ?? React37.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -14074,7 +14310,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     mediaVolume
   });
   warnAboutTooHighVolume(userPreferredVolume);
-  const getStack = useCallback21(() => {
+  const getStack = useCallback22(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -14179,7 +14415,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("error", errorHandler);
     };
   }, [onError, src]);
-  const currentOnDurationCallback = useRef26(onDuration);
+  const currentOnDurationCallback = useRef27(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
   useEffect20(() => {
@@ -14220,7 +14456,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     requestsVideoFrame: Boolean(onVideoFrame),
     isClientSideRendering: false
   });
-  return /* @__PURE__ */ jsx33("video", {
+  return /* @__PURE__ */ jsx34("video", {
     ref: videoRef,
     muted: muted || mediaMuted || userPreferredVolume <= 0,
     playsInline: true,
@@ -14232,7 +14468,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     ...nativeProps
   });
 };
-var VideoForPreview = forwardRef12(VideoForDevelopmentRefForwardingFunction);
+var VideoForPreview = forwardRef13(VideoForDevelopmentRefForwardingFunction);
 var InnerOffthreadVideo = (props2) => {
   const {
     startFrom,
@@ -14249,7 +14485,7 @@ var InnerOffthreadVideo = (props2) => {
   if (environment.isClientSideRendering) {
     throw new Error("<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const onDuration = useCallback22(() => {
+  const onDuration = useCallback23(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -14263,13 +14499,13 @@ var InnerOffthreadVideo = (props2) => {
     trimAfter
   });
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx34(Sequence, {
+    return /* @__PURE__ */ jsx35(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx34(InnerOffthreadVideo, {
+      children: /* @__PURE__ */ jsx35(InnerOffthreadVideo, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         trimAfter: undefined,
@@ -14284,7 +14520,7 @@ var InnerOffthreadVideo = (props2) => {
   }
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx34(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx35(OffthreadVideoForRendering, {
       pauseWhenBuffering: pauseWhenBuffering ?? false,
       ...otherProps,
       trimAfter: undefined,
@@ -14306,7 +14542,7 @@ var InnerOffthreadVideo = (props2) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx34(VideoForPreview, {
+  return /* @__PURE__ */ jsx35(VideoForPreview, {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -14355,7 +14591,7 @@ var OffthreadVideo = ({
   if (imageFormat) {
     throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
   }
-  return /* @__PURE__ */ jsx34(InnerOffthreadVideo, {
+  return /* @__PURE__ */ jsx35(InnerOffthreadVideo, {
     acceptableTimeShiftInSeconds,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -14391,20 +14627,20 @@ var OffthreadVideo = ({
 addSequenceStackTraces(OffthreadVideo);
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 function useRemotionContexts() {
-  const compositionManagerCtx = React38.useContext(CompositionManager);
-  const timelineContext = React38.useContext(TimelineContext);
-  const setTimelineContext = React38.useContext(SetTimelineContext);
-  const sequenceContext = React38.useContext(SequenceContext);
-  const nonceContext = React38.useContext(NonceContext);
-  const canUseRemotionHooksContext = React38.useContext(CanUseRemotionHooks);
-  const preloadContext = React38.useContext(PreloadContext);
-  const resolveCompositionContext = React38.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React38.useContext(RenderAssetManager);
-  const sequenceManagerContext = React38.useContext(SequenceManager);
-  const sequenceManagerRefContext = React38.useContext(SequenceManagerRefContext);
-  const visualModePropStatusesRefContext = React38.useContext(VisualModePropStatusesRefContext);
-  const bufferManagerContext = React38.useContext(BufferingContextReact);
-  const logLevelContext = React38.useContext(LogLevelContext);
+  const compositionManagerCtx = React39.useContext(CompositionManager);
+  const timelineContext = React39.useContext(TimelineContext);
+  const setTimelineContext = React39.useContext(SetTimelineContext);
+  const sequenceContext = React39.useContext(SequenceContext);
+  const nonceContext = React39.useContext(NonceContext);
+  const canUseRemotionHooksContext = React39.useContext(CanUseRemotionHooks);
+  const preloadContext = React39.useContext(PreloadContext);
+  const resolveCompositionContext = React39.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React39.useContext(RenderAssetManager);
+  const sequenceManagerContext = React39.useContext(SequenceManager);
+  const sequenceManagerRefContext = React39.useContext(SequenceManagerRefContext);
+  const visualModePropStatusesRefContext = React39.useContext(VisualModePropStatusesRefContext);
+  const bufferManagerContext = React39.useContext(BufferingContextReact);
+  const logLevelContext = React39.useContext(LogLevelContext);
   return useMemo37(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -14439,33 +14675,33 @@ function useRemotionContexts() {
 }
 var RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
-  return /* @__PURE__ */ jsx35(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx36(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx35(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx36(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx35(NonceContext.Provider, {
+      children: /* @__PURE__ */ jsx36(NonceContext.Provider, {
         value: contexts.nonceContext,
-        children: /* @__PURE__ */ jsx35(PreloadContext.Provider, {
+        children: /* @__PURE__ */ jsx36(PreloadContext.Provider, {
           value: contexts.preloadContext,
-          children: /* @__PURE__ */ jsx35(CompositionManager.Provider, {
+          children: /* @__PURE__ */ jsx36(CompositionManager.Provider, {
             value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx35(SequenceManagerRefContext.Provider, {
+            children: /* @__PURE__ */ jsx36(SequenceManagerRefContext.Provider, {
               value: contexts.sequenceManagerRefContext,
-              children: /* @__PURE__ */ jsx35(SequenceManager.Provider, {
+              children: /* @__PURE__ */ jsx36(SequenceManager.Provider, {
                 value: contexts.sequenceManagerContext,
-                children: /* @__PURE__ */ jsx35(VisualModePropStatusesRefContext.Provider, {
+                children: /* @__PURE__ */ jsx36(VisualModePropStatusesRefContext.Provider, {
                   value: contexts.visualModePropStatusesRefContext,
-                  children: /* @__PURE__ */ jsx35(RenderAssetManager.Provider, {
+                  children: /* @__PURE__ */ jsx36(RenderAssetManager.Provider, {
                     value: contexts.renderAssetManagerContext,
-                    children: /* @__PURE__ */ jsx35(ResolveCompositionContext.Provider, {
+                    children: /* @__PURE__ */ jsx36(ResolveCompositionContext.Provider, {
                       value: contexts.resolveCompositionContext,
-                      children: /* @__PURE__ */ jsx35(TimelineContext.Provider, {
+                      children: /* @__PURE__ */ jsx36(TimelineContext.Provider, {
                         value: contexts.timelineContext,
-                        children: /* @__PURE__ */ jsx35(SetTimelineContext.Provider, {
+                        children: /* @__PURE__ */ jsx36(SetTimelineContext.Provider, {
                           value: contexts.setTimelineContext,
-                          children: /* @__PURE__ */ jsx35(SequenceContext.Provider, {
+                          children: /* @__PURE__ */ jsx36(SequenceContext.Provider, {
                             value: contexts.sequenceContext,
-                            children: /* @__PURE__ */ jsx35(BufferingContextReact.Provider, {
+                            children: /* @__PURE__ */ jsx36(BufferingContextReact.Provider, {
                               value: contexts.bufferManagerContext,
                               children
                             })
@@ -14655,9 +14891,9 @@ var validateFrame = ({
   }
 };
 var flattenChildren = (children) => {
-  const childrenArray = React39.Children.toArray(children);
+  const childrenArray = React40.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React39.Fragment) {
+    if (child.type === React40.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -14666,11 +14902,11 @@ var flattenChildren = (children) => {
 };
 var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
-  return /* @__PURE__ */ jsx36(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx37(IsNotInsideSeriesProvider, {
     children
   });
 };
-var SeriesSequence = forwardRef13(SeriesSequenceRefForwardingFunction);
+var SeriesSequence = forwardRef14(SeriesSequenceRefForwardingFunction);
 var SequenceWithoutSchemaWithRef = SequenceWithoutSchema;
 var SeriesInner = (props2) => {
   const childrenValue = useMemo38(() => {
@@ -14714,7 +14950,7 @@ var SeriesInner = (props2) => {
       }
       const currentStartFrame = startFrame + offset;
       startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx36(SequenceWithoutSchemaWithRef, {
+      return /* @__PURE__ */ jsx37(SequenceWithoutSchemaWithRef, {
         ref: castedChild.ref,
         name: name || "<Series.Sequence>",
         _remotionInternalDocumentationLink: name ? undefined : "https://www.remotion.dev/docs/series",
@@ -14725,8 +14961,8 @@ var SeriesInner = (props2) => {
       });
     });
   }, [props2.children]);
-  return /* @__PURE__ */ jsx36(IsInsideSeriesContainer, {
-    children: /* @__PURE__ */ jsx36(Sequence, {
+  return /* @__PURE__ */ jsx37(IsInsideSeriesContainer, {
+    children: /* @__PURE__ */ jsx37(Sequence, {
       layout: "none",
       name: "<Series>",
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series",
@@ -15208,7 +15444,7 @@ var VideoForRenderingForwardFunction = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
-  const videoRef = useRef27(null);
+  const videoRef = useRef28(null);
   const sequenceContext = useContext38(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
@@ -15399,13 +15635,13 @@ var VideoForRenderingForwardFunction = ({
       delayRender2
     ]);
   }
-  return /* @__PURE__ */ jsx37("video", {
+  return /* @__PURE__ */ jsx38("video", {
     ref: videoRef,
     disableRemotePlayback: true,
     ...props2
   });
 };
-var VideoForRendering = forwardRef14(VideoForRenderingForwardFunction);
+var VideoForRendering = forwardRef15(VideoForRenderingForwardFunction);
 var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
@@ -15435,7 +15671,7 @@ var VideoForwardingFunction = (props2, ref) => {
     throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback23((src, durationInSeconds) => {
+  const onDuration = useCallback24((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
@@ -15448,7 +15684,7 @@ var VideoForwardingFunction = (props2, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx38(Html5Video, {
+      return /* @__PURE__ */ jsx39(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         stack,
@@ -15456,7 +15692,7 @@ var VideoForwardingFunction = (props2, ref) => {
       });
     }
     const mediaDuration = durationFetched * fps;
-    return /* @__PURE__ */ jsx38(Loop, {
+    return /* @__PURE__ */ jsx39(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
         mediaDurationInFrames: mediaDuration,
@@ -15466,7 +15702,7 @@ var VideoForwardingFunction = (props2, ref) => {
       layout: "none",
       name,
       showInTimeline: false,
-      children: /* @__PURE__ */ jsx38(Html5Video, {
+      children: /* @__PURE__ */ jsx39(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         stack,
@@ -15475,13 +15711,13 @@ var VideoForwardingFunction = (props2, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx38(Sequence, {
+    return /* @__PURE__ */ jsx39(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue === undefined ? undefined : trimAfterValue / (props2.playbackRate ?? 1),
       name,
-      children: /* @__PURE__ */ jsx38(Html5Video, {
+      children: /* @__PURE__ */ jsx39(Html5Video, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         onVideoFrame,
         ...otherProps,
@@ -15496,14 +15732,14 @@ var VideoForwardingFunction = (props2, ref) => {
     volume: props2.volume
   }, "Html5Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx38(VideoForRendering, {
+    return /* @__PURE__ */ jsx39(VideoForRendering, {
       onDuration,
       onVideoFrame: onVideoFrame ?? null,
       ...otherProps,
       ref
     });
   }
-  return /* @__PURE__ */ jsx38(VideoForPreview, {
+  return /* @__PURE__ */ jsx39(VideoForPreview, {
     onlyWarnForMediaSeekingError: false,
     ...otherProps,
     ref,
@@ -15516,7 +15752,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onAutoPlayError: onAutoPlayError ?? undefined
   });
 };
-var Html5Video = forwardRef15(VideoForwardingFunction);
+var Html5Video = forwardRef16(VideoForwardingFunction);
 addSequenceStackTraces(Html5Video);
 checkMultipleRemotionVersions();
 var proxyObj = {};
@@ -15545,9 +15781,9 @@ addSequenceStackTraces(Composition);
 addSequenceStackTraces(Folder);
 
 // ../shapes/dist/esm/index.mjs
-import React, { useCallback as useCallback24, useMemo as useMemo40, useRef as useRef28 } from "react";
+import React, { useCallback as useCallback25, useMemo as useMemo40, useRef as useRef29 } from "react";
 import { version } from "react-dom";
-import { jsx as jsx39, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs4 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
 import { jsx as jsx310 } from "react/jsx-runtime";
 import { jsx as jsx43 } from "react/jsx-runtime";
@@ -15734,11 +15970,11 @@ var RenderSvg = ({
       ...pathStyle ?? {}
     };
   }, [pathStyle]);
-  const outlineRef = useRef28(null);
-  const setSvgRef = useCallback24((node) => {
+  const outlineRef = useRef29(null);
+  const setSvgRef = useCallback25((node) => {
     outlineRef.current = node;
   }, []);
-  const setCanvasRef = useCallback24((canvas) => {
+  const setCanvasRef = useCallback25((canvas) => {
     outlineRef.current = canvas;
   }, []);
   const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects);
@@ -15752,7 +15988,7 @@ var RenderSvg = ({
     xmlns: "http://www.w3.org/2000/svg",
     style: effects.length === 0 || !videoConfig ? actualStyle : { overflow: "visible" },
     children: [
-      /* @__PURE__ */ jsx39("path", {
+      /* @__PURE__ */ jsx40("path", {
         ...reactSupportsTransformOrigin ? {
           transformOrigin
         } : {
@@ -15772,17 +16008,17 @@ var RenderSvg = ({
           const prevY = prevInstruction.y;
           return /* @__PURE__ */ jsxs4(React.Fragment, {
             children: [
-              /* @__PURE__ */ jsx39("path", {
+              /* @__PURE__ */ jsx40("path", {
                 d: `M ${prevX} ${prevY} ${i.cp1x} ${i.cp1y}`,
                 strokeWidth: 2,
                 stroke: "rgba(0, 0, 0, 0.4)"
               }),
-              /* @__PURE__ */ jsx39("path", {
+              /* @__PURE__ */ jsx40("path", {
                 d: `M ${i.x} ${i.y} ${i.cp2x} ${i.cp2y}`,
                 strokeWidth: 2,
                 stroke: "rgba(0, 0, 0, 0.4)"
               }),
-              /* @__PURE__ */ jsx39("circle", {
+              /* @__PURE__ */ jsx40("circle", {
                 cx: i.cp1x,
                 cy: i.cp1y,
                 r: 3,
@@ -15790,7 +16026,7 @@ var RenderSvg = ({
                 strokeWidth: 2,
                 stroke: "black"
               }),
-              /* @__PURE__ */ jsx39("circle", {
+              /* @__PURE__ */ jsx40("circle", {
                 cx: i.cp2x,
                 cy: i.cp2y,
                 r: 3,
@@ -15805,7 +16041,7 @@ var RenderSvg = ({
       }) : null
     ]
   });
-  const content = effects.length === 0 ? svg : /* @__PURE__ */ jsx39(HtmlInCanvas, {
+  const content = effects.length === 0 ? svg : /* @__PURE__ */ jsx40(HtmlInCanvas, {
     ref: setCanvasRef,
     width: Math.ceil(width),
     height: Math.ceil(height),
@@ -15820,7 +16056,7 @@ var RenderSvg = ({
   if (!videoConfig) {
     return svg;
   }
-  return /* @__PURE__ */ jsx39(Sequence, {
+  return /* @__PURE__ */ jsx40(Sequence, {
     layout: "none",
     from,
     hidden,
@@ -17933,8 +18169,8 @@ var extrudeAndTransformElement = (options) => {
 // ../design/dist/esm/index.mjs
 import { jsx as jsx212, Fragment as Fragment3 } from "react/jsx-runtime";
 import { jsx as jsx312, jsxs as jsxs5 } from "react/jsx-runtime";
-import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef30 } from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef31 } from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
 import React62 from "react";
 import { jsx as jsx63 } from "react/jsx-runtime";
@@ -17945,7 +18181,7 @@ import React72 from "react";
 import { jsx as jsx103 } from "react/jsx-runtime";
 import { jsx as jsx112 } from "react/jsx-runtime";
 import { jsx as jsx122 } from "react/jsx-runtime";
-import * as React362 from "react";
+import * as React36 from "react";
 import * as ReactDOM4 from "react-dom";
 import React112 from "react";
 import * as React8 from "react";
@@ -17984,7 +18220,7 @@ import * as React27 from "react";
 import * as React28 from "react";
 import { jsx as jsx232 } from "react/jsx-runtime";
 import * as React352 from "react";
-import * as React31 from "react";
+import * as React312 from "react";
 import { useState as useState112 } from "react";
 import * as React292 from "react";
 import * as React302 from "react";
@@ -17994,21 +18230,21 @@ import * as React322 from "react";
 import { Fragment as Fragment8, jsx as jsx242, jsxs as jsxs42 } from "react/jsx-runtime";
 import { forwardRef as forwardRef142, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef132, createElement as createElement6 } from "react";
-import * as React37 from "react";
+import * as React372 from "react";
 import { jsx as jsx252, jsxs as jsxs52 } from "react/jsx-runtime";
 import { jsx as jsx262 } from "react/jsx-runtime";
 import * as React49 from "react";
-import * as React382 from "react";
+import * as React38 from "react";
 import { jsx as jsx272 } from "react/jsx-runtime";
 import * as React47 from "react";
-import React40 from "react";
+import React402 from "react";
 import * as React392 from "react";
 import { Fragment as Fragment22, jsx as jsx282 } from "react/jsx-runtime";
 import { jsx as jsx292 } from "react/jsx-runtime";
 import React210 from "react";
 import { jsx as jsx2102 } from "react/jsx-runtime";
-import * as React42 from "react";
-import * as React412 from "react";
+import * as React422 from "react";
+import * as React41 from "react";
 import * as React43 from "react";
 import * as ReactDOM5 from "react-dom";
 import { jsx as jsx302 } from "react/jsx-runtime";
@@ -18026,7 +18262,7 @@ import { jsx as jsx342 } from "react/jsx-runtime";
 import React51 from "react";
 import { jsx as jsx352 } from "react/jsx-runtime";
 import { jsx as jsx362 } from "react/jsx-runtime";
-function setRef(ref, value) {
+function setRef2(ref, value) {
   if (typeof ref === "function") {
     return ref(value);
   } else if (ref !== null && ref !== undefined) {
@@ -18037,7 +18273,7 @@ function composeRefs(...refs) {
   return (node) => {
     let hasCleanup = false;
     const cleanups = refs.map((ref) => {
-      const cleanup = setRef(ref, node);
+      const cleanup = setRef2(ref, node);
       if (!hasCleanup && typeof cleanup == "function") {
         hasCleanup = true;
       }
@@ -18050,7 +18286,7 @@ function composeRefs(...refs) {
           if (typeof cleanup == "function") {
             cleanup();
           } else {
-            setRef(refs[i], null);
+            setRef2(refs[i], null);
           }
         }
       };
@@ -18088,9 +18324,9 @@ function createSlot(ownerName) {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx41(SlotClone, { ...slotProps, ref: forwardedRef, children: React23.isValidElement(newElement) ? React23.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx44(SlotClone, { ...slotProps, ref: forwardedRef, children: React23.isValidElement(newElement) ? React23.cloneElement(newElement, undefined, newChildren) : null });
     }
-    return /* @__PURE__ */ jsx41(SlotClone, { ...slotProps, ref: forwardedRef, children });
+    return /* @__PURE__ */ jsx44(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
@@ -18118,7 +18354,7 @@ function createSlotClone(ownerName) {
 var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
 function createSlottable(ownerName) {
   const Slottable2 = ({ children }) => {
-    return /* @__PURE__ */ jsx41(Fragment2, { children });
+    return /* @__PURE__ */ jsx44(Fragment2, { children });
   };
   Slottable2.displayName = `${ownerName}.Slottable`;
   Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
@@ -18183,7 +18419,7 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React35.useState({
+  const [state, setState] = React32.useState({
     progress: 0,
     isActive: false
   });
@@ -18195,7 +18431,7 @@ var useHoverTransforms = (ref, disabled) => {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React35.useEffect(() => {
+  React32.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -18270,8 +18506,8 @@ var useHoverTransforms = (ref, disabled) => {
   return state;
 };
 var useClickTransforms = (ref) => {
-  const [hoverProgress, setHoverProgress] = React35.useState(0);
-  React35.useEffect(() => {
+  const [hoverProgress, setHoverProgress] = React32.useState(0);
+  React32.useEffect(() => {
     const element = getChildNodeFrom(ref.current);
     if (!element) {
       return;
@@ -18455,7 +18691,7 @@ var Spinner = ({ size, duration }) => {
       height: size
     };
   }, [size]);
-  const pathsRef = useRef30([]);
+  const pathsRef = useRef31([]);
   useEffect23(() => {
     const animate = () => {
       const now = performance.now();
@@ -18474,11 +18710,11 @@ var Spinner = ({ size, duration }) => {
       cancelAnimationFrame(id);
     };
   }, [duration]);
-  return /* @__PURE__ */ jsx44("svg", {
+  return /* @__PURE__ */ jsx45("svg", {
     style,
     viewBox: `0 0 ${viewBox} ${viewBox}`,
     children: new Array(lines).fill(true).map((_, index) => {
-      return /* @__PURE__ */ jsx44("path", {
+      return /* @__PURE__ */ jsx45("path", {
         ref: (el) => pathsRef.current[index] = el,
         style: {
           rotate: `${index * Math.PI * 2 / lines}rad`,
@@ -18501,9 +18737,9 @@ var Button = ({
   ...rest
 }) => {
   const [dimensions, setDimensions] = useState22(null);
-  const ref = useRef29(null);
+  const ref = useRef210(null);
   const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
-  const onPointerEnter = useCallback25((e) => {
+  const onPointerEnter = useCallback26((e) => {
     if (e.pointerType !== "mouse") {
       return;
     }
@@ -18540,7 +18776,7 @@ var Button = ({
   const isDisabled = disabled || loading;
   const isAnchor = !asChild && "href" in rest && rest.href !== undefined;
   const sharedClasses = cn("text-text", "inline-flex", "justify-center", "bg-button-bg", "items-center", "font-brand", "border-solid", "text-[1em]", "rounded-lg", "border-black", "border-2", "border-b-4", "cursor-pointer", "px-4", "h-12", "flex-row", "items-center", "relative", "overflow-hidden", isDisabled && "cursor-default opacity-50", className);
-  const preventInteraction = useCallback25((e) => {
+  const preventInteraction = useCallback26((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
@@ -18836,7 +19072,7 @@ function composeContextScopes(...scopes) {
   createScope.scopeName = baseScope.scopeName;
   return createScope;
 }
-function setRef2(ref, value) {
+function setRef22(ref, value) {
   if (typeof ref === "function") {
     ref(value);
   } else if (ref !== null && ref !== undefined) {
@@ -18844,7 +19080,7 @@ function setRef2(ref, value) {
   }
 }
 function composeRefs2(...refs) {
-  return (node) => refs.forEach((ref) => setRef2(ref, node));
+  return (node) => refs.forEach((ref) => setRef22(ref, node));
 }
 function useComposedRefs2(...refs) {
   return React9.useCallback(composeRefs2(...refs), refs);
@@ -21942,9 +22178,9 @@ var effectCar = createSidecarMedium();
 var nothing = function() {
   return;
 };
-var RemoveScroll = React31.forwardRef(function(props, parentRef) {
-  var ref = React31.useRef(null);
-  var _a = React31.useState({
+var RemoveScroll = React312.forwardRef(function(props, parentRef) {
+  var ref = React312.useRef(null);
+  var _a = React312.useState({
     onScrollCapture: nothing,
     onWheelCapture: nothing,
     onTouchMoveCapture: nothing
@@ -21953,7 +22189,7 @@ var RemoveScroll = React31.forwardRef(function(props, parentRef) {
   var SideCar2 = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = __assign(__assign({}, rest), callbacks);
-  return React31.createElement(React31.Fragment, null, enabled && React31.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React31.cloneElement(React31.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React31.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
+  return React312.createElement(React312.Fragment, null, enabled && React312.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React312.cloneElement(React312.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React312.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
 });
 RemoveScroll.defaultProps = {
   enabled: true,
@@ -22445,9 +22681,9 @@ var Select = (props) => {
     required
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  const [trigger, setTrigger] = React362.useState(null);
-  const [valueNode, setValueNode] = React362.useState(null);
-  const [valueNodeHasChildren, setValueNodeHasChildren] = React362.useState(false);
+  const [trigger, setTrigger] = React36.useState(null);
+  const [valueNode, setValueNode] = React36.useState(null);
+  const [valueNodeHasChildren, setValueNodeHasChildren] = React36.useState(false);
   const direction = useDirection(dir);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
@@ -22459,9 +22695,9 @@ var Select = (props) => {
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const triggerPointerDownPosRef = React362.useRef(null);
+  const triggerPointerDownPosRef = React36.useRef(null);
   const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
-  const [nativeOptionsSet, setNativeOptionsSet] = React362.useState(/* @__PURE__ */ new Set);
+  const [nativeOptionsSet, setNativeOptionsSet] = React36.useState(/* @__PURE__ */ new Set);
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
   return /* @__PURE__ */ jsx242(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs42(SelectProvider, {
     required,
@@ -22483,10 +22719,10 @@ var Select = (props) => {
     children: [
       /* @__PURE__ */ jsx242(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx242(SelectNativeOptionsProvider, {
         scope: props.__scopeSelect,
-        onNativeOptionAdd: React362.useCallback((option) => {
+        onNativeOptionAdd: React36.useCallback((option) => {
           setNativeOptionsSet((prev) => new Set(prev).add(option));
         }, []),
-        onNativeOptionRemove: React362.useCallback((option) => {
+        onNativeOptionRemove: React36.useCallback((option) => {
           setNativeOptionsSet((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
@@ -22514,7 +22750,7 @@ var Select = (props) => {
 };
 Select.displayName = SELECT_NAME;
 var TRIGGER_NAME = "SelectTrigger";
-var SelectTrigger = React362.forwardRef((props, forwardedRef) => {
+var SelectTrigger = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, disabled = false, ...triggerProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
@@ -22582,7 +22818,7 @@ var SelectTrigger = React362.forwardRef((props, forwardedRef) => {
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 var VALUE_NAME = "SelectValue";
-var SelectValue = React362.forwardRef((props, forwardedRef) => {
+var SelectValue = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
   const context = useSelectContext(VALUE_NAME, __scopeSelect);
   const { onValueNodeHasChildrenChange } = context;
@@ -22600,7 +22836,7 @@ var SelectValue = React362.forwardRef((props, forwardedRef) => {
 });
 SelectValue.displayName = VALUE_NAME;
 var ICON_NAME = "SelectIcon";
-var SelectIcon = React362.forwardRef((props, forwardedRef) => {
+var SelectIcon = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, children, ...iconProps } = props;
   return /* @__PURE__ */ jsx242(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
 });
@@ -22611,9 +22847,9 @@ var SelectPortal = (props) => {
 };
 SelectPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "SelectContent";
-var SelectContent = React362.forwardRef((props, forwardedRef) => {
+var SelectContent = React36.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(CONTENT_NAME2, props.__scopeSelect);
-  const [fragment, setFragment] = React362.useState();
+  const [fragment, setFragment] = React36.useState();
   useLayoutEffect22(() => {
     setFragment(new DocumentFragment);
   }, []);
@@ -22627,7 +22863,7 @@ SelectContent.displayName = CONTENT_NAME2;
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME2);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
-var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
+var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     position = "item-aligned",
@@ -22647,20 +22883,20 @@ var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
-  const [content, setContent] = React362.useState(null);
-  const [viewport, setViewport] = React362.useState(null);
+  const [content, setContent] = React36.useState(null);
+  const [viewport, setViewport] = React36.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContent(node));
-  const [selectedItem, setSelectedItem] = React362.useState(null);
-  const [selectedItemText, setSelectedItemText] = React362.useState(null);
+  const [selectedItem, setSelectedItem] = React36.useState(null);
+  const [selectedItemText, setSelectedItemText] = React36.useState(null);
   const getItems = useCollection(__scopeSelect);
-  const [isPositioned, setIsPositioned] = React362.useState(false);
-  const firstValidItemFoundRef = React362.useRef(false);
-  React362.useEffect(() => {
+  const [isPositioned, setIsPositioned] = React36.useState(false);
+  const firstValidItemFoundRef = React36.useRef(false);
+  React36.useEffect(() => {
     if (content)
       return hideOthers(content);
   }, [content]);
   useFocusGuards();
-  const focusFirst2 = React362.useCallback((candidates) => {
+  const focusFirst2 = React36.useCallback((candidates) => {
     const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
     const [lastItem] = restItems.slice(-1);
     const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
@@ -22677,14 +22913,14 @@ var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
         return;
     }
   }, [getItems, viewport]);
-  const focusSelectedItem = React362.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
-  React362.useEffect(() => {
+  const focusSelectedItem = React36.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
+  React36.useEffect(() => {
     if (isPositioned) {
       focusSelectedItem();
     }
   }, [isPositioned, focusSelectedItem]);
   const { onOpenChange, triggerPointerDownPosRef } = context;
-  React362.useEffect(() => {
+  React36.useEffect(() => {
     if (content) {
       let pointerMoveDelta = { x: 0, y: 0 };
       const handlePointerMove = (event) => {
@@ -22714,7 +22950,7 @@ var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
       };
     }
   }, [content, onOpenChange, triggerPointerDownPosRef]);
-  React362.useEffect(() => {
+  React36.useEffect(() => {
     const close = () => onOpenChange(false);
     window.addEventListener("blur", close);
     window.addEventListener("resize", close);
@@ -22731,7 +22967,7 @@ var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
       setTimeout(() => nextItem.ref.current.focus());
     }
   });
-  const itemRefCallback = React362.useCallback((node, value, disabled) => {
+  const itemRefCallback = React36.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -22740,8 +22976,8 @@ var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
         firstValidItemFoundRef.current = true;
     }
   }, [context.value]);
-  const handleItemLeave = React362.useCallback(() => content?.focus(), [content]);
-  const itemTextRefCallback = React362.useCallback((node, value, disabled) => {
+  const handleItemLeave = React36.useCallback(() => content?.focus(), [content]);
+  const itemTextRefCallback = React36.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -22836,18 +23072,18 @@ var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
 });
 SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
-var SelectItemAlignedPosition = React362.forwardRef((props, forwardedRef) => {
+var SelectItemAlignedPosition = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(CONTENT_NAME2, __scopeSelect);
-  const [contentWrapper, setContentWrapper] = React362.useState(null);
-  const [content, setContent] = React362.useState(null);
+  const [contentWrapper, setContentWrapper] = React36.useState(null);
+  const [content, setContent] = React36.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContent(node));
   const getItems = useCollection(__scopeSelect);
-  const shouldExpandOnScrollRef = React362.useRef(false);
-  const shouldRepositionRef = React362.useRef(true);
+  const shouldExpandOnScrollRef = React36.useRef(false);
+  const shouldRepositionRef = React36.useRef(true);
   const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
-  const position = React362.useCallback(() => {
+  const position = React36.useCallback(() => {
     if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
       const triggerRect = context.trigger.getBoundingClientRect();
       const contentRect = content.getBoundingClientRect();
@@ -22928,12 +23164,12 @@ var SelectItemAlignedPosition = React362.forwardRef((props, forwardedRef) => {
     onPlaced
   ]);
   useLayoutEffect22(() => position(), [position]);
-  const [contentZIndex, setContentZIndex] = React362.useState();
+  const [contentZIndex, setContentZIndex] = React36.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  const handleScrollButtonChange = React362.useCallback((node) => {
+  const handleScrollButtonChange = React36.useCallback((node) => {
     if (node && shouldRepositionRef.current === true) {
       position();
       focusSelectedItem?.();
@@ -22967,7 +23203,7 @@ var SelectItemAlignedPosition = React362.forwardRef((props, forwardedRef) => {
 });
 SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
 var POPPER_POSITION_NAME = "SelectPopperPosition";
-var SelectPopperPosition = React362.forwardRef((props, forwardedRef) => {
+var SelectPopperPosition = React36.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     align = "start",
@@ -22997,12 +23233,12 @@ var SelectPopperPosition = React362.forwardRef((props, forwardedRef) => {
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME2, {});
 var VIEWPORT_NAME = "SelectViewport";
-var SelectViewport = React362.forwardRef((props, forwardedRef) => {
+var SelectViewport = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, nonce, ...viewportProps } = props;
   const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
   const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs2(forwardedRef, contentContext.onViewportChange);
-  const prevScrollTopRef = React362.useRef(0);
+  const prevScrollTopRef = React36.useRef(0);
   return /* @__PURE__ */ jsxs42(Fragment8, { children: [
     /* @__PURE__ */ jsx242("style", {
       dangerouslySetInnerHTML: {
@@ -23051,14 +23287,14 @@ var SelectViewport = React362.forwardRef((props, forwardedRef) => {
 SelectViewport.displayName = VIEWPORT_NAME;
 var GROUP_NAME = "SelectGroup";
 var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-var SelectGroup = React362.forwardRef((props, forwardedRef) => {
+var SelectGroup = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...groupProps } = props;
   const groupId = useId();
   return /* @__PURE__ */ jsx242(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx242(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
 });
 SelectGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "SelectLabel";
-var SelectLabel = React362.forwardRef((props, forwardedRef) => {
+var SelectLabel = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...labelProps } = props;
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
   return /* @__PURE__ */ jsx242(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
@@ -23066,7 +23302,7 @@ var SelectLabel = React362.forwardRef((props, forwardedRef) => {
 SelectLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "SelectItem";
 var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-var SelectItem = React362.forwardRef((props, forwardedRef) => {
+var SelectItem = React36.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     value,
@@ -23077,8 +23313,8 @@ var SelectItem = React362.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(ITEM_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
   const isSelected = context.value === value;
-  const [textValue, setTextValue] = React362.useState(textValueProp ?? "");
-  const [isFocused, setIsFocused] = React362.useState(false);
+  const [textValue, setTextValue] = React36.useState(textValueProp ?? "");
+  const [isFocused, setIsFocused] = React36.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => contentContext.itemRefCallback?.(node, value, disabled));
   const textId = useId();
   const handleSelect = () => {
@@ -23096,7 +23332,7 @@ var SelectItem = React362.forwardRef((props, forwardedRef) => {
     disabled,
     textId,
     isSelected,
-    onItemTextChange: React362.useCallback((node) => {
+    onItemTextChange: React36.useCallback((node) => {
       setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
     }, []),
     children: /* @__PURE__ */ jsx242(Collection.ItemSlot, {
@@ -23145,16 +23381,16 @@ var SelectItem = React362.forwardRef((props, forwardedRef) => {
 });
 SelectItem.displayName = ITEM_NAME;
 var ITEM_TEXT_NAME = "SelectItemText";
-var SelectItemText = React362.forwardRef((props, forwardedRef) => {
+var SelectItemText = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, ...itemTextProps } = props;
   const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
   const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
   const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
-  const [itemTextNode, setItemTextNode] = React362.useState(null);
+  const [itemTextNode, setItemTextNode] = React36.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setItemTextNode(node), itemContext.onItemTextChange, (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled));
   const textContent = itemTextNode?.textContent;
-  const nativeOption = React362.useMemo(() => /* @__PURE__ */ jsx242("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
+  const nativeOption = React36.useMemo(() => /* @__PURE__ */ jsx242("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
   const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
   useLayoutEffect22(() => {
     onNativeOptionAdd(nativeOption);
@@ -23167,17 +23403,17 @@ var SelectItemText = React362.forwardRef((props, forwardedRef) => {
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 var ITEM_INDICATOR_NAME = "SelectItemIndicator";
-var SelectItemIndicator = React362.forwardRef((props, forwardedRef) => {
+var SelectItemIndicator = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...itemIndicatorProps } = props;
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
   return itemContext.isSelected ? /* @__PURE__ */ jsx242(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-var SelectScrollUpButton = React362.forwardRef((props, forwardedRef) => {
+var SelectScrollUpButton = React36.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React362.useState(false);
+  const [canScrollUp, setCanScrollUp] = React36.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -23205,10 +23441,10 @@ var SelectScrollUpButton = React362.forwardRef((props, forwardedRef) => {
 });
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-var SelectScrollDownButton = React362.forwardRef((props, forwardedRef) => {
+var SelectScrollDownButton = React36.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React362.useState(false);
+  const [canScrollDown, setCanScrollDown] = React36.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -23236,18 +23472,18 @@ var SelectScrollDownButton = React362.forwardRef((props, forwardedRef) => {
   }) : null;
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-var SelectScrollButtonImpl = React362.forwardRef((props, forwardedRef) => {
+var SelectScrollButtonImpl = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React362.useRef(null);
+  const autoScrollTimerRef = React36.useRef(null);
   const getItems = useCollection(__scopeSelect);
-  const clearAutoScrollTimer = React362.useCallback(() => {
+  const clearAutoScrollTimer = React36.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
       autoScrollTimerRef.current = null;
     }
   }, []);
-  React362.useEffect(() => {
+  React36.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
   useLayoutEffect22(() => {
@@ -23276,13 +23512,13 @@ var SelectScrollButtonImpl = React362.forwardRef((props, forwardedRef) => {
   });
 });
 var SEPARATOR_NAME = "SelectSeparator";
-var SelectSeparator = React362.forwardRef((props, forwardedRef) => {
+var SelectSeparator = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...separatorProps } = props;
   return /* @__PURE__ */ jsx242(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
 });
 SelectSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME2 = "SelectArrow";
-var SelectArrow = React362.forwardRef((props, forwardedRef) => {
+var SelectArrow = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(ARROW_NAME2, __scopeSelect);
@@ -23293,12 +23529,12 @@ SelectArrow.displayName = ARROW_NAME2;
 function shouldShowPlaceholder(value) {
   return value === "" || value === undefined;
 }
-var BubbleSelect = React362.forwardRef((props, forwardedRef) => {
+var BubbleSelect = React36.forwardRef((props, forwardedRef) => {
   const { value, ...selectProps } = props;
-  const ref = React362.useRef(null);
+  const ref = React36.useRef(null);
   const composedRefs = useComposedRefs2(forwardedRef, ref);
   const prevValue = usePrevious(value);
-  React362.useEffect(() => {
+  React36.useEffect(() => {
     const select = ref.current;
     const selectProto = window.HTMLSelectElement.prototype;
     const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
@@ -23314,9 +23550,9 @@ var BubbleSelect = React362.forwardRef((props, forwardedRef) => {
 BubbleSelect.displayName = "BubbleSelect";
 function useTypeaheadSearch(onSearchChange) {
   const handleSearchChange = useCallbackRef(onSearchChange);
-  const searchRef = React362.useRef("");
-  const timerRef = React362.useRef(0);
-  const handleTypeaheadSearch = React362.useCallback((key) => {
+  const searchRef = React36.useRef("");
+  const timerRef = React36.useRef(0);
+  const handleTypeaheadSearch = React36.useCallback((key) => {
     const search = searchRef.current + key;
     handleSearchChange(search);
     (function updateSearch(value) {
@@ -23326,11 +23562,11 @@ function useTypeaheadSearch(onSearchChange) {
         timerRef.current = window.setTimeout(() => updateSearch(""), 1000);
     })(search);
   }, [handleSearchChange]);
-  const resetTypeahead = React362.useCallback(() => {
+  const resetTypeahead = React36.useCallback(() => {
     searchRef.current = "";
     window.clearTimeout(timerRef.current);
   }, []);
-  React362.useEffect(() => {
+  React36.useEffect(() => {
     return () => window.clearTimeout(timerRef.current);
   }, []);
   return [searchRef, handleTypeaheadSearch, resetTypeahead];
@@ -23419,7 +23655,7 @@ var ChevronDown = createLucideIcon("ChevronDown", [
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 var Select2 = Root222;
 var SelectValue2 = Value;
-var SelectTrigger2 = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Trigger, {
+var SelectTrigger2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Trigger, {
   ref,
   className: cn("flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand", className),
   ...props,
@@ -23434,7 +23670,7 @@ var SelectTrigger2 = React37.forwardRef(({ className, children, ...props }, ref)
   ]
 }));
 SelectTrigger2.displayName = Trigger.displayName;
-var SelectScrollUpButton2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollUpButton, {
+var SelectScrollUpButton2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollUpButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -23443,7 +23679,7 @@ var SelectScrollUpButton2 = React37.forwardRef(({ className, ...props }, ref) =>
   })
 }));
 SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
-var SelectScrollDownButton2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollDownButton, {
+var SelectScrollDownButton2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollDownButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -23452,7 +23688,7 @@ var SelectScrollDownButton2 = React37.forwardRef(({ className, ...props }, ref)
   })
 }));
 SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
-var SelectContent2 = React37.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
+var SelectContent2 = React372.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
   children: /* @__PURE__ */ jsxs52(Content2, {
     ref,
     className: cn(" border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
@@ -23469,13 +23705,13 @@ var SelectContent2 = React37.forwardRef(({ className, children, position = "popp
   })
 }));
 SelectContent2.displayName = Content2.displayName;
-var SelectLabel2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Label, {
+var SelectLabel2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Label, {
   ref,
   className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
   ...props
 }));
 SelectLabel2.displayName = Label.displayName;
-var SelectItem2 = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Item, {
+var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Item, {
   ref,
   className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand", className),
   ...props,
@@ -23494,7 +23730,7 @@ var SelectItem2 = React37.forwardRef(({ className, children, ...props }, ref) =>
   ]
 }));
 SelectItem2.displayName = Item.displayName;
-var SelectSeparator2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Separator, {
+var SelectSeparator2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Separator, {
   ref,
   className: cn("-mx-1 my-1 h-px bg-muted", className),
   ...props
@@ -23527,19 +23763,19 @@ function composeEventHandlers2(originalEventHandler, ourEventHandler, { checkFor
 function createContextScope2(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React382.createContext(defaultContext);
+    const BaseContext = React38.createContext(defaultContext);
     const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const value = React382.useMemo(() => context, Object.values(context));
+      const value = React38.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx272(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext222(consumerName, scope) {
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const context = React382.useContext(Context);
+      const context = React38.useContext(Context);
       if (context)
         return context;
       if (defaultContext !== undefined)
@@ -23550,11 +23786,11 @@ function createContextScope2(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React382.createContext(defaultContext);
+      return React38.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React382.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
+      return React38.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
     };
   };
   createScope.scopeName = scopeName;
@@ -23575,7 +23811,7 @@ function composeContextScopes2(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React382.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React38.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -23668,14 +23904,14 @@ function createCollection2(name) {
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React40.useRef(null);
-    const itemMap = React40.useRef(/* @__PURE__ */ new Map).current;
+    const ref = React402.useRef(null);
+    const itemMap = React402.useRef(/* @__PURE__ */ new Map).current;
     return /* @__PURE__ */ jsx292(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = createSlot2(COLLECTION_SLOT_NAME);
-  const CollectionSlot = React40.forwardRef((props, forwardedRef) => {
+  const CollectionSlot = React402.forwardRef((props, forwardedRef) => {
     const { scope, children } = props;
     const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
     const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
@@ -23685,12 +23921,12 @@ function createCollection2(name) {
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = createSlot2(ITEM_SLOT_NAME);
-  const CollectionItemSlot = React40.forwardRef((props, forwardedRef) => {
+  const CollectionItemSlot = React402.forwardRef((props, forwardedRef) => {
     const { scope, children, ...itemData } = props;
-    const ref = React40.useRef(null);
+    const ref = React402.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-    React40.useEffect(() => {
+    React402.useEffect(() => {
       context.itemMap.set(ref, { ref, ...itemData });
       return () => void context.itemMap.delete(ref);
     });
@@ -23699,7 +23935,7 @@ function createCollection2(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React40.useCallback(() => {
+    const getItems = React402.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode)
         return [];
@@ -24017,13 +24253,13 @@ function toSafeIndex(array, index2) {
 function toSafeInteger(number) {
   return number !== number || number === 0 ? 0 : Math.trunc(number);
 }
-var useLayoutEffect222 = globalThis?.document ? React412.useLayoutEffect : () => {};
-var useReactId2 = React42[" useId ".trim().toString()] || (() => {
+var useLayoutEffect222 = globalThis?.document ? React41.useLayoutEffect : () => {};
+var useReactId2 = React422[" useId ".trim().toString()] || (() => {
   return;
 });
 var count3 = 0;
 function useId2(deterministicId) {
-  const [id, setId] = React42.useState(useReactId2());
+  const [id, setId] = React422.useState(useReactId2());
   useLayoutEffect222(() => {
     if (!deterministicId)
       setId((reactId) => reactId ?? String(count3++));
@@ -24634,15 +24870,15 @@ var Triangle22 = (props) => {
 };
 
 // src/components/team/TrustSection.tsx
-import { jsx as jsx45, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs6 } from "react/jsx-runtime";
 var SwissIcon = () => {
-  return /* @__PURE__ */ jsx45("svg", {
+  return /* @__PURE__ */ jsx46("svg", {
     viewBox: "0 0 512 512",
     style: {
       height: 36,
       overflow: "visible"
     },
-    children: /* @__PURE__ */ jsx45("path", {
+    children: /* @__PURE__ */ jsx46("path", {
       fill: "#DA291C",
       className: "stroke-black dark:stroke-white",
       strokeWidth: 36,
@@ -24651,13 +24887,13 @@ var SwissIcon = () => {
   });
 };
 var ProfitableIcon = () => {
-  return /* @__PURE__ */ jsx45("svg", {
+  return /* @__PURE__ */ jsx46("svg", {
     viewBox: "0 0 512 512",
     style: {
       height: 36,
       overflow: "visible"
     },
-    children: /* @__PURE__ */ jsx45("path", {
+    children: /* @__PURE__ */ jsx46("path", {
       className: "fill-brand stroke-black dark:stroke-white",
       strokeWidth: 36,
       d: "M470.7 9.4c3 3.1 5.3 6.6 6.9 10.3s2.4 7.8 2.4 12.2l0 .1 0 72c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-29.7L330.5 175.8c-6.2 6.3-14.3 9.9-22.8 10.2s-17-2.8-23.5-8.7l-70.2-63.4L73.4 263.4c-9.2 9.6-24.3 9.9-33.9 .7s-9.9-24.3-.7-33.9l160-168c6.2-6.5 14.4-10.1 23-10.3s17 3 23.4 8.9l70.4 63.6L404.7 33.9 375.9 34c-13.3 0-24-10.7-24-24s10.7-24 24-24L448 6c0 0 0 0 0 0c8.3 0 16.4 3.4 22.7 9.4zM40 288c-13.3 0-24 10.7-24 24l0 160c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-160c0-13.3-10.7-24-24-24l-48 0zm120 24l0 160c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-160c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zm144-72l0 232c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-232c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zm144-48l0 280c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-280c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24z"
@@ -24665,13 +24901,13 @@ var ProfitableIcon = () => {
   });
 };
 var KeyIcon = () => {
-  return /* @__PURE__ */ jsx45("svg", {
+  return /* @__PURE__ */ jsx46("svg", {
     viewBox: "0 0 512 512",
     style: {
       height: 36,
       overflow: "visible"
     },
-    children: /* @__PURE__ */ jsx45("path", {
+    children: /* @__PURE__ */ jsx46("path", {
       className: "fill-brand stroke-black dark:stroke-white",
       strokeWidth: 36,
       d: "M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17l0 80c0 13.3 10.7 24 24 24l80 0c13.3 0 24-10.7 24-24l0-40 40 0c13.3 0 24-10.7 24-24l0-40 40 0c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zm40-176a40 40 0 1 1 0-80 40 40 0 1 1 0 80z"
@@ -24679,13 +24915,13 @@ var KeyIcon = () => {
   });
 };
 var ShieldIcon = () => {
-  return /* @__PURE__ */ jsx45("svg", {
+  return /* @__PURE__ */ jsx46("svg", {
     viewBox: "0 0 512 512",
     style: {
       height: 36,
       overflow: "visible"
     },
-    children: /* @__PURE__ */ jsx45("path", {
+    children: /* @__PURE__ */ jsx46("path", {
       className: "fill-brand stroke-black dark:stroke-white",
       strokeWidth: 36,
       d: "M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8l0 378.1C394 378 431.1 230.1 432 141.4L256 66.8z"
@@ -24693,13 +24929,13 @@ var ShieldIcon = () => {
   });
 };
 var ClockIcon = () => {
-  return /* @__PURE__ */ jsx45("svg", {
+  return /* @__PURE__ */ jsx46("svg", {
     viewBox: "0 0 512 512",
     style: {
       height: 36,
       overflow: "visible"
     },
-    children: /* @__PURE__ */ jsx45("path", {
+    children: /* @__PURE__ */ jsx46("path", {
       className: "fill-brand stroke-black dark:stroke-white",
       strokeWidth: 36,
       d: "M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"
@@ -24707,13 +24943,13 @@ var ClockIcon = () => {
   });
 };
 var UsersIcon = () => {
-  return /* @__PURE__ */ jsx45("svg", {
+  return /* @__PURE__ */ jsx46("svg", {
     viewBox: "0 0 640 512",
     style: {
       height: 36,
       overflow: "visible"
     },
-    children: /* @__PURE__ */ jsx45("path", {
+    children: /* @__PURE__ */ jsx46("path", {
       className: "fill-brand stroke-black dark:stroke-white",
       strokeWidth: 36,
       d: "M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192l42.7 0c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96l-176.7 0C26.8 320 0 293.2 0 260.7l0 0 0 38zm640 0l0-38 0 0C640 293.2 613.2 320 580.7 320l-176.7 0c26.5-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7l42.7 0C592.2 192 640 239.8 640 298.7zM208 224a112 112 0 1 1 224 0 112 112 0 1 1-224 0zm-16 160l256 0 0 0c53 0 96 43 96 96l0 0c0 17.7-14.3 32-32 32L128 512c-17.7 0-32-14.3-32-32l0 0c0-53 43-96 96-96l0 0z"
@@ -24721,13 +24957,13 @@ var UsersIcon = () => {
   });
 };
 var CodeIcon = () => {
-  return /* @__PURE__ */ jsx45("svg", {
+  return /* @__PURE__ */ jsx46("svg", {
     viewBox: "0 0 640 512",
     style: {
       height: 36,
       overflow: "visible"
     },
-    children: /* @__PURE__ */ jsx45("path", {
+    children: /* @__PURE__ */ jsx46("path", {
       className: "fill-brand stroke-black dark:stroke-white",
       strokeWidth: 36,
       d: "M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"
@@ -24735,13 +24971,13 @@ var CodeIcon = () => {
   });
 };
 var VideoIcon = () => {
-  return /* @__PURE__ */ jsx45("svg", {
+  return /* @__PURE__ */ jsx46("svg", {
     viewBox: "0 0 576 512",
     style: {
       height: 36,
       overflow: "visible"
     },
-    children: /* @__PURE__ */ jsx45("path", {
+    children: /* @__PURE__ */ jsx46("path", {
       className: "fill-brand stroke-black dark:stroke-white",
       strokeWidth: 36,
       d: "M0 128C0 92.7 28.7 64 64 64l256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2l0 256c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 336l0-16 0-128 0-16 14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"
@@ -24749,13 +24985,13 @@ var VideoIcon = () => {
   });
 };
 var StarIcon = () => {
-  return /* @__PURE__ */ jsx45("svg", {
+  return /* @__PURE__ */ jsx46("svg", {
     viewBox: "0 0 576 512",
     style: {
       height: 36,
       overflow: "visible"
     },
-    children: /* @__PURE__ */ jsx45("path", {
+    children: /* @__PURE__ */ jsx46("path", {
       className: "fill-brand stroke-black dark:stroke-white",
       strokeWidth: 36,
       d: "M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.6 329l104.2-103.1c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
@@ -24772,11 +25008,11 @@ var TrustSection = () => {
           /* @__PURE__ */ jsxs6(Card, {
             className: "lg:w-[300px] text-left px-4 py-6 flex-1",
             children: [
-              /* @__PURE__ */ jsx45(SwissIcon, {}),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46(SwissIcon, {}),
+              /* @__PURE__ */ jsx46("div", {
                 className: "h-4"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand font-bold text-2xl mb-2",
                 children: "Swiss quality"
               }),
@@ -24793,11 +25029,11 @@ var TrustSection = () => {
           /* @__PURE__ */ jsxs6(Card, {
             className: "lg:w-[300px] text-left px-4 py-6 flex-1",
             children: [
-              /* @__PURE__ */ jsx45(ProfitableIcon, {}),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46(ProfitableIcon, {}),
+              /* @__PURE__ */ jsx46("div", {
                 className: "h-4"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand font-bold text-2xl mb-2",
                 children: "Sustainable business"
               }),
@@ -24806,7 +25042,7 @@ var TrustSection = () => {
                 children: [
                   "Remotion is profitable. Aside from our",
                   " ",
-                  /* @__PURE__ */ jsx45("a", {
+                  /* @__PURE__ */ jsx46("a", {
                     href: "/docs/investors",
                     className: "text-brand hover:underline underline-offset-4",
                     children: "early investors"
@@ -24821,15 +25057,15 @@ var TrustSection = () => {
           /* @__PURE__ */ jsxs6(Card, {
             className: "lg:w-[300px] text-left px-4 py-6 flex-1",
             children: [
-              /* @__PURE__ */ jsx45(KeyIcon, {}),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46(KeyIcon, {}),
+              /* @__PURE__ */ jsx46("div", {
                 className: "h-4"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand font-bold text-2xl mb-2",
                 children: "Founder-owned"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand",
                 children: "Us founders own the company. And we just want one thing: Make programmatic video glorious."
               })
@@ -24837,7 +25073,7 @@ var TrustSection = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsx45("div", {
+      /* @__PURE__ */ jsx46("div", {
         className: "h-4"
       }),
       /* @__PURE__ */ jsxs6("div", {
@@ -24846,15 +25082,15 @@ var TrustSection = () => {
           /* @__PURE__ */ jsxs6(Card, {
             className: "lg:w-[300px] text-left px-4 py-6 flex-1",
             children: [
-              /* @__PURE__ */ jsx45(ClockIcon, {}),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46(ClockIcon, {}),
+              /* @__PURE__ */ jsx46("div", {
                 className: "h-4"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand font-bold text-2xl mb-2",
                 children: "5 years and counting"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand",
                 children: "Making Remotion since 2021. No plans to change our business model or sell the company."
               })
@@ -24863,11 +25099,11 @@ var TrustSection = () => {
           /* @__PURE__ */ jsxs6(Card, {
             className: "lg:w-[300px] text-left px-4 py-6 flex-1",
             children: [
-              /* @__PURE__ */ jsx45(ShieldIcon, {}),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46(ShieldIcon, {}),
+              /* @__PURE__ */ jsx46("div", {
                 className: "h-4"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand font-bold text-2xl mb-2",
                 children: "Succession plan"
               }),
@@ -24876,7 +25112,7 @@ var TrustSection = () => {
                 children: [
                   "If something happens to us, the project will fall under",
                   " ",
-                  /* @__PURE__ */ jsx45("a", {
+                  /* @__PURE__ */ jsx46("a", {
                     href: "https://github.com/wcandillon",
                     target: "_blank",
                     className: "text-brand hover:underline underline-offset-4",
@@ -24891,15 +25127,15 @@ var TrustSection = () => {
           /* @__PURE__ */ jsxs6(Card, {
             className: "lg:w-[300px] text-left px-4 py-6 flex-1",
             children: [
-              /* @__PURE__ */ jsx45(UsersIcon, {}),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46(UsersIcon, {}),
+              /* @__PURE__ */ jsx46("div", {
                 className: "h-4"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand font-bold text-2xl mb-2",
                 children: "200+ customers"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand",
                 children: "More than 200 companies trust Remotion, from small businesses to FAANG."
               })
@@ -24907,7 +25143,7 @@ var TrustSection = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsx45("div", {
+      /* @__PURE__ */ jsx46("div", {
         className: "h-4"
       }),
       /* @__PURE__ */ jsxs6("div", {
@@ -24916,15 +25152,15 @@ var TrustSection = () => {
           /* @__PURE__ */ jsxs6(Card, {
             className: "lg:w-[300px] text-left px-4 py-6 flex-1",
             children: [
-              /* @__PURE__ */ jsx45(CodeIcon, {}),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46(CodeIcon, {}),
+              /* @__PURE__ */ jsx46("div", {
                 className: "h-4"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand font-bold text-2xl mb-2",
                 children: "Source-available"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand",
                 children: "Our code is publicly available on GitHub. You can inspect, fork, and self-host it. Full transparency, no black boxes."
               })
@@ -24933,15 +25169,15 @@ var TrustSection = () => {
           /* @__PURE__ */ jsxs6(Card, {
             className: "lg:w-[300px] text-left px-4 py-6 flex-1",
             children: [
-              /* @__PURE__ */ jsx45(VideoIcon, {}),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46(VideoIcon, {}),
+              /* @__PURE__ */ jsx46("div", {
                 className: "h-4"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand font-bold text-2xl mb-2",
                 children: "1M+ videos/month"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand",
                 children: "More than one million videos are rendered with Remotion every month. Battle-tested at scale."
               })
@@ -24950,15 +25186,15 @@ var TrustSection = () => {
           /* @__PURE__ */ jsxs6(Card, {
             className: "lg:w-[300px] text-left px-4 py-6 flex-1",
             children: [
-              /* @__PURE__ */ jsx45(StarIcon, {}),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46(StarIcon, {}),
+              /* @__PURE__ */ jsx46("div", {
                 className: "h-4"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand font-bold text-2xl mb-2",
                 children: "40,000+ GitHub stars"
               }),
-              /* @__PURE__ */ jsx45("div", {
+              /* @__PURE__ */ jsx46("div", {
                 className: "font-brand",
                 children: "One of the most popular media projects on GitHub. Trusted by the developer community."
               })