@remotion/shapes 4.0.472 → 4.0.474

package/dist/components/arrow.d.ts

@@ -2,14 +2,4 @@ import React from 'react';
 import type { MakeArrowProps } from '../utils/make-arrow';
 import type { AllShapesProps } from './render-svg';
 export type ArrowProps = MakeArrowProps & AllShapesProps;
-/**
- * @description Renders an SVG element containing an arrow shape.
- * @param {Number} length The total length of the arrow along its direction axis. Default 300.
- * @param {Number} headWidth The width of the arrowhead at its widest point. Default 185.
- * @param {Number} headLength The length of the arrowhead portion. Default 120.
- * @param {Number} shaftWidth The width of the arrow shaft. Default 80.
- * @param {string} direction The direction the arrow points. Default 'right'.
- * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius.
- * @see [Documentation](https://www.remotion.dev/docs/shapes/arrow)
- */
 export declare const Arrow: React.FC<ArrowProps>;

package/dist/components/arrow.js

@@ -2,8 +2,42 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Arrow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
 const make_arrow_1 = require("../utils/make-arrow");
 const render_svg_1 = require("./render-svg");
+const schema_1 = require("./schema");
+const arrowSchema = (0, schema_1.makeShapeSchema)({
+    length: (0, schema_1.numberField)({
+        defaultValue: 300,
+        description: 'Length',
+        min: 0,
+    }),
+    headWidth: (0, schema_1.numberField)({
+        defaultValue: 185,
+        description: 'Head Width',
+        min: 0,
+    }),
+    headLength: (0, schema_1.numberField)({
+        defaultValue: 120,
+        description: 'Head Length',
+        min: 0,
+    }),
+    shaftWidth: (0, schema_1.numberField)({
+        defaultValue: 80,
+        description: 'Shaft Width',
+        min: 0,
+    }),
+    direction: (0, schema_1.enumField)({
+        defaultValue: 'right',
+        description: 'Direction',
+        variants: ['right', 'left', 'up', 'down'],
+    }),
+    cornerRadius: (0, schema_1.numberField)({
+        defaultValue: 0,
+        description: 'Corner Radius',
+        min: 0,
+    }),
+});
 /**
  * @description Renders an SVG element containing an arrow shape.
  * @param {Number} length The total length of the arrow along its direction axis. Default 300.
@@ -14,8 +48,8 @@ const render_svg_1 = require("./render-svg");
  * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius.
  * @see [Documentation](https://www.remotion.dev/docs/shapes/arrow)
  */
-const Arrow = ({ length, headWidth, headLength, shaftWidth, direction, cornerRadius, ...props }) => {
-    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { ...(0, make_arrow_1.makeArrow)({
+const ArrowInner = ({ length, headWidth, headLength, shaftWidth, direction, cornerRadius, ...props }) => {
+    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Arrow>", documentationLink: "https://www.remotion.dev/docs/shapes/arrow", ...(0, make_arrow_1.makeArrow)({
             length,
             headWidth,
             headLength,
@@ -24,4 +58,9 @@ const Arrow = ({ length, headWidth, headLength, shaftWidth, direction, cornerRad
             cornerRadius,
         }), ...props }));
 };
-exports.Arrow = Arrow;
+exports.Arrow = remotion_1.Internals.wrapInSchema({
+    Component: ArrowInner,
+    schema: arrowSchema,
+    supportsEffects: true,
+});
+remotion_1.Internals.addSequenceStackTraces(exports.Arrow);

package/dist/components/circle.d.ts

@@ -2,9 +2,4 @@ import React from 'react';
 import type { MakeCircleProps } from '../utils/make-circle';
 import type { AllShapesProps } from './render-svg';
 export type CircleProps = MakeCircleProps & AllShapesProps;
-/**
- * @description Renders an SVG element drawing a circle.
- * @param {Number} radius The radius of the circle.
- * @see [Documentation](https://www.remotion.dev/docs/shapes/circle)
- */
 export declare const Circle: React.FC<CircleProps>;

package/dist/components/circle.js

@@ -2,14 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Circle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
 const make_circle_1 = require("../utils/make-circle");
 const render_svg_1 = require("./render-svg");
+const schema_1 = require("./schema");
+const circleSchema = (0, schema_1.makeShapeSchema)({
+    radius: (0, schema_1.numberField)({
+        defaultValue: 100,
+        description: 'Radius',
+        min: 0,
+    }),
+});
 /**
  * @description Renders an SVG element drawing a circle.
  * @param {Number} radius The radius of the circle.
  * @see [Documentation](https://www.remotion.dev/docs/shapes/circle)
  */
-const Circle = ({ radius, ...props }) => {
-    return jsx_runtime_1.jsx(render_svg_1.RenderSvg, { ...(0, make_circle_1.makeCircle)({ radius }), ...props });
+const CircleInner = ({ radius, ...props }) => {
+    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Circle>", documentationLink: "https://www.remotion.dev/docs/shapes/circle", ...(0, make_circle_1.makeCircle)({ radius }), ...props }));
 };
-exports.Circle = Circle;
+exports.Circle = remotion_1.Internals.wrapInSchema({
+    Component: CircleInner,
+    schema: circleSchema,
+    supportsEffects: true,
+});
+remotion_1.Internals.addSequenceStackTraces(exports.Circle);

package/dist/components/ellipse.d.ts

@@ -2,10 +2,4 @@ import React from 'react';
 import type { MakeEllipseOptions } from '../utils/make-ellipse';
 import type { AllShapesProps } from './render-svg';
 export type EllipseProps = MakeEllipseOptions & AllShapesProps;
-/**
- * @description Renders an SVG element drawing an ellipse.
- * @param {Number} rx The radius of the ellipse on the X axis.
- * @param {Number} ry The radius of the ellipse on the Y axis.
- * @see [Documentation](https://www.remotion.dev/docs/shapes/ellipse)
- */
 export declare const Ellipse: React.FC<EllipseProps>;

package/dist/components/ellipse.js

@@ -2,15 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Ellipse = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
 const make_ellipse_1 = require("../utils/make-ellipse");
 const render_svg_1 = require("./render-svg");
+const schema_1 = require("./schema");
+const ellipseSchema = (0, schema_1.makeShapeSchema)({
+    rx: (0, schema_1.numberField)({
+        defaultValue: 100,
+        description: 'X Radius',
+        min: 0,
+    }),
+    ry: (0, schema_1.numberField)({
+        defaultValue: 50,
+        description: 'Y Radius',
+        min: 0,
+    }),
+});
 /**
  * @description Renders an SVG element drawing an ellipse.
  * @param {Number} rx The radius of the ellipse on the X axis.
  * @param {Number} ry The radius of the ellipse on the Y axis.
  * @see [Documentation](https://www.remotion.dev/docs/shapes/ellipse)
  */
-const Ellipse = ({ rx, ry, ...props }) => {
-    return jsx_runtime_1.jsx(render_svg_1.RenderSvg, { ...(0, make_ellipse_1.makeEllipse)({ rx, ry }), ...props });
+const EllipseInner = ({ rx, ry, ...props }) => {
+    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Ellipse>", documentationLink: "https://www.remotion.dev/docs/shapes/ellipse", ...(0, make_ellipse_1.makeEllipse)({ rx, ry }), ...props }));
 };
-exports.Ellipse = Ellipse;
+exports.Ellipse = remotion_1.Internals.wrapInSchema({
+    Component: EllipseInner,
+    schema: ellipseSchema,
+    supportsEffects: true,
+});
+remotion_1.Internals.addSequenceStackTraces(exports.Ellipse);

package/dist/components/heart.d.ts

@@ -2,9 +2,4 @@ import React from 'react';
 import type { MakeHeartProps } from '../utils/make-heart';
 import type { AllShapesProps } from './render-svg';
 export type HeartProps = MakeHeartProps & AllShapesProps;
-/**
- * @description Renders an SVG element containing a heart.
- * @param {Number} size The size of the heart.
- * @see [Documentation](https://www.remotion.dev/docs/shapes/heart)
- */
 export declare const Heart: React.FC<HeartProps>;

package/dist/components/heart.js

@@ -2,19 +2,49 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heart = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
 const make_heart_1 = require("../utils/make-heart");
 const render_svg_1 = require("./render-svg");
+const schema_1 = require("./schema");
+const heartSchema = (0, schema_1.makeShapeSchema)({
+    height: (0, schema_1.numberField)({
+        defaultValue: 100,
+        description: 'Height',
+        min: 0,
+    }),
+    aspectRatio: (0, schema_1.numberField)({
+        defaultValue: 1.1,
+        description: 'Aspect Ratio',
+        min: 0,
+        step: 0.01,
+    }),
+    bottomRoundnessAdjustment: (0, schema_1.numberField)({
+        defaultValue: 0,
+        description: 'Bottom Roundness Adjustment',
+        step: 0.01,
+    }),
+    depthAdjustment: (0, schema_1.numberField)({
+        defaultValue: 0,
+        description: 'Depth Adjustment',
+        step: 0.01,
+    }),
+});
 /**
  * @description Renders an SVG element containing a heart.
  * @param {Number} size The size of the heart.
  * @see [Documentation](https://www.remotion.dev/docs/shapes/heart)
  */
-const Heart = ({ aspectRatio, height, bottomRoundnessAdjustment = 0, depthAdjustment = 0, ...props }) => {
-    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { ...(0, make_heart_1.makeHeart)({
+const HeartInner = ({ aspectRatio, height, bottomRoundnessAdjustment = 0, depthAdjustment = 0, ...props }) => {
+    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Heart>", documentationLink: "https://www.remotion.dev/docs/shapes/heart", ...(0, make_heart_1.makeHeart)({
             aspectRatio,
             height,
             bottomRoundnessAdjustment,
             depthAdjustment,
         }), ...props }));
 };
-exports.Heart = Heart;
+exports.Heart = remotion_1.Internals.wrapInSchema({
+    Component: HeartInner,
+    schema: heartSchema,
+    supportsEffects: true,
+});
+remotion_1.Internals.addSequenceStackTraces(exports.Heart);

package/dist/components/pie.d.ts

@@ -2,13 +2,4 @@ import React from 'react';
 import type { MakePieProps } from '../utils/make-pie';
 import type { AllShapesProps } from './render-svg';
 export type PieProps = MakePieProps & AllShapesProps;
-/**
- * @description Renders an SVG element drawing a pie piece.
- * @param {Number} radius The radius of the circle..
- * @param {Number} progress The percentage of the circle that is filled. 0 means fully empty, 1 means fully filled.
- * @param {Boolean} closePath If set to false, no path to the middle of the circle will be drawn, leading to an open arc. Default true.
- * @param {Boolean} counterClockwise If set, the circle gets filled counterclockwise instead of clockwise. Default false.
- * @param {Number} rotation Add rotation to the path. 0 means no rotation, Math.PI * 2 means 1 full clockwise rotation
- * @see [Documentation](https://www.remotion.dev/docs/shapes/pie)
- */
 export declare const Pie: React.FC<PieProps>;

package/dist/components/pie.js

@@ -2,8 +2,37 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pie = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
 const make_pie_1 = require("../utils/make-pie");
 const render_svg_1 = require("./render-svg");
+const schema_1 = require("./schema");
+const pieSchema = (0, schema_1.makeShapeSchema)({
+    radius: (0, schema_1.numberField)({
+        defaultValue: 100,
+        description: 'Radius',
+        min: 0,
+    }),
+    progress: (0, schema_1.numberField)({
+        defaultValue: 0.5,
+        description: 'Progress',
+        max: 1,
+        min: 0,
+        step: 0.01,
+    }),
+    closePath: (0, schema_1.booleanField)({
+        defaultValue: true,
+        description: 'Close Path',
+    }),
+    counterClockwise: (0, schema_1.booleanField)({
+        defaultValue: false,
+        description: 'Counter Clockwise',
+    }),
+    rotation: (0, schema_1.numberField)({
+        defaultValue: 0,
+        description: 'Rotation',
+        step: 0.01,
+    }),
+});
 /**
  * @description Renders an SVG element drawing a pie piece.
  * @param {Number} radius The radius of the circle..
@@ -13,7 +42,12 @@ const render_svg_1 = require("./render-svg");
  * @param {Number} rotation Add rotation to the path. 0 means no rotation, Math.PI * 2 means 1 full clockwise rotation
  * @see [Documentation](https://www.remotion.dev/docs/shapes/pie)
  */
-const Pie = ({ radius, progress, closePath, counterClockwise, rotation, ...props }) => {
-    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { ...(0, make_pie_1.makePie)({ radius, progress, closePath, counterClockwise, rotation }), ...props }));
+const PieInner = ({ radius, progress, closePath, counterClockwise, rotation, ...props }) => {
+    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Pie>", documentationLink: "https://www.remotion.dev/docs/shapes/pie", ...(0, make_pie_1.makePie)({ radius, progress, closePath, counterClockwise, rotation }), ...props }));
 };
-exports.Pie = Pie;
+exports.Pie = remotion_1.Internals.wrapInSchema({
+    Component: PieInner,
+    schema: pieSchema,
+    supportsEffects: true,
+});
+remotion_1.Internals.addSequenceStackTraces(exports.Pie);

package/dist/components/polygon.js

@@ -2,14 +2,39 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Polygon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
 const make_polygon_1 = require("../utils/make-polygon");
 const render_svg_1 = require("./render-svg");
-const Polygon = ({ points, radius, cornerRadius, edgeRoundness, ...props }) => {
-    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { ...(0, make_polygon_1.makePolygon)({
+const schema_1 = require("./schema");
+const polygonSchema = (0, schema_1.makeShapeSchema)({
+    points: (0, schema_1.numberField)({
+        defaultValue: 5,
+        description: 'Points',
+        min: 3,
+        step: 1,
+    }),
+    radius: (0, schema_1.numberField)({
+        defaultValue: 100,
+        description: 'Radius',
+        min: 0,
+    }),
+    cornerRadius: (0, schema_1.numberField)({
+        defaultValue: 0,
+        description: 'Corner Radius',
+        min: 0,
+    }),
+});
+const PolygonInner = ({ points, radius, cornerRadius, edgeRoundness, ...props }) => {
+    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Polygon>", documentationLink: "https://www.remotion.dev/docs/shapes/polygon", ...(0, make_polygon_1.makePolygon)({
             points,
             cornerRadius,
             edgeRoundness,
             radius,
         }), ...props }));
 };
-exports.Polygon = Polygon;
+exports.Polygon = remotion_1.Internals.wrapInSchema({
+    Component: PolygonInner,
+    schema: polygonSchema,
+    supportsEffects: true,
+});
+remotion_1.Internals.addSequenceStackTraces(exports.Polygon);

package/dist/components/rect.d.ts

@@ -2,12 +2,4 @@ import React from 'react';
 import type { MakeRectOptions } from '../utils/make-rect';
 import type { AllShapesProps } from './render-svg';
 export type RectProps = MakeRectOptions & AllShapesProps;
-/**
- * @description Renders an SVG element containing a rectangle.
- * @param {Number} width The width of the Rectangle
- * @param {Number} height The height of the Rectangle
- * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
- * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
- * @see [Documentation](https://www.remotion.dev/docs/shapes/rect)
- */
 export declare const Rect: React.FC<RectProps>;

package/dist/components/rect.js

@@ -2,8 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Rect = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
 const make_rect_1 = require("../utils/make-rect");
 const render_svg_1 = require("./render-svg");
+const schema_1 = require("./schema");
+const rectSchema = (0, schema_1.makeShapeSchema)({
+    width: (0, schema_1.numberField)({
+        defaultValue: 100,
+        description: 'Width',
+        min: 0,
+    }),
+    height: (0, schema_1.numberField)({
+        defaultValue: 100,
+        description: 'Height',
+        min: 0,
+    }),
+    cornerRadius: (0, schema_1.numberField)({
+        defaultValue: 0,
+        description: 'Corner Radius',
+        min: 0,
+    }),
+});
 /**
  * @description Renders an SVG element containing a rectangle.
  * @param {Number} width The width of the Rectangle
@@ -12,7 +31,12 @@ const render_svg_1 = require("./render-svg");
  * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
  * @see [Documentation](https://www.remotion.dev/docs/shapes/rect)
  */
-const Rect = ({ width, edgeRoundness, height, cornerRadius, ...props }) => {
-    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { ...(0, make_rect_1.makeRect)({ height, width, edgeRoundness, cornerRadius }), ...props }));
+const RectInner = ({ width, edgeRoundness, height, cornerRadius, ...props }) => {
+    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Rect>", documentationLink: "https://www.remotion.dev/docs/shapes/rect", ...(0, make_rect_1.makeRect)({ height, width, edgeRoundness, cornerRadius }), ...props }));
 };
-exports.Rect = Rect;
+exports.Rect = remotion_1.Internals.wrapInSchema({
+    Component: RectInner,
+    schema: rectSchema,
+    supportsEffects: true,
+});
+remotion_1.Internals.addSequenceStackTraces(exports.Rect);

package/dist/components/render-svg.d.ts

@@ -1,16 +1,37 @@
 import type { Instruction } from '@remotion/paths';
 import React from 'react';
-export type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'height' | 'd'> & {
+import { type EffectsProp, type HtmlInCanvasPixelDensity, type SequenceControls, type SequenceProps } from 'remotion';
+type ShapeSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden' | 'name' | 'showInTimeline'> & {
+    readonly _experimentalControls?: SequenceControls;
+};
+export type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'height' | 'd' | 'hidden' | 'name'> & ShapeSequenceProps & {
     readonly debug?: boolean;
+    readonly effects?: EffectsProp;
     readonly pathStyle?: React.CSSProperties;
+    readonly pixelDensity?: HtmlInCanvasPixelDensity;
+    /**
+     * @deprecated For internal use only
+     */
+    readonly stack?: string;
 };
-export declare const RenderSvg: ({ width, height, path, style, pathStyle, transformOrigin, debug, instructions, ...props }: {
+export declare const RenderSvg: ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects, instructions, pixelDensity, durationInFrames, from, hidden, name, showInTimeline, _experimentalControls: controls, stack, ...props }: {
+    readonly defaultName: string;
+    readonly documentationLink: string;
     readonly width: number;
     readonly height: number;
     readonly path: string;
     readonly instructions: Instruction[];
     readonly transformOrigin: string;
-} & Omit<React.SVGProps<SVGPathElement>, "d" | "height" | "width"> & {
+} & Omit<React.SVGProps<SVGPathElement>, "d" | "height" | "hidden" | "name" | "width"> & Pick<SequenceProps, "durationInFrames" | "from" | "hidden" | "name" | "showInTimeline"> & {
+    readonly _experimentalControls?: SequenceControls | undefined;
+} & {
     readonly debug?: boolean | undefined;
+    readonly effects?: EffectsProp | undefined;
     readonly pathStyle?: React.CSSProperties | undefined;
+    readonly pixelDensity?: number | undefined;
+    /**
+     * @deprecated For internal use only
+     */
+    readonly stack?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/render-svg.js

@@ -37,8 +37,9 @@ exports.RenderSvg = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
+const remotion_1 = require("remotion");
 const does_react_support_canary_1 = require("../utils/does-react-support-canary");
-const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, debug, instructions, ...props }) => {
+const RenderSvg = ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects = [], instructions, pixelDensity, durationInFrames, from, hidden, name, showInTimeline, _experimentalControls: controls, stack, ...props }) => {
     const actualStyle = (0, react_1.useMemo)(() => {
         return {
             overflow: 'visible',
@@ -51,8 +52,19 @@ const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, deb
             ...(pathStyle !== null && pathStyle !== void 0 ? pathStyle : {}),
         };
     }, [pathStyle]);
+    const outlineRef = (0, react_1.useRef)(null);
+    const setSvgRef = (0, react_1.useCallback)((node) => {
+        outlineRef.current = node;
+    }, []);
+    const setCanvasRef = (0, react_1.useCallback)((canvas) => {
+        outlineRef.current = canvas;
+    }, []);
+    const memoizedEffectDefinitions = remotion_1.Internals.useMemoizedEffectDefinitions(effects);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const reactSupportsTransformOrigin = (0, does_react_support_canary_1.doesReactSupportTransformOriginProperty)(react_dom_1.version);
-    return (jsx_runtime_1.jsxs("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: actualStyle, children: [
+    const svg = (jsx_runtime_1.jsxs("svg", { ref: effects.length === 0 || !videoConfig ? setSvgRef : undefined, width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: effects.length === 0 || !videoConfig
+            ? actualStyle
+            : { overflow: 'visible' }, children: [
             jsx_runtime_1.jsx("path", { ...(reactSupportsTransformOrigin
                     ? {
                         transformOrigin,
@@ -90,5 +102,11 @@ const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, deb
                     return null;
                 })
                 : null] }));
+    const content = effects.length === 0 ? (svg) : (jsx_runtime_1.jsx(remotion_1.HtmlInCanvas, { ref: setCanvasRef, width: Math.ceil(width), height: Math.ceil(height), effects: effects, pixelDensity: pixelDensity, showInTimeline: false, style: actualStyle, _experimentalControls: controls, children: svg }));
+    const stackProps = stack === undefined ? null : { stack };
+    if (!videoConfig) {
+        return svg;
+    }
+    return (jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : defaultName, _remotionInternalRefForOutline: outlineRef, _remotionInternalDocumentationLink: name === undefined ? documentationLink : undefined, ...stackProps, children: content }));
 };
 exports.RenderSvg = RenderSvg;

package/dist/components/schema.d.ts

@@ -0,0 +1,23 @@
+import { type SequenceFieldSchema, type SequenceSchema } from 'remotion';
+export declare const numberField: ({ defaultValue, description, hiddenFromList, max, min, step, }: {
+    readonly defaultValue: number | undefined;
+    readonly description: string;
+    readonly hiddenFromList?: boolean | undefined;
+    readonly max?: number | undefined;
+    readonly min?: number | undefined;
+    readonly step?: number | undefined;
+}) => SequenceFieldSchema;
+export declare const booleanField: ({ defaultValue, description, }: {
+    readonly defaultValue: boolean;
+    readonly description: string;
+}) => SequenceFieldSchema;
+export declare const colorField: ({ defaultValue, description, }: {
+    readonly defaultValue: string | undefined;
+    readonly description: string;
+}) => SequenceFieldSchema;
+export declare const enumField: <T extends string>({ defaultValue, description, variants, }: {
+    readonly defaultValue: T;
+    readonly description: string;
+    readonly variants: readonly T[];
+}) => SequenceFieldSchema;
+export declare const makeShapeSchema: (shapeFields: SequenceSchema) => SequenceSchema;

package/dist/components/schema.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeShapeSchema = exports.enumField = exports.colorField = exports.booleanField = exports.numberField = void 0;
+const remotion_1 = require("remotion");
+const numberField = ({ defaultValue, description, hiddenFromList = false, max, min, step = 1, }) => {
+    return {
+        type: 'number',
+        default: defaultValue,
+        description,
+        hiddenFromList,
+        max,
+        min,
+        step,
+    };
+};
+exports.numberField = numberField;
+const booleanField = ({ defaultValue, description, }) => {
+    return {
+        type: 'boolean',
+        default: defaultValue,
+        description,
+    };
+};
+exports.booleanField = booleanField;
+const colorField = ({ defaultValue, description, }) => {
+    return {
+        type: 'color',
+        default: defaultValue,
+        description,
+    };
+};
+exports.colorField = colorField;
+const enumField = ({ defaultValue, description, variants, }) => {
+    return {
+        type: 'enum',
+        default: defaultValue,
+        description,
+        variants: Object.fromEntries(variants.map((variant) => [variant, {}])),
+    };
+};
+exports.enumField = enumField;
+const makeShapeSchema = (shapeFields) => {
+    return {
+        from: remotion_1.Internals.sequenceSchema.from,
+        durationInFrames: remotion_1.Internals.sequenceSchema.durationInFrames,
+        ...shapeFields,
+        fill: (0, exports.colorField)({
+            defaultValue: '#0b84ff',
+            description: 'Fill',
+        }),
+        ...remotion_1.Internals.sequenceVisualStyleSchema,
+        hidden: remotion_1.Internals.sequenceSchema.hidden,
+    };
+};
+exports.makeShapeSchema = makeShapeSchema;

package/dist/components/star.d.ts

@@ -2,13 +2,4 @@ import React from 'react';
 import type { MakeStarProps } from '../utils/make-star';
 import type { AllShapesProps } from './render-svg';
 export type StarProps = MakeStarProps & Omit<AllShapesProps, 'points'>;
-/**
- * @description Renders an SVG element containing a star.
- * @param {Number} innerRadius The inner radius of the star.
- * @param {Number} outerRadius The outer radius of the star.
- * @param {Number} points The amount of points of the star.
- * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
- * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
- * @see [Documentation](https://www.remotion.dev/docs/shapes/star)
- */
 export declare const Star: React.FC<StarProps>;

package/dist/components/star.js

@@ -2,8 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Star = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
 const make_star_1 = require("../utils/make-star");
 const render_svg_1 = require("./render-svg");
+const schema_1 = require("./schema");
+const starSchema = (0, schema_1.makeShapeSchema)({
+    points: (0, schema_1.numberField)({
+        defaultValue: 5,
+        description: 'Points',
+        min: 3,
+        step: 1,
+    }),
+    innerRadius: (0, schema_1.numberField)({
+        defaultValue: 50,
+        description: 'Inner Radius',
+        min: 0,
+    }),
+    outerRadius: (0, schema_1.numberField)({
+        defaultValue: 100,
+        description: 'Outer Radius',
+        min: 0,
+    }),
+    cornerRadius: (0, schema_1.numberField)({
+        defaultValue: 0,
+        description: 'Corner Radius',
+        min: 0,
+    }),
+});
 /**
  * @description Renders an SVG element containing a star.
  * @param {Number} innerRadius The inner radius of the star.
@@ -13,8 +38,8 @@ const render_svg_1 = require("./render-svg");
  * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
  * @see [Documentation](https://www.remotion.dev/docs/shapes/star)
  */
-const Star = ({ innerRadius, outerRadius, points, cornerRadius, edgeRoundness, ...props }) => {
-    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { ...(0, make_star_1.makeStar)({
+const StarInner = ({ innerRadius, outerRadius, points, cornerRadius, edgeRoundness, ...props }) => {
+    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Star>", documentationLink: "https://www.remotion.dev/docs/shapes/star", ...(0, make_star_1.makeStar)({
             innerRadius,
             outerRadius,
             points,
@@ -22,4 +47,9 @@ const Star = ({ innerRadius, outerRadius, points, cornerRadius, edgeRoundness, .
             edgeRoundness,
         }), ...props }));
 };
-exports.Star = Star;
+exports.Star = remotion_1.Internals.wrapInSchema({
+    Component: StarInner,
+    schema: starSchema,
+    supportsEffects: true,
+});
+remotion_1.Internals.addSequenceStackTraces(exports.Star);