@jfrader/ui 0.5.1 → 0.7.0

package/dist/{multi-select-DG1BCFX7.js → multi-select-B3puEVo0.js}

@@ -1,15 +1,16 @@
 'use client';
-import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
-import { n as r, r as i } from "./media-8yrN85VT.js";
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
 import { t as a } from "./use-controlled-state-DpeVQZNR.js";
-import { t as o } from "./visually-hidden-BJdvqqvn.js";
+import { t as o } from "./visually-hidden-DgVO3NaB.js";
 import { t as s } from "./renderable-DzcIj1Lo.js";
-import { t as c } from "./trigger-style-B1KVC8O1.js";
+import { t as c } from "./trigger-style-CtOrdPk4.js";
 import { t as l } from "./overlay-layer-qEbpEtb8.js";
-import { a as u, i as d, n as f, o as p, r as m, s as h, t as g } from "./listbox-style-WX-RASp1.js";
-import { a as _, r as v, t as y } from "./collection-registry-k6JcD3Jr.js";
-import { t as b } from "./overlay-portal-C4JZFq2M.js";
-import { t as x } from "./use-overlay-floating-Bx2jBKAA.js";
+import { a as u, i as d, n as f, o as p, r as m, s as h, t as g } from "./listbox-style-DNOxAulu.js";
+import { t as _ } from "./overlay-portal-C9igMHnC.js";
+import { t as v } from "./use-overlay-floating-Bx2jBKAA.js";
+import { a as y, r as b, t as x } from "./collection-registry-k6JcD3Jr.js";
 import { createContext as S, useContext as C, useId as w, useLayoutEffect as T, useMemo as E, useRef as D, useState as O } from "react";
 import { vars as k } from "@jfrader/tokens/vars";
 import { Fragment as A, jsx as j, jsxs as M } from "@emotion/react/jsx-runtime";
@@ -40,7 +41,7 @@ var ae = [], oe = 500, se = t({
 	textOverflow: "ellipsis",
 	whiteSpace: "nowrap",
 	minInlineSize: 0,
-	[r]: { border: "1px solid CanvasText" }
+	[n]: { border: "1px solid CanvasText" }
 }), F = t({
 	fontFamily: k.font.sans,
 	fontSize: k.textSize.sm,
@@ -53,21 +54,21 @@ var ae = [], oe = 500, se = t({
 	maxInlineSize: "100vw",
 	borderColor: k.color.borderControl,
 	animation: `${I} ${k.motion.duration.base} ${k.motion.easeStandard}`,
-	[i]: { animation: "none" },
-	[r]: {
+	[r]: { animation: "none" },
+	[n]: {
 		borderColor: "CanvasText",
 		backgroundColor: "Canvas",
 		color: "CanvasText"
 	}
 }), fe = t({
 	overflowWrap: "anywhere",
-	[r]: { "&[data-active]": { outlineColor: "Highlight" } }
+	[n]: { "&[data-active]": { outlineColor: "Highlight" } }
 }), L = t({
 	minBlockSize: k.space[6],
 	minInlineSize: k.space[6]
 });
 function pe({ value: e, defaultValue: t = ae, onValueChange: n, open: r, defaultOpen: i = !1, onOpenChange: o, disabled: s = !1, required: c = !1, locale: l, messages: u, placement: d = "bottom-start" }) {
-	let f = w(), [p, m] = O(`${f}-listbox`), [h, g] = O("ltr"), [v = ae, y] = a(e, t, (e) => n?.([...e])), b = E(() => [...new Set(v)], [v]), [S = !1, C] = a(r, i, o), [k, A] = _(), [j, M] = O(null), [ee, N] = O(null), [oe, se] = O(), [ce, le] = O(), [P, F] = O(), [ue, I] = O(!1), [de, fe] = O({
+	let f = w(), [p, m] = O(`${f}-listbox`), [h, g] = O("ltr"), [_ = ae, b] = a(e, t, (e) => n?.([...e])), x = E(() => [...new Set(_)], [_]), [S = !1, C] = a(r, i, o), [k, A] = y(), [j, M] = O(null), [ee, N] = O(null), [oe, se] = O(), [ce, le] = O(), [P, F] = O(), [ue, I] = O(!1), [de, fe] = O({
 		width: 0,
 		height: 0
 	}), L = D([]), pe = D([]), R = D(null), z = D(null), B = D({
@@ -93,7 +94,7 @@ function pe({ value: e, defaultValue: t = ae, onValueChange: n, open: r, default
 		return k.forEach((t, n) => {
 			t.index >= 0 && (e[t.index] = n);
 		}), e;
-	}, [k]), W = j === null ? void 0 : U[j], G = S && !s && W !== void 0 && !k.get(W)?.disabled ? k.get(W)?.id : void 0, K = b.map((e) => k.get(e)).find((e) => e && !e.disabled && e.index >= 0)?.index ?? null, q = x({
+	}, [k]), W = j === null ? void 0 : U[j], G = S && !s && W !== void 0 && !k.get(W)?.disabled ? k.get(W)?.id : void 0, K = x.map((e) => k.get(e)).find((e) => e && !e.disabled && e.index >= 0)?.index ?? null, q = v({
 		open: S,
 		placement: d,
 		onOpenChange: (e) => {
@@ -130,15 +131,15 @@ function pe({ value: e, defaultValue: t = ae, onValueChange: n, open: r, default
 		};
 	}, $ = (e) => {
 		let t = [...new Set(e)];
-		t.length === b.length && t.every((e, t) => e === b[t]) || y(t);
+		t.length === x.length && t.every((e, t) => e === x[t]) || b(t);
 	};
 	return T(() => {
 		let e = R.current;
-		e && e.setCustomValidity(c && !s && b.length === 0 ? H.required : "");
+		e && e.setCustomValidity(c && !s && x.length === 0 ? H.required : "");
 	}, [
 		c,
 		s,
-		b.length,
+		x.length,
 		H.required
 	]), T(() => {
 		let t = R.current?.form;
@@ -157,7 +158,7 @@ function pe({ value: e, defaultValue: t = ae, onValueChange: n, open: r, default
 		setListId: m,
 		direction: h,
 		setDirection: g,
-		selected: b,
+		selected: x,
 		open: S,
 		disabled: s,
 		required: c,
@@ -174,7 +175,7 @@ function pe({ value: e, defaultValue: t = ae, onValueChange: n, open: r, default
 		setDescriptionId: le,
 		errorId: P,
 		setErrorId: F,
-		invalid: c && !s && ue && b.length === 0,
+		invalid: c && !s && ue && x.length === 0,
 		setInvalidAttempt: I,
 		available: de,
 		elementsRef: L,
@@ -186,7 +187,7 @@ function pe({ value: e, defaultValue: t = ae, onValueChange: n, open: r, default
 		byIndex: U,
 		change: $,
 		toggle: (e) => {
-			s || k.get(e)?.disabled || $(b.includes(e) ? b.filter((t) => t !== e) : [...b, e]);
+			s || k.get(e)?.disabled || $(x.includes(e) ? x.filter((t) => t !== e) : [...x, e]);
 		},
 		requestOpen: C,
 		...q,
@@ -259,7 +260,7 @@ function U(e) {
 	return /* @__PURE__ */ j(l, { children: /* @__PURE__ */ j(H, { ...e }) });
 }
 U.displayName = "MultiSelect";
-function W({ ref: e, id: t, size: r = "md", disabled: i, onKeyDown: a, onKeyUp: o, onClick: s, onBlur: l, className: u, sx: d, ...f }) {
+function W({ ref: e, id: t, size: n = "md", disabled: r, onKeyDown: a, onKeyUp: o, onClick: s, onBlur: l, className: u, sx: d, ...f }) {
 	let p = B("Trigger"), m = N([p.refs.setReference, e]), h = t ?? `${p.baseId}-trigger`, g = V(f["aria-labelledby"], p.labelId), _ = f["aria-label"], v = D({
 		text: "",
 		time: 0
@@ -281,7 +282,7 @@ function W({ ref: e, id: t, size: r = "md", disabled: i, onKeyDown: a, onKeyUp:
 		p.setTriggerName
 	]);
 	let b = (e) => {
-		if (a?.(e), !(e.defaultPrevented || p.disabled || i || e.nativeEvent.isComposing)) {
+		if (a?.(e), !(e.defaultPrevented || p.disabled || r || e.nativeEvent.isComposing)) {
 			if (e.key === "Enter" || e.key === " ") {
 				if (e.preventDefault(), e.repeat || y.current) return;
 				if (y.current = !0, !p.open) p.requestOpen(!0);
@@ -306,25 +307,25 @@ function W({ ref: e, id: t, size: r = "md", disabled: i, onKeyDown: a, onKeyUp:
 			}
 		}
 	};
-	return /* @__PURE__ */ j(n, {
+	return /* @__PURE__ */ j(i, {
 		className: u,
 		styles: [
 			c,
 			se,
-			ce[r]
+			ce[n]
 		],
 		sx: d,
 		children: (e) => /* @__PURE__ */ j("button", {
 			...p.getReferenceProps({
 				...f,
 				id: h,
-				disabled: p.disabled || i,
+				disabled: p.disabled || r,
 				onKeyDown: b,
 				onKeyUp: (e) => {
 					o?.(e), (e.key === "Enter" || e.key === " ") && (y.current = !1), e.key === " " && e.preventDefault();
 				},
 				onClick: (e) => {
-					s?.(e), !e.defaultPrevented && !p.disabled && !i && p.requestOpen(!p.open);
+					s?.(e), !e.defaultPrevented && !p.disabled && !r && p.requestOpen(!p.open);
 				},
 				onBlur: (e) => {
 					y.current = !1, l?.(e);
@@ -348,33 +349,33 @@ function W({ ref: e, id: t, size: r = "md", disabled: i, onKeyDown: a, onKeyUp:
 	});
 }
 W.displayName = "MultiSelect.Trigger";
-function G({ ref: e, maxVisible: t = 2, placeholder: r, className: i, sx: a, ...o }) {
+function G({ ref: e, maxVisible: t = 2, placeholder: n, className: r, sx: a, ...o }) {
 	let s = B("Value");
 	if (!Number.isFinite(t) || !Number.isInteger(t) || t < 0) throw RangeError("MultiSelect.Value maxVisible must be a finite nonnegative integer.");
 	let c = s.selected.map((e) => s.options.get(e)?.label ?? e), l = Math.max(0, c.length - t);
-	return /* @__PURE__ */ j(n, {
-		className: i,
+	return /* @__PURE__ */ j(i, {
+		className: r,
 		styles: le,
 		sx: a,
-		children: (n) => /* @__PURE__ */ j("span", {
+		children: (r) => /* @__PURE__ */ j("span", {
 			...o,
 			ref: e,
 			"aria-hidden": "true",
 			"data-ui": "multi-select-value",
 			"data-placeholder": !c.length || void 0,
-			className: n,
+			className: r,
 			children: c.length ? /* @__PURE__ */ M(A, { children: [c.slice(0, t).map((e, t) => /* @__PURE__ */ j("span", {
 				css: P,
 				children: e
 			}, s.selected[t])), l > 0 && /* @__PURE__ */ M("span", {
 				css: P,
 				children: ["+", s.formatters.number.format(l)]
-			})] }) : r
+			})] }) : n
 		})
 	});
 }
 G.displayName = "MultiSelect.Value";
-function K({ ref: e, id: t, children: r, style: i, onMouseDown: a, className: o, sx: s, ...c }) {
+function K({ ref: e, id: t, children: n, style: r, onMouseDown: a, className: o, sx: s, ...c }) {
 	let l = B("Content"), u = t ?? `${l.baseId}-listbox`;
 	T(() => (l.setListId(u), () => l.setListId(`${l.baseId}-listbox`)), [
 		u,
@@ -385,7 +386,7 @@ function K({ ref: e, id: t, children: r, style: i, onMouseDown: a, className: o,
 		"aria-label": l.triggerName?.label,
 		"aria-labelledby": l.triggerName?.labelledBy ?? (l.triggerName?.label ? void 0 : l.triggerName?.id)
 	};
-	return /* @__PURE__ */ j(b, { children: /* @__PURE__ */ j(n, {
+	return /* @__PURE__ */ j(_, { children: /* @__PURE__ */ j(i, {
 		className: o,
 		styles: [
 			h,
@@ -410,7 +411,7 @@ function K({ ref: e, id: t, children: r, style: i, onMouseDown: a, className: o,
 			"data-ui": "multi-select-content",
 			className: e,
 			style: {
-				...i,
+				...r,
 				...l.floatingStyles,
 				inlineSize: l.refs.domReference.current?.getBoundingClientRect().width,
 				maxBlockSize: l.available.height || void 0,
@@ -420,23 +421,23 @@ function K({ ref: e, id: t, children: r, style: i, onMouseDown: a, className: o,
 				elementsRef: l.elementsRef,
 				children: /* @__PURE__ */ j(z.Provider, {
 					value: !0,
-					children: r
+					children: n
 				})
 			})
 		})
 	}) });
 }
 K.displayName = "MultiSelect.Content";
-function q({ ref: e, id: t, value: r, disabled: i = !1, textValue: a, onClick: o, children: s, className: c, sx: l, ...p }) {
+function q({ ref: e, id: t, value: n, disabled: r = !1, textValue: a, onClick: o, children: s, className: c, sx: l, ...p }) {
 	let h = B("Item");
 	if (!C(z)) throw Error("MultiSelect.Item must be rendered inside MultiSelect.Content.");
-	let _ = D(null), b = t ?? y(h.baseId, r), x = v(r, h.registration, _, (e, t) => ({
+	let _ = D(null), v = t ?? x(h.baseId, n), y = b(n, h.registration, _, (e, t) => ({
 		index: e,
 		label: a ?? t,
-		disabled: i,
-		id: b
-	})), S = N([x.ref, e]), w = h.selected.includes(r);
-	return /* @__PURE__ */ j(n, {
+		disabled: r,
+		id: v
+	})), S = N([y.ref, e]), w = h.selected.includes(n);
+	return /* @__PURE__ */ j(i, {
 		className: c,
 		styles: [
 			f,
@@ -449,15 +450,15 @@ function q({ ref: e, id: t, value: r, disabled: i = !1, textValue: a, onClick: o
 			...h.getItemProps({
 				...p,
 				onClick: (e) => {
-					o?.(e), e.defaultPrevented || h.toggle(r);
+					o?.(e), e.defaultPrevented || h.toggle(n);
 				}
 			}),
-			id: b,
+			id: v,
 			ref: S,
 			role: "option",
 			"aria-selected": w,
-			"aria-disabled": h.disabled || i || void 0,
-			"data-active": x.index >= 0 && h.activeIndex === x.index && !h.disabled || void 0,
+			"aria-disabled": h.disabled || r || void 0,
+			"data-active": y.index >= 0 && h.activeIndex === y.index && !h.disabled || void 0,
 			"data-ui": "multi-select-item",
 			className: e,
 			children: [/* @__PURE__ */ j("span", {
@@ -473,11 +474,11 @@ function q({ ref: e, id: t, value: r, disabled: i = !1, textValue: a, onClick: o
 	});
 }
 q.displayName = "MultiSelect.Item";
-function J({ ref: e, disabled: t, onClick: r, children: i, className: a, sx: o, ...s }) {
+function J({ ref: e, disabled: t, onClick: n, children: r, className: a, sx: o, ...s }) {
 	let l = B("Clear"), u = l.selected.filter((e) => l.options.get(e)?.disabled), d = D(null), [, f] = O(0), p = N([l.clearRef, e]);
 	return T(() => {
 		d.current && !l.open && d.current.length === l.selected.length && d.current.every((e, t) => e === l.selected[t]) && l.refs.domReference.current?.focus(), d.current = null;
-	}), /* @__PURE__ */ j(n, {
+	}), /* @__PURE__ */ j(i, {
 		className: a,
 		styles: [c, L],
 		sx: o,
@@ -490,23 +491,23 @@ function J({ ref: e, disabled: t, onClick: r, children: i, className: a, sx: o,
 			"data-ui": "multi-select-clear",
 			className: e,
 			onClick: (e) => {
-				r?.(e), !e.defaultPrevented && (d.current = u, l.change(u), l.requestOpen(!1), f((e) => e + 1));
+				n?.(e), !e.defaultPrevented && (d.current = u, l.change(u), l.requestOpen(!1), f((e) => e + 1));
 			},
-			children: i === void 0 ? "×" : i
+			children: r === void 0 ? "×" : r
 		})
 	});
 }
 J.displayName = "MultiSelect.Clear";
-function Y({ ref: e, id: t, children: r, className: i, sx: a, ...o }) {
-	let c = B("Label"), l = t ?? `${c.baseId}-label`, u = s(r);
+function Y({ ref: e, id: t, children: n, className: r, sx: a, ...o }) {
+	let c = B("Label"), l = t ?? `${c.baseId}-label`, u = s(n);
 	return T(() => {
 		if (u) return c.setLabelId(l), () => c.setLabelId(void 0);
 	}, [
 		l,
 		u,
 		c.setLabelId
-	]), u ? /* @__PURE__ */ j(n, {
-		className: i,
+	]), u ? /* @__PURE__ */ j(i, {
+		className: r,
 		styles: F,
 		sx: a,
 		children: (t) => /* @__PURE__ */ j("label", {
@@ -516,30 +517,30 @@ function Y({ ref: e, id: t, children: r, className: i, sx: a, ...o }) {
 			ref: e,
 			"data-ui": "multi-select-label",
 			className: t,
-			children: r
+			children: n
 		})
 	}) : null;
 }
 Y.displayName = "MultiSelect.Label";
-function X({ part: e, error: t = !1, ref: r, id: i, children: a, className: o, sx: c, ...l }) {
-	let u = B(e), d = i ?? `${u.baseId}-${e}`, f = s(a), p = t ? u.setErrorId : u.setDescriptionId;
+function X({ part: e, error: t = !1, ref: n, id: r, children: a, className: o, sx: c, ...l }) {
+	let u = B(e), d = r ?? `${u.baseId}-${e}`, f = s(a), p = t ? u.setErrorId : u.setDescriptionId;
 	return T(() => {
 		if (f) return p(d), () => p(void 0);
 	}, [
 		d,
 		f,
 		p
-	]), f ? /* @__PURE__ */ j(n, {
+	]), f ? /* @__PURE__ */ j(i, {
 		className: o,
 		styles: [F, t && ue],
 		sx: c,
-		children: (n) => /* @__PURE__ */ j("span", {
+		children: (r) => /* @__PURE__ */ j("span", {
 			...l,
-			ref: r,
+			ref: n,
 			id: d,
 			role: t ? "alert" : l.role,
 			"data-ui": `multi-select-${e}`,
-			className: n,
+			className: r,
 			children: a
 		})
 	}) : null;
@@ -559,14 +560,14 @@ function Q(e) {
 	});
 }
 Q.displayName = "MultiSelect.Error";
-function $({ ref: e, children: t, className: r, sx: i, ...a }) {
+function $({ ref: e, children: t, className: n, sx: r, ...a }) {
 	let c = B("Empty");
 	if (c.options.size) return null;
 	let l = t === void 0 ? c.messages.empty : t;
-	return s(l) ? /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(n, {
-		className: r,
+	return s(l) ? /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(i, {
+		className: n,
 		styles: F,
-		sx: i,
+		sx: r,
 		children: (t) => /* @__PURE__ */ j("div", {
 			...a,
 			ref: e,
@@ -575,7 +576,7 @@ function $({ ref: e, children: t, className: r, sx: i, ...a }) {
 			className: t,
 			children: l
 		})
-	}), /* @__PURE__ */ j(b, { children: /* @__PURE__ */ j("div", {
+	}), /* @__PURE__ */ j(_, { children: /* @__PURE__ */ j("div", {
 		role: "status",
 		css: o,
 		hidden: !c.open,

package/dist/multi-select.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as MultiSelect } from "./multi-select-DG1BCFX7.js";
+export { t as MultiSelect } from "./multi-select-B3puEVo0.js";

package/dist/{navigation-CC26JDr-.js → navigation-C_JD43gA.js}

@@ -1,10 +1,11 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { t as n } from "./disclosure-caret-C5T3fcl6.js";
-import { t as r } from "./focus-ring-BK5W5_NY.js";
-import { n as i, r as a } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./disclosure-caret-C5T3fcl6.js";
+import { t as n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./sx-BJXJ2xJK.js";
 import { t as o } from "./renderable-DzcIj1Lo.js";
-import { t as s } from "./icon-wrapper-stN8sD7R.js";
+import { t as s } from "./icon-wrapper-C-zMD0uL.js";
 import { useId as c } from "react";
 import { vars as l } from "@jfrader/tokens/vars";
 import { Fragment as u, jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
@@ -45,17 +46,17 @@ var p = l.space[8], m = "0.06em", h = e({
 	transitionDuration: l.motion.duration.fast,
 	transitionTimingFunction: l.motion.easeStandard,
 	"&::-webkit-details-marker": { display: "none" },
-	"&::after": { ...n },
+	"&::after": { ...t },
 	"&:hover": {
 		backgroundColor: l.color.surfaceHover,
 		color: l.color.text
 	},
-	"&:focus-visible": { ...r },
-	[a]: {
+	"&:focus-visible": { ...n },
+	[i]: {
 		transitionDuration: "0s",
 		"&::after": { transitionDuration: "0s" }
 	},
-	[i]: { "&::after": {
+	[r]: { "&::after": {
 		forcedColorAdjust: "none",
 		color: "ButtonText"
 	} }
@@ -92,76 +93,76 @@ var p = l.space[8], m = "0.06em", h = e({
 		opacity: .55,
 		pointerEvents: "none"
 	},
-	"&:focus-visible": { ...r },
-	[a]: { transitionDuration: "0s" },
-	[i]: { "&[aria-current=\"page\"]": {
+	"&:focus-visible": { ...n },
+	[i]: { transitionDuration: "0s" },
+	[r]: { "&[aria-current=\"page\"]": {
 		forcedColorAdjust: "none",
 		backgroundColor: "SelectedItem",
 		color: "SelectedItemText"
 	} }
 });
-function x({ ref: e, label: n = "Main", className: r, sx: i, ...a }) {
-	return /* @__PURE__ */ d(t, {
-		className: r,
+function x({ ref: e, label: t = "Main", className: n, sx: r, ...i }) {
+	return /* @__PURE__ */ d(a, {
+		className: n,
 		styles: h,
-		sx: i,
-		children: (t) => /* @__PURE__ */ d("nav", {
-			...a,
+		sx: r,
+		children: (n) => /* @__PURE__ */ d("nav", {
+			...i,
 			ref: e,
-			"aria-label": a["aria-label"] ?? n,
+			"aria-label": i["aria-label"] ?? t,
 			"data-ui": "navigation",
-			className: t
+			className: n
 		})
 	});
 }
 x.displayName = "Navigation";
-function S({ ref: e, label: n, collapsible: r = !1, defaultOpen: i, children: a, className: s, sx: l, ...u }) {
-	let p = c(), m = o(n);
-	if (r && !m) throw Error("Navigation.Group requires a renderable label when collapsible is true.");
+function S({ ref: e, label: t, collapsible: n = !1, defaultOpen: r, children: i, className: s, sx: l, ...u }) {
+	let p = c(), m = o(t);
+	if (n && !m) throw Error("Navigation.Group requires a renderable label when collapsible is true.");
 	let h = /* @__PURE__ */ d("ul", {
 		"aria-labelledby": m ? p : void 0,
 		css: y,
-		children: a
+		children: i
 	});
-	return /* @__PURE__ */ d(t, {
+	return /* @__PURE__ */ d(a, {
 		className: s,
 		styles: g,
 		sx: l,
-		children: (t) => r ? /* @__PURE__ */ f("details", {
+		children: (i) => n ? /* @__PURE__ */ f("details", {
 			...u,
 			ref: e,
-			open: i,
+			open: r,
 			"data-ui": "navigation-group",
-			className: t,
+			className: i,
 			children: [/* @__PURE__ */ d("summary", {
 				id: p,
 				"data-ui": "navigation-group-summary",
 				css: [_, v],
-				children: n
+				children: t
 			}), h]
 		}) : /* @__PURE__ */ f("section", {
 			...u,
 			ref: e,
 			"data-ui": "navigation-group",
-			className: t,
+			className: i,
 			children: [m && /* @__PURE__ */ d("h2", {
 				id: p,
 				"data-ui": "navigation-group-label",
 				css: _,
-				children: n
+				children: t
 			}), h]
 		})
 	});
 }
 S.displayName = "Navigation.Group";
-function C({ ref: e, href: n, active: r = !1, disabled: i = !1, icon: a, children: c, className: l, sx: p, ...m }) {
-	let h = i || m["aria-disabled"] === !0 || m["aria-disabled"] === "true", g = /* @__PURE__ */ f(u, { children: [o(a) && /* @__PURE__ */ d("span", {
+function C({ ref: e, href: t, active: n = !1, disabled: r = !1, icon: i, children: c, className: l, sx: p, ...m }) {
+	let h = r || m["aria-disabled"] === !0 || m["aria-disabled"] === "true", g = /* @__PURE__ */ f(u, { children: [o(i) && /* @__PURE__ */ d("span", {
 		"aria-hidden": "true",
 		"data-ui": "navigation-item-icon",
 		css: s,
-		children: a
+		children: i
 	}), c] }), _ = {
-		"aria-current": r ? "page" : m["aria-current"],
+		"aria-current": n ? "page" : m["aria-current"],
 		"aria-disabled": h || m["aria-disabled"],
 		tabIndex: h ? -1 : m.tabIndex,
 		onClick: h ? (e) => {
@@ -170,25 +171,25 @@ function C({ ref: e, href: n, active: r = !1, disabled: i = !1, icon: a, childre
 	};
 	return /* @__PURE__ */ d("li", {
 		"data-ui": "navigation-list-item",
-		children: /* @__PURE__ */ d(t, {
+		children: /* @__PURE__ */ d(a, {
 			className: l,
 			styles: b,
 			sx: p,
-			children: (t) => n === void 0 ? /* @__PURE__ */ d("span", {
+			children: (n) => t === void 0 ? /* @__PURE__ */ d("span", {
 				...m,
 				..._,
 				ref: e,
 				"data-ui": "navigation-item",
-				className: t,
+				className: n,
 				children: g
 			}) : /* @__PURE__ */ d("a", {
 				...m,
 				..._,
 				ref: e,
-				href: h ? void 0 : n,
+				href: h ? void 0 : t,
 				role: h ? "link" : void 0,
 				"data-ui": "navigation-item",
-				className: t,
+				className: n,
 				children: g
 			})
 		})

package/dist/navigation.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Navigation } from "./navigation-CC26JDr-.js";
+export { t as Navigation } from "./navigation-C_JD43gA.js";

package/dist/next.js

@@ -0,0 +1,65 @@
+'use client';
+import { t as e } from "./css-BYJhdGh-.js";
+import { t } from "./theme-provider-BvcY-iJu.js";
+import { useState as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "@emotion/react/jsx-runtime";
+import { useServerInsertedHTML as o } from "next/navigation";
+import s from "@emotion/cache";
+//#region src/components/next/registry.ts
+function c(e) {
+	let t = s({ key: e });
+	t.compat = !0;
+	let n = t.insert, r = [];
+	return t.insert = (...e) => {
+		let [i, a] = e;
+		return t.inserted[a.name] === void 0 && r.push({
+			name: a.name,
+			isGlobal: !i
+		}), n(...e);
+	}, {
+		cache: t,
+		flush: () => {
+			let e = r;
+			return r = [], e;
+		}
+	};
+}
+function l(e, t) {
+	let n = [], r = [], i = "";
+	for (let { name: a, isGlobal: o } of e) {
+		let e = t[a];
+		typeof e == "string" && (o ? n.push({
+			name: a,
+			styles: e
+		}) : (r.push(a), i += e));
+	}
+	return {
+		globals: n,
+		names: r,
+		styles: i
+	};
+}
+//#endregion
+//#region src/components/next/emotion-registry.tsx
+var u = "css";
+function d({ cacheKey: s = u, children: d }) {
+	let [{ cache: f, flush: p }] = n(() => c(s));
+	return o(() => {
+		let e = p();
+		if (e.length === 0) return null;
+		let { globals: t, names: n, styles: o } = l(e, f.inserted);
+		return /* @__PURE__ */ a(r, { children: [t.map(({ name: e, styles: t }) => /* @__PURE__ */ i("style", {
+			"data-emotion": `${f.key}-global ${e}`,
+			dangerouslySetInnerHTML: { __html: t }
+		}, e)), n.length > 0 && /* @__PURE__ */ i("style", {
+			"data-emotion": `${f.key} ${n.join(" ")}`,
+			dangerouslySetInnerHTML: { __html: o }
+		}, f.key)] });
+	}), /* @__PURE__ */ i(e, {
+		value: f,
+		children: /* @__PURE__ */ i(t, { children: d })
+	});
+}
+d.displayName = "EmotionRegistry";
+//#endregion
+export { d as EmotionRegistry };