@neuctra/ui
Version:
A modern, responsive, customizable React UI component library powered by Tailwind CSS and Vite.
12,433 lines • 399 kB
JavaScript
"use client";
import { jsx as d, jsxs as P, Fragment as Te } from "react/jsx-runtime";
import O from "clsx";
import * as Nn from "react";
import ie, { forwardRef as Y, useMemo as Se, useState as H, memo as eo, createContext as gt, useRef as G, useLayoutEffect as Ns, useEffect as ee, useId as le, useContext as de, useInsertionEffect as Ts, useCallback as Ft, Children as ol, isValidElement as al, Fragment as to, createElement as ll, Component as cl, useImperativeHandle as no } from "react";
import { twMerge as ul } from "tailwind-merge";
import { User as dl, ExternalLink as fl, ChevronDown as Ss, ChevronRight as Tt, Loader2 as hl, Info as fn, AlertTriangle as so, AlertCircle as ro, CheckCircle as io, X as Je, ChevronUp as ml, Check as Tn, EyeOff as pl, Eye as gl, Sun as yl, Moon as bl, TrendingUp as xl, TrendingDown as vl, Minus as oo, Inbox as wl, MoreHorizontal as ao, ChevronLeft as Cs, Plus as Nl, Star as Vn, UploadCloud as Tl, File as Sl, Copy as Cl, Calendar as kl } from "lucide-react";
import { createPortal as Pl } from "react-dom";
const Dl = {
uppercase: "uppercase",
lowercase: "lowercase",
capitalize: "capitalize"
}, Al = {
default: "text-foreground",
primary: "text-primary",
muted: "text-muted-foreground"
};
function Xm({
as: e,
children: t,
transform: n,
italic: s,
underline: r,
strikethrough: o,
truncate: i,
color: a = "default",
className: l,
...c
}) {
const u = e || "p", f = u === "a";
return /* @__PURE__ */ d(
u,
{
className: O(
l,
n && Dl[n],
s && "italic",
r && "underline",
o && "line-through",
i && "truncate",
f && "text-primary hover:opacity-80 underline",
Al[a] || a
),
...f && { rel: "noopener noreferrer" },
...c,
children: t
}
);
}
const m = (...e) => ul(O(e)), Sn = Y(
function({
children: t,
iconBefore: n,
iconAfter: s,
loading: r = !1,
loadingText: o = "Loading...",
fullWidth: i = !1,
variant: a = "default",
size: l = "sm",
disabled: c,
className: u,
contentClassName: f,
iconClassName: h,
loaderClassName: p,
textClassName: g,
style: y,
contentStyle: b,
iconStyle: v,
loaderStyle: N,
textStyle: x,
type: w = "button",
...T
}, D) {
const k = c || r, S = {
xs: "px-3 py-1.5 text-xs min-h-[28px] rounded-md",
sm: "px-4 py-2 text-sm min-h-[32px] rounded-md",
md: "px-6 py-2.5 text-[15px] min-h-[40px] rounded-lg",
lg: "px-8 py-3 text-base min-h-[48px] rounded-xl",
xl: "px-10 py-3.5 text-lg min-h-[56px] rounded-2xl"
}, V = {
xs: "gap-1.5",
sm: "gap-2",
md: "gap-2",
lg: "gap-2.5",
xl: "gap-3"
}, A = {
xs: "border",
sm: "border-2",
md: "border-2",
lg: "border-2",
xl: "border-[3px]"
}, F = {
default: "bg-primary text-primary-foreground hover:opacity-90",
outline: "border border-border bg-background text-foreground hover:bg-accent",
ghost: "bg-transparent text-foreground hover:bg-accent",
secondary: "bg-muted text-muted-foreground hover:opacity-90",
destructive: "bg-destructive text-destructive-foreground hover:opacity-90",
success: "bg-success text-success-foreground hover:opacity-90",
warning: "bg-warning text-warning-foreground hover:opacity-90",
info: "bg-info text-info-foreground hover:opacity-90"
}, L = {
xs: 14,
sm: 16,
md: 20,
lg: 24,
xl: 28
};
return /* @__PURE__ */ d(
"button",
{
ref: D,
type: w,
disabled: k,
"aria-busy": r || void 0,
className: m(
"inline-flex items-center justify-center transition-all duration-200",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
S[l] ?? S.md,
F[a] ?? F.default,
i && "w-full",
k && "opacity-60 cursor-not-allowed",
u
),
style: y,
...T,
children: /* @__PURE__ */ d(
"span",
{
className: m(
"inline-flex items-center",
V[l] ?? V.md,
f
),
style: b,
children: r ? /* @__PURE__ */ P(Te, { children: [
/* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"border-current border-t-transparent rounded-full animate-spin",
A[l] ?? A.md,
p
),
style: {
width: L[l],
height: L[l],
flexShrink: 0,
...N
}
}
),
/* @__PURE__ */ d(
"span",
{
className: m(
"whitespace-nowrap text-current",
g
),
style: x,
children: o
}
)
] }) : /* @__PURE__ */ P(Te, { children: [
n && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"inline-flex items-center justify-center shrink-0 text-current",
// Size the SVG itself, not just its wrapper — otherwise a
// default 24px lucide icon spills out of a 14px xs box.
"[&_svg]:w-full [&_svg]:h-full",
h
),
style: {
width: L[l],
height: L[l],
...v
},
children: n
}
),
t != null && /* @__PURE__ */ d(
"span",
{
className: m("whitespace-nowrap text-current", g),
style: x,
children: t
}
),
s && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"inline-flex items-center justify-center shrink-0 text-current",
"[&_svg]:w-full [&_svg]:h-full",
h
),
style: {
width: L[l],
height: L[l],
...v
},
children: s
}
)
] })
}
)
}
);
}
);
Sn.displayName = "Button";
const or = (e) => {
if (e)
return typeof e != "object" || !("base" in e) ? e : e.base;
}, El = Y(
(e, t) => {
const {
src: n,
alt: s = "",
title: r,
width: o = "100%",
height: i,
aspectRatio: a,
radius: l,
border: c,
shadow: u,
opacity: f = 1,
objectFit: h = "cover",
overlay: p,
overlayColor: g = "color-mix(in srgb, var(--background) 60%, transparent)",
clickable: y,
onClick: b,
fallback: v,
loading: N = "lazy",
className: x,
imageClassName: w,
overlayClassName: T,
fallbackClassName: D,
style: k,
imageStyle: S,
overlayStyle: V,
fallbackStyle: A,
...F
} = e, L = or(o), $ = or(i), E = Se(
() => ({
width: L,
height: $,
aspectRatio: a,
borderRadius: l,
border: c,
overflow: "hidden",
position: "relative",
display: "inline-block",
cursor: y ? "pointer" : void 0,
boxShadow: u ? "0 4px 12px color-mix(in srgb, var(--foreground) 15%, transparent)" : void 0,
backgroundColor: "var(--background)",
...k
}),
[
L,
$,
a,
l,
c,
u,
y,
k
]
), C = {
width: "100%",
height: "100%",
objectFit: h,
opacity: f,
display: "block",
...S
}, B = {
position: "absolute",
inset: 0,
background: g,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "var(--primary-foreground)",
...V
}, K = {
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: 16,
color: "var(--muted-foreground)",
backgroundColor: "var(--muted)",
...A
};
return /* @__PURE__ */ P(
"div",
{
ref: t,
role: y ? "button" : void 0,
tabIndex: y ? 0 : void 0,
"aria-label": s,
title: r,
onClick: y ? b : void 0,
onKeyDown: (R) => {
y && (R.key === "Enter" || R.key === " ") && (R.preventDefault(), b?.(R));
},
style: E,
className: x,
...F,
children: [
n ? /* @__PURE__ */ d(
"img",
{
src: n,
alt: s,
loading: N,
style: C,
className: w
}
) : /* @__PURE__ */ d("div", { style: K, className: D, children: v || "No Image" }),
p && /* @__PURE__ */ d("div", { style: B, className: T, children: p })
]
}
);
}
);
El.displayName = "Image";
const Ml = {
sm: "max-w-sm",
md: "max-w-md",
lg: "max-w-lg",
xl: "max-w-xl",
"2xl": "max-w-2xl",
full: "w-full"
}, Vl = {
none: "p-0",
sm: "p-4",
md: "p-6",
lg: "p-8",
xl: "p-12"
}, Il = ie.forwardRef(
({
size: e = "full",
padding: t = "none",
center: n = !0,
className: s,
style: r,
children: o,
...i
}, a) => {
const l = O(
s,
"w-full box-border",
Ml[e],
Vl[t],
n && "mx-auto"
);
return /* @__PURE__ */ d("div", { ref: a, className: l, style: { ...r }, ...i, children: o });
}
);
Il.displayName = "Container";
const Rl = {
xs: "text-xs",
sm: "text-sm",
md: "text-base",
lg: "text-lg",
xl: "text-xl",
"2xl": "text-2xl"
}, Ll = {
xs: "w-6 h-6",
sm: "w-8 h-8",
md: "w-10 h-10",
lg: "w-12 h-12",
xl: "w-14 h-14",
"2xl": "w-16 h-16"
}, In = {
circular: "rounded-full",
rounded: "rounded-lg",
square: "rounded-none"
}, Bl = {
"top-left": "-top-0.5 -left-0.5",
"top-right": "-top-0.5 -right-0.5",
"bottom-left": "-bottom-0.5 -left-0.5",
"bottom-right": "-bottom-0.5 -right-0.5"
}, Fl = (e) => ({
xs: "w-2 h-2",
sm: "w-2.5 h-2.5",
md: "w-3 h-3",
lg: "w-3.5 h-3.5",
xl: "w-4 h-4",
"2xl": "w-4.5 h-4.5"
})[e], jl = (e) => ({
xs: "border",
sm: "border",
md: "border-2",
lg: "border-2",
xl: "border-[3px]",
"2xl": "border-[3px]"
})[e], qm = ({
src: e,
alt: t = "User avatar",
size: n = "md",
variant: s = "circular",
isOnline: r = !1,
isOffline: o = !1,
fallback: i,
ring: a = !1,
onClick: l,
statusPosition: c = "bottom-right",
className: u = "",
statusClassName: f = "",
style: h,
statusStyle: p,
imageClassName: g = "",
fallbackClassName: y = "",
iconClassName: b = ""
}) => {
const [v, N] = H(!1), x = !!l, w = n === "responsive" ? "md" : n, T = i || t.split(" ").map((V) => V[0]).join("").toUpperCase().slice(0, 2), D = r ? "bg-success" : o ? "bg-muted-foreground" : "", k = Fl(w), S = jl(w);
return /* @__PURE__ */ P(
"div",
{
role: x ? "button" : "img",
tabIndex: x ? 0 : -1,
"aria-label": t,
onClick: l,
className: `relative inline-flex items-center justify-center
${Ll[w]}
${In[s]}
bg-background text-foreground
transition-all duration-200
${x ? "cursor-pointer hover:scale-105 active:scale-95" : ""}
${a ? "ring-2 ring-border ring-offset-2" : ""}
${u}`,
style: {
...h,
...a ? { ringColor: "var(--border)" } : {}
},
onKeyDown: (V) => {
x && (V.key === "Enter" || V.key === " ") && (V.preventDefault(), l?.());
},
children: [
e && !v ? /* @__PURE__ */ d(
"img",
{
src: e,
alt: t,
onError: () => N(!0),
className: m(
"w-full h-full object-cover",
In[s],
g
)
}
) : /* @__PURE__ */ d(
"div",
{
className: m(
"w-full h-full flex items-center justify-center bg-muted text-foreground font-semibold",
Rl[w],
In[s],
y
),
children: T || /* @__PURE__ */ d(
dl,
{
className: m("w-1/2 h-1/2 text-muted-foreground", b)
}
)
}
),
(r || o) && /* @__PURE__ */ d(
"span",
{
"aria-label": r ? "Online" : "Offline",
title: r ? "Online" : "Offline",
className: `
absolute
${Bl[c]}
${D}
${k}
${S}
border-background
rounded-full
shadow-md
z-10
${f}
`,
style: {
...p
}
}
)
]
}
);
}, Ol = eo(
({
text: e,
icon: t,
iconPosition: n = "left",
variant: s = "solid",
size: r = "sm",
rounded: o = !0,
notificationDot: i = !1,
count: a,
pulse: l = !1,
className: c,
style: u,
dotClassName: f,
dotStyle: h,
countClassName: p,
countStyle: g,
iconClassName: y,
iconStyle: b,
textClassName: v,
textStyle: N,
onClick: x
}) => {
const w = {
sm: "px-2.5 py-0.5 text-[11px] gap-1",
md: "px-3 py-1 text-xs gap-1.5",
lg: "px-4 py-1.5 text-sm gap-2"
}, T = {
sm: "w-3 h-3",
md: "w-3.5 h-3.5",
lg: "w-4 h-4"
}, D = {
// text-primary-foreground, not text-white — a light --primary (the
// README's own example is a bright green) fails contrast against white.
solid: "bg-primary text-primary-foreground",
outline: "border border-primary text-primary bg-transparent",
soft: "bg-primary/10 text-primary"
}, k = !!x;
return /* @__PURE__ */ P(
"span",
{
onClick: x,
role: k ? "button" : void 0,
tabIndex: k ? 0 : void 0,
onKeyDown: k ? (S) => {
(S.key === "Enter" || S.key === " ") && (S.preventDefault(), x?.());
} : void 0,
style: u,
className: m(
"relative inline-flex items-center justify-center font-medium",
"transition-all duration-200 select-none",
D[s] ?? D.solid,
o ? "rounded-full" : "rounded-md",
w[r] ?? w.sm,
k && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background " + // Hover stays within the variant's own color ramp.
(s === "solid" ? "hover:bg-primary/90" : s === "outline" ? "hover:bg-primary/10" : "hover:bg-primary/20"),
c
),
children: [
i && a === void 0 && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
style: h,
className: m(
"absolute -top-1 -right-1 w-2 h-2 rounded-full bg-destructive",
// animate-ping scales the dot to 2x and fades it out, so on its
// own the dot vanishes. Render the ping as a sibling ring and
// keep a solid dot underneath.
l && "before:absolute before:inset-0 before:rounded-full before:bg-destructive before:animate-ping motion-reduce:before:animate-none",
f
)
}
),
a !== void 0 && /* @__PURE__ */ d(
"span",
{
role: "status",
style: g,
className: m(
"absolute -top-2 -right-2 min-w-[18px] h-[18px] px-1 text-[10px]",
"flex items-center justify-center rounded-full",
"bg-destructive text-destructive-foreground",
p
),
children: a
}
),
t && n === "left" && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
style: b,
className: m(
"flex items-center shrink-0 [&_svg]:w-full [&_svg]:h-full",
T[r] ?? T.sm,
y
),
children: t
}
),
e && /* @__PURE__ */ d("span", { style: N, className: m(v), children: e }),
t && n === "right" && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
style: b,
className: m(
"flex items-center shrink-0 [&_svg]:w-full [&_svg]:h-full",
T[r] ?? T.sm,
y
),
children: t
}
)
]
}
);
}
);
Ol.displayName = "Badge";
const $l = {
sm: "text-xs",
md: "text-sm",
lg: "text-base"
}, _l = {
compact: {
sm: "px-2 py-1",
md: "px-2.5 py-1.5",
lg: "px-3 py-2"
},
normal: {
sm: "px-2.5 py-1.5",
md: "px-3 py-2",
lg: "px-3.5 py-2.5"
},
comfortable: {
sm: "px-3 py-2",
md: "px-3.5 py-2.5",
lg: "px-4 py-3"
}
}, zl = {
default: "rounded-md hover:bg-accent",
nav: "rounded-lg hover:bg-accent hover:text-foreground",
menu: "rounded-md hover:bg-accent",
card: "rounded-lg border border-border bg-card hover:bg-accent",
ghost: "rounded-md hover:bg-accent/70"
}, Ul = {
default: "bg-accent text-foreground",
nav: "bg-primary text-foreground",
menu: "bg-accent text-foreground",
card: "border-primary bg-primary/10 text-foreground",
ghost: "bg-accent text-foreground"
}, qn = (e, t, n) => e.id ?? `${n}-${t}-${String(e.text ?? e.label ?? "item")}`, Wl = (e) => e.subItems ?? e.items ?? [], Kl = (e) => e.text ?? e.label, Hl = (e, t) => t ?? (e === "_blank" ? "noreferrer" : void 0), lo = (e) => {
const t = e.item ?? {
id: e.id,
text: e.text,
label: e.label,
description: e.description,
icon: e.icon,
leading: e.leading,
trailing: e.trailing,
badge: e.badge,
shortcut: e.shortcut,
href: e.href,
target: e.target,
rel: e.rel,
download: e.download,
onClick: e.onClick,
subItems: e.subItems,
items: e.items,
expanded: e.expanded,
defaultExpanded: e.defaultExpanded,
collapsible: e.collapsible,
active: e.active,
disabled: e.disabled,
danger: e.danger,
separator: e.separator,
hidden: e.hidden,
title: e.title,
ariaLabel: e.ariaLabel,
role: e.role,
className: e.className,
contentClassName: e.contentClassName,
iconClassName: e.iconClassName,
textClassName: e.textClassName,
descriptionClassName: e.descriptionClassName,
badgeClassName: e.badgeClassName,
subListClassName: e.subListClassName,
style: e.style,
contentStyle: e.contentStyle,
iconStyle: e.iconStyle,
textStyle: e.textStyle,
descriptionStyle: e.descriptionStyle,
badgeStyle: e.badgeStyle,
subListStyle: e.subListStyle
}, {
index: n = 0,
depth: s = 0,
isInline: r = !1,
isOrdered: o = !1,
showTree: i = !1,
showBullets: a = !1,
showDividers: l = !1,
interactive: c = !0,
disabled: u = !1,
variant: f = "default",
size: h = "md",
density: p = "normal",
nestedMode: g = "collapse",
bulletVariant: y = "dot",
activeItemId: b,
expandedIds: v,
toggleExpanded: N,
selectItem: x,
linkComponent: w,
renderItem: T,
itemClassName: D,
itemContentClassName: k,
bulletClassName: S,
textClassName: V,
iconClassName: A,
badgeClassName: F,
shortcutClassName: L,
trailingClassName: $,
subListClassName: E,
separatorClassName: C,
chevronClassName: B,
externalIconClassName: K,
itemStyle: I,
itemContentStyle: R,
bulletStyle: M,
textStyle: z,
iconStyle: j,
badgeStyle: W,
shortcutStyle: X,
trailingStyle: ne,
subListStyle: ge,
separatorStyle: Ne
} = e;
if (t.hidden) return null;
const De = qn(t, n, s), Qe = Wl(t), ke = Qe.length > 0, he = u || !!t.disabled, Ae = t.active || b === De, $e = t.expanded, Ee = v?.has(De), Re = $e ?? Ee ?? t.defaultExpanded ?? g === "always", Le = t.collapsible ?? g === "collapse", et = Kl(t), se = t.leading ?? t.icon, q = w ?? "a", Ye = !!t.href || !!t.onClick || ke, _e = c && Ye && !he, tt = t.target === "_blank", me = () => {
!ke || he || N?.(De, t);
}, ye = (ze) => {
if (he) {
ze.preventDefault();
return;
}
ke && (!t.href || Le) && me(), t.onClick?.(ze, t), x?.(De, t);
};
if (t.separator)
return /* @__PURE__ */ d(
"li",
{
role: "separator",
className: O("my-1 h-px bg-border", C),
style: Ne
}
);
const Xe = /* @__PURE__ */ P(Te, { children: [
a && !o && !r && !se && y !== "none" && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: O(
"shrink-0",
y === "line" && "mt-1.5 h-px w-4 bg-current opacity-50",
y === "number" && "flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/10 px-1 text-xs font-medium text-foreground",
y === "dot" && "mt-1.5 h-2 w-2 rounded-full bg-primary",
S
),
style: M,
children: y === "number" ? n + 1 : null
}
),
se && /* @__PURE__ */ d(
"span",
{
className: O(
"shrink-0 text-foreground/70",
t.iconClassName,
A
),
style: { ...j, ...t.iconStyle },
children: se
}
),
/* @__PURE__ */ P("span", { className: "min-w-0 flex-1", children: [
/* @__PURE__ */ d(
"span",
{
className: O(
"block truncate",
t.textClassName,
V
),
style: { ...z, ...t.textStyle },
children: et
}
),
t.description && /* @__PURE__ */ d(
"span",
{
className: O(
"mt-0.5 block truncate text-xs text-foreground/70",
t.descriptionClassName
),
style: t.descriptionStyle,
children: t.description
}
)
] }),
t.badge && /* @__PURE__ */ d(
"span",
{
className: O(
"shrink-0 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-foreground",
t.badgeClassName,
F
),
style: { ...W, ...t.badgeStyle },
children: t.badge
}
),
t.shortcut && /* @__PURE__ */ d(
"kbd",
{
className: O(
"shrink-0 rounded border border-border bg-muted px-1.5 py-0.5 text-[11px] text-foreground/60",
L
),
style: e.shortcutStyle,
children: t.shortcut
}
),
t.trailing && /* @__PURE__ */ d(
"span",
{
className: O("shrink-0 text-foreground/70", $),
style: ne,
children: t.trailing
}
),
tt && /* @__PURE__ */ d(
fl,
{
"aria-hidden": "true",
className: O("h-3.5 w-3.5 shrink-0 text-foreground/60", K)
}
),
ke && Le && !t.trailing && /* @__PURE__ */ d("span", { className: O("shrink-0 text-foreground/60", B), children: Re ? /* @__PURE__ */ d(Ss, { size: 16 }) : /* @__PURE__ */ d(Tt, { size: 16 }) })
] }), Be = O(
"group/list-item flex min-w-0 items-center gap-2.5 transition-all",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
$l[h],
_l[p][h],
zl[f],
Ae && Ul[f],
t.danger && "text-foreground hover:bg-destructive/10",
he && "pointer-events-none opacity-50",
_e && "cursor-pointer",
!_e && "cursor-default",
t.contentClassName,
k
), qe = {
title: t.title,
"aria-label": t.ariaLabel,
"aria-current": Ae ? "page" : void 0,
"aria-expanded": ke && Le ? Re : void 0,
className: Be,
style: { ...R, ...t.contentStyle }
}, nt = /* @__PURE__ */ d(Te, { children: t.href ? /* @__PURE__ */ d(
q,
{
...qe,
href: t.href,
target: t.target,
rel: Hl(t.target, t.rel),
download: t.download,
onClick: ye,
children: Xe
}
) : /* @__PURE__ */ d(Te, { children: _e ? /* @__PURE__ */ d(
"button",
{
...qe,
type: "button",
disabled: he,
onClick: ye,
children: Xe
}
) : /* @__PURE__ */ d("div", { ...qe, children: Xe }) }) });
return /* @__PURE__ */ P(
"li",
{
role: t.role,
className: O(
"relative",
l && "border-b border-border last:border-b-0",
i && s > 0 && !r && "pl-4",
r && "shrink-0",
t.className,
D
),
style: { ...I, ...t.style },
children: [
i && s > 0 && !r && /* @__PURE__ */ P(Te, { children: [
/* @__PURE__ */ d("span", { className: "absolute left-1.5 top-0 h-full w-px bg-border" }),
/* @__PURE__ */ d("span", { className: "absolute left-1.5 top-5 h-px w-3 bg-border" })
] }),
T ? T({
item: t,
index: n,
depth: s,
active: Ae,
expanded: Re,
disabled: he,
hasChildren: ke,
toggle: me,
select: ye
}) : nt,
ke && !r && Re && /* @__PURE__ */ d(
"ul",
{
role: "group",
className: O(
"mt-1 list-none space-y-1 pl-3",
i && "pl-4",
t.subListClassName,
E
),
style: { ...ge, ...t.subListStyle },
children: Qe.map((ze, pe) => /* @__PURE__ */ d(
lo,
{
item: ze,
index: pe,
depth: s + 1,
isOrdered: o,
showTree: i,
showBullets: a,
showDividers: l,
interactive: c,
disabled: u,
variant: f,
size: h,
density: p,
nestedMode: g,
bulletVariant: y,
activeItemId: b,
expandedIds: v,
toggleExpanded: N,
selectItem: x,
linkComponent: w,
renderItem: T,
itemClassName: D,
itemContentClassName: k,
bulletClassName: S,
textClassName: V,
iconClassName: A,
badgeClassName: F,
shortcutClassName: L,
trailingClassName: $,
subListClassName: E,
separatorClassName: C,
chevronClassName: B,
externalIconClassName: K,
itemStyle: I,
itemContentStyle: R,
bulletStyle: M,
textStyle: z,
iconStyle: j,
badgeStyle: W,
shortcutStyle: X,
trailingStyle: ne,
subListStyle: ge,
separatorStyle: Ne
},
qn(ze, pe, s + 1)
))
}
)
]
}
);
}, Zm = ({
title: e,
titleIcon: t,
description: n,
items: s,
type: r = "unordered",
variant: o = "default",
size: i = "md",
density: a = "normal",
nestedMode: l = "collapse",
bulletVariant: c = "dot",
showTree: u = !1,
showBullets: f = !1,
showDividers: h = !1,
interactive: p = !0,
fullWidth: g = !0,
disabled: y = !1,
activeItemId: b,
defaultActiveItemId: v,
onActiveChange: N,
expandedIds: x,
defaultExpandedIds: w = [],
onExpandedChange: T,
role: D,
ariaLabel: k,
emptyState: S,
linkComponent: V,
renderItem: A,
className: F,
headerClassName: L,
listClassName: $,
itemClassName: E,
itemContentClassName: C,
titleClassName: B,
descriptionClassName: K,
bulletClassName: I,
textClassName: R,
iconClassName: M,
badgeClassName: z,
shortcutClassName: j,
trailingClassName: W,
subListClassName: X,
separatorClassName: ne,
chevronClassName: ge,
externalIconClassName: Ne,
emptyStateClassName: De,
style: Qe,
headerStyle: ke,
listStyle: he,
itemStyle: Ae,
itemContentStyle: $e,
titleStyle: Ee,
descriptionStyle: Re,
bulletStyle: Le,
textStyle: et,
iconStyle: se,
badgeStyle: q,
shortcutStyle: Ye,
trailingStyle: _e,
subListStyle: tt,
separatorStyle: me
}) => {
const ye = r === "ordered", oe = r === "inline", Xe = ye ? "ol" : "ul", [Be, qe] = H(v), [nt, ze] = H(w), pe = b ?? Be, Pe = x ?? nt, ce = Se(
() => new Set(Pe),
[Pe]
), yt = s.filter((be) => !be.hidden), Gt = (be) => {
const Ue = ce.has(be) ? Pe.filter((Yt) => Yt !== be) : [...Pe, be];
x || ze(Ue), T?.(Ue);
}, Et = (be, Ue) => {
b === void 0 && qe(be), N?.(be, Ue);
};
return /* @__PURE__ */ P(
"div",
{
className: O(
"text-foreground",
g ? "w-full" : "inline-block",
F
),
style: Qe,
children: [
(e || n) && /* @__PURE__ */ P(
"div",
{
className: O("mb-3 flex items-start gap-2", L),
style: ke,
children: [
t && /* @__PURE__ */ d(
"span",
{
className: O(
"mt-0.5 shrink-0 text-foreground/70",
M
),
style: se,
children: t
}
),
/* @__PURE__ */ P("div", { className: "min-w-0", children: [
e && /* @__PURE__ */ d(
"div",
{
className: O(
"truncate text-base font-semibold text-foreground",
B
),
style: Ee,
children: e
}
),
n && /* @__PURE__ */ d(
"p",
{
className: O(
"mt-0.5 text-sm text-foreground/70",
K
),
style: Re,
children: n
}
)
] })
]
}
),
yt.length === 0 ? /* @__PURE__ */ d(
"div",
{
className: O(
"rounded-md border border-dashed border-border px-3 py-4 text-sm text-foreground/70",
De
),
children: S ?? "No items to show."
}
) : /* @__PURE__ */ d(
Xe,
{
role: D,
"aria-label": k,
className: O(
oe ? "flex list-none flex-wrap gap-2 p-0" : ye ? "list-decimal space-y-1 pl-5" : "list-none space-y-1 p-0",
o === "menu" && "rounded-lg border border-border bg-popover p-1",
o === "card" && !ye && !oe && "space-y-2",
$
),
style: he,
children: yt.map((be, Ue) => /* @__PURE__ */ d(
lo,
{
item: be,
index: Ue,
depth: 0,
isInline: oe,
isOrdered: ye,
showTree: u,
showBullets: f,
showDividers: h,
interactive: p,
disabled: y,
variant: o,
size: i,
density: a,
nestedMode: l,
bulletVariant: c,
activeItemId: pe,
expandedIds: ce,
toggleExpanded: Gt,
selectItem: Et,
linkComponent: V,
renderItem: A,
itemClassName: E,
itemContentClassName: C,
bulletClassName: I,
textClassName: R,
iconClassName: M,
badgeClassName: z,
shortcutClassName: j,
trailingClassName: W,
subListClassName: X,
separatorClassName: ne,
chevronClassName: ge,
externalIconClassName: Ne,
itemStyle: Ae,
itemContentStyle: $e,
bulletStyle: Le,
textStyle: et,
iconStyle: se,
badgeStyle: q,
shortcutStyle: Ye,
trailingStyle: _e,
subListStyle: tt,
separatorStyle: me
},
qn(be, Ue, 0)
))
}
)
]
}
);
}, ks = gt({});
function Ps(e) {
const t = G(null);
return t.current === null && (t.current = e()), t.current;
}
const Gl = typeof window < "u", co = Gl ? Ns : ee, Cn = /* @__PURE__ */ gt(null);
function Ds(e, t) {
e.indexOf(t) === -1 && e.push(t);
}
function hn(e, t) {
const n = e.indexOf(t);
n > -1 && e.splice(n, 1);
}
const Ge = (e, t, n) => n > t ? t : n < e ? e : n;
function Zn(e, t) {
return t ? `${e}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${t}` : e;
}
let kt = () => {
}, Ze = () => {
};
typeof process < "u" && process.env?.NODE_ENV !== "production" && (kt = (e, t, n) => {
!e && typeof console < "u" && console.warn(Zn(t, n));
}, Ze = (e, t, n) => {
if (!e)
throw new Error(Zn(t, n));
});
const it = {}, uo = (e) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(e);
function fo(e) {
return typeof e == "object" && e !== null;
}
const ho = (e) => /^0[^.\s]+$/u.test(e);
// @__NO_SIDE_EFFECTS__
function mo(e) {
let t;
return () => (t === void 0 && (t = e()), t);
}
const Ie = /* @__NO_SIDE_EFFECTS__ */ (e) => e, Yl = (e, t) => (n) => t(e(n)), zt = (...e) => e.reduce(Yl), jt = /* @__NO_SIDE_EFFECTS__ */ (e, t, n) => {
const s = t - e;
return s === 0 ? 1 : (n - e) / s;
};
class As {
constructor() {
this.subscriptions = [];
}
add(t) {
return Ds(this.subscriptions, t), () => hn(this.subscriptions, t);
}
notify(t, n, s) {
const r = this.subscriptions.length;
if (r)
if (r === 1)
this.subscriptions[0](t, n, s);
else
for (let o = 0; o < r; o++) {
const i = this.subscriptions[o];
i && i(t, n, s);
}
}
getSize() {
return this.subscriptions.length;
}
clear() {
this.subscriptions.length = 0;
}
}
const Ce = /* @__NO_SIDE_EFFECTS__ */ (e) => e * 1e3, Ve = /* @__NO_SIDE_EFFECTS__ */ (e) => e / 1e3;
function po(e, t) {
return t ? e * (1e3 / t) : 0;
}
const ar = /* @__PURE__ */ new Set();
function Es(e, t, n) {
e || ar.has(t) || (console.warn(Zn(t, n)), ar.add(t));
}
const go = (e, t, n) => (((1 - 3 * n + 3 * t) * e + (3 * n - 6 * t)) * e + 3 * t) * e, Xl = 1e-7, ql = 12;
function Zl(e, t, n, s, r) {
let o, i, a = 0;
do
i = t + (n - t) / 2, o = go(i, s, r) - e, o > 0 ? n = i : t = i;
while (Math.abs(o) > Xl && ++a < ql);
return i;
}
function Ut(e, t, n, s) {
if (e === t && n === s)
return Ie;
const r = (o) => Zl(o, 0, 1, e, n);
return (o) => o === 0 || o === 1 ? o : go(r(o), t, s);
}
const yo = (e) => (t) => t <= 0.5 ? e(2 * t) / 2 : (2 - e(2 * (1 - t))) / 2, bo = (e) => (t) => 1 - e(1 - t), xo = /* @__PURE__ */ Ut(0.33, 1.53, 0.69, 0.99), Ms = /* @__PURE__ */ bo(xo), vo = /* @__PURE__ */ yo(Ms), wo = (e) => e >= 1 ? 1 : (e *= 2) < 1 ? 0.5 * Ms(e) : 0.5 * (2 - Math.pow(2, -10 * (e - 1))), Vs = (e) => 1 - Math.sin(Math.acos(e)), No = bo(Vs), To = yo(Vs), Jl = /* @__PURE__ */ Ut(0.42, 0, 1, 1), Ql = /* @__PURE__ */ Ut(0, 0, 0.58, 1), So = /* @__PURE__ */ Ut(0.42, 0, 0.58, 1), ec = (e) => Array.isArray(e) && typeof e[0] != "number", Co = (e) => Array.isArray(e) && typeof e[0] == "number", lr = {
linear: Ie,
easeIn: Jl,
easeInOut: So,
easeOut: Ql,
circIn: Vs,
circInOut: To,
circOut: No,
backIn: Ms,
backInOut: vo,
backOut: xo,
anticipate: wo
}, tc = (e) => typeof e == "string", cr = (e) => {
if (Co(e)) {
Ze(e.length === 4, "Cubic bezier arrays must contain four numerical values.", "cubic-bezier-length");
const [t, n, s, r] = e;
return Ut(t, n, s, r);
} else if (tc(e))
return Ze(lr[e] !== void 0, `Invalid easing type '${e}'`, "invalid-easing-type"), lr[e];
return e;
}, qt = [
"setup",
// Compute
"read",
// Read
"resolveKeyframes",
// Write/Read/Write/Read
"preUpdate",
// Compute
"update",
// Compute
"preRender",
// Compute
"render",
// Write
"postRender"
// Compute
];
function nc(e, t) {
let n = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), r = !1, o = !1;
const i = /* @__PURE__ */ new WeakSet();
let a = {
delta: 0,
timestamp: 0,
isProcessing: !1
};
function l(u) {
i.has(u) && (c.schedule(u), e()), u(a);
}
const c = {
/**
* Schedule a process to run on the next frame.
*/
schedule: (u, f = !1, h = !1) => {
const g = h && r ? n : s;
return f && i.add(u), g.add(u), u;
},
/**
* Cancel the provided callback from running on the next frame.
*/
cancel: (u) => {
s.delete(u), i.delete(u);
},
/**
* Execute all schedule callbacks.
*/
process: (u) => {
if (a = u, r) {
o = !0;
return;
}
r = !0;
const f = n;
n = s, s = f, n.forEach(l), n.clear(), r = !1, o && (o = !1, c.process(u));
}
};
return c;
}
const sc = 40;
function ko(e, t) {
let n = !1, s = !0;
const r = {
delta: 0,
timestamp: 0,
isProcessing: !1
}, o = () => n = !0, i = qt.reduce((x, w) => (x[w] = nc(o), x), {}), { setup: a, read: l, resolveKeyframes: c, preUpdate: u, update: f, preRender: h, render: p, postRender: g } = i, y = () => {
const x = it.useManualTiming, w = x ? r.timestamp : performance.now();
n = !1, x || (r.delta = s ? 1e3 / 60 : Math.max(Math.min(w - r.timestamp, sc), 1)), r.timestamp = w, r.isProcessing = !0, a.process(r), l.process(r), c.process(r), u.process(r), f.process(r), h.process(r), p.process(r), g.process(r), r.isProcessing = !1, n && t && (s = !1, e(y));
}, b = () => {
n = !0, s = !0, r.isProcessing || e(y);
};
return { schedule: qt.reduce((x, w) => {
const T = i[w];
return x[w] = (D, k = !1, S = !1) => (n || b(), T.schedule(D, k, S)), x;
}, {}), cancel: (x) => {
for (let w = 0; w < qt.length; w++)
i[qt[w]].cancel(x);
}, state: r, steps: i };
}
const { schedule: Z, cancel: ot, state: ue, steps: Rn } = /* @__PURE__ */ ko(typeof requestAnimationFrame < "u" ? requestAnimationFrame : Ie, !0);
let nn;
function rc() {
nn = void 0;
}
const xe = {
now: () => (nn === void 0 && xe.set(ue.isProcessing || it.useManualTiming ? ue.timestamp : performance.now()), nn),
set: (e) => {
nn = e, queueMicrotask(rc);
}
}, Po = (e) => (t) => typeof t == "string" && t.startsWith(e), Do = /* @__PURE__ */ Po("--"), ic = /* @__PURE__ */ Po("var(--"), Is = (e) => ic(e) ? oc.test(e.split("/*")[0].trim()) : !1, oc = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
function ur(e) {
return typeof e != "string" ? !1 : e.split("/*")[0].includes("var(--");
}
const Pt = {
test: (e) => typeof e == "number",
parse: parseFloat,
transform: (e) => e
}, Ot = {
...Pt,
transform: (e) => Ge(0, 1, e)
}, Zt = {
...Pt,
default: 1
}, It = (e) => Math.round(e * 1e5) / 1e5, Rs = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
function ac(e) {
return e == null;
}
const lc = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu, Ls = (e, t) => (n) => !!(typeof n == "string" && lc.test(n) && n.startsWith(e) || t && !ac(n) && Object.prototype.hasOwnProperty.call(n, t)), Ao = (e, t, n) => (s) => {
if (typeof s != "string")
return s;
const [r, o, i, a] = s.match(Rs);
return {
[e]: parseFloat(r),
[t]: parseFloat(o),
[n]: parseFloat(i),
alpha: a !== void 0 ? parseFloat(a) : 1
};
}, cc = (e) => Ge(0, 255, e), Ln = {
...Pt,
transform: (e) => Math.round(cc(e))
}, ft = {
test: /* @__PURE__ */ Ls("rgb", "red"),
parse: /* @__PURE__ */ Ao("red", "green", "blue"),
transform: ({ red: e, green: t, blue: n, alpha: s = 1 }) => "rgba(" + Ln.transform(e) + ", " + Ln.transform(t) + ", " + Ln.transform(n) + ", " + It(Ot.transform(s)) + ")"
};
function uc(e) {
let t = "", n = "", s = "", r = "";
return e.length > 5 ? (t = e.substring(1, 3), n = e.substring(3, 5), s = e.substring(5, 7), r = e.substring(7, 9)) : (t = e.substring(1, 2), n = e.substring(2, 3), s = e.substring(3, 4), r = e.substring(4, 5), t += t, n += n, s += s, r += r), {
red: parseInt(t, 16),
green: parseInt(n, 16),
blue: parseInt(s, 16),
alpha: r ? parseInt(r, 16) / 255 : 1
};
}
const Jn = {
test: /* @__PURE__ */ Ls("#"),
parse: uc,
transform: ft.transform
}, Wt = /* @__NO_SIDE_EFFECTS__ */ (e) => ({
test: (t) => typeof t == "string" && t.endsWith(e) && t.split(" ").length === 1,
parse: parseFloat,
transform: (t) => `${t}${e}`
}), st = /* @__PURE__ */ Wt("deg"), He = /* @__PURE__ */ Wt("%"), _ = /* @__PURE__ */ Wt("px"), dc = /* @__PURE__ */ Wt("vh"), fc = /* @__PURE__ */ Wt("vw"), dr = {
...He,
parse: (e) => He.parse(e) / 100,
transform: (e) => He.transform(e * 100)
}, xt = {
test: /* @__PURE__ */ Ls("hsl", "hue"),
parse: /* @__PURE__ */ Ao("hue", "saturation", "lightness"),
transform: ({ hue: e, saturation: t, lightness: n, alpha: s = 1 }) => "hsla(" + Math.round(e) + ", " + He.transform(It(t)) + ", " + He.transform(It(n)) + ", " + It(Ot.transform(s)) + ")"
}, re = {
test: (e) => ft.test(e) || Jn.test(e) || xt.test(e),
parse: (e) => ft.test(e) ? ft.parse(e) : xt.test(e) ? xt.parse(e) : Jn.parse(e),
transform: (e) => typeof e == "string" ? e : e.hasOwnProperty("red") ? ft.transform(e) : xt.transform(e),
getAnimatableNone: (e) => {
const t = re.parse(e);
return t.alpha = 0, re.transform(t);
}
}, hc = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
function mc(e) {
return isNaN(e) && typeof e == "string" && (e.match(Rs)?.length || 0) + (e.match(hc)?.length || 0) > 0;
}
const Eo = "number", Mo = "color", pc = "var", gc = "var(", fr = "${}", yc = /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 St(e) {
const t = e.toString(), n = [], s = {
color: [],
number: [],
var: []
}, r = [];
let o = 0;
const a = t.replace(yc, (l) => (re.test(l) ? (s.color.push(o), r.push(Mo), n.push(re.parse(l))) : l.startsWith(gc) ? (s.var.push(o), r.push(pc), n.push(l)) : (s.number.push(o), r.push(Eo), n.push(parseFloat(l))), ++o, fr)).split(fr);
return { values: n, split: a, indexes: s, types: r };
}
function bc(e) {
return St(e).values;
}
function Vo({ split: e, types: t }) {
const n = e.length;
return (s) => {
let r = "";
for (let o = 0; o < n; o++)
if (r += e[o], s[o] !== void 0) {
const i = t[o];
i === Eo ? r += It(s[o]) : i === Mo ? r += re.transform(s[o]) : r += s[o];
}
return r;
};
}
function xc(e) {
return Vo(St(e));
}
const vc = (e) => typeof e == "number" ? 0 : re.test(e) ? re.getAnimatableNone(e) : e, wc = (e, t) => typeof e == "number" ? t?.trim().endsWith("/") ? e : 0 : vc(e);
function Nc(e) {
const t = St(e);
return Vo(t)(t.values.map((s, r) => wc(s, t.split[r])));
}
const Oe = {
test: mc,
parse: bc,
createTransformer: xc,
getAnimatableNone: Nc
};
function Bn(e, t, n) {
return n < 0 && (n += 1), n > 1 && (n -= 1), n < 1 / 6 ? e + (t - e) * 6 * n : n < 1 / 2 ? t : n < 2 / 3 ? e + (t - e) * (2 / 3 - n) * 6 : e;
}
function Tc({ hue: e, saturation: t, lightness: n, alpha: s }) {
e /= 360, t /= 100, n /= 100;
let r = 0, o = 0, i = 0;
if (!t)
r = o = i = n;
else {
const a = n < 0.5 ? n * (1 + t) : n + t - n * t, l = 2 * n - a;
r = Bn(l, a, e + 1 / 3), o = Bn(l, a, e), i = Bn(l, a, e - 1 / 3);
}
return {
red: Math.round(r * 255),
green: Math.round(o * 255),
blue: Math.round(i * 255),
alpha: s
};
}
function mn(e, t) {
return (n) => n > 0 ? t : e;
}
const Q = (e, t, n) => e + (t - e) * n, Fn = (e, t, n) => {
const s = e * e, r = n * (t * t - s) + s;
return r < 0 ? 0 : Math.sqrt(r);
}, Sc = [Jn, ft, xt], Cc = (e) => Sc.find((t) => t.test(e));
function hr(e) {
const t = Cc(e);
if (kt(!!t, `'${e}' is not an animatable color. Use the equivalent color code instead.`, "color-not-animatable"), !t)
return !1;
let n = t.parse(e);
return t === xt && (n = Tc(n)), n;
}
const mr = (e, t) => {
const n = hr(e), s = hr(t);
if (!n || !s)
return mn(e, t);
const r = { ...n };
return (o) => (r.red = Fn(n.red, s.red, o), r.green = Fn(n.green, s.green, o), r.blue = Fn(n.blue, s.blue, o), r.alpha = Q(n.alpha, s.alpha, o), ft.transform(r));
}, Qn = /* @__PURE__ */ new Set(["none", "hidden"]);
function kc(e, t) {
return Qn.has(e) ? (n) => n <= 0 ? e : t : (n) => n >= 1 ? t : e;
}
function Pc(e, t) {
return (n) => Q(e, t, n);
}
function Bs(e) {
return typeof e == "number" ? Pc : typeof e == "string" ? Is(e) ? mn : re.test(e) ? mr : Ec : Array.isArray(e) ? Io : typeof e == "object" ? re.test(e) ? mr : Dc : mn;
}
function Io(e, t) {
const n = [...e], s = n.length, r = e.map((o, i) => Bs(o)(o, t[i]));
return (o) => {
for (let i = 0; i < s; i++)
n[i] = r[i](o);
return n;
};
}
function Dc(e, t) {
const n = { ...e, ...t }, s = {};
for (const r in n)
e[r] !== void 0 && t[r] !== void 0 && (s[r] = Bs(e[r])(e[r], t[r]));
return (r) => {
for (const o in s)
n[o] = s[o](r);
return n;
};
}
function Ac(e, t) {
const n = [], s = { color: 0, var: 0, number: 0 };
for (let r = 0; r < t.values.length; r++) {
const o = t.types[r], i = e.indexes[o][s[o]], a = e.values[i] ?? 0;
n[r] = a, s[o]++;
}
return n;
}
const Ec = (e, t) => {
const n = Oe.createTransformer(t), s = St(e), r = St(t);
return s.indexes.var.length === r.indexes.var.length && s.indexes.color.length === r.indexes.color.length && s.indexes.number.length >= r.indexes.number.length ? Qn.has(e) && !r.values.length || Qn.has(t) && !s.values.length ? kc(e, t) : zt(Io(Ac(s, r), r.values), n) : (kt(!0, `Complex values '${e}' and '${t}' 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"), mn(e, t));
};
function Ro(e, t, n) {
return typeof e == "number" && typeof t == "number" && typeof n == "number" ? Q(e, t, n) : Bs(e)(e, t);
}
const Mc = (e) => {
const t = ({ timestamp: n }) => e(n);
return {
start: (n = !0) => Z.update(t, n),
stop: () => ot(t),
/**
* If we're processing this frame we can use the
* framelocked timestamp to keep things in sync.
*/
now: () => ue.isProcessing ? ue.timestamp : xe.now()
};
}, Lo = (e, t, n = 10) => {
let s = "";
const r = Math.max(Math.round(t / n), 2);
for (let o = 0; o < r; o++)
s += Math.round(e(o / (r - 1)) * 1e4) / 1e4 + ", ";
return `linear(${s.substring(0, s.length - 2)})`;
}, pn = 2e4;
function Fs(e) {
let t = 0;
const n = 50;
let s = e.next(t);
for (; !s.done && t < pn; )
t += n, s = e.next(t);
return t >= pn ? 1 / 0 : t;
}
function Vc(e, t = 100, n) {
const s = n({ ...e, keyframes: [0, t] }), r = Math.min(Fs(s), pn);
return {
type: "keyframes",
ease: (o) => s.next(r * o).value / t,
duration: /* @__PURE__ */ Ve(r)
};
}
const te = {
// 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
};
function es(e, t) {
return e * Math.sqrt(1 - t * t);
}
const Ic = 12;
function Rc(e, t, n) {
let s = n;
for (let r = 1; r < Ic; r++)
s = s - e(s) / t(s);
return s;
}
const jn = 1e-3;
function Lc({ duration: e = te.duration, bounce: t = te.bounce, velocity: n = te.velocity, mass: s = te.mass }) {
let r, o;
kt(e <= /* @__PURE__ */ Ce(te.maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit");
let i = 1 - t;
i = Ge(te.minDamping, te.maxDamping, i), e = Ge(te.minDuration, te.maxDuration, /* @__PURE__ */ Ve(e)), i < 1 ? (r = (c) => {
const u = c * i, f = u * e, h = u - n, p = es(c, i), g = Math.exp(-f);
return jn - h / p * g;
}, o = (c) => {
const f = c * i * e, h = f * n + n, p = Math.pow(i, 2) * Math.pow(c, 2) * e, g = Math.exp(-f), y = es(Math.pow(c, 2), i);
return (-r(c) + jn > 0 ? -1 : 1) * ((h - p) * g) / y;
}) : (r = (c) => {
const u = Math.exp(-c * e), f = (c - n) * e + 1;
return -jn + u * f;
}, o = (c) => {
const u = Math.exp(-c * e), f = (n - c) * (e * e);
return u * f;
});
const a = 5 / e, l = Rc(r, o, a);
if (e = /* @__PURE__ */ Ce(e), isNaN(l))
return {
stiffness: te.stiffness,
damping: te.damping,
duration: e
};
{
const c = Math.pow(l, 2) * s;
return {
stiffness: c,
damping: i * 2 * Math.sqrt(s * c),
duration: e
};
}
}
const Bc = ["duration", "bounce"], Fc = ["stiffness", "damping", "mass"];
function pr(e, t) {
return t.some((n) => e[n] !== void 0);
}
function jc(e) {
let t = {
velocity: te.velocity,
stiffness: te.stiffness,
damping: te.damping,
mass: te.mass,
isResolvedFromDuration: !1,
...e
};
if (!pr(e, Fc) && pr(e, Bc))
if (t.velocity = 0, e.visualDuration) {
const n = e.visualDuration, s = 2 * Math.PI / (n * 1.2), r = s * s, o = 2 * Ge(0.05, 1, 1 - (e.bounce || 0)) * Math.sqrt(r);
t = {
...t,
mass: te.mass,
stiffness: r,
damping: o
};
} else {
const n = Lc({ ...e, velocity: 0 });
t = {
...t,
...n,
mass: te.mass
}, t.isResolvedFromDuration = !0;
}
return t;
}
function gn(e = te.visualDuration, t = te.bounce) {
const n = typeof e != "object" ? {
visualDuration: e,
keyframes: [0, 1],
bounce: t
} : e;
let { restSpeed: s, restDelta: r } = n;
const o = n.keyframes[0], i = n.keyframes[n.keyframes.length - 1], a = { done: !1, value: o }, { stiffness: l, damping: c, mass: u, duration: f, velocity: h, isResolvedFromDuration: p } = jc({
...n,
velocity: -/* @__PURE__ */ Ve(n.velocity || 0)
}), g = h || 0, y = c / (2 * Math.sqrt(l * u)), b = i - o, v = /* @__PURE__ */ Ve(Math.sqrt(l / u)), N = Math.abs(b) < 5;
s || (s = N ? te.restSpeed.granular : te.restSpeed.default), r || (r = N ? te.restDelta.granular : te.restDelta.default);
let x, w, T, D, k, S;
if (y < 1)
T = es(v, y), D = (g + y * v * b) / T, x = (A) => {
const F = Math.exp(-y * v * A);
return i - F * (D * Math.sin(T * A) + b * Math.cos(T * A));
}, k = y * v * D + b * T, S = y * v * b - D * T, w = (A) => Math.exp(-y * v * A) * (k * Math.sin(T * A) + S * Math.cos(T * A));
else if (y === 1) {
x = (F) => i - Math.exp(-v * F) * (b + (g + v * b) * F);
const A = g + v * b;
w = (F) => Math.exp(-v * F) * (v * A * F - g);
} else {
const A = v * Math.sqrt(y * y - 1);
x = (E) => {
const C = Math.exp(-y * v * E), B = Math.min(A * E, 300);
return i - C * ((g + y * v * b) * Math.sinh(B) + A * b * Math.cosh(B)) / A;
};
const F = (g + y * v * b) / A, L = y * v * F - b * A, $ = y * v * b - F * A;
w = (E) => {
const C = Math.exp(-y * v * E), B = Math.min(A * E, 300);
return C * (L * Math.sinh(B) + $ * Math.cosh(B));
};
}
const V = {
calculatedDuration: p && f || null,
velocity: (A) => /* @__PURE__ */ Ce(w(A)),
next: (A) => {
if (!p && y < 1) {
const L = Math.exp(-y * v * A), $ = Math.sin(T * A), E = Math.cos(T * A), C = i - L * (D * $ + b * E), B = /* @__PURE__ */ Ce(L * (k * $ + S * E));
return a.done = Math.abs(B) <= s && Math.abs(i - C) <= r, a.value = a.done ? i : C, a;
}
const F = x(A);
if (p)
a.done = A >= f;
else {
const L = /* @__PURE__ */ Ce(w(A));
a.done = Math.abs(L) <= s && Math.abs(i - F) <= r;
}
return a.value = a.done ? i : F, a;
},
toString: () => {
const A = Math.min(Fs(V), pn), F = Lo((L) => V.next(A * L).value, A, 30);
return A + "ms " + F;
},
toTransition: () => {
}
};
return V;
}
gn.applyToOptions = (e) => {
const t = Vc(e, 100, gn);
return e.ease = t.ease, e.duration = /* @__PURE__ */ Ce(t.duration), e.type = "keyframes", e;
};
const Oc = 5;
function Bo(e, t, n) {
const s = Math.max(t - Oc, 0);
return po(n - e(s), t - s);
}
function ts({ keyframes: e, velocity: t = 0, power: n = 0.8, timeConstant: s = 325, bounceDamping: r = 10, bounceStiffness: o = 500, modifyTarget: i, min: a, max: l, restDelta: c = 0.5, restSpeed: u }) {
const f = e[0], h = {
done: !1,
value: f
}, p = (S) => a !== void 0 && S < a || l !== void 0 && S > l, g = (S) => a === void 0 ? l : l === void 0 || Math.abs(a - S) < Math.abs(l - S) ? a : l;
let y = n * t;
const b = f + y, v = i === void 0 ? b : i(b);
v !== b && (y = v - f);
const N = (S) => -y * Math.exp(-S / s), x = (S) => v + N(S), w = (S) => {
const V = N(S), A = x(S);
h.done = Math.abs(V) <= c, h.value = h.done ? v : A;
};
let T, D;
const k = (S) => {
p(h.value) && (T = S, D = gn({
keyframes: [h.value, g(h.value)],
velocity: Bo(x, S, h.value),
// TODO: This should be passing * 1000
damping: r,
stiffness: o,
restDelta: c,
restSpeed: u
}));
};
return k(0), {
calculatedDuration: null,
next: (S) => {
let V = !1;
return !D && T === void 0 && (V = !0, w(S), k(S)), T !== void 0 && S >= T ? D.next(S - T) : (!V && w(S), h);
}
};
}
function $c(e, t, n) {
const s = [], r = n || it.mix || Ro, o = e.length - 1;
for (let i = 0; i < o; i++) {
let a = r(e[i], e[i + 1]);
if (t) {
const l = Array.isArray(t) ? t[i] || Ie : t;
a = zt(l, a);
}
s.push(a);
}
return s;
}
function _c(e, t, { clamp: n = !0, ease: s, mixer: r } = {}) {
const o = e.length;
if (Ze(o === t.length, "Both input and output ranges must be the same length", "range-length"), o === 1)
return () => t[0];
if (o === 2 && t[0] === t[1])
return () => t[1];
const i = e[0] === e[1];
e[0] > e[o - 1] && (e = [...e].reverse(), t = [...t].reverse());
const a = $c(t, s, r), l = a.length, c = (u) => {
if (i && u < e[0])
return t[0];
let f = 0;
if (l > 1)
for (; f < e.length - 2 && !(u < e[f + 1]); f++)
;
const h = /* @__PURE__ */ jt(e[f], e[f + 1], u);
return a[f](h);
};
return n ? (u) => c(Ge(e[0], e[o - 1], u)) : c;
}
function zc(e, t) {
const n = e[e.length - 1];
for (let s = 1; s <= t; s++) {
const r = /* @__PURE__ */ jt(0, t, s);
e.push(Q(n, 1, r));
}
}
function Uc(e) {
const t = [0];
return zc(t, e.length - 1), t;
}
function Wc(e, t) {
return e.map((n) => n * t);
}
function Kc(e, t) {
return e.map(() => t || So).splice(0, e.length - 1);
}
function vt({ duration: e = 300, keyframes: t, times: n, ease: s = "easeInOut" }) {
const r = ec(s) ? s.map(cr) : cr(s), o = {
done: !1,
value: t[0]
}, i = Wc(
// 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 === t.length ? n : Uc(t),
e
), a = _c(i, t, {
ease: Array.isArray(r) ? r : Kc(t, r)
});
return {
calculatedDuration: e,
next: (l) => (o.value = a(l), o.done = l >= e, o)
};
}
const Hc = (e) => e !== null;
function kn(e, { repeat: t, repeatType: n = "loop" }, s, r = 1) {
const o = e.filter(Hc), a = r < 0 || t && n !== "loop" && t % 2 === 1 ? 0 : o.length - 1;
return !a || s === void 0 ? o[a] : s;
}
const Gc = {
decay: ts,
inertia: ts,
tween: vt,
keyframes: vt,
spring: gn
};
function Fo(e) {
typeof e.type == "string" && (e.type = Gc[e.type]);
}
class js {
constructor() {
this.updateFinished();
}
get finished() {
return this._finished;
}
updateFinished() {
this._finished = new Promise((t) => {
this.resolve = t;
});
}
notifyFinished() {
this.resolve();
}
/**
* Allows the animation to be awaited.
*
* @deprecated Use `finished` instead.
*/
then(t, n) {
return this.finished.then(t, n);
}
}
const Yc = (e) => e / 100;
class yn extends js {
constructor(t) {
super(), this.state = "idle", this.startTime = null, this.isStopped = !1, this.currentTime = 0, this.holdTime = null, this.playbackSpeed = 1, this.delayState = {
done: !1,
value: void 0
}, this.stop = () => {
const { motionValue: n } = this.options;
n && n.updatedAt !== xe.now() && this.tick(xe.now()), this.isStopped = !0, this.state !== "idle" && (this.teardown(), this.options.onStop?.());
}, this.options = t, this.initAnimation(), this.play(), t.autoplay === !1 && this.pause();
}
initAnimation() {
const { options: t } = this;
Fo(t);
const { type: n = vt, repeat: s = 0, repeatDelay: r = 0, repeatType: o, velocity: i = 0 } = t;
let { keyframes: a } = t;
const l = n || vt;
process.env.NODE_ENV !== "production" && l !== vt && Ze(a.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${a}`, "spring-two-frames"), l !== vt && typeof a[0] != "number" && (this.mixKeyframes = zt(Yc, Ro(a[0], a[1])), a = [0, 100]);
const c = l({ ...t, keyframes: a });
o === "mirror" && (this.mirroredGenerator = l({
...t,
keyframes: [...a].reverse(),
velocity: -i
})), c.calculatedDuration === null && (c.calculatedDuration = Fs(c));
const { calculatedDuration: u } = c;
this.calculatedDuration = u, this.resolvedDuration = u + r, this.totalDuration = this.resolvedDuration * (s + 1) - r, this.generator = c;
}
updateTime(t) {
const n = Math.round(t - this.startTime) * this.playbackSpeed;
this.holdTime !== null ? this.currentTime = this.holdTime : this.currentTime = n;
}
tick(t, n = !1) {
const { generator: s, totalDuration: r, mixKeyframes: o, mirroredGenerator: i, resolvedDuration: a, calculatedDuration: l } = this;
if (this.startTime === null)
return s.next(0);
const { delay: c = 0, keyframes: u, repeat: f, repeatType: h, repeatDelay: p, type: g, onUpdate: y, finalKeyframe: b } = this.options;
this.speed > 0 ? this.startTime = Math.min(this.startTime, t) : this.speed < 0 && (this.startTime = Math.min(t - r / this.speed, this.startTime)), n ? this.currentTime = t : this.updateTime(t);
const v = this.currentTime - c * (this.playbackSpeed >= 0 ? 1 : -1), N = this.playbackSpeed >= 0 ? v < 0 : v > r;
this.currentTime = Math.max(v, 0), this.state === "finished" && this.holdTime === null && (this.currentTime = r);
let x = this.currentTime, w = s;
if (f) {
const S = Math.min(this.currentTime, r) / a;
let V = Math.floor(S), A = S % 1;
!A && S >= 1 && (A = 1), A === 1 && V--, V = Math.min(V, f + 1), !!(V % 2) && (h === "reverse" ? (A = 1 - A, p && (A -= p / a)) : h === "mirror" && (w = i)), x = Ge(0, 1, A) * a;
}
let T;
N ? (this.delayState.value = u[0], T = this.delayState) : T = w.next(x), o && !N && (T.value = o(T.value));
let { done: D } = T;
!N && l !== null && (D = this.playbackSpeed >= 0 ? this.currentTime >= r : this.currentTime <= 0);
const k = this.holdTime === null && (this.state === "finished" || this.state === "running" && D);
return k && g !== ts && (T.value = kn(u, this.options, b, this.speed)), y && y(T.value), k && this.finish(), T;
}
/**
* 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(t, n) {
return this.finished.then(t, n);
}
get duration() {
return /* @__PURE__ */ Ve(this.calculatedDuration);
}
get iterationDuration() {
const { delay: t = 0 } = this.options || {};
return this.duration + /* @__PURE__ */ Ve(t);
}
get time() {
return /* @__PURE__ */ Ve(this.currentTime);
}
set time(t) {
t = /* @__PURE__ */ Ce(t), this.currentTime = t, this.startTime === null || this.holdTime !== null || this.playbackSpeed === 0 ? this.holdTime = t : this.driver && (this.startTime = this.driver.now() - t / this.playbackSpeed), this.driver ? this.driver.start(!1) : (this.startTime = 0, this.state = "paused", this.holdTime = t, this.tick(t));
}
/**
* Returns the generator's velocity at the current time in units/second.
* Uses the analytical derivative when available (springs), avoiding
* the MotionValue's frame-dependent velocity estimation.
*/
getGeneratorVelocity() {
const t = this.currentTime;
if (t <= 0)
return this.options.velocity || 0;
if (this.generator.velocity)
return this.generator.velocity(t);
const n = this.generator.next(t).value;
return Bo((s) => this.generator.next(s).value, t, n);
}
get speed() {
return this.playbackSpeed;
}
set speed(t) {
const n = this.playbackSpeed !== t;
n && this.driver && this.updateTime(xe.now()), this.playbackSpeed = t, n && this.driver && (this.time = /* @__PURE__ */ Ve(this.currentTime));
}
play() {
if (this.isStopped)
return;
const { driver: t = Mc, startTime: n } = this.options;
this.driver || (this.driver = t((r) => this.tick(r))), this.options.onPlay?.();
const s = this.driver.now();
this.state === "finished" ? (this.updateFinished(), this.startTime = s) : this.holdTime !== null ? this.startTime = s - this.holdTime : this.startTime || (this.startTime = n ?? s), 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(xe.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(t) {
return this.startTime = 0, this.tick(t, !0);
}
attachTimeline(t) {
return this.options.allowFlatten && (this.options.type = "keyframes", this.options.ease = "linear", this.initAnimation()), this.driver?.stop(), t.observe(this);
}
}
function Xc(e) {
for (let t = 1; t < e.length; t++)
e[t] ?? (e[t] = e[t - 1]);
}
const ht = (e) => e * 180 / Math.PI, ns = (e) => {
const t = ht(Math.atan2(e[1], e[0]));
return ss(t);
}, qc = {
x: 4,
y: 5,
translateX: 4,
translateY: 5,
scaleX: 0,
scaleY: 3,
scale: (e) => (Math.abs(e[0]) + Math.abs(e[3])) / 2,
rotate: ns,
rotateZ: ns,
skewX: (e) => ht(Math.atan(e[1])),
skewY: (e) => ht(Math.atan(e[2])),
skew: (e) => (Math.abs(e[1]) + Math.abs(e[2])) / 2
}, ss = (e) => (e = e % 360, e < 0 && (e += 360), e), gr = ns, yr = (e) => Math.sqrt(e[0] * e[0] + e[1] * e[1]), br = (e) => Math.sqrt(e[4] * e[4] + e[5] * e[5]), Zc = {
x: 12,
y: 13,
z: 14,
translateX: 12,
translateY: 13,
translateZ: 14,
scaleX: yr,
scaleY: br,
scale: (e) => (yr(e) + br(e)) / 2,
rotateX: (e) => ss(ht(Math.atan2(e[6], e[5]))),
rotateY: (e) => ss(ht(Math.atan2(-e[2], e[0]))),
rotateZ: gr,
rotate: gr,
skewX: (e) => ht(Math.atan(e[4])),
skewY: (e) => ht(Math.atan(e[1])),
skew: (e) => (Math.abs(e[1]) + Math.abs(e[4])) / 2
};
function rs(e) {
return e.includes("scale") ? 1 : 0;
}
function is(e, t) {
if (!e || e === "none")
return rs(t);
const n = e.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
let s, r;
if (n)
s = Zc, r = n;
else {
const a = e.match(/^matrix\(([-\d.e\s,]+)\)$/u);
s = qc, r = a;
}
if (!r)
return rs(t);
const o = s[t], i = r[1].split(",").map(Qc);
return typeof o == "function" ? o(i) : i[o];
}
const Jc = (e, t) => {
const { transform: n = "none" } = getComputedStyle(e);
return is(n, t);
};
function Qc(e) {
return parseFloat(e.trim());
}
const Dt = [
"transformPerspective",
"x",
"y",
"z",
"translateX",
"translateY",
"translateZ",
"scale",
"scaleX",
"scaleY",
"rotate",
"rotateX",
"rotateY",
"rotateZ",
"skew",
"skewX",
"skewY"
], At = new Set(Dt), xr = (e) => e === Pt || e === _, eu = /* @__PURE__ */ new Set(["x", "y", "z"]), tu = Dt.filter((e) => !eu.has(e));
function nu(e) {
const t = [];
return tu.forEach((n) => {
const s = e.getValue(n);
s !== void 0 && (t.push([n, s.get()]), s.set(n.startsWith("scale") ? 1 : 0));
}), t;
}
const rt = {
// Dimensions
width: ({ x: e }, { paddingLeft: t = "0", paddingRight: n = "0", boxSizing: s }) => {
const r = e.max - e.min;
return s === "border-box" ? r : r - parseFloat(t) - parseFloat(n);
},
height: ({ y: e }, { paddingTop: t = "0", paddingBottom: n = "0", boxSizing: s }) => {
const r = e.max - e.min;
return s === "border-box" ? r : r - parseFloat(t) - parseFloat(n);
},
top: (e, { top: t }) => parseFloat(t),
left: (e, { left: t }) => parseFloat(t),
bottom: ({ y: e }, { top: t }) => parseFloat(t) + (e.max - e.min),
right: ({ x: e }, { left: t }) => parseFloat(t) + (e.max - e.min),
// Transform
x: (e, { transform: t }) => is(t, "x"),
y: (e, { transform: t }) => is(t, "y")
};
rt.translateX = rt.x;
rt.translateY = rt.y;
const mt = /* @__PURE__ */ new Set();
let os = !1, as = !1, ls = !1;
function jo() {
if (as) {
const e = Array.from(mt).filter((s) => s.needsMeasurement), t = new Set(e.map((s) => s.element)), n = /* @__PURE__ */ new Map();
t.forEach((s) => {
const r = nu(s);
r.length && (n.set(s, r), s.render());
}), e.forEach((s) => s.measureInitialState()), t.forEach((s) => {
s.render();
const r = n.get(s);
r && r.forEach(([o, i]) => {
s.getValue(o)?.set(i);
});
}), e.forEach((s) => s.measureEndState()), e.forEach((s) => {
s.suspendedScrollY !== void 0 && window.scrollTo(0, s.suspendedScrollY);
});
}
as = !1, os = !1, mt.forEach((e) => e.complete(ls)), mt.clear();
}
function Oo() {
mt.forEach((e) => {
e.readKeyframes(), e.needsMeasurement && (as = !0);
});
}
function su() {
ls = !0, Oo(), jo(), ls = !1;
}
class Os {
constructor(t, n, s, r, o, i = !1) {
this.state = "pending", this.isAsync = !1, this.needsMeasurement = !1, this.unresolvedKeyframes = [...t], this.onComplete = n, this.name = s, this.motionValue = r, this.element = o, this.isAsync = i;
}
scheduleResolve() {
this.state = "scheduled", this.isAsync ? (mt.add(this), os || (os = !0, Z.read(Oo), Z.resolveKeyframes(jo))) : (this.readKeyframes(), this.complete());
}
readKeyframes() {
const { unresolvedKeyframes: t, name: n, element: s, motionValue: r } = this;
if (t[0] === null) {
const o = r?.get(), i = t[t.length - 1];
if (o !== void 0)
t[0] = o;
else if (s && n) {
const a = s.readValue(n, i);
a != null && (t[0] = a);
}
t[0] === void 0 && (t[0] = i), r && o === void 0 && r.set(t[0]);
}
Xc(t);
}
setFinalKeyframe() {
}
measureInitialState() {
}
renderEndStyles() {
}
measureEndState() {
}
complete(t = !1) {
this.state = "complete", this.onComplete(this.unresolvedKeyframes, this.finalKeyframe, t), mt.delete(this);
}
cancel() {
this.state === "scheduled" && (mt.delete(this), this.state = "pending");
}
resume() {
this.state === "pending" && this.scheduleResolve();
}
}
const ru = (e) => e.startsWith("--");
function $o(e, t, n) {
ru(t) ? e.style.setProperty(t, n) : e.style[t] = n;
}
const iu = {};
function _o(e, t) {
const n = /* @__PURE__ */ mo(e);
return () => iu[t] ?? n();
}
const ou = /* @__PURE__ */ _o(() => window.ScrollTimeline !== void 0, "scrollTimeline"), zo = /* @__PURE__ */ _o(() => {
try {
document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
} catch {
return !1;
}
return !0;
}, "linearEasing"), Vt = ([e, t, n, s]) => `cubic-bezier(${e}, ${t}, ${n}, ${s})`, vr = {
linear: "linear",
ease: "ease",
easeIn: "ease-in",
easeOut: "ease-out",
easeInOut: "ease-in-out",
circIn: /* @__PURE__ */ Vt([0, 0.65, 0.55, 1]),
circOut: /* @__PURE__ */ Vt([0.55, 0, 1, 0.45]),
backIn: /* @__PURE__ */ Vt([0.31, 0.01, 0.66, -0.59]),
backOut: /* @__PURE__ */ Vt([0.33, 1.53, 0.69, 0.99])
};
function Uo(e, t) {
if (e)
return typeof e == "function" ? zo() ? Lo(e, t) : "ease-out" : Co(e) ? Vt(e) : Array.isArray(e) ? e.map((n) => Uo(n, t) || vr.easeOut) : vr[e];
}
function au(e, t, n, { delay: s = 0, duration: r = 300, repeat: o = 0, repeatType: i = "loop", ease: a = "easeOut", times: l } = {}, c = void 0) {
const u = {
[t]: n
};
l && (u.offset = l);
const f = Uo(a, r);
Array.isArray(f) && (u.easing = f);
const h = {
delay: s,
duration: r,
easing: Array.isArray(f) ? "linear" : f,
fill: "both",
iterations: o + 1,
direction: i === "reverse" ? "alternate" : "normal"
};
return c && (h.pseudoElement = c), e.animate(u, h);
}
function Wo(e) {
return typeof e == "function" && "applyToOptions" in e;
}
function lu({ type: e, ...t }) {
return Wo(e) && zo() ? e.applyToOptions(t) : (t.duration ?? (t.duration = 300), t.ease ?? (t.ease = "easeOut"), t);
}
class Ko extends js {
constructor(t) {
if (super(), this.finishedTime = null, this.isStopped = !1, this.manualStartTime = null, !t)
return;
const { element: n, name: s, keyframes: r, pseudoElement: o, allowFlatten: i = !1, finalKeyframe: a, onComplete: l } = t;
this.isPseudoElement = !!o, this.allowFlatten = i, this.options = t, Ze(typeof t.type != "string", `Mini animate() doesn't support "type" as a string.`, "mini-spring");
const c = lu(t);
this.animation = au(n, s, r, c, o), c.autoplay === !1 && this.animation.pause(), this.animation.onfinish = () => {
if (this.finishedTime = this.time, !o) {
const u = kn(r, this.options, a, this.speed);
this.updateMotionValue && this.updateMotionValue(u), $o(n, s, u), this.animation.cancel();
}
l?.(), this.notifyFinished();
};
}
play() {
this.isStopped || (this.manualStartTime = null, 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: t } = this;
t === "idle" || t === "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() {
const t = this.options?.element;
!this.isPseudoElement && t?.isConnected && this.animation.commitStyles?.();
}
get duration() {
const t = this.animation.effect?.getComputedTiming?.().duration || 0;
return /* @__PURE__ */ Ve(Number(t));
}
get iterationDuration() {
const { delay: t = 0 } = this.options || {};
return this.duration + /* @__PURE__ */ Ve(t);
}
get time() {
return /* @__PURE__ */ Ve(Number(this.animation.currentTime) || 0);
}
set time(t) {
const n = this.finishedTime !== null;
this.manualStartTime = null, this.finishedTime = null, this.animation.currentTime = /* @__PURE__ */ Ce(t), n && this.animation.pause();
}
/**
* The playback speed of the animation.
* 1 = normal speed, 2 = double speed, 0.5 = half speed.
*/
get speed() {
return this.animation.playbackRate;
}
set speed(t) {
t < 0 && (this.finishedTime = null), this.animation.playbackRate = t;
}
get state() {
return this.finishedTime !== null ? "finished" : this.animation.playState;
}
get startTime() {
return this.manualStartTime ?? Number(this.animation.startTime);
}
set startTime(t) {
this.manualStartTime = this.animation.startTime = t;
}
/**
* Attaches a timeline to the animation, for instance the `ScrollTimeline`.
*/
attachTimeline({ timeline: t, rangeStart: n, rangeEnd: s, observe: r }) {
return this.allowFlatten && this.animation.effect?.updateTiming({ easing: "linear" }), this.animation.onfinish = null, t && ou() ? (this.animation.timeline = t, n && (this.animation.rangeStart = n), s && (this.animation.rangeEnd = s), Ie) : r(this);
}
}
const Ho = {
anticipate: wo,
backInOut: vo,
circInOut: To
};
function cu(e) {
return e in Ho;
}
function uu(e) {
typeof e.ease == "string" && cu(e.ease) && (e.ease = Ho[e.ease]);
}
const On = 10;
class du extends Ko {
constructor(t) {
uu(t), Fo(t), super(t), t.startTime !== void 0 && t.autoplay !== !1 && (this.startTime = t.startTime), this.options = t;
}
/**
* WAAPI doesn't natively have any interruption capabilities.
*
* Rather than read committed 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(t) {
const { motionValue: n, onUpdate: s, onComplete: r, element: o, ...i } = this.options;
if (!n)
return;
if (t !== void 0) {
n.set(t);
return;
}
const a = new yn({
...i,
autoplay: !1
}), l = Math.max(On, xe.now() - this.startTime), c = Ge(0, On, l - On), u = a.sample(l).value, { name: f } = this.options;
o && f && $o(o, f, u), n.setWithVelocity(a.sample(Math.max(0, l - c)).value, u, c), a.stop();
}
}
const wr = (e, t) => t === "zIndex" ? !1 : !!(typeof e == "number" || Array.isArray(e) || typeof e == "string" && // It's animatable if we have a string
(Oe.test(e) || e === "0") && // And it contains numbers and/or colors
!e.startsWith("url("));
function fu(e) {
const t = e[0];
if (e.length === 1)
return !0;
for (let n = 0; n < e.length; n++)
if (e[n] !== t)
return !0;
}
function hu(e, t, n, s) {
const r = e[0];
if (r === null)
return !1;
if (t === "display" || t === "visibility")
return !0;
const o = e[e.length - 1], i = wr(r, t), a = wr(o, t);
return kt(i === a, `You are trying to animate ${t} from "${r}" to "${o}". "${i ? o : r}" is not an animatable value.`, "value-not-animatable"), !i || !a ? !1 : fu(e) || (n === "spring" || Wo(n)) && s;
}
function cs(e) {
e.duration = 0, e.type = "keyframes";
}
const Go = /* @__PURE__ */ new Set([
"opacity",
"clipPath",
"filter",
"transform"
// TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
// or until we implement support for linear() easing.
// "background-color"
]), mu = /^(?:oklch|oklab|lab|lch|color|color-mix|light-dark)\(/;
function pu(e) {
for (let t = 0; t < e.length; t++)
if (typeof e[t] == "string" && mu.test(e[t]))
return !0;
return !1;
}
const gu = /* @__PURE__ */ new Set([
"color",
"backgroundColor",
"outlineColor",
"fill",
"stroke",
"borderColor",
"borderTopColor",
"borderRightColor",
"borderBottomColor",
"borderLeftColor"
]), yu = /* @__PURE__ */ mo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
function bu(e) {
const { motionValue: t, name: n, repeatDelay: s, repeatType: r, damping: o, type: i, keyframes: a } = e;
if (!(t?.owner?.current instanceof HTMLElement))
return !1;
const { onUpdate: c, transformTemplate: u } = t.owner.getProps();
return yu() && n && /**
* Force WAAPI for color properties with browser-only color formats
* (oklch, oklab, lab, lch, etc.) that the JS animation path can't parse.
*/
(Go.has(n) || gu.has(n) && pu(a)) && (n !== "transform" || !u) && /**
* 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.
*/
!c && !s && r !== "mirror" && o !== 0 && i !== "inertia";
}
const xu = 40;
class vu extends js {
constructor({ autoplay: t = !0, delay: n = 0, type: s = "keyframes", repeat: r = 0, repeatDelay: o = 0, repeatType: i = "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 = xe.now();
const h = {
autoplay: t,
delay: n,
type: s,
repeat: r,
repeatDelay: o,
repeatType: i,
name: l,
motionValue: c,
element: u,
...f
}, p = u?.KeyframeResolver || Os;
this.keyframeResolver = new p(a, (g, y, b) => this.onKeyframesResolved(g, y, h, !b), l, c, u), this.keyframeResolver?.scheduleResolve();
}
onKeyframesResolved(t, n, s, r) {
this.keyframeResolver = void 0;
const { name: o, type: i, velocity: a, delay: l, isHandoff: c, onUpdate: u } = s;
this.resolvedAt = xe.now();
let f = !0;
hu(t, o, i, a) || (f = !1, (it.instantAnimations || !l) && u?.(kn(t, s, n)), t[0] = t[t.length - 1], cs(s), s.repeat = 0);
const p = {
startTime: r ? this.resolvedAt ? this.resolvedAt - this.createdAt > xu ? this.resolvedAt : this.createdAt : this.createdAt : void 0,
finalKeyframe: n,
...s,
keyframes: t
}, g = f && !c && bu(p), y = p.motionValue?.owner?.current;
let b;
if (g)
try {
b = new du({
...p,
element: y
});
} catch {
b = new yn(p);
}
else
b = new yn(p);
b.finished.then(() => {
this.notifyFinished();
}).catch(Ie), this.pendingTimeline && (this.stopTimeline = b.attachTimeline(this.pendingTimeline), this.pendingTimeline = void 0), this._animation = b;
}
get finished() {
return this._animation ? this.animation.finished : this._finished;
}
then(t, n) {
return this.finished.finally(t).then(() => {
});
}
get animation() {
return this._animation || (this.keyframeResolver?.resume(), su()), this._animation;
}
get duration() {
return this.animation.duration;
}
get iterationDuration() {
return this.animation.iterationDuration;
}
get time() {
return this.animation.time;
}
set time(t) {
this.animation.time = t;
}
get speed() {
return this.animation.speed;
}
get state() {
return this.animation.state;
}
set speed(t) {
this.animation.speed = t;
}
get startTime() {
return this.animation.startTime;
}
attachTimeline(t) {
return this._animation ? this.stopTimeline = this.animation.attachTimeline(t) : this.pendingTimeline = t, () => this.stop();
}
play() {
this.animation.play();
}
pause() {
this.animation.pause();
}
complete() {
this.animation.complete();
}
cancel() {
this._animation && this.animation.cancel(), this.keyframeResolver?.cancel();
}
}
function Yo(e, t, n, s = 0, r = 1) {
const o = Array.from(e).sort((c, u) => c.sortNodePosition(u)).indexOf(t), i = e.size, a = (i - 1) * s;
return typeof n == "function" ? n(o, i) : r === 1 ? o * s : a - o * s;
}
const wu = (
// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u
);
function Nu(e) {
const t = wu.exec(e);
if (!t)
return [,];
const [, n, s, r] = t;
return [`--${n ?? s}`, r];
}
const Tu = 4;
function Xo(e, t, n = 1) {
Ze(n <= Tu, `Max CSS variable fallback depth detected in property "${e}". This may indicate a circular fallback dependency.`, "max-css-var-depth");
const [s, r] = Nu(e);
if (!s)
return;
const o = window.getComputedStyle(t).getPropertyValue(s);
if (o) {
const i = o.trim();
return uo(i) ? parseFloat(i) : i;
}
return Is(r) ? Xo(r, t, n + 1) : r;
}
const Su = {
type: "spring",
stiffness: 500,
damping: 25,
restSpeed: 10
}, Cu = (e) => ({
type: "spring",
stiffness: 550,
damping: e === 0 ? 2 * Math.sqrt(550) : 30,
restSpeed: 10
}), ku = {
type: "keyframes",
duration: 0.8
}, Pu = {
type: "keyframes",
ease: [0.25, 0.1, 0.35, 1],
duration: 0.3
}, Du = (e, { keyframes: t }) => t.length > 2 ? ku : At.has(e) ? e.startsWith("scale") ? Cu(t[1]) : Su : Pu;
function qo(e, t) {
if (e?.inherit && t) {
const { inherit: n, ...s } = e;
return { ...t, ...s };
}
return e;
}
function $s(e, t) {
const n = e?.[t] ?? e?.default ?? e;
return n !== e ? qo(n, e) : n;
}
const Au = /* @__PURE__ */ new Set([
"when",
"delay",
"delayChildren",
"staggerChildren",
"staggerDirection",
"repeat",
"repeatType",
"repeatDelay",
"from",
"elapsed"
]);
function Eu(e) {
for (const t in e)
if (!Au.has(t))
return !0;
return !1;
}
const _s = (e, t, n, s = {}, r, o) => (i) => {
const a = $s(s, e) || {}, l = a.delay || s.delay || 0;
let { elapsed: c = 0 } = s;
c = c - /* @__PURE__ */ Ce(l);
const u = {
keyframes: Array.isArray(n) ? n : [null, n],
ease: "easeOut",
velocity: t.getVelocity(),
...a,
delay: -c,
onUpdate: (h) => {
t.set(h), a.onUpdate && a.onUpdate(h);
},
onComplete: () => {
i(), a.onComplete && a.onComplete();
},
name: e,
motionValue: t,
element: o ? void 0 : r
};
Eu(a) || Object.assign(u, Du(e, u)), u.duration && (u.duration = /* @__PURE__ */ Ce(u.duration)), u.repeatDelay && (u.repeatDelay = /* @__PURE__ */ Ce(u.repeatDelay)), u.from !== void 0 && (u.keyframes[0] = u.from);
let f = !1;
if ((u.type === !1 || u.duration === 0 && !u.repeatDelay) && (cs(u), u.delay === 0 && (f = !0)), (it.instantAnimations || it.skipAnimations || r?.shouldSkipAnimations) && (f = !0, cs(u), u.delay = 0), u.allowFlatten = !a.type && !a.ease, f && !o && t.get() !== void 0) {
const h = kn(u.keyframes, a);
if (h !== void 0) {
Z.update(() => {
u.onUpdate(h), u.onComplete();
});
return;
}
}
return a.isSync ? new yn(u) : new vu(u);
};
function Nr(e) {
const t = [{}, {}];
return e?.values.forEach((n, s) => {
t[0][s] = n.get(), t[1][s] = n.getVelocity();
}), t;
}
function zs(e, t, n, s) {
if (typeof t == "function") {
const [r, o] = Nr(s);
t = t(n !== void 0 ? n : e.custom, r, o);
}
if (typeof t == "string" && (t = e.variants && e.variants[t]), typeof t == "function") {
const [r, o] = Nr(s);
t = t(n !== void 0 ? n : e.custom, r, o);
}
return t;
}
function pt(e, t, n) {
const s = e.getProps();
return zs(s, t, n !== void 0 ? n : s.custom, e);
}
const Zo = /* @__PURE__ */ new Set([
"width",
"height",
"top",
"left",
"right",
"bottom",
...Dt
]), Tr = 30, Mu = (e) => !isNaN(parseFloat(e));
class Vu {
/**
* @param init - The initiating value
* @param config - Optional configuration options
*
* - `transformer`: A function to transform incoming values with.
*/
constructor(t, n = {}) {
this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (s) => {
const r = xe.now();
if (this.updatedAt !== r && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(s), this.current !== this.prev && (this.events.change?.notify(this.current), this.dependents))
for (const o of this.dependents)
o.dirty();
}, this.hasAnimated = !1, this.setCurrent(t), this.owner = n.owner;
}
setCurrent(t) {
this.current = t, this.updatedAt = xe.now(), this.canTrackVelocity === null && t !== void 0 && (this.canTrackVelocity = Mu(this.current));
}
setPrevFrameValue(t = this.current) {
this.prevFrameValue = t, 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(t) {
return process.env.NODE_ENV !== "production" && Es(!1, 'value.onChange(callback) is deprecated. Switch to value.on("change", callback).'), this.on("change", t);
}
on(t, n) {
this.events[t] || (this.events[t] = new As());
const s = this.events[t].add(n);
return t === "change" ? () => {
s(), Z.read(() => {
this.events.change.getSize() || this.stop();
});
} : s;
}
clearListeners() {
for (const t in this.events)
this.events[t].clear();
}
/**
* Attaches a passive effect to the `MotionValue`.
*/
attach(t, n) {
this.passiveEffect = t, 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(t) {
this.passiveEffect ? this.passiveEffect(t, this.updateAndNotify) : this.updateAndNotify(t);
}
setWithVelocity(t, n, s) {
this.set(n), this.prev = void 0, this.prevFrameValue = t, this.prevUpdatedAt = this.updatedAt - s;
}
/**
* Set the state of the `MotionValue`, stopping any active animations,
* effects, and resets velocity to `0`.
*/
jump(t, n = !0) {
this.updateAndNotify(t), this.prev = t, this.prevUpdatedAt = this.prevFrameValue = void 0, n && this.stop(), this.stopPassiveEffect && this.stopPassiveEffect();
}
dirty() {
this.events.change?.notify(this.current);
}
addDependent(t) {
this.dependents || (this.dependents = /* @__PURE__ */ new Set()), this.dependents.add(t);
}
removeDependent(t) {
this.dependents && this.dependents.delete(t);
}
/**
* 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 t = xe.now();
if (!this.canTrackVelocity || this.prevFrameValue === void 0 || t - this.updatedAt > Tr)
return 0;
const n = Math.min(this.updatedAt - this.prevUpdatedAt, Tr);
return po(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(t) {
return this.stop(), new Promise((n) => {
this.hasAnimated = !0, this.animation = t(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.dependents?.clear(), this.events.destroy?.notify(), this.clearListeners(), this.stop(), this.stopPassiveEffect && this.stopPassiveEffect();
}
}
function Ct(e, t) {
return new Vu(e, t);
}
const us = (e) => Array.isArray(e);
function Iu(e, t, n) {
e.hasValue(t) ? e.getValue(t).set(n) : e.addValue(t, Ct(n));
}
function Ru(e) {
return us(e) ? e[e.length - 1] || 0 : e;
}
function Lu(e, t) {
const n = pt(e, t);
let { transitionEnd: s = {}, transition: r = {}, ...o } = n || {};
o = { ...o, ...s };
for (const i in o) {
const a = Ru(o[i]);
Iu(e, i, a);
}
}
const fe = (e) => !!(e && e.getVelocity);
function Bu(e) {
return !!(fe(e) && e.add);
}
function ds(e, t) {
const n = e.getValue("willChange");
if (Bu(n))
return n.add(t);
if (!n && it.WillChange) {
const s = new it.WillChange("auto");
e.addValue("willChange", s), s.add(t);
}
}
function Us(e) {
return e.replace(/([A-Z])/g, (t) => `-${t.toLowerCase()}`);
}
const Fu = "framerAppearId", Jo = "data-" + Us(Fu);
function Qo(e) {
return e.props[Jo];
}
function ju({ protectedKeys: e, needsAnimating: t }, n) {
const s = e.hasOwnProperty(n) && t[n] !== !0;
return t[n] = !1, s;
}
function ea(e, t, { delay: n = 0, transitionOverride: s, type: r } = {}) {
let { transition: o, transitionEnd: i, ...a } = t;
const l = e.getDefaultTransition();
o = o ? qo(o, l) : l;
const c = o?.reduceMotion;
s && (o = s);
const u = [], f = r && e.animationState && e.animationState.getState()[r];
for (const h in a) {
const p = e.getValue(h, e.latestValues[h] ?? null), g = a[h];
if (g === void 0 || f && ju(f, h))
continue;
const y = {
delay: n,
...$s(o || {}, h)
}, b = p.get();
if (b !== void 0 && !p.isAnimating() && !Array.isArray(g) && g === b && !y.velocity) {
Z.update(() => p.set(g));
continue;
}
let v = !1;
if (window.MotionHandoffAnimation) {
const w = Qo(e);
if (w) {
const T = window.MotionHandoffAnimation(w, h, Z);
T !== null && (y.startTime = T, v = !0);
}
}
ds(e, h);
const N = c ?? e.shouldReduceMotion;
p.start(_s(h, p, g, N && Zo.has(h) ? { type: !1 } : y, e, v));
const x = p.animation;
x && u.push(x);
}
if (i) {
const h = () => Z.update(() => {
i && Lu(e, i);
});
u.length ? Promise.all(u).then(h) : h();
}
return u;
}
function fs(e, t, n = {}) {
const s = pt(e, t, n.type === "exit" ? e.presenceContext?.custom : void 0);
let { transition: r = e.getDefaultTransition() || {} } = s || {};
n.transitionOverride && (r = n.transitionOverride);
const o = s ? () => Promise.all(ea(e, s, n)) : () => Promise.resolve(), i = e.variantChildren && e.variantChildren.size ? (l = 0) => {
const { delayChildren: c = 0, staggerChildren: u, staggerDirection: f } = r;
return Ou(e, t, l, c, u, f, n);
} : () => Promise.resolve(), { when: a } = r;
if (a) {
const [l, c] = a === "beforeChildren" ? [o, i] : [i, o];
return l().then(() => c());
} else
return Promise.all([o(), i(n.delay)]);
}
function Ou(e, t, n = 0, s = 0, r = 0, o = 1, i) {
const a = [];
for (const l of e.variantChildren)
l.notify("AnimationStart", t), a.push(fs(l, t, {
...i,
delay: n + (typeof s == "function" ? 0 : s) + Yo(e.variantChildren, l, s, r, o)
}).then(() => l.notify("AnimationComplete", t)));
return Promise.all(a);
}
function $u(e, t, n = {}) {
e.notify("AnimationStart", t);
let s;
if (Array.isArray(t)) {
const r = t.map((o) => fs(e, o, n));
s = Promise.all(r);
} else if (typeof t == "string")
s = fs(e, t, n);
else {
const r = typeof t == "function" ? pt(e, t, n.custom) : t;
s = Promise.all(ea(e, r, n));
}
return s.then(() => {
e.notify("AnimationComplete", t);
});
}
const _u = {
test: (e) => e === "auto",
parse: (e) => e
}, ta = (e) => (t) => t.test(e), na = [Pt, _, He, st, fc, dc, _u], Sr = (e) => na.find(ta(e));
function zu(e) {
return typeof e == "number" ? e === 0 : e !== null ? e === "none" || e === "0" || ho(e) : !0;
}
const Uu = /* @__PURE__ */ new Set(["brightness", "contrast", "saturate", "opacity"]);
function Wu(e) {
const [t, n] = e.slice(0, -1).split("(");
if (t === "drop-shadow")
return e;
const [s] = n.match(Rs) || [];
if (!s)
return e;
const r = n.replace(s, "");
let o = Uu.has(t) ? 1 : 0;
return s !== n && (o *= 100), t + "(" + o + r + ")";
}
const Ku = /\b([a-z-]*)\(.*?\)/gu, hs = {
...Oe,
getAnimatableNone: (e) => {
const t = e.match(Ku);
return t ? t.map(Wu).join(" ") : e;
}
}, ms = {
...Oe,
getAnimatableNone: (e) => {
const t = Oe.parse(e);
return Oe.createTransformer(e)(t.map((s) => typeof s == "number" ? 0 : typeof s == "object" ? { ...s, alpha: 1 } : s));
}
}, Cr = {
...Pt,
transform: Math.round
}, Hu = {
rotate: st,
rotateX: st,
rotateY: st,
rotateZ: st,
scale: Zt,
scaleX: Zt,
scaleY: Zt,
scaleZ: Zt,
skew: st,
skewX: st,
skewY: st,
distance: _,
translateX: _,
translateY: _,
translateZ: _,
x: _,
y: _,
z: _,
perspective: _,
transformPerspective: _,
opacity: Ot,
originX: dr,
originY: dr,
originZ: _
}, Ws = {
// Border props
borderWidth: _,
borderTopWidth: _,
borderRightWidth: _,
borderBottomWidth: _,
borderLeftWidth: _,
borderRadius: _,
borderTopLeftRadius: _,
borderTopRightRadius: _,
borderBottomRightRadius: _,
borderBottomLeftRadius: _,
// Positioning props
width: _,
maxWidth: _,
height: _,
maxHeight: _,
top: _,
right: _,
bottom: _,
left: _,
inset: _,
insetBlock: _,
insetBlockStart: _,
insetBlockEnd: _,
insetInline: _,
insetInlineStart: _,
insetInlineEnd: _,
// Spacing props
padding: _,
paddingTop: _,
paddingRight: _,
paddingBottom: _,
paddingLeft: _,
paddingBlock: _,
paddingBlockStart: _,
paddingBlockEnd: _,
paddingInline: _,
paddingInlineStart: _,
paddingInlineEnd: _,
margin: _,
marginTop: _,
marginRight: _,
marginBottom: _,
marginLeft: _,
marginBlock: _,
marginBlockStart: _,
marginBlockEnd: _,
marginInline: _,
marginInlineStart: _,
marginInlineEnd: _,
// Typography
fontSize: _,
// Misc
backgroundPositionX: _,
backgroundPositionY: _,
...Hu,
zIndex: Cr,
// SVG
fillOpacity: Ot,
strokeOpacity: Ot,
numOctaves: Cr
}, Gu = {
...Ws,
// Color props
color: re,
backgroundColor: re,
outlineColor: re,
fill: re,
stroke: re,
// Border props
borderColor: re,
borderTopColor: re,
borderRightColor: re,
borderBottomColor: re,
borderLeftColor: re,
filter: hs,
WebkitFilter: hs,
mask: ms,
WebkitMask: ms
}, sa = (e) => Gu[e], Yu = /* @__PURE__ */ new Set([hs, ms]);
function ra(e, t) {
let n = sa(e);
return Yu.has(n) || (n = Oe), n.getAnimatableNone ? n.getAnimatableNone(t) : void 0;
}
const Xu = /* @__PURE__ */ new Set(["auto", "none", "0"]);
function qu(e, t, n) {
let s = 0, r;
for (; s < e.length && !r; ) {
const o = e[s];
typeof o == "string" && !Xu.has(o) && St(o).values.length && (r = e[s]), s++;
}
if (r && n)
for (const o of t)
e[o] = ra(n, r);
}
class Zu extends Os {
constructor(t, n, s, r, o) {
super(t, n, s, r, o, !0);
}
readKeyframes() {
const { unresolvedKeyframes: t, element: n, name: s } = this;
if (!n || !n.current)
return;
super.readKeyframes();
for (let u = 0; u < t.length; u++) {
let f = t[u];
if (typeof f == "string" && (f = f.trim(), Is(f))) {
const h = Xo(f, n.current);
h !== void 0 && (t[u] = h), u === t.length - 1 && (this.finalKeyframe = f);
}
}
if (this.resolveNoneKeyframes(), !Zo.has(s) || t.length !== 2)
return;
const [r, o] = t, i = Sr(r), a = Sr(o), l = ur(r), c = ur(o);
if (l !== c && rt[s]) {
this.needsMeasurement = !0;
return;
}
if (i !== a)
if (xr(i) && xr(a))
for (let u = 0; u < t.length; u++) {
const f = t[u];
typeof f == "string" && (t[u] = parseFloat(f));
}
else rt[s] && (this.needsMeasurement = !0);
}
resolveNoneKeyframes() {
const { unresolvedKeyframes: t, name: n } = this, s = [];
for (let r = 0; r < t.length; r++)
(t[r] === null || zu(t[r])) && s.push(r);
s.length && qu(t, s, n);
}
measureInitialState() {
const { element: t, unresolvedKeyframes: n, name: s } = this;
if (!t || !t.current)
return;
s === "height" && (this.suspendedScrollY = window.pageYOffset), this.measuredOrigin = rt[s](t.measureViewportBox(), window.getComputedStyle(t.current)), n[0] = this.measuredOrigin;
const r = n[n.length - 1];
r !== void 0 && t.getValue(s, r).jump(r, !1);
}
measureEndState() {
const { element: t, name: n, unresolvedKeyframes: s } = this;
if (!t || !t.current)
return;
const r = t.getValue(n);
r && r.jump(this.measuredOrigin, !1);
const o = s.length - 1, i = s[o];
s[o] = rt[n](t.measureViewportBox(), window.getComputedStyle(t.current)), i !== null && this.finalKeyframe === void 0 && (this.finalKeyframe = i), this.removedTransforms?.length && this.removedTransforms.forEach(([a, l]) => {
t.getValue(a).set(l);
}), this.resolveNoneKeyframes();
}
}
function ia(e, t, n) {
if (e == null)
return [];
if (e instanceof EventTarget)
return [e];
if (typeof e == "string") {
let s = document;
const r = n?.[e] ?? s.querySelectorAll(e);
return r ? Array.from(r) : [];
}
return Array.from(e).filter((s) => s != null);
}
const oa = (e, t) => t && typeof e == "number" ? t.transform(e) : e;
function sn(e) {
return fo(e) && "offsetHeight" in e && !("ownerSVGElement" in e);
}
const { schedule: Ks } = /* @__PURE__ */ ko(queueMicrotask, !1), je = {
x: !1,
y: !1
};
function aa() {
return je.x || je.y;
}
function Ju(e) {
return e === "x" || e === "y" ? je[e] ? null : (je[e] = !0, () => {
je[e] = !1;
}) : je.x || je.y ? null : (je.x = je.y = !0, () => {
je.x = je.y = !1;
});
}
function la(e, t) {
const n = ia(e), s = new AbortController(), r = {
passive: !0,
...t,
signal: s.signal
};
return [n, r, () => s.abort()];
}
function Qu(e) {
return !(e.pointerType === "touch" || aa());
}
function ed(e, t, n = {}) {
const [s, r, o] = la(e, n);
return s.forEach((i) => {
let a = !1, l = !1, c;
const u = () => {
i.removeEventListener("pointerleave", g);
}, f = (b) => {
c && (c(b), c = void 0), u();
}, h = (b) => {
a = !1, window.removeEventListener("pointerup", h), window.removeEventListener("pointercancel", h), l && (l = !1, f(b));
}, p = () => {
a = !0, window.addEventListener("pointerup", h, r), window.addEventListener("pointercancel", h, r);
}, g = (b) => {
if (b.pointerType !== "touch") {
if (a) {
l = !0;
return;
}
f(b);
}
}, y = (b) => {
if (!Qu(b))
return;
l = !1;
const v = t(i, b);
typeof v == "function" && (c = v, i.addEventListener("pointerleave", g, r));
};
i.addEventListener("pointerenter", y, r), i.addEventListener("pointerdown", p, r);
}), o;
}
const ca = (e, t) => t ? e === t ? !0 : ca(e, t.parentElement) : !1, Hs = (e) => e.pointerType === "mouse" ? typeof e.button != "number" || e.button <= 0 : e.isPrimary !== !1, td = /* @__PURE__ */ new Set([
"BUTTON",
"INPUT",
"SELECT",
"TEXTAREA",
"A"
]);
function nd(e) {
return td.has(e.tagName) || e.isContentEditable === !0;
}
const sd = /* @__PURE__ */ new Set(["INPUT", "SELECT", "TEXTAREA"]);
function rd(e) {
return sd.has(e.tagName) || e.isContentEditable === !0;
}
const rn = /* @__PURE__ */ new WeakSet();
function kr(e) {
return (t) => {
t.key === "Enter" && e(t);
};
}
function $n(e, t) {
e.dispatchEvent(new PointerEvent("pointer" + t, { isPrimary: !0, bubbles: !0 }));
}
const id = (e, t) => {
const n = e.currentTarget;
if (!n)
return;
const s = kr(() => {
if (rn.has(n))
return;
$n(n, "down");
const r = kr(() => {
$n(n, "up");
}), o = () => $n(n, "cancel");
n.addEventListener("keyup", r, t), n.addEventListener("blur", o, t);
});
n.addEventListener("keydown", s, t), n.addEventListener("blur", () => n.removeEventListener("keydown", s), t);
};
function Pr(e) {
return Hs(e) && !aa();
}
const Dr = /* @__PURE__ */ new WeakSet();
function od(e, t, n = {}) {
const [s, r, o] = la(e, n), i = (a) => {
const l = a.currentTarget;
if (!Pr(a) || Dr.has(a))
return;
rn.add(l), n.stopPropagation && Dr.add(a);
const c = t(l, a), u = (p, g) => {
window.removeEventListener("pointerup", f), window.removeEventListener("pointercancel", h), rn.has(l) && rn.delete(l), Pr(p) && typeof c == "function" && c(p, { success: g });
}, f = (p) => {
u(p, l === window || l === document || n.useGlobalTarget || ca(l, p.target));
}, h = (p) => {
u(p, !1);
};
window.addEventListener("pointerup", f, r), window.addEventListener("pointercancel", h, r);
};
return s.forEach((a) => {
(n.useGlobalTarget ? window : a).addEventListener("pointerdown", i, r), sn(a) && (a.addEventListener("focus", (c) => id(c, r)), !nd(a) && !a.hasAttribute("tabindex") && (a.tabIndex = 0));
}), o;
}
function Gs(e) {
return fo(e) && "ownerSVGElement" in e;
}
const on = /* @__PURE__ */ new WeakMap();
let an;
const ua = (e, t, n) => (s, r) => r && r[0] ? r[0][e + "Size"] : Gs(s) && "getBBox" in s ? s.getBBox()[t] : s[n], ad = /* @__PURE__ */ ua("inline", "width", "offsetWidth"), ld = /* @__PURE__ */ ua("block", "height", "offsetHeight");
function cd({ target: e, borderBoxSize: t }) {
on.get(e)?.forEach((n) => {
n(e, {
get width() {
return ad(e, t);
},
get height() {
return ld(e, t);
}
});
});
}
function ud(e) {
e.forEach(cd);
}
function dd() {
typeof ResizeObserver > "u" || (an = new ResizeObserver(ud));
}
function fd(e, t) {
an || dd();
const n = ia(e);
return n.forEach((s) => {
let r = on.get(s);
r || (r = /* @__PURE__ */ new Set(), on.set(s, r)), r.add(t), an?.observe(s);
}), () => {
n.forEach((s) => {
const r = on.get(s);
r?.delete(t), r?.size || an?.unobserve(s);
});
};
}
const ln = /* @__PURE__ */ new Set();
let wt;
function hd() {
wt = () => {
const e = {
get width() {
return window.innerWidth;
},
get height() {
return window.innerHeight;
}
};
ln.forEach((t) => t(e));
}, window.addEventListener("resize", wt);
}
function md(e) {
return ln.add(e), wt || hd(), () => {
ln.delete(e), !ln.size && typeof wt == "function" && (window.removeEventListener("resize", wt), wt = void 0);
};
}
function Ar(e, t) {
return typeof e == "function" ? md(e) : fd(e, t);
}
function pd(e) {
return Gs(e) && e.tagName === "svg";
}
const gd = [...na, re, Oe], yd = (e) => gd.find(ta(e)), Er = () => ({
translate: 0,
scale: 1,
origin: 0,
originPoint: 0
}), Nt = () => ({
x: Er(),
y: Er()
}), Mr = () => ({ min: 0, max: 0 }), ae = () => ({
x: Mr(),
y: Mr()
}), bd = /* @__PURE__ */ new WeakMap();
function Pn(e) {
return e !== null && typeof e == "object" && typeof e.start == "function";
}
function $t(e) {
return typeof e == "string" || Array.isArray(e);
}
const Ys = [
"animate",
"whileInView",
"whileFocus",
"whileHover",
"whileTap",
"whileDrag",
"exit"
], Xs = ["initial", ...Ys];
function Dn(e) {
return Pn(e.animate) || Xs.some((t) => $t(e[t]));
}
function da(e) {
return !!(Dn(e) || e.variants);
}
function xd(e, t, n) {
for (const s in t) {
const r = t[s], o = n[s];
if (fe(r))
e.addValue(s, r);
else if (fe(o))
e.addValue(s, Ct(r, { owner: e }));
else if (o !== r)
if (e.hasValue(s)) {
const i = e.getValue(s);
i.liveStyle === !0 ? i.jump(r) : i.hasAnimated || i.set(r);
} else {
const i = e.getStaticValue(s);
e.addValue(s, Ct(i !== void 0 ? i : r, { owner: e }));
}
}
for (const s in n)
t[s] === void 0 && e.removeValue(s);
return t;
}
const ps = { current: null }, fa = { current: !1 }, vd = typeof window < "u";
function wd() {
if (fa.current = !0, !!vd)
if (window.matchMedia) {
const e = window.matchMedia("(prefers-reduced-motion)"), t = () => ps.current = e.matches;
e.addEventListener("change", t), t();
} else
ps.current = !1;
}
const Vr = [
"AnimationStart",
"AnimationComplete",
"Update",
"BeforeLayoutMeasure",
"LayoutMeasure",
"LayoutAnimationStart",
"LayoutAnimationComplete"
];
let bn = {};
function ha(e) {
bn = e;
}
function Nd() {
return bn;
}
class Td {
/**
* This method takes React props and returns found MotionValues. For example, HTML
* MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
*
* This isn't an abstract method as it needs calling in the constructor, but it is
* intended to be one.
*/
scrapeMotionValuesFromProps(t, n, s) {
return {};
}
constructor({ parent: t, props: n, presenceContext: s, reducedMotionConfig: r, skipAnimations: o, blockInitialAnimation: i, visualState: a }, l = {}) {
this.current = null, this.children = /* @__PURE__ */ new Set(), this.isVariantNode = !1, this.isControllingVariants = !1, this.shouldReduceMotion = null, this.shouldSkipAnimations = !1, this.values = /* @__PURE__ */ new Map(), this.KeyframeResolver = Os, this.features = {}, this.valueSubscriptions = /* @__PURE__ */ new Map(), this.prevMotionValues = {}, this.hasBeenMounted = !1, this.events = {}, this.propEventSubscriptions = {}, this.notifyUpdate = () => this.notify("Update", this.latestValues), this.render = () => {
this.current && (this.triggerBuild(), this.renderInstance(this.current, this.renderState, this.props.style, this.projection));
}, this.renderScheduledAt = 0, this.scheduleRender = () => {
const p = xe.now();
this.renderScheduledAt < p && (this.renderScheduledAt = p, Z.render(this.render, !1, !0));
};
const { latestValues: c, renderState: u } = a;
this.latestValues = c, this.baseTarget = { ...c }, this.initialValues = n.initial ? { ...c } : {}, this.renderState = u, this.parent = t, this.props = n, this.presenceContext = s, this.depth = t ? t.depth + 1 : 0, this.reducedMotionConfig = r, this.skipAnimationsConfig = o, this.options = l, this.blockInitialAnimation = !!i, this.isControllingVariants = Dn(n), this.isVariantNode = da(n), this.isVariantNode && (this.variantChildren = /* @__PURE__ */ new Set()), this.manuallyAnimateOnMount = !!(t && t.current);
const { willChange: f, ...h } = this.scrapeMotionValuesFromProps(n, {}, this);
for (const p in h) {
const g = h[p];
c[p] !== void 0 && fe(g) && g.set(c[p]);
}
}
mount(t) {
if (this.hasBeenMounted)
for (const n in this.initialValues)
this.values.get(n)?.jump(this.initialValues[n]), this.latestValues[n] = this.initialValues[n];
this.current = t, bd.set(t, this), this.projection && !this.projection.instance && this.projection.mount(t), this.parent && this.isVariantNode && !this.isControllingVariants && (this.removeFromVariantTree = this.parent.addVariantChild(this)), this.values.forEach((n, s) => this.bindToMotionValue(s, n)), this.reducedMotionConfig === "never" ? this.shouldReduceMotion = !1 : this.reducedMotionConfig === "always" ? this.shouldReduceMotion = !0 : (fa.current || wd(), this.shouldReduceMotion = ps.current), process.env.NODE_ENV !== "production" && Es(this.shouldReduceMotion !== !0, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled"), this.shouldSkipAnimations = this.skipAnimationsConfig ?? !1, this.parent?.addChild(this), this.update(this.props, this.presenceContext), this.hasBeenMounted = !0;
}
unmount() {
this.projection && this.projection.unmount(), ot(this.notifyUpdate), ot(this.render), this.valueSubscriptions.forEach((t) => t()), this.valueSubscriptions.clear(), this.removeFromVariantTree && this.removeFromVariantTree(), this.parent?.removeChild(this);
for (const t in this.events)
this.events[t].clear();
for (const t in this.features) {
const n = this.features[t];
n && (n.unmount(), n.isMounted = !1);
}
this.current = null;
}
addChild(t) {
this.children.add(t), this.enteringChildren ?? (this.enteringChildren = /* @__PURE__ */ new Set()), this.enteringChildren.add(t);
}
removeChild(t) {
this.children.delete(t), this.enteringChildren && this.enteringChildren.delete(t);
}
bindToMotionValue(t, n) {
if (this.valueSubscriptions.has(t) && this.valueSubscriptions.get(t)(), n.accelerate && Go.has(t) && this.current instanceof HTMLElement) {
const { factory: i, keyframes: a, times: l, ease: c, duration: u } = n.accelerate, f = new Ko({
element: this.current,
name: t,
keyframes: a,
times: l,
ease: c,
duration: /* @__PURE__ */ Ce(u)
}), h = i(f);
this.valueSubscriptions.set(t, () => {
h(), f.cancel();
});
return;
}
const s = At.has(t);
s && this.onBindTransform && this.onBindTransform();
const r = n.on("change", (i) => {
this.latestValues[t] = i, this.props.onUpdate && Z.preRender(this.notifyUpdate), s && this.projection && (this.projection.isTransformDirty = !0), this.scheduleRender();
});
let o;
typeof window < "u" && window.MotionCheckAppearSync && (o = window.MotionCheckAppearSync(this, t, n)), this.valueSubscriptions.set(t, () => {
r(), o && o(), n.owner && n.stop();
});
}
sortNodePosition(t) {
return !this.current || !this.sortInstanceNodePosition || this.type !== t.type ? 0 : this.sortInstanceNodePosition(this.current, t.current);
}
updateFeatures() {
let t = "animation";
for (t in bn) {
const n = bn[t];
if (!n)
continue;
const { isEnabled: s, Feature: r } = n;
if (!this.features[t] && r && s(this.props) && (this.features[t] = new r(this)), this.features[t]) {
const o = this.features[t];
o.isMounted ? o.update() : (o.mount(), o.isMounted = !0);
}
}
}
triggerBuild() {
this.build(this.renderState, this.latestValues, this.props);
}
/**
* Measure the current viewport box with or without transforms.
* Only measures axis-aligned boxes, rotate and skew must be manually
* removed with a re-render to work.
*/
measureViewportBox() {
return this.current ? this.measureInstanceViewportBox(this.current, this.props) : ae();
}
getStaticValue(t) {
return this.latestValues[t];
}
setStaticValue(t, n) {
this.latestValues[t] = n;
}
/**
* Update the provided props. Ensure any newly-added motion values are
* added to our map, old ones removed, and listeners updated.
*/
update(t, n) {
(t.transformTemplate || this.props.transformTemplate) && this.scheduleRender(), this.prevProps = this.props, this.props = t, this.prevPresenceContext = this.presenceContext, this.presenceContext = n;
for (let s = 0; s < Vr.length; s++) {
const r = Vr[s];
this.propEventSubscriptions[r] && (this.propEventSubscriptions[r](), delete this.propEventSubscriptions[r]);
const o = "on" + r, i = t[o];
i && (this.propEventSubscriptions[r] = this.on(r, i));
}
this.prevMotionValues = xd(this, this.scrapeMotionValuesFromProps(t, this.prevProps || {}, this), this.prevMotionValues), this.handleChildMotionValue && this.handleChildMotionValue();
}
getProps() {
return this.props;
}
/**
* Returns the variant definition with a given name.
*/
getVariant(t) {
return this.props.variants ? this.props.variants[t] : void 0;
}
/**
* Returns the defined default transition on this component.
*/
getDefaultTransition() {
return this.props.transition;
}
getTransformPagePoint() {
return this.props.transformPagePoint;
}
getClosestVariantNode() {
return this.isVariantNode ? this : this.parent ? this.parent.getClosestVariantNode() : void 0;
}
/**
* Add a child visual element to our set of children.
*/
addVariantChild(t) {
const n = this.getClosestVariantNode();
if (n)
return n.variantChildren && n.variantChildren.add(t), () => n.variantChildren.delete(t);
}
/**
* Add a motion value and bind it to this visual element.
*/
addValue(t, n) {
const s = this.values.get(t);
n !== s && (s && this.removeValue(t), this.bindToMotionValue(t, n), this.values.set(t, n), this.latestValues[t] = n.get());
}
/**
* Remove a motion value and unbind any active subscriptions.
*/
removeValue(t) {
this.values.delete(t);
const n = this.valueSubscriptions.get(t);
n && (n(), this.valueSubscriptions.delete(t)), delete this.latestValues[t], this.removeValueFromRenderState(t, this.renderState);
}
/**
* Check whether we have a motion value for this key
*/
hasValue(t) {
return this.values.has(t);
}
getValue(t, n) {
if (this.props.values && this.props.values[t])
return this.props.values[t];
let s = this.values.get(t);
return s === void 0 && n !== void 0 && (s = Ct(n === null ? void 0 : n, { owner: this }), this.addValue(t, s)), s;
}
/**
* If we're trying to animate to a previously unencountered value,
* we need to check for it in our state and as a last resort read it
* directly from the instance (which might have performance implications).
*/
readValue(t, n) {
let s = this.latestValues[t] !== void 0 || !this.current ? this.latestValues[t] : this.getBaseTargetFromProps(this.props, t) ?? this.readValueFromInstance(this.current, t, this.options);
return s != null && (typeof s == "string" && (uo(s) || ho(s)) ? s = parseFloat(s) : !yd(s) && Oe.test(n) && (s = ra(t, n)), this.setBaseTarget(t, fe(s) ? s.get() : s)), fe(s) ? s.get() : s;
}
/**
* Set the base target to later animate back to. This is currently
* only hydrated on creation and when we first read a value.
*/
setBaseTarget(t, n) {
this.baseTarget[t] = n;
}
/**
* Find the base target for a value thats been removed from all animation
* props.
*/
getBaseTarget(t) {
const { initial: n } = this.props;
let s;
if (typeof n == "string" || typeof n == "object") {
const o = zs(this.props, n, this.presenceContext?.custom);
o && (s = o[t]);
}
if (n && s !== void 0)
return s;
const r = this.getBaseTargetFromProps(this.props, t);
return r !== void 0 && !fe(r) ? r : this.initialValues[t] !== void 0 && s === void 0 ? void 0 : this.baseTarget[t];
}
on(t, n) {
return this.events[t] || (this.events[t] = new As()), this.events[t].add(n);
}
notify(t, ...n) {
this.events[t] && this.events[t].notify(...n);
}
scheduleRenderMicrotask() {
Ks.render(this.render);
}
}
class ma extends Td {
constructor() {
super(...arguments), this.KeyframeResolver = Zu;
}
sortInstanceNodePosition(t, n) {
return t.compareDocumentPosition(n) & 2 ? 1 : -1;
}
getBaseTargetFromProps(t, n) {
const s = t.style;
return s ? s[n] : void 0;
}
removeValueFromRenderState(t, { vars: n, style: s }) {
delete n[t], delete s[t];
}
handleChildMotionValue() {
this.childSubscription && (this.childSubscription(), delete this.childSubscription);
const { children: t } = this.props;
fe(t) && (this.childSubscription = t.on("change", (n) => {
this.current && (this.current.textContent = `${n}`);
}));
}
}
class lt {
constructor(t) {
this.isMounted = !1, this.node = t;
}
update() {
}
}
function pa({ top: e, left: t, right: n, bottom: s }) {
return {
x: { min: t, max: n },
y: { min: e, max: s }
};
}
function Sd({ x: e, y: t }) {
return { top: t.min, right: e.max, bottom: t.max, left: e.min };
}
function Cd(e, t) {
if (!t)
return e;
const n = t({ x: e.left, y: e.top }), s = t({ x: e.right, y: e.bottom });
return {
top: n.y,
left: n.x,
bottom: s.y,
right: s.x
};
}
function _n(e) {
return e === void 0 || e === 1;
}
function gs({ scale: e, scaleX: t, scaleY: n }) {
return !_n(e) || !_n(t) || !_n(n);
}
function dt(e) {
return gs(e) || ga(e) || e.z || e.rotate || e.rotateX || e.rotateY || e.skewX || e.skewY;
}
function ga(e) {
return Ir(e.x) || Ir(e.y);
}
function Ir(e) {
return e && e !== "0%";
}
function xn(e, t, n) {
const s = e - n, r = t * s;
return n + r;
}
function Rr(e, t, n, s, r) {
return r !== void 0 && (e = xn(e, r, s)), xn(e, n, s) + t;
}
function ys(e, t = 0, n = 1, s, r) {
e.min = Rr(e.min, t, n, s, r), e.max = Rr(e.max, t, n, s, r);
}
function ya(e, { x: t, y: n }) {
ys(e.x, t.translate, t.scale, t.originPoint), ys(e.y, n.translate, n.scale, n.originPoint);
}
const Lr = 0.999999999999, Br = 1.0000000000001;
function kd(e, t, n, s = !1) {
const r = n.length;
if (!r)
return;
t.x = t.y = 1;
let o, i;
for (let a = 0; a < r; a++) {
o = n[a], i = o.projectionDelta;
const { visualElement: l } = o.options;
l && l.props.style && l.props.style.display === "contents" || (s && o.options.layoutScroll && o.scroll && o !== o.root && (Ke(e.x, -o.scroll.offset.x), Ke(e.y, -o.scroll.offset.y)), i && (t.x *= i.x.scale, t.y *= i.y.scale, ya(e, i)), s && dt(o.latestValues) && cn(e, o.latestValues, o.layout?.layoutBox));
}
t.x < Br && t.x > Lr && (t.x = 1), t.y < Br && t.y > Lr && (t.y = 1);
}
function Ke(e, t) {
e.min += t, e.max += t;
}
function Fr(e, t, n, s, r = 0.5) {
const o = Q(e.min, e.max, r);
ys(e, t, n, o, s);
}
function jr(e, t) {
return typeof e == "string" ? parseFloat(e) / 100 * (t.max - t.min) : e;
}
function cn(e, t, n) {
const s = n ?? e;
Fr(e.x, jr(t.x, s.x), t.scaleX, t.scale, t.originX), Fr(e.y, jr(t.y, s.y), t.scaleY, t.scale, t.originY);
}
function ba(e, t) {
return pa(Cd(e.getBoundingClientRect(), t));
}
function Pd(e, t, n) {
const s = ba(e, n), { scroll: r } = t;
return r && (Ke(s.x, r.offset.x), Ke(s.y, r.offset.y)), s;
}
const Dd = {
x: "translateX",
y: "translateY",
z: "translateZ",
transformPerspective: "perspective"
}, Ad = Dt.length;
function Ed(e, t, n) {
let s = "", r = !0;
for (let o = 0; o < Ad; o++) {
const i = Dt[o], a = e[i];
if (a === void 0)
continue;
let l = !0;
if (typeof a == "number")
l = a === (i.startsWith("scale") ? 1 : 0);
else {
const c = parseFloat(a);
l = i.startsWith("scale") ? c === 1 : c === 0;
}
if (!l || n) {
const c = oa(a, Ws[i]);
if (!l) {
r = !1;
const u = Dd[i] || i;
s += `${u}(${c}) `;
}
n && (t[i] = c);
}
}
return s = s.trim(), n ? s = n(t, r ? "" : s) : r && (s = "none"), s;
}
function qs(e, t, n) {
const { style: s, vars: r, transformOrigin: o } = e;
let i = !1, a = !1;
for (const l in t) {
const c = t[l];
if (At.has(l)) {
i = !0;
continue;
} else if (Do(l)) {
r[l] = c;
continue;
} else {
const u = oa(c, Ws[l]);
l.startsWith("origin") ? (a = !0, o[l] = u) : s[l] = u;
}
}
if (t.transform || (i || n ? s.transform = Ed(t, e.transform, n) : s.transform && (s.transform = "none")), a) {
const { originX: l = "50%", originY: c = "50%", originZ: u = 0 } = o;
s.transformOrigin = `${l} ${c} ${u}`;
}
}
function xa(e, { style: t, vars: n }, s, r) {
const o = e.style;
let i;
for (i in t)
o[i] = t[i];
r?.applyProjectionStyles(o, s);
for (i in n)
o.setProperty(i, n[i]);
}
function Or(e, t) {
return t.max === t.min ? 0 : e / (t.max - t.min) * 100;
}
const Mt = {
correct: (e, t) => {
if (!t.target)
return e;
if (typeof e == "string")
if (_.test(e))
e = parseFloat(e);
else
return e;
const n = Or(e, t.target.x), s = Or(e, t.target.y);
return `${n}% ${s}%`;
}
}, Md = {
correct: (e, { treeScale: t, projectionDelta: n }) => {
const s = e, r = Oe.parse(e);
if (r.length > 5)
return s;
const o = Oe.createTransformer(e), i = typeof r[0] != "number" ? 1 : 0, a = n.x.scale * t.x, l = n.y.scale * t.y;
r[0 + i] /= a, r[1 + i] /= l;
const c = Q(a, l, 0.5);
return typeof r[2 + i] == "number" && (r[2 + i] /= c), typeof r[3 + i] == "number" && (r[3 + i] /= c), o(r);
}
}, bs = {
borderRadius: {
...Mt,
applyTo: [
"borderTopLeftRadius",
"borderTopRightRadius",
"borderBottomLeftRadius",
"borderBottomRightRadius"
]
},
borderTopLeftRadius: Mt,
borderTopRightRadius: Mt,
borderBottomLeftRadius: Mt,
borderBottomRightRadius: Mt,
boxShadow: Md
};
function va(e, { layout: t, layoutId: n }) {
return At.has(e) || e.startsWith("origin") || (t || n !== void 0) && (!!bs[e] || e === "opacity");
}
function Zs(e, t, n) {
const s = e.style, r = t?.style, o = {};
if (!s)
return o;
for (const i in s)
(fe(s[i]) || r && fe(r[i]) || va(i, e) || n?.getValue(i)?.liveStyle !== void 0) && (o[i] = s[i]);
return o;
}
function Vd(e) {
return window.getComputedStyle(e);
}
class Id extends ma {
constructor() {
super(...arguments), this.type = "html", this.renderInstance = xa;
}
readValueFromInstance(t, n) {
if (At.has(n))
return this.projection?.isProjecting ? rs(n) : Jc(t, n);
{
const s = Vd(t), r = (Do(n) ? s.getPropertyValue(n) : s[n]) || 0;
return typeof r == "string" ? r.trim() : r;
}
}
measureInstanceViewportBox(t, { transformPagePoint: n }) {
return ba(t, n);
}
build(t, n, s) {
qs(t, n, s.transformTemplate);
}
scrapeMotionValuesFromProps(t, n, s) {
return Zs(t, n, s);
}
}
const Rd = {
offset: "stroke-dashoffset",
array: "stroke-dasharray"
}, Ld = {
offset: "strokeDashoffset",
array: "strokeDasharray"
};
function Bd(e, t, n = 1, s = 0, r = !0) {
e.pathLength = 1;
const o = r ? Rd : Ld;
e[o.offset] = `${-s}`, e[o.array] = `${t} ${n}`;
}
const Fd = [
"offsetDistance",
"offsetPath",
"offsetRotate",
"offsetAnchor"
];
function wa(e, {
attrX: t,
attrY: n,
attrScale: s,
pathLength: r,
pathSpacing: o = 1,
pathOffset: i = 0,
// This is object creation, which we try to avoid per-frame.
...a
}, l, c, u) {
if (qs(e, a, c), l) {
e.style.viewBox && (e.attrs.viewBox = e.style.viewBox);
return;
}
e.attrs = e.style, e.style = {};
const { attrs: f, style: h } = e;
f.transform && (h.transform = f.transform, delete f.transform), (h.transform || f.transformOrigin) && (h.transformOrigin = f.transformOrigin ?? "50% 50%", delete f.transformOrigin), h.transform && (h.transformBox = u?.transformBox ?? "fill-box", delete f.transformBox);
for (const p of Fd)
f[p] !== void 0 && (h[p] = f[p], delete f[p]);
t !== void 0 && (f.x = t), n !== void 0 && (f.y = n), s !== void 0 && (f.scale = s), r !== void 0 && Bd(f, r, o, i, !1);
}
const Na = /* @__PURE__ */ new Set([
"baseFrequency",
"diffuseConstant",
"kernelMatrix",
"kernelUnitLength",
"keySplines",
"keyTimes",
"limitingConeAngle",
"markerHeight",
"markerWidth",
"numOctaves",
"targetX",
"targetY",
"surfaceScale",
"specularConstant",
"specularExponent",
"stdDeviation",
"tableValues",
"viewBox",
"gradientTransform",
"pathLength",
"startOffset",
"textLength",
"lengthAdjust"
]), Ta = (e) => typeof e == "string" && e.toLowerCase() === "svg";
function jd(e, t, n, s) {
xa(e, t, void 0, s);
for (const r in t.attrs)
e.setAttribute(Na.has(r) ? r : Us(r), t.attrs[r]);
}
function Sa(e, t, n) {
const s = Zs(e, t, n);
for (const r in e)
if (fe(e[r]) || fe(t[r])) {
const o = Dt.indexOf(r) !== -1 ? "attr" + r.charAt(0).toUpperCase() + r.substring(1) : r;
s[o] = e[r];
}
return s;
}
class Od extends ma {
constructor() {
super(...arguments), this.type = "svg", this.isSVGTag = !1, this.measureInstanceViewportBox = ae;
}
getBaseTargetFromProps(t, n) {
return t[n];
}
readValueFromInstance(t, n) {
if (At.has(n)) {
const s = sa(n);
return s && s.default || 0;
}
return n = Na.has(n) ? n : Us(n), t.getAttribute(n);
}
scrapeMotionValuesFromProps(t, n, s) {
return Sa(t, n, s);
}
build(t, n, s) {
wa(t, n, this.isSVGTag, s.transformTemplate, s.style);
}
renderInstance(t, n, s, r) {
jd(t, n, s, r);
}
mount(t) {
this.isSVGTag = Ta(t.tagName), super.mount(t);
}
}
const $d = Xs.length;
function Ca(e) {
if (!e)
return;
if (!e.isControllingVariants) {
const n = e.parent ? Ca(e.parent) || {} : {};
return e.props.initial !== void 0 && (n.initial = e.props.initial), n;
}
const t = {};
for (let n = 0; n < $d; n++) {
const s = Xs[n], r = e.props[s];
($t(r) || r === !1) && (t[s] = r);
}
return t;
}
function ka(e, t) {
if (!Array.isArray(t))
return !1;
const n = t.length;
if (n !== e.length)
return !1;
for (let s = 0; s < n; s++)
if (t[s] !== e[s])
return !1;
return !0;
}
const _d = [...Ys].reverse(), zd = Ys.length;
function Ud(e) {
return (t) => Promise.all(t.map(({ animation: n, options: s }) => $u(e, n, s)));
}
function Wd(e) {
let t = Ud(e), n = $r(), s = !0, r = !1;
const o = (c) => (u, f) => {
const h = pt(e, f, c === "exit" ? e.presenceContext?.custom : void 0);
if (h) {
const { transition: p, transitionEnd: g, ...y } = h;
u = { ...u, ...y, ...g };
}
return u;
};
function i(c) {
t = c(e);
}
function a(c) {
const { props: u } = e, f = Ca(e.parent) || {}, h = [], p = /* @__PURE__ */ new Set();
let g = {}, y = 1 / 0;
for (let v = 0; v < zd; v++) {
const N = _d[v], x = n[N], w = u[N] !== void 0 ? u[N] : f[N], T = $t(w), D = N === c ? x.isActive : null;
D === !1 && (y = v);
let k = w === f[N] && w !== u[N] && T;
if (k && (s || r) && e.manuallyAnimateOnMount && (k = !1), x.protectedKeys = { ...g }, // If it isn't active and hasn't *just* been set as inactive
!x.isActive && D === null || // If we didn't and don't have any defined prop for this animation type
!w && !x.prevProp || // Or if the prop doesn't define an animation
Pn(w) || typeof w == "boolean")
continue;
if (N === "exit" && x.isActive && D !== !0) {
x.prevResolvedValues && (g = {
...g,
...x.prevResolvedValues
});
continue;
}
const S = Kd(x.prevProp, w);
let V = S || // If we're making this variant active, we want to always make it active
N === c && x.isActive && !k && T || // If we removed a higher-priority variant (i is in reverse order)
v > y && T, A = !1;
const F = Array.isArray(w) ? w : [w];
let L = F.reduce(o(N), {});
D === !1 && (L = {});
const { prevResolvedValues: $ = {} } = x, E = {
...$,
...L
}, C = (I) => {
V = !0, p.has(I) && (A = !0, p.delete(I)), x.needsAnimating[I] = !0;
const R = e.getValue(I);
R && (R.liveStyle = !1);
};
for (const I in E) {
const R = L[I], M = $[I];
if (g.hasOwnProperty(I))
continue;
let z = !1;
us(R) && us(M) ? z = !ka(R, M) : z = R !== M, z ? R != null ? C(I) : p.add(I) : R !== void 0 && p.has(I) ? C(I) : x.protectedKeys[I] = !0;
}
x.prevProp = w, x.prevResolvedValues = L, x.isActive && (g = { ...g, ...L }), (s || r) && e.blockInitialAnimation && (V = !1);
const B = k && S;
V && (!B || A) && h.push(...F.map((I) => {
const R = { type: N };
if (typeof I == "string" && (s || r) && !B && e.manuallyAnimateOnMount && e.parent) {
const { parent: M } = e, z = pt(M, I);
if (M.enteringChildren && z) {
const { delayChildren: j } = z.transition || {};
R.delay = Yo(M.enteringChildren, e, j);
}
}
return {
animation: I,
options: R
};
}));
}
if (p.size) {
const v = {};
if (typeof u.initial != "boolean") {
const N = pt(e, Array.isArray(u.initial) ? u.initial[0] : u.initial);
N && N.transition && (v.transition = N.transition);
}
p.forEach((N) => {
const x = e.getBaseTarget(N), w = e.getValue(N);
w && (w.liveStyle = !0), v[N] = x ?? null;
}), h.push({ animation: v });
}
let b = !!h.length;
return s && (u.initial === !1 || u.initial === u.animate) && !e.manuallyAnimateOnMount && (b = !1), s = !1, r = !1, b ? t(h) : Promise.resolve();
}
function l(c, u) {
if (n[c].isActive === u)
return Promise.resolve();
e.variantChildren?.forEach((h) => h.animationState?.setActive(c, u)), n[c].isActive = u;
const f = a(c);
for (const h in n)
n[h].protectedKeys = {};
return f;
}
return {
animateChanges: a,
setActive: l,
setAnimateFunction: i,
getState: () => n,
reset: () => {
n = $r(), r = !0;
}
};
}
function Kd(e, t) {
return typeof t == "string" ? t !== e : Array.isArray(t) ? !ka(t, e) : !1;
}
function ut(e = !1) {
return {
isActive: e,
protectedKeys: {},
needsAnimating: {},
prevResolvedValues: {}
};
}
function $r() {
return {
animate: ut(!0),
whileInView: ut(),
whileHover: ut(),
whileTap: ut(),
whileDrag: ut(),
whileFocus: ut(),
exit: ut()
};
}
function xs(e, t) {
e.min = t.min, e.max = t.max;
}
function Fe(e, t) {
xs(e.x, t.x), xs(e.y, t.y);
}
function _r(e, t) {
e.translate = t.translate, e.scale = t.scale, e.originPoint = t.originPoint, e.origin = t.origin;
}
const Pa = 1e-4, Hd = 1 - Pa, Gd = 1 + Pa, Da = 0.01, Yd = 0 - Da, Xd = 0 + Da;
function ve(e) {
return e.max - e.min;
}
function qd(e, t, n) {
return Math.abs(e - t) <= n;
}
function zr(e, t, n, s = 0.5) {
e.origin = s, e.originPoint = Q(t.min, t.max, e.origin), e.scale = ve(n) / ve(t), e.translate = Q(n.min, n.max, e.origin) - e.originPoint, (e.scale >= Hd && e.scale <= Gd || isNaN(e.scale)) && (e.scale = 1), (e.translate >= Yd && e.translate <= Xd || isNaN(e.translate)) && (e.translate = 0);
}
function Rt(e, t, n, s) {
zr(e.x, t.x, n.x, s ? s.originX : void 0), zr(e.y, t.y, n.y, s ? s.originY : void 0);
}
function Ur(e, t, n, s = 0) {
const r = s ? Q(n.min, n.max, s) : n.min;
e.min = r + t.min, e.max = e.min + ve(t);
}
function Zd(e, t, n, s) {
Ur(e.x, t.x, n.x, s?.x), Ur(e.y, t.y, n.y, s?.y);
}
function Wr(e, t, n, s = 0) {
const r = s ? Q(n.min, n.max, s) : n.min;
e.min = t.min - r, e.max = e.min + ve(t);
}
function vn(e, t, n, s) {
Wr(e.x, t.x, n.x, s?.x), Wr(e.y, t.y, n.y, s?.y);
}
function Kr(e, t, n, s, r) {
return e -= t, e = xn(e, 1 / n, s), r !== void 0 && (e = xn(e, 1 / r, s)), e;
}
function Jd(e, t = 0, n = 1, s = 0.5, r, o = e, i = e) {
if (He.test(t) && (t = parseFloat(t), t = Q(i.min, i.max, t / 100) - i.min), typeof t != "number")
return;
let a = Q(o.min, o.max, s);
e === o && (a -= t), e.min = Kr(e.min, t, n, a, r), e.max = Kr(e.max, t, n, a, r);
}
function Hr(e, t, [n, s, r], o, i) {
Jd(e, t[n], t[s], t[r], t.scale, o, i);
}
const Qd = ["x", "scaleX", "originX"], ef = ["y", "scaleY", "originY"];
function Gr(e, t, n, s) {
Hr(e.x, t, Qd, n ? n.x : void 0, s ? s.x : void 0), Hr(e.y, t, ef, n ? n.y : void 0, s ? s.y : void 0);
}
function Yr(e) {
return e.translate === 0 && e.scale === 1;
}
function Aa(e) {
return Yr(e.x) && Yr(e.y);
}
function Xr(e, t) {
return e.min === t.min && e.max === t.max;
}
function tf(e, t) {
return Xr(e.x, t.x) && Xr(e.y, t.y);
}
function qr(e, t) {
return Math.round(e.min) === Math.round(t.min) && Math.round(e.max) === Math.round(t.max);
}
function Ea(e, t) {
return qr(e.x, t.x) && qr(e.y, t.y);
}
function Zr(e) {
return ve(e.x) / ve(e.y);
}
function Jr(e, t) {
return e.translate === t.translate && e.scale === t.scale && e.originPoint === t.originPoint;
}
function We(e) {
return [e("x"), e("y")];
}
function nf(e, t, n) {
let s = "";
const r = e.x.translate / t.x, o = e.y.translate / t.y, i = n?.z || 0;
if ((r || o || i) && (s = `translate3d(${r}px, ${o}px, ${i}px) `), (t.x !== 1 || t.y !== 1) && (s += `scale(${1 / t.x}, ${1 / t.y}) `), n) {
const { transformPerspective: c, rotate: u, rotateX: f, rotateY: h, skewX: p, skewY: g } = n;
c && (s = `perspective(${c}px) ${s}`), u && (s += `rotate(${u}deg) `), f && (s += `rotateX(${f}deg) `), h && (s += `rotateY(${h}deg) `), p && (s += `skewX(${p}deg) `), g && (s += `skewY(${g}deg) `);
}
const a = e.x.scale * t.x, l = e.y.scale * t.y;
return (a !== 1 || l !== 1) && (s += `scale(${a}, ${l})`), s || "none";
}
const Ma = [
"borderTopLeftRadius",
"borderTopRightRadius",
"borderBottomLeftRadius",
"borderBottomRightRadius"
], sf = Ma.length, Qr = (e) => typeof e == "string" ? parseFloat(e) : e, ei = (e) => typeof e == "number" || _.test(e);
function rf(e, t, n, s, r, o) {
r ? (e.opacity = Q(0, n.opacity ?? 1, of(s)), e.opacityExit = Q(t.opacity ?? 1, 0, af(s))) : o && (e.opacity = Q(t.opacity ?? 1, n.opacity ?? 1, s));
for (let i = 0; i < sf; i++) {
const a = Ma[i];
let l = ti(t, a), c = ti(n, a);
if (l === void 0 && c === void 0)
continue;
l || (l = 0), c || (c = 0), l === 0 || c === 0 || ei(l) === ei(c) ? (e[a] = Math.max(Q(Qr(l), Qr(c), s), 0), (He.test(c) || He.test(l)) && (e[a] += "%")) : e[a] = c;
}
(t.rotate || n.rotate) && (e.rotate = Q(t.rotate || 0, n.rotate || 0, s));
}
function ti(e, t) {
return e[t] !== void 0 ? e[t] : e.borderRadius;
}
const of = /* @__PURE__ */ Va(0, 0.5, No), af = /* @__PURE__ */ Va(0.5, 0.95, Ie);
function Va(e, t, n) {
return (s) => s < e ? 0 : s > t ? 1 : n(/* @__PURE__ */ jt(e, t, s));
}
function lf(e, t, n) {
const s = fe(e) ? e : Ct(e);
return s.start(_s("", s, t, n)), s.animation;
}
function _t(e, t, n, s = { passive: !0 }) {
return e.addEventListener(t, n, s), () => e.removeEventListener(t, n);
}
const cf = (e, t) => e.depth - t.depth;
class uf {
constructor() {
this.children = [], this.isDirty = !1;
}
add(t) {
Ds(this.children, t), this.isDirty = !0;
}
remove(t) {
hn(this.children, t), this.isDirty = !0;
}
forEach(t) {
this.isDirty && this.children.sort(cf), this.isDirty = !1, this.children.forEach(t);
}
}
function df(e, t) {
const n = xe.now(), s = ({ timestamp: r }) => {
const o = r - n;
o >= t && (ot(s), e(o - t));
};
return Z.setup(s, !0), () => ot(s);
}
function un(e) {
return fe(e) ? e.get() : e;
}
class ff {
constructor() {
this.members = [];
}
add(t) {
Ds(this.members, t);
for (let n = this.members.length - 1; n >= 0; n--) {
const s = this.members[n];
if (s === t || s === this.lead || s === this.prevLead)
continue;
const r = s.instance;
(!r || r.isConnected === !1) && !s.snapshot && (hn(this.members, s), s.unmount());
}
t.scheduleRender();
}
remove(t) {
if (hn(this.members, t), t === this.prevLead && (this.prevLead = void 0), t === this.lead) {
const n = this.members[this.members.length - 1];
n && this.promote(n);
}
}
relegate(t) {
for (let n = this.members.indexOf(t) - 1; n >= 0; n--) {
const s = this.members[n];
if (s.isPresent !== !1 && s.instance?.isConnected !== !1)
return this.promote(s), !0;
}
return !1;
}
promote(t, n) {
const s = this.lead;
if (t !== s && (this.prevLead = s, this.lead = t, t.show(), s)) {
s.updateSnapshot(), t.scheduleRender();
const { layoutDependency: r } = s.options, { layoutDependency: o } = t.options;
(r === void 0 || r !== o) && (t.resumeFrom = s, n && (s.preserveOpacity = !0), s.snapshot && (t.snapshot = s.snapshot, t.snapshot.latestValues = s.animationValues || s.latestValues), t.root?.isUpdating && (t.isLayoutDirty = !0)), t.options.crossfade === !1 && s.hide();
}
}
exitAnimationComplete() {
this.members.forEach((t) => {
t.options.onExitComplete?.(), t.resumingFrom?.options.onExitComplete?.();
});
}
scheduleRender() {
this.members.forEach((t) => t.instance && t.scheduleRender(!1));
}
removeLeadSnapshot() {
this.lead?.snapshot && (this.lead.snapshot = void 0);
}
}
const dn = {
/**
* Global flag as to whether the tree has animated since the last time
* we resized the window
*/
hasAnimatedSinceResize: !0,
/**
* We set this to true once, on the first update. Any nodes added to the tree beyond that
* update will be given a `data-projection-id` attribute.
*/
hasEverUpdated: !1
}, zn = ["", "X", "Y", "Z"], hf = 1e3;
let mf = 0;
function Un(e, t, n, s) {
const { latestValues: r } = t;
r[e] && (n[e] = r[e], t.setStaticValue(e, 0), s && (s[e] = 0));
}
function Ia(e) {
if (e.hasCheckedOptimisedAppear = !0, e.root === e)
return;
const { visualElement: t } = e.options;
if (!t)
return;
const n = Qo(t);
if (window.MotionHasOptimisedAnimation(n, "transform")) {
const { layout: r, layoutId: o } = e.options;
window.MotionCancelOptimisedAnimation(n, "transform", Z, !(r || o));
}
const { parent: s } = e;
s && !s.hasCheckedOptimisedAppear && Ia(s);
}
function Ra({ attachResizeListener: e, defaultParent: t, measureScroll: n, checkIsScrollRoot: s, resetTransform: r }) {
return class {
constructor(i = {}, a = t?.()) {
this.id = mf++, this.animationId = 0, this.animationCommitId = 0, this.children = /* @__PURE__ */ new Set(), this.options = {}, this.isTreeAnimating = !1, this.isAnimationBlocked = !1, this.isLayoutDirty = !1, this.isProjectionDirty = !1, this.isSharedProjectionDirty = !1, this.isTransformDirty = !1, this.updateManuallyBlocked = !1, this.updateBlockedByResize = !1, this.isUpdating = !1, this.isSVG = !1, this.needsReset = !1, this.shouldResetTransform = !1, this.hasCheckedOptimisedAppear = !1, this.treeScale = { x: 1, y: 1 }, this.eventHandlers = /* @__PURE__ */ new Map(), this.hasTreeAnimated = !1, this.layoutVersion = 0, this.updateScheduled = !1, this.scheduleUpdate = () => this.update(), this.projectionUpdateScheduled = !1, this.checkUpdateFailed = () => {
this.isUpdating && (this.isUpdating = !1, this.clearAllSnapshots());
}, this.updateProjection = () => {
this.projectionUpdateScheduled = !1, this.nodes.forEach(yf), this.nodes.forEach(Tf), this.nodes.forEach(Sf), this.nodes.forEach(bf);
}, this.resolvedRelativeTargetAt = 0, this.linkedParentVersion = 0, this.hasProjected = !1, this.isVisible = !0, this.animationProgress = 0, this.sharedNodes = /* @__PURE__ */ new Map(), this.latestValues = i, this.root = a ? a.root || a : this, this.path = a ? [...a.path, a] : [], this.parent = a, this.depth = a ? a.depth + 1 : 0;
for (let l = 0; l < this.path.length; l++)
this.path[l].shouldResetTransform = !0;
this.root === this && (this.nodes = new uf());
}
addEventListener(i, a) {
return this.eventHandlers.has(i) || this.eventHandlers.set(i, new As()), this.eventHandlers.get(i).add(a);
}
notifyListeners(i, ...a) {
const l = this.eventHandlers.get(i);
l && l.notify(...a);
}
hasListeners(i) {
return this.eventHandlers.has(i);
}
/**
* Lifecycles
*/
mount(i) {
if (this.instance)
return;
this.isSVG = Gs(i) && !pd(i), this.instance = i;
const { layoutId: a, layout: l, visualElement: c } = this.options;
if (c && !c.current && c.mount(i), this.root.nodes.add(this), this.parent && this.parent.children.add(this), this.root.hasTreeAnimated && (l || a) && (this.isLayoutDirty = !0), e) {
let u, f = 0;
const h = () => this.root.updateBlockedByResize = !1;
Z.read(() => {
f = window.innerWidth;
}), e(i, () => {
const p = window.innerWidth;
p !== f && (f = p, this.root.updateBlockedByResize = !0, u && u(), u = df(h, 250), dn.hasAnimatedSinceResize && (dn.hasAnimatedSinceResize = !1, this.nodes.forEach(ri)));
});
}
a && this.root.registerSharedNode(a, this), this.options.animate !== !1 && c && (a || l) && this.addEventListener("didUpdate", ({ delta: u, hasLayoutChanged: f, hasRelativeLayoutChanged: h, layout: p }) => {
if (this.isTreeAnimationBlocked()) {
this.target = void 0, this.relativeTarget = void 0;
return;
}
const g = this.options.transition || c.getDefaultTransition() || Af, { onLayoutAnimationStart: y, onLayoutAnimationComplete: b } = c.getProps(), v = !this.targetLayout || !Ea(this.targetLayout, p), N = !f && h;
if (this.options.layoutRoot || this.resumeFrom || N || f && (v || !this.currentAnimation)) {
this.resumeFrom && (this.resumingFrom = this.resumeFrom, this.resumingFrom.resumingFrom = void 0);
const x = {
...$s(g, "layout"),
onPlay: y,
onComplete: b
};
(c.shouldReduceMotion || this.options.layoutRoot) && (x.delay = 0, x.type = !1), this.startAnimation(x), this.setAnimationOrigin(u, N);
} else
f || ri(this), this.isLead() && this.options.onExitComplete && this.options.onExitComplete();
this.targetLayout = p;
});
}
unmount() {
this.options.layoutId && this.willUpdate(), this.root.nodes.remove(this);
const i = this.getStack();
i && i.remove(this), this.parent && this.parent.children.delete(this), this.instance = void 0, this.eventHandlers.clear(), ot(this.updateProjection);
}
// only on the root
blockUpdate() {
this.updateManuallyBlocked = !0;
}
unblockUpdate() {
this.updateManuallyBlocked = !1;
}
isUpdateBlocked() {
return this.updateManuallyBlocked || this.updateBlockedByResize;
}
isTreeAnimationBlocked() {
return this.isAnimationBlocked || this.parent && this.parent.isTreeAnimationBlocked() || !1;
}
// Note: currently only running on root node
startUpdate() {
this.isUpdateBlocked() || (this.isUpdating = !0, this.nodes && this.nodes.forEach(Cf), this.animationId++);
}
getTransformTemplate() {
const { visualElement: i } = this.options;
return i && i.getProps().transformTemplate;
}
willUpdate(i = !0) {
if (this.root.hasTreeAnimated = !0, this.root.isUpdateBlocked()) {
this.options.onExitComplete && this.options.onExitComplete();
return;
}
if (window.MotionCancelOptimisedAnimation && !this.hasCheckedOptimisedAppear && Ia(this), !this.root.isUpdating && this.root.startUpdate(), this.isLayoutDirty)
return;
this.isLayoutDirty = !0;
for (let u = 0; u < this.path.length; u++) {
const f = this.path[u];
f.shouldResetTransform = !0, (typeof f.latestValues.x == "string" || typeof f.latestValues.y == "string") && (f.isLayoutDirty = !0), f.updateScroll("snapshot"), f.options.layoutRoot && f.willUpdate(!1);
}
const { layoutId: a, layout: l } = this.options;
if (a === void 0 && !l)
return;
const c = this.getTransformTemplate();
this.prevTransformTemplateValue = c ? c(this.latestValues, "") : void 0, this.updateSnapshot(), i && this.notifyListeners("willUpdate");
}
update() {
if (this.updateScheduled = !1, this.isUpdateBlocked()) {
const l = this.updateBlockedByResize;
this.unblockUpdate(), this.updateBlockedByResize = !1, this.clearAllSnapshots(), l && this.nodes.forEach(vf), this.nodes.forEach(ni);
return;
}
if (this.animationId <= this.animationCommitId) {
this.nodes.forEach(si);
return;
}
this.animationCommitId = this.animationId, this.isUpdating ? (this.isUpdating = !1, this.nodes.forEach(wf), this.nodes.forEach(Nf), this.nodes.forEach(pf), this.nodes.forEach(gf)) : this.nodes.forEach(si), this.clearAllSnapshots();
const a = xe.now();
ue.delta = Ge(0, 1e3 / 60, a - ue.timestamp), ue.timestamp = a, ue.isProcessing = !0, Rn.update.process(ue), Rn.preRender.process(ue), Rn.render.process(ue), ue.isProcessing = !1;
}
didUpdate() {
this.updateScheduled || (this.updateScheduled = !0, Ks.read(this.scheduleUpdate));
}
clearAllSnapshots() {
this.nodes.forEach(xf), this.sharedNodes.forEach(kf);
}
scheduleUpdateProjection() {
this.projectionUpdateScheduled || (this.projectionUpdateScheduled = !0, Z.preRender(this.updateProjection, !1, !0));
}
scheduleCheckAfterUnmount() {
Z.postRender(() => {
this.isLayoutDirty ? this.root.didUpdate() : this.root.checkUpdateFailed();
});
}
/**
* Update measurements
*/
updateSnapshot() {
this.snapshot || !this.instance || (this.snapshot = this.measure(), this.snapshot && !ve(this.snapshot.measuredBox.x) && !ve(this.snapshot.measuredBox.y) && (this.snapshot = void 0));
}
updateLayout() {
if (!this.instance || (this.updateScroll(), !(this.options.alwaysMeasureLayout && this.isLead()) && !this.isLayoutDirty))
return;
if (this.resumeFrom && !this.resumeFrom.instance)
for (let l = 0; l < this.path.length; l++)
this.path[l].updateScroll();
const i = this.layout;
this.layout = this.measure(!1), this.layoutVersion++, this.layoutCorrected || (this.layoutCorrected = ae()), this.isLayoutDirty = !1, this.projectionDelta = void 0, this.notifyListeners("measure", this.layout.layoutBox);
const { visualElement: a } = this.options;
a && a.notify("LayoutMeasure", this.layout.layoutBox, i ? i.layoutBox : void 0);
}
updateScroll(i = "measure") {
let a = !!(this.options.layoutScroll && this.instance);
if (this.scroll && this.scroll.animationId === this.root.animationId && this.scroll.phase === i && (a = !1), a && this.instance) {
const l = s(this.instance);
this.scroll = {
animationId: this.root.animationId,
phase: i,
isRoot: l,
offset: n(this.instance),
wasRoot: this.scroll ? this.scroll.isRoot : l
};
}
}
resetTransform() {
if (!r)
return;
const i = this.isLayoutDirty || this.shouldResetTransform || this.options.alwaysMeasureLayout, a = this.projectionDelta && !Aa(this.projectionDelta), l = this.getTransformTemplate(), c = l ? l(this.latestValues, "") : void 0, u = c !== this.prevTransformTemplateValue;
i && this.instance && (a || dt(this.latestValues) || u) && (r(this.instance, c), this.shouldResetTransform = !1, this.scheduleRender());
}
measure(i = !0) {
const a = this.measurePageBox();
let l = this.removeElementScroll(a);
return i && (l = this.removeTransform(l)), Ef(l), {
animationId: this.root.animationId,
measuredBox: a,
layoutBox: l,
latestValues: {},
source: this.id
};
}
measurePageBox() {
const { visualElement: i } = this.options;
if (!i)
return ae();
const a = i.measureViewportBox();
if (!(this.scroll?.wasRoot || this.path.some(Mf))) {
const { scroll: c } = this.root;
c && (Ke(a.x, c.offset.x), Ke(a.y, c.offset.y));
}
return a;
}
removeElementScroll(i) {
const a = ae();
if (Fe(a, i), this.scroll?.wasRoot)
return a;
for (let l = 0; l < this.path.length; l++) {
const c = this.path[l], { scroll: u, options: f } = c;
c !== this.root && u && f.layoutScroll && (u.wasRoot && Fe(a, i), Ke(a.x, u.offset.x), Ke(a.y, u.offset.y));
}
return a;
}
applyTransform(i, a = !1, l) {
const c = l || ae();
Fe(c, i);
for (let u = 0; u < this.path.length; u++) {
const f = this.path[u];
!a && f.options.layoutScroll && f.scroll && f !== f.root && (Ke(c.x, -f.scroll.offset.x), Ke(c.y, -f.scroll.offset.y)), dt(f.latestValues) && cn(c, f.latestValues, f.layout?.layoutBox);
}
return dt(this.latestValues) && cn(c, this.latestValues, this.layout?.layoutBox), c;
}
removeTransform(i) {
const a = ae();
Fe(a, i);
for (let l = 0; l < this.path.length; l++) {
const c = this.path[l];
if (!dt(c.latestValues))
continue;
let u;
c.instance && (gs(c.latestValues) && c.updateSnapshot(), u = ae(), Fe(u, c.measurePageBox())), Gr(a, c.latestValues, c.snapshot?.layoutBox, u);
}
return dt(this.latestValues) && Gr(a, this.latestValues), a;
}
setTargetDelta(i) {
this.targetDelta = i, this.root.scheduleUpdateProjection(), this.isProjectionDirty = !0;
}
setOptions(i) {
this.options = {
...this.options,
...i,
crossfade: i.crossfade !== void 0 ? i.crossfade : !0
};
}
clearMeasurements() {
this.scroll = void 0, this.layout = void 0, this.snapshot = void 0, this.prevTransformTemplateValue = void 0, this.targetDelta = void 0, this.target = void 0, this.isLayoutDirty = !1;
}
forceRelativeParentToResolveTarget() {
this.relativeParent && this.relativeParent.resolvedRelativeTargetAt !== ue.timestamp && this.relativeParent.resolveTargetDelta(!0);
}
resolveTargetDelta(i = !1) {
const a = this.getLead();
this.isProjectionDirty || (this.isProjectionDirty = a.isProjectionDirty), this.isTransformDirty || (this.isTransformDirty = a.isTransformDirty), this.isSharedProjectionDirty || (this.isSharedProjectionDirty = a.isSharedProjectionDirty);
const l = !!this.resumingFrom || this !== a;
if (!(i || l && this.isSharedProjectionDirty || this.isProjectionDirty || this.parent?.isProjectionDirty || this.attemptToResolveRelativeTarget || this.root.updateBlockedByResize))
return;
const { layout: u, layoutId: f } = this.options;
if (!this.layout || !(u || f))
return;
this.resolvedRelativeTargetAt = ue.timestamp;
const h = this.getClosestProjectingParent();
h && this.linkedParentVersion !== h.layoutVersion && !h.options.layoutRoot && this.removeRelativeTarget(), !this.targetDelta && !this.relativeTarget && (this.options.layoutAnchor !== !1 && h && h.layout ? this.createRelativeTarget(h, this.layout.layoutBox, h.layout.layoutBox) : this.removeRelativeTarget()), !(!this.relativeTarget && !this.targetDelta) && (this.target || (this.target = ae(), this.targetWithTransforms = ae()), this.relativeTarget && this.relativeTargetOrigin && this.relativeParent && this.relativeParent.target ? (this.forceRelativeParentToResolveTarget(), Zd(this.target, this.relativeTarget, this.relativeParent.target, this.options.layoutAnchor || void 0)) : this.targetDelta ? (this.resumingFrom ? this.applyTransform(this.layout.layoutBox, !1, this.target) : Fe(this.target, this.layout.layoutBox), ya(this.target, this.targetDelta)) : Fe(this.target, this.layout.layoutBox), this.attemptToResolveRelativeTarget && (this.attemptToResolveRelativeTarget = !1, this.options.layoutAnchor !== !1 && h && !!h.resumingFrom == !!this.resumingFrom && !h.options.layoutScroll && h.target && this.animationProgress !== 1 ? this.createRelativeTarget(h, this.target, h.target) : this.relativeParent = this.relativeTarget = void 0));
}
getClosestProjectingParent() {
if (!(!this.parent || gs(this.parent.latestValues) || ga(this.parent.latestValues)))
return this.parent.isProjecting() ? this.parent : this.parent.getClosestProjectingParent();
}
isProjecting() {
return !!((this.relativeTarget || this.targetDelta || this.options.layoutRoot) && this.layout);
}
createRelativeTarget(i, a, l) {
this.relativeParent = i, this.linkedParentVersion = i.layoutVersion, this.forceRelativeParentToResolveTarget(), this.relativeTarget = ae(), this.relativeTargetOrigin = ae(), vn(this.relativeTargetOrigin, a, l, this.options.layoutAnchor || void 0), Fe(this.relativeTarget, this.relativeTargetOrigin);
}
removeRelativeTarget() {
this.relativeParent = this.relativeTarget = void 0;
}
calcProjection() {
const i = this.getLead(), a = !!this.resumingFrom || this !== i;
let l = !0;
if ((this.isProjectionDirty || this.parent?.isProjectionDirty) && (l = !1), a && (this.isSharedProjectionDirty || this.isTransformDirty) && (l = !1), this.resolvedRelativeTargetAt === ue.timestamp && (l = !1), l)
return;
const { layout: c, layoutId: u } = this.options;
if (this.isTreeAnimating = !!(this.parent && this.parent.isTreeAnimating || this.currentAnimation || this.pendingAnimation), this.isTreeAnimating || (this.targetDelta = this.relativeTarget = void 0), !this.layout || !(c || u))
return;
Fe(this.layoutCorrected, this.layout.layoutBox);
const f = this.treeScale.x, h = this.treeScale.y;
kd(this.layoutCorrected, this.treeScale, this.path, a), i.layout && !i.target && (this.treeScale.x !== 1 || this.treeScale.y !== 1) && (i.target = i.layout.layoutBox, i.targetWithTransforms = ae());
const { target: p } = i;
if (!p) {
this.prevProjectionDelta && (this.createProjectionDeltas(), this.scheduleRender());
return;
}
!this.projectionDelta || !this.prevProjectionDelta ? this.createProjectionDeltas() : (_r(this.prevProjectionDelta.x, this.projectionDelta.x), _r(this.prevProjectionDelta.y, this.projectionDelta.y)), Rt(this.projectionDelta, this.layoutCorrected, p, this.latestValues), (this.treeScale.x !== f || this.treeScale.y !== h || !Jr(this.projectionDelta.x, this.prevProjectionDelta.x) || !Jr(this.projectionDelta.y, this.prevProjectionDelta.y)) && (this.hasProjected = !0, this.scheduleRender(), this.notifyListeners("projectionUpdate", p));
}
hide() {
this.isVisible = !1;
}
show() {
this.isVisible = !0;
}
scheduleRender(i = !0) {
if (this.options.visualElement?.scheduleRender(), i) {
const a = this.getStack();
a && a.scheduleRender();
}
this.resumingFrom && !this.resumingFrom.instance && (this.resumingFrom = void 0);
}
createProjectionDeltas() {
this.prevProjectionDelta = Nt(), this.projectionDelta = Nt(), this.projectionDeltaWithTransform = Nt();
}
setAnimationOrigin(i, a = !1) {
const l = this.snapshot, c = l ? l.latestValues : {}, u = { ...this.latestValues }, f = Nt();
(!this.relativeParent || !this.relativeParent.options.layoutRoot) && (this.relativeTarget = this.relativeTargetOrigin = void 0), this.attemptToResolveRelativeTarget = !a;
const h = ae(), p = l ? l.source : void 0, g = this.layout ? this.layout.source : void 0, y = p !== g, b = this.getStack(), v = !b || b.members.length <= 1, N = !!(y && !v && this.options.crossfade === !0 && !this.path.some(Df));
this.animationProgress = 0;
let x;
this.mixTargetDelta = (w) => {
const T = w / 1e3;
ii(f.x, i.x, T), ii(f.y, i.y, T), this.setTargetDelta(f), this.relativeTarget && this.relativeTargetOrigin && this.layout && this.relativeParent && this.relativeParent.layout && (vn(h, this.layout.layoutBox, this.relativeParent.layout.layoutBox, this.options.layoutAnchor || void 0), Pf(this.relativeTarget, this.relativeTargetOrigin, h, T), x && tf(this.relativeTarget, x) && (this.isProjectionDirty = !1), x || (x = ae()), Fe(x, this.relativeTarget)), y && (this.animationValues = u, rf(u, c, this.latestValues, T, N, v)), this.root.scheduleUpdateProjection(), this.scheduleRender(), this.animationProgress = T;
}, this.mixTargetDelta(this.options.layoutRoot ? 1e3 : 0);
}
startAnimation(i) {
this.notifyListeners("animationStart"), this.currentAnimation?.stop(), this.resumingFrom?.currentAnimation?.stop(), this.pendingAnimation && (ot(this.pendingAnimation), this.pendingAnimation = void 0), this.pendingAnimation = Z.update(() => {
dn.hasAnimatedSinceResize = !0, this.motionValue || (this.motionValue = Ct(0)), this.motionValue.jump(0, !1), this.currentAnimation = lf(this.motionValue, [0, 1e3], {
...i,
velocity: 0,
isSync: !0,
onUpdate: (a) => {
this.mixTargetDelta(a), i.onUpdate && i.onUpdate(a);
},
onStop: () => {
},
onComplete: () => {
i.onComplete && i.onComplete(), this.completeAnimation();
}
}), this.resumingFrom && (this.resumingFrom.currentAnimation = this.currentAnimation), this.pendingAnimation = void 0;
});
}
completeAnimation() {
this.resumingFrom && (this.resumingFrom.currentAnimation = void 0, this.resumingFrom.preserveOpacity = void 0);
const i = this.getStack();
i && i.exitAnimationComplete(), this.resumingFrom = this.currentAnimation = this.animationValues = void 0, this.notifyListeners("animationComplete");
}
finishAnimation() {
this.currentAnimation && (this.mixTargetDelta && this.mixTargetDelta(hf), this.currentAnimation.stop()), this.completeAnimation();
}
applyTransformsToTarget() {
const i = this.getLead();
let { targetWithTransforms: a, target: l, layout: c, latestValues: u } = i;
if (!(!a || !l || !c)) {
if (this !== i && this.layout && c && La(this.options.animationType, this.layout.layoutBox, c.layoutBox)) {
l = this.target || ae();
const f = ve(this.layout.layoutBox.x);
l.x.min = i.target.x.min, l.x.max = l.x.min + f;
const h = ve(this.layout.layoutBox.y);
l.y.min = i.target.y.min, l.y.max = l.y.min + h;
}
Fe(a, l), cn(a, u), Rt(this.projectionDeltaWithTransform, this.layoutCorrected, a, u);
}
}
registerSharedNode(i, a) {
this.sharedNodes.has(i) || this.sharedNodes.set(i, new ff()), this.sharedNodes.get(i).add(a);
const c = a.options.initialPromotionConfig;
a.promote({
transition: c ? c.transition : void 0,
preserveFollowOpacity: c && c.shouldPreserveFollowOpacity ? c.shouldPreserveFollowOpacity(a) : void 0
});
}
isLead() {
const i = this.getStack();
return i ? i.lead === this : !0;
}
getLead() {
const { layoutId: i } = this.options;
return i ? this.getStack()?.lead || this : this;
}
getPrevLead() {
const { layoutId: i } = this.options;
return i ? this.getStack()?.prevLead : void 0;
}
getStack() {
const { layoutId: i } = this.options;
if (i)
return this.root.sharedNodes.get(i);
}
promote({ needsReset: i, transition: a, preserveFollowOpacity: l } = {}) {
const c = this.getStack();
c && c.promote(this, l), i && (this.projectionDelta = void 0, this.needsReset = !0), a && this.setOptions({ transition: a });
}
relegate() {
const i = this.getStack();
return i ? i.relegate(this) : !1;
}
resetSkewAndRotation() {
const { visualElement: i } = this.options;
if (!i)
return;
let a = !1;
const { latestValues: l } = i;
if ((l.z || l.rotate || l.rotateX || l.rotateY || l.rotateZ || l.skewX || l.skewY) && (a = !0), !a)
return;
const c = {};
l.z && Un("z", i, c, this.animationValues);
for (let u = 0; u < zn.length; u++)
Un(`rotate${zn[u]}`, i, c, this.animationValues), Un(`skew${zn[u]}`, i, c, this.animationValues);
i.render();
for (const u in c)
i.setStaticValue(u, c[u]), this.animationValues && (this.animationValues[u] = c[u]);
i.scheduleRender();
}
applyProjectionStyles(i, a) {
if (!this.instance || this.isSVG)
return;
if (!this.isVisible) {
i.visibility = "hidden";
return;
}
const l = this.getTransformTemplate();
if (this.needsReset) {
this.needsReset = !1, i.visibility = "", i.opacity = "", i.pointerEvents = un(a?.pointerEvents) || "", i.transform = l ? l(this.latestValues, "") : "none";
return;
}
const c = this.getLead();
if (!this.projectionDelta || !this.layout || !c.target) {
this.options.layoutId && (i.opacity = this.latestValues.opacity !== void 0 ? this.latestValues.opacity : 1, i.pointerEvents = un(a?.pointerEvents) || ""), this.hasProjected && !dt(this.latestValues) && (i.transform = l ? l({}, "") : "none", this.hasProjected = !1);
return;
}
i.visibility = "";
const u = c.animationValues || c.latestValues;
this.applyTransformsToTarget();
let f = nf(this.projectionDeltaWithTransform, this.treeScale, u);
l && (f = l(u, f)), i.transform = f;
const { x: h, y: p } = this.projectionDelta;
i.transformOrigin = `${h.origin * 100}% ${p.origin * 100}% 0`, c.animationValues ? i.opacity = c === this ? u.opacity ?? this.latestValues.opacity ?? 1 : this.preserveOpacity ? this.latestValues.opacity : u.opacityExit : i.opacity = c === this ? u.opacity !== void 0 ? u.opacity : "" : u.opacityExit !== void 0 ? u.opacityExit : 0;
for (const g in bs) {
if (u[g] === void 0)
continue;
const { correct: y, applyTo: b, isCSSVariable: v } = bs[g], N = f === "none" ? u[g] : y(u[g], c);
if (b) {
const x = b.length;
for (let w = 0; w < x; w++)
i[b[w]] = N;
} else
v ? this.options.visualElement.renderState.vars[g] = N : i[g] = N;
}
this.options.layoutId && (i.pointerEvents = c === this ? un(a?.pointerEvents) || "" : "none");
}
clearSnapshot() {
this.resumeFrom = this.snapshot = void 0;
}
// Only run on root
resetTree() {
this.root.nodes.forEach((i) => i.currentAnimation?.stop()), this.root.nodes.forEach(ni), this.root.sharedNodes.clear();
}
};
}
function pf(e) {
e.updateLayout();
}
function gf(e) {
const t = e.resumeFrom?.snapshot || e.snapshot;
if (e.isLead() && e.layout && t && e.hasListeners("didUpdate")) {
const { layoutBox: n, measuredBox: s } = e.layout, { animationType: r } = e.options, o = t.source !== e.layout.source;
if (r === "size")
We((u) => {
const f = o ? t.measuredBox[u] : t.layoutBox[u], h = ve(f);
f.min = n[u].min, f.max = f.min + h;
});
else if (r === "x" || r === "y") {
const u = r === "x" ? "y" : "x";
xs(o ? t.measuredBox[u] : t.layoutBox[u], n[u]);
} else La(r, t.layoutBox, n) && We((u) => {
const f = o ? t.measuredBox[u] : t.layoutBox[u], h = ve(n[u]);
f.max = f.min + h, e.relativeTarget && !e.currentAnimation && (e.isProjectionDirty = !0, e.relativeTarget[u].max = e.relativeTarget[u].min + h);
});
const i = Nt();
Rt(i, n, t.layoutBox);
const a = Nt();
o ? Rt(a, e.applyTransform(s, !0), t.measuredBox) : Rt(a, n, t.layoutBox);
const l = !Aa(i);
let c = !1;
if (!e.resumeFrom) {
const u = e.getClosestProjectingParent();
if (u && !u.resumeFrom) {
const { snapshot: f, layout: h } = u;
if (f && h) {
const p = e.options.layoutAnchor || void 0, g = ae();
vn(g, t.layoutBox, f.layoutBox, p);
const y = ae();
vn(y, n, h.layoutBox, p), Ea(g, y) || (c = !0), u.options.layoutRoot && (e.relativeTarget = y, e.relativeTargetOrigin = g, e.relativeParent = u);
}
}
}
e.notifyListeners("didUpdate", {
layout: n,
snapshot: t,
delta: a,
layoutDelta: i,
hasLayoutChanged: l,
hasRelativeLayoutChanged: c
});
} else if (e.isLead()) {
const { onExitComplete: n } = e.options;
n && n();
}
e.options.transition = void 0;
}
function yf(e) {
e.parent && (e.isProjecting() || (e.isProjectionDirty = e.parent.isProjectionDirty), e.isSharedProjectionDirty || (e.isSharedProjectionDirty = !!(e.isProjectionDirty || e.parent.isProjectionDirty || e.parent.isSharedProjectionDirty)), e.isTransformDirty || (e.isTransformDirty = e.parent.isTransformDirty));
}
function bf(e) {
e.isProjectionDirty = e.isSharedProjectionDirty = e.isTransformDirty = !1;
}
function xf(e) {
e.clearSnapshot();
}
function ni(e) {
e.clearMeasurements();
}
function vf(e) {
e.isLayoutDirty = !0, e.updateLayout();
}
function si(e) {
e.isLayoutDirty = !1;
}
function wf(e) {
e.isAnimationBlocked && e.layout && !e.isLayoutDirty && (e.snapshot = e.layout, e.isLayoutDirty = !0);
}
function Nf(e) {
const { visualElement: t } = e.options;
t && t.getProps().onBeforeLayoutMeasure && t.notify("BeforeLayoutMeasure"), e.resetTransform();
}
function ri(e) {
e.finishAnimation(), e.targetDelta = e.relativeTarget = e.target = void 0, e.isProjectionDirty = !0;
}
function Tf(e) {
e.resolveTargetDelta();
}
function Sf(e) {
e.calcProjection();
}
function Cf(e) {
e.resetSkewAndRotation();
}
function kf(e) {
e.removeLeadSnapshot();
}
function ii(e, t, n) {
e.translate = Q(t.translate, 0, n), e.scale = Q(t.scale, 1, n), e.origin = t.origin, e.originPoint = t.originPoint;
}
function oi(e, t, n, s) {
e.min = Q(t.min, n.min, s), e.max = Q(t.max, n.max, s);
}
function Pf(e, t, n, s) {
oi(e.x, t.x, n.x, s), oi(e.y, t.y, n.y, s);
}
function Df(e) {
return e.animationValues && e.animationValues.opacityExit !== void 0;
}
const Af = {
duration: 0.45,
ease: [0.4, 0, 0.1, 1]
}, ai = (e) => typeof navigator < "u" && navigator.userAgent && navigator.userAgent.toLowerCase().includes(e), li = ai("applewebkit/") && !ai("chrome/") ? Math.round : Ie;
function ci(e) {
e.min = li(e.min), e.max = li(e.max);
}
function Ef(e) {
ci(e.x), ci(e.y);
}
function La(e, t, n) {
return e === "position" || e === "preserve-aspect" && !qd(Zr(t), Zr(n), 0.2);
}
function Mf(e) {
return e !== e.root && e.scroll?.wasRoot;
}
const Vf = Ra({
attachResizeListener: (e, t) => _t(e, "resize", t),
measureScroll: () => ({
x: document.documentElement.scrollLeft || document.body?.scrollLeft || 0,
y: document.documentElement.scrollTop || document.body?.scrollTop || 0
}),
checkIsScrollRoot: () => !0
}), Wn = {
current: void 0
}, Ba = Ra({
measureScroll: (e) => ({
x: e.scrollLeft,
y: e.scrollTop
}),
defaultParent: () => {
if (!Wn.current) {
const e = new Vf({});
e.mount(window), e.setOptions({ layoutScroll: !0 }), Wn.current = e;
}
return Wn.current;
},
resetTransform: (e, t) => {
e.style.transform = t !== void 0 ? t : "none";
},
checkIsScrollRoot: (e) => window.getComputedStyle(e).position === "fixed"
}), Js = gt({
transformPagePoint: (e) => e,
isStatic: !1,
reducedMotion: "never"
});
function ui(e, t) {
if (typeof e == "function")
return e(t);
e != null && (e.current = t);
}
function If(...e) {
return (t) => {
let n = !1;
const s = e.map((r) => {
const o = ui(r, t);
return !n && typeof o == "function" && (n = !0), o;
});
if (n)
return () => {
for (let r = 0; r < s.length; r++) {
const o = s[r];
typeof o == "function" ? o() : ui(e[r], null);
}
};
};
}
function Rf(...e) {
return Nn.useCallback(If(...e), e);
}
class Lf extends Nn.Component {
getSnapshotBeforeUpdate(t) {
const n = this.props.childRef.current;
if (sn(n) && t.isPresent && !this.props.isPresent && this.props.pop !== !1) {
const s = n.offsetParent, r = sn(s) && s.offsetWidth || 0, o = sn(s) && s.offsetHeight || 0, i = getComputedStyle(n), a = this.props.sizeRef.current;
a.height = parseFloat(i.height), a.width = parseFloat(i.width), a.top = n.offsetTop, a.left = n.offsetLeft, a.right = r - a.width - a.left, a.bottom = o - a.height - a.top;
}
return null;
}
/**
* Required with getSnapshotBeforeUpdate to stop React complaining.
*/
componentDidUpdate() {
}
render() {
return this.props.children;
}
}
function Bf({ children: e, isPresent: t, anchorX: n, anchorY: s, root: r, pop: o }) {
const i = le(), a = G(null), l = G({
width: 0,
height: 0,
top: 0,
left: 0,
right: 0,
bottom: 0
}), { nonce: c } = de(Js), u = e.props?.ref ?? e?.ref, f = Rf(a, u);
return Ts(() => {
const { width: h, height: p, top: g, left: y, right: b, bottom: v } = l.current;
if (t || o === !1 || !a.current || !h || !p)
return;
const N = n === "left" ? `left: ${y}` : `right: ${b}`, x = s === "bottom" ? `bottom: ${v}` : `top: ${g}`;
a.current.dataset.motionPopId = i;
const w = document.createElement("style");
c && (w.nonce = c);
const T = r ?? document.head;
return T.appendChild(w), w.sheet && w.sheet.insertRule(`
[data-motion-pop-id="${i}"] {
position: absolute !important;
width: ${h}px !important;
height: ${p}px !important;
${N}px !important;
${x}px !important;
}
`), () => {
a.current?.removeAttribute("data-motion-pop-id"), T.contains(w) && T.removeChild(w);
};
}, [t]), d(Lf, { isPresent: t, childRef: a, sizeRef: l, pop: o, children: o === !1 ? e : Nn.cloneElement(e, { ref: f }) });
}
const Ff = ({ children: e, initial: t, isPresent: n, onExitComplete: s, custom: r, presenceAffectsLayout: o, mode: i, anchorX: a, anchorY: l, root: c }) => {
const u = Ps(jf), f = le();
let h = !0, p = Se(() => (h = !1, {
id: f,
initial: t,
isPresent: n,
custom: r,
onExitComplete: (g) => {
u.set(g, !0);
for (const y of u.values())
if (!y)
return;
s && s();
},
register: (g) => (u.set(g, !1), () => u.delete(g))
}), [n, u, s]);
return o && h && (p = { ...p }), Se(() => {
u.forEach((g, y) => u.set(y, !1));
}, [n]), Nn.useEffect(() => {
!n && !u.size && s && s();
}, [n]), e = d(Bf, { pop: i === "popLayout", isPresent: n, anchorX: a, anchorY: l, root: c, children: e }), d(Cn.Provider, { value: p, children: e });
};
function jf() {
return /* @__PURE__ */ new Map();
}
function Fa(e = !0) {
const t = de(Cn);
if (t === null)
return [!0, null];
const { isPresent: n, onExitComplete: s, register: r } = t, o = le();
ee(() => {
if (e)
return r(o);
}, [e]);
const i = Ft(() => e && s && s(o), [o, s, e]);
return !n && s ? [!1, i] : [!0];
}
const Jt = (e) => e.key || "";
function di(e) {
const t = [];
return ol.forEach(e, (n) => {
al(n) && t.push(n);
}), t;
}
const Kt = ({ children: e, custom: t, initial: n = !0, onExitComplete: s, presenceAffectsLayout: r = !0, mode: o = "sync", propagate: i = !1, anchorX: a = "left", anchorY: l = "top", root: c }) => {
const [u, f] = Fa(i), h = Se(() => di(e), [e]), p = i && !u ? [] : h.map(Jt), g = G(!0), y = G(h), b = Ps(() => /* @__PURE__ */ new Map()), v = G(/* @__PURE__ */ new Set()), [N, x] = H(h), [w, T] = H(h);
co(() => {
g.current = !1, y.current = h;
for (let S = 0; S < w.length; S++) {
const V = Jt(w[S]);
p.includes(V) ? (b.delete(V), v.current.delete(V)) : b.get(V) !== !0 && b.set(V, !1);
}
}, [w, p.length, p.join("-")]);
const D = [];
if (h !== N) {
let S = [...h];
for (let V = 0; V < w.length; V++) {
const A = w[V], F = Jt(A);
p.includes(F) || (S.splice(V, 0, A), D.push(A));
}
return o === "wait" && D.length && (S = D), T(di(S)), x(h), null;
}
process.env.NODE_ENV !== "production" && o === "wait" && w.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: k } = de(ks);
return d(Te, { children: w.map((S) => {
const V = Jt(S), A = i && !u ? !1 : h === w || p.includes(V), F = () => {
if (v.current.has(V))
return;
if (b.has(V))
v.current.add(V), b.set(V, !0);
else
return;
let L = !0;
b.forEach(($) => {
$ || (L = !1);
}), L && (k?.(), T(y.current), i && f?.(), s && s());
};
return d(Ff, { isPresent: A, initial: !g.current || n ? void 0 : !1, custom: t, presenceAffectsLayout: r, mode: o, root: c, onExitComplete: A ? void 0 : F, anchorX: a, anchorY: l, children: S }, V);
}) });
}, ja = gt({ strict: !1 }), fi = {
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"]
};
let hi = !1;
function Of() {
if (hi)
return;
const e = {};
for (const t in fi)
e[t] = {
isEnabled: (n) => fi[t].some((s) => !!n[s])
};
ha(e), hi = !0;
}
function Oa() {
return Of(), Nd();
}
function $f(e) {
const t = Oa();
for (const n in e)
t[n] = {
...t[n],
...e[n]
};
ha(t);
}
const _f = /* @__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",
"propagate",
"ignoreStrict",
"viewport"
]);
function wn(e) {
return e.startsWith("while") || e.startsWith("drag") && e !== "draggable" || e.startsWith("layout") || e.startsWith("onTap") || e.startsWith("onPan") || e.startsWith("onLayout") || _f.has(e);
}
let $a = (e) => !wn(e);
function zf(e) {
typeof e == "function" && ($a = (t) => t.startsWith("on") ? !wn(t) : e(t));
}
try {
zf(require("@emotion/is-prop-valid").default);
} catch {
}
function Uf(e, t, n) {
const s = {};
for (const r in e)
r === "values" && typeof e.values == "object" || fe(e[r]) || ($a(r) || n === !0 && wn(r) || !t && !wn(r) || // If trying to use native HTML drag events, forward drag listeners
e.draggable && r.startsWith("onDrag")) && (s[r] = e[r]);
return s;
}
const An = /* @__PURE__ */ gt({});
function Wf(e, t) {
if (Dn(e)) {
const { initial: n, animate: s } = e;
return {
initial: n === !1 || $t(n) ? n : void 0,
animate: $t(s) ? s : void 0
};
}
return e.inherit !== !1 ? t : {};
}
function Kf(e) {
const { initial: t, animate: n } = Wf(e, de(An));
return Se(() => ({ initial: t, animate: n }), [mi(t), mi(n)]);
}
function mi(e) {
return Array.isArray(e) ? e.join(" ") : e;
}
const Qs = () => ({
style: {},
transform: {},
transformOrigin: {},
vars: {}
});
function _a(e, t, n) {
for (const s in t)
!fe(t[s]) && !va(s, n) && (e[s] = t[s]);
}
function Hf({ transformTemplate: e }, t) {
return Se(() => {
const n = Qs();
return qs(n, t, e), Object.assign({}, n.vars, n.style);
}, [t]);
}
function Gf(e, t) {
const n = e.style || {}, s = {};
return _a(s, n, e), Object.assign(s, Hf(e, t)), s;
}
function Yf(e, t) {
const n = {}, s = Gf(e, t);
return e.drag && e.dragListener !== !1 && (n.draggable = !1, s.userSelect = s.WebkitUserSelect = s.WebkitTouchCallout = "none", s.touchAction = e.drag === !0 ? "none" : `pan-${e.drag === "x" ? "y" : "x"}`), e.tabIndex === void 0 && (e.onTap || e.onTapStart || e.whileTap) && (n.tabIndex = 0), n.style = s, n;
}
const za = () => ({
...Qs(),
attrs: {}
});
function Xf(e, t, n, s) {
const r = Se(() => {
const o = za();
return wa(o, t, Ta(s), e.transformTemplate, e.style), {
...o.attrs,
style: { ...o.style }
};
}, [t]);
if (e.style) {
const o = {};
_a(o, e.style, e), r.style = { ...o, ...r.style };
}
return r;
}
const qf = [
"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 er(e) {
return (
/**
* If it's not a string, it's a custom React component. Currently we only support
* HTML custom React components.
*/
typeof e != "string" || /**
* If it contains a dash, the element is a custom HTML webcomponent.
*/
e.includes("-") ? !1 : (
/**
* If it's in our list of lowercase SVG tags, it's an SVG component
*/
!!(qf.indexOf(e) > -1 || /**
* If it contains a capital letter, it's an SVG component
*/
/[A-Z]/u.test(e))
)
);
}
function Zf(e, t, n, { latestValues: s }, r, o = !1, i) {
const l = (i ?? er(e) ? Xf : Yf)(t, s, r, e), c = Uf(t, typeof e == "string", o), u = e !== to ? { ...c, ...l, ref: n } : {}, { children: f } = t, h = Se(() => fe(f) ? f.get() : f, [f]);
return ll(e, {
...u,
children: h
});
}
function Jf({ scrapeMotionValuesFromProps: e, createRenderState: t }, n, s, r) {
return {
latestValues: Qf(n, s, r, e),
renderState: t()
};
}
function Qf(e, t, n, s) {
const r = {}, o = s(e, {});
for (const h in o)
r[h] = un(o[h]);
let { initial: i, animate: a } = e;
const l = Dn(e), c = da(e);
t && c && !l && e.inherit !== !1 && (i === void 0 && (i = t.initial), a === void 0 && (a = t.animate));
let u = n ? n.initial === !1 : !1;
u = u || i === !1;
const f = u ? a : i;
if (f && typeof f != "boolean" && !Pn(f)) {
const h = Array.isArray(f) ? f : [f];
for (let p = 0; p < h.length; p++) {
const g = zs(e, h[p]);
if (g) {
const { transitionEnd: y, transition: b, ...v } = g;
for (const N in v) {
let x = v[N];
if (Array.isArray(x)) {
const w = u ? x.length - 1 : 0;
x = x[w];
}
x !== null && (r[N] = x);
}
for (const N in y)
r[N] = y[N];
}
}
}
return r;
}
const Ua = (e) => (t, n) => {
const s = de(An), r = de(Cn), o = () => Jf(e, t, s, r);
return n ? o() : Ps(o);
}, eh = /* @__PURE__ */ Ua({
scrapeMotionValuesFromProps: Zs,
createRenderState: Qs
}), th = /* @__PURE__ */ Ua({
scrapeMotionValuesFromProps: Sa,
createRenderState: za
}), nh = Symbol.for("motionComponentSymbol");
function sh(e, t, n) {
const s = G(n);
Ts(() => {
s.current = n;
});
const r = G(null);
return Ft((o) => {
o && e.onMount?.(o);
const i = s.current;
if (typeof i == "function")
if (o) {
const a = i(o);
typeof a == "function" && (r.current = a);
} else r.current ? (r.current(), r.current = null) : i(o);
else i && (i.current = o);
t && (o ? t.mount(o) : t.unmount());
}, [t]);
}
const Wa = gt({});
function bt(e) {
return e && typeof e == "object" && Object.prototype.hasOwnProperty.call(e, "current");
}
function rh(e, t, n, s, r, o) {
const { visualElement: i } = de(An), a = de(ja), l = de(Cn), c = de(Js), u = c.reducedMotion, f = c.skipAnimations, h = G(null), p = G(!1);
s = s || a.renderer, !h.current && s && (h.current = s(e, {
visualState: t,
parent: i,
props: n,
presenceContext: l,
blockInitialAnimation: l ? l.initial === !1 : !1,
reducedMotionConfig: u,
skipAnimations: f,
isSVG: o
}), p.current && h.current && (h.current.manuallyAnimateOnMount = !0));
const g = h.current, y = de(Wa);
g && !g.projection && r && (g.type === "html" || g.type === "svg") && ih(h.current, n, r, y);
const b = G(!1);
Ts(() => {
g && b.current && g.update(n, l);
});
const v = n[Jo], N = G(!!v && typeof window < "u" && !window.MotionHandoffIsComplete?.(v) && window.MotionHasOptimisedAnimation?.(v));
return co(() => {
p.current = !0, g && (b.current = !0, window.MotionIsMounted = !0, g.updateFeatures(), g.scheduleRenderMicrotask(), N.current && g.animationState && g.animationState.animateChanges());
}), ee(() => {
g && (!N.current && g.animationState && g.animationState.animateChanges(), N.current && (queueMicrotask(() => {
window.MotionHandoffMarkAsComplete?.(v);
}), N.current = !1), g.enteringChildren = void 0);
}), g;
}
function ih(e, t, n, s) {
const { layoutId: r, layout: o, drag: i, dragConstraints: a, layoutScroll: l, layoutRoot: c, layoutAnchor: u, layoutCrossfade: f } = t;
e.projection = new n(e.latestValues, t["data-framer-portal-id"] ? void 0 : Ka(e.parent)), e.projection.setOptions({
layoutId: r,
layout: o,
alwaysMeasureLayout: !!i || a && bt(a),
visualElement: e,
/**
* 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: f,
layoutScroll: l,
layoutRoot: c,
layoutAnchor: u
});
}
function Ka(e) {
if (e)
return e.options.allowProjection !== !1 ? e.projection : Ka(e.parent);
}
function Kn(e, { forwardMotionProps: t = !1, type: n } = {}, s, r) {
s && $f(s);
const o = n ? n === "svg" : er(e), i = o ? th : eh;
function a(c, u) {
let f;
const h = {
...de(Js),
...c,
layoutId: oh(c)
}, { isStatic: p } = h, g = Kf(c), y = i(c, p);
if (!p && typeof window < "u") {
ah(h, s);
const b = lh(h);
f = b.MeasureLayout, g.visualElement = rh(e, y, h, r, b.ProjectionNode, o);
}
return P(An.Provider, { value: g, children: [f && g.visualElement ? d(f, { visualElement: g.visualElement, ...h }) : null, Zf(e, c, sh(y, g.visualElement, u), y, p, t, o)] });
}
a.displayName = `motion.${typeof e == "string" ? e : `create(${e.displayName ?? e.name ?? ""})`}`;
const l = Y(a);
return l[nh] = e, l;
}
function oh({ layoutId: e }) {
const t = de(ks).id;
return t && e !== void 0 ? t + "-" + e : e;
}
function ah(e, t) {
const n = de(ja).strict;
if (process.env.NODE_ENV !== "production" && t && 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.";
e.ignoreStrict ? kt(!1, s, "lazy-strict-mode") : Ze(!1, s, "lazy-strict-mode");
}
}
function lh(e) {
const t = Oa(), { drag: n, layout: s } = t;
if (!n && !s)
return {};
const r = { ...n, ...s };
return {
MeasureLayout: n?.isEnabled(e) || s?.isEnabled(e) ? r.MeasureLayout : void 0,
ProjectionNode: r.ProjectionNode
};
}
function ch(e, t) {
if (typeof Proxy > "u")
return Kn;
const n = /* @__PURE__ */ new Map(), s = (o, i) => Kn(o, i, e, t), r = (o, i) => (process.env.NODE_ENV !== "production" && Es(!1, "motion() is deprecated. Use motion.create() instead."), s(o, i));
return new Proxy(r, {
/**
* 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: (o, i) => i === "create" ? s : (n.has(i) || n.set(i, Kn(i, void 0, e, t)), n.get(i))
});
}
const uh = (e, t) => t.isSVG ?? er(e) ? new Od(t) : new Id(t, {
allowProjection: e !== to
});
class dh extends lt {
/**
* We dynamically generate the AnimationState manager as it contains a reference
* to the underlying animation library. We only want to load that if we load this,
* so people can optionally code split it out using the `m` component.
*/
constructor(t) {
super(t), t.animationState || (t.animationState = Wd(t));
}
updateAnimationControlsSubscription() {
const { animate: t } = this.node.getProps();
Pn(t) && (this.unmountControls = t.subscribe(this.node));
}
/**
* Subscribe any provided AnimationControls to the component's VisualElement
*/
mount() {
this.updateAnimationControlsSubscription();
}
update() {
const { animate: t } = this.node.getProps(), { animate: n } = this.node.prevProps || {};
t !== n && this.updateAnimationControlsSubscription();
}
unmount() {
this.node.animationState.reset(), this.unmountControls?.();
}
}
let fh = 0;
class hh extends lt {
constructor() {
super(...arguments), this.id = fh++, this.isExitComplete = !1;
}
update() {
if (!this.node.presenceContext)
return;
const { isPresent: t, onExitComplete: n } = this.node.presenceContext, { isPresent: s } = this.node.prevPresenceContext || {};
if (!this.node.animationState || t === s)
return;
if (t && s === !1) {
if (this.isExitComplete) {
const { initial: o, custom: i } = this.node.getProps();
if (typeof o == "string") {
const a = pt(this.node, o, i);
if (a) {
const { transition: l, transitionEnd: c, ...u } = a;
for (const f in u)
this.node.getValue(f)?.jump(u[f]);
}
}
this.node.animationState.reset(), this.node.animationState.animateChanges();
} else
this.node.animationState.setActive("exit", !1);
this.isExitComplete = !1;
return;
}
const r = this.node.animationState.setActive("exit", !t);
n && !t && r.then(() => {
this.isExitComplete = !0, n(this.id);
});
}
mount() {
const { register: t, onExitComplete: n } = this.node.presenceContext || {};
n && n(this.id), t && (this.unmount = t(this.id));
}
unmount() {
}
}
const mh = {
animation: {
Feature: dh
},
exit: {
Feature: hh
}
};
function Ht(e) {
return {
point: {
x: e.pageX,
y: e.pageY
}
};
}
const ph = (e) => (t) => Hs(t) && e(t, Ht(t));
function Lt(e, t, n, s) {
return _t(e, t, ph(n), s);
}
const Ha = ({ current: e }) => e ? e.ownerDocument.defaultView : null, pi = (e, t) => Math.abs(e - t);
function gh(e, t) {
const n = pi(e.x, t.x), s = pi(e.y, t.y);
return Math.sqrt(n ** 2 + s ** 2);
}
const gi = /* @__PURE__ */ new Set(["auto", "scroll"]);
class Ga {
constructor(t, n, { transformPagePoint: s, contextWindow: r = window, dragSnapToOrigin: o = !1, distanceThreshold: i = 3, element: a } = {}) {
if (this.startEvent = null, this.lastMoveEvent = null, this.lastMoveEventInfo = null, this.lastRawMoveEventInfo = null, this.handlers = {}, this.contextWindow = window, this.scrollPositions = /* @__PURE__ */ new Map(), this.removeScrollListeners = null, this.onElementScroll = (p) => {
this.handleScroll(p.target);
}, this.onWindowScroll = () => {
this.handleScroll(window);
}, this.updatePoint = () => {
if (!(this.lastMoveEvent && this.lastMoveEventInfo))
return;
this.lastRawMoveEventInfo && (this.lastMoveEventInfo = Qt(this.lastRawMoveEventInfo, this.transformPagePoint));
const p = Hn(this.lastMoveEventInfo, this.history), g = this.startEvent !== null, y = gh(p.offset, { x: 0, y: 0 }) >= this.distanceThreshold;
if (!g && !y)
return;
const { point: b } = p, { timestamp: v } = ue;
this.history.push({ ...b, timestamp: v });
const { onStart: N, onMove: x } = this.handlers;
g || (N && N(this.lastMoveEvent, p), this.startEvent = this.lastMoveEvent), x && x(this.lastMoveEvent, p);
}, this.handlePointerMove = (p, g) => {
this.lastMoveEvent = p, this.lastRawMoveEventInfo = g, this.lastMoveEventInfo = Qt(g, this.transformPagePoint), Z.update(this.updatePoint, !0);
}, this.handlePointerUp = (p, g) => {
this.end();
const { onEnd: y, onSessionEnd: b, resumeAnimation: v } = this.handlers;
if ((this.dragSnapToOrigin || !this.startEvent) && v && v(), !(this.lastMoveEvent && this.lastMoveEventInfo))
return;
const N = Hn(p.type === "pointercancel" ? this.lastMoveEventInfo : Qt(g, this.transformPagePoint), this.history);
this.startEvent && y && y(p, N), b && b(p, N);
}, !Hs(t))
return;
this.dragSnapToOrigin = o, this.handlers = n, this.transformPagePoint = s, this.distanceThreshold = i, this.contextWindow = r || window;
const l = Ht(t), c = Qt(l, this.transformPagePoint), { point: u } = c, { timestamp: f } = ue;
this.history = [{ ...u, timestamp: f }];
const { onSessionStart: h } = n;
h && h(t, Hn(c, this.history)), this.removeListeners = zt(Lt(this.contextWindow, "pointermove", this.handlePointerMove), Lt(this.contextWindow, "pointerup", this.handlePointerUp), Lt(this.contextWindow, "pointercancel", this.handlePointerUp)), a && this.startScrollTracking(a);
}
/**
* Start tracking scroll on ancestors and window.
*/
startScrollTracking(t) {
let n = t.parentElement;
for (; n; ) {
const s = getComputedStyle(n);
(gi.has(s.overflowX) || gi.has(s.overflowY)) && this.scrollPositions.set(n, {
x: n.scrollLeft,
y: n.scrollTop
}), n = n.parentElement;
}
this.scrollPositions.set(window, {
x: window.scrollX,
y: window.scrollY
}), window.addEventListener("scroll", this.onElementScroll, {
capture: !0
}), window.addEventListener("scroll", this.onWindowScroll), this.removeScrollListeners = () => {
window.removeEventListener("scroll", this.onElementScroll, {
capture: !0
}), window.removeEventListener("scroll", this.onWindowScroll);
};
}
/**
* Handle scroll compensation during drag.
*
* For element scroll: adjusts history origin since pageX/pageY doesn't change.
* For window scroll: adjusts lastMoveEventInfo since pageX/pageY would change.
*/
handleScroll(t) {
const n = this.scrollPositions.get(t);
if (!n)
return;
const s = t === window, r = s ? { x: window.scrollX, y: window.scrollY } : {
x: t.scrollLeft,
y: t.scrollTop
}, o = { x: r.x - n.x, y: r.y - n.y };
o.x === 0 && o.y === 0 || (s ? this.lastMoveEventInfo && (this.lastMoveEventInfo.point.x += o.x, this.lastMoveEventInfo.point.y += o.y) : this.history.length > 0 && (this.history[0].x -= o.x, this.history[0].y -= o.y), this.scrollPositions.set(t, r), Z.update(this.updatePoint, !0));
}
updateHandlers(t) {
this.handlers = t;
}
end() {
this.removeListeners && this.removeListeners(), this.removeScrollListeners && this.removeScrollListeners(), this.scrollPositions.clear(), ot(this.updatePoint);
}
}
function Qt(e, t) {
return t ? { point: t(e.point) } : e;
}
function yi(e, t) {
return { x: e.x - t.x, y: e.y - t.y };
}
function Hn({ point: e }, t) {
return {
point: e,
delta: yi(e, Ya(t)),
offset: yi(e, yh(t)),
velocity: bh(t, 0.1)
};
}
function yh(e) {
return e[0];
}
function Ya(e) {
return e[e.length - 1];
}
function bh(e, t) {
if (e.length < 2)
return { x: 0, y: 0 };
let n = e.length - 1, s = null;
const r = Ya(e);
for (; n >= 0 && (s = e[n], !(r.timestamp - s.timestamp > /* @__PURE__ */ Ce(t))); )
n--;
if (!s)
return { x: 0, y: 0 };
s === e[0] && e.length > 2 && r.timestamp - s.timestamp > /* @__PURE__ */ Ce(t) * 2 && (s = e[1]);
const o = /* @__PURE__ */ Ve(r.timestamp - s.timestamp);
if (o === 0)
return { x: 0, y: 0 };
const i = {
x: (r.x - s.x) / o,
y: (r.y - s.y) / o
};
return i.x === 1 / 0 && (i.x = 0), i.y === 1 / 0 && (i.y = 0), i;
}
function xh(e, { min: t, max: n }, s) {
return t !== void 0 && e < t ? e = s ? Q(t, e, s.min) : Math.max(e, t) : n !== void 0 && e > n && (e = s ? Q(n, e, s.max) : Math.min(e, n)), e;
}
function bi(e, t, n) {
return {
min: t !== void 0 ? e.min + t : void 0,
max: n !== void 0 ? e.max + n - (e.max - e.min) : void 0
};
}
function vh(e, { top: t, left: n, bottom: s, right: r }) {
return {
x: bi(e.x, n, r),
y: bi(e.y, t, s)
};
}
function xi(e, t) {
let n = t.min - e.min, s = t.max - e.max;
return t.max - t.min < e.max - e.min && ([n, s] = [s, n]), { min: n, max: s };
}
function wh(e, t) {
return {
x: xi(e.x, t.x),
y: xi(e.y, t.y)
};
}
function Nh(e, t) {
let n = 0.5;
const s = ve(e), r = ve(t);
return r > s ? n = /* @__PURE__ */ jt(t.min, t.max - s, e.min) : s > r && (n = /* @__PURE__ */ jt(e.min, e.max - r, t.min)), Ge(0, 1, n);
}
function Th(e, t) {
const n = {};
return t.min !== void 0 && (n.min = t.min - e.min), t.max !== void 0 && (n.max = t.max - e.min), n;
}
const vs = 0.35;
function Sh(e = vs) {
return e === !1 ? e = 0 : e === !0 && (e = vs), {
x: vi(e, "left", "right"),
y: vi(e, "top", "bottom")
};
}
function vi(e, t, n) {
return {
min: wi(e, t),
max: wi(e, n)
};
}
function wi(e, t) {
return typeof e == "number" ? e : e[t] || 0;
}
const Ch = /* @__PURE__ */ new WeakMap();
class kh {
constructor(t) {
this.openDragLock = null, this.isDragging = !1, this.currentDirection = null, this.originPoint = { x: 0, y: 0 }, this.constraints = !1, this.hasMutatedConstraints = !1, this.elastic = ae(), this.latestPointerEvent = null, this.latestPanInfo = null, this.visualElement = t;
}
start(t, { snapToCursor: n = !1, distanceThreshold: s } = {}) {
const { presenceContext: r } = this.visualElement;
if (r && r.isPresent === !1)
return;
const o = (f) => {
n && this.snapToCursor(Ht(f).point), this.stopAnimation();
}, i = (f, h) => {
const { drag: p, dragPropagation: g, onDragStart: y } = this.getProps();
if (p && !g && (this.openDragLock && this.openDragLock(), this.openDragLock = Ju(p), !this.openDragLock))
return;
this.latestPointerEvent = f, this.latestPanInfo = h, this.isDragging = !0, this.currentDirection = null, this.resolveConstraints(), this.visualElement.projection && (this.visualElement.projection.isAnimationBlocked = !0, this.visualElement.projection.target = void 0), We((v) => {
let N = this.getAxisMotionValue(v).get() || 0;
if (He.test(N)) {
const { projection: x } = this.visualElement;
if (x && x.layout) {
const w = x.layout.layoutBox[v];
w && (N = ve(w) * (parseFloat(N) / 100));
}
}
this.originPoint[v] = N;
}), y && Z.update(() => y(f, h), !1, !0), ds(this.visualElement, "transform");
const { animationState: b } = this.visualElement;
b && b.setActive("whileDrag", !0);
}, a = (f, h) => {
this.latestPointerEvent = f, this.latestPanInfo = h;
const { dragPropagation: p, dragDirectionLock: g, onDirectionLock: y, onDrag: b } = this.getProps();
if (!p && !this.openDragLock)
return;
const { offset: v } = h;
if (g && this.currentDirection === null) {
this.currentDirection = Dh(v), this.currentDirection !== null && y && y(this.currentDirection);
return;
}
this.updateAxis("x", h.point, v), this.updateAxis("y", h.point, v), this.visualElement.render(), b && Z.update(() => b(f, h), !1, !0);
}, l = (f, h) => {
this.latestPointerEvent = f, this.latestPanInfo = h, this.stop(f, h), this.latestPointerEvent = null, this.latestPanInfo = null;
}, c = () => {
const { dragSnapToOrigin: f } = this.getProps();
(f || this.constraints) && this.startAnimation({ x: 0, y: 0 });
}, { dragSnapToOrigin: u } = this.getProps();
this.panSession = new Ga(t, {
onSessionStart: o,
onStart: i,
onMove: a,
onSessionEnd: l,
resumeAnimation: c
}, {
transformPagePoint: this.visualElement.getTransformPagePoint(),
dragSnapToOrigin: u,
distanceThreshold: s,
contextWindow: Ha(this.visualElement),
element: this.visualElement.current
});
}
/**
* @internal
*/
stop(t, n) {
const s = t || this.latestPointerEvent, r = n || this.latestPanInfo, o = this.isDragging;
if (this.cancel(), !o || !r || !s)
return;
const { velocity: i } = r;
this.startAnimation(i);
const { onDragEnd: a } = this.getProps();
a && Z.postRender(() => a(s, r));
}
/**
* @internal
*/
cancel() {
this.isDragging = !1;
const { projection: t, animationState: n } = this.visualElement;
t && (t.isAnimationBlocked = !1), this.endPanSession();
const { dragPropagation: s } = this.getProps();
!s && this.openDragLock && (this.openDragLock(), this.openDragLock = null), n && n.setActive("whileDrag", !1);
}
/**
* Clean up the pan session without modifying other drag state.
* This is used during unmount to ensure event listeners are removed
* without affecting projection animations or drag locks.
* @internal
*/
endPanSession() {
this.panSession && this.panSession.end(), this.panSession = void 0;
}
updateAxis(t, n, s) {
const { drag: r } = this.getProps();
if (!s || !en(t, r, this.currentDirection))
return;
const o = this.getAxisMotionValue(t);
let i = this.originPoint[t] + s[t];
this.constraints && this.constraints[t] && (i = xh(i, this.constraints[t], this.elastic[t])), o.set(i);
}
resolveConstraints() {
const { dragConstraints: t, dragElastic: n } = this.getProps(), s = this.visualElement.projection && !this.visualElement.projection.layout ? this.visualElement.projection.measure(!1) : this.visualElement.projection?.layout, r = this.constraints;
t && bt(t) ? this.constraints || (this.constraints = this.resolveRefConstraints()) : t && s ? this.constraints = vh(s.layoutBox, t) : this.constraints = !1, this.elastic = Sh(n), r !== this.constraints && !bt(t) && s && this.constraints && !this.hasMutatedConstraints && We((o) => {
this.constraints !== !1 && this.getAxisMotionValue(o) && (this.constraints[o] = Th(s.layoutBox[o], this.constraints[o]));
});
}
resolveRefConstraints() {
const { dragConstraints: t, onMeasureDragConstraints: n } = this.getProps();
if (!t || !bt(t))
return !1;
const s = t.current;
Ze(s !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.", "drag-constraints-ref");
const { projection: r } = this.visualElement;
if (!r || !r.layout)
return !1;
const o = Pd(s, r.root, this.visualElement.getTransformPagePoint());
let i = wh(r.layout.layoutBox, o);
if (n) {
const a = n(Sd(i));
this.hasMutatedConstraints = !!a, a && (i = pa(a));
}
return i;
}
startAnimation(t) {
const { drag: n, dragMomentum: s, dragElastic: r, dragTransition: o, dragSnapToOrigin: i, onDragTransitionEnd: a } = this.getProps(), l = this.constraints || {}, c = We((u) => {
if (!en(u, n, this.currentDirection))
return;
let f = l && l[u] || {};
(i === !0 || i === u) && (f = { min: 0, max: 0 });
const h = r ? 200 : 1e6, p = r ? 40 : 1e7, g = {
type: "inertia",
velocity: s ? t[u] : 0,
bounceStiffness: h,
bounceDamping: p,
timeConstant: 750,
restDelta: 1,
restSpeed: 10,
...o,
...f
};
return this.startAxisValueAnimation(u, g);
});
return Promise.all(c).then(a);
}
startAxisValueAnimation(t, n) {
const s = this.getAxisMotionValue(t);
return ds(this.visualElement, t), s.start(_s(t, s, 0, n, this.visualElement, !1));
}
stopAnimation() {
We((t) => this.getAxisMotionValue(t).stop());
}
/**
* Drag works differently depending on which props are provided.
*
* - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
* - Otherwise, we apply the delta to the x/y motion values.
*/
getAxisMotionValue(t) {
const n = `_drag${t.toUpperCase()}`, s = this.visualElement.getProps(), r = s[n];
return r || this.visualElement.getValue(t, (s.initial ? s.initial[t] : void 0) || 0);
}
snapToCursor(t) {
We((n) => {
const { drag: s } = this.getProps();
if (!en(n, s, this.currentDirection))
return;
const { projection: r } = this.visualElement, o = this.getAxisMotionValue(n);
if (r && r.layout) {
const { min: i, max: a } = r.layout.layoutBox[n], l = o.get() || 0;
o.set(t[n] - Q(i, a, 0.5) + l);
}
});
}
/**
* When the viewport resizes we want to check if the measured constraints
* have changed and, if so, reposition the element within those new constraints
* relative to where it was before the resize.
*/
scalePositionWithinConstraints() {
if (!this.visualElement.current)
return;
const { drag: t, dragConstraints: n } = this.getProps(), { projection: s } = this.visualElement;
if (!bt(n) || !s || !this.constraints)
return;
this.stopAnimation();
const r = { x: 0, y: 0 };
We((i) => {
const a = this.getAxisMotionValue(i);
if (a && this.constraints !== !1) {
const l = a.get();
r[i] = Nh({ min: l, max: l }, this.constraints[i]);
}
});
const { transformTemplate: o } = this.visualElement.getProps();
this.visualElement.current.style.transform = o ? o({}, "") : "none", s.root && s.root.updateScroll(), s.updateLayout(), this.constraints = !1, this.resolveConstraints(), We((i) => {
if (!en(i, t, null))
return;
const a = this.getAxisMotionValue(i), { min: l, max: c } = this.constraints[i];
a.set(Q(l, c, r[i]));
}), this.visualElement.render();
}
addListeners() {
if (!this.visualElement.current)
return;
Ch.set(this.visualElement, this);
const t = this.visualElement.current, n = Lt(t, "pointerdown", (c) => {
const { drag: u, dragListener: f = !0 } = this.getProps(), h = c.target, p = h !== t && rd(h);
u && f && !p && this.start(c);
});
let s;
const r = () => {
const { dragConstraints: c } = this.getProps();
bt(c) && c.current && (this.constraints = this.resolveRefConstraints(), s || (s = Ph(t, c.current, () => this.scalePositionWithinConstraints())));
}, { projection: o } = this.visualElement, i = o.addEventListener("measure", r);
o && !o.layout && (o.root && o.root.updateScroll(), o.updateLayout()), Z.read(r);
const a = _t(window, "resize", () => this.scalePositionWithinConstraints()), l = o.addEventListener("didUpdate", (({ delta: c, hasLayoutChanged: u }) => {
this.isDragging && u && (We((f) => {
const h = this.getAxisMotionValue(f);
h && (this.originPoint[f] += c[f].translate, h.set(h.get() + c[f].translate));
}), this.visualElement.render());
}));
return () => {
a(), n(), i(), l && l(), s && s();
};
}
getProps() {
const t = this.visualElement.getProps(), { drag: n = !1, dragDirectionLock: s = !1, dragPropagation: r = !1, dragConstraints: o = !1, dragElastic: i = vs, dragMomentum: a = !0 } = t;
return {
...t,
drag: n,
dragDirectionLock: s,
dragPropagation: r,
dragConstraints: o,
dragElastic: i,
dragMomentum: a
};
}
}
function Ni(e) {
let t = !0;
return () => {
if (t) {
t = !1;
return;
}
e();
};
}
function Ph(e, t, n) {
const s = Ar(e, Ni(n)), r = Ar(t, Ni(n));
return () => {
s(), r();
};
}
function en(e, t, n) {
return (t === !0 || t === e) && (n === null || n === e);
}
function Dh(e, t = 10) {
let n = null;
return Math.abs(e.y) > t ? n = "y" : Math.abs(e.x) > t && (n = "x"), n;
}
class Ah extends lt {
constructor(t) {
super(t), this.removeGroupControls = Ie, this.removeListeners = Ie, this.controls = new kh(t);
}
mount() {
const { dragControls: t } = this.node.getProps();
t && (this.removeGroupControls = t.subscribe(this.controls)), this.removeListeners = this.controls.addListeners() || Ie;
}
update() {
const { dragControls: t } = this.node.getProps(), { dragControls: n } = this.node.prevProps || {};
t !== n && (this.removeGroupControls(), t && (this.removeGroupControls = t.subscribe(this.controls)));
}
unmount() {
this.removeGroupControls(), this.removeListeners(), this.controls.isDragging || this.controls.endPanSession();
}
}
const Gn = (e) => (t, n) => {
e && Z.update(() => e(t, n), !1, !0);
};
class Eh extends lt {
constructor() {
super(...arguments), this.removePointerDownListener = Ie;
}
onPointerDown(t) {
this.session = new Ga(t, this.createPanHandlers(), {
transformPagePoint: this.node.getTransformPagePoint(),
contextWindow: Ha(this.node)
});
}
createPanHandlers() {
const { onPanSessionStart: t, onPanStart: n, onPan: s, onPanEnd: r } = this.node.getProps();
return {
onSessionStart: Gn(t),
onStart: Gn(n),
onMove: Gn(s),
onEnd: (o, i) => {
delete this.session, r && Z.postRender(() => r(o, i));
}
};
}
mount() {
this.removePointerDownListener = Lt(this.node.current, "pointerdown", (t) => this.onPointerDown(t));
}
update() {
this.session && this.session.updateHandlers(this.createPanHandlers());
}
unmount() {
this.removePointerDownListener(), this.session && this.session.end();
}
}
let Yn = !1;
class Mh extends cl {
/**
* This only mounts projection nodes for components that
* need measuring, we might want to do it for all components
* in order to incorporate transforms
*/
componentDidMount() {
const { visualElement: t, layoutGroup: n, switchLayoutGroup: s, layoutId: r } = this.props, { projection: o } = t;
o && (n.group && n.group.add(o), s && s.register && r && s.register(o), Yn && o.root.didUpdate(), o.addEventListener("animationComplete", () => {
this.safeToRemove();
}), o.setOptions({
...o.options,
layoutDependency: this.props.layoutDependency,
onExitComplete: () => this.safeToRemove()
})), dn.hasEverUpdated = !0;
}
getSnapshotBeforeUpdate(t) {
const { layoutDependency: n, visualElement: s, drag: r, isPresent: o } = this.props, { projection: i } = s;
return i && (i.isPresent = o, t.layoutDependency !== n && i.setOptions({
...i.options,
layoutDependency: n
}), Yn = !0, r || t.layoutDependency !== n || n === void 0 || t.isPresent !== o ? i.willUpdate() : this.safeToRemove(), t.isPresent !== o && (o ? i.promote() : i.relegate() || Z.postRender(() => {
const a = i.getStack();
(!a || !a.members.length) && this.safeToRemove();
}))), null;
}
componentDidUpdate() {
const { visualElement: t, layoutAnchor: n } = this.props, { projection: s } = t;
s && (s.options.layoutAnchor = n, s.root.didUpdate(), Ks.postRender(() => {
!s.currentAnimation && s.isLead() && this.safeToRemove();
}));
}
componentWillUnmount() {
const { visualElement: t, layoutGroup: n, switchLayoutGroup: s } = this.props, { projection: r } = t;
Yn = !0, r && (r.scheduleCheckAfterUnmount(), n && n.group && n.group.remove(r), s && s.deregister && s.deregister(r));
}
safeToRemove() {
const { safeToRemove: t } = this.props;
t && t();
}
render() {
return null;
}
}
function Xa(e) {
const [t, n] = Fa(), s = de(ks);
return d(Mh, { ...e, layoutGroup: s, switchLayoutGroup: de(Wa), isPresent: t, safeToRemove: n });
}
const Vh = {
pan: {
Feature: Eh
},
drag: {
Feature: Ah,
ProjectionNode: Ba,
MeasureLayout: Xa
}
};
function Ti(e, t, n) {
const { props: s } = e;
e.animationState && s.whileHover && e.animationState.setActive("whileHover", n === "Start");
const r = "onHover" + n, o = s[r];
o && Z.postRender(() => o(t, Ht(t)));
}
class Ih extends lt {
mount() {
const { current: t } = this.node;
t && (this.unmount = ed(t, (n, s) => (Ti(this.node, s, "Start"), (r) => Ti(this.node, r, "End"))));
}
unmount() {
}
}
class Rh extends lt {
constructor() {
super(...arguments), this.isActive = !1;
}
onFocus() {
let t = !1;
try {
t = this.node.current.matches(":focus-visible");
} catch {
t = !0;
}
!t || !this.node.animationState || (this.node.animationState.setActive("whileFocus", !0), this.isActive = !0);
}
onBlur() {
!this.isActive || !this.node.animationState || (this.node.animationState.setActive("whileFocus", !1), this.isActive = !1);
}
mount() {
this.unmount = zt(_t(this.node.current, "focus", () => this.onFocus()), _t(this.node.current, "blur", () => this.onBlur()));
}
unmount() {
}
}
function Si(e, t, n) {
const { props: s } = e;
if (e.current instanceof HTMLButtonElement && e.current.disabled)
return;
e.animationState && s.whileTap && e.animationState.setActive("whileTap", n === "Start");
const r = "onTap" + (n === "End" ? "" : n), o = s[r];
o && Z.postRender(() => o(t, Ht(t)));
}
class Lh extends lt {
mount() {
const { current: t } = this.node;
if (!t)
return;
const { globalTapTarget: n, propagate: s } = this.node.props;
this.unmount = od(t, (r, o) => (Si(this.node, o, "Start"), (i, { success: a }) => Si(this.node, i, a ? "End" : "Cancel")), {
useGlobalTarget: n,
stopPropagation: s?.tap === !1
});
}
unmount() {
}
}
const ws = /* @__PURE__ */ new WeakMap(), Xn = /* @__PURE__ */ new WeakMap(), Bh = (e) => {
const t = ws.get(e.target);
t && t(e);
}, Fh = (e) => {
e.forEach(Bh);
};
function jh({ root: e, ...t }) {
const n = e || document;
Xn.has(n) || Xn.set(n, {});
const s = Xn.get(n), r = JSON.stringify(t);
return s[r] || (s[r] = new IntersectionObserver(Fh, { root: e, ...t })), s[r];
}
function Oh(e, t, n) {
const s = jh(t);
return ws.set(e, n), s.observe(e), () => {
ws.delete(e), s.unobserve(e);
};
}
const $h = {
some: 0,
all: 1
};
class _h extends lt {
constructor() {
super(...arguments), this.hasEnteredView = !1, this.isInView = !1;
}
startObserver() {
this.stopObserver?.();
const { viewport: t = {} } = this.node.getProps(), { root: n, margin: s, amount: r = "some", once: o } = t, i = {
root: n ? n.current : void 0,
rootMargin: s,
threshold: typeof r == "number" ? r : $h[r]
}, a = (l) => {
const { isIntersecting: c } = l;
if (this.isInView === c || (this.isInView = c, o && !c && this.hasEnteredView))
return;
c && (this.hasEnteredView = !0), this.node.animationState && this.node.animationState.setActive("whileInView", c);
const { onViewportEnter: u, onViewportLeave: f } = this.node.getProps(), h = c ? u : f;
h && h(l);
};
this.stopObserver = Oh(this.node.current, i, a);
}
mount() {
this.startObserver();
}
update() {
if (typeof IntersectionObserver > "u")
return;
const { props: t, prevProps: n } = this.node;
["amount", "margin", "root"].some(zh(t, n)) && this.startObserver();
}
unmount() {
this.stopObserver?.(), this.hasEnteredView = !1, this.isInView = !1;
}
}
function zh({ viewport: e = {} }, { viewport: t = {} } = {}) {
return (n) => e[n] !== t[n];
}
const Uh = {
inView: {
Feature: _h
},
tap: {
Feature: Lh
},
focus: {
Feature: Rh
},
hover: {
Feature: Ih
}
}, Wh = {
layout: {
ProjectionNode: Ba,
MeasureLayout: Xa
}
}, Kh = {
...mh,
...Uh,
...Vh,
...Wh
}, at = /* @__PURE__ */ ch(Kh, uh), Hh = Y(
function({
trigger: t,
items: n,
open: s,
onOpenChange: r,
align: o = "right",
width: i = 220,
closeOnClick: a = !0,
className: l,
menuClassName: c,
itemClassName: u,
triggerClassName: f,
menuListClassName: h,
separatorClassName: p,
itemIconClassName: g,
itemLabelClassName: y,
style: b,
menuStyle: v
}, N) {
const [x, w] = H(!1), [T, D] = H({ top: 0, left: 0 }), [k, S] = H("bottom"), V = s !== void 0, A = V ? s : x, F = G(null), L = G(null), $ = le(), E = G((I) => {
V || w(I), r?.(I);
});
E.current = (I) => {
V || w(I), r?.(I);
};
const C = (I) => E.current(I);
ee(() => {
if (!A) return;
const I = (M) => {
const z = M.target;
F.current && !F.current.contains(z) && !L.current?.contains(z) && E.current(!1);
}, R = (M) => {
M.key === "Escape" && E.current(!1);
};
return document.addEventListener("mousedown", I), document.addEventListener("keydown", R), () => {
document.removeEventListener("mousedown", I), document.removeEventListener("keydown", R);
};
}, [A]), Ns(() => {
if (!A || !F.current || !L.current) return;
const I = () => {
const R = F.current.getBoundingClientRect(), M = L.current.offsetHeight, z = window.innerHeight - R.bottom, j = R.top, W = z < M + 10 && j > M, X = W ? R.top - M - 8 : R.bottom + 8;
let ne = o === "right" ? R.right - i : R.left;
const ge = window.innerWidth - i - 8;
ne = Math.max(8, Math.min(ne, ge)), S(W ? "top" : "bottom"), D({ top: X, left: ne });
};
return I(), window.addEventListener("scroll", I, !0), window.addEventListener("resize", I), () => {
window.removeEventListener("scroll", I, !0), window.removeEventListener("resize", I);
};
}, [A, o, i]);
const B = (I) => {
F.current = I, typeof N == "function" ? N(I) : N && (N.current = I);
}, K = /* @__PURE__ */ d(Kt, { children: A && /* @__PURE__ */ d(
at.div,
{
ref: L,
initial: {
opacity: 0,
y: k === "bottom" ? 8 : -8,
scale: 0.96
},
animate: {
opacity: 1,
y: 0,
scale: 1
},
exit: {
opacity: 0,
y: k === "bottom" ? 8 : -8,
scale: 0.96
},
transition: {
duration: 0.16,
ease: "easeOut"
},
onClick: (I) => I.stopPropagation(),
className: O(
"fixed z-[9999] overflow-hidden rounded-2xl border border-border",
"bg-background shadow-2xl backdrop-blur-xl",
"min-w-[180px]",
c
),
style: {
width: i,
top: T.top,
left: T.left,
...v
},
children: /* @__PURE__ */ d(
"div",
{
id: $,
role: "menu",
className: O("text-sm text-foreground", h),
children: n.map((I, R) => I.separator ? /* @__PURE__ */ d(
"div",
{
role: "separator",
className: O("my-1 h-px bg-border", p)
},
`separator-${R}`
) : /* @__PURE__ */ P(
"button",
{
type: "button",
role: "menuitem",
disabled: I.disabled,
onClick: () => {
I.disabled || (I.onClick?.(), a && C(!1));
},
className: O(
"flex w-full items-center gap-3 px-4 py-2.5 text-left",
"transition-all duration-150",
"hover:bg-accent",
// focus:outline-none with no replacement left keyboard
// users with no visible focus at all.
"focus:outline-none focus-visible:bg-accent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
I.danger && "text-destructive hover:bg-destructive/10",
I.disabled && "opacity-50",
u,
I.className
),
style: I.style,
children: [
I.icon && /* @__PURE__ */ d("span", { className: O("shrink-0 text-current", g), children: I.icon }),
/* @__PURE__ */ d("span", { className: O("truncate", y), children: I.label })
]
},
typeof I.label == "string" ? I.label : R
))
}
)
}
) });
return /* @__PURE__ */ P(Te, { children: [
/* @__PURE__ */ d(
"div",
{
ref: B,
className: O("inline-flex", l),
style: b,
children: /* @__PURE__ */ d(
"div",
{
className: O("flex", f),
role: "button",
tabIndex: 0,
"aria-haspopup": "menu",
"aria-expanded": A,
"aria-controls": A ? $ : void 0,
onKeyDown: (I) => {
(I.key === "Enter" || I.key === " ") && (I.preventDefault(), I.stopPropagation(), C(!A));
},
onClick: (I) => {
I.stopPropagation(), C(!A);
},
children: t
}
)
}
),
typeof document < "u" && Pl(K, document.body)
] });
}
);
Hh.displayName = "Dropdown";
class Gh {
toasts = [];
listeners = /* @__PURE__ */ new Set();
timers = /* @__PURE__ */ new Map();
counter = 0;
maxToasts = 5;
subscribe = (t) => (this.listeners.add(t), t(this.toasts), () => {
this.listeners.delete(t);
});
setMaxToasts(t) {
this.maxToasts = t;
}
emit() {
this.listeners.forEach((t) => t(this.toasts));
}
clearTimer(t) {
const n = this.timers.get(t);
n && (clearTimeout(n), this.timers.delete(t));
}
dismiss = (t) => {
t ? (this.clearTimer(t), this.toasts = this.toasts.filter((n) => n.id !== t)) : (this.timers.forEach((n) => clearTimeout(n)), this.timers.clear(), this.toasts = []), this.emit();
};
create(t) {
const n = t.id ?? `toast-${++this.counter}`;
this.clearTimer(n);
const s = {
...t,
id: n,
type: t.type ?? "info",
variant: t.variant ?? "light",
duration: t.duration ?? 4e3
}, r = this.toasts.findIndex((o) => o.id === n);
if (r >= 0) {
const o = [...this.toasts];
o[r] = s, this.toasts = o;
} else {
const o = [...this.toasts, s];
this.toasts = o.length > this.maxToasts ? o.slice(o.length - this.maxToasts) : o;
}
return s.duration && s.duration > 0 && this.timers.set(n, setTimeout(() => this.dismiss(n), s.duration)), this.emit(), n;
}
}
const we = new Gh(), ct = ((e) => typeof e == "string" ? we.create({ description: e }) : we.create(e));
ct.success = (e, t) => we.create({ title: e, type: "success", ...t });
ct.error = (e, t) => we.create({ title: e, type: "error", ...t });
ct.warning = (e, t) => we.create({ title: e, type: "warning", ...t });
ct.info = (e, t) => we.create({ title: e, type: "info", ...t });
ct.loading = (e, t) => we.create({ title: e, type: "loading", duration: 0, ...t });
ct.dismiss = (e) => we.dismiss(e);
ct.promise = (e, t, n) => {
const s = we.create({
title: t.loading,
type: "loading",
duration: 0,
...n
});
return e.then(
(r) => {
const o = typeof t.success == "function" ? t.success(r) : t.success;
return we.create({ id: s, title: o, type: "success", duration: 4e3, ...n }), r;
},
(r) => {
const o = typeof t.error == "function" ? t.error(r) : t.error;
throw we.create({ id: s, title: o, type: "error", duration: 4e3, ...n }), r;
}
);
};
const Yh = ct, Qm = () => Se(() => ({ toast: Yh, dismiss: we.dismiss }), []), Xh = {
"top-left": "top-4 left-4 sm:top-6 sm:left-6 items-start",
"top-center": "top-4 left-1/2 -translate-x-1/2 sm:top-6 items-center",
"top-right": "top-4 right-4 sm:top-6 sm:right-6 items-end",
"bottom-left": "bottom-4 left-4 sm:bottom-6 sm:left-6 items-start",
"bottom-center": "bottom-4 left-1/2 -translate-x-1/2 sm:bottom-6 items-center",
"bottom-right": "bottom-4 right-4 sm:bottom-6 sm:right-6 items-end"
}, ep = ({
children: e,
maxToasts: t = 5,
containerClassName: n,
position: s = "bottom-right"
}) => {
const [r, o] = H([]);
return ee(() => {
we.setMaxToasts(t);
}, [t]), ee(() => we.subscribe(o), []), /* @__PURE__ */ P(Te, { children: [
e,
/* @__PURE__ */ d(
"div",
{
role: "region",
"aria-label": "Notifications",
"aria-live": "polite",
className: m(
"fixed z-60 flex flex-col gap-2",
Xh[s],
n
),
children: r.map((i) => /* @__PURE__ */ d(Zh, { toast: i, onClose: () => we.dismiss(i.id) }, i.id))
}
)
] });
}, Ci = {
light: {
success: { bg: "bg-popover", border: "border-border", text: "text-popover-foreground", icon: "text-success" },
error: { bg: "bg-popover", border: "border-border", text: "text-popover-foreground", icon: "text-destructive" },
warning: { bg: "bg-popover", border: "border-border", text: "text-popover-foreground", icon: "text-warning" },
info: { bg: "bg-popover", border: "border-border", text: "text-popover-foreground", icon: "text-info" },
loading: { bg: "bg-popover", border: "border-border", text: "text-popover-foreground", icon: "text-muted-foreground" }
},
soft: {
success: { bg: "bg-success/10", border: "border-success/30", text: "text-success", icon: "text-success" },
error: { bg: "bg-destructive/10", border: "border-destructive/30", text: "text-destructive", icon: "text-destructive" },
warning: { bg: "bg-warning/10", border: "border-warning/30", text: "text-warning", icon: "text-warning" },
info: { bg: "bg-info/10", border: "border-info/30", text: "text-info", icon: "text-info" },
loading: { bg: "bg-muted", border: "border-border", text: "text-foreground", icon: "text-muted-foreground" }
},
dark: {
success: { bg: "bg-success text-success-foreground", border: "border-success", text: "text-success-foreground", icon: "text-success-foreground" },
error: { bg: "bg-destructive text-destructive-foreground", border: "border-destructive", text: "text-destructive-foreground", icon: "text-destructive-foreground" },
warning: { bg: "bg-warning text-warning-foreground", border: "border-warning", text: "text-warning-foreground", icon: "text-warning-foreground" },
info: { bg: "bg-info text-info-foreground", border: "border-info", text: "text-info-foreground", icon: "text-info-foreground" },
loading: { bg: "bg-muted text-foreground", border: "border-border", text: "text-foreground", icon: "text-muted-foreground" }
}
}, qh = {
success: io,
error: ro,
warning: so,
info: fn,
loading: hl
}, Zh = ({
toast: e,
onClose: t
}) => {
const {
title: n,
description: s,
type: r = "info",
variant: o = "light",
icon: i,
className: a,
style: l,
titleClassName: c,
descriptionClassName: u,
iconClassName: f,
contentClassName: h,
closeButtonClassName: p
} = e, g = Ci[o]?.[r] ?? Ci.light.info, y = qh[r] ?? fn;
return /* @__PURE__ */ P(
"div",
{
className: m(
"group relative flex w-full sm:min-w-[200px] sm:max-w-sm md:max-w-md lg:max-w-lg items-start gap-2 rounded-xl",
"border p-4 pr-10",
g.border,
g.bg,
"shadow-md dark:shadow-black/40",
"transition-shadow duration-300 ease-out",
// Only one animation-name class — `fade-in` and
// `slide-in-from-right-full` have the same specificity, so the later
// one in the stylesheet won and the slide never played.
"animate-in slide-in-from-right-full",
// hover:scale on a stacked flex column made toasts overlap their
// neighbours; a shadow change reads as interactive without reflowing.
"hover:shadow-lg",
a
),
style: l,
role: r === "error" ? "alert" : "status",
children: [
i !== void 0 ? i !== null && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m("inline-flex h-5 w-5 shrink-0 items-center justify-center", g.icon, f),
children: i
}
) : /* @__PURE__ */ d(
y,
{
"aria-hidden": "true",
className: m("h-5 w-5 shrink-0", g.icon, r === "loading" && "animate-spin", f)
}
),
/* @__PURE__ */ P("div", { className: m("flex-1", h), children: [
n && /* @__PURE__ */ d("div", { className: m("text-sm font-medium", g.text, c), children: n }),
s && /* @__PURE__ */ d(
"div",
{
className: m(
"text-sm text-muted-foreground",
u
),
children: s
}
)
] }),
/* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": "Dismiss notification",
onClick: t,
className: m(
// text-current: inherits the toast's own text color, so the button
// stays readable on soft, card and solid status surfaces alike.
"absolute right-2 top-2 rounded-md p-1.5 transition-opacity",
"text-current opacity-60 hover:opacity-100",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
p
),
children: /* @__PURE__ */ d(Je, { className: "h-4 w-4", "aria-hidden": "true" })
}
)
]
}
);
}, Jh = eo(
({
items: e,
allowMultiple: t = !1,
defaultOpen: n = [],
className: s,
style: r,
itemClassName: o,
itemStyle: i,
headerClassName: a,
headerStyle: l,
titleClassName: c,
titleStyle: u,
iconClassName: f,
iconStyle: h,
contentWrapperClassName: p,
contentWrapperStyle: g,
contentClassName: y,
contentStyle: b,
hoverClassName: v,
hoverStyle: N,
borderColor: x = "var(--border)",
radius: w = "0.5rem",
shadow: T = "none",
duration: D = 300,
iconOpen: k,
iconClose: S,
renderItem: V
}) => {
const [A, F] = H(n), L = le(), $ = (E) => {
F(
(C) => t ? C.includes(E) ? C.filter((B) => B !== E) : [...C, E] : C.includes(E) ? [] : [E]
);
};
return /* @__PURE__ */ d(
"div",
{
className: O(s, "w-full space-y-2 text-foreground"),
style: r,
children: e.map((E, C) => {
const B = A.includes(C);
return V ? /* @__PURE__ */ d(ie.Fragment, { children: V({
item: E,
index: C,
open: B,
toggle: () => $(C)
}) }, C) : /* @__PURE__ */ P(
"div",
{
className: O(
o,
"overflow-hidden transition-all bg-accent text-foreground",
"rounded-md"
),
style: {
...i
},
children: [
/* @__PURE__ */ P(
"button",
{
type: "button",
id: `${L}-trigger-${C}`,
"aria-expanded": B,
"aria-controls": `${L}-panel-${C}`,
onClick: () => $(C),
className: m(
"w-full flex items-center justify-between",
"px-4 py-3.5 text-left transition-colors",
// The item wrapper is already bg-accent, so hover:bg-accent
// was a guaranteed no-op — there was no hover feedback at all.
"hover:bg-accent-foreground/5",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
a,
// hoverClassName is merged last so it can actually win, but
// note it applies at rest too — see the note on hoverStyle.
v
),
style: {
// hoverStyle is an inline style and so cannot express :hover;
// it has always applied unconditionally. Kept for
// compatibility, but prefer hoverClassName.
...l,
...N
},
children: [
/* @__PURE__ */ d(
"span",
{
className: m("text-sm text-foreground", c),
style: u,
children: E.title
}
),
/* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m("text-muted-foreground", f),
style: h,
children: B ? k || /* @__PURE__ */ d(ml, { size: 18 }) : S || /* @__PURE__ */ d(Ss, { size: 18 })
}
)
]
}
),
/* @__PURE__ */ d(
"div",
{
id: `${L}-panel-${C}`,
role: "region",
"aria-labelledby": `${L}-trigger-${C}`,
className: m(
"grid overflow-hidden",
B ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
p
),
style: {
transition: `grid-template-rows ${D}ms ease`,
...g
},
children: /* @__PURE__ */ d("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ d(
"div",
{
inert: B ? void 0 : !0,
className: m(
"px-4 py-3.5 text-sm border-t border-border text-accent-foreground bg-background",
y
),
style: b,
children: E.content
}
) })
}
)
]
},
C
);
})
}
);
}
);
Jh.displayName = "Accordion";
const tp = ({
mode: e = "single",
name: t,
options: n = [],
selectedValues: s = [],
onChange: r,
label: o,
checked: i = !1,
onCheckedChange: a,
disabled: l = !1,
readOnly: c = !1,
required: u = !1,
error: f,
className: h,
containerClassName: p,
itemClassName: g,
labelClassName: y,
textClassName: b,
iconClassName: v,
checkClassName: N,
errorClassName: x,
style: w,
containerStyle: T,
itemStyle: D,
labelStyle: k,
textStyle: S,
iconStyle: V,
errorStyle: A,
customIcon: F,
iconSize: L = 20,
renderItem: $
}) => {
const E = G(null), [C, B] = H(null), K = le(), I = f ? `${K}-error` : void 0, R = (j) => {
if (!r || l || c || n.find((X) => X.value === j)?.disabled) return;
const W = s.includes(j) ? s.filter((X) => X !== j) : [...s, j];
r(W);
}, M = () => {
!a || l || c || a(!i);
}, z = (j) => /* @__PURE__ */ d(
"span",
{
className: m(
"inline-flex items-center justify-center rounded border transition-colors shrink-0",
j ? "border-primary bg-primary" : "border-border bg-transparent",
// The real input is sr-only, so the focus ring has to be rendered here.
"peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
v
),
style: {
width: L,
height: L,
...V
},
children: j && /* @__PURE__ */ d(
"svg",
{
viewBox: "0 0 24 24",
className: m("text-primary-foreground", N),
fill: "none",
stroke: "currentColor",
strokeWidth: 3,
style: { width: L * 0.6, height: L * 0.6 },
children: /* @__PURE__ */ d("polyline", { points: "20 6 9 17 4 12" })
}
)
}
);
if (e === "single") {
const j = M;
return $ ? /* @__PURE__ */ d("div", { className: h, style: w, children: $({
checked: i,
focused: !1,
toggle: j
}) }) : /* @__PURE__ */ P("div", { className: h, style: w, children: [
/* @__PURE__ */ P(
"label",
{
className: m(
"flex items-center justify-between",
l ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
g,
y
),
style: { ...D, ...k },
children: [
/* @__PURE__ */ d(
"span",
{
className: m("text-sm text-foreground", b),
style: S,
children: o
}
),
/* @__PURE__ */ d(
"input",
{
type: "checkbox",
className: "sr-only peer",
name: t,
checked: i,
disabled: l || c,
required: u,
"aria-invalid": f ? !0 : void 0,
"aria-describedby": I,
onChange: j
}
),
F ? F(i) : z(i)
]
}
),
f && /* @__PURE__ */ d(
"p",
{
id: I,
role: "alert",
className: m("text-sm text-destructive mt-1", x),
style: A,
children: f
}
)
] });
}
return /* @__PURE__ */ P(
"div",
{
ref: E,
role: "group",
"aria-invalid": f ? !0 : void 0,
"aria-describedby": I,
className: m("flex flex-col gap-2", p || h),
style: T || w,
children: [
n.map((j, W) => {
const X = s.includes(j.value), ne = C === W, ge = () => R(j.value);
if ($)
return /* @__PURE__ */ d(ie.Fragment, { children: $({
option: j,
checked: X,
focused: ne,
toggle: ge
}) }, j.value);
const Ne = l || j.disabled;
return /* @__PURE__ */ P(
"label",
{
onFocus: () => B(W),
className: m(
"flex items-center justify-between",
Ne ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
g,
y
),
style: { ...D, ...k },
children: [
/* @__PURE__ */ d(
"span",
{
className: m("text-sm text-foreground", b),
style: S,
children: j.label
}
),
/* @__PURE__ */ d(
"input",
{
type: "checkbox",
className: "sr-only peer",
name: t,
value: j.value,
checked: X,
disabled: Ne || c,
onChange: ge
}
),
F ? F(X, j) : z(X)
]
},
j.value
);
}),
f && /* @__PURE__ */ d(
"p",
{
id: I,
role: "alert",
className: m("text-sm text-destructive mt-1", x),
style: A,
children: f
}
)
]
}
);
}, np = ({
name: e,
options: t,
selectedValue: n,
onChange: s,
disabled: r = !1,
readOnly: o = !1,
required: i = !1,
error: a,
className: l,
style: c,
itemClassName: u,
itemStyle: f,
labelClassName: h,
labelStyle: p,
descriptionClassName: g,
descriptionStyle: y,
iconWrapperClassName: b,
iconWrapperStyle: v,
indicatorClassName: N,
indicatorStyle: x,
dotClassName: w,
dotStyle: T,
errorClassName: D,
errorStyle: k,
size: S = "md",
orientation: V = "vertical",
animationDuration: A = 0.2
}) => {
const F = G(null), [L, $] = H(null), C = {
sm: {
item: "px-3 py-2",
indicator: "w-4 h-4",
dot: "w-2 h-2",
text: "text-xs",
desc: "text-xs",
icon: "w-3.5 h-3.5",
outerGap: "gap-3",
innerGap: "gap-2"
},
md: {
item: "px-4 py-3",
indicator: "w-5 h-5",
dot: "w-2.5 h-2.5",
text: "text-sm",
desc: "text-xs",
icon: "w-4 h-4",
outerGap: "gap-4",
innerGap: "gap-3"
},
lg: {
item: "px-5 py-4",
indicator: "w-6 h-6",
dot: "w-3 h-3",
text: "text-base",
desc: "text-sm",
icon: "w-5 h-5",
outerGap: "gap-4",
innerGap: "gap-3"
}
}[S], B = le(), K = e ?? B, I = a ? `${B}-error` : void 0;
return /* @__PURE__ */ P(
"div",
{
ref: F,
role: "radiogroup",
"aria-required": i,
"aria-invalid": !!a,
"aria-describedby": I,
className: m(
"outline-none",
V === "vertical" ? "flex flex-col gap-2" : "flex flex-row gap-2 flex-wrap",
l
),
style: c,
children: [
t.map((R, M) => {
const z = n === R.value, j = r || R.disabled, W = () => {
j || o || (s?.(R.value), $(M));
};
return /* @__PURE__ */ P(
"label",
{
className: m(
"relative flex items-center justify-between rounded-xl border transition-all",
C.outerGap,
C.item,
"bg-background border-border",
// Checked comes after hover so the selected tint isn't lost while
// the pointer is over the item.
!j && "hover:bg-accent/60 cursor-pointer",
z && "border-primary bg-primary/5",
j && "opacity-50 cursor-not-allowed",
"has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background",
u
),
style: f,
children: [
/* @__PURE__ */ P(
"div",
{
className: m(
"flex items-center min-w-0 flex-1",
C.innerGap
),
children: [
R.icon && /* @__PURE__ */ d(
"div",
{
className: m(
"text-muted-foreground shrink-0 [&_svg]:w-full [&_svg]:h-full",
C.icon,
b
),
style: v,
children: R.icon
}
),
/* @__PURE__ */ P("div", { className: "min-w-0 flex-1", children: [
/* @__PURE__ */ d(
"p",
{
className: O(
h,
"font-medium text-foreground truncate",
C.text
),
style: p,
children: R.label
}
),
R.description && /* @__PURE__ */ d(
"p",
{
className: O(
g,
"text-muted-foreground truncate",
C.desc
),
style: y,
children: R.description
}
)
] })
]
}
),
/* @__PURE__ */ d(
"input",
{
type: "radio",
name: K,
value: R.value,
checked: z,
onChange: W,
disabled: j,
readOnly: o,
required: i && M === 0,
className: "sr-only",
"aria-describedby": I
}
),
/* @__PURE__ */ d(
"div",
{
className: O(
N,
"relative flex items-center justify-center rounded-full border transition-all shrink-0",
C.indicator,
z ? "border-primary bg-primary" : "border-muted-foreground/40"
),
style: x,
children: /* @__PURE__ */ d(Kt, { children: z && /* @__PURE__ */ d(
at.div,
{
initial: { scale: 0 },
animate: { scale: 1 },
exit: { scale: 0 },
transition: { duration: A },
className: O(
w,
"rounded-full bg-background",
C.dot
),
style: T
}
) })
}
)
]
},
R.value
);
}),
a && /* @__PURE__ */ d(
at.p,
{
initial: { opacity: 0, y: -10 },
animate: { opacity: 1, y: 0 },
className: O(
D,
"text-destructive mt-1",
C.desc
),
style: k,
id: I,
children: a
}
)
]
}
);
}, sp = ({
mode: e = "single",
name: t,
options: n,
selectedValues: s = [],
onChange: r,
label: o,
checked: i = !1,
onCheckedChange: a,
disabled: l = !1,
readOnly: c = !1,
required: u = !1,
error: f,
className: h,
itemClassName: p,
labelClassName: g,
textClassName: y,
switchClassName: b,
thumbClassName: v,
errorClassName: N,
style: x,
itemStyle: w,
labelStyle: T,
textStyle: D,
switchStyle: k,
thumbStyle: S,
errorStyle: V,
iconSize: A = 20
}) => {
const F = G(null), [L, $] = H(null), E = le(), C = f ? `${E}-error` : void 0, B = A * 2, K = Math.round(A * 1.1), I = 2, R = K - I * 2, M = (W) => {
if (!r || l || c || !n) return;
const X = s.includes(W) ? s.filter((ne) => ne !== W) : [...s, W];
r(X);
}, z = () => {
!a || l || c || a(!i);
}, j = (W, X, ne, ge = !1) => /* @__PURE__ */ P(Te, { children: [
/* @__PURE__ */ d(
"input",
{
type: "checkbox",
className: "sr-only peer",
role: "switch",
"aria-checked": W,
name: t,
value: ne,
checked: W,
disabled: l || c,
required: ge,
"aria-describedby": C,
onChange: X
}
),
/* @__PURE__ */ d(
"span",
{
className: m(
"relative inline-flex shrink-0 rounded-full transition-colors",
W ? "bg-primary" : "bg-muted",
"peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
b
),
style: {
width: B,
height: K,
...k
},
children: /* @__PURE__ */ d(
"span",
{
className: m(
"absolute top-1/2 rounded-full shadow bg-background",
v
),
style: {
// Animate transform, not `left`, and keep the offsets symmetric so
// the thumb is actually centered in the track.
left: 0,
width: R,
height: R,
transform: `translate(${W ? B - R - I : I}px, -50%)`,
transition: "transform 0.25s ease",
...S
}
}
)
}
)
] });
return /* @__PURE__ */ P(
"div",
{
ref: F,
role: e === "group" ? "group" : void 0,
"aria-invalid": !!f,
"aria-describedby": C,
className: m("flex flex-col gap-2 text-foreground", h),
style: x,
children: [
e === "single" ? /* @__PURE__ */ P(
"label",
{
className: O(
"flex items-center justify-between cursor-pointer transition-colors",
"text-foreground",
l && "opacity-50 cursor-not-allowed",
p,
g
),
style: { ...w, ...T },
children: [
/* @__PURE__ */ d(
"span",
{
className: O("text-sm text-foreground", y),
style: D,
children: o
}
),
j(i, z, void 0, u)
]
}
) : n?.map((W, X) => {
const ne = s.includes(W.value);
return /* @__PURE__ */ P(
"label",
{
onFocus: () => $(X),
className: O(
"flex items-center justify-between cursor-pointer transition-colors",
"text-foreground",
l && "opacity-50 cursor-not-allowed",
p,
g
),
style: { ...w, ...T },
children: [
/* @__PURE__ */ d(
"span",
{
className: O("text-sm text-foreground", y),
style: D,
children: W.label
}
),
j(
ne,
() => M(W.value),
W.value
)
]
},
W.value
);
}),
f && /* @__PURE__ */ d(
"p",
{
id: C,
role: "alert",
className: m("text-sm text-destructive", N),
style: V,
children: f
}
)
]
}
);
};
let Bt = 0, qa = "", Za = "";
const Qh = () => {
if (!(typeof document > "u")) {
if (Bt === 0) {
const { body: e, documentElement: t } = document;
qa = e.style.overflow, Za = e.style.paddingRight;
const n = window.innerWidth - t.clientWidth;
if (n > 0) {
const s = parseFloat(getComputedStyle(e).paddingRight) || 0;
e.style.paddingRight = `${s + n}px`;
}
e.style.overflow = "hidden";
}
Bt += 1;
}
}, em = () => {
typeof document > "u" || (Bt = Math.max(0, Bt - 1), Bt === 0 && (document.body.style.overflow = qa, document.body.style.paddingRight = Za));
}, Ja = (e) => {
ee(() => {
if (e)
return Qh(), em;
}, [e]);
}, ki = [
"a[href]",
"button:not([disabled])",
"input:not([disabled])",
"select:not([disabled])",
"textarea:not([disabled])",
'[tabindex]:not([tabindex="-1"])'
].join(","), Qa = (e, t) => {
ee(() => {
if (!t) return;
const n = e.current, s = document.activeElement, o = requestAnimationFrame(() => {
const a = e.current;
if (!a) return;
(a.querySelector(ki) ?? // Nothing focusable inside: focus the container itself so the dialog
// is at least the starting point for the next Tab.
a).focus?.();
}), i = (a) => {
if (a.key !== "Tab") return;
const l = e.current;
if (!l) return;
const c = Array.from(
l.querySelectorAll(ki)
).filter((p) => p.offsetParent !== null || p === document.activeElement);
if (c.length === 0) {
a.preventDefault();
return;
}
const u = c[0], f = c[c.length - 1], h = document.activeElement;
a.shiftKey && (h === u || !l.contains(h)) ? (a.preventDefault(), f.focus()) : !a.shiftKey && h === f && (a.preventDefault(), u.focus());
};
return document.addEventListener("keydown", i), () => {
cancelAnimationFrame(o), document.removeEventListener("keydown", i), (!n || n.contains(document.activeElement)) && s?.focus?.();
};
}, [t, e]);
};
function tm({
isOpen: e,
onClose: t,
children: n,
renderContent: s,
position: r = "right",
size: o = "320px",
disableOverlayClose: i = !1,
disableEscapeClose: a,
ariaLabel: l,
overlayClassName: c,
overlayStyle: u,
panelClassName: f
}) {
const h = G(null), p = a ?? i, g = G(t);
g.current = t, ee(() => {
if (!e || p) return;
const x = (w) => {
w.key === "Escape" && g.current();
};
return document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x);
}, [e, p]), Ja(e), Qa(h, e);
const y = () => {
switch (r) {
case "left":
return {
initial: { x: "-100%" },
animate: { x: 0 },
exit: { x: "-100%" }
};
case "right":
return {
initial: { x: "100%" },
animate: { x: 0 },
exit: { x: "100%" }
};
case "top":
return {
initial: { y: "-100%" },
animate: { y: 0 },
exit: { y: "-100%" }
};
case "bottom":
return {
initial: { y: "100%" },
animate: { y: 0 },
exit: { y: "100%" }
};
}
}, b = () => {
switch (r) {
case "left":
case "right":
return { width: `min(${o}, 100vw)`, height: "100%" };
case "top":
case "bottom":
return { height: `min(${o}, 100vh)`, width: "100%" };
default:
return { width: `min(${o}, 100vw)`, height: "100%" };
}
}, v = () => {
i || t();
}, N = y();
return /* @__PURE__ */ d(Kt, { children: e && /* @__PURE__ */ P("div", { className: "fixed inset-0 z-50", children: [
/* @__PURE__ */ d(
at.div,
{
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
onClick: v,
className: m(
"absolute inset-0 bg-background/80 backdrop-blur-sm",
c
),
style: u
}
),
/* @__PURE__ */ d(
at.div,
{
...N,
ref: h,
role: "dialog",
"aria-modal": "true",
"aria-label": l,
tabIndex: -1,
transition: { duration: 0.25 },
className: m(
// `absolute`, not `fixed`: the parent is already a fixed,
// full-viewport layer, and a nested fixed element competed with
// its own parent's z-50.
"absolute flex flex-col bg-background border-border shadow-2xl outline-none",
"border",
r === "right" && "right-0 top-0",
r === "left" && "left-0 top-0",
r === "top" && "top-0 left-0 right-0",
r === "bottom" && "bottom-0 left-0 right-0",
f
),
style: b(),
children: s ? s(t) : n
}
)
] }, "drawer-root") });
}
function rp({
children: e,
className: t,
style: n
}) {
return /* @__PURE__ */ d("div", { className: O("flex flex-col h-full", t), style: n, children: e });
}
function ip({
children: e,
className: t,
style: n
}) {
return /* @__PURE__ */ d("div", { className: m("flex-1 p-6 overflow-auto", t), style: n, children: e });
}
function op({
title: e,
icon: t,
onClose: n,
className: s,
style: r,
titleWrapperClassName: o,
titleClassName: i,
closeButtonClassName: a
}) {
return /* @__PURE__ */ P(
"div",
{
className: m(
"flex items-center justify-between px-6 py-4 border-b border-border",
s
),
style: r,
children: [
/* @__PURE__ */ P("div", { className: m("flex items-center gap-2 font-semibold", o), children: [
t,
e && /* @__PURE__ */ d("h3", { className: m("text-sm", i), children: e })
] }),
n && /* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": "Close drawer",
onClick: n,
className: m(
"p-2 rounded-lg hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
a
),
children: /* @__PURE__ */ d(Je, { size: 18, "aria-hidden": "true" })
}
)
]
}
);
}
function ap({
children: e,
className: t,
style: n
}) {
return /* @__PURE__ */ d(
"div",
{
className: m(
"flex justify-end gap-3 px-6 py-3 border-t border-border bg-accent/60",
t
),
style: n,
children: e
}
);
}
function lp({
children: e,
drawerContent: t,
drawerProps: n,
onClick: s,
...r
}) {
const [o, i] = H(!1);
return /* @__PURE__ */ P(Te, { children: [
/* @__PURE__ */ d(
Sn,
{
...r,
onClick: (a) => {
s?.(a), i(!0);
},
children: e
}
),
/* @__PURE__ */ d(tm, { ...n, isOpen: o, onClose: () => i(!1), children: t({ close: () => i(!1) }) })
] });
}
const cp = ({
label: e = "",
icon: t,
iconPosition: n = "left",
onClick: s,
className: r,
style: o,
labelClassName: i,
iconClassName: a
}) => /* @__PURE__ */ P(
"button",
{
type: "button",
onClick: s,
style: o,
className: O(
// Missing space here fused these into "justify-centertransition-all",
// a class that doesn't exist — both utilities were silently lost.
"inline-flex items-center justify-center transition-all",
r
),
children: [
t && n === "left" && /* @__PURE__ */ d("span", { className: a, children: t }),
/* @__PURE__ */ d("span", { className: i, children: e }),
t && n === "right" && /* @__PURE__ */ d("span", { className: a, children: t })
]
}
), nm = Y((e, t) => {
const {
label: n,
name: s,
value: r,
defaultValue: o,
onValueChange: i,
options: a = [],
placeholder: l = "Select...",
required: c,
disabled: u,
error: f,
success: h,
helperText: p,
multiple: g = !1,
showDescription: y = !1,
showCheckIcon: b = !0,
labelIcon: v,
prefixIcon: N,
dropdownIcon: x = Ss,
searchClassName: w,
searchStyle: T,
searchPlaceholder: D,
searchable: k = !1,
size: S = "md",
maxDropdownHeight: V = "240px",
className: A,
containerClassName: F,
labelClassName: L,
triggerClassName: $,
valueClassName: E,
dropdownClassName: C,
itemClassName: B,
iconClassName: K,
helperClassName: I,
labelIconClassName: R,
searchWrapperClassName: M,
emptyClassName: z,
itemLabelClassName: j,
itemDescriptionClassName: W,
itemIconClassName: X,
itemIconStyle: ne,
checkIconClassName: ge,
checkIconStyle: Ne,
style: De,
triggerStyle: Qe,
dropdownStyle: ke,
itemStyle: he
} = e, Ae = G(null);
no(t, () => Ae.current);
const $e = le(), [Ee, Re] = H({ top: 0, left: 0, width: 0 }), [Le, et] = H("bottom"), [se, q] = H(!1), [Ye, _e] = H(""), [tt, me] = H(o), [ye, oe] = H(-1), Xe = r !== void 0, Be = Xe ? r : tt, qe = G(null), nt = G(null), ze = G(null), pe = {
sm: {
trigger: "px-2.5 py-1.5 text-xs",
triggerWithPrefix: "pl-7 pr-2.5 py-1.5 text-xs",
prefixInset: "left-2",
item: "px-2.5 py-1.5 text-xs",
icon: "w-3 h-3",
checkIcon: "w-3 h-3",
search: "px-2 py-1 text-xs",
empty: "px-2.5 py-1.5 text-xs"
},
md: {
trigger: "px-3 py-2 text-sm",
triggerWithPrefix: "pl-9 pr-3 py-2 text-sm",
prefixInset: "left-3",
item: "px-3 py-2 text-sm",
icon: "w-4 h-4",
checkIcon: "w-4 h-4",
search: "px-2 py-1.5 text-sm",
empty: "px-3 py-2 text-sm"
},
lg: {
trigger: "px-4 py-3 text-base",
triggerWithPrefix: "pl-11 pr-4 py-3 text-base",
prefixInset: "left-3.5",
item: "px-4 py-3 text-base",
icon: "w-5 h-5",
checkIcon: "w-5 h-5",
search: "px-2.5 py-2 text-base",
empty: "px-4 py-3 text-base"
}
}, Pe = Se(
() => g ? Array.isArray(Be) ? Be : Be ? [Be] : [] : Be ? [Be] : [],
[g, Be]
), ce = Se(
() => a.filter(
(U) => U.label.toLowerCase().includes(Ye.toLowerCase())
),
[a, Ye]
);
Ns(() => {
if (!se || !qe.current || !nt.current) return;
const U = () => {
const J = qe.current.getBoundingClientRect(), Me = nt.current.offsetHeight || 240, Xt = window.innerHeight - J.bottom, Mn = J.top, ir = Xt < Me + 10 && Mn > Me, sl = ir ? J.top - Me - 8 : J.bottom + 8, rl = J.left, il = J.width;
et(ir ? "top" : "bottom"), Re({
top: sl,
left: rl,
width: il
});
};
return U(), window.addEventListener("scroll", U, !0), window.addEventListener("resize", U), () => {
window.removeEventListener("scroll", U, !0), window.removeEventListener("resize", U);
};
}, [se]), ee(() => {
const U = (J) => {
Ae.current && !Ae.current.contains(J.target) && q(!1);
};
return document.addEventListener("mousedown", U), () => document.removeEventListener("mousedown", U);
}, []), ee(() => {
if (!se) return;
const U = ce.findIndex(
(J) => Pe.includes(J.value)
);
oe(U >= 0 ? U : 0), requestAnimationFrame(() => {
nt.current?.children?.[U >= 0 ? U : 0]?.scrollIntoView({ block: "nearest" });
});
}, [se]), ee(() => {
if (se) {
if (ce.length === 0) {
oe(-1);
return;
}
oe((U) => U < 0 ? 0 : U >= ce.length ? ce.length - 1 : U);
}
}, [ce, se]), ee(() => {
if (!se || !k) return;
const U = requestAnimationFrame(() => ze.current?.focus());
return () => cancelAnimationFrame(U);
}, [se, k]);
const yt = Ft(
(U, J) => {
if (u) return;
U.onClick?.(U, J);
let Me;
g ? Me = Pe.includes(U.value) ? Pe.filter((Mn) => Mn !== U.value) : [...Pe, U.value] : (Me = U.value, q(!1), oe(-1)), Xe || me(Me), i?.(Me, s);
},
[u, Pe, g, Xe, s, i]
), Gt = Ft(
// Shared by the trigger button and the search input.
(U) => {
if (!se) {
(U.key === "Enter" || U.key === " " || U.key === "ArrowDown") && (U.preventDefault(), u || (q(!0), oe(0)));
return;
}
if (ce.length === 0) {
U.key === "Escape" && (U.preventDefault(), q(!1), oe(-1));
return;
}
switch (U.key) {
case "Escape":
U.preventDefault(), q(!1), oe(-1);
break;
case "Enter":
case " ":
U.preventDefault(), ye >= 0 && ye < ce.length && yt(ce[ye]);
break;
case "ArrowDown":
U.preventDefault(), oe(
(J) => J < ce.length - 1 ? J + 1 : J
);
break;
case "ArrowUp":
U.preventDefault(), oe((J) => J > 0 ? J - 1 : J);
break;
case "Home":
U.preventDefault(), oe(0);
break;
case "End":
U.preventDefault(), oe(ce.length - 1);
break;
case "PageUp":
U.preventDefault(), oe((J) => Math.max(0, J - 5));
break;
case "PageDown":
U.preventDefault(), oe(
(J) => Math.min(ce.length - 1, J + 5)
);
break;
}
},
[se, u, ye, ce, yt]
), Et = Se(
() => a.filter((U) => Pe.includes(U.value)).map((U) => U.label),
[a, Pe]
), be = !!f, Ue = Et.length > 0, Yt = p || f ? `${$e}-description` : void 0, sr = `${$e}-trigger`, rr = `${$e}-label`, nl = Se(() => typeof V == "number" ? { maxHeight: `${V}px` } : { maxHeight: V }, [V]);
return /* @__PURE__ */ P(
"div",
{
ref: Ae,
className: O("w-full space-y-1.5", A, F),
style: De,
children: [
n && /* @__PURE__ */ P(
"label",
{
id: rr,
htmlFor: sr,
className: O(
"flex items-center gap-1.5 text-[13px] font-medium leading-none text-foreground",
L
),
children: [
v && /* @__PURE__ */ d(
v,
{
className: O(pe[S].icon, "shrink-0", R)
}
),
n,
c && /* @__PURE__ */ d("span", { className: "text-destructive", children: "*" })
]
}
),
/* @__PURE__ */ P("div", { className: "relative", children: [
N && /* @__PURE__ */ d(
"div",
{
className: O(
"pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground",
pe[S].prefixInset,
K
),
children: /* @__PURE__ */ d(N, { className: pe[S].icon })
}
),
/* @__PURE__ */ P(
"button",
{
type: "button",
ref: qe,
id: sr,
disabled: u,
onClick: () => !u && q((U) => !U),
onKeyDown: Gt,
role: "combobox",
"aria-expanded": se,
"aria-haspopup": "listbox",
"aria-required": c,
"aria-invalid": be,
"aria-describedby": Yt,
"aria-labelledby": n ? rr : void 0,
className: O(
"w-full flex items-center justify-between gap-2",
"rounded-lg transition-all outline-none",
"border border-border bg-input/30 text-foreground",
"hover:bg-accent/10",
// A ring color with no ring width renders nothing — set both.
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring",
u && "opacity-50 cursor-not-allowed",
be && "border-destructive focus-visible:ring-destructive/50",
h && "border-success focus-visible:ring-success/50",
N ? pe[S].triggerWithPrefix : pe[S].trigger,
$
),
style: {
...Qe
},
children: [
/* @__PURE__ */ d(
"span",
{
className: O(
"truncate flex-1 text-left",
Ue ? "text-foreground" : "text-muted-foreground",
E
),
children: Ue ? g ? Et.join(", ") : Et[0] : l
}
),
/* @__PURE__ */ d(
x,
{
className: O(
"transition-transform text-muted-foreground",
se && "rotate-180",
pe[S].icon,
K
)
}
)
]
}
),
/* @__PURE__ */ d(Kt, { children: se && /* @__PURE__ */ P(
at.div,
{
initial: {
opacity: 0,
y: Le === "bottom" ? -6 : 6,
scale: 0.98
},
animate: {
opacity: 1,
y: 0,
scale: 1
},
exit: {
opacity: 0,
y: Le === "bottom" ? -6 : 6,
scale: 0.98
},
transition: { duration: 0.12 },
className: O(
C,
"fixed z-[9999] rounded-lg p-[5px] overflow-hidden",
"bg-background border border-border"
),
style: {
top: Ee.top,
left: Ee.left,
width: Ee.width,
...ke
},
role: "listbox",
"aria-label": "Options",
children: [
k && /* @__PURE__ */ d("div", { className: O("p-2 border-b border-border", M), children: /* @__PURE__ */ d(
"input",
{
ref: ze,
type: "text",
value: Ye,
onChange: (U) => {
_e(U.target.value), oe(0);
},
onKeyDown: Gt,
placeholder: D || "Search...",
"aria-label": D || "Search options",
className: O(
"w-full rounded-md outline-none",
"bg-background border border-border text-foreground",
"focus-visible:ring-2 focus-visible:ring-ring",
pe[S].search,
w
),
style: T
}
) }),
/* @__PURE__ */ d(
"ul",
{
ref: nt,
className: "overflow-y-auto",
style: nl,
children: ce.length === 0 ? /* @__PURE__ */ d(
"li",
{
role: "option",
"aria-disabled": !0,
"aria-selected": !1,
className: O(
"text-muted-foreground text-center",
pe[S].empty,
z
),
children: "No options available"
}
) : ce.map((U, J) => {
const Me = Pe.includes(U.value);
return /* @__PURE__ */ P(
"li",
{
onClick: (Xt) => yt(U, Xt),
role: "option",
"aria-selected": Me,
className: O(
B,
"flex items-center justify-between rounded-md cursor-pointer transition-all relative hover:bg-accent",
pe[S].item,
Me && "bg-accent"
),
style: {
...he
},
children: [
/* @__PURE__ */ P("div", { className: "flex flex-col truncate", children: [
/* @__PURE__ */ P("div", { className: "flex items-center gap-2", children: [
U.icon && /* @__PURE__ */ d(
"span",
{
className: O(
pe[S].icon,
X
),
style: ne,
children: U.icon
}
),
/* @__PURE__ */ d("span", { className: O("font-medium", j), children: U.label })
] }),
y && U.description && /* @__PURE__ */ d(
"span",
{
className: O(
"text-xs text-muted-foreground mt-0.5",
W
),
children: U.description
}
)
] }),
b && Me && /* @__PURE__ */ d("div", { children: /* @__PURE__ */ d(
Tn,
{
className: O(
pe[S].checkIcon,
ge,
"text-primary"
),
style: {
...Ne
}
}
) })
]
},
U.value
);
})
}
)
]
}
) })
] }),
(p || f) && /* @__PURE__ */ d(
"p",
{
id: Yt,
className: O(
"text-xs",
be ? "text-destructive" : h ? "text-primary" : "text-muted-foreground",
I
),
children: typeof f == "string" ? f : p
}
)
]
}
);
});
nm.displayName = "Select";
const sm = {
sm: {
base: "py-1.5 text-xs",
padLeft: { none: "pl-3", icon: "pl-8", text: "pl-8", both: "pl-12" },
padRight: { none: "pr-3", suffix: "pr-8" },
iconSize: 14,
prefixInset: "left-2.5",
suffixInset: "right-2.5",
gap: "gap-1",
labelIconSize: 14,
textSize: "text-[11px]"
},
md: {
base: "py-2 text-sm",
padLeft: { none: "pl-4", icon: "pl-10", text: "pl-9", both: "pl-14" },
padRight: { none: "pr-4", suffix: "pr-10" },
iconSize: 16,
prefixInset: "left-3",
suffixInset: "right-3",
gap: "gap-1.5",
labelIconSize: 16,
textSize: "text-xs"
},
lg: {
base: "py-2.5 text-base",
padLeft: { none: "pl-4", icon: "pl-11", text: "pl-10", both: "pl-16" },
padRight: { none: "pr-4", suffix: "pr-11" },
iconSize: 20,
prefixInset: "left-3.5",
suffixInset: "right-3.5",
gap: "gap-2",
labelIconSize: 18,
textSize: "text-sm"
}
}, up = Y(function(t, n) {
const {
label: s,
name: r = "",
id: o,
type: i = "text",
placeholder: a = "",
description: l,
value: c,
defaultValue: u,
onChange: f,
onFocus: h,
onBlur: p,
required: g,
disabled: y,
readOnly: b,
error: v,
success: N,
helperText: x,
icon: w,
prefix: T,
prefixIcon: D,
suffixIcon: k,
min: S,
max: V,
step: A,
maxLength: F,
rows: L = 4,
size: $ = "md",
wrapperClassName: E = "",
labelClassName: C = "",
inputClassName: B = "",
textareaClassName: K = "",
prefixClassName: I = "",
suffixClassName: R = "",
helperTextClassName: M = "",
descriptionClassName: z = "",
wrapperStyle: j,
inputStyle: W,
labelStyle: X
} = t, ne = G(null);
no(n, () => ne.current);
const ge = le(), Ne = o ?? ge, De = x || v ? `${Ne}-description` : void 0, [Qe, ke] = H(u || ""), [he, Ae] = H(!1), $e = !!D, Ee = !!T, Re = $e || Ee, Le = c !== void 0 ? c : Qe, et = (me) => {
c === void 0 && ke(me.target.value), f?.(me);
}, se = (me) => {
i === "number" && me.key === "-" && !me.metaKey && !me.ctrlKey && me.preventDefault();
}, q = sm[$], Ye = !!k || i === "password", _e = () => {
const me = Re ? $e && Ee ? q.padLeft.both : Ee ? q.padLeft.text : q.padLeft.icon : q.padLeft.none, ye = Ye ? q.padRight.suffix : q.padRight.none;
return `${q.base} ${me} ${ye}`;
}, tt = "w-full min-w-0 rounded-lg border border-input bg-transparent text-foreground outline-none transition-colors placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 dark:bg-input/30 dark:disabled:bg-input/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:border-ring";
return /* @__PURE__ */ P(
"div",
{
className: m("w-full space-y-1.5", E),
style: j,
children: [
s && /* @__PURE__ */ P("div", { className: "flex items-baseline justify-between gap-2", children: [
/* @__PURE__ */ P(
"label",
{
htmlFor: Ne,
className: m(
"flex items-center gap-1.5 text-[13px] font-medium leading-none",
C
),
style: X,
children: [
w && /* @__PURE__ */ d(w, { size: q.labelIconSize, strokeWidth: 1.5 }),
s,
g && /* @__PURE__ */ d("span", { className: "ml-1 text-destructive", children: "*" })
]
}
),
l && /* @__PURE__ */ d("span", { className: m("text-xs text-muted-foreground", z), children: l })
] }),
/* @__PURE__ */ P("div", { className: "relative", children: [
Re && /* @__PURE__ */ P(
"div",
{
className: m(
"absolute inset-y-0 flex items-center text-muted-foreground pointer-events-none",
q.prefixInset,
q.gap,
I
),
children: [
D && /* @__PURE__ */ d(D, { size: q.iconSize, strokeWidth: 1.5 }),
Ee && /* @__PURE__ */ d("span", { className: m("font-medium", q.textSize), children: T })
]
}
),
i === "textarea" ? /* @__PURE__ */ d(
"textarea",
{
ref: ne,
id: Ne,
name: r,
value: Le,
onChange: et,
onFocus: h,
onBlur: p,
placeholder: a,
rows: L,
required: g,
disabled: y,
readOnly: b,
maxLength: F,
"aria-invalid": v ? !0 : void 0,
"aria-describedby": De,
style: W,
className: m(
tt,
_e(),
"resize-none",
v && "border-destructive focus-visible:ring-destructive/50",
N && "border-success focus-visible:ring-success/50",
K
)
}
) : /* @__PURE__ */ d(
"input",
{
ref: ne,
id: Ne,
type: i === "password" ? he ? "text" : "password" : i,
name: r,
value: Le,
onChange: et,
onFocus: h,
onBlur: p,
onKeyDown: se,
placeholder: a,
required: g,
disabled: y,
readOnly: b,
min: i === "number" ? S : void 0,
max: i === "number" ? V : void 0,
step: i === "number" ? A : void 0,
maxLength: F,
"aria-invalid": v ? !0 : void 0,
"aria-describedby": De,
style: W,
className: m(
tt,
_e(),
v && "border-destructive focus-visible:ring-destructive/50",
N && "border-success focus-visible:ring-success/50",
B
)
}
),
i === "password" && /* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": he ? "Hide password" : "Show password",
"aria-pressed": he,
onClick: () => Ae(!he),
disabled: y,
className: m(
"absolute top-1/2 -translate-y-1/2 rounded text-muted-foreground transition-colors",
"hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
q.suffixInset,
R
),
children: he ? /* @__PURE__ */ d(pl, { size: q.iconSize }) : /* @__PURE__ */ d(gl, { size: q.iconSize })
}
),
k && i !== "password" && /* @__PURE__ */ d(
"span",
{
className: m(
"absolute top-1/2 -translate-y-1/2 flex items-center text-muted-foreground pointer-events-none",
q.suffixInset,
R
),
children: k
}
)
] }),
(x || v) && /* @__PURE__ */ d(
"p",
{
id: De,
role: v ? "alert" : void 0,
className: m(
"text-xs font-medium",
v ? "text-destructive" : N ? "text-success" : "text-muted-foreground",
M
),
children: v && typeof v == "string" ? v : x
}
)
]
}
);
}), rm = Y(
({
label: e,
name: t,
icon: n,
value: s,
onChange: r,
placeholder: o,
required: i,
disabled: a,
error: l,
success: c,
helperText: u,
maxLength: f,
autoResize: h = !0,
minRows: p = 3,
maxRows: g = 6,
submitOnEnter: y,
onSubmit: b,
className: v = "",
containerClassName: N = "",
labelClassName: x = "",
iconClassName: w = "",
helperClassName: T = "",
countClassName: D = "",
style: k,
containerStyle: S,
labelStyle: V,
helperStyle: A,
countStyle: F,
...L
}, $) => {
const E = G(null), C = (M) => {
E.current = M, typeof $ == "function" ? $(M) : $ && ($.current = M);
}, B = () => {
const M = E.current;
if (!M || !h) return;
M.style.height = "auto";
const z = 24, j = p * z, W = g * z, X = Math.min(
Math.max(M.scrollHeight, j),
W
);
M.style.height = X + "px", M.style.overflowY = M.scrollHeight > W ? "auto" : "hidden";
};
ee(() => {
B();
}, [s]);
const K = (M) => {
y && M.key === "Enter" && !M.shiftKey && (M.preventDefault(), b?.());
}, I = typeof s == "string" ? s.length : E.current?.value?.length || 0, R = typeof f == "number" && f > 0;
return /* @__PURE__ */ P(
"div",
{
className: `w-full space-y-1.5 ${N}`,
style: S,
children: [
e && /* @__PURE__ */ P(
"label",
{
htmlFor: t,
className: `flex items-center gap-2 text-[13px] leading-none font-medium ${x}`,
style: V,
children: [
n && /* @__PURE__ */ d(n, { size: 14, className: w || void 0 }),
e,
i && /* @__PURE__ */ d("span", { className: "text-destructive", children: "*" })
]
}
),
/* @__PURE__ */ P("div", { className: "relative group", children: [
/* @__PURE__ */ d(
"textarea",
{
ref: C,
id: t,
name: t,
value: s,
onChange: (M) => {
r?.(M), B();
},
onKeyDown: K,
placeholder: o,
required: i,
disabled: a,
maxLength: f,
rows: p,
className: m(
"w-full px-4 py-3 text-sm rounded-lg",
// Reserve room for the character counter so typed text never
// runs underneath it.
R && "pb-8",
"resize-none transition-all duration-200 ease-out",
"outline-none border",
"bg-input/30 text-foreground",
"placeholder:text-muted-foreground",
"border-border",
// A 1px ring in the border color was invisible — use the shared
// focus treatment so keyboard focus is actually indicated.
"focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:border-ring",
"hover:border-muted-foreground/40",
"disabled:opacity-50 disabled:cursor-not-allowed",
l && "border-destructive focus-visible:ring-destructive/50",
c && "border-success",
v
),
style: {
...k
},
...L
}
),
R && /* @__PURE__ */ P(
"span",
{
className: m(
"pointer-events-none absolute bottom-2.5 right-3 text-[11px] tabular-nums text-muted-foreground",
D
),
style: F,
children: [
I,
"/",
f
]
}
)
] }),
u && /* @__PURE__ */ d(
"p",
{
className: `text-xs ${l ? "text-destructive" : c ? "text-primary" : "text-muted-foreground"} ${T}`,
style: A,
children: u
}
)
]
}
);
}
);
rm.displayName = "Textarea";
function im({
isOpen: e,
onClose: t,
children: n,
disableOverlayClose: s = !1,
disableEscapeClose: r,
ariaLabel: o,
overlayClassName: i,
overlayStyle: a,
style: l,
dialogClassName: c
}) {
const u = G(null), f = r ?? s, h = G(t);
h.current = t, ee(() => {
if (!e || f) return;
const y = (b) => {
b.key === "Escape" && h.current();
};
return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
}, [e, f]), Ja(e), Qa(u, e);
const p = G(!1), g = Ft(() => {
!s && p.current && t(), p.current = !1;
}, [s, t]);
return /* @__PURE__ */ d(Kt, { children: e && /* @__PURE__ */ d(
at.div,
{
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
onMouseDown: (y) => {
p.current = y.target === y.currentTarget;
},
onClick: g,
className: m(
"fixed inset-0 z-50 flex items-center justify-center",
"bg-background/80 backdrop-blur-sm p-4",
i
),
style: { ...a, ...l },
children: /* @__PURE__ */ d(
"div",
{
ref: u,
role: "dialog",
"aria-modal": "true",
"aria-label": o,
tabIndex: -1,
className: m("contents outline-none", c),
children: n
}
)
},
"modal-overlay"
) });
}
function dp({
children: e,
className: t,
style: n,
maxWidth: s = "max-w-md",
onClose: r,
showCloseButton: o = !1,
closeButtonClassName: i,
closeButtonStyle: a
}) {
const l = o && typeof r == "function";
return /* @__PURE__ */ P(
at.div,
{
initial: { y: 20, scale: 0.96 },
animate: { y: 0, scale: 1 },
exit: { y: 20, scale: 0.96 },
transition: { duration: 0.2 },
onClick: (c) => c.stopPropagation(),
className: O(
"relative w-full rounded-2xl border border-border bg-background shadow-2xl overflow-hidden",
s,
t
),
style: n,
children: [
l && /* @__PURE__ */ d(
"button",
{
type: "button",
onClick: r,
"aria-label": "Close modal",
className: O(
"absolute top-4 right-4 z-10 p-2 rounded-full transition-colors",
"hover:bg-accent/20 focus:outline-none ",
i
),
style: a,
children: /* @__PURE__ */ d(Je, { size: 18 })
}
),
e
]
}
);
}
function fp({
title: e,
icon: t,
onClose: n,
className: s,
style: r,
titleWrapperClassName: o,
iconClassName: i,
titleClassName: a,
closeButtonClassName: l
}) {
return /* @__PURE__ */ P(
"div",
{
className: O(
s,
"flex items-center justify-between px-6 py-4 border-b border-border"
),
style: r,
children: [
/* @__PURE__ */ P(
"div",
{
className: m(
"flex items-center gap-2 font-semibold text-foreground",
o
),
children: [
t && /* @__PURE__ */ d("span", { className: i, children: t }),
e && /* @__PURE__ */ d("h3", { className: m("text-sm", a), children: e })
]
}
),
n && /* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": "Close modal",
onClick: n,
className: m(
"p-2 rounded-lg hover:bg-accent transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
l
),
children: /* @__PURE__ */ d(Je, { size: 18, "aria-hidden": "true" })
}
)
]
}
);
}
function hp({ children: e, className: t, style: n }) {
return /* @__PURE__ */ d("div", { className: O(t, "p-6 text-foreground space-y-4"), style: n, children: e });
}
function mp({ children: e, className: t, style: n }) {
return /* @__PURE__ */ d(
"div",
{
className: O(
"flex justify-end gap-3 px-6 py-3 border-t border-border bg-accent/60",
t
),
style: n,
children: e
}
);
}
function pp({
onClose: e,
closeOnClick: t,
action: n,
onClick: s,
disabled: r,
...o
}) {
const [i, a] = H(!1), l = async (c) => {
if (s && s(c), n) {
a(!0);
try {
await n();
} catch (u) {
throw a(!1), u;
}
a(!1);
}
t && e && e();
};
return /* @__PURE__ */ d(
Sn,
{
size: "sm",
...o,
disabled: r || i,
loading: o.loading || i,
onClick: l
}
);
}
function gp({
children: e,
modalContent: t,
modalProps: n,
onClick: s,
...r
}) {
const [o, i] = H(!1);
return /* @__PURE__ */ P(Te, { children: [
/* @__PURE__ */ d(
Sn,
{
...r,
onClick: (a) => {
s?.(a), i(!0);
},
children: e
}
),
/* @__PURE__ */ d(im, { ...n, isOpen: o, onClose: () => i(!1), children: t({ close: () => i(!1) }) })
] });
}
function yp({
children: e,
className: t,
style: n,
tableClassName: s,
tableStyle: r,
responsive: o = !0,
striped: i = !1,
hoverable: a = !0,
bordered: l = !1,
dense: c = !1
}) {
return /* @__PURE__ */ d(
"div",
{
className: O(
"w-full rounded-2xl border bg-background text-foreground shadow-sm",
"border-border",
o && "overflow-x-auto",
t
),
style: n,
children: /* @__PURE__ */ d(
"table",
{
className: O(
"w-full border-collapse text-sm",
c ? "text-xs" : "text-sm",
s
),
style: {
borderSpacing: 0,
...r
},
children: ie.Children.map(
e,
(u) => ie.isValidElement(u) ? ie.cloneElement(u, {
striped: i,
hoverable: a,
bordered: l,
dense: c
}) : u
)
}
)
}
);
}
function bp({
children: e,
className: t,
style: n,
bordered: s
}) {
return /* @__PURE__ */ d(
"thead",
{
className: O(
"bg-accent text-foreground",
t
),
style: n,
children: ie.Children.map(
e,
(r) => ie.isValidElement(r) ? ie.cloneElement(r, { bordered: s }) : r
)
}
);
}
function xp({
children: e,
className: t,
style: n,
striped: s,
hoverable: r,
bordered: o
}) {
return /* @__PURE__ */ d("tbody", { className: O("bg-background", t), style: n, children: ie.Children.map(
e,
(i, a) => ie.isValidElement(i) ? ie.cloneElement(i, {
striped: s,
hoverable: r,
bordered: o,
index: a
}) : i
) });
}
function vp({
children: e,
className: t,
style: n,
onClick: s,
striped: r,
hoverable: o,
bordered: i,
index: a = 0
}) {
return /* @__PURE__ */ d(
"tr",
{
onClick: s,
className: O(
t,
i && "border-b border-border",
r && a % 2 === 0 && "bg-accent/30",
o && "hover:bg-accent/60",
s && "cursor-pointer",
"transition-all duration-200"
),
style: n,
children: e
}
);
}
function wp({
children: e,
className: t,
style: n,
bordered: s,
dense: r
}) {
return /* @__PURE__ */ d(
"th",
{
className: O(
t,
"text-left font-medium text-foreground",
r ? "px-3 py-2" : "px-5 py-3",
s && "border-b border-border"
),
style: n,
children: e
}
);
}
function Np({ children: e, className: t, style: n, dense: s }) {
return /* @__PURE__ */ d(
"td",
{
className: O(
t,
"text-accent-foreground",
s ? "px-3 py-2" : "px-5 py-3"
),
style: n,
children: e
}
);
}
function om(e = 768) {
const [t, n] = H(!1);
return ee(() => {
const s = window.matchMedia(`(max-width: ${e}px)`), r = (o) => n(o.matches);
return n(s.matches), s.addEventListener("change", r), () => s.removeEventListener("change", r);
}, [e]), t;
}
const el = gt(null);
function tr() {
const e = de(el);
if (!e)
throw new Error("<Tab>, <TabList>, <TabPanel> must be inside <Tabs>");
return e;
}
const Tp = ({
children: e,
defaultActive: t = 0,
position: n = "top",
variant: s = "solid",
fullWidth: r = !1,
radius: o = 8,
transitionDuration: i = 200,
bordered: a = !1,
mobileBreakpoint: l = 768,
mobileVariant: c = "scroll",
backgroundColor: u,
primaryColor: f = "var(--primary)",
activeColor: h = "var(--foreground)",
textColor: p = "",
hoverColor: g = "var(--primary)",
borderColor: y = "var(--border)",
disabledColor: b = "var(--muted-foreground)",
onTabChange: v,
tabCount: N = 0,
style: x,
className: w
}) => {
const [T, D] = H(t), [k, S] = H(N), [V, A] = H(!1), F = G(null), L = om(l);
ee(() => {
!N && F.current && S(
F.current.querySelectorAll("[data-tab-button]").length
);
}, [N, e]), ee(() => {
L || A(!1);
}, [L]);
const $ = (B) => {
D(B), v?.(B), L && c === "drawer" && A(!1);
}, E = L && (n === "left" || n === "right") ? "top" : n, C = E === "left" || E === "right";
return /* @__PURE__ */ d(
el.Provider,
{
value: {
active: T,
setActive: $,
variant: s,
position: E,
primaryColor: f,
activeColor: h,
textColor: p,
hoverColor: g,
borderColor: y,
disabledColor: b,
radius: o,
transitionDuration: i,
fullWidth: r,
tabCount: k,
isMobile: L,
mobileVariant: c,
drawerOpen: V,
setDrawerOpen: A
},
children: /* @__PURE__ */ P(
"div",
{
ref: F,
className: O(
"modern-tabs",
"text-foreground",
C ? "flex flex-row" : "flex flex-col",
E === "right" && "flex-row-reverse",
E === "bottom" && "flex-col-reverse",
a && "border border-border",
w
),
style: {
// This was `background: "bg-background"` — a Tailwind class name in a
// CSS property, which the browser silently drops, so the root had no
// background at all. The `backgroundColor` prop belongs here.
background: u ?? "var(--background)",
borderRadius: o,
overflow: "hidden",
...x
},
children: [
/* @__PURE__ */ d("style", { children: `
@keyframes tab-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes tab-drawer-open {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.tab-panel-active {
animation: tab-fade-in ${i}ms ease;
}
.tab-drawer-menu {
animation: tab-drawer-open ${i}ms ease;
}
.tab-scroll-strip {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.tab-scroll-strip::-webkit-scrollbar { display: none; }
.tab-scroll-strip [data-tab-button] {
scroll-snap-align: start;
flex-shrink: 0;
}
` }),
e
]
}
)
}
);
}, am = ({ open: e }) => /* @__PURE__ */ d(
"svg",
{
width: "14",
height: "14",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2.5",
strokeLinecap: "round",
strokeLinejoin: "round",
style: {
transform: e ? "rotate(180deg)" : "rotate(0deg)",
transition: "transform 200ms ease",
display: "flex",
flexShrink: 0
},
children: /* @__PURE__ */ d("polyline", { points: "6 9 12 15 18 9" })
}
), Sp = ({
children: e,
gap: t = 8,
drawerLabel: n = "Select tab",
style: s,
className: r,
triggerClassName: o,
menuClassName: i
}) => {
const {
position: a,
isMobile: l,
mobileVariant: c,
drawerOpen: u,
setDrawerOpen: f,
radius: h,
active: p
} = tr(), g = a === "left" || a === "right";
if (l && c === "drawer") {
const v = ie.Children.toArray(e)[p]?.props?.children ?? n;
return /* @__PURE__ */ P(
"div",
{
className: O(
"relative w-full bg-background text-foreground",
r
),
style: { padding: 8, ...s },
children: [
/* @__PURE__ */ P(
"button",
{
onClick: () => f(!u),
className: m(
"flex items-center justify-between w-full font-medium border border-border bg-background text-foreground hover:bg-accent transition-colors",
o
),
style: {
padding: "10px 16px",
borderRadius: h,
cursor: "pointer",
fontSize: 14
},
children: [
/* @__PURE__ */ d("span", { children: v }),
/* @__PURE__ */ d(am, { open: u })
]
}
),
u && /* @__PURE__ */ d(
"div",
{
className: m(
"tab-drawer-menu absolute left-0 right-0 z-50 flex flex-col bg-background text-foreground border border-border",
i
),
style: {
top: "calc(100% + 4px)",
borderRadius: h,
boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
gap: 4,
padding: 6
},
children: e
}
)
]
}
);
}
return l && c === "scroll" ? /* @__PURE__ */ d(
"div",
{
role: "tablist",
className: O(
"tab-scroll-strip flex flex-row w-full bg-background text-foreground",
r
),
style: { gap: t, padding: 8, ...s },
children: e
}
) : l && c === "stack" ? /* @__PURE__ */ d(
"div",
{
role: "tablist",
className: O(
"flex flex-col w-full bg-background text-foreground",
r
),
style: { gap: t, padding: 8, ...s },
children: e
}
) : l && c === "collapse" ? /* @__PURE__ */ d(
"div",
{
role: "tablist",
className: O(
"flex flex-row flex-wrap w-full bg-background text-foreground",
r
),
style: {
gap: t,
padding: 8,
...s
},
children: e
}
) : /* @__PURE__ */ d(
"div",
{
role: "tablist",
className: O(
"flex text-foreground",
g ? "flex-col" : "flex-row",
g ? "min-w-40" : "w-full",
r
),
style: { gap: t, padding: 8, ...s },
children: e
}
);
}, Cp = ({
children: e,
index: t,
icon: n,
disabled: s = !1,
ariaLabel: r,
className: o,
iconClassName: i
}) => {
const { active: a, setActive: l, variant: c, tabCount: u, isMobile: f, mobileVariant: h } = tr(), p = G(t), g = G(null), y = () => {
if (p.current !== void 0) return p.current;
if (!g.current) return 0;
const D = g.current.closest("[role=tablist], .tab-drawer-menu")?.querySelectorAll("[data-tab-button]");
return D ? Array.from(D).indexOf(g.current) : 0;
}, b = y() === a;
return /* @__PURE__ */ P(
"button",
{
ref: g,
"data-tab-button": !0,
role: "tab",
"aria-selected": b,
"aria-label": r,
disabled: s,
onClick: () => !s && l(y()),
onKeyDown: (D) => {
const k = u || 1, S = y();
D.key === "ArrowRight" || D.key === "ArrowDown" ? (D.preventDefault(), l((S + 1) % k)) : (D.key === "ArrowLeft" || D.key === "ArrowUp") && (D.preventDefault(), l((S - 1 + k) % k));
},
className: O(
"flex items-center rounded-lg justify-center gap-2 font-medium select-none transition-all",
"text-muted-foreground text-sm whitespace-nowrap",
!s && "cursor-pointer",
s && "opacity-60 cursor-not-allowed",
f && (h === "stack" || h === "drawer" || h === "collapse") && "w-full",
c === "outline" ? "border border-border bg-transparent" : c === "underline" ? "!border-b-2 border-transparent rounded-none" : c === "pill" ? "!rounded-full" : "border-none",
!s && (c === "underline" ? "hover:text-foreground" : "hover:bg-accent hover:text-foreground"),
b && "text-foreground",
b && (c === "solid" || c === "pill" ? "bg-primary text-primary-foreground" : c === "outline" ? "border-primary text-primary !bg-primary/5" : c === "underline" ? "!border-primary !text-primary" : ""),
o
),
style: {
padding: "10px 16px"
// kept minimal inline (safe, not theme-related)
},
children: [
n && /* @__PURE__ */ d("span", { className: m("shrink-0", i), children: n }),
e
]
}
);
}, kp = ({
children: e,
style: t,
className: n
}) => /* @__PURE__ */ d(
"div",
{
className: O("flex-1 min-w-0 text-foreground", n),
style: {
...t
},
children: e
}
), Pp = ({
children: e,
index: t,
keepMounted: n = !1,
style: s,
className: r
}) => {
const { active: o } = tr(), i = t === o;
return !n && !i ? null : /* @__PURE__ */ d(
"div",
{
role: "tabpanel",
hidden: !i,
className: O(
i && "tab-panel-active",
"text-foreground",
r
),
style: { display: i ? void 0 : "none", ...s },
children: e
}
);
}, Dp = ({
context: e,
className: t = "",
sunClassName: n,
moonClassName: s
}) => {
const { isDark: r, toggleTheme: o } = e;
return /* @__PURE__ */ P(
"button",
{
onClick: o,
type: "button",
"aria-label": r ? "Switch to light mode" : "Switch to dark mode",
className: m(
"relative flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full",
"text-foreground transition-colors duration-200 hover:bg-accent",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
t
),
children: [
/* @__PURE__ */ d(
yl,
{
size: 18,
"aria-hidden": "true",
className: m(
"absolute text-warning transition-all duration-300",
r ? "rotate-0 scale-100 opacity-100" : "-rotate-90 scale-0 opacity-0",
n
)
}
),
/* @__PURE__ */ d(
bl,
{
size: 18,
"aria-hidden": "true",
className: m(
"absolute text-info transition-all duration-300",
r ? "rotate-90 scale-0 opacity-0" : "rotate-0 scale-100 opacity-100",
s
)
}
)
]
}
);
}, En = ie.createContext("md"), nr = {
none: "",
sm: "px-4 py-3",
md: "px-6 py-4",
lg: "px-8 py-6"
}, lm = Y(function({ variant: t = "default", padding: n = "md", hoverable: s = !1, className: r, children: o, ...i }, a) {
const l = {
default: "bg-card text-card-foreground border border-border",
outline: "bg-transparent text-foreground border border-border",
elevated: "bg-card text-card-foreground border border-border shadow-lg shadow-black/5",
ghost: "bg-muted/50 text-foreground border border-transparent"
};
return /* @__PURE__ */ d(En.Provider, { value: n, children: /* @__PURE__ */ d(
"div",
{
ref: a,
className: m(
// No overflow-hidden: it clipped any Popover/Dropdown/DatePicker
// rendered inside the card. The footer rounds itself instead.
"rounded-xl transition-shadow",
l[t] ?? l.default,
s && "hover:shadow-lg hover:shadow-black/10",
r
),
...i,
children: o
}
) });
});
lm.displayName = "Card";
const cm = Y(
function({
title: t,
description: n,
icon: s,
action: r,
className: o,
iconClassName: i,
titleClassName: a,
descriptionClassName: l,
actionClassName: c,
children: u,
...f
}, h) {
const p = ie.useContext(En);
return /* @__PURE__ */ P(
"div",
{
ref: h,
className: m(
"flex items-start justify-between gap-3 border-b border-border",
nr[p],
o
),
...f,
children: [
/* @__PURE__ */ P("div", { className: "flex min-w-0 items-start gap-3", children: [
s && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"flex h-6 shrink-0 items-center text-primary [&_svg]:h-5 [&_svg]:w-5",
i
),
children: s
}
),
/* @__PURE__ */ P("div", { className: "min-w-0", children: [
t && /* @__PURE__ */ d(
"h3",
{
className: m(
"text-sm font-semibold leading-6 text-foreground",
a
),
children: t
}
),
n && /* @__PURE__ */ d(
"p",
{
className: m(
"text-xs text-muted-foreground",
l
),
children: n
}
),
u
] })
] }),
r && /* @__PURE__ */ d("div", { className: m("shrink-0", c), children: r })
]
}
);
}
);
cm.displayName = "CardHeader";
const um = Y(
function({ className: t, children: n, ...s }, r) {
const o = ie.useContext(En);
return /* @__PURE__ */ d("div", { ref: r, className: m(nr[o], t), ...s, children: n });
}
);
um.displayName = "CardBody";
const dm = Y(
function({ className: t, children: n, ...s }, r) {
const o = ie.useContext(En);
return /* @__PURE__ */ d(
"div",
{
ref: r,
className: m(
"flex items-center justify-end gap-3 border-t border-border bg-accent/40",
// The card no longer clips its children, so the tinted footer
// rounds its own bottom corners to match the card radius.
"rounded-b-[inherit]",
nr[o],
t
),
...s,
children: n
}
);
}
);
dm.displayName = "CardFooter";
const Pi = { none: "my-0", sm: "my-2", md: "my-4", lg: "my-8" }, fm = { none: "mx-0", sm: "mx-2", md: "mx-4", lg: "mx-8" }, hm = Y(
function({
orientation: t = "horizontal",
label: n,
dashed: s = !1,
spacing: r = "md",
className: o,
lineClassName: i,
labelClassName: a,
...l
}, c) {
return t === "vertical" ? /* @__PURE__ */ d(
"div",
{
ref: c,
role: "separator",
"aria-orientation": "vertical",
className: m(
"inline-block self-stretch w-px min-h-4 bg-border",
s && "bg-transparent border-l border-dashed border-border",
fm[r],
o
),
...l
}
) : n ? /* @__PURE__ */ P(
"div",
{
ref: c,
role: "separator",
"aria-orientation": "horizontal",
className: m(
"flex items-center gap-3 text-xs text-muted-foreground",
Pi[r],
o
),
...l,
children: [
/* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"h-px flex-1 bg-border",
s && "bg-transparent border-t border-dashed border-border",
i
)
}
),
/* @__PURE__ */ d("span", { className: m("shrink-0", a), children: n }),
/* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"h-px flex-1 bg-border",
s && "bg-transparent border-t border-dashed border-border",
i
)
}
)
]
}
) : /* @__PURE__ */ d(
"div",
{
ref: c,
role: "separator",
"aria-orientation": "horizontal",
className: m(
"h-px w-full bg-border",
s && "bg-transparent border-t border-dashed border-border",
Pi[r],
o
),
...l
}
);
}
);
hm.displayName = "Divider";
const Di = {
sm: { root: "h-6 px-2 text-[11px] gap-1", icon: "w-3 h-3", remove: "w-3 h-3" },
md: { root: "h-7 px-2.5 text-xs gap-1.5", icon: "w-3.5 h-3.5", remove: "w-3.5 h-3.5" },
lg: { root: "h-8 px-3 text-sm gap-2", icon: "w-4 h-4", remove: "w-4 h-4" }
}, Ai = {
primary: {
solid: "bg-primary text-primary-foreground",
soft: "bg-primary/10 text-primary",
outline: "border border-primary text-primary"
},
neutral: {
solid: "bg-foreground text-background",
soft: "bg-muted text-foreground",
outline: "border border-border text-foreground"
},
destructive: {
solid: "bg-destructive text-destructive-foreground",
soft: "bg-destructive/10 text-destructive",
outline: "border border-destructive text-destructive"
},
success: {
solid: "bg-success text-success-foreground",
soft: "bg-success/10 text-success",
outline: "border border-success text-success"
}
}, mm = Y(function({
label: t,
variant: n = "soft",
color: s = "primary",
size: r = "md",
icon: o,
onRemove: i,
disabled: a = !1,
className: l,
iconClassName: c,
labelClassName: u,
removeButtonClassName: f,
removeIconClassName: h,
...p
}, g) {
const y = Di[r] ?? Di.md, b = Ai[s] ?? Ai.primary;
return /* @__PURE__ */ P(
"span",
{
ref: g,
className: m(
// max-w-full lets the label actually truncate inside narrow parents.
"inline-flex max-w-full items-center rounded-full font-medium select-none",
y.root,
b[n] ?? b.soft,
a && "opacity-50",
l
),
...p,
children: [
o && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"shrink-0 [&_svg]:w-full [&_svg]:h-full",
y.icon,
c
),
children: o
}
),
/* @__PURE__ */ d("span", { className: m("min-w-0 truncate", u), children: t }),
i && /* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": typeof t == "string" ? `Remove ${t}` : "Remove",
disabled: a,
onClick: i,
className: m(
"shrink-0 -mr-0.5 rounded-full opacity-70 transition-opacity",
"hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
a && "cursor-not-allowed",
f
),
children: /* @__PURE__ */ d(Je, { "aria-hidden": "true", className: m(y.remove, h) })
}
)
]
}
);
});
mm.displayName = "Chip";
const pm = Y(function({ children: t, size: n = "md", className: s, ...r }, o) {
return /* @__PURE__ */ d(
"kbd",
{
ref: o,
className: m(
// align-middle: an inline-flex box otherwise sits on the text
// baseline and hangs visibly low next to the surrounding words.
"inline-flex items-center justify-center align-middle whitespace-nowrap select-none",
"rounded-md border border-border bg-muted font-mono font-medium leading-none text-muted-foreground",
// Key-cap depth: a solid bottom shadow instead of border-b-2, which in
// the same color as the other borders just looked lopsided.
"shadow-[0_2px_0_0_var(--border)]",
n === "sm" ? "min-w-5 h-5 px-1 text-[10px]" : "min-w-6 h-6 px-1.5 text-xs",
s
),
...r,
children: t
}
);
});
pm.displayName = "Kbd";
const gm = Y(
function({
variant: t = "text",
width: n,
height: s,
lines: r = 1,
animated: o = !0,
className: i,
lineClassName: a,
style: l,
...c
}, u) {
const f = m(
"bg-muted",
o && "animate-pulse motion-reduce:animate-none"
);
return t === "text" && r > 1 ? /* @__PURE__ */ d(
"div",
{
ref: u,
"aria-hidden": "true",
className: m("w-full space-y-2", i),
style: { width: n, ...l },
...c,
children: Array.from({ length: r }, (h, p) => /* @__PURE__ */ d(
"div",
{
className: m(
f,
"h-4 rounded",
// Shorter last line reads as a paragraph, not a block.
p === r - 1 ? "w-3/5" : "w-full",
a
)
},
p
))
}
) : /* @__PURE__ */ d(
"div",
{
ref: u,
"aria-hidden": "true",
className: m(
f,
t === "circular" && "rounded-full",
t === "rectangular" && "rounded-lg",
t === "text" && "h-4 rounded",
i
),
style: {
width: n ?? (t === "circular" ? 40 : "100%"),
height: s ?? (t === "circular" ? 40 : t === "rectangular" ? 96 : void 0),
...l
},
...c
}
);
}
);
gm.displayName = "Skeleton";
const Ei = {
xs: "w-3 h-3 border-2",
sm: "w-4 h-4 border-2",
md: "w-6 h-6 border-2",
lg: "w-8 h-8 border-[3px]",
xl: "w-12 h-12 border-4"
}, ym = Y(
function({
size: t = "md",
label: n = "Loading…",
colorClassName: s,
labelClassName: r,
className: o,
...i
}, a) {
return /* @__PURE__ */ P(
"span",
{
ref: a,
role: "status",
className: m("inline-flex items-center justify-center", o),
...i,
children: [
/* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"inline-block rounded-full border-current border-t-transparent animate-spin motion-reduce:animate-[spin_1.5s_linear_infinite]",
Ei[t] ?? Ei.md,
s ?? "text-primary"
)
}
),
/* @__PURE__ */ d("span", { className: m("sr-only", r), children: n })
]
}
);
}
);
ym.displayName = "Spinner";
const Mi = { sm: "h-1", md: "h-2", lg: "h-3" }, Vi = { sm: 32, md: 48, lg: 64 }, bm = Y(
function({
value: t,
max: n = 100,
variant: s = "linear",
size: r = "md",
showValue: o = !1,
label: i,
colorClassName: a,
trackClassName: l,
fillClassName: c,
valueClassName: u,
className: f,
...h
}, p) {
const g = t == null, y = g ? 0 : Math.min(Math.max(t, 0), n), b = g ? 0 : Math.round(y / n * 100), v = {
role: "progressbar",
"aria-label": i,
"aria-valuemin": 0,
"aria-valuemax": n,
"aria-valuenow": g ? void 0 : y
};
if (s === "circular") {
const N = Vi[r] ?? Vi.md, x = r === "sm" ? 3 : 4, w = (N - x) / 2, T = 2 * Math.PI * w, D = T * (1 - b / 100);
return /* @__PURE__ */ P(
"div",
{
ref: p,
...v,
className: m(
"relative inline-flex items-center justify-center",
f
),
...h,
children: [
/* @__PURE__ */ P(
"svg",
{
width: N,
height: N,
viewBox: `0 0 ${N} ${N}`,
className: m(g && "animate-spin"),
"aria-hidden": "true",
children: [
/* @__PURE__ */ d(
"circle",
{
cx: N / 2,
cy: N / 2,
r: w,
fill: "none",
strokeWidth: x,
className: m("stroke-muted", l)
}
),
/* @__PURE__ */ d(
"circle",
{
cx: N / 2,
cy: N / 2,
r: w,
fill: "none",
strokeWidth: x,
strokeLinecap: "round",
strokeDasharray: T,
strokeDashoffset: g ? T * 0.75 : D,
transform: `rotate(-90 ${N / 2} ${N / 2})`,
className: m(
"transition-[stroke-dashoffset] duration-300",
a ?? "stroke-primary",
c
)
}
)
]
}
),
o && !g && /* @__PURE__ */ P(
"span",
{
className: m(
"absolute font-semibold tabular-nums text-foreground",
r === "lg" ? "text-xs" : "text-[10px]",
u
),
children: [
b,
"%"
]
}
)
]
}
);
}
return /* @__PURE__ */ P(
"div",
{
ref: p,
className: m("flex w-full items-center gap-3", f),
...h,
children: [
/* @__PURE__ */ d(
"div",
{
...v,
className: m(
"w-full overflow-hidden rounded-full bg-muted",
Mi[r] ?? Mi.md,
l
),
children: /* @__PURE__ */ d(
"div",
{
className: m(
"h-full rounded-full transition-[width] duration-300",
a ?? "bg-primary",
g && "w-1/3 animate-[progress-indeterminate_1.2s_ease-in-out_infinite] motion-reduce:animate-none",
c
),
style: g ? void 0 : { width: `${b}%` }
}
)
}
),
o && !g && /* @__PURE__ */ P(
"span",
{
className: m(
"shrink-0 text-xs font-medium tabular-nums text-muted-foreground",
u
),
children: [
b,
"%"
]
}
)
]
}
);
}
);
bm.displayName = "Progress";
const xm = Y(function({
label: t,
value: n,
icon: s,
trend: r,
trendValue: o,
description: i,
bordered: a = !0,
className: l,
headerClassName: c,
labelClassName: u,
iconClassName: f,
valueClassName: h,
footerClassName: p,
trendClassName: g,
trendIconClassName: y,
descriptionClassName: b,
...v
}, N) {
const x = r === "up" ? xl : r === "down" ? vl : oo;
return /* @__PURE__ */ P(
"div",
{
ref: N,
className: m(
"min-w-0",
a && "rounded-xl border border-border bg-card p-5",
l
),
...v,
children: [
/* @__PURE__ */ P("div", { className: m("flex items-start justify-between gap-3", c), children: [
/* @__PURE__ */ d(
"p",
{
className: m(
"text-xs font-medium uppercase tracking-wide text-muted-foreground",
u
),
children: t
}
),
s && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"shrink-0 rounded-lg bg-primary/10 p-2 text-primary [&_svg]:h-4 [&_svg]:w-4",
f
),
children: s
}
)
] }),
/* @__PURE__ */ d(
"p",
{
className: m(
"mt-2 truncate text-2xl font-bold tabular-nums text-foreground",
h
),
children: n
}
),
(r || i) && /* @__PURE__ */ P(
"div",
{
className: m(
"mt-2 flex flex-wrap items-center gap-2 text-xs",
p
),
children: [
r && /* @__PURE__ */ P(
"span",
{
className: m(
"inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 font-medium",
r === "up" && "bg-success/10 text-success",
r === "down" && "bg-destructive/10 text-destructive",
r === "neutral" && "bg-muted text-muted-foreground",
g
),
children: [
/* @__PURE__ */ d(x, { "aria-hidden": "true", className: m("h-3 w-3", y) }),
o
]
}
),
i && /* @__PURE__ */ d("span", { className: m("text-muted-foreground", b), children: i })
]
}
)
]
}
);
});
xm.displayName = "Stat";
const Ii = {
sm: { root: "py-8 px-4", icon: "h-10 w-10 [&_svg]:h-5 [&_svg]:w-5", title: "text-sm", desc: "text-xs max-w-xs" },
md: { root: "py-12 px-6", icon: "h-12 w-12 [&_svg]:h-6 [&_svg]:w-6", title: "text-base", desc: "text-sm max-w-sm" },
lg: { root: "py-16 px-8", icon: "h-14 w-14 [&_svg]:h-7 [&_svg]:w-7", title: "text-lg", desc: "text-sm max-w-md" }
}, vm = Y(
function({
icon: t,
title: n,
description: s,
action: r,
size: o = "md",
className: i,
iconClassName: a,
titleClassName: l,
descriptionClassName: c,
actionClassName: u,
...f
}, h) {
const p = Ii[o] ?? Ii.md;
return /* @__PURE__ */ P(
"div",
{
ref: h,
className: m(
"flex w-full flex-col items-center justify-center text-center",
p.root,
i
),
...f,
children: [
/* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"mb-4 inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground",
p.icon,
a
),
children: t ?? /* @__PURE__ */ d(wl, {})
}
),
/* @__PURE__ */ d("h3", { className: m("font-semibold text-foreground", p.title, l), children: n }),
s && /* @__PURE__ */ d("p", { className: m("mt-1 text-muted-foreground", p.desc, c), children: s }),
r && /* @__PURE__ */ d("div", { className: m("mt-5", u), children: r })
]
}
);
}
);
vm.displayName = "EmptyState";
const wm = {
done: "bg-primary text-primary-foreground border-primary",
active: "bg-primary/15 text-primary border-primary",
pending: "bg-muted text-muted-foreground border-border"
}, Nm = Y(
function({
items: t,
size: n = "md",
className: s,
itemClassName: r,
connectorClassName: o,
dotClassName: i,
contentClassName: a,
titleClassName: l,
timeClassName: c,
descriptionClassName: u,
...f
}, h) {
const p = n === "sm";
return /* @__PURE__ */ d("ol", { ref: h, className: m("relative", s), ...f, children: t.map((g, y) => {
const b = g.status ?? "pending", v = y === t.length - 1;
return /* @__PURE__ */ P(
"li",
{
className: m(
"relative flex gap-4",
!v && (p ? "pb-6" : "pb-8"),
r
),
children: [
!v && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"absolute top-8 bottom-0 w-px bg-border",
// left = half the dot width, so the line runs through the
// dot's center at both sizes.
p ? "left-3.5 top-7" : "left-4",
o
)
}
),
/* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"relative z-10 flex shrink-0 items-center justify-center rounded-full border",
p ? "h-7 w-7 [&_svg]:h-3 [&_svg]:w-3" : "h-8 w-8 [&_svg]:h-3.5 [&_svg]:w-3.5",
wm[b],
i
),
children: g.icon ?? (b === "done" ? /* @__PURE__ */ d(Tn, {}) : /* @__PURE__ */ d(
"span",
{
className: m(
"rounded-full",
p ? "h-1.5 w-1.5" : "h-2 w-2",
b === "active" ? "bg-primary" : "bg-muted-foreground/50"
)
}
))
}
),
/* @__PURE__ */ P("div", { className: m("min-w-0 flex-1 pt-1", a), children: [
/* @__PURE__ */ P("div", { className: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5", children: [
/* @__PURE__ */ d(
"h4",
{
className: m(
"font-medium",
"text-sm",
b === "pending" ? "text-muted-foreground" : "text-foreground",
l
),
children: g.title
}
),
g.time && /* @__PURE__ */ d(
"span",
{
className: m(
"text-xs text-muted-foreground",
c
),
children: g.time
}
)
] }),
g.description && /* @__PURE__ */ d(
"p",
{
className: m(
"mt-1 text-xs leading-relaxed text-muted-foreground",
u
),
children: g.description
}
)
] })
]
},
y
);
}) });
}
);
Nm.displayName = "Timeline";
const Ri = {
sm: { text: "text-xs", icon: "[&_svg]:h-3 [&_svg]:w-3", sep: "h-3 w-3" },
md: { text: "text-sm", icon: "[&_svg]:h-3.5 [&_svg]:w-3.5", sep: "h-3.5 w-3.5" }
}, Tm = Y(
function({
items: t,
separator: n,
maxItems: s,
size: r = "md",
className: o,
listClassName: i,
itemClassName: a,
activeItemClassName: l,
triggerClassName: c,
iconClassName: u,
labelClassName: f,
separatorClassName: h,
ellipsisClassName: p,
...g
}, y) {
const b = Ri[r] ?? Ri.md;
let v = t;
return s && s >= 2 && t.length > s && (v = [
t[0],
"ellipsis",
...t.slice(t.length - (s - 1))
]), /* @__PURE__ */ d(
"nav",
{
ref: y,
"aria-label": "Breadcrumb",
className: m("min-w-0", o),
...g,
children: /* @__PURE__ */ d(
"ol",
{
className: m(
"flex flex-wrap items-center gap-1.5",
b.text,
i
),
children: v.map((N, x) => {
if (N === "ellipsis")
return /* @__PURE__ */ P(
"li",
{
className: m(
"flex items-center gap-1.5 text-muted-foreground",
p
),
children: [
/* @__PURE__ */ d(
ao,
{
"aria-hidden": "true",
className: b.sep
}
),
/* @__PURE__ */ d(Tt, { "aria-hidden": "true", className: m(b.sep, "opacity-60") })
]
},
"ellipsis"
);
const w = x === v.length - 1, T = /* @__PURE__ */ P(Te, { children: [
N.icon && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m("shrink-0", b.icon, u),
children: N.icon
}
),
/* @__PURE__ */ d("span", { className: m("truncate", f), children: N.label })
] });
return /* @__PURE__ */ P(
"li",
{
className: m("flex min-w-0 items-center gap-1.5", a),
children: [
w ? /* @__PURE__ */ d(
"span",
{
"aria-current": "page",
className: m(
"flex min-w-0 items-center gap-1.5 font-medium text-foreground",
l
),
children: T
}
) : N.href ? /* @__PURE__ */ d(
"a",
{
href: N.href,
onClick: N.onClick,
className: m(
"flex min-w-0 items-center gap-1.5 rounded text-muted-foreground transition-colors",
"hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
c
),
children: T
}
) : /* @__PURE__ */ d(
"button",
{
type: "button",
onClick: N.onClick,
className: m(
"flex min-w-0 items-center gap-1.5 rounded text-muted-foreground transition-colors",
"hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
c
),
children: T
}
),
!w && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"shrink-0 text-muted-foreground/60",
h
),
children: n ?? /* @__PURE__ */ d(Tt, { className: b.sep })
}
)
]
},
`${x}-${typeof N.label == "string" ? N.label : "item"}`
);
})
}
)
}
);
}
);
Tm.displayName = "Breadcrumb";
const Li = {
sm: "h-7 min-w-7 px-1 text-xs [&_svg]:h-3.5 [&_svg]:w-3.5",
md: "h-9 min-w-9 px-1.5 text-sm [&_svg]:h-4 [&_svg]:w-4",
lg: "h-11 min-w-11 px-2 text-base [&_svg]:h-5 [&_svg]:w-5"
}, Sm = (e, t, n) => {
const s = n * 2 + 5;
if (t <= s)
return Array.from({ length: t }, (c, u) => u + 1);
const r = Math.max(e - n, 1), o = Math.min(e + n, t), i = r > 2, a = o < t - 1, l = [];
for (let c = i ? r : 1; c <= (a ? o : t); c++)
l.push(c);
return [
...i ? [1, "ellipsis-l"] : [],
...l,
...a ? ["ellipsis-r", t] : []
];
}, Cm = Y(
function({
page: t,
totalPages: n,
onPageChange: s,
siblingCount: r = 1,
size: o = "md",
disabled: i = !1,
className: a,
prevButtonClassName: l,
nextButtonClassName: c,
pageButtonClassName: u,
activePageButtonClassName: f,
ellipsisClassName: h,
...p
}, g) {
if (n < 1) return null;
const y = Math.min(Math.max(t, 1), n), b = Sm(y, n, Math.max(r, 0)), v = Li[o] ?? Li.md, N = (w) => {
if (i) return;
const T = Math.min(Math.max(w, 1), n);
T !== y && s?.(T);
}, x = m(
"inline-flex items-center justify-center rounded-lg font-medium transition-colors",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
"disabled:pointer-events-none disabled:opacity-40",
v
);
return /* @__PURE__ */ P(
"nav",
{
ref: g,
"aria-label": "Pagination",
className: m("flex flex-wrap items-center gap-1", a),
...p,
children: [
/* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": "Previous page",
disabled: i || y <= 1,
onClick: () => N(y - 1),
className: m(
x,
"text-muted-foreground hover:bg-accent hover:text-foreground",
l
),
children: /* @__PURE__ */ d(Cs, { "aria-hidden": "true" })
}
),
b.map(
(w) => typeof w != "number" ? /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"inline-flex items-center justify-center text-muted-foreground",
v,
h
),
children: /* @__PURE__ */ d(ao, {})
},
w
) : /* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": `Page ${w}`,
"aria-current": w === y ? "page" : void 0,
disabled: i,
onClick: () => N(w),
className: m(
x,
"tabular-nums",
w === y ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground",
u,
w === y && f
),
children: w
},
w
)
),
/* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": "Next page",
disabled: i || y >= n,
onClick: () => N(y + 1),
className: m(
x,
"text-muted-foreground hover:bg-accent hover:text-foreground",
c
),
children: /* @__PURE__ */ d(Tt, { "aria-hidden": "true" })
}
)
]
}
);
}
);
Cm.displayName = "Pagination";
const Bi = {
sm: { dot: "h-7 w-7 text-xs [&_svg]:h-3.5 [&_svg]:w-3.5", label: "text-xs", desc: "text-[11px]" },
md: { dot: "h-9 w-9 text-sm [&_svg]:h-4 [&_svg]:w-4", label: "text-sm", desc: "text-xs" }
}, km = Y(
function({
steps: t,
activeStep: n,
onStepClick: s,
orientation: r = "horizontal",
size: o = "md",
className: i,
itemClassName: a,
dotClassName: l,
dotButtonClassName: c,
connectorClassName: u,
contentClassName: f,
labelClassName: h,
descriptionClassName: p,
...g
}, y) {
const b = Bi[o] ?? Bi.md, v = r === "vertical", N = (x, w) => {
const T = x < n, D = x === n, k = !!s && T, S = /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"flex shrink-0 items-center justify-center rounded-full border-2 font-semibold transition-colors",
b.dot,
T && "border-primary bg-primary text-primary-foreground",
D && "border-primary bg-primary/10 text-primary",
!T && !D && "border-border bg-transparent text-muted-foreground",
l
),
children: T ? /* @__PURE__ */ d(Tn, {}) : w.icon ?? x + 1
}
);
return k ? /* @__PURE__ */ d(
"button",
{
type: "button",
onClick: () => s?.(x),
"aria-label": typeof w.label == "string" ? `Go to step: ${w.label}` : `Go to step ${x + 1}`,
className: m(
"rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
c
),
children: S
}
) : S;
};
return /* @__PURE__ */ d(
"div",
{
ref: y,
className: m(
v ? "flex flex-col" : "flex w-full items-start",
i
),
...g,
children: t.map((x, w) => {
const T = w < n, D = w === n, k = w === t.length - 1;
return v ? /* @__PURE__ */ P("div", { className: m("flex gap-3", a), children: [
/* @__PURE__ */ P("div", { className: "flex flex-col items-center", children: [
N(w, x),
!k && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"my-1 w-0.5 flex-1 min-h-6 rounded-full",
T ? "bg-primary" : "bg-border",
u
)
}
)
] }),
/* @__PURE__ */ P(
"div",
{
className: m(
"min-w-0 pb-6 pt-1",
k && "pb-0",
f
),
children: [
/* @__PURE__ */ d(
"p",
{
"aria-current": D ? "step" : void 0,
className: m(
"font-medium",
b.label,
D || T ? "text-foreground" : "text-muted-foreground",
h
),
children: x.label
}
),
x.description && /* @__PURE__ */ d(
"p",
{
className: m(
"mt-0.5 text-muted-foreground",
b.desc,
p
),
children: x.description
}
)
]
}
)
] }, w) : /* @__PURE__ */ P(ie.Fragment, { children: [
/* @__PURE__ */ P(
"div",
{
className: m(
"flex min-w-0 flex-col items-center gap-2 text-center",
a
),
children: [
N(w, x),
/* @__PURE__ */ P("div", { className: m("min-w-0", f), children: [
/* @__PURE__ */ d(
"p",
{
"aria-current": D ? "step" : void 0,
className: m(
"font-medium",
b.label,
D || T ? "text-foreground" : "text-muted-foreground",
h
),
children: x.label
}
),
x.description && /* @__PURE__ */ d(
"p",
{
className: m(
"mt-0.5 text-muted-foreground",
b.desc,
p
),
children: x.description
}
)
] })
]
}
),
!k && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"mx-2 mt-4 h-0.5 flex-1 rounded-full",
o === "sm" && "mt-3.5",
T ? "bg-primary" : "bg-border",
u
)
}
)
] }, w);
})
}
);
}
);
km.displayName = "Stepper";
const Fi = {
top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
left: "right-full top-1/2 -translate-y-1/2 mr-2",
right: "left-full top-1/2 -translate-y-1/2 ml-2"
}, ji = {
top: "top-full left-1/2 -translate-x-1/2 border-t-foreground border-x-transparent border-b-transparent",
bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-foreground border-x-transparent border-t-transparent",
left: "left-full top-1/2 -translate-y-1/2 border-l-foreground border-y-transparent border-r-transparent",
right: "right-full top-1/2 -translate-y-1/2 border-r-foreground border-y-transparent border-l-transparent"
}, Pm = ({
content: e,
children: t,
position: n = "top",
delay: s = 150,
disabled: r = !1,
className: o,
contentClassName: i,
arrowClassName: a
}) => {
const l = le(), [c, u] = H(!1), f = G(null), h = () => {
r || (f.current = setTimeout(() => u(!0), s));
}, p = () => {
f.current && clearTimeout(f.current), u(!1);
};
return ee(() => {
if (!c) return;
const g = (y) => {
y.key === "Escape" && p();
};
return document.addEventListener("keydown", g), () => document.removeEventListener("keydown", g);
}, [c]), ee(
() => () => {
f.current && clearTimeout(f.current);
},
[]
), /* @__PURE__ */ P(
"span",
{
className: m("relative inline-flex", o),
onMouseEnter: h,
onMouseLeave: p,
onFocus: h,
onBlur: p,
"aria-describedby": c ? l : void 0,
children: [
t,
c && !r && /* @__PURE__ */ P(
"span",
{
id: l,
role: "tooltip",
className: m(
"pointer-events-none absolute z-50 w-max max-w-60 rounded-md px-2.5 py-1.5",
// break-words: a long unbroken token (URL, hash) wraps instead of
// stretching the bubble past max-w.
"bg-foreground text-background text-xs font-medium shadow-lg wrap-break-word",
"animate-in fade-in",
Fi[n] ?? Fi.top,
i
),
children: [
e,
/* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"absolute border-4",
ji[n] ?? ji.top,
a
)
}
)
]
}
)
]
}
);
};
Pm.displayName = "Tooltip";
const Oi = {
top: { start: "bottom-full left-0 mb-2", center: "bottom-full left-1/2 -translate-x-1/2 mb-2", end: "bottom-full right-0 mb-2" },
bottom: { start: "top-full left-0 mt-2", center: "top-full left-1/2 -translate-x-1/2 mt-2", end: "top-full right-0 mt-2" },
left: { start: "right-full top-0 mr-2", center: "right-full top-1/2 -translate-y-1/2 mr-2", end: "right-full bottom-0 mr-2" },
right: { start: "left-full top-0 ml-2", center: "left-full top-1/2 -translate-y-1/2 ml-2", end: "left-full bottom-0 ml-2" }
}, Dm = Y(
function({
trigger: t,
children: n,
position: s = "bottom",
align: r = "center",
open: o,
defaultOpen: i = !1,
onOpenChange: a,
closeOnClickOutside: l = !0,
closeOnEscape: c = !0,
disabled: u = !1,
className: f,
triggerClassName: h,
contentClassName: p,
contentStyle: g
}, y) {
const b = le(), v = G(null), [N, x] = H(i), w = o !== void 0, T = w ? o : N, D = G((k) => {
w || x(k), a?.(k);
});
return D.current = (k) => {
w || x(k), a?.(k);
}, ee(() => {
if (!T) return;
const k = (V) => {
l && v.current && !v.current.contains(V.target) && D.current(!1);
}, S = (V) => {
c && V.key === "Escape" && D.current(!1);
};
return document.addEventListener("mousedown", k), document.addEventListener("keydown", S), () => {
document.removeEventListener("mousedown", k), document.removeEventListener("keydown", S);
};
}, [T, l, c]), /* @__PURE__ */ P(
"div",
{
ref: (k) => {
v.current = k, typeof y == "function" ? y(k) : y && (y.current = k);
},
className: m("relative inline-flex", f),
children: [
/* @__PURE__ */ d(
"div",
{
role: "button",
tabIndex: u ? -1 : 0,
"aria-haspopup": "dialog",
"aria-expanded": T,
"aria-controls": T ? b : void 0,
onClick: () => !u && D.current(!T),
onKeyDown: (k) => {
u || (k.key === "Enter" || k.key === " ") && (k.preventDefault(), D.current(!T));
},
className: m(
"inline-flex rounded-lg",
u && "cursor-not-allowed opacity-50",
h
),
children: t
}
),
T && /* @__PURE__ */ d(
"div",
{
id: b,
role: "dialog",
className: m(
"absolute z-50 min-w-48 rounded-xl border border-border bg-popover p-4",
"text-sm text-popover-foreground shadow-xl",
"animate-in fade-in",
Oi[s]?.[r] ?? Oi.bottom.center,
p
),
style: g,
children: n
}
)
]
}
);
}
);
Dm.displayName = "Popover";
const $i = {
sm: "h-1 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:w-3.5 [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:w-3.5",
md: "h-1.5 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4",
lg: "h-2 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5"
}, Am = Y(
function({
value: t,
defaultValue: n,
onChange: s,
min: r = 0,
max: o = 100,
step: i = 1,
label: a,
showValue: l = !1,
formatValue: c,
marks: u,
size: f = "md",
disabled: h,
id: p,
className: g,
wrapperClassName: y,
labelRowClassName: b,
labelClassName: v,
valueClassName: N,
marksClassName: x,
markClassName: w,
...T
}, D) {
const k = le(), S = p ?? k, [V, A] = H(n ?? r), F = t !== void 0 ? t : V, L = o === r ? 0 : (F - r) / (o - r) * 100, $ = (E) => {
const C = Number(E.target.value);
t === void 0 && A(C), s?.(C);
};
return /* @__PURE__ */ P("div", { className: m("w-full", y), children: [
(a || l) && /* @__PURE__ */ P(
"div",
{
className: m(
"mb-2 flex items-baseline justify-between gap-2",
b
),
children: [
a && /* @__PURE__ */ d(
"label",
{
htmlFor: S,
className: m(
"text-[13px] font-medium leading-none text-foreground",
v
),
children: a
}
),
l && /* @__PURE__ */ d(
"span",
{
className: m(
"text-xs font-medium tabular-nums text-muted-foreground",
N
),
children: c ? c(F) : F
}
)
]
}
),
/* @__PURE__ */ d(
"input",
{
ref: D,
id: S,
type: "range",
min: r,
max: o,
step: i,
value: F,
onChange: $,
disabled: h,
style: {
background: `linear-gradient(to right, var(--primary) ${L}%, var(--muted) ${L}%)`
},
className: m(
"w-full cursor-pointer appearance-none rounded-full outline-none transition-opacity",
$i[f] ?? $i.md,
// Thumb (WebKit + Firefox)
"[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full",
"[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary",
"[&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow",
"[&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110",
"[&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full",
"[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary",
"[&::-moz-range-thumb]:bg-background [&::-moz-range-thumb]:shadow",
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
h && "cursor-not-allowed opacity-50",
g
),
...T
}
),
u && u.length > 0 && /* @__PURE__ */ d(
"div",
{
className: m(
"relative mt-1.5 h-4 text-[10px] text-muted-foreground",
x
),
children: u.map((E) => {
const C = o === r ? 0 : (E.value - r) / (o - r) * 100;
return /* @__PURE__ */ d(
"span",
{
className: m(
"absolute whitespace-nowrap",
// Edge marks align inward so they aren't half-clipped
// outside the track.
C <= 0 ? "translate-x-0" : C >= 100 ? "-translate-x-full" : "-translate-x-1/2",
w
),
style: { left: `${C}%` },
children: E.label ?? E.value
},
E.value
);
})
}
)
] });
}
);
Am.displayName = "Slider";
const _i = {
sm: { input: "h-8 text-xs", button: "w-8 [&_svg]:h-3 [&_svg]:w-3" },
md: { input: "h-10 text-sm", button: "w-10 [&_svg]:h-3.5 [&_svg]:w-3.5" },
lg: { input: "h-12 text-base", button: "w-12 [&_svg]:h-4 [&_svg]:w-4" }
}, zi = (e, t, n) => t !== void 0 && e < t ? t : n !== void 0 && e > n ? n : e, Em = Y(
function({
value: t,
defaultValue: n,
onChange: s,
min: r,
max: o,
step: i = 1,
label: a,
error: l,
helperText: c,
size: u = "md",
disabled: f,
id: h,
className: p,
wrapperClassName: g,
labelClassName: y,
inputWrapperClassName: b,
decrementButtonClassName: v,
incrementButtonClassName: N,
helperTextClassName: x,
...w
}, T) {
const D = le(), k = h ?? D, S = c || l ? `${k}-description` : void 0, V = _i[u] ?? _i.md, [A, F] = H(
n !== void 0 ? String(n) : ""
), L = t !== void 0, $ = L ? t === null ? "" : String(t) : A, E = $ === "" ? null : Number($), C = (M) => {
L || F(M === null ? "" : String(M)), s?.(M);
}, B = (M) => {
const z = E !== null && !Number.isNaN(E) ? E : r ?? 0;
C(zi(z + M * i, r, o));
}, K = (M) => {
const z = M.target.value;
if (!/^-?\d*\.?\d*$/.test(z)) return;
L || F(z);
const j = z === "" || z === "-" ? null : Number(z);
s?.(j !== null && Number.isNaN(j) ? null : j);
}, I = () => {
if (E === null || Number.isNaN(E)) return;
const M = zi(E, r, o);
M !== E && C(M);
}, R = "flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring";
return /* @__PURE__ */ P("div", { className: m("w-full", g), children: [
a && /* @__PURE__ */ d(
"label",
{
htmlFor: k,
className: m(
"mb-1.5 block text-[13px] font-medium leading-none text-foreground",
y
),
children: a
}
),
/* @__PURE__ */ P(
"div",
{
className: m(
"flex w-full items-stretch overflow-hidden rounded-lg border bg-transparent transition-colors",
"dark:bg-input/30",
l ? "border-destructive" : "border-input",
"focus-within:ring-2 focus-within:ring-ring/40 focus-within:border-ring",
f && "opacity-50",
b
),
children: [
/* @__PURE__ */ d(
"button",
{
type: "button",
tabIndex: -1,
"aria-label": "Decrease value",
disabled: f || E !== null && r !== void 0 && E <= r,
onClick: () => B(-1),
className: m(R, V.button, "border-r border-input", v),
children: /* @__PURE__ */ d(oo, { "aria-hidden": "true" })
}
),
/* @__PURE__ */ d(
"input",
{
ref: T,
id: k,
type: "text",
inputMode: "decimal",
role: "spinbutton",
"aria-valuenow": E ?? void 0,
"aria-valuemin": r,
"aria-valuemax": o,
"aria-invalid": l ? !0 : void 0,
"aria-describedby": S,
value: $,
onChange: K,
onBlur: I,
onKeyDown: (M) => {
M.key === "ArrowUp" ? (M.preventDefault(), B(1)) : M.key === "ArrowDown" && (M.preventDefault(), B(-1));
},
disabled: f,
className: m(
"w-full min-w-0 flex-1 bg-transparent text-center text-foreground outline-none",
"placeholder:text-muted-foreground disabled:cursor-not-allowed",
V.input,
p
),
...w
}
),
/* @__PURE__ */ d(
"button",
{
type: "button",
tabIndex: -1,
"aria-label": "Increase value",
disabled: f || E !== null && o !== void 0 && E >= o,
onClick: () => B(1),
className: m(R, V.button, "border-l border-input", N),
children: /* @__PURE__ */ d(Nl, { "aria-hidden": "true" })
}
)
]
}
),
(c || l) && /* @__PURE__ */ d(
"p",
{
id: S,
role: l ? "alert" : void 0,
className: m(
"mt-1.5 text-xs font-medium",
l ? "text-destructive" : "text-muted-foreground",
x
),
children: l || c
}
)
] });
}
);
Em.displayName = "NumberInput";
const Ui = { sm: "h-4 w-4", md: "h-5 w-5", lg: "h-6 w-6" }, Mm = Y(function({
value: t,
defaultValue: n = 0,
onChange: s,
max: r = 5,
size: o = "md",
readOnly: i = !1,
disabled: a = !1,
allowClear: l = !0,
label: c = "Rating",
showValue: u = !1,
colorClassName: f = "text-warning",
starClassName: h,
emptyStarClassName: p,
starWrapperClassName: g,
valueClassName: y,
className: b,
...v
}, N) {
const x = le(), [w, T] = H(n), [D, k] = H(null), S = t !== void 0 ? t : w, V = D ?? S, A = Ui[o] ?? Ui.md, F = (L) => {
if (i || a) return;
const $ = l && L === S ? 0 : L;
t === void 0 && T($), s?.($);
};
if (i) {
const L = Math.min(Math.max(S / r, 0), 1) * 100;
return /* @__PURE__ */ P(
"div",
{
ref: N,
role: "img",
"aria-label": `${c}: ${S} out of ${r}`,
className: m("inline-flex items-center gap-2", b),
...v,
children: [
/* @__PURE__ */ P("span", { className: "relative inline-flex", "aria-hidden": "true", children: [
/* @__PURE__ */ d("span", { className: m("flex gap-0.5 text-muted-foreground/40", p), children: Array.from({ length: r }, ($, E) => /* @__PURE__ */ d(Vn, { className: m(A, h), fill: "currentColor", strokeWidth: 0 }, E)) }),
/* @__PURE__ */ d(
"span",
{
className: m("absolute inset-0 flex gap-0.5 overflow-hidden", f),
style: { width: `${L}%` },
children: Array.from({ length: r }, ($, E) => /* @__PURE__ */ d(
Vn,
{
className: m(A, "shrink-0", h),
fill: "currentColor",
strokeWidth: 0
},
E
))
}
)
] }),
u && /* @__PURE__ */ d("span", { className: m("text-sm font-medium tabular-nums text-foreground", y), children: S })
]
}
);
}
return /* @__PURE__ */ P(
"div",
{
ref: N,
role: "radiogroup",
"aria-label": c,
onMouseLeave: () => k(null),
className: m(
"inline-flex items-center gap-2",
a && "opacity-50",
b
),
...v,
children: [
/* @__PURE__ */ d("span", { className: "flex gap-0.5", children: Array.from({ length: r }, (L, $) => {
const E = $ + 1, C = E <= V;
return /* @__PURE__ */ P(
"label",
{
onMouseEnter: () => !a && k(E),
className: m(!a && "cursor-pointer", g),
children: [
/* @__PURE__ */ d(
"input",
{
type: "radio",
name: x,
value: E,
checked: S === E,
onChange: () => F(E),
disabled: a,
className: "sr-only peer",
"aria-label": `${E} of ${r}`
}
),
/* @__PURE__ */ d(
Vn,
{
"aria-hidden": "true",
className: m(
A,
"transition-colors",
C ? f : m("text-muted-foreground/40", p),
"peer-focus-visible:rounded peer-focus-visible:ring-2 peer-focus-visible:ring-ring",
h
),
fill: C ? "currentColor" : "none",
strokeWidth: C ? 0 : 1.5
}
)
]
},
E
);
}) }),
u && /* @__PURE__ */ d("span", { className: m("text-sm font-medium tabular-nums text-foreground", y), children: S })
]
}
);
});
Mm.displayName = "Rating";
const Wi = {
sm: { root: "min-h-8 px-2 py-1 gap-1", chip: "h-5 px-1.5 text-[11px]", input: "text-xs h-5" },
md: { root: "min-h-10 px-2.5 py-1.5 gap-1.5", chip: "h-6 px-2 text-xs", input: "text-sm h-6" },
lg: { root: "min-h-12 px-3 py-2 gap-2", chip: "h-7 px-2.5 text-sm", input: "text-base h-7" }
}, Vm = Y(
function({
value: t,
defaultValue: n = [],
onChange: s,
label: r,
placeholder: o = "Add a tag…",
maxTags: i,
validate: a,
addOnBlur: l = !0,
error: c,
helperText: u,
size: f = "md",
disabled: h = !1,
id: p,
className: g,
wrapperClassName: y,
labelClassName: b,
chipClassName: v,
chipRemoveClassName: N,
inputClassName: x,
helperClassName: w,
countClassName: T
}, D) {
const k = le(), S = p ?? k, V = u || c ? `${S}-description` : void 0, A = Wi[f] ?? Wi.md, F = G(null), [L, $] = H(n), [E, C] = H(""), B = t !== void 0 ? t : L, K = i !== void 0 && B.length >= i, I = (j) => {
t === void 0 && $(j), s?.(j);
}, R = (j) => {
const W = j.trim();
if (!(!W || h || K)) {
if (B.includes(W)) {
C("");
return;
}
a && !a(W) || (I([...B, W]), C(""));
}
}, M = (j) => {
h || I(B.filter((W, X) => X !== j));
}, z = (j) => {
j.key === "Enter" || j.key === "," ? (j.preventDefault(), R(E)) : j.key === "Backspace" && E === "" && B.length > 0 && M(B.length - 1);
};
return /* @__PURE__ */ P("div", { className: m("w-full", y), children: [
r && /* @__PURE__ */ d(
"label",
{
htmlFor: S,
className: m(
"mb-1.5 block text-[13px] font-medium leading-none text-foreground",
b
),
children: r
}
),
/* @__PURE__ */ P(
"div",
{
onClick: () => F.current?.focus(),
className: m(
"flex w-full cursor-text flex-wrap items-center rounded-lg border bg-transparent transition-colors",
"dark:bg-input/30",
c ? "border-destructive" : "border-input",
"focus-within:ring-2 focus-within:ring-ring/40 focus-within:border-ring",
h && "cursor-not-allowed opacity-50",
A.root,
g
),
children: [
B.map((j, W) => /* @__PURE__ */ P(
"span",
{
className: m(
"inline-flex items-center gap-1 rounded-full bg-primary/10 font-medium text-primary",
A.chip,
v
),
children: [
/* @__PURE__ */ d("span", { className: "max-w-40 truncate", children: j }),
/* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": `Remove ${j}`,
disabled: h,
onClick: (X) => {
X.stopPropagation(), M(W);
},
className: m(
"rounded-full opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
N
),
children: /* @__PURE__ */ d(Je, { "aria-hidden": "true", className: "h-3 w-3" })
}
)
]
},
`${j}-${W}`
)),
/* @__PURE__ */ d(
"input",
{
ref: (j) => {
F.current = j, typeof D == "function" ? D(j) : D && (D.current = j);
},
id: S,
type: "text",
value: E,
onChange: (j) => C(j.target.value),
onKeyDown: z,
onBlur: () => l && R(E),
placeholder: K ? "" : o,
disabled: h || K,
"aria-invalid": c ? !0 : void 0,
"aria-describedby": V,
className: m(
"min-w-20 flex-1 bg-transparent text-foreground outline-none",
"placeholder:text-muted-foreground disabled:cursor-not-allowed",
A.input,
x
)
}
)
]
}
),
(u || c || i !== void 0) && /* @__PURE__ */ P("div", { className: "mt-1.5 flex items-baseline justify-between gap-2", children: [
/* @__PURE__ */ d(
"p",
{
id: V,
role: c ? "alert" : void 0,
className: m(
"text-xs font-medium",
c ? "text-destructive" : "text-muted-foreground",
w
),
children: c || u
}
),
i !== void 0 && /* @__PURE__ */ P(
"span",
{
className: m(
"shrink-0 text-[11px] tabular-nums text-muted-foreground",
T
),
children: [
B.length,
"/",
i
]
}
)
] })
] });
}
);
Vm.displayName = "TagInput";
const Ki = {
sm: "h-9 w-9 text-sm rounded-md",
md: "h-11 w-11 text-base rounded-lg",
// h-12 keeps lg on the same height scale as the other form controls
// (and six lg boxes still fit a 360px viewport).
lg: "h-12 w-12 text-lg rounded-lg"
}, Im = Y(
function({
length: t = 4,
value: n,
defaultValue: s = "",
onChange: r,
onComplete: o,
type: i = "numeric",
mask: a = !1,
size: l = "md",
disabled: c = !1,
error: u = !1,
autoFocus: f = !1,
label: h = "PIN input",
id: p,
className: g,
boxClassName: y
}, b) {
const v = le(), N = p ?? v, x = G([]), [w, T] = H(s.slice(0, t)), D = (n !== void 0 ? n : w).slice(0, t), k = Array.from({ length: t }, (C, B) => D[B] ?? ""), S = i === "numeric" ? /^[0-9]$/ : /^[a-zA-Z0-9]$/, V = (C) => {
n === void 0 && T(C), r?.(C), C.length === t && o?.(C);
}, A = (C, B) => {
const K = k.slice();
K[C] = B, V(K.join("").slice(0, t));
}, F = (C) => {
x.current[Math.min(Math.max(C, 0), t - 1)]?.focus();
}, L = (C, B) => {
const K = B.target.value.slice(-1);
if (K === "") {
A(C, "");
return;
}
S.test(K) && (A(C, K), F(C + 1));
}, $ = (C, B) => {
B.key === "Backspace" ? (k[C] ? A(C, "") : (F(C - 1), A(C - 1, "")), B.preventDefault()) : B.key === "ArrowLeft" ? (B.preventDefault(), F(C - 1)) : B.key === "ArrowRight" && (B.preventDefault(), F(C + 1));
}, E = (C) => {
C.preventDefault();
const B = C.clipboardData.getData("text").split("").filter((K) => S.test(K)).slice(0, t).join("");
B && (V(B), F(B.length - 1));
};
return /* @__PURE__ */ d(
"div",
{
ref: b,
role: "group",
"aria-label": h,
className: m("inline-flex items-center gap-2", g),
children: k.map((C, B) => /* @__PURE__ */ d(
"input",
{
ref: (K) => {
x.current[B] = K;
},
id: B === 0 ? N : void 0,
type: a ? "password" : "text",
inputMode: i === "numeric" ? "numeric" : "text",
autoComplete: B === 0 ? "one-time-code" : "off",
"aria-label": `Character ${B + 1} of ${t}`,
value: C,
onChange: (K) => L(B, K),
onKeyDown: (K) => $(B, K),
onPaste: E,
onFocus: (K) => K.target.select(),
disabled: c,
autoFocus: f && B === 0,
className: m(
"border bg-transparent text-center font-semibold text-foreground outline-none transition-colors",
"dark:bg-input/30 caret-primary",
Ki[l] ?? Ki.md,
u ? "border-destructive" : "border-input",
"focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:border-ring",
c && "cursor-not-allowed opacity-50",
y
)
},
B
))
}
);
}
);
Im.displayName = "PinInput";
const Rm = (e) => e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`, Lm = Y(
function({
onFilesChange: t,
onError: n,
multiple: s = !1,
accept: r,
maxSizeMB: o,
maxFiles: i,
label: a = "Click to upload or drag and drop",
description: l,
disabled: c = !1,
hideFileList: u = !1,
id: f,
className: h,
dropzoneClassName: p,
iconClassName: g,
labelClassName: y,
descriptionClassName: b,
errorClassName: v,
listClassName: N,
fileItemClassName: x,
fileIconClassName: w,
fileNameClassName: T,
fileSizeClassName: D,
removeButtonClassName: k
}, S) {
const V = le(), A = f ?? V, F = G(null), [L, $] = H([]), [E, C] = H(!1), [B, K] = H(null), I = (M) => {
if (c) return;
K(null);
let z = s ? [...L] : [];
for (const j of Array.from(M)) {
if (o && j.size > o * 1024 * 1024) {
const W = `"${j.name}" exceeds the ${o} MB limit`;
K(W), n?.(W, j);
continue;
}
if (i && z.length >= i) {
const W = `Maximum of ${i} files`;
K(W), n?.(W, j);
break;
}
if (!z.some((W) => W.name === j.name && W.size === j.size) && (z.push(j), !s))
break;
}
$(z), t?.(z);
}, R = (M) => {
const z = L.filter((j, W) => W !== M);
$(z), t?.(z);
};
return /* @__PURE__ */ P("div", { className: m("w-full", h), children: [
/* @__PURE__ */ P(
"label",
{
htmlFor: A,
onDragOver: (M) => {
M.preventDefault(), c || C(!0);
},
onDragLeave: () => C(!1),
onDrop: (M) => {
M.preventDefault(), C(!1), I(M.dataTransfer.files);
},
className: m(
"flex w-full flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-6 py-10 text-center transition-colors",
E ? "border-primary bg-primary/5" : "border-border bg-transparent hover:border-muted-foreground/50 hover:bg-accent/30",
c ? "cursor-not-allowed opacity-50" : "cursor-pointer",
"focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background",
p
),
children: [
/* @__PURE__ */ d(
"input",
{
ref: (M) => {
F.current = M, typeof S == "function" ? S(M) : S && (S.current = M);
},
id: A,
type: "file",
multiple: s,
accept: r,
disabled: c,
onChange: (M) => {
M.target.files && I(M.target.files), M.target.value = "";
},
className: "sr-only"
}
),
/* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m("rounded-full bg-muted p-3 text-muted-foreground", g),
children: /* @__PURE__ */ d(Tl, { className: "h-6 w-6" })
}
),
/* @__PURE__ */ d("p", { className: m("text-sm font-medium text-foreground", y), children: a }),
/* @__PURE__ */ d("p", { className: m("text-xs text-muted-foreground", b), children: l ?? [
r ? `Accepted: ${r}` : null,
o ? `Max ${o} MB` : null,
i ? `Up to ${i} files` : null
].filter(Boolean).join(" · ") })
]
}
),
B && /* @__PURE__ */ d("p", { role: "alert", className: m("mt-2 text-xs font-medium text-destructive", v), children: B }),
!u && L.length > 0 && /* @__PURE__ */ d("ul", { className: m("mt-3 space-y-2", N), children: L.map((M, z) => /* @__PURE__ */ P(
"li",
{
className: m(
"flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-2",
x
),
children: [
/* @__PURE__ */ d(
Sl,
{
"aria-hidden": "true",
className: m("h-4 w-4 shrink-0 text-muted-foreground", w)
}
),
/* @__PURE__ */ P("div", { className: "min-w-0 flex-1", children: [
/* @__PURE__ */ d("p", { className: m("truncate text-sm font-medium text-foreground", T), children: M.name }),
/* @__PURE__ */ d("p", { className: m("text-xs text-muted-foreground", D), children: Rm(M.size) })
] }),
/* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": `Remove ${M.name}`,
onClick: () => R(z),
className: m(
"shrink-0 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
k
),
children: /* @__PURE__ */ d(Je, { "aria-hidden": "true", className: "h-4 w-4" })
}
)
]
},
`${M.name}-${M.size}-${z}`
)) })
] });
}
);
Lm.displayName = "FileUpload";
const Hi = {
info: {
soft: "border-info/30 bg-info/10 text-info",
outline: "border-info/50 text-info",
icon: fn
},
success: {
soft: "border-success/30 bg-success/10 text-success",
outline: "border-success/50 text-success",
icon: io
},
warning: {
soft: "border-warning/30 bg-warning/10 text-warning",
outline: "border-warning/50 text-warning",
icon: so
},
error: {
soft: "border-destructive/30 bg-destructive/10 text-destructive",
outline: "border-destructive/50 text-destructive",
icon: ro
},
neutral: {
soft: "border-border bg-muted text-foreground",
outline: "border-border text-foreground",
icon: fn
}
}, Bm = Y(
function({
type: t = "info",
variant: n = "soft",
title: s,
children: r,
icon: o,
dismissible: i = !1,
onDismiss: a,
className: l,
iconClassName: c,
contentClassName: u,
titleClassName: f,
descriptionClassName: h,
closeButtonClassName: p,
...g
}, y) {
const [b, v] = H(!1);
if (b) return null;
const N = Hi[t] ?? Hi.info, x = N.icon;
return /* @__PURE__ */ P(
"div",
{
ref: y,
role: t === "error" ? "alert" : "status",
className: m(
"flex w-full items-start gap-3 rounded-xl border p-4",
N[n] ?? N.soft,
l
),
...g,
children: [
o !== null && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"flex h-5 shrink-0 items-center [&_svg]:h-5 [&_svg]:w-5",
c
),
children: o ?? /* @__PURE__ */ d(x, {})
}
),
/* @__PURE__ */ P("div", { className: m("min-w-0 flex-1", u), children: [
s && /* @__PURE__ */ d("p", { className: m("text-sm font-semibold", f), children: s }),
r && /* @__PURE__ */ d(
"div",
{
className: m(
"text-sm text-foreground/80",
s && "mt-1",
h
),
children: r
}
)
] }),
i && /* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": "Dismiss",
onClick: () => {
a?.(), v(!0);
},
className: m(
"shrink-0 rounded-md p-1 opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
p
),
children: /* @__PURE__ */ d(Je, { "aria-hidden": "true", className: "h-4 w-4" })
}
)
]
}
);
}
);
Bm.displayName = "Callout";
const Gi = {
sm: "h-8 px-2.5 text-xs [&_svg]:h-3.5 [&_svg]:w-3.5",
md: "h-9 px-3 text-sm [&_svg]:h-4 [&_svg]:w-4",
lg: "h-11 px-4 text-base [&_svg]:h-5 [&_svg]:w-5"
}, Fm = Y(
function({
pressed: t,
defaultPressed: n = !1,
onPressedChange: s,
variant: r = "default",
size: o = "md",
className: i,
children: a,
onClick: l,
disabled: c,
...u
}, f) {
const [h, p] = H(n), g = t !== void 0 ? t : h;
return /* @__PURE__ */ d(
"button",
{
ref: f,
type: "button",
"aria-pressed": g,
disabled: c,
onClick: (y) => {
l?.(y), t === void 0 && p(!g), s?.(!g);
},
className: m(
"inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
"disabled:pointer-events-none disabled:opacity-50",
Gi[o] ?? Gi.md,
r === "outline" && "border border-border",
g ? "bg-accent text-foreground" : "bg-transparent text-muted-foreground hover:bg-accent/60 hover:text-foreground",
i
),
...u,
children: a
}
);
}
);
Fm.displayName = "Toggle";
const Yi = {
sm: "h-8 px-2.5 text-xs [&_svg]:h-3.5 [&_svg]:w-3.5",
md: "h-9 px-3 text-sm [&_svg]:h-4 [&_svg]:w-4",
lg: "h-11 px-4 text-base [&_svg]:h-5 [&_svg]:w-5"
}, jm = Y(
function({
options: t,
type: n = "single",
value: s,
defaultValue: r,
onChange: o,
size: i = "md",
fullWidth: a = !1,
disabled: l = !1,
className: c,
itemClassName: u,
iconClassName: f,
...h
}, p) {
const [g, y] = H(
r ?? (n === "multiple" ? [] : "")
), b = s !== void 0 ? s : g, v = (x) => n === "multiple" ? Array.isArray(b) && b.includes(x) : b === x, N = (x) => {
let w;
if (n === "multiple") {
const T = Array.isArray(b) ? b : [];
w = T.includes(x) ? T.filter((D) => D !== x) : [...T, x];
} else
w = b === x ? "" : x;
s === void 0 && y(w), o?.(w);
};
return /* @__PURE__ */ d(
"div",
{
ref: p,
role: "group",
className: m(
"inline-flex items-stretch overflow-hidden rounded-lg border border-border bg-transparent",
a && "flex w-full",
l && "opacity-50",
c
),
...h,
children: t.map((x, w) => {
const T = v(x.value), D = l || x.disabled;
return /* @__PURE__ */ P(
"button",
{
type: "button",
"aria-pressed": T,
"aria-label": x.ariaLabel,
disabled: D,
onClick: () => N(x.value),
className: m(
"inline-flex items-center justify-center gap-2 font-medium transition-colors",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
"disabled:pointer-events-none disabled:opacity-50",
Yi[i] ?? Yi.md,
a && "flex-1",
w > 0 && "border-l border-border",
T ? "bg-primary/10 text-primary" : "bg-transparent text-muted-foreground hover:bg-accent/60 hover:text-foreground",
u
),
children: [
x.icon && /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m("shrink-0", f),
children: x.icon
}
),
x.label
]
},
x.value
);
})
}
);
}
);
jm.displayName = "ToggleGroup";
const Xi = {
sm: "h-7 px-1.5 text-xs [&_svg]:h-3.5 [&_svg]:w-3.5",
md: "h-9 px-2 text-sm [&_svg]:h-4 [&_svg]:w-4",
lg: "h-11 px-3 text-base [&_svg]:h-5 [&_svg]:w-5"
}, qi = {
sm: "w-7 px-0 justify-center",
md: "w-9 px-0 justify-center",
lg: "w-11 px-0 justify-center"
}, Om = Y(
function({
value: t,
label: n,
feedbackDuration: s = 1500,
size: r = "md",
onCopied: o,
className: i,
iconClassName: a,
labelClassName: l,
onClick: c,
...u
}, f) {
const [h, p] = H(!1), g = G(null);
return ee(
() => () => {
g.current && clearTimeout(g.current);
},
[]
), /* @__PURE__ */ P(
"button",
{
ref: f,
type: "button",
"aria-label": h ? "Copied" : "Copy to clipboard",
"aria-live": "polite",
onClick: async (b) => {
c?.(b);
try {
if (navigator.clipboard && window.isSecureContext)
await navigator.clipboard.writeText(t);
else {
const v = document.createElement("textarea");
v.value = t, v.style.position = "fixed", v.style.opacity = "0", document.body.appendChild(v), v.select(), document.execCommand("copy"), document.body.removeChild(v);
}
p(!0), o?.(t), g.current && clearTimeout(g.current), g.current = setTimeout(() => p(!1), s);
} catch {
}
},
className: m(
"inline-flex items-center gap-1.5 rounded-lg font-medium transition-colors",
"text-muted-foreground hover:bg-accent hover:text-foreground",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
"disabled:pointer-events-none disabled:opacity-50",
Xi[r] ?? Xi.md,
!n && (qi[r] ?? qi.md),
i
),
...u,
children: [
h ? /* @__PURE__ */ d(Tn, { "aria-hidden": "true", className: m("text-success", a) }) : /* @__PURE__ */ d(Cl, { "aria-hidden": "true", className: m(a) }),
n && /* @__PURE__ */ d("span", { className: m(l), children: h ? "Copied" : n })
]
}
);
}
);
Om.displayName = "CopyButton";
const Zi = {
sm: "h-8 w-8 text-[10px]",
md: "h-10 w-10 text-xs",
lg: "h-12 w-12 text-sm"
}, $m = Y(
function({
children: t,
max: n,
size: s = "md",
spacing: r = "normal",
className: o,
itemClassName: i,
counterClassName: a,
...l
}, c) {
const u = ie.Children.toArray(t), f = n && n > 0 ? u.slice(0, n) : u, h = u.length - f.length;
return /* @__PURE__ */ P(
"div",
{
ref: c,
className: m(
"flex items-center",
r === "tight" ? "-space-x-3" : "-space-x-2",
o
),
...l,
children: [
f.map((p, g) => /* @__PURE__ */ d(
"span",
{
className: m(
"relative inline-flex rounded-full ring-2 ring-background",
i
),
style: { zIndex: f.length - g },
children: p
},
g
)),
h > 0 && /* @__PURE__ */ P(
"span",
{
"aria-label": `${h} more`,
className: m(
"relative z-0 inline-flex items-center justify-center rounded-full",
"bg-muted font-semibold text-muted-foreground ring-2 ring-background",
Zi[s] ?? Zi.md,
a
),
children: [
"+",
h
]
}
)
]
}
);
}
);
$m.displayName = "AvatarGroup";
const Ji = (e, t) => !!e && !!t && e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate(), tn = (e) => new Date(e.getFullYear(), e.getMonth(), e.getDate()), tl = Y(
function({
value: t,
defaultValue: n = null,
onChange: s,
defaultMonth: r,
minDate: o,
maxDate: i,
isDateDisabled: a,
weekStartsOn: l = 1,
locale: c,
className: u,
headerClassName: f,
navButtonClassName: h,
monthLabelClassName: p,
weekdaysClassName: g,
weekdayClassName: y,
daysClassName: b,
dayClassName: v,
...N
}, x) {
const [w, T] = H(n), D = t !== void 0 ? t : w, [k, S] = H(() => {
const R = D ?? r ?? /* @__PURE__ */ new Date();
return new Date(R.getFullYear(), R.getMonth(), 1);
}), V = tn(/* @__PURE__ */ new Date()), A = o ? tn(o) : null, F = i ? tn(i) : null, L = (R) => A && R < A || F && R > F ? !0 : a?.(R) ?? !1, $ = (R) => {
t === void 0 && T(R), s?.(R), R.getMonth() !== k.getMonth() && S(new Date(R.getFullYear(), R.getMonth(), 1));
}, E = (R) => S(
(M) => new Date(M.getFullYear(), M.getMonth() + R, 1)
), C = (k.getDay() - l + 7) % 7, B = Array.from({ length: 42 }, (R, M) => {
const z = new Date(
k.getFullYear(),
k.getMonth(),
1 - C + M
);
return tn(z);
}), K = Array.from(
{ length: 7 },
(R, M) => new Date(2023, 0, 1 + (M + l) % 7).toLocaleDateString(
c,
{ weekday: "narrow" }
)
), I = k.toLocaleDateString(c, {
month: "long",
year: "numeric"
});
return /* @__PURE__ */ P(
"div",
{
ref: x,
className: m("w-64 select-none", u),
...N,
children: [
/* @__PURE__ */ P("div", { className: m("mb-2 flex items-center justify-between", f), children: [
/* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": "Previous month",
onClick: () => E(-1),
className: m(
"rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
h
),
children: /* @__PURE__ */ d(Cs, { "aria-hidden": "true", className: "h-4 w-4" })
}
),
/* @__PURE__ */ d(
"span",
{
"aria-live": "polite",
className: m("text-sm font-semibold text-foreground", p),
children: I
}
),
/* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": "Next month",
onClick: () => E(1),
className: m(
"rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
h
),
children: /* @__PURE__ */ d(Tt, { "aria-hidden": "true", className: "h-4 w-4" })
}
)
] }),
/* @__PURE__ */ d("div", { className: m("grid grid-cols-7 text-center", g), children: K.map((R, M) => /* @__PURE__ */ d(
"span",
{
"aria-hidden": "true",
className: m(
"py-1 text-[11px] font-medium text-muted-foreground",
y
),
children: R
},
M
)) }),
/* @__PURE__ */ d("div", { className: m("grid grid-cols-7", b), children: B.map((R) => {
const M = R.getMonth() !== k.getMonth(), z = L(R), j = Ji(R, D), W = Ji(R, V);
return /* @__PURE__ */ d(
"button",
{
type: "button",
disabled: z,
"aria-label": R.toLocaleDateString(c, {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
}),
"aria-pressed": j,
"aria-current": W ? "date" : void 0,
onClick: () => $(R),
className: m(
"m-0.5 flex h-8 items-center justify-center rounded-lg text-xs tabular-nums transition-colors",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
"disabled:pointer-events-none disabled:opacity-30",
j ? "bg-primary font-semibold text-primary-foreground" : m(
"hover:bg-accent",
M ? "text-muted-foreground/50" : "text-foreground",
W && "border border-primary/50 font-semibold text-primary"
),
v
),
children: R.getDate()
},
R.toISOString()
);
}) })
]
}
);
}
);
tl.displayName = "Calendar";
const Qi = {
sm: "h-8 px-2.5 text-xs [&_svg]:h-3.5 [&_svg]:w-3.5",
md: "h-10 px-3 text-sm [&_svg]:h-4 [&_svg]:w-4",
lg: "h-12 px-4 text-base [&_svg]:h-5 [&_svg]:w-5"
}, _m = Y(
function({
value: t,
defaultValue: n = null,
onChange: s,
placeholder: r = "Pick a date",
formatDate: o,
label: i,
error: a,
helperText: l,
size: c = "md",
disabled: u = !1,
clearable: f = !1,
calendarProps: h,
id: p,
className: g,
wrapperClassName: y,
labelClassName: b,
iconClassName: v,
textClassName: N,
clearButtonClassName: x,
clearIconClassName: w,
panelClassName: T,
helperClassName: D
}, k) {
const S = le(), V = p ?? S, A = `${S}-panel`, F = l || a ? `${V}-description` : void 0, L = G(null), [$, E] = H(!1), [C, B] = H(n), K = t !== void 0 ? t : C, I = (M) => {
t === void 0 && B(M), s?.(M);
};
ee(() => {
if (!$) return;
const M = (j) => {
L.current && !L.current.contains(j.target) && E(!1);
}, z = (j) => {
j.key === "Escape" && E(!1);
};
return document.addEventListener("mousedown", M), document.addEventListener("keydown", z), () => {
document.removeEventListener("mousedown", M), document.removeEventListener("keydown", z);
};
}, [$]);
const R = K ? o ? o(K) : K.toLocaleDateString() : null;
return /* @__PURE__ */ P("div", { ref: L, className: m("relative w-full", y), children: [
i && /* @__PURE__ */ d(
"label",
{
htmlFor: V,
className: m(
"mb-1.5 block text-[13px] font-medium leading-none text-foreground",
b
),
children: i
}
),
/* @__PURE__ */ P("div", { className: "relative", children: [
/* @__PURE__ */ P(
"button",
{
ref: k,
id: V,
type: "button",
disabled: u,
"aria-haspopup": "dialog",
"aria-expanded": $,
"aria-controls": $ ? A : void 0,
"aria-invalid": a ? !0 : void 0,
"aria-describedby": F,
onClick: () => E((M) => !M),
className: m(
"flex w-full items-center gap-2 rounded-lg border bg-transparent text-left transition-colors",
"dark:bg-input/30",
a ? "border-destructive" : "border-input",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:border-ring",
u && "cursor-not-allowed opacity-50",
Qi[c] ?? Qi.md,
// Reserve room for the clear button.
f && K && "pr-9",
g
),
children: [
/* @__PURE__ */ d(
kl,
{
"aria-hidden": "true",
className: m("shrink-0 text-muted-foreground", v)
}
),
/* @__PURE__ */ d(
"span",
{
className: m(
"truncate",
R ? "text-foreground" : "text-muted-foreground",
N
),
children: R ?? r
}
)
]
}
),
f && K && !u && /* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": "Clear date",
onClick: () => I(null),
className: m(
"absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
x
),
children: /* @__PURE__ */ d(Je, { "aria-hidden": "true", className: m("h-3.5 w-3.5", w) })
}
)
] }),
$ && /* @__PURE__ */ d(
"div",
{
id: A,
role: "dialog",
"aria-label": "Choose date",
className: m(
"absolute left-0 z-50 mt-2 rounded-xl border border-border bg-popover p-3 shadow-xl",
"animate-in fade-in",
T
),
children: /* @__PURE__ */ d(
tl,
{
...h,
value: K,
onChange: (M) => {
I(M), E(!1);
}
}
)
}
),
(l || a) && /* @__PURE__ */ d(
"p",
{
id: F,
role: a ? "alert" : void 0,
className: m(
"mt-1.5 text-xs font-medium",
a ? "text-destructive" : "text-muted-foreground",
D
),
children: a || l
}
)
] });
}
);
_m.displayName = "DatePicker";
const zm = Y(
function({
children: t,
defaultIndex: n = 0,
onIndexChange: s,
autoPlay: r = 0,
loop: o = !0,
showArrows: i = !0,
showDots: a = !0,
label: l = "Carousel",
className: c,
trackClassName: u,
slidesClassName: f,
slideClassName: h,
arrowClassName: p,
prevArrowClassName: g,
nextArrowClassName: y,
arrowIconClassName: b,
dotsClassName: v,
dotClassName: N,
...x
}, w) {
const T = ie.Children.toArray(t), D = T.length, [k, S] = H(
() => Math.min(Math.max(n, 0), Math.max(D - 1, 0))
), [V, A] = H(!1), F = G(null), L = (E) => {
let C = E;
o ? C = (E + D) % D : C = Math.min(Math.max(E, 0), D - 1), S(C), s?.(C);
};
if (ee(() => {
if (!r || V || D <= 1) return;
const E = setInterval(() => {
S((C) => {
const B = o ? (C + 1) % D : Math.min(C + 1, D - 1);
return s?.(B), B;
});
}, r);
return () => clearInterval(E);
}, [r, V, D, o]), D === 0) return null;
const $ = m(
"absolute top-1/2 z-10 -translate-y-1/2 rounded-full border border-border bg-background/80 p-2",
"text-foreground backdrop-blur transition-colors hover:bg-accent",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
"disabled:pointer-events-none disabled:opacity-40",
p
);
return /* @__PURE__ */ P(
"div",
{
ref: w,
role: "region",
"aria-roledescription": "carousel",
"aria-label": l,
onMouseEnter: () => A(!0),
onMouseLeave: () => A(!1),
onFocus: () => A(!0),
onBlur: () => A(!1),
onKeyDown: (E) => {
E.key === "ArrowLeft" ? (E.preventDefault(), L(k - 1)) : E.key === "ArrowRight" && (E.preventDefault(), L(k + 1));
},
className: m("relative w-full", c),
...x,
children: [
/* @__PURE__ */ d(
"div",
{
className: m("overflow-hidden rounded-xl", u),
onTouchStart: (E) => {
F.current = E.touches[0].clientX;
},
onTouchEnd: (E) => {
if (F.current === null) return;
const C = E.changedTouches[0].clientX - F.current;
F.current = null, Math.abs(C) > 40 && L(C < 0 ? k + 1 : k - 1);
},
children: /* @__PURE__ */ d(
"div",
{
className: m(
"flex transition-transform duration-300 ease-out motion-reduce:transition-none",
f
),
style: { transform: `translateX(-${k * 100}%)` },
children: T.map((E, C) => /* @__PURE__ */ d(
"div",
{
role: "group",
"aria-roledescription": "slide",
"aria-label": `Slide ${C + 1} of ${D}`,
"aria-hidden": C !== k,
inert: C !== k ? !0 : void 0,
className: m("w-full shrink-0", h),
children: E
},
C
))
}
)
}
),
i && D > 1 && /* @__PURE__ */ P(Te, { children: [
/* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": "Previous slide",
disabled: !o && k === 0,
onClick: () => L(k - 1),
className: m($, "left-3", g),
children: /* @__PURE__ */ d(
Cs,
{
"aria-hidden": "true",
className: m("h-4 w-4", b)
}
)
}
),
/* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": "Next slide",
disabled: !o && k === D - 1,
onClick: () => L(k + 1),
className: m($, "right-3", y),
children: /* @__PURE__ */ d(
Tt,
{
"aria-hidden": "true",
className: m("h-4 w-4", b)
}
)
}
)
] }),
a && D > 1 && /* @__PURE__ */ d("div", { className: m("mt-3 flex justify-center gap-1.5", v), children: T.map((E, C) => /* @__PURE__ */ d(
"button",
{
type: "button",
"aria-label": `Go to slide ${C + 1}`,
"aria-current": C === k ? "true" : void 0,
onClick: () => L(C),
className: m(
"h-2 rounded-full transition-all",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
C === k ? "w-5 bg-primary" : "w-2 bg-muted-foreground/40 hover:bg-muted-foreground/70",
N
)
},
C
)) })
]
}
);
}
);
zm.displayName = "Carousel";
export {
Jh as Accordion,
qm as Avatar,
$m as AvatarGroup,
Ol as Badge,
Tm as Breadcrumb,
Sn as Button,
tl as Calendar,
Bm as Callout,
lm as Card,
um as CardBody,
dm as CardFooter,
cm as CardHeader,
zm as Carousel,
tp as Checkbox,
mm as Chip,
Il as Container,
Om as CopyButton,
_m as DatePicker,
hm as Divider,
tm as Drawer,
ip as DrawerBody,
cp as DrawerButton,
rp as DrawerContent,
ap as DrawerFooter,
op as DrawerHeader,
lp as DrawerTriggerButton,
Hh as Dropdown,
vm as EmptyState,
Lm as FileUpload,
El as Image,
up as Input,
pm as Kbd,
Zm as List,
lo as ListItem,
im as Modal,
hp as ModalBody,
pp as ModalButton,
dp as ModalContent,
mp as ModalFooter,
fp as ModalHeader,
gp as ModalTriggerButton,
Em as NumberInput,
Cm as Pagination,
Im as PinInput,
Dm as Popover,
bm as Progress,
np as RadioGroup,
Mm as Rating,
nm as Select,
gm as Skeleton,
Am as Slider,
ym as Spinner,
xm as Stat,
km as Stepper,
sp as Switch,
xp as TBody,
Np as TD,
wp as TH,
bp as THead,
vp as TRow,
Cp as Tab,
Sp as TabList,
Pp as TabPanel,
kp as TabPanels,
yp as Table,
Tp as Tabs,
Vm as TagInput,
Xm as Text,
rm as Textarea,
Dp as ThemeToggleButton,
Nm as Timeline,
ep as ToastProvider,
Fm as Toggle,
jm as ToggleGroup,
Pm as Tooltip,
m as cn,
Yh as toast,
Qm as useToast
};
//# sourceMappingURL=index.es.js.map