@remotion/design 4.0.533 → 4.0.535

package/dist/esm/index.mjs

@@ -910,7 +910,7 @@ function useComposedRefs2(...refs) {
 
 // ../../node_modules/.bun/@radix-ui+react-slot@1.1.0+09a4a3ac15cb54ba/node_modules/@radix-ui/react-slot/dist/index.mjs
 import * as React10 from "react";
-import { Fragment as Fragment5, jsx as jsx14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14 } from "react/jsx-runtime";
 var Slot2 = React10.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
   const childrenArray = React10.Children.toArray(children);
@@ -944,7 +944,7 @@ var SlotClone = React10.forwardRef((props, forwardedRef) => {
 });
 SlotClone.displayName = "SlotClone";
 var Slottable2 = ({ children }) => {
-  return /* @__PURE__ */ jsx14(Fragment5, { children });
+  return /* @__PURE__ */ jsx14(Fragment4, { children });
 };
 function isSlottable2(child) {
   return React10.isValidElement(child) && child.type === Slottable2;
@@ -1355,7 +1355,7 @@ var FocusScope = React18.forwardRef((props, forwardedRef) => {
     onUnmountAutoFocus: onUnmountAutoFocusProp,
     ...scopeProps
   } = props;
-  const [container2, setContainer] = React18.useState(null);
+  const [container, setContainer] = React18.useState(null);
   const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
   const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
   const lastFocusedElementRef = React18.useRef(null);
@@ -1372,21 +1372,21 @@ var FocusScope = React18.forwardRef((props, forwardedRef) => {
   React18.useEffect(() => {
     if (trapped) {
       let handleFocusIn2 = function(event) {
-        if (focusScope.paused || !container2)
+        if (focusScope.paused || !container)
           return;
         const target = event.target;
-        if (container2.contains(target)) {
+        if (container.contains(target)) {
           lastFocusedElementRef.current = target;
         } else {
           focus(lastFocusedElementRef.current, { select: true });
         }
       }, handleFocusOut2 = function(event) {
-        if (focusScope.paused || !container2)
+        if (focusScope.paused || !container)
           return;
         const relatedTarget = event.relatedTarget;
         if (relatedTarget === null)
           return;
-        if (!container2.contains(relatedTarget)) {
+        if (!container.contains(relatedTarget)) {
           focus(lastFocusedElementRef.current, { select: true });
         }
       }, handleMutations2 = function(mutations) {
@@ -1395,53 +1395,53 @@ var FocusScope = React18.forwardRef((props, forwardedRef) => {
           return;
         for (const mutation of mutations) {
           if (mutation.removedNodes.length > 0)
-            focus(container2);
+            focus(container);
         }
       };
       var handleFocusIn = handleFocusIn2, handleFocusOut = handleFocusOut2, handleMutations = handleMutations2;
       document.addEventListener("focusin", handleFocusIn2);
       document.addEventListener("focusout", handleFocusOut2);
       const mutationObserver = new MutationObserver(handleMutations2);
-      if (container2)
-        mutationObserver.observe(container2, { childList: true, subtree: true });
+      if (container)
+        mutationObserver.observe(container, { childList: true, subtree: true });
       return () => {
         document.removeEventListener("focusin", handleFocusIn2);
         document.removeEventListener("focusout", handleFocusOut2);
         mutationObserver.disconnect();
       };
     }
-  }, [trapped, container2, focusScope.paused]);
+  }, [trapped, container, focusScope.paused]);
   React18.useEffect(() => {
-    if (container2) {
+    if (container) {
       focusScopesStack.add(focusScope);
       const previouslyFocusedElement = document.activeElement;
-      const hasFocusedCandidate = container2.contains(previouslyFocusedElement);
+      const hasFocusedCandidate = container.contains(previouslyFocusedElement);
       if (!hasFocusedCandidate) {
         const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
-        container2.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
-        container2.dispatchEvent(mountEvent);
+        container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+        container.dispatchEvent(mountEvent);
         if (!mountEvent.defaultPrevented) {
-          focusFirst(removeLinks(getTabbableCandidates(container2)), { select: true });
+          focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
           if (document.activeElement === previouslyFocusedElement) {
-            focus(container2);
+            focus(container);
           }
         }
       }
       return () => {
-        container2.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
+        container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
         setTimeout(() => {
           const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
-          container2.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
-          container2.dispatchEvent(unmountEvent);
+          container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
+          container.dispatchEvent(unmountEvent);
           if (!unmountEvent.defaultPrevented) {
             focus(previouslyFocusedElement ?? document.body, { select: true });
           }
-          container2.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
+          container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
           focusScopesStack.remove(focusScope);
         }, 0);
       };
     }
-  }, [container2, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
+  }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
   const handleKeyDown = React18.useCallback((event) => {
     if (!loop && !trapped)
       return;
@@ -1450,11 +1450,11 @@ var FocusScope = React18.forwardRef((props, forwardedRef) => {
     const isTabKey = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
     const focusedElement = document.activeElement;
     if (isTabKey && focusedElement) {
-      const container22 = event.currentTarget;
-      const [first, last] = getTabbableEdges(container22);
+      const container2 = event.currentTarget;
+      const [first, last] = getTabbableEdges(container2);
       const hasTabbableElementsInside = first && last;
       if (!hasTabbableElementsInside) {
-        if (focusedElement === container22)
+        if (focusedElement === container2)
           event.preventDefault();
       } else {
         if (!event.shiftKey && focusedElement === last) {
@@ -1480,15 +1480,15 @@ function focusFirst(candidates, { select = false } = {}) {
       return;
   }
 }
-function getTabbableEdges(container2) {
-  const candidates = getTabbableCandidates(container2);
-  const first = findVisible(candidates, container2);
-  const last = findVisible(candidates.reverse(), container2);
+function getTabbableEdges(container) {
+  const candidates = getTabbableCandidates(container);
+  const first = findVisible(candidates, container);
+  const last = findVisible(candidates.reverse(), container);
   return [first, last];
 }
-function getTabbableCandidates(container2) {
+function getTabbableCandidates(container) {
   const nodes = [];
-  const walker = document.createTreeWalker(container2, NodeFilter.SHOW_ELEMENT, {
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
     acceptNode: (node) => {
       const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
       if (node.disabled || node.hidden || isHiddenInput)
@@ -1500,9 +1500,9 @@ function getTabbableCandidates(container2) {
     nodes.push(walker.currentNode);
   return nodes;
 }
-function findVisible(elements, container2) {
+function findVisible(elements, container) {
   for (const element of elements) {
-    if (!isHidden(element, { upTo: container2 }))
+    if (!isHidden(element, { upTo: container }))
       return element;
   }
 }
@@ -1954,11 +1954,11 @@ var arrow = (options) => ({
     const minPadding = min(paddingObject[minProp], largestPossiblePadding);
     const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
     const min$1 = minPadding;
-    const max2 = clientSize - arrowDimensions[length] - maxPadding;
+    const max = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset = clamp2(min$1, center, max2);
+    const offset = clamp2(min$1, center, max);
     const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
-    const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
     return {
       [axis]: coords[axis] + alignmentOffset,
       data: {
@@ -2010,7 +2010,7 @@ var flip = function(options) {
       if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
-      const placements2 = [initialPlacement, ...fallbackPlacements];
+      const placements = [initialPlacement, ...fallbackPlacements];
       const overflow = await detectOverflow(state, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? undefined : _middlewareData$flip.overflows) || [];
@@ -2025,10 +2025,10 @@ var flip = function(options) {
         placement,
         overflows
       }];
-      if (!overflows.every((side2) => side2 <= 0)) {
+      if (!overflows.every((side) => side <= 0)) {
         var _middlewareData$flip2, _overflowsData$filter;
         const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? undefined : _middlewareData$flip2.index) || 0) + 1;
-        const nextPlacement = placements2[nextIndex];
+        const nextPlacement = placements[nextIndex];
         if (nextPlacement) {
           return {
             data: {
@@ -2040,20 +2040,20 @@ var flip = function(options) {
             }
           };
         }
-        let resetPlacement = (_overflowsData$filter = overflowsData.filter((d2) => d2.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? undefined : _overflowsData$filter.placement;
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? undefined : _overflowsData$filter.placement;
         if (!resetPlacement) {
           switch (fallbackStrategy) {
             case "bestFit": {
               var _overflowsData$filter2;
-              const placement2 = (_overflowsData$filter2 = overflowsData.filter((d2) => {
+              const placement = (_overflowsData$filter2 = overflowsData.filter((d) => {
                 if (hasFallbackAxisSideDirection) {
-                  const currentSideAxis = getSideAxis(d2.placement);
+                  const currentSideAxis = getSideAxis(d.placement);
                   return currentSideAxis === initialSideAxis || currentSideAxis === "y";
                 }
                 return true;
-              }).map((d2) => [d2.placement, d2.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? undefined : _overflowsData$filter2[0];
-              if (placement2) {
-                resetPlacement = placement2;
+              }).map((d) => [d.placement, d.overflows.filter((overflow) => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? undefined : _overflowsData$filter2[0];
+              if (placement) {
+                resetPlacement = placement;
               }
               break;
             }
@@ -2221,12 +2221,12 @@ var shift = function(options) {
         limiter = {
           fn: (_ref) => {
             let {
-              x: x2,
-              y: y2
+              x,
+              y
             } = _ref;
             return {
-              x: x2,
-              y: y2
+              x,
+              y
             };
           }
         },
@@ -2244,16 +2244,16 @@ var shift = function(options) {
       if (checkMainAxis) {
         const minSide = mainAxis === "y" ? "top" : "left";
         const maxSide = mainAxis === "y" ? "bottom" : "right";
-        const min2 = mainAxisCoord + overflow[minSide];
-        const max2 = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = clamp2(min2, mainAxisCoord, max2);
+        const min = mainAxisCoord + overflow[minSide];
+        const max = mainAxisCoord - overflow[maxSide];
+        mainAxisCoord = clamp2(min, mainAxisCoord, max);
       }
       if (checkCrossAxis) {
         const minSide = crossAxis === "y" ? "top" : "left";
         const maxSide = crossAxis === "y" ? "bottom" : "right";
-        const min2 = crossAxisCoord + overflow[minSide];
-        const max2 = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = clamp2(min2, crossAxisCoord, max2);
+        const min = crossAxisCoord + overflow[minSide];
+        const max = crossAxisCoord - overflow[maxSide];
+        crossAxisCoord = clamp2(min, crossAxisCoord, max);
       }
       const limitedCoords = limiter.fn({
         ...state,
@@ -2285,7 +2285,7 @@ var limitShift = function(options) {
         middlewareData
       } = state;
       const {
-        offset: offset2 = 0,
+        offset = 0,
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true
       } = evaluate(options, state);
@@ -2297,7 +2297,7 @@ var limitShift = function(options) {
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
       let crossAxisCoord = coords[crossAxis];
-      const rawOffset = evaluate(offset2, state);
+      const rawOffset = evaluate(offset, state);
       const computedOffset = typeof rawOffset === "number" ? {
         mainAxis: rawOffset,
         crossAxis: 0
@@ -3181,7 +3181,7 @@ function useFloating(options) {
     placement = "bottom",
     strategy = "absolute",
     middleware = [],
-    platform: platform2,
+    platform,
     elements: {
       reference: externalReference,
       floating: externalFloating
@@ -3223,7 +3223,7 @@ function useFloating(options) {
   const dataRef = React21.useRef(data);
   const hasWhileElementsMounted = whileElementsMounted != null;
   const whileElementsMountedRef = useLatestRef(whileElementsMounted);
-  const platformRef = useLatestRef(platform2);
+  const platformRef = useLatestRef(platform);
   const update = React21.useCallback(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
@@ -3236,9 +3236,9 @@ function useFloating(options) {
     if (platformRef.current) {
       config.platform = platformRef.current;
     }
-    computePosition2(referenceRef.current, floatingRef.current, config).then((data2) => {
+    computePosition2(referenceRef.current, floatingRef.current, config).then((data) => {
       const fullData = {
-        ...data2,
+        ...data,
         isPositioned: true
       };
       if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
@@ -3252,8 +3252,8 @@ function useFloating(options) {
   index(() => {
     if (open === false && dataRef.current.isPositioned) {
       dataRef.current.isPositioned = false;
-      setData((data2) => ({
-        ...data2,
+      setData((data) => ({
+        ...data,
         isPositioned: false
       }));
     }
@@ -3403,7 +3403,7 @@ var Root = Arrow;
 // ../../node_modules/.bun/@radix-ui+react-use-size@1.1.0+09a4a3ac15cb54ba/node_modules/@radix-ui/react-use-size/dist/index.mjs
 import * as React23 from "react";
 function useSize(element) {
-  const [size4, setSize] = React23.useState(undefined);
+  const [size, setSize] = React23.useState(undefined);
   useLayoutEffect2(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
@@ -3434,7 +3434,7 @@ function useSize(element) {
       setSize(undefined);
     }
   }, [element]);
-  return size4;
+  return size;
 }
 
 // ../../node_modules/.bun/@radix-ui+react-popper@1.2.0+f178f9b1194b24ba/node_modules/@radix-ui/react-popper/dist/index.mjs
@@ -3482,8 +3482,8 @@ var PopperContent = React24.forwardRef((props, forwardedRef) => {
   const context = usePopperContext(CONTENT_NAME, __scopePopper);
   const [content, setContent] = React24.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContent(node));
-  const [arrow4, setArrow] = React24.useState(null);
-  const arrowSize = useSize(arrow4);
+  const [arrow, setArrow] = React24.useState(null);
+  const arrowSize = useSize(arrow);
   const arrowWidth = arrowSize?.width ?? 0;
   const arrowHeight = arrowSize?.height ?? 0;
   const desiredPlacement = side + (align !== "center" ? "-" + align : "");
@@ -3527,7 +3527,7 @@ var PopperContent = React24.forwardRef((props, forwardedRef) => {
           contentStyle.setProperty("--radix-popper-anchor-height", `${anchorHeight}px`);
         }
       }),
-      arrow4 && arrow3({ element: arrow4, padding: arrowPadding }),
+      arrow && arrow3({ element: arrow, padding: arrowPadding }),
       transformOrigin({ arrowWidth, arrowHeight }),
       hideWhenDetached && hide3({ strategy: "referenceHidden", ...detectOverflowOptions })
     ]
@@ -3681,8 +3681,8 @@ var Portal = React25.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
   const [mounted, setMounted] = React25.useState(false);
   useLayoutEffect2(() => setMounted(true), []);
-  const container2 = containerProp || mounted && globalThis?.document?.body;
-  return container2 ? ReactDOM3.createPortal(/* @__PURE__ */ jsx22(Primitive.div, { ...portalProps, ref: forwardedRef }), container2) : null;
+  const container = containerProp || mounted && globalThis?.document?.body;
+  return container ? ReactDOM3.createPortal(/* @__PURE__ */ jsx22(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
 });
 Portal.displayName = PORTAL_NAME;
 
@@ -3933,6 +3933,8 @@ var zeroRightClassName = "right-scroll-bar-position";
 var fullWidthClassName = "width-before-scroll-bar";
 var noScrollbarsClassName = "with-scroll-bars-hidden";
 var removedBarSizeVariable = "--removed-body-scroll-bar-size";
+// ../../node_modules/.bun/use-callback-ref@1.3.3+09a4a3ac15cb54ba/node_modules/use-callback-ref/dist/es2015/useMergeRef.js
+import * as React29 from "react";
 
 // ../../node_modules/.bun/use-callback-ref@1.3.3+09a4a3ac15cb54ba/node_modules/use-callback-ref/dist/es2015/assignRef.js
 function assignRef(ref, value) {
@@ -3970,7 +3972,6 @@ function useCallbackRef2(initialValue, callback) {
 }
 
 // ../../node_modules/.bun/use-callback-ref@1.3.3+09a4a3ac15cb54ba/node_modules/use-callback-ref/dist/es2015/useMergeRef.js
-import * as React29 from "react";
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React29.useLayoutEffect : React29.useEffect;
 var currentValues = new WeakMap;
 function useMergeRefs(refs, defaultValue) {
@@ -4055,9 +4056,9 @@ function innerCreateMedium(defaults, middleware) {
         pendingQueue = buffer;
       }
       var executeQueue = function() {
-        var cbs2 = pendingQueue;
+        var cbs = pendingQueue;
         pendingQueue = [];
-        cbs2.forEach(cb);
+        cbs.forEach(cb);
       };
       var cycle = function() {
         return Promise.resolve().then(executeQueue);
@@ -4118,10 +4119,10 @@ var RemoveScroll = React31.forwardRef(function(props, parentRef) {
     onTouchMoveCapture: nothing
   }), callbacks = _a[0], setCallbacks = _a[1];
   var { forwardProps, children, className, removeScrollBar, enabled, shards, sideCar, noIsolation, inert, allowPinchZoom, as: _b } = props, Container = _b === undefined ? "div" : _b, gapMode = props.gapMode, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
-  var SideCar2 = sideCar;
+  var SideCar = 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 React31.createElement(React31.Fragment, null, enabled && React31.createElement(SideCar, { 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));
 });
 RemoveScroll.defaultProps = {
   enabled: true,
@@ -4377,8 +4378,8 @@ var locationCouldBeScrolled = function(axis, node) {
     }
     var isScrollable = elementCouldBeScrolled(axis, current);
     if (isScrollable) {
-      var _a = getScrollVariables(axis, current), s = _a[1], d2 = _a[2];
-      if (s > d2) {
+      var _a = getScrollVariables(axis, current), s = _a[1], d = _a[2];
+      if (s > d) {
         return true;
       }
     }
@@ -4469,7 +4470,7 @@ function RemoveScrollSideCar(props) {
   var touchStartRef = React34.useRef([0, 0]);
   var activeAxis = React34.useRef();
   var id = React34.useState(idCounter++)[0];
-  var Style2 = React34.useState(styleSingleton)[0];
+  var Style = React34.useState(styleSingleton)[0];
   var lastProps = React34.useRef(props);
   React34.useEffect(function() {
     lastProps.current = props;
@@ -4528,7 +4529,7 @@ function RemoveScrollSideCar(props) {
   }, []);
   var shouldPrevent = React34.useCallback(function(_event) {
     var event = _event;
-    if (!lockStack.length || lockStack[lockStack.length - 1] !== Style2) {
+    if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) {
       return;
     }
     var delta = "deltaY" in event ? getDeltaXY(event) : getTouchXY(event);
@@ -4573,7 +4574,7 @@ function RemoveScrollSideCar(props) {
     shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
   React34.useEffect(function() {
-    lockStack.push(Style2);
+    lockStack.push(Style);
     props.setCallbacks({
       onScrollCapture: scrollWheel,
       onWheelCapture: scrollWheel,
@@ -4584,7 +4585,7 @@ function RemoveScrollSideCar(props) {
     document.addEventListener("touchstart", scrollTouchStart, nonPassive);
     return function() {
       lockStack = lockStack.filter(function(inst) {
-        return inst !== Style2;
+        return inst !== Style;
       });
       document.removeEventListener("wheel", shouldPrevent, nonPassive);
       document.removeEventListener("touchmove", shouldPrevent, nonPassive);
@@ -4592,7 +4593,7 @@ function RemoveScrollSideCar(props) {
     };
   }, []);
   var { removeScrollBar, inert } = props;
-  return React34.createElement(React34.Fragment, null, inert ? React34.createElement(Style2, { styles: generateStyle(id) }) : null, removeScrollBar ? React34.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null);
+  return React34.createElement(React34.Fragment, null, inert ? React34.createElement(Style, { styles: generateStyle(id) }) : null, removeScrollBar ? React34.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null);
 }
 function getOutermostShadowParent(node) {
   var shadowParent = null;
@@ -4617,7 +4618,7 @@ ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
 
 // ../../node_modules/.bun/@radix-ui+react-select@2.1.1+f178f9b1194b24ba/node_modules/@radix-ui/react-select/dist/index.mjs
-import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs4 } from "react/jsx-runtime";
 var OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
 var SELECTION_KEYS = [" ", "Enter"];
 var SELECT_NAME = "Select";
@@ -4796,7 +4797,7 @@ var SelectValue = React36.forwardRef((props, forwardedRef) => {
     ...valueProps,
     ref: composedRefs,
     style: { pointerEvents: "none" },
-    children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx24(Fragment8, { children: placeholder }) : children
+    children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx24(Fragment7, { children: placeholder }) : children
   });
 });
 SelectValue.displayName = VALUE_NAME;
@@ -4861,7 +4862,7 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
       return hideOthers(content);
   }, [content]);
   useFocusGuards();
-  const focusFirst2 = React36.useCallback((candidates) => {
+  const focusFirst = React36.useCallback((candidates) => {
     const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
     const [lastItem] = restItems.slice(-1);
     const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
@@ -4878,7 +4879,7 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
         return;
     }
   }, [getItems, viewport]);
-  const focusSelectedItem = React36.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
+  const focusSelectedItem = React36.useCallback(() => focusFirst([selectedItem, content]), [focusFirst, selectedItem, content]);
   React36.useEffect(() => {
     if (isPositioned) {
       focusSelectedItem();
@@ -5026,7 +5027,7 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
                 const currentIndex = candidateNodes.indexOf(currentElement);
                 candidateNodes = candidateNodes.slice(currentIndex + 1);
               }
-              setTimeout(() => focusFirst2(candidateNodes));
+              setTimeout(() => focusFirst(candidateNodes));
               event.preventDefault();
             }
           })
@@ -5204,7 +5205,7 @@ var SelectViewport = React36.forwardRef((props, forwardedRef) => {
   const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs2(forwardedRef, contentContext.onViewportChange);
   const prevScrollTopRef = React36.useRef(0);
-  return /* @__PURE__ */ jsxs4(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment7, { children: [
     /* @__PURE__ */ jsx24("style", {
       dangerouslySetInnerHTML: {
         __html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}`
@@ -5361,7 +5362,7 @@ var SelectItemText = React36.forwardRef((props, forwardedRef) => {
     onNativeOptionAdd(nativeOption);
     return () => onNativeOptionRemove(nativeOption);
   }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);
-  return /* @__PURE__ */ jsxs4(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment7, { children: [
     /* @__PURE__ */ jsx24(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
     itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM4.createPortal(itemTextProps.children, context.valueNode) : null
   ] });
@@ -5382,15 +5383,15 @@ var SelectScrollUpButton = React36.forwardRef((props, forwardedRef) => {
   const composedRefs = useComposedRefs2(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect2(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
-      let handleScroll22 = function() {
+      let handleScroll2 = function() {
         const canScrollUp2 = viewport.scrollTop > 0;
         setCanScrollUp(canScrollUp2);
       };
-      var handleScroll2 = handleScroll22;
+      var handleScroll = handleScroll2;
       const viewport = contentContext.viewport;
-      handleScroll22();
-      viewport.addEventListener("scroll", handleScroll22);
-      return () => viewport.removeEventListener("scroll", handleScroll22);
+      handleScroll2();
+      viewport.addEventListener("scroll", handleScroll2);
+      return () => viewport.removeEventListener("scroll", handleScroll2);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
   return canScrollUp ? /* @__PURE__ */ jsx24(SelectScrollButtonImpl, {
@@ -5413,16 +5414,16 @@ var SelectScrollDownButton = React36.forwardRef((props, forwardedRef) => {
   const composedRefs = useComposedRefs2(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect2(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
-      let handleScroll22 = function() {
+      let handleScroll2 = function() {
         const maxScroll = viewport.scrollHeight - viewport.clientHeight;
         const canScrollDown2 = Math.ceil(viewport.scrollTop) < maxScroll;
         setCanScrollDown(canScrollDown2);
       };
-      var handleScroll2 = handleScroll22;
+      var handleScroll = handleScroll2;
       const viewport = contentContext.viewport;
-      handleScroll22();
-      viewport.addEventListener("scroll", handleScroll22);
-      return () => viewport.removeEventListener("scroll", handleScroll22);
+      handleScroll2();
+      viewport.addEventListener("scroll", handleScroll2);
+      return () => viewport.removeEventListener("scroll", handleScroll2);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
   return canScrollDown ? /* @__PURE__ */ jsx24(SelectScrollButtonImpl, {
@@ -5548,7 +5549,7 @@ function findNextItem(items, search, currentItem) {
   return nextItem !== currentItem ? nextItem : undefined;
 }
 function wrapArray(array, startIndex) {
-  return array.map((_, index2) => array[(startIndex + index2) % array.length]);
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
 }
 var Root22 = Select;
 var Trigger = SelectTrigger;
@@ -5565,14 +5566,13 @@ var ItemIndicator = SelectItemIndicator;
 var ScrollUpButton = SelectScrollUpButton;
 var ScrollDownButton = SelectScrollDownButton;
 var Separator = SelectSeparator;
-
 // ../../node_modules/.bun/lucide-react@0.439.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/createLucideIcon.js
 import { forwardRef as forwardRef14, createElement as createElement7 } from "react";
 
 // ../../node_modules/.bun/lucide-react@0.439.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/shared/src/utils.js
 var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-var mergeClasses = (...classes) => classes.filter((className, index2, array) => {
-  return Boolean(className) && array.indexOf(className) === index2;
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && array.indexOf(className) === index;
 }).join(" ");
 
 // ../../node_modules/.bun/lucide-react@0.439.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/Icon.js
@@ -5594,7 +5594,7 @@ var defaultAttributes = {
 // ../../node_modules/.bun/lucide-react@0.439.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/Icon.js
 var Icon2 = forwardRef13(({
   color = "currentColor",
-  size: size4 = 24,
+  size = 24,
   strokeWidth = 2,
   absoluteStrokeWidth,
   className = "",
@@ -5605,10 +5605,10 @@ var Icon2 = forwardRef13(({
   return createElement6("svg", {
     ref,
     ...defaultAttributes,
-    width: size4,
-    height: size4,
+    width: size,
+    height: size,
     stroke: color,
-    strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size4) : strokeWidth,
+    strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
     className: mergeClasses("lucide", className),
     ...rest
   }, [
@@ -5631,12 +5631,10 @@ var createLucideIcon = (iconName, iconNode) => {
 
 // ../../node_modules/.bun/lucide-react@0.439.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/check.js
 var Check = createLucideIcon("Check", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]);
-
 // ../../node_modules/.bun/lucide-react@0.439.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/chevron-down.js
 var ChevronDown = createLucideIcon("ChevronDown", [
   ["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
 ]);
-
 // ../../node_modules/.bun/lucide-react@0.439.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/chevron-up.js
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 // src/Select.tsx
@@ -5728,21 +5726,21 @@ var SelectSeparator2 = React37.forwardRef(({ className, ...props }, ref) => /* @
 SelectSeparator2.displayName = Separator.displayName;
 // src/Slider.tsx
 import React38 from "react";
-import { jsx as jsx26, jsxs as jsxs6, Fragment as Fragment9 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs6, Fragment as Fragment8 } from "react/jsx-runtime";
 var Slider = React38.forwardRef(({
   className,
-  max: max2 = 100,
-  min: min2 = 0,
+  max = 100,
+  min = 0,
   onChange,
   style,
   unfilledColor = "var(--color-card-bg, white)",
   value,
   ...props
 }, ref) => {
-  const numericMin = Number(min2);
-  const numericMax = Number(max2);
+  const numericMin = Number(min);
+  const numericMax = Number(max);
   const percentage = numericMax === numericMin ? 0 : (value - numericMin) / (numericMax - numericMin) * 100;
-  return /* @__PURE__ */ jsxs6(Fragment9, {
+  return /* @__PURE__ */ jsxs6(Fragment8, {
     children: [
       /* @__PURE__ */ jsx26("style", {
         children: `
@@ -5787,8 +5785,8 @@ var Slider = React38.forwardRef(({
       /* @__PURE__ */ jsx26("input", {
         ref,
         type: "range",
-        min: min2,
-        max: max2,
+        min,
+        max,
         value,
         onChange: (event) => onChange(Number(event.target.value)),
         className: cn("remotion-design-slider w-full", className),
@@ -5838,19 +5836,19 @@ import * as React39 from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 function createContextScope2(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
-  function createContext32(rootComponentName, defaultContext) {
+  function createContext3(rootComponentName, defaultContext) {
     const BaseContext = React39.createContext(defaultContext);
-    const index2 = defaultContexts.length;
+    const index = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
-      const Context = scope?.[scopeName]?.[index2] || BaseContext;
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
       const value = React39.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx28(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
-    function useContext22(consumerName, scope) {
-      const Context = scope?.[scopeName]?.[index2] || BaseContext;
+    function useContext2(consumerName, scope) {
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
       const context = React39.useContext(Context);
       if (context)
         return context;
@@ -5858,7 +5856,7 @@ function createContextScope2(scopeName, createContextScopeDeps = []) {
         return defaultContext;
       throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
     }
-    return [Provider, useContext22];
+    return [Provider, useContext2];
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
@@ -5870,7 +5868,7 @@ function createContextScope2(scopeName, createContextScopeDeps = []) {
     };
   };
   createScope.scopeName = scopeName;
-  return [createContext32, composeContextScopes2(createScope, ...createContextScopeDeps)];
+  return [createContext3, composeContextScopes2(createScope, ...createContextScopeDeps)];
 }
 function composeContextScopes2(...scopes) {
   const baseScope = scopes[0];
@@ -5904,8 +5902,8 @@ import React41 from "react";
 import * as React40 from "react";
 import { Fragment as Fragment22, jsx as jsx29 } from "react/jsx-runtime";
 function createSlot2(ownerName) {
-  const SlotClone2 = /* @__PURE__ */ createSlotClone2(ownerName);
-  const Slot22 = React40.forwardRef((props, forwardedRef) => {
+  const SlotClone = /* @__PURE__ */ createSlotClone2(ownerName);
+  const Slot2 = React40.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
     const childrenArray = React40.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable3);
@@ -5920,15 +5918,15 @@ function createSlot2(ownerName) {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx29(SlotClone2, { ...slotProps, ref: forwardedRef, children: React40.isValidElement(newElement) ? React40.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx29(SlotClone, { ...slotProps, ref: forwardedRef, children: React40.isValidElement(newElement) ? React40.cloneElement(newElement, undefined, newChildren) : null });
     }
-    return /* @__PURE__ */ jsx29(SlotClone2, { ...slotProps, ref: forwardedRef, children });
+    return /* @__PURE__ */ jsx29(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
-  Slot22.displayName = `${ownerName}.Slot`;
-  return Slot22;
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
 }
 function createSlotClone2(ownerName) {
-  const SlotClone2 = React40.forwardRef((props, forwardedRef) => {
+  const SlotClone = React40.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
     if (React40.isValidElement(children)) {
       const childrenRef = getElementRef3(children);
@@ -5940,8 +5938,8 @@ function createSlotClone2(ownerName) {
     }
     return React40.Children.count(children) > 1 ? React40.Children.only(null) : null;
   });
-  SlotClone2.displayName = `${ownerName}.SlotClone`;
-  return SlotClone2;
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
 }
 var SLOTTABLE_IDENTIFIER2 = Symbol("radix.slottable");
 function isSlottable3(child) {
@@ -5991,7 +5989,7 @@ import React210 from "react";
 import { jsx as jsx210 } from "react/jsx-runtime";
 function createCollection2(name) {
   const PROVIDER_NAME = name + "CollectionProvider";
-  const [createCollectionContext, createCollectionScope2] = createContextScope2(PROVIDER_NAME);
+  const [createCollectionContext, createCollectionScope] = createContextScope2(PROVIDER_NAME);
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
   const CollectionProvider = (props) => {
     const { scope, children } = props;
@@ -6024,7 +6022,7 @@ function createCollection2(name) {
     return /* @__PURE__ */ jsx30(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
   });
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
-  function useCollection2(scope) {
+  function useCollection(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
     const getItems = React41.useCallback(() => {
       const collectionNode = context.collectionRef.current;
@@ -6039,311 +6037,10 @@ function createCollection2(name) {
   }
   return [
     { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
-    useCollection2,
-    createCollectionScope2
+    useCollection,
+    createCollectionScope
   ];
 }
-var __instanciated = /* @__PURE__ */ new WeakMap;
-var OrderedDict = class _OrderedDict extends Map {
-  #keys;
-  constructor(entries) {
-    super(entries);
-    this.#keys = [...super.keys()];
-    __instanciated.set(this, true);
-  }
-  set(key, value) {
-    if (__instanciated.get(this)) {
-      if (this.has(key)) {
-        this.#keys[this.#keys.indexOf(key)] = key;
-      } else {
-        this.#keys.push(key);
-      }
-    }
-    super.set(key, value);
-    return this;
-  }
-  insert(index2, key, value) {
-    const has = this.has(key);
-    const length = this.#keys.length;
-    const relativeIndex = toSafeInteger(index2);
-    let actualIndex = relativeIndex >= 0 ? relativeIndex : length + relativeIndex;
-    const safeIndex = actualIndex < 0 || actualIndex >= length ? -1 : actualIndex;
-    if (safeIndex === this.size || has && safeIndex === this.size - 1 || safeIndex === -1) {
-      this.set(key, value);
-      return this;
-    }
-    const size4 = this.size + (has ? 0 : 1);
-    if (relativeIndex < 0) {
-      actualIndex++;
-    }
-    const keys = [...this.#keys];
-    let nextValue;
-    let shouldSkip = false;
-    for (let i = actualIndex;i < size4; i++) {
-      if (actualIndex === i) {
-        let nextKey = keys[i];
-        if (keys[i] === key) {
-          nextKey = keys[i + 1];
-        }
-        if (has) {
-          this.delete(key);
-        }
-        nextValue = this.get(nextKey);
-        this.set(key, value);
-      } else {
-        if (!shouldSkip && keys[i - 1] === key) {
-          shouldSkip = true;
-        }
-        const currentKey = keys[shouldSkip ? i : i - 1];
-        const currentValue = nextValue;
-        nextValue = this.get(currentKey);
-        this.delete(currentKey);
-        this.set(currentKey, currentValue);
-      }
-    }
-    return this;
-  }
-  with(index2, key, value) {
-    const copy = new _OrderedDict(this);
-    copy.insert(index2, key, value);
-    return copy;
-  }
-  before(key) {
-    const index2 = this.#keys.indexOf(key) - 1;
-    if (index2 < 0) {
-      return;
-    }
-    return this.entryAt(index2);
-  }
-  setBefore(key, newKey, value) {
-    const index2 = this.#keys.indexOf(key);
-    if (index2 === -1) {
-      return this;
-    }
-    return this.insert(index2, newKey, value);
-  }
-  after(key) {
-    let index2 = this.#keys.indexOf(key);
-    index2 = index2 === -1 || index2 === this.size - 1 ? -1 : index2 + 1;
-    if (index2 === -1) {
-      return;
-    }
-    return this.entryAt(index2);
-  }
-  setAfter(key, newKey, value) {
-    const index2 = this.#keys.indexOf(key);
-    if (index2 === -1) {
-      return this;
-    }
-    return this.insert(index2 + 1, newKey, value);
-  }
-  first() {
-    return this.entryAt(0);
-  }
-  last() {
-    return this.entryAt(-1);
-  }
-  clear() {
-    this.#keys = [];
-    return super.clear();
-  }
-  delete(key) {
-    const deleted = super.delete(key);
-    if (deleted) {
-      this.#keys.splice(this.#keys.indexOf(key), 1);
-    }
-    return deleted;
-  }
-  deleteAt(index2) {
-    const key = this.keyAt(index2);
-    if (key !== undefined) {
-      return this.delete(key);
-    }
-    return false;
-  }
-  at(index2) {
-    const key = at(this.#keys, index2);
-    if (key !== undefined) {
-      return this.get(key);
-    }
-  }
-  entryAt(index2) {
-    const key = at(this.#keys, index2);
-    if (key !== undefined) {
-      return [key, this.get(key)];
-    }
-  }
-  indexOf(key) {
-    return this.#keys.indexOf(key);
-  }
-  keyAt(index2) {
-    return at(this.#keys, index2);
-  }
-  from(key, offset4) {
-    const index2 = this.indexOf(key);
-    if (index2 === -1) {
-      return;
-    }
-    let dest = index2 + offset4;
-    if (dest < 0)
-      dest = 0;
-    if (dest >= this.size)
-      dest = this.size - 1;
-    return this.at(dest);
-  }
-  keyFrom(key, offset4) {
-    const index2 = this.indexOf(key);
-    if (index2 === -1) {
-      return;
-    }
-    let dest = index2 + offset4;
-    if (dest < 0)
-      dest = 0;
-    if (dest >= this.size)
-      dest = this.size - 1;
-    return this.keyAt(dest);
-  }
-  find(predicate, thisArg) {
-    let index2 = 0;
-    for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
-        return entry;
-      }
-      index2++;
-    }
-    return;
-  }
-  findIndex(predicate, thisArg) {
-    let index2 = 0;
-    for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
-        return index2;
-      }
-      index2++;
-    }
-    return -1;
-  }
-  filter(predicate, thisArg) {
-    const entries = [];
-    let index2 = 0;
-    for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
-        entries.push(entry);
-      }
-      index2++;
-    }
-    return new _OrderedDict(entries);
-  }
-  map(callbackfn, thisArg) {
-    const entries = [];
-    let index2 = 0;
-    for (const entry of this) {
-      entries.push([entry[0], Reflect.apply(callbackfn, thisArg, [entry, index2, this])]);
-      index2++;
-    }
-    return new _OrderedDict(entries);
-  }
-  reduce(...args) {
-    const [callbackfn, initialValue] = args;
-    let index2 = 0;
-    let accumulator = initialValue ?? this.at(0);
-    for (const entry of this) {
-      if (index2 === 0 && args.length === 1) {
-        accumulator = entry;
-      } else {
-        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
-      }
-      index2++;
-    }
-    return accumulator;
-  }
-  reduceRight(...args) {
-    const [callbackfn, initialValue] = args;
-    let accumulator = initialValue ?? this.at(-1);
-    for (let index2 = this.size - 1;index2 >= 0; index2--) {
-      const entry = this.at(index2);
-      if (index2 === this.size - 1 && args.length === 1) {
-        accumulator = entry;
-      } else {
-        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
-      }
-    }
-    return accumulator;
-  }
-  toSorted(compareFn) {
-    const entries = [...this.entries()].sort(compareFn);
-    return new _OrderedDict(entries);
-  }
-  toReversed() {
-    const reversed = new _OrderedDict;
-    for (let index2 = this.size - 1;index2 >= 0; index2--) {
-      const key = this.keyAt(index2);
-      const element = this.get(key);
-      reversed.set(key, element);
-    }
-    return reversed;
-  }
-  toSpliced(...args) {
-    const entries = [...this.entries()];
-    entries.splice(...args);
-    return new _OrderedDict(entries);
-  }
-  slice(start, end) {
-    const result = new _OrderedDict;
-    let stop = this.size - 1;
-    if (start === undefined) {
-      return result;
-    }
-    if (start < 0) {
-      start = start + this.size;
-    }
-    if (end !== undefined && end > 0) {
-      stop = end - 1;
-    }
-    for (let index2 = start;index2 <= stop; index2++) {
-      const key = this.keyAt(index2);
-      const element = this.get(key);
-      result.set(key, element);
-    }
-    return result;
-  }
-  every(predicate, thisArg) {
-    let index2 = 0;
-    for (const entry of this) {
-      if (!Reflect.apply(predicate, thisArg, [entry, index2, this])) {
-        return false;
-      }
-      index2++;
-    }
-    return true;
-  }
-  some(predicate, thisArg) {
-    let index2 = 0;
-    for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
-        return true;
-      }
-      index2++;
-    }
-    return false;
-  }
-};
-function at(array, index2) {
-  if ("at" in Array.prototype) {
-    return Array.prototype.at.call(array, index2);
-  }
-  const actualIndex = toSafeIndex(array, index2);
-  return actualIndex === -1 ? undefined : array[actualIndex];
-}
-function toSafeIndex(array, index2) {
-  const length = array.length;
-  const relativeIndex = toSafeInteger(index2);
-  const actualIndex = relativeIndex >= 0 ? relativeIndex : length + relativeIndex;
-  return actualIndex < 0 || actualIndex >= length ? -1 : actualIndex;
-}
-function toSafeInteger(number) {
-  return number !== number || number === 0 ? 0 : Math.trunc(number);
-}
 
 // ../../node_modules/.bun/@radix-ui+react-id@1.1.1+09a4a3ac15cb54ba/node_modules/@radix-ui/react-id/dist/index.mjs
 import * as React43 from "react";
@@ -6390,10 +6087,10 @@ var NODES2 = [
   "ul"
 ];
 var Primitive2 = NODES2.reduce((primitive, node) => {
-  const Slot3 = createSlot2(`Primitive.${node}`);
+  const Slot = createSlot2(`Primitive.${node}`);
   const Node2 = React44.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
-    const Comp = asChild ? Slot3 : node;
+    const Comp = asChild ? Slot : node;
     if (typeof window !== "undefined") {
       window[Symbol.for("radix-ui")] = true;
     }
@@ -6405,7 +6102,7 @@ var Primitive2 = NODES2.reduce((primitive, node) => {
 
 // ../../node_modules/.bun/@radix-ui+react-use-callback-ref@1.1.1+09a4a3ac15cb54ba/node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
 import * as React45 from "react";
-function useCallbackRef3(callback) {
+function useCallbackRef4(callback) {
   const callbackRef = React45.useRef(callback);
   React45.useEffect(() => {
     callbackRef.current = callback;
@@ -6415,7 +6112,7 @@ function useCallbackRef3(callback) {
 
 // ../../node_modules/.bun/@radix-ui+react-use-controllable-state@1.2.2+09a4a3ac15cb54ba/node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
 import * as React46 from "react";
-import * as React212 from "react";
+import * as React211 from "react";
 var useInsertionEffect = React46[" useInsertionEffect ".trim().toString()] || useLayoutEffect22;
 function useControllableState2({
   prop,
@@ -6520,7 +6217,7 @@ var RovingFocusGroupImpl = React48.forwardRef((props, forwardedRef) => {
     caller: GROUP_NAME2
   });
   const [isTabbingBackOut, setIsTabbingBackOut] = React48.useState(false);
-  const handleEntryFocus = useCallbackRef3(onEntryFocus);
+  const handleEntryFocus = useCallbackRef4(onEntryFocus);
   const getItems = useCollection2(__scopeRovingFocusGroup);
   const isClickFocusRef = React48.useRef(false);
   const [focusableItemsCount, setFocusableItemsCount] = React48.useState(0);
@@ -6673,13 +6370,13 @@ function focusFirst2(candidates, preventScroll = false) {
   }
 }
 function wrapArray2(array, startIndex) {
-  return array.map((_, index2) => array[(startIndex + index2) % array.length]);
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
 }
 var Root3 = RovingFocusGroup;
 var Item2 = RovingFocusGroupItem;
 
 // ../../node_modules/.bun/@radix-ui+react-presence@1.1.5+f178f9b1194b24ba/node_modules/@radix-ui/react-presence/dist/index.mjs
-import * as React213 from "react";
+import * as React212 from "react";
 import * as React49 from "react";
 function useStateMachine(initialState, machine) {
   return React49.useReducer((state, event) => {
@@ -6690,17 +6387,17 @@ function useStateMachine(initialState, machine) {
 var Presence = (props) => {
   const { present, children } = props;
   const presence = usePresence(present);
-  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React213.Children.only(children);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React212.Children.only(children);
   const ref = useComposedRefs(presence.ref, getElementRef4(child));
   const forceMount = typeof children === "function";
-  return forceMount || presence.isPresent ? React213.cloneElement(child, { ref }) : null;
+  return forceMount || presence.isPresent ? React212.cloneElement(child, { ref }) : null;
 };
 Presence.displayName = "Presence";
 function usePresence(present) {
-  const [node, setNode] = React213.useState();
-  const stylesRef = React213.useRef(null);
-  const prevPresentRef = React213.useRef(present);
-  const prevAnimationNameRef = React213.useRef("none");
+  const [node, setNode] = React212.useState();
+  const stylesRef = React212.useRef(null);
+  const prevPresentRef = React212.useRef(present);
+  const prevAnimationNameRef = React212.useRef("none");
   const initialState = present ? "mounted" : "unmounted";
   const [state, send] = useStateMachine(initialState, {
     mounted: {
@@ -6715,7 +6412,7 @@ function usePresence(present) {
       MOUNT: "mounted"
     }
   });
-  React213.useEffect(() => {
+  React212.useEffect(() => {
     const currentAnimationName = getAnimationName(stylesRef.current);
     prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
   }, [state]);
@@ -6781,7 +6478,7 @@ function usePresence(present) {
   }, [node, send]);
   return {
     isPresent: ["mounted", "unmountSuspended"].includes(state),
-    ref: React213.useCallback((node2) => {
+    ref: React212.useCallback((node2) => {
       stylesRef.current = node2 ? getComputedStyle(node2) : null;
       setNode(node2);
     }, [])
@@ -7003,30 +6700,30 @@ var Triangle2 = (props) => {
   });
 };
 export {
-  Triangle2 as Triangle,
-  Textarea,
-  TabsTrigger2 as TabsTrigger,
-  TabsList2 as TabsList,
-  TabsContent2 as TabsContent,
-  Tabs2 as Tabs,
-  Switch,
-  Slider,
-  SelectValue2 as SelectValue,
-  SelectTrigger2 as SelectTrigger,
-  SelectSeparator2 as SelectSeparator,
-  SelectScrollUpButton2 as SelectScrollUpButton,
-  SelectScrollDownButton2 as SelectScrollDownButton,
-  SelectLabel2 as SelectLabel,
-  SelectItem2 as SelectItem,
-  SelectGroup2 as SelectGroup,
-  SelectContent2 as SelectContent,
-  Select2 as Select,
-  PlanePaperIcon,
-  Link,
-  Input,
-  InlineCode,
-  Counter,
-  CheckIcon,
+  Button,
   Card,
-  Button
+  CheckIcon,
+  Counter,
+  InlineCode,
+  Input,
+  Link,
+  PlanePaperIcon,
+  Select2 as Select,
+  SelectContent2 as SelectContent,
+  SelectGroup2 as SelectGroup,
+  SelectItem2 as SelectItem,
+  SelectLabel2 as SelectLabel,
+  SelectScrollDownButton2 as SelectScrollDownButton,
+  SelectScrollUpButton2 as SelectScrollUpButton,
+  SelectSeparator2 as SelectSeparator,
+  SelectTrigger2 as SelectTrigger,
+  SelectValue2 as SelectValue,
+  Slider,
+  Switch,
+  Tabs2 as Tabs,
+  TabsContent2 as TabsContent,
+  TabsList2 as TabsList,
+  TabsTrigger2 as TabsTrigger,
+  Textarea,
+  Triangle2 as Triangle
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/design",
-	"version": "4.0.533",
+	"version": "4.0.535",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -22,19 +22,19 @@
 		"@radix-ui/react-select": "2.1.1",
 		"@radix-ui/react-slot": "1.2.4",
 		"@radix-ui/react-tabs": "1.1.13",
-		"@remotion/paths": "4.0.533",
-		"@remotion/shapes": "4.0.533",
-		"@remotion/svg-3d-engine": "4.0.533",
+		"@remotion/paths": "4.0.535",
+		"@remotion/shapes": "4.0.535",
+		"@remotion/svg-3d-engine": "4.0.535",
 		"clsx": "2.1.1",
 		"lucide-react": "0.439.0",
-		"remotion": "4.0.533"
+		"remotion": "4.0.535"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.533",
+		"@remotion/eslint-config-internal": "4.0.535",
 		"eslint": "9.19.0",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",