@jigoooo/shared-ui
Version:
A reusable React component library and design system with TypeScript support, built on Vite for seamless integration and optimized performance.
1,542 lines • 553 kB
JavaScript
import * as j from "react";
import Ue, { createContext as ft, use as Hi, useRef as ce, useLayoutEffect as fo, useEffect as le, useId as mr, useContext as Me, useInsertionEffect as ec, useMemo as Xt, useCallback as On, Children as ji, isValidElement as Yi, useState as ee, Fragment as tc, createElement as Wr, forwardRef as Ui, Component as xd, cloneElement as Sd } from "react";
import { jsx as x, Fragment as _e, jsxs as K } from "react/jsx-runtime";
import * as nc from "react-dom";
const Sn = {
colors: {
primary: {
900: "#071423",
800: "#0C1F36",
700: "#12304F",
600: "#184068",
500: "#205288",
400: "#2C6CB0",
300: "#4985C1",
200: "#76A3D3",
100: "#A4C3E4",
50: "#D1E2F5"
},
success: {
50: "#e6f9e6",
100: "#c5e9ca",
200: "#9fdaa8",
300: "#76cd85",
400: "#56c26a",
500: "#32b64f",
600: "#28a746",
700: "#1a953a",
800: "#0a842f",
900: "#00641b"
},
warning: {
50: "#fff8e1",
100: "#ffecb3",
200: "#ffe082",
300: "#ffd54f",
400: "#ffca28",
500: "#ffa000",
600: "#ffb300",
700: "#ffa000",
800: "#ff8f00",
900: "#ff6f00"
},
error: {
50: "#fff0f2",
100: "#ffe5e7",
200: "#ffb3b8",
300: "#ff8088",
400: "#ff4d58",
500: "#ff1a2e",
600: "#e60029",
700: "#cc0024",
800: "#b3001f",
900: "#99001a"
}
},
typography: {
fontSize: {
xs: "0.75rem",
sm: "0.875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem"
}
}
}, rc = ft(null);
function tt() {
const t = Hi(rc);
if (!t)
throw new Error("useThemeContext must be used within a ThemeProvider");
return t;
}
var Dr = { exports: {} }, Mo = {};
/**
* @license React
* react-compiler-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 js;
function Cd() {
if (js) return Mo;
js = 1;
var t = Ue.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
return Mo.c = function(e) {
return t.H.useMemoCache(e);
}, Mo;
}
var Ao = {}, Ys;
function Td() {
if (Ys) return Ao;
Ys = 1;
var t = {};
/**
* @license React
* react-compiler-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.
*/
return t.NODE_ENV !== "production" && function() {
var e = Ue.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
Ao.c = function(n) {
var r = e.H;
return r === null && console.error(
`Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.`
), r.useMemoCache(n);
};
}(), Ao;
}
var Us;
function Dd() {
if (Us) return Dr.exports;
Us = 1;
var t = {};
return t.NODE_ENV === "production" ? Dr.exports = Cd() : Dr.exports = Td(), Dr.exports;
}
var X = Dd();
function ai(t, e) {
const n = {
...t
};
for (const r in e) {
const o = e[r];
o !== void 0 && (o && typeof o == "object" && !Array.isArray(o) && r in n && typeof n[r] == "object" && !Array.isArray(n[r]) ? n[r] = ai(n[r], o) : n[r] = o);
}
return n;
}
function Pd(t = {}) {
const {
colors: e,
typography: n
} = t, r = ai(Sn.colors, e || {}), o = ai(Sn.typography, n || {});
return {
colors: {
...r,
primaryColor: r.primary?.["400"] || Sn.colors.primary[400],
successColor: r.success?.["400"] || Sn.colors.success[400],
warningColor: r.warning?.["400"] || Sn.colors.warning[400],
errorColor: r.error?.["400"] || Sn.colors.error[400]
},
typography: o
};
}
function DS(t) {
const e = X.c(6), {
theme: n,
children: r
} = t;
let o;
e[0] === Symbol.for("react.memo_cache_sentinel") ? (o = Pd(), e[0] = o) : o = e[0];
const s = n ?? o;
let a;
e[1] !== s ? (a = {
theme: s
}, e[1] = s, e[2] = a) : a = e[2];
let l;
return e[3] !== r || e[4] !== a ? (l = /* @__PURE__ */ x(rc, { value: a, children: r }), e[3] = r, e[4] = a, e[5] = l) : l = e[5], l;
}
function PS() {
return function() {
return tt();
};
}
const Ed = {
default: "#2aa720",
primary: {
900: "#071423",
// 거의 블랙에 가까운 딥 네이비
800: "#0C1F36",
700: "#12304F",
600: "#184068",
500: "#205288",
// 메인 블루 (짙은 딥블루)
400: "#2C6CB0",
// 프라이머리
300: "#4985C1",
200: "#76A3D3",
100: "#A4C3E4",
50: "#D1E2F5"
},
success: {
50: "#e6f9e6",
100: "#c5e9ca",
200: "#9fdaa8",
300: "#76cd85",
400: "#56c26a",
500: "#32b64f",
600: "#28a746",
700: "#1a953a",
800: "#0a842f",
900: "#00641b"
},
warning: {
50: "#fff8e1",
100: "#ffecb3",
200: "#ffe082",
300: "#ffd54f",
400: "#ffca28",
500: "#ffa000",
600: "#ffb300",
700: "#ffa000",
800: "#ff8f00",
900: "#ff6f00"
},
error: {
50: "#fff0f2",
100: "#ffe5e7",
200: "#ffb3b8",
300: "#ff8088",
400: "#ff4d58",
500: "#ff1a2e",
600: "#e60029",
700: "#cc0024",
800: "#b3001f",
900: "#99001a"
},
black: "#000000",
white: "#ffffff",
lightRed: "#FCE4E4",
grey: "#808080",
grey2: "#A9A9A9",
lightGrey: "#efeff3",
lightGrey2: "#F0F4F8",
darkGrey: "#32383E",
darkGrey2: "#8b8d8d",
frenchBlue: "#0072BB",
carolinaBlue: "#99BADD",
sapphireBlue: "#0F52BA",
deepSapphireBlue: "#003482",
lightCoral: "#FFA07A",
lightPink: "#FFB6C1",
pink: "#FF69B4",
tangerine: "#f89b00",
mistSkyBlue: "#f1f4f8",
slate50: "#F8FAFC",
slate100: "#F1F5F9",
slate150: "#eaedf3",
slate200: "#E2E8F0",
daumPostCodeBlackTheme: {
bgColor: "#000000",
//바탕 배경색
searchBgColor: "#162525",
//검색창 배경색
contentBgColor: "#000000",
//본문 배경색(검색결과,결과없음,첫화면,검색서제스트)
pageBgColor: "#000000",
//페이지 배경색
textColor: "#FFFFFF",
//기본 글자색
queryTextColor: "#FFFFFF",
//검색창 글자색
//postcodeTextColor: "", //우편번호 글자색
//emphTextColor: "", //강조 글자색
outlineColor: "#444444"
//테두리
}
}, de = {
base: 1,
content: 2,
raisedContent: 3,
scrollbar: 10,
noneModalFab: 97,
modalOverlay: 98,
modal: 99,
anchorOverlay: 101,
anchor: 101,
datePicker: 101,
selectBoxItem: 200,
dialogOverlay: 500,
dialog: 600,
snackbar: 700,
tooltip: 900,
loading: 1e3,
addressBookAccordionContents: 10,
addressBookAccordion: 11
}, nr = ft({});
function ho(t) {
const e = ce(null);
return e.current === null && (e.current = t()), e.current;
}
const Gi = typeof window < "u", Xi = Gi ? fo : le, mo = /* @__PURE__ */ ft(null);
function qi(t, e) {
t.indexOf(e) === -1 && t.push(e);
}
function Ki(t, e) {
const n = t.indexOf(e);
n > -1 && t.splice(n, 1);
}
const Lt = (t, e, n) => n > e ? e : n < t ? t : n;
function li(t, e) {
return e ? `${t}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${e}` : t;
}
var kd = {};
let zn = () => {
}, _t = () => {
};
kd.NODE_ENV !== "production" && (zn = (t, e, n) => {
!t && typeof console < "u" && console.warn(li(e, n));
}, _t = (t, e, n) => {
if (!t)
throw new Error(li(e, n));
});
const Vt = {}, oc = (t) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(t);
function ic(t) {
return typeof t == "object" && t !== null;
}
const sc = (t) => /^0[^.\s]+$/u.test(t);
// @__NO_SIDE_EFFECTS__
function Qi(t) {
let e;
return () => (e === void 0 && (e = t()), e);
}
const ct = /* @__NO_SIDE_EFFECTS__ */ (t) => t, Rd = (t, e) => (n) => e(t(n)), pr = (...t) => t.reduce(Rd), rr = /* @__NO_SIDE_EFFECTS__ */ (t, e, n) => {
const r = e - t;
return r === 0 ? 1 : (n - t) / r;
};
class Zi {
constructor() {
this.subscriptions = [];
}
add(e) {
return qi(this.subscriptions, e), () => Ki(this.subscriptions, e);
}
notify(e, n, r) {
const o = this.subscriptions.length;
if (o)
if (o === 1)
this.subscriptions[0](e, n, r);
else
for (let i = 0; i < o; i++) {
const s = this.subscriptions[i];
s && s(e, n, r);
}
}
getSize() {
return this.subscriptions.length;
}
clear() {
this.subscriptions.length = 0;
}
}
const gt = /* @__NO_SIDE_EFFECTS__ */ (t) => t * 1e3, lt = /* @__NO_SIDE_EFFECTS__ */ (t) => t / 1e3;
function ac(t, e) {
return e ? t * (1e3 / e) : 0;
}
const Gs = /* @__PURE__ */ new Set();
function Ji(t, e, n) {
t || Gs.has(e) || (console.warn(li(e, n)), Gs.add(e));
}
const lc = (t, e, n) => (((1 - 3 * n + 3 * e) * t + (3 * n - 6 * e)) * t + 3 * e) * t, Md = 1e-7, Ad = 12;
function Id(t, e, n, r, o) {
let i, s, a = 0;
do
s = e + (n - e) / 2, i = lc(s, r, o) - t, i > 0 ? n = s : e = s;
while (Math.abs(i) > Md && ++a < Ad);
return s;
}
function gr(t, e, n, r) {
if (t === e && n === r)
return ct;
const o = (i) => Id(i, 0, 1, t, n);
return (i) => i === 0 || i === 1 ? i : lc(o(i), e, r);
}
const cc = (t) => (e) => e <= 0.5 ? t(2 * e) / 2 : (2 - t(2 * (1 - e))) / 2, uc = (t) => (e) => 1 - t(1 - e), fc = /* @__PURE__ */ gr(0.33, 1.53, 0.69, 0.99), es = /* @__PURE__ */ uc(fc), dc = /* @__PURE__ */ cc(es), hc = (t) => (t *= 2) < 1 ? 0.5 * es(t) : 0.5 * (2 - Math.pow(2, -10 * (t - 1))), ts = (t) => 1 - Math.sin(Math.acos(t)), mc = uc(ts), pc = cc(ts), Fd = /* @__PURE__ */ gr(0.42, 0, 1, 1), Od = /* @__PURE__ */ gr(0, 0, 0.58, 1), gc = /* @__PURE__ */ gr(0.42, 0, 0.58, 1), Ld = (t) => Array.isArray(t) && typeof t[0] != "number", yc = (t) => Array.isArray(t) && typeof t[0] == "number", Xs = {
linear: ct,
easeIn: Fd,
easeInOut: gc,
easeOut: Od,
circIn: ts,
circInOut: pc,
circOut: mc,
backIn: es,
backInOut: dc,
backOut: fc,
anticipate: hc
}, _d = (t) => typeof t == "string", qs = (t) => {
if (yc(t)) {
_t(t.length === 4, "Cubic bezier arrays must contain four numerical values.", "cubic-bezier-length");
const [e, n, r, o] = t;
return gr(e, n, r, o);
} else if (_d(t))
return _t(Xs[t] !== void 0, `Invalid easing type '${t}'`, "invalid-easing-type"), Xs[t];
return t;
}, Pr = [
"setup",
// Compute
"read",
// Read
"resolveKeyframes",
// Write/Read/Write/Read
"preUpdate",
// Compute
"update",
// Compute
"preRender",
// Compute
"render",
// Write
"postRender"
// Compute
];
function Vd(t, e) {
let n = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), o = !1, i = !1;
const s = /* @__PURE__ */ new WeakSet();
let a = {
delta: 0,
timestamp: 0,
isProcessing: !1
};
function l(u) {
s.has(u) && (c.schedule(u), t()), u(a);
}
const c = {
/**
* Schedule a process to run on the next frame.
*/
schedule: (u, f = !1, d = !1) => {
const y = d && o ? n : r;
return f && s.add(u), y.has(u) || y.add(u), u;
},
/**
* Cancel the provided callback from running on the next frame.
*/
cancel: (u) => {
r.delete(u), s.delete(u);
},
/**
* Execute all schedule callbacks.
*/
process: (u) => {
if (a = u, o) {
i = !0;
return;
}
o = !0, [n, r] = [r, n], n.forEach(l), n.clear(), o = !1, i && (i = !1, c.process(u));
}
};
return c;
}
const Bd = 40;
function vc(t, e) {
let n = !1, r = !0;
const o = {
delta: 0,
timestamp: 0,
isProcessing: !1
}, i = () => n = !0, s = Pr.reduce((b, S) => (b[S] = Vd(i), b), {}), { setup: a, read: l, resolveKeyframes: c, preUpdate: u, update: f, preRender: d, render: m, postRender: y } = s, p = () => {
const b = Vt.useManualTiming ? o.timestamp : performance.now();
n = !1, Vt.useManualTiming || (o.delta = r ? 1e3 / 60 : Math.max(Math.min(b - o.timestamp, Bd), 1)), o.timestamp = b, o.isProcessing = !0, a.process(o), l.process(o), c.process(o), u.process(o), f.process(o), d.process(o), m.process(o), y.process(o), o.isProcessing = !1, n && e && (r = !1, t(p));
}, g = () => {
n = !0, r = !0, o.isProcessing || t(p);
};
return { schedule: Pr.reduce((b, S) => {
const w = s[S];
return b[S] = (C, T = !1, D = !1) => (n || g(), w.schedule(C, T, D)), b;
}, {}), cancel: (b) => {
for (let S = 0; S < Pr.length; S++)
s[Pr[S]].cancel(b);
}, state: o, steps: s };
}
const { schedule: ve, cancel: qt, state: Fe, steps: Io } = /* @__PURE__ */ vc(typeof requestAnimationFrame < "u" ? requestAnimationFrame : ct, !0);
let Vr;
function Nd() {
Vr = void 0;
}
const Ge = {
now: () => (Vr === void 0 && Ge.set(Fe.isProcessing || Vt.useManualTiming ? Fe.timestamp : performance.now()), Vr),
set: (t) => {
Vr = t, queueMicrotask(Nd);
}
}, bc = (t) => (e) => typeof e == "string" && e.startsWith(t), ns = /* @__PURE__ */ bc("--"), $d = /* @__PURE__ */ bc("var(--"), rs = (t) => $d(t) ? zd.test(t.split("/*")[0].trim()) : !1, zd = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu, Wn = {
test: (t) => typeof t == "number",
parse: parseFloat,
transform: (t) => t
}, or = {
...Wn,
transform: (t) => Lt(0, 1, t)
}, Er = {
...Wn,
default: 1
}, Zn = (t) => Math.round(t * 1e5) / 1e5, os = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
function Wd(t) {
return t == null;
}
const Hd = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu, is = (t, e) => (n) => !!(typeof n == "string" && Hd.test(n) && n.startsWith(t) || e && !Wd(n) && Object.prototype.hasOwnProperty.call(n, e)), wc = (t, e, n) => (r) => {
if (typeof r != "string")
return r;
const [o, i, s, a] = r.match(os);
return {
[t]: parseFloat(o),
[e]: parseFloat(i),
[n]: parseFloat(s),
alpha: a !== void 0 ? parseFloat(a) : 1
};
}, jd = (t) => Lt(0, 255, t), Fo = {
...Wn,
transform: (t) => Math.round(jd(t))
}, fn = {
test: /* @__PURE__ */ is("rgb", "red"),
parse: /* @__PURE__ */ wc("red", "green", "blue"),
transform: ({ red: t, green: e, blue: n, alpha: r = 1 }) => "rgba(" + Fo.transform(t) + ", " + Fo.transform(e) + ", " + Fo.transform(n) + ", " + Zn(or.transform(r)) + ")"
};
function Yd(t) {
let e = "", n = "", r = "", o = "";
return t.length > 5 ? (e = t.substring(1, 3), n = t.substring(3, 5), r = t.substring(5, 7), o = t.substring(7, 9)) : (e = t.substring(1, 2), n = t.substring(2, 3), r = t.substring(3, 4), o = t.substring(4, 5), e += e, n += n, r += r, o += o), {
red: parseInt(e, 16),
green: parseInt(n, 16),
blue: parseInt(r, 16),
alpha: o ? parseInt(o, 16) / 255 : 1
};
}
const ci = {
test: /* @__PURE__ */ is("#"),
parse: Yd,
transform: fn.transform
}, yr = /* @__NO_SIDE_EFFECTS__ */ (t) => ({
test: (e) => typeof e == "string" && e.endsWith(t) && e.split(" ").length === 1,
parse: parseFloat,
transform: (e) => `${e}${t}`
}), Wt = /* @__PURE__ */ yr("deg"), Et = /* @__PURE__ */ yr("%"), te = /* @__PURE__ */ yr("px"), Ud = /* @__PURE__ */ yr("vh"), Gd = /* @__PURE__ */ yr("vw"), Ks = {
...Et,
parse: (t) => Et.parse(t) / 100,
transform: (t) => Et.transform(t * 100)
}, Tn = {
test: /* @__PURE__ */ is("hsl", "hue"),
parse: /* @__PURE__ */ wc("hue", "saturation", "lightness"),
transform: ({ hue: t, saturation: e, lightness: n, alpha: r = 1 }) => "hsla(" + Math.round(t) + ", " + Et.transform(Zn(e)) + ", " + Et.transform(Zn(n)) + ", " + Zn(or.transform(r)) + ")"
}, Re = {
test: (t) => fn.test(t) || ci.test(t) || Tn.test(t),
parse: (t) => fn.test(t) ? fn.parse(t) : Tn.test(t) ? Tn.parse(t) : ci.parse(t),
transform: (t) => typeof t == "string" ? t : t.hasOwnProperty("red") ? fn.transform(t) : Tn.transform(t),
getAnimatableNone: (t) => {
const e = Re.parse(t);
return e.alpha = 0, Re.transform(e);
}
}, Xd = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
function qd(t) {
return isNaN(t) && typeof t == "string" && (t.match(os)?.length || 0) + (t.match(Xd)?.length || 0) > 0;
}
const xc = "number", Sc = "color", Kd = "var", Qd = "var(", Qs = "${}", Zd = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;
function ir(t) {
const e = t.toString(), n = [], r = {
color: [],
number: [],
var: []
}, o = [];
let i = 0;
const a = e.replace(Zd, (l) => (Re.test(l) ? (r.color.push(i), o.push(Sc), n.push(Re.parse(l))) : l.startsWith(Qd) ? (r.var.push(i), o.push(Kd), n.push(l)) : (r.number.push(i), o.push(xc), n.push(parseFloat(l))), ++i, Qs)).split(Qs);
return { values: n, split: a, indexes: r, types: o };
}
function Cc(t) {
return ir(t).values;
}
function Tc(t) {
const { split: e, types: n } = ir(t), r = e.length;
return (o) => {
let i = "";
for (let s = 0; s < r; s++)
if (i += e[s], o[s] !== void 0) {
const a = n[s];
a === xc ? i += Zn(o[s]) : a === Sc ? i += Re.transform(o[s]) : i += o[s];
}
return i;
};
}
const Jd = (t) => typeof t == "number" ? 0 : Re.test(t) ? Re.getAnimatableNone(t) : t;
function eh(t) {
const e = Cc(t);
return Tc(t)(e.map(Jd));
}
const Kt = {
test: qd,
parse: Cc,
createTransformer: Tc,
getAnimatableNone: eh
};
function Oo(t, e, n) {
return n < 0 && (n += 1), n > 1 && (n -= 1), n < 1 / 6 ? t + (e - t) * 6 * n : n < 1 / 2 ? e : n < 2 / 3 ? t + (e - t) * (2 / 3 - n) * 6 : t;
}
function th({ hue: t, saturation: e, lightness: n, alpha: r }) {
t /= 360, e /= 100, n /= 100;
let o = 0, i = 0, s = 0;
if (!e)
o = i = s = n;
else {
const a = n < 0.5 ? n * (1 + e) : n + e - n * e, l = 2 * n - a;
o = Oo(l, a, t + 1 / 3), i = Oo(l, a, t), s = Oo(l, a, t - 1 / 3);
}
return {
red: Math.round(o * 255),
green: Math.round(i * 255),
blue: Math.round(s * 255),
alpha: r
};
}
function Hr(t, e) {
return (n) => n > 0 ? e : t;
}
const xe = (t, e, n) => t + (e - t) * n, Lo = (t, e, n) => {
const r = t * t, o = n * (e * e - r) + r;
return o < 0 ? 0 : Math.sqrt(o);
}, nh = [ci, fn, Tn], rh = (t) => nh.find((e) => e.test(t));
function Zs(t) {
const e = rh(t);
if (zn(!!e, `'${t}' is not an animatable color. Use the equivalent color code instead.`, "color-not-animatable"), !e)
return !1;
let n = e.parse(t);
return e === Tn && (n = th(n)), n;
}
const Js = (t, e) => {
const n = Zs(t), r = Zs(e);
if (!n || !r)
return Hr(t, e);
const o = { ...n };
return (i) => (o.red = Lo(n.red, r.red, i), o.green = Lo(n.green, r.green, i), o.blue = Lo(n.blue, r.blue, i), o.alpha = xe(n.alpha, r.alpha, i), fn.transform(o));
}, ui = /* @__PURE__ */ new Set(["none", "hidden"]);
function oh(t, e) {
return ui.has(t) ? (n) => n <= 0 ? t : e : (n) => n >= 1 ? e : t;
}
function ih(t, e) {
return (n) => xe(t, e, n);
}
function ss(t) {
return typeof t == "number" ? ih : typeof t == "string" ? rs(t) ? Hr : Re.test(t) ? Js : lh : Array.isArray(t) ? Dc : typeof t == "object" ? Re.test(t) ? Js : sh : Hr;
}
function Dc(t, e) {
const n = [...t], r = n.length, o = t.map((i, s) => ss(i)(i, e[s]));
return (i) => {
for (let s = 0; s < r; s++)
n[s] = o[s](i);
return n;
};
}
function sh(t, e) {
const n = { ...t, ...e }, r = {};
for (const o in n)
t[o] !== void 0 && e[o] !== void 0 && (r[o] = ss(t[o])(t[o], e[o]));
return (o) => {
for (const i in r)
n[i] = r[i](o);
return n;
};
}
function ah(t, e) {
const n = [], r = { color: 0, var: 0, number: 0 };
for (let o = 0; o < e.values.length; o++) {
const i = e.types[o], s = t.indexes[i][r[i]], a = t.values[s] ?? 0;
n[o] = a, r[i]++;
}
return n;
}
const lh = (t, e) => {
const n = Kt.createTransformer(e), r = ir(t), o = ir(e);
return r.indexes.var.length === o.indexes.var.length && r.indexes.color.length === o.indexes.color.length && r.indexes.number.length >= o.indexes.number.length ? ui.has(t) && !o.values.length || ui.has(e) && !r.values.length ? oh(t, e) : pr(Dc(ah(r, o), o.values), n) : (zn(!0, `Complex values '${t}' and '${e}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`, "complex-values-different"), Hr(t, e));
};
function Pc(t, e, n) {
return typeof t == "number" && typeof e == "number" && typeof n == "number" ? xe(t, e, n) : ss(t)(t, e);
}
const ch = (t) => {
const e = ({ timestamp: n }) => t(n);
return {
start: (n = !0) => ve.update(e, n),
stop: () => qt(e),
/**
* If we're processing this frame we can use the
* framelocked timestamp to keep things in sync.
*/
now: () => Fe.isProcessing ? Fe.timestamp : Ge.now()
};
}, Ec = (t, e, n = 10) => {
let r = "";
const o = Math.max(Math.round(e / n), 2);
for (let i = 0; i < o; i++)
r += Math.round(t(i / (o - 1)) * 1e4) / 1e4 + ", ";
return `linear(${r.substring(0, r.length - 2)})`;
}, jr = 2e4;
function as(t) {
let e = 0;
const n = 50;
let r = t.next(e);
for (; !r.done && e < jr; )
e += n, r = t.next(e);
return e >= jr ? 1 / 0 : e;
}
function uh(t, e = 100, n) {
const r = n({ ...t, keyframes: [0, e] }), o = Math.min(as(r), jr);
return {
type: "keyframes",
ease: (i) => r.next(o * i).value / e,
duration: /* @__PURE__ */ lt(o)
};
}
const fh = 5;
function kc(t, e, n) {
const r = Math.max(e - fh, 0);
return ac(n - t(r), e - r);
}
const we = {
// Default spring physics
stiffness: 100,
damping: 10,
mass: 1,
velocity: 0,
// Default duration/bounce-based options
duration: 800,
// in ms
bounce: 0.3,
visualDuration: 0.3,
// in seconds
// Rest thresholds
restSpeed: {
granular: 0.01,
default: 2
},
restDelta: {
granular: 5e-3,
default: 0.5
},
// Limits
minDuration: 0.01,
// in seconds
maxDuration: 10,
// in seconds
minDamping: 0.05,
maxDamping: 1
}, _o = 1e-3;
function dh({ duration: t = we.duration, bounce: e = we.bounce, velocity: n = we.velocity, mass: r = we.mass }) {
let o, i;
zn(t <= /* @__PURE__ */ gt(we.maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit");
let s = 1 - e;
s = Lt(we.minDamping, we.maxDamping, s), t = Lt(we.minDuration, we.maxDuration, /* @__PURE__ */ lt(t)), s < 1 ? (o = (c) => {
const u = c * s, f = u * t, d = u - n, m = fi(c, s), y = Math.exp(-f);
return _o - d / m * y;
}, i = (c) => {
const f = c * s * t, d = f * n + n, m = Math.pow(s, 2) * Math.pow(c, 2) * t, y = Math.exp(-f), p = fi(Math.pow(c, 2), s);
return (-o(c) + _o > 0 ? -1 : 1) * ((d - m) * y) / p;
}) : (o = (c) => {
const u = Math.exp(-c * t), f = (c - n) * t + 1;
return -_o + u * f;
}, i = (c) => {
const u = Math.exp(-c * t), f = (n - c) * (t * t);
return u * f;
});
const a = 5 / t, l = mh(o, i, a);
if (t = /* @__PURE__ */ gt(t), isNaN(l))
return {
stiffness: we.stiffness,
damping: we.damping,
duration: t
};
{
const c = Math.pow(l, 2) * r;
return {
stiffness: c,
damping: s * 2 * Math.sqrt(r * c),
duration: t
};
}
}
const hh = 12;
function mh(t, e, n) {
let r = n;
for (let o = 1; o < hh; o++)
r = r - t(r) / e(r);
return r;
}
function fi(t, e) {
return t * Math.sqrt(1 - e * e);
}
const ph = ["duration", "bounce"], gh = ["stiffness", "damping", "mass"];
function ea(t, e) {
return e.some((n) => t[n] !== void 0);
}
function yh(t) {
let e = {
velocity: we.velocity,
stiffness: we.stiffness,
damping: we.damping,
mass: we.mass,
isResolvedFromDuration: !1,
...t
};
if (!ea(t, gh) && ea(t, ph))
if (t.visualDuration) {
const n = t.visualDuration, r = 2 * Math.PI / (n * 1.2), o = r * r, i = 2 * Lt(0.05, 1, 1 - (t.bounce || 0)) * Math.sqrt(o);
e = {
...e,
mass: we.mass,
stiffness: o,
damping: i
};
} else {
const n = dh(t);
e = {
...e,
...n,
mass: we.mass
}, e.isResolvedFromDuration = !0;
}
return e;
}
function Yr(t = we.visualDuration, e = we.bounce) {
const n = typeof t != "object" ? {
visualDuration: t,
keyframes: [0, 1],
bounce: e
} : t;
let { restSpeed: r, restDelta: o } = n;
const i = n.keyframes[0], s = n.keyframes[n.keyframes.length - 1], a = { done: !1, value: i }, { stiffness: l, damping: c, mass: u, duration: f, velocity: d, isResolvedFromDuration: m } = yh({
...n,
velocity: -/* @__PURE__ */ lt(n.velocity || 0)
}), y = d || 0, p = c / (2 * Math.sqrt(l * u)), g = s - i, v = /* @__PURE__ */ lt(Math.sqrt(l / u)), h = Math.abs(g) < 5;
r || (r = h ? we.restSpeed.granular : we.restSpeed.default), o || (o = h ? we.restDelta.granular : we.restDelta.default);
let b;
if (p < 1) {
const w = fi(v, p);
b = (C) => {
const T = Math.exp(-p * v * C);
return s - T * ((y + p * v * g) / w * Math.sin(w * C) + g * Math.cos(w * C));
};
} else if (p === 1)
b = (w) => s - Math.exp(-v * w) * (g + (y + v * g) * w);
else {
const w = v * Math.sqrt(p * p - 1);
b = (C) => {
const T = Math.exp(-p * v * C), D = Math.min(w * C, 300);
return s - T * ((y + p * v * g) * Math.sinh(D) + w * g * Math.cosh(D)) / w;
};
}
const S = {
calculatedDuration: m && f || null,
next: (w) => {
const C = b(w);
if (m)
a.done = w >= f;
else {
let T = w === 0 ? y : 0;
p < 1 && (T = w === 0 ? /* @__PURE__ */ gt(y) : kc(b, w, C));
const D = Math.abs(T) <= r, k = Math.abs(s - C) <= o;
a.done = D && k;
}
return a.value = a.done ? s : C, a;
},
toString: () => {
const w = Math.min(as(S), jr), C = Ec((T) => S.next(w * T).value, w, 30);
return w + "ms " + C;
},
toTransition: () => {
}
};
return S;
}
Yr.applyToOptions = (t) => {
const e = uh(t, 100, Yr);
return t.ease = e.ease, t.duration = /* @__PURE__ */ gt(e.duration), t.type = "keyframes", t;
};
function di({ keyframes: t, velocity: e = 0, power: n = 0.8, timeConstant: r = 325, bounceDamping: o = 10, bounceStiffness: i = 500, modifyTarget: s, min: a, max: l, restDelta: c = 0.5, restSpeed: u }) {
const f = t[0], d = {
done: !1,
value: f
}, m = (D) => a !== void 0 && D < a || l !== void 0 && D > l, y = (D) => a === void 0 ? l : l === void 0 || Math.abs(a - D) < Math.abs(l - D) ? a : l;
let p = n * e;
const g = f + p, v = s === void 0 ? g : s(g);
v !== g && (p = v - f);
const h = (D) => -p * Math.exp(-D / r), b = (D) => v + h(D), S = (D) => {
const k = h(D), E = b(D);
d.done = Math.abs(k) <= c, d.value = d.done ? v : E;
};
let w, C;
const T = (D) => {
m(d.value) && (w = D, C = Yr({
keyframes: [d.value, y(d.value)],
velocity: kc(b, D, d.value),
// TODO: This should be passing * 1000
damping: o,
stiffness: i,
restDelta: c,
restSpeed: u
}));
};
return T(0), {
calculatedDuration: null,
next: (D) => {
let k = !1;
return !C && w === void 0 && (k = !0, S(D), T(D)), w !== void 0 && D >= w ? C.next(D - w) : (!k && S(D), d);
}
};
}
function vh(t, e, n) {
const r = [], o = n || Vt.mix || Pc, i = t.length - 1;
for (let s = 0; s < i; s++) {
let a = o(t[s], t[s + 1]);
if (e) {
const l = Array.isArray(e) ? e[s] || ct : e;
a = pr(l, a);
}
r.push(a);
}
return r;
}
function bh(t, e, { clamp: n = !0, ease: r, mixer: o } = {}) {
const i = t.length;
if (_t(i === e.length, "Both input and output ranges must be the same length", "range-length"), i === 1)
return () => e[0];
if (i === 2 && e[0] === e[1])
return () => e[1];
const s = t[0] === t[1];
t[0] > t[i - 1] && (t = [...t].reverse(), e = [...e].reverse());
const a = vh(e, r, o), l = a.length, c = (u) => {
if (s && u < t[0])
return e[0];
let f = 0;
if (l > 1)
for (; f < t.length - 2 && !(u < t[f + 1]); f++)
;
const d = /* @__PURE__ */ rr(t[f], t[f + 1], u);
return a[f](d);
};
return n ? (u) => c(Lt(t[0], t[i - 1], u)) : c;
}
function wh(t, e) {
const n = t[t.length - 1];
for (let r = 1; r <= e; r++) {
const o = /* @__PURE__ */ rr(0, e, r);
t.push(xe(n, 1, o));
}
}
function xh(t) {
const e = [0];
return wh(e, t.length - 1), e;
}
function Sh(t, e) {
return t.map((n) => n * e);
}
function Ch(t, e) {
return t.map(() => e || gc).splice(0, t.length - 1);
}
function Dn({ duration: t = 300, keyframes: e, times: n, ease: r = "easeInOut" }) {
const o = Ld(r) ? r.map(qs) : qs(r), i = {
done: !1,
value: e[0]
}, s = Sh(
// Only use the provided offsets if they're the correct length
// TODO Maybe we should warn here if there's a length mismatch
n && n.length === e.length ? n : xh(e),
t
), a = bh(s, e, {
ease: Array.isArray(o) ? o : Ch(e, o)
});
return {
calculatedDuration: t,
next: (l) => (i.value = a(l), i.done = l >= t, i)
};
}
const Th = (t) => t !== null;
function ls(t, { repeat: e, repeatType: n = "loop" }, r, o = 1) {
const i = t.filter(Th), a = o < 0 || e && n !== "loop" && e % 2 === 1 ? 0 : i.length - 1;
return !a || r === void 0 ? i[a] : r;
}
const Dh = {
decay: di,
inertia: di,
tween: Dn,
keyframes: Dn,
spring: Yr
};
function Rc(t) {
typeof t.type == "string" && (t.type = Dh[t.type]);
}
class cs {
constructor() {
this.updateFinished();
}
get finished() {
return this._finished;
}
updateFinished() {
this._finished = new Promise((e) => {
this.resolve = e;
});
}
notifyFinished() {
this.resolve();
}
/**
* Allows the animation to be awaited.
*
* @deprecated Use `finished` instead.
*/
then(e, n) {
return this.finished.then(e, n);
}
}
var Ph = {};
const Eh = (t) => t / 100;
class us extends cs {
constructor(e) {
super(), this.state = "idle", this.startTime = null, this.isStopped = !1, this.currentTime = 0, this.holdTime = null, this.playbackSpeed = 1, this.stop = () => {
const { motionValue: n } = this.options;
n && n.updatedAt !== Ge.now() && this.tick(Ge.now()), this.isStopped = !0, this.state !== "idle" && (this.teardown(), this.options.onStop?.());
}, this.options = e, this.initAnimation(), this.play(), e.autoplay === !1 && this.pause();
}
initAnimation() {
const { options: e } = this;
Rc(e);
const { type: n = Dn, repeat: r = 0, repeatDelay: o = 0, repeatType: i, velocity: s = 0 } = e;
let { keyframes: a } = e;
const l = n || Dn;
Ph.NODE_ENV !== "production" && l !== Dn && _t(a.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${a}`, "spring-two-frames"), l !== Dn && typeof a[0] != "number" && (this.mixKeyframes = pr(Eh, Pc(a[0], a[1])), a = [0, 100]);
const c = l({ ...e, keyframes: a });
i === "mirror" && (this.mirroredGenerator = l({
...e,
keyframes: [...a].reverse(),
velocity: -s
})), c.calculatedDuration === null && (c.calculatedDuration = as(c));
const { calculatedDuration: u } = c;
this.calculatedDuration = u, this.resolvedDuration = u + o, this.totalDuration = this.resolvedDuration * (r + 1) - o, this.generator = c;
}
updateTime(e) {
const n = Math.round(e - this.startTime) * this.playbackSpeed;
this.holdTime !== null ? this.currentTime = this.holdTime : this.currentTime = n;
}
tick(e, n = !1) {
const { generator: r, totalDuration: o, mixKeyframes: i, mirroredGenerator: s, resolvedDuration: a, calculatedDuration: l } = this;
if (this.startTime === null)
return r.next(0);
const { delay: c = 0, keyframes: u, repeat: f, repeatType: d, repeatDelay: m, type: y, onUpdate: p, finalKeyframe: g } = this.options;
this.speed > 0 ? this.startTime = Math.min(this.startTime, e) : this.speed < 0 && (this.startTime = Math.min(e - o / this.speed, this.startTime)), n ? this.currentTime = e : this.updateTime(e);
const v = this.currentTime - c * (this.playbackSpeed >= 0 ? 1 : -1), h = this.playbackSpeed >= 0 ? v < 0 : v > o;
this.currentTime = Math.max(v, 0), this.state === "finished" && this.holdTime === null && (this.currentTime = o);
let b = this.currentTime, S = r;
if (f) {
const D = Math.min(this.currentTime, o) / a;
let k = Math.floor(D), E = D % 1;
!E && D >= 1 && (E = 1), E === 1 && k--, k = Math.min(k, f + 1), !!(k % 2) && (d === "reverse" ? (E = 1 - E, m && (E -= m / a)) : d === "mirror" && (S = s)), b = Lt(0, 1, E) * a;
}
const w = h ? { done: !1, value: u[0] } : S.next(b);
i && (w.value = i(w.value));
let { done: C } = w;
!h && l !== null && (C = this.playbackSpeed >= 0 ? this.currentTime >= o : this.currentTime <= 0);
const T = this.holdTime === null && (this.state === "finished" || this.state === "running" && C);
return T && y !== di && (w.value = ls(u, this.options, g, this.speed)), p && p(w.value), T && this.finish(), w;
}
/**
* Allows the returned animation to be awaited or promise-chained. Currently
* resolves when the animation finishes at all but in a future update could/should
* reject if its cancels.
*/
then(e, n) {
return this.finished.then(e, n);
}
get duration() {
return /* @__PURE__ */ lt(this.calculatedDuration);
}
get iterationDuration() {
const { delay: e = 0 } = this.options || {};
return this.duration + /* @__PURE__ */ lt(e);
}
get time() {
return /* @__PURE__ */ lt(this.currentTime);
}
set time(e) {
e = /* @__PURE__ */ gt(e), this.currentTime = e, this.startTime === null || this.holdTime !== null || this.playbackSpeed === 0 ? this.holdTime = e : this.driver && (this.startTime = this.driver.now() - e / this.playbackSpeed), this.driver?.start(!1);
}
get speed() {
return this.playbackSpeed;
}
set speed(e) {
this.updateTime(Ge.now());
const n = this.playbackSpeed !== e;
this.playbackSpeed = e, n && (this.time = /* @__PURE__ */ lt(this.currentTime));
}
play() {
if (this.isStopped)
return;
const { driver: e = ch, startTime: n } = this.options;
this.driver || (this.driver = e((o) => this.tick(o))), this.options.onPlay?.();
const r = this.driver.now();
this.state === "finished" ? (this.updateFinished(), this.startTime = r) : this.holdTime !== null ? this.startTime = r - this.holdTime : this.startTime || (this.startTime = n ?? r), this.state === "finished" && this.speed < 0 && (this.startTime += this.calculatedDuration), this.holdTime = null, this.state = "running", this.driver.start();
}
pause() {
this.state = "paused", this.updateTime(Ge.now()), this.holdTime = this.currentTime;
}
complete() {
this.state !== "running" && this.play(), this.state = "finished", this.holdTime = null;
}
finish() {
this.notifyFinished(), this.teardown(), this.state = "finished", this.options.onComplete?.();
}
cancel() {
this.holdTime = null, this.startTime = 0, this.tick(0), this.teardown(), this.options.onCancel?.();
}
teardown() {
this.state = "idle", this.stopDriver(), this.startTime = this.holdTime = null;
}
stopDriver() {
this.driver && (this.driver.stop(), this.driver = void 0);
}
sample(e) {
return this.startTime = 0, this.tick(e, !0);
}
attachTimeline(e) {
return this.options.allowFlatten && (this.options.type = "keyframes", this.options.ease = "linear", this.initAnimation()), this.driver?.stop(), e.observe(this);
}
}
function kh(t) {
for (let e = 1; e < t.length; e++)
t[e] ?? (t[e] = t[e - 1]);
}
const dn = (t) => t * 180 / Math.PI, hi = (t) => {
const e = dn(Math.atan2(t[1], t[0]));
return mi(e);
}, Rh = {
x: 4,
y: 5,
translateX: 4,
translateY: 5,
scaleX: 0,
scaleY: 3,
scale: (t) => (Math.abs(t[0]) + Math.abs(t[3])) / 2,
rotate: hi,
rotateZ: hi,
skewX: (t) => dn(Math.atan(t[1])),
skewY: (t) => dn(Math.atan(t[2])),
skew: (t) => (Math.abs(t[1]) + Math.abs(t[2])) / 2
}, mi = (t) => (t = t % 360, t < 0 && (t += 360), t), ta = hi, na = (t) => Math.sqrt(t[0] * t[0] + t[1] * t[1]), ra = (t) => Math.sqrt(t[4] * t[4] + t[5] * t[5]), Mh = {
x: 12,
y: 13,
z: 14,
translateX: 12,
translateY: 13,
translateZ: 14,
scaleX: na,
scaleY: ra,
scale: (t) => (na(t) + ra(t)) / 2,
rotateX: (t) => mi(dn(Math.atan2(t[6], t[5]))),
rotateY: (t) => mi(dn(Math.atan2(-t[2], t[0]))),
rotateZ: ta,
rotate: ta,
skewX: (t) => dn(Math.atan(t[4])),
skewY: (t) => dn(Math.atan(t[1])),
skew: (t) => (Math.abs(t[1]) + Math.abs(t[4])) / 2
};
function pi(t) {
return t.includes("scale") ? 1 : 0;
}
function gi(t, e) {
if (!t || t === "none")
return pi(e);
const n = t.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
let r, o;
if (n)
r = Mh, o = n;
else {
const a = t.match(/^matrix\(([-\d.e\s,]+)\)$/u);
r = Rh, o = a;
}
if (!o)
return pi(e);
const i = r[e], s = o[1].split(",").map(Ih);
return typeof i == "function" ? i(s) : s[i];
}
const Ah = (t, e) => {
const { transform: n = "none" } = getComputedStyle(t);
return gi(n, e);
};
function Ih(t) {
return parseFloat(t.trim());
}
const Hn = [
"transformPerspective",
"x",
"y",
"z",
"translateX",
"translateY",
"translateZ",
"scale",
"scaleX",
"scaleY",
"rotate",
"rotateX",
"rotateY",
"rotateZ",
"skew",
"skewX",
"skewY"
], jn = new Set(Hn), oa = (t) => t === Wn || t === te, Fh = /* @__PURE__ */ new Set(["x", "y", "z"]), Oh = Hn.filter((t) => !Fh.has(t));
function Lh(t) {
const e = [];
return Oh.forEach((n) => {
const r = t.getValue(n);
r !== void 0 && (e.push([n, r.get()]), r.set(n.startsWith("scale") ? 1 : 0));
}), e;
}
const mn = {
// Dimensions
width: ({ x: t }, { paddingLeft: e = "0", paddingRight: n = "0" }) => t.max - t.min - parseFloat(e) - parseFloat(n),
height: ({ y: t }, { paddingTop: e = "0", paddingBottom: n = "0" }) => t.max - t.min - parseFloat(e) - parseFloat(n),
top: (t, { top: e }) => parseFloat(e),
left: (t, { left: e }) => parseFloat(e),
bottom: ({ y: t }, { top: e }) => parseFloat(e) + (t.max - t.min),
right: ({ x: t }, { left: e }) => parseFloat(e) + (t.max - t.min),
// Transform
x: (t, { transform: e }) => gi(e, "x"),
y: (t, { transform: e }) => gi(e, "y")
};
mn.translateX = mn.x;
mn.translateY = mn.y;
const pn = /* @__PURE__ */ new Set();
let yi = !1, vi = !1, bi = !1;
function Mc() {
if (vi) {
const t = Array.from(pn).filter((r) => r.needsMeasurement), e = new Set(t.map((r) => r.element)), n = /* @__PURE__ */ new Map();
e.forEach((r) => {
const o = Lh(r);
o.length && (n.set(r, o), r.render());
}), t.forEach((r) => r.measureInitialState()), e.forEach((r) => {
r.render();
const o = n.get(r);
o && o.forEach(([i, s]) => {
r.getValue(i)?.set(s);
});
}), t.forEach((r) => r.measureEndState()), t.forEach((r) => {
r.suspendedScrollY !== void 0 && window.scrollTo(0, r.suspendedScrollY);
});
}
vi = !1, yi = !1, pn.forEach((t) => t.complete(bi)), pn.clear();
}
function Ac() {
pn.forEach((t) => {
t.readKeyframes(), t.needsMeasurement && (vi = !0);
});
}
function _h() {
bi = !0, Ac(), Mc(), bi = !1;
}
class fs {
constructor(e, n, r, o, i, s = !1) {
this.state = "pending", this.isAsync = !1, this.needsMeasurement = !1, this.unresolvedKeyframes = [...e], this.onComplete = n, this.name = r, this.motionValue = o, this.element = i, this.isAsync = s;
}
scheduleResolve() {
this.state = "scheduled", this.isAsync ? (pn.add(this), yi || (yi = !0, ve.read(Ac), ve.resolveKeyframes(Mc))) : (this.readKeyframes(), this.complete());
}
readKeyframes() {
const { unresolvedKeyframes: e, name: n, element: r, motionValue: o } = this;
if (e[0] === null) {
const i = o?.get(), s = e[e.length - 1];
if (i !== void 0)
e[0] = i;
else if (r && n) {
const a = r.readValue(n, s);
a != null && (e[0] = a);
}
e[0] === void 0 && (e[0] = s), o && i === void 0 && o.set(e[0]);
}
kh(e);
}
setFinalKeyframe() {
}
measureInitialState() {
}
renderEndStyles() {
}
measureEndState() {
}
complete(e = !1) {
this.state = "complete", this.onComplete(this.unresolvedKeyframes, this.finalKeyframe, e), pn.delete(this);
}
cancel() {
this.state === "scheduled" && (pn.delete(this), this.state = "pending");
}
resume() {
this.state === "pending" && this.scheduleResolve();
}
}
const Vh = (t) => t.startsWith("--");
function Bh(t, e, n) {
Vh(e) ? t.style.setProperty(e, n) : t.style[e] = n;
}
const Nh = /* @__PURE__ */ Qi(() => window.ScrollTimeline !== void 0), $h = {};
function zh(t, e) {
const n = /* @__PURE__ */ Qi(t);
return () => $h[e] ?? n();
}
const Ic = /* @__PURE__ */ zh(() => {
try {
document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
} catch {
return !1;
}
return !0;
}, "linearEasing"), Kn = ([t, e, n, r]) => `cubic-bezier(${t}, ${e}, ${n}, ${r})`, ia = {
linear: "linear",
ease: "ease",
easeIn: "ease-in",
easeOut: "ease-out",
easeInOut: "ease-in-out",
circIn: /* @__PURE__ */ Kn([0, 0.65, 0.55, 1]),
circOut: /* @__PURE__ */ Kn([0.55, 0, 1, 0.45]),
backIn: /* @__PURE__ */ Kn([0.31, 0.01, 0.66, -0.59]),
backOut: /* @__PURE__ */ Kn([0.33, 1.53, 0.69, 0.99])
};
function Fc(t, e) {
if (t)
return typeof t == "function" ? Ic() ? Ec(t, e) : "ease-out" : yc(t) ? Kn(t) : Array.isArray(t) ? t.map((n) => Fc(n, e) || ia.easeOut) : ia[t];
}
function Wh(t, e, n, { delay: r = 0, duration: o = 300, repeat: i = 0, repeatType: s = "loop", ease: a = "easeOut", times: l } = {}, c = void 0) {
const u = {
[e]: n
};
l && (u.offset = l);
const f = Fc(a, o);
Array.isArray(f) && (u.easing = f);
const d = {
delay: r,
duration: o,
easing: Array.isArray(f) ? "linear" : f,
fill: "both",
iterations: i + 1,
direction: s === "reverse" ? "alternate" : "normal"
};
return c && (d.pseudoElement = c), t.animate(u, d);
}
function Oc(t) {
return typeof t == "function" && "applyToOptions" in t;
}
function Hh({ type: t, ...e }) {
return Oc(t) && Ic() ? t.applyToOptions(e) : (e.duration ?? (e.duration = 300), e.ease ?? (e.ease = "easeOut"), e);
}
class jh extends cs {
constructor(e) {
if (super(), this.finishedTime = null, this.isStopped = !1, !e)
return;
const { element: n, name: r, keyframes: o, pseudoElement: i, allowFlatten: s = !1, finalKeyframe: a, onComplete: l } = e;
this.isPseudoElement = !!i, this.allowFlatten = s, this.options = e, _t(typeof e.type != "string", `Mini animate() doesn't support "type" as a string.`, "mini-spring");
const c = Hh(e);
this.animation = Wh(n, r, o, c, i), c.autoplay === !1 && this.animation.pause(), this.animation.onfinish = () => {
if (this.finishedTime = this.time, !i) {
const u = ls(o, this.options, a, this.speed);
this.updateMotionValue ? this.updateMotionValue(u) : Bh(n, r, u), this.animation.cancel();
}
l?.(), this.notifyFinished();
};
}
play() {
this.isStopped || (this.animation.play(), this.state === "finished" && this.updateFinished());
}
pause() {
this.animation.pause();
}
complete() {
this.animation.finish?.();
}
cancel() {
try {
this.animation.cancel();
} catch {
}
}
stop() {
if (this.isStopped)
return;
this.isStopped = !0;
const { state: e } = this;
e === "idle" || e === "finished" || (this.updateMotionValue ? this.updateMotionValue() : this.commitStyles(), this.isPseudoElement || this.cancel());
}
/**
* WAAPI doesn't natively have any interruption capabilities.
*
* In this method, we commit styles back to the DOM before cancelling
* the animation.
*
* This is designed to be overridden by NativeAnimationExtended, which
* will create a renderless JS animation and sample it twice to calculate
* its current value, "previous" value, and therefore allow
* Motion to also correctly calculate velocity for any subsequent animation
* while deferring the commit until the next animation frame.
*/
commitStyles() {
this.isPseudoElement || this.animation.commitStyles?.();
}
get duration() {
const e = this.animation.effect?.getComputedTiming?.().duration || 0;
return /* @__PURE__ */ lt(Number(e));
}
get iterationDuration() {
const { delay: e = 0 } = this.options || {};
return this.duration + /* @__PURE__ */ lt(e);
}
get time() {
return /* @__PURE__ */ lt(Number(this.animation.currentTime) || 0);
}
set time(e) {
this.finishedTime = null, this.animation.currentTime = /* @__PURE__ */ gt(e);
}
/**
* The playback speed of the animation.
* 1 = normal speed, 2 = double speed, 0.5 = half speed.
*/
get speed() {
return this.animation.playbackRate;
}
set speed(e) {
e < 0 && (this.finishedTime = null), this.animation.playbackRate = e;
}
get state() {
return this.finishedTime !== null ? "finished" : this.animation.playState;
}
get startTime() {
return Number(this.animation.startTime);
}
set startTime(e) {
this.animation.startTime = e;
}
/**
* Attaches a timeline to the animation, for instance the `ScrollTimeline`.
*/
attachTimeline({ timeline: e, observe: n }) {
return this.allowFlatten && this.animation.effect?.updateTiming({ easing: "linear" }), this.animation.onfinish = null, e && Nh() ? (this.animation.timeline = e, ct) : n(this);
}
}
const Lc = {
anticipate: hc,
backInOut: dc,
circInOut: pc
};
function Yh(t) {
return t in Lc;
}
function Uh(t) {
typeof t.ease == "string" && Yh(t.ease) && (t.ease = Lc[t.ease]);
}
const sa = 10;
class Gh extends jh {
constructor(e) {
Uh(e), Rc(e), super(e), e.startTime && (this.startTime = e.startTime), this.options = e;
}
/**
* WAAPI doesn't natively have any interruption capabilities.
*
* Rather than read commited styles back out of the DOM, we can
* create a renderless JS animation and sample it twice to calculate
* its current value, "previous" value, and therefore allow
* Motion to calculate velocity for any subsequent animation.
*/
updateMotionValue(e) {
const { motionValue: n, onUpdate: r, onComplete: o, element: i, ...s } = this.options;
if (!n)
return;
if (e !== void 0) {
n.set(e);
return;
}
const a = new us({
...s,
autoplay: !1
}), l = /* @__PURE__ */ gt(this.finishedTime ?? this.time);
n.setWithVelocity(a.sample(l - sa).value, a.sample(l).value, sa), a.stop();
}
}
const aa = (t, e) => e === "zIndex" ? !1 : !!(typeof t == "number" || Array.isArray(t) || typeof t == "string" && // It's animatable if we have a string
(Kt.test(t) || t === "0") && // And it contains numbers and/or colors
!t.startsWith("url("));
function Xh(t) {
const e = t[0];
if (t.length === 1)
return !0;
for (let n = 0; n < t.length; n++)
if (t[n] !== e)
return !0;
}
function qh(t, e, n, r) {
const o = t[0];
if (o === null)
return !1;
if (e === "display" || e === "visibility")
return !0;
const i = t[t.length - 1], s = aa(o, e), a = aa(i, e);
return zn(s === a, `You are trying to animate ${e} from "${o}" to "${i}". "${s ? i : o}" is not an animatable value.`, "value-not-animatable"), !s || !a ? !1 : Xh(t) || (n === "spring" || Oc(n)) && r;
}
function wi(t) {
t.duration = 0, t.type = "keyframes";
}
const Kh = /* @__PURE__ */ new Set([
"opacity",
"clipPath",
"filter",
"transform"
// TODO: Could be re-enabled now we have support for linear() easing
// "background-color"
]), Qh = /* @__PURE__ */ Qi(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
function Zh(t) {
const { motionValue: e, name: n, repeatDelay: r, repeatType: o, damping: i, type: s } = t;
if (!(e?.owner?.current instanceof HTMLElement))
return !1;
const { onUpdate: l, transformTemplate: c } = e.owner.getProps();
return Qh() && n && Kh.has(n) && (n !== "transform" || !c) && /**
* If we're outputting values to onUpdate then we can't use WAAPI as there's
* no way to read the value from WAAPI every frame.
*/
!l && !r && o !== "mirror" && i !== 0 && s !== "inertia";
}
const Jh = 40;
class em extends cs {
constructor({ autoplay: e = !0, delay: n = 0, type: r = "keyframes", repeat: o = 0, repeatDelay: i = 0, repeatType: s = "loop", keyframes: a, name: l, motionValue: c, element: u, ...f }) {
super(), this.stop = () => {
this._animation && (this._animation.stop(), this.stopTimeline?.()), this.keyframeResolver?.cancel();
}, this.createdAt = Ge.now();
const d = {
autoplay: e,
delay: n,
type: r,
repeat: o,
repeatDelay: i,
repeatType: s,
name: l,
motionValue: c,
element: u,
...f
}, m = u?.KeyframeResolver || fs;
this.keyframeResolver = new m(a, (y, p, g) => this.onKeyframesResolved(y, p, d, !g), l, c, u), this.keyframeResolver?.scheduleResolve();
}
onKeyframesResolved(e, n, r, o) {
this.keyframeResolver = void 0;
const { name: i, type: s, velocity: a, delay: l, isHandoff: c, onUpdate: u } = r;
this.resolvedAt = Ge.now(), qh(e, i, s, a) || ((Vt.instantAnimations || !l) && u?.(ls(e, r, n)), e[0] = e[e.length - 1], wi(r), r.repeat = 0);
const d = {
startTime: o ? this.resolvedAt ? this.resolvedAt - this.createdAt > Jh ? this.reso