@cliquify.me/transitions 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js CHANGED
@@ -1,26 +1,26 @@
1
- import { interpolate as D, spring as ut, measureSpring as mt, AbsoluteFill as u, Internals as Z, Sequence as L, useVideoConfig as dt, useCurrentFrame as ft, Freeze as z, random as W } from "remotion";
2
- import { jsx as o, Fragment as tt, jsxs as C } from "react/jsx-runtime";
3
- import M, { useMemo as g, Children as ht, useState as B } from "react";
4
- import { getBoundingBox as pt, translatePath as et } from "@remotion/paths";
5
- import { makeStar as gt, makePie as yt } from "@remotion/shapes";
6
- const b = (n) => ({
1
+ 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";
2
+ import { jsx as o, Fragment as ee, jsxs as W } from "react/jsx-runtime";
3
+ import C, { useMemo as h, Children as pe, useState as A } from "react";
4
+ import { getBoundingBox as he, translatePath as te } from "@remotion/paths";
5
+ import { makeStar as ge, makePie as ye } from "@remotion/shapes";
6
+ const T = (n) => ({
7
7
  getDurationInFrames: () => n.durationInFrames,
8
- getProgress: ({ frame: e }) => D(e, [0, n.durationInFrames], [0, 1], {
8
+ getProgress: ({ frame: t }) => D(t, [0, n.durationInFrames], [0, 1], {
9
9
  easing: n.easing,
10
10
  extrapolateLeft: "clamp",
11
11
  extrapolateRight: "clamp"
12
12
  })
13
- }), le = (n = {}) => ({
14
- getDurationInFrames: ({ fps: e }) => n.durationInFrames ? n.durationInFrames : mt({
13
+ }), at = (n = {}) => ({
14
+ getDurationInFrames: ({ fps: t }) => n.durationInFrames ? n.durationInFrames : me({
15
15
  config: n.config,
16
16
  threshold: n.durationRestThreshold,
17
- fps: e
17
+ fps: t
18
18
  }),
19
- getProgress: ({ fps: e, frame: t }) => {
19
+ getProgress: ({ fps: t, frame: e }) => {
20
20
  const r = n.reverse ? 0 : 1, s = n.reverse ? 1 : 0;
21
- return ut({
22
- fps: e,
23
- frame: t,
21
+ return ce({
22
+ fps: t,
23
+ frame: e,
24
24
  to: r,
25
25
  from: s,
26
26
  config: n.config,
@@ -31,7 +31,7 @@ const b = (n) => ({
31
31
  }
32
32
  });
33
33
  typeof window < "u" && (window.remotion_renderReady = !1, window.remotion_delayRenderTimeouts || (window.remotion_delayRenderTimeouts = {}), window.remotion_delayRenderHandles = []);
34
- var wt = {
34
+ var $e = {
35
35
  "style.transformOrigin": {
36
36
  type: "transform-origin",
37
37
  step: 1,
@@ -67,7 +67,7 @@ var wt = {
67
67
  description: "Opacity",
68
68
  hiddenFromList: !1
69
69
  }
70
- }, $t = {
70
+ }, we = {
71
71
  "style.borderWidth": {
72
72
  type: "number",
73
73
  default: void 0,
@@ -98,7 +98,7 @@ var wt = {
98
98
  default: void 0,
99
99
  description: "Border color"
100
100
  }
101
- }, bt = {
101
+ }, Te = {
102
102
  "style.borderRadius": {
103
103
  type: "number",
104
104
  default: 0,
@@ -140,13 +140,13 @@ var wt = {
140
140
  description: "Bottom left radius",
141
141
  hiddenFromList: !1
142
142
  }
143
- }, Tt = {
143
+ }, be = {
144
144
  "style.backgroundColor": {
145
145
  type: "color",
146
146
  default: "transparent",
147
147
  description: "Color"
148
148
  }
149
- }, St = {
149
+ }, Se = {
150
150
  premountFor: {
151
151
  type: "number",
152
152
  default: 0,
@@ -164,9 +164,9 @@ var wt = {
164
164
  hiddenFromList: !0,
165
165
  keyframable: !1
166
166
  }
167
- }, vt = {
168
- ...St
169
- }, Ft = {
167
+ }, Fe = {
168
+ ...Se
169
+ }, ve = {
170
170
  cropLeft: {
171
171
  type: "number",
172
172
  default: 0,
@@ -207,66 +207,66 @@ var wt = {
207
207
  hiddenFromList: !1,
208
208
  keyframable: !0
209
209
  }
210
- }, xt = Ft, It = {
211
- ...xt,
212
- ...wt,
213
- ...Tt,
214
- ...$t,
215
- ...bt,
216
- ...vt
217
- }, Et = {
210
+ }, xe = ve, Ie = {
211
+ ...xe,
212
+ ...$e,
213
+ ...be,
214
+ ...we,
215
+ ...Te,
216
+ ...Fe
217
+ }, Ee = {
218
218
  layout: {
219
219
  type: "enum",
220
220
  default: "absolute-fill",
221
221
  description: "Layout",
222
222
  variants: {
223
- "absolute-fill": It,
223
+ "absolute-fill": Ie,
224
224
  none: {}
225
225
  }
226
226
  }
227
227
  };
228
228
  ({
229
- ...Et.layout
229
+ ...Ee.layout
230
230
  });
231
- function Pt(n, e) {
232
- const { allowFloats: t, component: r } = e;
231
+ function Pe(n, t) {
232
+ const { allowFloats: e, component: r } = t;
233
233
  if (typeof n > "u")
234
234
  throw new Error(`The "durationInFrames" prop ${r} is missing.`);
235
235
  if (typeof n != "number")
236
236
  throw new Error(`The "durationInFrames" prop ${r} must be a number, but you passed a value of type ${typeof n}`);
237
237
  if (n <= 0)
238
238
  throw new TypeError(`The "durationInFrames" prop ${r} must be positive, but got ${n}.`);
239
- if (!t && n % 1 !== 0)
239
+ if (!e && n % 1 !== 0)
240
240
  throw new TypeError(`The "durationInFrames" prop ${r} must be an integer, but got ${n}.`);
241
241
  if (!Number.isFinite(n))
242
242
  throw new TypeError(`The "durationInFrames" prop ${r} must be finite, but got ${n}.`);
243
243
  }
244
- var Rt = {
245
- validateDurationInFrames: Pt
244
+ var qe = {
245
+ validateDurationInFrames: Pe
246
246
  };
247
- const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentationProgress: n, children: e }) => {
248
- const t = g(() => ({
247
+ const ne = C.createContext(null), re = C.createContext(null), K = ({ presentationProgress: n, children: t }) => {
248
+ const e = h(() => ({
249
249
  enteringProgress: n
250
250
  }), [n]);
251
- return /* @__PURE__ */ o(nt.Provider, { value: t, children: e });
252
- }, G = ({ presentationProgress: n, children: e }) => {
253
- const t = g(() => ({
251
+ return /* @__PURE__ */ o(ne.Provider, { value: e, children: t });
252
+ }, G = ({ presentationProgress: n, children: t }) => {
253
+ const e = h(() => ({
254
254
  exitingProgress: n
255
255
  }), [n]);
256
- return /* @__PURE__ */ o(rt.Provider, { value: t, children: e });
257
- }, ot = (n) => M.Children.toArray(n).reduce((t, r) => r.type === M.Fragment ? t.concat(
258
- ot(
256
+ return /* @__PURE__ */ o(re.Provider, { value: e, children: t });
257
+ }, oe = (n) => C.Children.toArray(n).reduce((e, r) => r.type === C.Fragment ? e.concat(
258
+ oe(
259
259
  r.props.children
260
260
  )
261
- ) : (t.push(r), t), []), kt = 0.01, qt = ({
261
+ ) : (e.push(r), e), []), Re = 0.01, ke = ({
262
262
  children: n,
263
- presentationProgress: e,
264
- presentationDirection: t,
263
+ presentationProgress: t,
264
+ presentationDirection: e,
265
265
  passedProps: { direction: r = "from-left", enterStyle: s, exitStyle: l }
266
266
  }) => {
267
- const c = g(() => {
268
- const i = e === 1 ? e * 100 : e * 100 - kt;
269
- if (t === "exiting")
267
+ const u = h(() => {
268
+ const i = t === 1 ? t * 100 : t * 100 - Re;
269
+ if (e === "exiting")
270
270
  switch (r) {
271
271
  case "from-left":
272
272
  return {
@@ -274,7 +274,7 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
274
274
  };
275
275
  case "from-right":
276
276
  return {
277
- transform: `translateX(${-e * 100}%)`
277
+ transform: `translateX(${-t * 100}%)`
278
278
  };
279
279
  case "from-top":
280
280
  return {
@@ -282,7 +282,7 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
282
282
  };
283
283
  case "from-bottom":
284
284
  return {
285
- transform: `translateY(${-e * 100}%)`
285
+ transform: `translateY(${-t * 100}%)`
286
286
  };
287
287
  default:
288
288
  throw new Error(`Invalid direction: ${r}`);
@@ -290,7 +290,7 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
290
290
  switch (r) {
291
291
  case "from-left":
292
292
  return {
293
- transform: `translateX(${-100 + e * 100}%)`
293
+ transform: `translateX(${-100 + t * 100}%)`
294
294
  };
295
295
  case "from-right":
296
296
  return {
@@ -298,7 +298,7 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
298
298
  };
299
299
  case "from-top":
300
300
  return {
301
- transform: `translateY(${-100 + e * 100}%)`
301
+ transform: `translateY(${-100 + t * 100}%)`
302
302
  };
303
303
  case "from-bottom":
304
304
  return {
@@ -307,132 +307,132 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
307
307
  default:
308
308
  throw new Error(`Invalid direction: ${r}`);
309
309
  }
310
- }, [t, e, r]), a = g(() => ({
310
+ }, [e, t, r]), a = h(() => ({
311
311
  width: "100%",
312
312
  height: "100%",
313
313
  justifyContent: "center",
314
314
  alignItems: "center",
315
- ...c,
316
- ...t === "entering" ? s : l
317
- }), [c, s, l, t]);
318
- return /* @__PURE__ */ o(u, { style: a, children: n });
319
- }, X = (n) => ({
320
- component: qt,
315
+ ...u,
316
+ ...e === "entering" ? s : l
317
+ }), [u, s, l, e]);
318
+ return /* @__PURE__ */ o(c, { style: a, children: n });
319
+ }, N = (n) => ({
320
+ component: ke,
321
321
  props: {}
322
- }), Ct = Rt.validateDurationInFrames, N = function(n) {
322
+ }), Ce = qe.validateDurationInFrames, L = function(n) {
323
323
  return null;
324
- }, _ = ({ children: n }) => /* @__PURE__ */ o(tt, { children: n }), Mt = ({
324
+ }, z = ({ children: n }) => /* @__PURE__ */ o(ee, { children: n }), Me = ({
325
325
  children: n
326
326
  }) => {
327
- const { fps: e } = dt(), t = ft(), r = g(() => {
327
+ const { fps: t } = de(), e = fe(), r = h(() => {
328
328
  let s = 0, l = 0;
329
- const c = ot(n);
330
- return ht.map(c, (a, i) => {
331
- const d = a;
332
- if (typeof d == "string") {
333
- if (d.trim() === "")
329
+ const u = oe(n);
330
+ return pe.map(u, (a, i) => {
331
+ const f = a;
332
+ if (typeof f == "string") {
333
+ if (f.trim() === "")
334
334
  return null;
335
335
  throw new TypeError(
336
- `The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${d}"`
336
+ `The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${f}"`
337
337
  );
338
338
  }
339
- const m = c[i - 1], y = c[i + 1], f = typeof m == "string" || typeof m > "u" ? null : m.type === N ? m : null, p = typeof y == "string" || typeof y > "u" ? null : y.type === N ? y : null, A = typeof m == "string" || typeof m > "u" ? !1 : m.type === N;
340
- if (d.type === N) {
341
- if (A)
339
+ 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;
340
+ if (f.type === L) {
341
+ if (_)
342
342
  throw new TypeError(
343
343
  `A <TransitionSeries.Transition /> component must not be followed by another <TransitionSeries.Transition /> component (nth children = ${i - 1} and ${i})`
344
344
  );
345
345
  return null;
346
346
  }
347
- if (d.type !== _)
347
+ if (f.type !== z)
348
348
  throw new TypeError(
349
- `The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${d} instead`
349
+ `The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${f} instead`
350
350
  );
351
- const E = d, k = `index = ${i}, duration = ${E.props.durationInFrames}`;
351
+ const E = f, R = `index = ${i}, duration = ${E.props.durationInFrames}`;
352
352
  if (!(E != null && E.props.children))
353
353
  throw new TypeError(
354
- `A <TransitionSeries.Sequence /> component (${k}) was detected to not have any children. Delete it to fix this error.`
354
+ `A <TransitionSeries.Sequence /> component (${R}) was detected to not have any children. Delete it to fix this error.`
355
355
  );
356
- const $ = E.props.durationInFrames, {
357
- durationInFrames: T,
358
- children: ne,
359
- ...v
356
+ const w = E.props.durationInFrames, {
357
+ durationInFrames: b,
358
+ children: tt,
359
+ ...F
360
360
  } = E.props;
361
- Ct($, {
361
+ Ce(w, {
362
362
  component: "of a <TransitionSeries.Sequence /> component",
363
363
  allowFloats: !0
364
364
  });
365
365
  const P = E.props.offset ?? 0;
366
366
  if (Number.isNaN(P))
367
367
  throw new TypeError(
368
- `The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${k}).`
368
+ `The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${R}).`
369
369
  );
370
370
  if (!Number.isFinite(P))
371
371
  throw new TypeError(
372
- `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${P} (${k}).`
372
+ `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${P} (${R}).`
373
373
  );
374
374
  if (P % 1 !== 0)
375
375
  throw new TypeError(
376
- `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${P} (${k}).`
376
+ `The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${P} (${R}).`
377
377
  );
378
- const it = l + P;
379
- let O = 0;
380
- f && (O = f.props.timing.getDurationInFrames({
381
- fps: e
382
- }), s -= O / 2);
383
- let h = it - O / 2;
384
- l += $ + P, h < 0 && (h = 0);
385
- const U = p ? p.props.timing.getProgress({
386
- frame: t - h - T + p.props.timing.getDurationInFrames({ fps: e }) / 2 + s,
387
- fps: e
388
- }) : null, q = f ? f.props.timing.getProgress({
389
- frame: t - h,
390
- fps: e
391
- }) : null, st = f ? f.props.timing.getProgress({
392
- frame: t - (h + T),
393
- fps: e
378
+ const ie = l + P;
379
+ let X = 0;
380
+ p && (X = p.props.timing.getDurationInFrames({
381
+ fps: t
382
+ }), s -= X / 2);
383
+ let m = ie - X / 2;
384
+ l += w + P, m < 0 && (m = 0);
385
+ const O = g ? g.props.timing.getProgress({
386
+ frame: e - m - b + g.props.timing.getDurationInFrames({ fps: t }) / 2 + s,
387
+ fps: t
388
+ }) : null, k = p ? p.props.timing.getProgress({
389
+ frame: e - m,
390
+ fps: t
391
+ }) : null, se = p ? p.props.timing.getProgress({
392
+ frame: e - (m + b),
393
+ fps: t
394
394
  }) : null;
395
- if (p && $ < p.props.timing.getDurationInFrames({ fps: e }) / 2)
395
+ if (g && w < g.props.timing.getDurationInFrames({ fps: t }) / 2)
396
396
  throw new Error(
397
- `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(
398
- { fps: e }
399
- )} frames long, but the sequence is only ${$} frames long (${k})`
397
+ `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(
398
+ { fps: t }
399
+ )} frames long, but the sequence is only ${w} frames long (${R})`
400
400
  );
401
- if (f && $ < f.props.timing.getDurationInFrames({ fps: e }) / 2)
401
+ if (p && w < p.props.timing.getDurationInFrames({ fps: t }) / 2)
402
402
  throw new Error(
403
- `The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${f.props.timing.getDurationInFrames(
404
- { fps: e }
405
- )} frames long, but the sequence is only ${$} frames long (${k})`
403
+ `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(
404
+ { fps: t }
405
+ )} frames long, but the sequence is only ${w} frames long (${R})`
406
406
  );
407
- if (p && f && st !== null && q !== null) {
408
- const F = p.props.presentation ?? X(), x = f.props.presentation ?? X(), I = f.props.timing.getDurationInFrames({
409
- fps: e
410
- }), S = p.props.timing.getDurationInFrames({
411
- fps: e
412
- }), R = F.component, Y = x.component, j = t < +Math.floor(h) + I / 2, V = t > Math.floor(h) + Math.floor(T) + I / 2, at = V ? Math.floor(h) + Math.floor(T) + Math.floor(S / 2) : Math.floor(h), H = j ? Math.floor(h) : Math.floor(h) + I / 2, J = p.props.timing.getProgress({
413
- frame: t - (H + T - S / 2),
414
- fps: e
415
- }), lt = t > h, ct = t < h + T + S / 2 + I / 2;
407
+ if (g && p && se !== null && k !== null) {
408
+ const v = g.props.presentation ?? N(), x = p.props.presentation ?? N(), I = p.props.timing.getDurationInFrames({
409
+ fps: t
410
+ }), S = g.props.timing.getDurationInFrames({
411
+ fps: t
412
+ }), 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({
413
+ frame: e - (H + b - S / 2),
414
+ fps: t
415
+ }), le = e > m, ue = e < m + b + S / 2 + I / 2;
416
416
  return /* @__PURE__ */ o(
417
- z,
417
+ Y,
418
418
  {
419
- active: ct && lt && (j || V),
420
- frame: at,
419
+ active: ue && le && (j || V),
420
+ frame: ae,
421
421
  children: /* @__PURE__ */ o(
422
- L,
422
+ M,
423
423
  {
424
424
  from: H,
425
- durationInFrames: $ + S / 2,
426
- ...v,
427
- name: v.name || "<TS.Sequence>",
425
+ durationInFrames: w + S / 2,
426
+ ...F,
427
+ name: F.name || "<TS.Sequence>",
428
428
  children: /* @__PURE__ */ o(
429
- R,
429
+ q,
430
430
  {
431
- passedProps: F.props ?? {},
431
+ passedProps: v.props ?? {},
432
432
  presentationDirection: "exiting",
433
433
  presentationProgress: J,
434
- presentationDurationInFrames: p.props.timing.getDurationInFrames(
435
- { fps: e }
434
+ presentationDurationInFrames: g.props.timing.getDurationInFrames(
435
+ { fps: t }
436
436
  ),
437
437
  onElementImage: () => {
438
438
  },
@@ -444,13 +444,13 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
444
444
  {
445
445
  presentationProgress: J,
446
446
  children: /* @__PURE__ */ o(
447
- Y,
447
+ U,
448
448
  {
449
449
  passedProps: x.props ?? {},
450
450
  presentationDirection: "entering",
451
- presentationProgress: q,
452
- presentationDurationInFrames: f.props.timing.getDurationInFrames(
453
- { fps: e }
451
+ presentationProgress: k,
452
+ presentationDurationInFrames: p.props.timing.getDurationInFrames(
453
+ { fps: t }
454
454
  ),
455
455
  onElementImage: () => {
456
456
  },
@@ -460,7 +460,7 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
460
460
  children: /* @__PURE__ */ o(
461
461
  K,
462
462
  {
463
- presentationProgress: q,
463
+ presentationProgress: k,
464
464
  children: a
465
465
  }
466
466
  )
@@ -477,28 +477,28 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
477
477
  i
478
478
  );
479
479
  }
480
- if (q !== null && f) {
481
- const F = f.props.timing.getDurationInFrames({ fps: e }) / 2, x = f.props.presentation ?? X(), I = x.component, S = t < h + F, R = S ? Math.floor(h) : Math.floor(h) + F, Y = t > R;
480
+ if (k !== null && p) {
481
+ 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;
482
482
  return /* @__PURE__ */ o(
483
- z,
483
+ Y,
484
484
  {
485
- active: Y && S,
486
- frame: R,
485
+ active: U && S,
486
+ frame: q,
487
487
  children: /* @__PURE__ */ o(
488
- L,
488
+ M,
489
489
  {
490
- from: R,
491
- durationInFrames: $,
492
- ...v,
493
- name: v.name || "<TS.Sequence>",
490
+ from: q,
491
+ durationInFrames: w,
492
+ ...F,
493
+ name: F.name || "<TS.Sequence>",
494
494
  children: /* @__PURE__ */ o(
495
495
  I,
496
496
  {
497
497
  passedProps: x.props ?? {},
498
498
  presentationDirection: "entering",
499
- presentationProgress: q,
500
- presentationDurationInFrames: f.props.timing.getDurationInFrames(
501
- { fps: e }
499
+ presentationProgress: k,
500
+ presentationDurationInFrames: p.props.timing.getDurationInFrames(
501
+ { fps: t }
502
502
  ),
503
503
  onElementImage: () => {
504
504
  },
@@ -508,7 +508,7 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
508
508
  children: /* @__PURE__ */ o(
509
509
  K,
510
510
  {
511
- presentationProgress: q,
511
+ presentationProgress: k,
512
512
  children: a
513
513
  }
514
514
  )
@@ -521,28 +521,28 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
521
521
  i
522
522
  );
523
523
  }
524
- if (U !== null && p) {
525
- const F = p.props.timing.getDurationInFrames({ fps: e }) / 2, x = p.props.presentation ?? X(), I = x.component, S = t > Math.floor(T) + Math.floor(h), R = t < Math.floor(T) + Math.floor(h) + F;
524
+ if (O !== null && g) {
525
+ 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;
526
526
  return /* @__PURE__ */ o(
527
- z,
527
+ Y,
528
528
  {
529
- active: R && S,
530
- frame: Math.floor(T),
529
+ active: q && S,
530
+ frame: Math.floor(b),
531
531
  children: /* @__PURE__ */ o(
532
- L,
532
+ M,
533
533
  {
534
- from: Math.floor(h),
535
- durationInFrames: $ + F,
536
- ...v,
537
- name: v.name || "<TS.Sequence>",
534
+ from: Math.floor(m),
535
+ durationInFrames: w + v,
536
+ ...F,
537
+ name: F.name || "<TS.Sequence>",
538
538
  children: /* @__PURE__ */ o(
539
539
  I,
540
540
  {
541
541
  passedProps: x.props ?? {},
542
542
  presentationDirection: "exiting",
543
- presentationProgress: U,
544
- presentationDurationInFrames: p.props.timing.getDurationInFrames(
545
- { fps: e }
543
+ presentationProgress: O,
544
+ presentationDurationInFrames: g.props.timing.getDurationInFrames(
545
+ { fps: t }
546
546
  ),
547
547
  onElementImage: () => {
548
548
  },
@@ -552,7 +552,7 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
552
552
  children: /* @__PURE__ */ o(
553
553
  G,
554
554
  {
555
- presentationProgress: U,
555
+ presentationProgress: O,
556
556
  children: a
557
557
  }
558
558
  )
@@ -566,196 +566,157 @@ const nt = M.createContext(null), rt = M.createContext(null), K = ({ presentatio
566
566
  );
567
567
  }
568
568
  return /* @__PURE__ */ o(
569
- L,
569
+ M,
570
570
  {
571
- from: Math.floor(h),
572
- durationInFrames: $,
573
- ...v,
574
- name: v.name || "<TS.Sequence>",
571
+ from: Math.floor(m),
572
+ durationInFrames: w,
573
+ ...F,
574
+ name: F.name || "<TS.Sequence>",
575
575
  children: a
576
576
  },
577
577
  i
578
578
  );
579
579
  });
580
- }, [n, e, t]);
581
- return /* @__PURE__ */ o(tt, { children: r });
582
- }, w = ({ children: n, name: e, layout: t, ...r }) => /* @__PURE__ */ o(L, { name: e ?? "<TransitionSeries>", layout: t ?? "absolute-fill", ...r, children: /* @__PURE__ */ o(Mt, { children: n }) });
583
- w.Sequence = _;
584
- w.Transition = N;
585
- Z.addSequenceStackTraces(w);
586
- Z.addSequenceStackTraces(_);
587
- const ce = () => {
588
- const n = M.useContext(nt), e = M.useContext(rt);
589
- return !n && !e ? {
580
+ }, [n, t, e]);
581
+ return /* @__PURE__ */ o(ee, { children: r });
582
+ }, 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 }) });
583
+ y.Sequence = z;
584
+ y.Transition = L;
585
+ Z.addSequenceStackTraces(y);
586
+ Z.addSequenceStackTraces(z);
587
+ const lt = () => {
588
+ const n = C.useContext(ne), t = C.useContext(re);
589
+ return !n && !t ? {
590
590
  isInTransitionSeries: !1,
591
591
  entering: 1,
592
592
  exiting: 0
593
593
  } : {
594
594
  isInTransitionSeries: !0,
595
595
  entering: (n == null ? void 0 : n.enteringProgress) ?? 1,
596
- exiting: (e == null ? void 0 : e.exitingProgress) ?? 0
596
+ exiting: (t == null ? void 0 : t.exitingProgress) ?? 0
597
597
  };
598
- }, Lt = ({
598
+ }, Le = ({
599
599
  children: n,
600
- presentationDirection: e,
601
- presentationProgress: t,
600
+ presentationDirection: t,
601
+ presentationProgress: e,
602
602
  passedProps: r
603
603
  }) => {
604
- const l = Math.sqrt(r.width ** 2 + r.height ** 2) / 2 * t, c = Wt(
604
+ const l = Math.sqrt(r.width ** 2 + r.height ** 2) / 2 * e, u = Be(
605
605
  r.width / 2,
606
606
  r.height / 2,
607
607
  l
608
- ), [a] = B(() => String(W(null))), i = g(() => ({
609
- width: "100%",
610
- height: "100%",
611
- clipPath: e === "exiting" ? void 0 : `url(#${a})`
612
- }), [a, e]);
613
- return /* @__PURE__ */ C(u, { children: [
614
- /* @__PURE__ */ o(u, { style: i, children: n }),
615
- e === "exiting" ? null : /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o("svg", { width: r.width, height: r.height, children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: a, children: /* @__PURE__ */ o("path", { d: c, fill: "black" }) }) }) }) })
616
- ] });
617
- }, Nt = (n) => ({ component: Lt, props: n }), Wt = (n, e, t) => `M ${n}, ${e}
618
- m -${t}, 0
619
- a ${t},${t} 0 1,0 ${t * 2},0
620
- a ${t},${t} 0 1,0 -${t * 2},0`, Bt = ({
621
- children: n,
622
- presentationDirection: e,
623
- presentationProgress: t,
624
- passedProps: r
625
- }) => {
626
- const { width: s, height: l } = r, c = -s * 0.35, a = l * 0.52, i = Math.sqrt((s - c) ** 2 + Math.max(a, l - a) ** 2), d = s * 0.3, m = d + (i - d + s * 0.1) * t, [y] = B(() => String(W(null))), f = Math.max(3, Math.round(s * 7e-3)), p = Math.max(0, m - f / 2), A = g(() => ({
608
+ ), [a] = A(() => String(B(null))), i = h(() => ({
627
609
  width: "100%",
628
610
  height: "100%",
629
- clipPath: e === "exiting" ? void 0 : `url(#${y})`
630
- }), [y, e]);
631
- return /* @__PURE__ */ C(u, { children: [
632
- /* @__PURE__ */ o(u, { style: A, children: n }),
633
- e === "exiting" ? null : /* @__PURE__ */ o(u, { style: { pointerEvents: "none" }, children: /* @__PURE__ */ C(
634
- "svg",
635
- {
636
- width: s,
637
- height: l,
638
- style: { position: "absolute", inset: 0, width: "100%", height: "100%" },
639
- children: [
640
- /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: y, children: /* @__PURE__ */ o("circle", { cx: c, cy: a, r: m, fill: "black" }) }) }),
641
- t > 0 && t < 1 && /* @__PURE__ */ o(
642
- "circle",
643
- {
644
- cx: c,
645
- cy: a,
646
- r: p,
647
- fill: "none",
648
- stroke: "#1e3a8a",
649
- strokeWidth: f
650
- }
651
- )
652
- ]
653
- }
654
- ) })
611
+ clipPath: t === "exiting" ? void 0 : `url(#${a})`
612
+ }), [a, t]);
613
+ return /* @__PURE__ */ W(c, { children: [
614
+ /* @__PURE__ */ o(c, { style: i, children: n }),
615
+ 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" }) }) }) }) })
655
616
  ] });
656
- }, ue = (n) => ({
657
- component: Bt,
658
- props: n
659
- }), At = ({
617
+ }, Ne = (n) => ({ component: Le, props: n }), Be = (n, t, e) => `M ${n}, ${t}
618
+ m -${e}, 0
619
+ a ${e},${e} 0 1,0 ${e * 2},0
620
+ a ${e},${e} 0 1,0 -${e * 2},0`, We = ({
660
621
  children: n,
661
- presentationDirection: e,
662
- presentationProgress: t,
622
+ presentationDirection: t,
623
+ presentationProgress: e,
663
624
  passedProps: r
664
625
  }) => {
665
- const { width: s, height: l } = r, c = s * t, a = l * t, i = s / 2 - c / 2, d = l / 2 - a / 2, [m] = B(() => String(W(null))), y = g(() => ({
626
+ 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(() => ({
666
627
  width: "100%",
667
628
  height: "100%",
668
- clipPath: e === "exiting" ? void 0 : `url(#${m})`
669
- }), [m, e]);
670
- return /* @__PURE__ */ C(u, { children: [
671
- /* @__PURE__ */ o(u, { style: y, children: n }),
672
- e === "exiting" ? null : /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: m, children: /* @__PURE__ */ o(
629
+ clipPath: t === "exiting" ? void 0 : `url(#${d})`
630
+ }), [d, t]);
631
+ return /* @__PURE__ */ W(c, { children: [
632
+ /* @__PURE__ */ o(c, { style: $, children: n }),
633
+ t === "exiting" ? null : /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: d, children: /* @__PURE__ */ o(
673
634
  "rect",
674
635
  {
675
636
  x: i,
676
- y: d,
677
- width: c,
637
+ y: f,
638
+ width: u,
678
639
  height: a,
679
640
  fill: "black"
680
641
  }
681
642
  ) }) }) }) })
682
643
  ] });
683
- }, Xt = (n) => ({ component: At, props: n }), Ot = ({
644
+ }, Ae = (n) => ({ component: We, props: n }), Xe = ({
684
645
  children: n,
685
- presentationDirection: e,
686
- presentationProgress: t,
646
+ presentationDirection: t,
647
+ presentationProgress: e,
687
648
  passedProps: r
688
649
  }) => {
689
- const s = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, l = s * t, c = s * 2 * t, { path: a } = gt({
650
+ const s = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, l = s * e, u = s * 2 * e, { path: a } = ge({
690
651
  innerRadius: l,
691
- outerRadius: c,
652
+ outerRadius: u,
692
653
  points: 5
693
- }), i = pt(a), d = et(
654
+ }), i = he(a), f = te(
694
655
  a,
695
656
  r.width / 2 - i.width / 2,
696
657
  r.height / 2 - i.height / 2
697
- ), [m] = B(() => String(W(null))), y = g(() => ({
658
+ ), [d] = A(() => String(B(null))), $ = h(() => ({
698
659
  width: "100%",
699
660
  height: "100%",
700
- clipPath: e === "exiting" ? void 0 : `url(#${m})`
701
- }), [m, e]);
702
- return /* @__PURE__ */ C(u, { children: [
703
- /* @__PURE__ */ o(u, { style: y, children: n }),
704
- e === "exiting" ? null : /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: m, children: /* @__PURE__ */ o("path", { d, fill: "black" }) }) }) }) })
661
+ clipPath: t === "exiting" ? void 0 : `url(#${d})`
662
+ }), [d, t]);
663
+ return /* @__PURE__ */ W(c, { children: [
664
+ /* @__PURE__ */ o(c, { style: $, children: n }),
665
+ 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" }) }) }) }) })
705
666
  ] });
706
- }, Ut = (n) => ({ component: Ot, props: n }), Yt = ({
667
+ }, Oe = (n) => ({ component: Xe, props: n }), Ue = ({
707
668
  children: n,
708
- presentationDirection: e,
709
- presentationProgress: t,
669
+ presentationDirection: t,
670
+ presentationProgress: e,
710
671
  passedProps: r
711
672
  }) => {
712
- const { width: s, height: l } = r, c = s * t, a = s / 2 - c / 2, [i] = B(() => String(W(null))), d = g(() => ({
673
+ const { width: s, height: l } = r, u = s * e, a = s / 2 - u / 2, [i] = A(() => String(B(null))), f = h(() => ({
713
674
  width: "100%",
714
675
  height: "100%",
715
- clipPath: e === "exiting" ? void 0 : `url(#${i})`
716
- }), [i, e]);
717
- return /* @__PURE__ */ C(u, { children: [
718
- /* @__PURE__ */ o(u, { style: d, children: n }),
719
- e === "exiting" ? null : /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: i, children: /* @__PURE__ */ o(
676
+ clipPath: t === "exiting" ? void 0 : `url(#${i})`
677
+ }), [i, t]);
678
+ return /* @__PURE__ */ W(c, { children: [
679
+ /* @__PURE__ */ o(c, { style: f, children: n }),
680
+ t === "exiting" ? null : /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o("svg", { children: /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: i, children: /* @__PURE__ */ o(
720
681
  "rect",
721
682
  {
722
683
  x: a,
723
684
  y: 0,
724
- width: c,
685
+ width: u,
725
686
  height: l,
726
687
  fill: "black"
727
688
  }
728
689
  ) }) }) }) })
729
690
  ] });
730
- }, zt = (n) => ({ component: Yt, props: n });
731
- var Dt = ({ children: n, presentationDirection: e, presentationProgress: t, passedProps: r }) => {
732
- const s = e === "entering", l = g(() => ({
733
- opacity: s ? t : r.shouldFadeOutExitingScene ? 1 - t : 1,
734
- ...e === "entering" ? r.enterStyle : r.exitStyle
691
+ }, Ye = (n) => ({ component: Ue, props: n });
692
+ var De = ({ children: n, presentationDirection: t, presentationProgress: e, passedProps: r }) => {
693
+ const s = t === "entering", l = h(() => ({
694
+ opacity: s ? e : r.shouldFadeOutExitingScene ? 1 - e : 1,
695
+ ...t === "entering" ? r.enterStyle : r.exitStyle
735
696
  }), [
736
697
  s,
737
698
  r.enterStyle,
738
699
  r.exitStyle,
739
700
  r.shouldFadeOutExitingScene,
740
- e,
741
- t
701
+ t,
702
+ e
742
703
  ]);
743
- return /* @__PURE__ */ o(u, {
704
+ return /* @__PURE__ */ o(c, {
744
705
  style: l,
745
706
  children: n
746
707
  });
747
708
  }, Q = (n) => ({
748
- component: Dt,
709
+ component: De,
749
710
  props: n ?? {}
750
- }), _t = 0.01, jt = ({
711
+ }), ze = 0.01, _e = ({
751
712
  children: n,
752
- presentationProgress: e,
753
- presentationDirection: t,
713
+ presentationProgress: t,
714
+ presentationDirection: e,
754
715
  passedProps: { direction: r = "from-left", enterStyle: s, exitStyle: l }
755
716
  }) => {
756
- const c = g(() => {
757
- const i = e === 1 ? e * 100 : e * 100 - _t;
758
- if (t === "exiting")
717
+ const u = h(() => {
718
+ const i = t === 1 ? t * 100 : t * 100 - ze;
719
+ if (e === "exiting")
759
720
  switch (r) {
760
721
  case "from-left":
761
722
  return {
@@ -763,7 +724,7 @@ var Dt = ({ children: n, presentationDirection: e, presentationProgress: t, pass
763
724
  };
764
725
  case "from-right":
765
726
  return {
766
- transform: `translateX(${-e * 100}%)`
727
+ transform: `translateX(${-t * 100}%)`
767
728
  };
768
729
  case "from-top":
769
730
  return {
@@ -771,7 +732,7 @@ var Dt = ({ children: n, presentationDirection: e, presentationProgress: t, pass
771
732
  };
772
733
  case "from-bottom":
773
734
  return {
774
- transform: `translateY(${-e * 100}%)`
735
+ transform: `translateY(${-t * 100}%)`
775
736
  };
776
737
  default:
777
738
  throw new Error(`Invalid direction: ${r}`);
@@ -779,7 +740,7 @@ var Dt = ({ children: n, presentationDirection: e, presentationProgress: t, pass
779
740
  switch (r) {
780
741
  case "from-left":
781
742
  return {
782
- transform: `translateX(${-100 + e * 100}%)`
743
+ transform: `translateX(${-100 + t * 100}%)`
783
744
  };
784
745
  case "from-right":
785
746
  return {
@@ -787,7 +748,7 @@ var Dt = ({ children: n, presentationDirection: e, presentationProgress: t, pass
787
748
  };
788
749
  case "from-top":
789
750
  return {
790
- transform: `translateY(${-100 + e * 100}%)`
751
+ transform: `translateY(${-100 + t * 100}%)`
791
752
  };
792
753
  case "from-bottom":
793
754
  return {
@@ -796,265 +757,264 @@ var Dt = ({ children: n, presentationDirection: e, presentationProgress: t, pass
796
757
  default:
797
758
  throw new Error(`Invalid direction: ${r}`);
798
759
  }
799
- }, [t, e, r]), a = g(() => ({
760
+ }, [e, t, r]), a = h(() => ({
800
761
  width: "100%",
801
762
  height: "100%",
802
763
  justifyContent: "center",
803
764
  alignItems: "center",
804
- ...c,
805
- ...t === "entering" ? s : l
806
- }), [c, s, l, t]);
807
- return /* @__PURE__ */ o(u, {
765
+ ...u,
766
+ ...e === "entering" ? s : l
767
+ }), [u, s, l, e]);
768
+ return /* @__PURE__ */ o(c, {
808
769
  style: a,
809
770
  children: n
810
771
  });
811
- }, Vt = (n) => ({
812
- component: jt,
772
+ }, je = (n) => ({
773
+ component: _e,
813
774
  props: n ?? {}
814
- }), Ht = (n, e) => {
815
- const t = n * 100;
816
- switch (e) {
775
+ }), Ve = (n, t) => {
776
+ const e = n * 100;
777
+ switch (t) {
817
778
  case "from-left":
818
- return `polygon(0% 0%, ${t}% 0%, ${t}% 100%, 0% 100%)`;
779
+ return `polygon(0% 0%, ${e}% 0%, ${e}% 100%, 0% 100%)`;
819
780
  case "from-top-left":
820
- return `polygon(0% 0%, ${t * 2}% 0%, 0% ${t * 2}%)`;
781
+ return `polygon(0% 0%, ${e * 2}% 0%, 0% ${e * 2}%)`;
821
782
  case "from-top":
822
- return `polygon(0% 0%, 100% 0%, 100% ${t}%, 0% ${t}%)`;
783
+ return `polygon(0% 0%, 100% 0%, 100% ${e}%, 0% ${e}%)`;
823
784
  case "from-top-right":
824
- return `polygon(100% 0%, ${100 - t * 2}% 0%, 100% ${t * 2}%)`;
785
+ return `polygon(100% 0%, ${100 - e * 2}% 0%, 100% ${e * 2}%)`;
825
786
  case "from-right":
826
- return `polygon(100% 0%, 100% 100%, ${100 - t}% 100%, ${100 - t}% 0%)`;
787
+ return `polygon(100% 0%, 100% 100%, ${100 - e}% 100%, ${100 - e}% 0%)`;
827
788
  case "from-bottom-right":
828
- return `polygon(100% 100%, ${100 - t * 2}% 100%, 100% ${100 - t * 2}%)`;
789
+ return `polygon(100% 100%, ${100 - e * 2}% 100%, 100% ${100 - e * 2}%)`;
829
790
  case "from-bottom":
830
- return `polygon(0% 100%, 100% 100%, 100% ${100 - t}%, 0% ${100 - t}%)`;
791
+ return `polygon(0% 100%, 100% 100%, 100% ${100 - e}%, 0% ${100 - e}%)`;
831
792
  case "from-bottom-left":
832
- return `polygon(0% 100%, 0% ${100 - t * 2}%, ${t * 2}% 100%)`;
793
+ return `polygon(0% 100%, 0% ${100 - e * 2}%, ${e * 2}% 100%)`;
833
794
  default:
834
- throw new Error(`Unknown direction ${JSON.stringify(e)}`);
795
+ throw new Error(`Unknown direction ${JSON.stringify(t)}`);
835
796
  }
836
- }, Jt = (n, e) => {
837
- const t = n * 100;
838
- switch (e) {
797
+ }, He = (n, t) => {
798
+ const e = n * 100;
799
+ switch (t) {
839
800
  case "from-left":
840
- return `polygon(100% 100%, ${100 - t}% 100%, ${100 - t}% 0%, 100% 0%)`;
801
+ return `polygon(100% 100%, ${100 - e}% 100%, ${100 - e}% 0%, 100% 0%)`;
841
802
  case "from-top-left":
842
- return `polygon(100% 100%, ${100 - t * 2}% 100%, 100% ${100 - t * 2}%)`;
803
+ return `polygon(100% 100%, ${100 - e * 2}% 100%, 100% ${100 - e * 2}%)`;
843
804
  case "from-top":
844
- return `polygon(100% 100%, 0% 100%, 0% ${100 - t}%, 100% ${100 - t}%)`;
805
+ return `polygon(100% 100%, 0% 100%, 0% ${100 - e}%, 100% ${100 - e}%)`;
845
806
  case "from-top-right":
846
- return `polygon(0% 100%, ${t * 2}% 100%, 0% ${100 - t * 2}%)`;
807
+ return `polygon(0% 100%, ${e * 2}% 100%, 0% ${100 - e * 2}%)`;
847
808
  case "from-right":
848
- return `polygon(0% 0%, ${t}% 0%, ${t}% 100%, 0% 100%)`;
809
+ return `polygon(0% 0%, ${e}% 0%, ${e}% 100%, 0% 100%)`;
849
810
  case "from-bottom-right":
850
- return `polygon(0% 0%, ${t * 2}% 0%, 0% ${t * 2}%)`;
811
+ return `polygon(0% 0%, ${e * 2}% 0%, 0% ${e * 2}%)`;
851
812
  case "from-bottom":
852
- return `polygon(100% 0%, 0% 0%, 0% ${t}%, 100% ${t}%)`;
813
+ return `polygon(100% 0%, 0% 0%, 0% ${e}%, 100% ${e}%)`;
853
814
  case "from-bottom-left":
854
- return `polygon(100% 0%, ${100 - t * 2}% 0%, 100% ${t * 2}%)`;
815
+ return `polygon(100% 0%, ${100 - e * 2}% 0%, 100% ${e * 2}%)`;
855
816
  default:
856
- throw new Error(`Unknown direction ${JSON.stringify(e)}`);
817
+ throw new Error(`Unknown direction ${JSON.stringify(t)}`);
857
818
  }
858
- }, Kt = ({
819
+ }, Je = ({
859
820
  children: n,
860
- presentationProgress: e,
861
- presentationDirection: t,
821
+ presentationProgress: t,
822
+ presentationDirection: e,
862
823
  passedProps: {
863
824
  direction: r = "from-left",
864
825
  innerEnterStyle: s,
865
826
  innerExitStyle: l,
866
- outerEnterStyle: c,
827
+ outerEnterStyle: u,
867
828
  outerExitStyle: a
868
829
  }
869
830
  }) => {
870
- const i = t === "entering" ? e : 1 - e, d = t === "entering" ? Ht(i, r) : Jt(i, r), m = g(() => ({
831
+ const i = e === "entering" ? t : 1 - t, f = e === "entering" ? Ve(i, r) : He(i, r), d = h(() => ({
871
832
  width: "100%",
872
833
  height: "100%",
873
834
  justifyContent: "center",
874
835
  alignItems: "center",
875
- clipPath: d,
876
- ...t === "entering" ? s : l
877
- }), [d, s, l, t]), y = g(() => t === "entering" ? c : a, [c, a, t]);
878
- return /* @__PURE__ */ o(u, {
879
- style: y,
880
- children: /* @__PURE__ */ o(u, {
881
- style: m,
836
+ clipPath: f,
837
+ ...e === "entering" ? s : l
838
+ }), [f, s, l, e]), $ = h(() => e === "entering" ? u : a, [u, a, e]);
839
+ return /* @__PURE__ */ o(c, {
840
+ style: $,
841
+ children: /* @__PURE__ */ o(c, {
842
+ style: d,
882
843
  children: n
883
844
  })
884
845
  });
885
- }, Gt = (n) => ({
886
- component: Kt,
846
+ }, Ke = (n) => ({
847
+ component: Je,
887
848
  props: n ?? {}
888
- }), Qt = ({
849
+ }), Ge = ({
889
850
  children: n,
890
- presentationDirection: e,
891
- presentationProgress: t,
851
+ presentationDirection: t,
852
+ presentationProgress: e,
892
853
  passedProps: {
893
854
  direction: r = "from-left",
894
855
  perspective: s = 1e3,
895
856
  innerEnterStyle: l,
896
- innerExitStyle: c,
857
+ innerExitStyle: u,
897
858
  outerEnterStyle: a,
898
859
  outerExitStyle: i
899
860
  }
900
861
  }) => {
901
- const d = g(() => {
902
- const p = e === "entering" ? D(t, [0, 1], [r === "from-right" || r === "from-top" ? 180 : -180, 0]) : D(t, [0, 1], [0, r === "from-right" || r === "from-top" ? -180 : 180]);
862
+ const f = h(() => {
863
+ 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]);
903
864
  return {
904
865
  width: "100%",
905
866
  height: "100%",
906
- transform: `${r === "from-top" || r === "from-bottom" ? "rotateX" : "rotateY"}(${p}deg)`,
867
+ transform: `${r === "from-top" || r === "from-bottom" ? "rotateX" : "rotateY"}(${g}deg)`,
907
868
  backfaceVisibility: "hidden",
908
869
  WebkitBackfaceVisibility: "hidden",
909
- ...e === "entering" ? l : c
870
+ ...t === "entering" ? l : u
910
871
  };
911
872
  }, [
912
873
  r,
913
874
  l,
914
- c,
915
- e,
916
- t
917
- ]), m = g(() => ({
875
+ u,
876
+ t,
877
+ e
878
+ ]), d = h(() => ({
918
879
  perspective: s,
919
880
  transformStyle: "preserve-3d",
920
- ...e === "entering" ? a : i
921
- }), [a, i, s, e]);
922
- return /* @__PURE__ */ o(u, {
923
- style: m,
924
- children: /* @__PURE__ */ o(u, {
925
- style: d,
881
+ ...t === "entering" ? a : i
882
+ }), [a, i, s, t]);
883
+ return /* @__PURE__ */ o(c, {
884
+ style: d,
885
+ children: /* @__PURE__ */ o(c, {
886
+ style: f,
926
887
  children: n
927
888
  })
928
889
  });
929
- }, Zt = (n) => ({ component: Qt, props: n ?? {} }), te = ({ children: n, presentationDirection: e, presentationProgress: t, passedProps: r }) => {
930
- const s = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, { path: l } = yt({
890
+ }, Qe = (n) => ({ component: Ge, props: n ?? {} }), Ze = ({ children: n, presentationDirection: t, presentationProgress: e, passedProps: r }) => {
891
+ const s = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, { path: l } = ye({
931
892
  radius: s,
932
- progress: t
933
- }), c = et(l, -(s * 2 - r.width) / 2, -(s * 2 - r.height) / 2), a = g(() => ({
893
+ progress: e
894
+ }), u = te(l, -(s * 2 - r.width) / 2, -(s * 2 - r.height) / 2), a = h(() => ({
934
895
  width: "100%",
935
896
  height: "100%",
936
- clipPath: e === "exiting" ? void 0 : `path("${c}")`,
937
- ...e === "entering" ? r.innerEnterStyle : r.innerExitStyle
897
+ clipPath: t === "exiting" ? void 0 : `path("${u}")`,
898
+ ...t === "entering" ? r.innerEnterStyle : r.innerExitStyle
938
899
  }), [
939
- c,
900
+ u,
940
901
  r.innerEnterStyle,
941
902
  r.innerExitStyle,
942
- e
943
- ]), i = g(() => e === "entering" ? r.outerEnterStyle : r.outerExitStyle, [
903
+ t
904
+ ]), i = h(() => t === "entering" ? r.outerEnterStyle : r.outerExitStyle, [
944
905
  r.outerEnterStyle,
945
906
  r.outerExitStyle,
946
- e
907
+ t
947
908
  ]);
948
- return /* @__PURE__ */ o(u, {
909
+ return /* @__PURE__ */ o(c, {
949
910
  style: i,
950
- children: /* @__PURE__ */ o(u, {
911
+ children: /* @__PURE__ */ o(c, {
951
912
  style: a,
952
913
  children: n
953
914
  })
954
915
  });
955
- }, ee = (n) => ({ component: te, props: n ?? {} });
956
- const me = {
916
+ }, et = (n) => ({ component: Ze, props: n ?? {} });
917
+ const ut = {
957
918
  none: ({ id: n }) => /* @__PURE__ */ o(
958
- w.Transition,
919
+ y.Transition,
959
920
  {
960
921
  presentation: Q(),
961
- timing: b({ durationInFrames: 1 })
922
+ timing: T({ durationInFrames: 1 })
962
923
  },
963
924
  n
964
925
  ),
965
- fade: ({ durationInFrames: n, id: e }) => /* @__PURE__ */ o(
966
- w.Transition,
926
+ fade: ({ durationInFrames: n, id: t }) => /* @__PURE__ */ o(
927
+ y.Transition,
967
928
  {
968
929
  presentation: Q(),
969
- timing: b({ durationInFrames: n })
930
+ timing: T({ durationInFrames: n })
970
931
  },
971
- e
932
+ t
972
933
  ),
973
- slide: ({ durationInFrames: n, id: e, direction: t }) => /* @__PURE__ */ o(
974
- w.Transition,
934
+ slide: ({ durationInFrames: n, id: t, direction: e }) => /* @__PURE__ */ o(
935
+ y.Transition,
975
936
  {
976
- presentation: Vt({ direction: t }),
977
- timing: b({ durationInFrames: n })
937
+ presentation: je({ direction: e }),
938
+ timing: T({ durationInFrames: n })
978
939
  },
979
- e
940
+ t
980
941
  ),
981
- wipe: ({ durationInFrames: n, id: e, direction: t }) => /* @__PURE__ */ o(
982
- w.Transition,
942
+ wipe: ({ durationInFrames: n, id: t, direction: e }) => /* @__PURE__ */ o(
943
+ y.Transition,
983
944
  {
984
- presentation: Gt({ direction: t }),
985
- timing: b({ durationInFrames: n })
945
+ presentation: Ke({ direction: e }),
946
+ timing: T({ durationInFrames: n })
986
947
  },
987
- e
948
+ t
988
949
  ),
989
- flip: ({ durationInFrames: n, id: e }) => /* @__PURE__ */ o(
990
- w.Transition,
950
+ flip: ({ durationInFrames: n, id: t }) => /* @__PURE__ */ o(
951
+ y.Transition,
991
952
  {
992
- presentation: Zt(),
993
- timing: b({ durationInFrames: n })
953
+ presentation: Qe(),
954
+ timing: T({ durationInFrames: n })
994
955
  },
995
- e
956
+ t
996
957
  ),
997
- clockWipe: ({ width: n, height: e, durationInFrames: t, id: r }) => /* @__PURE__ */ o(
998
- w.Transition,
958
+ clockWipe: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
959
+ y.Transition,
999
960
  {
1000
- presentation: ee({ width: n, height: e }),
1001
- timing: b({ durationInFrames: t })
961
+ presentation: et({ width: n, height: t }),
962
+ timing: T({ durationInFrames: e })
1002
963
  },
1003
964
  r
1004
965
  ),
1005
- star: ({ width: n, height: e, durationInFrames: t, id: r }) => /* @__PURE__ */ o(
1006
- w.Transition,
966
+ star: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
967
+ y.Transition,
1007
968
  {
1008
- presentation: Ut({ width: n, height: e }),
1009
- timing: b({ durationInFrames: t })
969
+ presentation: Oe({ width: n, height: t }),
970
+ timing: T({ durationInFrames: e })
1010
971
  },
1011
972
  r
1012
973
  ),
1013
- circle: ({ width: n, height: e, durationInFrames: t, id: r }) => /* @__PURE__ */ o(
1014
- w.Transition,
974
+ circle: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
975
+ y.Transition,
1015
976
  {
1016
- presentation: Nt({ width: n, height: e }),
1017
- timing: b({ durationInFrames: t })
977
+ presentation: Ne({ width: n, height: t }),
978
+ timing: T({ durationInFrames: e })
1018
979
  },
1019
980
  r
1020
981
  ),
1021
- rectangle: ({ width: n, height: e, durationInFrames: t, id: r }) => /* @__PURE__ */ o(
1022
- w.Transition,
982
+ rectangle: ({ width: n, height: t, durationInFrames: e, id: r }) => /* @__PURE__ */ o(
983
+ y.Transition,
1023
984
  {
1024
- presentation: Xt({ width: n, height: e }),
1025
- timing: b({ durationInFrames: t })
985
+ presentation: Ae({ width: n, height: t }),
986
+ timing: T({ durationInFrames: e })
1026
987
  },
1027
988
  r
1028
989
  ),
1029
990
  slidingDoors: ({
1030
991
  width: n,
1031
- height: e,
1032
- durationInFrames: t,
992
+ height: t,
993
+ durationInFrames: e,
1033
994
  id: r
1034
995
  }) => /* @__PURE__ */ o(
1035
- w.Transition,
996
+ y.Transition,
1036
997
  {
1037
- presentation: zt({ width: n, height: e }),
1038
- timing: b({ durationInFrames: t })
998
+ presentation: Ye({ width: n, height: t }),
999
+ timing: T({ durationInFrames: e })
1039
1000
  },
1040
1001
  r
1041
1002
  )
1042
1003
  };
1043
1004
  export {
1044
- w as TransitionSeries,
1045
- me as Transitions,
1046
- Nt as circle,
1047
- ue as circleReveal,
1048
- ee as clockWipe,
1005
+ y as TransitionSeries,
1006
+ ut as Transitions,
1007
+ Ne as circle,
1008
+ et as clockWipe,
1049
1009
  Q as fade,
1050
- Zt as flip,
1051
- b as linearTiming,
1052
- Xt as rectangle,
1053
- Vt as slide,
1054
- zt as slidingDoors,
1055
- le as springTiming,
1056
- Ut as star,
1057
- ce as useTransitionProgress,
1058
- Gt as wipe
1010
+ Qe as flip,
1011
+ T as linearTiming,
1012
+ Ae as rectangle,
1013
+ je as slide,
1014
+ Ye as slidingDoors,
1015
+ at as springTiming,
1016
+ Oe as star,
1017
+ lt as useTransitionProgress,
1018
+ Ke as wipe
1059
1019
  };
1060
1020
  //# sourceMappingURL=index.es.js.map