npm - @remotion/studio - Versions diffs - 4.0.528 → 4.0.529 - Mend

@remotion/studio 4.0.528 → 4.0.529

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (185) hide show

package/dist/components/InspectorSourceLocation.js CHANGED Viewed

@@ -90,9 +90,9 @@ const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon, size =
         return null;
     }
     if (size === 'quick-action') {
-        return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), style: quickActionStyle, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
+        return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canOpen, onClick: onClick, renderIcon: (iconColor) => renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon(iconColor), style: quickActionStyle, "aria-label": fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, children: label }));
     }
-    return (jsx_runtime_1.jsxs("button", { type: "button", style: style, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [renderIcon ? renderIcon(color) : null, jsx_runtime_1.jsx("span", { style: sourceLocationLabelStyle, children: label })
+    return (jsx_runtime_1.jsxs("button", { type: "button", style: style, "aria-label": fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [renderIcon ? renderIcon(color) : null, jsx_runtime_1.jsx("span", { style: sourceLocationLabelStyle, children: label })
         ] }));
 };
 exports.InspectorSourceLocation = InspectorSourceLocation;

package/dist/components/KeyboardShortcutsSettings.js CHANGED Viewed

@@ -354,7 +354,7 @@ const KeyboardShortcutsSettings = () => {
                                                         });
                                                         setShortcutsEdited(true);
                                                         setRecording(null);
-                                                    }, children: recording === shortcut.actionId ? (jsx_runtime_1.jsx("span", { style: emptyShortcut, children: "Press shortcut\u2026" })) : (jsx_runtime_1.jsx(ShortcutChords, { values: shortcutValues })) }) }), jsx_runtime_1.jsx("span", { style: actionCell, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: (color) => jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }), title: `Actions for ${shortcut.action}`, values: shortcutMenuItems, variant: "compact" }) })
+                                                    }, children: recording === shortcut.actionId ? (jsx_runtime_1.jsx("span", { style: emptyShortcut, children: "Press shortcut\u2026" })) : (jsx_runtime_1.jsx(ShortcutChords, { values: shortcutValues })) }) }), jsx_runtime_1.jsx("span", { style: actionCell, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: (color) => jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }), "aria-label": `Actions for ${shortcut.action}`, values: shortcutMenuItems, variant: "compact" }) })
                                         ] }))] }, shortcut.action));
                         }) })
                 ] }, group.name))), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/LicenseKeyValidation.js CHANGED Viewed

@@ -102,9 +102,9 @@ const LicenseKeyDetailsDisplay = ({ details }) => {
     const projectUrl = `${PRO_HOST}/projects/${details.projectSlug}`;
     const usageUrl = `${projectUrl}/usage#client-renders-usage`;
     const hasActiveLicense = (0, exports.hasActiveCompanyLicense)(details);
-    return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: () => window.open(usageUrl, '_blank', 'noopener,noreferrer'), renderIcon: (color) => (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { style: { ...iconStyle, fill: color } })), style: actionStyle, title: "View license usage", children: jsx_runtime_1.jsxs("span", { style: actionContent, children: [
+    return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: () => window.open(usageUrl, '_blank', 'noopener,noreferrer'), renderIcon: (color) => (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { style: { ...iconStyle, fill: color } })), style: actionStyle, "aria-label": "View license usage", children: jsx_runtime_1.jsxs("span", { style: actionContent, children: [
                         jsx_runtime_1.jsxs("span", { style: actionText, children: ["Belongs to ", details.projectName] }), jsx_runtime_1.jsx("span", { style: actionLabel, children: "View usage" })
-                    ] }) }), jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: () => window.open(projectUrl, '_blank', 'noopener,noreferrer'), renderIcon: (color) => hasActiveLicense ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { style: { ...iconStyle, fill: color } })) : (jsx_runtime_1.jsx(ErrorIcon, {})), style: actionStyle, title: "Manage Company License", children: jsx_runtime_1.jsxs("span", { style: actionContent, children: [
+                    ] }) }), jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: () => window.open(projectUrl, '_blank', 'noopener,noreferrer'), renderIcon: (color) => hasActiveLicense ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { style: { ...iconStyle, fill: color } })) : (jsx_runtime_1.jsx(ErrorIcon, {})), style: actionStyle, "aria-label": "Manage Company License", children: jsx_runtime_1.jsxs("span", { style: actionContent, children: [
                         jsx_runtime_1.jsx("span", { style: hasActiveLicense ? actionText : inactiveLicenseText, children: hasActiveLicense
                                 ? 'Active Company License'
                                 : 'No active Company License' }), jsx_runtime_1.jsx("span", { style: actionLabel, children: "Manage" })

package/dist/components/LoopToggle.js CHANGED Viewed

@@ -25,6 +25,6 @@ const LoopToggle = ({ loop, setLoop }) => {
     const onClick = (0, react_1.useCallback)(() => {
         (0, exports.toggleLoop)(setLoop);
     }, [setLoop]);
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": loop, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": loop, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }) }));
 };
 exports.LoopToggle = LoopToggle;

package/dist/components/Menu/MenuSubItem.js CHANGED Viewed

@@ -124,9 +124,11 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
             });
         }
     }, [selected]);
-    return (jsx_runtime_1.jsx("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onPointerUp: onPointerUp, role: "button", className: is_menu_item_1.MENU_ITEM_CLASSNAME, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [leaveLeftSpace ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsx("div", { ref: ref, "aria-label": typeof label === 'string' ? label : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onPointerUp: onPointerUp, role: "button", className: is_menu_item_1.MENU_ITEM_CLASSNAME, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [leaveLeftSpace ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx("div", { style: leftSpace, children: leftItem }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 })
-                    ] })) : null, jsx_runtime_1.jsx("div", { style: labelStyle, title: typeof label === 'string' ? label : undefined, children: label }), ' ', jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), subMenu ? jsx_runtime_1.jsx(caret_1.CaretRight, {}) : null, keyHint && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsx("span", { style: keyHintCss, children: keyHint })) : null, portalStyle && subMenu
+                    ] })) : null, jsx_runtime_1.jsx("div", { style: labelStyle, children: label }),
+                " ",
+                jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), subMenu ? jsx_runtime_1.jsx(caret_1.CaretRight, {}) : null, keyHint && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsx("span", { style: keyHintCss, children: keyHint })) : null, portalStyle && subMenu
                     ? react_dom_1.default.createPortal(jsx_runtime_1.jsx(SubMenu_1.SubMenuComponent, { onQuitFullMenu: onQuitMenu, subMenu: subMenu, onQuitSubMenu: onQuitSubmenu, portalStyle: portalStyle, subMenuActivated: subMenuActivated }), (0, portals_1.getPortal)(currentZIndex))
                     : null] }) }));
 };

package/dist/components/MenuBuildIndicator.js CHANGED Viewed

@@ -53,7 +53,7 @@ const MenuBuildIndicator = ({ mobileLayout }) => {
             window.remotion_finishedBuilding = undefined;
         };
     }, []);
-    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [
+    return (jsx_runtime_1.jsxs("div", { role: "group", style: cwd, "aria-label": window.remotion_cwd, children: [
             jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: openInEditor, children: jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation, locationType: "folder", showTooltips: true }) }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })
                 ] })) : null) : isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner }))] }));

package/dist/components/MenuCompositionName.js CHANGED Viewed

@@ -90,6 +90,6 @@ const MenuCompositionName = () => {
     }
     const name = (_b = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _b !== void 0 ? _b : asset;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), composition ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, style: contextMenuStyle, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { "aria-label": "Open composition menu", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, getItems: getContextMenuItems, hoveredColor: colors_1.WHITE, renderAction: () => composition.id, style: compositionNameStyle, title: "Open composition menu", unhoveredColor: colors_1.WHITE_ALPHA_80, variant: null }) })) : (jsx_runtime_1.jsx("span", { style: assetNameStyle, children: name }))] }));
+            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), composition ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, style: contextMenuStyle, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { "aria-label": "Open composition menu", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, getItems: getContextMenuItems, hoveredColor: colors_1.WHITE, renderAction: () => composition.id, style: compositionNameStyle, unhoveredColor: colors_1.WHITE_ALPHA_80, variant: null }) })) : (jsx_runtime_1.jsx("span", { style: assetNameStyle, children: name }))] }));
 };
 exports.MenuCompositionName = MenuCompositionName;

package/dist/components/ModelManager.js CHANGED Viewed

@@ -194,7 +194,7 @@ const ModelManager = ({ ariaLabel, availableModels, description, indent, isModel
                                 ? actionState.message
                                 : (0, studio_shared_1.formatBytes)(model.webGpuDownloadSize);
                         return (jsx_runtime_1.jsxs("div", { role: "listitem", style: modelRow, children: [
-                                jsx_runtime_1.jsx(models_1.ModelsIcon, { "aria-hidden": true, color: colors_1.LIGHT_TEXT, style: modelIcon }), jsx_runtime_1.jsx("span", { style: modelName, children: model.name }), jsx_runtime_1.jsx("span", { style: status, title: modelStatus, children: modelStatus }), cached ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisModel ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : cached ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Uninstall", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Remove ${model.name}`, title: "", disabled: actionInProgress, onClick: () => remove(model.name), renderAction: renderRemoveIcon, variant: null }) })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Install", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Download ${model.name}`, title: "", disabled: cachedModels === null || actionInProgress, onClick: () => downloadModel(model.name), renderAction: renderDownloadIcon, variant: null }) }))] }, model.name));
+                                jsx_runtime_1.jsx(models_1.ModelsIcon, { "aria-hidden": true, color: colors_1.LIGHT_TEXT, style: modelIcon }), jsx_runtime_1.jsx("span", { style: modelName, children: model.name }), jsx_runtime_1.jsx("span", { role: "group", style: status, "aria-label": modelStatus, children: modelStatus }), cached ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisModel ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : cached ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Uninstall", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Remove ${model.name}`, disabled: actionInProgress, onClick: () => remove(model.name), renderAction: renderRemoveIcon, variant: null }) })) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Install", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": `Download ${model.name}`, disabled: cachedModels === null || actionInProgress, onClick: () => downloadModel(model.name), renderAction: renderDownloadIcon, variant: null }) }))] }, model.name));
                     }) })
             ] }) }));
 };

package/dist/components/MuteToggle.js CHANGED Viewed

@@ -26,6 +26,6 @@ const MuteToggle = ({ muted, setMuted }) => {
         (0, exports.toggleMute)(setMuted);
     }, [setMuted]);
     const accessibilityLabel = muted ? 'Unmute video' : 'Mute video';
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Mute", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, onClick: onClick, style: buttonStyle, children: (color) => muted ? (jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE })) : (jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color })) }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Mute", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, onClick: onClick, style: buttonStyle, children: (color) => muted ? (jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE })) : (jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color })) }) }));
 };
 exports.MuteToggle = MuteToggle;

package/dist/components/NewComposition/ComboBox.d.ts CHANGED Viewed

@@ -31,7 +31,7 @@ export declare const Combobox: React.FC<{
     readonly values: ComboboxValue[];
     readonly selectedId: string | number;
     readonly style?: React.CSSProperties;
-    readonly title: string;
+    readonly 'aria-label': string;
     readonly size?: ComboboxSize;
     readonly unhoveredIconColor?: string;
 }>;

package/dist/components/NewComposition/ComboBox.js CHANGED Viewed

@@ -61,7 +61,7 @@ const smallLabel = {
     fontSize: 11,
     lineHeight: '12px',
 };
-const Combobox = ({ values, selectedId, style: customStyle, title, size: controlSize = 'default', unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
+const Combobox = ({ values, selectedId, style: customStyle, 'aria-label': ariaLabel, size: controlSize = 'default', unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
@@ -206,7 +206,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title, size: control
             ? compactLabel
             : label;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: selectedLabelStyle, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'default' ? 1 : 0.5 }), ' ', jsx_runtime_1.jsx(caret_1.CaretDown, { color: hovered || opened ? colors_1.WHITE : unhoveredIconColor, small: controlSize === 'small' })
+            jsx_runtime_1.jsxs("button", { ref: ref, "aria-label": ariaLabel, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { role: "group", "aria-label": typeof selected.label === 'string' ? selected.label : undefined, style: selectedLabelStyle, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'default' ? 1 : 0.5 }), ' ', jsx_runtime_1.jsx(caret_1.CaretDown, { color: hovered || opened ? colors_1.WHITE : unhoveredIconColor, small: controlSize === 'small' })
                 ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: onOverlayPointerDown, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));

package/dist/components/NewComposition/DuplicateComposition.js CHANGED Viewed

@@ -183,7 +183,7 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
                             // We allow converting from a composition to a still, but
                             // not the other way around
                             jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Type" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Type" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { "aria-label": "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })
                                 ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
                                                 jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/NewComposition/InputDragger.d.ts CHANGED Viewed

@@ -55,7 +55,7 @@ export declare const deriveInputDraggerValueDiff: ({ dragSensitivity, step, xDis
     readonly step: number;
     readonly xDistance: number;
 }) => number;
-export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+export declare const InputDragger: React.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "title"> & {
     readonly onValueChange: (newVal: number, source: "drag" | "input") => void;
     readonly onValueChangeEnd?: ((newVal: number, source: "drag" | "input") => void) | undefined;
     readonly onTextChange: (newVal: string) => void;

package/dist/components/NewComposition/InputDragger.js CHANGED Viewed

@@ -548,7 +548,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                     }
                     : inputStyle, type: "text" }) }));
     }
-    return (jsx_runtime_1.jsxs("button", { ref: ref, type: "button", "aria-label": props['aria-label'], title: props.title, className: '__remotion_input_dragger', style: buttonStyle
+    return (jsx_runtime_1.jsxs("button", { ref: ref, type: "button", "aria-label": props['aria-label'], className: '__remotion_input_dragger', style: buttonStyle
             ? {
                 ...(small
                     ? compactInputDraggerContainerStyle

package/dist/components/NewComposition/NewComposition.js CHANGED Viewed

@@ -206,7 +206,7 @@ const NewCompositionFields = ({ compositionId, heightValidationMessage, inputRef
     }, [setValues]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: folderValues, selectedId: selectedFolderId, style: folderSelectStyle, title: "Folder" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: folderValues, selectedId: selectedFolderId, style: folderSelectStyle, "aria-label": "Folder" }) })
                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
                                 jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: values.id, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), jsx_runtime_1.jsx(SlugPreview_1.SlugPreview, { action: "create", currentName: null, input: values.id, slug: compositionId }), nameValidationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/OpenIssueButton.js CHANGED Viewed

@@ -32,6 +32,6 @@ const OpenIssueButton = ({ link }) => {
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
-    return (jsx_runtime_1.jsx("button", { title: buttonTooltip, type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: handleClick, children: openInEditorSvg }));
+    return (jsx_runtime_1.jsx("button", { "aria-label": buttonTooltip, type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: handleClick, children: openInEditorSvg }));
 };
 exports.OpenIssueButton = OpenIssueButton;

package/dist/components/OutlineToggle.js CHANGED Viewed

@@ -21,7 +21,7 @@ const OutlineToggle = () => {
     const accessibilityLabel = editorShowOutlines
         ? 'Hide outlines'
         : 'Show outlines';
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Outlines", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": editorShowOutlines, onClick: onClick, style: buttonStyle, children: (color) => {
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Outlines", shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": editorShowOutlines, onClick: onClick, style: buttonStyle, children: (color) => {
                 const iconColor = editorShowOutlines ? colors_1.BLUE : color;
                 return (jsx_runtime_1.jsxs("svg", { style: { width: 17, height: 17 }, viewBox: "0 0 512 512", fill: "none", "aria-hidden": "true", focusable: "false", children: [
                         jsx_runtime_1.jsx("path", { d: "M64 64H448V448H64V64Z", stroke: iconColor, strokeWidth: "36" }), [

package/dist/components/PlayPause.js CHANGED Viewed

@@ -235,6 +235,6 @@ const PlayPauseInner = ({ playbackRate, loop, bufferStateDelayInMilliseconds, mu
         };
     }, [bufferStateDelayInMilliseconds, emitter]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(PlaybackManager, { loop: loop, playbackRate: playbackRate, muted: muted, inFrame: inFrame, outFrame: outFrame, getCurrentFrame: getCurrentFrame }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Go to beginning", shortcut: jumpToBeginningShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go to beginning", "aria-keyshortcuts": jumpToBeginningAriaShortcut || undefined, title: "", disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Previous frame", shortcut: "\u2190", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go back 1 frame", "aria-keyshortcuts": "ArrowLeft", title: "", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) }) })), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: playing ? 'Pause' : 'Play', shortcut: playPauseShortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', "aria-keyshortcuts": playPauseAriaShortcut || undefined, title: "", onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Next frame", shortcut: "\u2192", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go forward 1 frame", "aria-keyshortcuts": "ArrowRight", title: "", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }) }))] }));
+            jsx_runtime_1.jsx(PlaybackManager, { loop: loop, playbackRate: playbackRate, muted: muted, inFrame: inFrame, outFrame: outFrame, getCurrentFrame: getCurrentFrame }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Go to beginning", shortcut: jumpToBeginningShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go to beginning", "aria-keyshortcuts": jumpToBeginningAriaShortcut || undefined, disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Previous frame", shortcut: "\u2190", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go back 1 frame", "aria-keyshortcuts": "ArrowLeft", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) }) })), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: playing ? 'Pause' : 'Play', shortcut: playPauseShortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', "aria-keyshortcuts": playPauseAriaShortcut || undefined, onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Next frame", shortcut: "\u2192", delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Go forward 1 frame", "aria-keyshortcuts": "ArrowRight", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }) }))] }));
 };
 exports.PlayPause = react_1.default.memo(PlayPauseInner);

package/dist/components/PlaybackRateSelector.js CHANGED Viewed

@@ -57,6 +57,6 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate, }) => {
     if (isStill || canvasContent === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, tooltipDelay: 800, labelWidth: 30, selectedId: selectedId, values: items, renderLeftItem: (color) => (jsx_runtime_1.jsx(playback_rate_1.PlaybackRateIcon, { color: color, playbackRate: playbackRate })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { "aria-label": accessibilityLabel, tooltipDelay: 800, labelWidth: 30, selectedId: selectedId, values: items, renderLeftItem: (color) => (jsx_runtime_1.jsx(playback_rate_1.PlaybackRateIcon, { color: color, playbackRate: playbackRate })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.PlaybackRateSelector = PlaybackRateSelector;

package/dist/components/Preview.js CHANGED Viewed

@@ -48,9 +48,8 @@ const containerStyle = (options) => {
     return {
         transform: `scale(${options.scale})`,
         // Keep the scaled composition on its own layer so the checkerboard does
-        // not bleed through its edges at fractional preview scales. Using
-        // 'transform' caches the rasterization scale and blurs content after zooming.
-        willChange: 'opacity',
+        // not bleed through its edges at fractional preview scales.
+        willChange: 'transform',
         marginLeft: options.xCorrection,
         marginTop: options.yCorrection,
         width: options.width,

package/dist/components/PreviewToolbarOverflowButton.js CHANGED Viewed

@@ -194,6 +194,6 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
     if (values.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "View options", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, renderAction: renderAction, values: values, title: "More actions", unhoveredColor: colors_1.WHITE_ALPHA_80 }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "View options", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, renderAction: renderAction, values: values, "aria-label": "More actions", unhoveredColor: colors_1.WHITE_ALPHA_80 }) }));
 };
 exports.PreviewToolbarOverflowButton = PreviewToolbarOverflowButton;

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js CHANGED Viewed

@@ -65,7 +65,7 @@ const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex, getActions
     return (jsx_runtime_1.jsxs("div", { style: quickSwitcherArea, children: [
             jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, children: ["Search...", showShortcut &&
                         !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() &&
-                        quickSwitcherShortcut !== '' ? (jsx_runtime_1.jsx("span", { style: shortcutLabel, children: quickSwitcherShortcut })) : null] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, title: moreActionsTitle, renderAction: renderMoreActions, getItems: getActions, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
+                        quickSwitcherShortcut !== '' ? (jsx_runtime_1.jsx("span", { style: shortcutLabel, children: quickSwitcherShortcut })) : null] }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, "aria-label": moreActionsTitle, renderAction: renderMoreActions, getItems: getActions, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
         ] }));
 };
 exports.ExplorerQuickSwitcherTrigger = ExplorerQuickSwitcherTrigger;

package/dist/components/RenderButton.js CHANGED Viewed

@@ -379,7 +379,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
     const segments = (0, react_1.useMemo)(() => {
         return [
             {
-                ariaLabel: renderLabel,
+                ariaLabel: showRenderLabel ? tooltip : renderLabel,
                 buttonId: 'render-modal-button',
                 disabled: false,
                 idleColor: colors_1.WHITE_ALPHA_80,
@@ -395,7 +395,6 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
                 style: controlSize === 'compact'
                     ? compactMainSegmentStyle
                     : defaultMainSegmentStyle,
-                title: showRenderLabel ? tooltip : null,
                 tooltipLabel: showRenderLabel ? null : renderLabel,
                 type: 'action',
             },
@@ -412,7 +411,6 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
                 style: controlSize === 'compact'
                     ? compactDropdownSegmentStyle
                     : defaultDropdownSegmentStyle,
-                title: 'Select render type',
                 tooltipLabel: null,
                 type: 'menu',
                 values: dropdownValues,
@@ -432,7 +430,7 @@ const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narr
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle, title: showRenderLabel ? tooltip : null })
+            jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-server", disabled: !canServerRender, onClick: () => openServerRenderModal(false), type: "button" }), ' ', jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-client", onClick: openClientRenderModal, type: "button" }), jsx_runtime_1.jsx("button", { style: { display: 'none' }, id: "render-modal-button-command", onClick: () => openServerRenderModal(true), type: "button" }), jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: segmentedButtonStyle })
         ] }));
 };
 exports.RenderButton = react_1.default.memo(RenderButtonInner);

package/dist/components/RenderModal/InfoBubble.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const InfoBubble: React.FC<{
-    readonly title: string;
+    readonly 'aria-label': string;
     readonly children: React.ReactNode;
     readonly horizontalAlignment?: 'left' | 'right';
 }>;

package/dist/components/RenderModal/InfoBubble.js CHANGED Viewed

@@ -23,7 +23,7 @@ const container = {
     fontSize: 14,
     verticalAlign: 'text-bottom',
 };
-const InfoBubble = ({ title, children, horizontalAlignment = 'left' }) => {
+const InfoBubble = ({ 'aria-label': ariaLabel, children, horizontalAlignment = 'left' }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
@@ -113,7 +113,7 @@ const InfoBubble = ({ title, children, horizontalAlignment = 'left' }) => {
         };
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { ref: ref, tabIndex: tabIndex, style: style, title: title, type: "button", children: jsx_runtime_1.jsx("svg", { style: icon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" }) }) }), portalStyle
+            jsx_runtime_1.jsx("button", { ref: ref, tabIndex: tabIndex, style: style, "aria-label": ariaLabel, type: "button", children: jsx_runtime_1.jsx("svg", { style: icon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" }) }) }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(InfoTooltip_1.InfoTooltip, { backgroundColor: colors_1.INPUT_BACKGROUND, arrowDirection: layout, horizontalAlignment: horizontalAlignment, children: children }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/RenderModal/NumberSetting.js CHANGED Viewed

@@ -24,7 +24,7 @@ const NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, form
     }, [onValueChanged]);
     return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: [name, hint ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), typeof hint === 'string' ? (jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: hint })) : (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: hint.title, children: hint.content }))] })) : null] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RightAlignInput, { children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { value: value, name: name.toLowerCase(), "aria-label": `${name}: ${formatter ? formatter(value) : value}`, onTextChange: onTextChanged, onValueChange: onValueChange, step: step, placeholder: [min, max]
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), typeof hint === 'string' ? (jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: hint })) : (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { "aria-label": hint.title, children: hint.content }))] })) : null] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RightAlignInput, { children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { value: value, name: name.toLowerCase(), "aria-label": `${name}: ${formatter ? formatter(value) : value}`, onTextChange: onTextChanged, onValueChange: onValueChange, step: step, placeholder: [min, max]
                             .map((f) => (f !== null && f !== undefined ? f : ''))
                             .join('-'), min: min, max: max, formatter: formatter, status: "ok", rightAlign: true }) }) })
         ] }));

package/dist/components/RenderModal/OptionExplainerBubble.js CHANGED Viewed

@@ -7,7 +7,7 @@ const InfoBubble_1 = require("./InfoBubble");
 const OptionExplainer_1 = require("./OptionExplainer");
 const OptionExplainerBubble = ({ id, extraInfoRows, showApiOption, showCliFlag }) => {
     const option = client_1.BrowserSafeApis.options[id];
-    return (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: jsx_runtime_1.jsx(OptionExplainer_1.OptionExplainer, { extraInfoRows: extraInfoRows, option: option, showApiOption: showApiOption, showCliFlag: showCliFlag }) }));
+    return (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { "aria-label": "Learn more about this option", children: jsx_runtime_1.jsx(OptionExplainer_1.OptionExplainer, { extraInfoRows: extraInfoRows, option: option, showApiOption: showApiOption, showCliFlag: showCliFlag }) }));
 };
 exports.OptionExplainerBubble = OptionExplainerBubble;
 const WebRendererOptionExplainerBubble = ({ id, apiName }) => {
@@ -21,6 +21,6 @@ const WebRendererCustomOptionExplainerBubble = ({ apiName, description, docLink,
         name,
         ssrName: null,
     };
-    return (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: jsx_runtime_1.jsx(OptionExplainer_1.OptionExplainer, { extraInfoRows: [{ label: 'API option', value: apiName }], option: option, showApiOption: false, showCliFlag: false }) }));
+    return (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { "aria-label": "Learn more about this option", children: jsx_runtime_1.jsx(OptionExplainer_1.OptionExplainer, { extraInfoRows: [{ label: 'API option', value: apiName }], option: option, showApiOption: false, showCliFlag: false }) }));
 };
 exports.WebRendererCustomOptionExplainerBubble = WebRendererCustomOptionExplainerBubble;

package/dist/components/RenderModal/RenderModalAdvanced.js CHANGED Viewed

@@ -179,11 +179,11 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Chrome Mode ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "chromeModeOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: chromeModeOptions, selectedId: chromeModeOption, title: "Chrome mode" }) })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: chromeModeOptions, selectedId: chromeModeOption, "aria-label": "Chrome mode" }) })
                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["OpenGL render backend ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "glOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, title: "OpenGl option" }) })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, "aria-label": "OpenGl option" }) })
                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Multi-process Chrome on Linux",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "enableMultiprocessOnLinuxOption" })

package/dist/components/RenderModal/RenderModalAudio.js CHANGED Viewed

@@ -69,7 +69,7 @@ const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setE
                 !muted ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Audio Codec ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "audioCodecOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: audioCodec, title: "AudioCodec" }) })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecOptions(codec), selectedId: audioCodec, "aria-label": "AudioCodec" }) })
                 ] })) : null, (renderMode === 'video' || renderMode === 'audio') && !muted && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(EnforceAudioTrackSetting_1.EnforceAudioTrackSetting, { muted: muted, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrack: setEnforceAudioTrackState }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {})
                 ] })), renderMode === 'video' && !muted ? (jsx_runtime_1.jsx(SeparateAudioOption_1.SeparateAudioOption, { separateAudioTo: separateAudioTo, setSeparateAudioTo: setSeparateAudioTo, audioCodec: audioCodec, outName: outName })) : null, audioCodec === 'aac' && !muted ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
@@ -86,7 +86,7 @@ const RenderModalAudio = ({ muted, setMuted, renderMode, enforceAudioTrack, setE
                 ] })) : null, renderMode !== 'still' && !muted ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Sample Rate ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "sampleRateOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: sampleRateOptions, selectedId: String(sampleRate), title: "Sample Rate" }) })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: sampleRateOptions, selectedId: String(sampleRate), "aria-label": "Sample Rate" }) })
                 ] })) : null] }));
 };
 exports.RenderModalAudio = RenderModalAudio;

package/dist/components/RenderModal/RenderModalBasic.js CHANGED Viewed

@@ -96,15 +96,15 @@ const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setV
                 ] })) : (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Codec",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoCodecOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: videoCodecOptions, selectedId: codec, title: "Codec" }) })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: videoCodecOptions, selectedId: codec, "aria-label": "Codec" }) })
                 ] })), renderMode === 'still' && resolvedComposition.durationInFrames > 1 ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Frame" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RightAlignInput, { children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })
                 ] })) : null, renderMode === 'video' && codec === 'prores' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ProRes profile" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: 'proResProfile', selectedId: proResProfile, values: proResProfileOptions }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ProRes profile" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { "aria-label": 'proResProfile', selectedId: proResProfile, values: proResProfileOptions }) })
                 ] })) : null, renderMode === 'still' ? null : (jsx_runtime_1.jsx(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), showOutputName ? (jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: null, existingOutputPath: null, existence: existence, inputStyle: layout_2.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage, label: renderMode === 'sequence' ? 'Folder name' : 'Output name' })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Log Level ",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "logLevelOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, title: "Log Level" }) })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: logLevelOptions, selectedId: logLevel, "aria-label": "Log Level" }) })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/RenderModalEncoding.js CHANGED Viewed

@@ -139,15 +139,15 @@ const RenderModalEncoding = ({ renderMode, codec, qualityControlType, setQuality
                         ] }), encodingMaxRate === null ? null : (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_2.label, children: "-maxrate value" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { style: layout_2.input, value: encodingMaxRate, onChange: onEncodingMaxRateChanged, status: "ok", rightAlign: true }) }) })
                         ] })), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Pixel format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Pixel format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, "aria-label": "Pixel Format" }) })
                         ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Color space",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "colorSpaceOption" })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: colorSpaceOptions, selectedId: colorSpace, title: "Color Space" }) })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: colorSpaceOptions, selectedId: colorSpace, "aria-label": "Color Space" }) })
                         ] }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), codec === 'h264' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["x264 Preset",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "x264Option" })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: x264Preset, selectedId: x264Preset, values: x264PresetOptions }) })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { "aria-label": x264Preset, selectedId: x264Preset, values: x264PresetOptions }) })
                         ] })) : null, codec !== 'gif' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Custom GOP size",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "gopSizeOption" })
@@ -155,7 +155,7 @@ const RenderModalEncoding = ({ renderMode, codec, qualityControlType, setQuality
                         ] })) : null, codec !== 'gif' && gopSize !== null ? (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { min: 1, max: 10000, step: 1, name: "GOP size", formatter: (value) => `${value} frames`, onValueChanged: changeGopSize, value: gopSize })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Hardware acceleration",
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "hardwareAccelerationOption" })
-                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: hardwareAcceleration, selectedId: hardwareAcceleration, values: hardwareAccelerationValues }) })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { "aria-label": hardwareAcceleration, selectedId: hardwareAcceleration, values: hardwareAccelerationValues }) })
                         ] })
                 ] })) : null, renderMode === 'still' ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderMode === 'video' ? jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_2.label, children: "No parallel encoding" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged, name: "disallow-parallel-encoding" }) })

package/dist/components/RenderModal/RenderModalOutputName.js CHANGED Viewed

@@ -54,7 +54,7 @@ const RenderModalOutputName = ({ ariaLabel, existingOutputPath, existence, input
                         jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : undefined, status: validationMessage ? 'error' : existence ? 'warning' : 'ok', style: inputStyle, type: "text", value: outName, onChange: onValueChange, rightAlign: true }), validationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage, type: 'error' })
                             ] })) : existence ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` })), "Exists, will be overwritten"] }), type: 'warning' })
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openExistingOutput, renderAction: renderOpenIcon, "aria-label": `Open in ${fileManagerName}` })), "Exists, will be overwritten"] }), type: 'warning' })
                             ] })) : null] }) })
         ] }));
 };

package/dist/components/RenderModal/SchemaEditor/SchemaLabel.js CHANGED Viewed

@@ -49,6 +49,6 @@ const SchemaLabel = ({ jsonPath, onRemove, valid, suffix, handleClick, descripti
     const labelContent = (jsx_runtime_1.jsxs("span", { style: labelStyle, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), " ", suffix ? suffix : null] }));
     return (jsx_runtime_1.jsxs("div", { style: compactStyles, className: scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_CLASSNAME, "data-json-path": jsonPath.join('.'), children: [handleClick ? (
             // Minus the padding that a button has (user agent padding-line-start)
-            jsx_runtime_1.jsx("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', padding: 0 }, children: labelContent })) : (labelContent), displayedDescription ? (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Field description", horizontalAlignment: "right", children: jsx_runtime_1.jsx("div", { style: descriptionStyle, children: displayedDescription }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), onRemove ? jsx_runtime_1.jsx(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
+            jsx_runtime_1.jsx("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', padding: 0 }, children: labelContent })) : (labelContent), displayedDescription ? (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { "aria-label": "Field description", horizontalAlignment: "right", children: jsx_runtime_1.jsx("div", { style: descriptionStyle, children: displayedDescription }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), onRemove ? jsx_runtime_1.jsx(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
 };
 exports.SchemaLabel = SchemaLabel;

package/dist/components/RenderModal/SchemaEditor/ZodDiscriminatedUnionEditor.js CHANGED Viewed

@@ -47,7 +47,7 @@ const ZodDiscriminatedUnionEditor = ({ schema, setValue, value, mayPad, jsonPath
         return {
             discriminator,
             markup: (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, description: (0, zod_schema_type_1.getUserFacingDescription)(schema), valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator], size: "small" })
+                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, description: (0, zod_schema_type_1.getUserFacingDescription)(schema), valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { "aria-label": "Select type", values: comboBoxValues, selectedId: value[discriminator], size: "small" })
                 ] }, 'replacement')),
         };
     }, [

package/dist/components/RenderModal/SchemaEditor/ZodEnumEditor.js CHANGED Viewed

@@ -39,7 +39,7 @@ const ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad })
     }, [enumValues, onChange, value]);
     const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null, description: (0, zod_schema_type_1.getUserFacingDescription)(schema) }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null, description: (0, zod_schema_type_1.getUserFacingDescription)(schema) }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, "aria-label": value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodEnumEditor = ZodEnumEditor;

package/dist/components/RenderModal/SchemaEditor/ZodFieldValidation.js CHANGED Viewed

@@ -21,7 +21,7 @@ const ZodFieldValidation = ({ zodValidation, path }) => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: legend, children: [
-            jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: zodValidation.error.format()._errors[0], type: "error", size: "compact" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Zod validation failure", children: jsx_runtime_1.jsxs("div", { style: stackTrace, children: [
+            jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: zodValidation.error.format()._errors[0], type: "error", size: "compact" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { "aria-label": "Zod validation failure", children: jsx_runtime_1.jsxs("div", { style: stackTrace, children: [
                         jsx_runtime_1.jsx("div", { style: stackTraceLabel, children: "Zod Validation has failed:" }), zodValidation.error.issues.map((error, index) => (
                         // eslint-disable-next-line react/no-array-index-key
                         jsx_runtime_1.jsxs("div", { style: stackTraceLabel, children: ["Type: ", error.code, " ",

package/dist/components/RenderModal/SchemaEditor/ZodStaticFileEditor.js CHANGED Viewed

@@ -38,7 +38,7 @@ const ZodStaticFileEditor = ({ schema, jsonPath, setValue, value, onRemove, mayP
         });
     }, [onChange, staticFiles, value]);
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null, description: (0, zod_schema_type_1.getUserFacingDescription)(schema) }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null, description: (0, zod_schema_type_1.getUserFacingDescription)(schema) }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, "aria-label": value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodStaticFileEditor = ZodStaticFileEditor;