@jfrader/ui 0.5.0 → 0.5.1

package/dist/menu-DDKgmK2F.js

@@ -0,0 +1,295 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./focus-ring-BK5W5_NY.js";
+import { r } from "./media-8yrN85VT.js";
+import { t as i } from "./use-controlled-state-DpeVQZNR.js";
+import { t as a } from "./trigger-style-B1KVC8O1.js";
+import { a as o, n as s, r as c } from "./overlay-layer-qEbpEtb8.js";
+import { o as l, s as u, t as d } from "./listbox-style-WX-RASp1.js";
+import { i as f, n as p } from "./collection-registry-k6JcD3Jr.js";
+import { t as m } from "./overlay-portal-C4JZFq2M.js";
+import { t as h } from "./use-overlay-floating-Bx2jBKAA.js";
+import { createContext as g, useContext as _, useEffect as v, useMemo as y, useRef as b, useState as x } from "react";
+import { vars as S } from "@jfrader/tokens/vars";
+import { jsx as C } from "@emotion/react/jsx-runtime";
+import { FloatingFocusManager as w, FloatingList as T, useClick as E, useInteractions as D, useListNavigation as O, useMergeRefs as k, useRole as A, useTypeahead as j } from "@floating-ui/react";
+//#region src/components/menu/menu.tsx
+var M = 500, N = g(null), P = g(!1);
+function F(e, t) {
+	let n = _(N);
+	if (!n) throw Error(`${e}.${t} must be rendered inside <${e}>.`);
+	return n;
+}
+function I(e, t) {
+	let n = F(e, t);
+	if (!_(P)) throw Error(`${e}.${t} must be rendered inside <${e}.Content>.`);
+	return n;
+}
+var L = (e) => /^on[A-Z]/.test(e);
+function R(e, t) {
+	let n = {}, r = {};
+	for (let [t, i] of Object.entries(e)) L(t) && typeof i == "function" ? n[t] = i : r[t] = i;
+	let i = t(r);
+	for (let [e, t] of Object.entries(n)) {
+		let n = i[e];
+		i[e] = (e) => {
+			t(e), e.defaultPrevented || n?.(e);
+		};
+	}
+	return i;
+}
+var z = (...e) => e.filter(Boolean).join(" ") || void 0, B = e({
+	appearance: "none",
+	boxSizing: "border-box",
+	display: "flex",
+	alignItems: "center",
+	inlineSize: "100%",
+	minBlockSize: "32px",
+	flexShrink: 0,
+	border: 0,
+	borderRadius: S.radius.sm,
+	backgroundColor: "transparent",
+	paddingBlock: S.space[1],
+	paddingInline: S.space[2],
+	font: "inherit",
+	fontSize: S.textSize.sm,
+	color: S.color.text,
+	textAlign: "start",
+	cursor: "pointer",
+	transitionProperty: "background-color",
+	transitionDuration: S.motion.duration.fast,
+	transitionTimingFunction: S.motion.easeStandard,
+	"&:focus-visible": { ...n },
+	[r]: { transitionDuration: "0s" }
+}), V = e({
+	blockSize: "1px",
+	marginBlock: S.space[1],
+	backgroundColor: S.color.border
+}), H = [B, d], U = V, ee = {
+	neutral: e({}),
+	danger: e({
+		color: S.color.dangerText,
+		"&:hover:not([aria-disabled=\"true\"]), &[data-active]:not([aria-disabled=\"true\"])": { backgroundColor: S.color.dangerSoft }
+	})
+};
+function te({ open: e, defaultOpen: t = !1, onOpenChange: n, placement: r = "bottom-start", positioning: a, nodeId: s, children: c }) {
+	let [l = !1, u] = i(e, t, n), [d, f] = x(null), p = b([]), m = b([]), g = b(/* @__PURE__ */ new Set()), _ = b(!1), { refs: S, floatingStyles: w, context: T } = h({
+		...a,
+		open: l,
+		placement: r,
+		nodeId: s,
+		onOpenChange: (e, t, n) => {
+			_.current = !e && n === "escape-key", u(e);
+		}
+	});
+	v(() => {
+		if (l || !_.current) return;
+		_.current = !1;
+		let e = S.domReference.current;
+		if (!e?.isConnected || e.closest("[inert]")) return;
+		let t = e.ownerDocument.activeElement;
+		t && t !== e.ownerDocument.body || e.focus();
+	}, [l, S]);
+	let k = E(T), P = A(T, { role: "menu" }), F = o(T, "container"), I = O(T, {
+		listRef: p,
+		activeIndex: d,
+		onNavigate: f,
+		loop: !0,
+		orientation: "vertical",
+		disabledIndices: (e) => g.current.has(e),
+		focusItemOnOpen: !0
+	}), L = j(T, {
+		listRef: m,
+		activeIndex: d,
+		onMatch: l ? f : void 0,
+		resetMs: M
+	}), { getReferenceProps: R, getFloatingProps: z, getItemProps: B } = D([
+		k,
+		P,
+		...F,
+		I,
+		L
+	]), V = y(() => ({
+		open: l,
+		nodeId: s,
+		requestOpen: () => {
+			_.current = !1, u(!0);
+		},
+		requestClose: (e = !1) => {
+			_.current = e, u(!1);
+		},
+		activeIndex: d,
+		refs: S,
+		floatingContext: T,
+		floatingStyles: w,
+		elementsRef: p,
+		labelsRef: m,
+		disabledIndices: g.current,
+		getReferenceProps: R,
+		getFloatingProps: z,
+		getItemProps: B
+	}), [
+		l,
+		s,
+		u,
+		d,
+		S,
+		T,
+		w,
+		R,
+		z,
+		B
+	]);
+	return /* @__PURE__ */ C(N.Provider, {
+		value: V,
+		children: c
+	});
+}
+function W(e) {
+	return /* @__PURE__ */ C(c, { children: (t) => /* @__PURE__ */ C(te, {
+		...e,
+		nodeId: t
+	}) });
+}
+function G(e) {
+	return /* @__PURE__ */ C(W, { ...e });
+}
+G.displayName = "Menu";
+function K({ family: e, marker: n, styles: r, ref: i, className: a, sx: o, ...s }) {
+	let { refs: c, getReferenceProps: l } = F(e, "Trigger"), u = k([c.setReference, i]);
+	return /* @__PURE__ */ C(t, {
+		className: a,
+		styles: r,
+		sx: o,
+		children: (e) => /* @__PURE__ */ C("button", {
+			type: "button",
+			...R(s, l),
+			ref: u,
+			"data-ui": n,
+			className: e
+		})
+	});
+}
+function q(e) {
+	return /* @__PURE__ */ C(K, {
+		...e,
+		family: "Menu",
+		marker: "menu-trigger",
+		styles: a
+	});
+}
+q.displayName = "Menu.Trigger";
+function J({ family: e, marker: n, styles: r, ref: i, style: a, children: o, className: c, sx: l, "aria-label": u, "aria-labelledby": d, defaultLabelledBy: f, ...p }) {
+	let { open: h, nodeId: g, refs: _, floatingContext: v, floatingStyles: y, elementsRef: b, labelsRef: x, getFloatingProps: S } = F(e, "Content"), E = k([_.setFloating, i]);
+	if (!h) return null;
+	let D = S(p), O = f ?? D["aria-labelledby"], A = d === void 0 ? u === void 0 ? O : void 0 : z(d, O);
+	return /* @__PURE__ */ C(m, { children: /* @__PURE__ */ C(w, {
+		context: v,
+		modal: !1,
+		initialFocus: -1,
+		returnFocus: !1,
+		restoreFocus: !0,
+		children: /* @__PURE__ */ C(t, {
+			className: c,
+			styles: r,
+			sx: l,
+			children: (e) => /* @__PURE__ */ C("div", {
+				...D,
+				"aria-label": u,
+				"aria-labelledby": A,
+				ref: E,
+				"data-ui": n,
+				style: {
+					...a,
+					...y
+				},
+				className: e,
+				children: /* @__PURE__ */ C(T, {
+					elementsRef: b,
+					labelsRef: x,
+					children: /* @__PURE__ */ C(P.Provider, {
+						value: !0,
+						children: /* @__PURE__ */ C(s, {
+							nodeId: g,
+							children: o
+						})
+					})
+				})
+			})
+		})
+	}) });
+}
+function Y(e) {
+	return /* @__PURE__ */ C(J, {
+		...e,
+		family: "Menu",
+		marker: "menu",
+		styles: [u, l]
+	});
+}
+Y.displayName = "Menu.Content";
+function X({ family: e, marker: n, styles: r, ref: i, onSelect: a, disabled: o = !1, part: s = "Item", itemRole: c = "menuitem", closeOnSelect: l = !0, onClick: u, className: d, sx: m, ...h }) {
+	let { activeIndex: g, requestClose: _, disabledIndices: v, getItemProps: y } = I(e, s), { ref: b, index: x } = f({ label: o ? null : void 0 }), S = k([b, i]), w = x !== -1 && g === x;
+	p(x, o, v);
+	let T = (e) => {
+		o || (u?.(e), a?.(), l && !e.defaultPrevented && _(!0));
+	};
+	return /* @__PURE__ */ C(t, {
+		className: d,
+		styles: r,
+		sx: m,
+		children: (e) => /* @__PURE__ */ C("button", {
+			type: "button",
+			...y({
+				...h,
+				onClick: T
+			}),
+			ref: S,
+			role: c,
+			tabIndex: w ? 0 : -1,
+			"aria-disabled": o || void 0,
+			"data-active": w || void 0,
+			"data-ui": n,
+			className: e
+		})
+	});
+}
+function Z(e) {
+	return /* @__PURE__ */ C(X, {
+		...e,
+		family: "Menu",
+		marker: "menu-item",
+		styles: H
+	});
+}
+Z.displayName = "Menu.Item";
+function Q({ marker: e, styles: n, ref: r, className: i, sx: a, ...o }) {
+	return /* @__PURE__ */ C(t, {
+		className: i,
+		styles: n,
+		sx: a,
+		children: (t) => /* @__PURE__ */ C("div", {
+			...o,
+			ref: r,
+			role: "separator",
+			"data-ui": e,
+			className: t
+		})
+	});
+}
+function $(e) {
+	return /* @__PURE__ */ C(Q, {
+		...e,
+		marker: "menu-separator",
+		styles: V
+	});
+}
+$.displayName = "Menu.Separator";
+var ne = Object.assign(G, {
+	Trigger: q,
+	Content: Y,
+	Item: Z,
+	Separator: $
+});
+//#endregion
+export { Q as a, H as c, F as d, X as i, ee as l, J as n, K as o, W as r, R as s, ne as t, U as u };

package/dist/menu.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Menu } from "./menu-xwOOUtWP.js";
+export { t as Menu } from "./menu-DDKgmK2F.js";

package/dist/{metric-card-Bh9K4fZs.js → metric-card--lVTz5Wn.js}

@@ -2,8 +2,8 @@
 import { r as e, t } from "./sx-Dx9JUKp5.js";
 import { n } from "./media-8yrN85VT.js";
 import { t as r } from "./renderable-DzcIj1Lo.js";
-import { t as i } from "./card-D-aI2QHx.js";
-import { t as a } from "./pill-DO2gHzMb.js";
+import { t as i } from "./card-Ca4KQKYQ.js";
+import { t as a } from "./pill-BaS-uIbn.js";
 import { useId as o } from "react";
 import { vars as s } from "@jfrader/tokens/vars";
 import { jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";

package/dist/metric-card.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as MetricCard } from "./metric-card-Bh9K4fZs.js";
+export { t as MetricCard } from "./metric-card--lVTz5Wn.js";

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

@@ -5,11 +5,11 @@ import { t as a } from "./use-controlled-state-DpeVQZNR.js";
 import { t as o } from "./visually-hidden-BJdvqqvn.js";
 import { t as s } from "./renderable-DzcIj1Lo.js";
 import { t as c } from "./trigger-style-B1KVC8O1.js";
-import { t as l } from "./overlay-layer-SeUyyEPD.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-DvJifLpF.js";
+import { t as x } from "./use-overlay-floating-Bx2jBKAA.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";
@@ -39,7 +39,8 @@ var ae = [], oe = 500, se = t({
 	overflow: "hidden",
 	textOverflow: "ellipsis",
 	whiteSpace: "nowrap",
-	minInlineSize: 0
+	minInlineSize: 0,
+	[r]: { border: "1px solid CanvasText" }
 }), F = t({
 	fontFamily: k.font.sans,
 	fontSize: k.textSize.sm,
@@ -58,7 +59,10 @@ var ae = [], oe = 500, se = t({
 		backgroundColor: "Canvas",
 		color: "CanvasText"
 	}
-}), fe = t({ [r]: { "&[data-active]": { outlineColor: "Highlight" } } }), L = t({
+}), fe = t({
+	overflowWrap: "anywhere",
+	[r]: { "&[data-active]": { outlineColor: "Highlight" } }
+}), L = t({
 	minBlockSize: k.space[6],
 	minInlineSize: k.space[6]
 });
@@ -228,10 +232,12 @@ function H(e) {
 				type: "hidden",
 				name: e.name,
 				value: n,
-				disabled: t.disabled
+				disabled: t.disabled,
+				form: t.triggerName?.form
 			}, n)),
 			/* @__PURE__ */ j("input", {
 				ref: t.proxyRef,
+				form: t.triggerName?.form,
 				type: "text",
 				css: o,
 				tabIndex: -1,
@@ -262,7 +268,8 @@ function W({ ref: e, id: t, size: r = "md", disabled: i, onKeyDown: a, onKeyUp:
 		p.setTriggerName({
 			id: h,
 			labelledBy: g,
-			label: _
+			label: _,
+			form: f.form
 		});
 		let e = p.refs.domReference.current;
 		return e && p.setDirection(e.ownerDocument.defaultView?.getComputedStyle(e).direction ?? "ltr"), () => p.setTriggerName(null);
@@ -270,6 +277,7 @@ function W({ ref: e, id: t, size: r = "md", disabled: i, onKeyDown: a, onKeyUp:
 		h,
 		g,
 		_,
+		f.form,
 		p.setTriggerName
 	]);
 	let b = (e) => {

package/dist/multi-select.js

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

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

@@ -11,6 +11,8 @@ import { Fragment as u, jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
 //#region src/components/navigation/navigation.tsx
 var p = l.space[8], m = "0.06em", h = e({
 	display: "grid",
+	minInlineSize: 0,
+	overflowWrap: "anywhere",
 	gap: l.space[4],
 	fontFamily: l.font.sans
 }), g = e({
@@ -52,7 +54,11 @@ var p = l.space[8], m = "0.06em", h = e({
 	[a]: {
 		transitionDuration: "0s",
 		"&::after": { transitionDuration: "0s" }
-	}
+	},
+	[i]: { "&::after": {
+		forcedColorAdjust: "none",
+		color: "ButtonText"
+	} }
 }), y = e({
 	display: "grid",
 	gap: l.space[1],
@@ -102,7 +108,7 @@ function x({ ref: e, label: n = "Main", className: r, sx: i, ...a }) {
 		children: (t) => /* @__PURE__ */ d("nav", {
 			...a,
 			ref: e,
-			"aria-label": n,
+			"aria-label": a["aria-label"] ?? n,
 			"data-ui": "navigation",
 			className: t
 		})
@@ -149,16 +155,16 @@ function S({ ref: e, label: n, collapsible: r = !1, defaultOpen: i, children: a,
 }
 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 = /* @__PURE__ */ f(u, { children: [o(a) && /* @__PURE__ */ d("span", {
+	let h = i || m["aria-disabled"] === !0 || m["aria-disabled"] === "true", g = /* @__PURE__ */ f(u, { children: [o(a) && /* @__PURE__ */ d("span", {
 		"aria-hidden": "true",
 		"data-ui": "navigation-item-icon",
 		css: s,
 		children: a
-	}), c] }), g = {
-		"aria-current": r ? "page" : void 0,
-		"aria-disabled": i || void 0,
-		tabIndex: i ? -1 : m.tabIndex,
-		onClick: i ? (e) => {
+	}), c] }), _ = {
+		"aria-current": r ? "page" : m["aria-current"],
+		"aria-disabled": h || m["aria-disabled"],
+		tabIndex: h ? -1 : m.tabIndex,
+		onClick: h ? (e) => {
 			e.preventDefault();
 		} : m.onClick
 	};
@@ -170,20 +176,20 @@ function C({ ref: e, href: n, active: r = !1, disabled: i = !1, icon: a, childre
 			sx: p,
 			children: (t) => n === void 0 ? /* @__PURE__ */ d("span", {
 				...m,
-				...g,
+				..._,
 				ref: e,
 				"data-ui": "navigation-item",
 				className: t,
-				children: h
+				children: g
 			}) : /* @__PURE__ */ d("a", {
 				...m,
-				...g,
+				..._,
 				ref: e,
-				href: i ? void 0 : n,
-				role: i ? "link" : void 0,
+				href: h ? void 0 : n,
+				role: h ? "link" : void 0,
 				"data-ui": "navigation-item",
 				className: t,
-				children: h
+				children: g
 			})
 		})
 	});

package/dist/navigation.js

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

package/dist/{overlay-layer-SeUyyEPD.js → overlay-layer-qEbpEtb8.js}

@@ -53,12 +53,26 @@ function m({ children: e }) {
 }
 m.displayName = "OverlayLayer";
 function h({ children: e }) {
+	return /* @__PURE__ */ t(m, { children: (r) => /* @__PURE__ */ t(n, {
+		id: void 0,
+		children: e(r)
+	}) });
+}
+h.displayName = "MenuLayer";
+function g({ nodeId: e, children: r }) {
+	return /* @__PURE__ */ t(n, {
+		id: e,
+		children: r
+	});
+}
+g.displayName = "LayerContent";
+function _({ children: e }) {
 	let i = s(), a = o();
 	return !i && !a ? e : /* @__PURE__ */ t(r, { children: /* @__PURE__ */ t(n, {
 		id: void 0,
 		children: e
 	}) });
 }
-h.displayName = "IsolatedOverlay";
+_.displayName = "IsolatedOverlay";
 //#endregion
-export { m as n, f as r, h as t };
+export { f as a, m as i, g as n, h as r, _ as t };

package/dist/{pagination-DmXZ8E85.js → pagination-BfkeWbmP.js}

@@ -76,27 +76,28 @@ var _ = e({
 	display: "inline-block",
 	"&:dir(rtl)": { transform: "scaleX(-1)" }
 });
-function S({ ref: e, page: n, totalPages: r, onPageChange: l, siblingCount: p = 1, label: h = "Pagination", previousLabel: S = "Previous page", nextLabel: C = "Next page", locale: w = typeof navigator > "u" ? void 0 : navigator.language, className: T, sx: E, ...D }) {
-	let O = m(r), k = Math.min(Math.max(m(n), 1), Math.max(O, 1)), A = g(k, O, Math.min(m(p), f)), j = s(() => new Intl.NumberFormat(w), [w]), M = c(null);
-	a(e, () => M.current, []);
-	let N = c(!1);
+function S({ ref: e, page: n, totalPages: r, onPageChange: l, siblingCount: p = 1, label: h = "Pagination", previousLabel: S = "Previous page", nextLabel: C = "Next page", locale: w = typeof navigator > "u" ? void 0 : navigator.language, className: T, sx: E, "aria-label": D, "aria-labelledby": O, ...k }) {
+	let A = m(r), j = Math.min(Math.max(m(n), 1), Math.max(A, 1)), M = g(j, A, Math.min(m(p), f)), N = s(() => new Intl.NumberFormat(w), [w]), P = c(null);
+	a(e, () => P.current, []);
+	let F = c(!1);
 	o(() => {
-		let e = M.current;
-		if (!N.current || !e) return;
-		N.current = !1;
+		let e = P.current;
+		if (!F.current || !e) return;
+		F.current = !1;
 		let t = e.ownerDocument.activeElement;
 		(t === e.ownerDocument.body || t && e.contains(t) && t.matches(":disabled")) && e.querySelector("[aria-current=\"page\"]")?.focus();
-	}, [k]);
-	let P = (e, t = !1) => {
-		N.current = t && (e <= 1 || e >= O), e !== k && l?.(e);
+	}, [j]);
+	let I = (e, t = !1) => {
+		F.current = t && (e <= 1 || e >= A), e !== j && l?.(e);
 	};
 	return /* @__PURE__ */ u(t, {
 		className: T,
 		sx: E,
 		children: (e) => /* @__PURE__ */ u("nav", {
-			...D,
-			ref: M,
-			"aria-label": h,
+			...k,
+			ref: P,
+			"aria-label": D ?? (O === void 0 ? h : void 0),
+			"aria-labelledby": O,
 			"data-ui": "pagination",
 			className: e,
 			children: /* @__PURE__ */ d("ul", {
@@ -104,8 +105,8 @@ function S({ ref: e, page: n, totalPages: r, onPageChange: l, siblingCount: p =
 				children: [
 					/* @__PURE__ */ u("li", { children: /* @__PURE__ */ d("button", {
 						type: "button",
-						disabled: k <= 1,
-						onClick: () => P(k - 1, !0),
+						disabled: j <= 1,
+						onClick: () => I(j - 1, !0),
 						"data-ui": "pagination-previous",
 						css: [v, y],
 						children: [/* @__PURE__ */ u("span", {
@@ -117,14 +118,14 @@ function S({ ref: e, page: n, totalPages: r, onPageChange: l, siblingCount: p =
 							children: S
 						})]
 					}) }),
-					A.map((e) => typeof e == "number" ? /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u("button", {
+					M.map((e) => typeof e == "number" ? /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u("button", {
 						type: "button",
-						"aria-current": e === k ? "page" : void 0,
-						"aria-label": j.format(e),
-						onClick: () => P(e),
+						"aria-current": e === j ? "page" : void 0,
+						"aria-label": N.format(e),
+						onClick: () => I(e),
 						"data-ui": "pagination-page",
 						css: [v, y],
-						children: j.format(e)
+						children: N.format(e)
 					}) }, e) : /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u("span", {
 						"aria-hidden": "true",
 						"data-ui": "pagination-ellipsis",
@@ -133,8 +134,8 @@ function S({ ref: e, page: n, totalPages: r, onPageChange: l, siblingCount: p =
 					}) }, e)),
 					/* @__PURE__ */ u("li", { children: /* @__PURE__ */ d("button", {
 						type: "button",
-						disabled: k >= O,
-						onClick: () => P(k + 1, !0),
+						disabled: j >= A,
+						onClick: () => I(j + 1, !0),
 						"data-ui": "pagination-next",
 						css: [v, y],
 						children: [/* @__PURE__ */ u("span", {

package/dist/pagination.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Pagination } from "./pagination-DmXZ8E85.js";
+export { t as Pagination } from "./pagination-BfkeWbmP.js";

package/dist/pill-BaS-uIbn.js

@@ -0,0 +1,58 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./media-8yrN85VT.js";
+import { vars as r } from "@jfrader/tokens/vars";
+import { jsx as i } from "@emotion/react/jsx-runtime";
+//#region src/components/pill/pill.tsx
+var a = e({
+	display: "inline-flex",
+	alignItems: "center",
+	boxSizing: "border-box",
+	blockSize: r.space[5],
+	paddingInline: r.space[2],
+	borderRadius: r.radius.full,
+	fontSize: r.textSize.xs,
+	fontWeight: r.fontWeight.medium,
+	lineHeight: 1,
+	whiteSpace: "nowrap",
+	verticalAlign: "middle",
+	[n]: { outline: "1px solid CanvasText" }
+}), o = {
+	neutral: e({
+		backgroundColor: r.color.surfaceHover,
+		color: r.color.textMuted
+	}),
+	accent: e({
+		backgroundColor: r.color.accentSoft,
+		color: r.color.accentText
+	}),
+	success: e({
+		backgroundColor: r.color.successSoft,
+		color: r.color.success
+	}),
+	warning: e({
+		backgroundColor: r.color.warningSoft,
+		color: r.color.warning
+	}),
+	danger: e({
+		backgroundColor: r.color.dangerSoft,
+		color: r.color.dangerText
+	})
+};
+function s({ ref: e, tone: n = "neutral", className: r, sx: s, ...c }) {
+	return /* @__PURE__ */ i(t, {
+		className: r,
+		styles: [a, o[n]],
+		sx: s,
+		children: (t) => /* @__PURE__ */ i("span", {
+			...c,
+			ref: e,
+			"data-ui": "pill",
+			"data-tone": n,
+			className: t
+		})
+	});
+}
+s.displayName = "Pill";
+//#endregion
+export { s as t };

package/dist/pill.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Pill } from "./pill-DO2gHzMb.js";
+export { t as Pill } from "./pill-BaS-uIbn.js";