@acrool/react-picker
Version:
This is a react method to quickly combine buttons with Picker
1,681 lines • 191 kB
JavaScript
import * as wn from "react";
import ki, { createContext as Pt, useContext as _, useRef as Y, useLayoutEffect as ho, useEffect as rt, useId as Pn, useInsertionEffect as Li, useMemo as wt, useCallback as q, Children as fo, isValidElement as mo, useState as Ct, forwardRef as Re, Fragment as Oi, createElement as po, Component as go } from "react";
import yo from "react-dom";
var it = /* @__PURE__ */ ((t) => (t.bottom = "bottom", t.top = "top", t))(it || {}), Wt = /* @__PURE__ */ ((t) => (t.left = "left", t.right = "right", t))(Wt || {});
const ae = [
"color: #fff",
"display: inline-block",
"font-size: 11px",
"line-height: 20px",
"padding-right: 8px",
"border-radius: 4px"
], le = {
primary: "#0055a9",
success: "#009422",
info: "#17a2b8",
warning: "#d7a000",
danger: "#ec2127"
};
function ce(t, e, ...n) {
console.log(`%c ${t}`, e, ...n);
}
function vo(t, ...e) {
const n = ae.concat([
`background-color: ${le.primary}`
]).join(";");
ce(t, n, ...e);
}
function xo(t, ...e) {
const n = ae.concat([
`background-color: ${le.success}`
]).join(";");
ce(t, n, ...e);
}
function To(t, ...e) {
const n = ae.concat([
`background-color: ${le.info}`
]).join(";");
ce(t, n, ...e);
}
function bo(t, ...e) {
const n = ae.concat([
`background-color: ${le.warning}`
]).join(";");
ce(t, n, ...e);
}
function wo(t, ...e) {
const n = ae.concat([
`background-color: ${le.danger}`
]).join(";");
ce(t, n, ...e);
}
const ct = {
primary: vo,
success: xo,
info: To,
warning: bo,
danger: wo
}, Sn = Pt({
hide: () => ct.warning("No hide method detected, did you embed your app with Acrool/PickerPortal?"),
show: () => ct.warning("No show method detected, did you embed your app with Acrool/PickerPortal?"),
toggle: () => ct.warning("No toggle method detected, did you embed your app with Acrool/PickerPortal?"),
isVisible: !1,
inputFocus: () => ct.warning("No focus method detected, did you embed your app with Acrool/PickerPortal?"),
inputBlur: () => ct.warning("No blur method detected, did you embed your app with Acrool/PickerPortal?"),
isInputFocus: !1,
onChange: () => ct.warning("No onChange method detected, did you embed your app with Acrool/PickerPortal?"),
vertical: it.bottom,
setVertical: () => ct.warning("No onChange method detected, did you embed your app with Acrool/PickerPortal?")
}), Eh = Sn.Consumer, Po = () => _(Sn);
var tn = { exports: {} }, _t = {};
/**
* @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 ls;
function So() {
if (ls)
return _t;
ls = 1;
var t = Symbol.for("react.transitional.element"), e = Symbol.for("react.fragment");
function n(s, i, o) {
var r = null;
if (o !== void 0 && (r = "" + o), i.key !== void 0 && (r = "" + i.key), "key" in i) {
o = {};
for (var a in i)
a !== "key" && (o[a] = i[a]);
} else
o = i;
return i = o.ref, {
$$typeof: t,
type: s,
key: r,
ref: i !== void 0 ? i : null,
props: o
};
}
return _t.Fragment = e, _t.jsx = n, _t.jsxs = n, _t;
}
var Ut = {};
/**
* @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 cs;
function Ao() {
return cs || (cs = 1, process.env.NODE_ENV !== "production" && function() {
function t(g) {
if (g == null)
return null;
if (typeof g == "function")
return g.$$typeof === B ? null : g.displayName || g.name || null;
if (typeof g == "string")
return g;
switch (g) {
case y:
return "Fragment";
case m:
return "Profiler";
case v:
return "StrictMode";
case x:
return "Suspense";
case P:
return "SuspenseList";
case j:
return "Activity";
}
if (typeof g == "object")
switch (typeof g.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), g.$$typeof) {
case p:
return "Portal";
case b:
return (g.displayName || "Context") + ".Provider";
case T:
return (g._context.displayName || "Context") + ".Consumer";
case V:
var A = g.render;
return g = g.displayName, g || (g = A.displayName || A.name || "", g = g !== "" ? "ForwardRef(" + g + ")" : "ForwardRef"), g;
case D:
return A = g.displayName || null, A !== null ? A : t(g.type) || "Memo";
case S:
A = g._payload, g = g._init;
try {
return t(g(A));
} catch {
}
}
return null;
}
function e(g) {
return "" + g;
}
function n(g) {
try {
e(g);
var A = !1;
} catch {
A = !0;
}
if (A) {
A = console;
var k = A.error, U = typeof Symbol == "function" && Symbol.toStringTag && g[Symbol.toStringTag] || g.constructor.name || "Object";
return k.call(
A,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
U
), e(g);
}
}
function s(g) {
if (g === y)
return "<>";
if (typeof g == "object" && g !== null && g.$$typeof === S)
return "<...>";
try {
var A = t(g);
return A ? "<" + A + ">" : "<...>";
} catch {
return "<...>";
}
}
function i() {
var g = K.A;
return g === null ? null : g.getOwner();
}
function o() {
return Error("react-stack-top-frame");
}
function r(g) {
if (pt.call(g, "key")) {
var A = Object.getOwnPropertyDescriptor(g, "key").get;
if (A && A.isReactWarning)
return !1;
}
return g.key !== void 0;
}
function a(g, A) {
function k() {
Nt || (Nt = !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)",
A
));
}
k.isReactWarning = !0, Object.defineProperty(g, "key", {
get: k,
configurable: !0
});
}
function l() {
var g = t(this.type);
return R[g] || (R[g] = !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."
)), g = this.props.ref, g !== void 0 ? g : null;
}
function u(g, A, k, U, lt, tt, Ie, Ne) {
return k = tt.ref, g = {
$$typeof: d,
type: g,
key: A,
props: tt,
_owner: lt
}, (k !== void 0 ? k : null) !== null ? Object.defineProperty(g, "ref", {
enumerable: !1,
get: l
}) : Object.defineProperty(g, "ref", { enumerable: !1, value: null }), g._store = {}, Object.defineProperty(g._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(g, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(g, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: Ie
}), Object.defineProperty(g, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: Ne
}), Object.freeze && (Object.freeze(g.props), Object.freeze(g)), g;
}
function c(g, A, k, U, lt, tt, Ie, Ne) {
var $ = A.children;
if ($ !== void 0)
if (U)
if (It($)) {
for (U = 0; U < $.length; U++)
h($[U]);
Object.freeze && Object.freeze($);
} 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
h($);
if (pt.call(A, "key")) {
$ = t(g);
var Vt = Object.keys(A).filter(function(uo) {
return uo !== "key";
});
U = 0 < Vt.length ? "{key: someKey, " + Vt.join(": ..., ") + ": ...}" : "{key: someKey}", At[$ + U] || (Vt = 0 < Vt.length ? "{" + Vt.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} />`,
U,
$,
Vt,
$
), At[$ + U] = !0);
}
if ($ = null, k !== void 0 && (n(k), $ = "" + k), r(A) && (n(A.key), $ = "" + A.key), "key" in A) {
k = {};
for (var _e in A)
_e !== "key" && (k[_e] = A[_e]);
} else
k = A;
return $ && a(
k,
typeof g == "function" ? g.displayName || g.name || "Unknown" : g
), u(
g,
$,
tt,
lt,
i(),
k,
Ie,
Ne
);
}
function h(g) {
typeof g == "object" && g !== null && g.$$typeof === d && g._store && (g._store.validated = 1);
}
var f = ki, d = Symbol.for("react.transitional.element"), p = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), m = Symbol.for("react.profiler"), T = Symbol.for("react.consumer"), b = Symbol.for("react.context"), V = Symbol.for("react.forward_ref"), x = Symbol.for("react.suspense"), P = Symbol.for("react.suspense_list"), D = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), j = Symbol.for("react.activity"), B = Symbol.for("react.client.reference"), K = f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, pt = Object.prototype.hasOwnProperty, It = Array.isArray, at = console.createTask ? console.createTask : function() {
return null;
};
f = {
"react-stack-bottom-frame": function(g) {
return g();
}
};
var Nt, R = {}, E = f["react-stack-bottom-frame"].bind(
f,
o
)(), I = at(s(o)), At = {};
Ut.Fragment = y, Ut.jsx = function(g, A, k, U, lt) {
var tt = 1e4 > K.recentlyCreatedOwnerStacks++;
return c(
g,
A,
k,
!1,
U,
lt,
tt ? Error("react-stack-top-frame") : E,
tt ? at(s(g)) : I
);
}, Ut.jsxs = function(g, A, k, U, lt) {
var tt = 1e4 > K.recentlyCreatedOwnerStacks++;
return c(
g,
A,
k,
!0,
U,
lt,
tt ? Error("react-stack-top-frame") : E,
tt ? at(s(g)) : I
);
};
}()), Ut;
}
process.env.NODE_ENV === "production" ? tn.exports = So() : tn.exports = Ao();
var C = tn.exports, Vo = Object.defineProperty, Co = (t, e, n) => e in t ? Vo(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, en = (t, e, n) => (Co(t, typeof e != "symbol" ? e + "" : e, n), n);
function Eo(t) {
return Object.keys(t);
}
class ji extends ki.Component {
constructor(e) {
super(e), en(this, "_el"), en(this, "renderPortal", () => yo.createPortal(
this.props.children,
this._el
));
const n = document.createElement("div");
n.id = e.id, e.className && (n.className = e.className), e.style && Eo(e.style).forEach((s) => {
var i;
n.style[s] = (i = e.style) == null ? void 0 : i[s];
}), this._el = n;
}
get typeProps() {
return this.props;
}
componentDidMount() {
const e = this.typeProps.containerSelector();
e == null || e.appendChild(this._el);
}
componentWillUnmount() {
const e = this.typeProps.containerSelector();
e == null || e.removeChild(this._el);
}
render() {
return this.renderPortal();
}
}
en(ji, "defaultProps", {
containerSelector: () => document.body
});
const An = Pt({});
function Vn(t) {
const e = Y(null);
return e.current === null && (e.current = t()), e.current;
}
const Cn = typeof window < "u", Fi = Cn ? ho : rt, ke = /* @__PURE__ */ Pt(null), En = Pt({
transformPagePoint: (t) => t,
isStatic: !1,
reducedMotion: "never"
});
class Do extends wn.Component {
getSnapshotBeforeUpdate(e) {
const n = this.props.childRef.current;
if (n && e.isPresent && !this.props.isPresent) {
const s = n.offsetParent, i = s instanceof HTMLElement && s.offsetWidth || 0, o = this.props.sizeRef.current;
o.height = n.offsetHeight || 0, o.width = n.offsetWidth || 0, o.top = n.offsetTop, o.left = n.offsetLeft, o.right = i - o.width - o.left;
}
return null;
}
/**
* Required with getSnapshotBeforeUpdate to stop React complaining.
*/
componentDidUpdate() {
}
render() {
return this.props.children;
}
}
function Mo({ children: t, isPresent: e, anchorX: n }) {
const s = Pn(), i = Y(null), o = Y({
width: 0,
height: 0,
top: 0,
left: 0,
right: 0
}), { nonce: r } = _(En);
return Li(() => {
const { width: a, height: l, top: u, left: c, right: h } = o.current;
if (e || !i.current || !a || !l)
return;
const f = n === "left" ? `left: ${c}` : `right: ${h}`;
i.current.dataset.motionPopId = s;
const d = document.createElement("style");
return r && (d.nonce = r), document.head.appendChild(d), d.sheet && d.sheet.insertRule(`
[data-motion-pop-id="${s}"] {
position: absolute !important;
width: ${a}px !important;
height: ${l}px !important;
${f}px !important;
top: ${u}px !important;
}
`), () => {
document.head.removeChild(d);
};
}, [e]), C.jsx(Do, { isPresent: e, childRef: i, sizeRef: o, children: wn.cloneElement(t, { ref: i }) });
}
const Ro = ({ children: t, initial: e, isPresent: n, onExitComplete: s, custom: i, presenceAffectsLayout: o, mode: r, anchorX: a }) => {
const l = Vn(ko), u = Pn();
let c = !0, h = wt(() => (c = !1, {
id: u,
initial: e,
isPresent: n,
custom: i,
onExitComplete: (f) => {
l.set(f, !0);
for (const d of l.values())
if (!d)
return;
s && s();
},
register: (f) => (l.set(f, !1), () => l.delete(f))
}), [n, l, s]);
return o && c && (h = { ...h }), wt(() => {
l.forEach((f, d) => l.set(d, !1));
}, [n]), wn.useEffect(() => {
!n && !l.size && s && s();
}, [n]), r === "popLayout" && (t = C.jsx(Mo, { isPresent: n, anchorX: a, children: t })), C.jsx(ke.Provider, { value: h, children: t });
};
function ko() {
return /* @__PURE__ */ new Map();
}
function Bi(t = !0) {
const e = _(ke);
if (e === null)
return [!0, null];
const { isPresent: n, onExitComplete: s, register: i } = e, o = Pn();
rt(() => {
if (t)
return i(o);
}, [t]);
const r = q(() => t && s && s(o), [o, s, t]);
return !n && s ? [!1, r] : [!0];
}
const me = (t) => t.key || "";
function us(t) {
const e = [];
return fo.forEach(t, (n) => {
mo(n) && e.push(n);
}), e;
}
const Lo = ({ children: t, custom: e, initial: n = !0, onExitComplete: s, presenceAffectsLayout: i = !0, mode: o = "sync", propagate: r = !1, anchorX: a = "left" }) => {
const [l, u] = Bi(r), c = wt(() => us(t), [t]), h = r && !l ? [] : c.map(me), f = Y(!0), d = Y(c), p = Vn(() => /* @__PURE__ */ new Map()), [y, v] = Ct(c), [m, T] = Ct(c);
Fi(() => {
f.current = !1, d.current = c;
for (let x = 0; x < m.length; x++) {
const P = me(m[x]);
h.includes(P) ? p.delete(P) : p.get(P) !== !0 && p.set(P, !1);
}
}, [m, h.length, h.join("-")]);
const b = [];
if (c !== y) {
let x = [...c];
for (let P = 0; P < m.length; P++) {
const D = m[P], S = me(D);
h.includes(S) || (x.splice(P, 0, D), b.push(D));
}
return o === "wait" && b.length && (x = b), T(us(x)), v(c), null;
}
process.env.NODE_ENV !== "production" && o === "wait" && m.length > 1 && console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
const { forceRender: V } = _(An);
return C.jsx(C.Fragment, { children: m.map((x) => {
const P = me(x), D = r && !l ? !1 : c === m || h.includes(P), S = () => {
if (p.has(P))
p.set(P, !0);
else
return;
let j = !0;
p.forEach((B) => {
B || (j = !1);
}), j && (V == null || V(), T(d.current), r && (u == null || u()), s && s());
};
return C.jsx(Ro, { isPresent: D, initial: !f.current || n ? void 0 : !1, custom: e, presenceAffectsLayout: i, mode: o, onExitComplete: D ? void 0 : S, anchorX: a, children: x }, P);
}) });
};
function Dn(t, e) {
t.indexOf(e) === -1 && t.push(e);
}
function Mn(t, e) {
const n = t.indexOf(e);
n > -1 && t.splice(n, 1);
}
let jt = () => {
}, ht = () => {
};
process.env.NODE_ENV !== "production" && (jt = (t, e) => {
!t && typeof console < "u" && console.warn(e);
}, ht = (t, e) => {
if (!t)
throw new Error(e);
});
const nn = {
skipAnimations: !1,
useManualTiming: !1
};
// @__NO_SIDE_EFFECTS__
function Rn(t) {
let e;
return () => (e === void 0 && (e = t()), e);
}
const Z = /* @__NO_SIDE_EFFECTS__ */ (t) => t, Jt = /* @__NO_SIDE_EFFECTS__ */ (t, e, n) => {
const s = e - t;
return s === 0 ? 1 : (n - t) / s;
};
class kn {
constructor() {
this.subscriptions = [];
}
add(e) {
return Dn(this.subscriptions, e), () => Mn(this.subscriptions, e);
}
notify(e, n, s) {
const i = this.subscriptions.length;
if (i)
if (i === 1)
this.subscriptions[0](e, n, s);
else
for (let o = 0; o < i; o++) {
const r = this.subscriptions[o];
r && r(e, n, s);
}
}
getSize() {
return this.subscriptions.length;
}
clear() {
this.subscriptions.length = 0;
}
}
const Q = /* @__NO_SIDE_EFFECTS__ */ (t) => t * 1e3, et = /* @__NO_SIDE_EFFECTS__ */ (t) => t / 1e3;
function Ii(t, e) {
return e ? t * (1e3 / e) : 0;
}
const hs = /* @__PURE__ */ new Set();
function Le(t, e, n) {
t || hs.has(e) || (console.warn(e), n && console.warn(n), hs.add(e));
}
const Oo = /* @__PURE__ */ Rn(() => window.ScrollTimeline !== void 0);
class jo {
constructor(e) {
this.stop = () => this.runAll("stop"), this.animations = e.filter(Boolean);
}
get finished() {
return Promise.all(this.animations.map((e) => e.finished));
}
/**
* TODO: Filter out cancelled or stopped animations before returning
*/
getAll(e) {
return this.animations[0][e];
}
setAll(e, n) {
for (let s = 0; s < this.animations.length; s++)
this.animations[s][e] = n;
}
attachTimeline(e, n) {
const s = this.animations.map((i) => {
if (Oo() && i.attachTimeline)
return i.attachTimeline(e);
if (typeof n == "function")
return n(i);
});
return () => {
s.forEach((i, o) => {
i && i(), this.animations[o].stop();
});
};
}
get time() {
return this.getAll("time");
}
set time(e) {
this.setAll("time", e);
}
get speed() {
return this.getAll("speed");
}
set speed(e) {
this.setAll("speed", e);
}
get startTime() {
return this.getAll("startTime");
}
get duration() {
let e = 0;
for (let n = 0; n < this.animations.length; n++)
e = Math.max(e, this.animations[n].duration);
return e;
}
runAll(e) {
this.animations.forEach((n) => n[e]());
}
flatten() {
this.runAll("flatten");
}
play() {
this.runAll("play");
}
pause() {
this.runAll("pause");
}
cancel() {
this.runAll("cancel");
}
complete() {
this.runAll("complete");
}
}
class Fo extends jo {
then(e, n) {
return this.finished.finally(e).then(() => {
});
}
}
const fs = {
value: null,
addProjectionMetrics: null
}, Ln = (t) => Array.isArray(t) && typeof t[0] == "number", Bo = {};
function Io(t, e) {
const n = /* @__PURE__ */ Rn(t);
return () => Bo[e] ?? n();
}
const Qt = /* @__PURE__ */ Io(() => {
try {
document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
} catch {
return !1;
}
return !0;
}, "linearEasing"), Ni = (t, e, n = 10) => {
let s = "";
const i = Math.max(Math.round(e / n), 2);
for (let o = 0; o < i; o++)
s += t(o / (i - 1)) + ", ";
return `linear(${s.substring(0, s.length - 2)})`;
}, Ht = ([t, e, n, s]) => `cubic-bezier(${t}, ${e}, ${n}, ${s})`, sn = {
linear: "linear",
ease: "ease",
easeIn: "ease-in",
easeOut: "ease-out",
easeInOut: "ease-in-out",
circIn: /* @__PURE__ */ Ht([0, 0.65, 0.55, 1]),
circOut: /* @__PURE__ */ Ht([0.55, 0, 1, 0.45]),
backIn: /* @__PURE__ */ Ht([0.31, 0.01, 0.66, -0.59]),
backOut: /* @__PURE__ */ Ht([0.33, 1.53, 0.69, 0.99])
};
function _i(t, e) {
if (t)
return typeof t == "function" && Qt() ? Ni(t, e) : Ln(t) ? Ht(t) : Array.isArray(t) ? t.map((n) => _i(n, e) || sn.easeOut) : sn[t];
}
function No(t, e, n, { delay: s = 0, duration: i = 300, repeat: o = 0, repeatType: r = "loop", ease: a = "easeInOut", times: l } = {}, u = void 0) {
const c = {
[e]: n
};
l && (c.offset = l);
const h = _i(a, i);
return Array.isArray(h) && (c.easing = h), t.animate(c, {
delay: s,
duration: i,
easing: Array.isArray(h) ? "linear" : h,
fill: "both",
iterations: o + 1,
direction: r === "reverse" ? "alternate" : "normal",
pseudoElement: u
});
}
function On(t) {
return typeof t == "function" && "applyToOptions" in t;
}
function jn(t, e) {
return (t == null ? void 0 : t[e]) ?? (t == null ? void 0 : t.default) ?? t;
}
const Pe = 2e4;
function Fn(t) {
let e = 0;
const n = 50;
let s = t.next(e);
for (; !s.done && e < Pe; )
e += n, s = t.next(e);
return e >= Pe ? 1 / 0 : e;
}
function _o(t, e = 100, n) {
const s = n({ ...t, keyframes: [0, e] }), i = Math.min(Fn(s), Pe);
return {
type: "keyframes",
ease: (o) => s.next(i * o).value / e,
duration: /* @__PURE__ */ et(i)
};
}
function Ui(t) {
return !!(typeof t == "function" && Qt() || !t || typeof t == "string" && (t in sn || Qt()) || Ln(t) || Array.isArray(t) && t.every(Ui));
}
function ds(t, e) {
t.timeline = e, t.onfinish = null;
}
const pe = [
"read",
// Read
"resolveKeyframes",
// Write/Read/Write/Read
"update",
// Compute
"preRender",
// Compute
"render",
// Write
"postRender"
// Compute
];
function Uo(t, e) {
let n = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = !1, o = !1;
const r = /* @__PURE__ */ new WeakSet();
let a = {
delta: 0,
timestamp: 0,
isProcessing: !1
}, l = 0;
function u(h) {
r.has(h) && (c.schedule(h), t()), l++, h(a);
}
const c = {
/**
* Schedule a process to run on the next frame.
*/
schedule: (h, f = !1, d = !1) => {
const y = d && i ? n : s;
return f && r.add(h), y.has(h) || y.add(h), h;
},
/**
* Cancel the provided callback from running on the next frame.
*/
cancel: (h) => {
s.delete(h), r.delete(h);
},
/**
* Execute all schedule callbacks.
*/
process: (h) => {
if (a = h, i) {
o = !0;
return;
}
i = !0, [n, s] = [s, n], n.forEach(u), e && fs.value && fs.value.frameloop[e].push(l), l = 0, n.clear(), i = !1, o && (o = !1, c.process(h));
}
};
return c;
}
const $o = 40;
function $i(t, e) {
let n = !1, s = !0;
const i = {
delta: 0,
timestamp: 0,
isProcessing: !1
}, o = () => n = !0, r = pe.reduce((m, T) => (m[T] = Uo(o, e ? T : void 0), m), {}), { read: a, resolveKeyframes: l, update: u, preRender: c, render: h, postRender: f } = r, d = () => {
const m = performance.now();
n = !1, i.delta = s ? 1e3 / 60 : Math.max(Math.min(m - i.timestamp, $o), 1), i.timestamp = m, i.isProcessing = !0, a.process(i), l.process(i), u.process(i), c.process(i), h.process(i), f.process(i), i.isProcessing = !1, n && e && (s = !1, t(d));
}, p = () => {
n = !0, s = !0, i.isProcessing || t(d);
};
return { schedule: pe.reduce((m, T) => {
const b = r[T];
return m[T] = (V, x = !1, P = !1) => (n || p(), b.schedule(V, x, P)), m;
}, {}), cancel: (m) => {
for (let T = 0; T < pe.length; T++)
r[pe[T]].cancel(m);
}, state: i, steps: r };
}
const { schedule: Bn, cancel: Dh } = /* @__PURE__ */ $i(queueMicrotask, !1), { schedule: M, cancel: ft, state: N, steps: Ue } = /* @__PURE__ */ $i(typeof requestAnimationFrame < "u" ? requestAnimationFrame : Z, !0);
let xe;
function Wo() {
xe = void 0;
}
const nt = {
now: () => (xe === void 0 && nt.set(N.isProcessing || nn.useManualTiming ? N.timestamp : performance.now()), xe),
set: (t) => {
xe = t, queueMicrotask(Wo);
}
}, J = {
x: !1,
y: !1
};
function Wi() {
return J.x || J.y;
}
function Ho(t) {
return t === "x" || t === "y" ? J[t] ? null : (J[t] = !0, () => {
J[t] = !1;
}) : J.x || J.y ? null : (J.x = J.y = !0, () => {
J.x = J.y = !1;
});
}
function Go(t, e, n) {
if (t instanceof EventTarget)
return [t];
if (typeof t == "string") {
let s = document;
e && (s = e.current);
const i = (n == null ? void 0 : n[t]) ?? s.querySelectorAll(t);
return i ? Array.from(i) : [];
}
return Array.from(t);
}
function Hi(t, e) {
const n = Go(t), s = new AbortController(), i = {
passive: !0,
...e,
signal: s.signal
};
return [n, i, () => s.abort()];
}
function ms(t) {
return !(t.pointerType === "touch" || Wi());
}
function Yo(t, e, n = {}) {
const [s, i, o] = Hi(t, n), r = (a) => {
if (!ms(a))
return;
const { target: l } = a, u = e(l, a);
if (typeof u != "function" || !l)
return;
const c = (h) => {
ms(h) && (u(h), l.removeEventListener("pointerleave", c));
};
l.addEventListener("pointerleave", c, i);
};
return s.forEach((a) => {
a.addEventListener("pointerenter", r, i);
}), o;
}
const Gi = (t, e) => e ? t === e ? !0 : Gi(t, e.parentElement) : !1, In = (t) => t.pointerType === "mouse" ? typeof t.button != "number" || t.button <= 0 : t.isPrimary !== !1, Ko = /* @__PURE__ */ new Set([
"BUTTON",
"INPUT",
"SELECT",
"TEXTAREA",
"A"
]);
function zo(t) {
return Ko.has(t.tagName) || t.tabIndex !== -1;
}
const Gt = /* @__PURE__ */ new WeakSet();
function ps(t) {
return (e) => {
e.key === "Enter" && t(e);
};
}
function $e(t, e) {
t.dispatchEvent(new PointerEvent("pointer" + e, { isPrimary: !0, bubbles: !0 }));
}
const Xo = (t, e) => {
const n = t.currentTarget;
if (!n)
return;
const s = ps(() => {
if (Gt.has(n))
return;
$e(n, "down");
const i = ps(() => {
$e(n, "up");
}), o = () => $e(n, "cancel");
n.addEventListener("keyup", i, e), n.addEventListener("blur", o, e);
});
n.addEventListener("keydown", s, e), n.addEventListener("blur", () => n.removeEventListener("keydown", s), e);
};
function gs(t) {
return In(t) && !Wi();
}
function qo(t, e, n = {}) {
const [s, i, o] = Hi(t, n), r = (a) => {
const l = a.currentTarget;
if (!gs(a) || Gt.has(l))
return;
Gt.add(l);
const u = e(l, a), c = (d, p) => {
window.removeEventListener("pointerup", h), window.removeEventListener("pointercancel", f), !(!gs(d) || !Gt.has(l)) && (Gt.delete(l), typeof u == "function" && u(d, { success: p }));
}, h = (d) => {
c(d, l === window || l === document || n.useGlobalTarget || Gi(l, d.target));
}, f = (d) => {
c(d, !1);
};
window.addEventListener("pointerup", h, i), window.addEventListener("pointercancel", f, i);
};
return s.forEach((a) => {
(n.useGlobalTarget ? window : a).addEventListener("pointerdown", r, i), a instanceof HTMLElement && (a.addEventListener("focus", (u) => Xo(u, i)), !zo(a) && !a.hasAttribute("tabindex") && (a.tabIndex = 0));
}), o;
}
const ys = 30, Zo = (t) => !isNaN(parseFloat(t));
class Jo {
/**
* @param init - The initiating value
* @param config - Optional configuration options
*
* - `transformer`: A function to transform incoming values with.
*/
constructor(e, n = {}) {
this.version = "12.7.4", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (s, i = !0) => {
const o = nt.now();
this.updatedAt !== o && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(s), this.current !== this.prev && this.events.change && this.events.change.notify(this.current), i && this.events.renderRequest && this.events.renderRequest.notify(this.current);
}, this.hasAnimated = !1, this.setCurrent(e), this.owner = n.owner;
}
setCurrent(e) {
this.current = e, this.updatedAt = nt.now(), this.canTrackVelocity === null && e !== void 0 && (this.canTrackVelocity = Zo(this.current));
}
setPrevFrameValue(e = this.current) {
this.prevFrameValue = e, this.prevUpdatedAt = this.updatedAt;
}
/**
* Adds a function that will be notified when the `MotionValue` is updated.
*
* It returns a function that, when called, will cancel the subscription.
*
* When calling `onChange` inside a React component, it should be wrapped with the
* `useEffect` hook. As it returns an unsubscribe function, this should be returned
* from the `useEffect` function to ensure you don't add duplicate subscribers..
*
* ```jsx
* export const MyComponent = () => {
* const x = useMotionValue(0)
* const y = useMotionValue(0)
* const opacity = useMotionValue(1)
*
* useEffect(() => {
* function updateOpacity() {
* const maxXY = Math.max(x.get(), y.get())
* const newOpacity = transform(maxXY, [0, 100], [1, 0])
* opacity.set(newOpacity)
* }
*
* const unsubscribeX = x.on("change", updateOpacity)
* const unsubscribeY = y.on("change", updateOpacity)
*
* return () => {
* unsubscribeX()
* unsubscribeY()
* }
* }, [])
*
* return <motion.div style={{ x }} />
* }
* ```
*
* @param subscriber - A function that receives the latest value.
* @returns A function that, when called, will cancel this subscription.
*
* @deprecated
*/
onChange(e) {
return process.env.NODE_ENV !== "production" && Le(!1, 'value.onChange(callback) is deprecated. Switch to value.on("change", callback).'), this.on("change", e);
}
on(e, n) {
this.events[e] || (this.events[e] = new kn());
const s = this.events[e].add(n);
return e === "change" ? () => {
s(), M.read(() => {
this.events.change.getSize() || this.stop();
});
} : s;
}
clearListeners() {
for (const e in this.events)
this.events[e].clear();
}
/**
* Attaches a passive effect to the `MotionValue`.
*/
attach(e, n) {
this.passiveEffect = e, this.stopPassiveEffect = n;
}
/**
* Sets the state of the `MotionValue`.
*
* @remarks
*
* ```jsx
* const x = useMotionValue(0)
* x.set(10)
* ```
*
* @param latest - Latest value to set.
* @param render - Whether to notify render subscribers. Defaults to `true`
*
* @public
*/
set(e, n = !0) {
!n || !this.passiveEffect ? this.updateAndNotify(e, n) : this.passiveEffect(e, this.updateAndNotify);
}
setWithVelocity(e, n, s) {
this.set(n), this.prev = void 0, this.prevFrameValue = e, this.prevUpdatedAt = this.updatedAt - s;
}
/**
* Set the state of the `MotionValue`, stopping any active animations,
* effects, and resets velocity to `0`.
*/
jump(e, n = !0) {
this.updateAndNotify(e), this.prev = e, this.prevUpdatedAt = this.prevFrameValue = void 0, n && this.stop(), this.stopPassiveEffect && this.stopPassiveEffect();
}
/**
* Returns the latest state of `MotionValue`
*
* @returns - The latest state of `MotionValue`
*
* @public
*/
get() {
return this.current;
}
/**
* @public
*/
getPrevious() {
return this.prev;
}
/**
* Returns the latest velocity of `MotionValue`
*
* @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
*
* @public
*/
getVelocity() {
const e = nt.now();
if (!this.canTrackVelocity || this.prevFrameValue === void 0 || e - this.updatedAt > ys)
return 0;
const n = Math.min(this.updatedAt - this.prevUpdatedAt, ys);
return Ii(parseFloat(this.current) - parseFloat(this.prevFrameValue), n);
}
/**
* Registers a new animation to control this `MotionValue`. Only one
* animation can drive a `MotionValue` at one time.
*
* ```jsx
* value.start()
* ```
*
* @param animation - A function that starts the provided animation
*/
start(e) {
return this.stop(), new Promise((n) => {
this.hasAnimated = !0, this.animation = e(n), this.events.animationStart && this.events.animationStart.notify();
}).then(() => {
this.events.animationComplete && this.events.animationComplete.notify(), this.clearAnimation();
});
}
/**
* Stop the currently active animation.
*
* @public
*/
stop() {
this.animation && (this.animation.stop(), this.events.animationCancel && this.events.animationCancel.notify()), this.clearAnimation();
}
/**
* Returns `true` if this value is currently animating.
*
* @public
*/
isAnimating() {
return !!this.animation;
}
clearAnimation() {
delete this.animation;
}
/**
* Destroy and clean up subscribers to this `MotionValue`.
*
* The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
* handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
* created a `MotionValue` via the `motionValue` function.
*
* @public
*/
destroy() {
this.clearListeners(), this.stop(), this.stopPassiveEffect && this.stopPassiveEffect();
}
}
function te(t, e) {
return new Jo(t, e);
}
const Yi = Pt({ strict: !1 }), vs = {
animation: [
"animate",
"variants",
"whileHover",
"whileTap",
"exit",
"whileInView",
"whileFocus",
"whileDrag"
],
exit: ["exit"],
drag: ["drag", "dragControls"],
focus: ["whileFocus"],
hover: ["whileHover", "onHoverStart", "onHoverEnd"],
tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
layout: ["layout", "layoutId"]
}, Lt = {};
for (const t in vs)
Lt[t] = {
isEnabled: (e) => vs[t].some((n) => !!e[n])
};
function Qo(t) {
for (const e in t)
Lt[e] = {
...Lt[e],
...t[e]
};
}
const ta = /* @__PURE__ */ new Set([
"animate",
"exit",
"variants",
"initial",
"style",
"values",
"variants",
"transition",
"transformTemplate",
"custom",
"inherit",
"onBeforeLayoutMeasure",
"onAnimationStart",
"onAnimationComplete",
"onUpdate",
"onDragStart",
"onDrag",
"onDragEnd",
"onMeasureDragConstraints",
"onDirectionLock",
"onDragTransitionEnd",
"_dragX",
"_dragY",
"onHoverStart",
"onHoverEnd",
"onViewportEnter",
"onViewportLeave",
"globalTapTarget",
"ignoreStrict",
"viewport"
]);
function Se(t) {
return t.startsWith("while") || t.startsWith("drag") && t !== "draggable" || t.startsWith("layout") || t.startsWith("onTap") || t.startsWith("onPan") || t.startsWith("onLayout") || ta.has(t);
}
let Ki = (t) => !Se(t);
function ea(t) {
t && (Ki = (e) => e.startsWith("on") ? !Se(e) : t(e));
}
try {
ea(require("@emotion/is-prop-valid").default);
} catch {
}
function na(t, e, n) {
const s = {};
for (const i in t)
i === "values" && typeof t.values == "object" || (Ki(i) || n === !0 && Se(i) || !e && !Se(i) || // If trying to use native HTML drag events, forward drag listeners
t.draggable && i.startsWith("onDrag")) && (s[i] = t[i]);
return s;
}
function sa(t) {
if (typeof Proxy > "u")
return t;
const e = /* @__PURE__ */ new Map(), n = (...s) => (process.env.NODE_ENV !== "production" && Le(!1, "motion() is deprecated. Use motion.create() instead."), t(...s));
return new Proxy(n, {
/**
* Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
* The prop name is passed through as `key` and we can use that to generate a `motion`
* DOM component with that name.
*/
get: (s, i) => i === "create" ? t : (e.has(i) || e.set(i, t(i)), e.get(i))
});
}
const Oe = /* @__PURE__ */ Pt({});
function je(t) {
return t !== null && typeof t == "object" && typeof t.start == "function";
}
function ee(t) {
return typeof t == "string" || Array.isArray(t);
}
const Nn = [
"animate",
"whileInView",
"whileFocus",
"whileHover",
"whileTap",
"whileDrag",
"exit"
], _n = ["initial", ...Nn];
function Fe(t) {
return je(t.animate) || _n.some((e) => ee(t[e]));
}
function zi(t) {
return !!(Fe(t) || t.variants);
}
function ia(t, e) {
if (Fe(t)) {
const { initial: n, animate: s } = t;
return {
initial: n === !1 || ee(n) ? n : void 0,
animate: ee(s) ? s : void 0
};
}
return t.inherit !== !1 ? e : {};
}
function ra(t) {
const { initial: e, animate: n } = ia(t, _(Oe));
return wt(() => ({ initial: e, animate: n }), [xs(e), xs(n)]);
}
function xs(t) {
return Array.isArray(t) ? t.join(" ") : t;
}
const oa = Symbol.for("motionComponentSymbol");
function Et(t) {
return t && typeof t == "object" && Object.prototype.hasOwnProperty.call(t, "current");
}
function aa(t, e, n) {
return q(
(s) => {
s && t.onMount && t.onMount(s), e && (s ? e.mount(s) : e.unmount()), n && (typeof n == "function" ? n(s) : Et(n) && (n.current = s));
},
/**
* Only pass a new ref callback to React if we've received a visual element
* factory. Otherwise we'll be mounting/remounting every time externalRef
* or other dependencies change.
*/
[e]
);
}
const Un = (t) => t.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(), la = "framerAppearId", Xi = "data-" + Un(la), qi = Pt({});
function ca(t, e, n, s, i) {
var y, v;
const { visualElement: o } = _(Oe), r = _(Yi), a = _(ke), l = _(En).reducedMotion, u = Y(null);
s = s || r.renderer, !u.current && s && (u.current = s(t, {
visualState: e,
parent: o,
props: n,
presenceContext: a,
blockInitialAnimation: a ? a.initial === !1 : !1,
reducedMotionConfig: l
}));
const c = u.current, h = _(qi);
c && !c.projection && i && (c.type === "html" || c.type === "svg") && ua(u.current, n, i, h);
const f = Y(!1);
Li(() => {
c && f.current && c.update(n, a);
});
const d = n[Xi], p = Y(!!d && !((y = window.MotionHandoffIsComplete) != null && y.call(window, d)) && ((v = window.MotionHasOptimisedAnimation) == null ? void 0 : v.call(window, d)));
return Fi(() => {
c && (f.current = !0, window.MotionIsMounted = !0, c.updateFeatures(), Bn.render(c.render), p.current && c.animationState && c.animationState.animateChanges());
}), rt(() => {
c && (!p.current && c.animationState && c.animationState.animateChanges(), p.current && (queueMicrotask(() => {
var m;
(m = window.MotionHandoffMarkAsComplete) == null || m.call(window, d);
}), p.current = !1));
}), c;
}
function ua(t, e, n, s) {
const { layoutId: i, layout: o, drag: r, dragConstraints: a, layoutScroll: l, layoutRoot: u, layoutCrossfade: c } = e;
t.projection = new n(t.latestValues, e["data-framer-portal-id"] ? void 0 : Zi(t.parent)), t.projection.setOptions({
layoutId: i,
layout: o,
alwaysMeasureLayout: !!r || a && Et(a),
visualElement: t,
/**
* TODO: Update options in an effect. This could be tricky as it'll be too late
* to update by the time layout animations run.
* We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
* ensuring it gets called if there's no potential layout animations.
*
*/
animationType: typeof o == "string" ? o : "both",
initialPromotionConfig: s,
crossfade: c,
layoutScroll: l,
layoutRoot: u
});
}
function Zi(t) {
if (t)
return t.options.allowProjection !== !1 ? t.projection : Zi(t.parent);
}
function ha({ preloadedFeatures: t, createVisualElement: e, useRender: n, useVisualState: s, Component: i }) {
t && Qo(t);
function o(a, l) {
let u;
const c = {
..._(En),
...a,
layoutId: fa(a)
}, { isStatic: h } = c, f = ra(a), d = s(a, h);
if (!h && Cn) {
da(c, t);
const p = ma(c);
u = p.MeasureLayout, f.visualElement = ca(i, d, c, e, p.ProjectionNode);
}
return C.jsxs(Oe.Provider, { value: f, children: [u && f.visualElement ? C.jsx(u, { visualElement: f.visualElement, ...c }) : null, n(i, a, aa(d, f.visualElement, l), d, h, f.visualElement)] });
}
o.displayName = `motion.${typeof i == "string" ? i : `create(${i.displayName ?? i.name ?? ""})`}`;
const r = Re(o);
return r[oa] = i, r;
}
function fa({ layoutId: t }) {
const e = _(An).id;
return e && t !== void 0 ? e + "-" + t : t;
}
function da(t, e) {
const n = _(Yi).strict;
if (process.env.NODE_ENV !== "production" && e && n) {
const s = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
t.ignoreStrict ? jt(!1, s) : ht(!1, s);
}
}
function ma(t) {
const { drag: e, layout: n } = Lt;
if (!e && !n)
return {};
const s = { ...e, ...n };
return {
MeasureLayout: e != null && e.isEnabled(t) || n != null && n.isEnabled(t) ? s.MeasureLayout : void 0,
ProjectionNode: s.ProjectionNode
};
}
const Ji = (t) => (e) => typeof e == "string" && e.startsWith(t), $n = /* @__PURE__ */ Ji("--"), pa = /* @__PURE__ */ Ji("var(--"), Wn = (t) => pa(t) ? ga.test(t.split("/*")[0].trim()) : !1, ga = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu, ne = {};
function ya(t) {
for (const e in t)
ne[e] = t[e], $n(e) && (ne[e].isCSSVariable = !0);
}
const Ft = [
"transformPerspective",
"x",
"y",
"z",
"translateX",
"translateY",
"translateZ",
"scale",
"scaleX",
"scaleY",
"rotate",
"rotateX",
"rotateY",
"rotateZ",
"skew",
"skewX",
"skewY"
], St = new Set(Ft);
function Qi(t, { layout: e, layoutId: n }) {
return St.has(t) || t.startsWith("origin") || (e || n !== void 0) && (!!ne[t] || t === "opacity");
}
const H = (t) => !!(t && t.getVelocity), tr = (t, e) => e && typeof t == "number" ? e.transform(t) : t, ot = (t, e, n) => n > e ? e : n < t ? t : n, Bt = {
test: (t) => typeof t == "number",
parse: parseFloat,
transform: (t) => t
}, se = {
...Bt,
transform: (t) => ot(0, 1, t)
}, ge = {
...Bt,
default: 1
}, ue = (t) => ({
test: (e) => typeof e == "string" && e.endsWith(t) && e.split(" ").length === 1,
parse: parseFloat,
transform: (e) => `${e}${t}`
}), ut = /* @__PURE__ */ ue("deg"), st = /* @__PURE__ */ ue("%"), w = /* @__PURE__ */ ue("px"), va = /* @__PURE__ */ ue("vh"), xa = /* @__PURE__ */ ue("vw"), Ts = {
...st,
parse: (t) => st.parse(t) / 100,
transform: (t) => st.transform(t * 100)
}, Ta = {
// Border props
borderWidth: w,
borderTopWidth: w,
borderRightWidth: w,
borderBottomWidth: w,
borderLeftWidth: w,
borderRadius: w,
radius: w,
borderTopLeftRadius: w,
borderTopRightRadius: w,
borderBottomRightRadius: w,
borderBottomLeftRadius: w,
// Positioning props
width: w,
maxWidth: w,
height: w,
maxHeight: w,
top: w,
right: w,
bottom: w,
left: w,
// Spacing props
padding: w,
paddingTop: w,
paddingRight: w,
paddingBottom: w,
paddingLeft: w,
margin: w,
marginTop: w,
marginRight: w,
marginBottom: w,
marginLeft: w,
// Misc
backgroundPositionX: w,
backgroundPositionY: w
}, ba = {
rotate: ut,
rotateX: ut,
rotateY: ut,
rotateZ: ut,
scale: ge,
scaleX: ge,
scaleY: ge,
scaleZ: ge,
skew: ut,
skewX: ut,
skewY: ut,
distance: w,
translateX: w,
translateY: w,
translateZ: w,
x: w,
y: w,
z: w,
perspective: w,
transformPerspective: w,
opacity: se,
originX: Ts,
originY: Ts,
originZ: w
}, bs = {
...Bt,
transform: Math.round
}, Hn = {
...Ta,
...ba,
zIndex: bs,
size: w,
// SVG
fillOpacity: se,
strokeOpacity: se,
numOctaves: bs
}, wa = {
x: "translateX",
y: "translateY",
z: "translateZ",
transformPerspective: "perspective"
}, Pa = Ft.length;
function Sa(t, e, n) {
let s = "", i = !0;
for (let o = 0; o < Pa; o++) {
const r = Ft[o], a = t[r];
if (a === void 0)
continue;
let l = !0;
if (typeof a == "number" ? l = a === (r.startsWith("scale") ? 1 : 0) : l = parseFloat(a) === 0, !l || n) {
const u = tr(a, Hn[r]);
if (!l) {
i = !1;
const c = wa[r] || r;
s += `${c}(${u}) `;
}
n && (e[r] = u);
}
}
return s = s.trim(), n ? s = n(e, i ? "" : s) : i && (s = "none"), s;
}
function Gn(t, e, n) {
const { style: s, vars: i, transformOrigin: o } = t;
let r = !1, a = !1;
for (const l in e) {
const u = e[l];
if (St.has(l)) {
r = !0;
continue;
} else if ($n(l)) {
i[l] = u;
continue;
} else {
const c = tr(u, Hn[l]);
l.startsWith("origin") ? (a = !0, o[l] = c) : s[l] = c;
}
}
if (e.transform || (r || n ? s.transform = Sa(e, t.transform, n) : s.transform && (s.transform = "none")), a) {
const { originX: l = "50%", originY: u = "50%", originZ: c = 0 } = o;
s.transformOrigin = `${l} ${u} ${c}`;
}
}
const Yn = () => ({
style: {},
transform: {},
transformOrigin: {},
vars: {}
});
function er(t, e, n) {
for (const s in e)
!H(e[s]) && !Qi(s, n) && (t[s] = e[s]);
}
function Aa({ transformTemplate: t }, e) {
return wt(() => {
const n = Yn();
return Gn(n, e, t), Object.assign({}, n.vars, n.style);
}, [e]);
}
function Va(t, e) {
const n = t.style || {}, s = {};
return er(s, n, t), Object.assign(s, Aa(t, e)), s;
}
function Ca(t, e) {
const n = {}, s = Va(t, e);
return t.drag && t.dragListener !== !1 && (n.draggable = !1, s.userSelect = s.WebkitUserSelect = s.WebkitTouchCallout = "none", s.touchAction = t.drag === !0 ? "none" : `pan-${t.drag === "x" ? "y" : "x"}`), t.tabIndex === void 0 && (t.onTap || t.onTapStart || t.whileTap) && (n.tabIndex = 0), n.style = s, n;
}
const Ea = [
"animate",
"circle",
"defs",
"desc",
"ellipse",
"g",
"image",
"line",
"filter",
"marker",
"mask",
"metadata",
"path",
"pattern",
"polygon",
"polyline",
"rect",
"stop",
"switch",
"symbol",
"svg",
"text",
"tspan",
"use",
"view"
];
function Kn(t) {
return (
/**
* If it's not a string, it's a custom React component. Currently we only support
* HTML custom React components.
*/
typeof t != "string" || /**
* If it contains a dash, the element is a custom HTML webcomponent.
*/
t.includes("-") ? !1 : (
/**
* If it's in our list of lowercase SVG tags, it's an SVG component
*/
!!(Ea.indexOf(t) > -1 || /**
* If it contains a capital letter, it's an SVG component
*/
/[A-Z]/u.test(t))
)
);
}
const Da = {
offset: "stroke-dashoffset",
array: "stroke-dasharray"
}, Ma = {
offset: "strokeDashoffset",
array: "strokeDasharray"
};
function Ra(t, e, n = 1, s = 0, i = !0) {
t.pathLength = 1;
const o = i ? Da : Ma;
t[o.offset] = w.transform(-s);
const r = w.transform(e), a = w.transform(n);
t[o.array] = `${r} ${a}`;
}
function ws(t, e, n) {
return typeof t == "string" ? t : w.transform(e + n * t);
}
function ka(t, e, n) {
const s = ws(e, t.x, t.width), i = ws(n, t.y, t.height);
return `${s} ${i}`;
}
function zn(t, {
attrX: e,
attrY: n,
attrScale: s,
originX: i,
originY: o,
pathLength: r,
pathSpacing: a = 1,
pathOffset: l = 0,
// This is object creation, which we try to avoid per-frame.
...u
}, c, h) {
if (Gn(t, u, h), c) {
t.style.viewBox && (t.attrs.viewBox = t.style.viewBox);
return;
}
t.attrs = t.style, t.style = {};
const { attrs: f, style: d, dimensions: p } = t;
f.transform && (p && (d.transform = f.transform), delete f.transform), p && (i !== void 0 || o !== void 0 || d.transform) && (d.transformOrigin = ka(p, i !== void 0 ? i : 0.5, o !== void 0 ? o : 0.5)), e !== void 0 && (f.x = e), n !== void 0 && (f.y = n), s !== void 0 && (f.scale = s), r !== void 0 && Ra(f, r, a, l, !1);
}
const nr = () => ({
...Yn(),
attrs: {}
}), Xn = (t) => typeof t == "string" && t.toLowerCase() === "svg";
function La(t, e, n, s) {
const i = wt(() => {
const o = nr();
return zn(o, e, Xn(s), t.transformTemplate), {
...o.attrs,
style: { ...o.style }
};
}, [e]);
if (t.style) {
const o = {};
er(o, t.style, t), i.style = { ...o, ...i.style };
}
return i;
}
function Oa(t = !1) {
return (n, s, i, { latestValues: o }, r) => {
const l = (Kn(n) ? La : Ca)(s, o, r, n), u = na(s, typeof n == "string", t), c = n !== Oi ? { ...u, ...l, ref: i } : {}, { children: h } = s, f = wt(() => H(h) ? h.get() : h, [h]);
return po(n, {
...c,
children: f
});
};
}
function Ps(t) {
const e = [{}, {}];
return t == null || t.values.forEach((n, s) => {
e[0][s] = n.get(), e[1][s] = n.getVelocity();
}), e;
}
function qn(t, e, n, s) {
if (typeof e == "function") {
const [i, o] = Ps(s);
e = e(n !