@agentero/design-system 0.9.7 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.9.7",
+	"version": "0.10.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -21,6 +21,10 @@
 		"radix-ui"
 	],
 	"exports": {
+		"./accordion": {
+			"types": "./src/accordion/index.d.ts",
+			"import": "./src/accordion/index.js"
+		},
 		"./alert": {
 			"types": "./src/alert/index.d.ts",
 			"import": "./src/alert/index.js"
@@ -69,12 +73,13 @@
 		"design-system-mcp": "./mcp/server.mjs"
 	},
 	"peerDependencies": {
+		"@tanstack/react-table": "^8.21.3",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
-		"tailwindcss": "^4.0.0",
-		"@tanstack/react-table": "^8.21.3"
+		"tailwindcss": "^4.0.0"
 	},
 	"dependencies": {
+		"@radix-ui/react-accordion": "^1.2.14",
 		"@radix-ui/react-avatar": "^1.1.11",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-separator": "^1.1.8",

package/src/accordion/accordion.d.ts

@@ -0,0 +1,46 @@
+import { ComponentProps } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+declare const rootStyles: import('tailwind-variants').TVReturnType<{
+    enclosed: {
+        true: string;
+    };
+}, undefined, undefined, {
+    enclosed: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    enclosed: {
+        true: string;
+    };
+}, undefined, undefined, unknown, unknown, undefined>>;
+export type AccordionRootProps = ComponentProps<typeof AccordionPrimitive.Root> & VariantProps<typeof rootStyles>;
+export type AccordionItemProps = ComponentProps<typeof AccordionPrimitive.Item>;
+export type AccordionTriggerProps = ComponentProps<typeof AccordionPrimitive.Trigger>;
+export type AccordionContentProps = ComponentProps<typeof AccordionPrimitive.Content>;
+/**
+ * Stacked, collapsible sections built on Radix UI's Accordion (keyboard nav and
+ * ARIA come for free). Compose `Root` with `Item`s, each holding a `Trigger` and
+ * `Content`. `type="single"` (optionally `collapsible`) opens one at a time;
+ * `type="multiple"` opens sections independently. `enclosed` renders the group
+ * as a bordered card.
+ */
+export declare const Accordion: {
+    Root: {
+        ({ className, enclosed, ...props }: AccordionRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ className, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        ({ className, children, asChild, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ className, children, ...props }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/src/accordion/accordion.js

@@ -0,0 +1,54 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { IconKeyboardArrowDown as t } from "./icons.js";
+import * as n from "@radix-ui/react-accordion";
+import { tv as r } from "tailwind-variants";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/accordion/accordion.tsx
+var s = r({ variants: { enclosed: { true: "rounded-lg border border-border-default-base-primary shadow-sm" } } }), c = ({ className: t, enclosed: r, ...i }) => /* @__PURE__ */ a(n.Root, {
+	"data-slot": "accordion-root",
+	className: e(s({ enclosed: r }), t),
+	...i
+});
+c.displayName = "Accordion.Root";
+var l = ({ className: t, ...r }) => /* @__PURE__ */ a(n.Item, {
+	"data-slot": "accordion-item",
+	className: e("border-b border-border-default-base-primary last:border-b-0", t),
+	...r
+});
+l.displayName = "Accordion.Item";
+var u = ({ className: t, ...r }) => /* @__PURE__ */ a(n.Header, {
+	"data-slot": "accordion-header",
+	className: e("flex", t),
+	...r
+});
+u.displayName = "Accordion.Header";
+var d = ({ className: r, children: s, asChild: c, ...l }) => /* @__PURE__ */ a(u, { children: /* @__PURE__ */ a(n.Trigger, {
+	"data-slot": "accordion-trigger",
+	asChild: c,
+	className: e("group flex flex-1 cursor-pointer items-center justify-between p-4 transition-colors hover:text-text-default-base-secondary", "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring-button-primary", "data-disabled:cursor-not-allowed data-disabled:pointer-events-none data-disabled:text-text-default-disable-primary", r),
+	...l,
+	children: c ? s : /* @__PURE__ */ o(i, { children: [s, /* @__PURE__ */ a(t, {
+		"aria-hidden": !0,
+		className: "size-4 shrink-0 group-data-[state=open]:rotate-180 motion-safe:transition-transform motion-safe:duration-200"
+	})] })
+}) });
+d.displayName = "Accordion.Trigger";
+var f = ({ className: t, children: r, ...i }) => /* @__PURE__ */ a(n.Content, {
+	"data-slot": "accordion-content",
+	className: e("overflow-hidden px-4 text-sm", "motion-safe:data-[state=open]:animate-[accordionDown_200ms_ease-out]", "motion-safe:data-[state=closed]:animate-[accordionUp_200ms_ease-out]", t),
+	...i,
+	children: /* @__PURE__ */ a("div", {
+		className: "pb-4",
+		children: r
+	})
+});
+f.displayName = "Accordion.Content";
+var p = {
+	Root: c,
+	Item: l,
+	Trigger: d,
+	Content: f
+};
+//#endregion
+export { p as Accordion };

package/src/accordion/icons.d.ts

@@ -0,0 +1,10 @@
+import { SVGProps } from 'react';
+/**
+ * Downward chevron glyph rendered inside `Accordion.Trigger` as the
+ * expand/collapse affordance. Rotates 180° when its item is expanded (driven
+ * by the trigger's `data-state=open` via a `group-data-*` class). The fill
+ * follows `currentColor` so it inherits the trigger's text color token.
+ *
+ * @summary 24px chevron-down icon used as the accordion trigger affordance
+ */
+export declare const IconKeyboardArrowDown: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/accordion/icons.js

@@ -0,0 +1,16 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/accordion/icons.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", {
+		fill: "currentColor",
+		d: "M12 14.677a.83.83 0 0 1-.633-.256L6.873 9.927a.73.73 0 0 1-.212-.522.7.7 0 0 1 .212-.532.72.72 0 0 1 .527-.217q.31 0 .527.217L12 12.946l4.073-4.073a.73.73 0 0 1 .522-.212.7.7 0 0 1 .532.212q.217.217.217.527a.72.72 0 0 1-.217.527l-4.494 4.494a.83.83 0 0 1-.633.256"
+	})
+});
+//#endregion
+export { t as IconKeyboardArrowDown };

package/src/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion } from './accordion';
+export type { AccordionRootProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps } from './accordion';

package/src/accordion/index.js

@@ -0,0 +1,2 @@
+import { Accordion as e } from "./accordion.js";
+export { e as Accordion };

package/src/alert/alert.js

@@ -2,11 +2,11 @@
 import { cn as e } from "../../lib/utils.js";
 import { Button as t } from "../button/button.js";
 import { IconCheckCircle as n, IconClose as r, IconErrorOutline as i, IconInfoOutline as a, IconStar as o, IconWarning as s } from "./icons.js";
-import { Children as c, createContext as l, isValidElement as u, use as d, useId as f } from "react";
-import { tv as p } from "tailwind-variants";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { tv as c } from "tailwind-variants";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Children as d, createContext as f, isValidElement as p, use as m, useId as h } from "react";
 //#region src/alert/alert.tsx
-var g = p({
+var g = c({
 	slots: {
 		root: [
 			"flex items-start rounded-md",
@@ -193,8 +193,8 @@ var g = p({
 		size: "sm",
 		ghost: !1
 	}
-}), _ = l(null), v = () => {
-	let e = d(_);
+}), _ = f(null), v = () => {
+	let e = m(_);
 	if (!e) throw Error("useAlert must be used within an Alert");
 	return e;
 }, y = {
@@ -208,7 +208,7 @@ var g = p({
 	playful: a
 }, b = ({ className: t, children: n, ...r }) => {
 	let { slotsStyles: i, titleId: a } = v();
-	return /* @__PURE__ */ m("h3", {
+	return /* @__PURE__ */ l("h3", {
 		id: a,
 		"data-slot": "alert-title",
 		...r,
@@ -217,7 +217,7 @@ var g = p({
 	});
 }, x = ({ className: t, children: n, ...r }) => {
 	let { slotsStyles: i } = v();
-	return /* @__PURE__ */ m("p", {
+	return /* @__PURE__ */ l("p", {
 		"data-slot": "alert-paragraph",
 		...r,
 		className: e(i.paragraph(), t),
@@ -225,7 +225,7 @@ var g = p({
 	});
 }, S = ({ html: t, className: n, ...r }) => {
 	let { slotsStyles: i } = v();
-	return /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ l("div", {
 		"data-slot": "alert-paragraph",
 		...r,
 		className: e(i.paragraph(), n),
@@ -233,71 +233,71 @@ var g = p({
 	});
 }, C = ({ className: t, children: n, ...r }) => {
 	let { slotsStyles: i } = v();
-	return /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ l("div", {
 		"data-slot": "alert-content",
 		...r,
 		className: e(i.content(), t),
 		children: n
 	});
-}, w = ({ className: t, children: n, ...r }) => /* @__PURE__ */ m("div", {
+}, w = ({ className: t, children: n, ...r }) => /* @__PURE__ */ l("div", {
 	"data-slot": "alert-actions",
 	...r,
 	className: e("ml-auto flex flex-col items-center justify-center gap-2", t),
 	children: n
-}), T = ({ className: t, children: n, ...r }) => /* @__PURE__ */ m("div", {
+}), T = ({ className: t, children: n, ...r }) => /* @__PURE__ */ l("div", {
 	...r,
 	className: e("[&_svg]:h-16! [&_svg]:w-16!", t),
 	children: n
-}), E = ({ className: n, ...r }) => /* @__PURE__ */ m(t, {
+}), E = ({ className: n, ...r }) => /* @__PURE__ */ l(t, {
 	variant: "link",
 	className: e("text-current", n),
 	...r
-}), D = (e, t) => c.toArray(e).some((e) => {
-	if (!u(e)) return !1;
+}), D = (e, t) => d.toArray(e).some((e) => {
+	if (!p(e)) return !1;
 	if (e.type === t) return !0;
 	let n = e.props.children;
 	return n ? D(n, t) : !1;
-}), O = ({ children: n, onDismiss: i, hasIcon: a = !0, icon: o, color: s = "neutral", size: c = "sm", ghost: l = !1, className: u, ...d }) => {
-	let p = g({
+}), O = ({ children: n, onDismiss: i, hasIcon: a = !0, icon: o, color: s = "neutral", size: c = "sm", ghost: d = !1, className: f, ...p }) => {
+	let m = g({
 		color: s,
 		size: c,
-		ghost: l
-	}), v = f(), C = `${v}-title`, w = `${v}-desc`, T = D(n, b), E = D(n, x) || D(n, S), O = o ?? y[s], k = o ? !0 : a;
-	return /* @__PURE__ */ m(_, {
+		ghost: d
+	}), v = h(), C = `${v}-title`, w = `${v}-desc`, T = D(n, b), E = D(n, x) || D(n, S), O = o ?? y[s], k = o ? !0 : a;
+	return /* @__PURE__ */ l(_, {
 		value: {
 			size: c,
-			slotsStyles: p,
+			slotsStyles: m,
 			titleId: C,
 			descId: w
 		},
-		children: /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ u("div", {
 			role: "alert",
 			"aria-labelledby": T ? C : void 0,
 			"aria-describedby": E ? w : void 0,
 			"data-slot": "alert-root",
-			...d,
-			className: e(p.root(), u),
+			...p,
+			className: e(m.root(), f),
 			children: [
-				i && /* @__PURE__ */ m("div", {
+				i && /* @__PURE__ */ l("div", {
 					className: e("order-last ml-auto self-center", {
 						"pl-2.5": c === "sm",
 						"pl-0.5": c === "md"
 					}),
-					children: /* @__PURE__ */ m(t, {
+					children: /* @__PURE__ */ l(t, {
 						variant: "ghost",
 						size: c,
 						iconOnly: !0,
 						"aria-label": "Dismiss",
 						className: "text-current",
 						onClick: i,
-						children: /* @__PURE__ */ m(r, { className: "[&_path]:fill-current" })
+						children: /* @__PURE__ */ l(r, { className: "[&_path]:fill-current" })
 					})
 				}),
-				k && /* @__PURE__ */ m(O, {
-					className: p.icon(),
+				k && /* @__PURE__ */ l(O, {
+					className: m.icon(),
 					"data-slot": "alert-icon"
 				}),
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ l("div", {
 					id: w,
 					className: "flex w-full items-center gap-10",
 					children: n

package/src/avatar/avatar.js

@@ -1,11 +1,11 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import { createContext as t, use as n } from "react";
-import { tv as r } from "tailwind-variants";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { tv as t } from "tailwind-variants";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { createContext as i, use as a } from "react";
 import * as o from "@radix-ui/react-avatar";
 //#region src/avatar/avatar.tsx
-var s = r({
+var s = t({
 	slots: {
 		root: [
 			"flex items-center justify-center align-middle",
@@ -126,43 +126,43 @@ var s = r({
 		variant: "circle",
 		type: "photo"
 	}
-}), c = t(null), l = () => {
-	let e = n(c);
+}), c = i(null), l = () => {
+	let e = a(c);
 	if (!e) throw Error("useAvatar must be used within an AvatarProvider");
 	return e;
-}, u = ({ size: t, variant: n, type: r, ...a }) => {
+}, u = ({ size: t, variant: r, type: i, ...a }) => {
 	let l = s({
 		size: t,
-		variant: n,
-		type: r
+		variant: r,
+		type: i
 	});
-	return /* @__PURE__ */ i(c, {
+	return /* @__PURE__ */ n(c, {
 		value: {
 			size: t,
-			variant: n,
-			type: r,
+			variant: r,
+			type: i,
 			slotsStyles: l
 		},
-		children: /* @__PURE__ */ i(o.Root, {
+		children: /* @__PURE__ */ n(o.Root, {
 			...a,
 			className: e(l.root(), a.className)
 		})
 	});
 }, d = (t) => {
-	let { slotsStyles: n } = l();
-	return /* @__PURE__ */ i(o.Image, {
+	let { slotsStyles: r } = l();
+	return /* @__PURE__ */ n(o.Image, {
 		...t,
-		className: e(n.image(), t.className)
+		className: e(r.image(), t.className)
 	});
 }, f = (t) => {
-	let { slotsStyles: n } = l();
-	return /* @__PURE__ */ i(o.Fallback, {
+	let { slotsStyles: r } = l();
+	return /* @__PURE__ */ n(o.Fallback, {
 		...t,
-		className: e(n.fallback(), t.className)
+		className: e(r.fallback(), t.className)
 	});
-}, p = ({ alt: e, src: t, fallback: n, colorize: r, size: o, variant: s, type: c, ref: l, ...p }) => {
-	let m = r ? g(r) : void 0;
-	return /* @__PURE__ */ a(u, {
+}, p = ({ alt: e, src: t, fallback: i, colorize: a, size: o, variant: s, type: c, ref: l, ...p }) => {
+	let m = a ? g(a) : void 0;
+	return /* @__PURE__ */ r(u, {
 		...p,
 		ref: l,
 		size: o,
@@ -172,10 +172,10 @@ var s = r({
 			...m,
 			...p.style
 		},
-		children: [/* @__PURE__ */ i(d, {
+		children: [/* @__PURE__ */ n(d, {
 			alt: e,
 			src: t
-		}), /* @__PURE__ */ i(f, { children: n })]
+		}), /* @__PURE__ */ n(f, { children: i })]
 	});
 }, m = [
 	{

package/src/button/button.js

@@ -1,11 +1,11 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import { Children as t, isValidElement as n } from "react";
-import { tv as r } from "tailwind-variants";
-import { Slot as i, Slottable as a } from "@radix-ui/react-slot";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { tv as t } from "tailwind-variants";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Children as i, isValidElement as a } from "react";
+import { Slot as o, Slottable as s } from "@radix-ui/react-slot";
 //#region src/button/button.tsx
-var c = r({
+var c = t({
 	base: [
 		"relative inline-flex items-center",
 		"font-semibold rounded-md cursor-pointer",
@@ -243,13 +243,13 @@ var c = r({
 		size: "sm",
 		align: "center"
 	}
-}), l = () => /* @__PURE__ */ o("span", {
+}), l = () => /* @__PURE__ */ n("span", {
 	"aria-label": "loading",
 	role: "status",
 	className: e("absolute inset-0 grid place-items-center", "rounded-[inherit] bg-inherit", "before:content-[\"\"] before:block before:size-[1em]", "before:border-2 before:border-solid before:rounded-full", "before:border-current before:border-t-transparent", "before:animate-spin before:[animation-duration:0.5s]")
-}), u = ({ children: r, asChild: u, variant: d, size: f, status: p, loading: m, rounded: h, align: g, fitContent: _, disabled: v, iconOnly: y, ref: b, className: x, ...S }) => {
-	let C = u ? !!y : t.toArray(r).every((e) => n(e)), w = v || m;
-	process.env.NODE_ENV !== "production" && (m && d === "link" && console.warn("Button with variant link and loading is not supported"), C && d === "link" && console.warn("Button with no text and variant link is not supported. Use it with variant tertiary instead"), u && y && n(r) && t.toArray(r.props.children).some((e) => !n(e)) && console.warn("Button with asChild and iconOnly should only contain icon children; text found inside the wrapper element"));
+}), u = ({ children: t, asChild: u, variant: d, size: f, status: p, loading: m, rounded: h, align: g, fitContent: _, disabled: v, iconOnly: y, ref: b, className: x, ...S }) => {
+	let C = u ? !!y : i.toArray(t).every((e) => a(e)), w = v || m;
+	process.env.NODE_ENV !== "production" && (m && d === "link" && console.warn("Button with variant link and loading is not supported"), C && d === "link" && console.warn("Button with no text and variant link is not supported. Use it with variant tertiary instead"), u && y && a(t) && i.toArray(t.props.children).some((e) => !a(e)) && console.warn("Button with asChild and iconOnly should only contain icon children; text found inside the wrapper element"));
 	let T = e(c({
 		variant: d,
 		size: f,
@@ -260,7 +260,7 @@ var c = r({
 		align: g,
 		fitContent: _
 	}), x);
-	return /* @__PURE__ */ s(u ? i : "button", {
+	return /* @__PURE__ */ r(u ? o : "button", {
 		"data-slot": "button",
 		...u ? {
 			"aria-disabled": w || void 0,
@@ -269,7 +269,7 @@ var c = r({
 		...S,
 		className: T,
 		ref: b,
-		children: [m && /* @__PURE__ */ o(l, {}), u ? /* @__PURE__ */ o(a, { children: r }) : r]
+		children: [m && /* @__PURE__ */ n(l, {}), u ? /* @__PURE__ */ n(s, { children: t }) : t]
 	});
 };
 //#endregion

package/src/data-table/data-table.js

@@ -3,49 +3,49 @@ import { cn as e } from "../../lib/utils.js";
 import { IconArrowUpward as t, IconSwapVert as n } from "./icons.js";
 import { Table as r } from "./table.js";
 import { Pagination as i } from "../pagination/pagination.js";
-import { Fragment as a, createContext as o, use as s, useRef as c } from "react";
-import { tv as l } from "tailwind-variants";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { tv as a } from "tailwind-variants";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Fragment as l, createContext as u, use as d, useRef as f } from "react";
 import { flexRender as p, getCoreRowModel as m, useReactTable as h } from "@tanstack/react-table";
 //#region src/data-table/data-table.tsx
-var g = o(null), _ = () => {
-	let e = s(g);
+var g = u(null), _ = () => {
+	let e = d(g);
 	if (!e) throw Error("useDataTable must be used within a DataTable.Root");
 	return e;
-}, v = ({ children: e, isLoading: t = !1, onRowClick: n, rowHref: r, linkComponent: i = "a", ...a }) => /* @__PURE__ */ d(g, {
+}, v = ({ children: e, isLoading: t = !1, onRowClick: n, rowHref: r, linkComponent: i = "a", ...a }) => /* @__PURE__ */ s(g, {
 	value: {
 		table: h({
 			...a,
 			getCoreRowModel: m()
 		}),
 		isLoading: t,
-		scrollRef: c(null),
+		scrollRef: f(null),
 		onRowClick: n,
 		rowHref: r,
 		linkComponent: i
 	},
-	children: /* @__PURE__ */ d("div", {
+	children: /* @__PURE__ */ s("div", {
 		"data-slot": "data-table-root",
 		className: "flex min-h-0 flex-1 flex-col",
 		children: e
 	})
 });
 v.displayName = "DataTable.Root";
-var y = ({ children: e }) => /* @__PURE__ */ d("div", {
+var y = ({ children: e }) => /* @__PURE__ */ s("div", {
 	"data-slot": "data-table-toolbar",
 	role: "toolbar",
 	className: "flex gap-2 border-b border-border-default-base-primary px-4 py-3",
 	children: e
 });
 y.displayName = "DataTable.ToolBar";
-var b = l({
+var b = a({
 	base: "size-4 transition-transform duration-200",
 	variants: { direction: {
 		asc: "",
 		desc: "rotate-180",
 		false: ""
 	} }
-}), x = l({
+}), x = a({
 	base: "flex w-full appearance-none items-center bg-transparent p-0 text-left [font:inherit]",
 	variants: {
 		canSort: {
@@ -57,54 +57,54 @@ var b = l({
 			left: "justify-start"
 		}
 	}
-}), S = (e) => !!e.closest("a, button, [role=\"menu\"]"), C = ({ children: i = /* @__PURE__ */ d(w, {}), size: o = "md", sticky: s = "header", embed: c = !0, enclosed: l = !1 }) => {
+}), S = (e) => !!e.closest("a, button, [role=\"menu\"]"), C = ({ children: i = /* @__PURE__ */ s(w, {}), size: a = "md", sticky: u = "header", embed: d = !0, enclosed: f = !1 }) => {
 	let { table: m, isLoading: h, scrollRef: g, onRowClick: v, rowHref: y, linkComponent: C } = _(), T = m.getAllColumns().length;
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ s("div", {
 		"data-slot": "data-table-loading-overlay",
 		className: e("flex min-h-0 flex-1 flex-col transition-opacity duration-150", h && "opacity-50"),
-		children: /* @__PURE__ */ f(r.Root, {
-			size: o,
-			sticky: s,
-			embed: c,
-			enclosed: l,
+		children: /* @__PURE__ */ c(r.Root, {
+			size: a,
+			sticky: u,
+			embed: d,
+			enclosed: f,
 			ref: g,
-			children: [/* @__PURE__ */ d(r.Head, { children: m.getHeaderGroups().map((e) => /* @__PURE__ */ d(r.Row, { children: e.headers.map((e) => {
-				let i = e.column.columnDef.meta, a = e.column.getCanSort(), o = e.column.getIsSorted(), s = i?.style?.textAlign === "right" || i?.className?.includes("text-right") ? "right" : "left", c = e.isPlaceholder ? null : /* @__PURE__ */ f(u, { children: [p(e.column.columnDef.header, e.getContext()), a && /* @__PURE__ */ d("span", {
+			children: [/* @__PURE__ */ s(r.Head, { children: m.getHeaderGroups().map((e) => /* @__PURE__ */ s(r.Row, { children: e.headers.map((e) => {
+				let i = e.column.columnDef.meta, a = e.column.getCanSort(), l = e.column.getIsSorted(), u = i?.style?.textAlign === "right" || i?.className?.includes("text-right") ? "right" : "left", d = e.isPlaceholder ? null : /* @__PURE__ */ c(o, { children: [p(e.column.columnDef.header, e.getContext()), a && /* @__PURE__ */ s("span", {
 					className: "size-4",
-					children: o ? /* @__PURE__ */ d(t, { className: b({ direction: o }) }) : /* @__PURE__ */ d(n, { className: "size-4" })
+					children: l ? /* @__PURE__ */ s(t, { className: b({ direction: l }) }) : /* @__PURE__ */ s(n, { className: "size-4" })
 				})] });
-				return /* @__PURE__ */ d(r.Header, {
+				return /* @__PURE__ */ s(r.Header, {
 					...i,
-					"aria-sort": a ? o === "asc" ? "ascending" : o === "desc" ? "descending" : "none" : void 0,
-					children: a ? /* @__PURE__ */ d("button", {
+					"aria-sort": a ? l === "asc" ? "ascending" : l === "desc" ? "descending" : "none" : void 0,
+					children: a ? /* @__PURE__ */ s("button", {
 						type: "button",
 						className: x({
 							canSort: !0,
-							align: s
+							align: u
 						}),
 						onClick: e.column.getToggleSortingHandler(),
 						title: e.column.getNextSortingOrder() === "asc" ? "Sort ascending" : e.column.getNextSortingOrder() === "desc" ? "Sort descending" : "Clear sort",
-						children: c
-					}) : /* @__PURE__ */ d("div", {
+						children: d
+					}) : /* @__PURE__ */ s("div", {
 						className: x({
 							canSort: !1,
-							align: s
+							align: u
 						}),
-						children: c
+						children: d
 					})
 				}, e.id);
-			}) }, e.id)) }), /* @__PURE__ */ d(r.Body, { children: m.getRowModel().rows.length ? m.getRowModel().rows.map((t) => {
+			}) }, e.id)) }), /* @__PURE__ */ s(r.Body, { children: m.getRowModel().rows.length ? m.getRowModel().rows.map((t) => {
 				let n = y?.(t.original), i = !!v || !!n;
-				return /* @__PURE__ */ d(a, { children: /* @__PURE__ */ d(r.Row, {
+				return /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(r.Row, {
 					className: e("has-aria-expanded:bg-bg-default-base-secondary", i && "cursor-pointer"),
 					onClick: i ? (e) => {
 						S(e.target) || (v ? v(t.original) : n && e.currentTarget.querySelector("[data-row-link]")?.click());
 					} : void 0,
 					children: t.getVisibleCells().map((e, t) => {
 						let i = e.column.columnDef.meta;
-						return /* @__PURE__ */ f(r.Cell, {
+						return /* @__PURE__ */ c(r.Cell, {
 							...i,
-							children: [t === 0 && n && /* @__PURE__ */ d(C, {
+							children: [t === 0 && n && /* @__PURE__ */ s(C, {
 								href: n,
 								"data-row-link": !0,
 								className: "hidden",
@@ -114,9 +114,9 @@ var b = l({
 						}, e.id);
 					})
 				}) }, t.id);
-			}) : h ? null : /* @__PURE__ */ d(r.Row, { children: /* @__PURE__ */ d(r.Cell, {
+			}) : h ? null : /* @__PURE__ */ s(r.Row, { children: /* @__PURE__ */ s(r.Cell, {
 				colSpan: T,
-				children: /* @__PURE__ */ d("div", {
+				children: /* @__PURE__ */ s("div", {
 					"data-slot": "table-empty-state",
 					className: "whitespace-normal",
 					children: i
@@ -126,13 +126,13 @@ var b = l({
 	});
 };
 C.displayName = "DataTable.Table";
-var w = () => /* @__PURE__ */ d("div", {
+var w = () => /* @__PURE__ */ s("div", {
 	className: "mb-6 flex flex-col items-center gap-4",
-	children: /* @__PURE__ */ d("div", {
+	children: /* @__PURE__ */ s("div", {
 		className: "text-lg",
-		children: /* @__PURE__ */ d("b", { children: "No results." })
+		children: /* @__PURE__ */ s("b", { children: "No results." })
 	})
-}), T = ({ children: e }) => /* @__PURE__ */ d("div", {
+}), T = ({ children: e }) => /* @__PURE__ */ s("div", {
 	"data-slot": "data-table-pagination",
 	className: "flex justify-end border-t border-border-default-base-primary px-6 py-3",
 	children: e
@@ -140,7 +140,7 @@ var w = () => /* @__PURE__ */ d("div", {
 T.displayName = "DataTable.Footer";
 var E = (e) => {
 	let { scrollRef: t } = _();
-	return /* @__PURE__ */ d(i, {
+	return /* @__PURE__ */ s(i, {
 		...e,
 		onPageChange: (n) => {
 			t.current?.scrollTo({ top: 0 }), e.onPageChange(n);