@remotion/shapes 4.0.476 → 4.0.478

package/dist/components/arrow.js

@@ -60,6 +60,7 @@ const ArrowInner = ({ length, headWidth, headLength, shaftWidth, direction, corn
 };
 exports.Arrow = remotion_1.Internals.wrapInSchema({
     Component: ArrowInner,
+    componentIdentity: 'dev.remotion.shapes.Arrow',
     schema: arrowSchema,
     supportsEffects: true,
 });

package/dist/components/callout.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { MakeCalloutProps } from '../utils/make-callout';
+import type { AllShapesProps } from './render-svg';
+export type CalloutProps = MakeCalloutProps & AllShapesProps;
+export declare const Callout: React.FC<CalloutProps>;

package/dist/components/callout.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Callout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const make_callout_1 = require("../utils/make-callout");
+const render_svg_1 = require("./render-svg");
+const schema_1 = require("./schema");
+const calloutSchema = (0, schema_1.makeShapeSchema)({
+    width: (0, schema_1.numberField)({
+        defaultValue: 500,
+        description: 'Width',
+        min: 1,
+    }),
+    height: (0, schema_1.numberField)({
+        defaultValue: 200,
+        description: 'Height',
+        min: 1,
+    }),
+    pointerLength: (0, schema_1.numberField)({
+        defaultValue: 40,
+        description: 'Pointer Length',
+        min: 1,
+    }),
+    pointerBaseWidth: (0, schema_1.numberField)({
+        defaultValue: 60,
+        description: 'Pointer Base Width',
+        min: 1,
+    }),
+    pointerPosition: (0, schema_1.numberField)({
+        defaultValue: 0.5,
+        description: 'Pointer Position',
+        min: 0,
+        max: 1,
+        step: 0.01,
+    }),
+    pointerDirection: (0, schema_1.enumField)({
+        defaultValue: 'down',
+        description: 'Pointer Direction',
+        variants: ['up', 'down', 'left', 'right'],
+    }),
+    cornerRadius: (0, schema_1.numberField)({
+        defaultValue: 0,
+        description: 'Corner Radius',
+        min: 0,
+    }),
+});
+/**
+ * @description Renders an SVG element containing a callout shape.
+ * @param {Number} width The width of the callout body. Default 500.
+ * @param {Number} height The height of the callout body. Default 200.
+ * @param {Number} pointerLength The length of the pointer. Default 40.
+ * @param {Number} pointerBaseWidth The width of the pointer where it meets the body. Default 60.
+ * @param {Number} pointerPosition Position of the pointer along its side, from 0 to 1. Default 0.5.
+ * @param {string} pointerDirection The direction the pointer points. Default 'down'.
+ * @param {null|Number} edgeRoundness Allows to modify the shape by rounding the edges using bezier curves. Default null.
+ * @param {Number} cornerRadius Rounds the corner using an arc. Similar to CSS's border-radius. Cannot be used together with edgeRoundness.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/callout)
+ */
+const CalloutInner = ({ width, height, pointerLength, pointerBaseWidth, pointerPosition, pointerDirection, edgeRoundness, cornerRadius, ...props }) => {
+    return (jsx_runtime_1.jsx(render_svg_1.RenderSvg, { defaultName: "<Callout>", documentationLink: "https://www.remotion.dev/docs/shapes/callout", ...(0, make_callout_1.makeCallout)({
+            width,
+            height,
+            pointerLength,
+            pointerBaseWidth,
+            pointerPosition,
+            pointerDirection,
+            edgeRoundness,
+            cornerRadius,
+        }), ...props }));
+};
+exports.Callout = remotion_1.Internals.wrapInSchema({
+    Component: CalloutInner,
+    componentIdentity: 'dev.remotion.shapes.Callout',
+    schema: calloutSchema,
+    supportsEffects: true,
+});
+remotion_1.Internals.addSequenceStackTraces(exports.Callout);

package/dist/components/circle.js

@@ -23,6 +23,7 @@ const CircleInner = ({ radius, ...props }) => {
 };
 exports.Circle = remotion_1.Internals.wrapInSchema({
     Component: CircleInner,
+    componentIdentity: 'dev.remotion.shapes.Circle',
     schema: circleSchema,
     supportsEffects: true,
 });

package/dist/components/ellipse.js

@@ -29,6 +29,7 @@ const EllipseInner = ({ rx, ry, ...props }) => {
 };
 exports.Ellipse = remotion_1.Internals.wrapInSchema({
     Component: EllipseInner,
+    componentIdentity: 'dev.remotion.shapes.Ellipse',
     schema: ellipseSchema,
     supportsEffects: true,
 });

package/dist/components/heart.js

@@ -44,6 +44,7 @@ const HeartInner = ({ aspectRatio, height, bottomRoundnessAdjustment = 0, depthA
 };
 exports.Heart = remotion_1.Internals.wrapInSchema({
     Component: HeartInner,
+    componentIdentity: 'dev.remotion.shapes.Heart',
     schema: heartSchema,
     supportsEffects: true,
 });

package/dist/components/pie.js

@@ -47,6 +47,7 @@ const PieInner = ({ radius, progress, closePath, counterClockwise, rotation, ...
 };
 exports.Pie = remotion_1.Internals.wrapInSchema({
     Component: PieInner,
+    componentIdentity: 'dev.remotion.shapes.Pie',
     schema: pieSchema,
     supportsEffects: true,
 });

package/dist/components/polygon.js

@@ -34,6 +34,7 @@ const PolygonInner = ({ points, radius, cornerRadius, edgeRoundness, ...props })
 };
 exports.Polygon = remotion_1.Internals.wrapInSchema({
     Component: PolygonInner,
+    componentIdentity: 'dev.remotion.shapes.Polygon',
     schema: polygonSchema,
     supportsEffects: true,
 });

package/dist/components/rect.js

@@ -36,6 +36,7 @@ const RectInner = ({ width, edgeRoundness, height, cornerRadius, ...props }) =>
 };
 exports.Rect = remotion_1.Internals.wrapInSchema({
     Component: RectInner,
+    componentIdentity: 'dev.remotion.shapes.Rect',
     schema: rectSchema,
     supportsEffects: true,
 });

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

@@ -1,7 +1,7 @@
 import type { Instruction } from '@remotion/paths';
 import React from 'react';
 import { type EffectsProp, type HtmlInCanvasPixelDensity, type SequenceControls, type SequenceProps } from 'remotion';
-type ShapeSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden' | 'name' | 'showInTimeline'> & {
+type ShapeSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'> & {
     readonly _experimentalControls?: SequenceControls;
 };
 export type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'height' | 'd' | 'hidden' | 'name'> & ShapeSequenceProps & {
@@ -14,7 +14,7 @@ export type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'hei
      */
     readonly stack?: string;
 };
-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 }: {
+export declare const RenderSvg: ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects, instructions, pixelDensity, durationInFrames, from, freeze, hidden, name, showInTimeline, _experimentalControls: controls, stack, ...props }: {
     readonly defaultName: string;
     readonly documentationLink: string;
     readonly width: number;
@@ -22,7 +22,7 @@ export declare const RenderSvg: ({ defaultName, documentationLink, width, height
     readonly path: string;
     readonly instructions: Instruction[];
     readonly transformOrigin: string;
-} & Omit<React.SVGProps<SVGPathElement>, "d" | "height" | "hidden" | "name" | "width"> & Pick<SequenceProps, "durationInFrames" | "from" | "hidden" | "name" | "showInTimeline"> & {
+} & Omit<React.SVGProps<SVGPathElement>, "d" | "height" | "hidden" | "name" | "width"> & Pick<SequenceProps, "durationInFrames" | "freeze" | "from" | "hidden" | "name" | "showInTimeline"> & {
     readonly _experimentalControls?: SequenceControls | undefined;
 } & {
     readonly debug?: boolean | undefined;

package/dist/components/render-svg.js

@@ -39,7 +39,7 @@ 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 = ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects = [], instructions, pixelDensity, durationInFrames, from, hidden, name, showInTimeline, _experimentalControls: controls, stack, ...props }) => {
+const RenderSvg = ({ defaultName, documentationLink, width, height, path, style, pathStyle, transformOrigin, debug, effects = [], instructions, pixelDensity, durationInFrames, from, freeze, hidden, name, showInTimeline, _experimentalControls: controls, stack, ...props }) => {
     const actualStyle = (0, react_1.useMemo)(() => {
         return {
             overflow: 'visible',
@@ -107,6 +107,6 @@ const RenderSvg = ({ defaultName, documentationLink, width, height, path, style,
     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 }));
+    return (jsx_runtime_1.jsx(remotion_1.Sequence, { layout: "none", from: from, freeze: freeze, 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.js

@@ -42,6 +42,7 @@ exports.enumField = enumField;
 const makeShapeSchema = (shapeFields) => {
     return {
         from: remotion_1.Internals.sequenceSchema.from,
+        freeze: remotion_1.Internals.sequenceSchema.freeze,
         durationInFrames: remotion_1.Internals.sequenceSchema.durationInFrames,
         ...shapeFields,
         fill: (0, exports.colorField)({

package/dist/components/star.js

@@ -49,6 +49,7 @@ const StarInner = ({ innerRadius, outerRadius, points, cornerRadius, edgeRoundne
 };
 exports.Star = remotion_1.Internals.wrapInSchema({
     Component: StarInner,
+    componentIdentity: 'dev.remotion.shapes.Star',
     schema: starSchema,
     supportsEffects: true,
 });

package/dist/components/triangle.js

@@ -36,6 +36,7 @@ const TriangleInner = ({ length, direction, edgeRoundness, cornerRadius, ...prop
 };
 exports.Triangle = remotion_1.Internals.wrapInSchema({
     Component: TriangleInner,
+    componentIdentity: 'dev.remotion.shapes.Triangle',
     schema: triangleSchema,
     supportsEffects: true,
 });