hanap-labs 4.0.0 → 4.1.1

package/dist/chunks/{components-BADucNhy.js → components-vlXrGm5j.js}

@@ -1,8 +1,8 @@
-import { i as e, n as t, r as n, s as r, t as i } from "./usePopup-DVekAEps.js";
-import { Fragment as a, Teleport as o, Transition as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, customRef as g, defineComponent as _, getCurrentInstance as v, getCurrentScope as y, h as b, isRef as x, mergeModels as S, mergeProps as C, nextTick as w, normalizeClass as T, normalizeStyle as E, onBeforeUnmount as D, onMounted as O, onScopeDispose as k, onUnmounted as ee, openBlock as A, readonly as te, ref as j, render as ne, renderList as M, renderSlot as N, resolveDynamicComponent as re, shallowRef as P, toDisplayString as F, toRef as I, toValue as L, unref as R, useId as ie, useModel as ae, useSlots as oe, vModelCheckbox as se, vModelDynamic as ce, vModelText as le, watch as z, watchEffect as ue, withCtx as B, withDirectives as V, withModifiers as de } from "vue";
+import { i as e, n as t, r as n, s as r, t as i } from "./usePopup-BdVwAd1y.js";
+import { Fragment as a, Teleport as o, Transition as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, customRef as g, defineComponent as _, getCurrentInstance as v, getCurrentScope as y, h as b, isRef as x, mergeModels as S, mergeProps as C, nextTick as w, normalizeClass as T, normalizeStyle as E, onBeforeUnmount as D, onMounted as O, onScopeDispose as k, onUnmounted as ee, openBlock as A, readonly as te, ref as j, render as ne, renderList as M, renderSlot as N, resolveDynamicComponent as re, shallowRef as P, toDisplayString as F, toRef as I, toValue as L, unref as R, useId as ie, useModel as ae, useSlots as oe, vModelCheckbox as se, vModelDynamic as ce, vModelText as le, watch as z, watchEffect as ue, withCtx as B, withDirectives as de, withModifiers as fe } from "vue";
 //#endregion
 //#region src/components/hl-icon/HLIcon.registry.ts
-var fe = /* @__PURE__ */ Object.assign({
+var pe = /* @__PURE__ */ Object.assign({
 	"../../assets/icons/account-check.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <circle cx=\"9\" cy=\"8\" r=\"4\" />\n  <path d=\"M3 20c1.5-3.5 4.5-5 6-5s4.5 1.5 6 5\" />\n  <path d=\"m15.5 12.5 1.5 1.5 3-3\" />\n</svg>",
 	"../../assets/icons/alert-triangle.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M12 3 2 21h20L12 3z\" />\n  <path d=\"M12 9v5\" />\n  <path d=\"M12 17.5h.01\" />\n</svg>",
 	"../../assets/icons/alert.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n  <path d=\"M12 3.6c1.7 0 2.86 1.34 2.66 2.96l-1 8.02c-.11.9-.87 1.57-1.78 1.57s-1.67-.67-1.78-1.57l-1-8.02c-.2-1.62.96-2.96 2.66-2.96Z\" />\n  <circle cx=\"12\" cy=\"20.15\" r=\"1.7\" />\n</svg>\n",
@@ -60,7 +60,6 @@ var fe = /* @__PURE__ */ Object.assign({
 	"../../assets/icons/pen.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\" />\n</svg>",
 	"../../assets/icons/phone.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384\" />\n</svg>",
 	"../../assets/icons/plus.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M12 5v14\" />\n  <path d=\"M5 12h14\" />\n</svg>",
-	"../../assets/icons/restaurant.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2\" />\n  <path d=\"M7 2v20\" />\n  <path d=\"M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7\" />\n</svg>",
 	"../../assets/icons/retail.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <circle cx=\"10\" cy=\"19\" r=\"1.5\" />\n  <circle cx=\"17\" cy=\"19\" r=\"1.5\" />\n  <path d=\"M3 4h2l2.2 10.5a2 2 0 0 0 2 1.5h8.8a2 2 0 0 0 2-1.5L21 7H7\" />\n  <path d=\"M8 11h11\" />\n</svg>",
 	"../../assets/icons/rotate-ccw.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\" />\n  <path d=\"M3 3v5h5\" />\n</svg>",
 	"../../assets/icons/save.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M5 4h11l3 3v13H5z\" />\n  <path d=\"M8 4v5h7V4\" />\n  <rect x=\"8\" y=\"14\" width=\"8\" height=\"5\" rx=\"1\" />\n</svg>",
@@ -92,20 +91,20 @@ var fe = /* @__PURE__ */ Object.assign({
 	"../../assets/icons/wrench.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\" />\n</svg>",
 	"../../assets/icons/x-circle.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\" />\n</svg>",
 	"../../assets/icons/x-mark.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M6 6l12 12\" />\n  <path d=\"M18 6 6 18\" />\n</svg>"
-}), pe = /\/([^/]+)\.svg$/, H = {};
-for (let [e, t] of Object.entries(fe)) {
-	let n = e.match(pe);
+}), me = /\/([^/]+)\.svg$/, V = {};
+for (let [e, t] of Object.entries(pe)) {
+	let n = e.match(me);
 	if (!n) continue;
 	let r = n[1];
-	H[r] = t;
+	V[r] = t;
 }
-var me = Object.freeze(Object.keys(H).sort((e, t) => e.localeCompare(t)));
-function he(e) {
-	return H[e];
+var he = Object.freeze(Object.keys(V).sort((e, t) => e.localeCompare(t)));
+function ge(e) {
+	return V[e];
 }
 //#endregion
 //#region src/components/hl-icon/HLIcon.vue?vue&type=script&setup=true&lang.ts
-var ge = [
+var H = [
 	"role",
 	"aria-label",
 	"aria-hidden"
@@ -160,7 +159,7 @@ var ge = [
 			return !(!t.startsWith("<svg") || !t.endsWith("</svg>") || /<script[\s>]/i.test(t) || /\son[a-z]+\s*=/i.test(t) || /javascript:/i.test(t));
 		}
 		let o = c(() => typeof e.source == "string" && e.source.trim() || void 0), s = c(() => {
-			let t = o.value ?? he(e.name);
+			let t = o.value ?? ge(e.name);
 			if (t) return a(t) ? t : void 0;
 		}), l = c(() => e.ariaLabel || e.title || e.name), u = c(() => e.decorative), f = {
 			secondary: "hl-text-secondary",
@@ -189,7 +188,7 @@ var ge = [
 			key: 1,
 			class: "hl-inline-flex hl-size-full hl-items-center hl-justify-center hl-rounded hl-border hl-border-solid hl-border-danger hl-text-[10px] hl-text-danger",
 			title: `Icon '${e.name}' is not found`
-		}, " ? ", 8, ve))], 14, ge));
+		}, " ? ", 8, ve))], 14, H));
 	}
 }), be = (e, t) => {
 	let n = e.__vccOpts || e;
@@ -319,7 +318,7 @@ var De = {
 	key: 1,
 	class: "hl-mx-1 hl-text-muted",
 	"aria-hidden": "true"
-}, Ae = ["href"], W = /* @__PURE__ */ _({
+}, Ae = ["href"], je = /* @__PURE__ */ _({
 	__name: "HLBreadcrumb",
 	props: {
 		path: { default: "/" },
@@ -376,50 +375,61 @@ var De = {
 			class: T(["hl-font-semibold", t.isActive ? s.value : "hl-theme-text"])
 		}, F(t.label), 3))]))), 128))])]));
 	}
-}), je = ["src"], Me = {
+}), Me = ["src"], Ne = {
 	key: 1,
 	class: "hl-box-border hl-whitespace-nowrap hl-truncate"
-}, Ne = /* @__PURE__ */ _({
+}, W = /* @__PURE__ */ _({
 	name: "HLAvatar",
 	__name: "HLAvatar",
 	props: {
 		text: { default: "?" },
 		image: { default: "" },
-		size: { default: "md" }
+		size: { default: "md" },
+		colorType: { default: "solid" }
 	},
 	setup(e) {
-		let t = {
+		let t = j(!1), n = {
 			xs: "hl-size-6",
 			sm: "hl-size-9",
 			md: "hl-size-10",
 			lg: "hl-size-12"
-		}, n = {
+		}, r = {
 			xs: "hl-text-[10px]",
 			sm: "hl-text-xs",
 			md: "hl-text-sm",
 			lg: "hl-text-base"
-		}, r = c(() => {
+		}, i = c(() => {
 			let t = e.image.trim();
 			return !t || t.startsWith("[") ? "" : t;
-		}), i = c(() => {
-			let { firstWord: t, lastWord: n } = s(e.text);
-			return t ? `${t.charAt(0).toUpperCase()}${n ? n.charAt(0).toUpperCase() : ""}` : "?";
 		}), a = c(() => {
-			if (r.value) return {};
+			let { firstWord: t, lastWord: n } = m(e.text);
+			return t ? `${t.charAt(0).toUpperCase()}${n ? n.charAt(0).toUpperCase() : ""}` : "?";
+		}), o = c(() => {
+			if (i.value) return null;
 			let t = e.text.trim();
-			if (!t || t === "?") return {};
-			let n = l(t), i = n % 360, a = 60 + n % 16, o = 20 + n % 12, s = 70 + n % 12;
+			if (!t || t === "?") return null;
+			let n = h(t);
 			return {
-				"--hl-avatar-bg-light": `hsl(${i} ${a}% ${o}%)`,
-				"--hl-avatar-bg-dark": `hsl(${i} ${a}% ${s}%)`,
-				"--hl-avatar-text-light": "#ffffff",
-				"--hl-avatar-text-dark": "#000000"
+				hue: n % 360,
+				saturation: 60 + n % 16,
+				lightnessLight: 20 + n % 12,
+				lightnessDark: 70 + n % 12
 			};
-		}), o = c(() => {
+		}), s = c(() => {
+			let n = o.value;
+			if (!n) return {};
+			let { hue: r, saturation: i, lightnessLight: a, lightnessDark: s } = n, c = `hsl(${r} ${i}% ${a}%)`, l = `hsl(${r} ${i}% ${s}%)`;
+			return e.colorType === "gradient" ? t.value ? { background: `linear-gradient(to bottom right, ${l}, hsl(${r} ${i}% ${s - 10}%))` } : { background: `linear-gradient(to bottom right, ${c}, hsl(${r} ${i}% ${a + 10}%))` } : { backgroundColor: t.value ? l : c };
+		}), l = c(() => {
+			if (i.value) return {};
+			let n = e.text.trim();
+			return !n || n === "?" ? {} : { color: t.value ? "#000000" : "#ffffff" };
+		}), u = c(() => (i.value || e.text.trim(), "")), p = c(() => {
+			if (i.value) return "hl-bg-primary/10 hl-text-primary";
 			let t = e.text.trim();
-			return r.value || !t || t === "?" ? "hl-bg-primary/10 hl-text-primary" : "hl-bg-[var(--hl-avatar-bg-light)] dark:hl-bg-[var(--hl-avatar-bg-dark)] hl-text-[var(--hl-avatar-text-light)] dark:hl-text-[var(--hl-avatar-text-dark)]";
+			return !t || t === "?" ? "hl-bg-primary/10 hl-text-primary" : "";
 		});
-		function s(e) {
+		function m(e) {
 			let t = e.trim().split(/\s+/).filter((e) => e.length > 0);
 			return t.length === 0 ? {
 				firstWord: "",
@@ -432,20 +442,37 @@ var De = {
 				lastWord: t[t.length - 1]
 			};
 		}
-		function l(e) {
+		function h(e) {
 			let t = 0;
 			for (let n of e) t = (t << 5) - t + n.charCodeAt(0), t |= 0;
 			return Math.abs(t);
 		}
-		return (s, c) => (A(), d("div", { class: T(["hanap-labs-theme hanap-labs-font hl-box-border hl-inline-flex hl-flex-none hl-min-w-0 hl-min-h-0 hl-shrink-0 hl-items-center hl-justify-center hl-rounded-full hl-bg-tertiary/35 hl-ring-1 hl-ring-primary/20", t[e.size]]) }, [f("div", {
-			class: T(["hl-theme-border hl-box-border hl-flex hl-size-full hl-min-w-0 hl-min-h-0 hl-items-center hl-justify-center hl-overflow-hidden hl-rounded-full hl-border hl-border-solid hl-font-bold hl-uppercase hl-leading-none hl-select-none", [n[e.size], o.value]]),
-			style: E(a.value)
-		}, [r.value ? (A(), d("img", {
+		function g() {
+			t.value = document.documentElement.classList.contains("dark");
+		}
+		let _ = null;
+		return O(() => {
+			g(), _ = new MutationObserver(() => {
+				g();
+			}), _.observe(document.documentElement, {
+				attributes: !0,
+				attributeFilter: ["class"]
+			});
+		}), ee(() => {
+			_ && _.disconnect();
+		}), (t, o) => (A(), d("div", { class: T(["hanap-labs-theme hanap-labs-font hl-box-border hl-inline-flex hl-flex-none hl-min-w-0 hl-min-h-0 hl-shrink-0 hl-items-center hl-justify-center hl-rounded-full hl-bg-tertiary/35 hl-ring-1 hl-ring-primary/20", n[e.size]]) }, [f("div", {
+			class: T(["hl-theme-border hl-box-border hl-flex hl-size-full hl-min-w-0 hl-min-h-0 hl-items-center hl-justify-center hl-overflow-hidden hl-rounded-full hl-border hl-border-solid hl-font-bold hl-uppercase hl-leading-none hl-select-none", [
+				r[e.size],
+				p.value,
+				u.value
+			]]),
+			style: E([s.value, l.value])
+		}, [i.value ? (A(), d("img", {
 			key: 0,
-			src: r.value,
+			src: i.value,
 			alt: "Avatar image",
 			class: "hl-box-border hl-size-full hl-rounded-full hl-object-cover"
-		}, null, 8, je)) : (A(), d("span", Me, F(i.value), 1))], 6)], 2));
+		}, null, 8, Me)) : (A(), d("span", Ne, F(a.value), 1))], 6)], 2));
 	}
 }), Pe = ["type", "disabled"], Fe = {
 	key: 1,
@@ -488,8 +515,8 @@ var De = {
 	emits: ["click"],
 	setup(e, { emit: t }) {
 		let n = {
-			secondary: "hl-border-0 hl-bg-secondary hl-text-primary hover:hl-bg-tertiary",
-			tertiary: "hl-border-0 hl-bg-tertiary hl-text-primary hover:hl-opacity-90",
+			secondary: "hl-border-0 hl-bg-secondary hl-text-light hover:hl-bg-tertiary",
+			tertiary: "hl-border-0 hl-bg-tertiary hl-text-light hover:hl-opacity-90",
 			primary: "hl-border-0 hl-bg-primary hl-text-light hover:hl-opacity-90",
 			success: "hl-border-0 hl-bg-success hl-text-light hover:hl-opacity-90",
 			danger: "hl-border-0 hl-bg-danger hl-text-light hover:hl-opacity-90",
@@ -538,7 +565,7 @@ var De = {
 				e.iconOnly && "!hl-gap-0 !hl-min-w-0"
 			],
 			disabled: e.disabled || e.loading,
-			onClick: n[0] ||= de((e) => s("click"), ["stop"])
+			onClick: n[0] ||= fe((e) => s("click"), ["stop"])
 		}), [t.$slots.icon && !e.loading ? (A(), d("span", {
 			key: 0,
 			class: T(["hl-inline-flex hl-items-center hl-justify-center", e.iconPosition === "right" ? "hl-order-2" : "hl-order-1"])
@@ -568,10 +595,10 @@ var De = {
 			e.class
 		]) }, [N(t.$slots, "default")], 2));
 	}
-}), Le = { class: "hanap-labs-theme hanap-labs-font hl-mb-1" }, q = ["for"], Re = ["id"], ze = {
+}), Le = { class: "hanap-labs-theme hanap-labs-font hl-mb-1" }, Re = ["for"], ze = ["id"], Be = {
 	key: 0,
-	class: "hl-input-error-theme hl-ml-0.5"
-}, Be = /* @__PURE__ */ _({
+	class: "hl-text-red-600 dark:hl-text-red-400 hl-ml-0.5"
+}, Ve = /* @__PURE__ */ _({
 	__name: "HLLabel",
 	props: {
 		label: { default: "" },
@@ -600,21 +627,21 @@ var De = {
 		})[e.size]);
 		return (r, i) => (A(), d("div", Le, [f("label", {
 			for: e.forId || void 0,
-			class: T(["hl-theme-text hl-block hl-font-medium", [t.value, e.labelClass]])
-		}, [f("span", { id: e.labelId || void 0 }, F(e.label), 9, Re), e.required ? (A(), d("span", ze, "*")) : u("", !0)], 10, q), e.description ? (A(), d("div", {
+			class: T(["hl-text-slate-900 dark:hl-text-slate-50 hl-block hl-font-medium", [t.value, e.labelClass]])
+		}, [f("span", { id: e.labelId || void 0 }, F(e.label), 9, ze), e.required ? (A(), d("span", Be, "*")) : u("", !0)], 10, Re), e.description ? (A(), d("div", {
 			key: 0,
-			class: T(["hl-theme-text-muted", [n.value, e.descriptionClass]])
+			class: T(["hl-text-slate-500 dark:hl-text-slate-400", [n.value, e.descriptionClass]])
 		}, F(e.description), 3)) : u("", !0)]));
 	}
-}), Ve = { class: "hanap-labs-theme hanap-labs-font hl-w-full hl-select-none" }, He = [
+}), He = { class: "hanap-labs-theme hanap-labs-font hl-w-full hl-select-none" }, Ue = [
 	"aria-checked",
 	"aria-label",
 	"aria-labelledby",
 	"disabled"
-], Ue = {
+], We = {
 	key: 1,
 	class: "hl-sr-only"
-}, We = ["id", "disabled"], Ge = "hl-bg-light hl-theme-border-strong", Ke = "hl-bg-light hl-theme-border-strong hl-theme-text", qe = /* @__PURE__ */ _({
+}, q = ["id", "disabled"], Ge = "hl-bg-light", Ke = "hl-bg-primary", qe = /* @__PURE__ */ _({
 	__name: "HLCheckbox",
 	props: /* @__PURE__ */ S({
 		id: { default: "" },
@@ -633,11 +660,7 @@ var De = {
 		},
 		size: { default: "md" },
 		labelSize: { default: "md" },
-		color: {},
-		noBorder: {
-			type: Boolean,
-			default: !1
-		}
+		color: {}
 	}, {
 		modelValue: {
 			type: Boolean,
@@ -665,52 +688,63 @@ var De = {
 			md: 14,
 			lg: 16
 		}, m = {
-			primary: "hl-bg-primary hl-border-primary hl-text-white",
-			secondary: "hl-bg-secondary hl-border-secondary hl-text-white",
-			tertiary: "hl-bg-tertiary hl-border-tertiary hl-theme-text",
-			success: "hl-bg-success hl-border-success hl-text-white",
-			danger: "hl-bg-danger hl-border-danger hl-text-white",
-			warning: "hl-bg-warning hl-border-warning hl-text-dark",
-			info: "hl-bg-info hl-border-info hl-text-white",
-			light: "hl-bg-light hl-border-light hl-theme-text",
-			dark: "hl-bg-dark hl-border-dark hl-text-white",
-			muted: "hl-bg-muted hl-border-muted hl-text-white"
+			primary: "hl-bg-primary",
+			secondary: "hl-bg-secondary",
+			tertiary: "hl-bg-tertiary",
+			success: "hl-bg-success",
+			danger: "hl-bg-danger",
+			warning: "hl-bg-warning",
+			info: "hl-bg-info",
+			light: "hl-bg-light",
+			dark: "hl-bg-dark",
+			muted: "hl-bg-muted"
 		}, g = {
-			primary: "hl-bg-light hl-border-primary",
-			secondary: "hl-bg-light hl-border-secondary",
-			tertiary: "hl-bg-light hl-border-tertiary",
-			success: "hl-bg-light hl-border-success",
-			danger: "hl-bg-light hl-border-danger",
-			warning: "hl-bg-light hl-border-warning",
-			info: "hl-bg-light hl-border-info",
-			light: "hl-bg-light hl-border-muted",
-			dark: "hl-bg-light hl-border-dark",
-			muted: "hl-bg-light hl-border-muted"
-		}, _ = (e) => typeof e == "string" && Object.prototype.hasOwnProperty.call(m, e), v = c(() => s[e.size]), y = c(() => p[e.size]), b = c(() => e.indeterminate && !t.value), x = c(() => b.value ? "mixed" : t.value), S = c(() => b.value ? "hl-bg-primary/20 hl-border-primary hl-text-primary" : _(e.color) ? t.value ? m[e.color] : g[e.color] : t.value ? Ke : Ge);
-		return (n, s) => (A(), d("div", Ve, [f("button", {
+			primary: "hl-bg-primary-20",
+			secondary: "hl-bg-secondary-20",
+			tertiary: "hl-bg-tertiary-20",
+			success: "hl-bg-success-20",
+			danger: "hl-bg-danger-20",
+			warning: "hl-bg-warning-20",
+			info: "hl-bg-info-20",
+			light: "hl-bg-light",
+			dark: "hl-bg-dark-20",
+			muted: "hl-bg-muted-20"
+		}, _ = {
+			primary: "light",
+			secondary: "light",
+			tertiary: "light",
+			success: "light",
+			danger: "light",
+			warning: "dark",
+			info: "light",
+			light: "dark",
+			dark: "light",
+			muted: "light"
+		}, v = (e) => typeof e == "string" && Object.prototype.hasOwnProperty.call(m, e), y = c(() => s[e.size]), b = c(() => p[e.size]), x = c(() => e.indeterminate && !t.value), S = c(() => x.value ? "mixed" : t.value), C = c(() => x.value ? "hl-bg-primary/20 hl-border-primary" : v(e.color) ? t.value ? m[e.color] : g[e.color] : t.value ? Ke : Ge), w = c(() => {
+			if (x.value) return "primary";
+			if (t.value) return v(e.color) ? _[e.color] : "light";
+			if (v(e.color)) return e.color;
+		});
+		return (n, s) => (A(), d("div", He, [f("button", {
 			type: "button",
 			role: "checkbox",
-			"aria-checked": x.value,
+			"aria-checked": S.value,
 			"aria-label": e.ariaLabel || void 0,
 			"aria-labelledby": a.value ? i.value : void 0,
 			disabled: e.disabled,
 			style: { "box-shadow": "none" },
 			class: T(["hl-inline-flex hl-w-full hl-appearance-none hl-border-0 !hl-shadow-none hl-items-start hl-gap-3 hl-rounded-md hl-bg-transparent hl-text-left hanap-labs-font hl-transition-all hl-duration-300 hl-no-focus-ring", e.disabled ? "hl-cursor-not-allowed hl-opacity-50" : "hl-cursor-pointer"]),
 			onClick: o
-		}, [f("span", { class: T(["hl-theme-border hl-theme-bg hl-mt-0.5 hl-inline-flex hl-shrink-0 hl-items-center hl-justify-center hl-overflow-hidden hl-rounded hl-border hl-border-solid hl-leading-none hl-transition-colors hl-duration-300", [
-			v.value,
-			S.value,
-			e.noBorder && "hl-border-0"
-		]]) }, [h(U, {
+		}, [f("span", { class: T(["hl-mt-0.5 hl-inline-flex hl-shrink-0 hl-items-center hl-justify-center hl-overflow-hidden hl-rounded hl-leading-none hl-transition-colors hl-duration-300", [y.value, C.value]]) }, [h(U, {
 			name: "check",
-			size: y.value,
-			color: e.color,
-			class: T(["hl-transition-opacity hl-duration-300", [u[e.size], t.value || b.value ? "hl-opacity-100" : "hl-opacity-0"]])
+			size: b.value,
+			color: w.value,
+			class: T(["hl-transition-opacity hl-duration-300", [u[e.size], t.value || x.value ? "hl-opacity-100" : "hl-opacity-0"]])
 		}, null, 8, [
 			"size",
 			"color",
 			"class"
-		])], 2), e.label || e.description ? (A(), l(Be, {
+		])], 2), e.label || e.description ? (A(), l(Ve, {
 			key: 0,
 			class: "hl-min-w-0",
 			label: e.label,
@@ -728,13 +762,13 @@ var De = {
 			"size",
 			"label-class",
 			"description-class"
-		])) : (A(), d("span", Ue, "toggle checkbox"))], 10, He), V(f("input", {
+		])) : (A(), d("span", We, "toggle checkbox"))], 10, Ue), de(f("input", {
 			id: r.value,
 			"onUpdate:modelValue": s[0] ||= (e) => t.value = e,
 			type: "checkbox",
 			class: "hl-sr-only",
 			disabled: e.disabled
-		}, null, 8, We), [[se, t.value]])]));
+		}, null, 8, q), [[se, t.value]])]));
 	}
 }), Je = { class: "hanap-labs-theme hanap-labs-font hl-w-full" }, Ye = { class: "hl-relative" }, Xe = {
 	key: 0,
@@ -852,7 +886,7 @@ var De = {
 			muted: "hl-border-muted focus:hl-border-muted"
 		}, O = c(() => w[e.size]), k = c(() => e.rounded ? "hl-rounded-full" : E[e.size]), ee = c(() => e.color ? D[e.color] : "hl-input-theme hl-input-default");
 		return (t, i) => (A(), d("div", Je, [
-			e.label || e.description ? (A(), l(Be, {
+			e.label || e.description ? (A(), l(Ve, {
 				key: 0,
 				label: e.label,
 				description: e.description,
@@ -870,7 +904,7 @@ var De = {
 			])) : u("", !0),
 			f("div", Ye, [
 				e.iconLeft ? (A(), d("div", Xe, [N(t.$slots, "icon", {}, void 0, !0)])) : u("", !0),
-				V(f("input", {
+				de(f("input", {
 					ref_key: "inputRef",
 					ref: s,
 					id: o.value,
@@ -926,7 +960,7 @@ var De = {
 					"aria-label": p.value ? "Hide password" : "Show password",
 					onClick: v
 				}, [h(U, {
-					name: p.value ? "eye-off" : "eye",
+					name: p.value ? "hide" : "view",
 					size: 18,
 					decorative: !0,
 					color: e.color
@@ -938,7 +972,7 @@ var De = {
 			}, F(e), 1))), 128))])) : u("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-63424e23"]]);
+}), [["__scopeId", "data-v-09f67951"]]);
 //#endregion
 //#region node_modules/@vueuse/shared/dist/index.js
 function rt(e, t) {
@@ -1456,7 +1490,8 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 		isLoading: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		loading: { type: Boolean }
 	}, {
 		modelValue: {
 			type: Boolean,
@@ -1473,15 +1508,15 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 		function a() {
 			typeof document > "u" || n <= 0 || (--n, n === 0 && (document.body.style.overflow = r ?? "", r = null));
 		}
-		let p = ae(e, "modelValue"), m = (e) => e === void 0 || typeof e == "object" && !Array.isArray(e), g = c(() => m(e.componentProps) ? e.componentProps ?? {} : {}), _ = c(() => g.value.title?.trim() || "Confirm action"), v = c(() => g.value.message?.trim() || "Are you sure?"), y = c(() => g.value.confirmText?.trim() || "Confirm"), b = c(() => g.value.cancelText?.trim() || "Cancel"), x = c(() => g.value.icon?.trim() || "shield-check"), S = c(() => {
-			let e = g.value.iconSource;
+		let p = ae(e, "modelValue"), m = c(() => e.loading ?? e.isLoading), g = (e) => e === void 0 || typeof e == "object" && !Array.isArray(e), _ = c(() => g(e.componentProps) ? e.componentProps ?? {} : {}), v = c(() => _.value.title?.trim() || "Confirm action"), y = c(() => _.value.message?.trim() || "Are you sure?"), b = c(() => _.value.confirmText?.trim() || "Confirm"), x = c(() => _.value.cancelText?.trim() || "Cancel"), S = c(() => _.value.icon?.trim() || "shield-check"), w = c(() => {
+			let e = _.value.iconSource;
 			if (typeof e == "string") return e.trim() || void 0;
-		}), w = c(() => g.value.hideIcon !== !0), E = t, D = () => {
-			!e.closeOnBackdrop || e.isLoading || (p.value = !1, E("close"));
-		}, O = () => {
-			e.isLoading || (p.value = !1, E("close"));
+		}), E = c(() => _.value.hideIcon !== !0), D = t, O = () => {
+			!e.closeOnBackdrop || m || (p.value = !1, D("close"));
 		}, k = () => {
-			e.isLoading || E("confirm");
+			m || (p.value = !1, D("close"));
+		}, te = () => {
+			m || D("confirm");
 		};
 		return z(p, (e) => {
 			if (e) {
@@ -1501,7 +1536,7 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 		}, {
 			default: B(() => [p.value ? (A(), d("div", Vt, [f("div", {
 				class: T(["hl-absolute hl-inset-0", e.backdropClass]),
-				onClick: D
+				onClick: O
 			}, null, 2), h(s, {
 				"enter-active-class": "hl-transition hl-duration-300 hl-ease-out",
 				"enter-from-class": "hl-scale-95 hl-opacity-0",
@@ -1513,28 +1548,28 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 				default: B(() => [p.value ? (A(), d("div", {
 					key: 0,
 					class: T(["hl-relative hl-z-10 hl-flex hl-w-full hl-items-start hl-justify-center hl-px-4 hl-pointer-events-none", e.containerClass])
-				}, [f("div", Ht, [e.type === "confirm" ? (A(), d("div", Ut, [f("div", Wt, [w.value ? (A(), d("div", Gt, [w.value ? (A(), l(U, {
+				}, [f("div", Ht, [e.type === "confirm" ? (A(), d("div", Ut, [f("div", Wt, [E.value ? (A(), d("div", Gt, [E.value ? (A(), l(U, {
 					key: 0,
-					name: x.value,
-					source: S.value,
+					name: S.value,
+					source: w.value,
 					class: "hl-size-4",
 					decorative: !0
-				}, null, 8, ["name", "source"])) : u("", !0)])) : u("", !0), f("div", Kt, [f("h3", qt, F(_.value), 1), f("p", Jt, F(v.value), 1)])]), f("div", Yt, [h(K, {
-					label: b.value,
+				}, null, 8, ["name", "source"])) : u("", !0)])) : u("", !0), f("div", Kt, [f("h3", qt, F(v.value), 1), f("p", Jt, F(y.value), 1)])]), f("div", Yt, [h(K, {
+					label: x.value,
 					variant: "outline",
 					size: "sm",
 					"full-width": !0,
-					disabled: e.isLoading,
+					disabled: m.value,
 					class: "!hl-w-full sm:!hl-w-auto sm:!hl-min-w-[7rem]",
-					onClick: O
+					onClick: k
 				}, null, 8, ["label", "disabled"]), h(K, {
-					label: y.value,
+					label: b.value,
 					color: "primary",
 					size: "sm",
 					"full-width": !0,
-					loading: e.isLoading,
+					loading: m.value,
 					class: "!hl-w-full sm:!hl-w-auto sm:!hl-min-w-[7.5rem]",
-					onClick: k
+					onClick: te
 				}, null, 8, ["label", "loading"])])])) : e.component ? (A(), l(re(e.component), C({
 					key: 1,
 					class: "hl-inline-block",
@@ -1544,9 +1579,9 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 						"max-width": "100%"
 					}
 				}, e.componentProps, {
-					onCancel: O,
-					onClose: O,
-					onConfirm: k
+					onCancel: k,
+					onClose: k,
+					onConfirm: te
 				}), null, 16)) : N(t.$slots, "default", { key: 2 })])], 2)) : u("", !0)]),
 				_: 3
 			})])) : u("", !0)]),
@@ -1556,21 +1591,23 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 }), Zt = /* @__PURE__ */ _({
 	__name: "HLPopup",
 	setup(e) {
-		let { isVisible: t, type: n, component: r, props: a, isLoading: o, close: s, confirm: c } = i();
+		let { isVisible: t, type: n, component: r, props: a, loading: o, isLoading: s, close: c, confirm: u } = i();
 		return (e, i) => (A(), l(Xt, {
 			"model-value": R(t),
 			type: R(n),
 			component: R(r) || void 0,
 			"component-props": R(a),
-			"is-loading": R(o),
-			onClose: R(s),
-			onConfirm: R(c)
+			"is-loading": R(s),
+			loading: R(o),
+			onClose: R(c),
+			onConfirm: R(u)
 		}, null, 8, [
 			"model-value",
 			"type",
 			"component",
 			"component-props",
 			"is-loading",
+			"loading",
 			"onClose",
 			"onConfirm"
 		]));
@@ -1712,36 +1749,69 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 			dark: "hl-theme-text",
 			muted: "hl-text-muted"
 		}, ue = {
-			primary: "hl-bg-primary hl-border-primary hl-text-white",
-			secondary: "hl-bg-secondary hl-border-secondary hl-text-white",
-			tertiary: "hl-bg-tertiary hl-border-tertiary hl-theme-text",
-			success: "hl-bg-success hl-border-success hl-text-white",
-			danger: "hl-bg-danger hl-border-danger hl-text-white",
-			warning: "hl-bg-warning hl-border-warning hl-text-dark",
-			info: "hl-bg-info hl-border-info hl-text-white",
-			light: "hl-bg-light hl-border-light hl-theme-text",
-			dark: "hl-bg-dark hl-border-dark hl-text-white",
-			muted: "hl-bg-muted hl-border-muted hl-text-white"
+			primary: "hl-bg-primary hl-border-primary",
+			secondary: "hl-bg-secondary hl-border-secondary",
+			tertiary: "hl-bg-tertiary hl-border-tertiary",
+			success: "hl-bg-success hl-border-success",
+			danger: "hl-bg-danger hl-border-danger",
+			warning: "hl-bg-warning hl-border-warning",
+			info: "hl-bg-info hl-border-info",
+			light: "hl-bg-light hl-border-light",
+			dark: "hl-bg-dark hl-border-dark",
+			muted: "hl-bg-muted hl-border-muted"
 		}, B = {
-			primary: "--hanap-labs-primary",
-			secondary: "--hanap-labs-muted",
-			tertiary: "--hanap-labs-tertiary",
-			success: "--hanap-labs-success",
-			danger: "--hanap-labs-danger",
-			warning: "--hanap-labs-warning",
-			info: "--hanap-labs-info",
-			light: "--hanap-labs-muted",
-			dark: "--hanap-labs-dark",
-			muted: "--hanap-labs-muted"
+			primary: "hl-bg-primary-20 hl-border-primary",
+			secondary: "hl-bg-secondary-20 hl-border-secondary",
+			tertiary: "hl-bg-tertiary-20 hl-border-tertiary",
+			success: "hl-bg-success-20 hl-border-success",
+			danger: "hl-bg-danger-20 hl-border-danger",
+			warning: "hl-bg-warning-20 hl-border-warning",
+			info: "hl-bg-info-20 hl-border-info",
+			light: "hl-bg-light hl-border-muted",
+			dark: "hl-bg-dark-20 hl-border-dark",
+			muted: "hl-bg-muted-20 hl-border-muted"
+		}, de = {
+			primary: "hover:hl-bg-primary-20",
+			secondary: "hover:hl-bg-secondary-20",
+			tertiary: "hover:hl-bg-tertiary-20",
+			success: "hover:hl-bg-success-20",
+			danger: "hover:hl-bg-danger-20",
+			warning: "hover:hl-bg-warning-20",
+			info: "hover:hl-bg-info-20",
+			light: "hover:hl-bg-light-20",
+			dark: "hover:hl-bg-dark-20",
+			muted: "hover:hl-bg-muted-20"
+		}, pe = {
+			primary: "hl-bg-primary-20",
+			secondary: "hl-bg-secondary-20",
+			tertiary: "hl-bg-tertiary-20",
+			success: "hl-bg-success-20",
+			danger: "hl-bg-danger-20",
+			warning: "hl-bg-warning-20",
+			info: "hl-bg-info-20",
+			light: "hl-bg-light-20",
+			dark: "hl-bg-dark-20",
+			muted: "hl-bg-muted-20"
+		}, me = {
+			primary: "light",
+			secondary: "light",
+			tertiary: "light",
+			success: "light",
+			danger: "light",
+			warning: "dark",
+			info: "light",
+			light: "dark",
+			dark: "light",
+			muted: "light"
 		};
 		function V(e) {
 			return typeof e == "string" && Object.prototype.hasOwnProperty.call(ce, e);
 		}
-		function fe(e) {
+		function he(e) {
 			return e instanceof HTMLElement ? e : e && "$el" in e && e.$el instanceof HTMLElement ? e.$el : null;
 		}
-		function pe(e) {
-			let t = fe(e);
+		function ge(e) {
+			let t = he(e);
 			if (!t) {
 				m.value = null;
 				return;
@@ -1755,163 +1825,153 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 		function H(e) {
 			return Object.prototype.toString.call(e) === "[object Object]";
 		}
-		function me(e, t) {
+		function _e(e, t) {
 			if (e === t) return !0;
-			if (Array.isArray(e) && Array.isArray(t)) return e.length === t.length ? e.every((e, n) => me(e, t[n])) : !1;
+			if (Array.isArray(e) && Array.isArray(t)) return e.length === t.length ? e.every((e, n) => _e(e, t[n])) : !1;
 			if (H(e) && H(t)) {
 				let n = Object.keys(e), r = Object.keys(t);
-				return n.length === r.length ? n.every((n) => me(e[n], t[n])) : !1;
+				return n.length === r.length ? n.every((n) => _e(e[n], t[n])) : !1;
 			}
 			return !1;
 		}
-		function he(e, t) {
+		function ve(e, t) {
 			return Object.keys(t).every((n) => {
 				if (!(n in e)) return !1;
 				let r = e[n], i = t[n];
-				return H(r) && H(i) ? he(r, i) : me(r, i);
+				return H(r) && H(i) ? ve(r, i) : _e(r, i);
 			});
 		}
-		function ge(e, t) {
-			return me(e, t) ? !0 : H(e) && H(t) ? he(t, e) : !1;
+		function ye(e, t) {
+			return _e(e, t) ? !0 : H(e) && H(t) ? ve(t, e) : !1;
 		}
-		function _e(e) {
-			return Array.isArray(e) ? `[${e.map((e) => _e(e)).join(",")}]` : H(e) ? `{${Object.keys(e).sort().map((t) => `${t}:${_e(e[t])}`).join(",")}}` : String(e);
+		function be(e) {
+			return Array.isArray(e) ? `[${e.map((e) => be(e)).join(",")}]` : H(e) ? `{${Object.keys(e).sort().map((t) => `${t}:${be(e[t])}`).join(",")}}` : String(e);
 		}
-		function ve(e, t) {
-			return `${e.label}-${_e(e.value)}-${t}`;
+		function xe(e, t) {
+			return `${e.label}-${be(e.value)}-${t}`;
 		}
-		function ye(e) {
+		function Se(e) {
 			return `${L.value}-option-${e}`;
 		}
-		let be = c(() => {
+		let Ce = c(() => {
 			let t = /* @__PURE__ */ new Map();
-			for (let n of [...e.options, ..._.value]) t.set(_e(n.value), n);
+			for (let n of [...e.options, ..._.value]) t.set(be(n.value), n);
 			return Array.from(t.values());
-		}), xe = c(() => e.multiple ? Array.isArray(i.value) ? i.value : [] : i.value === null ? [] : [i.value]), Se = c(() => be.value.filter((e) => xe.value.some((t) => ge(e.value, t)))), Ce = c(() => Number.isFinite(e.maxVisiblePills) ? Math.max(0, Math.floor(e.maxVisiblePills)) : 1), we = c(() => e.multiple ? Se.value.slice(0, Ce.value) : []), Te = c(() => e.multiple ? Math.max(0, Se.value.length - we.value.length) : 0), Ee = c(() => xe.value.length > 0), De = c(() => !!e.error || e.errors.length > 0), Oe = c(() => e.multiple ? Se.value.length === 0 ? e.placeholder : Se.value.length === 1 ? Se.value[0].label : `${Se.value.length} selected` : Se.value[0]?.label ?? e.placeholder), ke = c(() => se[e.size]), Ae = c(() => {
+		}), we = c(() => e.multiple ? Array.isArray(i.value) ? i.value : [] : i.value === null ? [] : [i.value]), Te = c(() => Ce.value.filter((e) => we.value.some((t) => ye(e.value, t)))), Ee = c(() => Number.isFinite(e.maxVisiblePills) ? Math.max(0, Math.floor(e.maxVisiblePills)) : 1), De = c(() => e.multiple ? Te.value.slice(0, Ee.value) : []), Oe = c(() => e.multiple ? Math.max(0, Te.value.length - De.value.length) : 0), ke = c(() => we.value.length > 0), Ae = c(() => !!e.error || e.errors.length > 0), je = c(() => e.multiple ? Te.value.length === 0 ? e.placeholder : Te.value.length === 1 ? Te.value[0].label : `${Te.value.length} selected` : Te.value[0]?.label ?? e.placeholder), Me = c(() => se[e.size]), Ne = c(() => {
 			let e = g.value.trim().toLowerCase();
-			return e ? be.value.filter((t) => t.label.toLowerCase().includes(e)) : be.value;
+			return e ? Ce.value.filter((t) => t.label.toLowerCase().includes(e)) : Ce.value;
 		}), W = c(() => {
-			if (!e.multiple) return Ae.value;
+			if (!e.multiple) return Ne.value;
 			let t = [], n = [];
-			for (let e of Ae.value) q(e) ? t.push(e) : n.push(e);
+			for (let e of Ne.value) q(e) ? t.push(e) : n.push(e);
 			return [...t, ...n];
-		}), je = c(() => {
+		}), Pe = c(() => {
 			if (!e.multiple) return -1;
 			let t = W.value.filter((e) => q(e)).length;
 			return t > 0 && t < W.value.length ? t : -1;
-		}), Me = c(() => ({
+		}), Fe = c(() => ({
 			...te.value,
 			width: v.value > 0 ? `${v.value}px` : void 0,
 			maxHeight: `${e.maxMenuHeight}px`,
 			zIndex: 60
-		})), Ne = c(() => {
+		})), G = c(() => {
 			let t = g.value.trim();
-			return !e.allowCreateWhenNoMatch || !t || Ae.value.length > 0 ? !1 : !be.value.some((e) => e.label.toLowerCase() === t.toLowerCase());
-		}), Pe = c(() => {
-			if (!(y.value < 0) && !(y.value >= W.value.length)) return ye(y.value);
-		}), Fe = c(() => V(e.color) ? ce[e.color] : "hl-theme-border"), G = c(() => V(e.color) ? le[e.color] : "hl-theme-text"), K = c(() => V(e.color) ? ue[e.color] : "hl-border-dark hl-bg-dark hl-text-white"), Ie = c(() => V(e.color) ? ue[e.color] : "hl-theme-border hl-bg-light hl-theme-text"), Le = c(() => {
-			if (!V(e.color)) return {
-				"--hl-select-option-hover-bg": "var(--hanap-labs-surface-subtle)",
-				"--hl-select-option-highlight-bg": "var(--hanap-labs-surface-muted)"
-			};
-			let t = B[e.color];
-			return {
-				"--hl-select-option-hover-bg": `color-mix(in srgb, var(${t}) 10%, var(--hanap-labs-surface))`,
-				"--hl-select-option-highlight-bg": `color-mix(in srgb, var(${t}) 16%, var(--hanap-labs-surface))`
-			};
-		});
+			return !e.allowCreateWhenNoMatch || !t || Ne.value.length > 0 ? !1 : !Ce.value.some((e) => e.label.toLowerCase() === t.toLowerCase());
+		}), K = c(() => {
+			if (!(y.value < 0) && !(y.value >= W.value.length)) return Se(y.value);
+		}), Ie = c(() => V(e.color) ? ce[e.color] : "hl-theme-border"), Le = c(() => V(e.color) ? le[e.color] : "hl-theme-text"), Re = c(() => V(e.color) ? ue[e.color] : "hl-border-dark hl-bg-dark hl-text-white"), ze = c(() => V(e.color) ? ue[e.color] : "hl-theme-border hl-bg-light hl-theme-text"), Be = c(() => V(e.color) ? B[e.color] : "hl-bg-light hl-theme-border-strong"), He = c(() => V(e.color) ? de[e.color] : "hover:hl-theme-bg-subtle"), Ue = c(() => V(e.color) ? pe[e.color] : "hl-theme-bg-muted"), We = c(() => V(e.color) ? me[e.color] : "light");
 		function q(e) {
-			return xe.value.some((t) => ge(e.value, t));
+			return we.value.some((t) => ye(e.value, t));
 		}
-		function Re(e) {
+		function Ge(e) {
 			i.value = e, s("change", e);
 		}
-		function ze() {
+		function Ke() {
 			let e = [];
 			return W.value.forEach((t, n) => {
 				t.disabled || e.push(n);
 			}), e;
 		}
-		function Ve() {
+		function qe() {
 			if (!x.value || y.value < 0) return;
 			let e = `[data-option-index="${y.value}"]`, t = x.value.querySelector(e);
 			t instanceof HTMLElement && t.scrollIntoView({ block: "nearest" });
 		}
-		function He(e) {
+		function Je(e) {
 			y.value = e, w(() => {
-				Ve();
+				qe();
 			});
 		}
-		function Ue() {
-			let e = ze();
+		function Ye() {
+			let e = Ke();
 			if (e.length === 0) {
-				He(-1);
+				Je(-1);
 				return;
 			}
 			let t = W.value.findIndex((e) => !e.disabled && q(e));
-			He(t >= 0 ? t : e[0]);
+			Je(t >= 0 ? t : e[0]);
 		}
-		function We(e) {
-			let t = ze();
+		function Xe(e) {
+			let t = Ke();
 			if (t.length === 0) {
-				He(-1);
+				Je(-1);
 				return;
 			}
 			if (y.value < 0) {
-				He(e === 1 ? t[0] : t[t.length - 1]);
+				Je(e === 1 ? t[0] : t[t.length - 1]);
 				return;
 			}
 			let n = t.indexOf(y.value);
 			if (n < 0) {
-				He(e === 1 ? t[0] : t[t.length - 1]);
+				Je(e === 1 ? t[0] : t[t.length - 1]);
 				return;
 			}
-			He(t[(n + e + t.length) % t.length]);
+			Je(t[(n + e + t.length) % t.length]);
 		}
-		function Ge() {
+		function Ze() {
 			if (y.value < 0) return;
 			let e = W.value[y.value];
-			!e || e.disabled || Ke(e);
+			!e || e.disabled || Qe(e);
 		}
-		function Ke(t) {
+		function Qe(t) {
 			if (!(t.disabled || e.disabled)) {
 				if (e.multiple) {
 					let e = Array.isArray(i.value) ? [...i.value] : [];
-					Re(e.some((e) => ge(t.value, e)) ? e.filter((e) => !ge(t.value, e)) : [...e, t.value]);
+					Ge(e.some((e) => ye(t.value, e)) ? e.filter((e) => !ye(t.value, e)) : [...e, t.value]);
 					return;
 				}
-				Re(t.value), C();
+				Ge(t.value), C();
 			}
 		}
-		function qe() {
-			Re(e.multiple ? [] : null), g.value = "", C();
+		function $e() {
+			Ge(e.multiple ? [] : null), g.value = "", C();
 		}
-		function Je(e) {
+		function et(e) {
 			return e.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 		}
-		function Ye() {
+		function tt() {
 			let t = g.value.trim();
-			if (!t || !Ne.value) return;
+			if (!t || !G.value) return;
 			let n = {
 				label: t,
-				value: Je(t) || t.toLowerCase()
+				value: et(t) || t.toLowerCase()
 			}, r = {
 				label: t,
 				value: n
 			};
 			if (_.value = [..._.value, r], s("create", n), e.multiple) {
-				Re([...Array.isArray(i.value) ? [...i.value] : [], n]), g.value = "";
+				Ge([...Array.isArray(i.value) ? [...i.value] : [], n]), g.value = "";
 				return;
 			}
-			Re(n), g.value = "", C();
+			Ge(n), g.value = "", C();
 		}
-		function Xe() {
+		function rt() {
 			v.value = b.value?.offsetWidth ?? 0;
 		}
-		function Ze() {
+		function it() {
 			e.disabled || ee();
 		}
-		function Qe(t) {
+		function at(t) {
 			if (!e.disabled) {
 				if (t.key === "Escape") {
 					C();
@@ -1922,7 +1982,7 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 						k();
 						return;
 					}
-					We(1);
+					Xe(1);
 					return;
 				}
 				if (t.key === "ArrowUp") {
@@ -1930,71 +1990,71 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 						k();
 						return;
 					}
-					We(-1);
+					Xe(-1);
 					return;
 				}
 				(t.key === "Enter" || t.key === " ") && (t.preventDefault(), ee());
 			}
 		}
-		function $e(e) {
+		function ot(e) {
 			if (e.key === "ArrowDown") {
-				e.preventDefault(), We(1);
+				e.preventDefault(), Xe(1);
 				return;
 			}
 			if (e.key === "ArrowUp") {
-				e.preventDefault(), We(-1);
+				e.preventDefault(), Xe(-1);
 				return;
 			}
 			if (e.key === "Enter") {
 				if (e.preventDefault(), y.value >= 0) {
-					Ge();
+					Ze();
 					return;
 				}
-				Ne.value && Ye();
+				G.value && tt();
 				return;
 			}
 			e.key === "Escape" && (e.preventDefault(), C());
 		}
-		function et(e) {
+		function st(e) {
 			if (!S.value) return;
 			let t = e.target;
-			t instanceof Node && (x.value?.contains(t) ?? !1) && $e(e);
+			t instanceof Node && (x.value?.contains(t) ?? !1) && ot(e);
 		}
-		function tt(e) {
-			W.value[e]?.disabled || He(e);
+		function ct(e) {
+			W.value[e]?.disabled || Je(e);
 		}
-		function rt(e) {
+		function lt(e) {
 			let t = e.target, n = p.value?.contains(t) ?? !1, r = x.value?.contains(t) ?? !1;
 			!n && !r && C();
 		}
-		return t({ clearSelection: qe }), z(() => e.disabled, (e) => {
+		return t({ clearSelection: $e }), z(() => e.disabled, (e) => {
 			e && C();
 		}), z(S, async (e) => {
 			if (e) {
-				s("open"), await w(), Xe(), await ne(), Ue(), m.value?.focus({ preventScroll: !0 });
+				s("open"), await w(), rt(), await ne(), Ye(), m.value?.focus({ preventScroll: !0 });
 				return;
 			}
 			s("close"), g.value = "", y.value = -1;
 		}), z(W, () => {
 			if (S.value) {
 				if (y.value < 0 || y.value >= W.value.length || W.value[y.value]?.disabled) {
-					Ue();
+					Ye();
 					return;
 				}
 				w(() => {
-					Ve();
+					qe();
 				});
 			}
 		}), O(() => {
-			Xe(), window.addEventListener("hl-resize", Xe), document.addEventListener("pointerdown", rt), document.addEventListener("keydown", et, !0);
+			rt(), window.addEventListener("hl-resize", rt), document.addEventListener("pointerdown", lt), document.addEventListener("keydown", st, !0);
 		}), D(() => {
-			window.removeEventListener("hl-resize", Xe), document.removeEventListener("pointerdown", rt), document.removeEventListener("keydown", et, !0);
+			window.removeEventListener("hl-resize", rt), document.removeEventListener("pointerdown", lt), document.removeEventListener("keydown", st, !0);
 		}), (t, n) => (A(), d("div", {
 			ref_key: "rootRef",
 			ref: p,
 			class: "hanap-labs-theme hanap-labs-font hl-w-full"
 		}, [
-			e.label || e.description ? (A(), l(Be, {
+			e.label || e.description ? (A(), l(Ve, {
 				key: 0,
 				label: e.label,
 				description: e.description,
@@ -2014,14 +2074,14 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 					ref: R(N).ref,
 					type: "button",
 					class: T(["hl-control-bg hl-flex hl-w-full hl-items-center hl-gap-2 hl-border hl-border-solid hl-text-left hl-leading-tight hl-transition-colors hl-duration-300 hl-no-focus-ring disabled:hl-cursor-not-allowed disabled:hl-opacity-60 hl-rounded-lg hl-cursor-pointer", [
-						ke.value,
+						Me.value,
 						e.inputClass,
-						De.value ? "hl-input-error-border-theme focus:hl-input-error-border-theme" : Fe.value,
+						Ae.value ? "hl-input-error-border-theme focus:hl-input-error-border-theme" : Ie.value,
 						{
-							"hl-theme-text": Ee.value,
-							"hl-text-muted": !Ee.value,
-							"hl-pr-10": Ee.value,
-							"hl-pr-8": !Ee.value,
+							"hl-theme-text": ke.value,
+							"hl-text-muted": !ke.value,
+							"hl-pr-10": ke.value,
+							"hl-pr-8": !ke.value,
 							"hl-border-0 focus:hl-border-0": e.noBorder
 						}
 					]]),
@@ -2030,18 +2090,18 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 					"aria-controls": L.value,
 					"aria-labelledby": e.label ? oe.value : void 0,
 					"aria-haspopup": "listbox",
-					onClick: Ze,
-					onKeydown: Qe
-				}, [e.multiple && Se.value.length > 0 ? (A(), d("span", cn, [(A(!0), d(a, null, M(we.value, (e, t) => (A(), d("span", {
-					key: ve(e, t),
-					class: T(["hl-inline-flex hl-max-w-[110px] hl-truncate hl-rounded hl-border hl-border-solid hl-px-1.5 hl-py-0.5 hl-text-xs", Ie.value])
-				}, F(e.label), 3))), 128)), Te.value > 0 ? (A(), d("span", ln, " +" + F(Te.value) + " more ", 1)) : u("", !0)])) : (A(), d("span", un, F(Oe.value), 1))], 42, sn),
-				Ee.value && !e.disabled ? (A(), d("button", {
+					onClick: it,
+					onKeydown: at
+				}, [e.multiple && Te.value.length > 0 ? (A(), d("span", cn, [(A(!0), d(a, null, M(De.value, (e, t) => (A(), d("span", {
+					key: xe(e, t),
+					class: T(["hl-inline-flex hl-max-w-[110px] hl-truncate hl-rounded hl-border hl-border-solid hl-px-1.5 hl-py-0.5 hl-text-xs", ze.value])
+				}, F(e.label), 3))), 128)), Oe.value > 0 ? (A(), d("span", ln, " +" + F(Oe.value) + " more ", 1)) : u("", !0)])) : (A(), d("span", un, F(je.value), 1))], 42, sn),
+				ke.value && !e.disabled ? (A(), d("button", {
 					key: 0,
 					type: "button",
 					class: "hl-theme-hover-text hl-absolute hl-inset-y-0 hl-right-6 hl-my-auto hl-px-1 hl-text-muted hl-appearance-none hl-border-0 hl-bg-transparent hl-no-focus-ring hl-cursor-pointer",
 					"aria-label": "Clear selection",
-					onClick: de(qe, ["stop"])
+					onClick: fe($e, ["stop"])
 				}, [h(U, {
 					name: "x-mark",
 					size: 14,
@@ -2056,13 +2116,13 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 					key: 0,
 					ref: R(re).ref,
 					class: "hanap-labs-theme hanap-labs-font hl-theme-bg hl-theme-border hl-overflow-hidden hl-rounded-md hl-border hl-border-solid hl-shadow-none",
-					style: E(Me.value),
+					style: E(Fe.value),
 					id: L.value,
 					role: "listbox",
 					"aria-labelledby": I.value,
-					"aria-activedescendant": Pe.value
+					"aria-activedescendant": K.value
 				}, [f("div", fn, [h(nt, {
-					ref: pe,
+					ref: ge,
 					modelValue: g.value,
 					"onUpdate:modelValue": n[0] ||= (e) => g.value = e,
 					type: "search",
@@ -2071,9 +2131,9 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 				}, null, 8, ["modelValue", "disabled"])]), f("div", {
 					class: "hl-overflow-y-auto hl-py-1",
 					style: E({ maxHeight: `${e.maxMenuHeight}px` })
-				}, [W.value.length > 0 ? (A(!0), d(a, { key: 0 }, M(W.value, (t, n) => (A(), d(a, { key: ve(t, n) }, [je.value >= 0 && n === je.value ? (A(), d("div", pn)) : u("", !0), f("button", {
+				}, [W.value.length > 0 ? (A(!0), d(a, { key: 0 }, M(W.value, (t, n) => (A(), d(a, { key: xe(t, n) }, [Pe.value >= 0 && n === Pe.value ? (A(), d("div", pn)) : u("", !0), f("button", {
 					type: "button",
-					id: ye(n),
+					id: Se(n),
 					"data-option-index": n,
 					class: T(["hl-theme-bg hl-flex hl-w-full hl-items-center hl-justify-between hl-gap-2 hl-px-3 hl-py-2 hl-text-left hl-text-sm hl-transition-colors hl-appearance-none hl-border-0 hl-no-focus-ring", [
 						e.optionClass,
@@ -2081,43 +2141,44 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 							"hl-cursor-not-allowed hl-text-muted": t.disabled,
 							"hl-cursor-pointer": !t.disabled,
 							"hl-theme-text": !t.disabled && !q(t),
-							"hl-font-medium": q(t),
-							"hover:hl-bg-[var(--hl-select-option-hover-bg)]": !t.disabled
+							"hl-font-medium": q(t)
 						},
-						!t.disabled && q(t) ? G.value : ""
+						!t.disabled && q(t) ? Le.value : "",
+						t.disabled ? "" : He.value,
+						!t.disabled && y.value === n ? Ue.value : ""
 					]]),
-					style: E([Le.value, !t.disabled && y.value === n ? { backgroundColor: "var(--hl-select-option-highlight-bg)" } : void 0]),
 					"aria-selected": q(t),
 					disabled: t.disabled,
-					onMouseenter: (e) => tt(n),
-					onClick: (e) => Ke(t)
+					onMouseenter: (e) => ct(n),
+					onClick: (e) => Qe(t)
 				}, [f("span", hn, [e.multiple ? (A(), d("span", {
 					key: 0,
-					class: T(["hl-inline-flex hl-size-4 hl-items-center hl-justify-center hl-rounded hl-border hl-border-solid hl-text-[10px]", q(t) ? K.value : "hl-theme-border-strong hl-theme-bg-subtle"])
-				}, [q(t) ? (A(), l(U, {
-					key: 0,
+					class: T(["hl-theme-border hl-inline-flex hl-shrink-0 hl-items-center hl-justify-center hl-overflow-hidden hl-rounded hl-border hl-border-solid hl-leading-none hl-transition-colors hl-duration-300 hl-size-4", q(t) ? Re.value : Be.value])
+				}, [h(U, {
 					name: "check",
-					size: 10,
+					size: 12,
+					color: q(t) ? We.value : void 0,
+					class: T(["hl-transition-opacity hl-duration-300", [q(t) ? "hl-opacity-100" : "hl-opacity-0"]]),
 					decorative: !0
-				})) : u("", !0)], 2)) : u("", !0), f("span", gn, [f("span", _n, F(t.label), 1), t.description ? (A(), d("span", vn, F(t.description), 1)) : u("", !0)])]), q(t) && !e.multiple ? (A(), d("span", {
+				}, null, 8, ["color", "class"])], 2)) : u("", !0), f("span", gn, [f("span", _n, F(t.label), 1), t.description ? (A(), d("span", vn, F(t.description), 1)) : u("", !0)])]), q(t) && !e.multiple ? (A(), d("span", {
 					key: 0,
-					class: T(["hl-shrink-0 hl-text-xs", G.value])
+					class: T(["hl-shrink-0 hl-text-xs", Le.value])
 				}, [h(U, {
 					name: "check",
 					size: 14,
 					decorative: !0
-				})], 2)) : u("", !0)], 46, mn)], 64))), 128)) : (A(), d("p", yn, F(g.value.trim() ? "No matches found" : "No options available"), 1)), Ne.value ? (A(), d("button", {
+				})], 2)) : u("", !0)], 42, mn)], 64))), 128)) : (A(), d("p", yn, F(g.value.trim() ? "No matches found" : "No options available"), 1)), G.value ? (A(), d("button", {
 					key: 2,
 					type: "button",
 					class: "hl-theme-text hl-theme-hover-bg-muted hl-mx-2 hl-mb-2 hl-flex hl-w-[calc(100%-1rem)] hl-items-center hl-justify-between hl-rounded-md hl-border-0 hl-bg-transparent hl-px-3 hl-py-2 hl-text-left hl-text-sm hl-appearance-none hl-no-focus-ring",
-					onClick: Ye
+					onClick: tt
 				}, [f("span", null, "Add \"" + F(g.value.trim()) + "\"", 1), h(U, {
 					name: "plus",
 					size: 14,
 					decorative: !0
 				})])) : u("", !0)], 4)], 12, dn)) : u("", !0)]))
 			]),
-			De.value ? (A(), d("div", bn, [e.error ? (A(), d("div", xn, F(e.error), 1)) : u("", !0), (A(!0), d(a, null, M(e.errors, (e) => (A(), d("div", {
+			Ae.value ? (A(), d("div", bn, [e.error ? (A(), d("div", xn, F(e.error), 1)) : u("", !0), (A(!0), d(a, null, M(e.errors, (e) => (A(), d("div", {
 				key: e,
 				class: "hl-text-xs hl-input-error-theme"
 			}, F(e), 1))), 128))])) : u("", !0)
@@ -2127,7 +2188,7 @@ var Ct = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block"
 	__name: "HLSkeleton",
 	props: { class: { default: "" } },
 	setup(e) {
-		return (t, n) => (A(), d("div", { class: T(["hl-skeleton hl-animate-pulse hl-rounded-lg hl-bg-tertiary", e.class]) }, null, 2));
+		return (t, n) => (A(), d("div", { class: T(["hl-animate-pulse hl-rounded-lg hl-bg-gray-200", e.class]) }, null, 2));
 	}
 }), wn = { class: "hanap-labs-theme hanap-labs-font hl-space-y-4" }, Tn = {
 	key: 0,
@@ -3741,7 +3802,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 }, fi = ["onClick"], pi = {
 	key: 1,
 	class: "hl-inline-flex hl-min-w-4 hl-justify-center"
-}, mi = { class: "hl-divide-y hl-divide-[var(--hanap-labs-border-default)]" }, hi = {
+}, mi = { class: "hl-divide-y hl-divide-gray-200" }, hi = {
 	key: 0,
 	class: "hl-w-10 hl-whitespace-nowrap hl-px-3 hl-py-3 hl-text-center"
 }, gi = {
@@ -3950,28 +4011,28 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 			}
 			C.previousPage();
 		}
-		function V() {
+		function de() {
 			if (E.value) {
 				i("page:change", Math.min(O.value, D.value + 1));
 				return;
 			}
 			C.nextPage();
 		}
-		function de(e) {
+		function fe(e) {
 			if (E.value) {
 				i("page:change", e);
 				return;
 			}
 			C.setPageIndex(e - 1);
 		}
-		function fe() {
+		function pe() {
 			if (ee.value) {
 				C.resetRowSelection();
 				return;
 			}
 			C.toggleAllPageRowsSelected(!0);
 		}
-		function pe(e) {
+		function me(e) {
 			e.toggleSelected();
 		}
 		return t({
@@ -4026,7 +4087,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 				"aria-label": "Toggle all rows",
 				size: "md",
 				class: "hl-mx-auto hl-max-w-max",
-				"onUpdate:modelValue": fe
+				"onUpdate:modelValue": pe
 			}, null, 8, ["model-value", "indeterminate"])])) : u("", !0), (A(!0), d(a, null, M(R(C).getFlatHeaders().filter((e) => e.id !== "select"), (e) => (A(), d("th", {
 				key: e.id,
 				class: T(["hl-whitespace-nowrap hl-px-4 hl-py-3", [I(P(e.column.columnDef.meta).alignment), { "hl-cursor-pointer hl-select-none hover:hl-text-primary": e.column.getCanSort() }]]),
@@ -4053,7 +4114,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 				"aria-label": "Toggle row",
 				size: "md",
 				class: "hl-mx-auto hl-max-w-max",
-				"onUpdate:modelValue": (e) => pe(n)
+				"onUpdate:modelValue": (e) => me(n)
 			}, null, 8, ["model-value", "onUpdate:modelValue"])])) : u("", !0), (A(!0), d(a, null, M(n.getVisibleCells().filter((e) => e.column.id !== "select"), (e) => (A(), d("td", {
 				key: e.id,
 				class: T(["hl-theme-text hl-whitespace-nowrap hl-px-4 hl-py-3", I(P(e.column.columnDef.meta).alignment)])
@@ -4100,7 +4161,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 					color: e === D.value ? "primary" : void 0,
 					rounded: !1,
 					class: T(["!hl-size-9 !hl-min-w-0 !hl-p-0", e === D.value ? "" : "hl-theme-hover-bg-muted"]),
-					onClick: (t) => de(e)
+					onClick: (t) => fe(e)
 				}, null, 8, [
 					"label",
 					"variant",
@@ -4118,7 +4179,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 					class: "!hl-size-9 !hl-min-w-0 !hl-p-0 hl-theme-hover-bg-muted",
 					disabled: E.value ? D.value >= O.value : !R(C).getCanNextPage(),
 					"aria-label": "Next page",
-					onClick: V
+					onClick: de
 				}, {
 					icon: B(() => [h(U, {
 						name: "chevron-right",
@@ -4171,6 +4232,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 		minlength: {},
 		labelClass: { default: "" },
 		inputClass: { default: "" },
+		color: {},
 		noBorder: {
 			type: Boolean,
 			default: !1
@@ -4193,9 +4255,20 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 			let t = ie();
 			return { inputId: c(() => e || t) };
 		}
-		let { inputId: s } = o(e.id), p = c(() => !!e.error || e.errors.length > 0);
+		let { inputId: s } = o(e.id), p = c(() => !!e.error || e.errors.length > 0), m = {
+			secondary: "hl-border-secondary focus:hl-border-secondary",
+			tertiary: "hl-border-tertiary focus:hl-border-tertiary",
+			primary: "hl-border-primary focus:hl-border-primary",
+			success: "hl-border-success focus:hl-border-success",
+			danger: "hl-border-danger focus:hl-border-danger",
+			warning: "hl-border-warning focus:hl-border-warning",
+			info: "hl-border-info focus:hl-border-info",
+			light: "hl-border-muted focus:hl-border-secondary",
+			dark: "hl-border-dark focus:hl-border-dark",
+			muted: "hl-border-muted focus:hl-border-muted"
+		}, h = c(() => e.color ? m[e.color] : "hl-input-theme hl-input-default");
 		return (t, o) => (A(), d("div", wi, [
-			e.label || e.description ? (A(), l(Be, {
+			e.label || e.description ? (A(), l(Ve, {
 				key: 0,
 				label: e.label,
 				description: e.description,
@@ -4209,7 +4282,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 				"required",
 				"label-class"
 			])) : u("", !0),
-			f("div", Ti, [V(f("textarea", {
+			f("div", Ti, [de(f("textarea", {
 				id: R(s),
 				ref: R(r).textarea,
 				"onUpdate:modelValue": o[0] ||= (e) => n.value = e,
@@ -4220,11 +4293,15 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 				rows: e.rows,
 				maxlength: e.maxlength,
 				minlength: e.minlength,
-				class: T(["hl-theme-border hl-theme-text hl-theme-placeholder hl-block hl-w-full hl-appearance-none hl-box-border hl-border hl-border-solid hl-bg-transparent hl-leading-tight hl-transition-colors hl-duration-300 hl-no-focus-ring disabled:hl-cursor-not-allowed disabled:hl-opacity-60 hl-py-2.5 hl-px-3 hl-text-sm hl-rounded-lg hl-resize-none", [e.inputClass, {
-					"hl-cursor-not-allowed": e.disabled,
-					"hl-input-error-border-theme focus:hl-input-error-border-theme": p.value,
-					"hl-border-0 focus:hl-border-0": e.noBorder
-				}]]),
+				class: T(["hl-theme-text hl-theme-placeholder hl-block hl-w-full hl-appearance-none hl-box-border hl-border hl-border-solid hl-leading-tight hl-transition-colors hl-duration-300 hl-no-focus-ring disabled:hl-cursor-not-allowed disabled:hl-opacity-60 hl-py-2.5 hl-px-3 hl-text-sm hl-rounded-lg hl-resize-none", [
+					h.value,
+					e.inputClass,
+					{
+						"hl-cursor-not-allowed": e.disabled,
+						"hl-input-error-border-theme focus:hl-input-error-border-theme": p.value,
+						"hl-border-0 focus:hl-border-0": e.noBorder
+					}
+				]]),
 				onFocus: o[1] ||= (e) => i("focus"),
 				onBlur: o[2] ||= (e) => i("blur"),
 				onInput: o[3] ||= (e) => i("input")
@@ -4235,7 +4312,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 			}, F(e), 1))), 128))])) : u("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-836dccfd"]]), Ai = /* @__PURE__ */ e(((e, t) => {
+}), [["__scopeId", "data-v-9e2d6169"]]), Ai = /* @__PURE__ */ e(((e, t) => {
 	(function(n, r) {
 		typeof e == "object" && t !== void 0 ? t.exports = r() : typeof define == "function" && define.amd ? define(r) : (n = typeof globalThis < "u" ? globalThis : n || self).dayjs = r();
 	})(e, (function() {
@@ -4752,7 +4829,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 				"hl-px-3 hl-py-1.5": !!e.label,
 				"hl-p-1.5": !!e.icon && !e.label
 			}]),
-			onClick: r[0] ||= de((e) => n("click"), ["stop"])
+			onClick: r[0] ||= fe((e) => n("click"), ["stop"])
 		}, [N(t.$slots, "default", {}, () => [e.icon ? (A(), l(U, {
 			key: 0,
 			name: e.icon,
@@ -4803,7 +4880,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 			type: "button",
 			disabled: e.disabled,
 			class: T(["hl-appearance-none hl-border-0 hl-no-focus-ring hl-color-transition hl-rounded-md hl-flex hl-items-center hl-justify-center hl-size-8 hl-text-sm hl-cursor-pointer", r()]),
-			onClick: i[0] ||= de((e) => n("click"), ["stop"]),
+			onClick: i[0] ||= fe((e) => n("click"), ["stop"]),
 			onMouseenter: i[1] ||= (e) => n("mouseenter"),
 			onMouseleave: i[2] ||= (e) => n("mouseleave")
 		}, [N(t.$slots, "default", {}, () => [m(F(e.label), 1)])], 42, Hi));
@@ -4932,7 +5009,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 			S.value === "dates" ? w.value = w.value.subtract(1, "month").startOf("month") : S.value === "months" ? w.value = w.value.subtract(1, "year").startOf("month") : S.value === "years" && (w.value = w.value.subtract(10, "year").startOf("month"));
 		}, ue = () => {
 			S.value === "dates" ? w.value = w.value.add(1, "month").startOf("month") : S.value === "months" ? w.value = w.value.add(1, "year").startOf("month") : S.value === "years" && (w.value = w.value.add(10, "year").startOf("month"));
-		}, V = (t) => {
+		}, de = (t) => {
 			if (e.range) {
 				let e = r.value;
 				return (e?.start?.isSame(t, "day") ?? !1) || (e?.end?.isSame(t, "day") ?? !1);
@@ -4940,7 +5017,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 				let e = r.value;
 				return e ? t.isSame(e, "day") : !1;
 			}
-		}, fe = (t) => {
+		}, pe = (t) => {
 			if (!e.range) return !1;
 			let n = r.value;
 			if (!n?.start) return !1;
@@ -4948,15 +5025,15 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 			if (!i) return !1;
 			let a = n.start.isBefore(i) ? n.start : i, o = n.start.isBefore(i) ? i : n.start;
 			return t.isAfter(a, "day") && t.isBefore(o, "day");
-		}, pe = (t) => {
+		}, me = (t) => {
 			if (!e.range) return !1;
 			let n = r.value;
 			return n?.start ? t.isSame(n.start, "day") : !1;
-		}, H = (t) => {
+		}, V = (t) => {
 			if (!e.range) return !1;
 			let n = r.value;
 			return n?.end ? t.isSame(n.end, "day") : !1;
-		}, me = (t) => {
+		}, he = (t) => {
 			if (e.range) {
 				let e = r.value;
 				return e?.start?.month() === t || e?.end?.month() === t;
@@ -4964,7 +5041,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 				let e = r.value;
 				return !e || !e.isValid() ? !1 : e.month() === t;
 			}
-		}, he = (t) => {
+		}, ge = (t) => {
 			if (e.range) {
 				let e = r.value;
 				return e?.start?.year() === t || e?.end?.year() === t;
@@ -4972,14 +5049,14 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 				let e = r.value;
 				return e ? e.year() === t : !1;
 			}
-		}, ge = (t) => !!(e.minDate && t.isSameOrBefore((0, $.default)(e.minDate).subtract(1, "day"), "day") || e.maxDate && t.isSameOrAfter((0, $.default)(e.maxDate).add(1, "day"), "day")), _e = (t) => {
+		}, H = (t) => !!(e.minDate && t.isSameOrBefore((0, $.default)(e.minDate).subtract(1, "day"), "day") || e.maxDate && t.isSameOrAfter((0, $.default)(e.maxDate).add(1, "day"), "day")), _e = (t) => {
 			let n = w.value.year(), r = (0, $.default)().year(n).month(t).startOf("month"), i = (0, $.default)().year(n).month(t).endOf("month");
 			return !!(e.minDate && i.isSameOrBefore((0, $.default)(e.minDate).subtract(1, "day"), "day") || e.maxDate && r.isSameOrAfter((0, $.default)(e.maxDate).add(1, "day"), "day"));
 		}, ve = (t) => {
 			let n = (0, $.default)().year(t).startOf("year"), r = (0, $.default)().year(t).endOf("year");
 			return !!(e.minDate && r.isSameOrBefore((0, $.default)(e.minDate).subtract(1, "day"), "day") || e.maxDate && n.isSameOrAfter((0, $.default)(e.maxDate).add(1, "day"), "day"));
 		}, ye = (t) => {
-			if (!ge(t)) if (e.range) {
+			if (!H(t)) if (e.range) {
 				let e = r.value;
 				if (E.value === "start" || !e?.start) r.value = {
 					start: t,
@@ -5018,7 +5095,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 				r.value = e, i("change", e);
 			}
 		}), (t, n) => (A(), d("div", Wi, [
-			e.label || e.description ? (A(), l(Be, {
+			e.label || e.description ? (A(), l(Ve, {
 				key: 0,
 				label: e.label,
 				description: e.description,
@@ -5053,7 +5130,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 					type: "button",
 					class: "hl-theme-hover-text hl-absolute hl-inset-y-0 hl-right-6 hl-my-auto hl-px-1 hl-text-muted hl-appearance-none hl-border-0 hl-bg-transparent hl-no-focus-ring hl-cursor-pointer",
 					"aria-label": "Clear date",
-					onClick: de(Se, ["stop"])
+					onClick: fe(Se, ["stop"])
 				}, [h(U, {
 					name: "x-mark",
 					size: 14,
@@ -5110,11 +5187,11 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 						f("div", ia, [(A(!0), d(a, null, M(oe.value, (e, t) => (A(), d(a, { key: t }, [e ? (A(), l(Ui, {
 							key: 1,
 							label: e.dayjs.date(),
-							selected: V(e.dayjs),
-							disabled: ge(e.dayjs),
-							"in-range": fe(e.dayjs),
-							"range-start": pe(e.dayjs),
-							"range-end": H(e.dayjs),
+							selected: de(e.dayjs),
+							disabled: H(e.dayjs),
+							"in-range": pe(e.dayjs),
+							"range-start": me(e.dayjs),
+							"range-end": V(e.dayjs),
 							onClick: (t) => ye(e.dayjs),
 							onMouseenter: (t) => D.value = e.dayjs,
 							onMouseleave: n[3] ||= (e) => D.value = null
@@ -5137,11 +5214,11 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 						f("div", ua, [(A(!0), d(a, null, M(se.value, (e, t) => (A(), d(a, { key: t }, [e ? (A(), l(Ui, {
 							key: 1,
 							label: e.dayjs.date(),
-							selected: V(e.dayjs),
-							disabled: ge(e.dayjs),
-							"in-range": fe(e.dayjs),
-							"range-start": pe(e.dayjs),
-							"range-end": H(e.dayjs),
+							selected: de(e.dayjs),
+							disabled: H(e.dayjs),
+							"in-range": pe(e.dayjs),
+							"range-start": me(e.dayjs),
+							"range-end": V(e.dayjs),
 							onClick: (t) => ye(e.dayjs),
 							onMouseenter: (t) => D.value = e.dayjs,
 							onMouseleave: n[4] ||= (e) => D.value = null
@@ -5159,7 +5236,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 					S.value === "months" ? (A(), d("div", fa, [(A(), d(a, null, M(ee, (e, t) => h(Ui, {
 						key: e,
 						label: e,
-						selected: me(t),
+						selected: he(t),
 						disabled: _e(t),
 						onClick: (e) => be(t)
 					}, null, 8, [
@@ -5171,7 +5248,7 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 					S.value === "years" ? (A(), d("div", pa, [(A(!0), d(a, null, M(ce.value, (e) => (A(), l(Ui, {
 						key: e,
 						label: e,
-						selected: he(e),
+						selected: ge(e),
 						muted: e < I.value || e > L.value,
 						disabled: ve(e),
 						onClick: (t) => xe(e)
@@ -5189,4 +5266,4 @@ var ni = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4
 	}
 });
 //#endregion
-export { U as C, W as S, he as T, qe as _, Cn as a, K as b, rn as c, Bt as d, zt as f, nt as g, wt as h, jn as i, Zt as l, kt as m, ki as n, Sn as o, Nt as p, Ci as r, an as s, ma as t, Xt as u, Be as v, me as w, Ne as x, Ie as y };
+export { U as C, je as S, ge as T, qe as _, Cn as a, K as b, rn as c, Bt as d, zt as f, nt as g, wt as h, jn as i, Zt as l, kt as m, ki as n, Sn as o, Nt as p, Ci as r, an as s, ma as t, Xt as u, Ve as v, he as w, W as x, Ie as y };