@cliquify.me/transitions 0.11.16 → 0.11.18

package/dist/index.es.js

@@ -1,311 +1,37 @@
-import { interpolate as se, spring as Te, measureSpring as we, AbsoluteFill as x, Internals as pe, Sequence as V, useVideoConfig as ve, useCurrentFrame as Se, Freeze as oe, random as Q } from "remotion";
-import M, { useMemo as w, Children as Ee, useState as K } from "react";
-import { getBoundingBox as $e, translatePath as he } from "@remotion/paths";
-import { makeStar as je, makePie as Re } from "@remotion/shapes";
-const A = (r) => ({
-  getDurationInFrames: () => r.durationInFrames,
-  getProgress: ({ frame: t }) => se(t, [0, r.durationInFrames], [0, 1], {
-    easing: r.easing,
+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 }) => _(t, [0, n.durationInFrames], [0, 1], {
+    easing: n.easing,
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   })
-}), yt = (r = {}) => ({
-  getDurationInFrames: ({ fps: t }) => r.durationInFrames ? r.durationInFrames : we({
-    config: r.config,
-    threshold: r.durationRestThreshold,
+}), St = (n = {}) => ({
+  getDurationInFrames: ({ fps: t }) => n.durationInFrames ? n.durationInFrames : we({
+    config: n.config,
+    threshold: n.durationRestThreshold,
     fps: t
   }),
   getProgress: ({ fps: t, frame: e }) => {
-    const o = r.reverse ? 0 : 1, i = r.reverse ? 1 : 0;
-    return Te({
+    const r = n.reverse ? 0 : 1, s = n.reverse ? 1 : 0;
+    return $e({
       fps: t,
       frame: e,
-      to: o,
-      from: i,
-      config: r.config,
-      durationInFrames: r.durationInFrames,
-      durationRestThreshold: r.durationRestThreshold,
-      reverse: r.reverse
+      to: r,
+      from: s,
+      config: n.config,
+      durationInFrames: n.durationInFrames,
+      durationRestThreshold: n.durationRestThreshold,
+      reverse: n.reverse
     });
   }
 });
-var ie = { exports: {} }, X = {};
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var ue;
-function Fe() {
-  if (ue) return X;
-  ue = 1;
-  var r = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
-  function e(o, i, u) {
-    var f = null;
-    if (u !== void 0 && (f = "" + u), i.key !== void 0 && (f = "" + i.key), "key" in i) {
-      u = {};
-      for (var c in i)
-        c !== "key" && (u[c] = i[c]);
-    } else u = i;
-    return i = u.ref, {
-      $$typeof: r,
-      type: o,
-      key: f,
-      ref: i !== void 0 ? i : null,
-      props: u
-    };
-  }
-  return X.Fragment = t, X.jsx = e, X.jsxs = e, X;
-}
-var z = {};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var ce;
-function _e() {
-  return ce || (ce = 1, process.env.NODE_ENV !== "production" && function() {
-    function r(n) {
-      if (n == null) return null;
-      if (typeof n == "function")
-        return n.$$typeof === te ? null : n.displayName || n.name || null;
-      if (typeof n == "string") return n;
-      switch (n) {
-        case _:
-          return "Fragment";
-        case R:
-          return "Profiler";
-        case $:
-          return "StrictMode";
-        case ee:
-          return "Suspense";
-        case D:
-          return "SuspenseList";
-        case N:
-          return "Activity";
-      }
-      if (typeof n == "object")
-        switch (typeof n.tag == "number" && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), n.$$typeof) {
-          case O:
-            return "Portal";
-          case I:
-            return n.displayName || "Context";
-          case le:
-            return (n._context.displayName || "Context") + ".Consumer";
-          case C:
-            var l = n.render;
-            return n = n.displayName, n || (n = l.displayName || l.name || "", n = n !== "" ? "ForwardRef(" + n + ")" : "ForwardRef"), n;
-          case h:
-            return l = n.displayName || null, l !== null ? l : r(n.type) || "Memo";
-          case q:
-            l = n._payload, n = n._init;
-            try {
-              return r(n(l));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function t(n) {
-      return "" + n;
-    }
-    function e(n) {
-      try {
-        t(n);
-        var l = !1;
-      } catch {
-        l = !0;
-      }
-      if (l) {
-        l = console;
-        var m = l.error, y = typeof Symbol == "function" && Symbol.toStringTag && n[Symbol.toStringTag] || n.constructor.name || "Object";
-        return m.call(
-          l,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          y
-        ), t(n);
-      }
-    }
-    function o(n) {
-      if (n === _) return "<>";
-      if (typeof n == "object" && n !== null && n.$$typeof === q)
-        return "<...>";
-      try {
-        var l = r(n);
-        return l ? "<" + l + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function i() {
-      var n = j.A;
-      return n === null ? null : n.getOwner();
-    }
-    function u() {
-      return Error("react-stack-top-frame");
-    }
-    function f(n) {
-      if (F.call(n, "key")) {
-        var l = Object.getOwnPropertyDescriptor(n, "key").get;
-        if (l && l.isReactWarning) return !1;
-      }
-      return n.key !== void 0;
-    }
-    function c(n, l) {
-      function m() {
-        P || (P = !0, console.error(
-          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          l
-        ));
-      }
-      m.isReactWarning = !0, Object.defineProperty(n, "key", {
-        get: m,
-        configurable: !0
-      });
-    }
-    function a() {
-      var n = r(this.type);
-      return Y[n] || (Y[n] = !0, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), n = this.props.ref, n !== void 0 ? n : null;
-    }
-    function b(n, l, m, y, H, re) {
-      var T = m.ref;
-      return n = {
-        $$typeof: W,
-        type: n,
-        key: l,
-        props: m,
-        _owner: y
-      }, (T !== void 0 ? T : null) !== null ? Object.defineProperty(n, "ref", {
-        enumerable: !1,
-        get: a
-      }) : Object.defineProperty(n, "ref", { enumerable: !1, value: null }), n._store = {}, Object.defineProperty(n._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: 0
-      }), Object.defineProperty(n, "_debugInfo", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: null
-      }), Object.defineProperty(n, "_debugStack", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: H
-      }), Object.defineProperty(n, "_debugTask", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: re
-      }), Object.freeze && (Object.freeze(n.props), Object.freeze(n)), n;
-    }
-    function d(n, l, m, y, H, re) {
-      var T = l.children;
-      if (T !== void 0)
-        if (y)
-          if (k(T)) {
-            for (y = 0; y < T.length; y++)
-              v(T[y]);
-            Object.freeze && Object.freeze(T);
-          } else
-            console.error(
-              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-            );
-        else v(T);
-      if (F.call(l, "key")) {
-        T = r(n);
-        var L = Object.keys(l).filter(function(be) {
-          return be !== "key";
-        });
-        y = 0 < L.length ? "{key: someKey, " + L.join(": ..., ") + ": ...}" : "{key: someKey}", G[T + y] || (L = 0 < L.length ? "{" + L.join(": ..., ") + ": ...}" : "{}", console.error(
-          `A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,
-          y,
-          T,
-          L,
-          T
-        ), G[T + y] = !0);
-      }
-      if (T = null, m !== void 0 && (e(m), T = "" + m), f(l) && (e(l.key), T = "" + l.key), "key" in l) {
-        m = {};
-        for (var ne in l)
-          ne !== "key" && (m[ne] = l[ne]);
-      } else m = l;
-      return T && c(
-        m,
-        typeof n == "function" ? n.displayName || n.name || "Unknown" : n
-      ), b(
-        n,
-        T,
-        m,
-        i(),
-        H,
-        re
-      );
-    }
-    function v(n) {
-      g(n) ? n._store && (n._store.validated = 1) : typeof n == "object" && n !== null && n.$$typeof === q && (n._payload.status === "fulfilled" ? g(n._payload.value) && n._payload.value._store && (n._payload.value._store.validated = 1) : n._store && (n._store.validated = 1));
-    }
-    function g(n) {
-      return typeof n == "object" && n !== null && n.$$typeof === W;
-    }
-    var p = M, W = Symbol.for("react.transitional.element"), O = Symbol.for("react.portal"), _ = Symbol.for("react.fragment"), $ = Symbol.for("react.strict_mode"), R = Symbol.for("react.profiler"), le = Symbol.for("react.consumer"), I = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), ee = Symbol.for("react.suspense"), D = Symbol.for("react.suspense_list"), h = Symbol.for("react.memo"), q = Symbol.for("react.lazy"), N = Symbol.for("react.activity"), te = Symbol.for("react.client.reference"), j = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, k = Array.isArray, S = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    p = {
-      react_stack_bottom_frame: function(n) {
-        return n();
-      }
-    };
-    var P, Y = {}, U = p.react_stack_bottom_frame.bind(
-      p,
-      u
-    )(), B = S(o(u)), G = {};
-    z.Fragment = _, z.jsx = function(n, l, m) {
-      var y = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return d(
-        n,
-        l,
-        m,
-        !1,
-        y ? Error("react-stack-top-frame") : U,
-        y ? S(o(n)) : B
-      );
-    }, z.jsxs = function(n, l, m) {
-      var y = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return d(
-        n,
-        l,
-        m,
-        !0,
-        y ? Error("react-stack-top-frame") : U,
-        y ? S(o(n)) : B
-      );
-    };
-  }()), z;
-}
-process.env.NODE_ENV === "production" ? ie.exports = Fe() : ie.exports = _e();
-var s = ie.exports;
 typeof window < "u" && (window.remotion_renderReady = !1, window.remotion_delayRenderTimeouts || (window.remotion_delayRenderTimeouts = {}), window.remotion_delayRenderHandles = []);
-var Ie = {
+var qe = {
   "style.transformOrigin": {
     type: "transform-origin",
     step: 1,
@@ -341,7 +67,7 @@ var Ie = {
     description: "Opacity",
     hiddenFromList: !1
   }
-}, ke = {
+}, Pe = {
   "style.borderWidth": {
     type: "number",
     default: void 0,
@@ -372,7 +98,7 @@ var Ie = {
     default: void 0,
     description: "Border color"
   }
-}, Pe = {
+}, Ce = {
   "style.borderRadius": {
     type: "number",
     default: 0,
@@ -414,13 +140,13 @@ var Ie = {
     description: "Bottom left radius",
     hiddenFromList: !1
   }
-}, Ae = {
+}, Re = {
   "style.backgroundColor": {
     type: "color",
     default: "transparent",
     description: "Color"
   }
-}, Oe = {
+}, ke = {
   premountFor: {
     type: "number",
     default: 0,
@@ -438,9 +164,9 @@ var Ie = {
     hiddenFromList: !0,
     keyframable: !1
   }
-}, Ce = {
-  ...Oe
-}, Ne = {
+}, Me = {
+  ...ke
+}, Le = {
   cropLeft: {
     type: "number",
     default: 0,
@@ -481,70 +207,70 @@ var Ie = {
     hiddenFromList: !1,
     keyframable: !0
   }
-}, qe = Ne, Me = {
+}, Ne = Le, Be = {
+  ...Ne,
   ...qe,
-  ...Ie,
-  ...Ae,
-  ...ke,
+  ...Re,
   ...Pe,
-  ...Ce
-}, Ye = {
+  ...Ce,
+  ...Me
+}, We = {
   layout: {
     type: "enum",
     default: "absolute-fill",
     description: "Layout",
     variants: {
-      "absolute-fill": Me,
+      "absolute-fill": Be,
       none: {}
     }
   }
 };
 ({
-  ...Ye.layout
+  ...We.layout
 });
-function Le(r, t) {
-  const { allowFloats: e, component: o } = t;
-  if (typeof r > "u")
-    throw new Error(`The "durationInFrames" prop ${o} is missing.`);
-  if (typeof r != "number")
-    throw new Error(`The "durationInFrames" prop ${o} must be a number, but you passed a value of type ${typeof r}`);
-  if (r <= 0)
-    throw new TypeError(`The "durationInFrames" prop ${o} must be positive, but got ${r}.`);
-  if (!e && r % 1 !== 0)
-    throw new TypeError(`The "durationInFrames" prop ${o} must be an integer, but got ${r}.`);
-  if (!Number.isFinite(r))
-    throw new TypeError(`The "durationInFrames" prop ${o} must be finite, but got ${r}.`);
+function Ae(n, t) {
+  const { allowFloats: e, component: r } = t;
+  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)
+    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 We = {
-  validateDurationInFrames: Le
+var Xe = {
+  validateDurationInFrames: Ae
 };
-const ge = M.createContext(null), ye = M.createContext(null), fe = ({ presentationProgress: r, children: t }) => {
-  const e = w(() => ({
-    enteringProgress: r
-  }), [r]);
-  return /* @__PURE__ */ s.jsx(ge.Provider, { value: e, children: t });
-}, me = ({ presentationProgress: r, children: t }) => {
-  const e = w(() => ({
-    exitingProgress: r
-  }), [r]);
-  return /* @__PURE__ */ s.jsx(ye.Provider, { value: e, children: t });
-}, xe = (r) => M.Children.toArray(r).reduce((e, o) => o.type === M.Fragment ? e.concat(
-  xe(
-    o.props.children
+const me = k.createContext(null), de = k.createContext(null), ie = ({ presentationProgress: n, children: t }) => {
+  const e = h(() => ({
+    enteringProgress: n
+  }), [n]);
+  return /* @__PURE__ */ o(me.Provider, { value: e, children: t });
+}, se = ({ presentationProgress: n, children: t }) => {
+  const e = h(() => ({
+    exitingProgress: n
+  }), [n]);
+  return /* @__PURE__ */ o(de.Provider, { value: e, children: t });
+}, fe = (n) => k.Children.toArray(n).reduce((e, r) => r.type === k.Fragment ? e.concat(
+  fe(
+    r.props.children
   )
-) : (e.push(o), e), []), De = 0.01, Ue = ({
-  children: r,
+) : (e.push(r), e), []), Oe = 0.01, Ue = ({
+  children: n,
   presentationProgress: t,
   presentationDirection: e,
-  passedProps: { direction: o = "from-left", enterStyle: i, exitStyle: u }
+  passedProps: { direction: r = "from-left", enterStyle: s, exitStyle: l }
 }) => {
-  const f = w(() => {
-    const a = t === 1 ? t * 100 : t * 100 - De;
+  const u = h(() => {
+    const i = t === 1 ? t * 100 : t * 100 - Oe;
     if (e === "exiting")
-      switch (o) {
+      switch (r) {
         case "from-left":
           return {
-            transform: `translateX(${a}%)`
+            transform: `translateX(${i}%)`
           };
         case "from-right":
           return {
@@ -552,23 +278,23 @@ const ge = M.createContext(null), ye = M.createContext(null), fe = ({ presentati
           };
         case "from-top":
           return {
-            transform: `translateY(${a}%)`
+            transform: `translateY(${i}%)`
           };
         case "from-bottom":
           return {
             transform: `translateY(${-t * 100}%)`
           };
         default:
-          throw new Error(`Invalid direction: ${o}`);
+          throw new Error(`Invalid direction: ${r}`);
       }
-    switch (o) {
+    switch (r) {
       case "from-left":
         return {
           transform: `translateX(${-100 + t * 100}%)`
         };
       case "from-right":
         return {
-          transform: `translateX(${100 - a}%)`
+          transform: `translateX(${100 - i}%)`
         };
       case "from-top":
         return {
@@ -576,136 +302,141 @@ const ge = M.createContext(null), ye = M.createContext(null), fe = ({ presentati
         };
       case "from-bottom":
         return {
-          transform: `translateY(${100 - a}%)`
+          transform: `translateY(${100 - i}%)`
         };
       default:
-        throw new Error(`Invalid direction: ${o}`);
+        throw new Error(`Invalid direction: ${r}`);
     }
-  }, [e, t, o]), c = w(() => ({
+  }, [e, t, r]), a = h(() => ({
     width: "100%",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
-    ...f,
-    ...e === "entering" ? i : u
-  }), [f, i, u, e]);
-  return /* @__PURE__ */ s.jsx(x, { style: c, children: r });
-}, Z = (r) => ({
+    ...u,
+    ...e === "entering" ? s : l
+  }), [u, s, l, e]);
+  return /* @__PURE__ */ o(m, { style: a, children: n });
+}, N = (n) => ({
   component: Ue,
   props: {}
-}), Be = We.validateDurationInFrames, J = function(r) {
+}), Ye = Xe.validateDurationInFrames, L = function(n) {
   return null;
-}, ae = ({ children: r }) => /* @__PURE__ */ s.jsx(s.Fragment, { children: r }), Xe = ({
-  children: r
+};
+L.isTransitionSeriesTransition = !0;
+const X = ({ children: n }) => /* @__PURE__ */ o(ue, { children: n });
+X.isSeriesSequence = !0;
+const De = ({
+  children: n
 }) => {
-  const { fps: t } = ve(), e = Se(), o = w(() => {
-    let i = 0, u = 0;
-    const f = xe(r);
-    return Ee.map(f, (c, a) => {
-      const b = c;
-      if (typeof b == "string") {
-        if (b.trim() === "")
+  const { fps: t } = be(), e = Fe(), r = h(() => {
+    let s = 0, l = 0;
+    const u = fe(n);
+    return ve.map(u, (a, i) => {
+      var V, H, J, K, G, Q, Z, ee;
+      const c = a;
+      if (typeof c == "string") {
+        if (c.trim() === "")
           return null;
         throw new TypeError(
-          `The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${b}"`
+          `The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${c}"`
         );
       }
-      const d = f[a - 1], v = f[a + 1], g = typeof d == "string" || typeof d > "u" ? null : d.type === J ? d : null, p = typeof v == "string" || typeof v > "u" ? null : v.type === J ? v : null, W = typeof d == "string" || typeof d > "u" ? !1 : d.type === J;
-      if (b.type === J) {
-        if (W)
+      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 = ${a - 1} and ${a})`
+            `A <TransitionSeries.Transition /> component must not be followed by another <TransitionSeries.Transition /> component (nth children = ${i - 1} and ${i})`
           );
         return null;
       }
-      if (b.type !== ae)
+      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 ${b} instead`
+          `The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${c} instead`
         );
-      const O = b, _ = `index = ${a}, duration = ${O.props.durationInFrames}`;
-      if (!(O != null && O.props.children))
+      const E = c, C = `index = ${i}, duration = ${E.props.durationInFrames}`;
+      if (!(E != null && E.props.children))
         throw new TypeError(
-          `A <TransitionSeries.Sequence /> component (${_}) 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 $ = O.props.durationInFrames, {
-        durationInFrames: R,
-        children: le,
-        ...I
-      } = O.props;
-      Be($, {
+      const S = E.props.durationInFrames, {
+        durationInFrames: w,
+        children: ft,
+        ...F
+      } = E.props;
+      Ye(S, {
         component: "of a <TransitionSeries.Sequence /> component",
         allowFloats: !0
       });
-      const C = O.props.offset ?? 0;
-      if (Number.isNaN(C))
+      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 (${_}).`
+          `The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${C}).`
         );
-      if (!Number.isFinite(C))
+      if (!Number.isFinite(q))
         throw new TypeError(
-          `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${C} (${_}).`
+          `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${q} (${C}).`
         );
-      if (C % 1 !== 0)
+      if (q % 1 !== 0)
         throw new TypeError(
-          `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${C} (${_}).`
+          `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${q} (${C}).`
         );
-      const ee = u + C;
-      let D = 0;
-      g && (D = g.props.timing.getDurationInFrames({
+      const he = l + q;
+      let U = 0;
+      p && (U = p.props.timing.getDurationInFrames({
         fps: t
-      }), i -= D / 2);
-      let h = ee - D / 2;
-      u += $ + C, h < 0 && (h = 0);
-      const q = p ? p.props.timing.getProgress({
-        frame: e - h - R + p.props.timing.getDurationInFrames({ fps: t }) / 2 + i,
+      }), 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, N = g ? g.props.timing.getProgress({
-        frame: e - h,
+      }) : null, R = p ? p.props.timing.getProgress({
+        frame: e - f,
         fps: t
-      }) : null, te = g ? g.props.timing.getProgress({
-        frame: e - (h + R),
+      }) : null, ge = p ? p.props.timing.getProgress({
+        frame: e - (f + w),
         fps: t
       }) : null;
-      if (p && $ < p.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 ${p.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 ${$} frames long (${_})`
+          )} frames long, but the sequence is only ${S} frames long (${C})`
         );
-      if (g && $ < g.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 ${g.props.timing.getDurationInFrames(
+          `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 ${$} frames long (${_})`
+          )} frames long, but the sequence is only ${S} frames long (${C})`
         );
-      if (p && g && te !== null && N !== null) {
-        const j = p.props.presentation ?? Z(), F = g.props.presentation ?? Z(), k = g.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 = p.props.timing.getDurationInFrames({
+        }), b = y.props.timing.getDurationInFrames({
           fps: t
-        }), P = j.component, Y = F.component, U = e < +Math.floor(h) + k / 2, B = e > Math.floor(h) + Math.floor(R) + k / 2, G = B ? Math.floor(h) + Math.floor(R) + Math.floor(S / 2) : Math.floor(h), n = U ? Math.floor(h) : Math.floor(h) + k / 2, l = p.props.timing.getProgress({
-          frame: e - (n + R - 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
-        }), m = e > h, y = e < h + R + S / 2 + k / 2;
-        return /* @__PURE__ */ s.jsx(
-          oe,
+        }), Te = e > f, Se = e < f + w + b / 2 + I / 2;
+        return /* @__PURE__ */ o(
+          z,
           {
-            active: y && m && (U || B),
-            frame: G,
-            children: /* @__PURE__ */ s.jsx(
-              V,
+            active: Se && Te && (te || ne),
+            frame: ye,
+            children: /* @__PURE__ */ o(
+              M,
               {
-                from: n,
-                durationInFrames: $ + S / 2,
-                ...I,
-                name: I.name || "<TS.Sequence>",
-                children: /* @__PURE__ */ s.jsx(
+                from: re,
+                durationInFrames: S + b / 2,
+                ...F,
+                name: F.name || "<TS.Sequence>",
+                children: /* @__PURE__ */ o(
                   P,
                   {
-                    passedProps: j.props ?? {},
+                    passedProps: v.props ?? {},
                     presentationDirection: "exiting",
-                    presentationProgress: l,
-                    presentationDurationInFrames: p.props.timing.getDurationInFrames(
+                    presentationProgress: oe,
+                    presentationDurationInFrames: y.props.timing.getDurationInFrames(
                       { fps: t }
                     ),
                     onElementImage: () => {
@@ -713,17 +444,17 @@ const ge = M.createContext(null), ye = M.createContext(null), fe = ({ presentati
                     onUnmount: () => {
                     },
                     bothEnteringAndExiting: !1,
-                    children: /* @__PURE__ */ s.jsx(
-                      me,
+                    children: /* @__PURE__ */ o(
+                      se,
                       {
-                        presentationProgress: l,
-                        children: /* @__PURE__ */ s.jsx(
-                          Y,
+                        presentationProgress: oe,
+                        children: /* @__PURE__ */ o(
+                          D,
                           {
-                            passedProps: F.props ?? {},
+                            passedProps: x.props ?? {},
                             presentationDirection: "entering",
-                            presentationProgress: N,
-                            presentationDurationInFrames: g.props.timing.getDurationInFrames(
+                            presentationProgress: R,
+                            presentationDurationInFrames: p.props.timing.getDurationInFrames(
                               { fps: t }
                             ),
                             onElementImage: () => {
@@ -731,11 +462,11 @@ const ge = M.createContext(null), ye = M.createContext(null), fe = ({ presentati
                             onUnmount: () => {
                             },
                             bothEnteringAndExiting: !1,
-                            children: /* @__PURE__ */ s.jsx(
-                              fe,
+                            children: /* @__PURE__ */ o(
+                              ie,
                               {
-                                presentationProgress: N,
-                                children: c
+                                presentationProgress: R,
+                                children: a
                               }
                             )
                           }
@@ -745,33 +476,33 @@ const ge = M.createContext(null), ye = M.createContext(null), fe = ({ presentati
                   }
                 )
               },
-              a
+              i
             )
           },
-          a
+          i
         );
       }
-      if (N !== null && g) {
-        const j = g.props.timing.getDurationInFrames({ fps: t }) / 2, F = g.props.presentation ?? Z(), k = F.component, S = e < h + j, P = S ? Math.floor(h) : Math.floor(h) + j, Y = e > P;
-        return /* @__PURE__ */ s.jsx(
-          oe,
+      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(
+          z,
           {
-            active: Y && S,
+            active: D && b,
             frame: P,
-            children: /* @__PURE__ */ s.jsx(
-              V,
+            children: /* @__PURE__ */ o(
+              M,
               {
                 from: P,
-                durationInFrames: $,
-                ...I,
-                name: I.name || "<TS.Sequence>",
-                children: /* @__PURE__ */ s.jsx(
-                  k,
+                durationInFrames: S,
+                ...F,
+                name: F.name || "<TS.Sequence>",
+                children: /* @__PURE__ */ o(
+                  I,
                   {
-                    passedProps: F.props ?? {},
+                    passedProps: x.props ?? {},
                     presentationDirection: "entering",
-                    presentationProgress: N,
-                    presentationDurationInFrames: g.props.timing.getDurationInFrames(
+                    presentationProgress: R,
+                    presentationDurationInFrames: p.props.timing.getDurationInFrames(
                       { fps: t }
                     ),
                     onElementImage: () => {
@@ -779,43 +510,43 @@ const ge = M.createContext(null), ye = M.createContext(null), fe = ({ presentati
                     onUnmount: () => {
                     },
                     bothEnteringAndExiting: !1,
-                    children: /* @__PURE__ */ s.jsx(
-                      fe,
+                    children: /* @__PURE__ */ o(
+                      ie,
                       {
-                        presentationProgress: N,
-                        children: c
+                        presentationProgress: R,
+                        children: a
                       }
                     )
                   }
                 )
               },
-              a
+              i
             )
           },
-          a
+          i
         );
       }
-      if (q !== null && p) {
-        const j = p.props.timing.getDurationInFrames({ fps: t }) / 2, F = p.props.presentation ?? Z(), k = F.component, S = e > Math.floor(R) + Math.floor(h), P = e < Math.floor(R) + Math.floor(h) + j;
-        return /* @__PURE__ */ s.jsx(
-          oe,
+      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(
+          z,
           {
-            active: P && S,
-            frame: Math.floor(R),
-            children: /* @__PURE__ */ s.jsx(
-              V,
+            active: P && b,
+            frame: Math.floor(w),
+            children: /* @__PURE__ */ o(
+              M,
               {
-                from: Math.floor(h),
-                durationInFrames: $ + j,
-                ...I,
-                name: I.name || "<TS.Sequence>",
-                children: /* @__PURE__ */ s.jsx(
-                  k,
+                from: Math.floor(f),
+                durationInFrames: S + v,
+                ...F,
+                name: F.name || "<TS.Sequence>",
+                children: /* @__PURE__ */ o(
+                  I,
                   {
-                    passedProps: F.props ?? {},
+                    passedProps: x.props ?? {},
                     presentationDirection: "exiting",
-                    presentationProgress: q,
-                    presentationDurationInFrames: p.props.timing.getDurationInFrames(
+                    presentationProgress: Y,
+                    presentationDurationInFrames: y.props.timing.getDurationInFrames(
                       { fps: t }
                     ),
                     onElementImage: () => {
@@ -823,181 +554,178 @@ const ge = M.createContext(null), ye = M.createContext(null), fe = ({ presentati
                     onUnmount: () => {
                     },
                     bothEnteringAndExiting: !1,
-                    children: /* @__PURE__ */ s.jsx(
-                      me,
+                    children: /* @__PURE__ */ o(
+                      se,
                       {
-                        presentationProgress: q,
-                        children: c
+                        presentationProgress: Y,
+                        children: a
                       }
                     )
                   }
                 )
               },
-              a
+              i
             )
           },
-          a
+          i
         );
       }
-      return /* @__PURE__ */ s.jsx(
-        V,
+      return /* @__PURE__ */ o(
+        M,
         {
-          from: Math.floor(h),
-          durationInFrames: $,
-          ...I,
-          name: I.name || "<TS.Sequence>",
-          children: c
+          from: Math.floor(f),
+          durationInFrames: S,
+          ...F,
+          name: F.name || "<TS.Sequence>",
+          children: a
         },
-        a
+        i
       );
     });
-  }, [r, t, e]);
-  return /* @__PURE__ */ s.jsx(s.Fragment, { children: o });
-}, E = ({ children: r, name: t, layout: e, ...o }) => {
-  const i = t ?? "<TransitionSeries>", u = e ?? "absolute-fill";
-  return /* @__PURE__ */ s.jsx(V, { name: i, layout: u, ...o, children: /* @__PURE__ */ s.jsx(Xe, { children: r }) });
-};
-E.Sequence = ae;
-E.Transition = J;
-pe.addSequenceStackTraces(E);
-pe.addSequenceStackTraces(ae);
-const xt = () => {
-  const r = M.useContext(ge), t = M.useContext(ye);
-  return !r && !t ? {
+  }, [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 ? {
     isInTransitionSeries: !1,
     entering: 1,
     exiting: 0
   } : {
     isInTransitionSeries: !0,
-    entering: (r == null ? void 0 : r.enteringProgress) ?? 1,
+    entering: (n == null ? void 0 : n.enteringProgress) ?? 1,
     exiting: (t == null ? void 0 : t.exitingProgress) ?? 0
   };
 }, ze = ({
-  children: r,
+  children: n,
   presentationDirection: t,
   presentationProgress: e,
-  passedProps: o
+  passedProps: r
 }) => {
-  const u = Math.sqrt(o.width ** 2 + o.height ** 2) / 2 * e, f = Je(
-    o.width / 2,
-    o.height / 2,
-    u
-  ), [c] = K(() => String(Q(null))), a = w(() => ({
+  const l = Math.sqrt(r.width ** 2 + r.height ** 2) / 2 * e, u = je(
+    r.width / 2,
+    r.height / 2,
+    l
+  ), [a] = A(() => String(B(null))), i = h(() => ({
     width: "100%",
     height: "100%",
-    clipPath: t === "exiting" ? void 0 : `url(#${c})`
-  }), [c, t]);
-  return /* @__PURE__ */ s.jsxs(x, { children: [
-    /* @__PURE__ */ s.jsx(x, { style: a, children: r }),
-    t === "exiting" ? null : /* @__PURE__ */ s.jsx(x, { children: /* @__PURE__ */ s.jsx("svg", { width: o.width, height: o.height, children: /* @__PURE__ */ s.jsx("defs", { children: /* @__PURE__ */ s.jsx("clipPath", { id: c, children: /* @__PURE__ */ s.jsx("path", { d: f, fill: "black" }) }) }) }) })
+    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" }) }) }) }) })
   ] });
-}, Ve = (r) => ({ component: ze, props: r }), Je = (r, t, e) => `M ${r}, ${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`, Ge = ({
-  children: r,
+            a ${e},${e} 0 1,0 -${e * 2},0`, Ve = ({
+  children: n,
   presentationDirection: t,
   presentationProgress: e,
-  passedProps: o
+  passedProps: r
 }) => {
-  const { width: i, height: u } = o, f = i * e, c = u * e, a = i / 2 - f / 2, b = u / 2 - c / 2, [d] = K(() => String(Q(null))), v = w(() => ({
+  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__ */ s.jsxs(x, { children: [
-    /* @__PURE__ */ s.jsx(x, { style: v, children: r }),
-    t === "exiting" ? null : /* @__PURE__ */ s.jsx(x, { children: /* @__PURE__ */ s.jsx("svg", { children: /* @__PURE__ */ s.jsx("defs", { children: /* @__PURE__ */ s.jsx("clipPath", { id: d, children: /* @__PURE__ */ s.jsx(
+  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: a,
-        y: b,
-        width: f,
-        height: c,
+        x: i,
+        y: c,
+        width: u,
+        height: a,
         fill: "black"
       }
     ) }) }) }) })
   ] });
-}, He = (r) => ({ component: Ge, props: r }), Ze = ({
-  children: r,
+}, He = (n) => ({ component: Ve, props: n }), Je = ({
+  children: n,
   presentationDirection: t,
   presentationProgress: e,
-  passedProps: o
+  passedProps: r
 }) => {
-  const i = Math.sqrt(o.width ** 2 + o.height ** 2) / 2, u = i * e, f = i * 2 * e, { path: c } = je({
-    innerRadius: u,
-    outerRadius: f,
+  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
-  }), a = $e(c), b = he(
-    c,
-    o.width / 2 - a.width / 2,
-    o.height / 2 - a.height / 2
-  ), [d] = K(() => String(Q(null))), v = w(() => ({
+  }), i = xe(a), c = ce(
+    a,
+    r.width / 2 - i.width / 2,
+    r.height / 2 - i.height / 2
+  ), [d] = A(() => String(B(null))), g = h(() => ({
     width: "100%",
     height: "100%",
     clipPath: t === "exiting" ? void 0 : `url(#${d})`
   }), [d, t]);
-  return /* @__PURE__ */ s.jsxs(x, { children: [
-    /* @__PURE__ */ s.jsx(x, { style: v, children: r }),
-    t === "exiting" ? null : /* @__PURE__ */ s.jsx(x, { children: /* @__PURE__ */ s.jsx("svg", { children: /* @__PURE__ */ s.jsx("defs", { children: /* @__PURE__ */ s.jsx("clipPath", { id: d, children: /* @__PURE__ */ s.jsx("path", { d: b, 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" }) }) }) }) })
   ] });
-}, Qe = (r) => ({ component: Ze, props: r }), Ke = ({
-  children: r,
+}, Ke = (n) => ({ component: Je, props: n }), Ge = ({
+  children: n,
   presentationDirection: t,
   presentationProgress: e,
-  passedProps: o
+  passedProps: r
 }) => {
-  const { width: i, height: u } = o, f = i * e, c = i / 2 - f / 2, [a] = K(() => String(Q(null))), b = w(() => ({
+  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(#${a})`
-  }), [a, t]);
-  return /* @__PURE__ */ s.jsxs(x, { children: [
-    /* @__PURE__ */ s.jsx(x, { style: b, children: r }),
-    t === "exiting" ? null : /* @__PURE__ */ s.jsx(x, { children: /* @__PURE__ */ s.jsx("svg", { children: /* @__PURE__ */ s.jsx("defs", { children: /* @__PURE__ */ s.jsx("clipPath", { id: a, children: /* @__PURE__ */ s.jsx(
+    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(
       "rect",
       {
-        x: c,
+        x: a,
         y: 0,
-        width: f,
-        height: u,
+        width: u,
+        height: l,
         fill: "black"
       }
     ) }) }) }) })
   ] });
-}, et = (r) => ({ component: Ke, props: r });
-var tt = ({ children: r, presentationDirection: t, presentationProgress: e, passedProps: o }) => {
-  const i = t === "entering", u = w(() => ({
-    opacity: i ? e : o.shouldFadeOutExitingScene ? 1 - e : 1,
-    ...t === "entering" ? o.enterStyle : o.exitStyle
+}, 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
   }), [
-    i,
-    o.enterStyle,
-    o.exitStyle,
-    o.shouldFadeOutExitingScene,
+    s,
+    r.enterStyle,
+    r.exitStyle,
+    r.shouldFadeOutExitingScene,
     t,
     e
   ]);
-  return /* @__PURE__ */ s.jsx(x, {
-    style: u,
-    children: r
+  return /* @__PURE__ */ o(m, {
+    style: l,
+    children: n
   });
-}, de = (r) => ({
-  component: tt,
-  props: r ?? {}
-}), rt = 0.01, nt = ({
-  children: r,
+}, ae = (n) => ({
+  component: Ze,
+  props: n ?? {}
+}), et = 0.01, tt = ({
+  children: n,
   presentationProgress: t,
   presentationDirection: e,
-  passedProps: { direction: o = "from-left", enterStyle: i, exitStyle: u }
+  passedProps: { direction: r = "from-left", enterStyle: s, exitStyle: l }
 }) => {
-  const f = w(() => {
-    const a = t === 1 ? t * 100 : t * 100 - rt;
+  const u = h(() => {
+    const i = t === 1 ? t * 100 : t * 100 - et;
     if (e === "exiting")
-      switch (o) {
+      switch (r) {
         case "from-left":
           return {
-            transform: `translateX(${a}%)`
+            transform: `translateX(${i}%)`
           };
         case "from-right":
           return {
@@ -1005,23 +733,23 @@ var tt = ({ children: r, presentationDirection: t, presentationProgress: e, pass
           };
         case "from-top":
           return {
-            transform: `translateY(${a}%)`
+            transform: `translateY(${i}%)`
           };
         case "from-bottom":
           return {
             transform: `translateY(${-t * 100}%)`
           };
         default:
-          throw new Error(`Invalid direction: ${o}`);
+          throw new Error(`Invalid direction: ${r}`);
       }
-    switch (o) {
+    switch (r) {
       case "from-left":
         return {
           transform: `translateX(${-100 + t * 100}%)`
         };
       case "from-right":
         return {
-          transform: `translateX(${100 - a}%)`
+          transform: `translateX(${100 - i}%)`
         };
       case "from-top":
         return {
@@ -1029,28 +757,28 @@ var tt = ({ children: r, presentationDirection: t, presentationProgress: e, pass
         };
       case "from-bottom":
         return {
-          transform: `translateY(${100 - a}%)`
+          transform: `translateY(${100 - i}%)`
         };
       default:
-        throw new Error(`Invalid direction: ${o}`);
+        throw new Error(`Invalid direction: ${r}`);
     }
-  }, [e, t, o]), c = w(() => ({
+  }, [e, t, r]), a = h(() => ({
     width: "100%",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
-    ...f,
-    ...e === "entering" ? i : u
-  }), [f, i, u, e]);
-  return /* @__PURE__ */ s.jsx(x, {
-    style: c,
-    children: r
+    ...u,
+    ...e === "entering" ? s : l
+  }), [u, s, l, e]);
+  return /* @__PURE__ */ o(m, {
+    style: a,
+    children: n
   });
-}, ot = (r) => ({
-  component: nt,
-  props: r ?? {}
-}), st = (r, t) => {
-  const e = r * 100;
+}, nt = (n) => ({
+  component: tt,
+  props: n ?? {}
+}), rt = (n, t) => {
+  const e = n * 100;
   switch (t) {
     case "from-left":
       return `polygon(0% 0%, ${e}% 0%, ${e}% 100%, 0% 100%)`;
@@ -1071,8 +799,8 @@ var tt = ({ children: r, presentationDirection: t, presentationProgress: e, pass
     default:
       throw new Error(`Unknown direction ${JSON.stringify(t)}`);
   }
-}, it = (r, t) => {
-  const e = r * 100;
+}, ot = (n, t) => {
+  const e = n * 100;
   switch (t) {
     case "from-left":
       return `polygon(100% 100%, ${100 - e}% 100%, ${100 - e}% 0%, 100% 0%)`;
@@ -1093,205 +821,205 @@ var tt = ({ children: r, presentationDirection: t, presentationProgress: e, pass
     default:
       throw new Error(`Unknown direction ${JSON.stringify(t)}`);
   }
-}, at = ({
-  children: r,
+}, it = ({
+  children: n,
   presentationProgress: t,
   presentationDirection: e,
   passedProps: {
-    direction: o = "from-left",
-    innerEnterStyle: i,
-    innerExitStyle: u,
-    outerEnterStyle: f,
-    outerExitStyle: c
+    direction: r = "from-left",
+    innerEnterStyle: s,
+    innerExitStyle: l,
+    outerEnterStyle: u,
+    outerExitStyle: a
   }
 }) => {
-  const a = e === "entering" ? t : 1 - t, b = e === "entering" ? st(a, o) : it(a, o), d = w(() => ({
+  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: b,
-    ...e === "entering" ? i : u
-  }), [b, i, u, e]), v = w(() => e === "entering" ? f : c, [f, c, e]);
-  return /* @__PURE__ */ s.jsx(x, {
-    style: v,
-    children: /* @__PURE__ */ s.jsx(x, {
+    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,
-      children: r
+      children: n
     })
   });
-}, lt = (r) => ({
-  component: at,
-  props: r ?? {}
-}), ut = ({
-  children: r,
+}, st = (n) => ({
+  component: it,
+  props: n ?? {}
+}), at = ({
+  children: n,
   presentationDirection: t,
   presentationProgress: e,
   passedProps: {
-    direction: o = "from-left",
-    perspective: i = 1e3,
-    innerEnterStyle: u,
-    innerExitStyle: f,
-    outerEnterStyle: c,
-    outerExitStyle: a
+    direction: r = "from-left",
+    perspective: s = 1e3,
+    innerEnterStyle: l,
+    innerExitStyle: u,
+    outerEnterStyle: a,
+    outerExitStyle: i
   }
 }) => {
-  const b = w(() => {
-    const p = t === "entering" ? se(e, [0, 1], [o === "from-right" || o === "from-top" ? 180 : -180, 0]) : se(e, [0, 1], [0, o === "from-right" || o === "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: `${o === "from-top" || o === "from-bottom" ? "rotateX" : "rotateY"}(${p}deg)`,
+      transform: `${r === "from-top" || r === "from-bottom" ? "rotateX" : "rotateY"}(${p}deg)`,
       backfaceVisibility: "hidden",
       WebkitBackfaceVisibility: "hidden",
-      ...t === "entering" ? u : f
+      ...t === "entering" ? l : u
     };
   }, [
-    o,
+    r,
+    l,
     u,
-    f,
     t,
     e
-  ]), d = w(() => ({
-    perspective: i,
+  ]), d = h(() => ({
+    perspective: s,
     transformStyle: "preserve-3d",
-    ...t === "entering" ? c : a
-  }), [c, a, i, t]);
-  return /* @__PURE__ */ s.jsx(x, {
+    ...t === "entering" ? a : i
+  }), [a, i, s, t]);
+  return /* @__PURE__ */ o(m, {
     style: d,
-    children: /* @__PURE__ */ s.jsx(x, {
-      style: b,
-      children: r
+    children: /* @__PURE__ */ o(m, {
+      style: c,
+      children: n
     })
   });
-}, ct = (r) => ({ component: ut, props: r ?? {} }), ft = ({ children: r, presentationDirection: t, presentationProgress: e, passedProps: o }) => {
-  const i = Math.sqrt(o.width ** 2 + o.height ** 2) / 2, { path: u } = Re({
-    radius: i,
+}, 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
-  }), f = he(u, -(i * 2 - o.width) / 2, -(i * 2 - o.height) / 2), c = w(() => ({
+  }), 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("${f}")`,
-    ...t === "entering" ? o.innerEnterStyle : o.innerExitStyle
+    clipPath: t === "exiting" ? void 0 : `path("${u}")`,
+    ...t === "entering" ? r.innerEnterStyle : r.innerExitStyle
   }), [
-    f,
-    o.innerEnterStyle,
-    o.innerExitStyle,
+    u,
+    r.innerEnterStyle,
+    r.innerExitStyle,
     t
-  ]), a = w(() => t === "entering" ? o.outerEnterStyle : o.outerExitStyle, [
-    o.outerEnterStyle,
-    o.outerExitStyle,
+  ]), i = h(() => t === "entering" ? r.outerEnterStyle : r.outerExitStyle, [
+    r.outerEnterStyle,
+    r.outerExitStyle,
     t
   ]);
-  return /* @__PURE__ */ s.jsx(x, {
-    style: a,
-    children: /* @__PURE__ */ s.jsx(x, {
-      style: c,
-      children: r
+  return /* @__PURE__ */ o(m, {
+    style: i,
+    children: /* @__PURE__ */ o(m, {
+      style: a,
+      children: n
     })
   });
-}, mt = (r) => ({ component: ft, props: r ?? {} });
-const bt = {
-  none: ({ id: r }) => /* @__PURE__ */ s.jsx(
-    E.Transition,
+}, ct = (n) => ({ component: ut, props: n ?? {} });
+const wt = {
+  none: ({ id: n }) => /* @__PURE__ */ o(
+    T.Transition,
     {
-      presentation: de(),
-      timing: A({ durationInFrames: 1 })
+      presentation: ae(),
+      timing: $({ durationInFrames: 1 })
     },
-    r
+    n
   ),
-  fade: ({ durationInFrames: r, id: t }) => /* @__PURE__ */ s.jsx(
-    E.Transition,
+  fade: ({ durationInFrames: n, id: t }) => /* @__PURE__ */ o(
+    T.Transition,
     {
-      presentation: de(),
-      timing: A({ durationInFrames: r })
+      presentation: ae(),
+      timing: $({ durationInFrames: n })
     },
     t
   ),
-  slide: ({ durationInFrames: r, id: t, direction: e }) => /* @__PURE__ */ s.jsx(
-    E.Transition,
+  slide: ({ durationInFrames: n, id: t, direction: e }) => /* @__PURE__ */ o(
+    T.Transition,
     {
-      presentation: ot({ direction: e }),
-      timing: A({ durationInFrames: r })
+      presentation: nt({ direction: e }),
+      timing: $({ durationInFrames: n })
     },
     t
   ),
-  wipe: ({ durationInFrames: r, id: t, direction: e }) => /* @__PURE__ */ s.jsx(
-    E.Transition,
+  wipe: ({ durationInFrames: n, id: t, direction: e }) => /* @__PURE__ */ o(
+    T.Transition,
     {
-      presentation: lt({ direction: e }),
-      timing: A({ durationInFrames: r })
+      presentation: st({ direction: e }),
+      timing: $({ durationInFrames: n })
     },
     t
   ),
-  flip: ({ durationInFrames: r, id: t }) => /* @__PURE__ */ s.jsx(
-    E.Transition,
+  flip: ({ durationInFrames: n, id: t }) => /* @__PURE__ */ o(
+    T.Transition,
     {
-      presentation: ct(),
-      timing: A({ durationInFrames: r })
+      presentation: lt(),
+      timing: $({ durationInFrames: n })
     },
     t
   ),
-  clockWipe: ({ width: r, height: t, durationInFrames: e, id: o }) => /* @__PURE__ */ s.jsx(
-    E.Transition,
+  clockWipe: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
+    T.Transition,
     {
-      presentation: mt({ width: r, height: t }),
-      timing: A({ durationInFrames: e })
+      presentation: ct({ width: n, height: t }),
+      timing: $({ durationInFrames: e })
     },
-    o
+    r
   ),
-  star: ({ width: r, height: t, durationInFrames: e, id: o }) => /* @__PURE__ */ s.jsx(
-    E.Transition,
+  star: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
+    T.Transition,
     {
-      presentation: Qe({ width: r, height: t }),
-      timing: A({ durationInFrames: e })
+      presentation: Ke({ width: n, height: t }),
+      timing: $({ durationInFrames: e })
     },
-    o
+    r
   ),
-  circle: ({ width: r, height: t, durationInFrames: e, id: o }) => /* @__PURE__ */ s.jsx(
-    E.Transition,
+  circle: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
+    T.Transition,
     {
-      presentation: Ve({ width: r, height: t }),
-      timing: A({ durationInFrames: e })
+      presentation: _e({ width: n, height: t }),
+      timing: $({ durationInFrames: e })
     },
-    o
+    r
   ),
-  rectangle: ({ width: r, height: t, durationInFrames: e, id: o }) => /* @__PURE__ */ s.jsx(
-    E.Transition,
+  rectangle: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
+    T.Transition,
     {
-      presentation: He({ width: r, height: t }),
-      timing: A({ durationInFrames: e })
+      presentation: He({ width: n, height: t }),
+      timing: $({ durationInFrames: e })
     },
-    o
+    r
   ),
   slidingDoors: ({
-    width: r,
+    width: n,
     height: t,
     durationInFrames: e,
-    id: o
-  }) => /* @__PURE__ */ s.jsx(
-    E.Transition,
+    id: r
+  }) => /* @__PURE__ */ o(
+    T.Transition,
     {
-      presentation: et({ width: r, height: t }),
-      timing: A({ durationInFrames: e })
+      presentation: Qe({ width: n, height: t }),
+      timing: $({ durationInFrames: e })
     },
-    o
+    r
   )
 };
 export {
-  E as TransitionSeries,
-  bt as Transitions,
-  Ve as circle,
-  mt as clockWipe,
-  de as fade,
-  ct as flip,
-  A as linearTiming,
+  T as TransitionSeries,
+  wt as Transitions,
+  _e as circle,
+  ct as clockWipe,
+  ae as fade,
+  lt as flip,
+  $ as linearTiming,
   He as rectangle,
-  ot as slide,
-  et as slidingDoors,
-  yt as springTiming,
-  Qe as star,
-  xt as useTransitionProgress,
-  lt as wipe
+  nt as slide,
+  Qe as slidingDoors,
+  St as springTiming,
+  Ke as star,
+  $t as useTransitionProgress,
+  st as wipe
 };
 //# sourceMappingURL=index.es.js.map