@cliquify.me/transitions 1.0.2 → 1.0.4

package/dist/index.es.js

@@ -1,28 +1,28 @@
-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) => ({
+import { interpolate as z, spring as mt, measureSpring as ft, AbsoluteFill as u, Internals as tt, Sequence as L, useVideoConfig as dt, useCurrentFrame as ht, Freeze as Y, random as B } from "remotion";
+import { jsx as o, Fragment as et, jsxs as A } from "react/jsx-runtime";
+import M, { useMemo as h, Children as pt, useState as X } from "react";
+import { getBoundingBox as gt, translatePath as _ } from "@remotion/paths";
+import { makeStar as yt, makePie as nt } from "@remotion/shapes";
+const w = (n) => ({
   getDurationInFrames: () => n.durationInFrames,
-  getProgress: ({ frame: t }) => D(t, [0, n.durationInFrames], [0, 1], {
+  getProgress: ({ frame: e }) => z(e, [0, n.durationInFrames], [0, 1], {
     easing: n.easing,
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   })
-}), at = (n = {}) => ({
-  getDurationInFrames: ({ fps: t }) => n.durationInFrames ? n.durationInFrames : me({
+}), ue = (n = {}) => ({
+  getDurationInFrames: ({ fps: e }) => n.durationInFrames ? n.durationInFrames : ft({
     config: n.config,
     threshold: n.durationRestThreshold,
-    fps: t
+    fps: e
   }),
-  getProgress: ({ fps: t, frame: e }) => {
-    const r = n.reverse ? 0 : 1, s = n.reverse ? 1 : 0;
-    return ce({
-      fps: t,
-      frame: e,
+  getProgress: ({ fps: e, frame: t }) => {
+    const r = n.reverse ? 0 : 1, a = n.reverse ? 1 : 0;
+    return mt({
+      fps: e,
+      frame: t,
       to: r,
-      from: s,
+      from: a,
       config: n.config,
       durationInFrames: n.durationInFrames,
       durationRestThreshold: n.durationRestThreshold,
@@ -31,7 +31,7 @@ const T = (n) => ({
   }
 });
 typeof window < "u" && (window.remotion_renderReady = !1, window.remotion_delayRenderTimeouts || (window.remotion_delayRenderTimeouts = {}), window.remotion_delayRenderHandles = []);
-var $e = {
+var $t = {
   "style.transformOrigin": {
     type: "transform-origin",
     step: 1,
@@ -67,7 +67,7 @@ var $e = {
     description: "Opacity",
     hiddenFromList: !1
   }
-}, we = {
+}, bt = {
   "style.borderWidth": {
     type: "number",
     default: void 0,
@@ -98,7 +98,7 @@ var $e = {
     default: void 0,
     description: "Border color"
   }
-}, Te = {
+}, wt = {
   "style.borderRadius": {
     type: "number",
     default: 0,
@@ -140,13 +140,13 @@ var $e = {
     description: "Bottom left radius",
     hiddenFromList: !1
   }
-}, be = {
+}, Tt = {
   "style.backgroundColor": {
     type: "color",
     default: "transparent",
     description: "Color"
   }
-}, Se = {
+}, St = {
   premountFor: {
     type: "number",
     default: 0,
@@ -164,9 +164,9 @@ var $e = {
     hiddenFromList: !0,
     keyframable: !1
   }
-}, Fe = {
-  ...Se
-}, ve = {
+}, Ft = {
+  ...St
+}, vt = {
   cropLeft: {
     type: "number",
     default: 0,
@@ -207,66 +207,66 @@ var $e = {
     hiddenFromList: !1,
     keyframable: !0
   }
-}, xe = ve, Ie = {
-  ...xe,
-  ...$e,
-  ...be,
-  ...we,
-  ...Te,
-  ...Fe
-}, Ee = {
+}, xt = vt, It = {
+  ...xt,
+  ...$t,
+  ...Tt,
+  ...bt,
+  ...wt,
+  ...Ft
+}, kt = {
   layout: {
     type: "enum",
     default: "absolute-fill",
     description: "Layout",
     variants: {
-      "absolute-fill": Ie,
+      "absolute-fill": It,
       none: {}
     }
   }
 };
 ({
-  ...Ee.layout
+  ...kt.layout
 });
-function Pe(n, t) {
-  const { allowFloats: e, component: r } = t;
+function Et(n, e) {
+  const { allowFloats: t, component: r } = e;
   if (typeof n > "u")
     throw new Error(`The "durationInFrames" prop ${r} is missing.`);
   if (typeof n != "number")
     throw new Error(`The "durationInFrames" prop ${r} must be a number, but you passed a value of type ${typeof n}`);
   if (n <= 0)
     throw new TypeError(`The "durationInFrames" prop ${r} must be positive, but got ${n}.`);
-  if (!e && n % 1 !== 0)
+  if (!t && n % 1 !== 0)
     throw new TypeError(`The "durationInFrames" prop ${r} must be an integer, but got ${n}.`);
   if (!Number.isFinite(n))
     throw new TypeError(`The "durationInFrames" prop ${r} must be finite, but got ${n}.`);
 }
-var qe = {
-  validateDurationInFrames: Pe
+var Ct = {
+  validateDurationInFrames: Et
 };
-const ne = C.createContext(null), re = C.createContext(null), K = ({ presentationProgress: n, children: t }) => {
-  const e = h(() => ({
+const rt = M.createContext(null), ot = M.createContext(null), Q = ({ presentationProgress: n, children: e }) => {
+  const t = h(() => ({
     enteringProgress: n
   }), [n]);
-  return /* @__PURE__ */ o(ne.Provider, { value: e, children: t });
-}, G = ({ presentationProgress: n, children: t }) => {
-  const e = h(() => ({
+  return /* @__PURE__ */ o(rt.Provider, { value: t, children: e });
+}, Z = ({ presentationProgress: n, children: e }) => {
+  const t = h(() => ({
     exitingProgress: n
   }), [n]);
-  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(
+  return /* @__PURE__ */ o(ot.Provider, { value: t, children: e });
+}, it = (n) => M.Children.toArray(n).reduce((t, r) => r.type === M.Fragment ? t.concat(
+  it(
     r.props.children
   )
-) : (e.push(r), e), []), Re = 0.01, ke = ({
+) : (t.push(r), t), []), qt = 0.01, Rt = ({
   children: n,
-  presentationProgress: t,
-  presentationDirection: e,
-  passedProps: { direction: r = "from-left", enterStyle: s, exitStyle: l }
+  presentationProgress: e,
+  presentationDirection: t,
+  passedProps: { direction: r = "from-left", enterStyle: a, exitStyle: c }
 }) => {
-  const u = h(() => {
-    const i = t === 1 ? t * 100 : t * 100 - Re;
-    if (e === "exiting")
+  const l = h(() => {
+    const i = e === 1 ? e * 100 : e * 100 - qt;
+    if (t === "exiting")
       switch (r) {
         case "from-left":
           return {
@@ -274,7 +274,7 @@ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentatio
           };
         case "from-right":
           return {
-            transform: `translateX(${-t * 100}%)`
+            transform: `translateX(${-e * 100}%)`
           };
         case "from-top":
           return {
@@ -282,7 +282,7 @@ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentatio
           };
         case "from-bottom":
           return {
-            transform: `translateY(${-t * 100}%)`
+            transform: `translateY(${-e * 100}%)`
           };
         default:
           throw new Error(`Invalid direction: ${r}`);
@@ -290,7 +290,7 @@ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentatio
     switch (r) {
       case "from-left":
         return {
-          transform: `translateX(${-100 + t * 100}%)`
+          transform: `translateX(${-100 + e * 100}%)`
         };
       case "from-right":
         return {
@@ -298,7 +298,7 @@ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentatio
         };
       case "from-top":
         return {
-          transform: `translateY(${-100 + t * 100}%)`
+          transform: `translateY(${-100 + e * 100}%)`
         };
       case "from-bottom":
         return {
@@ -307,132 +307,132 @@ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentatio
       default:
         throw new Error(`Invalid direction: ${r}`);
     }
-  }, [e, t, r]), a = h(() => ({
+  }, [t, e, r]), s = h(() => ({
     width: "100%",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
-    ...u,
-    ...e === "entering" ? s : l
-  }), [u, s, l, e]);
-  return /* @__PURE__ */ o(c, { style: a, children: n });
+    ...l,
+    ...t === "entering" ? a : c
+  }), [l, a, c, t]);
+  return /* @__PURE__ */ o(u, { style: s, children: n });
 }, N = (n) => ({
-  component: ke,
+  component: Rt,
   props: {}
-}), Ce = qe.validateDurationInFrames, L = function(n) {
+}), Mt = Ct.validateDurationInFrames, W = function(n) {
   return null;
-}, z = ({ children: n }) => /* @__PURE__ */ o(ee, { children: n }), Me = ({
+}, j = ({ children: n }) => /* @__PURE__ */ o(et, { children: n }), Lt = ({
   children: n
 }) => {
-  const { fps: t } = de(), e = fe(), r = h(() => {
-    let s = 0, l = 0;
-    const u = oe(n);
-    return pe.map(u, (a, i) => {
-      const f = a;
-      if (typeof f == "string") {
-        if (f.trim() === "")
+  const { fps: e } = dt(), t = ht(), r = h(() => {
+    let a = 0, c = 0;
+    const l = it(n);
+    return pt.map(l, (s, i) => {
+      const m = s;
+      if (typeof m == "string") {
+        if (m.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 "${f}"`
+          `The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${m}"`
         );
       }
-      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 (_)
+      const d = l[i - 1], y = l[i + 1], f = typeof d == "string" || typeof d > "u" ? null : d.type === W ? d : null, g = typeof y == "string" || typeof y > "u" ? null : y.type === W ? y : null, V = typeof d == "string" || typeof d > "u" ? !1 : d.type === W;
+      if (m.type === W) {
+        if (V)
           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 (f.type !== z)
+      if (m.type !== j)
         throw new TypeError(
-          `The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${f} instead`
+          `The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${m} instead`
         );
-      const E = f, R = `index = ${i}, duration = ${E.props.durationInFrames}`;
-      if (!(E != null && E.props.children))
+      const k = m, q = `index = ${i}, duration = ${k.props.durationInFrames}`;
+      if (!(k != null && k.props.children))
         throw new TypeError(
-          `A <TransitionSeries.Sequence /> component (${R}) was detected to not have any children. Delete it to fix this error.`
+          `A <TransitionSeries.Sequence /> component (${q}) was detected to not have any children. Delete it to fix this error.`
         );
-      const w = E.props.durationInFrames, {
-        durationInFrames: b,
-        children: tt,
+      const b = k.props.durationInFrames, {
+        durationInFrames: T,
+        children: oe,
         ...F
-      } = E.props;
-      Ce(w, {
+      } = k.props;
+      Mt(b, {
         component: "of a <TransitionSeries.Sequence /> component",
         allowFloats: !0
       });
-      const P = E.props.offset ?? 0;
-      if (Number.isNaN(P))
+      const E = k.props.offset ?? 0;
+      if (Number.isNaN(E))
         throw new TypeError(
-          `The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${R}).`
+          `The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${q}).`
         );
-      if (!Number.isFinite(P))
+      if (!Number.isFinite(E))
         throw new TypeError(
-          `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${P} (${R}).`
+          `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${E} (${q}).`
         );
-      if (P % 1 !== 0)
+      if (E % 1 !== 0)
         throw new TypeError(
-          `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${P} (${R}).`
+          `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${E} (${q}).`
         );
-      const ie = l + P;
-      let X = 0;
-      p && (X = p.props.timing.getDurationInFrames({
-        fps: t
-      }), 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, k = p ? p.props.timing.getProgress({
-        frame: e - m,
-        fps: t
-      }) : null, se = p ? p.props.timing.getProgress({
-        frame: e - (m + b),
-        fps: t
+      const at = c + E;
+      let O = 0;
+      f && (O = f.props.timing.getDurationInFrames({
+        fps: e
+      }), a -= O / 2);
+      let p = at - O / 2;
+      c += b + E, p < 0 && (p = 0);
+      const P = g ? g.props.timing.getProgress({
+        frame: t - p - T + g.props.timing.getDurationInFrames({ fps: e }) / 2 + a,
+        fps: e
+      }) : null, R = f ? f.props.timing.getProgress({
+        frame: t - p,
+        fps: e
+      }) : null, st = f ? f.props.timing.getProgress({
+        frame: t - (p + T),
+        fps: e
       }) : null;
-      if (g && w < g.props.timing.getDurationInFrames({ fps: t }) / 2)
+      if (g && b < g.props.timing.getDurationInFrames({ fps: e }) / 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 ${g.props.timing.getDurationInFrames(
-            { fps: t }
-          )} frames long, but the sequence is only ${w} frames long (${R})`
+            { fps: e }
+          )} frames long, but the sequence is only ${b} frames long (${q})`
         );
-      if (p && w < p.props.timing.getDurationInFrames({ fps: t }) / 2)
+      if (f && b < f.props.timing.getDurationInFrames({ fps: e }) / 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 ${w} frames long (${R})`
+          `The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${f.props.timing.getDurationInFrames(
+            { fps: e }
+          )} frames long, but the sequence is only ${b} frames long (${q})`
         );
-      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
+      if (g && f && st !== null && R !== null) {
+        const v = g.props.presentation ?? N(), x = f.props.presentation ?? N(), I = f.props.timing.getDurationInFrames({
+          fps: e
         }), S = g.props.timing.getDurationInFrames({
-          fps: t
-        }), 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
-        }), le = e > m, ue = e < m + b + S / 2 + I / 2;
+          fps: e
+        }), C = v.component, U = x.component, H = t < +Math.floor(p) + I / 2, J = t > Math.floor(p) + Math.floor(T) + I / 2, lt = J ? Math.floor(p) + Math.floor(T) + Math.floor(S / 2) : Math.floor(p), K = H ? Math.floor(p) : Math.floor(p) + I / 2, G = g.props.timing.getProgress({
+          frame: t - (K + T - S / 2),
+          fps: e
+        }), ct = t > p, ut = t < p + T + S / 2 + I / 2;
         return /* @__PURE__ */ o(
           Y,
           {
-            active: ue && le && (j || V),
-            frame: ae,
+            active: ut && ct && (H || J),
+            frame: lt,
             children: /* @__PURE__ */ o(
-              M,
+              L,
               {
-                from: H,
-                durationInFrames: w + S / 2,
+                from: K,
+                durationInFrames: b + S / 2,
                 ...F,
                 name: F.name || "<TS.Sequence>",
                 children: /* @__PURE__ */ o(
-                  q,
+                  C,
                   {
                     passedProps: v.props ?? {},
                     presentationDirection: "exiting",
-                    presentationProgress: J,
+                    presentationProgress: G,
                     presentationDurationInFrames: g.props.timing.getDurationInFrames(
-                      { fps: t }
+                      { fps: e }
                     ),
                     onElementImage: () => {
                     },
@@ -440,17 +440,17 @@ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentatio
                     },
                     bothEnteringAndExiting: !1,
                     children: /* @__PURE__ */ o(
-                      G,
+                      Z,
                       {
-                        presentationProgress: J,
+                        presentationProgress: G,
                         children: /* @__PURE__ */ o(
                           U,
                           {
                             passedProps: x.props ?? {},
                             presentationDirection: "entering",
-                            presentationProgress: k,
-                            presentationDurationInFrames: p.props.timing.getDurationInFrames(
-                              { fps: t }
+                            presentationProgress: R,
+                            presentationDurationInFrames: f.props.timing.getDurationInFrames(
+                              { fps: e }
                             ),
                             onElementImage: () => {
                             },
@@ -458,10 +458,10 @@ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentatio
                             },
                             bothEnteringAndExiting: !1,
                             children: /* @__PURE__ */ o(
-                              K,
+                              Q,
                               {
-                                presentationProgress: k,
-                                children: a
+                                presentationProgress: R,
+                                children: s
                               }
                             )
                           }
@@ -477,18 +477,18 @@ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentatio
           i
         );
       }
-      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;
+      if (R !== null && f) {
+        const v = f.props.timing.getDurationInFrames({ fps: e }) / 2, x = f.props.presentation ?? N(), I = x.component, S = t < p + v, C = S ? Math.floor(p) : Math.floor(p) + v, U = t > C;
         return /* @__PURE__ */ o(
           Y,
           {
             active: U && S,
-            frame: q,
+            frame: C,
             children: /* @__PURE__ */ o(
-              M,
+              L,
               {
-                from: q,
-                durationInFrames: w,
+                from: C,
+                durationInFrames: b,
                 ...F,
                 name: F.name || "<TS.Sequence>",
                 children: /* @__PURE__ */ o(
@@ -496,9 +496,9 @@ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentatio
                   {
                     passedProps: x.props ?? {},
                     presentationDirection: "entering",
-                    presentationProgress: k,
-                    presentationDurationInFrames: p.props.timing.getDurationInFrames(
-                      { fps: t }
+                    presentationProgress: R,
+                    presentationDurationInFrames: f.props.timing.getDurationInFrames(
+                      { fps: e }
                     ),
                     onElementImage: () => {
                     },
@@ -506,10 +506,10 @@ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentatio
                     },
                     bothEnteringAndExiting: !1,
                     children: /* @__PURE__ */ o(
-                      K,
+                      Q,
                       {
-                        presentationProgress: k,
-                        children: a
+                        presentationProgress: R,
+                        children: s
                       }
                     )
                   }
@@ -521,18 +521,18 @@ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentatio
           i
         );
       }
-      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;
+      if (P !== null && g) {
+        const v = g.props.timing.getDurationInFrames({ fps: e }) / 2, x = g.props.presentation ?? N(), I = x.component, S = t > Math.floor(T) + Math.floor(p), C = t < Math.floor(T) + Math.floor(p) + v;
         return /* @__PURE__ */ o(
           Y,
           {
-            active: q && S,
-            frame: Math.floor(b),
+            active: C && S,
+            frame: Math.floor(T),
             children: /* @__PURE__ */ o(
-              M,
+              L,
               {
-                from: Math.floor(m),
-                durationInFrames: w + v,
+                from: Math.floor(p),
+                durationInFrames: b + v,
                 ...F,
                 name: F.name || "<TS.Sequence>",
                 children: /* @__PURE__ */ o(
@@ -540,9 +540,9 @@ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentatio
                   {
                     passedProps: x.props ?? {},
                     presentationDirection: "exiting",
-                    presentationProgress: O,
+                    presentationProgress: P,
                     presentationDurationInFrames: g.props.timing.getDurationInFrames(
-                      { fps: t }
+                      { fps: e }
                     ),
                     onElementImage: () => {
                     },
@@ -550,10 +550,10 @@ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentatio
                     },
                     bothEnteringAndExiting: !1,
                     children: /* @__PURE__ */ o(
-                      G,
+                      Z,
                       {
-                        presentationProgress: O,
-                        children: a
+                        presentationProgress: P,
+                        children: s
                       }
                     )
                   }
@@ -566,157 +566,276 @@ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentatio
         );
       }
       return /* @__PURE__ */ o(
-        M,
+        L,
         {
-          from: Math.floor(m),
-          durationInFrames: w,
+          from: Math.floor(p),
+          durationInFrames: b,
           ...F,
           name: F.name || "<TS.Sequence>",
-          children: a
+          children: s
         },
         i
       );
     });
-  }, [n, t, e]);
-  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 ? {
+  }, [n, e, t]);
+  return /* @__PURE__ */ o(et, { children: r });
+}, $ = ({ children: n, name: e, layout: t, ...r }) => /* @__PURE__ */ o(L, { name: e ?? "<TransitionSeries>", layout: t ?? "absolute-fill", ...r, children: /* @__PURE__ */ o(Lt, { children: n }) });
+$.Sequence = j;
+$.Transition = W;
+tt.addSequenceStackTraces($);
+tt.addSequenceStackTraces(j);
+const me = () => {
+  const n = M.useContext(rt), e = M.useContext(ot);
+  return !n && !e ? {
     isInTransitionSeries: !1,
     entering: 1,
     exiting: 0
   } : {
     isInTransitionSeries: !0,
     entering: (n == null ? void 0 : n.enteringProgress) ?? 1,
-    exiting: (t == null ? void 0 : t.exitingProgress) ?? 0
+    exiting: (e == null ? void 0 : e.exitingProgress) ?? 0
   };
-}, Le = ({
+}, Wt = ({
   children: n,
-  presentationDirection: t,
-  presentationProgress: e,
+  presentationDirection: e,
+  presentationProgress: t,
   passedProps: r
 }) => {
-  const l = Math.sqrt(r.width ** 2 + r.height ** 2) / 2 * e, u = Be(
-    r.width / 2,
-    r.height / 2,
-    l
-  ), [a] = A(() => String(B(null))), i = h(() => ({
+  const { width: a, height: c, direction: l = "center" } = r;
+  let s = a / 2, i = c / 2, m = Math.hypot(a / 2, c / 2);
+  l === "from-left" ? (s = 0, i = c / 2, m = Math.hypot(a, c / 2)) : l === "from-right" ? (s = a, i = c / 2, m = Math.hypot(a, c / 2)) : l === "from-top" ? (s = a / 2, i = 0, m = Math.hypot(a / 2, c)) : l === "from-bottom" && (s = a / 2, i = c, m = Math.hypot(a / 2, c));
+  const d = m * t, y = Bt(s, i, d), [f] = X(() => String(B(null))), g = h(() => ({
     width: "100%",
     height: "100%",
-    clipPath: t === "exiting" ? void 0 : `url(#${a})`
-  }), [a, t]);
-  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" }) }) }) }) })
+    clipPath: e === "exiting" ? void 0 : `url(#${f})`
+  }), [f, e]);
+  return /* @__PURE__ */ A(u, { children: [
+    /* @__PURE__ */ o(u, { style: g, children: n }),
+    e === "exiting" ? null : /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o("svg", { width: r.width, height: r.height, children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: f, children: /* @__PURE__ */ o("path", { d: y, fill: "black" }) }) }) }) })
   ] });
-}, 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`, We = ({
+}, Nt = (n) => ({ component: Wt, props: n }), Bt = (n, e, t) => `M ${n}, ${e}
+            m -${t}, 0
+            a ${t},${t} 0 1,0 ${t * 2},0
+            a ${t},${t} 0 1,0 -${t * 2},0`, At = ({
   children: n,
-  presentationDirection: t,
-  presentationProgress: e,
+  presentationDirection: e,
+  presentationProgress: t,
   passedProps: r
 }) => {
-  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(() => ({
+  const { width: a, height: c } = r, l = a * t, s = c * t, i = a / 2 - l / 2, m = c / 2 - s / 2, [d] = X(() => String(B(null))), y = h(() => ({
     width: "100%",
     height: "100%",
-    clipPath: t === "exiting" ? void 0 : `url(#${d})`
-  }), [d, t]);
-  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(
+    clipPath: e === "exiting" ? void 0 : `url(#${d})`
+  }), [d, e]);
+  return /* @__PURE__ */ A(u, { children: [
+    /* @__PURE__ */ o(u, { style: y, children: n }),
+    e === "exiting" ? null : /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: d, children: /* @__PURE__ */ o(
       "rect",
       {
         x: i,
-        y: f,
-        width: u,
-        height: a,
+        y: m,
+        width: l,
+        height: s,
         fill: "black"
       }
     ) }) }) }) })
   ] });
-}, Ae = (n) => ({ component: We, props: n }), Xe = ({
+}, Xt = (n) => ({ component: At, props: n }), Ot = ({
   children: n,
-  presentationDirection: t,
-  presentationProgress: e,
+  presentationDirection: e,
+  presentationProgress: t,
   passedProps: r
 }) => {
-  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,
+  const a = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, c = a * t, l = a * 2 * t, { path: s } = yt({
+    innerRadius: c,
+    outerRadius: l,
     points: 5
-  }), i = he(a), f = te(
-    a,
+  }), i = gt(s), m = _(
+    s,
     r.width / 2 - i.width / 2,
     r.height / 2 - i.height / 2
-  ), [d] = A(() => String(B(null))), $ = h(() => ({
+  ), [d] = X(() => String(B(null))), y = h(() => ({
     width: "100%",
     height: "100%",
-    clipPath: t === "exiting" ? void 0 : `url(#${d})`
-  }), [d, t]);
-  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" }) }) }) }) })
+    clipPath: e === "exiting" ? void 0 : `url(#${d})`
+  }), [d, e]);
+  return /* @__PURE__ */ A(u, { children: [
+    /* @__PURE__ */ o(u, { style: y, children: n }),
+    e === "exiting" ? null : /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: d, children: /* @__PURE__ */ o("path", { d: m, fill: "black" }) }) }) }) })
   ] });
-}, Oe = (n) => ({ component: Xe, props: n }), Ue = ({
+}, Pt = (n) => ({ component: Ot, props: n }), Ut = ({
   children: n,
-  presentationDirection: t,
-  presentationProgress: e,
+  presentationDirection: e,
+  presentationProgress: t,
   passedProps: r
 }) => {
-  const { width: s, height: l } = r, u = s * e, a = s / 2 - u / 2, [i] = A(() => String(B(null))), f = h(() => ({
+  const { width: a, height: c } = r, l = a * t, s = a / 2 - l / 2, [i] = X(() => String(B(null))), m = h(() => ({
     width: "100%",
     height: "100%",
-    clipPath: t === "exiting" ? void 0 : `url(#${i})`
-  }), [i, t]);
-  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(
+    clipPath: e === "exiting" ? void 0 : `url(#${i})`
+  }), [i, e]);
+  return /* @__PURE__ */ A(u, { children: [
+    /* @__PURE__ */ o(u, { style: m, children: n }),
+    e === "exiting" ? null : /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: i, children: /* @__PURE__ */ o(
       "rect",
       {
-        x: a,
+        x: s,
         y: 0,
-        width: u,
-        height: l,
+        width: l,
+        height: c,
         fill: "black"
       }
     ) }) }) }) })
   ] });
-}, 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
+}, Yt = (n) => ({ component: Ut, props: n }), zt = ({
+  children: n,
+  presentationDirection: e,
+  presentationProgress: t,
+  passedProps: r
+}) => {
+  const { direction: a = "from-left" } = r, c = h(() => {
+    let l = 0, s = 0;
+    switch (a) {
+      case "from-left":
+        l = e === "entering" ? -100 + t * 100 : t * 100;
+        break;
+      case "from-right":
+        l = e === "entering" ? 100 - t * 100 : -t * 100;
+        break;
+      case "from-top":
+        s = e === "entering" ? -100 + t * 100 : t * 100;
+        break;
+      case "from-bottom":
+        s = e === "entering" ? 100 - t * 100 : -t * 100;
+        break;
+      case "top-left":
+        l = e === "entering" ? -100 + t * 100 : t * 100, s = e === "entering" ? -100 + t * 100 : t * 100;
+        break;
+      case "top-right":
+        l = e === "entering" ? 100 - t * 100 : -t * 100, s = e === "entering" ? -100 + t * 100 : t * 100;
+        break;
+      case "bottom-left":
+        l = e === "entering" ? -100 + t * 100 : t * 100, s = e === "entering" ? 100 - t * 100 : -t * 100;
+        break;
+      case "bottom-right":
+        l = e === "entering" ? 100 - t * 100 : -t * 100, s = e === "entering" ? 100 - t * 100 : -t * 100;
+        break;
+    }
+    return {
+      width: "100%",
+      height: "100%",
+      transform: `translate3d(${l}%, ${s}%, 0)`
+    };
+  }, [a, e, t]);
+  return /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(u, { style: c, children: n }) });
+}, _t = (n = {}) => ({
+  component: zt,
+  props: n
+}), jt = ({
+  children: n,
+  presentationDirection: e,
+  presentationProgress: t,
+  passedProps: r
+}) => {
+  const { direction: a = "from-left" } = r, c = h(() => {
+    if (e === "exiting")
+      return { width: "100%", height: "100%" };
+    const l = t * 100;
+    let s = "inset(0 0 0 0)";
+    switch (a) {
+      case "from-left":
+        s = `inset(0 ${100 - l}% 0 0)`;
+        break;
+      case "from-right":
+        s = `inset(0 0 0 ${100 - l}%)`;
+        break;
+      case "from-top":
+        s = `inset(0 0 ${100 - l}% 0)`;
+        break;
+      case "from-bottom":
+        s = `inset(${100 - l}% 0 0 0)`;
+        break;
+      case "top-left": {
+        const i = t * 200;
+        s = `polygon(0 0, ${i}% 0, 0 ${i}%)`;
+        break;
+      }
+      case "top-right": {
+        const i = t * 200;
+        s = `polygon(100% 0, ${100 - i}% 0, 100% ${i}%)`;
+        break;
+      }
+      case "bottom-left": {
+        const i = t * 200;
+        s = `polygon(0 100%, ${i}% 100%, 0 ${100 - i}%)`;
+        break;
+      }
+      case "bottom-right": {
+        const i = t * 200;
+        s = `polygon(100% 100%, ${100 - i}% 100%, 100% ${100 - i}%)`;
+        break;
+      }
+      default:
+        s = `inset(0 ${100 - l}% 0 0)`;
+        break;
+    }
+    return {
+      width: "100%",
+      height: "100%",
+      clipPath: s
+    };
+  }, [a, e, t]);
+  return /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(u, { style: c, children: n }) });
+}, Vt = (n = {}) => ({
+  component: jt,
+  props: n
+}), Ht = ({ children: n, presentationDirection: e, presentationProgress: t, passedProps: r }) => {
+  const a = r.direction === "counter-clockwise" || r.direction === "counterclockwise", c = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, { path: l } = nt({
+    radius: c,
+    progress: t,
+    counterClockwise: a
+  }), s = _(
+    l,
+    -(c * 2 - r.width) / 2,
+    -(c * 2 - r.height) / 2
+  ), i = h(() => ({
+    width: "100%",
+    height: "100%",
+    clipPath: e === "exiting" ? void 0 : `path("${s}")`
+  }), [s, e]);
+  return /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(u, { style: i, children: n }) });
+}, Jt = (n) => ({
+  component: Ht,
+  props: n ?? { width: 1920, height: 1080 }
+});
+var Kt = ({ children: n, presentationDirection: e, presentationProgress: t, passedProps: r }) => {
+  const a = e === "entering", c = h(() => ({
+    opacity: a ? t : r.shouldFadeOutExitingScene ? 1 - t : 1,
+    ...e === "entering" ? r.enterStyle : r.exitStyle
   }), [
-    s,
+    a,
     r.enterStyle,
     r.exitStyle,
     r.shouldFadeOutExitingScene,
-    t,
-    e
+    e,
+    t
   ]);
-  return /* @__PURE__ */ o(c, {
-    style: l,
+  return /* @__PURE__ */ o(u, {
+    style: c,
     children: n
   });
-}, Q = (n) => ({
-  component: De,
+}, D = (n) => ({
+  component: Kt,
   props: n ?? {}
-}), ze = 0.01, _e = ({
+}), Gt = 0.01, Qt = ({
   children: n,
-  presentationProgress: t,
-  presentationDirection: e,
-  passedProps: { direction: r = "from-left", enterStyle: s, exitStyle: l }
+  presentationProgress: e,
+  presentationDirection: t,
+  passedProps: { direction: r = "from-left", enterStyle: a, exitStyle: c }
 }) => {
-  const u = h(() => {
-    const i = t === 1 ? t * 100 : t * 100 - ze;
-    if (e === "exiting")
+  const l = h(() => {
+    const i = e === 1 ? e * 100 : e * 100 - Gt;
+    if (t === "exiting")
       switch (r) {
         case "from-left":
           return {
@@ -724,7 +843,7 @@ var De = ({ children: n, presentationDirection: t, presentationProgress: e, pass
           };
         case "from-right":
           return {
-            transform: `translateX(${-t * 100}%)`
+            transform: `translateX(${-e * 100}%)`
           };
         case "from-top":
           return {
@@ -732,7 +851,7 @@ var De = ({ children: n, presentationDirection: t, presentationProgress: e, pass
           };
         case "from-bottom":
           return {
-            transform: `translateY(${-t * 100}%)`
+            transform: `translateY(${-e * 100}%)`
           };
         default:
           throw new Error(`Invalid direction: ${r}`);
@@ -740,7 +859,7 @@ var De = ({ children: n, presentationDirection: t, presentationProgress: e, pass
     switch (r) {
       case "from-left":
         return {
-          transform: `translateX(${-100 + t * 100}%)`
+          transform: `translateX(${-100 + e * 100}%)`
         };
       case "from-right":
         return {
@@ -748,7 +867,7 @@ var De = ({ children: n, presentationDirection: t, presentationProgress: e, pass
         };
       case "from-top":
         return {
-          transform: `translateY(${-100 + t * 100}%)`
+          transform: `translateY(${-100 + e * 100}%)`
         };
       case "from-bottom":
         return {
@@ -757,264 +876,271 @@ var De = ({ children: n, presentationDirection: t, presentationProgress: e, pass
       default:
         throw new Error(`Invalid direction: ${r}`);
     }
-  }, [e, t, r]), a = h(() => ({
+  }, [t, e, r]), s = h(() => ({
     width: "100%",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
-    ...u,
-    ...e === "entering" ? s : l
-  }), [u, s, l, e]);
-  return /* @__PURE__ */ o(c, {
-    style: a,
+    ...l,
+    ...t === "entering" ? a : c
+  }), [l, a, c, t]);
+  return /* @__PURE__ */ o(u, {
+    style: s,
     children: n
   });
-}, je = (n) => ({
-  component: _e,
+}, fe = (n) => ({
+  component: Qt,
   props: n ?? {}
-}), Ve = (n, t) => {
-  const e = n * 100;
-  switch (t) {
+}), Zt = (n, e) => {
+  const t = n * 100;
+  switch (e) {
     case "from-left":
-      return `polygon(0% 0%, ${e}% 0%, ${e}% 100%, 0% 100%)`;
+      return `polygon(0% 0%, ${t}% 0%, ${t}% 100%, 0% 100%)`;
     case "from-top-left":
-      return `polygon(0% 0%, ${e * 2}% 0%, 0% ${e * 2}%)`;
+      return `polygon(0% 0%, ${t * 2}% 0%, 0% ${t * 2}%)`;
     case "from-top":
-      return `polygon(0% 0%, 100% 0%, 100% ${e}%, 0% ${e}%)`;
+      return `polygon(0% 0%, 100% 0%, 100% ${t}%, 0% ${t}%)`;
     case "from-top-right":
-      return `polygon(100% 0%, ${100 - e * 2}% 0%, 100% ${e * 2}%)`;
+      return `polygon(100% 0%, ${100 - t * 2}% 0%, 100% ${t * 2}%)`;
     case "from-right":
-      return `polygon(100% 0%, 100% 100%, ${100 - e}% 100%, ${100 - e}% 0%)`;
+      return `polygon(100% 0%, 100% 100%, ${100 - t}% 100%, ${100 - t}% 0%)`;
     case "from-bottom-right":
-      return `polygon(100% 100%, ${100 - e * 2}% 100%, 100% ${100 - e * 2}%)`;
+      return `polygon(100% 100%, ${100 - t * 2}% 100%, 100% ${100 - t * 2}%)`;
     case "from-bottom":
-      return `polygon(0% 100%, 100% 100%, 100% ${100 - e}%, 0% ${100 - e}%)`;
+      return `polygon(0% 100%, 100% 100%, 100% ${100 - t}%, 0% ${100 - t}%)`;
     case "from-bottom-left":
-      return `polygon(0% 100%, 0% ${100 - e * 2}%, ${e * 2}% 100%)`;
+      return `polygon(0% 100%, 0% ${100 - t * 2}%, ${t * 2}% 100%)`;
     default:
-      throw new Error(`Unknown direction ${JSON.stringify(t)}`);
+      throw new Error(`Unknown direction ${JSON.stringify(e)}`);
   }
-}, He = (n, t) => {
-  const e = n * 100;
-  switch (t) {
+}, Dt = (n, e) => {
+  const t = n * 100;
+  switch (e) {
     case "from-left":
-      return `polygon(100% 100%, ${100 - e}% 100%, ${100 - e}% 0%, 100% 0%)`;
+      return `polygon(100% 100%, ${100 - t}% 100%, ${100 - t}% 0%, 100% 0%)`;
     case "from-top-left":
-      return `polygon(100% 100%, ${100 - e * 2}% 100%, 100% ${100 - e * 2}%)`;
+      return `polygon(100% 100%, ${100 - t * 2}% 100%, 100% ${100 - t * 2}%)`;
     case "from-top":
-      return `polygon(100% 100%, 0% 100%, 0% ${100 - e}%, 100% ${100 - e}%)`;
+      return `polygon(100% 100%, 0% 100%, 0% ${100 - t}%, 100% ${100 - t}%)`;
     case "from-top-right":
-      return `polygon(0% 100%, ${e * 2}% 100%, 0% ${100 - e * 2}%)`;
+      return `polygon(0% 100%, ${t * 2}% 100%, 0% ${100 - t * 2}%)`;
     case "from-right":
-      return `polygon(0% 0%, ${e}% 0%, ${e}% 100%, 0% 100%)`;
+      return `polygon(0% 0%, ${t}% 0%, ${t}% 100%, 0% 100%)`;
     case "from-bottom-right":
-      return `polygon(0% 0%, ${e * 2}% 0%, 0% ${e * 2}%)`;
+      return `polygon(0% 0%, ${t * 2}% 0%, 0% ${t * 2}%)`;
     case "from-bottom":
-      return `polygon(100% 0%, 0% 0%, 0% ${e}%, 100% ${e}%)`;
+      return `polygon(100% 0%, 0% 0%, 0% ${t}%, 100% ${t}%)`;
     case "from-bottom-left":
-      return `polygon(100% 0%, ${100 - e * 2}% 0%, 100% ${e * 2}%)`;
+      return `polygon(100% 0%, ${100 - t * 2}% 0%, 100% ${t * 2}%)`;
     default:
-      throw new Error(`Unknown direction ${JSON.stringify(t)}`);
+      throw new Error(`Unknown direction ${JSON.stringify(e)}`);
   }
-}, Je = ({
+}, te = ({
   children: n,
-  presentationProgress: t,
-  presentationDirection: e,
+  presentationProgress: e,
+  presentationDirection: t,
   passedProps: {
     direction: r = "from-left",
-    innerEnterStyle: s,
-    innerExitStyle: l,
-    outerEnterStyle: u,
-    outerExitStyle: a
+    innerEnterStyle: a,
+    innerExitStyle: c,
+    outerEnterStyle: l,
+    outerExitStyle: s
   }
 }) => {
-  const i = e === "entering" ? t : 1 - t, f = e === "entering" ? Ve(i, r) : He(i, r), d = h(() => ({
+  const i = t === "entering" ? e : 1 - e, m = t === "entering" ? Zt(i, r) : Dt(i, r), d = h(() => ({
     width: "100%",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
-    clipPath: f,
-    ...e === "entering" ? s : l
-  }), [f, s, l, e]), $ = h(() => e === "entering" ? u : a, [u, a, e]);
-  return /* @__PURE__ */ o(c, {
-    style: $,
-    children: /* @__PURE__ */ o(c, {
+    clipPath: m,
+    ...t === "entering" ? a : c
+  }), [m, a, c, t]), y = h(() => t === "entering" ? l : s, [l, s, t]);
+  return /* @__PURE__ */ o(u, {
+    style: y,
+    children: /* @__PURE__ */ o(u, {
       style: d,
       children: n
     })
   });
-}, Ke = (n) => ({
-  component: Je,
+}, de = (n) => ({
+  component: te,
   props: n ?? {}
-}), Ge = ({
+}), ee = ({
   children: n,
-  presentationDirection: t,
-  presentationProgress: e,
+  presentationDirection: e,
+  presentationProgress: t,
   passedProps: {
     direction: r = "from-left",
-    perspective: s = 1e3,
-    innerEnterStyle: l,
-    innerExitStyle: u,
-    outerEnterStyle: a,
+    perspective: a = 1e3,
+    innerEnterStyle: c,
+    innerExitStyle: l,
+    outerEnterStyle: s,
     outerExitStyle: i
   }
 }) => {
-  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]);
+  const m = h(() => {
+    const g = e === "entering" ? z(t, [0, 1], [r === "from-right" || r === "from-top" ? 180 : -180, 0]) : z(t, [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"}(${g}deg)`,
       backfaceVisibility: "hidden",
       WebkitBackfaceVisibility: "hidden",
-      ...t === "entering" ? l : u
+      ...e === "entering" ? c : l
     };
   }, [
     r,
+    c,
     l,
-    u,
-    t,
-    e
+    e,
+    t
   ]), d = h(() => ({
-    perspective: s,
+    perspective: a,
     transformStyle: "preserve-3d",
-    ...t === "entering" ? a : i
-  }), [a, i, s, t]);
-  return /* @__PURE__ */ o(c, {
+    ...e === "entering" ? s : i
+  }), [s, i, a, e]);
+  return /* @__PURE__ */ o(u, {
     style: d,
-    children: /* @__PURE__ */ o(c, {
-      style: f,
+    children: /* @__PURE__ */ o(u, {
+      style: m,
       children: n
     })
   });
-}, 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 = te(l, -(s * 2 - r.width) / 2, -(s * 2 - r.height) / 2), a = h(() => ({
+}, ne = (n) => ({ component: ee, props: n ?? {} }), re = ({ children: n, presentationDirection: e, presentationProgress: t, passedProps: r }) => {
+  const a = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, { path: c } = nt({
+    radius: a,
+    progress: t
+  }), l = _(c, -(a * 2 - r.width) / 2, -(a * 2 - r.height) / 2), s = h(() => ({
     width: "100%",
     height: "100%",
-    clipPath: t === "exiting" ? void 0 : `path("${u}")`,
-    ...t === "entering" ? r.innerEnterStyle : r.innerExitStyle
+    clipPath: e === "exiting" ? void 0 : `path("${l}")`,
+    ...e === "entering" ? r.innerEnterStyle : r.innerExitStyle
   }), [
-    u,
+    l,
     r.innerEnterStyle,
     r.innerExitStyle,
-    t
-  ]), i = h(() => t === "entering" ? r.outerEnterStyle : r.outerExitStyle, [
+    e
+  ]), i = h(() => e === "entering" ? r.outerEnterStyle : r.outerExitStyle, [
     r.outerEnterStyle,
     r.outerExitStyle,
-    t
+    e
   ]);
-  return /* @__PURE__ */ o(c, {
+  return /* @__PURE__ */ o(u, {
     style: i,
-    children: /* @__PURE__ */ o(c, {
-      style: a,
+    children: /* @__PURE__ */ o(u, {
+      style: s,
       children: n
     })
   });
-}, et = (n) => ({ component: Ze, props: n ?? {} });
-const ut = {
+}, he = (n) => ({ component: re, props: n ?? {} });
+const pe = {
   none: ({ id: n }) => /* @__PURE__ */ o(
-    y.Transition,
+    $.Transition,
     {
-      presentation: Q(),
-      timing: T({ durationInFrames: 1 })
+      presentation: D(),
+      timing: w({ durationInFrames: 1 })
     },
     n
   ),
-  fade: ({ durationInFrames: n, id: t }) => /* @__PURE__ */ o(
-    y.Transition,
+  fade: ({ durationInFrames: n, id: e }) => /* @__PURE__ */ o(
+    $.Transition,
     {
-      presentation: Q(),
-      timing: T({ durationInFrames: n })
+      presentation: D(),
+      timing: w({ durationInFrames: n })
     },
-    t
+    e
   ),
-  slide: ({ durationInFrames: n, id: t, direction: e }) => /* @__PURE__ */ o(
-    y.Transition,
+  slide: ({ durationInFrames: n, id: e, direction: t }) => /* @__PURE__ */ o(
+    $.Transition,
     {
-      presentation: je({ direction: e }),
-      timing: T({ durationInFrames: n })
+      presentation: _t({ direction: t || "from-left" }),
+      timing: w({ durationInFrames: n })
     },
-    t
+    e
   ),
-  wipe: ({ durationInFrames: n, id: t, direction: e }) => /* @__PURE__ */ o(
-    y.Transition,
+  wipe: ({ durationInFrames: n, id: e, direction: t }) => /* @__PURE__ */ o(
+    $.Transition,
     {
-      presentation: Ke({ direction: e }),
-      timing: T({ durationInFrames: n })
+      presentation: Vt({ direction: t || "from-left" }),
+      timing: w({ durationInFrames: n })
     },
-    t
+    e
   ),
-  flip: ({ durationInFrames: n, id: t }) => /* @__PURE__ */ o(
-    y.Transition,
+  flip: ({ durationInFrames: n, id: e, direction: t }) => /* @__PURE__ */ o(
+    $.Transition,
     {
-      presentation: Qe(),
-      timing: T({ durationInFrames: n })
+      presentation: ne({ direction: t || "from-left" }),
+      timing: w({ durationInFrames: n })
     },
-    t
+    e
   ),
-  clockWipe: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
-    y.Transition,
+  clockWipe: ({ width: n, height: e, durationInFrames: t, id: r, direction: a }) => /* @__PURE__ */ o(
+    $.Transition,
     {
-      presentation: et({ width: n, height: t }),
-      timing: T({ durationInFrames: e })
+      presentation: Jt({ width: n, height: e, direction: a }),
+      timing: w({ durationInFrames: t })
     },
     r
   ),
-  star: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
-    y.Transition,
+  star: ({ width: n, height: e, durationInFrames: t, id: r }) => /* @__PURE__ */ o(
+    $.Transition,
     {
-      presentation: Oe({ width: n, height: t }),
-      timing: T({ durationInFrames: e })
+      presentation: Pt({ width: n, height: e }),
+      timing: w({ durationInFrames: t })
     },
     r
   ),
-  circle: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
-    y.Transition,
+  circle: ({ width: n, height: e, durationInFrames: t, id: r, direction: a }) => /* @__PURE__ */ o(
+    $.Transition,
     {
-      presentation: Ne({ width: n, height: t }),
-      timing: T({ durationInFrames: e })
+      presentation: Nt({
+        width: n,
+        height: e,
+        direction: a
+      }),
+      timing: w({ durationInFrames: t })
     },
     r
   ),
-  rectangle: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
-    y.Transition,
+  rectangle: ({ width: n, height: e, durationInFrames: t, id: r }) => /* @__PURE__ */ o(
+    $.Transition,
     {
-      presentation: Ae({ width: n, height: t }),
-      timing: T({ durationInFrames: e })
+      presentation: Xt({ width: n, height: e }),
+      timing: w({ durationInFrames: t })
     },
     r
   ),
   slidingDoors: ({
     width: n,
-    height: t,
-    durationInFrames: e,
+    height: e,
+    durationInFrames: t,
     id: r
   }) => /* @__PURE__ */ o(
-    y.Transition,
+    $.Transition,
     {
-      presentation: Ye({ width: n, height: t }),
-      timing: T({ durationInFrames: e })
+      presentation: Yt({ width: n, height: e }),
+      timing: w({ durationInFrames: t })
     },
     r
   )
 };
 export {
-  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
+  $ as TransitionSeries,
+  pe as Transitions,
+  Nt as circle,
+  he as clockWipe,
+  Jt as customClockWipe,
+  _t as customSlide,
+  Vt as customWipe,
+  D as fade,
+  ne as flip,
+  w as linearTiming,
+  Xt as rectangle,
+  fe as slide,
+  Yt as slidingDoors,
+  ue as springTiming,
+  Pt as star,
+  me as useTransitionProgress,
+  de as wipe
 };
 //# sourceMappingURL=index.es.js.map