welcome-ui
Version:
Customizable design system with react • styled-components • styled-system and ariakit.
776 lines (772 loc) • 23.1 kB
JavaScript
"use client";
import { j as C } from "./jsx-runtime-Bqq1Hxg9.mjs";
import Q, { th as U, css as Le, useTheme as $e } from "@xstyled/styled-components";
import { forwardRef as X } from "./System.mjs";
import { h as ie, j as je, C as he, a as ge, u as Ve } from "./P2CTZE2T-1n7Xlf8m.mjs";
import { e as Re, f as Be, c as Ke, d as ze, g as We, h as Ze } from "./BYC7LY2E-TZjhdRy3.mjs";
import { c as D, _ as O, i as B, a6 as Ue, u as ae, b as j, a8 as Z, U as qe, d as E, e as ne, g as b, y as we, Y as Ge, Z as Qe, v as Me, f as k, h as F, H as xe, Q as Xe, p as Ye, o as Je, aa as et, t as Se, z as tt, A as G, B as W, C as $, a2 as rt, G as nt, w as Ce, D as ye, ab as ot, X as st, l as at, ac as Ee, s as ut, ad as it, ae as ct } from "./LVA2YJMS-B8X1PCyC.mjs";
import { useCallback as lt, useRef as ce, createContext as Pe, useState as Oe, useEffect as Ae, createRef as dt, useMemo as ft } from "react";
import { u as pt, b as mt } from "./QYJ6MIDR-CpwIyzxN.mjs";
import { m as vt, o as bt, p as ht, t as gt, c as wt, s as me, d as ve, a as Mt, b as xt, u as V } from "./YV4JVR4I-BLeUul5N.mjs";
import { c as St, u as Ct, a as yt } from "./ITI7HKP4-DKM_MiJK.mjs";
import { i as Et } from "./VGCJ63VH-C4H4_vtu.mjs";
import { c as Pt, R as Ot } from "./JC64G2H7-ifBZq_RU.mjs";
import { a as At } from "./VEVQD5MH-BSxDdMFG.mjs";
var Tt = "div";
function Te(r) {
const t = r.relatedTarget;
return (t == null ? void 0 : t.nodeType) === Node.ELEMENT_NODE ? t : null;
}
function It(r) {
const t = Te(r);
return t ? Ge(r.currentTarget, t) : !1;
}
var ue = Symbol("composite-hover");
function Ht(r) {
let t = Te(r);
if (!t) return !1;
do {
if (Qe(t, ue) && t[ue]) return !0;
t = t.parentElement;
} while (t);
return !1;
}
var Ie = D(
function(t) {
var n = t, {
store: e,
focusOnHover: s = !0,
blurOnHoverEnd: u = !!s
} = n, a = O(n, [
"store",
"focusOnHover",
"blurOnHoverEnd"
]);
const o = ie();
e = e || o, B(
e,
process.env.NODE_ENV !== "production" && "CompositeHover must be wrapped in a Composite component."
);
const c = Ue(), l = a.onMouseMove, i = ae(s), w = j((f) => {
if (l == null || l(f), !f.defaultPrevented && c() && i(f)) {
if (!Z(f.currentTarget)) {
const M = e == null ? void 0 : e.getState().baseElement;
M && !qe(M) && M.focus();
}
e == null || e.setActiveId(f.currentTarget.id);
}
}), m = a.onMouseLeave, d = ae(u), S = j((f) => {
var M;
m == null || m(f), !f.defaultPrevented && c() && (It(f) || Ht(f) || i(f) && d(f) && (e == null || e.setActiveId(null), (M = e == null ? void 0 : e.getState().baseElement) == null || M.focus()));
}), p = lt((f) => {
f && (f[ue] = !0);
}, []);
return a = E(b({}, a), {
ref: ne(p, a.ref),
onMouseMove: w,
onMouseLeave: S
}), we(a);
}
);
Me(
k(function(t) {
const n = Ie(t);
return F(Tt, n);
})
);
var _t = "hr", He = D(
function(t) {
var n = t, { orientation: e = "horizontal" } = n, s = O(n, ["orientation"]);
return s = b({
role: "separator",
"aria-orientation": e
}, s), s;
}
);
k(function(t) {
const n = He(t);
return F(_t, n);
});
var Dt = "hr", _e = D(function(t) {
var n = t, { store: e } = n, s = O(n, ["store"]);
const u = ie();
e = e || u, B(
e,
process.env.NODE_ENV !== "production" && "CompositeSeparator must be wrapped in a Composite component."
);
const a = e.useState(
(o) => o.orientation === "horizontal" ? "vertical" : "horizontal"
);
return s = He(E(b({}, s), { orientation: a })), s;
});
k(function(t) {
const n = _e(t);
return F(Dt, n);
});
var kt = "div", N = "";
function se() {
N = "";
}
function Ft(r) {
const t = r.target;
return t && Ye(t) ? !1 : r.key === " " && N.length ? !0 : r.key.length === 1 && !r.ctrlKey && !r.altKey && !r.metaKey && /^[\p{Letter}\p{Number}]$/u.test(r.key);
}
function Nt(r, t) {
if (Je(r)) return !0;
const n = r.target;
return n ? t.some((s) => s.element === n) : !1;
}
function Lt(r) {
return r.filter((t) => !t.disabled);
}
function re(r, t) {
var n;
const e = ((n = r.element) == null ? void 0 : n.textContent) || r.children || // The composite item object itself doesn't include a value property, but
// other components like Select do. Since CompositeTypeahead is a generic
// component that can be used with those as well, we also consider the value
// property as a fallback for the typeahead text content.
"value" in r && r.value;
return e ? et(e).trim().toLowerCase().startsWith(t.toLowerCase()) : !1;
}
function $t(r, t, n) {
if (!n) return r;
const e = r.find((s) => s.id === n);
return !e || !re(e, t) || N !== t && re(e, N) ? r : (N = t, je(
r.filter((s) => re(s, N)),
n
).filter((s) => s.id !== n));
}
var le = D(function(t) {
var n = t, { store: e, typeahead: s = !0 } = n, u = O(n, ["store", "typeahead"]);
const a = ie();
e = e || a, B(
e,
process.env.NODE_ENV !== "production" && "CompositeTypeahead must be a Composite component"
);
const o = u.onKeyDownCapture, c = ce(0), l = j((i) => {
if (o == null || o(i), i.defaultPrevented || !s || !e) return;
if (!Ft(i))
return se();
const { renderedItems: w, items: m, activeId: d, id: S } = e.getState();
let p = Lt(
m.length > w.length ? m : w
);
const f = xe(i.currentTarget), M = `[data-offscreen-id="${S}"]`, v = f.querySelectorAll(M);
for (const x of v) {
const H = x.ariaDisabled === "true" || "disabled" in x && !!x.disabled;
p.push({ id: x.id, element: x, disabled: H });
}
if (v.length && (p = Xe(p, (x) => x.element)), !Nt(i, p)) return se();
i.preventDefault(), window.clearTimeout(c.current), c.current = window.setTimeout(() => {
N = "";
}, 500);
const A = i.key.toLowerCase();
N += A, p = $t(p, A, d);
const P = p.find((x) => re(x, N));
P ? e.move(P.id) : se();
});
return u = E(b({}, u), {
onKeyDownCapture: l
}), we(u);
});
k(function(t) {
const n = le(t);
return F(kt, n);
});
var De = Se(
[ge],
[he]
), jt = De.useContext, Vt = De.useScopedContext;
Pe(
void 0
);
var Y = Se(
[ge, Be],
[he, Re]
), de = Y.useContext, Rt = Y.useScopedContext, oe = Y.useProviderContext, Bt = Y.ContextProvider, Kt = Y.ScopedContextProvider;
Pe(
void 0
);
function zt(r = {}) {
var t = r, {
combobox: n,
parent: e,
menubar: s
} = t, u = tt(t, [
"combobox",
"parent",
"menubar"
]);
const a = !!s && !e, o = vt(
u.store,
ht(e, ["values"]),
bt(n, [
"arrowElement",
"anchorElement",
"contentElement",
"popoverElement",
"disclosureElement"
])
);
gt(u, o);
const c = o.getState(), l = St(G($({}, u), {
store: o,
orientation: W(
u.orientation,
c.orientation,
"vertical"
)
})), i = Ke(G($({}, u), {
store: o,
placement: W(
u.placement,
c.placement,
"bottom-start"
),
timeout: W(
u.timeout,
c.timeout,
a ? 0 : 150
),
hideTimeout: W(u.hideTimeout, c.hideTimeout, 0)
})), w = G($($({}, l.getState()), i.getState()), {
initialFocus: W(c.initialFocus, "container"),
values: W(
u.values,
c.values,
u.defaultValues,
{}
)
}), m = wt(w, l, i, o);
return me(
m,
() => ve(m, ["mounted"], (d) => {
d.mounted || m.setState("activeId", null);
})
), me(
m,
() => ve(e, ["orientation"], (d) => {
m.setState(
"placement",
d.orientation === "vertical" ? "right-start" : "bottom-start"
);
})
), G($($($({}, l), i), m), {
combobox: n,
parent: e,
menubar: s,
hideAll: () => {
i.hide(), e == null || e.hideAll();
},
setInitialFocus: (d) => m.setState("initialFocus", d),
setValues: (d) => m.setState("values", d),
setValue: (d, S) => {
d !== "__proto__" && d !== "constructor" && (Array.isArray(d) || m.setState("values", (p) => {
const f = p[d], M = rt(S, f);
return M === f ? p : G($({}, p), {
[d]: M !== void 0 && M
});
}));
}
});
}
function Wt(r, t, n) {
return nt(t, [n.combobox, n.parent, n.menubar]), xt(r, n, "values", "setValues"), Object.assign(
ze(
Ct(r, t, n),
t,
n
),
{
combobox: n.combobox,
parent: n.parent,
menubar: n.menubar
}
);
}
function Zt(r = {}) {
const t = de(), n = jt(), e = At();
r = E(b({}, r), {
parent: r.parent !== void 0 ? r.parent : t,
menubar: r.menubar !== void 0 ? r.menubar : n,
combobox: r.combobox !== void 0 ? r.combobox : e
});
const [s, u] = Mt(zt, r);
return Wt(s, u, r);
}
var Ut = "div";
function qt(r) {
var t = r, { store: n } = t, e = O(t, ["store"]);
const [s, u] = Oe(void 0), a = e["aria-label"], o = V(n, "disclosureElement"), c = V(n, "contentElement");
return Ae(() => {
const l = o;
if (!l) return;
const i = c;
if (!i) return;
a || i.hasAttribute("aria-label") ? u(void 0) : l.id && u(l.id);
}, [a, o, c]), s;
}
var ke = D(
function(t) {
var n = t, { store: e, alwaysVisible: s, composite: u } = n, a = O(n, ["store", "alwaysVisible", "composite"]);
const o = oe();
e = e || o, B(
e,
process.env.NODE_ENV !== "production" && "MenuList must receive a `store` prop or be wrapped in a MenuProvider component."
);
const c = e.parent, l = e.menubar, i = !!c, w = Ce(a.id), m = a.onKeyDown, d = e.useState(
(g) => g.placement.split("-")[0]
), S = e.useState(
(g) => g.orientation === "both" ? void 0 : g.orientation
), p = S !== "vertical", f = V(
l,
(g) => !!g && g.orientation !== "vertical"
), M = j((g) => {
if (m == null || m(g), !g.defaultPrevented) {
if (i || l && !p) {
const T = {
ArrowRight: () => d === "left" && !p,
ArrowLeft: () => d === "right" && !p,
ArrowUp: () => d === "bottom" && p,
ArrowDown: () => d === "top" && p
}[g.key];
if (T != null && T())
return g.stopPropagation(), g.preventDefault(), e == null ? void 0 : e.hide();
}
if (l) {
const T = {
ArrowRight: () => {
if (f)
return l.next();
},
ArrowLeft: () => {
if (f)
return l.previous();
},
ArrowDown: () => {
if (!f)
return l.next();
},
ArrowUp: () => {
if (!f)
return l.previous();
}
}[g.key], L = T == null ? void 0 : T();
L !== void 0 && (g.stopPropagation(), g.preventDefault(), l.move(L));
}
}
});
a = ye(
a,
(g) => /* @__PURE__ */ C.jsx(Kt, { value: e, children: g }),
[e]
);
const v = qt(b({ store: e }, a)), A = e.useState("mounted"), P = Et(A, a.hidden, s), x = P ? E(b({}, a.style), { display: "none" }) : a.style;
a = E(b({
id: w,
"aria-labelledby": v,
hidden: P
}, a), {
ref: ne(w ? e.setContentElement : null, a.ref),
style: x,
onKeyDown: M
});
const H = !!e.combobox;
return u = u ?? !H, u && (a = b({
role: "menu",
"aria-orientation": S
}, a)), a = yt(b({ store: e, composite: u }, a)), a = le(b({ store: e, typeahead: !H }, a)), a;
}
);
k(function(t) {
const n = ke(t);
return F(Ut, n);
});
var Gt = "div", Qt = D(function(t) {
var n = t, {
store: e,
modal: s = !1,
portal: u = !!s,
hideOnEscape: a = !0,
autoFocusOnShow: o = !0,
hideOnHoverOutside: c,
alwaysVisible: l
} = n, i = O(n, [
"store",
"modal",
"portal",
"hideOnEscape",
"autoFocusOnShow",
"hideOnHoverOutside",
"alwaysVisible"
]);
const w = oe();
e = e || w, B(
e,
process.env.NODE_ENV !== "production" && "Menu must receive a `store` prop or be wrapped in a MenuProvider component."
);
const m = ce(null), d = e.parent, S = e.menubar, p = !!d, f = !!S && !p;
i = E(b({}, i), {
ref: ne(m, i.ref)
});
const M = ke(b({
store: e,
alwaysVisible: l
}, i)), { "aria-labelledby": v } = M;
i = O(M, ["aria-labelledby"]);
const [P, x] = Oe(), H = e.useState("autoFocusOnShow"), g = e.useState("initialFocus"), K = e.useState("baseElement"), T = e.useState("renderedItems");
Ae(() => {
let _ = !1;
return x((y) => {
var ee, fe, pe;
if (_ || !H) return;
if ((ee = y == null ? void 0 : y.current) != null && ee.isConnected) return y;
const te = dt();
switch (g) {
case "first":
te.current = ((fe = T.find((q) => !q.disabled && q.element)) == null ? void 0 : fe.element) || null;
break;
case "last":
te.current = ((pe = [...T].reverse().find((q) => !q.disabled && q.element)) == null ? void 0 : pe.element) || null;
break;
default:
te.current = K;
}
return te;
}), () => {
_ = !0;
};
}, [e, H, g, T, K]);
const L = p ? !1 : s, h = !!o, I = !!P || !!i.initialFocus || !!L, z = V(
e.combobox || e,
"contentElement"
), R = V(
(d == null ? void 0 : d.combobox) || d,
"contentElement"
), J = ft(() => {
if (!R || !z) return;
const _ = z.getAttribute("role"), y = R.getAttribute("role");
if (!((y === "menu" || y === "menubar") && _ === "menu"))
return R;
}, [z, R]);
return J !== void 0 && (i = b({
preserveTabOrderAnchor: J
}, i)), i = We(E(b({
store: e,
alwaysVisible: l,
initialFocus: P,
autoFocusOnShow: h ? I && o : H || !!L
}, i), {
hideOnEscape(_) {
return st(a, _) ? !1 : (e == null || e.hideAll(), !0);
},
hideOnHoverOutside(_) {
const y = e == null ? void 0 : e.getState().disclosureElement;
return (typeof c == "function" ? c(_) : c ?? (p ? !0 : f ? y ? !Z(y) : !0 : !1)) ? _.defaultPrevented || !p || !y || (ot(y, "mouseout", _), !Z(y)) ? !0 : (requestAnimationFrame(() => {
Z(y) || e == null || e.hide();
}), !1) : !1;
},
modal: L,
portal: u,
backdrop: p ? !1 : i.backdrop
})), i = b({
"aria-labelledby": v
}, i), i;
}), Xt = Pt(
k(function(t) {
const n = Qt(t);
return F(Gt, n);
}),
oe
), Yt = "div", Jt = D(
function(t) {
var n = t, { store: e } = n, s = O(n, ["store"]);
const u = de();
return e = e || u, pt(b({ store: e }, s));
}
), er = k(function(t) {
const n = Jt(t);
return F(Yt, n);
}), tr = "button";
function rr(r, t) {
return {
ArrowDown: t === "bottom" || t === "top" ? "first" : !1,
ArrowUp: t === "bottom" || t === "top" ? "last" : !1,
ArrowRight: t === "right" ? "first" : !1,
ArrowLeft: t === "left" ? "first" : !1
}[r.key];
}
function be(r, t) {
return !!(r != null && r.some((n) => !n.element || n.element === t ? !1 : n.element.getAttribute("aria-expanded") === "true"));
}
var nr = D(
function(t) {
var n = t, {
store: e,
focusable: s,
accessibleWhenDisabled: u,
showOnHover: a
} = n, o = O(n, [
"store",
"focusable",
"accessibleWhenDisabled",
"showOnHover"
]);
const c = oe();
e = e || c, B(
e,
process.env.NODE_ENV !== "production" && "MenuButton must receive a `store` prop or be wrapped in a MenuProvider component."
);
const l = ce(null), i = e.parent, w = e.menubar, m = !!i, d = !!w && !m, S = at(o), p = () => {
const h = l.current;
h && (e == null || e.setDisclosureElement(h), e == null || e.setAnchorElement(h), e == null || e.show());
}, f = o.onFocus, M = j((h) => {
if (f == null || f(h), S || h.defaultPrevented || (e == null || e.setAutoFocusOnShow(!1), e == null || e.setActiveId(null), !w) || !d) return;
const { items: I } = w.getState();
be(I, h.currentTarget) && p();
}), v = V(
e,
(h) => h.placement.split("-")[0]
), A = o.onKeyDown, P = j((h) => {
if (A == null || A(h), S || h.defaultPrevented) return;
const I = rr(h, v);
I && (h.preventDefault(), p(), e == null || e.setAutoFocusOnShow(!0), e == null || e.setInitialFocus(I));
}), x = o.onClick, H = j((h) => {
if (x == null || x(h), h.defaultPrevented || !e) return;
const I = !h.detail, { open: z } = e.getState();
(!z || I) && ((!m || I) && e.setAutoFocusOnShow(!0), e.setInitialFocus(I ? "first" : "container")), m && p();
});
o = ye(
o,
(h) => /* @__PURE__ */ C.jsx(Bt, { value: e, children: h }),
[e]
), m && (o = E(b({}, o), {
render: /* @__PURE__ */ C.jsx(Ot.div, { render: o.render })
}));
const g = Ce(o.id), K = V(
(i == null ? void 0 : i.combobox) || i,
"contentElement"
), T = m || d ? Ee(K, "menuitem") : void 0, L = e.useState("contentElement");
return o = E(b({
id: g,
role: T,
"aria-haspopup": ut(L, "menu")
}, o), {
ref: ne(l, o.ref),
onFocus: M,
onKeyDown: P,
onClick: H
}), o = Ze(E(b({
store: e,
focusable: s,
accessibleWhenDisabled: u
}, o), {
showOnHover: (h) => {
if (!(() => {
if (typeof a == "function") return a(h);
if (a != null) return a;
if (m) return !0;
if (!w) return !1;
const { items: J } = w.getState();
return d && be(J);
})()) return !1;
const R = d ? w : i;
return R && R.setActiveId(h.currentTarget.id), !0;
}
})), o = mt(b({
store: e,
toggleOnClick: !m,
focusable: s,
accessibleWhenDisabled: u
}, o)), o = le(b({
store: e,
typeahead: d
}, o)), o;
}
), or = k(function(t) {
const n = nr(t);
return F(tr, n);
}), sr = "div";
function ar(r, t, n) {
var e;
if (!r) return !1;
if (Z(r)) return !0;
const s = t == null ? void 0 : t.find((c) => {
var l;
return c.element === n ? !1 : ((l = c.element) == null ? void 0 : l.getAttribute("aria-expanded")) === "true";
}), u = (e = s == null ? void 0 : s.element) == null ? void 0 : e.getAttribute("aria-controls");
if (!u) return !1;
const o = xe(r).getElementById(u);
return o ? Z(o) ? !0 : !!o.querySelector("[role=menuitem][aria-expanded=true]") : !1;
}
var ur = D(
function(t) {
var n = t, {
store: e,
hideOnClick: s = !0,
preventScrollOnKeyDown: u = !0,
focusOnHover: a,
blurOnHoverEnd: o
} = n, c = O(n, [
"store",
"hideOnClick",
"preventScrollOnKeyDown",
"focusOnHover",
"blurOnHoverEnd"
]);
const l = Rt(!0), i = Vt();
e = e || l || i, B(
e,
process.env.NODE_ENV !== "production" && "MenuItem must be wrapped in a MenuList, Menu or Menubar component"
);
const w = c.onClick, m = ae(s), d = "hideAll" in e ? e.hideAll : void 0, S = !!d, p = j((v) => {
w == null || w(v), !(v.defaultPrevented || it(v) || ct(v) || !d || v.currentTarget.getAttribute("aria-haspopup") === "menu") && m(v) && d();
}), f = V(
e,
(v) => "contentElement" in v ? v.contentElement : null
), M = Ee(f, "menuitem");
return c = E(b({
role: M
}, c), {
onClick: p
}), c = Ve(b({
store: e,
preventScrollOnKeyDown: u
}, c)), c = Ie(E(b({
store: e
}, c), {
focusOnHover(v) {
const A = () => typeof a == "function" ? a(v) : a ?? !0;
if (!e || !A()) return !1;
const { baseElement: P, items: x } = e.getState();
return S ? (v.currentTarget.hasAttribute("aria-expanded") && v.currentTarget.focus(), !0) : ar(P, x, v.currentTarget) ? (v.currentTarget.focus(), !0) : !1;
},
blurOnHoverEnd(v) {
return typeof o == "function" ? o(v) : o ?? S;
}
})), c;
}
), ir = Me(
k(function(t) {
const n = ur(t);
return F(sr, n);
})
), cr = "hr", lr = D(
function(t) {
var n = t, { store: e } = n, s = O(n, ["store"]);
const u = de();
return e = e || u, s = _e(b({ store: e }, s)), s;
}
), dr = k(function(t) {
const n = lr(t);
return F(cr, n);
});
const fr = Q.divBox`
display: flex;
z-index: 2;
color: ${U("defaultCards.backgroundColor")};
stroke-width: 0 !important;
#stroke {
color: ${U("defaultCards.borderColor")};
}
`, pr = Q.svgBox(
({ $transform: r }) => Le`
transform: ${r};
`
), mr = {
bottom: "rotateZ(360deg)",
left: "rotateZ(90deg)",
right: "rotateZ(-90deg)",
top: "rotateZ(180deg)"
}, Fe = X(({ store: r }, t) => {
const n = r == null ? void 0 : r.useState("currentPlacement"), [e] = n.split("-");
return /* @__PURE__ */ C.jsx(er, { ref: t, render: /* @__PURE__ */ C.jsx(fr, {}), children: /* @__PURE__ */ C.jsxs(
pr,
{
$transform: mr[e],
h: 30,
viewBox: "0 0 30 30",
w: 30,
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ C.jsx("path", { d: "M7 30L15 22L23 30H7Z", fill: "currentColor", fillRule: "nonzero", id: "stroke" }),
/* @__PURE__ */ C.jsx("path", { d: "M8 30L15 23L22 30H8Z", fill: "currentColor", fillRule: "nonzero" })
]
}
) });
});
Fe.displayName = "Arrow";
const vr = Q.buttonBox`
${U("dropdownMenu.item")};
display: flex;
align-items: center;
width: 100%;
border: 0;
appearance: none;
cursor: pointer;
transition: medium;
text-decoration: none;
padding: md;
&:focus {
outline: none !important; /* important for firefox */
}
`, Ne = X(({ as: r, ...t }, n) => /* @__PURE__ */ C.jsx(ir, { ref: n, type: "button", ...t, render: /* @__PURE__ */ C.jsx(vr, { as: r }) }));
Ne.displayName = "Item";
const br = Q.hr`
${U("dropdownMenu.separator")};
border: 0;
height: 1px;
margin: 0;
`, hr = X((r, t) => /* @__PURE__ */ C.jsx(dr, { ref: t, render: /* @__PURE__ */ C.jsx(br, {}), ...r })), gr = Q.divBox`
${U("cards.default")};
${U("dropdownMenu.inner")};
z-index: 1;
opacity: 0;
transition: opacity 150ms ease-in-out;
&[data-enter] {
opacity: 1;
}
`, wr = X(
({ children: r, dataTestId: t, gutter: n = "xs", innerProps: e = {}, store: s, ...u }, a) => {
const o = $e(), c = s.useState("arrowElement");
let l = n;
return typeof l == "string" && (l = parseInt(o.toPx(parseFloat(o.space[n])), 10) || 0), c && (l = 0), /* @__PURE__ */ C.jsx(
Xt,
{
"aria-label": "dropdown-menu",
"data-testid": t,
gutter: l,
ref: a,
render: /* @__PURE__ */ C.jsx(gr, { ...e }),
store: s,
tabIndex: 0,
...u,
children: r
}
);
}
);
function kr(r = {}) {
return Zt({
animated: !0,
...r
});
}
const Mr = X(({ as: r, store: t, ...n }, e) => /* @__PURE__ */ C.jsx(
or,
{
ref: e,
render: r ? (s) => /* @__PURE__ */ C.jsx(r, { ...s }) : void 0,
store: t,
...n
}
)), Fr = Object.assign(wr, {
Arrow: Fe,
Item: Ne,
Separator: hr,
Trigger: Mr
});
export {
Fr as DropdownMenu,
kr as useDropdownMenu
};