@remotion/promo-pages 4.0.474 → 4.0.475

package/dist/design.js

@@ -35,8 +35,8 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // ../design/dist/esm/index.mjs
 import * as React23 from "react";
 import * as React3 from "react";
-import { Fragment as Fragment2, jsx as jsx41 } from "react/jsx-runtime";
-import React52, { useCallback as useCallback25, useRef as useRef29, useState as useState22 } from "react";
+import { Fragment as Fragment2, jsx as jsx43 } from "react/jsx-runtime";
+import React52, { useCallback as useCallback26, useRef as useRef210, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -1378,7 +1378,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 = ({
@@ -4331,69 +4331,71 @@ import { forwardRef as forwardRef11, useCallback as useCallback17, useState as u
 import { jsx as jsx27 } from "react/jsx-runtime";
 import { useCallback as useCallback18, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
+import React29, { forwardRef as forwardRef12, useCallback as useCallback19, useRef as useRef25 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
-import React29 from "react";
+import React30 from "react";
 import {
-  useCallback as useCallback19,
+  useCallback as useCallback20,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo32,
-  useRef as useRef25,
+  useRef as useRef26,
   useState as useState18
 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-import React30 from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+import React31 from "react";
 import { useMemo as useMemo34 } from "react";
 import { createContext as createContext24, useContext as useContext34, useMemo as useMemo33 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
 import { jsx as jsx31 } from "react/jsx-runtime";
-import React32 from "react";
-import React33, { createContext as createContext25 } from "react";
-import React34, { useContext as useContext35 } from "react";
-import { useCallback as useCallback22 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+import React33 from "react";
+import React34, { createContext as createContext25 } from "react";
+import React35, { useContext as useContext35 } from "react";
+import { useCallback as useCallback23 } from "react";
 import {
-  useCallback as useCallback20,
+  useCallback as useCallback21,
   useContext as useContext36,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo35,
   useState as useState19
 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
-import React36, {
-  forwardRef as forwardRef12,
-  useCallback as useCallback21,
+import { jsx as jsx33 } from "react/jsx-runtime";
+import React37, {
+  forwardRef as forwardRef13,
+  useCallback as useCallback22,
   useContext as useContext37,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
-  useRef as useRef26,
+  useRef as useRef27,
   useState as useState20
 } from "react";
 import { useEffect as useEffect19 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
 import { jsx as jsx34 } from "react/jsx-runtime";
-import React38, { useMemo as useMemo37 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
+import React39, { useMemo as useMemo37 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
 import {
   Children,
-  forwardRef as forwardRef13,
+  forwardRef as forwardRef14,
   useMemo as useMemo38
 } from "react";
-import React39 from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
-import React41 from "react";
-import { forwardRef as forwardRef15, useCallback as useCallback23, useContext as useContext39 } from "react";
+import React40 from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+import React42 from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback24, useContext as useContext39 } from "react";
 import {
-  forwardRef as forwardRef14,
+  forwardRef as forwardRef15,
   useContext as useContext38,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo39,
-  useRef as useRef27
+  useRef as useRef28
 } from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
 import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var __defProp2 = Object.defineProperty;
 var __export2 = (target, all) => {
   for (var name in all)
@@ -5562,7 +5564,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;
@@ -5929,6 +5931,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,
@@ -6481,6 +6489,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));
 };
@@ -6505,6 +6539,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)) {
@@ -6521,6 +6659,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) {
@@ -7276,6 +7417,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
@@ -7329,6 +7471,7 @@ var interpolateKeyframedStatus = ({
     }
     try {
       return interpolateColors(frame, inputRange, outputs, {
+        easing: easing.map(easingToFn),
         posterize: status.posterize
       });
     } catch {
@@ -8735,7 +8878,7 @@ var animatedImageSchema = {
     max: 10,
     step: 0.1,
     default: 1,
-    description: "Playback Rate",
+    description: "Playback rate",
     hiddenFromList: false,
     keyframable: false
   },
@@ -13066,7 +13209,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,
@@ -13077,15 +13313,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.`);
@@ -13093,12 +13329,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,
@@ -13111,7 +13347,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));
     });
@@ -13145,9 +13381,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
     })
@@ -13245,7 +13481,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 = () => {
@@ -13290,7 +13526,7 @@ var MediaEnabledProvider = ({
   audioEnabled
 }) => {
   const value = useMemo33(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
-  return /* @__PURE__ */ jsx30(MediaEnabledContext.Provider, {
+  return /* @__PURE__ */ jsx31(MediaEnabledContext.Provider, {
     value,
     children
   });
@@ -13314,25 +13550,25 @@ var RemotionRootContexts = ({
   const logging = useMemo34(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
-  return /* @__PURE__ */ jsx31(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx32(LogLevelContext.Provider, {
     value: logging,
-    children: /* @__PURE__ */ jsx31(NonceContext.Provider, {
+    children: /* @__PURE__ */ jsx32(NonceContext.Provider, {
       value: nonceContext,
-      children: /* @__PURE__ */ jsx31(TimelineContextProvider, {
+      children: /* @__PURE__ */ jsx32(TimelineContextProvider, {
         frameState,
-        children: /* @__PURE__ */ jsx31(MediaEnabledProvider, {
+        children: /* @__PURE__ */ jsx32(MediaEnabledProvider, {
           videoEnabled,
           audioEnabled,
-          children: /* @__PURE__ */ jsx31(EditorPropsProvider, {
-            children: /* @__PURE__ */ jsx31(PrefetchProvider, {
-              children: /* @__PURE__ */ jsx31(SequenceManagerProvider, {
-                children: /* @__PURE__ */ jsx31(DurationsContextProvider, {
-                  children: /* @__PURE__ */ jsx31(BufferingProvider, {
-                    children: /* @__PURE__ */ jsx31(SharedAudioContextProvider, {
+          children: /* @__PURE__ */ jsx32(EditorPropsProvider, {
+            children: /* @__PURE__ */ jsx32(PrefetchProvider, {
+              children: /* @__PURE__ */ jsx32(SequenceManagerProvider, {
+                children: /* @__PURE__ */ jsx32(DurationsContextProvider, {
+                  children: /* @__PURE__ */ jsx32(BufferingProvider, {
+                    children: /* @__PURE__ */ jsx32(SharedAudioContextProvider, {
                       audioLatencyHint,
                       audioEnabled,
                       previewSampleRate,
-                      children: /* @__PURE__ */ jsx31(SharedAudioTagsContextProvider, {
+                      children: /* @__PURE__ */ jsx32(SharedAudioTagsContextProvider, {
                         numberOfAudioTags,
                         children
                       })
@@ -13518,7 +13754,7 @@ var resolveVideoConfigOrCatch = (params) => {
     };
   }
 };
-var SequenceStackTracesUpdateContext = React32.createContext(() => {});
+var SequenceStackTracesUpdateContext = React33.createContext(() => {});
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
     const param = window.remotion_envVariables;
@@ -13544,7 +13780,7 @@ var setupEnvVariables = () => {
     window.process.env[key] = env[key];
   });
 };
-var CurrentScaleContext = React33.createContext(null);
+var CurrentScaleContext = React34.createContext(null);
 var PreviewSizeContext = createContext25({
   setSize: () => {
     return;
@@ -13568,7 +13804,7 @@ var calculateScale = ({
   }
   return Number(previewSize);
 };
-var PixelDensityContext = React34.createContext(null);
+var PixelDensityContext = React35.createContext(null);
 var getOffthreadVideoSource = ({
   src,
   transparent,
@@ -13750,7 +13986,7 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback20(() => {
+  const onErr = useCallback21(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -13760,7 +13996,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);
     }
@@ -13769,7 +14005,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx32(Img, {
+  return /* @__PURE__ */ jsx33(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -13825,7 +14061,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;
@@ -13835,7 +14071,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React36.useInsertionEffect ?? React36.useLayoutEffect;
+  const effectToUse = React37.useInsertionEffect ?? React37.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -13893,7 +14129,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     mediaVolume
   });
   warnAboutTooHighVolume(userPreferredVolume);
-  const getStack = useCallback21(() => {
+  const getStack = useCallback22(() => {
     return _remotionInternalStack ?? null;
   }, [_remotionInternalStack]);
   useMediaInTimeline({
@@ -13998,7 +14234,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(() => {
@@ -14039,7 +14275,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,
@@ -14051,7 +14287,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     ...nativeProps
   });
 };
-var VideoForPreview = forwardRef12(VideoForDevelopmentRefForwardingFunction);
+var VideoForPreview = forwardRef13(VideoForDevelopmentRefForwardingFunction);
 var InnerOffthreadVideo = (props2) => {
   const {
     startFrom,
@@ -14068,7 +14304,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") {
@@ -14082,13 +14318,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,
@@ -14103,7 +14339,7 @@ var InnerOffthreadVideo = (props2) => {
   }
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx34(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx35(OffthreadVideoForRendering, {
       pauseWhenBuffering: pauseWhenBuffering ?? false,
       ...otherProps,
       trimAfter: undefined,
@@ -14125,7 +14361,7 @@ var InnerOffthreadVideo = (props2) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx34(VideoForPreview, {
+  return /* @__PURE__ */ jsx35(VideoForPreview, {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -14174,7 +14410,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,
@@ -14210,20 +14446,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,
@@ -14258,33 +14494,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
                             })
@@ -14474,9 +14710,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);
@@ -14485,11 +14721,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(() => {
@@ -14533,7 +14769,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",
@@ -14544,8 +14780,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",
@@ -15027,7 +15263,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();
@@ -15218,13 +15454,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,
@@ -15254,7 +15490,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)];
@@ -15267,7 +15503,7 @@ var VideoForwardingFunction = (props2, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx38(Html5Video, {
+      return /* @__PURE__ */ jsx39(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         stack,
@@ -15275,7 +15511,7 @@ var VideoForwardingFunction = (props2, ref) => {
       });
     }
     const mediaDuration = durationFetched * fps;
-    return /* @__PURE__ */ jsx38(Loop, {
+    return /* @__PURE__ */ jsx39(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
         mediaDurationInFrames: mediaDuration,
@@ -15285,7 +15521,7 @@ var VideoForwardingFunction = (props2, ref) => {
       layout: "none",
       name,
       showInTimeline: false,
-      children: /* @__PURE__ */ jsx38(Html5Video, {
+      children: /* @__PURE__ */ jsx39(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         stack,
@@ -15294,13 +15530,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,
@@ -15315,14 +15551,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,
@@ -15335,7 +15571,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onAutoPlayError: onAutoPlayError ?? undefined
   });
 };
-var Html5Video = forwardRef15(VideoForwardingFunction);
+var Html5Video = forwardRef16(VideoForwardingFunction);
 addSequenceStackTraces(Html5Video);
 checkMultipleRemotionVersions();
 var proxyObj = {};
@@ -15364,9 +15600,9 @@ addSequenceStackTraces(Composition);
 addSequenceStackTraces(Folder);
 
 // ../shapes/dist/esm/index.mjs
-import React, { useCallback as useCallback24, useMemo as useMemo40, useRef as useRef28 } from "react";
+import React, { useCallback as useCallback25, useMemo as useMemo40, useRef as useRef29 } from "react";
 import { version } from "react-dom";
-import { jsx as jsx39, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs3 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
 import { jsx as jsx310 } from "react/jsx-runtime";
 import { jsx as jsx42 } from "react/jsx-runtime";
@@ -15553,11 +15789,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);
@@ -15571,7 +15807,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
         } : {
@@ -15591,17 +15827,17 @@ var RenderSvg = ({
           const prevY = prevInstruction.y;
           return /* @__PURE__ */ jsxs3(React.Fragment, {
             children: [
-              /* @__PURE__ */ jsx39("path", {
+              /* @__PURE__ */ jsx40("path", {
                 d: `M ${prevX} ${prevY} ${i.cp1x} ${i.cp1y}`,
                 strokeWidth: 2,
                 stroke: "rgba(0, 0, 0, 0.4)"
               }),
-              /* @__PURE__ */ jsx39("path", {
+              /* @__PURE__ */ jsx40("path", {
                 d: `M ${i.x} ${i.y} ${i.cp2x} ${i.cp2y}`,
                 strokeWidth: 2,
                 stroke: "rgba(0, 0, 0, 0.4)"
               }),
-              /* @__PURE__ */ jsx39("circle", {
+              /* @__PURE__ */ jsx40("circle", {
                 cx: i.cp1x,
                 cy: i.cp1y,
                 r: 3,
@@ -15609,7 +15845,7 @@ var RenderSvg = ({
                 strokeWidth: 2,
                 stroke: "black"
               }),
-              /* @__PURE__ */ jsx39("circle", {
+              /* @__PURE__ */ jsx40("circle", {
                 cx: i.cp2x,
                 cy: i.cp2y,
                 r: 3,
@@ -15624,7 +15860,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),
@@ -15639,7 +15875,7 @@ var RenderSvg = ({
   if (!videoConfig) {
     return svg;
   }
-  return /* @__PURE__ */ jsx39(Sequence, {
+  return /* @__PURE__ */ jsx40(Sequence, {
     layout: "none",
     from,
     hidden,
@@ -17752,8 +17988,8 @@ var extrudeAndTransformElement = (options) => {
 // ../design/dist/esm/index.mjs
 import { jsx as jsx212, Fragment as Fragment3 } from "react/jsx-runtime";
 import { jsx as jsx312, jsxs as jsxs5 } from "react/jsx-runtime";
-import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef30 } from "react";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef31 } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
 import React62 from "react";
 import { jsx as jsx63 } from "react/jsx-runtime";
@@ -17764,7 +18000,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";
@@ -17803,7 +18039,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";
@@ -17813,21 +18049,21 @@ import * as React322 from "react";
 import { Fragment as Fragment8, jsx as jsx242, jsxs as jsxs4 } from "react/jsx-runtime";
 import { forwardRef as forwardRef142, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef132, createElement as createElement6 } from "react";
-import * as React37 from "react";
+import * as React372 from "react";
 import { jsx as jsx252, jsxs as jsxs52 } from "react/jsx-runtime";
 import { jsx as jsx262 } from "react/jsx-runtime";
 import * as React49 from "react";
-import * as React382 from "react";
+import * as React38 from "react";
 import { jsx as jsx272 } from "react/jsx-runtime";
 import * as React47 from "react";
-import React40 from "react";
+import React402 from "react";
 import * as React392 from "react";
 import { Fragment as Fragment22, jsx as jsx282 } from "react/jsx-runtime";
 import { jsx as jsx292 } from "react/jsx-runtime";
 import React210 from "react";
 import { jsx as jsx2102 } from "react/jsx-runtime";
-import * as React42 from "react";
-import * as React412 from "react";
+import * as React422 from "react";
+import * as React41 from "react";
 import * as React43 from "react";
 import * as ReactDOM5 from "react-dom";
 import { jsx as jsx302 } from "react/jsx-runtime";
@@ -17845,7 +18081,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) {
@@ -17856,7 +18092,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;
       }
@@ -17869,7 +18105,7 @@ function composeRefs(...refs) {
           if (typeof cleanup == "function") {
             cleanup();
           } else {
-            setRef(refs[i], null);
+            setRef2(refs[i], null);
           }
         }
       };
@@ -17907,9 +18143,9 @@ function createSlot(ownerName) {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx41(SlotClone, { ...slotProps, ref: forwardedRef, children: React23.isValidElement(newElement) ? React23.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx43(SlotClone, { ...slotProps, ref: forwardedRef, children: React23.isValidElement(newElement) ? React23.cloneElement(newElement, undefined, newChildren) : null });
     }
-    return /* @__PURE__ */ jsx41(SlotClone, { ...slotProps, ref: forwardedRef, children });
+    return /* @__PURE__ */ jsx43(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
@@ -17937,7 +18173,7 @@ function createSlotClone(ownerName) {
 var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
 function createSlottable(ownerName) {
   const Slottable2 = ({ children }) => {
-    return /* @__PURE__ */ jsx41(Fragment2, { children });
+    return /* @__PURE__ */ jsx43(Fragment2, { children });
   };
   Slottable2.displayName = `${ownerName}.Slottable`;
   Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
@@ -18002,7 +18238,7 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React35.useState({
+  const [state, setState] = React32.useState({
     progress: 0,
     isActive: false
   });
@@ -18014,7 +18250,7 @@ var useHoverTransforms = (ref, disabled) => {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React35.useEffect(() => {
+  React32.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -18089,8 +18325,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;
@@ -18274,7 +18510,7 @@ var Spinner = ({ size, duration }) => {
       height: size
     };
   }, [size]);
-  const pathsRef = useRef30([]);
+  const pathsRef = useRef31([]);
   useEffect23(() => {
     const animate = () => {
       const now = performance.now();
@@ -18293,11 +18529,11 @@ var Spinner = ({ size, duration }) => {
       cancelAnimationFrame(id);
     };
   }, [duration]);
-  return /* @__PURE__ */ jsx43("svg", {
+  return /* @__PURE__ */ jsx44("svg", {
     style,
     viewBox: `0 0 ${viewBox} ${viewBox}`,
     children: new Array(lines).fill(true).map((_, index) => {
-      return /* @__PURE__ */ jsx43("path", {
+      return /* @__PURE__ */ jsx44("path", {
         ref: (el) => pathsRef.current[index] = el,
         style: {
           rotate: `${index * Math.PI * 2 / lines}rad`,
@@ -18320,9 +18556,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;
     }
@@ -18359,7 +18595,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();
   }, []);
@@ -18655,7 +18891,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) {
@@ -18663,7 +18899,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);
@@ -21761,9 +21997,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
@@ -21772,7 +22008,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,
@@ -22264,9 +22500,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,
@@ -22278,9 +22514,9 @@ var Select = (props) => {
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const triggerPointerDownPosRef = React362.useRef(null);
+  const triggerPointerDownPosRef = React36.useRef(null);
   const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
-  const [nativeOptionsSet, setNativeOptionsSet] = React362.useState(/* @__PURE__ */ new Set);
+  const [nativeOptionsSet, setNativeOptionsSet] = React36.useState(/* @__PURE__ */ new Set);
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
   return /* @__PURE__ */ jsx242(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs4(SelectProvider, {
     required,
@@ -22302,10 +22538,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);
@@ -22333,7 +22569,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);
@@ -22401,7 +22637,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;
@@ -22419,7 +22655,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 || "▼" });
 });
@@ -22430,9 +22666,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);
   }, []);
@@ -22446,7 +22682,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",
@@ -22466,20 +22702,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;
@@ -22496,14 +22732,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) => {
@@ -22533,7 +22769,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);
@@ -22550,7 +22786,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) {
@@ -22559,8 +22795,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) {
@@ -22655,18 +22891,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();
@@ -22747,12 +22983,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?.();
@@ -22786,7 +23022,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",
@@ -22816,12 +23052,12 @@ var SelectPopperPosition = React362.forwardRef((props, forwardedRef) => {
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME2, {});
 var VIEWPORT_NAME = "SelectViewport";
-var SelectViewport = React362.forwardRef((props, forwardedRef) => {
+var SelectViewport = React36.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, nonce, ...viewportProps } = props;
   const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
   const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs2(forwardedRef, contentContext.onViewportChange);
-  const prevScrollTopRef = React362.useRef(0);
+  const prevScrollTopRef = React36.useRef(0);
   return /* @__PURE__ */ jsxs4(Fragment8, { children: [
     /* @__PURE__ */ jsx242("style", {
       dangerouslySetInnerHTML: {
@@ -22870,14 +23106,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 });
@@ -22885,7 +23121,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,
@@ -22896,8 +23132,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 = () => {
@@ -22915,7 +23151,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, {
@@ -22964,16 +23200,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);
@@ -22986,17 +23222,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) {
@@ -23024,10 +23260,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) {
@@ -23055,18 +23291,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(() => {
@@ -23095,13 +23331,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);
@@ -23112,12 +23348,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");
@@ -23133,9 +23369,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) {
@@ -23145,11 +23381,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];
@@ -23238,7 +23474,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,
@@ -23253,7 +23489,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,
@@ -23262,7 +23498,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,
@@ -23271,7 +23507,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),
@@ -23288,13 +23524,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,
@@ -23313,7 +23549,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
@@ -23346,19 +23582,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)
@@ -23369,11 +23605,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;
@@ -23394,7 +23630,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;
@@ -23487,14 +23723,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);
@@ -23504,12 +23740,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);
     });
@@ -23518,7 +23754,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 [];
@@ -23836,13 +24072,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++));
@@ -24453,11 +24689,11 @@ var Triangle22 = (props) => {
 };
 
 // src/components/design.tsx
-import { useCallback as useCallback37, useState as useState39 } from "react";
+import { useCallback as useCallback38, useState as useState39 } from "react";
 
 // src/components/ManageTeamMembers.tsx
-import React53, { useCallback as useCallback36, useState as useState38 } from "react";
-import { jsx as jsx44, jsxs as jsxs6, Fragment as Fragment9 } from "react/jsx-runtime";
+import React53, { useCallback as useCallback37, useState as useState38 } from "react";
+import { jsx as jsx45, jsxs as jsxs6, Fragment as Fragment9 } from "react/jsx-runtime";
 function generateId() {
   return Math.random().toString(36).substr(2, 9);
 }
@@ -24469,26 +24705,26 @@ var Row = ({ value, onChange, onDelete, disableDelete }) => {
   return /* @__PURE__ */ jsxs6("div", {
     className: "flex flex-row gap-2 items-center",
     children: [
-      /* @__PURE__ */ jsx44(Input, {
+      /* @__PURE__ */ jsx45(Input, {
         placeholder: "Enter username",
         className: "w-full block flex-1",
         value,
         onChange: (e) => onChange(e.target.value)
       }),
-      /* @__PURE__ */ jsx44(Button, {
+      /* @__PURE__ */ jsx45(Button, {
         className: "hover:text-white hover:bg-warn transition-colors w-10 h-10 p-0 rounded-full",
         onClick: onDelete,
         type: "button",
         disabled: disableDelete,
         "aria-label": "Delete member",
         depth: 0.5,
-        children: /* @__PURE__ */ jsx44("svg", {
+        children: /* @__PURE__ */ jsx45("svg", {
           width: "16",
           height: "16",
           viewBox: "0 0 10 10",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
-          children: /* @__PURE__ */ jsx44("path", {
+          children: /* @__PURE__ */ jsx45("path", {
             d: "M1 1L9 9M1 9L9 1",
             stroke: "currentColor",
             strokeWidth: "1.5",
@@ -24502,7 +24738,7 @@ var Row = ({ value, onChange, onDelete, disableDelete }) => {
 var ManageTeamMembers = () => {
   const [members, setMembers] = useState38(initialMembers);
   const displayedMembers = [...members, { id: "NEW", name: "" }];
-  const updateMember = useCallback36((idx, value) => {
+  const updateMember = useCallback37((idx, value) => {
     if (idx === members.length) {
       if (value.trim() !== "") {
         setMembers((prev) => [...prev, { id: generateId(), name: value }]);
@@ -24511,11 +24747,11 @@ var ManageTeamMembers = () => {
       setMembers((prev) => prev.map((m, i) => i === idx ? { ...m, name: value } : m));
     }
   }, [members.length]);
-  const deleteMember = useCallback36((idx) => {
+  const deleteMember = useCallback37((idx) => {
     setMembers((prev) => prev.filter((_, i) => i !== idx));
   }, []);
   const [loading, setLoading] = useState38(false);
-  const save = useCallback36(() => {
+  const save = useCallback37(() => {
     setLoading(true);
     setTimeout(() => {
       setLoading(false);
@@ -24523,32 +24759,32 @@ var ManageTeamMembers = () => {
   }, []);
   return /* @__PURE__ */ jsxs6(Fragment9, {
     children: [
-      /* @__PURE__ */ jsx44("h2", {
+      /* @__PURE__ */ jsx45("h2", {
         children: "Manage team members"
       }),
-      /* @__PURE__ */ jsx44("p", {
+      /* @__PURE__ */ jsx45("p", {
         className: "font-brand",
         children: "Add a new team member to your team."
       }),
       displayedMembers.map((member, idx) => /* @__PURE__ */ jsxs6(React53.Fragment, {
         children: [
-          /* @__PURE__ */ jsx44(Row, {
+          /* @__PURE__ */ jsx45(Row, {
             value: member.name,
             onChange: (val) => updateMember(idx, val),
             onDelete: idx < members.length ? () => deleteMember(idx) : undefined,
             disableDelete: idx >= members.length
           }),
-          /* @__PURE__ */ jsx44("div", {
+          /* @__PURE__ */ jsx45("div", {
             className: "h-2"
           })
         ]
       }, idx)),
-      /* @__PURE__ */ jsx44("div", {
+      /* @__PURE__ */ jsx45("div", {
         className: "h-4"
       }),
-      /* @__PURE__ */ jsx44("div", {
+      /* @__PURE__ */ jsx45("div", {
         className: "flex flex-row justify-end",
-        children: /* @__PURE__ */ jsx44(Button, {
+        children: /* @__PURE__ */ jsx45(Button, {
           className: "bg-brand text-white",
           loading,
           onClick: save,
@@ -24574,20 +24810,20 @@ var DesignPage = () => {
   const [active, setActive] = useState39(false);
   const [submitButtonActive, setSubmitButtonActive] = useState39(true);
   const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState39(true);
-  const onClick = useCallback37(() => {
+  const onClick = useCallback38(() => {
     setSubmitButtonActive(false);
     setTimeout(() => {
       setSubmitButtonActive(true);
     }, 1000);
   }, []);
-  const onClickPrimary = useCallback37(() => {
+  const onClickPrimary = useCallback38(() => {
     setSubmitButtonPrimaryActive(false);
     setTimeout(() => {
       setSubmitButtonPrimaryActive(true);
     }, 1000);
   }, []);
   const [saving, setSaving] = useState39(false);
-  const save = useCallback37(() => {
+  const save = useCallback38(() => {
     setSaving(true);
     setTimeout(() => {
       setSaving(false);