@cliquify.me/transitions 0.11.18 → 1.0.0

package/dist/index.es.js

@@ -1,24 +1,24 @@
-import { interpolate as _, spring as $e, measureSpring as we, AbsoluteFill as m, Internals as le, Sequence as M, useVideoConfig as be, useCurrentFrame as Fe, Freeze as z, random as B } from "remotion";
-import { jsx as o, Fragment as ue, jsxs as W } from "react/jsx-runtime";
-import k, { useMemo as h, Children as ve, useState as A } from "react";
-import { getBoundingBox as xe, translatePath as ce } from "@remotion/paths";
-import { makeStar as Ie, makePie as Ee } from "@remotion/shapes";
-const $ = (n) => ({
+import { interpolate as D, spring as ce, measureSpring as me, AbsoluteFill as c, Internals as Z, Sequence as M, useVideoConfig as de, useCurrentFrame as fe, Freeze as Y, random as B } from "remotion";
+import { jsx as o, Fragment as ee, jsxs as W } from "react/jsx-runtime";
+import C, { useMemo as h, Children as pe, useState as A } from "react";
+import { getBoundingBox as he, translatePath as te } from "@remotion/paths";
+import { makeStar as ge, makePie as ye } from "@remotion/shapes";
+const T = (n) => ({
   getDurationInFrames: () => n.durationInFrames,
-  getProgress: ({ frame: t }) => _(t, [0, n.durationInFrames], [0, 1], {
+  getProgress: ({ frame: t }) => D(t, [0, n.durationInFrames], [0, 1], {
     easing: n.easing,
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   })
-}), St = (n = {}) => ({
-  getDurationInFrames: ({ fps: t }) => n.durationInFrames ? n.durationInFrames : we({
+}), at = (n = {}) => ({
+  getDurationInFrames: ({ fps: t }) => n.durationInFrames ? n.durationInFrames : me({
     config: n.config,
     threshold: n.durationRestThreshold,
     fps: t
   }),
   getProgress: ({ fps: t, frame: e }) => {
     const r = n.reverse ? 0 : 1, s = n.reverse ? 1 : 0;
-    return $e({
+    return ce({
       fps: t,
       frame: e,
       to: r,
@@ -31,7 +31,7 @@ const $ = (n) => ({
   }
 });
 typeof window < "u" && (window.remotion_renderReady = !1, window.remotion_delayRenderTimeouts || (window.remotion_delayRenderTimeouts = {}), window.remotion_delayRenderHandles = []);
-var qe = {
+var $e = {
   "style.transformOrigin": {
     type: "transform-origin",
     step: 1,
@@ -67,7 +67,7 @@ var qe = {
     description: "Opacity",
     hiddenFromList: !1
   }
-}, Pe = {
+}, we = {
   "style.borderWidth": {
     type: "number",
     default: void 0,
@@ -98,7 +98,7 @@ var qe = {
     default: void 0,
     description: "Border color"
   }
-}, Ce = {
+}, Te = {
   "style.borderRadius": {
     type: "number",
     default: 0,
@@ -140,13 +140,13 @@ var qe = {
     description: "Bottom left radius",
     hiddenFromList: !1
   }
-}, Re = {
+}, be = {
   "style.backgroundColor": {
     type: "color",
     default: "transparent",
     description: "Color"
   }
-}, ke = {
+}, Se = {
   premountFor: {
     type: "number",
     default: 0,
@@ -164,9 +164,9 @@ var qe = {
     hiddenFromList: !0,
     keyframable: !1
   }
-}, Me = {
-  ...ke
-}, Le = {
+}, Fe = {
+  ...Se
+}, ve = {
   cropLeft: {
     type: "number",
     default: 0,
@@ -207,28 +207,28 @@ var qe = {
     hiddenFromList: !1,
     keyframable: !0
   }
-}, Ne = Le, Be = {
-  ...Ne,
-  ...qe,
-  ...Re,
-  ...Pe,
-  ...Ce,
-  ...Me
-}, We = {
+}, xe = ve, Ie = {
+  ...xe,
+  ...$e,
+  ...be,
+  ...we,
+  ...Te,
+  ...Fe
+}, Ee = {
   layout: {
     type: "enum",
     default: "absolute-fill",
     description: "Layout",
     variants: {
-      "absolute-fill": Be,
+      "absolute-fill": Ie,
       none: {}
     }
   }
 };
 ({
-  ...We.layout
+  ...Ee.layout
 });
-function Ae(n, t) {
+function Pe(n, t) {
   const { allowFloats: e, component: r } = t;
   if (typeof n > "u")
     throw new Error(`The "durationInFrames" prop ${r} is missing.`);
@@ -241,31 +241,31 @@ function Ae(n, t) {
   if (!Number.isFinite(n))
     throw new TypeError(`The "durationInFrames" prop ${r} must be finite, but got ${n}.`);
 }
-var Xe = {
-  validateDurationInFrames: Ae
+var qe = {
+  validateDurationInFrames: Pe
 };
-const me = k.createContext(null), de = k.createContext(null), ie = ({ presentationProgress: n, children: t }) => {
+const ne = C.createContext(null), re = C.createContext(null), K = ({ presentationProgress: n, children: t }) => {
   const e = h(() => ({
     enteringProgress: n
   }), [n]);
-  return /* @__PURE__ */ o(me.Provider, { value: e, children: t });
-}, se = ({ presentationProgress: n, children: t }) => {
+  return /* @__PURE__ */ o(ne.Provider, { value: e, children: t });
+}, G = ({ presentationProgress: n, children: t }) => {
   const e = h(() => ({
     exitingProgress: n
   }), [n]);
-  return /* @__PURE__ */ o(de.Provider, { value: e, children: t });
-}, fe = (n) => k.Children.toArray(n).reduce((e, r) => r.type === k.Fragment ? e.concat(
-  fe(
+  return /* @__PURE__ */ o(re.Provider, { value: e, children: t });
+}, oe = (n) => C.Children.toArray(n).reduce((e, r) => r.type === C.Fragment ? e.concat(
+  oe(
     r.props.children
   )
-) : (e.push(r), e), []), Oe = 0.01, Ue = ({
+) : (e.push(r), e), []), Re = 0.01, ke = ({
   children: n,
   presentationProgress: t,
   presentationDirection: e,
   passedProps: { direction: r = "from-left", enterStyle: s, exitStyle: l }
 }) => {
   const u = h(() => {
-    const i = t === 1 ? t * 100 : t * 100 - Oe;
+    const i = t === 1 ? t * 100 : t * 100 - Re;
     if (e === "exiting")
       switch (r) {
         case "from-left":
@@ -315,128 +315,123 @@ const me = k.createContext(null), de = k.createContext(null), ie = ({ presentati
     ...u,
     ...e === "entering" ? s : l
   }), [u, s, l, e]);
-  return /* @__PURE__ */ o(m, { style: a, children: n });
+  return /* @__PURE__ */ o(c, { style: a, children: n });
 }, N = (n) => ({
-  component: Ue,
+  component: ke,
   props: {}
-}), Ye = Xe.validateDurationInFrames, L = function(n) {
+}), Ce = qe.validateDurationInFrames, L = function(n) {
   return null;
-};
-L.isTransitionSeriesTransition = !0;
-const X = ({ children: n }) => /* @__PURE__ */ o(ue, { children: n });
-X.isSeriesSequence = !0;
-const De = ({
+}, z = ({ children: n }) => /* @__PURE__ */ o(ee, { children: n }), Me = ({
   children: n
 }) => {
-  const { fps: t } = be(), e = Fe(), r = h(() => {
+  const { fps: t } = de(), e = fe(), r = h(() => {
     let s = 0, l = 0;
-    const u = fe(n);
-    return ve.map(u, (a, i) => {
-      var V, H, J, K, G, Q, Z, ee;
-      const c = a;
-      if (typeof c == "string") {
-        if (c.trim() === "")
+    const u = oe(n);
+    return pe.map(u, (a, i) => {
+      const f = a;
+      if (typeof f == "string") {
+        if (f.trim() === "")
           return null;
         throw new TypeError(
-          `The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${c}"`
+          `The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${f}"`
         );
       }
-      const d = u[i - 1], g = u[i + 1], O = typeof d != "string" && typeof d < "u" && (d.type === L || ((V = d.type) == null ? void 0 : V.isTransitionSeriesTransition) || ((H = d.type) == null ? void 0 : H.name) === "TransitionSeriesTransition"), p = typeof d == "string" || typeof d > "u" ? null : O ? d : null, j = typeof g != "string" && typeof g < "u" && (g.type === L || ((J = g.type) == null ? void 0 : J.isTransitionSeriesTransition) || ((K = g.type) == null ? void 0 : K.name) === "TransitionSeriesTransition"), y = typeof g == "string" || typeof g > "u" ? null : j ? g : null, pe = O;
-      if (c.type === L || ((G = c.type) == null ? void 0 : G.isTransitionSeriesTransition) || ((Q = c.type) == null ? void 0 : Q.name) === "TransitionSeriesTransition") {
-        if (pe)
+      const d = u[i - 1], $ = u[i + 1], p = typeof d == "string" || typeof d > "u" ? null : d.type === L ? d : null, g = typeof $ == "string" || typeof $ > "u" ? null : $.type === L ? $ : null, _ = typeof d == "string" || typeof d > "u" ? !1 : d.type === L;
+      if (f.type === L) {
+        if (_)
           throw new TypeError(
             `A <TransitionSeries.Transition /> component must not be followed by another <TransitionSeries.Transition /> component (nth children = ${i - 1} and ${i})`
           );
         return null;
       }
-      if (!(c.type === X || ((Z = c.type) == null ? void 0 : Z.isSeriesSequence) || ((ee = c.type) == null ? void 0 : ee.name) === "SeriesSequence"))
+      if (f.type !== z)
         throw new TypeError(
-          `The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${c} instead`
+          `The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${f} instead`
         );
-      const E = c, C = `index = ${i}, duration = ${E.props.durationInFrames}`;
+      const E = f, R = `index = ${i}, duration = ${E.props.durationInFrames}`;
       if (!(E != null && E.props.children))
         throw new TypeError(
-          `A <TransitionSeries.Sequence /> component (${C}) was detected to not have any children. Delete it to fix this error.`
+          `A <TransitionSeries.Sequence /> component (${R}) was detected to not have any children. Delete it to fix this error.`
         );
-      const S = E.props.durationInFrames, {
-        durationInFrames: w,
-        children: ft,
+      const w = E.props.durationInFrames, {
+        durationInFrames: b,
+        children: tt,
         ...F
       } = E.props;
-      Ye(S, {
+      Ce(w, {
         component: "of a <TransitionSeries.Sequence /> component",
         allowFloats: !0
       });
-      const q = E.props.offset ?? 0;
-      if (Number.isNaN(q))
+      const P = E.props.offset ?? 0;
+      if (Number.isNaN(P))
         throw new TypeError(
-          `The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${C}).`
+          `The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${R}).`
         );
-      if (!Number.isFinite(q))
+      if (!Number.isFinite(P))
         throw new TypeError(
-          `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${q} (${C}).`
+          `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${P} (${R}).`
         );
-      if (q % 1 !== 0)
+      if (P % 1 !== 0)
         throw new TypeError(
-          `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${q} (${C}).`
+          `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${P} (${R}).`
         );
-      const he = l + q;
-      let U = 0;
-      p && (U = p.props.timing.getDurationInFrames({
+      const ie = l + P;
+      let X = 0;
+      p && (X = p.props.timing.getDurationInFrames({
         fps: t
-      }), s -= U / 2);
-      let f = he - U / 2;
-      l += S + q, f < 0 && (f = 0);
-      const Y = y ? y.props.timing.getProgress({
-        frame: e - f - w + y.props.timing.getDurationInFrames({ fps: t }) / 2 + s,
+      }), s -= X / 2);
+      let m = ie - X / 2;
+      l += w + P, m < 0 && (m = 0);
+      const O = g ? g.props.timing.getProgress({
+        frame: e - m - b + g.props.timing.getDurationInFrames({ fps: t }) / 2 + s,
         fps: t
-      }) : null, R = p ? p.props.timing.getProgress({
-        frame: e - f,
+      }) : null, k = p ? p.props.timing.getProgress({
+        frame: e - m,
         fps: t
-      }) : null, ge = p ? p.props.timing.getProgress({
-        frame: e - (f + w),
+      }) : null, se = p ? p.props.timing.getProgress({
+        frame: e - (m + b),
         fps: t
       }) : null;
-      if (y && S < y.props.timing.getDurationInFrames({ fps: t }) / 2)
+      if (g && w < g.props.timing.getDurationInFrames({ fps: t }) / 2)
         throw new Error(
-          `The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${y.props.timing.getDurationInFrames(
+          `The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${g.props.timing.getDurationInFrames(
             { fps: t }
-          )} frames long, but the sequence is only ${S} frames long (${C})`
+          )} frames long, but the sequence is only ${w} frames long (${R})`
         );
-      if (p && S < p.props.timing.getDurationInFrames({ fps: t }) / 2)
+      if (p && w < p.props.timing.getDurationInFrames({ fps: t }) / 2)
         throw new Error(
           `The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${p.props.timing.getDurationInFrames(
             { fps: t }
-          )} frames long, but the sequence is only ${S} frames long (${C})`
+          )} frames long, but the sequence is only ${w} frames long (${R})`
         );
-      if (y && p && ge !== null && R !== null) {
-        const v = y.props.presentation ?? N(), x = p.props.presentation ?? N(), I = p.props.timing.getDurationInFrames({
+      if (g && p && se !== null && k !== null) {
+        const v = g.props.presentation ?? N(), x = p.props.presentation ?? N(), I = p.props.timing.getDurationInFrames({
           fps: t
-        }), b = y.props.timing.getDurationInFrames({
+        }), S = g.props.timing.getDurationInFrames({
           fps: t
-        }), P = v.component, D = x.component, te = e < +Math.floor(f) + I / 2, ne = e > Math.floor(f) + Math.floor(w) + I / 2, ye = ne ? Math.floor(f) + Math.floor(w) + Math.floor(b / 2) : Math.floor(f), re = te ? Math.floor(f) : Math.floor(f) + I / 2, oe = y.props.timing.getProgress({
-          frame: e - (re + w - b / 2),
+        }), q = v.component, U = x.component, j = e < +Math.floor(m) + I / 2, V = e > Math.floor(m) + Math.floor(b) + I / 2, ae = V ? Math.floor(m) + Math.floor(b) + Math.floor(S / 2) : Math.floor(m), H = j ? Math.floor(m) : Math.floor(m) + I / 2, J = g.props.timing.getProgress({
+          frame: e - (H + b - S / 2),
           fps: t
-        }), Te = e > f, Se = e < f + w + b / 2 + I / 2;
+        }), le = e > m, ue = e < m + b + S / 2 + I / 2;
         return /* @__PURE__ */ o(
-          z,
+          Y,
           {
-            active: Se && Te && (te || ne),
-            frame: ye,
+            active: ue && le && (j || V),
+            frame: ae,
             children: /* @__PURE__ */ o(
               M,
               {
-                from: re,
-                durationInFrames: S + b / 2,
+                from: H,
+                durationInFrames: w + S / 2,
                 ...F,
                 name: F.name || "<TS.Sequence>",
                 children: /* @__PURE__ */ o(
-                  P,
+                  q,
                   {
                     passedProps: v.props ?? {},
                     presentationDirection: "exiting",
-                    presentationProgress: oe,
-                    presentationDurationInFrames: y.props.timing.getDurationInFrames(
+                    presentationProgress: J,
+                    presentationDurationInFrames: g.props.timing.getDurationInFrames(
                       { fps: t }
                     ),
                     onElementImage: () => {
@@ -445,15 +440,15 @@ const De = ({
                     },
                     bothEnteringAndExiting: !1,
                     children: /* @__PURE__ */ o(
-                      se,
+                      G,
                       {
-                        presentationProgress: oe,
+                        presentationProgress: J,
                         children: /* @__PURE__ */ o(
-                          D,
+                          U,
                           {
                             passedProps: x.props ?? {},
                             presentationDirection: "entering",
-                            presentationProgress: R,
+                            presentationProgress: k,
                             presentationDurationInFrames: p.props.timing.getDurationInFrames(
                               { fps: t }
                             ),
@@ -463,9 +458,9 @@ const De = ({
                             },
                             bothEnteringAndExiting: !1,
                             children: /* @__PURE__ */ o(
-                              ie,
+                              K,
                               {
-                                presentationProgress: R,
+                                presentationProgress: k,
                                 children: a
                               }
                             )
@@ -482,18 +477,18 @@ const De = ({
           i
         );
       }
-      if (R !== null && p) {
-        const v = p.props.timing.getDurationInFrames({ fps: t }) / 2, x = p.props.presentation ?? N(), I = x.component, b = e < f + v, P = b ? Math.floor(f) : Math.floor(f) + v, D = e > P;
+      if (k !== null && p) {
+        const v = p.props.timing.getDurationInFrames({ fps: t }) / 2, x = p.props.presentation ?? N(), I = x.component, S = e < m + v, q = S ? Math.floor(m) : Math.floor(m) + v, U = e > q;
         return /* @__PURE__ */ o(
-          z,
+          Y,
           {
-            active: D && b,
-            frame: P,
+            active: U && S,
+            frame: q,
             children: /* @__PURE__ */ o(
               M,
               {
-                from: P,
-                durationInFrames: S,
+                from: q,
+                durationInFrames: w,
                 ...F,
                 name: F.name || "<TS.Sequence>",
                 children: /* @__PURE__ */ o(
@@ -501,7 +496,7 @@ const De = ({
                   {
                     passedProps: x.props ?? {},
                     presentationDirection: "entering",
-                    presentationProgress: R,
+                    presentationProgress: k,
                     presentationDurationInFrames: p.props.timing.getDurationInFrames(
                       { fps: t }
                     ),
@@ -511,9 +506,9 @@ const De = ({
                     },
                     bothEnteringAndExiting: !1,
                     children: /* @__PURE__ */ o(
-                      ie,
+                      K,
                       {
-                        presentationProgress: R,
+                        presentationProgress: k,
                         children: a
                       }
                     )
@@ -526,18 +521,18 @@ const De = ({
           i
         );
       }
-      if (Y !== null && y) {
-        const v = y.props.timing.getDurationInFrames({ fps: t }) / 2, x = y.props.presentation ?? N(), I = x.component, b = e > Math.floor(w) + Math.floor(f), P = e < Math.floor(w) + Math.floor(f) + v;
+      if (O !== null && g) {
+        const v = g.props.timing.getDurationInFrames({ fps: t }) / 2, x = g.props.presentation ?? N(), I = x.component, S = e > Math.floor(b) + Math.floor(m), q = e < Math.floor(b) + Math.floor(m) + v;
         return /* @__PURE__ */ o(
-          z,
+          Y,
           {
-            active: P && b,
-            frame: Math.floor(w),
+            active: q && S,
+            frame: Math.floor(b),
             children: /* @__PURE__ */ o(
               M,
               {
-                from: Math.floor(f),
-                durationInFrames: S + v,
+                from: Math.floor(m),
+                durationInFrames: w + v,
                 ...F,
                 name: F.name || "<TS.Sequence>",
                 children: /* @__PURE__ */ o(
@@ -545,8 +540,8 @@ const De = ({
                   {
                     passedProps: x.props ?? {},
                     presentationDirection: "exiting",
-                    presentationProgress: Y,
-                    presentationDurationInFrames: y.props.timing.getDurationInFrames(
+                    presentationProgress: O,
+                    presentationDurationInFrames: g.props.timing.getDurationInFrames(
                       { fps: t }
                     ),
                     onElementImage: () => {
@@ -555,9 +550,9 @@ const De = ({
                     },
                     bothEnteringAndExiting: !1,
                     children: /* @__PURE__ */ o(
-                      se,
+                      G,
                       {
-                        presentationProgress: Y,
+                        presentationProgress: O,
                         children: a
                       }
                     )
@@ -573,8 +568,8 @@ const De = ({
       return /* @__PURE__ */ o(
         M,
         {
-          from: Math.floor(f),
-          durationInFrames: S,
+          from: Math.floor(m),
+          durationInFrames: w,
           ...F,
           name: F.name || "<TS.Sequence>",
           children: a
@@ -583,14 +578,14 @@ const De = ({
       );
     });
   }, [n, t, e]);
-  return /* @__PURE__ */ o(ue, { children: r });
-}, T = ({ children: n, name: t, layout: e, ...r }) => /* @__PURE__ */ o(M, { name: t ?? "<TransitionSeries>", layout: e ?? "absolute-fill", ...r, children: /* @__PURE__ */ o(De, { children: n }) });
-T.Sequence = X;
-T.Transition = L;
-le.addSequenceStackTraces(T);
-le.addSequenceStackTraces(X);
-const $t = () => {
-  const n = k.useContext(me), t = k.useContext(de);
+  return /* @__PURE__ */ o(ee, { children: r });
+}, y = ({ children: n, name: t, layout: e, ...r }) => /* @__PURE__ */ o(M, { name: t ?? "<TransitionSeries>", layout: e ?? "absolute-fill", ...r, children: /* @__PURE__ */ o(Me, { children: n }) });
+y.Sequence = z;
+y.Transition = L;
+Z.addSequenceStackTraces(y);
+Z.addSequenceStackTraces(z);
+const lt = () => {
+  const n = C.useContext(ne), t = C.useContext(re);
   return !n && !t ? {
     isInTransitionSeries: !1,
     entering: 1,
@@ -600,13 +595,13 @@ const $t = () => {
     entering: (n == null ? void 0 : n.enteringProgress) ?? 1,
     exiting: (t == null ? void 0 : t.exitingProgress) ?? 0
   };
-}, ze = ({
+}, Le = ({
   children: n,
   presentationDirection: t,
   presentationProgress: e,
   passedProps: r
 }) => {
-  const l = Math.sqrt(r.width ** 2 + r.height ** 2) / 2 * e, u = je(
+  const l = Math.sqrt(r.width ** 2 + r.height ** 2) / 2 * e, u = Be(
     r.width / 2,
     r.height / 2,
     l
@@ -615,74 +610,74 @@ const $t = () => {
     height: "100%",
     clipPath: t === "exiting" ? void 0 : `url(#${a})`
   }), [a, t]);
-  return /* @__PURE__ */ W(m, { children: [
-    /* @__PURE__ */ o(m, { style: i, children: n }),
-    t === "exiting" ? null : /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o("svg", { width: r.width, height: r.height, children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: a, children: /* @__PURE__ */ o("path", { d: u, fill: "black" }) }) }) }) })
+  return /* @__PURE__ */ W(c, { children: [
+    /* @__PURE__ */ o(c, { style: i, children: n }),
+    t === "exiting" ? null : /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o("svg", { width: r.width, height: r.height, children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: a, children: /* @__PURE__ */ o("path", { d: u, fill: "black" }) }) }) }) })
   ] });
-}, _e = (n) => ({ component: ze, props: n }), je = (n, t, e) => `M ${n}, ${t}
+}, Ne = (n) => ({ component: Le, props: n }), Be = (n, t, e) => `M ${n}, ${t}
             m -${e}, 0
             a ${e},${e} 0 1,0 ${e * 2},0
-            a ${e},${e} 0 1,0 -${e * 2},0`, Ve = ({
+            a ${e},${e} 0 1,0 -${e * 2},0`, We = ({
   children: n,
   presentationDirection: t,
   presentationProgress: e,
   passedProps: r
 }) => {
-  const { width: s, height: l } = r, u = s * e, a = l * e, i = s / 2 - u / 2, c = l / 2 - a / 2, [d] = A(() => String(B(null))), g = h(() => ({
+  const { width: s, height: l } = r, u = s * e, a = l * e, i = s / 2 - u / 2, f = l / 2 - a / 2, [d] = A(() => String(B(null))), $ = h(() => ({
     width: "100%",
     height: "100%",
     clipPath: t === "exiting" ? void 0 : `url(#${d})`
   }), [d, t]);
-  return /* @__PURE__ */ W(m, { children: [
-    /* @__PURE__ */ o(m, { style: g, children: n }),
-    t === "exiting" ? null : /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: d, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ W(c, { children: [
+    /* @__PURE__ */ o(c, { style: $, children: n }),
+    t === "exiting" ? null : /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: d, children: /* @__PURE__ */ o(
       "rect",
       {
         x: i,
-        y: c,
+        y: f,
         width: u,
         height: a,
         fill: "black"
       }
     ) }) }) }) })
   ] });
-}, He = (n) => ({ component: Ve, props: n }), Je = ({
+}, Ae = (n) => ({ component: We, props: n }), Xe = ({
   children: n,
   presentationDirection: t,
   presentationProgress: e,
   passedProps: r
 }) => {
-  const s = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, l = s * e, u = s * 2 * e, { path: a } = Ie({
+  const s = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, l = s * e, u = s * 2 * e, { path: a } = ge({
     innerRadius: l,
     outerRadius: u,
     points: 5
-  }), i = xe(a), c = ce(
+  }), i = he(a), f = te(
     a,
     r.width / 2 - i.width / 2,
     r.height / 2 - i.height / 2
-  ), [d] = A(() => String(B(null))), g = h(() => ({
+  ), [d] = A(() => String(B(null))), $ = h(() => ({
     width: "100%",
     height: "100%",
     clipPath: t === "exiting" ? void 0 : `url(#${d})`
   }), [d, t]);
-  return /* @__PURE__ */ W(m, { children: [
-    /* @__PURE__ */ o(m, { style: g, children: n }),
-    t === "exiting" ? null : /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: d, children: /* @__PURE__ */ o("path", { d: c, fill: "black" }) }) }) }) })
+  return /* @__PURE__ */ W(c, { children: [
+    /* @__PURE__ */ o(c, { style: $, children: n }),
+    t === "exiting" ? null : /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: d, children: /* @__PURE__ */ o("path", { d: f, fill: "black" }) }) }) }) })
   ] });
-}, Ke = (n) => ({ component: Je, props: n }), Ge = ({
+}, Oe = (n) => ({ component: Xe, props: n }), Ue = ({
   children: n,
   presentationDirection: t,
   presentationProgress: e,
   passedProps: r
 }) => {
-  const { width: s, height: l } = r, u = s * e, a = s / 2 - u / 2, [i] = A(() => String(B(null))), c = h(() => ({
+  const { width: s, height: l } = r, u = s * e, a = s / 2 - u / 2, [i] = A(() => String(B(null))), f = h(() => ({
     width: "100%",
     height: "100%",
     clipPath: t === "exiting" ? void 0 : `url(#${i})`
   }), [i, t]);
-  return /* @__PURE__ */ W(m, { children: [
-    /* @__PURE__ */ o(m, { style: c, children: n }),
-    t === "exiting" ? null : /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: i, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ W(c, { children: [
+    /* @__PURE__ */ o(c, { style: f, children: n }),
+    t === "exiting" ? null : /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: i, children: /* @__PURE__ */ o(
       "rect",
       {
         x: a,
@@ -693,8 +688,8 @@ const $t = () => {
       }
     ) }) }) }) })
   ] });
-}, Qe = (n) => ({ component: Ge, props: n });
-var Ze = ({ children: n, presentationDirection: t, presentationProgress: e, passedProps: r }) => {
+}, Ye = (n) => ({ component: Ue, props: n });
+var De = ({ children: n, presentationDirection: t, presentationProgress: e, passedProps: r }) => {
   const s = t === "entering", l = h(() => ({
     opacity: s ? e : r.shouldFadeOutExitingScene ? 1 - e : 1,
     ...t === "entering" ? r.enterStyle : r.exitStyle
@@ -706,21 +701,21 @@ var Ze = ({ children: n, presentationDirection: t, presentationProgress: e, pass
     t,
     e
   ]);
-  return /* @__PURE__ */ o(m, {
+  return /* @__PURE__ */ o(c, {
     style: l,
     children: n
   });
-}, ae = (n) => ({
-  component: Ze,
+}, Q = (n) => ({
+  component: De,
   props: n ?? {}
-}), et = 0.01, tt = ({
+}), ze = 0.01, _e = ({
   children: n,
   presentationProgress: t,
   presentationDirection: e,
   passedProps: { direction: r = "from-left", enterStyle: s, exitStyle: l }
 }) => {
   const u = h(() => {
-    const i = t === 1 ? t * 100 : t * 100 - et;
+    const i = t === 1 ? t * 100 : t * 100 - ze;
     if (e === "exiting")
       switch (r) {
         case "from-left":
@@ -770,14 +765,14 @@ var Ze = ({ children: n, presentationDirection: t, presentationProgress: e, pass
     ...u,
     ...e === "entering" ? s : l
   }), [u, s, l, e]);
-  return /* @__PURE__ */ o(m, {
+  return /* @__PURE__ */ o(c, {
     style: a,
     children: n
   });
-}, nt = (n) => ({
-  component: tt,
+}, je = (n) => ({
+  component: _e,
   props: n ?? {}
-}), rt = (n, t) => {
+}), Ve = (n, t) => {
   const e = n * 100;
   switch (t) {
     case "from-left":
@@ -799,7 +794,7 @@ var Ze = ({ children: n, presentationDirection: t, presentationProgress: e, pass
     default:
       throw new Error(`Unknown direction ${JSON.stringify(t)}`);
   }
-}, ot = (n, t) => {
+}, He = (n, t) => {
   const e = n * 100;
   switch (t) {
     case "from-left":
@@ -821,7 +816,7 @@ var Ze = ({ children: n, presentationDirection: t, presentationProgress: e, pass
     default:
       throw new Error(`Unknown direction ${JSON.stringify(t)}`);
   }
-}, it = ({
+}, Je = ({
   children: n,
   presentationProgress: t,
   presentationDirection: e,
@@ -833,25 +828,25 @@ var Ze = ({ children: n, presentationDirection: t, presentationProgress: e, pass
     outerExitStyle: a
   }
 }) => {
-  const i = e === "entering" ? t : 1 - t, c = e === "entering" ? rt(i, r) : ot(i, r), d = h(() => ({
+  const i = e === "entering" ? t : 1 - t, f = e === "entering" ? Ve(i, r) : He(i, r), d = h(() => ({
     width: "100%",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
-    clipPath: c,
+    clipPath: f,
     ...e === "entering" ? s : l
-  }), [c, s, l, e]), g = h(() => e === "entering" ? u : a, [u, a, e]);
-  return /* @__PURE__ */ o(m, {
-    style: g,
-    children: /* @__PURE__ */ o(m, {
+  }), [f, s, l, e]), $ = h(() => e === "entering" ? u : a, [u, a, e]);
+  return /* @__PURE__ */ o(c, {
+    style: $,
+    children: /* @__PURE__ */ o(c, {
       style: d,
       children: n
     })
   });
-}, st = (n) => ({
-  component: it,
+}, Ke = (n) => ({
+  component: Je,
   props: n ?? {}
-}), at = ({
+}), Ge = ({
   children: n,
   presentationDirection: t,
   presentationProgress: e,
@@ -864,12 +859,12 @@ var Ze = ({ children: n, presentationDirection: t, presentationProgress: e, pass
     outerExitStyle: i
   }
 }) => {
-  const c = h(() => {
-    const p = t === "entering" ? _(e, [0, 1], [r === "from-right" || r === "from-top" ? 180 : -180, 0]) : _(e, [0, 1], [0, r === "from-right" || r === "from-top" ? -180 : 180]);
+  const f = h(() => {
+    const g = t === "entering" ? D(e, [0, 1], [r === "from-right" || r === "from-top" ? 180 : -180, 0]) : D(e, [0, 1], [0, r === "from-right" || r === "from-top" ? -180 : 180]);
     return {
       width: "100%",
       height: "100%",
-      transform: `${r === "from-top" || r === "from-bottom" ? "rotateX" : "rotateY"}(${p}deg)`,
+      transform: `${r === "from-top" || r === "from-bottom" ? "rotateX" : "rotateY"}(${g}deg)`,
       backfaceVisibility: "hidden",
       WebkitBackfaceVisibility: "hidden",
       ...t === "entering" ? l : u
@@ -885,18 +880,18 @@ var Ze = ({ children: n, presentationDirection: t, presentationProgress: e, pass
     transformStyle: "preserve-3d",
     ...t === "entering" ? a : i
   }), [a, i, s, t]);
-  return /* @__PURE__ */ o(m, {
+  return /* @__PURE__ */ o(c, {
     style: d,
-    children: /* @__PURE__ */ o(m, {
-      style: c,
+    children: /* @__PURE__ */ o(c, {
+      style: f,
       children: n
     })
   });
-}, lt = (n) => ({ component: at, props: n ?? {} }), ut = ({ children: n, presentationDirection: t, presentationProgress: e, passedProps: r }) => {
-  const s = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, { path: l } = Ee({
+}, Qe = (n) => ({ component: Ge, props: n ?? {} }), Ze = ({ children: n, presentationDirection: t, presentationProgress: e, passedProps: r }) => {
+  const s = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, { path: l } = ye({
     radius: s,
     progress: e
-  }), u = ce(l, -(s * 2 - r.width) / 2, -(s * 2 - r.height) / 2), a = h(() => ({
+  }), u = te(l, -(s * 2 - r.width) / 2, -(s * 2 - r.height) / 2), a = h(() => ({
     width: "100%",
     height: "100%",
     clipPath: t === "exiting" ? void 0 : `path("${u}")`,
@@ -911,84 +906,84 @@ var Ze = ({ children: n, presentationDirection: t, presentationProgress: e, pass
     r.outerExitStyle,
     t
   ]);
-  return /* @__PURE__ */ o(m, {
+  return /* @__PURE__ */ o(c, {
     style: i,
-    children: /* @__PURE__ */ o(m, {
+    children: /* @__PURE__ */ o(c, {
       style: a,
       children: n
     })
   });
-}, ct = (n) => ({ component: ut, props: n ?? {} });
-const wt = {
+}, et = (n) => ({ component: Ze, props: n ?? {} });
+const ut = {
   none: ({ id: n }) => /* @__PURE__ */ o(
-    T.Transition,
+    y.Transition,
     {
-      presentation: ae(),
-      timing: $({ durationInFrames: 1 })
+      presentation: Q(),
+      timing: T({ durationInFrames: 1 })
     },
     n
   ),
   fade: ({ durationInFrames: n, id: t }) => /* @__PURE__ */ o(
-    T.Transition,
+    y.Transition,
     {
-      presentation: ae(),
-      timing: $({ durationInFrames: n })
+      presentation: Q(),
+      timing: T({ durationInFrames: n })
     },
     t
   ),
   slide: ({ durationInFrames: n, id: t, direction: e }) => /* @__PURE__ */ o(
-    T.Transition,
+    y.Transition,
     {
-      presentation: nt({ direction: e }),
-      timing: $({ durationInFrames: n })
+      presentation: je({ direction: e }),
+      timing: T({ durationInFrames: n })
     },
     t
   ),
   wipe: ({ durationInFrames: n, id: t, direction: e }) => /* @__PURE__ */ o(
-    T.Transition,
+    y.Transition,
     {
-      presentation: st({ direction: e }),
-      timing: $({ durationInFrames: n })
+      presentation: Ke({ direction: e }),
+      timing: T({ durationInFrames: n })
     },
     t
   ),
   flip: ({ durationInFrames: n, id: t }) => /* @__PURE__ */ o(
-    T.Transition,
+    y.Transition,
     {
-      presentation: lt(),
-      timing: $({ durationInFrames: n })
+      presentation: Qe(),
+      timing: T({ durationInFrames: n })
     },
     t
   ),
   clockWipe: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
-    T.Transition,
+    y.Transition,
     {
-      presentation: ct({ width: n, height: t }),
-      timing: $({ durationInFrames: e })
+      presentation: et({ width: n, height: t }),
+      timing: T({ durationInFrames: e })
     },
     r
   ),
   star: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
-    T.Transition,
+    y.Transition,
     {
-      presentation: Ke({ width: n, height: t }),
-      timing: $({ durationInFrames: e })
+      presentation: Oe({ width: n, height: t }),
+      timing: T({ durationInFrames: e })
     },
     r
   ),
   circle: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
-    T.Transition,
+    y.Transition,
     {
-      presentation: _e({ width: n, height: t }),
-      timing: $({ durationInFrames: e })
+      presentation: Ne({ width: n, height: t }),
+      timing: T({ durationInFrames: e })
     },
     r
   ),
   rectangle: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
-    T.Transition,
+    y.Transition,
     {
-      presentation: He({ width: n, height: t }),
-      timing: $({ durationInFrames: e })
+      presentation: Ae({ width: n, height: t }),
+      timing: T({ durationInFrames: e })
     },
     r
   ),
@@ -998,28 +993,28 @@ const wt = {
     durationInFrames: e,
     id: r
   }) => /* @__PURE__ */ o(
-    T.Transition,
+    y.Transition,
     {
-      presentation: Qe({ width: n, height: t }),
-      timing: $({ durationInFrames: e })
+      presentation: Ye({ width: n, height: t }),
+      timing: T({ durationInFrames: e })
     },
     r
   )
 };
 export {
-  T as TransitionSeries,
-  wt as Transitions,
-  _e as circle,
-  ct as clockWipe,
-  ae as fade,
-  lt as flip,
-  $ as linearTiming,
-  He as rectangle,
-  nt as slide,
-  Qe as slidingDoors,
-  St as springTiming,
-  Ke as star,
-  $t as useTransitionProgress,
-  st as wipe
+  y as TransitionSeries,
+  ut as Transitions,
+  Ne as circle,
+  et as clockWipe,
+  Q as fade,
+  Qe as flip,
+  T as linearTiming,
+  Ae as rectangle,
+  je as slide,
+  Ye as slidingDoors,
+  at as springTiming,
+  Oe as star,
+  lt as useTransitionProgress,
+  Ke as wipe
 };
 //# sourceMappingURL=index.es.js.map