@remotion/studio 4.0.502 → 4.0.504

package/dist/icons/caret.js

@@ -19,7 +19,7 @@ const angleDown = {
 const CaretRight = () => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 192 512", style: caret, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" }) }));
 exports.CaretRight = CaretRight;
 const CaretDown = ({ color = colors_1.CURRENT_COLOR, small = false }) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", style: small ? caretDownSmall : caretDown, children: jsx_runtime_1.jsx("path", { fill: color, d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", style: small ? caretDownSmall : caretDown, children: jsx_runtime_1.jsx("path", { fill: color, d: "M235.3 411.3c-6.2 6.2-16.4 6.2-22.6 0l-208-208c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L224 377.4 420.7 180.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6l-208 208z" }) }));
 };
 exports.CaretDown = CaretDown;
 const AngleDown = ({ down }) => {

package/dist/icons/certificate.d.ts

@@ -1 +1 @@
-export declare const CertificateIcon: (props: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const CertificateIcon: ({ color, ...props }: import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/certificate.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CertificateIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const CertificateIcon = (props) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M192 32l128 0 0 96c0 35.3 28.7 64 64 64l96 0 0 256c0 17.7-14.3 32-32 32l-192 0 0 32 192 0c35.3 0 64-28.7 64-64l0-261.5c0-17-6.7-33.3-18.7-45.3L370.7 18.7C358.7 6.7 342.5 0 325.5 0L192 0c-35.3 0-64 28.7-64 64l0 80c10.9 0 21.6 1 32 2.9L160 64c0-17.7 14.3-32 32-32zM352 45.3L466.7 160 384 160c-17.7 0-32-14.3-32-32l0-82.7zM32 320a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM176 438.7l0 66.3-40.1-22.9c-4.9-2.8-11-2.8-15.9 0L80 505 80 438.7c14.8 6 31 9.3 48 9.3s33.2-3.3 48-9.3zm32-18.8c29.3-23.5 48-59.5 48-99.9 0-70.7-57.3-128-128-128S0 249.3 0 320c0 40.4 18.7 76.5 48 99.9l0 101.8c0 12.3 10 22.3 22.3 22.3 3.9 0 7.7-1 11.1-2.9l46.6-26.6 46.6 26.6c3.4 1.9 7.2 2.9 11.1 2.9 12.3 0 22.3-10 22.3-22.3l0-101.8zM128 344a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm0-80a56 56 0 1 0 0 112 56 56 0 1 0 0-112z" }) }));
+const CertificateIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, d: "M192 32l128 0 0 96c0 35.3 28.7 64 64 64l96 0 0 256c0 17.7-14.3 32-32 32l-192 0 0 32 192 0c35.3 0 64-28.7 64-64l0-261.5c0-17-6.7-33.3-18.7-45.3L370.7 18.7C358.7 6.7 342.5 0 325.5 0L192 0c-35.3 0-64 28.7-64 64l0 80c10.9 0 21.6 1 32 2.9L160 64c0-17.7 14.3-32 32-32zM352 45.3L466.7 160 384 160c-17.7 0-32-14.3-32-32l0-82.7zM32 320a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM176 438.7l0 66.3-40.1-22.9c-4.9-2.8-11-2.8-15.9 0L80 505 80 438.7c14.8 6 31 9.3 48 9.3s33.2-3.3 48-9.3zm32-18.8c29.3-23.5 48-59.5 48-99.9 0-70.7-57.3-128-128-128S0 249.3 0 320c0 40.4 18.7 76.5 48 99.9l0 101.8c0 12.3 10 22.3 22.3 22.3 3.9 0 7.7-1 11.1-2.9l46.6-26.6 46.6 26.6c3.4 1.9 7.2 2.9 11.1 2.9 12.3 0 22.3-10 22.3-22.3l0-101.8zM128 344a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm0-80a56 56 0 1 0 0 112 56 56 0 1 0 0-112z" }) }));
 exports.CertificateIcon = CertificateIcon;

package/dist/icons/custom-editor.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const CustomEditorIcon: React.FC<{
+    readonly size: number | null;
+}>;

package/dist/icons/custom-editor.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomEditorIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const CustomEditorIcon = ({ size: sizeProp, }) => (jsx_runtime_1.jsx("svg", { focusable: "false", role: "img", viewBox: "0 0 24 24", style: {
+        width: sizeProp !== null && sizeProp !== void 0 ? sizeProp : 14,
+        height: sizeProp !== null && sizeProp !== void 0 ? sizeProp : 14,
+        flexShrink: 0,
+    }, children: jsx_runtime_1.jsx("path", { fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.8", d: "m8 8-4 4 4 4m8-8 4 4-4 4m-2-10-4 12" }) }));
+exports.CustomEditorIcon = CustomEditorIcon;

package/dist/icons/data.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const DataIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataIcon: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/data.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const DataIcon = (props) => {
-    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M224 512C100.3 512 0 476.2 0 432V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80V432C448 476.2 347.7 512 224 512zM416 80.45C415.7 79.69 414.4 77.27 409.8 73.31C402.4 67.11 389.9 60.09 371.6 53.57C335.4 40.62 283.2 32 224 32C164.8 32 112.6 40.62 76.37 53.57C58.1 60.09 45.59 67.11 38.25 73.31C33.55 77.27 32.29 79.69 32 80.45V182.1C46.47 192.7 69.9 202.8 100.9 210.4C135.5 218.9 177.1 224 224 224C270 224 312.5 218.9 347.1 210.4C378.1 202.8 401.5 192.7 416 182.1V80.45zM416 219.5C398.8 228.4 377.9 235.8 354.8 241.5C317.3 250.7 272.2 256 224 256C175.8 256 130.7 250.7 93.22 241.5C70.11 235.8 49.18 228.4 32 219.5V310.1C46.47 320.7 69.9 330.8 100.9 338.4C135.5 346.9 177.1 352 224 352C270 352 312.5 346.9 347.1 338.4C378.1 330.8 401.5 320.7 416 310.1V219.5zM38.25 438.7C45.59 444.9 58.1 451.9 76.37 458.4C112.6 471.4 164.8 480 224 480C283.2 480 335.4 471.4 371.6 458.4C389.9 451.9 402.4 444.9 409.8 438.7C414.4 434.7 415.7 432.3 416 431.6V347.5C398.8 356.4 377.9 363.8 354.8 369.5C317.3 378.7 272.2 384 224 384C175.8 384 130.7 378.7 93.22 369.5C70.11 363.8 49.18 356.4 32 347.5V431.6C32.29 432.3 33.55 434.7 38.25 438.7zM416 431.4C416.1 431.3 416.1 431.3 416.1 431.3L416 431.4zM31.96 431.4C31.94 431.3 31.93 431.3 31.92 431.3L31.96 431.4zM31.96 80.56C31.93 80.65 31.92 80.7 31.92 80.7L31.96 80.56zM416.1 80.7C416.1 80.7 416.1 80.65 416 80.56z" }) }));
+const DataIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, d: "M224 512C100.3 512 0 476.2 0 432V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80V432C448 476.2 347.7 512 224 512zM416 80.45C415.7 79.69 414.4 77.27 409.8 73.31C402.4 67.11 389.9 60.09 371.6 53.57C335.4 40.62 283.2 32 224 32C164.8 32 112.6 40.62 76.37 53.57C58.1 60.09 45.59 67.11 38.25 73.31C33.55 77.27 32.29 79.69 32 80.45V182.1C46.47 192.7 69.9 202.8 100.9 210.4C135.5 218.9 177.1 224 224 224C270 224 312.5 218.9 347.1 210.4C378.1 202.8 401.5 192.7 416 182.1V80.45zM416 219.5C398.8 228.4 377.9 235.8 354.8 241.5C317.3 250.7 272.2 256 224 256C175.8 256 130.7 250.7 93.22 241.5C70.11 235.8 49.18 228.4 32 219.5V310.1C46.47 320.7 69.9 330.8 100.9 338.4C135.5 346.9 177.1 352 224 352C270 352 312.5 346.9 347.1 338.4C378.1 330.8 401.5 320.7 416 310.1V219.5zM38.25 438.7C45.59 444.9 58.1 451.9 76.37 458.4C112.6 471.4 164.8 480 224 480C283.2 480 335.4 471.4 371.6 458.4C389.9 451.9 402.4 444.9 409.8 438.7C414.4 434.7 415.7 432.3 416 431.6V347.5C398.8 356.4 377.9 363.8 354.8 369.5C317.3 378.7 272.2 384 224 384C175.8 384 130.7 378.7 93.22 369.5C70.11 363.8 49.18 356.4 32 347.5V431.6C32.29 432.3 33.55 434.7 38.25 438.7zM416 431.4C416.1 431.3 416.1 431.3 416.1 431.3L416 431.4zM31.96 431.4C31.94 431.3 31.93 431.3 31.92 431.3L31.96 431.4zM31.96 80.56C31.93 80.65 31.92 80.7 31.92 80.7L31.96 80.56zM416.1 80.7C416.1 80.7 416.1 80.65 416 80.56z" }) }));
 };
 exports.DataIcon = DataIcon;

package/dist/icons/editor.d.ts

@@ -0,0 +1,6 @@
+import type { EditorPickerId } from '@remotion/studio-shared';
+import React from 'react';
+export declare const EditorIcon: React.FC<{
+    readonly editorId: EditorPickerId | null;
+    readonly size: number | null;
+}>;

package/dist/icons/editor.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const custom_editor_1 = require("./custom-editor");
+// Brand shapes adapted from:
+// - OpenCode app icons (MIT): https://github.com/anomalyco/opencode/tree/dev/packages/ui/src/assets/icons/app
+// - Simple Icons (CC0 1.0): https://github.com/simple-icons/simple-icons/tree/develop/icons
+const iconStyle = (size) => ({
+    flexShrink: 0,
+    height: size,
+    width: size,
+});
+const VsCodeIcon = ({ size }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 40 40", style: iconStyle(size), "aria-hidden": true, children: jsx_runtime_1.jsx("path", { fill: "#23A9F2", fillRule: "evenodd", clipRule: "evenodd", d: "M26.02 34.13c.23.09.48.13.72.12.25-.01.49-.07.71-.18l5.93-2.85c.31-.15.56-.38.74-.66.18-.29.28-.62.28-.96V10.25c0-.34-.1-.67-.28-.96-.18-.28-.43-.51-.74-.66l-5.93-2.85c-.34-.16-.71-.22-1.08-.15-.36.06-.7.23-.96.5L14.05 16.48 9.11 12.73a1.2 1.2 0 0 0-1.53.07L5.99 14.24a1.2 1.2 0 0 0 0 1.77l4.29 3.92-4.29 3.91a1.2 1.2 0 0 0 0 1.77l1.59 1.44a1.2 1.2 0 0 0 1.53.07l4.94-3.75 11.36 10.36c.17.17.38.31.61.4Zm1.18-20.74-8.61 6.54 8.61 6.53V13.39Z" }) }));
+const CursorIcon = ({ size }) => (jsx_runtime_1.jsxs("svg", { viewBox: "0 0 40 40", style: iconStyle(size), "aria-hidden": true, children: [
+        jsx_runtime_1.jsx("rect", { x: "4", y: "4", width: "32", height: "32", rx: "7.625", fill: "#050505" }), jsx_runtime_1.jsx("path", { fill: "#fff", d: "m29.62 14.21-8.67-5.09a.89.89 0 0 0-.9 0l-8.67 5.09a.77.77 0 0 0-.38.66v10.26c0 .27.14.52.38.66l8.67 5.09c.28.16.62.16.9 0l8.67-5.09c.24-.14.38-.39.38-.66V14.87a.77.77 0 0 0-.38-.66Zm-.54 1.07L20.7 30.01a.11.11 0 0 1-.2-.06v-9.64c0-.19-.1-.37-.27-.47l-8.22-4.82a.11.11 0 0 1 .06-.21h16.74c.24 0 .39.27.27.47Z" })
+    ] }));
+const WindsurfIcon = ({ size }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 24 24", style: iconStyle(size), "aria-hidden": true, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M23.55 5.07a2.18 2.18 0 0 0-2.18 2.17v4.87c0 .97-.8 1.76-1.76 1.76-.57 0-1.14-.29-1.47-.77l-4.97-7.1a2.21 2.21 0 0 0-3.96 1.22v4.89c0 .97-.8 1.76-1.77 1.76-.57 0-1.13-.29-1.47-.77L.41 5.16A.22.22 0 0 0 0 5.29v4.24c0 .22.07.43.19.6l5.47 7.82c.33.46.8.81 1.35.93a2.15 2.15 0 0 0 2.65-2.1v-4.89c0-.97.79-1.76 1.76-1.76.57 0 1.14.29 1.47.77l4.98 7.1c.41.59 1.05.94 1.81.94a2.15 2.15 0 0 0 2.15-2.16v-4.89c0-.97.79-1.76 1.76-1.76h.19a.22.22 0 0 0 .22-.22V5.29a.22.22 0 0 0-.22-.22h-.23Z" }) }));
+const ZedIcon = ({ size }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 40 40", style: iconStyle(size), "aria-hidden": true, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, fillRule: "evenodd", clipRule: "evenodd", d: "M8.3 7.4a.9.9 0 0 0-.9.9v19.8H5.6V8.3a2.7 2.7 0 0 1 2.7-2.7h24.11c1.2 0 1.81 1.45.96 2.3L18.52 22.76h4.18V20.9h1.8v2.31c0 .75-.6 1.35-1.35 1.35h-6.43l-3.1 3.09h14.03V16.4h1.8v11.25c0 1-.8 1.8-1.8 1.8H11.82L8.67 32.6H31.7a.9.9 0 0 0 .9-.9V11.9h1.8v19.8a2.7 2.7 0 0 1-2.7 2.7H7.59c-1.2 0-1.81-1.45-.96-2.31L21.43 17.3H17.3v1.8h-1.8v-2.25c0-.75.6-1.35 1.35-1.35h6.38l3.15-3.15H12.35V23.6h-1.8V12.35c0-1 .8-1.8 1.8-1.8h15.83l3.15-3.15H8.3Z" }) }));
+const VscodiumIcon = ({ size }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 24 24", style: iconStyle(size), "aria-hidden": true, children: jsx_runtime_1.jsx("path", { fill: "#2F80ED", d: "M11.58.54a1.47 1.47 0 0 0-.44 2.03c2.43 3.76 3 6.6 2.75 9.08-1 4.75-3.18 5.72-5.09 5.72-1.86 0-1.36-3.07.03-3.96a5.3 5.3 0 0 1 2.73-.87 1.47 1.47 0 1 0 0-2.94c-.96 0-1.9.21-2.78.55.18-.85.25-1.76.02-2.74-.36-1.47-1.37-2.88-3.13-4.25a1.47 1.47 0 0 0-1.81 2.32c1.43 1.11 1.9 1.94 2.07 2.62.16.68.03 1.4-.3 2.4-.41 1.35-.9 2.56-1.1 3.71-.11.57-.12 1.19-.15 1.68-1.03-1-1.43-2.34-1.43-4.28a1.47 1.47 0 1 0-2.95 0c0 2.66.78 5.18 2.86 6.87 1.88 1.79 6.67 1.13 6.67 4.01 0 .81 1.19 1.21 2 1.21.84 0 1.89-.56 1.89-1.21 0-3.27 3.44-5.25 9.11-5.24A1.47 1.47 0 1 0 22.53 14.3c-.39 0-.77.01-1.14.03.64-1.49.92-3.13.86-4.9a1.47 1.47 0 1 0-2.95.1c.08 2.32-.01 4.39-1.74 5.48-.49.31-1.06.58-1.6.58.42-1.14.74-2.35.87-3.65.08-.83.09-1.82 0-2.59-.15-1.18-.33-2.53.12-3.55.4-.87 1.31-1.24 2.65-1.24a1.47 1.47 0 1 0 0-2.94c-1.98 0-3.48 1.04-4.34 2.3-.44-.95-.98-1.93-1.64-2.94a1.47 1.47 0 0 0-2.04-.44Z" }) }));
+const WebStormIcon = ({ size }) => (jsx_runtime_1.jsxs("svg", { viewBox: "0 0 24 24", style: iconStyle(size), "aria-hidden": true, children: [
+        jsx_runtime_1.jsx("rect", { width: "24", height: "24", rx: "3", fill: "#07C3F2" }), jsx_runtime_1.jsx("path", { fill: "#050505", d: "M3 3h18v18H3z" }), jsx_runtime_1.jsx("path", { fill: "#fff", d: "M4.8 5.4h2.1l1.3 4.9 1.4-4.9h1.6l1.4 4.9 1.3-4.9h2.1l-2.5 8.7h-1.8l-1.3-4.8-1.4 4.8H7.3L4.8 5.4Zm10.8 7.3 1.1-1.4c.8.6 1.6 1 2.5 1 .7 0 1.2-.3 1.2-.8 0-.5-.3-.7-1.7-1.1-1.7-.4-2.8-.9-2.8-2.6 0-1.6 1.3-2.6 3-2.6 1.2 0 2.3.4 3.2 1.1l-1 1.5c-.8-.5-1.5-.8-2.2-.8-.7 0-1.1.3-1.1.7 0 .6.4.7 1.8 1.1 1.7.5 2.7 1.1 2.7 2.6 0 1.7-1.3 2.7-3.2 2.7-1.3 0-2.6-.5-3.5-1.4ZM4.7 18h8v1.3h-8V18Z" })
+    ] }));
+const SublimeTextIcon = ({ size }) => (jsx_runtime_1.jsxs("svg", { viewBox: "0 0 40 40", style: iconStyle(size), "aria-hidden": true, children: [
+        jsx_runtime_1.jsx("path", { fill: "#FF9800", d: "M35.91 4.51c0-.37-.36-.59-.8-.48L4.8 11.44c-.44.11-.8.5-.8.87v7.58c0 .37.36.59.8.48l30.31-7.41c.44-.11.8-.5.8-.87V4.51Zm0 15.57c0-.38-.36-.59-.8-.49L4.8 27.01c-.44.1-.8.5-.8.87v7.57c0 .38.36.6.8.49l30.31-7.41c.44-.11.8-.5.8-.88v-7.57Z" }), jsx_runtime_1.jsx("path", { fill: "#F28C00", d: "M4 19.84c0 .37.36.76.8.87l30.32 7.41c.44.11.8-.11.8-.48v-7.58c0-.37-.36-.76-.8-.87L4.8 11.78c-.44-.11-.8.11-.8.48v7.58Z" })
+    ] }));
+const EditorIcon = ({ editorId, size: sizeProp }) => {
+    const size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : 14;
+    switch (editorId) {
+        case 'vscode':
+            return jsx_runtime_1.jsx(VsCodeIcon, { size: size });
+        case 'cursor':
+            return jsx_runtime_1.jsx(CursorIcon, { size: size });
+        case 'windsurf':
+            return jsx_runtime_1.jsx(WindsurfIcon, { size: size });
+        case 'zed':
+            return jsx_runtime_1.jsx(ZedIcon, { size: size });
+        case 'vscodium':
+            return jsx_runtime_1.jsx(VscodiumIcon, { size: size });
+        case 'webstorm':
+            return jsx_runtime_1.jsx(WebStormIcon, { size: size });
+        case 'sublime-text':
+            return jsx_runtime_1.jsx(SublimeTextIcon, { size: size });
+        case 'custom':
+        case null:
+            return jsx_runtime_1.jsx(custom_editor_1.CustomEditorIcon, { size: size });
+        default:
+            return null;
+    }
+};
+exports.EditorIcon = EditorIcon;

package/dist/icons/effects.d.ts

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const EffectsIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/effects.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EffectsIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EffectsIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, viewBox: "0 0 16 16", children: jsx_runtime_1.jsx("path", { fill: color, d: "M4.405 4.48C4.575 3.82 4.865 3.325 5.275 2.995C5.695 2.665 6.25 2.5 6.94 2.5H9.235V4.06H7.045C6.555 4.06 6.235 4.3 6.085 4.78L5.83 5.68H7.975V7.255H5.395L3.805 13H2.02L3.625 7.255H1.96V5.68H4.075L4.405 4.48ZM8.57102 9.085L6.87602 5.68H8.79602L9.86102 7.99L11.991 5.68H14.331L10.686 9.415L12.426 13H10.491L9.35102 10.585L7.02602 13H4.68602L8.57102 9.085Z" }) }));
+};
+exports.EffectsIcon = EffectsIcon;

package/dist/icons/ellipsis.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EllipsisIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const EllipsisIcon = (props) => {
-    return (jsx_runtime_1.jsx("svg", { ...props.svgProps, viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: props.fill, d: "M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z" }) }));
+    return (jsx_runtime_1.jsx("svg", { ...props.svgProps, viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: props.fill, d: "M448 256a48 48 0 1 1-96 0 48 48 0 1 1 96 0zm-176 0a48 48 0 1 1-96 0 48 48 0 1 1 96 0zM48 304a48 48 0 1 1 0-96 48 48 0 1 1 0 96z" }) }));
 };
 exports.EllipsisIcon = EllipsisIcon;

package/dist/icons/external-link.d.ts

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const ExternalLinkIcon: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}>;

package/dist/icons/external-link.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExternalLinkIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Font Awesome Pro v7.3.1, Copyright 2026 Fonticons, Inc.
+// https://fontawesome.com/license (Commercial License)
+const ExternalLinkIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M304 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l153.4 0-260.7 260.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6 480 208c0 8.8 7.2 16 16 16s16-7.2 16-16l0-192c0-8.8-7.2-16-16-16L304 0zM80 96C35.8 96 0 131.8 0 176L0 432c0 44.2 35.8 80 80 80l256 0c44.2 0 80-35.8 80-80l0-96c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 96c0 26.5-21.5 48-48 48L80 480c-26.5 0-48-21.5-48-48l0-256c0-26.5 21.5-48 48-48l96 0c8.8 0 16-7.2 16-16s-7.2-16-16-16L80 96z" }) }));
+};
+exports.ExternalLinkIcon = ExternalLinkIcon;

package/dist/icons/fullscreen.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FullscreenIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FullscreenIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }));
+const FullscreenIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M136 32c13.3 0 24 10.7 24 24s-10.7 24-24 24l-88 0 0 88c0 13.3-10.7 24-24 24S0 181.3 0 168L0 56C0 42.7 10.7 32 24 32l112 0zM0 344c0-13.3 10.7-24 24-24s24 10.7 24 24l0 88 88 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L24 480c-13.3 0-24-10.7-24-24L0 344zM424 32c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-88-88 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0zM400 344c0-13.3 10.7-24 24-24s24 10.7 24 24l0 112c0 13.3-10.7 24-24 24l-112 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l88 0 0-88z" }) }));
 exports.FullscreenIcon = FullscreenIcon;

package/dist/icons/gear.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const GearIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const GearIcon: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/gear.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GearIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const GearIcon = (props) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M168 255.1c0-47.7 39.4-88 88-88s88 40.3 88 88c0 49.5-39.4 88.9-88 88.9s-88-39.4-88-88.9zm88-56c-30.9 0-56 26-56 56 0 31.8 25.1 56 56 56s56-24.2 56-56c0-30-25.1-56-56-56zM65.67 230.6l-40.33-36.8c-11.12-10.1-13.68-26.6-6.16-39.6l30.24-52.4c7.52-13.02 23.09-19.05 37.42-14.48l51.96 16.58c13.4-10.34 28.2-18.94 44-25.47l11.7-53.27C197.7 10.47 210.7 0 225.8 0h60.4c15.1 0 28.1 10.47 31.3 25.16l11.7 53.27c14.9 6.53 30.6 15.13 44 25.47l52-16.58c14.3-4.57 29.9 1.46 37.4 14.48l30.2 52.4c7.5 13 5 29.5-6.1 39.6l-40.4 36.8c1.1 8.3 1.7 16.8 1.7 24.5 0 9.5-.6 18-1.7 26.3l40.4 36.8c11.1 10.1 13.6 26.6 6.1 39.6l-30.2 52.4c-7.5 13-23.1 19-37.4 14.5l-52-16.6c-13.4 10.3-29.1 18.9-44 25.5l-11.7 53.2c-3.2 14.7-16.2 25.2-31.3 25.2h-60.4c-15.1 0-28.1-10.5-31.3-25.2l-11.7-53.2c-15.8-6.6-30.6-15.2-44-25.5l-51.96 16.6c-14.33 4.5-29.9-1.5-37.42-14.5l-30.24-52.4c-7.52-13-4.96-29.5 6.16-39.6l40.33-36.8c-1.1-8.3-1.67-16.8-1.67-26.3 0-7.7.57-16.2 1.67-24.5zm92.73-101.4-13.3 10.3-67.97-21.7-30.24 52.4 52.69 48-2.19 16.6c-.92 6.9-1.39 14-1.39 20.3 0 8.1.47 15.2 1.39 22.1l2.19 16.6-52.69 48 30.24 52.4 67.97-21.7 13.3 10.3c11.1 8.6 23.5 15.8 36.6 20.3l15.5 7.3 15.3 69.6h60.4l15.3-69.6 14.6-7.3c14-4.5 26.4-11.7 37.5-20.3l13.3-10.3 68 21.7 30.2-52.4-52.7-48 2.2-16.6c.9-6.9 1.4-14 1.4-21.2 0-7.2-.5-14.3-1.4-21.2l-2.2-16.6 52.7-48-30.2-52.4-68 21.7-13.3-10.3c-11.1-8.6-23.5-15.8-37.5-21.2l-14.6-6.4L286.2 32h-60.4l-15.3 69.6L195 108c-13.1 5.4-25.5 12.6-36.6 21.2z" }) }));
+const GearIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, d: "M168 255.1c0-47.7 39.4-88 88-88s88 40.3 88 88c0 49.5-39.4 88.9-88 88.9s-88-39.4-88-88.9zm88-56c-30.9 0-56 26-56 56 0 31.8 25.1 56 56 56s56-24.2 56-56c0-30-25.1-56-56-56zM65.67 230.6l-40.33-36.8c-11.12-10.1-13.68-26.6-6.16-39.6l30.24-52.4c7.52-13.02 23.09-19.05 37.42-14.48l51.96 16.58c13.4-10.34 28.2-18.94 44-25.47l11.7-53.27C197.7 10.47 210.7 0 225.8 0h60.4c15.1 0 28.1 10.47 31.3 25.16l11.7 53.27c14.9 6.53 30.6 15.13 44 25.47l52-16.58c14.3-4.57 29.9 1.46 37.4 14.48l30.2 52.4c7.5 13 5 29.5-6.1 39.6l-40.4 36.8c1.1 8.3 1.7 16.8 1.7 24.5 0 9.5-.6 18-1.7 26.3l40.4 36.8c11.1 10.1 13.6 26.6 6.1 39.6l-30.2 52.4c-7.5 13-23.1 19-37.4 14.5l-52-16.6c-13.4 10.3-29.1 18.9-44 25.5l-11.7 53.2c-3.2 14.7-16.2 25.2-31.3 25.2h-60.4c-15.1 0-28.1-10.5-31.3-25.2l-11.7-53.2c-15.8-6.6-30.6-15.2-44-25.5l-51.96 16.6c-14.33 4.5-29.9-1.5-37.42-14.5l-30.24-52.4c-7.52-13-4.96-29.5 6.16-39.6l40.33-36.8c-1.1-8.3-1.67-16.8-1.67-26.3 0-7.7.57-16.2 1.67-24.5zm92.73-101.4-13.3 10.3-67.97-21.7-30.24 52.4 52.69 48-2.19 16.6c-.92 6.9-1.39 14-1.39 20.3 0 8.1.47 15.2 1.39 22.1l2.19 16.6-52.69 48 30.24 52.4 67.97-21.7 13.3 10.3c11.1 8.6 23.5 15.8 36.6 20.3l15.5 7.3 15.3 69.6h60.4l15.3-69.6 14.6-7.3c14-4.5 26.4-11.7 37.5-20.3l13.3-10.3 68 21.7 30.2-52.4-52.7-48 2.2-16.6c.9-6.9 1.4-14 1.4-21.2 0-7.2-.5-14.3-1.4-21.2l-2.2-16.6 52.7-48-30.2-52.4-68 21.7-13.3-10.3c-11.1-8.6-23.5-15.8-37.5-21.2l-14.6-6.4L286.2 32h-60.4l-15.3 69.6L195 108c-13.1 5.4-25.5 12.6-36.6 21.2z" }) }));
 exports.GearIcon = GearIcon;

package/dist/icons/gif.d.ts

@@ -1,2 +1,2 @@
 import type { SVGProps } from 'react';
-export declare const GifIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const GifIcon: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/gif.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GifIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const GifIcon = (props) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M512 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h448c35.35 0 64-28.65 64-64V96c0-35.35-28.7-64-64-64zm32 384c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h448c17.64 0 32 14.36 32 32v320zm-80-256h-96c-8.8 0-16 7.2-16 16v160c0 8.844 7.156 16 16 16s16-7.156 16-16v-64h56c8.844 0 16-7.156 16-16s-7.156-16-16-16h-56v-48h80c8.8 0 16-7.2 16-16s-7.2-16-16-16zm-160 0c-8.8 0-16 7.2-16 16v160c0 8.844 7.156 16 16 16s16-7.156 16-16V176c0-8.8-7.2-16-16-16zm-64 80h-64c-8.8 0-16 7.2-16 16s7.156 16 16 16h48v33.45c-24.83 19.91-69.13 18.16-91.48-4.203-24.95-24.95-24.95-65.55 0-90.5 25.03-25 64.19-25 89.22 0 6.25 6.25 16.38 6.25 22.62 0s6.25-16.38 0-22.62c-37.69-37.72-96.78-37.72-134.5 0-37.42 37.42-37.42 98.33 0 135.8C127.8 341.8 153.5 352 180.6 352c27.06 0 52.84-10.25 70.7-28.12 3-2.98 4.7-7.08 4.7-11.28V256c0-8.8-7.2-16-16-16z" }) }));
+const GifIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color !== null && color !== void 0 ? color : colors_1.CURRENT_COLOR_LOWERCASE, d: "M512 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h448c35.35 0 64-28.65 64-64V96c0-35.35-28.7-64-64-64zm32 384c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V96c0-17.64 14.36-32 32-32h448c17.64 0 32 14.36 32 32v320zm-80-256h-96c-8.8 0-16 7.2-16 16v160c0 8.844 7.156 16 16 16s16-7.156 16-16v-64h56c8.844 0 16-7.156 16-16s-7.156-16-16-16h-56v-48h80c8.8 0 16-7.2 16-16s-7.2-16-16-16zm-160 0c-8.8 0-16 7.2-16 16v160c0 8.844 7.156 16 16 16s16-7.156 16-16V176c0-8.8-7.2-16-16-16zm-64 80h-64c-8.8 0-16 7.2-16 16s7.156 16 16 16h48v33.45c-24.83 19.91-69.13 18.16-91.48-4.203-24.95-24.95-24.95-65.55 0-90.5 25.03-25 64.19-25 89.22 0 6.25 6.25 16.38 6.25 22.62 0s6.25-16.38 0-22.62c-37.69-37.72-96.78-37.72-134.5 0-37.42 37.42-37.42 98.33 0 135.8C127.8 341.8 153.5 352 180.6 352c27.06 0 52.84-10.25 70.7-28.12 3-2.98 4.7-7.08 4.7-11.28V256c0-8.8-7.2-16-16-16z" }) }));
 exports.GifIcon = GifIcon;

package/dist/icons/input-props.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from 'react';
+export declare const InputPropsIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/input-props.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputPropsIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const InputPropsIcon = (props) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M144 32c-44.2 0-80 35.8-80 80v53.5c0 12.7-5.1 24.9-14.1 33.9L4.7 244.7C1.7 247.7 0 251.8 0 256s1.7 8.3 4.7 11.3L50 312.6c9 9 14.1 21.2 14.1 33.9V400c0 44.2 35.8 80 80 80h64c8.8 0 16-7.2 16-16s-7.2-16-16-16h-64c-26.5 0-48-21.5-48-48v-53.5c0-21.2-8.4-41.6-23.4-56.6L38.6 256l34-33.9c15-15 23.4-35.4 23.4-56.6V112c0-26.5 21.5-48 48-48h64c8.8 0 16-7.2 16-16s-7.2-16-16-16h-64zm288 0h-64c-8.8 0-16 7.2-16 16s7.2 16 16 16h64c26.5 0 48 21.5 48 48v53.5c0 21.2 8.4 41.6 23.4 56.6l33.9 33.9-33.9 33.9c-15 15-23.4 35.4-23.4 56.6V400c0 26.5-21.5 48-48 48h-64c-8.8 0-16 7.2-16 16s7.2 16 16 16h64c44.2 0 80-35.8 80-80v-53.5c0-12.7 5.1-24.9 14.1-33.9l45.3-45.3c3-3 4.7-7.1 4.7-11.3s-1.7-8.3-4.7-11.3l-45.3-45.3c-9-9-14.1-21.2-14.1-33.9V112c0-44.2-35.8-80-80-80z" }) }));
+};
+exports.InputPropsIcon = InputPropsIcon;

package/dist/icons/jump-to-start.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.JumpToStart = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const JumpToStart = (props) => {
-    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M0 415.1V96.03c0-17.67 14.33-31.1 31.1-31.1C49.67 64.03 64 78.36 64 96.03v131.8l171.5-156.5C256.1 54.28 288 68.66 288 96.03v131.9l171.5-156.5C480.1 54.28 512 68.66 512 96.03v319.9c0 27.37-31.88 41.74-52.5 24.62L288 285.2v130.7c0 27.37-31.88 41.74-52.5 24.62L64 285.2v130.7c0 17.67-14.33 31.1-31.1 31.1C14.33 447.1 0 433.6 0 415.1z" }) }));
+const JumpToStart = ({ color = colors_1.CURRENT_COLOR, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M0 415.1V96.03c0-17.67 14.33-31.1 31.1-31.1C49.67 64.03 64 78.36 64 96.03v131.8l171.5-156.5C256.1 54.28 288 68.66 288 96.03v131.9l171.5-156.5C480.1 54.28 512 68.66 512 96.03v319.9c0 27.37-31.88 41.74-52.5 24.62L288 285.2v130.7c0 27.37-31.88 41.74-52.5 24.62L64 285.2v130.7c0 17.67-14.33 31.1-31.1 31.1C14.33 447.1 0 433.6 0 415.1z" }) }));
 };
 exports.JumpToStart = JumpToStart;

package/dist/icons/magnet.d.ts

@@ -1,3 +1,5 @@
 import type { SVGProps } from 'react';
 import React from 'react';
-export declare const MagnetIcon: React.FC<SVGProps<SVGSVGElement>>;
+export declare const MagnetIcon: React.FC<Omit<SVGProps<SVGSVGElement>, 'color'> & {
+    readonly color: string;
+}>;

package/dist/icons/magnet.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MagnetIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const MagnetIcon = (props) => {
-    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { transform: "rotate(180 256 256)", d: "M32 176v112c0 123.7 100.3 224 224 224s224-100.3 224-224V176H352v112c0 53-43 96-96 96s-96-43-96-96V176H32zm0-48h128V32c0-17.7-14.3-32-32-32H64C46.3 0 32 14.3 32 32v96zm320 0h128V32c0-17.7-14.3-32-32-32h-64c-17.7 0-32 14.3-32 32v96z" }) }));
+const MagnetIcon = ({ color, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, transform: "rotate(180 224 256)", d: "M48 64c-8.8 0-16 7.2-16 16l0 80 80 0 0-80c0-8.8-7.2-16-16-16L48 64zM32 288c0 106 86 192 192 192s192-86 192-192l0-96-80 0 0 96c0 61.9-50.1 112-112 112S112 349.9 112 288l0-96-80 0 0 96zM416 160l0-80c0-8.8-7.2-16-16-16l-48 0c-8.8 0-16 7.2-16 16l0 80 80 0zM0 80C0 53.5 21.5 32 48 32l48 0c26.5 0 48 21.5 48 48l0 208c0 44.2 35.8 80 80 80s80-35.8 80-80l0-208c0-26.5 21.5-48 48-48l48 0c26.5 0 48 21.5 48 48l0 208c0 123.7-100.3 224-224 224S0 411.7 0 288L0 80z" }) }));
 };
 exports.MagnetIcon = MagnetIcon;

package/dist/icons/media-volume.d.ts

@@ -1,2 +1,6 @@
-export declare const VolumeOffIcon: React.FC;
-export declare const VolumeOnIcon: React.FC;
+export declare const VolumeOffIcon: React.FC<{
+    readonly color: string;
+}>;
+export declare const VolumeOnIcon: React.FC<{
+    readonly color: string;
+}>;

package/dist/icons/media-volume.js

@@ -2,13 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VolumeOnIcon = exports.VolumeOffIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const colors_1 = require("../helpers/colors");
-const size = 22;
-const VolumeOffIcon = () => {
-    return (jsx_runtime_1.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", children: jsx_runtime_1.jsx("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: colors_1.BLUE }) }));
+const size = 21;
+const speakerPath = 'M112 320H48c-8.8 0-16-7.2-16-16v-96c0-8.8 7.2-16 16-16h64c8.5 0 16.6-3.4 22.6-9.4L252.7 64.6c.4-.4.9-.6 1.4-.6 1.1 0 1.9.9 1.9 1.9V446c0 1.1-.9 1.9-1.9 1.9-.5 0-1-.2-1.4-.6L134.6 329.4c-6-6-14.1-9.4-22.6-9.4zm0-160H48c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48h64l118.1 118.1c6.4 6.4 15 9.9 24 9.9 18.7 0 33.9-15.2 33.9-33.9V65.9C288 47.2 272.8 32 254.1 32c-9 0-17.6 3.6-24 9.9L112 160zm243.2 22.4c-5.3 7.1-3.9 17.1 3.2 22.4 15.6 11.7 25.6 30.3 25.6 51.2s-10 39.5-25.6 51.2c-7.1 5.3-8.5 15.3-3.2 22.4s15.3 8.5 22.4 3.2C400.9 315.3 416 287.4 416 256s-15.1-59.3-38.4-76.8c-7.1-5.3-17.1-3.9-22.4 3.2zm87-74.5c-6.8-5.6-16.9-4.7-22.5 2.1s-4.7 16.9 2.1 22.5C457.4 161.9 480 206.3 480 256s-22.6 94.1-58.2 123.4c-6.8 5.6-7.8 15.7-2.1 22.5s15.7 7.8 22.5 2.2C484.8 368.9 512 315.6 512 256s-27.2-112.9-69.8-148.1z';
+const VolumeOffIcon = ({ color }) => {
+    return (jsx_runtime_1.jsxs("svg", { width: size, height: size, viewBox: "0 0 576 512", children: [
+            jsx_runtime_1.jsx("g", { transform: "translate(32 0)", children: jsx_runtime_1.jsx("path", { d: speakerPath, fill: color }) }), jsx_runtime_1.jsx("path", { d: "M16-16 560 528", fill: "none", stroke: color, strokeLinecap: "round", strokeWidth: "32" })
+        ] }));
 };
 exports.VolumeOffIcon = VolumeOffIcon;
-const VolumeOnIcon = () => {
-    return (jsx_runtime_1.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", children: jsx_runtime_1.jsx("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: colors_1.WHITE_HEX }) }));
+const VolumeOnIcon = ({ color }) => {
+    return (jsx_runtime_1.jsx("svg", { width: size, height: size, viewBox: "0 0 576 512", children: jsx_runtime_1.jsx("g", { transform: "translate(32 0)", children: jsx_runtime_1.jsx("path", { d: speakerPath, fill: color }) }) }));
 };
 exports.VolumeOnIcon = VolumeOnIcon;

package/dist/icons/minus.d.ts

@@ -1,3 +1,5 @@
 import type { SVGProps } from 'react';
 import React from 'react';
-export declare const Minus: React.FC<SVGProps<SVGSVGElement>>;
+export declare const Minus: React.FC<SVGProps<SVGSVGElement> & {
+    readonly color?: string;
+}>;

package/dist/icons/minus.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Minus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const Minus = (props) => {
-    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z" }) }));
+const Minus = ({ color = colors_1.CURRENT_COLOR, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M0 256c0-8.8 7.2-16 16-16l416 0c8.8 0 16 7.2 16 16s-7.2 16-16 16L16 272c-8.8 0-16-7.2-16-16z" }) }));
 };
 exports.Minus = Minus;

package/dist/icons/pause.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pause = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const Pause = (props) => (jsx_runtime_1.jsx("svg", { ...props, "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "pause", className: "svg-inline--fa fa-pause fa-w-14", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" }) }));
+const Pause = ({ color = colors_1.CURRENT_COLOR, ...props }) => (jsx_runtime_1.jsx("svg", { ...props, "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "pause", className: "svg-inline--fa fa-pause fa-w-14", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" }) }));
 exports.Pause = Pause;

package/dist/icons/play.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Play = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const Play = (props) => (jsx_runtime_1.jsx("svg", { ...props, "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "play", className: "svg-inline--fa fa-play fa-w-14", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" }) }));
+const Play = ({ color = colors_1.CURRENT_COLOR, ...props }) => (jsx_runtime_1.jsx("svg", { ...props, "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "play", className: "svg-inline--fa fa-play fa-w-14", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" }) }));
 exports.Play = Play;

package/dist/icons/plus.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Plus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Plus = ({ color, ...props }) => {
-    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z" }) }));
+    return (jsx_runtime_1.jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M240 48c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 192-192 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l192 0 0 192c0 8.8 7.2 16 16 16s16-7.2 16-16l0-192 192 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-192 0 0-192z" }) }));
 };
 exports.Plus = Plus;

package/dist/icons/redo.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RedoIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const RedoIcon = (props) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M552 256L408 256C398.3 256 389.5 250.2 385.8 241.2C382.1 232.2 384.1 221.9 391 215L437.7 168.3C362.4 109.7 253.4 115 184.2 184.2C109.2 259.2 109.2 380.7 184.2 455.7C259.2 530.7 380.7 530.7 455.7 455.7C463.9 447.5 471.2 438.8 477.6 429.6C487.7 415.1 507.7 411.6 522.2 421.7C536.7 431.8 540.2 451.8 530.1 466.3C521.6 478.5 511.9 490.1 501 501C401 601 238.9 601 139 501C39.1 401 39 239 139 139C233.3 44.7 382.7 39.4 483.3 122.8L535 71C541.9 64.1 552.2 62.1 561.2 65.8C570.2 69.5 576 78.3 576 88L576 232C576 245.3 565.3 256 552 256z" }) }));
+const RedoIcon = ({ color = colors_1.CURRENT_COLOR, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M496 0c-8.8 0-16 7.2-16 16l0 103.8-37-39.1C394.4 29.2 326.8 0 256 0 114.6 0 0 114.6 0 256S114.6 512 256 512c98.3 0 183.6-55.4 226.5-136.5 4.1-7.8 1.1-17.5-6.7-21.6s-17.5-1.1-21.6 6.7C416.6 431.6 341.9 480 256 480 132.3 480 32 379.7 32 256S132.3 32 256 32c62 0 121.2 25.5 163.8 70.6L458.9 144 352 144c-8.8 0-16 7.2-16 16s7.2 16 16 16l144 0c8.8 0 16-7.2 16-16l0-144c0-8.8-7.2-16-16-16z" }) }));
 };
 exports.RedoIcon = RedoIcon;

package/dist/icons/step-back.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepBack = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const StepBack = (props) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z" }) }));
+const StepBack = ({ color = colors_1.CURRENT_COLOR, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z" }) }));
 };
 exports.StepBack = StepBack;

package/dist/icons/step-forward.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepForward = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const StepForward = (props) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z" }) }));
+const StepForward = ({ color = colors_1.CURRENT_COLOR, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z" }) }));
 };
 exports.StepForward = StepForward;

package/dist/icons/timelineInOutPointer.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineOutPointer = exports.TimelineInPointer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TimelineInPointer = (props) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 256 256", fill: "none", ...props, children: jsx_runtime_1.jsx("path", { d: "M158 25H99V230.5H158", stroke: props.color, strokeWidth: "42", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 192 512", ...props, children: jsx_runtime_1.jsx("path", { d: "M0 88C0 57.1 25.1 32 56 32h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H56c-4.4 0-8 3.6-8 8v336c0 4.4 3.6 8 8 8h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H56c-30.9 0-56-25.1-56-56V88z", fill: props.color }) }));
 };
 exports.TimelineInPointer = TimelineInPointer;
 const TimelineOutPointer = (props) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 256 256", fill: "none", ...props, children: jsx_runtime_1.jsx("path", { d: "M98 25H157V230.5H98", stroke: props.color, strokeWidth: "42", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 192 512", ...props, children: jsx_runtime_1.jsx("path", { d: "M192 88c0-30.9-25.1-56-56-56H72C58.7 32 48 42.7 48 56s10.7 24 24 24h64c4.4 0 8 3.6 8 8v336c0 4.4-3.6 8-8 8H72c-13.3 0-24 10.7-24 24s10.7 24 24 24h64c30.9 0 56-25.1 56-56V88z", fill: props.color }) }));
 };
 exports.TimelineOutPointer = TimelineOutPointer;

package/dist/icons/undo.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UndoIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
-const UndoIcon = (props) => {
-    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 640 640", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M88 256L232 256C241.7 256 250.5 250.2 254.2 241.2C257.9 232.2 255.9 221.9 249 215L202.3 168.3C277.6 109.7 386.6 115 455.8 184.2C530.8 259.2 530.8 380.7 455.8 455.7C380.8 530.7 259.3 530.7 184.3 455.7C174.1 445.5 165.3 434.4 157.9 422.7C148.4 407.8 128.6 403.4 113.7 412.9C98.8 422.4 94.4 442.2 103.9 457.1C113.7 472.7 125.4 487.5 139 501C239 601 401 601 501 501C601 401 601 239 501 139C406.8 44.7 257.3 39.3 156.7 122.8L105 71C98.1 64.2 87.8 62.1 78.8 65.8C69.8 69.5 64 78.3 64 88L64 232C64 245.3 74.7 256 88 256z" }) }));
+const UndoIcon = ({ color = colors_1.CURRENT_COLOR, ...props }) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M16 0c8.8 0 16 7.2 16 16l0 103.8 37-39.1C117.6 29.2 185.2 0 256 0 397.4 0 512 114.6 512 256S397.4 512 256 512c-98.3 0-183.6-55.4-226.5-136.5-4.1-7.8-1.1-17.5 6.7-21.6s17.5-1.1 21.6 6.7C95.4 431.6 170.1 480 256 480 379.7 480 480 379.7 480 256S379.7 32 256 32c-62 0-121.2 25.5-163.8 70.6L53.1 144 160 144c8.8 0 16 7.2 16 16s-7.2 16-16 16L16 176c-8.8 0-16-7.2-16-16L0 16C0 7.2 7.2 0 16 0z" }) }));
 };
 exports.UndoIcon = UndoIcon;

package/dist/state/editor-guides.d.ts

@@ -11,6 +11,7 @@ export type GuideState = {
     guidesList: Guide[];
     setGuidesList: (cb: (prevState: Guide[]) => Guide[]) => void;
     draggingGuideId: string | null;
+    moveGuidePointerRef: React.RefObject<((event: PointerEvent) => void) | null>;
     setDraggingGuideId: (cb: (prevState: string | null) => string | null) => void;
     setHoveredGuideId: (cb: (prevState: string | null) => string | null) => void;
     hoveredGuideId: string | null;

package/dist/state/editor-guides.js

@@ -26,6 +26,7 @@ exports.EditorShowGuidesContext = (0, react_1.createContext)({
     guidesList: [],
     setGuidesList: () => undefined,
     draggingGuideId: null,
+    moveGuidePointerRef: { current: null },
     setDraggingGuideId: () => undefined,
     shouldCreateGuideRef: { current: false },
     shouldDeleteGuideRef: { current: false },

package/dist/state/modals.d.ts

@@ -146,6 +146,8 @@ export type ModalState = {
 } | {
     type: 'configure-license';
     initialPublicLicenseKey: string | null;
+} | {
+    type: 'configure-default-editor';
 } | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
     jobId: string;

package/dist/state/z-index.d.ts

@@ -5,6 +5,7 @@ export declare const HigherZIndex: React.FC<{
     readonly children: React.ReactNode;
     readonly disabled?: boolean;
     readonly outsideClickButton?: 'any' | 'primary';
+    readonly stackOnHighest?: boolean;
 }>;
 export declare const useZIndex: () => {
     currentZIndex: number;

package/dist/state/z-index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useZIndex = exports.HigherZIndex = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const pointer_session_1 = require("../helpers/pointer-session");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const highest_z_index_1 = require("./highest-z-index");
 const input_dragger_click_lock_1 = require("./input-dragger-click-lock");
@@ -31,13 +32,22 @@ const EscapeHook = ({ onEscape }) => {
     }, [keybindings, onEscape]);
     return null;
 };
-const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideClickButton = 'any', }) => {
+const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideClickButton = 'any', stackOnHighest = false, }) => {
+    var _a;
     const context = (0, react_1.useContext)(ZIndexContext);
     const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
     const containerRef = (0, react_1.useRef)(null);
+    const stackedIndex = (0, react_1.useRef)(null);
+    if (disabled || !stackOnHighest) {
+        stackedIndex.current = null;
+    }
+    else if (stackedIndex.current === null) {
+        stackedIndex.current =
+            Math.max(context.currentIndex, highestContext.highestIndex) + 1;
+    }
     const currentIndex = disabled
         ? context.currentIndex
-        : context.currentIndex + 1;
+        : ((_a = stackedIndex.current) !== null && _a !== void 0 ? _a : context.currentIndex + 1);
     (0, react_1.useEffect)(() => {
         if (disabled) {
             return;
@@ -49,7 +59,7 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideCli
         if (disabled) {
             return;
         }
-        let onUp = null;
+        let endPointerSession = null;
         const listener = (downEvent) => {
             var _a;
             if (outsideClickButton === 'primary' && downEvent.button !== 0) {
@@ -59,16 +69,25 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideCli
             if (!outsideClick) {
                 return;
             }
-            onUp = (upEvent) => {
-                if (highestContext.highestIndex === currentIndex &&
-                    !(0, input_dragger_click_lock_1.getClickLock)() &&
-                    // Don't trigger if that click removed that node
-                    document.contains(upEvent.target)) {
-                    upEvent.stopPropagation();
-                    onOutsideClick(upEvent.target);
-                }
-            };
-            window.addEventListener('pointerup', onUp, { once: true });
+            endPointerSession === null || endPointerSession === void 0 ? void 0 : endPointerSession();
+            endPointerSession = (0, pointer_session_1.startPointerSession)({
+                event: downEvent,
+                target: downEvent.target,
+                onEnd: (reason, upEvent) => {
+                    var _a;
+                    endPointerSession = null;
+                    if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                        upEvent &&
+                        highestContext.highestIndex === currentIndex &&
+                        !(0, input_dragger_click_lock_1.getClickLock)()) {
+                        const target = (_a = document.elementFromPoint(upEvent.clientX, upEvent.clientY)) !== null && _a !== void 0 ? _a : upEvent.target;
+                        if (document.contains(target)) {
+                            upEvent.stopPropagation();
+                            onOutsideClick(target);
+                        }
+                    }
+                },
+            });
         };
         // If a menu is opened, then this component will also still receive the pointerdown event.
         // However we may not interpret it as a outside click, so we need to wait for the next tick
@@ -79,11 +98,8 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideCli
             window.addEventListener('pointerdown', listener, true);
         });
         return () => {
-            if (onUp) {
-                // @ts-expect-error
-                window.removeEventListener('pointerup', onUp, { once: true });
-            }
-            onUp = null;
+            endPointerSession === null || endPointerSession === void 0 ? void 0 : endPointerSession();
+            endPointerSession = null;
             return window.removeEventListener('pointerdown', listener, true);
         };
     }, [