@remotion/promo-pages 4.0.464 → 4.0.466

package/dist/design.js

@@ -1378,7 +1378,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect20, useMemo as useMemo39, useState as useState21 } from "react";
+import React33, { useEffect as useEffect20, useMemo as useMemo39, useState as useState20 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -5890,8 +5890,7 @@ import {
   useContext as useContext32,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect10,
-  useRef as useRef21,
-  useState as useState17
+  useRef as useRef21
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
@@ -5901,7 +5900,7 @@ import {
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo31,
   useRef as useRef22,
-  useState as useState18
+  useState as useState17
 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React29 from "react";
@@ -5918,7 +5917,7 @@ import {
   useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo34,
-  useState as useState19
+  useState as useState18
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React34, {
@@ -5928,7 +5927,7 @@ import React34, {
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo35,
   useRef as useRef23,
-  useState as useState20,
+  useState as useState19,
   useCallback as useCallback20
 } from "react";
 import { useEffect as useEffect17 } from "react";
@@ -5990,20 +5989,70 @@ var CompositionRenderErrorContext = createContext3({
   setError: () => {},
   clearError: () => {}
 });
+var getHot = () => {
+  try {
+    if (typeof __webpack_module__ === "undefined") {
+      return null;
+    }
+    return __webpack_module__.hot ?? null;
+  } catch {
+    return null;
+  }
+};
 
 class CompositionErrorBoundary extends React2.Component {
   state = { hasError: false };
+  hmrStatusHandler = null;
   static getDerivedStateFromError() {
     return { hasError: true };
   }
   componentDidCatch(error) {
     this.props.onError(error);
+    this.subscribeToHmrReset();
   }
-  componentDidUpdate(_prevProps) {
+  componentDidMount() {
     if (!this.state.hasError) {
       this.props.onClear();
     }
   }
+  componentDidUpdate(_prevProps, prevState) {
+    if (prevState.hasError && !this.state.hasError) {
+      this.props.onClear();
+    }
+  }
+  componentWillUnmount() {
+    this.unsubscribeFromHmrReset();
+  }
+  subscribeToHmrReset() {
+    if (this.hmrStatusHandler) {
+      return;
+    }
+    const hot = getHot();
+    if (!hot) {
+      return;
+    }
+    const handler = (status) => {
+      if (status !== "idle") {
+        return;
+      }
+      this.unsubscribeFromHmrReset();
+      this.setState({ hasError: false });
+    };
+    this.hmrStatusHandler = handler;
+    hot.addStatusHandler(handler);
+  }
+  unsubscribeFromHmrReset() {
+    const handler = this.hmrStatusHandler;
+    if (!handler) {
+      return;
+    }
+    this.hmrStatusHandler = null;
+    const hot = getHot();
+    if (!hot) {
+      return;
+    }
+    hot.removeStatusHandler(handler);
+  }
   render() {
     if (this.state.hasError) {
       return null;
@@ -7026,7 +7075,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.464";
+var VERSION = "4.0.466";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -8071,9 +8120,10 @@ var RegularSequenceRefForwardingFunction = ({
   showInTimeline = true,
   hidden = false,
   _experimentalControls: controls,
-  _experimentalEffects,
+  _remotionInternalEffects,
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
+  _remotionInternalDocumentationLink: documentationLink,
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
@@ -8144,6 +8194,7 @@ var RegularSequenceRefForwardingFunction = ({
   const timelineClipName = useMemo14(() => {
     return name ?? "";
   }, [name]);
+  const resolvedDocumentationLink = documentationLink ?? (name === undefined ? "https://www.remotion.dev/docs/sequence" : null);
   const env = useRemotionEnvironment();
   const inheritedStack = other?.stack ?? null;
   const stackRef = useRef6(null);
@@ -8153,28 +8204,51 @@ var RegularSequenceRefForwardingFunction = ({
       return;
     }
     if (isMedia) {
-      registerSequence({
-        type: isMedia.type,
-        controls: controls ?? null,
-        effects: _experimentalEffects ?? [],
-        displayName: timelineClipName,
-        doesVolumeChange: isMedia.data.doesVolumeChange,
-        duration: actualDurationInFrames,
-        from,
-        id,
-        loopDisplay,
-        nonce: nonce.get(),
-        parent: parentSequence?.id ?? null,
-        playbackRate: isMedia.data.playbackRate,
-        postmountDisplay: postmountDisplay ?? null,
-        premountDisplay: premountDisplay ?? null,
-        rootId,
-        showInTimeline,
-        src: isMedia.data.src,
-        getStack: () => stackRef.current,
-        startMediaFrom: isMedia.data.startMediaFrom,
-        volume: isMedia.data.volumes
-      });
+      if (isMedia.type === "image") {
+        registerSequence({
+          type: "image",
+          controls: controls ?? null,
+          effects: _remotionInternalEffects ?? [],
+          displayName: timelineClipName,
+          documentationLink: resolvedDocumentationLink,
+          duration: actualDurationInFrames,
+          from,
+          id,
+          loopDisplay,
+          nonce: nonce.get(),
+          parent: parentSequence?.id ?? null,
+          postmountDisplay: postmountDisplay ?? null,
+          premountDisplay: premountDisplay ?? null,
+          rootId,
+          showInTimeline,
+          src: isMedia.src,
+          getStack: () => stackRef.current
+        });
+      } else {
+        registerSequence({
+          type: isMedia.type,
+          controls: controls ?? null,
+          effects: _remotionInternalEffects ?? [],
+          displayName: timelineClipName,
+          documentationLink: resolvedDocumentationLink,
+          doesVolumeChange: isMedia.data.doesVolumeChange,
+          duration: actualDurationInFrames,
+          from,
+          id,
+          loopDisplay,
+          nonce: nonce.get(),
+          parent: parentSequence?.id ?? null,
+          playbackRate: isMedia.data.playbackRate,
+          postmountDisplay: postmountDisplay ?? null,
+          premountDisplay: premountDisplay ?? null,
+          rootId,
+          showInTimeline,
+          src: isMedia.data.src,
+          getStack: () => stackRef.current,
+          startMediaFrom: isMedia.data.startMediaFrom,
+          volume: isMedia.data.volumes
+        });
+      }
       return () => {
         unregisterSequence(id);
       };
@@ -8184,6 +8258,7 @@ var RegularSequenceRefForwardingFunction = ({
       duration: actualDurationInFrames,
       id,
       displayName: timelineClipName,
+      documentationLink: resolvedDocumentationLink,
       parent: parentSequence?.id ?? null,
       type: "sequence",
       rootId,
@@ -8194,7 +8269,7 @@ var RegularSequenceRefForwardingFunction = ({
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
       controls: controls ?? null,
-      effects: _experimentalEffects ?? []
+      effects: _remotionInternalEffects ?? []
     });
     return () => {
       unregisterSequence(id);
@@ -8217,8 +8292,9 @@ var RegularSequenceRefForwardingFunction = ({
     postmountDisplay,
     env.isStudio,
     controls,
-    _experimentalEffects,
-    isMedia
+    _remotionInternalEffects,
+    isMedia,
+    resolvedDocumentationLink
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -8495,6 +8571,7 @@ var runEffectChain = async ({
   if (isCancelled()) {
     return false;
   }
+  let flipWebGLSourceY = true;
   for (let runIndex = 0;runIndex < runs.length; runIndex++) {
     const run = runs[runIndex];
     const [a, b] = state.pool.getPair(run.backend);
@@ -8509,9 +8586,11 @@ var runEffectChain = async ({
         params: eff.params,
         width,
         height,
-        gpuDevice
+        gpuDevice,
+        flipSourceY: run.backend === "webgl2" ? flipWebGLSourceY : false
       });
       if (run.backend === "webgl2") {
+        flipWebGLSourceY = false;
         state.pool.assertContextNotLost(dst);
       }
       currentImage = dst;
@@ -8520,12 +8599,20 @@ var runEffectChain = async ({
     lastTarget = currentImage ?? lastTarget;
     const nextRun = runs[runIndex + 1];
     if (nextRun && nextRun.backend !== run.backend && lastTarget) {
-      const bitmap = await createImageBitmap(lastTarget);
-      if (isCancelled()) {
-        bitmap.close();
-        return false;
+      if (run.backend === "2d" && nextRun.backend === "webgl2") {
+        currentImage = lastTarget;
+        flipWebGLSourceY = true;
+      } else {
+        const bitmap = await createImageBitmap(lastTarget);
+        if (isCancelled()) {
+          bitmap.close();
+          return false;
+        }
+        currentImage = bitmap;
+        if (nextRun.backend === "webgl2") {
+          flipWebGLSourceY = false;
+        }
       }
-      currentImage = bitmap;
     }
   }
   if (!lastTarget) {
@@ -8971,7 +9058,7 @@ var AnimatedImageInner = ({
   className,
   style,
   durationInFrames,
-  _experimentalEffects: effects = [],
+  effects = [],
   _experimentalControls: controls,
   ref,
   ...sequenceProps
@@ -8995,8 +9082,9 @@ var AnimatedImageInner = ({
     layout: "none",
     durationInFrames: resolvedDuration,
     name: "<AnimatedImage>",
+    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
     _experimentalControls: controls,
-    _experimentalEffects: memoizedEffectDefinitions,
+    _remotionInternalEffects: memoizedEffectDefinitions,
     ...sequenceProps,
     children: /* @__PURE__ */ jsx13(AnimatedImageContent, {
       ...animatedImageProps,
@@ -9035,7 +9123,7 @@ var SolidInner = ({
   color,
   width,
   height,
-  _experimentalEffects: experimentalEffects = [],
+  effects = [],
   className,
   style,
   overrideId,
@@ -9044,7 +9132,7 @@ var SolidInner = ({
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const [outputCanvas, setOutputCanvas] = useState7(null);
   const memoizedEffects = useMemoizedEffects({
-    effects: experimentalEffects,
+    effects,
     overrideId: overrideId ?? null
   });
   const sourceCanvas = useMemo17(() => {
@@ -9124,7 +9212,7 @@ var SolidInner = ({
   });
 };
 var SolidOuter = forwardRef5(({
-  _experimentalEffects = [],
+  effects = [],
   _experimentalControls: controls,
   color,
   height,
@@ -9138,16 +9226,17 @@ var SolidOuter = forwardRef5(({
   showInTimeline,
   ...props
 }, ref) => {
-  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(_experimentalEffects);
+  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
     from,
     hidden,
     showInTimeline,
     _experimentalControls: controls,
-    _experimentalEffects: memoizedEffectDefinitions,
+    _remotionInternalEffects: memoizedEffectDefinitions,
     durationInFrames,
     name: name ?? "<Solid>",
+    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/solid" : undefined,
     ...props,
     children: /* @__PURE__ */ jsx14(SolidInner, {
       ref,
@@ -9157,7 +9246,7 @@ var SolidOuter = forwardRef5(({
       width,
       className,
       style,
-      _experimentalEffects
+      effects
     })
   });
 });
@@ -9372,7 +9461,7 @@ HtmlInCanvasContent.displayName = "HtmlInCanvasContent";
 var HtmlInCanvasInner = forwardRef6(({
   width,
   height,
-  _experimentalEffects: effects = [],
+  effects = [],
   children,
   onPaint,
   onInit,
@@ -9388,8 +9477,9 @@ var HtmlInCanvasInner = forwardRef6(({
   return /* @__PURE__ */ jsx15(Sequence, {
     durationInFrames: resolvedDuration,
     name: name ?? "<HtmlInCanvas>",
+    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/remotion/html-in-canvas" : undefined,
     _experimentalControls: controls,
-    _experimentalEffects: memoizedEffectDefinitions,
+    _remotionInternalEffects: memoizedEffectDefinitions,
     layout: "none",
     ...sequenceProps,
     children: /* @__PURE__ */ jsx15(HtmlInCanvasContent, {
@@ -9636,6 +9726,7 @@ var Loop = ({
       durationInFrames,
       from,
       name: name ?? "<Loop>",
+      _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/loop" : undefined,
       _remotionInternalLoopDisplay: loopDisplay,
       layout: props.layout,
       style,
@@ -10911,85 +11002,6 @@ var useBasicMediaInTimeline = ({
   ]);
   return memoizedResult;
 };
-var useImageInTimeline = ({
-  src,
-  displayName,
-  id,
-  getStack,
-  showInTimeline,
-  premountDisplay,
-  postmountDisplay,
-  loopDisplay,
-  controls
-}) => {
-  const parentSequence = useContext24(SequenceContext);
-  const { registerSequence, unregisterSequence } = useContext24(SequenceManager);
-  const { durationInFrames } = useVideoConfig();
-  const mediaStartsAt = useMediaStartsAt();
-  const { duration, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
-    volume: undefined,
-    mediaVolume: 0,
-    mediaType: "image",
-    src,
-    displayName,
-    trimAfter: undefined,
-    trimBefore: undefined,
-    playbackRate: 1,
-    sequenceDurationInFrames: durationInFrames,
-    mediaStartsAt,
-    loop: false
-  });
-  const { isStudio } = useRemotionEnvironment();
-  useEffect8(() => {
-    if (!src) {
-      throw new Error("No src passed");
-    }
-    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
-      return;
-    }
-    if (!showInTimeline) {
-      return;
-    }
-    registerSequence({
-      type: "image",
-      src,
-      id,
-      duration,
-      from: 0,
-      parent: parentSequence?.id ?? null,
-      displayName: finalDisplayName,
-      rootId,
-      showInTimeline: true,
-      nonce: nonce.get(),
-      loopDisplay,
-      getStack,
-      premountDisplay,
-      postmountDisplay,
-      controls,
-      effects: []
-    });
-    return () => {
-      unregisterSequence(id);
-    };
-  }, [
-    duration,
-    id,
-    parentSequence,
-    src,
-    registerSequence,
-    unregisterSequence,
-    nonce,
-    getStack,
-    showInTimeline,
-    premountDisplay,
-    postmountDisplay,
-    isStudio,
-    loopDisplay,
-    rootId,
-    finalDisplayName,
-    controls
-  ]);
-};
 var useMediaInTimeline = ({
   volume,
   mediaVolume,
@@ -11002,7 +11014,8 @@ var useMediaInTimeline = ({
   showInTimeline,
   premountDisplay,
   postmountDisplay,
-  loopDisplay
+  loopDisplay,
+  documentationLink
 }) => {
   const parentSequence = useContext24(SequenceContext);
   const startsAt = useMediaStartsAt();
@@ -11041,6 +11054,7 @@ var useMediaInTimeline = ({
       from: 0,
       parent: parentSequence?.id ?? null,
       displayName: finalDisplayName,
+      documentationLink,
       rootId,
       volume: volumes,
       showInTimeline: true,
@@ -11076,6 +11090,7 @@ var useMediaInTimeline = ({
     premountDisplay,
     postmountDisplay,
     loopDisplay,
+    documentationLink,
     rootId,
     finalDisplayName,
     isStudio
@@ -12159,7 +12174,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     showInTimeline,
     premountDisplay: sequenceContext?.premountDisplay ?? null,
     postmountDisplay: sequenceContext?.postmountDisplay ?? null,
-    loopDisplay: undefined
+    loopDisplay: undefined,
+    documentationLink: name === undefined ? "https://www.remotion.dev/docs/html5-audio" : null
   });
   useMediaPlayback({
     mediaRef: audioRef,
@@ -12676,34 +12692,29 @@ var ImgInner = ({
   stack,
   showInTimeline,
   src,
+  from,
+  durationInFrames,
   _experimentalControls: controls,
   ...props2
 }) => {
-  const sequenceContext = useContext32(SequenceContext);
-  const [timelineId] = useState17(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  const stackRef = useRef21(null);
-  stackRef.current = stack ?? null;
-  const getStack = useCallback17(() => stackRef.current, []);
-  useImageInTimeline({
-    src,
-    displayName: name ?? null,
-    id: timelineId,
-    getStack,
+  return /* @__PURE__ */ jsx26(Sequence, {
+    layout: "none",
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    _remotionInternalStack: stack,
+    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/img" : undefined,
+    _remotionInternalIsMedia: { type: "image", src },
+    name: name ?? "<Img>",
+    _experimentalControls: controls,
     showInTimeline: showInTimeline ?? true,
-    premountDisplay: sequenceContext?.premountDisplay ?? null,
-    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
-    loopDisplay: undefined,
-    controls: controls ?? null
-  });
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx26(ImgContent, {
-    src,
-    ...props2
+    hidden,
+    children: /* @__PURE__ */ jsx26(ImgContent, {
+      src,
+      ...props2
+    })
   });
 };
 var imgSchema = {
@@ -12720,9 +12731,9 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState18([]);
-  const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
-  const [compositions, setCompositions] = useState18(initialCompositions);
+  const [folders, setFolders] = useState17([]);
+  const [canvasContent, setCanvasContent] = useState17(initialCanvasContent);
+  const [compositions, setCompositions] = useState17(initialCompositions);
   const currentcompositionsRef = useRef22(compositions);
   const updateCompositions = useCallback18((updateComps) => {
     setCompositions((comps) => {
@@ -12865,6 +12876,7 @@ var createEffect = (definition) => {
   const { calculateKey: userCalculateKey, validateParams } = definition;
   const widened = {
     ...definition,
+    documentationLink: definition.documentationLink ?? null,
     calculateKey: (params) => {
       const disabled = params.disabled ?? false;
       return `${userCalculateKey(params)}-disabled-${disabled}`;
@@ -13318,7 +13330,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState19(null);
+  const [imageSrc, setImageSrc] = useState18(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect11(() => {
     if (!window.remotion_videoEnabled) {
@@ -13516,7 +13528,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const parentSequence = useContext35(SequenceContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState20(() => String(Math.random()));
+  const [timelineId] = useState19(() => String(Math.random()));
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
   }
@@ -13543,7 +13555,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     showInTimeline,
     premountDisplay: parentSequence?.premountDisplay ?? null,
     postmountDisplay: parentSequence?.postmountDisplay ?? null,
-    loopDisplay: undefined
+    loopDisplay: undefined,
+    documentationLink: name === undefined ? onlyWarnForMediaSeekingError ? "https://www.remotion.dev/docs/offthreadvideo" : "https://www.remotion.dev/docs/html5-video" : null
   });
   useMediaPlayback({
     mediaRef: videoRef,
@@ -13585,7 +13598,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle8(ref, () => {
     return videoRef.current;
   }, []);
-  useState20(() => playbackLogging({
+  useState19(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -14162,6 +14175,7 @@ var SeriesInner = (props2) => {
       startFrame += durationInFramesProp + offset;
       return /* @__PURE__ */ jsx35(Sequence, {
         name: name || "<Series.Sequence>",
+        _remotionInternalDocumentationLink: name ? undefined : "https://www.remotion.dev/docs/series",
         from: currentStartFrame,
         durationInFrames: durationInFramesProp,
         ...passedProps,
@@ -14174,6 +14188,7 @@ var SeriesInner = (props2) => {
     children: /* @__PURE__ */ jsx35(Sequence, {
       layout: "none",
       name: "<Series>",
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series",
       ...props2,
       children: childrenValue
     })
@@ -15386,7 +15401,7 @@ var getAngle = (ref, coordinates) => {
 };
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
-  const [angle, setAngle] = useState21(getAngle(ref.current, lastCoordinates));
+  const [angle, setAngle] = useState20(getAngle(ref.current, lastCoordinates));
   useEffect20(() => {
     const element = ref.current;
     if (!element) {
@@ -21686,10 +21701,10 @@ var Triangle2 = (props) => {
 };
 
 // src/components/design.tsx
-import { useCallback as useCallback35, useState as useState39 } from "react";
+import { useCallback as useCallback35, useState as useState40 } from "react";
 
 // src/components/ManageTeamMembers.tsx
-import React53, { useCallback as useCallback34, useState as useState38 } from "react";
+import React53, { useCallback as useCallback34, useState as useState39 } from "react";
 import { jsx as jsx40, jsxs as jsxs6, Fragment as Fragment9 } from "react/jsx-runtime";
 function generateId() {
   return Math.random().toString(36).substr(2, 9);
@@ -21733,7 +21748,7 @@ var Row = ({ value, onChange, onDelete, disableDelete }) => {
   });
 };
 var ManageTeamMembers = () => {
-  const [members, setMembers] = useState38(initialMembers);
+  const [members, setMembers] = useState39(initialMembers);
   const displayedMembers = [...members, { id: "NEW", name: "" }];
   const updateMember = useCallback34((idx, value) => {
     if (idx === members.length) {
@@ -21747,7 +21762,7 @@ var ManageTeamMembers = () => {
   const deleteMember = useCallback34((idx) => {
     setMembers((prev) => prev.filter((_, i) => i !== idx));
   }, []);
-  const [loading, setLoading] = useState38(false);
+  const [loading, setLoading] = useState39(false);
   const save = useCallback34(() => {
     setLoading(true);
     setTimeout(() => {
@@ -21803,10 +21818,10 @@ var Explainer = ({ children }) => {
   });
 };
 var DesignPage = () => {
-  const [count4, setCount] = useState39(10);
-  const [active, setActive] = useState39(false);
-  const [submitButtonActive, setSubmitButtonActive] = useState39(true);
-  const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState39(true);
+  const [count4, setCount] = useState40(10);
+  const [active, setActive] = useState40(false);
+  const [submitButtonActive, setSubmitButtonActive] = useState40(true);
+  const [submitButtonPrimaryActive, setSubmitButtonPrimaryActive] = useState40(true);
   const onClick = useCallback35(() => {
     setSubmitButtonActive(false);
     setTimeout(() => {
@@ -21819,7 +21834,7 @@ var DesignPage = () => {
       setSubmitButtonPrimaryActive(true);
     }, 1000);
   }, []);
-  const [saving, setSaving] = useState39(false);
+  const [saving, setSaving] = useState40(false);
   const save = useCallback35(() => {
     setSaving(true);
     setTimeout(() => {