@remotion/shapes 3.3.33 → 3.3.35

package/dist/components/rect.js

@@ -4,7 +4,7 @@ exports.Rect = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const make_rect_1 = require("../utils/make-rect");
 const render_svg_1 = require("./render-svg");
-const Rect = ({ width, height, ...props }) => {
-    return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_rect_1.makeRect)({ height, width }), ...props });
+const Rect = ({ width, edgeRoundness, height, cornerRadius, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_rect_1.makeRect)({ height, width, edgeRoundness, cornerRadius }), ...props }));
 };
 exports.Rect = Rect;

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

@@ -1,12 +1,16 @@
 import React from 'react';
+import type { Instruction } from '../utils/instructions';
 export declare type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'height' | 'd'> & {
+    debug?: boolean;
     pathStyle?: React.CSSProperties;
 };
-export declare const RenderSvg: ({ width, height, path, style, pathStyle, transformOrigin, ...props }: {
+export declare const RenderSvg: ({ width, height, path, style, pathStyle, transformOrigin, debug, instructions, ...props }: {
     width: number;
     height: number;
     path: string;
+    instructions: Instruction[];
     transformOrigin: string;
 } & Omit<React.SVGProps<SVGPathElement>, "width" | "height" | "d"> & {
+    debug?: boolean | undefined;
     pathStyle?: React.CSSProperties | undefined;
 }) => JSX.Element;

package/dist/components/render-svg.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderSvg = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, ...props }) => {
+const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, debug, instructions, ...props }) => {
     const actualStyle = (0, react_1.useMemo)(() => {
         return {
             overflow: 'visible',
@@ -16,6 +16,18 @@ const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, ...
             ...(pathStyle !== null && pathStyle !== void 0 ? pathStyle : {}),
         };
     }, [pathStyle]);
-    return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: actualStyle, children: (0, jsx_runtime_1.jsx)("path", { "transform-origin": transformOrigin, d: path, style: actualPathStyle, ...props }) }));
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: actualStyle, children: [(0, jsx_runtime_1.jsx)("path", { "transform-origin": transformOrigin, d: path, style: actualPathStyle, ...props }), debug
+                ? instructions.map((i, index) => {
+                    if (i.type === 'C') {
+                        const prevInstruction = index === 0
+                            ? instructions[instructions.length - 1]
+                            : instructions[index - 1];
+                        const prevX = prevInstruction.x;
+                        const prevY = prevInstruction.y;
+                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: `M ${prevX} ${prevY} ${i.cp1x} ${i.cp1y}`, strokeWidth: 2, stroke: "rgba(0, 0, 0, 0.4)" }), (0, jsx_runtime_1.jsx)("path", { d: `M ${i.x} ${i.y} ${i.cp2x} ${i.cp2y}`, strokeWidth: 2, stroke: "rgba(0, 0, 0, 0.4)" }), (0, jsx_runtime_1.jsx)("circle", { cx: i.cp1x, cy: i.cp1y, r: 3, fill: "white", strokeWidth: 2, stroke: "black" }), (0, jsx_runtime_1.jsx)("circle", { cx: i.cp2x, cy: i.cp2y, r: 3, strokeWidth: 2, fill: "white", stroke: "black" })] }));
+                    }
+                    return null;
+                })
+                : null] }));
 };
 exports.RenderSvg = RenderSvg;

package/dist/components/triangle.js

@@ -4,7 +4,7 @@ exports.Triangle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const make_triangle_1 = require("../utils/make-triangle");
 const render_svg_1 = require("./render-svg");
-const Triangle = ({ length, direction, ...props }) => {
-    return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_triangle_1.makeTriangle)({ length, direction }), ...props });
+const Triangle = ({ length, direction, edgeRoundness, cornerRadius, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_triangle_1.makeTriangle)({ length, direction, edgeRoundness, cornerRadius }), ...props }));
 };
 exports.Triangle = Triangle;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { Circle, CircleProps } from './components/circle';
 export { Ellipse, EllipseProps } from './components/ellipse';
 export { Rect, RectProps } from './components/rect';
 export { Triangle, TriangleProps } from './components/triangle';
+export { Instruction } from './utils/instructions';
 export { makeCircle, MakeCircleProps } from './utils/make-circle';
 export { makeEllipse, MakeEllipseOptions } from './utils/make-ellipse';
 export { makeRect, MakeRectOptions } from './utils/make-rect';

package/dist/make-circle.d.ts

@@ -1,4 +1,6 @@
 export declare type MakeCircleProps = {
-    radius: number;
+    cx?: number | string;
+    cy?: number | string;
+    radius?: number | string;
 };
-export declare const makeCircle: ({ radius }: MakeCircleProps) => string;
+export declare const makeCircle: ({ cx, cy, radius, }: MakeCircleProps) => string;

package/dist/make-circle.js

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeCircle = void 0;
-const makeCircle = ({ radius }) => {
-    const cx = radius;
-    const cy = radius;
+const makeCircle = ({ cx = 50, cy = 50, radius = 50, }) => {
     return `M ${cx} ${cy} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${radius * 2} 0 ${radius} ${radius} 0 1 0 ${-radius * 2} 0`;
 };
 exports.makeCircle = makeCircle;

package/dist/make-ellipse.d.ts

@@ -1,5 +1,5 @@
 export declare type MakeEllipseOptions = {
-    rx: number;
-    ry: number;
+    rx?: number | string;
+    ry?: number | string;
 };
 export declare const makeEllipse: ({ rx, ry }: MakeEllipseOptions) => string;

package/dist/make-rect.d.ts

@@ -1,5 +1,7 @@
 export declare type MakeRectOptions = {
+    x?: number;
+    y?: number;
     width: number;
     height: number;
 };
-export declare const makeRect: ({ width, height }: MakeRectOptions) => string;
+export declare const makeRect: ({ x, y, width, height }: MakeRectOptions) => string;

package/dist/make-rect.js

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeRect = void 0;
-const makeRect = ({ width, height }) => {
-    const x = 0;
-    const y = 0;
+const makeRect = ({ x = 0, y = 0, width, height }) => {
     return `M ${x} ${y} l ${width} 0 l 0 ${height} l ${-width} 0 Z`;
 };
 exports.makeRect = makeRect;

package/dist/make-square.d.ts

@@ -0,0 +1,7 @@
+export declare type MakeRectOptions = {
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+};
+export declare const makeRect: ({ x, y, width, height }: MakeRectOptions) => string;

package/{package/dist/make-rect.js → dist/make-square.js}

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeRect = void 0;
-const makeRect = ({ width, height }) => {
-    const x = 0;
-    const y = 0;
+const makeRect = ({ x = 0, y = 0, width, height }) => {
     return `M ${x} ${y} l ${width} 0 l 0 ${height} l ${-width} 0 Z`;
 };
 exports.makeRect = makeRect;

package/{package/dist/rect.d.ts → dist/square.d.ts}

@@ -5,4 +5,4 @@ export declare type SquareProps = {
     fill?: string;
     style?: React.CSSProperties;
 };
-export declare const Rect: React.FC<SquareProps>;
+export declare const Square: React.FC<SquareProps>;

package/{package/dist/rect.js → dist/square.js}

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Rect = void 0;
+exports.Square = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const make_rect_1 = require("./make-rect");
-const Rect = ({ width, height, fill, style }) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: style, "data-shape-type": "rect", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_rect_1.makeRect)({
+const make_square_1 = require("./make-square");
+const Square = ({ width, height, fill, style }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: style, "data-shape-type": "square", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_square_1.makeSquare)({
                 width,
                 height,
             }), fill: fill }) }));
 };
-exports.Rect = Rect;
+exports.Square = Square;

package/dist/utils/instructions.d.ts

@@ -0,0 +1,32 @@
+export declare type Instruction = {
+    type: 'M';
+    x: number;
+    y: number;
+} | {
+    type: 'L';
+    x: number;
+    y: number;
+} | {
+    type: 'C';
+    cp1x: number;
+    cp1y: number;
+    cp2x: number;
+    cp2y: number;
+    x: number;
+    y: number;
+} | {
+    type: 'm';
+    x: number;
+    y: number;
+} | {
+    type: 'a';
+    rx: number;
+    ry: number;
+    xAxisRotation: number;
+    largeArcFlag: boolean;
+    sweepFlag: boolean;
+    x: number;
+    y: number;
+};
+export declare const serializeInstructions: (instructions: Instruction[]) => string;
+export declare const serializeInstruction: (instruction: Instruction) => string | undefined;

package/dist/utils/instructions.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serializeInstruction = exports.serializeInstructions = void 0;
+const serializeInstructions = (instructions) => {
+    return instructions.map(exports.serializeInstruction).join(' ');
+};
+exports.serializeInstructions = serializeInstructions;
+const serializeInstruction = (instruction) => {
+    if (instruction.type === 'M') {
+        return `M ${instruction.x} ${instruction.y}`;
+    }
+    if (instruction.type === 'L') {
+        return `L ${instruction.x} ${instruction.y}`;
+    }
+    if (instruction.type === 'C') {
+        return `C ${instruction.cp1x} ${instruction.cp1y} ${instruction.cp2x} ${instruction.cp2y} ${instruction.x} ${instruction.y}`;
+    }
+    if (instruction.type === 'm') {
+        return `m ${instruction.x} ${instruction.y}`;
+    }
+    if (instruction.type === 'a') {
+        return `a ${instruction.rx} ${instruction.ry} ${instruction.xAxisRotation} ${Number(instruction.largeArcFlag)} ${Number(instruction.sweepFlag ? 1 : 0)} ${instruction.x} ${instruction.y}`;
+    }
+};
+exports.serializeInstruction = serializeInstruction;

package/dist/utils/join-points.d.ts

@@ -0,0 +1,9 @@
+import type { Instruction } from './instructions';
+export declare const joinPoints: (points: [
+    number,
+    number
+][], { edgeRoundness, cornerRadius, roundCornerStrategy, }: {
+    edgeRoundness: number | null;
+    cornerRadius: number;
+    roundCornerStrategy: 'arc' | 'bezier';
+}) => Instruction[];

package/dist/utils/join-points.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.joinPoints = void 0;
+const shortenVector = (vector, radius) => {
+    const [x, y] = vector;
+    const currentLength = Math.sqrt(x * x + y * y);
+    const scalingFactor = (currentLength - radius) / currentLength;
+    return [x * scalingFactor, y * scalingFactor];
+};
+const scaleVectorToLength = (vector, length) => {
+    const [x, y] = vector;
+    const currentLength = Math.sqrt(x * x + y * y);
+    const scalingFactor = length / currentLength;
+    return [x * scalingFactor, y * scalingFactor];
+};
+const joinPoints = (points, { edgeRoundness, cornerRadius, roundCornerStrategy, }) => {
+    return points
+        .map(([x, y], i) => {
+        const prevPointIndex = i === 0 ? points.length - 2 : i - 1;
+        const prevPoint = points[prevPointIndex];
+        const nextPointIndex = i === points.length - 1 ? 1 : i + 1;
+        const nextPoint = points[nextPointIndex];
+        const middleOfLine = [(x + nextPoint[0]) / 2, (y + nextPoint[1]) / 2];
+        const prevPointMiddleOfLine = [
+            (x + prevPoint[0]) / 2,
+            (y + prevPoint[1]) / 2,
+        ];
+        if (i === 0) {
+            if (edgeRoundness !== null) {
+                return {
+                    type: 'M',
+                    x: middleOfLine[0],
+                    y: middleOfLine[1],
+                };
+            }
+            return {
+                type: 'M',
+                x,
+                y,
+            };
+        }
+        const prevVector = [x - prevPoint[0], y - prevPoint[1]];
+        const nextVector = [nextPoint[0] - x, nextPoint[1] - y];
+        if (cornerRadius && edgeRoundness !== null) {
+            throw new Error(`"cornerRadius" and "edgeRoundness" cannot be specified at the same time.`);
+        }
+        if (edgeRoundness === null) {
+            if (cornerRadius === 0) {
+                return {
+                    type: 'L',
+                    x,
+                    y,
+                };
+            }
+            const prevVectorMinusRadius = shortenVector(prevVector, cornerRadius);
+            const prevVectorLenght = scaleVectorToLength(prevVector, cornerRadius);
+            const nextVectorMinusRadius = scaleVectorToLength(nextVector, cornerRadius);
+            const firstDraw = [
+                prevPoint[0] + prevVectorMinusRadius[0],
+                prevPoint[1] + prevVectorMinusRadius[1],
+            ];
+            return [
+                {
+                    type: 'L',
+                    x: firstDraw[0],
+                    y: firstDraw[1],
+                },
+                roundCornerStrategy === 'arc'
+                    ? {
+                        type: 'a',
+                        rx: cornerRadius,
+                        ry: cornerRadius,
+                        xAxisRotation: 0,
+                        x: prevVectorLenght[0] + nextVectorMinusRadius[0],
+                        y: prevVectorLenght[1] + nextVectorMinusRadius[1],
+                        largeArcFlag: false,
+                        sweepFlag: true,
+                    }
+                    : {
+                        type: 'C',
+                        x: firstDraw[0] + prevVectorLenght[0] + nextVectorMinusRadius[0],
+                        y: firstDraw[1] + prevVectorLenght[1] + nextVectorMinusRadius[1],
+                        cp1x: x,
+                        cp1y: y,
+                        cp2x: x,
+                        cp2y: y,
+                    },
+            ];
+        }
+        const controlPoint1 = [
+            prevPointMiddleOfLine[0] + prevVector[0] * edgeRoundness * 0.5,
+            prevPointMiddleOfLine[1] + prevVector[1] * edgeRoundness * 0.5,
+        ];
+        const controlPoint2 = [
+            middleOfLine[0] - nextVector[0] * edgeRoundness * 0.5,
+            middleOfLine[1] - nextVector[1] * edgeRoundness * 0.5,
+        ];
+        return {
+            type: 'C',
+            cp1x: controlPoint1[0],
+            cp1y: controlPoint1[1],
+            cp2x: controlPoint2[0],
+            cp2y: controlPoint2[1],
+            x: middleOfLine[0],
+            y: middleOfLine[1],
+        };
+    })
+        .flat(1);
+};
+exports.joinPoints = joinPoints;

package/dist/utils/make-circle.js

@@ -1,11 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeCircle = void 0;
+const instructions_1 = require("./instructions");
 const makeCircle = ({ radius }) => {
+    const instructions = [
+        {
+            type: 'M',
+            x: radius,
+            y: radius,
+        },
+        {
+            type: 'm',
+            x: -radius,
+            y: 0,
+        },
+        {
+            type: 'a',
+            rx: radius,
+            ry: radius,
+            xAxisRotation: 0,
+            largeArcFlag: true,
+            sweepFlag: false,
+            x: radius * 2,
+            y: 0,
+        },
+        {
+            type: 'a',
+            rx: radius,
+            ry: radius,
+            xAxisRotation: 0,
+            largeArcFlag: true,
+            sweepFlag: false,
+            x: -radius * 2,
+            y: 0,
+        },
+    ];
+    const path = (0, instructions_1.serializeInstructions)(instructions);
     return {
         height: radius * 2,
         width: radius * 2,
-        path: `M ${radius} ${radius} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${radius * 2} 0 ${radius} ${radius} 0 1 0 ${-radius * 2} 0`,
+        path,
+        instructions,
         transformOrigin: `${radius} ${radius}`,
     };
 };

package/dist/utils/make-ellipse.js

@@ -1,11 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeEllipse = void 0;
+const instructions_1 = require("./instructions");
 const makeEllipse = ({ rx, ry }) => {
+    const instructions = [
+        {
+            type: 'M',
+            x: rx,
+            y: 0,
+        },
+        {
+            type: 'a',
+            rx,
+            ry,
+            xAxisRotation: 0,
+            largeArcFlag: true,
+            sweepFlag: false,
+            x: 1,
+            y: 0,
+        },
+    ];
+    const path = (0, instructions_1.serializeInstructions)(instructions);
     return {
         width: rx * 2,
         height: ry * 2,
-        path: `M ${rx} ${0} a ${rx} ${ry} 0 1 0 1 0`,
+        path,
+        instructions,
         transformOrigin: `${rx} ${ry}`,
     };
 };

package/dist/utils/make-rect.d.ts

@@ -2,5 +2,7 @@ import type { ShapeInfo } from './shape-info';
 export declare type MakeRectOptions = {
     width: number;
     height: number;
+    edgeRoundness?: number | null;
+    cornerRadius?: number;
 };
-export declare const makeRect: ({ width, height }: MakeRectOptions) => ShapeInfo;
+export declare const makeRect: ({ width, height, edgeRoundness, cornerRadius, }: MakeRectOptions) => ShapeInfo;

package/dist/utils/make-rect.js

@@ -1,12 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeRect = void 0;
-const makeRect = ({ width, height }) => {
+const instructions_1 = require("./instructions");
+const join_points_1 = require("./join-points");
+const makeRect = ({ width, height, edgeRoundness = null, cornerRadius = 0, }) => {
+    const transformOrigin = [width / 2, height / 2];
+    const instructions = (0, join_points_1.joinPoints)([
+        [0, 0],
+        [width, 0],
+        [width, height],
+        [0, height],
+        [0, 0],
+    ], { edgeRoundness, cornerRadius, roundCornerStrategy: 'arc' });
+    const path = (0, instructions_1.serializeInstructions)(instructions);
     return {
         width,
         height,
-        path: `M 0 0 l ${width} 0 l 0 ${height} l ${-width} 0 Z`,
-        transformOrigin: `${width / 2} ${height / 2}`,
+        instructions,
+        path,
+        transformOrigin: transformOrigin.join(' '),
     };
 };
 exports.makeRect = makeRect;

package/dist/utils/make-triangle.d.ts

@@ -1,6 +1,10 @@
 import type { ShapeInfo } from './shape-info';
+declare type Direction = 'right' | 'left' | 'up' | 'down';
 export declare type MakeTriangleProps = {
     length: number;
-    direction: 'right' | 'left' | 'top' | 'bottom';
+    direction: Direction;
+    edgeRoundness?: number | null;
+    cornerRadius?: number;
 };
-export declare const makeTriangle: ({ length, direction, }: MakeTriangleProps) => ShapeInfo;
+export declare const makeTriangle: ({ length, direction, edgeRoundness, cornerRadius, }: MakeTriangleProps) => ShapeInfo;
+export {};

package/dist/utils/make-triangle.js

@@ -2,55 +2,60 @@
 // Copied from https://stackblitz.com/edit/react-triangle-svg?file=index.js
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeTriangle = void 0;
-const makeTriangle = ({ length, direction = 'right', }) => {
+const instructions_1 = require("./instructions");
+const join_points_1 = require("./join-points");
+const makeTriangle = ({ length, direction = 'right', edgeRoundness = null, cornerRadius = 0, }) => {
     const longerDimension = length;
     const shorterSize = Math.sqrt(length ** 2 * 0.75); // Calculated on paper;
     const points = {
-        top: [
-            `${longerDimension / 2} 0`,
-            'L',
-            `0 ${shorterSize}`,
-            'L',
-            `${longerDimension} ${shorterSize}`,
+        up: [
+            [longerDimension / 2, 0],
+            [0, shorterSize],
+            [longerDimension, shorterSize],
+            [longerDimension / 2, 0],
         ],
         right: [
-            `0 0`,
-            'L',
-            `0 ${longerDimension}`,
-            'L',
-            `${shorterSize} ${longerDimension / 2}`,
+            [0, 0],
+            [0, longerDimension],
+            [shorterSize, longerDimension / 2],
+            [0, 0],
         ],
-        bottom: [
-            `0 0`,
-            'L',
-            `${longerDimension} 0`,
-            'L',
-            `${longerDimension / 2} ${shorterSize}`,
+        down: [
+            [0, 0],
+            [longerDimension, 0],
+            [longerDimension / 2, shorterSize],
+            [0, 0],
         ],
         left: [
-            `${shorterSize} 0`,
-            'L',
-            `${shorterSize} ${longerDimension}`,
-            'L',
-            `0 ${longerDimension / 2}`,
+            [shorterSize, 0],
+            [shorterSize, longerDimension],
+            [0, longerDimension / 2],
+            [shorterSize, 0],
         ],
     };
     const transformOriginX = {
         left: (shorterSize / 3) * 2,
         right: shorterSize / 3,
-        top: longerDimension / 2,
-        bottom: longerDimension / 2,
+        up: longerDimension / 2,
+        down: longerDimension / 2,
     }[direction];
     const transformOriginY = {
-        top: (shorterSize / 3) * 2,
-        bottom: shorterSize / 3,
+        up: (shorterSize / 3) * 2,
+        down: shorterSize / 3,
         left: longerDimension / 2,
         right: longerDimension / 2,
     }[direction];
+    const instructions = (0, join_points_1.joinPoints)(points[direction], {
+        edgeRoundness,
+        cornerRadius,
+        roundCornerStrategy: 'bezier',
+    });
+    const path = (0, instructions_1.serializeInstructions)(instructions);
     return {
-        path: `M ${points[direction].join(' ')} z`,
-        width: direction === 'top' || direction === 'bottom' ? length : shorterSize,
-        height: direction === 'top' || direction === 'bottom' ? shorterSize : length,
+        path,
+        instructions,
+        width: direction === 'up' || direction === 'down' ? length : shorterSize,
+        height: direction === 'up' || direction === 'down' ? shorterSize : length,
         transformOrigin: `${transformOriginX} ${transformOriginY}`,
     };
 };

package/dist/utils/shape-info.d.ts

@@ -1,6 +1,8 @@
+import type { Instruction } from './instructions';
 export declare type ShapeInfo = {
     path: string;
     width: number;
     height: number;
     transformOrigin: string;
+    instructions: Instruction[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/shapes",
-	"version": "3.3.33",
+	"version": "3.3.35",
 	"description": "Utility functions and components for SVG shapes",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -44,5 +44,5 @@
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
-	"gitHead": "0356b9108673ac98c41990f192b101f7a6574ed0"
+	"gitHead": "92344ca937e4c51b8484f79528e3c38d598f7053"
 }

package/dist/components/return-type.d.ts

@@ -1,5 +0,0 @@
-export declare type ShapeInfo = {
-    path: string;
-    width: string;
-    height: string;
-};

package/dist/components/return-type.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/shape-info.d.ts

@@ -1,5 +0,0 @@
-export declare type ShapeInfo = {
-    path: string;
-    width: number;
-    height: number;
-};

package/dist/components/shape-info.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/package/dist/Ellipse.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export declare type EllipseProps = React.SVGProps<SVGPathElement> & {
-    rx: number;
-    ry: number;
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: number;
-    style?: React.CSSProperties;
-};
-export declare const Ellipse: React.FC<EllipseProps>;

package/package/dist/Ellipse.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Ellipse = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const make_ellipse_1 = require("./make-ellipse");
-const Ellipse = ({ fill, stroke, strokeWidth, rx, ry, style, }) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: rx * 2, height: ry * 2, viewBox: `0 0 ${rx * 2} ${ry * 2}`, xmlns: "http://www.w3.org/2000/svg", style: style, "data-shape-type": "ellipse", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_ellipse_1.makeEllipse)({
-                rx,
-                ry,
-            }), fill: fill, stroke: stroke, strokeWidth: strokeWidth }) }));
-};
-exports.Ellipse = Ellipse;

package/package/dist/circle.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export declare type CircleProps = React.SVGProps<SVGPathElement> & {
-    width: number;
-    height: number;
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: number;
-    style?: React.CSSProperties;
-};
-export declare const Circle: React.FC<CircleProps>;

package/package/dist/circle.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Circle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const make_circle_1 = require("./make-circle");
-const Circle = ({ width, height, fill, stroke, strokeWidth, style, }) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: style, "data-shape-type": "circle", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_circle_1.makeCircle)({
-                cx: 50,
-                cy: 50,
-                radius: 50,
-            }), fill: fill, stroke: stroke, strokeWidth: strokeWidth }) }));
-};
-exports.Circle = Circle;

package/package/dist/components/circle.d.ts

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

package/package/dist/components/circle.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Circle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const make_circle_1 = require("../utils/make-circle");
-const render_svg_1 = require("./render-svg");
-const Circle = ({ radius, ...props }) => {
-    return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_circle_1.makeCircle)({ radius }), ...props });
-};
-exports.Circle = Circle;

package/package/dist/components/ellipse.d.ts

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

package/package/dist/components/ellipse.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Ellipse = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const make_ellipse_1 = require("../utils/make-ellipse");
-const render_svg_1 = require("./render-svg");
-const Ellipse = ({ rx, ry, ...props }) => {
-    return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_ellipse_1.makeEllipse)({ rx, ry }), ...props });
-};
-exports.Ellipse = Ellipse;

package/package/dist/components/rect.d.ts

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

package/package/dist/components/rect.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Rect = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const make_rect_1 = require("../utils/make-rect");
-const render_svg_1 = require("./render-svg");
-const Rect = ({ width, height, ...props }) => {
-    return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_rect_1.makeRect)({ height, width }), ...props });
-};
-exports.Rect = Rect;

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

@@ -1,12 +0,0 @@
-import React from 'react';
-export declare type AllShapesProps = Omit<React.SVGProps<SVGPathElement>, 'width' | 'height' | 'd'> & {
-    pathStyle?: React.CSSProperties;
-};
-export declare const RenderSvg: ({ width, height, path, style, pathStyle, transformOrigin, ...props }: {
-    width: number;
-    height: number;
-    path: string;
-    transformOrigin: string;
-} & Omit<React.SVGProps<SVGPathElement>, "width" | "height" | "d"> & {
-    pathStyle?: React.CSSProperties | undefined;
-}) => JSX.Element;

package/package/dist/components/render-svg.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderSvg = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const RenderSvg = ({ width, height, path, style, pathStyle, transformOrigin, ...props }) => {
-    const actualStyle = (0, react_1.useMemo)(() => {
-        return {
-            overflow: 'visible',
-            ...(style !== null && style !== void 0 ? style : {}),
-        };
-    }, [style]);
-    const actualPathStyle = (0, react_1.useMemo)(() => {
-        return {
-            transformBox: 'fill-box',
-            ...(pathStyle !== null && pathStyle !== void 0 ? pathStyle : {}),
-        };
-    }, [pathStyle]);
-    return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: actualStyle, children: (0, jsx_runtime_1.jsx)("path", { "transform-origin": transformOrigin, d: path, style: actualPathStyle, ...props }) }));
-};
-exports.RenderSvg = RenderSvg;

package/package/dist/components/return-type.d.ts

@@ -1,5 +0,0 @@
-export declare type ShapeInfo = {
-    path: string;
-    width: string;
-    height: string;
-};

package/package/dist/components/return-type.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/package/dist/components/shape-info.d.ts

@@ -1,5 +0,0 @@
-export declare type ShapeInfo = {
-    path: string;
-    width: number;
-    height: number;
-};

package/package/dist/components/shape-info.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/package/dist/components/triangle.d.ts

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

package/package/dist/components/triangle.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Triangle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const make_triangle_1 = require("../utils/make-triangle");
-const render_svg_1 = require("./render-svg");
-const Triangle = ({ length, direction, ...props }) => {
-    return (0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_triangle_1.makeTriangle)({ length, direction }), ...props });
-};
-exports.Triangle = Triangle;

package/package/dist/index.d.ts

@@ -1,8 +0,0 @@
-export { Circle, CircleProps } from './components/circle';
-export { Ellipse, EllipseProps } from './components/ellipse';
-export { Rect, RectProps } from './components/rect';
-export { Triangle, TriangleProps } from './components/triangle';
-export { makeCircle, MakeCircleProps } from './utils/make-circle';
-export { makeEllipse, MakeEllipseOptions } from './utils/make-ellipse';
-export { makeRect, MakeRectOptions } from './utils/make-rect';
-export { makeTriangle, MakeTriangleProps } from './utils/make-triangle';

package/package/dist/index.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeTriangle = exports.makeRect = exports.makeEllipse = exports.makeCircle = exports.Triangle = exports.Rect = exports.Ellipse = exports.Circle = void 0;
-var circle_1 = require("./components/circle");
-Object.defineProperty(exports, "Circle", { enumerable: true, get: function () { return circle_1.Circle; } });
-var ellipse_1 = require("./components/ellipse");
-Object.defineProperty(exports, "Ellipse", { enumerable: true, get: function () { return ellipse_1.Ellipse; } });
-var rect_1 = require("./components/rect");
-Object.defineProperty(exports, "Rect", { enumerable: true, get: function () { return rect_1.Rect; } });
-var triangle_1 = require("./components/triangle");
-Object.defineProperty(exports, "Triangle", { enumerable: true, get: function () { return triangle_1.Triangle; } });
-var make_circle_1 = require("./utils/make-circle");
-Object.defineProperty(exports, "makeCircle", { enumerable: true, get: function () { return make_circle_1.makeCircle; } });
-var make_ellipse_1 = require("./utils/make-ellipse");
-Object.defineProperty(exports, "makeEllipse", { enumerable: true, get: function () { return make_ellipse_1.makeEllipse; } });
-var make_rect_1 = require("./utils/make-rect");
-Object.defineProperty(exports, "makeRect", { enumerable: true, get: function () { return make_rect_1.makeRect; } });
-var make_triangle_1 = require("./utils/make-triangle");
-Object.defineProperty(exports, "makeTriangle", { enumerable: true, get: function () { return make_triangle_1.makeTriangle; } });

package/package/dist/make-circle.d.ts

@@ -1,4 +0,0 @@
-export declare type MakeCircleProps = {
-    radius: number;
-};
-export declare const makeCircle: ({ radius }: MakeCircleProps) => string;

package/package/dist/make-circle.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeCircle = void 0;
-const makeCircle = ({ radius }) => {
-    const cx = radius;
-    const cy = radius;
-    return `M ${cx} ${cy} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${radius * 2} 0 ${radius} ${radius} 0 1 0 ${-radius * 2} 0`;
-};
-exports.makeCircle = makeCircle;

package/package/dist/make-ellipse.d.ts

@@ -1,5 +0,0 @@
-export declare type MakeEllipseOptions = {
-    rx: number;
-    ry: number;
-};
-export declare const makeEllipse: ({ rx, ry }: MakeEllipseOptions) => string;

package/package/dist/make-ellipse.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeEllipse = void 0;
-const makeEllipse = ({ rx = 50, ry = 50 }) => {
-    return `M ${rx} ${0} a ${rx} ${ry} 0 1 0 1 0`;
-};
-exports.makeEllipse = makeEllipse;

package/package/dist/make-rect.d.ts

@@ -1,5 +0,0 @@
-export declare type MakeRectOptions = {
-    width: number;
-    height: number;
-};
-export declare const makeRect: ({ width, height }: MakeRectOptions) => string;

package/package/dist/make-triangle.d.ts

@@ -1,6 +0,0 @@
-export declare type MakeTriangleProps = {
-    width: number;
-    height: number;
-    direction: 'right' | 'left' | 'top' | 'bottom';
-};
-export declare const makeTriangle: ({ width, height, direction, }: MakeTriangleProps) => string;

package/package/dist/make-triangle.js

@@ -1,14 +0,0 @@
-"use strict";
-// Copied from https://stackblitz.com/edit/react-triangle-svg?file=index.js
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeTriangle = void 0;
-const makeTriangle = ({ width, height, direction = 'right', }) => {
-    const points = {
-        top: [`${width / 2} 0`, 'L', `0 ${height}`, 'L', `${width} ${height}`],
-        right: [`0 0`, 'L', `0 ${height}`, 'L', `${width} ${height / 2}`],
-        bottom: [`0 0`, 'L', `${width} 0`, 'L', `${width / 2} ${height}`],
-        left: [`${width} 0`, 'L', `${width} ${height}`, 'L', `0 ${height / 2}`],
-    };
-    return `M ${points[direction].join(' ')} z`;
-};
-exports.makeTriangle = makeTriangle;

package/package/dist/triangle.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export declare type TriangleProps = {
-    width: number;
-    height: number;
-    fill?: string;
-    direction: 'right' | 'left' | 'top' | 'bottom';
-    style?: React.CSSProperties;
-};
-export declare const Triangle: React.FC<TriangleProps>;

package/package/dist/triangle.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Triangle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const make_triangle_1 = require("./make-triangle");
-const Triangle = ({ width, height, fill, direction, style, }) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: style, "data-shape-type": "triangle", children: (0, jsx_runtime_1.jsx)("path", { d: (0, make_triangle_1.makeTriangle)({
-                width,
-                height,
-                direction,
-            }), fill: fill }) }));
-};
-exports.Triangle = Triangle;

package/package/dist/utils/make-circle.d.ts

@@ -1,5 +0,0 @@
-import type { ShapeInfo } from './shape-info';
-export declare type MakeCircleProps = {
-    radius: number;
-};
-export declare const makeCircle: ({ radius }: MakeCircleProps) => ShapeInfo;

package/package/dist/utils/make-circle.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeCircle = void 0;
-const makeCircle = ({ radius }) => {
-    return {
-        height: radius * 2,
-        width: radius * 2,
-        path: `M ${radius} ${radius} m -${radius} 0 a ${radius} ${radius} 0 1 0 ${radius * 2} 0 ${radius} ${radius} 0 1 0 ${-radius * 2} 0`,
-        transformOrigin: `${radius} ${radius}`,
-    };
-};
-exports.makeCircle = makeCircle;

package/package/dist/utils/make-ellipse.d.ts

@@ -1,6 +0,0 @@
-import type { ShapeInfo } from './shape-info';
-export declare type MakeEllipseOptions = {
-    rx: number;
-    ry: number;
-};
-export declare const makeEllipse: ({ rx, ry }: MakeEllipseOptions) => ShapeInfo;

package/package/dist/utils/make-ellipse.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeEllipse = void 0;
-const makeEllipse = ({ rx, ry }) => {
-    return {
-        width: rx * 2,
-        height: ry * 2,
-        path: `M ${rx} ${0} a ${rx} ${ry} 0 1 0 1 0`,
-        transformOrigin: `${rx} ${ry}`,
-    };
-};
-exports.makeEllipse = makeEllipse;

package/package/dist/utils/make-rect.d.ts

@@ -1,6 +0,0 @@
-import type { ShapeInfo } from './shape-info';
-export declare type MakeRectOptions = {
-    width: number;
-    height: number;
-};
-export declare const makeRect: ({ width, height }: MakeRectOptions) => ShapeInfo;

package/package/dist/utils/make-rect.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeRect = void 0;
-const makeRect = ({ width, height }) => {
-    return {
-        width,
-        height,
-        path: `M 0 0 l ${width} 0 l 0 ${height} l ${-width} 0 Z`,
-        transformOrigin: `${width / 2} ${height / 2}`,
-    };
-};
-exports.makeRect = makeRect;

package/package/dist/utils/make-triangle.d.ts

@@ -1,6 +0,0 @@
-import type { ShapeInfo } from './shape-info';
-export declare type MakeTriangleProps = {
-    length: number;
-    direction: 'right' | 'left' | 'top' | 'bottom';
-};
-export declare const makeTriangle: ({ length, direction, }: MakeTriangleProps) => ShapeInfo;

package/package/dist/utils/make-triangle.js

@@ -1,57 +0,0 @@
-"use strict";
-// Copied from https://stackblitz.com/edit/react-triangle-svg?file=index.js
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeTriangle = void 0;
-const makeTriangle = ({ length, direction = 'right', }) => {
-    const longerDimension = length;
-    const shorterSize = Math.sqrt(length ** 2 * 0.75); // Calculated on paper;
-    const points = {
-        top: [
-            `${longerDimension / 2} 0`,
-            'L',
-            `0 ${shorterSize}`,
-            'L',
-            `${longerDimension} ${shorterSize}`,
-        ],
-        right: [
-            `0 0`,
-            'L',
-            `0 ${longerDimension}`,
-            'L',
-            `${shorterSize} ${longerDimension / 2}`,
-        ],
-        bottom: [
-            `0 0`,
-            'L',
-            `${longerDimension} 0`,
-            'L',
-            `${longerDimension / 2} ${shorterSize}`,
-        ],
-        left: [
-            `${shorterSize} 0`,
-            'L',
-            `${shorterSize} ${longerDimension}`,
-            'L',
-            `0 ${longerDimension / 2}`,
-        ],
-    };
-    const transformOriginX = {
-        left: (shorterSize / 3) * 2,
-        right: shorterSize / 3,
-        top: longerDimension / 2,
-        bottom: longerDimension / 2,
-    }[direction];
-    const transformOriginY = {
-        top: (shorterSize / 3) * 2,
-        bottom: shorterSize / 3,
-        left: longerDimension / 2,
-        right: longerDimension / 2,
-    }[direction];
-    return {
-        path: `M ${points[direction].join(' ')} z`,
-        width: direction === 'top' || direction === 'bottom' ? length : shorterSize,
-        height: direction === 'top' || direction === 'bottom' ? shorterSize : length,
-        transformOrigin: `${transformOriginX} ${transformOriginY}`,
-    };
-};
-exports.makeTriangle = makeTriangle;

package/package/dist/utils/shape-info.d.ts

@@ -1,6 +0,0 @@
-export declare type ShapeInfo = {
-    path: string;
-    width: number;
-    height: number;
-    transformOrigin: string;
-};

package/package/dist/utils/shape-info.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });