@cliquify.me/transitions 0.11.18 → 1.0.1

package/dist/index.es.js

@@ -1,26 +1,26 @@
-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 ut, measureSpring as mt, AbsoluteFill as u, Internals as Z, Sequence as L, useVideoConfig as dt, useCurrentFrame as ft, Freeze as z, random as W } from "remotion";
+import { jsx as o, Fragment as tt, jsxs as C } from "react/jsx-runtime";
+import M, { useMemo as g, Children as ht, useState as B } from "react";
+import { getBoundingBox as pt, translatePath as et } from "@remotion/paths";
+import { makeStar as gt, makePie as yt } from "@remotion/shapes";
+const b = (n) => ({
   getDurationInFrames: () => n.durationInFrames,
-  getProgress: ({ frame: t }) => _(t, [0, n.durationInFrames], [0, 1], {
+  getProgress: ({ frame: e }) => D(e, [0, n.durationInFrames], [0, 1], {
     easing: n.easing,
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   })
-}), St = (n = {}) => ({
-  getDurationInFrames: ({ fps: t }) => n.durationInFrames ? n.durationInFrames : we({
+}), le = (n = {}) => ({
+  getDurationInFrames: ({ fps: e }) => n.durationInFrames ? n.durationInFrames : mt({
     config: n.config,
     threshold: n.durationRestThreshold,
-    fps: t
+    fps: e
   }),
-  getProgress: ({ fps: t, frame: e }) => {
+  getProgress: ({ fps: e, frame: t }) => {
     const r = n.reverse ? 0 : 1, s = n.reverse ? 1 : 0;
-    return $e({
-      fps: t,
-      frame: e,
+    return ut({
+      fps: e,
+      frame: t,
       to: r,
       from: s,
       config: n.config,
@@ -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 wt = {
   "style.transformOrigin": {
     type: "transform-origin",
     step: 1,
@@ -67,7 +67,7 @@ var qe = {
     description: "Opacity",
     hiddenFromList: !1
   }
-}, Pe = {
+}, $t = {
   "style.borderWidth": {
     type: "number",
     default: void 0,
@@ -98,7 +98,7 @@ var qe = {
     default: void 0,
     description: "Border color"
   }
-}, Ce = {
+}, bt = {
   "style.borderRadius": {
     type: "number",
     default: 0,
@@ -140,13 +140,13 @@ var qe = {
     description: "Bottom left radius",
     hiddenFromList: !1
   }
-}, Re = {
+}, Tt = {
   "style.backgroundColor": {
     type: "color",
     default: "transparent",
     description: "Color"
   }
-}, ke = {
+}, St = {
   premountFor: {
     type: "number",
     default: 0,
@@ -164,9 +164,9 @@ var qe = {
     hiddenFromList: !0,
     keyframable: !1
   }
-}, Me = {
-  ...ke
-}, Le = {
+}, vt = {
+  ...St
+}, Ft = {
   cropLeft: {
     type: "number",
     default: 0,
@@ -207,66 +207,66 @@ var qe = {
     hiddenFromList: !1,
     keyframable: !0
   }
-}, Ne = Le, Be = {
-  ...Ne,
-  ...qe,
-  ...Re,
-  ...Pe,
-  ...Ce,
-  ...Me
-}, We = {
+}, xt = Ft, It = {
+  ...xt,
+  ...wt,
+  ...Tt,
+  ...$t,
+  ...bt,
+  ...vt
+}, Et = {
   layout: {
     type: "enum",
     default: "absolute-fill",
     description: "Layout",
     variants: {
-      "absolute-fill": Be,
+      "absolute-fill": It,
       none: {}
     }
   }
 };
 ({
-  ...We.layout
+  ...Et.layout
 });
-function Ae(n, t) {
-  const { allowFloats: e, component: r } = t;
+function Pt(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 Xe = {
-  validateDurationInFrames: Ae
+var Rt = {
+  validateDurationInFrames: Pt
 };
-const me = k.createContext(null), de = k.createContext(null), ie = ({ presentationProgress: n, children: t }) => {
-  const e = h(() => ({
+const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentationProgress: n, children: e }) => {
+  const t = g(() => ({
     enteringProgress: n
   }), [n]);
-  return /* @__PURE__ */ o(me.Provider, { value: e, children: t });
-}, se = ({ presentationProgress: n, children: t }) => {
-  const e = h(() => ({
+  return /* @__PURE__ */ o(nt.Provider, { value: t, children: e });
+}, G = ({ presentationProgress: n, children: e }) => {
+  const t = g(() => ({
     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(rt.Provider, { value: t, children: e });
+}, ot = (n) => M.Children.toArray(n).reduce((t, r) => r.type === M.Fragment ? t.concat(
+  ot(
     r.props.children
   )
-) : (e.push(r), e), []), Oe = 0.01, Ue = ({
+) : (t.push(r), t), []), kt = 0.01, qt = ({
   children: n,
-  presentationProgress: t,
-  presentationDirection: e,
+  presentationProgress: e,
+  presentationDirection: t,
   passedProps: { direction: r = "from-left", enterStyle: s, exitStyle: l }
 }) => {
-  const u = h(() => {
-    const i = t === 1 ? t * 100 : t * 100 - Oe;
-    if (e === "exiting")
+  const c = g(() => {
+    const i = e === 1 ? e * 100 : e * 100 - kt;
+    if (t === "exiting")
       switch (r) {
         case "from-left":
           return {
@@ -274,7 +274,7 @@ const me = k.createContext(null), de = k.createContext(null), ie = ({ presentati
           };
         case "from-right":
           return {
-            transform: `translateX(${-t * 100}%)`
+            transform: `translateX(${-e * 100}%)`
           };
         case "from-top":
           return {
@@ -282,7 +282,7 @@ const me = k.createContext(null), de = k.createContext(null), ie = ({ presentati
           };
         case "from-bottom":
           return {
-            transform: `translateY(${-t * 100}%)`
+            transform: `translateY(${-e * 100}%)`
           };
         default:
           throw new Error(`Invalid direction: ${r}`);
@@ -290,7 +290,7 @@ const me = k.createContext(null), de = k.createContext(null), ie = ({ presentati
     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 me = k.createContext(null), de = k.createContext(null), ie = ({ presentati
         };
       case "from-top":
         return {
-          transform: `translateY(${-100 + t * 100}%)`
+          transform: `translateY(${-100 + e * 100}%)`
         };
       case "from-bottom":
         return {
@@ -307,137 +307,132 @@ const me = k.createContext(null), de = k.createContext(null), ie = ({ presentati
       default:
         throw new Error(`Invalid direction: ${r}`);
     }
-  }, [e, t, r]), a = h(() => ({
+  }, [t, e, r]), a = g(() => ({
     width: "100%",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
-    ...u,
-    ...e === "entering" ? s : l
-  }), [u, s, l, e]);
-  return /* @__PURE__ */ o(m, { style: a, children: n });
-}, N = (n) => ({
-  component: Ue,
+    ...c,
+    ...t === "entering" ? s : l
+  }), [c, s, l, t]);
+  return /* @__PURE__ */ o(u, { style: a, children: n });
+}, X = (n) => ({
+  component: qt,
   props: {}
-}), Ye = Xe.validateDurationInFrames, L = function(n) {
+}), Ct = Rt.validateDurationInFrames, N = function(n) {
   return null;
-};
-L.isTransitionSeriesTransition = !0;
-const X = ({ children: n }) => /* @__PURE__ */ o(ue, { children: n });
-X.isSeriesSequence = !0;
-const De = ({
+}, _ = ({ children: n }) => /* @__PURE__ */ o(tt, { children: n }), Mt = ({
   children: n
 }) => {
-  const { fps: t } = be(), e = Fe(), r = h(() => {
+  const { fps: e } = dt(), t = ft(), r = g(() => {
     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 c = ot(n);
+    return ht.map(c, (a, i) => {
+      const d = a;
+      if (typeof d == "string") {
+        if (d.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 "${d}"`
         );
       }
-      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 m = c[i - 1], y = c[i + 1], f = typeof m == "string" || typeof m > "u" ? null : m.type === N ? m : null, p = typeof y == "string" || typeof y > "u" ? null : y.type === N ? y : null, A = typeof m == "string" || typeof m > "u" ? !1 : m.type === N;
+      if (d.type === N) {
+        if (A)
           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 (d.type !== _)
         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 ${d} instead`
         );
-      const E = c, C = `index = ${i}, duration = ${E.props.durationInFrames}`;
+      const E = d, k = `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 (${k}) was detected to not have any children. Delete it to fix this error.`
         );
-      const S = E.props.durationInFrames, {
-        durationInFrames: w,
-        children: ft,
-        ...F
+      const $ = E.props.durationInFrames, {
+        durationInFrames: T,
+        children: ne,
+        ...v
       } = E.props;
-      Ye(S, {
+      Ct($, {
         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 (${k}).`
         );
-      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} (${k}).`
         );
-      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} (${k}).`
         );
-      const he = l + q;
-      let U = 0;
-      p && (U = 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,
-        fps: t
-      }) : null, R = p ? p.props.timing.getProgress({
-        frame: e - f,
-        fps: t
-      }) : null, ge = p ? p.props.timing.getProgress({
-        frame: e - (f + w),
-        fps: t
+      const it = l + P;
+      let O = 0;
+      f && (O = f.props.timing.getDurationInFrames({
+        fps: e
+      }), s -= O / 2);
+      let h = it - O / 2;
+      l += $ + P, h < 0 && (h = 0);
+      const U = p ? p.props.timing.getProgress({
+        frame: t - h - T + p.props.timing.getDurationInFrames({ fps: e }) / 2 + s,
+        fps: e
+      }) : null, q = f ? f.props.timing.getProgress({
+        frame: t - h,
+        fps: e
+      }) : null, st = f ? f.props.timing.getProgress({
+        frame: t - (h + T),
+        fps: e
       }) : null;
-      if (y && S < y.props.timing.getDurationInFrames({ fps: t }) / 2)
+      if (p && $ < p.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 ${y.props.timing.getDurationInFrames(
-            { fps: t }
-          )} frames long, but the sequence is only ${S} frames long (${C})`
+          `The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${p.props.timing.getDurationInFrames(
+            { fps: e }
+          )} frames long, but the sequence is only ${$} frames long (${k})`
         );
-      if (p && S < p.props.timing.getDurationInFrames({ fps: t }) / 2)
+      if (f && $ < 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 ${S} frames long (${C})`
+          `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 ${$} frames long (${k})`
         );
-      if (y && p && ge !== null && R !== null) {
-        const v = y.props.presentation ?? N(), x = p.props.presentation ?? N(), I = p.props.timing.getDurationInFrames({
-          fps: t
-        }), b = y.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),
-          fps: t
-        }), Te = e > f, Se = e < f + w + b / 2 + I / 2;
+      if (p && f && st !== null && q !== null) {
+        const F = p.props.presentation ?? X(), x = f.props.presentation ?? X(), I = f.props.timing.getDurationInFrames({
+          fps: e
+        }), S = p.props.timing.getDurationInFrames({
+          fps: e
+        }), R = F.component, Y = x.component, j = t < +Math.floor(h) + I / 2, V = t > Math.floor(h) + Math.floor(T) + I / 2, at = V ? Math.floor(h) + Math.floor(T) + Math.floor(S / 2) : Math.floor(h), H = j ? Math.floor(h) : Math.floor(h) + I / 2, J = p.props.timing.getProgress({
+          frame: t - (H + T - S / 2),
+          fps: e
+        }), lt = t > h, ct = t < h + T + S / 2 + I / 2;
         return /* @__PURE__ */ o(
           z,
           {
-            active: Se && Te && (te || ne),
-            frame: ye,
+            active: ct && lt && (j || V),
+            frame: at,
             children: /* @__PURE__ */ o(
-              M,
+              L,
               {
-                from: re,
-                durationInFrames: S + b / 2,
-                ...F,
-                name: F.name || "<TS.Sequence>",
+                from: H,
+                durationInFrames: $ + S / 2,
+                ...v,
+                name: v.name || "<TS.Sequence>",
                 children: /* @__PURE__ */ o(
-                  P,
+                  R,
                   {
-                    passedProps: v.props ?? {},
+                    passedProps: F.props ?? {},
                     presentationDirection: "exiting",
-                    presentationProgress: oe,
-                    presentationDurationInFrames: y.props.timing.getDurationInFrames(
-                      { fps: t }
+                    presentationProgress: J,
+                    presentationDurationInFrames: p.props.timing.getDurationInFrames(
+                      { fps: e }
                     ),
                     onElementImage: () => {
                     },
@@ -445,17 +440,17 @@ const De = ({
                     },
                     bothEnteringAndExiting: !1,
                     children: /* @__PURE__ */ o(
-                      se,
+                      G,
                       {
-                        presentationProgress: oe,
+                        presentationProgress: J,
                         children: /* @__PURE__ */ o(
-                          D,
+                          Y,
                           {
                             passedProps: x.props ?? {},
                             presentationDirection: "entering",
-                            presentationProgress: R,
-                            presentationDurationInFrames: p.props.timing.getDurationInFrames(
-                              { fps: t }
+                            presentationProgress: q,
+                            presentationDurationInFrames: f.props.timing.getDurationInFrames(
+                              { fps: e }
                             ),
                             onElementImage: () => {
                             },
@@ -463,9 +458,9 @@ const De = ({
                             },
                             bothEnteringAndExiting: !1,
                             children: /* @__PURE__ */ o(
-                              ie,
+                              K,
                               {
-                                presentationProgress: R,
+                                presentationProgress: q,
                                 children: a
                               }
                             )
@@ -482,28 +477,28 @@ 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 (q !== null && f) {
+        const F = f.props.timing.getDurationInFrames({ fps: e }) / 2, x = f.props.presentation ?? X(), I = x.component, S = t < h + F, R = S ? Math.floor(h) : Math.floor(h) + F, Y = t > R;
         return /* @__PURE__ */ o(
           z,
           {
-            active: D && b,
-            frame: P,
+            active: Y && S,
+            frame: R,
             children: /* @__PURE__ */ o(
-              M,
+              L,
               {
-                from: P,
-                durationInFrames: S,
-                ...F,
-                name: F.name || "<TS.Sequence>",
+                from: R,
+                durationInFrames: $,
+                ...v,
+                name: v.name || "<TS.Sequence>",
                 children: /* @__PURE__ */ o(
                   I,
                   {
                     passedProps: x.props ?? {},
                     presentationDirection: "entering",
-                    presentationProgress: R,
-                    presentationDurationInFrames: p.props.timing.getDurationInFrames(
-                      { fps: t }
+                    presentationProgress: q,
+                    presentationDurationInFrames: f.props.timing.getDurationInFrames(
+                      { fps: e }
                     ),
                     onElementImage: () => {
                     },
@@ -511,9 +506,9 @@ const De = ({
                     },
                     bothEnteringAndExiting: !1,
                     children: /* @__PURE__ */ o(
-                      ie,
+                      K,
                       {
-                        presentationProgress: R,
+                        presentationProgress: q,
                         children: a
                       }
                     )
@@ -526,28 +521,28 @@ 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 (U !== null && p) {
+        const F = p.props.timing.getDurationInFrames({ fps: e }) / 2, x = p.props.presentation ?? X(), I = x.component, S = t > Math.floor(T) + Math.floor(h), R = t < Math.floor(T) + Math.floor(h) + F;
         return /* @__PURE__ */ o(
           z,
           {
-            active: P && b,
-            frame: Math.floor(w),
+            active: R && S,
+            frame: Math.floor(T),
             children: /* @__PURE__ */ o(
-              M,
+              L,
               {
-                from: Math.floor(f),
-                durationInFrames: S + v,
-                ...F,
-                name: F.name || "<TS.Sequence>",
+                from: Math.floor(h),
+                durationInFrames: $ + F,
+                ...v,
+                name: v.name || "<TS.Sequence>",
                 children: /* @__PURE__ */ o(
                   I,
                   {
                     passedProps: x.props ?? {},
                     presentationDirection: "exiting",
-                    presentationProgress: Y,
-                    presentationDurationInFrames: y.props.timing.getDurationInFrames(
-                      { fps: t }
+                    presentationProgress: U,
+                    presentationDurationInFrames: p.props.timing.getDurationInFrames(
+                      { fps: e }
                     ),
                     onElementImage: () => {
                     },
@@ -555,9 +550,9 @@ const De = ({
                     },
                     bothEnteringAndExiting: !1,
                     children: /* @__PURE__ */ o(
-                      se,
+                      G,
                       {
-                        presentationProgress: Y,
+                        presentationProgress: U,
                         children: a
                       }
                     )
@@ -571,157 +566,196 @@ const De = ({
         );
       }
       return /* @__PURE__ */ o(
-        M,
+        L,
         {
-          from: Math.floor(f),
-          durationInFrames: S,
-          ...F,
-          name: F.name || "<TS.Sequence>",
+          from: Math.floor(h),
+          durationInFrames: $,
+          ...v,
+          name: v.name || "<TS.Sequence>",
           children: a
         },
         i
       );
     });
-  }, [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 !n && !t ? {
+  }, [n, e, t]);
+  return /* @__PURE__ */ o(tt, { children: r });
+}, w = ({ children: n, name: e, layout: t, ...r }) => /* @__PURE__ */ o(L, { name: e ?? "<TransitionSeries>", layout: t ?? "absolute-fill", ...r, children: /* @__PURE__ */ o(Mt, { children: n }) });
+w.Sequence = _;
+w.Transition = N;
+Z.addSequenceStackTraces(w);
+Z.addSequenceStackTraces(_);
+const ce = () => {
+  const n = M.useContext(nt), e = M.useContext(rt);
+  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
   };
-}, ze = ({
+}, Lt = ({
   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 = je(
+  const l = Math.sqrt(r.width ** 2 + r.height ** 2) / 2 * t, c = Wt(
     r.width / 2,
     r.height / 2,
     l
-  ), [a] = A(() => String(B(null))), i = h(() => ({
+  ), [a] = B(() => String(W(null))), i = g(() => ({
     width: "100%",
     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" }) }) }) }) })
+    clipPath: e === "exiting" ? void 0 : `url(#${a})`
+  }), [a, e]);
+  return /* @__PURE__ */ C(u, { children: [
+    /* @__PURE__ */ o(u, { style: i, 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: a, children: /* @__PURE__ */ o("path", { d: c, fill: "black" }) }) }) }) })
   ] });
-}, _e = (n) => ({ component: ze, props: n }), je = (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 = ({
+}, Nt = (n) => ({ component: Lt, props: n }), Wt = (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`, Bt = ({
   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, c = l / 2 - a / 2, [d] = A(() => String(B(null))), g = h(() => ({
+  const { width: s, height: l } = r, c = -s * 0.35, a = l * 0.52, i = Math.sqrt((s - c) ** 2 + Math.max(a, l - a) ** 2), d = s * 0.3, m = d + (i - d + s * 0.1) * t, [y] = B(() => String(W(null))), f = Math.max(3, Math.round(s * 7e-3)), p = Math.max(0, m - f / 2), A = g(() => ({
     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(
+    clipPath: e === "exiting" ? void 0 : `url(#${y})`
+  }), [y, e]);
+  return /* @__PURE__ */ C(u, { children: [
+    /* @__PURE__ */ o(u, { style: A, children: n }),
+    e === "exiting" ? null : /* @__PURE__ */ o(u, { style: { pointerEvents: "none" }, children: /* @__PURE__ */ C(
+      "svg",
+      {
+        width: s,
+        height: l,
+        style: { position: "absolute", inset: 0, width: "100%", height: "100%" },
+        children: [
+          /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: y, children: /* @__PURE__ */ o("circle", { cx: c, cy: a, r: m, fill: "black" }) }) }),
+          t > 0 && t < 1 && /* @__PURE__ */ o(
+            "circle",
+            {
+              cx: c,
+              cy: a,
+              r: p,
+              fill: "none",
+              stroke: "#1e3a8a",
+              strokeWidth: f
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}, ue = (n) => ({
+  component: Bt,
+  props: n
+}), At = ({
+  children: n,
+  presentationDirection: e,
+  presentationProgress: t,
+  passedProps: r
+}) => {
+  const { width: s, height: l } = r, c = s * t, a = l * t, i = s / 2 - c / 2, d = l / 2 - a / 2, [m] = B(() => String(W(null))), y = g(() => ({
+    width: "100%",
+    height: "100%",
+    clipPath: e === "exiting" ? void 0 : `url(#${m})`
+  }), [m, e]);
+  return /* @__PURE__ */ C(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: m, children: /* @__PURE__ */ o(
       "rect",
       {
         x: i,
-        y: c,
-        width: u,
+        y: d,
+        width: c,
         height: a,
         fill: "black"
       }
     ) }) }) }) })
   ] });
-}, He = (n) => ({ component: Ve, props: n }), Je = ({
+}, 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 } = Ie({
+  const s = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, l = s * t, c = s * 2 * t, { path: a } = gt({
     innerRadius: l,
-    outerRadius: u,
+    outerRadius: c,
     points: 5
-  }), i = xe(a), c = ce(
+  }), i = pt(a), d = et(
     a,
     r.width / 2 - i.width / 2,
     r.height / 2 - i.height / 2
-  ), [d] = A(() => String(B(null))), g = h(() => ({
+  ), [m] = B(() => String(W(null))), y = g(() => ({
     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" }) }) }) }) })
+    clipPath: e === "exiting" ? void 0 : `url(#${m})`
+  }), [m, e]);
+  return /* @__PURE__ */ C(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: m, children: /* @__PURE__ */ o("path", { d, fill: "black" }) }) }) }) })
   ] });
-}, Ke = (n) => ({ component: Je, props: n }), Ge = ({
+}, Ut = (n) => ({ component: Ot, props: n }), Yt = ({
   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))), c = h(() => ({
+  const { width: s, height: l } = r, c = s * t, a = s / 2 - c / 2, [i] = B(() => String(W(null))), d = g(() => ({
     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(
+    clipPath: e === "exiting" ? void 0 : `url(#${i})`
+  }), [i, e]);
+  return /* @__PURE__ */ C(u, { children: [
+    /* @__PURE__ */ o(u, { style: d, 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,
         y: 0,
-        width: u,
+        width: c,
         height: l,
         fill: "black"
       }
     ) }) }) }) })
   ] });
-}, Qe = (n) => ({ component: Ge, props: n });
-var Ze = ({ 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
+}, zt = (n) => ({ component: Yt, props: n });
+var Dt = ({ children: n, presentationDirection: e, presentationProgress: t, passedProps: r }) => {
+  const s = e === "entering", l = g(() => ({
+    opacity: s ? t : r.shouldFadeOutExitingScene ? 1 - t : 1,
+    ...e === "entering" ? r.enterStyle : r.exitStyle
   }), [
     s,
     r.enterStyle,
     r.exitStyle,
     r.shouldFadeOutExitingScene,
-    t,
-    e
+    e,
+    t
   ]);
-  return /* @__PURE__ */ o(m, {
+  return /* @__PURE__ */ o(u, {
     style: l,
     children: n
   });
-}, ae = (n) => ({
-  component: Ze,
+}, Q = (n) => ({
+  component: Dt,
   props: n ?? {}
-}), et = 0.01, tt = ({
+}), _t = 0.01, jt = ({
   children: n,
-  presentationProgress: t,
-  presentationDirection: e,
+  presentationProgress: e,
+  presentationDirection: t,
   passedProps: { direction: r = "from-left", enterStyle: s, exitStyle: l }
 }) => {
-  const u = h(() => {
-    const i = t === 1 ? t * 100 : t * 100 - et;
-    if (e === "exiting")
+  const c = g(() => {
+    const i = e === 1 ? e * 100 : e * 100 - _t;
+    if (t === "exiting")
       switch (r) {
         case "from-left":
           return {
@@ -729,7 +763,7 @@ var Ze = ({ children: n, presentationDirection: t, presentationProgress: e, pass
           };
         case "from-right":
           return {
-            transform: `translateX(${-t * 100}%)`
+            transform: `translateX(${-e * 100}%)`
           };
         case "from-top":
           return {
@@ -737,7 +771,7 @@ var Ze = ({ 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}`);
@@ -745,7 +779,7 @@ var Ze = ({ 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 {
@@ -753,7 +787,7 @@ var Ze = ({ 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 {
@@ -762,264 +796,265 @@ var Ze = ({ children: n, presentationDirection: t, presentationProgress: e, pass
       default:
         throw new Error(`Invalid direction: ${r}`);
     }
-  }, [e, t, r]), a = h(() => ({
+  }, [t, e, r]), a = g(() => ({
     width: "100%",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
-    ...u,
-    ...e === "entering" ? s : l
-  }), [u, s, l, e]);
-  return /* @__PURE__ */ o(m, {
+    ...c,
+    ...t === "entering" ? s : l
+  }), [c, s, l, t]);
+  return /* @__PURE__ */ o(u, {
     style: a,
     children: n
   });
-}, nt = (n) => ({
-  component: tt,
+}, Vt = (n) => ({
+  component: jt,
   props: n ?? {}
-}), rt = (n, t) => {
-  const e = n * 100;
-  switch (t) {
+}), Ht = (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)}`);
   }
-}, ot = (n, t) => {
-  const e = n * 100;
-  switch (t) {
+}, Jt = (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)}`);
   }
-}, it = ({
+}, Kt = ({
   children: n,
-  presentationProgress: t,
-  presentationDirection: e,
+  presentationProgress: e,
+  presentationDirection: t,
   passedProps: {
     direction: r = "from-left",
     innerEnterStyle: s,
     innerExitStyle: l,
-    outerEnterStyle: u,
+    outerEnterStyle: c,
     outerExitStyle: a
   }
 }) => {
-  const i = e === "entering" ? t : 1 - t, c = e === "entering" ? rt(i, r) : ot(i, r), d = h(() => ({
+  const i = t === "entering" ? e : 1 - e, d = t === "entering" ? Ht(i, r) : Jt(i, r), m = g(() => ({
     width: "100%",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
-    clipPath: c,
-    ...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, {
-      style: d,
+    clipPath: d,
+    ...t === "entering" ? s : l
+  }), [d, s, l, t]), y = g(() => t === "entering" ? c : a, [c, a, t]);
+  return /* @__PURE__ */ o(u, {
+    style: y,
+    children: /* @__PURE__ */ o(u, {
+      style: m,
       children: n
     })
   });
-}, st = (n) => ({
-  component: it,
+}, Gt = (n) => ({
+  component: Kt,
   props: n ?? {}
-}), at = ({
+}), Qt = ({
   children: n,
-  presentationDirection: t,
-  presentationProgress: e,
+  presentationDirection: e,
+  presentationProgress: t,
   passedProps: {
     direction: r = "from-left",
     perspective: s = 1e3,
     innerEnterStyle: l,
-    innerExitStyle: u,
+    innerExitStyle: c,
     outerEnterStyle: a,
     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 d = g(() => {
+    const p = e === "entering" ? D(t, [0, 1], [r === "from-right" || r === "from-top" ? 180 : -180, 0]) : D(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"}(${p}deg)`,
       backfaceVisibility: "hidden",
       WebkitBackfaceVisibility: "hidden",
-      ...t === "entering" ? l : u
+      ...e === "entering" ? l : c
     };
   }, [
     r,
     l,
-    u,
-    t,
-    e
-  ]), d = h(() => ({
+    c,
+    e,
+    t
+  ]), m = g(() => ({
     perspective: s,
     transformStyle: "preserve-3d",
-    ...t === "entering" ? a : i
-  }), [a, i, s, t]);
-  return /* @__PURE__ */ o(m, {
-    style: d,
-    children: /* @__PURE__ */ o(m, {
-      style: c,
+    ...e === "entering" ? a : i
+  }), [a, i, s, e]);
+  return /* @__PURE__ */ o(u, {
+    style: m,
+    children: /* @__PURE__ */ o(u, {
+      style: d,
       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({
+}, Zt = (n) => ({ component: Qt, props: n ?? {} }), te = ({ children: n, presentationDirection: e, presentationProgress: t, passedProps: r }) => {
+  const s = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, { path: l } = yt({
     radius: s,
-    progress: e
-  }), u = ce(l, -(s * 2 - r.width) / 2, -(s * 2 - r.height) / 2), a = h(() => ({
+    progress: t
+  }), c = et(l, -(s * 2 - r.width) / 2, -(s * 2 - r.height) / 2), a = g(() => ({
     width: "100%",
     height: "100%",
-    clipPath: t === "exiting" ? void 0 : `path("${u}")`,
-    ...t === "entering" ? r.innerEnterStyle : r.innerExitStyle
+    clipPath: e === "exiting" ? void 0 : `path("${c}")`,
+    ...e === "entering" ? r.innerEnterStyle : r.innerExitStyle
   }), [
-    u,
+    c,
     r.innerEnterStyle,
     r.innerExitStyle,
-    t
-  ]), i = h(() => t === "entering" ? r.outerEnterStyle : r.outerExitStyle, [
+    e
+  ]), i = g(() => e === "entering" ? r.outerEnterStyle : r.outerExitStyle, [
     r.outerEnterStyle,
     r.outerExitStyle,
-    t
+    e
   ]);
-  return /* @__PURE__ */ o(m, {
+  return /* @__PURE__ */ o(u, {
     style: i,
-    children: /* @__PURE__ */ o(m, {
+    children: /* @__PURE__ */ o(u, {
       style: a,
       children: n
     })
   });
-}, ct = (n) => ({ component: ut, props: n ?? {} });
-const wt = {
+}, ee = (n) => ({ component: te, props: n ?? {} });
+const me = {
   none: ({ id: n }) => /* @__PURE__ */ o(
-    T.Transition,
+    w.Transition,
     {
-      presentation: ae(),
-      timing: $({ durationInFrames: 1 })
+      presentation: Q(),
+      timing: b({ durationInFrames: 1 })
     },
     n
   ),
-  fade: ({ durationInFrames: n, id: t }) => /* @__PURE__ */ o(
-    T.Transition,
+  fade: ({ durationInFrames: n, id: e }) => /* @__PURE__ */ o(
+    w.Transition,
     {
-      presentation: ae(),
-      timing: $({ durationInFrames: n })
+      presentation: Q(),
+      timing: b({ durationInFrames: n })
     },
-    t
+    e
   ),
-  slide: ({ durationInFrames: n, id: t, direction: e }) => /* @__PURE__ */ o(
-    T.Transition,
+  slide: ({ durationInFrames: n, id: e, direction: t }) => /* @__PURE__ */ o(
+    w.Transition,
     {
-      presentation: nt({ direction: e }),
-      timing: $({ durationInFrames: n })
+      presentation: Vt({ direction: t }),
+      timing: b({ durationInFrames: n })
     },
-    t
+    e
   ),
-  wipe: ({ durationInFrames: n, id: t, direction: e }) => /* @__PURE__ */ o(
-    T.Transition,
+  wipe: ({ durationInFrames: n, id: e, direction: t }) => /* @__PURE__ */ o(
+    w.Transition,
     {
-      presentation: st({ direction: e }),
-      timing: $({ durationInFrames: n })
+      presentation: Gt({ direction: t }),
+      timing: b({ durationInFrames: n })
     },
-    t
+    e
   ),
-  flip: ({ durationInFrames: n, id: t }) => /* @__PURE__ */ o(
-    T.Transition,
+  flip: ({ durationInFrames: n, id: e }) => /* @__PURE__ */ o(
+    w.Transition,
     {
-      presentation: lt(),
-      timing: $({ durationInFrames: n })
+      presentation: Zt(),
+      timing: b({ durationInFrames: n })
     },
-    t
+    e
   ),
-  clockWipe: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
-    T.Transition,
+  clockWipe: ({ width: n, height: e, durationInFrames: t, id: r }) => /* @__PURE__ */ o(
+    w.Transition,
     {
-      presentation: ct({ width: n, height: t }),
-      timing: $({ durationInFrames: e })
+      presentation: ee({ width: n, height: e }),
+      timing: b({ durationInFrames: t })
     },
     r
   ),
-  star: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
-    T.Transition,
+  star: ({ width: n, height: e, durationInFrames: t, id: r }) => /* @__PURE__ */ o(
+    w.Transition,
     {
-      presentation: Ke({ width: n, height: t }),
-      timing: $({ durationInFrames: e })
+      presentation: Ut({ width: n, height: e }),
+      timing: b({ durationInFrames: t })
     },
     r
   ),
-  circle: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
-    T.Transition,
+  circle: ({ width: n, height: e, durationInFrames: t, id: r }) => /* @__PURE__ */ o(
+    w.Transition,
     {
-      presentation: _e({ width: n, height: t }),
-      timing: $({ durationInFrames: e })
+      presentation: Nt({ width: n, height: e }),
+      timing: b({ durationInFrames: t })
     },
     r
   ),
-  rectangle: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
-    T.Transition,
+  rectangle: ({ width: n, height: e, durationInFrames: t, id: r }) => /* @__PURE__ */ o(
+    w.Transition,
     {
-      presentation: He({ width: n, height: t }),
-      timing: $({ durationInFrames: e })
+      presentation: Xt({ width: n, height: e }),
+      timing: b({ durationInFrames: t })
     },
     r
   ),
   slidingDoors: ({
     width: n,
-    height: t,
-    durationInFrames: e,
+    height: e,
+    durationInFrames: t,
     id: r
   }) => /* @__PURE__ */ o(
-    T.Transition,
+    w.Transition,
     {
-      presentation: Qe({ width: n, height: t }),
-      timing: $({ durationInFrames: e })
+      presentation: zt({ width: n, height: e }),
+      timing: b({ durationInFrames: t })
     },
     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
+  w as TransitionSeries,
+  me as Transitions,
+  Nt as circle,
+  ue as circleReveal,
+  ee as clockWipe,
+  Q as fade,
+  Zt as flip,
+  b as linearTiming,
+  Xt as rectangle,
+  Vt as slide,
+  zt as slidingDoors,
+  le as springTiming,
+  Ut as star,
+  ce as useTransitionProgress,
+  Gt as wipe
 };
 //# sourceMappingURL=index.es.js.map