@remotion/studio 4.0.526 → 4.0.528

package/dist/esm/index-890dd9b3.mjs

@@ -0,0 +1,768 @@
+import {
+  HigherZIndex,
+  getPortal,
+  useZIndex
+} from "./index-qve7mdfp.mjs";
+import {
+  BACKGROUND,
+  BLUE,
+  BORDER_BLACK,
+  CURRENT_COLOR,
+  CURRENT_COLOR_LOWERCASE,
+  FAIL_COLOR,
+  LIGHT_TEXT,
+  SHADOW_BLACK,
+  SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM,
+  SHADOW_BLACK_ALPHA_50_TOWARDS_TOP,
+  TIMELINE_BACKGROUND_COLOR,
+  TRANSPARENT,
+  WARNING_COLOR,
+  WHITE,
+  WHITE_ALPHA_10,
+  WHITE_ALPHA_20,
+  WHITE_ALPHA_90,
+  getBackgroundFromHoverState
+} from "./index-wqc43mw0.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, useMemo as useMemo2 } 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-studio-hoverable-bg";
+var HOVER_BG_VARIABLE = "--remotion-studio-hoverable-hover-bg";
+var COLOR_VARIABLE = "--remotion-studio-hoverable-color";
+var HOVER_COLOR_VARIABLE = "--remotion-studio-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},
+    ${hoverGroup}:has([aria-expanded="true"]) ${reveal} {
+      opacity: 1;
+      width: auto;
+      overflow: visible;
+    }
+  }
+`;
+
+// src/components/InlineAction.tsx
+import { jsx as jsx2 } 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 = useCallback((event) => {
+    onPointerDownProp?.(event);
+    if (event.button !== 0) {
+      return;
+    }
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+    event.preventDefault();
+  }, [onPointerDownProp]);
+  const style = useMemo2(() => {
+    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__ */ jsx2("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 useMemo3 } from "react";
+import { jsx as jsx3, jsxs, Fragment } from "react/jsx-runtime";
+var WarningTriangle = (props) => {
+  return /* @__PURE__ */ jsx3("svg", {
+    viewBox: "0 0 576 512",
+    ...props,
+    children: /* @__PURE__ */ jsx3("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 = useMemo3(() => {
+    return {
+      ...iconStyle,
+      fill: type === "warning" ? WARNING_COLOR : FAIL_COLOR
+    };
+  }, [iconStyle, type]);
+  return /* @__PURE__ */ jsx3("div", {
+    style: container,
+    children: /* @__PURE__ */ jsxs(Row, {
+      align: "center",
+      justify: align,
+      style: row,
+      children: [
+        /* @__PURE__ */ jsx3(WarningTriangle, {
+          style: finalStyle
+        }),
+        /* @__PURE__ */ jsx3(Spacing, {
+          x: size === "compact" ? 0.75 : 1
+        }),
+        /* @__PURE__ */ jsx3("div", {
+          style: labelStyle,
+          children: message
+        }),
+        action ? /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx3(Spacing, {
+              x: size === "compact" ? 0.75 : 1
+            }),
+            action
+          ]
+        }) : null
+      ]
+    })
+  });
+};
+
+// src/components/ModalContainer.tsx
+import { useCallback as useCallback2 } from "react";
+import { jsx as jsx4 } 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 = useCallback2((e) => {
+    e.stopPropagation();
+  }, []);
+  return /* @__PURE__ */ jsx4("div", {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy ?? undefined,
+    "aria-modal": "true",
+    className: "css-reset",
+    role: "dialog",
+    style: backgroundOverlay,
+    onPointerDown,
+    children: /* @__PURE__ */ jsx4(HigherZIndex, {
+      disabled: noZIndex,
+      onOutsideClick,
+      onEscape,
+      children: /* @__PURE__ */ jsx4("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/icons/models.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ModelsIcon = ({
+  color,
+  ...props
+}) => /* @__PURE__ */ jsx5("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 512 512",
+  ...props,
+  children: /* @__PURE__ */ jsx5("path", {
+    d: "M176 16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-16c-35.3 0-64 28.7-64 64v16H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v64H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v64H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v16c0 35.3 28.7 64 64 64h16v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h64v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h64v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h16c35.3 0 64-28.7 64-64v-16h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-64h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-64h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-16c0-35.3-28.7-64-64-64h-16V16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-64V16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-64V16ZM416 128v256c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V128c0-17.7 14.3-32 32-32h256c17.7 0 32 14.3 32 32ZM192 160c-17.7 0-32 14.3-32 32v128c0 17.7 14.3 32 32 32h128c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32H192Zm128 32v128H192V192h128Z",
+    fill: color ?? CURRENT_COLOR_LOWERCASE
+  })
+});
+
+// src/components/Menu/styles.ts
+var MENU_VERTICAL_PADDING = 4;
+var SUBMENU_LEFT_INSET = -8;
+var MAX_MENU_WIDTH = 400;
+var MAX_MOBILE_MENU_WIDTH = 300;
+var menuContainer = {
+  backgroundColor: BACKGROUND,
+  position: "fixed",
+  color: WHITE,
+  userSelect: "none",
+  WebkitUserSelect: "none"
+};
+var SHADOW_TOWARDS_BOTTOM = SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM;
+var SHADOW_TOWARDS_TOP = SHADOW_BLACK_ALPHA_50_TOWARDS_TOP;
+var menuContainerTowardsBottom = {
+  ...menuContainer,
+  boxShadow: SHADOW_TOWARDS_BOTTOM
+};
+var menuContainerTowardsTop = {
+  ...menuContainer,
+  boxShadow: SHADOW_TOWARDS_TOP
+};
+var fullScreenOverlay = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+};
+var outerPortal = {
+  position: "fixed"
+};
+var inlineCodeSnippet = {
+  fontSize: 14,
+  color: BLUE,
+  fontFamily: "monospace"
+};
+
+// src/components/ActionTooltip.tsx
+import {
+  useCallback as useCallback3,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx6, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+var defaultTriggerStyle = { display: "inline-flex" };
+var tooltipStyle = {
+  position: "fixed",
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  backgroundColor: TIMELINE_BACKGROUND_COLOR,
+  color: WHITE_ALPHA_90,
+  borderRadius: 6,
+  padding: "6px 8px",
+  fontSize: 12,
+  lineHeight: "16px",
+  whiteSpace: "pre-wrap",
+  overflowWrap: "anywhere",
+  maxWidth: "calc(100vw - 16px)",
+  boxShadow: SHADOW_TOWARDS_TOP,
+  pointerEvents: "none"
+};
+var labelStyle = {
+  font: "inherit",
+  color: "inherit",
+  minWidth: 0
+};
+var shortcutStyle = {
+  ...labelStyle,
+  backgroundColor: WHITE_ALPHA_10,
+  borderRadius: 3,
+  padding: "0 4px",
+  minWidth: 16,
+  textAlign: "center",
+  whiteSpace: "nowrap",
+  flexShrink: 0
+};
+var visibleTooltipCount = 0;
+var lastTooltipHiddenAt = null;
+var TOOLTIP_SKIP_DELAY_WINDOW = 300;
+var ActionTooltip = ({
+  label: label2,
+  shortcut,
+  delay,
+  dismissOnClick,
+  side = "top",
+  triggerStyle,
+  children
+}) => {
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const timer = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState(null);
+  const { currentZIndex } = useZIndex();
+  useLayoutEffect(() => {
+    if (!visible) {
+      return;
+    }
+    visibleTooltipCount++;
+    return () => {
+      visibleTooltipCount--;
+      lastTooltipHiddenAt = Date.now();
+    };
+  }, [visible]);
+  const hide = useCallback3(() => {
+    if (timer.current !== null) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    setVisible(false);
+    setPosition(null);
+  }, []);
+  const show = useCallback3(() => {
+    if (timer.current !== null) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    setVisible(true);
+  }, []);
+  const onPointerEnter = useCallback3((event) => {
+    if (event.pointerType === "touch" || timer.current !== null || !event.currentTarget.contains(event.target)) {
+      return;
+    }
+    if (!delay || visibleTooltipCount > 0 || lastTooltipHiddenAt !== null && Date.now() - lastTooltipHiddenAt < TOOLTIP_SKIP_DELAY_WINDOW) {
+      show();
+      return;
+    }
+    timer.current = setTimeout(show, delay);
+  }, [delay, show]);
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        hide();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("blur", hide);
+    window.addEventListener("resize", hide);
+    window.addEventListener("scroll", hide, true);
+    return () => {
+      if (timer.current !== null) {
+        clearTimeout(timer.current);
+      }
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("blur", hide);
+      window.removeEventListener("resize", hide);
+      window.removeEventListener("scroll", hide, true);
+    };
+  }, [hide]);
+  useLayoutEffect(() => {
+    if (!visible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const tooltip = tooltipRef.current.getBoundingClientRect();
+    if (side === "right") {
+      const right = trigger.right + 4;
+      setPosition({
+        left: right + tooltip.width <= window.innerWidth - 8 ? right : Math.max(8, trigger.left - tooltip.width - 4),
+        top: Math.max(8, Math.min(trigger.top + (trigger.height - tooltip.height) / 2, window.innerHeight - tooltip.height - 8))
+      });
+      return;
+    }
+    const above = trigger.top - tooltip.height - 4;
+    setPosition({
+      left: Math.max(8, Math.min(trigger.left + (trigger.width - tooltip.width) / 2, window.innerWidth - tooltip.width - 8)),
+      top: Math.max(8, Math.min(above >= 8 ? above : trigger.bottom + 4, window.innerHeight - tooltip.height - 8))
+    });
+  }, [label2, shortcut, side, visible]);
+  return /* @__PURE__ */ jsxs2(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsx6("span", {
+        ref: triggerRef,
+        style: { ...defaultTriggerStyle, ...triggerStyle },
+        onPointerEnter,
+        onPointerLeave: hide,
+        onPointerDownCapture: dismissOnClick ? hide : undefined,
+        onClickCapture: dismissOnClick ? hide : undefined,
+        onFocus: (event) => {
+          if (event.currentTarget.contains(event.target)) {
+            show();
+          }
+        },
+        onBlur: hide,
+        children
+      }),
+      visible ? createPortal(/* @__PURE__ */ jsxs2("div", {
+        ref: tooltipRef,
+        role: "tooltip",
+        className: "css-reset",
+        style: {
+          ...tooltipStyle,
+          left: position?.left ?? 0,
+          top: position?.top ?? 0,
+          visibility: position ? "visible" : "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx6("span", {
+            style: labelStyle,
+            children: label2
+          }),
+          shortcut ? /* @__PURE__ */ jsx6("kbd", {
+            style: shortcutStyle,
+            children: shortcut
+          }) : null
+        ]
+      }), getPortal(currentZIndex)) : null
+    ]
+  });
+};
+
+// src/components/Spinner.tsx
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx7, jsxs as jsxs3, Fragment as Fragment3 } 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 = useMemo4(() => {
+    return {
+      width: size,
+      height: size
+    };
+  }, [size]);
+  return /* @__PURE__ */ jsxs3(Fragment3, {
+    children: [
+      /* @__PURE__ */ jsx7("style", {
+        type: "text/css",
+        children: `
+				@keyframes ${remotionSpinnerAnimation} {
+          0% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0.15;
+          }
+        }
+        
+        .${className} {
+            animation: ${remotionSpinnerAnimation} ${duration}s linear infinite;
+        }        
+			`
+      }),
+      /* @__PURE__ */ jsx7("svg", {
+        style: style2,
+        viewBox: `0 0 ${viewBox} ${viewBox}`,
+        children: new Array(lines).fill(true).map((_, index) => {
+          return /* @__PURE__ */ jsx7("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 jsx8 } from "react/jsx-runtime";
+var TrashIcon = ({ color, ...props }) => {
+  return /* @__PURE__ */ jsx8("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 448 512",
+    ...props,
+    children: /* @__PURE__ */ jsx8("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 jsx9 } from "react/jsx-runtime";
+var CloudDownloadIcon = ({ color, ...props }) => {
+  return /* @__PURE__ */ jsx9("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 576 512",
+    children: /* @__PURE__ */ jsx9("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/icons/check-circle-filled.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var CheckCircleFilled = (props) => /* @__PURE__ */ jsx10("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  style: { width: 14, height: 14 },
+  viewBox: "0 0 512 512",
+  ...props,
+  children: /* @__PURE__ */ jsx10("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 { 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_VERTICAL_PADDING, SUBMENU_LEFT_INSET, MAX_MENU_WIDTH, MAX_MOBILE_MENU_WIDTH, SHADOW_TOWARDS_BOTTOM, SHADOW_TOWARDS_TOP, menuContainerTowardsBottom, menuContainerTowardsTop, fullScreenOverlay, outerPortal, inlineCodeSnippet, MENU_INITIATOR_CLASSNAME, MENU_ITEM_CLASSNAME, HORIZONTAL_SCROLLBAR_CLASSNAME, VERTICAL_SCROLLBAR_CLASSNAME, isMenuItem, ActionTooltip, Spinner, TrashIcon, WarningTriangle, ValidationMessage, CloudDownloadIcon, CheckCircleFilled, outerModalStyle, container2 as container, optionsPanel, horizontalLayout, leftSidebar, horizontalTab, iconContainer, icon, buttonStyle, flexer, ModelsIcon };