@remotion/studio 4.0.526 → 4.0.528

package/dist/esm/{index-cdy8v54v.mjs → index-qve7mdfp.mjs}

@@ -2,163 +2,13 @@ import {
   getStudioKeyboardShortcuts,
   getStudioKeyboardShortcutsEnabled
 } from "./index-5zrb1ft4.mjs";
-import {
-  BACKGROUND,
-  BLUE,
-  BORDER_BLACK,
-  CURRENT_COLOR,
-  FAIL_COLOR,
-  LIGHT_TEXT,
-  SHADOW_BLACK,
-  TRANSPARENT,
-  WARNING_COLOR,
-  WHITE,
-  WHITE_ALPHA_20,
-  getBackgroundFromHoverState
-} from "./index-k426ye99.mjs";
-
-// src/components/layout.tsx
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-var SPACING_UNIT = 8;
-var COMPACT_CONTROL_ROW_HEIGHT = 28;
-var COMPACT_INLINE_ROW_HEIGHT = 22;
-var Spacing = ({ x = 0, y = 0, block = false }) => {
-  const style = useMemo(() => {
-    return {
-      display: block ? "block" : "inline-block",
-      width: x * SPACING_UNIT,
-      height: y * SPACING_UNIT,
-      flexShrink: 0
-    };
-  }, [block, x, y]);
-  return /* @__PURE__ */ jsx("div", {
-    style
-  });
-};
-var flexCss = { flex: 1 };
-var Flex = ({ children }) => /* @__PURE__ */ jsx("div", {
-  style: flexCss,
-  children
-});
-var Row = ({ children, justify, className, align, flex, style = {}, ...other }) => {
-  const finalStyle = useMemo(() => {
-    return {
-      ...style,
-      display: "flex",
-      flexDirection: "row",
-      justifyContent: justify ?? "flex-start",
-      alignItems: align ?? "flex-start",
-      flex: flex ?? undefined
-    };
-  }, [align, flex, justify, style]);
-  return /* @__PURE__ */ jsx("div", {
-    className,
-    style: finalStyle,
-    ...other,
-    children
-  });
-};
-var Column = ({ children, justify, className, align, style = {} }) => {
-  const finalStyle = useMemo(() => {
-    return {
-      ...style,
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: justify ?? "flex-start",
-      alignItems: align ?? "flex-start"
-    };
-  }, [align, justify, style]);
-  return /* @__PURE__ */ jsx("div", {
-    className,
-    style: finalStyle,
-    children
-  });
-};
-
-// src/components/InlineAction.tsx
-import { useCallback as useCallback4, useMemo as useMemo6 } from "react";
-
-// src/helpers/hoverable.ts
-var HOVERABLE_CLASS_NAME = "__remotion-hoverable";
-var HOVER_GROUP_CLASS_NAME = "__remotion-hover-group";
-var HOVER_GROUP_REVEAL_CLASS_NAME = "__remotion-hover-group-reveal";
-var FOCUS_VISIBLE_ONLY_CLASS_NAME = "__remotion-focus-visible-only";
-var BG_VARIABLE = "--remotion-hoverable-bg";
-var HOVER_BG_VARIABLE = "--remotion-hoverable-hover-bg";
-var COLOR_VARIABLE = "--remotion-hoverable-color";
-var HOVER_COLOR_VARIABLE = "--remotion-hoverable-hover-color";
-var NO_HOVER_BACKGROUND_STYLE = {
-  [HOVER_BG_VARIABLE]: TRANSPARENT
-};
-var hoverableStyle = ({
-  idleBackground,
-  hoverBackground,
-  idleColor,
-  hoverColor
-}) => {
-  return {
-    [BG_VARIABLE]: idleBackground,
-    [HOVER_BG_VARIABLE]: hoverBackground,
-    [COLOR_VARIABLE]: idleColor,
-    [HOVER_COLOR_VARIABLE]: hoverColor
-  };
-};
-var hoverable = `.${HOVERABLE_CLASS_NAME}.${HOVERABLE_CLASS_NAME}`;
-var hoverGroup = `.${HOVER_GROUP_CLASS_NAME}`;
-var reveal = `.${HOVER_GROUP_REVEAL_CLASS_NAME}.${HOVER_GROUP_REVEAL_CLASS_NAME}`;
-var makeHoverableCSS = () => `
-  ${hoverable} {
-    background-color: var(${BG_VARIABLE}, ${TRANSPARENT});
-  }
-
-  ${hoverable},
-  ${hoverable} * {
-    color: var(${COLOR_VARIABLE}, inherit);
-  }
-
-  ${hoverGroup} ${reveal} {
-    flex-shrink: 0;
-  }
-
-  @media (hover: hover) {
-    ${hoverable}:hover {
-      background-color: var(${HOVER_BG_VARIABLE}, var(${BG_VARIABLE}, ${TRANSPARENT}));
-    }
-
-    ${hoverable}:hover,
-    ${hoverable}:hover * {
-      color: var(${HOVER_COLOR_VARIABLE}, var(${COLOR_VARIABLE}, inherit));
-    }
-
-    /* An outer hoverable must not put a nested inline action into its hover
-       state. The nested action should only use its hover color when the
-       pointer is over the action itself. */
-    ${hoverable}:hover ${hoverable}:not(:hover),
-    ${hoverable}:hover ${hoverable}:not(:hover) * {
-      color: var(${COLOR_VARIABLE}, inherit);
-    }
-
-    ${hoverGroup} ${reveal} {
-      opacity: 0;
-      width: 0;
-      overflow: hidden;
-    }
-
-    ${hoverGroup}:hover ${reveal} {
-      opacity: 1;
-      width: auto;
-      overflow: visible;
-    }
-  }
-`;
 
 // src/state/z-index.tsx
 import {
   createContext as createContext3,
   useContext as useContext2,
   useLayoutEffect,
-  useMemo as useMemo5,
+  useMemo as useMemo4,
   useRef as useRef2
 } from "react";
 
@@ -301,7 +151,7 @@ var observePointerRelease = ({
 };
 
 // src/helpers/use-keybinding.ts
-import { useCallback as useCallback2, useContext, useEffect, useMemo as useMemo3, useState } from "react";
+import { useCallback as useCallback2, useContext, useEffect, useMemo as useMemo2, useState } from "react";
 
 // src/helpers/is-mac.ts
 var isMac = typeof window !== "undefined" && window.navigator.platform.startsWith("Mac");
@@ -349,7 +199,8 @@ var defaultKeyboardShortcuts = {
   selectOpacityProp: [{ key: "t" }],
   selectRotateProp: [{ key: "r", shift: false }],
   selectScaleProp: [{ key: "s" }],
-  duplicateSequences: [{ key: "d", commandOrControl: true }],
+  duplicateSequences: [{ key: "d", commandOrControl: true, shift: false }],
+  splitSequences: [{ key: "d", commandOrControl: true, shift: true }],
   copyEffectsAndValues: [{ key: "c", commandOrControl: true }],
   cutEffects: [{ key: "x", commandOrControl: true }],
   deleteSelection: [{ key: "Backspace" }, { key: "Delete" }],
@@ -440,6 +291,7 @@ var keyboardShortcutGroups = [
       shortcut("Select rotate prop", "selectRotateProp"),
       shortcut("Select scale prop", "selectScaleProp"),
       shortcut("Duplicate sequences", "duplicateSequences"),
+      shortcut("Split sequences at playhead", "splitSequences"),
       shortcut("Copy effects / values", "copyEffectsAndValues"),
       shortcut("Cut effects", "cutEffects"),
       fixedShortcut("Paste effects / values", [[isMac ? "⌘" : "Ctrl", "V"]], "Handled by the browser clipboard event"),
@@ -516,8 +368,8 @@ var shortcutFromKeyboardEvent = (event) => {
 };
 
 // src/state/keybindings.tsx
-import { createContext, useCallback, useMemo as useMemo2, useRef } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { createContext, useCallback, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 var KeybindingContext = createContext({
   registerKeybinding: () => {
     throw new Error("Has no keybinding context");
@@ -550,14 +402,14 @@ var KeybindingContextProvider = ({ children }) => {
       unregisterKeybinding(matched);
     }
   }, [unregisterKeybinding]);
-  const value = useMemo2(() => {
+  const value = useMemo(() => {
     return {
       registerKeybinding,
       unregisterKeybinding,
       unregisterPane
     };
   }, [registerKeybinding, unregisterKeybinding, unregisterPane]);
-  return /* @__PURE__ */ jsx2(KeybindingContext.Provider, {
+  return /* @__PURE__ */ jsx(KeybindingContext.Provider, {
     value,
     children
   });
@@ -620,12 +472,12 @@ var useKeybinding = () => {
       context.unregisterPane(paneId);
     };
   }, [context, paneId]);
-  return useMemo3(() => ({ registerKeybinding, isHighestContext }), [registerKeybinding, isHighestContext]);
+  return useMemo2(() => ({ registerKeybinding, isHighestContext }), [registerKeybinding, isHighestContext]);
 };
 
 // src/state/highest-z-index.tsx
-import { createContext as createContext2, useCallback as useCallback3, useMemo as useMemo4, useState as useState2 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { createContext as createContext2, useCallback as useCallback3, useMemo as useMemo3, useState as useState2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var HighestZIndexContext = createContext2({
   highestIndex: 0,
   registerZIndex: () => {
@@ -650,14 +502,14 @@ var HighestZIndexProvider = ({ children }) => {
     });
   }, []);
   const highestIndex = Math.max(...zIndexes);
-  const value = useMemo4(() => {
+  const value = useMemo3(() => {
     return {
       highestIndex,
       registerZIndex,
       unregisterZIndex
     };
   }, [registerZIndex, unregisterZIndex, highestIndex]);
-  return /* @__PURE__ */ jsx3(HighestZIndexContext.Provider, {
+  return /* @__PURE__ */ jsx2(HighestZIndexContext.Provider, {
     value,
     children
   });
@@ -671,7 +523,7 @@ var setClickLock = (lock) => {
 };
 
 // src/state/z-index.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var ZIndexContext = createContext3({
   currentIndex: 0
 });
@@ -761,7 +613,7 @@ var HigherZIndex = ({
       return window.removeEventListener("pointerdown", listener, true);
     };
   }, [currentIndex, disabled]);
-  const value = useMemo5(() => {
+  const value = useMemo4(() => {
     return {
       currentIndex
     };
@@ -769,10 +621,10 @@ var HigherZIndex = ({
   return /* @__PURE__ */ jsxs(ZIndexContext.Provider, {
     value,
     children: [
-      disabled ? null : /* @__PURE__ */ jsx4(EscapeHook, {
+      disabled ? null : /* @__PURE__ */ jsx3(EscapeHook, {
         onEscape
       }),
-      /* @__PURE__ */ jsx4("div", {
+      /* @__PURE__ */ jsx3("div", {
         ref: containerRef,
         style: margin,
         children
@@ -784,7 +636,7 @@ var useZIndex = () => {
   const context = useContext2(ZIndexContext);
   const highestContext = useContext2(HighestZIndexContext);
   const isHighestContext = highestContext.highestIndex === context.currentIndex;
-  return useMemo5(() => ({
+  return useMemo4(() => ({
     currentZIndex: context.currentIndex,
     highestZIndex: highestContext.highestIndex,
     isHighestContext,
@@ -792,377 +644,22 @@ var useZIndex = () => {
   }), [context.currentIndex, highestContext.highestIndex, isHighestContext]);
 };
 
-// src/components/InlineAction.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var InlineAction = ({
-  renderAction,
-  onClick,
-  disabled,
-  title,
-  hoveredColor = WHITE,
-  unhoveredColor = LIGHT_TEXT,
-  variant,
-  style: customStyle,
-  className,
-  onPointerDown: onPointerDownProp,
-  ...buttonProps
-}) => {
-  const { tabIndex } = useZIndex();
-  const onPointerDown = useCallback4((event) => {
-    onPointerDownProp?.(event);
-    if (event.button !== 0) {
-      return;
-    }
-    if (document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur();
-    }
-    event.preventDefault();
-  }, [onPointerDownProp]);
-  const style = useMemo6(() => {
-    return {
-      border: "none",
-      height: 24,
-      width: variant === "compact" ? 14 : 24,
-      padding: 0,
-      display: "inline-flex",
-      justifyContent: "center",
-      alignItems: "center",
-      borderRadius: 3,
-      opacity: disabled ? 0.5 : 1,
-      pointerEvents: disabled ? "none" : "auto",
-      ...hoverableStyle({
-        idleBackground: TRANSPARENT,
-        hoverBackground: disabled ? TRANSPARENT : getBackgroundFromHoverState({ hovered: true, selected: false }),
-        idleColor: unhoveredColor,
-        hoverColor: disabled ? unhoveredColor : hoveredColor
-      }),
-      ...customStyle
-    };
-  }, [customStyle, disabled, hoveredColor, unhoveredColor, variant]);
-  return /* @__PURE__ */ jsx5("button", {
-    ...buttonProps,
-    type: "button",
-    className: className ? `${HOVERABLE_CLASS_NAME} ${className}` : HOVERABLE_CLASS_NAME,
-    disabled,
-    onClick,
-    onPointerDown,
-    style,
-    tabIndex,
-    title,
-    "aria-label": buttonProps["aria-label"] ?? title,
-    children: renderAction(CURRENT_COLOR)
-  });
-};
-
-// src/components/Menu/is-menu-item.tsx
-var MENU_INITIATOR_CLASSNAME = "__remotion-studio-menu-initiator";
-var MENU_ITEM_CLASSNAME = "__remotion-studio-menu-item";
-var HORIZONTAL_SCROLLBAR_CLASSNAME = "__remotion-horizontal-scrollbar";
-var VERTICAL_SCROLLBAR_CLASSNAME = "__remotion-vertical-scrollbar";
-var isMenuItem = (el) => {
-  return Boolean(el.classList.contains(MENU_ITEM_CLASSNAME) || el.closest(`.${MENU_ITEM_CLASSNAME}`) || el.classList.contains(MENU_INITIATOR_CLASSNAME) || el.closest(`.${MENU_INITIATOR_CLASSNAME}`));
-};
-
-// src/components/NewComposition/ValidationMessage.tsx
-import { useMemo as useMemo7 } from "react";
-import { jsx as jsx6, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
-var WarningTriangle = (props) => {
-  return /* @__PURE__ */ jsx6("svg", {
-    viewBox: "0 0 576 512",
-    ...props,
-    children: /* @__PURE__ */ jsx6("path", {
-      d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z"
-    })
-  });
-};
-var style = {
-  width: 12,
-  height: 12,
-  flexShrink: 0
-};
-var compactStyle = {
-  ...style,
-  width: 10,
-  height: 10
-};
-var container = {
-  width: "100%",
-  maxWidth: 500,
-  minWidth: 0
-};
-var row = {
-  minWidth: 0
-};
-var label = {
-  fontSize: 13,
-  color: WHITE,
-  fontFamily: "sans-serif",
-  minWidth: 0,
-  whiteSpace: "normal",
-  overflowWrap: "anywhere"
-};
-var compactLabel = {
-  ...label,
-  fontSize: 12
-};
-var ValidationMessage = ({ message, align, type, action, size = "default" }) => {
-  const iconStyle = size === "compact" ? compactStyle : style;
-  const labelStyle = size === "compact" ? compactLabel : label;
-  const finalStyle = useMemo7(() => {
-    return {
-      ...iconStyle,
-      fill: type === "warning" ? WARNING_COLOR : FAIL_COLOR
-    };
-  }, [iconStyle, type]);
-  return /* @__PURE__ */ jsx6("div", {
-    style: container,
-    children: /* @__PURE__ */ jsxs2(Row, {
-      align: "center",
-      justify: align,
-      style: row,
-      children: [
-        /* @__PURE__ */ jsx6(WarningTriangle, {
-          style: finalStyle
-        }),
-        /* @__PURE__ */ jsx6(Spacing, {
-          x: size === "compact" ? 0.75 : 1
-        }),
-        /* @__PURE__ */ jsx6("div", {
-          style: labelStyle,
-          children: message
-        }),
-        action ? /* @__PURE__ */ jsxs2(Fragment, {
-          children: [
-            /* @__PURE__ */ jsx6(Spacing, {
-              x: size === "compact" ? 0.75 : 1
-            }),
-            action
-          ]
-        }) : null
-      ]
-    })
-  });
-};
-
-// src/components/ModalContainer.tsx
-import { useCallback as useCallback5 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var padding = 20;
-var getMaxModalWidth = (width) => {
-  return `min(calc(100vw - ${padding * 2}px), calc(${width}px - ${padding * 2}px))`;
-};
-var getMaxModalHeight = (height) => {
-  return `min(calc(100vh - ${padding * 2}px), calc(${height}px - ${padding * 2}px))`;
-};
-var backgroundOverlay = {
-  backgroundColor: WHITE_ALPHA_20,
-  backdropFilter: `blur(1px)`,
-  position: "fixed",
-  height: "100%",
-  width: "100%",
-  display: "flex",
-  padding
-};
-var panel = {
-  backgroundColor: BACKGROUND,
-  boxShadow: SHADOW_BLACK,
-  color: WHITE,
-  margin: "auto"
-};
-var ModalContainer = ({
-  ariaLabel,
-  ariaLabelledBy,
-  children,
-  onEscape,
-  onOutsideClick,
-  noZIndex,
-  panelStyle
-}) => {
-  const onPointerDown = useCallback5((e) => {
-    e.stopPropagation();
-  }, []);
-  return /* @__PURE__ */ jsx7("div", {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy ?? undefined,
-    "aria-modal": "true",
-    className: "css-reset",
-    role: "dialog",
-    style: backgroundOverlay,
-    onPointerDown,
-    children: /* @__PURE__ */ jsx7(HigherZIndex, {
-      disabled: noZIndex,
-      onOutsideClick,
-      onEscape,
-      children: /* @__PURE__ */ jsx7("div", {
-        style: { ...panel, ...panelStyle },
-        children
-      })
-    })
-  });
-};
-
-// src/components/RenderModal/render-modals.ts
-var outerModalStyle = {
-  width: getMaxModalWidth(800),
-  height: getMaxModalHeight(490),
-  overflow: "hidden",
-  display: "flex",
-  flexDirection: "column"
-};
-var container2 = {
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  padding: "12px 16px",
-  borderBottom: BORDER_BLACK
-};
-var optionsPanel = {
-  display: "flex",
-  flex: 1,
-  minHeight: 0,
-  minWidth: 0,
-  overflowY: "auto"
-};
-var horizontalLayout = {
-  display: "flex",
-  flexDirection: "row",
-  flex: 1,
-  minHeight: 0,
-  overflow: "hidden"
-};
-var leftSidebar = {
-  flexShrink: 0,
-  display: "flex",
-  flexDirection: "column",
-  padding: 6
-};
-var horizontalTab = {
-  flex: "none",
-  width: 150,
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  textAlign: "left",
-  fontSize: 14,
-  fontWeight: "normal",
-  paddingLeft: 8,
-  paddingTop: 6,
-  paddingBottom: 6,
-  borderRadius: 4
-};
-var iconContainer = {
-  width: 18,
-  height: 18,
-  marginRight: 8,
-  color: "inherit",
-  display: "inline-flex",
-  justifyContent: "center",
-  alignItems: "center"
-};
-var icon = {
-  color: "inherit",
-  height: 18
-};
-var buttonStyle = {
-  backgroundColor: BLUE,
-  color: WHITE
-};
-var flexer = {
-  flex: 1
-};
-
-// src/components/Spinner.tsx
-import { useMemo as useMemo8 } from "react";
-import { jsx as jsx8, jsxs as jsxs3, Fragment as Fragment2 } from "react/jsx-runtime";
-var viewBox = 100;
-var lines = 8;
-var className = "__remotion_spinner_line";
-var remotionSpinnerAnimation = "__remotion_spinner_animation";
-var translated = "M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z";
-var Spinner = ({ size, duration, color = LIGHT_TEXT }) => {
-  const style2 = useMemo8(() => {
-    return {
-      width: size,
-      height: size
-    };
-  }, [size]);
-  return /* @__PURE__ */ jsxs3(Fragment2, {
-    children: [
-      /* @__PURE__ */ jsx8("style", {
-        type: "text/css",
-        children: `
-				@keyframes ${remotionSpinnerAnimation} {
-          0% {
-            opacity: 1;
-          }
-          100% {
-            opacity: 0.15;
-          }
-        }
-        
-        .${className} {
-            animation: ${remotionSpinnerAnimation} ${duration}s linear infinite;
-        }        
-			`
-      }),
-      /* @__PURE__ */ jsx8("svg", {
-        style: style2,
-        viewBox: `0 0 ${viewBox} ${viewBox}`,
-        children: new Array(lines).fill(true).map((_, index) => {
-          return /* @__PURE__ */ jsx8("path", {
-            className,
-            style: {
-              rotate: `${index * Math.PI * 2 / lines}rad`,
-              transformOrigin: "center center",
-              animationDelay: `${index * (duration / lines) - duration}s`
-            },
-            d: translated,
-            fill: color
-          }, index);
-        })
-      })
-    ]
-  });
-};
-
-// src/icons/trash.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var TrashIcon = ({ color, ...props }) => {
-  return /* @__PURE__ */ jsx9("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 448 512",
-    ...props,
-    children: /* @__PURE__ */ jsx9("path", {
-      fill: color,
-      d: "M160.5 27.4C162.5 20.6 168.8 16 175.8 16h96.4c7.1 0 13.3 4.6 15.3 11.4l11 36.6h-149l11-36.6zM116.1 64H16C7.2 64 0 71.2 0 80s7.2 16 16 16h416c8.8 0 16-7.2 16-16s-7.2-16-16-16H331.9l-13.7-45.8C312.1-2.1 293.4-16 272.2-16h-96.4c-21.2 0-39.9 13.9-46 34.2L116.1 64zM28.7 144l22.9 308.7c2.5 33.4 30.3 59.3 63.8 59.3h217.1c33.5 0 61.3-25.9 63.8-59.3L419.2 144h-32.1l-22.7 306.4c-1.2 16.7-15.2 29.6-31.9 29.6H115.4c-16.8 0-30.7-12.9-31.9-29.6L60.8 144H28.7z"
-    })
-  });
-};
-
-// src/icons/cloud-download.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-var CloudDownloadIcon = ({ color, ...props }) => {
-  return /* @__PURE__ */ jsx10("svg", {
-    ...props,
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 576 512",
-    children: /* @__PURE__ */ jsx10("path", {
-      fill: color,
-      d: "M128 176c0-61.9 50.1-112 112-112 39.3 0 73.8 20.2 93.8 50.8 4.4 6.7 13.1 9.1 20.3 5.7 11.4-5.5 24.3-8.5 37.9-8.5 48.6 0 88 39.4 88 88 0 14.1-3.3 27.4-9.2 39.2-2 4.1-2.2 8.9-.5 13.1s5.2 7.6 9.5 9.1c37.4 13.1 64.2 48.8 64.2 90.6 0 53-43 96-96 96l-304 0c-61.9 0-112-50.1-112-112 0-53.7 37.8-98.6 88.2-109.5 4.3-.9 8.1-3.6 10.3-7.4s2.9-8.3 1.7-12.6c-2.7-9.7-4.2-19.9-4.2-30.5zM240 32c-79.5 0-144 64.5-144 144 0 8 .7 15.9 1.9 23.5-56.9 19.2-97.9 73-97.9 136.5 0 79.5 64.5 144 144 144l304 0c70.7 0 128-57.3 128-128 0-49.9-28.5-93-70.1-114.2 3.9-11.9 6.1-24.6 6.1-37.8 0-66.3-53.7-120-120-120-13.7 0-26.9 2.3-39.2 6.5-26.4-33.2-67.1-54.5-112.8-54.5zM371.3 307.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L304 329.4 304 208c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 121.4-44.7-44.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l72 72c6.2 6.2 16.4 6.2 22.6 0l72-72z"
-    })
-  });
+// src/components/Menu/portals.ts
+var portalIds = [
+  "menuportal-0",
+  "menuportal-1",
+  "menuportal-2",
+  "menuportal-3",
+  "menuportal-4",
+  "menuportal-5"
+];
+var portals = typeof document === "undefined" ? [] : portalIds.map((id) => document.getElementById(id));
+var getPortal = (i) => {
+  const portal = portals[i];
+  if (!portal) {
+    throw new Error(`Expected menu portal ${i} to exist`);
+  }
+  return portal;
 };
 
-// src/icons/check-circle-filled.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var CheckCircleFilled = (props) => /* @__PURE__ */ jsx11("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  style: { width: 14, height: 14 },
-  viewBox: "0 0 512 512",
-  ...props,
-  children: /* @__PURE__ */ jsx11("path", {
-    d: "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zM374 145.7c-10.7-7.8-25.7-5.4-33.5 5.3L221.1 315.2 169 263.1c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c5 5 11.8 7.5 18.8 7s13.4-4.1 17.5-9.8L379.3 179.2c7.8-10.7 5.4-25.7-5.3-33.5z"
-  })
-});
-
-export { isPointerSessionRelease, startCapturedPointerSession, startDeferredCapturedPointerSession, isMac, defaultKeyboardShortcuts, keyboardShortcutGroups, askAIKeyboardShortcutGroup, getKeyboardShortcutsForAction, keyboardShortcutsOverlap, formatKeyboardShortcut, getKeyboardShortcutLabel, getKeyboardShortcutAriaKeyShortcuts, shortcutFromKeyboardEvent, KeybindingContextProvider, areKeyboardShortcutsDisabled, useKeybinding, HighestZIndexProvider, getClickLock, setClickLock, HigherZIndex, useZIndex, SPACING_UNIT, COMPACT_CONTROL_ROW_HEIGHT, COMPACT_INLINE_ROW_HEIGHT, Spacing, Flex, Row, Column, getMaxModalWidth, getMaxModalHeight, ModalContainer, HOVERABLE_CLASS_NAME, HOVER_GROUP_CLASS_NAME, HOVER_GROUP_REVEAL_CLASS_NAME, FOCUS_VISIBLE_ONLY_CLASS_NAME, NO_HOVER_BACKGROUND_STYLE, hoverableStyle, makeHoverableCSS, InlineAction, MENU_INITIATOR_CLASSNAME, MENU_ITEM_CLASSNAME, HORIZONTAL_SCROLLBAR_CLASSNAME, VERTICAL_SCROLLBAR_CLASSNAME, isMenuItem, Spinner, TrashIcon, WarningTriangle, ValidationMessage, CloudDownloadIcon, CheckCircleFilled, outerModalStyle, container2 as container, optionsPanel, horizontalLayout, leftSidebar, horizontalTab, iconContainer, icon, buttonStyle, flexer };
+export { isPointerSessionRelease, startCapturedPointerSession, startDeferredCapturedPointerSession, isMac, defaultKeyboardShortcuts, keyboardShortcutGroups, askAIKeyboardShortcutGroup, getKeyboardShortcutsForAction, keyboardShortcutsOverlap, formatKeyboardShortcut, getKeyboardShortcutLabel, getKeyboardShortcutAriaKeyShortcuts, shortcutFromKeyboardEvent, KeybindingContextProvider, areKeyboardShortcutsDisabled, useKeybinding, HighestZIndexProvider, getClickLock, setClickLock, HigherZIndex, useZIndex, portals, getPortal };