motion-start 0.0.1 → 0.1.0

package/{src → dist}/render/svg/UseSVGProps.svelte

@@ -7,7 +7,7 @@ Copyright (c) 2018 Framer B.V. -->
   import { createSvgRenderState } from "./utils/create-render-state.js";
 
   export let visualState, props;
-  let memo = () => {
+  let memo = (variantLabelsAsDependency?:string | boolean | undefined) => {
     const state = createSvgRenderState();
     buildSVGAttrs(
       state,
@@ -15,7 +15,7 @@ Copyright (c) 2018 Framer B.V. -->
       undefined,
       undefined,
       { enableHardwareAcceleration: false },
-      props.transformTemplate
+      props.transformTemplate,
     );
     return {
       ...state.attrs,

package/dist/render/svg/UseSVGProps.svelte.d.ts

@@ -0,0 +1,39 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const UseSvgProps: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    visualState: any;
+    props: any;
+}, {
+    default: {
+        visualProps: {
+            style: {};
+        };
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        visualProps: {
+            style: {};
+        };
+    };
+}, {}, string>;
+type UseSvgProps = InstanceType<typeof UseSvgProps>;
+export default UseSvgProps;
+//# sourceMappingURL=UseSVGProps.svelte.d.ts.map

package/dist/render/svg/UseSVGProps.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UseSVGProps.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/svg/UseSVGProps.svelte.ts"],"names":[],"mappings":"AA2CA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;cAAmF,CAAC;AACnF,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/render/svg/config-motion.d.ts

@@ -0,0 +1,24 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionProps } from "../../motion";
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.js';
+declare var svgMotionConfig: {
+    scrapeMotionValuesFromProps: typeof scrapeMotionValuesFromProps;
+    createRenderState: () => {
+        style: {};
+        transform: {};
+        transformKeys: never[];
+        transformOrigin: {};
+        vars: {};
+    } & {
+        attrs: {};
+    };
+    onMount: (props: MotionProps, instance: SVGGraphicsElement, _a: {
+        renderState: any;
+        latestValues: any;
+    }) => void;
+};
+export { svgMotionConfig };
+//# sourceMappingURL=config-motion.d.ts.map

package/dist/render/svg/config-motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-motion.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/svg/config-motion.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAyB,WAAW,EAAE,MAAM,cAAc,CAAC;AAWvE,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAE9E,QAAA,IAAI,eAAe;;;;;;;;;;;qBAIc,WAAW,YAAW,kBAAkB,MAAM;QAAE,WAAW,EAAE,GAAG,CAAC;QAAC,YAAY,EAAE,GAAG,CAAC;KAAE;CA2B7C,CAAA;AAK1E,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/render/svg/config-motion.js

@@ -0,0 +1,44 @@
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { buildSVGAttrs } from './utils/build-attrs.js';
+import { createSvgRenderState } from './utils/create-render-state.js';
+import { renderSVG } from './utils/render.js';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.js';
+var svgMotionConfig = {
+    //@ts-ignore
+    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+    createRenderState: createSvgRenderState,
+    onMount: function (props, instance, _a) {
+        var renderState = _a.renderState, latestValues = _a.latestValues;
+        try {
+            renderState.dimensions =
+                typeof instance.getBBox ===
+                    "function"
+                    ? instance.getBBox()
+                    : instance.getBoundingClientRect();
+        }
+        catch (e) {
+            // Most likely trying to measure an unrendered element under Firefox
+            renderState.dimensions = {
+                x: 0,
+                y: 0,
+                width: 0,
+                height: 0,
+            };
+        }
+        if (isPath(instance)) {
+            //@ts-ignore
+            renderState.totalPathLength = instance.getTotalLength();
+        }
+        buildSVGAttrs(renderState, latestValues, undefined, undefined, { enableHardwareAcceleration: false }, props.transformTemplate);
+        // TODO: Replace with direct assignment
+        // @ts-expect-error
+        renderSVG(instance, renderState);
+    },
+};
+function isPath(element) {
+    return element.tagName === "path";
+}
+export { svgMotionConfig };

package/dist/render/svg/lowercase-elements.d.ts

@@ -0,0 +1,10 @@
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * We keep these listed seperately as we use the lowercase tag names as part
+ * of the runtime bundle to detect SVG components
+ */
+export declare const lowercaseSVGElements: string[];
+//# sourceMappingURL=lowercase-elements.d.ts.map

package/dist/render/svg/lowercase-elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lowercase-elements.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/svg/lowercase-elements.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,UA0BhC,CAAC"}

package/{src/render/svg/lowercase-elements.ts → dist/render/svg/lowercase-elements.js}

@@ -1,35 +1,35 @@
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-/**
- * We keep these listed seperately as we use the lowercase tag names as part
- * of the runtime bundle to detect SVG components
- */
-export const lowercaseSVGElements = [
-    "animate",
-    "circle",
-    "defs",
-    "desc",
-    "ellipse",
-    "g",
-    "image",
-    "line",
-    "filter",
-    "marker",
-    "mask",
-    "metadata",
-    "path",
-    "pattern",
-    "polygon",
-    "polyline",
-    "rect",
-    "stop",
-    "svg",
-    "switch",
-    "symbol",
-    "text",
-    "tspan",
-    "use",
-    "view",
-];
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * We keep these listed seperately as we use the lowercase tag names as part
+ * of the runtime bundle to detect SVG components
+ */
+export const lowercaseSVGElements = [
+    "animate",
+    "circle",
+    "defs",
+    "desc",
+    "ellipse",
+    "g",
+    "image",
+    "line",
+    "filter",
+    "marker",
+    "mask",
+    "metadata",
+    "path",
+    "pattern",
+    "polygon",
+    "polyline",
+    "rect",
+    "stop",
+    "svg",
+    "switch",
+    "symbol",
+    "text",
+    "tspan",
+    "use",
+    "view",
+];

package/dist/render/svg/supported-elements.d.ts

@@ -0,0 +1,12 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+type UnionStringArray<T extends Readonly<string[]>> = T[number];
+/**
+ * @internal
+ */
+export declare const svgElements: readonly ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"];
+export type SVGElements = UnionStringArray<typeof svgElements>;
+export {};
+//# sourceMappingURL=supported-elements.d.ts.map

package/dist/render/svg/supported-elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"supported-elements.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/svg/supported-elements.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,KAAK,gBAAgB,CAAC,CAAC,SAAS,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;AAChE;;GAEG;AACH,eAAO,MAAM,WAAW,srBAAurB,CAAC;AAChtB,MAAM,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,WAAW,CAAC,CAAC"}

package/{src/render/svg/supported-elements.ts → dist/render/svg/supported-elements.js}

@@ -1,10 +1,4 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-type UnionStringArray<T extends Readonly<string[]>> = T[number];
-/**
- * @internal
- */
-export const svgElements = ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"] as const;
-export type SVGElements = UnionStringArray<typeof svgElements>;
+/**
+ * @internal
+ */
+export const svgElements = ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"];

package/dist/render/svg/types.d.ts

@@ -0,0 +1,39 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { MotionProps } from '../../motion/types';
+import type { ForwardRefComponent, HTMLRenderState } from '../html/types';
+import type { ResolvedValues } from '../types';
+import type { SVGElements } from './supported-elements';
+export interface SVGRenderState extends HTMLRenderState {
+    /**
+     * Measured dimensions of the SVG element to be used to calculate a transform-origin.
+     */
+    dimensions?: SVGDimensions;
+    /**
+     * A mutable record of attributes we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
+     */
+    attrs: ResolvedValues;
+    /**
+     * Measured path length if this is a SVGPathElement
+     */
+    totalPathLength?: number;
+}
+export type SVGDimensions = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * Motion-optimised versions of React's SVG components.
+ *
+ * @public
+ */
+export type SVGMotionComponents = {
+    [K in SVGElements]: ForwardRefComponent<MotionProps, SvelteHTMLElements[K]>;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/render/svg/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/svg/types.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,MAAM,WAAW,cAAe,SAAQ,eAAe;IACtD;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B;;;OAGG;IACH,KAAK,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB;AACD,MAAM,MAAM,aAAa,GAAG;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG;KAChC,CAAC,IAAI,WAAW,GAAG,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;CAC3E,CAAC"}

package/dist/render/svg/types.js

@@ -0,0 +1 @@
+export {};

package/{src/render/svg/use-props.ts → dist/render/svg/use-props.d.ts}

@@ -1,14 +1,13 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { MotionProps } from "../../motion/types";
-import type { ResolvedValues } from "../types";
-export type useSVGProps = (props: MotionProps, visualState: ResolvedValues) => {
-    style: {
-        [x: string]: string | number;
-    };
-};
-
-export { default as UseSVGProps } from './UseSVGProps.svelte';
-
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionProps } from "../../motion/types";
+import type { ResolvedValues } from "../types";
+export type useSVGProps = (props: MotionProps, visualState: ResolvedValues) => {
+    style: {
+        [x: string]: string | number;
+    };
+};
+export { default as UseSVGProps } from './UseSVGProps.svelte';
+//# sourceMappingURL=use-props.d.ts.map

package/dist/render/svg/use-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-props.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/svg/use-props.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,KAAK;IAC3E,KAAK,EAAE;QACH,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;KAChC,CAAC;CACL,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/render/svg/use-props.js

@@ -0,0 +1 @@
+export { default as UseSVGProps } from './UseSVGProps.svelte';

package/dist/render/svg/utils/build-attrs.d.ts

@@ -0,0 +1,16 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { DOMVisualElementOptions } from '../../dom/types';
+import type { ResolvedValues } from '../../types';
+import type { MotionProps } from '../../../motion/types';
+import type { LayoutState, TargetProjection } from '../../utils/state';
+import type { SVGRenderState } from '../types';
+import type { BuildProjectionTransform, BuildProjectionTransformOrigin } from '../../html/utils/build-projection-transform';
+/**
+ * Build SVG visual attrbutes, like cx and style.transform
+ */
+declare function buildSVGAttrs(state: SVGRenderState, { attrX, attrY, originX, originY, pathLength, pathSpacing, pathOffset, ...latest }: ResolvedValues, projection: TargetProjection | undefined, layoutState: LayoutState | undefined, options: DOMVisualElementOptions, transformTemplate?: MotionProps['transformTemplate'], buildProjectionTransform?: BuildProjectionTransform, buildProjectionTransformOrigin?: BuildProjectionTransformOrigin): void;
+export { buildSVGAttrs };
+//# sourceMappingURL=build-attrs.d.ts.map

package/dist/render/svg/utils/build-attrs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-attrs.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/svg/utils/build-attrs.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EACX,wBAAwB,EACxB,8BAA8B,EAC9B,MAAM,6CAA6C,CAAC;AAUrD;;GAEG;AACH,iBAAS,aAAa,CACrB,KAAK,EAAE,cAAc,EACrB,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,MAAM,EAAE,EAAE,cAAc,EAClG,UAAU,EAAE,gBAAgB,GAAG,SAAS,EACxC,WAAW,EAAE,WAAW,GAAG,SAAS,EACpC,OAAO,EAAE,uBAAuB,EAChC,iBAAiB,CAAC,EAAE,WAAW,CAAC,mBAAmB,CAAC,EACpD,wBAAwB,CAAC,EAAE,wBAAwB,EACnD,8BAA8B,CAAC,EAAE,8BAA8B,QAyC/D;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/render/svg/utils/build-attrs.js

@@ -0,0 +1,40 @@
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { buildHTMLStyles } from '../../html/utils/build-styles.js';
+import { calcSVGTransformOrigin } from './transform-origin.js';
+import { buildSVGPath } from './path.js';
+/**
+ * Build SVG visual attrbutes, like cx and style.transform
+ */
+function buildSVGAttrs(state, { attrX, attrY, originX, originY, pathLength, pathSpacing, pathOffset, ...latest }, projection, layoutState, options, transformTemplate, buildProjectionTransform, buildProjectionTransformOrigin) {
+    buildHTMLStyles(state, latest, projection, layoutState, options, transformTemplate, buildProjectionTransform, buildProjectionTransformOrigin);
+    state.attrs = state.style;
+    state.style = {};
+    var attrs = state.attrs, style = state.style, dimensions = state.dimensions, totalPathLength = state.totalPathLength;
+    /**
+     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
+     * and copy it into style.
+     */
+    if (attrs.transform) {
+        if (dimensions)
+            style.transform = attrs.transform;
+        delete attrs.transform;
+    }
+    // Parse transformOrigin
+    if (dimensions && (originX !== undefined || originY !== undefined || style.transform)) {
+        style.transformOrigin = calcSVGTransformOrigin(dimensions, // @ts-expect-error
+        originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
+    }
+    // Treat x/y not as shortcuts but as actual attributes
+    if (attrX !== undefined)
+        attrs.x = attrX;
+    if (attrY !== undefined)
+        attrs.y = attrY;
+    // Build SVG path if one has been measured
+    if (totalPathLength !== undefined && pathLength !== undefined) {
+        buildSVGPath(attrs, totalPathLength, pathLength, pathSpacing, pathOffset, false);
+    }
+}
+export { buildSVGAttrs };

package/dist/render/svg/utils/camel-case-attrs.d.ts

@@ -0,0 +1,9 @@
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * A set of attribute names that are always read/written as camel case.
+ */
+export declare const camelCaseAttributes: Set<string>;
+//# sourceMappingURL=camel-case-attrs.d.ts.map

package/dist/render/svg/utils/camel-case-attrs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"camel-case-attrs.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/svg/utils/camel-case-attrs.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF;;GAEG;AACH,eAAO,MAAM,mBAAmB,aAmB9B,CAAC"}

package/{src/render/svg/utils/camel-case-attrs.ts → dist/render/svg/utils/camel-case-attrs.js}

@@ -1,27 +1,27 @@
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-/**
- * A set of attribute names that are always read/written as camel case.
- */
-export const camelCaseAttributes = new Set([
-    "baseFrequency",
-    "diffuseConstant",
-    "kernelMatrix",
-    "kernelUnitLength",
-    "keySplines",
-    "keyTimes",
-    "limitingConeAngle",
-    "markerHeight",
-    "markerWidth",
-    "numOctaves",
-    "targetX",
-    "targetY",
-    "surfaceScale",
-    "specularConstant",
-    "specularExponent",
-    "stdDeviation",
-    "tableValues",
-    "viewBox",
-]);
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * A set of attribute names that are always read/written as camel case.
+ */
+export const camelCaseAttributes = new Set([
+    "baseFrequency",
+    "diffuseConstant",
+    "kernelMatrix",
+    "kernelUnitLength",
+    "keySplines",
+    "keyTimes",
+    "limitingConeAngle",
+    "markerHeight",
+    "markerWidth",
+    "numOctaves",
+    "targetX",
+    "targetY",
+    "surfaceScale",
+    "specularConstant",
+    "specularExponent",
+    "stdDeviation",
+    "tableValues",
+    "viewBox",
+]);

package/dist/render/svg/utils/create-render-state.d.ts

@@ -0,0 +1,11 @@
+declare var createSvgRenderState: () => {
+    style: {};
+    transform: {};
+    transformKeys: never[];
+    transformOrigin: {};
+    vars: {};
+} & {
+    attrs: {};
+};
+export { createSvgRenderState };
+//# sourceMappingURL=create-render-state.d.ts.map

package/dist/render/svg/utils/create-render-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-render-state.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/svg/utils/create-render-state.ts"],"names":[],"mappings":"AAYA,QAAA,IAAI,oBAAoB;;;;;;;;CAC0E,CAAC;AAEnG,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/render/svg/utils/create-render-state.js

@@ -0,0 +1,7 @@
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { createHtmlRenderState } from '../../html/utils/create-render-state.js';
+var createSvgRenderState = () => Object.assign(Object.assign({}, createHtmlRenderState()), { attrs: {} });
+export { createSvgRenderState };

package/dist/render/svg/utils/path.d.ts

@@ -0,0 +1,15 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ResolvedValues } from "../../types";
+/**
+ * Build SVG path properties. Uses the path's measured length to convert
+ * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
+ * and stroke-dasharray attributes.
+ *
+ * This function is mutative to reduce per-frame GC.
+ */
+declare function buildSVGPath(attrs: ResolvedValues, totalLength: number, length: number, spacing?: number, offset?: number, useDashCase?: boolean): void;
+export { buildSVGPath };
+//# sourceMappingURL=path.d.ts.map

package/dist/render/svg/utils/path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/svg/utils/path.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAsBlD;;;;;;GAMG;AACH,iBAAS,YAAY,CAAC,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,OAAO,QAazI;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/{src/render/svg/utils/path.ts → dist/render/svg/utils/path.js}

@@ -1,49 +1,46 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { ResolvedValues } from "../../types";
-
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-import {fixed} from '../../../utils/fix-process-env';
-import { px } from 'style-value-types';
-
-// Convert a progress 0-1 to a pixels value based on the provided length
-var progressToPixels = function (progress, length) {
-    return px.transform(progress * length);
-};
-var dashKeys = {
-    offset: "stroke-dashoffset",
-    array: "stroke-dasharray",
-};
-var camelKeys = {
-    offset: "strokeDashoffset",
-    array: "strokeDasharray",
-};
-/**
- * Build SVG path properties. Uses the path's measured length to convert
- * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
- * and stroke-dasharray attributes.
- *
- * This function is mutative to reduce per-frame GC.
- */
-function buildSVGPath(attrs: ResolvedValues, totalLength: number, length: number, spacing?: number, offset?: number, useDashCase?: boolean) {
-    if (spacing === void 0) { spacing = 1; }
-    if (offset === void 0) { offset = 0; }
-    if (useDashCase === void 0) { useDashCase = true; }
-    // We use dash case when setting attributes directly to the DOM node and camel case
-    // when defining props on a React component.
-    var keys = useDashCase ? dashKeys : camelKeys;
-    // Build the dash offset
-    attrs[keys.offset] = progressToPixels(-offset, totalLength);
-    // Build the dash array
-    var pathLength = progressToPixels(length, totalLength);
-    var pathSpacing = progressToPixels(spacing, totalLength);
-    attrs[keys.array] = pathLength + " " + pathSpacing;
-}
-
-export { buildSVGPath };
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { fixed } from '../../../utils/fix-process-env';
+import { px } from 'style-value-types';
+// Convert a progress 0-1 to a pixels value based on the provided length
+var progressToPixels = function (progress, length) {
+    return px.transform?.(progress * length);
+};
+var dashKeys = {
+    offset: "stroke-dashoffset",
+    array: "stroke-dasharray",
+};
+var camelKeys = {
+    offset: "strokeDashoffset",
+    array: "strokeDasharray",
+};
+/**
+ * Build SVG path properties. Uses the path's measured length to convert
+ * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
+ * and stroke-dasharray attributes.
+ *
+ * This function is mutative to reduce per-frame GC.
+ */
+function buildSVGPath(attrs, totalLength, length, spacing, offset, useDashCase) {
+    if (spacing === void 0) {
+        spacing = 1;
+    }
+    if (offset === void 0) {
+        offset = 0;
+    }
+    if (useDashCase === void 0) {
+        useDashCase = true;
+    }
+    // We use dash case when setting attributes directly to the DOM node and camel case
+    // when defining props on a React component.
+    var keys = useDashCase ? dashKeys : camelKeys;
+    // Build the dash offset
+    attrs[keys.offset] = progressToPixels(-offset, totalLength);
+    // Build the dash array
+    var pathLength = progressToPixels(length, totalLength);
+    var pathSpacing = progressToPixels(spacing, totalLength);
+    attrs[keys.array] = pathLength + " " + pathSpacing;
+}
+export { buildSVGPath };

package/dist/render/svg/utils/render.d.ts

@@ -0,0 +1,8 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { SVGRenderState } from "../types";
+declare function renderSVG(element: HTMLElement, renderState: SVGRenderState): void;
+export { renderSVG };
+//# sourceMappingURL=render.d.ts.map

package/dist/render/svg/utils/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/svg/utils/render.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAU/C,iBAAS,SAAS,CAAC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,QAKnE;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}