@remotion/studio 4.0.477 → 4.0.479

package/dist/components/RenderModal/SchemaEditor/ZodColorEditor.js

@@ -32,7 +32,7 @@ const ZodColorEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad })
     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: localValue.success, suffix: null }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
                     jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                            jsx_runtime_1.jsx(ColorPicker_1.ColorPicker, { value: value, status: status, onChange: onPickerChange, onChangeComplete: onPickerComplete, width: 45, height: 39, name: jsonPath.join('.') }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1, block: true }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: value, status: status, placeholder: jsonPath.join('.'), onChange: onTextChange, onBlur: onTextBlur, rightAlign: false })
+                            jsx_runtime_1.jsx(ColorPicker_1.ColorPicker, { value: value, status: status, onChange: onPickerChange, onChangeComplete: onPickerComplete, width: 45, height: 39, name: jsonPath.join('.') }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1, block: true }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: value, status: status, placeholder: jsonPath.join('.'), onChange: onTextChange, onBlur: onTextBlur, rightAlign: false, small: true })
                         ] }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: localValue })
                 ] })
         ] }));

package/dist/components/RenderModal/SchemaEditor/ZodDateEditor.js

@@ -55,7 +55,7 @@ const ZodDateEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad })
     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 }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
-                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: formatDate(value), type: "datetime-local", status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, onBlur: onBlur, style: inputStyle, rightAlign: false }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx("div", { style: explainer, children: "Date is in local format" }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: formatDate(value), type: "datetime-local", status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, onBlur: onBlur, style: inputStyle, rightAlign: false, small: true }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx("div", { style: explainer, children: "Date is in local format" }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
                 ] })
         ] }));
 };

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

@@ -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, valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator] })
+                    jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator], small: true })
                 ] }, 'replacement')),
         };
     }, [

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

@@ -39,7 +39,7 @@ const ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
     }, [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: true, children: [
-            jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value }) }), 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 }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, small: true }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodEnumEditor = ZodEnumEditor;

package/dist/components/RenderModal/SchemaEditor/ZodErrorMessages.d.ts

@@ -3,4 +3,5 @@ import type { ZodSafeParseResult } from './zod-schema-type';
 export declare const ZodErrorMessages: React.FC<{
     readonly zodValidationResult: ZodSafeParseResult;
     readonly viewTab: 'schema' | 'json';
+    readonly size?: 'default' | 'compact';
 }>;

package/dist/components/RenderModal/SchemaEditor/ZodErrorMessages.js

@@ -10,6 +10,10 @@ const schemaLabel = {
     fontSize: 14,
     color: colors_1.LIGHT_TEXT,
 };
+const compactSchemaLabel = {
+    ...schemaLabel,
+    fontSize: 12,
+};
 const jsonLabel = {
     color: 'white',
     fontSize: 13,
@@ -17,29 +21,42 @@ const jsonLabel = {
     display: 'flex',
     alignItems: 'center',
 };
+const compactJsonLabel = {
+    ...jsonLabel,
+    fontSize: 12,
+};
 const triangleStyle = {
     width: 12,
     height: 12,
     flexShrink: 0,
     fill: colors_1.FAIL_COLOR,
 };
-const ZodErrorMessages = ({ zodValidationResult, viewTab }) => {
+const compactTriangleStyle = {
+    ...triangleStyle,
+    width: 10,
+    height: 10,
+};
+const ZodErrorMessages = ({ zodValidationResult, viewTab, size = 'default' }) => {
     if (zodValidationResult.success) {
         throw new Error('Expected error');
     }
     const style = (0, react_1.useMemo)(() => {
-        return viewTab === 'json' ? jsonLabel : schemaLabel;
-    }, [viewTab]);
+        if (viewTab === 'json') {
+            return size === 'compact' ? compactJsonLabel : jsonLabel;
+        }
+        return size === 'compact' ? compactSchemaLabel : schemaLabel;
+    }, [size, viewTab]);
     const code = (0, react_1.useMemo)(() => {
         return {
-            ...schemaLabel,
+            ...(size === 'compact' ? compactSchemaLabel : schemaLabel),
             fontFamily: 'monospace',
         };
-    }, []);
+    }, [size]);
+    const finalTriangleStyle = size === 'compact' ? compactTriangleStyle : triangleStyle;
     if (viewTab === 'json') {
         return (jsx_runtime_1.jsx("div", { children: zodValidationResult.error.issues.map((error) => {
                 return (jsx_runtime_1.jsxs("div", { style: style, children: [
-                        jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: triangleStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), error.path.length === 0 ? 'Root' : error.path.join('.'), ":", ' ', error.message] }, error.path.join('.')));
+                        jsx_runtime_1.jsx(ValidationMessage_1.WarningTriangle, { style: finalTriangleStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: size === 'compact' ? 0.75 : 1 }), error.path.length === 0 ? 'Root' : error.path.join('.'), ":", ' ', error.message] }, error.path.join('.')));
             }) }));
     }
     return (jsx_runtime_1.jsx("div", { children: zodValidationResult.error.issues.map((error) => {

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

@@ -14,14 +14,14 @@ const stackTrace = {
     padding: 10,
 };
 const stackTraceLabel = {
-    fontSize: 14,
+    fontSize: 12,
 };
 const ZodFieldValidation = ({ zodValidation, path }) => {
     if (zodValidation.success) {
         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" }), 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, { title: "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/ZodNonEditableValue.js

@@ -16,7 +16,8 @@ const emptyLabel = {
 };
 const wideEmptyLabel = {
     ...emptyLabel,
-    lineHeight: '37px',
+    fontSize: 12,
+    lineHeight: '28px',
 };
 const ZonNonEditableValue = ({ jsonPath, label, mayPad }) => {
     return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [

package/dist/components/RenderModal/SchemaEditor/ZodNumberEditor.js

@@ -26,7 +26,7 @@ const ZodNumberEditor = ({ jsonPath, value, schema, setValue, onRemove, mayPad }
     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 }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
-                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: 'number', value: value, style: fullWidth, status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onTextChange: onTextChange, onValueChange: onNumberChange, onValueChangeEnd: onNumberChangeEnd, min: (0, zod_number_constraints_1.getZodNumberMinimum)(schema), max: (0, zod_number_constraints_1.getZodNumberMaximum)(schema), step: (0, zod_number_constraints_1.getZodNumberStep)(schema), rightAlign: false }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: 'number', value: value, style: fullWidth, status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onTextChange: onTextChange, onValueChange: onNumberChange, onValueChangeEnd: onNumberChangeEnd, min: (0, zod_number_constraints_1.getZodNumberMinimum)(schema), max: (0, zod_number_constraints_1.getZodNumberMaximum)(schema), step: (0, zod_number_constraints_1.getZodNumberStep)(schema), rightAlign: false, small: true }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/SchemaEditor/ZodObjectEditor.js

@@ -40,7 +40,6 @@ const react_2 = __importStar(require("react"));
 const layout_1 = require("../layout");
 const Fieldset_1 = require("./Fieldset");
 const SchemaLabel_1 = require("./SchemaLabel");
-const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
 const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
 const zod_schema_type_1 = require("./zod-schema-type");
 const zod_schema_type_2 = require("./zod-schema-type");
@@ -61,20 +60,19 @@ const ZodObjectEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad,
         return expanded ? ' {' : ' {...}';
     }, [expanded]);
     const zodValidation = (0, react_2.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: !isRoot && mayPad, children: [isRoot ? null : (jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, valid: zodValidation.success, handleClick: () => setExpanded(!expanded) })), expanded ? (jsx_runtime_1.jsx(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: isRoot, children: keys.map((key, i) => {
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: !isRoot && mayPad, children: [isRoot ? null : (jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, valid: zodValidation.success, handleClick: () => setExpanded(!expanded) })), expanded ? (jsx_runtime_1.jsx(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: isRoot, children: keys.map((key) => {
                     if (discriminatedUnionReplacement &&
                         key === discriminatedUnionReplacement.discriminator) {
                         return discriminatedUnionReplacement.markup;
                     }
-                    return (jsx_runtime_1.jsxs(react_2.default.Fragment, { children: [
-                            jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { mayPad: true, jsonPath: [...jsonPath, key], schema: shape[key], value: value[key], setValue: (val, { shouldSave }) => {
-                                    onChange((oldVal) => {
-                                        return {
-                                            ...oldVal,
-                                            [key]: typeof val === 'function' ? val(oldVal[key]) : val,
-                                        };
-                                    }, { shouldSave });
-                                }, onRemove: null }), i === keys.length - 1 ? null : jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
+                    return (jsx_runtime_1.jsx(react_2.default.Fragment, { children: jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { mayPad: true, jsonPath: [...jsonPath, key], schema: shape[key], value: value[key], setValue: (val, { shouldSave }) => {
+                                onChange((oldVal) => {
+                                    return {
+                                        ...oldVal,
+                                        [key]: typeof val === 'function' ? val(oldVal[key]) : val,
+                                    };
+                                }, { shouldSave });
+                            }, onRemove: null }) }, key));
                 }) })) : null, isRoot || !expanded ? null : jsx_runtime_1.jsx("div", { style: layout_1.fieldsetLabel, children: '}' })] }));
 };
 exports.ZodObjectEditor = ZodObjectEditor;

package/dist/components/RenderModal/SchemaEditor/ZodOrNullishEditor.js

@@ -15,7 +15,7 @@ const zod_schema_type_1 = require("./zod-schema-type");
 const ZodSwitch_1 = require("./ZodSwitch");
 const labelStyle = {
     fontFamily: 'sans-serif',
-    fontSize: 14,
+    fontSize: 12,
     color: colors_1.LIGHT_TEXT,
 };
 const checkBoxWrapper = {

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

@@ -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 }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value }) }), 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 }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, small: true }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };
 exports.ZodStaticFileEditor = ZodStaticFileEditor;

package/dist/components/RenderModal/SchemaEditor/ZodStringEditor.js

@@ -27,7 +27,7 @@ const ZodStringEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad }
     }, [setValue, 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 }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
-                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: value, status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, onBlur: onBlur, rightAlign: false, name: jsonPath.join('.') }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: value, status: zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, onBlur: onBlur, rightAlign: false, name: jsonPath.join('.'), small: true }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/SchemaEditor/ZodTextareaEditor.js

@@ -67,7 +67,7 @@ const ZodTextareaEditor = ({ jsonPath, value, setValue, schema, onRemove, mayPad
     const zodValidation = react_1.default.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 }), jsx_runtime_1.jsxs("div", { style: fullWidth, children: [
-                    jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { onChange: onChange, onBlur: onBlur, value: value, status: zodValidation ? 'ok' : 'error', placeholder: jsonPath.join('.'), name: jsonPath.join('.'), style: textareaStyle }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
+                    jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { onChange: onChange, onBlur: onBlur, value: value, status: zodValidation ? 'ok' : 'error', placeholder: jsonPath.join('.'), name: jsonPath.join('.'), style: textareaStyle, small: true }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
                 ] })
         ] }));
 };

package/dist/components/RenderModal/WarningIndicatorButton.d.ts

@@ -3,4 +3,5 @@ export declare const WarningIndicatorButton: React.FC<{
     readonly setShowWarning: React.Dispatch<React.SetStateAction<boolean>>;
     readonly showWarning: boolean;
     readonly warningCount: number;
+    readonly size?: 'default' | 'compact';
 }>;

package/dist/components/RenderModal/WarningIndicatorButton.js

@@ -21,31 +21,44 @@ const style = {
     paddingTop: 4,
     paddingBottom: 4,
 };
+const compactStyle = {
+    ...style,
+    fontSize: 11,
+    paddingBottom: 2,
+    paddingLeft: 6,
+    paddingRight: 6,
+    paddingTop: 2,
+};
 const triangleStyle = {
     width: 12,
     height: 12,
     flexShrink: 0,
     fill: colors_1.WARNING_COLOR,
 };
+const compactTriangleStyle = {
+    ...triangleStyle,
+    height: 10,
+    width: 10,
+};
 const WarningTriangle = (props) => {
     return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 576 512", ...props, children: jsx_runtime_1.jsx("path", { d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
 };
-const WarningIndicatorButton = ({ setShowWarning, showWarning, warningCount }) => {
+const WarningIndicatorButton = ({ setShowWarning, showWarning, warningCount, size = 'default' }) => {
     const onClick = (0, react_1.useCallback)(() => {
         setShowWarning((s) => !s);
     }, [setShowWarning]);
     const buttonStyle = (0, react_1.useMemo)(() => {
         return {
-            ...style,
+            ...(size === 'compact' ? compactStyle : style),
             backgroundColor: showWarning ? colors_1.INPUT_BACKGROUND : 'transparent',
             borderColor: showWarning
                 ? colors_1.INPUT_BORDER_COLOR_HOVERED
                 : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
             color: showWarning ? 'white' : colors_1.LIGHT_TEXT,
         };
-    }, [showWarning]);
+    }, [showWarning, size]);
     return (jsx_runtime_1.jsxs("button", { type: "button", style: buttonStyle, onClick: onClick, children: [
-            jsx_runtime_1.jsx(WarningTriangle, { style: triangleStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), warningCount, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(caret_1.AngleDown, { down: showWarning })
+            jsx_runtime_1.jsx(WarningTriangle, { style: size === 'compact' ? compactTriangleStyle : triangleStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), warningCount, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(caret_1.AngleDown, { down: showWarning })
         ] }));
 };
 exports.WarningIndicatorButton = WarningIndicatorButton;

package/dist/components/RenderModal/get-render-modal-warnings.d.ts

@@ -12,7 +12,7 @@ export type TypeCanSaveState = {
     reason: string;
     determined: boolean;
 };
-export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }: {
+export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, showCannotSaveDefaultPropsWarning, }: {
     cliProps: unknown;
     canSaveDefaultProps: TypeCanSaveState | null;
     isCustomDateUsed: boolean;
@@ -21,4 +21,5 @@ export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, i
     jsSetUsed: boolean;
     inJSONEditor: boolean;
     propsEditType: PropsEditType;
+    showCannotSaveDefaultPropsWarning: boolean;
 }) => RenderModalWarning[];

package/dist/components/RenderModal/get-render-modal-warnings.js

@@ -19,7 +19,10 @@ const getInputPropsWarning = ({ cliProps, propsEditType, }) => {
     }
     return null;
 };
-const getCannotSaveDefaultProps = (canSaveDefaultProps) => {
+const getCannotSaveDefaultProps = (canSaveDefaultProps, showCannotSaveDefaultPropsWarning) => {
+    if (!showCannotSaveDefaultPropsWarning) {
+        return null;
+    }
     if (canSaveDefaultProps === null) {
         return null;
     }
@@ -59,10 +62,10 @@ const setUsed = (used, inJSONEditor) => {
     }
     return null;
 };
-const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }) => {
+const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, showCannotSaveDefaultPropsWarning, }) => {
     return [
         warningOrNull('input-props-override', getInputPropsWarning({ cliProps, propsEditType })),
-        getCannotSaveDefaultProps(canSaveDefaultProps),
+        getCannotSaveDefaultProps(canSaveDefaultProps, showCannotSaveDefaultPropsWarning),
         warningOrNull('custom-date-used', customDateUsed(isCustomDateUsed, inJSONEditor)),
         warningOrNull('static-file-used', staticFileUsed(customFileUsed, inJSONEditor)),
         warningOrNull('map-used', mapUsed(jsMapUsed, inJSONEditor)),

package/dist/components/RendersTab.js

@@ -10,7 +10,7 @@ const Tabs_1 = require("./Tabs");
 const row = {
     display: 'flex',
     flexDirection: 'row',
-    fontSize: 14,
+    fontSize: 'inherit',
     color: 'inherit',
     alignItems: 'center',
     flex: 1,

package/dist/components/SegmentedControl.d.ts

@@ -5,7 +5,10 @@ export type SegmentedControlItem = {
     key: string;
     selected: boolean;
 };
+type SegmentedControlSize = 'default' | 'compact';
 export declare const SegmentedControl: React.FC<{
     readonly items: SegmentedControlItem[];
     readonly needsWrapping: boolean;
+    readonly size?: SegmentedControlSize;
 }>;
+export {};

package/dist/components/SegmentedControl.js

@@ -25,7 +25,13 @@ const item = {
     justifyContent: 'center',
     whiteSpace: 'nowrap',
 };
-const SegmentedControl = ({ items, needsWrapping }) => {
+const compactItem = {
+    ...item,
+    fontSize: 11,
+    fontWeight: 400,
+    padding: '2px 7px',
+};
+const SegmentedControl = ({ items, needsWrapping, size = 'default' }) => {
     const controlStyle = (0, react_1.useMemo)(() => {
         if (needsWrapping) {
             return {
@@ -41,11 +47,11 @@ const SegmentedControl = ({ items, needsWrapping }) => {
         };
     }, [needsWrapping]);
     return (jsx_runtime_1.jsx("div", { style: controlStyle, children: items.map((i) => {
-            return (jsx_runtime_1.jsx(Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
+            return (jsx_runtime_1.jsx(Item, { onClick: i.onClick, selected: i.selected, size: size, children: i.label }, i.key));
         }) }));
 };
 exports.SegmentedControl = SegmentedControl;
-const Item = ({ selected, onClick, children }) => {
+const Item = ({ selected, onClick, children, size }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -56,10 +62,10 @@ const Item = ({ selected, onClick, children }) => {
     }, []);
     const itemStyle = (0, react_1.useMemo)(() => {
         return {
-            ...item,
+            ...(size === 'compact' ? compactItem : item),
             backgroundColor: selected ? colors_1.INPUT_BACKGROUND : 'transparent',
             color: selected ? 'white' : hovered ? 'white' : colors_1.LIGHT_TEXT,
         };
-    }, [hovered, selected]);
+    }, [hovered, selected, size]);
     return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));
 };