@cliquify.me/transitions 0.11.17 → 0.11.18

package/dist/index.es.js

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