@remotion/studio 4.0.485 → 4.0.487

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 (275) hide show
  1. package/dist/ResolveCompositionConfigInStudio.js +42 -0
  2. package/dist/components/AssetSelector.js +1 -1
  3. package/dist/components/AssetSelectorItem.js +9 -9
  4. package/dist/components/AudioWaveform.js +3 -3
  5. package/dist/components/Button.js +2 -2
  6. package/dist/components/Canvas.js +28 -0
  7. package/dist/components/CanvasOrLoading.js +1 -1
  8. package/dist/components/CheckboardToggle.js +1 -1
  9. package/dist/components/Checkbox.js +3 -3
  10. package/dist/components/ColorPicker/AlphaSlider.js +4 -3
  11. package/dist/components/ColorPicker/ColorPicker.js +4 -4
  12. package/dist/components/ColorPicker/ColorPickerPopup.js +10 -10
  13. package/dist/components/ColorPicker/HueSlider.js +4 -3
  14. package/dist/components/ColorPicker/SaturationValueArea.js +5 -4
  15. package/dist/components/ColorPicker/checker.d.ts +1 -1
  16. package/dist/components/ColorPicker/checker.js +3 -3
  17. package/dist/components/CompactExplanation.js +3 -3
  18. package/dist/components/CompositionSelector.js +141 -5
  19. package/dist/components/CompositionSelectorItem.d.ts +1 -0
  20. package/dist/components/CompositionSelectorItem.js +103 -11
  21. package/dist/components/ContextMenu.js +2 -1
  22. package/dist/components/CopyButton.js +3 -2
  23. package/dist/components/CurrentAsset.d.ts +3 -1
  24. package/dist/components/CurrentAsset.js +15 -2
  25. package/dist/components/CurrentComposition.js +43 -2
  26. package/dist/components/EditorContexts.js +2 -1
  27. package/dist/components/EffectPickerModal.js +1 -1
  28. package/dist/components/FilePreview.js +2 -1
  29. package/dist/components/FpsCounter.js +3 -2
  30. package/dist/components/FullscreenToggle.js +2 -1
  31. package/dist/components/GlobalKeybindings.js +19 -12
  32. package/dist/components/InlineAction.js +2 -2
  33. package/dist/components/InlineEditableTitle.d.ts +1 -0
  34. package/dist/components/InlineEditableTitle.js +12 -7
  35. package/dist/components/InspectorInfoHeader.js +2 -2
  36. package/dist/components/InspectorPanel/DefaultInspector.d.ts +1 -0
  37. package/dist/components/InspectorPanel/DefaultInspector.js +2 -2
  38. package/dist/components/InspectorPanel/KeyframeEasingNavigator.js +1 -1
  39. package/dist/components/InspectorPanel/common.js +2 -2
  40. package/dist/components/InspectorPanel/styles.js +3 -3
  41. package/dist/components/InspectorPanel.d.ts +1 -0
  42. package/dist/components/InspectorPanel.js +2 -2
  43. package/dist/components/InspectorSequenceSection.js +1 -1
  44. package/dist/components/InspectorSourceLocation.d.ts +1 -0
  45. package/dist/components/InspectorSourceLocation.js +18 -3
  46. package/dist/components/InstallablePackage.js +1 -1
  47. package/dist/components/KeyboardShortcutsExplainer.js +9 -5
  48. package/dist/components/LoopToggle.js +1 -1
  49. package/dist/components/Menu/MenuDivider.js +1 -1
  50. package/dist/components/Menu/MenuItem.js +1 -1
  51. package/dist/components/Menu/MenuSubItem.js +1 -1
  52. package/dist/components/Menu/styles.js +3 -3
  53. package/dist/components/MenuToolbar.js +2 -2
  54. package/dist/components/ModalButton.js +1 -1
  55. package/dist/components/ModalContainer.js +3 -3
  56. package/dist/components/ModalFooter.js +2 -1
  57. package/dist/components/ModalHeader.js +3 -2
  58. package/dist/components/Modals.js +2 -1
  59. package/dist/components/NewComposition/CancelButton.js +4 -3
  60. package/dist/components/NewComposition/ComboBox.js +3 -3
  61. package/dist/components/NewComposition/InputDragger.js +11 -3
  62. package/dist/components/NewComposition/MenuContent.js +1 -1
  63. package/dist/components/NewComposition/NewComposition.js +4 -1
  64. package/dist/components/NewComposition/NewFolder.d.ts +5 -0
  65. package/dist/components/NewComposition/NewFolder.js +86 -0
  66. package/dist/components/NewComposition/RemInput.js +3 -3
  67. package/dist/components/NewComposition/RemTextarea.js +1 -1
  68. package/dist/components/NewComposition/RenameStaticFile.js +20 -59
  69. package/dist/components/NewComposition/ValidationMessage.js +1 -1
  70. package/dist/components/NewComposition/use-rename-static-file.d.ts +18 -0
  71. package/dist/components/NewComposition/use-rename-static-file.js +90 -0
  72. package/dist/components/NoRegisterRoot.js +3 -2
  73. package/dist/components/Notifications/ColorDot.js +3 -2
  74. package/dist/components/Notifications/Notification.js +4 -4
  75. package/dist/components/Notifications/NotificationCenter.js +2 -1
  76. package/dist/components/Notifications/ServerDisconnected.js +5 -4
  77. package/dist/components/OptionsPanel.js +1 -1
  78. package/dist/components/OutlineToggle.js +1 -1
  79. package/dist/components/PlayPause.js +4 -3
  80. package/dist/components/Preview.js +1 -1
  81. package/dist/components/PreviewToolbar.js +3 -2
  82. package/dist/components/QuickSwitcher/AlgoliaCredit.js +2 -1
  83. package/dist/components/QuickSwitcher/QuickSwitcherContent.js +1 -1
  84. package/dist/components/QuickSwitcher/QuickSwitcherResult.js +2 -2
  85. package/dist/components/RefreshCompositionOverlay.js +2 -1
  86. package/dist/components/RenderButton.js +10 -9
  87. package/dist/components/RenderModal/CliCopyButton.js +1 -1
  88. package/dist/components/RenderModal/ClientRenderProgress.js +1 -1
  89. package/dist/components/RenderModal/DataEditor.js +1 -1
  90. package/dist/components/RenderModal/GuiRenderStatus.js +1 -1
  91. package/dist/components/RenderModal/InfoBubble.js +2 -2
  92. package/dist/components/RenderModal/InfoTooltip.js +3 -3
  93. package/dist/components/RenderModal/InlineEyeIcon.js +2 -1
  94. package/dist/components/RenderModal/InlineRemoveButton.js +2 -1
  95. package/dist/components/RenderModal/MultiRangeSlider.js +1 -1
  96. package/dist/components/RenderModal/OptionExplainer.d.ts +11 -1
  97. package/dist/components/RenderModal/OptionExplainer.js +33 -13
  98. package/dist/components/RenderModal/OptionExplainerBubble.d.ts +15 -1
  99. package/dist/components/RenderModal/OptionExplainerBubble.js +17 -3
  100. package/dist/components/RenderModal/RenderModalHr.js +2 -1
  101. package/dist/components/RenderModal/RenderStatusModal.js +2 -1
  102. package/dist/components/RenderModal/SchemaEditor/Fieldset.d.ts +1 -0
  103. package/dist/components/RenderModal/SchemaEditor/Fieldset.js +6 -1
  104. package/dist/components/RenderModal/SchemaEditor/SchemaEditor.js +1 -2
  105. package/dist/components/RenderModal/SchemaEditor/SchemaLabel.js +1 -5
  106. package/dist/components/RenderModal/SchemaEditor/SchemaResetButton.js +2 -1
  107. package/dist/components/RenderModal/SchemaEditor/SchemaSeparationLine.js +1 -1
  108. package/dist/components/RenderModal/SchemaEditor/SchemaVerticalGuide.js +2 -1
  109. package/dist/components/RenderModal/SchemaEditor/ZodDateEditor.js +1 -1
  110. package/dist/components/RenderModal/SchemaEditor/ZodErrorMessages.js +1 -1
  111. package/dist/components/RenderModal/SchemaEditor/ZodNonEditableValue.js +1 -1
  112. package/dist/components/RenderModal/SchemaEditor/create-zod-values.js +2 -1
  113. package/dist/components/RenderModal/ServerRenderModal.js +1 -1
  114. package/dist/components/RenderModal/WarningIndicatorButton.js +4 -6
  115. package/dist/components/RenderModal/WebRenderModal.js +5 -2
  116. package/dist/components/RenderModal/WebRenderModalAdvanced.d.ts +3 -0
  117. package/dist/components/RenderModal/WebRenderModalAdvanced.js +92 -5
  118. package/dist/components/RenderModal/WebRenderModalAudio.js +4 -3
  119. package/dist/components/RenderModal/WebRenderModalBasic.js +2 -2
  120. package/dist/components/RenderModal/WebRenderModalLicense.js +2 -2
  121. package/dist/components/RenderModal/WebRenderModalPicture.js +2 -1
  122. package/dist/components/RenderModal/render-modals.js +3 -3
  123. package/dist/components/RenderPreview.js +1 -1
  124. package/dist/components/RenderQueue/ClientRenderQueueProcessor.js +1 -0
  125. package/dist/components/RenderQueue/RenderQueueCopyToClipboard.js +2 -1
  126. package/dist/components/RenderQueue/RenderQueueDownloadItem.js +2 -1
  127. package/dist/components/RenderQueue/RenderQueueItemCancelButton.js +2 -1
  128. package/dist/components/RenderQueue/RenderQueueItemStatus.js +1 -1
  129. package/dist/components/RenderQueue/RenderQueueOpenInFolder.js +2 -1
  130. package/dist/components/RenderQueue/RenderQueueRemoveItem.js +2 -1
  131. package/dist/components/RenderQueue/RenderQueueRepeat.js +2 -1
  132. package/dist/components/RenderQueue/client-side-render-types.d.ts +2 -1
  133. package/dist/components/RenderQueue/index.js +1 -1
  134. package/dist/components/RendersTab.js +2 -2
  135. package/dist/components/SegmentedControl.js +3 -3
  136. package/dist/components/SelectedOutlineElement.d.ts +9 -0
  137. package/dist/components/SelectedOutlineElement.js +63 -18
  138. package/dist/components/SelectedOutlineOverlay.d.ts +2 -0
  139. package/dist/components/SelectedOutlineOverlay.js +53 -2
  140. package/dist/components/SelectedOutlineUvControls.js +18 -11
  141. package/dist/components/SidebarCollapserControls.js +5 -4
  142. package/dist/components/SnappingProvider.d.ts +4 -0
  143. package/dist/components/SnappingProvider.js +24 -0
  144. package/dist/components/SnappingToggle.d.ts +2 -0
  145. package/dist/components/SnappingToggle.js +26 -0
  146. package/dist/components/Splitter/SplitterContext.d.ts +1 -1
  147. package/dist/components/Splitter/SplitterElement.js +2 -1
  148. package/dist/components/StaticFilePreview.js +1 -1
  149. package/dist/components/Tabs/index.js +3 -3
  150. package/dist/components/Tabs/vertical.js +3 -3
  151. package/dist/components/TextViewer.js +2 -1
  152. package/dist/components/TimeValue.js +1 -1
  153. package/dist/components/Timeline/EasingEditorModal.js +8 -8
  154. package/dist/components/Timeline/KeyframeSettingsModal.js +1 -1
  155. package/dist/components/Timeline/LoopedIndicator.js +2 -2
  156. package/dist/components/Timeline/MaxTimelineTracks.js +3 -2
  157. package/dist/components/Timeline/TimelineArrayField.js +6 -5
  158. package/dist/components/Timeline/TimelineColorField.js +2 -1
  159. package/dist/components/Timeline/TimelineEffectItem.js +3 -2
  160. package/dist/components/Timeline/TimelineEffectPropItem.js +2 -2
  161. package/dist/components/Timeline/TimelineExpandArrowButton.js +3 -2
  162. package/dist/components/Timeline/TimelineExpandedRow.js +2 -1
  163. package/dist/components/Timeline/TimelineExpandedSection.js +1 -1
  164. package/dist/components/Timeline/TimelineFieldLabel.js +2 -1
  165. package/dist/components/Timeline/TimelineFontFamilyField.d.ts +11 -0
  166. package/dist/components/Timeline/TimelineFontFamilyField.js +545 -0
  167. package/dist/components/Timeline/TimelineImageInfo.js +2 -1
  168. package/dist/components/Timeline/TimelineInOutPointer.js +2 -1
  169. package/dist/components/Timeline/TimelineInOutPointerHandle.js +2 -4
  170. package/dist/components/Timeline/TimelineKeyframeControls.js +2 -2
  171. package/dist/components/Timeline/TimelineKeyframeDiamondIcon.js +1 -1
  172. package/dist/components/Timeline/TimelineKeyframeEasingLine.js +1 -1
  173. package/dist/components/Timeline/TimelineLayerEye.js +3 -3
  174. package/dist/components/Timeline/TimelineMediaInfo.js +2 -2
  175. package/dist/components/Timeline/TimelinePrimitiveFieldValue.js +4 -0
  176. package/dist/components/Timeline/TimelineRotationField.js +4 -3
  177. package/dist/components/Timeline/TimelineScaleField.js +1 -1
  178. package/dist/components/Timeline/TimelineSchemaField.d.ts +2 -0
  179. package/dist/components/Timeline/TimelineSchemaField.js +47 -7
  180. package/dist/components/Timeline/TimelineScrollable.js +3 -2
  181. package/dist/components/Timeline/TimelineSelection.js +11 -6
  182. package/dist/components/Timeline/TimelineSequence.js +17 -20
  183. package/dist/components/Timeline/TimelineSequenceFrame.js +3 -2
  184. package/dist/components/Timeline/TimelineSequenceItem.js +8 -7
  185. package/dist/components/Timeline/TimelineSequenceName.js +3 -2
  186. package/dist/components/Timeline/TimelineSequencePropItem.js +2 -1
  187. package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.d.ts +20 -1
  188. package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js +128 -11
  189. package/dist/components/Timeline/TimelineSlider.js +2 -1
  190. package/dist/components/Timeline/TimelineSliderHandle.js +2 -1
  191. package/dist/components/Timeline/TimelineTimeIndicators.js +1 -1
  192. package/dist/components/Timeline/TimelineVideoInfo.js +2 -1
  193. package/dist/components/Timeline/TimelineZoomControls.js +4 -3
  194. package/dist/components/Timeline/call-move-keyframe.d.ts +5 -0
  195. package/dist/components/Timeline/call-move-keyframe.js +14 -3
  196. package/dist/components/Timeline/google-fonts-list.d.ts +6 -0
  197. package/dist/components/Timeline/google-fonts-list.js +1512 -0
  198. package/dist/components/Timeline/save-sequence-prop.d.ts +8 -1
  199. package/dist/components/Timeline/save-sequence-prop.js +63 -19
  200. package/dist/components/Timeline/timeline-rotation-field-utils.d.ts +5 -0
  201. package/dist/components/Timeline/timeline-rotation-field-utils.js +16 -0
  202. package/dist/components/Timeline/timeline-scroll-logic.js +5 -2
  203. package/dist/components/TimelineInOutToggle.js +1 -1
  204. package/dist/components/UpdateCheck.js +2 -2
  205. package/dist/components/UpdateModal/OpenIssueButton.js +1 -1
  206. package/dist/components/VisualControls/ClickableFileName.js +4 -4
  207. package/dist/components/VisualControls/VisualControlsContent.js +9 -1
  208. package/dist/components/effect-drag-and-drop.js +30 -8
  209. package/dist/components/import-assets.d.ts +8 -2
  210. package/dist/components/import-assets.js +55 -1
  211. package/dist/components/options-sidebar-tabs.d.ts +1 -0
  212. package/dist/components/options-sidebar-tabs.js +6 -1
  213. package/dist/components/selected-outline-measurement.js +2 -1
  214. package/dist/components/selected-outline-snap.d.ts +36 -0
  215. package/dist/components/selected-outline-snap.js +158 -0
  216. package/dist/error-overlay/remotion-overlay/CalculateMetadataErrorExplainer.js +2 -2
  217. package/dist/error-overlay/remotion-overlay/CodeFrame.js +7 -5
  218. package/dist/error-overlay/remotion-overlay/CompositionIdListItem.js +2 -2
  219. package/dist/error-overlay/remotion-overlay/DismissButton.js +3 -2
  220. package/dist/error-overlay/remotion-overlay/ErrorLoader.js +3 -2
  221. package/dist/error-overlay/remotion-overlay/ErrorMessage.js +4 -4
  222. package/dist/error-overlay/remotion-overlay/HelpLink.js +1 -1
  223. package/dist/error-overlay/remotion-overlay/MediaPlaybackErrorExplainer.js +4 -4
  224. package/dist/error-overlay/remotion-overlay/Overlay.js +3 -2
  225. package/dist/error-overlay/remotion-overlay/StackFrame.js +4 -3
  226. package/dist/error-overlay/remotion-overlay/Symbolicating.js +2 -1
  227. package/dist/error-overlay/remotion-overlay/carets.js +3 -2
  228. package/dist/esm/chunk-jefhcs5z.js +164 -0
  229. package/dist/esm/{chunk-103pp4n7.js → chunk-y2t24cx0.js} +10754 -6829
  230. package/dist/esm/internals.mjs +10755 -6796
  231. package/dist/esm/previewEntry.mjs +10554 -6591
  232. package/dist/esm/renderEntry.mjs +8 -5
  233. package/dist/helpers/checkerboard-background.js +4 -12
  234. package/dist/helpers/colors.d.ts +99 -7
  235. package/dist/helpers/colors.js +118 -10
  236. package/dist/helpers/inject-css.js +85 -83
  237. package/dist/helpers/retry-payload.js +1 -0
  238. package/dist/helpers/timeline-layout.d.ts +4 -2
  239. package/dist/helpers/use-menu-structure.js +74 -5
  240. package/dist/helpers/validate-folder-rename.js +2 -10
  241. package/dist/helpers/validate-new-folder-name.d.ts +5 -0
  242. package/dist/helpers/validate-new-folder-name.js +16 -0
  243. package/dist/hot-middleware-client/client.js +3 -2
  244. package/dist/icons/Checkmark.js +2 -1
  245. package/dist/icons/audio.js +2 -1
  246. package/dist/icons/caret.js +2 -2
  247. package/dist/icons/certificate.js +2 -1
  248. package/dist/icons/data.js +2 -1
  249. package/dist/icons/eyedropper.js +2 -1
  250. package/dist/icons/file.js +2 -1
  251. package/dist/icons/frame.js +2 -1
  252. package/dist/icons/gear.js +2 -1
  253. package/dist/icons/gif.js +2 -1
  254. package/dist/icons/jump-to-start.js +2 -1
  255. package/dist/icons/keys.js +4 -3
  256. package/dist/icons/magnet.d.ts +3 -0
  257. package/dist/icons/magnet.js +8 -0
  258. package/dist/icons/media-volume.js +1 -1
  259. package/dist/icons/minus.js +2 -1
  260. package/dist/icons/pause.js +2 -1
  261. package/dist/icons/play.js +2 -1
  262. package/dist/icons/react.d.ts +5 -0
  263. package/dist/icons/react.js +8 -0
  264. package/dist/icons/redo.js +2 -1
  265. package/dist/icons/step-back.js +2 -1
  266. package/dist/icons/step-forward.js +2 -1
  267. package/dist/icons/undo.js +2 -1
  268. package/dist/previewEntry.js +2 -1
  269. package/dist/renderEntry.js +4 -3
  270. package/dist/state/editor-guides.d.ts +2 -2
  271. package/dist/state/editor-snapping.d.ts +8 -0
  272. package/dist/state/editor-snapping.js +18 -0
  273. package/dist/state/modals.d.ts +6 -1
  274. package/package.json +12 -12
  275. package/dist/esm/chunk-6jf1natv.js +0 -25
package/dist/components/QuickSwitcher/AlgoliaCredit.js CHANGED
@@ -2,10 +2,11 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.AlgoliaCredit = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const colors_1 = require("../../helpers/colors");
5
6
  const link = {
6
7
  display: 'inline-flex',
7
8
  };
8
9
  const AlgoliaCredit = () => {
9
- return (jsx_runtime_1.jsx("a", { style: link, href: "https://www.algolia.com/ref/docsearch/?utm_source=www.remotion.dev&utm_medium=referral&utm_content=powered_by&utm_campaign=docsearch", target: "_blank", rel: "noopener noreferrer", children: jsx_runtime_1.jsx("svg", { width: "77", height: "19", "aria-label": "Algolia", role: "img", children: jsx_runtime_1.jsx("path", { d: "M2.5067 0h14.0245c1.384.001 2.5058 1.1205 2.5068 2.5017V16.5c-.0014 1.3808-1.1232 2.4995-2.5068 2.5H2.5067C1.1232 18.9995.0014 17.8808 0 16.5V2.4958A2.495 2.495 0 01.735.7294 2.505 2.505 0 012.5068 0zM37.95 15.0695c-3.7068.0168-3.7068-2.986-3.7068-3.4634L34.2372.3576 36.498 0v11.1794c0 .2715 0 1.9889 1.452 1.994v1.8961zm-9.1666-1.8388c.694 0 1.2086-.0397 1.5678-.1088v-2.2934a5.3639 5.3639 0 00-1.3303-.1679 4.8283 4.8283 0 00-.758.0582 2.2845 2.2845 0 00-.688.2024c-.2029.0979-.371.2362-.4919.4142-.1268.1788-.185.2826-.185.5533 0 .5297.185.8359.5205 1.0375.3355.2016.7928.3053 1.365.3053v-.0008zm-.1969-8.1817c.7463 0 1.3768.092 1.8856.2767.5088.1838.9195.4428 1.2204.7717.3068.334.5147.7777.6423 1.251.1327.4723.196.991.196 1.5603v5.798c-.5235.1036-1.05.192-1.5787.2649-.7048.1037-1.4976.156-2.3774.156-.5832 0-1.1215-.0582-1.6016-.167a3.385 3.385 0 01-1.2432-.5364 2.6034 2.6034 0 01-.8037-.9565c-.191-.3922-.29-.9447-.29-1.5208 0-.5533.11-.905.3246-1.2863a2.7351 2.7351 0 01.8849-.9329c.376-.242.8029-.415 1.2948-.5187a7.4517 7.4517 0 011.5381-.156 7.1162 7.1162 0 011.6667.2024V8.886c0-.259-.0296-.5061-.093-.7372a1.5847 1.5847 0 00-.3245-.6158 1.5079 1.5079 0 00-.6119-.4158 2.6788 2.6788 0 00-.966-.173c-.5206 0-.9948.0634-1.4283.1384a6.5481 6.5481 0 00-1.065.259l-.2712-1.849c.2831-.0986.7048-.1964 1.2491-.2943a9.2979 9.2979 0 011.752-.1501v.0008zm44.6597 8.1193c.6947 0 1.2086-.0405 1.567-.1097v-2.2942a5.3743 5.3743 0 00-1.3303-.1679c-.2485 0-.503.0177-.7573.0582a2.2853 2.2853 0 00-.688.2024 1.2333 1.2333 0 00-.4918.4142c-.1268.1788-.1843.2826-.1843.5533 0 .5297.1843.8359.5198 1.0375.3414.2066.7927.3053 1.365.3053v.0009zm-.191-8.1767c.7463 0 1.3768.0912 1.8856.2759.5087.1847.9195.4436 1.2204.7717.3.329.5147.7786.6414 1.251a5.7248 5.7248 0 01.197 1.562v5.7972c-.3466.0742-.874.1602-1.5788.2648-.7049.1038-1.4976.1552-2.3774.1552-.5832 0-1.1215-.0573-1.6016-.167a3.385 3.385 0 01-1.2432-.5356 2.6034 2.6034 0 01-.8038-.9565c-.191-.3922-.2898-.9447-.2898-1.5216 0-.5533.1098-.905.3245-1.2854a2.7373 2.7373 0 01.8849-.9338c.376-.2412.8029-.4141 1.2947-.5178a7.4545 7.4545 0 012.325-.1097c.2781.0287.5672.081.879.156v-.3686a2.7781 2.7781 0 00-.092-.738 1.5788 1.5788 0 00-.3246-.6166 1.5079 1.5079 0 00-.612-.415 2.6797 2.6797 0 00-.966-.1729c-.5205 0-.9947.0633-1.4282.1384a6.5608 6.5608 0 00-1.065.259l-.2712-1.8498c.283-.0979.7048-.1957 1.2491-.2935a9.8597 9.8597 0 011.752-.1494zm-6.79-1.072c-.7576.001-1.373-.6103-1.3759-1.3664 0-.755.6128-1.3664 1.376-1.3664.764 0 1.3775.6115 1.3775 1.3664s-.6195 1.3664-1.3776 1.3664zm1.1393 11.1507h-2.2726V5.3409l2.2734-.3568v10.0845l-.0008.0017zm-3.984 0c-3.707.0168-3.707-2.986-3.707-3.4642L59.7069.3576 61.9685 0v11.1794c0 .2715 0 1.9889 1.452 1.994V15.0703zm-7.3512-4.979c0-.975-.2138-1.7873-.6305-2.3516-.4167-.571-.9998-.852-1.747-.852-.7454 0-1.3302.281-1.7452.852-.4166.5702-.6195 1.3765-.6195 2.3516 0 .9851.208 1.6473.6254 2.2183.4158.576.9998.8587 1.7461.8587.7454 0 1.3303-.2885 1.747-.8595.4158-.5761.6237-1.2315.6237-2.2184v.0009zm2.3132-.006c0 .7609-.1099 1.3361-.3356 1.9654a4.654 4.654 0 01-.9533 1.6076A4.214 4.214 0 0155.613 14.69c-.579.2412-1.4697.3795-1.9143.3795-.4462-.005-1.3303-.1324-1.9033-.3795a4.307 4.307 0 01-1.474-1.0316c-.4115-.4445-.7293-.9801-.9609-1.6076a5.3423 5.3423 0 01-.3465-1.9653c0-.7608.104-1.493.3356-2.1155a4.683 4.683 0 01.9719-1.5958 4.3383 4.3383 0 011.479-1.0257c.5739-.242 1.2043-.3567 1.8864-.3567.6829 0 1.3125.1197 1.8906.3567a4.1245 4.1245 0 011.4816 1.0257 4.7587 4.7587 0 01.9592 1.5958c.2426.6225.3643 1.3547.3643 2.1155zm-17.0198 0c0 .9448.208 1.9932.6238 2.431.4166.4386.955.6579 1.6142.6579.3584 0 .6998-.0523 1.0176-.1502.3186-.0978.5721-.2134.775-.3517V7.0784a8.8706 8.8706 0 00-1.4926-.1906c-.8206-.0236-1.4452.312-1.8847.8468-.4335.5365-.6533 1.476-.6533 2.3516v-.0008zm6.2863 4.4485c0 1.5385-.3938 2.662-1.1866 3.3773-.791.7136-2.0005 1.0712-3.6308 1.0712-.5958 0-1.834-.1156-2.8228-.334l.3643-1.7865c.8282.173 1.9202.2193 2.4932.2193.9077 0 1.555-.1847 1.943-.5533.388-.3686.578-.916.578-1.643v-.3687a6.8289 6.8289 0 01-.8848.3349c-.3634.1096-.786.167-1.261.167-.6246 0-1.1917-.0979-1.7055-.2944a3.5554 3.5554 0 01-1.3244-.8645c-.3642-.3796-.6541-.8579-.8561-1.4289-.2028-.571-.3068-1.59-.3068-2.339 0-.7034.1099-1.5856.3245-2.1735.2198-.5871.5316-1.0949.9542-1.515.4167-.42.9255-.743 1.5213-.98a5.5923 5.5923 0 012.052-.3855c.7353 0 1.4114.092 2.0707.2024.6592.1088 1.2204.2236 1.6776.35v8.945-.0008zM11.5026 4.2418v-.6511c-.0005-.4553-.3704-.8241-.8266-.8241H8.749c-.4561 0-.826.3688-.8265.824v.669c0 .0742.0693.1264.1445.1096a6.0346 6.0346 0 011.6768-.2362 6.125 6.125 0 011.6202.2185.1116.1116 0 00.1386-.1097zm-5.2806.852l-.3296-.3282a.8266.8266 0 00-1.168 0l-.393.3922a.8199.8199 0 000 1.164l.3237.323c.0524.0515.1268.0397.1733-.0117.191-.259.3989-.507.6305-.7372.2374-.2362.48-.4437.7462-.6335.0575-.0354.0634-.1155.017-.1687zm3.5159 2.069v2.818c0 .081.0879.1392.1622.0987l2.5102-1.2964c.0574-.0287.0752-.0987.0464-.1552a3.1237 3.1237 0 00-2.603-1.574c-.0575 0-.115.0456-.115.1097l-.0008-.0009zm.0008 6.789c-2.0933.0005-3.7915-1.6912-3.7947-3.7804C5.9468 8.0821 7.6452 6.39 9.7387 6.391c2.0932-.0005 3.7911 1.6914 3.794 3.7804a3.7783 3.7783 0 01-1.1124 2.675 3.7936 3.7936 0 01-2.6824 1.1054h.0008zM9.738 4.8002c-1.9218 0-3.6975 1.0232-4.6584 2.6841a5.359 5.359 0 000 5.3683c.9609 1.661 2.7366 2.6841 4.6584 2.6841a5.3891 5.3891 0 003.8073-1.5725 5.3675 5.3675 0 001.578-3.7987 5.3574 5.3574 0 00-1.5771-3.797A5.379 5.379 0 009.7387 4.801l-.0008-.0008z", fill: "currentColor", fillRule: "evenodd" }) }) }));
10
+ return (jsx_runtime_1.jsx("a", { style: link, href: "https://www.algolia.com/ref/docsearch/?utm_source=www.remotion.dev&utm_medium=referral&utm_content=powered_by&utm_campaign=docsearch", target: "_blank", rel: "noopener noreferrer", children: jsx_runtime_1.jsx("svg", { width: "77", height: "19", "aria-label": "Algolia", role: "img", children: jsx_runtime_1.jsx("path", { d: "M2.5067 0h14.0245c1.384.001 2.5058 1.1205 2.5068 2.5017V16.5c-.0014 1.3808-1.1232 2.4995-2.5068 2.5H2.5067C1.1232 18.9995.0014 17.8808 0 16.5V2.4958A2.495 2.495 0 01.735.7294 2.505 2.505 0 012.5068 0zM37.95 15.0695c-3.7068.0168-3.7068-2.986-3.7068-3.4634L34.2372.3576 36.498 0v11.1794c0 .2715 0 1.9889 1.452 1.994v1.8961zm-9.1666-1.8388c.694 0 1.2086-.0397 1.5678-.1088v-2.2934a5.3639 5.3639 0 00-1.3303-.1679 4.8283 4.8283 0 00-.758.0582 2.2845 2.2845 0 00-.688.2024c-.2029.0979-.371.2362-.4919.4142-.1268.1788-.185.2826-.185.5533 0 .5297.185.8359.5205 1.0375.3355.2016.7928.3053 1.365.3053v-.0008zm-.1969-8.1817c.7463 0 1.3768.092 1.8856.2767.5088.1838.9195.4428 1.2204.7717.3068.334.5147.7777.6423 1.251.1327.4723.196.991.196 1.5603v5.798c-.5235.1036-1.05.192-1.5787.2649-.7048.1037-1.4976.156-2.3774.156-.5832 0-1.1215-.0582-1.6016-.167a3.385 3.385 0 01-1.2432-.5364 2.6034 2.6034 0 01-.8037-.9565c-.191-.3922-.29-.9447-.29-1.5208 0-.5533.11-.905.3246-1.2863a2.7351 2.7351 0 01.8849-.9329c.376-.242.8029-.415 1.2948-.5187a7.4517 7.4517 0 011.5381-.156 7.1162 7.1162 0 011.6667.2024V8.886c0-.259-.0296-.5061-.093-.7372a1.5847 1.5847 0 00-.3245-.6158 1.5079 1.5079 0 00-.6119-.4158 2.6788 2.6788 0 00-.966-.173c-.5206 0-.9948.0634-1.4283.1384a6.5481 6.5481 0 00-1.065.259l-.2712-1.849c.2831-.0986.7048-.1964 1.2491-.2943a9.2979 9.2979 0 011.752-.1501v.0008zm44.6597 8.1193c.6947 0 1.2086-.0405 1.567-.1097v-2.2942a5.3743 5.3743 0 00-1.3303-.1679c-.2485 0-.503.0177-.7573.0582a2.2853 2.2853 0 00-.688.2024 1.2333 1.2333 0 00-.4918.4142c-.1268.1788-.1843.2826-.1843.5533 0 .5297.1843.8359.5198 1.0375.3414.2066.7927.3053 1.365.3053v.0009zm-.191-8.1767c.7463 0 1.3768.0912 1.8856.2759.5087.1847.9195.4436 1.2204.7717.3.329.5147.7786.6414 1.251a5.7248 5.7248 0 01.197 1.562v5.7972c-.3466.0742-.874.1602-1.5788.2648-.7049.1038-1.4976.1552-2.3774.1552-.5832 0-1.1215-.0573-1.6016-.167a3.385 3.385 0 01-1.2432-.5356 2.6034 2.6034 0 01-.8038-.9565c-.191-.3922-.2898-.9447-.2898-1.5216 0-.5533.1098-.905.3245-1.2854a2.7373 2.7373 0 01.8849-.9338c.376-.2412.8029-.4141 1.2947-.5178a7.4545 7.4545 0 012.325-.1097c.2781.0287.5672.081.879.156v-.3686a2.7781 2.7781 0 00-.092-.738 1.5788 1.5788 0 00-.3246-.6166 1.5079 1.5079 0 00-.612-.415 2.6797 2.6797 0 00-.966-.1729c-.5205 0-.9947.0633-1.4282.1384a6.5608 6.5608 0 00-1.065.259l-.2712-1.8498c.283-.0979.7048-.1957 1.2491-.2935a9.8597 9.8597 0 011.752-.1494zm-6.79-1.072c-.7576.001-1.373-.6103-1.3759-1.3664 0-.755.6128-1.3664 1.376-1.3664.764 0 1.3775.6115 1.3775 1.3664s-.6195 1.3664-1.3776 1.3664zm1.1393 11.1507h-2.2726V5.3409l2.2734-.3568v10.0845l-.0008.0017zm-3.984 0c-3.707.0168-3.707-2.986-3.707-3.4642L59.7069.3576 61.9685 0v11.1794c0 .2715 0 1.9889 1.452 1.994V15.0703zm-7.3512-4.979c0-.975-.2138-1.7873-.6305-2.3516-.4167-.571-.9998-.852-1.747-.852-.7454 0-1.3302.281-1.7452.852-.4166.5702-.6195 1.3765-.6195 2.3516 0 .9851.208 1.6473.6254 2.2183.4158.576.9998.8587 1.7461.8587.7454 0 1.3303-.2885 1.747-.8595.4158-.5761.6237-1.2315.6237-2.2184v.0009zm2.3132-.006c0 .7609-.1099 1.3361-.3356 1.9654a4.654 4.654 0 01-.9533 1.6076A4.214 4.214 0 0155.613 14.69c-.579.2412-1.4697.3795-1.9143.3795-.4462-.005-1.3303-.1324-1.9033-.3795a4.307 4.307 0 01-1.474-1.0316c-.4115-.4445-.7293-.9801-.9609-1.6076a5.3423 5.3423 0 01-.3465-1.9653c0-.7608.104-1.493.3356-2.1155a4.683 4.683 0 01.9719-1.5958 4.3383 4.3383 0 011.479-1.0257c.5739-.242 1.2043-.3567 1.8864-.3567.6829 0 1.3125.1197 1.8906.3567a4.1245 4.1245 0 011.4816 1.0257 4.7587 4.7587 0 01.9592 1.5958c.2426.6225.3643 1.3547.3643 2.1155zm-17.0198 0c0 .9448.208 1.9932.6238 2.431.4166.4386.955.6579 1.6142.6579.3584 0 .6998-.0523 1.0176-.1502.3186-.0978.5721-.2134.775-.3517V7.0784a8.8706 8.8706 0 00-1.4926-.1906c-.8206-.0236-1.4452.312-1.8847.8468-.4335.5365-.6533 1.476-.6533 2.3516v-.0008zm6.2863 4.4485c0 1.5385-.3938 2.662-1.1866 3.3773-.791.7136-2.0005 1.0712-3.6308 1.0712-.5958 0-1.834-.1156-2.8228-.334l.3643-1.7865c.8282.173 1.9202.2193 2.4932.2193.9077 0 1.555-.1847 1.943-.5533.388-.3686.578-.916.578-1.643v-.3687a6.8289 6.8289 0 01-.8848.3349c-.3634.1096-.786.167-1.261.167-.6246 0-1.1917-.0979-1.7055-.2944a3.5554 3.5554 0 01-1.3244-.8645c-.3642-.3796-.6541-.8579-.8561-1.4289-.2028-.571-.3068-1.59-.3068-2.339 0-.7034.1099-1.5856.3245-2.1735.2198-.5871.5316-1.0949.9542-1.515.4167-.42.9255-.743 1.5213-.98a5.5923 5.5923 0 012.052-.3855c.7353 0 1.4114.092 2.0707.2024.6592.1088 1.2204.2236 1.6776.35v8.945-.0008zM11.5026 4.2418v-.6511c-.0005-.4553-.3704-.8241-.8266-.8241H8.749c-.4561 0-.826.3688-.8265.824v.669c0 .0742.0693.1264.1445.1096a6.0346 6.0346 0 011.6768-.2362 6.125 6.125 0 011.6202.2185.1116.1116 0 00.1386-.1097zm-5.2806.852l-.3296-.3282a.8266.8266 0 00-1.168 0l-.393.3922a.8199.8199 0 000 1.164l.3237.323c.0524.0515.1268.0397.1733-.0117.191-.259.3989-.507.6305-.7372.2374-.2362.48-.4437.7462-.6335.0575-.0354.0634-.1155.017-.1687zm3.5159 2.069v2.818c0 .081.0879.1392.1622.0987l2.5102-1.2964c.0574-.0287.0752-.0987.0464-.1552a3.1237 3.1237 0 00-2.603-1.574c-.0575 0-.115.0456-.115.1097l-.0008-.0009zm.0008 6.789c-2.0933.0005-3.7915-1.6912-3.7947-3.7804C5.9468 8.0821 7.6452 6.39 9.7387 6.391c2.0932-.0005 3.7911 1.6914 3.794 3.7804a3.7783 3.7783 0 01-1.1124 2.675 3.7936 3.7936 0 01-2.6824 1.1054h.0008zM9.738 4.8002c-1.9218 0-3.6975 1.0232-4.6584 2.6841a5.359 5.359 0 000 5.3683c.9609 1.661 2.7366 2.6841 4.6584 2.6841a5.3891 5.3891 0 003.8073-1.5725 5.3675 5.3675 0 001.578-3.7987 5.3574 5.3574 0 00-1.5771-3.797A5.379 5.379 0 009.7387 4.801l-.0008-.0008z", fill: colors_1.CURRENT_COLOR, fillRule: "evenodd" }) }) }));
10
11
  };
11
12
  exports.AlgoliaCredit = AlgoliaCredit;
package/dist/components/QuickSwitcher/QuickSwitcherContent.js CHANGED
@@ -45,7 +45,7 @@ const modeInactive = {
45
45
  };
46
46
  const modeActive = {
47
47
  ...modeItem,
48
- color: 'white',
48
+ color: colors_1.WHITE,
49
49
  fontWeight: 'bold',
50
50
  };
51
51
  const content = {
package/dist/components/QuickSwitcher/QuickSwitcherResult.js CHANGED
@@ -87,12 +87,12 @@ const QuickSwitcherResult = ({ result, selected }) => {
87
87
  color: result.type === 'search-result'
88
88
  ? colors_1.LIGHT_TEXT
89
89
  : selected || hovered
90
- ? 'white'
90
+ ? colors_1.WHITE
91
91
  : colors_1.LIGHT_TEXT,
92
92
  fontSize: shared_1.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE,
93
93
  };
94
94
  }, [hovered, result.type, selected]);
95
- return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
95
+ return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
96
96
  jsx_runtime_1.jsx("div", {
97
97
  // eslint-disable-next-line react/no-danger
98
98
  dangerouslySetInnerHTML: {
package/dist/components/RefreshCompositionOverlay.js CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.RefreshCompositionOverlay = exports.container = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const remotion_1 = require("remotion");
6
+ const colors_1 = require("../helpers/colors");
6
7
  const RunningCalculateMetadata_1 = require("./RunningCalculateMetadata");
7
8
  exports.container = {
8
9
  justifyContent: 'flex-end',
@@ -11,7 +12,7 @@ exports.container = {
11
12
  pointerEvents: 'none',
12
13
  };
13
14
  const shadow = {
14
- boxShadow: '0 0 4px black',
15
+ boxShadow: colors_1.SHADOW_BLACK,
15
16
  };
16
17
  const RefreshCompositionOverlay = () => {
17
18
  return (jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: exports.container, children: jsx_runtime_1.jsx("div", { style: shadow, children: jsx_runtime_1.jsx(RunningCalculateMetadata_1.RunningCalculateMetadata, {}) }) }));
package/dist/components/RenderButton.js CHANGED
@@ -28,7 +28,7 @@ const splitButtonContainer = {
28
28
  flexDirection: 'row',
29
29
  alignItems: 'stretch',
30
30
  borderRadius: 4,
31
- border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
31
+ border: `1px solid ${colors_1.BLACK_ALPHA_60}`,
32
32
  backgroundColor: colors_1.INPUT_BACKGROUND,
33
33
  overflow: 'hidden',
34
34
  };
@@ -37,9 +37,9 @@ const mainButtonStyle = {
37
37
  paddingRight: 7,
38
38
  paddingTop: 7,
39
39
  paddingBottom: 7,
40
- background: 'transparent',
40
+ background: colors_1.TRANSPARENT,
41
41
  border: 'none',
42
- color: 'white',
42
+ color: colors_1.WHITE,
43
43
  cursor: 'pointer',
44
44
  display: 'flex',
45
45
  alignItems: 'center',
@@ -48,7 +48,7 @@ const mainButtonStyle = {
48
48
  };
49
49
  const dividerStyle = {
50
50
  width: 1,
51
- backgroundColor: colors_1.INPUT_BORDER_COLOR_UNHOVERED,
51
+ backgroundColor: colors_1.BLACK_ALPHA_60,
52
52
  alignSelf: 'stretch',
53
53
  };
54
54
  const dropdownTriggerStyle = {
@@ -56,9 +56,9 @@ const dropdownTriggerStyle = {
56
56
  paddingRight: 6,
57
57
  paddingTop: 7,
58
58
  paddingBottom: 7,
59
- background: 'transparent',
59
+ background: colors_1.TRANSPARENT,
60
60
  border: 'none',
61
- color: 'white',
61
+ color: colors_1.WHITE,
62
62
  cursor: 'pointer',
63
63
  display: 'flex',
64
64
  alignItems: 'center',
@@ -167,7 +167,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
167
167
  return {
168
168
  style: {
169
169
  height: 16,
170
- color: 'currentColor',
170
+ color: colors_1.CURRENT_COLOR,
171
171
  },
172
172
  };
173
173
  }, []);
@@ -271,6 +271,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
271
271
  initialMuted: null,
272
272
  initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
273
273
  initialAllowHtmlInCanvas: defaults.allowHtmlInCanvas,
274
+ initialPageResponsiveness: 'medium',
274
275
  });
275
276
  }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
276
277
  const onClick = (0, react_1.useCallback)(() => {
@@ -397,7 +398,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
397
398
  const containerStyle = (0, react_1.useMemo)(() => {
398
399
  return {
399
400
  ...splitButtonContainer,
400
- borderColor: colors_1.INPUT_BORDER_COLOR_UNHOVERED,
401
+ borderColor: colors_1.BLACK_ALPHA_60,
401
402
  opacity: canRender ? 1 : 0.7,
402
403
  cursor: canRender ? 'pointer' : 'inherit',
403
404
  };
@@ -422,7 +423,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
422
423
  return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
423
424
  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.jsxs("div", { ref: containerRef, style: containerStyle, title: tooltip, children: [
424
425
  jsx_runtime_1.jsx("button", { type: "button", style: mainButtonStyle, onClick: onClick, id: "render-modal-button", disabled: !canRender, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: mainButtonContent, children: [
425
- jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: "currentcolor", svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("span", { style: label, children: renderLabel })
426
+ jsx_runtime_1.jsx(render_1.ThinRenderIcon, { fill: colors_1.CURRENT_COLOR_LOWERCASE, svgProps: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("span", { style: label, children: renderLabel })
426
427
  ] }) }), shouldShowDropdown ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
427
428
  jsx_runtime_1.jsx("div", { style: dividerStyle }), jsx_runtime_1.jsx("button", { ref: dropdownRef, type: "button", style: dropdownTriggerStyle, disabled: !readOnlyStudio && connectionStatus !== 'connected', className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, onPointerDown: onPointerDown, onClick: onClickDropdown, children: jsx_runtime_1.jsx(caret_1.CaretDown, {}) })
428
429
  ] })) : null] }), portalStyle
package/dist/components/RenderModal/CliCopyButton.js CHANGED
@@ -31,7 +31,7 @@ const CliCopyButton = ({ valueToCopy, }) => {
31
31
  const [copied, setCopied] = (0, react_1.useState)(false);
32
32
  const [hovered, setHovered] = (0, react_1.useState)(false);
33
33
  const fillColor = (0, react_1.useMemo)(() => {
34
- return hovered ? 'white' : colors_1.LIGHT_TEXT;
34
+ return hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT;
35
35
  }, [hovered]);
36
36
  const clipboardIcon = jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: fillColor, style: svgStyle });
37
37
  const checkSvg = (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: svgStyle, children: jsx_runtime_1.jsx("path", { fill: fillColor, d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }) }));
package/dist/components/RenderModal/ClientRenderProgress.js CHANGED
@@ -17,7 +17,7 @@ const progressItem = {
17
17
  const label = {
18
18
  fontSize: 14,
19
19
  width: 400,
20
- color: 'white',
20
+ color: colors_1.WHITE,
21
21
  };
22
22
  const right = {
23
23
  fontSize: 14,
package/dist/components/RenderModal/DataEditor.js CHANGED
@@ -82,7 +82,7 @@ const controlContainer = {
82
82
  flexDirection: 'column',
83
83
  display: 'flex',
84
84
  padding: 12,
85
- borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
85
+ borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
86
86
  };
87
87
  const inspectorControlContainer = {
88
88
  ...controlContainer,
package/dist/components/RenderModal/GuiRenderStatus.js CHANGED
@@ -18,7 +18,7 @@ const progressItem = {
18
18
  const label = {
19
19
  fontSize: 14,
20
20
  width: 400,
21
- color: 'white',
21
+ color: colors_1.WHITE,
22
22
  };
23
23
  const right = {
24
24
  fontSize: 14,
package/dist/components/RenderModal/InfoBubble.js CHANGED
@@ -103,7 +103,7 @@ const InfoBubble = ({ title, children }) => {
103
103
  ...container,
104
104
  userSelect: 'none',
105
105
  WebkitUserSelect: 'none',
106
- color: 'white',
106
+ color: colors_1.WHITE,
107
107
  display: 'inline-flex',
108
108
  flexDirection: 'row',
109
109
  alignItems: 'center',
@@ -111,7 +111,7 @@ const InfoBubble = ({ title, children }) => {
111
111
  };
112
112
  }, []);
113
113
  return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
114
- 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 ? '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
114
+ 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
115
115
  ? 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, children: children }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
116
116
  : null] }));
117
117
  };
package/dist/components/RenderModal/InfoTooltip.js CHANGED
@@ -25,8 +25,8 @@ const InfoTooltip = ({ children, arrowDirection, backgroundColor }) => {
25
25
  return {
26
26
  boxShadow: arrowDirection === 'down' ? styles_1.SHADOW_TOWARDS_TOP : styles_1.SHADOW_TOWARDS_BOTTOM,
27
27
  background: backgroundColor,
28
- color: 'white',
29
- border: '0.5px solid ' + colors_1.BORDER_COLOR,
28
+ color: colors_1.WHITE,
29
+ border: '0.5px solid ' + colors_1.BLACK_HEX,
30
30
  maxHeight: 200,
31
31
  overflow: 'auto',
32
32
  borderRadius: '4px',
@@ -37,6 +37,6 @@ const InfoTooltip = ({ children, arrowDirection, backgroundColor }) => {
37
37
  flexDirection: arrowDirection === 'up' ? 'column-reverse' : 'column',
38
38
  alignItems: 'flex-start',
39
39
  }, children: [
40
- jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowDown, children: jsx_runtime_1.jsx("path", { d: `M 14 0 L 7 7 L 0 0`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowUp, children: jsx_runtime_1.jsx("path", { d: `M 0 7 L 7 0 L 14 7`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null] }));
40
+ jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }), arrowDirection === 'down' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowDown, children: jsx_runtime_1.jsx("path", { d: `M 14 0 L 7 7 L 0 0`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BLACK_HEX, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? (jsx_runtime_1.jsx("svg", { viewBox: "0 0 14 7", style: arrowUp, children: jsx_runtime_1.jsx("path", { d: `M 0 7 L 7 0 L 14 7`, fill: backgroundColor, strokeLinecap: "butt", stroke: colors_1.BLACK_HEX, strokeWidth: 0.5 }) })) : null] }));
41
41
  };
42
42
  exports.InfoTooltip = InfoTooltip;
package/dist/components/RenderModal/InlineEyeIcon.js CHANGED
@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.InlineEyeButton = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
+ const colors_1 = require("../../helpers/colors");
6
7
  const InlineAction_1 = require("../InlineAction");
7
8
  const clearIcon = {
8
9
  height: 14,
9
- color: 'currentColor',
10
+ color: colors_1.CURRENT_COLOR,
10
11
  };
11
12
  const InlineEyeButton = ({ onClick, enabled }) => {
12
13
  const renderAction = (0, react_1.useCallback)((color) => {
package/dist/components/RenderModal/InlineRemoveButton.js CHANGED
@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.InlineRemoveButton = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
+ const colors_1 = require("../../helpers/colors");
6
7
  const InlineAction_1 = require("../InlineAction");
7
8
  const clearIcon = {
8
9
  height: 14,
9
- color: 'currentColor',
10
+ color: colors_1.CURRENT_COLOR,
10
11
  };
11
12
  const InlineRemoveButton = ({ onClick }) => {
12
13
  const renderAction = (0, react_1.useCallback)((color) => {
package/dist/components/RenderModal/MultiRangeSlider.js CHANGED
@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const colors_1 = require("../../helpers/colors");
7
7
  const container = {
8
- borderColor: 'black',
8
+ borderColor: colors_1.BLACK,
9
9
  borderStyle: 'solid',
10
10
  borderWidth: '2px',
11
11
  height: 39,
package/dist/components/RenderModal/OptionExplainer.d.ts CHANGED
@@ -1,5 +1,15 @@
1
1
  import type { AnyRemotionOption } from '@remotion/renderer';
2
2
  import React from 'react';
3
+ export type OptionExplainerOption = Pick<AnyRemotionOption<unknown>, 'name' | 'description' | 'docLink' | 'ssrName'> & {
4
+ readonly cliFlag?: string;
5
+ };
6
+ export type OptionExplainerInfoRow = {
7
+ readonly label: string;
8
+ readonly value: string;
9
+ };
3
10
  export declare const OptionExplainer: React.FC<{
4
- readonly option: AnyRemotionOption<unknown>;
11
+ readonly option: OptionExplainerOption;
12
+ readonly extraInfoRows?: readonly OptionExplainerInfoRow[];
13
+ readonly showApiOption?: boolean;
14
+ readonly showCliFlag?: boolean;
5
15
  }>;
package/dist/components/RenderModal/OptionExplainer.js CHANGED
@@ -11,6 +11,7 @@ const container = {
11
11
  paddingTop: 10,
12
12
  paddingBottom: 10,
13
13
  backgroundColor: colors_1.INPUT_BACKGROUND,
14
+ color: colors_1.WHITE,
14
15
  };
15
16
  const padding = {
16
17
  paddingLeft: 20,
@@ -21,13 +22,15 @@ const title = {
21
22
  };
22
23
  const DESCRIPTION_FONT_SIZE_PX = 14;
23
24
  const description = {
25
+ color: colors_1.LIGHT_TEXT,
24
26
  fontSize: DESCRIPTION_FONT_SIZE_PX,
27
+ lineHeight: 1.5,
25
28
  maxWidth: 400,
26
29
  };
27
30
  const link = {
28
31
  fontSize: 14,
29
32
  maxWidth: 200,
30
- color: '#0b84f3',
33
+ color: colors_1.BLUE,
31
34
  wordWrap: 'break-word',
32
35
  textDecoration: 'none',
33
36
  };
@@ -41,7 +44,7 @@ const infoRow = {
41
44
  const infoRowLabel = {
42
45
  width: 150,
43
46
  fontSize: 14,
44
- color: 'white',
47
+ color: colors_1.WHITE,
45
48
  };
46
49
  const flexSpacer = {
47
50
  display: 'flex',
@@ -51,7 +54,10 @@ const copyWrapper = {
51
54
  display: 'flex',
52
55
  justifyContent: 'flex-end',
53
56
  };
54
- const OptionExplainer = ({ option }) => {
57
+ const OptionExplainer = ({ option, extraInfoRows = [], showApiOption = true, showCliFlag = true, }) => {
58
+ const shouldShowApiOption = showApiOption && option.ssrName !== null;
59
+ const shouldShowCliFlag = showCliFlag && option.cliFlag !== undefined;
60
+ const hasInfoRows = extraInfoRows.length > 0 || shouldShowCliFlag || shouldShowApiOption;
55
61
  return (jsx_runtime_1.jsxs("div", { style: container, className: "__remotion-info-button-container", children: [
56
62
  jsx_runtime_1.jsxs("div", { style: padding, children: [
57
63
  jsx_runtime_1.jsxs("div", { children: [
@@ -59,19 +65,33 @@ const OptionExplainer = ({ option }) => {
59
65
  jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" })
60
66
  ] })) : null] }), jsx_runtime_1.jsxs("div", { style: description, children: [
61
67
  jsx_runtime_1.jsx("style", { children: `
62
- .__remotion-option-explainer-description a,
63
- .__remotion-option-explainer-description code {
68
+ .__remotion-option-explainer-description,
69
+ .__remotion-option-explainer-description * {
70
+ color: inherit;
64
71
  font-size: ${DESCRIPTION_FONT_SIZE_PX}px;
72
+ line-height: inherit;
73
+ }
74
+
75
+ .__remotion-option-explainer-description a {
76
+ color: ${colors_1.BLUE};
77
+ text-decoration: none;
78
+ }
79
+
80
+ .__remotion-option-explainer-description code {
81
+ color: ${colors_1.BLUE};
82
+ font-family: monospace;
65
83
  }
66
84
  ` }), jsx_runtime_1.jsx("div", { className: "__remotion-option-explainer-description", children: option.description('ssr') })
67
85
  ] })
68
- ] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5, block: true }), jsx_runtime_1.jsx(MenuDivider_1.MenuDivider, {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5, block: true }), jsx_runtime_1.jsxs("div", { children: [
69
- jsx_runtime_1.jsxs("div", { style: infoRow, children: [
70
- jsx_runtime_1.jsx("div", { style: infoRowLabel, children: "CLI flag" }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsxs("code", { children: ["--", option.cliFlag] }), jsx_runtime_1.jsx("div", { style: copyWrapper, children: jsx_runtime_1.jsx(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })
71
- ] }), option.ssrName ? (jsx_runtime_1.jsxs("div", { style: infoRow, children: [
72
- jsx_runtime_1.jsx("div", { style: infoRowLabel, children: "Node.JS option" }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsx("code", { children: option.ssrName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 3.75 })
73
- ] })) : null, jsx_runtime_1.jsx("div", { style: infoRow })
74
- ] })
75
- ] }));
86
+ ] }), hasInfoRows ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
87
+ jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5, block: true }), jsx_runtime_1.jsx(MenuDivider_1.MenuDivider, {}), jsx_runtime_1.jsx(layout_1.Spacing, { y: 0.5, block: true }), jsx_runtime_1.jsxs("div", { children: [extraInfoRows.map((row) => (jsx_runtime_1.jsxs("div", { style: infoRow, children: [
88
+ jsx_runtime_1.jsx("div", { style: infoRowLabel, children: row.label }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsx("code", { children: row.value }), jsx_runtime_1.jsx("div", { style: copyWrapper, children: jsx_runtime_1.jsx(CliCopyButton_1.CliCopyButton, { valueToCopy: row.value }) })
89
+ ] }, row.label))), shouldShowCliFlag ? (jsx_runtime_1.jsxs("div", { style: infoRow, children: [
90
+ jsx_runtime_1.jsx("div", { style: infoRowLabel, children: "CLI flag" }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsxs("code", { children: ["--", option.cliFlag] }), jsx_runtime_1.jsx("div", { style: copyWrapper, children: jsx_runtime_1.jsx(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })
91
+ ] })) : null, shouldShowApiOption ? (jsx_runtime_1.jsxs("div", { style: infoRow, children: [
92
+ jsx_runtime_1.jsx("div", { style: infoRowLabel, children: "API option" }), jsx_runtime_1.jsx("div", { style: flexSpacer }), jsx_runtime_1.jsx("code", { children: option.ssrName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 3.75 })
93
+ ] })) : null, jsx_runtime_1.jsx("div", { style: infoRow })
94
+ ] })
95
+ ] })) : null] }));
76
96
  };
77
97
  exports.OptionExplainer = OptionExplainer;
package/dist/components/RenderModal/OptionExplainerBubble.d.ts CHANGED
@@ -1,4 +1,18 @@
1
1
  import type { AvailableOptions } from '@remotion/renderer/client';
2
+ import { type OptionExplainerInfoRow } from './OptionExplainer';
2
3
  export declare const OptionExplainerBubble: React.FC<{
3
- id: AvailableOptions;
4
+ readonly id: AvailableOptions;
5
+ readonly extraInfoRows?: readonly OptionExplainerInfoRow[];
6
+ readonly showApiOption?: boolean;
7
+ readonly showCliFlag?: boolean;
8
+ }>;
9
+ export declare const WebRendererOptionExplainerBubble: React.FC<{
10
+ readonly id: AvailableOptions;
11
+ readonly apiName: string;
12
+ }>;
13
+ export declare const WebRendererCustomOptionExplainerBubble: React.FC<{
14
+ readonly apiName: string;
15
+ readonly description: React.ReactNode;
16
+ readonly docLink: string | null;
17
+ readonly name: string;
4
18
  }>;
package/dist/components/RenderModal/OptionExplainerBubble.js CHANGED
@@ -1,12 +1,26 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.OptionExplainerBubble = void 0;
3
+ exports.WebRendererCustomOptionExplainerBubble = exports.WebRendererOptionExplainerBubble = exports.OptionExplainerBubble = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const client_1 = require("@remotion/renderer/client");
6
6
  const InfoBubble_1 = require("./InfoBubble");
7
7
  const OptionExplainer_1 = require("./OptionExplainer");
8
- const OptionExplainerBubble = ({ id }) => {
8
+ const OptionExplainerBubble = ({ id, extraInfoRows, showApiOption, showCliFlag }) => {
9
9
  const option = client_1.BrowserSafeApis.options[id];
10
- return (jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: jsx_runtime_1.jsx(OptionExplainer_1.OptionExplainer, { option: option }) }));
10
+ 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 }) }));
11
11
  };
12
12
  exports.OptionExplainerBubble = OptionExplainerBubble;
13
+ const WebRendererOptionExplainerBubble = ({ id, apiName }) => {
14
+ return (jsx_runtime_1.jsx(exports.OptionExplainerBubble, { extraInfoRows: [{ label: 'API option', value: apiName }], id: id, showApiOption: false, showCliFlag: false }));
15
+ };
16
+ exports.WebRendererOptionExplainerBubble = WebRendererOptionExplainerBubble;
17
+ const WebRendererCustomOptionExplainerBubble = ({ apiName, description, docLink, name }) => {
18
+ const option = {
19
+ description: () => description,
20
+ docLink,
21
+ name,
22
+ ssrName: null,
23
+ };
24
+ 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 }) }));
25
+ };
26
+ exports.WebRendererCustomOptionExplainerBubble = WebRendererCustomOptionExplainerBubble;
package/dist/components/RenderModal/RenderModalHr.js CHANGED
@@ -2,11 +2,12 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.RenderModalHr = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const colors_1 = require("../../helpers/colors");
5
6
  const hrStyle = {
6
7
  margin: '0 0 0 0',
7
8
  padding: '0 0 0 0',
8
9
  border: 'none',
9
- borderTop: '1px solid #000',
10
+ borderTop: colors_1.BORDER_BLACK,
10
11
  marginRight: 16,
11
12
  marginLeft: 16,
12
13
  marginTop: 8,
package/dist/components/RenderModal/RenderStatusModal.js CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.RenderStatusModal = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
+ const colors_1 = require("../../helpers/colors");
6
7
  const retry_payload_1 = require("../../helpers/retry-payload");
7
8
  const modals_1 = require("../../state/modals");
8
9
  const Button_1 = require("../Button");
@@ -22,7 +23,7 @@ const container = {
22
23
  paddingTop: 0,
23
24
  };
24
25
  const codeBlock = {
25
- backgroundColor: '#222',
26
+ backgroundColor: colors_1.RENDER_STATUS_BACKGROUND,
26
27
  whiteSpace: 'pre',
27
28
  padding: 12,
28
29
  borderRadius: 4,
package/dist/components/RenderModal/SchemaEditor/Fieldset.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  export declare const SCHEMA_EDITOR_FIELDSET_PADDING = 6;
3
3
  export declare const getSchemaEditorFieldsetPadding: () => number;
4
+ export declare const getSchemaEditorRootInset: (contentInset: number) => number;
4
5
  export declare const Fieldset: React.FC<{
5
6
  readonly children: React.ReactNode;
6
7
  readonly shouldPad: boolean;
package/dist/components/RenderModal/SchemaEditor/Fieldset.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Fieldset = exports.getSchemaEditorFieldsetPadding = exports.SCHEMA_EDITOR_FIELDSET_PADDING = void 0;
3
+ exports.Fieldset = exports.getSchemaEditorRootInset = exports.getSchemaEditorFieldsetPadding = exports.SCHEMA_EDITOR_FIELDSET_PADDING = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  exports.SCHEMA_EDITOR_FIELDSET_PADDING = 6;
@@ -8,6 +8,11 @@ const getSchemaEditorFieldsetPadding = () => {
8
8
  return exports.SCHEMA_EDITOR_FIELDSET_PADDING;
9
9
  };
10
10
  exports.getSchemaEditorFieldsetPadding = getSchemaEditorFieldsetPadding;
11
+ const getSchemaEditorRootInset = (contentInset) => {
12
+ const fieldsetPadding = (0, exports.getSchemaEditorFieldsetPadding)();
13
+ return Math.max(0, contentInset - fieldsetPadding);
14
+ };
15
+ exports.getSchemaEditorRootInset = getSchemaEditorRootInset;
11
16
  const AlreadyPaddedRightContext = (0, react_1.createContext)(false);
12
17
  const Fieldset = ({ children, shouldPad }) => {
13
18
  const alreadyPadded = (0, react_1.useContext)(AlreadyPaddedRightContext);
package/dist/components/RenderModal/SchemaEditor/SchemaEditor.js CHANGED
@@ -24,8 +24,7 @@ const getContainerStyle = ({ contentInset, scrollableContainer, }) => {
24
24
  if (contentInset === undefined) {
25
25
  return base;
26
26
  }
27
- const fieldsetPadding = (0, Fieldset_1.getSchemaEditorFieldsetPadding)();
28
- const rootInset = Math.max(0, contentInset - fieldsetPadding);
27
+ const rootInset = (0, Fieldset_1.getSchemaEditorRootInset)(contentInset);
29
28
  return {
30
29
  ...base,
31
30
  boxSizing: 'border-box',
package/dist/components/RenderModal/SchemaEditor/SchemaLabel.js CHANGED
@@ -23,11 +23,7 @@ const SchemaLabel = ({ jsonPath, onRemove, valid, suffix, handleClick }) => {
23
23
  return {
24
24
  fontFamily: 'monospace',
25
25
  fontSize: 12,
26
- color: valid
27
- ? clickableButtonHovered
28
- ? 'white'
29
- : colors_1.LIGHT_TEXT
30
- : colors_1.FAIL_COLOR,
26
+ color: valid ? (clickableButtonHovered ? colors_1.WHITE : colors_1.LIGHT_TEXT) : colors_1.FAIL_COLOR,
31
27
  lineHeight: '20px',
32
28
  };
33
29
  }, [clickableButtonHovered, valid]);
package/dist/components/RenderModal/SchemaEditor/SchemaResetButton.js CHANGED
@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.SchemaResetButton = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
+ const colors_1 = require("../../../helpers/colors");
6
7
  const InlineAction_1 = require("../../InlineAction");
7
8
  const icon = {
8
9
  height: 14,
9
- color: 'currentColor',
10
+ color: colors_1.CURRENT_COLOR,
10
11
  };
11
12
  const SchemaResetButton = ({ onClick }) => {
12
13
  const renderAction = (0, react_1.useCallback)((color) => {
package/dist/components/RenderModal/SchemaEditor/SchemaSeparationLine.js CHANGED
@@ -89,7 +89,7 @@ const SchemaArrayItemSeparationLine = ({ onChange, index, schema, isLast, showAd
89
89
  display: 'flex',
90
90
  flexDirection: 'column',
91
91
  alignItems: 'flex-end',
92
- }, children: [showAddButton && (jsx_runtime_1.jsx("div", { style: dynamicAddButtonStyle, onPointerEnter: onOuterMouseEnter, onPointerLeave: onOuterMouseLeave, children: jsx_runtime_1.jsx("div", { onClick: onAdd, style: inner, onPointerEnter: onInnerMouseEnter, onPointerLeave: onInnerMouseLeave, children: jsx_runtime_1.jsx(plus_1.Plus, { color: innerHovered ? 'white' : colors_1.LIGHT_TEXT, style: {
92
+ }, children: [showAddButton && (jsx_runtime_1.jsx("div", { style: dynamicAddButtonStyle, onPointerEnter: onOuterMouseEnter, onPointerLeave: onOuterMouseLeave, children: jsx_runtime_1.jsx("div", { onClick: onAdd, style: inner, onPointerEnter: onInnerMouseEnter, onPointerLeave: onInnerMouseLeave, children: jsx_runtime_1.jsx(plus_1.Plus, { color: innerHovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: {
93
93
  display: 'block',
94
94
  height: exports.VERTICAL_GUIDE_HEIGHT / 2,
95
95
  } }) }) })), jsx_runtime_1.jsx("div", { style: arraySeparationLine })
package/dist/components/RenderModal/SchemaEditor/SchemaVerticalGuide.js CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.SchemaVerticalGuide = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
+ const colors_1 = require("../../../helpers/colors");
6
7
  const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
7
8
  const flex = {
8
9
  flex: 1,
@@ -22,7 +23,7 @@ const SchemaVerticalGuide = ({ isRoot, children }) => {
22
23
  : {
23
24
  height: `calc(100% - ${SchemaSeparationLine_1.VERTICAL_GUIDE_HEIGHT / 2}px)`,
24
25
  width: 1,
25
- background: '#363A3E',
26
+ background: colors_1.LINE_COLOR,
26
27
  position: 'absolute',
27
28
  };
28
29
  }, [isRoot]);
package/dist/components/RenderModal/SchemaEditor/ZodDateEditor.js CHANGED
@@ -17,7 +17,7 @@ const fullWidth = {
17
17
  const explainer = {
18
18
  fontFamily: 'sans-serif',
19
19
  fontSize: 12,
20
- color: colors_1.VERY_LIGHT_TEXT,
20
+ color: colors_1.WHITE_ALPHA_30,
21
21
  };
22
22
  // This will do 2 things:
23
23
  // - Make the calendar icon white
package/dist/components/RenderModal/SchemaEditor/ZodErrorMessages.js CHANGED
@@ -15,7 +15,7 @@ const compactSchemaLabel = {
15
15
  fontSize: 12,
16
16
  };
17
17
  const jsonLabel = {
18
- color: 'white',
18
+ color: colors_1.WHITE,
19
19
  fontSize: 13,
20
20
  fontFamily: 'sans-serif',
21
21
  display: 'flex',
package/dist/components/RenderModal/SchemaEditor/ZodNonEditableValue.js CHANGED
@@ -10,7 +10,7 @@ const fullWidth = {
10
10
  };
11
11
  const emptyLabel = {
12
12
  width: '100%',
13
- color: colors_1.VERY_LIGHT_TEXT,
13
+ color: colors_1.WHITE_ALPHA_30,
14
14
  fontFamily: 'sans-serif',
15
15
  fontSize: 14,
16
16
  };
package/dist/components/RenderModal/SchemaEditor/create-zod-values.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.createZodValues = void 0;
4
+ const colors_1 = require("../../../helpers/colors");
4
5
  const zod_schema_type_1 = require("./zod-schema-type");
5
6
  const createZodValues = (schema, zodRuntime, zodTypes) => {
6
7
  var _a;
@@ -13,7 +14,7 @@ const createZodValues = (schema, zodRuntime, zodTypes) => {
13
14
  const description = (0, zod_schema_type_1.getZodSchemaDescription)(schema);
14
15
  if (zodTypes) {
15
16
  if (description === zodTypes.ZodZypesInternals.REMOTION_COLOR_BRAND) {
16
- return '#ffffff';
17
+ return colors_1.WHITE_FULL_HEX;
17
18
  }
18
19
  if (description === zodTypes.ZodZypesInternals.REMOTION_TEXTAREA_BRAND) {
19
20
  return '';