@jfrader/ui 0.5.1 → 0.6.0

package/dist/{expandable-card-rUATve0o.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,8 @@ var O = {
 		minBlockSize: _.space[12],
 		padding: _.space[3]
 	},
-	[a]: { "&::after": { transitionDuration: "0s" } },
-	[i]: {
+	[i]: { "&::after": { transitionDuration: "0s" } },
+	[r]: {
 		"&:focus-visible": { outlineColor: "Highlight" },
 		"&::after": {
 			forcedColorAdjust: "none",
@@ -122,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;
@@ -143,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();
 		};
 	}, [
@@ -176,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: _,
@@ -199,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
 					})
 				})
 			})
@@ -207,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,
@@ -223,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 = () => {
@@ -287,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
 					});
@@ -312,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,
@@ -325,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-rUATve0o.js";
+export { t as ExpandableCard } from "./expandable-card-W97vjix9.js";

package/dist/{expanding-search-BxOwtdwt.js → expanding-search-Bb2_YfNx.js}

@@ -1,20 +1,21 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./media-8yrN85VT.js";
+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-NLY0h6EJ.js";
-import { t as o } from "./search-field-DMvho0KQ.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 { useMergeRefs as f } from "@floating-ui/react";
-import { animate as p, useMotionValue as m } from "motion/react";
-import { base as h } from "@jfrader/tokens";
+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(h.motion.duration.slow) / 1e3,
+	visualDuration: Number.parseFloat(m.motion.duration.slow) / 1e3,
 	bounce: 0
 }, ne = "(prefers-reduced-motion: reduce)", re = e({
 	position: "relative",
@@ -62,7 +63,7 @@ var g = {
 	borderRadius: "var(--expanding-search-radius)",
 	borderColor: l.color.borderControl,
 	backgroundColor: l.color.surfaceRaised,
-	[n]: {
+	[t]: {
 		borderColor: "ButtonText",
 		color: "ButtonText"
 	}
@@ -88,8 +89,8 @@ var g = {
 		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: n, triggerLabel: h, 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 = f([U, e]), ge = f([G, n]), J = ee(), Y = c(null), [X, _e] = te(), Z = m(0), Q = m(0), $ = c(void 0);
+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;
@@ -120,7 +121,7 @@ function b({ ref: e, inputRef: n, triggerLabel: h, open: b, defaultOpen: ue = !1
 		}, 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() : (p(Z, t.width, g), p(Q, t.radius, g)), $.current = V;
+		$.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();
 		};
@@ -138,8 +139,8 @@ function b({ ref: e, inputRef: n, triggerLabel: h, open: b, defaultOpen: ue = !1
 		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 === "" ? h : void 0);
-	return /* @__PURE__ */ u(t, {
+	let ve = P?.["aria-label"] ?? (!i(E) || E === "" ? m : void 0);
+	return /* @__PURE__ */ u(n, {
 		className: F,
 		styles: [re, ie[w]],
 		sx: I,
@@ -182,7 +183,7 @@ function b({ ref: e, inputRef: n, triggerLabel: h, open: b, defaultOpen: ue = !1
 						size: w,
 						variant: "outline",
 						disabled: T,
-						"aria-label": h,
+						"aria-label": m,
 						"aria-expanded": V,
 						"aria-controls": J,
 						css: oe,

package/dist/expanding-search.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ExpandingSearch } from "./expanding-search-BxOwtdwt.js";
+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";

package/dist/{file-dropzone-BuXm3Tea.js → file-dropzone-Bi5ikRIz.js}

@@ -1,13 +1,14 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./focus-ring-BK5W5_NY.js";
-import { n as r, r as i } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
 import { t as a } from "./use-latest-callback-cj1OOQL6.js";
 import { t as ee } from "./use-controlled-state-DpeVQZNR.js";
-import { t as te } from "./visually-hidden-BJdvqqvn.js";
+import { t as te } from "./visually-hidden-DgVO3NaB.js";
 import { t as o } from "./renderable-DzcIj1Lo.js";
-import { t as ne } from "./button-NLY0h6EJ.js";
-import { t as re } from "./progress-DAQkfhPd.js";
+import { t as ne } from "./button-C6OV0C7J.js";
+import { t as re } from "./progress-Bcuz3Ob4.js";
 import { useEffect as s, useId as ie, useRef as c, useState as l } from "react";
 import { vars as u } from "@jfrader/tokens/vars";
 import { createElement as ae } from "@emotion/react";
@@ -33,13 +34,13 @@ var oe = e({
 	transitionProperty: "background-color, border-color",
 	transitionDuration: u.motion.duration.fast,
 	transitionTimingFunction: u.motion.easeStandard,
-	"&:has(input:focus-visible)": n,
+	"&:has(input:focus-visible)": t,
 	"&[data-dragging=\"true\"]": {
 		borderStyle: "solid",
 		backgroundColor: u.color.surfaceHover
 	},
-	[i]: { transitionDuration: "0s" },
-	[r]: { borderColor: "ButtonText" }
+	[r]: { transitionDuration: "0s" },
+	[n]: { borderColor: "ButtonText" }
 }), ce = e({
 	display: "grid",
 	justifyItems: "center",
@@ -138,8 +139,8 @@ function ke(e, t) {
 		maximumFractionDigits: 1
 	}).format(e / h ** Math.max(0, n));
 }
-function v({ ref: e, value: n, defaultValue: r = Ce, onValueChange: i, onReject: u, accept: h, multiple: g = !0, maxFiles: v = we, maxSize: y, validate: Ae, onUpload: b, listPlacement: x = "below", compactAt: S, label: C, description: w, note: je, dropLabel: T, error: E, messages: D, locale: Me, disabled: O = !1, readOnly: k = !1, required: Ne = !1, size: Pe = "md", paste: Fe = !0, renderFileIcon: Ie, name: Le, inputRef: Re, slotProps: A, className: ze, sx: Be, onDragEnter: Ve, onDragOver: He, onDragLeave: Ue, onDrop: We, onPaste: Ge, ...Ke }) {
-	let j = ie(), qe = c(r), [M = Ce, Je, Ye] = ee(n, qe.current, i), N = c(null), P = c(null), Xe = p([P, e]), Ze = p([N, Re]), F = c(/* @__PURE__ */ new Map()), I = c(/* @__PURE__ */ new Map()), L = c(/* @__PURE__ */ new Map()), R = c(null), [, Qe] = l(0), z = () => Qe((e) => e + 1), [B, V] = l(!1), H = c(0), [U, $e] = l([]), [et, W] = l(""), [tt, nt] = l(/* @__PURE__ */ new Set()), G = O || k, K = o(C) && C !== "", rt = o(w), q = o(je), J = o(E) || U.length > 0, Y = A?.input, it = Y?.id ?? `${j}-input`, at = [
+function v({ ref: e, value: t, defaultValue: n = Ce, onValueChange: r, onReject: u, accept: h, multiple: g = !0, maxFiles: v = we, maxSize: y, validate: Ae, onUpload: b, listPlacement: x = "below", compactAt: S, label: C, description: w, note: je, dropLabel: T, error: E, messages: D, locale: Me, disabled: O = !1, readOnly: k = !1, required: Ne = !1, size: Pe = "md", paste: Fe = !0, renderFileIcon: Ie, name: Le, inputRef: Re, slotProps: A, className: ze, sx: Be, onDragEnter: Ve, onDragOver: He, onDragLeave: Ue, onDrop: We, onPaste: Ge, ...Ke }) {
+	let j = ie(), qe = c(n), [M = Ce, Je, Ye] = ee(t, qe.current, r), N = c(null), P = c(null), Xe = p([P, e]), Ze = p([N, Re]), F = c(/* @__PURE__ */ new Map()), I = c(/* @__PURE__ */ new Map()), L = c(/* @__PURE__ */ new Map()), R = c(null), [, Qe] = l(0), z = () => Qe((e) => e + 1), [B, V] = l(!1), H = c(0), [U, $e] = l([]), [et, W] = l(""), [tt, nt] = l(/* @__PURE__ */ new Set()), G = O || k, K = o(C) && C !== "", rt = o(w), q = o(je), J = o(E) || U.length > 0, Y = A?.input, it = Y?.id ?? `${j}-input`, at = [
 		Y?.["aria-describedby"],
 		rt && `${j}-description`,
 		q && `${j}-note`,
@@ -194,7 +195,7 @@ function v({ ref: e, value: n, defaultValue: r = Ce, onValueChange: i, onReject:
 		L.current.clear(), I.current.clear();
 	}, []);
 	let lt = a(() => {
-		I.current.clear(), $e([]), W(""), n === void 0 ? Ye() : X(qe.current);
+		I.current.clear(), $e([]), W(""), t === void 0 ? Ye() : X(qe.current);
 	});
 	s(() => {
 		let e = N.current?.form, t = (e) => {
@@ -325,7 +326,7 @@ function v({ ref: e, value: n, defaultValue: r = Ce, onValueChange: i, onReject:
 			}));
 		})
 	}), $ = S !== void 0 && S > 0 && M.length >= S && !B;
-	return /* @__PURE__ */ d(t, {
+	return /* @__PURE__ */ d(i, {
 		className: [A?.root?.className, ze].filter(Boolean).join(" "),
 		styles: [oe, A?.root?.css],
 		sx: Be,

package/dist/file-dropzone.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as FileDropzone } from "./file-dropzone-BuXm3Tea.js";
+export { t as FileDropzone } from "./file-dropzone-Bi5ikRIz.js";

package/dist/{filter-toolbar-Cy5Hqur-.js → filter-toolbar-QRnC4S_H.js}

@@ -1,10 +1,11 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./focus-ring-BK5W5_NY.js";
-import { n as r } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n } from "./media-8yrN85VT.js";
+import { t as r } from "./sx-BJXJ2xJK.js";
 import { t as i } from "./use-controlled-state-DpeVQZNR.js";
 import { t as a } from "./renderable-DzcIj1Lo.js";
-import { t as o } from "./button-NLY0h6EJ.js";
+import { t as o } from "./button-C6OV0C7J.js";
 import { createContext as s, useContext as c, useLayoutEffect as l, useMemo as u, useRef as d } from "react";
 import { vars as f } from "@jfrader/tokens/vars";
 import { jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
@@ -58,8 +59,8 @@ var T = e({
 	color: f.color.text,
 	fontFamily: f.font.sans,
 	fontSize: f.textSize.sm,
-	"&:focus": n,
-	[r]: {
+	"&:focus": t,
+	[n]: {
 		borderColor: "CanvasText",
 		backgroundColor: "Canvas",
 		color: "CanvasText"
@@ -79,7 +80,7 @@ var T = e({
 	borderRadius: f.radius.full,
 	backgroundColor: f.color.surfaceHover,
 	color: f.color.text,
-	[r]: {
+	[n]: {
 		borderColor: "CanvasText",
 		backgroundColor: "Canvas",
 		color: "CanvasText"
@@ -97,7 +98,7 @@ var T = e({
 	padding: 0,
 	borderRadius: f.radius.full,
 	color: f.color.text,
-	[r]: { borderColor: "ButtonText" }
+	[n]: { borderColor: "ButtonText" }
 }), N = e({
 	alignSelf: "flex-start",
 	maxInlineSize: "100%",
@@ -107,7 +108,7 @@ var T = e({
 	whiteSpace: "normal",
 	overflowWrap: "anywhere",
 	borderColor: f.color.borderControl,
-	[r]: { borderColor: "ButtonText" }
+	[n]: { borderColor: "ButtonText" }
 }), P = e({
 	margin: 0,
 	minInlineSize: 0,
@@ -116,8 +117,8 @@ var T = e({
 	fontSize: f.textSize.sm,
 	lineHeight: f.lineHeight.base
 });
-function F({ ref: e, value: n, defaultValue: r = g, onValueChange: a, disabled: o = !1, label: s = "Filters", messages: c, className: f, sx: m, children: y, "aria-label": b, "aria-labelledby": w, tabIndex: T = -1, ...D }) {
-	let [O = g, k] = i(n, r, a), A = u(() => x(O), [O]), j = d(null), M = h([j, e]), N = d(null), P = u(() => ({
+function F({ ref: e, value: t, defaultValue: n = g, onValueChange: a, disabled: o = !1, label: s = "Filters", messages: c, className: f, sx: m, children: y, "aria-label": b, "aria-labelledby": w, tabIndex: T = -1, ...D }) {
+	let [O = g, k] = i(t, n, a), A = u(() => x(O), [O]), j = d(null), M = h([j, e]), N = d(null), P = u(() => ({
 		...v,
 		...c
 	}), [c]), F = u(() => {
@@ -166,7 +167,7 @@ function F({ ref: e, value: n, defaultValue: r = g, onValueChange: a, disabled:
 		(a ?? o ?? t).focus();
 	}, [A]), /* @__PURE__ */ p(C.Provider, {
 		value: F,
-		children: /* @__PURE__ */ p(t, {
+		children: /* @__PURE__ */ p(r, {
 			className: f,
 			styles: E,
 			sx: m,
@@ -186,12 +187,12 @@ function F({ ref: e, value: n, defaultValue: r = g, onValueChange: a, disabled:
 	});
 }
 F.displayName = "FilterToolbar";
-function I({ children: e, className: n, sx: r, ...i }) {
+function I({ children: e, className: t, sx: n, ...i }) {
 	let { value: a, disabled: o, onValueChange: s } = w("Controls");
-	return /* @__PURE__ */ p(t, {
-		className: n,
+	return /* @__PURE__ */ p(r, {
+		className: t,
 		styles: T,
-		sx: r,
+		sx: n,
 		children: (t) => /* @__PURE__ */ p("div", {
 			...i,
 			"data-ui": "filter-toolbar-controls",
@@ -205,29 +206,29 @@ function I({ children: e, className: n, sx: r, ...i }) {
 	});
 }
 I.displayName = "FilterToolbar.Controls";
-function L({ empty: e, slotProps: n, className: r, sx: i, ...s }) {
+function L({ empty: e, slotProps: t, className: n, sx: i, ...s }) {
 	let { value: c, disabled: l, messages: u, remove: d } = w("ActiveFilters");
-	return /* @__PURE__ */ p(t, {
-		className: r,
+	return /* @__PURE__ */ p(r, {
+		className: n,
 		styles: T,
 		sx: i,
-		children: (t) => /* @__PURE__ */ p("div", {
+		children: (n) => /* @__PURE__ */ p("div", {
 			...s,
 			"data-ui": "filter-toolbar-active-filters",
-			className: t,
+			className: n,
 			children: c.length > 0 ? /* @__PURE__ */ p("ul", {
-				className: n?.list?.className,
+				className: t?.list?.className,
 				css: [
 					T,
 					D,
-					n?.list?.css
+					t?.list?.css
 				],
 				children: c.map((e) => /* @__PURE__ */ m("li", {
-					className: n?.chip?.className,
-					css: [O, n?.chip?.css],
+					className: t?.chip?.className,
+					css: [O, t?.chip?.css],
 					children: [/* @__PURE__ */ m("span", {
-						className: n?.label?.className,
-						css: [k, n?.label?.css],
+						className: t?.label?.className,
+						css: [k, t?.label?.css],
 						children: [/* @__PURE__ */ m("span", {
 							css: A,
 							children: [e.label, ": "]
@@ -242,8 +243,8 @@ function L({ empty: e, slotProps: n, className: r, sx: i, ...s }) {
 						"aria-label": u.remove(e),
 						"data-ui": "filter-toolbar-remove",
 						"data-filter-id": e.id,
-						className: n?.remove?.className,
-						css: [M, n?.remove?.css],
+						className: t?.remove?.className,
+						css: [M, t?.remove?.css],
 						onClick: (t) => d(e, t.currentTarget),
 						render: (e) => /* @__PURE__ */ p("button", {
 							...e,
@@ -284,10 +285,10 @@ function R({ children: e, onClick: t, disabled: n = !1, css: r, ...i }) {
 	});
 }
 R.displayName = "FilterToolbar.Clear";
-function z({ count: e, locale: n, formatCount: r = b, loading: i = !1, loadingLabel: a = "Loading results", unknownLabel: o = "Results unavailable", className: s, sx: c, ...l }) {
+function z({ count: e, locale: t, formatCount: n = b, loading: i = !1, loadingLabel: a = "Loading results", unknownLabel: o = "Results unavailable", className: s, sx: c, ...l }) {
 	w("ResultCount");
-	let u = e !== null && Number.isFinite(e) && Number.isInteger(e) && e >= 0 ? r(e, new Intl.NumberFormat(n).format(e)) : o;
-	return /* @__PURE__ */ p(t, {
+	let u = e !== null && Number.isFinite(e) && Number.isInteger(e) && e >= 0 ? n(e, new Intl.NumberFormat(t).format(e)) : o;
+	return /* @__PURE__ */ p(r, {
 		className: s,
 		styles: P,
 		sx: c,

package/dist/filter-toolbar.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as FilterToolbar } from "./filter-toolbar-Cy5Hqur-.js";
+export { t as FilterToolbar } from "./filter-toolbar-QRnC4S_H.js";

package/dist/{flex-Dh-_J5-U.js → flex-CS7eMRcK.js}

@@ -1,6 +1,6 @@
 'use client';
-import { t as e } from "./sx-Dx9JUKp5.js";
-import { t } from "./layout-style-Cbd1Vilw.js";
+import { t as e } from "./sx-BJXJ2xJK.js";
+import { t } from "./layout-style-BE0gSqrH.js";
 import { jsx as n } from "@emotion/react/jsx-runtime";
 //#region src/components/flex/flex.tsx
 function r({ ref: r, direction: i, wrap: a, inline: o, align: s, justify: c, gap: l, className: u, sx: d, ...f }) {

package/dist/flex.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Flex } from "./flex-Dh-_J5-U.js";
+export { t as Flex } from "./flex-CS7eMRcK.js";