componenteszw-package 1.0.17 → 1.0.21

package/dist/index.js

@@ -1,151 +1,64 @@
 import * as e from "react";
 import t, { createElement as n, forwardRef as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-//#region src/button.tsx
-var d = ({ text: e, iconLeft: t, iconRight: n, variant: r = "primary", size: i = "medium", state: a = "default", disabled: o = !1, onClick: s, type: c = "button", className: d = "" }) => /* @__PURE__ */ u("button", {
-	type: c,
-	onClick: s,
-	disabled: o,
-	className: `
-        
-    flex items-center justify-center gap-2 rounded-md font-medium
-    transition-all duration-200
-    focus:outline-none focus:ring-2 focus:ring-offset-2
-    active:scale-95
-  
-        ${{
-		small: "px-3 py-1.5 text-sm",
-		medium: "px-4 py-2 text-sm"
-	}[i]}
-        ${{
-		primary: "bg-green-600 text-white hover:bg-green-700 focus:ring-green-500",
-		secondary: "bg-gray-200 text-black hover:bg-gray-300 focus:ring-gray-400",
-		tertiary: "bg-orange-400 text-white hover:bg-orange-500 focus:ring-orange-400",
-		success: "bg-green-500 text-white hover:bg-green-600 focus:ring-green-400",
-		warning: "bg-yellow-400 text-black hover:bg-yellow-500 focus:ring-yellow-300",
-		destructive: "bg-red-500 text-white hover:bg-red-600 focus:ring-red-400"
-	}[r]}
-        ${{
-		default: "",
-		hover: "brightness-90",
-		focus: "ring-2 ring-offset-2",
-		disabled: "opacity-50 cursor-not-allowed"
-	}[a]}
-        ${o ? "opacity-50 cursor-not-allowed" : ""}
-        ${d}
-      `,
-	children: [
-		t && /* @__PURE__ */ l("span", {
-			className: "flex items-center",
-			children: t
-		}),
-		e && /* @__PURE__ */ l("span", { children: e }),
-		n && /* @__PURE__ */ l("span", {
-			className: "flex items-center",
-			children: n
-		})
-	]
-}), f = ({ label: e, placeholder: t, value: n, hintText: r, required: i, state: a = "default", size: o = "medium", type: s = "text", iconRight: c, disabled: d, onChange: f, className: p = "" }) => /* @__PURE__ */ u("div", {
-	className: "flex flex-col gap-1 w-full",
-	children: [
-		e && /* @__PURE__ */ u("label", {
-			className: "text-sm font-medium",
-			children: [
-				e,
-				" ",
-				i && /* @__PURE__ */ l("span", {
-					className: "text-red-500",
-					children: "*"
-				})
-			]
-		}),
-		/* @__PURE__ */ u("div", {
-			className: "relative",
-			children: [/* @__PURE__ */ l("input", {
-				type: s,
-				value: n,
-				placeholder: t,
-				disabled: d,
-				onChange: (e) => f?.(e.target.value),
-				className: `w-full rounded-md border ${{
-					small: "px-2 py-1 text-sm",
-					medium: "px-3 py-2 text-sm",
-					large: "px-4 py-3 text-base"
-				}[o]} ${{
-					default: "border-gray-300 focus:border-green-500",
-					error: "border-red-500",
-					disabled: "bg-gray-100 cursor-not-allowed"
-				}[a]} outline-none ${p}`
-			}), c && /* @__PURE__ */ l("div", {
-				className: "absolute right-3 top-1/2 -translate-y-1/2",
-				children: c
-			})]
-		}),
-		r && /* @__PURE__ */ l("span", {
-			className: `text-xs ${a === "error" ? "text-red-500" : "text-gray-500"}`,
-			children: r
-		})
-	]
-});
-//#endregion
 //#region node_modules/clsx/dist/clsx.mjs
-function p(e) {
+function d(e) {
 	var t, n, r = "";
 	if (typeof e == "string" || typeof e == "number") r += e;
 	else if (typeof e == "object") if (Array.isArray(e)) {
 		var i = e.length;
-		for (t = 0; t < i; t++) e[t] && (n = p(e[t])) && (r && (r += " "), r += n);
+		for (t = 0; t < i; t++) e[t] && (n = d(e[t])) && (r && (r += " "), r += n);
 	} else for (n in e) e[n] && (r && (r += " "), r += n);
 	return r;
 }
-function m() {
-	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = p(e)) && (r && (r += " "), r += t);
+function f() {
+	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = d(e)) && (r && (r += " "), r += t);
 	return r;
 }
 //#endregion
 //#region node_modules/tailwind-merge/dist/bundle-mjs.mjs
-var h = "-", g = (e) => {
-	let t = b(e), { conflictingClassGroups: n, conflictingClassGroupModifiers: r } = e;
+var p = "-", m = (e) => {
+	let t = v(e), { conflictingClassGroups: n, conflictingClassGroupModifiers: r } = e;
 	return {
 		getClassGroupId: (e) => {
-			let n = e.split(h);
-			return n[0] === "" && n.length !== 1 && n.shift(), _(n, t) || y(e);
+			let n = e.split(p);
+			return n[0] === "" && n.length !== 1 && n.shift(), h(n, t) || _(e);
 		},
 		getConflictingClassGroupIds: (e, t) => {
 			let i = n[e] || [];
 			return t && r[e] ? [...i, ...r[e]] : i;
 		}
 	};
-}, _ = (e, t) => {
+}, h = (e, t) => {
 	if (e.length === 0) return t.classGroupId;
-	let n = e[0], r = t.nextPart.get(n), i = r ? _(e.slice(1), r) : void 0;
+	let n = e[0], r = t.nextPart.get(n), i = r ? h(e.slice(1), r) : void 0;
 	if (i) return i;
 	if (t.validators.length === 0) return;
-	let a = e.join(h);
+	let a = e.join(p);
 	return t.validators.find(({ validator: e }) => e(a))?.classGroupId;
-}, v = /^\[(.+)\]$/, y = (e) => {
-	if (v.test(e)) {
-		let t = v.exec(e)[1], n = t?.substring(0, t.indexOf(":"));
+}, g = /^\[(.+)\]$/, _ = (e) => {
+	if (g.test(e)) {
+		let t = g.exec(e)[1], n = t?.substring(0, t.indexOf(":"));
 		if (n) return "arbitrary.." + n;
 	}
-}, b = (e) => {
+}, v = (e) => {
 	let { theme: t, prefix: n } = e, r = {
 		nextPart: /* @__PURE__ */ new Map(),
 		validators: []
 	};
-	return w(Object.entries(e.classGroups), n).forEach(([e, n]) => {
-		x(n, r, e, t);
+	return S(Object.entries(e.classGroups), n).forEach(([e, n]) => {
+		y(n, r, e, t);
 	}), r;
-}, x = (e, t, n, r) => {
+}, y = (e, t, n, r) => {
 	e.forEach((e) => {
 		if (typeof e == "string") {
-			let r = e === "" ? t : S(t, e);
+			let r = e === "" ? t : b(t, e);
 			r.classGroupId = n;
 			return;
 		}
 		if (typeof e == "function") {
-			if (C(e)) {
-				x(e(r), t, n, r);
+			if (x(e)) {
+				y(e(r), t, n, r);
 				return;
 			}
 			t.validators.push({
@@ -155,18 +68,18 @@ var h = "-", g = (e) => {
 			return;
 		}
 		Object.entries(e).forEach(([e, i]) => {
-			x(i, S(t, e), n, r);
+			y(i, b(t, e), n, r);
 		});
 	});
-}, S = (e, t) => {
+}, b = (e, t) => {
 	let n = e;
-	return t.split(h).forEach((e) => {
+	return t.split(p).forEach((e) => {
 		n.nextPart.has(e) || n.nextPart.set(e, {
 			nextPart: /* @__PURE__ */ new Map(),
 			validators: []
 		}), n = n.nextPart.get(e);
 	}), n;
-}, C = (e) => e.isThemeGetter, w = (e, t) => t ? e.map(([e, n]) => [e, n.map((e) => typeof e == "string" ? t + e : typeof e == "object" ? Object.fromEntries(Object.entries(e).map(([e, n]) => [t + e, n])) : e)]) : e, T = (e) => {
+}, x = (e) => e.isThemeGetter, S = (e, t) => t ? e.map(([e, n]) => [e, n.map((e) => typeof e == "string" ? t + e : typeof e == "object" ? Object.fromEntries(Object.entries(e).map(([e, n]) => [t + e, n])) : e)]) : e, C = (e) => {
 	if (e < 1) return {
 		get: () => void 0,
 		set: () => {}
@@ -184,7 +97,7 @@ var h = "-", g = (e) => {
 			n.has(e) ? n.set(e, t) : i(e, t);
 		}
 	};
-}, E = "!", D = (e) => {
+}, w = "!", T = (e) => {
 	let { separator: t, experimentalParseClassName: n } = e, r = t.length === 1, i = t[0], a = t.length, o = (e) => {
 		let n = [], o = 0, s = 0, c;
 		for (let l = 0; l < e.length; l++) {
@@ -201,7 +114,7 @@ var h = "-", g = (e) => {
 			}
 			u === "[" ? o++ : u === "]" && o--;
 		}
-		let l = n.length === 0 ? e : e.substring(s), u = l.startsWith(E);
+		let l = n.length === 0 ? e : e.substring(s), u = l.startsWith(w);
 		return {
 			modifiers: n,
 			hasImportantModifier: u,
@@ -213,18 +126,18 @@ var h = "-", g = (e) => {
 		className: e,
 		parseClassName: o
 	}) : o;
-}, O = (e) => {
+}, E = (e) => {
 	if (e.length <= 1) return e;
 	let t = [], n = [];
 	return e.forEach((e) => {
 		e[0] === "[" ? (t.push(...n.sort(), e), n = []) : n.push(e);
 	}), t.push(...n.sort()), t;
-}, k = (e) => ({
-	cache: T(e.cacheSize),
-	parseClassName: D(e),
-	...g(e)
-}), A = /\s+/, j = (e, t) => {
-	let { parseClassName: n, getClassGroupId: r, getConflictingClassGroupIds: i } = t, a = [], o = e.trim().split(A), s = "";
+}, D = (e) => ({
+	cache: C(e.cacheSize),
+	parseClassName: T(e),
+	...m(e)
+}), O = /\s+/, k = (e, t) => {
+	let { parseClassName: n, getClassGroupId: r, getConflictingClassGroupIds: i } = t, a = [], o = e.trim().split(O), s = "";
 	for (let e = o.length - 1; e >= 0; --e) {
 		let t = o[e], { modifiers: c, hasImportantModifier: l, baseClassName: u, maybePostfixModifierPosition: d } = n(t), f = !!d, p = r(f ? u.substring(0, d) : u);
 		if (!p) {
@@ -238,7 +151,7 @@ var h = "-", g = (e) => {
 			}
 			f = !1;
 		}
-		let m = O(c).join(":"), h = l ? m + E : m, g = h + p;
+		let m = E(c).join(":"), h = l ? m + w : m, g = h + p;
 		if (a.includes(g)) continue;
 		a.push(g);
 		let _ = i(p, f);
@@ -250,48 +163,48 @@ var h = "-", g = (e) => {
 	}
 	return s;
 };
-function M() {
+function A() {
 	let e = 0, t, n, r = "";
-	for (; e < arguments.length;) (t = arguments[e++]) && (n = N(t)) && (r && (r += " "), r += n);
+	for (; e < arguments.length;) (t = arguments[e++]) && (n = j(t)) && (r && (r += " "), r += n);
 	return r;
 }
-var N = (e) => {
+var j = (e) => {
 	if (typeof e == "string") return e;
 	let t, n = "";
-	for (let r = 0; r < e.length; r++) e[r] && (t = N(e[r])) && (n && (n += " "), n += t);
+	for (let r = 0; r < e.length; r++) e[r] && (t = j(e[r])) && (n && (n += " "), n += t);
 	return n;
 };
-function P(e, ...t) {
+function M(e, ...t) {
 	let n, r, i, a = o;
 	function o(o) {
-		return n = k(t.reduce((e, t) => t(e), e())), r = n.cache.get, i = n.cache.set, a = s, s(o);
+		return n = D(t.reduce((e, t) => t(e), e())), r = n.cache.get, i = n.cache.set, a = s, s(o);
 	}
 	function s(e) {
 		let t = r(e);
 		if (t) return t;
-		let a = j(e, n);
+		let a = k(e, n);
 		return i(e, a), a;
 	}
 	return function() {
-		return a(M.apply(null, arguments));
+		return a(A.apply(null, arguments));
 	};
 }
-var F = (e) => {
+var N = (e) => {
 	let t = (t) => t[e] || [];
 	return t.isThemeGetter = !0, t;
-}, I = /^\[(?:([a-z-]+):)?(.+)\]$/i, L = /^\d+\/\d+$/, R = /* @__PURE__ */ new Set([
+}, P = /^\[(?:([a-z-]+):)?(.+)\]$/i, F = /^\d+\/\d+$/, I = /* @__PURE__ */ new Set([
 	"px",
 	"full",
 	"screen"
-]), ee = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, te = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, ne = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, re = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, ie = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, z = (e) => V(e) || R.has(e) || L.test(e), B = (e) => q(e, "length", fe), V = (e) => !!e && !Number.isNaN(Number(e)), H = (e) => q(e, "number", V), U = (e) => !!e && Number.isInteger(Number(e)), ae = (e) => e.endsWith("%") && V(e.slice(0, -1)), W = (e) => I.test(e), G = (e) => ee.test(e), oe = /* @__PURE__ */ new Set([
+]), L = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, R = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, ee = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, te = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, ne = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, z = (e) => V(e) || I.has(e) || F.test(e), B = (e) => q(e, "length", ue), V = (e) => !!e && !Number.isNaN(Number(e)), H = (e) => q(e, "number", V), U = (e) => !!e && Number.isInteger(Number(e)), re = (e) => e.endsWith("%") && V(e.slice(0, -1)), W = (e) => P.test(e), G = (e) => L.test(e), ie = /* @__PURE__ */ new Set([
 	"length",
 	"size",
 	"percentage"
-]), se = (e) => q(e, oe, J), ce = (e) => q(e, "position", J), le = /* @__PURE__ */ new Set(["image", "url"]), ue = (e) => q(e, le, Y), de = (e) => q(e, "", pe), K = () => !0, q = (e, t, n) => {
-	let r = I.exec(e);
+]), ae = (e) => q(e, ie, J), oe = (e) => q(e, "position", J), se = /* @__PURE__ */ new Set(["image", "url"]), ce = (e) => q(e, se, fe), le = (e) => q(e, "", de), K = () => !0, q = (e, t, n) => {
+	let r = P.exec(e);
 	return r ? r[1] ? typeof t == "string" ? r[1] === t : t.has(r[1]) : n(r[2]) : !1;
-}, fe = (e) => te.test(e) && !ne.test(e), J = () => !1, pe = (e) => re.test(e), Y = (e) => ie.test(e), me = /* @__PURE__ */ P(() => {
-	let e = F("colors"), t = F("spacing"), n = F("blur"), r = F("brightness"), i = F("borderColor"), a = F("borderRadius"), o = F("borderSpacing"), s = F("borderWidth"), c = F("contrast"), l = F("grayscale"), u = F("hueRotate"), d = F("invert"), f = F("gap"), p = F("gradientColorStops"), m = F("gradientColorStopPositions"), h = F("inset"), g = F("margin"), _ = F("opacity"), v = F("padding"), y = F("saturate"), b = F("scale"), x = F("sepia"), S = F("skew"), C = F("space"), w = F("translate"), T = () => [
+}, ue = (e) => R.test(e) && !ee.test(e), J = () => !1, de = (e) => te.test(e), fe = (e) => ne.test(e), pe = /* @__PURE__ */ M(() => {
+	let e = N("colors"), t = N("spacing"), n = N("blur"), r = N("brightness"), i = N("borderColor"), a = N("borderRadius"), o = N("borderSpacing"), s = N("borderWidth"), c = N("contrast"), l = N("grayscale"), u = N("hueRotate"), d = N("invert"), f = N("gap"), p = N("gradientColorStops"), m = N("gradientColorStopPositions"), h = N("inset"), g = N("margin"), _ = N("opacity"), v = N("padding"), y = N("saturate"), b = N("scale"), x = N("sepia"), S = N("skew"), C = N("space"), w = N("translate"), T = () => [
 		"auto",
 		"contain",
 		"none"
@@ -329,7 +242,7 @@ var F = (e) => {
 		"dotted",
 		"double",
 		"none"
-	], N = () => [
+	], P = () => [
 		"normal",
 		"multiply",
 		"screen",
@@ -346,7 +259,7 @@ var F = (e) => {
 		"saturation",
 		"color",
 		"luminosity"
-	], P = () => [
+	], F = () => [
 		"start",
 		"end",
 		"center",
@@ -397,7 +310,7 @@ var F = (e) => {
 			invert: I(),
 			gap: O(),
 			gradientColorStops: [e],
-			gradientColorStopPositions: [ae, B],
+			gradientColorStopPositions: [re, B],
 			inset: D(),
 			margin: D(),
 			opacity: R(),
@@ -579,7 +492,7 @@ var F = (e) => {
 			gap: [{ gap: [f] }],
 			"gap-x": [{ "gap-x": [f] }],
 			"gap-y": [{ "gap-y": [f] }],
-			"justify-content": [{ justify: ["normal", ...P()] }],
+			"justify-content": [{ justify: ["normal", ...F()] }],
 			"justify-items": [{ "justify-items": [
 				"start",
 				"end",
@@ -595,7 +508,7 @@ var F = (e) => {
 			] }],
 			"align-content": [{ content: [
 				"normal",
-				...P(),
+				...F(),
 				"baseline"
 			] }],
 			"align-items": [{ items: [
@@ -613,7 +526,7 @@ var F = (e) => {
 				"stretch",
 				"baseline"
 			] }],
-			"place-content": [{ "place-content": [...P(), "baseline"] }],
+			"place-content": [{ "place-content": [...F(), "baseline"] }],
 			"place-items": [{ "place-items": [
 				"start",
 				"end",
@@ -874,7 +787,7 @@ var F = (e) => {
 				"padding",
 				"content"
 			] }],
-			"bg-position": [{ bg: [...j(), ce] }],
+			"bg-position": [{ bg: [...j(), oe] }],
 			"bg-repeat": [{ bg: ["no-repeat", { repeat: [
 				"",
 				"x",
@@ -886,7 +799,7 @@ var F = (e) => {
 				"auto",
 				"cover",
 				"contain",
-				se
+				ae
 			] }],
 			"bg-image": [{ bg: [
 				"none",
@@ -900,7 +813,7 @@ var F = (e) => {
 					"l",
 					"tl"
 				] },
-				ue
+				ce
 			] }],
 			"bg-color": [{ bg: [e] }],
 			"gradient-from-pos": [{ from: [m] }],
@@ -966,16 +879,16 @@ var F = (e) => {
 				"inner",
 				"none",
 				G,
-				de
+				le
 			] }],
 			"shadow-color": [{ shadow: [K] }],
 			opacity: [{ opacity: [_] }],
 			"mix-blend": [{ "mix-blend": [
-				...N(),
+				...P(),
 				"plus-lighter",
 				"plus-darker"
 			] }],
-			"bg-blend": [{ "bg-blend": N() }],
+			"bg-blend": [{ "bg-blend": P() }],
 			filter: [{ filter: ["", "none"] }],
 			blur: [{ blur: [n] }],
 			brightness: [{ brightness: [r] }],
@@ -1321,18 +1234,97 @@ var F = (e) => {
 });
 //#endregion
 //#region src/lib/utils.ts
-function X(...e) {
-	return me(m(e));
+function Y(...e) {
+	return pe(f(e));
 }
 //#endregion
+//#region src/button.tsx
+var X = ({ text: e, iconLeft: t, iconRight: n, variant: r = "primary", size: i = "medium", disabled: a = !1, loading: o = !1, onClick: s, type: c = "button", className: d, textClassName: f, iconClassName: p }) => {
+	let m = {
+		small: "px-3 py-1.5 text-sm",
+		medium: "px-4 py-2 text-sm"
+	}, h = {
+		primary: "bg-green-600 text-white hover:bg-green-700 focus:ring-green-500",
+		secondary: "bg-gray-200 text-black hover:bg-gray-300 focus:ring-gray-400",
+		tertiary: "bg-orange-400 text-white hover:bg-orange-500 focus:ring-orange-400",
+		success: "bg-green-500 text-white hover:bg-green-600 focus:ring-green-400",
+		warning: "bg-yellow-400 text-black hover:bg-yellow-500 focus:ring-yellow-300",
+		destructive: "bg-red-500 text-white hover:bg-red-600 focus:ring-red-400"
+	}, g = a || o;
+	return /* @__PURE__ */ u("button", {
+		type: c,
+		onClick: s,
+		disabled: g,
+		className: Y("flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 active:scale-95", m[i], h[r], g && "opacity-50 cursor-not-allowed", d),
+		children: [
+			o ? /* @__PURE__ */ l("span", {
+				className: "animate-spin",
+				children: "⏳"
+			}) : t && /* @__PURE__ */ l("span", {
+				className: Y("flex items-center", p),
+				children: t
+			}),
+			e && /* @__PURE__ */ l("span", {
+				className: Y(f),
+				children: o ? "Cargando..." : e
+			}),
+			!o && n && /* @__PURE__ */ l("span", {
+				className: Y("flex items-center", p),
+				children: n
+			})
+		]
+	});
+}, me = ({ label: e, placeholder: t, value: n, hintText: r, required: i, state: a = "default", size: o = "medium", type: s = "text", iconRight: c, disabled: d, onChange: f, className: p, inputClassName: m, labelClassName: h, hintClassName: g, iconClassName: _ }) => /* @__PURE__ */ u("div", {
+	className: Y("flex flex-col gap-1 w-full", p),
+	children: [
+		e && /* @__PURE__ */ u("label", {
+			className: Y("text-sm font-medium", h),
+			children: [
+				e,
+				" ",
+				i && /* @__PURE__ */ l("span", {
+					className: "text-red-500",
+					children: "*"
+				})
+			]
+		}),
+		/* @__PURE__ */ u("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ l("input", {
+				type: s,
+				value: n,
+				placeholder: t,
+				disabled: d || a === "disabled",
+				onChange: (e) => f?.(e.target.value),
+				className: Y("w-full rounded-md border outline-none", {
+					small: "px-2 py-1 text-sm",
+					medium: "px-3 py-2 text-sm",
+					large: "px-4 py-3 text-base"
+				}[o], {
+					default: "border-gray-300 focus:border-green-500",
+					error: "border-red-500 focus:border-red-500",
+					disabled: "bg-gray-100 cursor-not-allowed"
+				}[a], c && "pr-10", m)
+			}), c && /* @__PURE__ */ l("div", {
+				className: Y("absolute right-3 top-1/2 -translate-y-1/2", _),
+				children: c
+			})]
+		}),
+		r && /* @__PURE__ */ l("span", {
+			className: Y("text-xs", a === "error" ? "text-red-500" : "text-gray-500", g),
+			children: r
+		})
+	]
+});
+//#endregion
 //#region src/textarea.tsx
-function he({ label: t, placeholder: n, value: r = "", hintText: i, required: a, state: o = "default", maxLength: s, showCounter: c, disabled: d, onChange: f, className: p }) {
-	let [m, h] = e.useState(r), g = r ?? m;
+function he({ label: t, placeholder: n, value: r = "", hintText: i, required: a, state: o = "default", maxLength: s, showCounter: c, disabled: d, onChange: f, className: p, textareaClassName: m, labelClassName: h, hintClassName: g }) {
+	let [_, v] = e.useState(r), y = r ?? _;
 	return /* @__PURE__ */ u("div", {
-		className: X("flex flex-col gap-1", p),
+		className: Y("flex flex-col gap-1", p),
 		children: [
 			t && /* @__PURE__ */ u("label", {
-				className: "text-sm font-medium",
+				className: Y("text-sm font-medium", h),
 				children: [
 					t,
 					" ",
@@ -1343,24 +1335,24 @@ function he({ label: t, placeholder: n, value: r = "", hintText: i, required: a,
 				]
 			}),
 			/* @__PURE__ */ l("textarea", {
-				value: g,
+				value: y,
 				placeholder: n,
 				onChange: (e) => {
 					let t = e.target.value;
-					s && t.length > s || (h(t), f?.(t));
+					s && t.length > s || (v(t), f?.(t));
 				},
 				disabled: d || o === "disabled",
-				className: X("w-full min-h-[100px] rounded-md border px-3 py-2 text-sm outline-none resize-none transition", "focus:ring-2 focus:ring-primary", o === "error" && "border-red-500 focus:ring-red-500", o === "default" && "border-gray-300", (d || o === "disabled") && "bg-gray-100 cursor-not-allowed opacity-70")
+				className: Y("w-full min-h-[100px] rounded-md border px-3 py-2 text-sm outline-none resize-none transition", "focus:ring-2 focus:ring-primary", o === "error" && "border-red-500 focus:ring-red-500", o === "default" && "border-gray-300", (d || o === "disabled") && "bg-gray-100 cursor-not-allowed opacity-70", m)
 			}),
 			/* @__PURE__ */ u("div", {
 				className: "flex justify-between items-center text-xs",
 				children: [i && /* @__PURE__ */ l("span", {
-					className: X(o === "error" ? "text-red-500" : "text-gray-500"),
+					className: Y(o === "error" ? "text-red-500" : "text-gray-500", g),
 					children: i
 				}), c && s && /* @__PURE__ */ u("span", {
-					className: "text-gray-400",
+					className: Y("text-gray-400", g),
 					children: [
-						g.length,
+						y.length,
 						"/",
 						s
 					]
@@ -1456,16 +1448,16 @@ var ge = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), _e = (e)
 }]]);
 //#endregion
 //#region src/checkbox.tsx
-function Ee({ label: t, checked: n = !1, indeterminate: r = !1, disabled: i, hintText: a, onChange: o }) {
-	let s = e.useId();
+function Ee({ label: t, checked: n = !1, indeterminate: r = !1, disabled: i, hintText: a, onChange: o, className: s, checkboxClassName: c, labelClassName: d, hintClassName: f, iconClassName: p }) {
+	let m = e.useId();
 	return /* @__PURE__ */ u("div", {
-		className: "flex flex-col gap-1",
+		className: Y("flex flex-col gap-1", s),
 		children: [/* @__PURE__ */ u("label", {
-			htmlFor: s,
-			className: X("flex items-center gap-2 cursor-pointer", i && "opacity-50 cursor-not-allowed"),
+			htmlFor: m,
+			className: Y("flex items-center gap-2 cursor-pointer", i && "opacity-50 cursor-not-allowed", d),
 			children: [
 				/* @__PURE__ */ l("input", {
-					id: s,
+					id: m,
 					type: "checkbox",
 					checked: n,
 					disabled: i,
@@ -1473,8 +1465,14 @@ function Ee({ label: t, checked: n = !1, indeterminate: r = !1, disabled: i, hin
 					className: "hidden"
 				}),
 				/* @__PURE__ */ l("div", {
-					className: X("w-4 h-4 flex items-center justify-center rounded border transition", n || r ? "bg-primary text-white border-primary" : "bg-white border-gray-300"),
-					children: r ? /* @__PURE__ */ l(Ce, { size: 12 }) : n ? /* @__PURE__ */ l(xe, { size: 12 }) : null
+					className: Y("w-4 h-4 flex items-center justify-center rounded border transition", n || r ? "bg-primary text-white border-primary" : "bg-white border-gray-300", c),
+					children: r ? /* @__PURE__ */ l(Ce, {
+						size: 12,
+						className: p
+					}) : n ? /* @__PURE__ */ l(xe, {
+						size: 12,
+						className: p
+					}) : null
 				}),
 				t && /* @__PURE__ */ l("span", {
 					className: "text-sm",
@@ -1482,37 +1480,37 @@ function Ee({ label: t, checked: n = !1, indeterminate: r = !1, disabled: i, hin
 				})
 			]
 		}), a && /* @__PURE__ */ l("span", {
-			className: "text-xs text-gray-500",
+			className: Y("text-xs text-gray-500", f),
 			children: a
 		})]
 	});
 }
 //#endregion
 //#region src/file.tsx
-function De({ multiple: t, maxSize: n = 5, acceptedFormats: r, onChange: i }) {
-	let [a, o] = e.useState([]), [s, c] = e.useState(!1), d = (e) => {
+function De({ multiple: t, maxSize: n = 5, acceptedFormats: r, onChange: i, className: a, dropzoneClassName: o, draggingClassName: s, labelClassName: c, buttonClassName: d, fileItemClassName: f, fileNameClassName: p, removeIconClassName: m }) {
+	let [h, g] = e.useState([]), [_, v] = e.useState(!1), y = (e) => {
 		if (!e) return;
-		let s = Array.from(e).filter((e) => {
+		let a = Array.from(e).filter((e) => {
 			let t = e.size / 1024 / 1024 <= n, i = r ? r.includes(e.type) : !0;
 			return t && i;
-		}), c = t ? [...a, ...s] : s;
-		o(c), i?.(c);
+		}), o = t ? [...h, ...a] : a;
+		g(o), i?.(o);
 	};
 	return /* @__PURE__ */ u("div", {
-		className: "space-y-3",
+		className: Y("space-y-3", a),
 		children: [/* @__PURE__ */ u("div", {
 			onDragOver: (e) => {
-				e.preventDefault(), c(!0);
+				e.preventDefault(), v(!0);
 			},
-			onDragLeave: () => c(!1),
+			onDragLeave: () => v(!1),
 			onDrop: (e) => {
-				e.preventDefault(), c(!1), d(e.dataTransfer.files);
+				e.preventDefault(), v(!1), y(e.dataTransfer.files);
 			},
-			className: X("border-2 border-dashed rounded-lg p-6 text-center transition", s ? "border-primary bg-primary/5" : "border-gray-300"),
+			className: Y("border-2 border-dashed rounded-lg p-6 text-center transition", _ ? "border-primary bg-primary/5" : "border-gray-300", _ && s, o),
 			children: [
 				/* @__PURE__ */ l(we, { className: "mx-auto mb-2" }),
 				/* @__PURE__ */ l("p", {
-					className: "text-sm font-medium",
+					className: Y("text-sm font-medium", c),
 					children: "Arrastra o selecciona un archivo"
 				}),
 				/* @__PURE__ */ u("p", {
@@ -1526,32 +1524,32 @@ function De({ multiple: t, maxSize: n = 5, acceptedFormats: r, onChange: i }) {
 				/* @__PURE__ */ l("input", {
 					type: "file",
 					multiple: t,
-					onChange: (e) => d(e.target.files),
+					onChange: (e) => y(e.target.files),
 					className: "hidden",
 					id: "file-upload"
 				}),
 				/* @__PURE__ */ l("label", {
 					htmlFor: "file-upload",
-					className: "inline-block mt-3 px-4 py-2 border rounded cursor-pointer",
+					className: Y("inline-block mt-3 px-4 py-2 border rounded cursor-pointer", d),
 					children: "Seleccionar"
 				})
 			]
 		}), /* @__PURE__ */ l("div", {
 			className: "space-y-2",
-			children: a.map((e, t) => /* @__PURE__ */ u("div", {
-				className: "flex items-center justify-between border p-2 rounded",
+			children: h.map((e, t) => /* @__PURE__ */ u("div", {
+				className: Y("flex items-center justify-between border p-2 rounded", f),
 				children: [/* @__PURE__ */ u("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ l(Se, { size: 16 }), /* @__PURE__ */ l("span", {
-						className: "text-sm",
+						className: Y("text-sm", p),
 						children: e.name
 					})]
 				}), /* @__PURE__ */ l(Te, {
 					size: 16,
-					className: "cursor-pointer",
+					className: Y("cursor-pointer", m),
 					onClick: () => {
-						let e = a.filter((e, n) => n !== t);
-						o(e), i?.(e);
+						let e = h.filter((e, n) => n !== t);
+						g(e), i?.(e);
 					}
 				})]
 			}, t))
@@ -1560,30 +1558,30 @@ function De({ multiple: t, maxSize: n = 5, acceptedFormats: r, onChange: i }) {
 }
 //#endregion
 //#region src/fileItem.tsx
-var Oe = ({ title: e, subtitle: n, iconFile: r, loading: i = !1, state: a = "default", dropdownOptions: o = [], onMenuClick: s }) => {
-	let [d, f] = t.useState(!1), p = t.useRef(null), m = i || a === "loading";
+var Oe = ({ title: e, subtitle: n, iconFile: r, loading: i = !1, state: a = "default", dropdownOptions: o = [], onMenuClick: s, className: d, leftSectionClassName: f, titleClassName: p, subtitleClassName: m, iconClassName: h, menuButtonClassName: g, dropdownClassName: _, optionClassName: v }) => {
+	let [y, b] = t.useState(!1), x = t.useRef(null), S = i || a === "loading";
 	return t.useEffect(() => {
 		function e(e) {
-			p.current && !p.current.contains(e.target) && f(!1);
+			x.current && !x.current.contains(e.target) && b(!1);
 		}
 		return document.addEventListener("mousedown", e), () => {
 			document.removeEventListener("mousedown", e);
 		};
 	}, []), /* @__PURE__ */ u("div", {
-		className: "relative w-[380px] rounded-xl border border-orange-500 bg-white px-4 py-4 flex items-start justify-between shadow-sm hover:shadow-md transition-all duration-200",
+		className: Y("relative w-[380px] rounded-xl border border-orange-500 bg-white px-4 py-4 flex items-start justify-between shadow-sm hover:shadow-md transition-all duration-200", d),
 		children: [/* @__PURE__ */ u("div", {
-			className: "flex items-start gap-3",
+			className: Y("flex items-start gap-3", f),
 			children: [/* @__PURE__ */ l("div", {
-				className: "shrink-0",
+				className: Y("shrink-0", h),
 				children: r
 			}), /* @__PURE__ */ u("div", {
 				className: "flex flex-col",
 				children: [/* @__PURE__ */ l("span", {
-					className: "text-sm font-semibold text-gray-900",
+					className: Y("text-sm font-semibold text-gray-900", p),
 					children: e
 				}), /* @__PURE__ */ u("div", {
-					className: "flex items-center gap-2 text-sm text-gray-500 mt-1",
-					children: [/* @__PURE__ */ l("span", { children: n }), m && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("span", {
+					className: Y("flex items-center gap-2 text-sm text-gray-500 mt-1", m),
+					children: [/* @__PURE__ */ l("span", { children: n }), S && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("span", {
 						className: "animate-spin text-orange-500",
 						children: "✴"
 					}), /* @__PURE__ */ l("span", {
@@ -1594,26 +1592,25 @@ var Oe = ({ title: e, subtitle: n, iconFile: r, loading: i = !1, state: a = "def
 			})]
 		}), /* @__PURE__ */ u("div", {
 			className: "relative",
-			ref: p,
+			ref: x,
 			children: [/* @__PURE__ */ l("button", {
 				onClick: () => {
-					f(!d), s?.();
+					b(!y), s?.();
 				},
-				className: "flex items-center justify-center w-9 h-9 rounded-lg hover:bg-orange-50 text-orange-500 transition-colors duration-200",
+				className: Y("flex items-center justify-center w-9 h-9 rounded-lg hover:bg-orange-50 text-orange-500 transition-colors duration-200", g),
 				children: /* @__PURE__ */ l("span", {
 					className: "text-xl leading-none",
 					children: "⋯"
 				})
-			}), d && o.length > 0 && /* @__PURE__ */ l("div", {
-				className: "absolute right-0 mt-2 w-44 rounded-2xl border border-gray-200 bg-white shadow-xl z-20 overflow-hidden animate-in fade-in zoom-in-95 duration-150",
+			}), y && o.length > 0 && /* @__PURE__ */ l("div", {
+				className: Y("absolute right-0 mt-2 w-44 rounded-2xl border border-gray-200 bg-white shadow-xl z-20 overflow-hidden animate-in fade-in zoom-in-95 duration-150", _),
 				children: /* @__PURE__ */ l("div", {
 					className: "py-2",
 					children: o.map((e, t) => /* @__PURE__ */ u("button", {
 						onClick: () => {
-							e.onClick?.(), f(!1);
+							e.onClick?.(), b(!1);
 						},
-						className: `w-full flex items-center gap-3 px-4 py-3 text-sm transition-colors duration-150
-                    ${e.danger ? "text-red-500 hover:bg-red-50" : "text-gray-700 hover:bg-orange-50 hover:text-orange-600"}`,
+						className: Y("w-full flex items-center gap-3 px-4 py-3 text-sm transition-colors duration-150", e.danger ? "text-red-500 hover:bg-red-50" : "text-gray-700 hover:bg-orange-50 hover:text-orange-600", v),
 						children: [/* @__PURE__ */ l("span", {
 							className: "shrink-0",
 							children: e.icon
@@ -1626,44 +1623,39 @@ var Oe = ({ title: e, subtitle: n, iconFile: r, loading: i = !1, state: a = "def
 			})]
 		})]
 	});
-}, ke = ({ children: e, onClick: t, className: n = "", contentClassName: r = "" }) => /* @__PURE__ */ l("div", {
+}, ke = ({ children: e, onClick: t, className: n, contentClassName: r, hoverClassName: i, skeletonClassName: a, clickable: o = !0 }) => /* @__PURE__ */ l("div", {
 	onClick: t,
-	className: `
-        w-full
-        bg-white
-        rounded-2xl
-        border border-gray-200
-        shadow-sm
-        hover:shadow-md
-        transition-all duration-200
-        overflow-hidden
-        ${n}
-      `,
+	className: Y("w-full bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden transition-all duration-200", o && "cursor-pointer", o && "hover:shadow-md", i, n),
 	children: /* @__PURE__ */ l("div", {
-		className: `
-          min-h-[72px]
-          px-6
-          py-4
-          flex
-          items-center
-          justify-between
-          ${r}
-        `,
+		className: Y("min-h-[72px] px-6 py-4 flex items-center justify-between", r),
 		children: e || /* @__PURE__ */ u(c, { children: [
-			/* @__PURE__ */ l("div", { className: "flex-1 h-5 rounded-md bg-gray-100" }),
-			/* @__PURE__ */ l("div", { className: "w-24 h-5 rounded-md bg-gray-100 ml-6" }),
-			/* @__PURE__ */ l("div", { className: "w-24 h-5 rounded-md bg-gray-100 ml-6" }),
-			/* @__PURE__ */ l("div", { className: "w-32 h-5 rounded-md bg-gray-100 ml-6" }),
-			/* @__PURE__ */ l("div", { className: "w-6 h-6 rounded-md bg-gray-100 ml-6" })
+			/* @__PURE__ */ l("div", { className: Y("flex-1 h-5 rounded-md bg-gray-100", a) }),
+			/* @__PURE__ */ l("div", { className: Y("w-24 h-5 rounded-md bg-gray-100 ml-6", a) }),
+			/* @__PURE__ */ l("div", { className: Y("w-24 h-5 rounded-md bg-gray-100 ml-6", a) }),
+			/* @__PURE__ */ l("div", { className: Y("w-32 h-5 rounded-md bg-gray-100 ml-6", a) }),
+			/* @__PURE__ */ l("div", { className: Y("w-6 h-6 rounded-md bg-gray-100 ml-6", a) })
 		] })
 	})
-}), Ae = ({ open: e, onClose: t, variant: n = "content", title: r, description: i, children: a, primaryAction: o, secondaryAction: s, size: c = "medium" }) => {
-	if (!e) return null;
-	let f = {
+}), Ae = ({ open: e, onClose: n, variant: r = "content", title: i, description: a, children: o, primaryAction: s, secondaryAction: c, size: d = "medium", closeOnOverlayClick: f = !0, closeOnEsc: p = !0, hideIcon: m = !1, className: h, overlayClassName: g, contentClassName: _, headerClassName: v, bodyClassName: y, footerClassName: b, iconClassName: x, titleClassName: S, descriptionClassName: C }) => {
+	if (t.useEffect(() => {
+		if (!e) return;
+		document.body.style.overflow = "hidden";
+		let t = (e) => {
+			e.key === "Escape" && p && n();
+		};
+		return document.addEventListener("keydown", t), () => {
+			document.body.style.overflow = "", document.removeEventListener("keydown", t);
+		};
+	}, [
+		e,
+		p,
+		n
+	]), !e) return null;
+	let w = {
 		small: "w-[360px]",
 		medium: "w-[480px]",
 		large: "w-[640px]"
-	}, p = {
+	}, T = {
 		success: {
 			icon: "✓",
 			bg: "bg-green-100",
@@ -1684,127 +1676,121 @@ var Oe = ({ title: e, subtitle: n, iconFile: r, loading: i = !1, state: a = "def
 			bg: "bg-gray-100",
 			text: "text-gray-500"
 		}
-	}[n];
+	}[r];
 	return /* @__PURE__ */ u("div", {
-		className: "fixed inset-0 z-50 flex items-center justify-center",
+		className: Y("fixed inset-0 z-50 flex items-center justify-center", h),
 		children: [/* @__PURE__ */ l("div", {
-			className: "absolute inset-0 backdrop-blur-sm bg-black/20",
-			onClick: t
+			className: Y("absolute inset-0 backdrop-blur-sm bg-black/20", g),
+			onClick: () => {
+				f && n();
+			}
 		}), /* @__PURE__ */ u("div", {
-			className: `
-          relative z-10
-          ${f[c]}
-          bg-white
-          rounded-2xl
-          shadow-2xl
-          border border-gray-200
-          overflow-hidden
-          animate-in fade-in zoom-in-95 duration-200
-        `,
+			className: Y("relative z-10 bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden animate-in fade-in zoom-in-95 duration-200", w[d], _),
 			children: [
 				/* @__PURE__ */ u("div", {
-					className: "px-6 pt-6 pb-4 text-center",
+					className: Y("px-6 pt-6 pb-4 text-center", v),
 					children: [
-						/* @__PURE__ */ l("div", {
-							className: `
-              w-14 h-14 mx-auto mb-4 rounded-full
-              flex items-center justify-center
-              text-2xl font-bold
-              ${p.bg}
-              ${p.text}
-            `,
-							children: p.icon
+						!m && /* @__PURE__ */ l("div", {
+							className: Y("w-14 h-14 mx-auto mb-4 rounded-full flex items-center justify-center text-2xl font-bold", T.bg, T.text, x),
+							children: T.icon
 						}),
 						/* @__PURE__ */ l("h2", {
-							className: "text-lg font-semibold text-gray-900",
-							children: r
-						}),
-						i && /* @__PURE__ */ l("p", {
-							className: "mt-2 text-sm text-gray-500",
+							className: Y("text-lg font-semibold text-gray-900", S),
 							children: i
+						}),
+						a && /* @__PURE__ */ l("p", {
+							className: Y("mt-2 text-sm text-gray-500", C),
+							children: a
 						})
 					]
 				}),
-				a && /* @__PURE__ */ l("div", {
-					className: "px-6 pb-6",
-					children: a
+				o && /* @__PURE__ */ l("div", {
+					className: Y("px-6 pb-6", y),
+					children: o
 				}),
-				(o || s) && /* @__PURE__ */ u("div", {
-					className: "flex justify-end gap-3 px-6 py-4 bg-gray-50 border-t border-gray-100",
-					children: [s && /* @__PURE__ */ l(d, {
-						text: s.text,
+				(s || c) && /* @__PURE__ */ u("div", {
+					className: Y("flex justify-end gap-3 px-6 py-4 bg-gray-50 border-t border-gray-100", b),
+					children: [c && /* @__PURE__ */ l(X, {
+						text: c.text,
 						variant: "secondary",
-						size: "medium",
-						state: "default",
-						onClick: s.onClick
-					}), o && /* @__PURE__ */ l(d, {
-						text: o.text,
+						onClick: c.onClick
+					}), s && /* @__PURE__ */ l(X, {
+						text: s.text,
 						variant: "primary",
-						size: "medium",
-						state: "default",
-						onClick: o.onClick
+						onClick: s.onClick
 					})]
 				})
 			]
 		})]
 	});
-}, je = ({ active: e, blur: t = 8, overlayOpacity: n = .35, children: r }) => e ? /* @__PURE__ */ u("div", {
-	className: "fixed inset-0 z-40",
+}, je = ({ active: e, blur: t = 8, overlayOpacity: n = .35, children: r, onClick: i, closeOnClick: a = !1, disablePointerEvents: o = !1, className: s, overlayClassName: c, contentClassName: d }) => e ? /* @__PURE__ */ u("div", {
+	className: Y("fixed inset-0 z-40", o && "pointer-events-none", s),
 	children: [/* @__PURE__ */ l("div", {
-		className: "absolute inset-0 backdrop-blur-sm",
+		className: Y("absolute inset-0 backdrop-blur-sm", c),
 		style: {
 			backdropFilter: `blur(${t}px)`,
 			backgroundColor: `rgba(255,255,255,${n})`
+		},
+		onClick: () => {
+			a && i?.();
 		}
 	}), /* @__PURE__ */ l("div", {
-		className: "relative z-50 flex items-center justify-center w-full h-full",
+		className: Y("relative z-50 flex items-center justify-center w-full h-full", !o && "pointer-events-auto", d),
 		children: r
 	})]
 }) : null;
 //#endregion
 //#region src/table.tsx
-function Me({ columns: e, data: t, itemsPerPage: n = 5 }) {
-	let [r, i] = s(1), [o, c] = s({}), d = (e, t) => {
-		c((n) => ({
+function Me({ columns: e, data: t, itemsPerPage: n = 5, title: r, className: i = "" }) {
+	let [o, c] = s(1), [d, f] = s({}), p = (e, t) => {
+		f((n) => ({
 			...n,
 			[e]: t
-		})), i(1);
-	}, f = a(() => t.filter((t) => e.every((e) => {
-		let n = o[e.key]?.toLowerCase() || "";
+		})), c(1);
+	}, m = a(() => t.filter((t) => e.every((e) => {
+		let n = d[e.key]?.toLowerCase() || "";
 		return n ? String(t[e.key]).toLowerCase().includes(n) : !0;
 	})), [
 		t,
-		o,
+		d,
 		e
-	]), p = Math.max(1, Math.ceil(f.length / n)), m = (r - 1) * n, h = f.slice(m, m + n), g = (e) => {
-		e >= 1 && e <= p && i(e);
+	]), h = Math.max(1, Math.ceil(m.length / n)), g = (o - 1) * n, _ = m.slice(g, g + n), v = (e) => {
+		e >= 1 && e <= h && c(e);
 	};
 	return /* @__PURE__ */ l("div", {
-		className: "w-full p-4",
+		className: `w-full p-4 ${i}`,
 		children: /* @__PURE__ */ u("div", {
 			className: "border rounded-2xl overflow-hidden shadow",
 			children: [/* @__PURE__ */ u("table", {
 				className: "w-full border-collapse",
 				children: [/* @__PURE__ */ u("thead", {
 					className: "bg-gray-100",
-					children: [/* @__PURE__ */ u("tr", { children: [e.map((e) => /* @__PURE__ */ l("th", {
-						className: "text-left p-3 text-sm font-semibold text-gray-600",
-						children: e.label
-					}, e.key)), /* @__PURE__ */ l("th", { className: "p-3" })] }), /* @__PURE__ */ u("tr", { children: [e.map((e) => /* @__PURE__ */ l("th", {
-						className: "p-2",
-						children: /* @__PURE__ */ l("input", {
-							type: "text",
-							placeholder: "Buscar...",
-							value: o[e.key] || "",
-							onChange: (t) => d(e.key, t.target.value),
-							className: "w-full px-2 py-1 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-red-400"
-						})
-					}, e.key)), /* @__PURE__ */ l("th", {})] })]
-				}), /* @__PURE__ */ l("tbody", { children: h.length === 0 ? /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("td", {
+					children: [
+						r && /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("th", {
+							colSpan: e.length + 1,
+							className: "text-left p-4 text-lg font-semibold bg-white border-b",
+							children: r
+						}) }),
+						/* @__PURE__ */ u("tr", { children: [e.map((e) => /* @__PURE__ */ l("th", {
+							className: "text-left p-3 text-sm font-semibold text-gray-600",
+							children: e.label
+						}, e.key)), /* @__PURE__ */ l("th", { className: "p-3" })] }),
+						/* @__PURE__ */ u("tr", { children: [e.map((e) => /* @__PURE__ */ l("th", {
+							className: "p-2",
+							children: /* @__PURE__ */ l("input", {
+								type: "text",
+								placeholder: "Buscar...",
+								value: d[e.key] || "",
+								onChange: (t) => p(e.key, t.target.value),
+								className: "w-full px-2 py-1 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-red-400"
+							})
+						}, e.key)), /* @__PURE__ */ l("th", {})] })
+					]
+				}), /* @__PURE__ */ l("tbody", { children: _.length === 0 ? /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("td", {
 					colSpan: e.length + 1,
 					className: "p-4 text-center text-sm text-gray-500",
 					children: "No hay resultados"
-				}) }) : h.map((t, n) => /* @__PURE__ */ u("tr", {
+				}) }) : _.map((t, n) => /* @__PURE__ */ u("tr", {
 					className: "border-t hover:bg-gray-50 transition",
 					children: [e.map((e) => /* @__PURE__ */ l("td", {
 						className: "p-3 text-sm",
@@ -1818,28 +1804,28 @@ function Me({ columns: e, data: t, itemsPerPage: n = 5 }) {
 				className: "flex items-center justify-between p-3 text-sm",
 				children: [/* @__PURE__ */ u("span", { children: [
 					"Mostrando ",
-					h.length,
+					_.length,
 					" de ",
-					f.length,
+					m.length,
 					" resultados"
 				] }), /* @__PURE__ */ u("div", {
 					className: "flex gap-2 items-center",
 					children: [
 						/* @__PURE__ */ l("button", {
-							onClick: () => g(r - 1),
+							onClick: () => v(o - 1),
 							className: "px-2 py-1 border rounded disabled:opacity-50",
-							disabled: r === 1,
+							disabled: o === 1,
 							children: "<"
 						}),
-						Array.from({ length: p }).map((e, t) => /* @__PURE__ */ l("button", {
-							onClick: () => g(t + 1),
-							className: `px-3 py-1 rounded ${r === t + 1 ? "bg-red-500 text-white" : "border"}`,
+						Array.from({ length: h }).map((e, t) => /* @__PURE__ */ l("button", {
+							onClick: () => v(t + 1),
+							className: `px-3 py-1 rounded ${o === t + 1 ? "bg-red-500 text-white" : "border"}`,
 							children: t + 1
 						}, t)),
 						/* @__PURE__ */ l("button", {
-							onClick: () => g(r + 1),
+							onClick: () => v(o + 1),
 							className: "px-2 py-1 border rounded disabled:opacity-50",
-							disabled: r === p,
+							disabled: o === h,
 							children: ">"
 						})
 					]
@@ -1850,26 +1836,26 @@ function Me({ columns: e, data: t, itemsPerPage: n = 5 }) {
 }
 //#endregion
 //#region src/Select.tsx
-var Ne = ({ options: e, multiple: t = !1, placeholder: n = "Select...", label: r, required: a, hint: c, value: d, onChange: f }) => {
-	let [p, m] = s(!1), [h, g] = s(""), _ = o(null), v = (e) => t && Array.isArray(d) ? d.includes(e) : d === e, y = (e) => {
+var Ne = ({ options: e, multiple: t = !1, placeholder: n = "Select...", label: r, required: a, hint: c, value: d, onChange: f, className: p, triggerClassName: m, dropdownClassName: h, optionClassName: g, labelClassName: _, hintClassName: v, searchClassName: y }) => {
+	let [b, x] = s(!1), [S, C] = s(""), w = o(null), T = (e) => t && Array.isArray(d) ? d.includes(e) : d === e, E = (e) => {
 		if (t) {
 			let t = Array.isArray(d) ? [...d] : [];
 			t.includes(e) ? t = t.filter((t) => t !== e) : t.push(e), f?.(t);
-		} else f?.(e), m(!1);
-	}, b = (e) => {
+		} else f?.(e), x(!1);
+	}, D = (e) => {
 		!t || !Array.isArray(d) || f?.(d.filter((t) => t !== e));
-	}, x = e.filter((e) => e.label.toLowerCase().includes(h.toLowerCase()));
+	}, O = e.filter((e) => e.label.toLowerCase().includes(S.toLowerCase()));
 	return i(() => {
 		let e = (e) => {
-			_.current?.contains(e.target) || m(!1);
+			w.current?.contains(e.target) || x(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []), /* @__PURE__ */ u("div", {
-		className: "w-[300px] text-sm",
-		ref: _,
+		className: Y("w-[300px] text-sm", p),
+		ref: w,
 		children: [
 			r && /* @__PURE__ */ u("label", {
-				className: "block mb-1 font-medium",
+				className: Y("block mb-1 font-medium", _),
 				children: [
 					r,
 					" ",
@@ -1880,13 +1866,13 @@ var Ne = ({ options: e, multiple: t = !1, placeholder: n = "Select...", label: r
 				]
 			}),
 			/* @__PURE__ */ l("div", {
-				className: "border rounded-lg px-3 py-2 flex flex-wrap gap-2 items-center cursor-pointer",
-				onClick: () => m(!p),
+				className: Y("border rounded-lg px-3 py-2 flex flex-wrap gap-2 items-center cursor-pointer", m),
+				onClick: () => x(!b),
 				children: t && Array.isArray(d) ? d.length > 0 ? d.map((t) => /* @__PURE__ */ u("span", {
 					className: "bg-gray-200 px-2 py-1 rounded flex items-center gap-1",
 					children: [e.find((e) => e.value === t)?.label, /* @__PURE__ */ l("button", {
 						onClick: (e) => {
-							e.stopPropagation(), b(t);
+							e.stopPropagation(), D(t);
 						},
 						children: "×"
 					})]
@@ -1898,27 +1884,27 @@ var Ne = ({ options: e, multiple: t = !1, placeholder: n = "Select...", label: r
 					children: n
 				}) })
 			}),
-			p && /* @__PURE__ */ u("div", {
-				className: "border rounded-lg mt-2 p-2 bg-white shadow",
+			b && /* @__PURE__ */ u("div", {
+				className: Y("border rounded-lg mt-2 p-2 bg-white shadow", h),
 				children: [/* @__PURE__ */ l("input", {
 					type: "text",
 					placeholder: "Buscar...",
-					className: "w-full border px-2 py-1 mb-2 rounded",
-					value: h,
-					onChange: (e) => g(e.target.value)
+					className: Y("w-full border px-2 py-1 mb-2 rounded", y),
+					value: S,
+					onChange: (e) => C(e.target.value)
 				}), /* @__PURE__ */ l("div", {
 					className: "max-h-40 overflow-auto",
-					children: x.map((e) => /* @__PURE__ */ u("div", {
-						className: "flex items-center gap-2 px-2 py-1 hover:bg-gray-100 cursor-pointer",
-						onClick: () => y(e.value),
+					children: O.map((e) => /* @__PURE__ */ u("div", {
+						className: Y("flex items-center gap-2 px-2 py-1 hover:bg-gray-100 cursor-pointer", g),
+						onClick: () => E(e.value),
 						children: [
 							t && /* @__PURE__ */ l("input", {
 								type: "checkbox",
-								checked: v(e.value),
+								checked: T(e.value),
 								readOnly: !0
 							}),
 							/* @__PURE__ */ l("span", { children: e.label }),
-							!t && v(e.value) && /* @__PURE__ */ l("span", {
+							!t && T(e.value) && /* @__PURE__ */ l("span", {
 								className: "ml-auto",
 								children: "✔"
 							})
@@ -1927,11 +1913,11 @@ var Ne = ({ options: e, multiple: t = !1, placeholder: n = "Select...", label: r
 				})]
 			}),
 			c && /* @__PURE__ */ l("p", {
-				className: "text-gray-400 mt-1 text-xs",
+				className: Y("text-gray-400 mt-1 text-xs", v),
 				children: c
 			})
 		]
 	});
 };
 //#endregion
-export { je as BackgroundBlur, d as Button, ke as CardRow, Ee as Checkbox, Oe as FileItem, De as FileUpload, f as Input, Ae as Modal, Ne as Select, Me as Table, he as TextArea };
+export { je as BackgroundBlur, X as Button, ke as CardRow, Ee as Checkbox, Oe as FileItem, De as FileUpload, me as Input, Ae as Modal, Ne as Select, Me as Table, he as TextArea };