@jfrader/ui 0.5.0 → 0.6.0

package/dist/{expandable-card-C-qJcZ14.js → expandable-card-W97vjix9.js}

@@ -1,17 +1,18 @@
 '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 "./use-controlled-state-DpeVQZNR.js";
 import { t as s } from "./renderable-DzcIj1Lo.js";
-import { n as c } from "./surface-DZ4d-2aL.js";
+import { n as c } from "./surface-C69kwSuk.js";
 import { createContext as l, useContext as u, useEffect as d, useId as f, useLayoutEffect as p, useMemo as m, useRef as h, useState as g } from "react";
 import { vars as _ } from "@jfrader/tokens/vars";
 import { jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
-import { useMergeRefs as b } from "@floating-ui/react";
-import { MotionConfig as x, animate as S, useMotionValue as C, useReducedMotion as w } from "motion/react";
-import { base as T } from "@jfrader/tokens";
+import { MotionConfig as b, animate as x, useMotionValue as S, useReducedMotion as C } from "motion/react";
+import { base as w } from "@jfrader/tokens";
+import { useMergeRefs as T } from "@floating-ui/react";
 //#region src/components/expandable-card/expandable-card.tsx
 var E = l(null);
 function D(e) {
@@ -25,7 +26,7 @@ var O = {
 	damping: 40,
 	mass: 1
 }, k = {
-	duration: Number.parseFloat(T.motion.duration.fast) / 1e3,
+	duration: Number.parseFloat(w.motion.duration.fast) / 1e3,
 	ease: [
 		.2,
 		.6,
@@ -68,13 +69,13 @@ var O = {
 		overflowWrap: "anywhere"
 	},
 	"&::after": {
-		...n,
+		...t,
 		gridColumn: 2,
 		gridRow: "1 / span 2"
 	},
 	"&[aria-expanded=\"true\"]::after": { transform: "rotate(90deg)" },
 	"&[aria-expanded=\"true\"]:dir(rtl)::after": { transform: "rotate(-90deg)" },
-	"&:focus-visible": r,
+	"&:focus-visible": n,
 	"&:hover:not(:disabled)": { backgroundColor: _.color.surfaceHover },
 	"&:disabled": {
 		cursor: "not-allowed",
@@ -84,8 +85,15 @@ var O = {
 		minBlockSize: _.space[12],
 		padding: _.space[3]
 	},
-	[a]: { "&::after": { transitionDuration: "0s" } },
-	[i]: { "&:focus-visible": { outlineColor: "Highlight" } }
+	[i]: { "&::after": { transitionDuration: "0s" } },
+	[r]: {
+		"&:focus-visible": { outlineColor: "Highlight" },
+		"&::after": {
+			forcedColorAdjust: "none",
+			borderInlineStartColor: "ButtonText"
+		},
+		"&:disabled::after": { borderInlineStartColor: "GrayText" }
+	}
 }), P = e({
 	fontSize: _.textSize.md,
 	fontWeight: _.fontWeight.medium
@@ -115,8 +123,8 @@ function R(e) {
 function z(...e) {
 	return e.filter(Boolean).join(" ") || void 0;
 }
-function B({ ref: e, open: n, defaultOpen: r = !1, onOpenChange: i, collapsedInlineSize: a, expandedInlineSize: s, size: c = "md", disabled: l = !1, headingLevel: u = 3, className: d, sx: _, onKeyDown: y, children: T, ...D }) {
-	let [k, M] = o(n, r, i), N = !!k, P = f(), F = h(null), I = h(null), L = h(null), z = b([I, e]), [B, V] = g(!1), [H, U] = g(!1), [W, G] = g(), [K, ee] = g(0), q = w(), J = C(0), Y = h(!1), X = R(a), Z = R(s) ?? X, Q = W === void 0 ? void 0 : Math.min(W, (N ? Z : X) ?? W), $ = W === void 0 ? void 0 : Math.max(0, Math.min(W, Z ?? W) - K);
+function B({ ref: e, open: t, defaultOpen: n = !1, onOpenChange: r, collapsedInlineSize: i, expandedInlineSize: s, size: c = "md", disabled: l = !1, headingLevel: u = 3, className: d, sx: _, onKeyDown: y, children: w, ...D }) {
+	let [k, M] = o(t, n, r), N = !!k, P = f(), F = h(null), I = h(null), L = h(null), z = T([I, e]), [B, V] = g(!1), [H, U] = g(!1), [W, G] = g(), [K, ee] = g(0), q = C(), J = S(0), Y = h(!1), X = R(i), Z = R(s) ?? X, Q = W === void 0 ? void 0 : Math.min(W, (N ? Z : X) ?? W), $ = W === void 0 ? void 0 : Math.max(0, Math.min(W, Z ?? W) - K);
 	p(() => {
 		let e = L.current;
 		if (!e) return;
@@ -136,7 +144,7 @@ function B({ ref: e, open: n, defaultOpen: r = !1, onOpenChange: i, collapsedInl
 		let t = (t) => {
 			e.style.inlineSize = `${t}px`;
 		}, n = J.on("change", t);
-		return !Y.current || q ? (J.jump(Q), t(Q), Y.current = !0) : S(J, Q, O), () => {
+		return !Y.current || q ? (J.jump(Q), t(Q), Y.current = !0) : x(J, Q, O), () => {
 			n(), J.stop();
 		};
 	}, [
@@ -169,14 +177,14 @@ function B({ ref: e, open: n, defaultOpen: r = !1, onOpenChange: i, collapsedInl
 		H,
 		$
 	]);
-	return /* @__PURE__ */ v(x, {
+	return /* @__PURE__ */ v(b, {
 		reducedMotion: "user",
 		children: /* @__PURE__ */ v(E.Provider, {
 			value: te,
 			children: /* @__PURE__ */ v("div", {
 				ref: L,
 				css: j,
-				children: /* @__PURE__ */ v(t, {
+				children: /* @__PURE__ */ v(a, {
 					className: d,
 					styles: A,
 					sx: _,
@@ -192,7 +200,7 @@ function B({ ref: e, open: n, defaultOpen: r = !1, onOpenChange: i, collapsedInl
 							let t = e.target, n = t.closest("dialog, [role=\"dialog\"], [role=\"menu\"], [role=\"listbox\"]");
 							t.closest("[data-ui=\"expandable-card\"]") !== e.currentTarget || n && e.currentTarget.contains(n) || (e.preventDefault(), M(!1));
 						},
-						children: T
+						children: w
 					})
 				})
 			})
@@ -200,15 +208,15 @@ function B({ ref: e, open: n, defaultOpen: r = !1, onOpenChange: i, collapsedInl
 	});
 }
 B.displayName = "ExpandableCard";
-function V({ ref: e, className: n, sx: r, onClick: i, disabled: a, "aria-labelledby": o, "aria-describedby": s, ...c }) {
-	let l = D("Trigger"), u = b([l.triggerRef, e]), d = `h${l.headingLevel}`;
+function V({ ref: e, className: t, sx: n, onClick: r, disabled: i, "aria-labelledby": o, "aria-describedby": s, ...c }) {
+	let l = D("Trigger"), u = T([l.triggerRef, e]), d = `h${l.headingLevel}`;
 	return /* @__PURE__ */ v(d, {
 		css: M,
 		"aria-labelledby": l.triggerId,
-		children: /* @__PURE__ */ v(t, {
-			className: n,
+		children: /* @__PURE__ */ v(a, {
+			className: t,
 			styles: N,
-			sx: r,
+			sx: n,
 			children: (e) => /* @__PURE__ */ v("button", {
 				...c,
 				ref: u,
@@ -216,62 +224,62 @@ function V({ ref: e, className: n, sx: r, onClick: i, disabled: a, "aria-labelle
 				id: l.triggerId,
 				"data-ui": "expandable-card-trigger",
 				className: e,
-				disabled: l.disabled || a,
+				disabled: l.disabled || i,
 				"aria-expanded": l.open,
 				"aria-controls": l.panelId,
 				"aria-labelledby": z(o, l.hasTitle && l.titleId, l.hasDescription && l.descriptionId),
 				"aria-describedby": z(s),
 				onClick: (e) => {
-					i?.(e), e.defaultPrevented || l.request(!l.open);
+					r?.(e), e.defaultPrevented || l.request(!l.open);
 				}
 			})
 		})
 	});
 }
 V.displayName = "ExpandableCard.Trigger";
-function H({ ref: e, className: n, sx: r, children: i, ...a }) {
-	let { titleId: o, setHasTitle: c } = D("Title"), l = s(i);
-	return d(() => (c(l), () => c(!1)), [l, c]), l ? /* @__PURE__ */ v(t, {
-		className: n,
+function H({ ref: e, className: t, sx: n, children: r, ...i }) {
+	let { titleId: o, setHasTitle: c } = D("Title"), l = s(r);
+	return d(() => (c(l), () => c(!1)), [l, c]), l ? /* @__PURE__ */ v(a, {
+		className: t,
 		styles: P,
-		sx: r,
+		sx: n,
 		children: (t) => /* @__PURE__ */ v("span", {
-			...a,
+			...i,
 			ref: e,
 			id: o,
 			className: t,
 			"data-ui": "expandable-card-title",
-			children: i
+			children: r
 		})
 	}) : null;
 }
 H.displayName = "ExpandableCard.Title";
-function U({ ref: e, className: n, sx: r, children: i, ...a }) {
-	let { descriptionId: o, setHasDescription: c } = D("Description"), l = s(i);
-	return d(() => (c(l), () => c(!1)), [l, c]), l ? /* @__PURE__ */ v(t, {
-		className: n,
+function U({ ref: e, className: t, sx: n, children: r, ...i }) {
+	let { descriptionId: o, setHasDescription: c } = D("Description"), l = s(r);
+	return d(() => (c(l), () => c(!1)), [l, c]), l ? /* @__PURE__ */ v(a, {
+		className: t,
 		styles: F,
-		sx: r,
+		sx: n,
 		children: (t) => /* @__PURE__ */ y("span", {
-			...a,
+			...i,
 			ref: e,
 			id: o,
 			className: t,
 			"data-ui": "expandable-card-description",
-			children: [" ", i]
+			children: [" ", r]
 		})
 	}) : null;
 }
 U.displayName = "ExpandableCard.Description";
-function W({ ref: e, className: n, sx: r, children: i, "aria-labelledby": a, "aria-describedby": o, ...s }) {
-	let c = D("Content"), l = h(null), u = h(null), d = b([l, e]), f = C(0), m = C(+!!c.open), g = w(), _ = h(!1);
+function W({ ref: e, className: t, sx: n, children: r, "aria-labelledby": i, "aria-describedby": o, ...s }) {
+	let c = D("Content"), l = h(null), u = h(null), d = T([l, e]), f = S(0), m = S(+!!c.open), g = C(), _ = h(!1);
 	return p(() => {
 		let e = l.current, t = u.current;
 		if (!e || !t) return;
 		let n = 0, r = !1;
 		if (!c.open && e.contains(e.ownerDocument.activeElement) && c.triggerRef.current?.focus(), e.inert = !c.open, e.hidden = !c.open && !_.current, c.expandedWidth === void 0) return;
 		let i = (t) => {
-			e.style.blockSize = `${t}px`, c.open && t > 0 && m.get() === 0 && !m.isAnimating() && S(m, 1, k);
+			e.style.blockSize = `${t}px`, c.open && t > 0 && m.get() === 0 && !m.isAnimating() && x(m, 1, k);
 		}, a = f.on("change", i), o = m.on("change", (t) => {
 			e.style.opacity = String(t);
 		}), s = () => {
@@ -280,13 +288,13 @@ function W({ ref: e, className: n, sx: r, children: i, "aria-labelledby": a, "ar
 			let s = () => {
 				!r && a === n && !c.open && (e.hidden = !0);
 			};
-			!_.current || g ? (m.jump(+!!c.open), e.style.opacity = String(m.get()), f.jump(o), i(o), s(), _.current = !0) : c.open ? (f.get() > 0 && S(m, 1, k), S(f, o, {
+			!_.current || g ? (m.jump(+!!c.open), e.style.opacity = String(m.get()), f.jump(o), i(o), s(), _.current = !0) : c.open ? (f.get() > 0 && x(m, 1, k), x(f, o, {
 				...O,
 				onComplete: s
-			})) : S(m, 0, {
+			})) : x(m, 0, {
 				...k,
 				onComplete: () => {
-					!r && a === n && S(f, o, {
+					!r && a === n && x(f, o, {
 						...O,
 						onComplete: s
 					});
@@ -305,10 +313,10 @@ function W({ ref: e, className: n, sx: r, children: i, "aria-labelledby": a, "ar
 		f,
 		m,
 		g
-	]), /* @__PURE__ */ v(t, {
-		className: n,
+	]), /* @__PURE__ */ v(a, {
+		className: t,
 		styles: I,
-		sx: r,
+		sx: n,
 		children: (e) => /* @__PURE__ */ v("div", {
 			...s,
 			ref: d,
@@ -318,13 +326,13 @@ function W({ ref: e, className: n, sx: r, children: i, "aria-labelledby": a, "ar
 			"data-ui": "expandable-card-content",
 			hidden: !c.open,
 			"aria-hidden": !c.open || void 0,
-			"aria-labelledby": z(a, c.hasTitle ? c.titleId : c.triggerId),
+			"aria-labelledby": z(i, c.hasTitle ? c.titleId : c.triggerId),
 			"aria-describedby": z(o, c.hasDescription && c.descriptionId),
 			children: /* @__PURE__ */ v("div", {
 				ref: u,
 				css: L,
 				style: { inlineSize: c.expandedWidth },
-				children: i
+				children: r
 			})
 		})
 	});

package/dist/expandable-card.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ExpandableCard } from "./expandable-card-C-qJcZ14.js";
+export { t as ExpandableCard } from "./expandable-card-W97vjix9.js";

package/dist/expanding-search-Bb2_YfNx.js

@@ -0,0 +1,239 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./media-8yrN85VT.js";
+import { t as n } from "./sx-BJXJ2xJK.js";
+import { t as r } from "./use-controlled-state-DpeVQZNR.js";
+import { t as i } from "./renderable-DzcIj1Lo.js";
+import { t as a } from "./button-C6OV0C7J.js";
+import { t as o } from "./search-field-CbsajaZb.js";
+import { useId as ee, useLayoutEffect as s, useRef as c, useState as te } from "react";
+import { vars as l } from "@jfrader/tokens/vars";
+import { jsx as u, jsxs as d } from "@emotion/react/jsx-runtime";
+import { animate as f, useMotionValue as p } from "motion/react";
+import { base as m } from "@jfrader/tokens";
+import { useMergeRefs as h } from "@floating-ui/react";
+//#region src/components/expanding-search/expanding-search.tsx
+var g = {
+	type: "spring",
+	visualDuration: Number.parseFloat(m.motion.duration.slow) / 1e3,
+	bounce: 0
+}, ne = "(prefers-reduced-motion: reduce)", re = e({
+	position: "relative",
+	inlineSize: "100%",
+	minInlineSize: 0,
+	minBlockSize: "var(--expanding-search-size)",
+	pointerEvents: "none"
+}), ie = {
+	sm: e({ "--expanding-search-size": l.space[8] }),
+	md: e({ "--expanding-search-size": l.space[10] }),
+	lg: e({ "--expanding-search-size": l.space[12] })
+}, _ = e({
+	position: "relative",
+	marginInlineStart: "auto",
+	inlineSize: "var(--expanding-search-size)",
+	"--expanding-search-radius": l.radius.full,
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	pointerEvents: "auto",
+	overflow: "clip",
+	overflowClipMargin: l.space[1],
+	"&[data-state=\"open\"]": {
+		inlineSize: "var(--expanding-search-width)",
+		"--expanding-search-radius": l.radius.sm
+	},
+	"&[data-anchor=\"start\"]": {
+		marginInlineStart: 0,
+		marginInlineEnd: "auto"
+	}
+}), v = e({
+	position: "absolute",
+	insetBlockStart: 0,
+	insetInline: 0
+}), ae = e({
+	position: "absolute",
+	inlineSize: "var(--expanding-search-width)",
+	maxInlineSize: "100%",
+	blockSize: "var(--expanding-search-size)",
+	borderStartStartRadius: l.radius.sm,
+	visibility: "hidden",
+	pointerEvents: "none"
+}), oe = e({
+	inlineSize: "100%",
+	paddingInline: 0,
+	borderRadius: "var(--expanding-search-radius)",
+	borderColor: l.color.borderControl,
+	backgroundColor: l.color.surfaceRaised,
+	[t]: {
+		borderColor: "ButtonText",
+		color: "ButtonText"
+	}
+}), se = e({
+	borderRadius: "var(--expanding-search-radius)",
+	overflow: "clip"
+}), ce = e({
+	display: "flex",
+	inlineSize: l.space[4],
+	blockSize: l.space[4],
+	"& > svg": {
+		inlineSize: "100%",
+		blockSize: "100%"
+	}
+}), y = /* @__PURE__ */ d("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	children: [/* @__PURE__ */ u("circle", {
+		cx: "10.5",
+		cy: "10.5",
+		r: "6.5"
+	}), /* @__PURE__ */ u("path", { d: "m16 16 5 5" })]
+}), le = (e, t) => e?.expanded === t.expanded && e.size === t.size && e.radius === t.radius;
+function b({ ref: e, inputRef: t, triggerLabel: m, open: b, defaultOpen: ue = !1, onOpenChange: x, anchor: S = "end", expandedWidth: C = `calc(${l.space[12]} * 8)`, size: w = "md", disabled: T, value: de, defaultValue: fe, onValueChange: pe, label: E, description: D, error: O, clearable: k, messages: A, searchIcon: j = y, clearIcon: M, slotProps: N, inputProps: P, className: F, sx: I, dir: L, style: R, onKeyDown: z, onBlur: B, ...me }) {
+	let [V = !1, H] = r(b, ue, x), U = c(null), W = c(null), G = c(null), K = c(null), q = c(null), he = h([U, e]), ge = h([G, t]), J = ee(), Y = c(null), [X, _e] = te(), Z = p(0), Q = p(0), $ = c(void 0);
+	s(() => {
+		let e = U.current, t = q.current;
+		if (!e || !t) return;
+		let n = () => {
+			let e = t.getBoundingClientRect(), n = {
+				expanded: e.width,
+				size: e.height,
+				radius: Number.parseFloat(getComputedStyle(t).borderStartStartRadius)
+			};
+			_e((e) => le(e, n) ? e : n);
+		};
+		n();
+		let r = e.ownerDocument.defaultView?.ResizeObserver;
+		if (!r) return;
+		let i = new r(n);
+		return i.observe(e), i.observe(t), () => i.disconnect();
+	}, [C]), s(() => {
+		let e = W.current;
+		if (!e || !X) return;
+		let t = V ? {
+			width: X.expanded,
+			radius: X.radius
+		} : {
+			width: X.size,
+			radius: X.size / 2
+		}, n = () => {
+			e.style.inlineSize = `${Z.get()}px`, e.style.setProperty("--expanding-search-radius", `${Q.get()}px`);
+		}, r = () => {
+			Z.jump(t.width), Q.jump(t.radius), n();
+		}, i = [Z.on("change", n), Q.on("change", n)], a = e.ownerDocument.defaultView?.matchMedia(ne);
+		$.current === void 0 || $.current === V || a?.matches ? r() : (f(Z, t.width, g), f(Q, t.radius, g)), $.current = V;
+		let o = () => {
+			a?.matches && r();
+		};
+		return a?.addEventListener("change", o), () => {
+			i.forEach((e) => e()), a?.removeEventListener("change", o), Z.stop(), Q.stop();
+		};
+	}, [
+		V,
+		X,
+		Z,
+		Q
+	]), s(() => {
+		let e = U.current;
+		if (!e) return;
+		let t = e.ownerDocument.activeElement;
+		V && Y.current === "input" ? (Y.current = null, (e.contains(t) || t === e.ownerDocument.body) && G.current?.focus()) : !V && Y.current === "trigger" && (Y.current = null, (e.contains(t) || t === e.ownerDocument.body) && K.current?.focus());
+	}, [V]);
+	let ve = P?.["aria-label"] ?? (!i(E) || E === "" ? m : void 0);
+	return /* @__PURE__ */ u(n, {
+		className: F,
+		styles: [re, ie[w]],
+		sx: I,
+		children: (e) => /* @__PURE__ */ d("div", {
+			...me,
+			ref: he,
+			className: e,
+			dir: L,
+			"data-ui": "expanding-search",
+			"data-state": V ? "open" : "closed",
+			style: {
+				"--expanding-search-width": C,
+				...R
+			},
+			onKeyDown: (e) => {
+				z?.(e), !(e.defaultPrevented || !V || T || e.key !== "Escape" || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) && (e.preventDefault(), Y.current = "trigger", H(!1));
+			},
+			onBlur: (e) => {
+				if (B?.(e), e.defaultPrevented || !V) return;
+				let t = e.currentTarget, n = e.relatedTarget;
+				n && !t.contains(n) ? (Y.current = null, H(!1)) : n || queueMicrotask(() => {
+					t.isConnected && t.ownerDocument.hasFocus() && !t.contains(t.ownerDocument.activeElement) && (Y.current = null, H(!1));
+				});
+			},
+			children: [/* @__PURE__ */ u("span", {
+				ref: q,
+				"aria-hidden": !0,
+				css: ae
+			}), /* @__PURE__ */ d("div", {
+				ref: W,
+				css: _,
+				"data-anchor": S,
+				"data-state": V ? "open" : "closed",
+				children: [/* @__PURE__ */ u("div", {
+					hidden: V,
+					inert: V,
+					css: v,
+					children: /* @__PURE__ */ u(a, {
+						ref: K,
+						size: w,
+						variant: "outline",
+						disabled: T,
+						"aria-label": m,
+						"aria-expanded": V,
+						"aria-controls": J,
+						css: oe,
+						onClick: () => {
+							Y.current = "input", H(!0);
+						},
+						children: /* @__PURE__ */ u("span", {
+							"aria-hidden": !0,
+							css: ce,
+							children: j
+						})
+					})
+				}), /* @__PURE__ */ u("div", {
+					id: J,
+					"aria-hidden": !V || void 0,
+					inert: !V,
+					style: { visibility: V ? "visible" : "hidden" },
+					children: /* @__PURE__ */ u(o, {
+						...P,
+						ref: ge,
+						size: w,
+						dir: L,
+						disabled: T,
+						value: de,
+						defaultValue: fe,
+						onValueChange: pe,
+						label: E,
+						description: D,
+						error: O,
+						clearable: k,
+						messages: A,
+						searchIcon: j,
+						clearIcon: M,
+						"aria-label": ve,
+						slotProps: {
+							...N,
+							shell: {
+								...N?.shell,
+								css: [se, N?.shell?.css]
+							}
+						},
+						onKeyDown: (e) => {
+							P?.onKeyDown?.(e), !(e.defaultPrevented || T || e.key !== "Escape" || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) && (e.preventDefault(), Y.current = "trigger", H(!1));
+						}
+					})
+				})]
+			})]
+		})
+	});
+}
+b.displayName = "ExpandingSearch";
+//#endregion
+export { b as t };

package/dist/expanding-search.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as ExpandingSearch } from "./expanding-search-Bb2_YfNx.js";

package/dist/{field-anatomy-COVdNpf5.js → field-anatomy-BDIP42MI.js}

@@ -1,5 +1,6 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./sx-BJXJ2xJK.js";
 import { t as n } from "./renderable-DzcIj1Lo.js";
 import { useId as r } from "react";
 import { vars as i } from "@jfrader/tokens/vars";