hanap-labs 0.1.9 → 0.1.11

package/dist/chunks/{components-CwAfZMG4.js → components-BpQQB1aP.js}

@@ -1,4 +1,4 @@
-import { n as e, r as t, t as n } from "./usePopup-zCvtcQsc.js";
+import { n as e, r as t, t as n } from "./usePopup-Dt76ZiED.js";
 import { Fragment as r, Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createSlots as d, createTextVNode as f, createVNode as p, customRef as m, defineComponent as h, getCurrentInstance as g, getCurrentScope as _, h as v, isRef as y, mergeModels as b, mergeProps as x, nextTick as S, normalizeClass as C, normalizeStyle as w, onBeforeUnmount as ee, onMounted as T, onScopeDispose as E, onUnmounted as te, openBlock as D, readonly as O, ref as k, render as A, renderList as j, renderSlot as M, resolveDynamicComponent as ne, shallowRef as re, toDisplayString as N, toRef as ie, toValue as P, unref as F, useId as I, useModel as L, useSlots as ae, vModelCheckbox as oe, vModelDynamic as se, vModelText as ce, watch as R, watchEffect as le, withCtx as z, withDirectives as ue, withModifiers as de } from "vue";
 //#endregion
 //#region src/components/hl-icon/HLIcon.registry.ts
@@ -48,32 +48,32 @@ var _e = [
 	},
 	setup(e) {
 		let t = {
-			10: "size-2.5",
-			"10px": "size-2.5",
-			12: "size-3",
-			"12px": "size-3",
-			14: "size-3.5",
-			"14px": "size-3.5",
-			16: "size-4",
-			"16px": "size-4",
-			18: "size-[18px]",
-			"18px": "size-[18px]",
-			20: "size-5",
-			"20px": "size-5",
-			24: "size-6",
-			"24px": "size-6",
-			28: "size-7",
-			"28px": "size-7",
-			32: "size-8",
-			"32px": "size-8",
-			36: "size-9",
-			"36px": "size-9",
-			40: "size-10",
-			"40px": "size-10",
-			42: "size-control-md",
-			"42px": "size-control-md",
-			48: "size-12",
-			"48px": "size-12"
+			10: "hl-size-2.5",
+			"10px": "hl-size-2.5",
+			12: "hl-size-3",
+			"12px": "hl-size-3",
+			14: "hl-size-3.5",
+			"14px": "hl-size-3.5",
+			16: "hl-size-4",
+			"16px": "hl-size-4",
+			18: "hl-size-[18px]",
+			"18px": "hl-size-[18px]",
+			20: "hl-size-5",
+			"20px": "hl-size-5",
+			24: "hl-size-6",
+			"24px": "hl-size-6",
+			28: "hl-size-7",
+			"28px": "hl-size-7",
+			32: "hl-size-8",
+			"32px": "hl-size-8",
+			36: "hl-size-9",
+			"36px": "hl-size-9",
+			40: "hl-size-10",
+			"40px": "hl-size-10",
+			42: "hl-size-control-md",
+			"42px": "hl-size-control-md",
+			48: "hl-size-12",
+			"48px": "hl-size-12"
 		}, n = o(() => typeof e.size == "number" ? String(e.size) : e.size.trim()), r = o(() => t[n.value]), i = o(() => r.value ? void 0 : {
 			width: typeof e.size == "number" ? `${e.size}px` : e.size,
 			height: typeof e.size == "number" ? `${e.size}px` : e.size
@@ -86,31 +86,31 @@ var _e = [
 			let t = ge(e.name);
 			if (t) return a(t) ? t : void 0;
 		}), c = o(() => e.ariaLabel || e.title || e.name), u = o(() => e.decorative), d = {
-			secondary: "text-secondary",
-			tertiary: "text-tertiary",
-			primary: "text-primary",
-			success: "text-success",
-			danger: "text-danger",
-			warning: "text-warning",
-			info: "text-info",
-			light: "text-light",
-			dark: "text-dark",
-			muted: "text-muted"
+			secondary: "hl-text-secondary",
+			tertiary: "hl-text-tertiary",
+			primary: "hl-text-primary",
+			success: "hl-text-success",
+			danger: "hl-text-danger",
+			warning: "hl-text-warning",
+			info: "hl-text-info",
+			light: "hl-text-light",
+			dark: "hl-theme-text",
+			muted: "hl-text-muted"
 		}, f = o(() => e.color ? d[e.color] : "");
 		return (t, n) => (D(), l("span", {
-			class: C(["hl-icon inline-flex items-center justify-center align-middle leading-none", [f.value, r.value]]),
+			class: C(["hl-icon hl-inline-flex hl-items-center hl-justify-center hl-align-middle hl-leading-none", [f.value, r.value]]),
 			style: w(i.value),
 			role: u.value ? void 0 : "img",
 			"aria-label": u.value ? void 0 : c.value,
 			"aria-hidden": u.value ? "true" : void 0
 		}, [s.value ? (D(), l("span", {
 			key: 0,
-			class: "hl-icon__svg inline-flex size-full",
+			class: "hl-icon__svg hl-inline-flex hl-size-full",
 			title: e.title || void 0,
 			innerHTML: s.value
 		}, null, 8, B)) : (D(), l("span", {
 			key: 1,
-			class: "inline-flex size-full items-center justify-center rounded border border-solid border-danger text-[10px] text-danger",
+			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, _e));
 	}
@@ -118,7 +118,7 @@ var _e = [
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, V = /* @__PURE__ */ be(ye, [["__scopeId", "data-v-770ace0b"]]), H = {
+}, V = /* @__PURE__ */ be(ye, [["__scopeId", "data-v-dbffa556"]]), H = {
 	dashboardLabel: "Dashboard",
 	routeNameMap: {
 		"": "Dashboard",
@@ -237,10 +237,10 @@ function U(e, t = {}) {
 //#region src/components/hl-breadcrumb/HLBreadcrumb.vue?vue&type=script&setup=true&lang.ts
 var Te = {
 	"aria-label": "Breadcrumb",
-	class: "hanap-labs-font"
-}, Ee = { class: "flex items-center text-sm" }, De = {
+	class: "hanap-labs-theme hanap-labs-font"
+}, Ee = { class: "hl-flex hl-items-center hl-text-sm" }, De = {
 	key: 1,
-	class: "mx-1 text-muted",
+	class: "hl-mx-1 hl-text-muted",
 	"aria-hidden": "true"
 }, Oe = ["href"], ke = /* @__PURE__ */ h({
 	__name: "HLBreadcrumb",
@@ -258,34 +258,34 @@ var Te = {
 			staticData: t.staticData,
 			dynamicLabel: i
 		}), d = {
-			secondary: "text-secondary",
-			tertiary: "text-tertiary",
-			primary: "text-primary",
-			success: "text-success",
-			danger: "text-danger",
-			warning: "text-warning",
-			info: "text-info",
-			light: "text-light",
-			dark: "text-dark",
-			muted: "text-muted"
-		}, f = o(() => t.activeColor ? d[t.activeColor] : "text-dark"), p = o(() => t.activeColor ? d[t.activeColor].replace("text-", "hover:text-") : "hover:text-dark");
+			secondary: "hl-text-secondary",
+			tertiary: "hl-text-tertiary",
+			primary: "hl-text-primary",
+			success: "hl-text-success",
+			danger: "hl-text-danger",
+			warning: "hl-text-warning",
+			info: "hl-text-info",
+			light: "hl-text-light",
+			dark: "hl-theme-text",
+			muted: "hl-text-muted"
+		}, f = o(() => t.activeColor ? d[t.activeColor] : "hl-theme-text"), p = o(() => t.activeColor ? d[t.activeColor].replace("hl-text-", "hover:hl-text-") : "hl-theme-hover-text");
 		return (t, n) => (D(), l("nav", Te, [u("ol", Ee, [(D(!0), l(r, null, j(F(a), (t, n) => (D(), l("li", {
 			key: `${n}-${t.label}-${t.href ?? ""}`,
-			class: "flex items-center"
+			class: "hl-flex hl-items-center"
 		}, [n > 0 ? (D(), l(r, { key: 0 }, [e.separatorType === "icon" ? (D(), s(V, {
 			key: 0,
 			name: e.separatorIconName,
 			size: "16px",
 			color: "muted",
-			class: "mx-1 -rotate-90",
+			class: "hl-mx-1 -hl-rotate-90",
 			decorative: ""
 		}, null, 8, ["name"])) : (D(), l("span", De, N(e.separator), 1))], 64)) : c("", !0), t.href ? (D(), l("a", {
 			key: 1,
 			href: t.href,
-			class: C(["text-dark no-underline transition-colors hover:no-underline", p.value])
+			class: C(["hl-theme-text hl-no-underline hl-transition-colors hover:hl-no-underline", p.value])
 		}, N(t.label), 11, Oe)) : (D(), l("span", {
 			key: 2,
-			class: C(["font-semibold", t.isActive ? f.value : "text-dark"])
+			class: C(["hl-font-semibold", t.isActive ? f.value : "hl-theme-text"])
 		}, N(t.label), 3))]))), 128))])]));
 	}
 }), Ae = ["src"], je = { key: 1 }, Me = /* @__PURE__ */ h({
@@ -297,15 +297,15 @@ var Te = {
 	},
 	setup(e) {
 		let t = {
-			xs: "size-6",
-			sm: "size-9",
-			md: "size-10",
-			lg: "size-12"
+			xs: "hl-size-6",
+			sm: "hl-size-9",
+			md: "hl-size-10",
+			lg: "hl-size-12"
 		}, n = {
-			xs: "text-[10px]",
-			sm: "text-xs",
-			md: "text-sm",
-			lg: "text-base"
+			xs: "hl-text-[10px]",
+			sm: "hl-text-xs",
+			md: "hl-text-sm",
+			lg: "hl-text-base"
 		}, r = o(() => {
 			let t = e.image.trim();
 			return !t || t.startsWith("[") ? "" : t;
@@ -340,21 +340,21 @@ var Te = {
 			for (let n of e) t = (t << 5) - t + n.charCodeAt(0), t |= 0;
 			return Math.abs(t);
 		}
-		return (o, s) => (D(), l("div", { class: C(["inline-flex shrink-0 items-center justify-center rounded-full bg-tertiary/35 ring-1 ring-primary/20 hanap-labs-font", t[e.size]]) }, [u("div", {
-			class: C(["inline-flex size-full items-center justify-center overflow-hidden rounded-full border border-solid border-gray-200 bg-primary/10 font-bold uppercase leading-none text-primary select-none", n[e.size]]),
+		return (o, s) => (D(), l("div", { class: C(["hanap-labs-theme hanap-labs-font hl-inline-flex 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]]) }, [u("div", {
+			class: C(["hl-theme-border hl-inline-flex hl-size-full hl-items-center hl-justify-center hl-overflow-hidden hl-rounded-full hl-border hl-border-solid hl-bg-primary/10 hl-font-bold hl-uppercase hl-leading-none hl-text-primary hl-select-none", n[e.size]]),
 			style: w(a.value)
 		}, [r.value ? (D(), l("img", {
 			key: 0,
 			src: r.value,
 			alt: "Avatar image",
-			class: "size-full rounded-full object-cover"
+			class: "hl-size-full hl-rounded-full hl-object-cover"
 		}, null, 8, Ae)) : (D(), l("span", je, N(i.value), 1))], 6)], 2));
 	}
 }), W = ["type", "disabled"], Ne = {
 	key: 1,
-	class: "inline-flex items-center justify-center",
+	class: "hl-inline-flex hl-items-center hl-justify-center",
 	"aria-hidden": "true"
-}, G = "bg-transparent border border-solid", K = /* @__PURE__ */ h({
+}, G = "hl-bg-transparent hl-border hl-border-solid", K = /* @__PURE__ */ h({
 	__name: "HLButton",
 	props: {
 		color: {},
@@ -387,71 +387,71 @@ var Te = {
 	emits: ["click"],
 	setup(e, { emit: t }) {
 		let n = {
-			secondary: "border-0 bg-secondary text-primary hover:bg-tertiary",
-			tertiary: "border-0 bg-tertiary text-primary hover:opacity-90",
-			primary: "border-0 bg-primary text-light hover:opacity-90",
-			success: "border-0 bg-success text-light hover:opacity-90",
-			danger: "border-0 bg-danger text-light hover:opacity-90",
-			warning: "border-0 bg-warning text-dark hover:opacity-90",
-			info: "border-0 bg-info text-light hover:opacity-90",
-			light: "border-0 bg-light text-dark hover:bg-secondary",
-			dark: "border-0 bg-dark text-light hover:opacity-90",
-			muted: "border-0 bg-muted text-light hover:opacity-90"
+			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",
+			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",
+			warning: "hl-border-0 hl-bg-warning hl-text-dark hover:hl-opacity-90",
+			info: "hl-border-0 hl-bg-info hl-text-light hover:hl-opacity-90",
+			light: "hl-border-0 hl-bg-light hl-theme-text hover:hl-bg-secondary",
+			dark: "hl-border-0 hl-bg-dark hl-text-light hover:hl-opacity-90",
+			muted: "hl-border-0 hl-bg-muted hl-text-light hover:hl-opacity-90"
 		}, r = {
-			secondary: `${G} text-secondary border-secondary hover:bg-secondary hover:text-primary`,
-			tertiary: `${G} text-tertiary border-tertiary hover:bg-tertiary hover:text-primary`,
-			primary: `${G} text-primary border-primary hover:bg-primary hover:text-light`,
-			success: `${G} text-success border-success hover:bg-success hover:text-light`,
-			danger: `${G} text-danger border-danger hover:bg-danger hover:text-light`,
-			warning: `${G} text-warning border-warning hover:bg-warning hover:text-dark`,
-			info: `${G} text-info border-info hover:bg-info hover:text-light`,
-			light: `${G} text-dark border-light hover:bg-light hover:text-dark`,
-			dark: `${G} text-dark border-dark hover:bg-dark hover:text-light`,
-			muted: `${G} text-muted border-muted hover:bg-muted hover:text-light`
+			secondary: `${G} hl-text-secondary hl-border-secondary hover:hl-bg-secondary hover:hl-text-primary`,
+			tertiary: `${G} hl-text-tertiary hl-border-tertiary hover:hl-bg-tertiary hover:hl-text-primary`,
+			primary: `${G} hl-text-primary hl-border-primary hover:hl-bg-primary hover:hl-text-light`,
+			success: `${G} hl-text-success hl-border-success hover:hl-bg-success hover:hl-text-light`,
+			danger: `${G} hl-text-danger hl-border-danger hover:hl-bg-danger hover:hl-text-light`,
+			warning: `${G} hl-text-warning hl-border-warning hover:hl-bg-warning hl-theme-hover-text`,
+			info: `${G} hl-text-info hl-border-info hover:hl-bg-info hover:hl-text-light`,
+			light: `${G} hl-theme-text hl-border-light hover:hl-bg-light`,
+			dark: `${G} hl-theme-text hl-border-dark hover:hl-bg-dark hover:hl-text-light`,
+			muted: `${G} hl-text-muted hl-border-muted hover:hl-bg-muted hover:hl-text-light`
 		}, i = {
-			xs: "h-6 px-2 text-xs",
-			sm: "h-9 px-2.5 text-xs",
-			md: "h-control-md px-3 text-base",
-			lg: "h-12 px-4 text-base"
+			xs: "hl-h-6 hl-px-2 hl-text-xs",
+			sm: "hl-h-9 hl-px-2.5 hl-text-xs",
+			md: "hl-h-control-md hl-px-3 hl-text-base",
+			lg: "hl-h-12 hl-px-4 hl-text-base"
 		}, a = {
-			xs: "size-6 text-xs",
-			sm: "size-9 text-xs",
-			md: "size-control-md text-base",
-			lg: "size-12 text-base"
+			xs: "hl-size-6 hl-text-xs",
+			sm: "hl-size-9 hl-text-xs",
+			md: "hl-size-control-md hl-text-base",
+			lg: "hl-size-12 hl-text-base"
 		}, s = {
-			xs: "rounded-md",
-			sm: "rounded-md",
-			md: "rounded-lg",
-			lg: "rounded-xl"
-		}, u = t, d = o(() => e.color ? e.variant === "outline" ? r[e.color] : n[e.color] : e.variant === "outline" ? `${G} border-gray-200 text-dark hover:bg-gray-200` : "border border-solid border-gray-200 bg-transparent text-dark hover:bg-gray-200"), f = o(() => e.iconOnly ? a[e.size] : i[e.size]), m = o(() => e.rounded ? "rounded-full" : s[e.size]);
+			xs: "hl-rounded-md",
+			sm: "hl-rounded-md",
+			md: "hl-rounded-lg",
+			lg: "hl-rounded-xl"
+		}, u = t, d = o(() => e.color ? e.variant === "outline" ? r[e.color] : n[e.color] : e.variant === "outline" ? `${G} hl-theme-border hl-theme-text hl-theme-hover-bg-muted` : "hl-theme-border hl-border hl-border-solid hl-bg-transparent hl-theme-text hl-theme-hover-bg-muted"), f = o(() => e.iconOnly ? a[e.size] : i[e.size]), m = o(() => e.rounded ? "hl-rounded-full" : s[e.size]);
 		return (t, n) => (D(), l("button", x({
 			type: e.type,
-			class: "flex w-max items-center justify-center gap-2 hanap-labs-font font-medium hl-color-transition cursor-pointer hl-no-focus-ring disabled:cursor-not-allowed disabled:opacity-60"
+			class: "hanap-labs-theme hanap-labs-font hl-flex hl-w-max hl-items-center hl-justify-center hl-gap-2 hl-font-medium hl-color-transition hl-cursor-pointer hl-no-focus-ring disabled:hl-cursor-not-allowed disabled:hl-opacity-60"
 		}, t.$attrs, {
 			class: [
 				d.value,
-				e.noBorder && "border-0",
+				e.noBorder && "hl-border-0",
 				f.value,
 				m.value,
-				e.iconOnly && "!gap-0 !min-w-0"
+				e.iconOnly && "!hl-gap-0 !hl-min-w-0"
 			],
 			disabled: e.disabled || e.loading,
 			onClick: n[0] ||= de((e) => u("click"), ["stop"])
 		}), [t.$slots.icon && !e.loading ? (D(), l("span", {
 			key: 0,
-			class: C(["inline-flex items-center justify-center", e.iconPosition === "right" ? "order-2" : "order-1"])
+			class: C(["hl-inline-flex hl-items-center hl-justify-center", e.iconPosition === "right" ? "hl-order-2" : "hl-order-1"])
 		}, [M(t.$slots, "icon")], 2)) : c("", !0), e.loading ? (D(), l("span", Ne, [p(V, {
 			name: "spinner",
 			size: 16,
-			class: "animate-spin"
+			class: "hl-animate-spin"
 		})])) : e.iconOnly ? c("", !0) : (D(), l("span", {
 			key: 2,
-			class: C(["inline-flex items-center justify-center", e.iconPosition === "right" && t.$slots.icon ? "order-1" : "order-2"])
+			class: C(["hl-inline-flex hl-items-center hl-justify-center", e.iconPosition === "right" && t.$slots.icon ? "hl-order-1" : "hl-order-2"])
 		}, N(e.label), 3))], 16, W));
 	}
-}), Pe = { class: "mb-1 hanap-labs-font" }, Fe = ["for"], Ie = ["id"], Le = {
+}), Pe = { class: "hanap-labs-theme hanap-labs-font hl-mb-1" }, Fe = ["for"], Ie = ["id"], Le = {
 	key: 0,
-	class: "text-danger"
+	class: "hl-text-danger"
 }, Re = /* @__PURE__ */ h({
 	__name: "HLLabel",
 	props: {
@@ -469,33 +469,33 @@ var Te = {
 	},
 	setup(e) {
 		let t = o(() => ({
-			xs: "text-xs",
-			sm: "text-sm",
-			md: "text-base",
-			lg: "text-lg"
+			xs: "hl-text-xs",
+			sm: "hl-text-sm",
+			md: "hl-text-base",
+			lg: "hl-text-lg"
 		})[e.size]), n = o(() => ({
-			xs: "text-[10px]",
-			sm: "text-xs",
-			md: "text-sm",
-			lg: "text-base"
+			xs: "hl-text-[10px]",
+			sm: "hl-text-xs",
+			md: "hl-text-sm",
+			lg: "hl-text-base"
 		})[e.size]);
 		return (r, i) => (D(), l("div", Pe, [u("label", {
 			for: e.forId || void 0,
-			class: C(["block text-dark font-medium", [t.value, e.labelClass]])
+			class: C(["hl-theme-text hl-block hl-font-medium", [t.value, e.labelClass]])
 		}, [u("span", { id: e.labelId || void 0 }, N(e.label), 9, Ie), e.required ? (D(), l("span", Le, "*")) : c("", !0)], 10, Fe), e.description ? (D(), l("p", {
 			key: 0,
-			class: C(["text-muted", [n.value, e.descriptionClass]])
+			class: C(["hl-theme-text-muted", [n.value, e.descriptionClass]])
 		}, N(e.description), 3)) : c("", !0)]));
 	}
-}), ze = { class: "w-full select-none" }, Be = [
+}), ze = { class: "hanap-labs-theme hanap-labs-font hl-w-full hl-select-none" }, Be = [
 	"aria-checked",
 	"aria-label",
 	"aria-labelledby",
 	"disabled"
 ], q = {
 	key: 1,
-	class: "sr-only"
-}, Ve = ["id", "disabled"], He = "bg-white border-gray-300", Ue = "bg-white border-gray-300 text-dark", J = /* @__PURE__ */ h({
+	class: "hl-sr-only"
+}, Ve = ["id", "disabled"], He = "hl-bg-light hl-theme-border-strong", Ue = "hl-bg-light hl-theme-border-strong hl-theme-text", J = /* @__PURE__ */ h({
 	__name: "HLCheckbox",
 	props: /* @__PURE__ */ b({
 		id: { default: "" },
@@ -531,43 +531,43 @@ var Te = {
 		let t = L(e, "modelValue"), n = I(), r = o(() => e.id || n), i = o(() => `${r.value}-label`), a = o(() => e.label.trim().length > 0), c = () => {
 			e.disabled || (t.value = !t.value);
 		}, d = {
-			xs: "w-3.5 h-3.5",
-			sm: "w-4 h-4",
-			md: "w-5 h-5",
-			lg: "w-6 h-6"
+			xs: "hl-size-3.5",
+			sm: "hl-size-4",
+			md: "hl-size-5",
+			lg: "hl-size-6"
 		}, f = {
-			xs: "w-2.5 h-2.5",
-			sm: "w-3 h-3",
-			md: "w-3.5 h-3.5",
-			lg: "w-4 h-4"
+			xs: "hl-size-2.5",
+			sm: "hl-size-3",
+			md: "hl-size-3.5",
+			lg: "hl-size-4"
 		}, m = {
 			xs: 10,
 			sm: 12,
 			md: 14,
 			lg: 16
 		}, h = {
-			primary: "bg-primary border-primary text-white",
-			secondary: "bg-secondary border-secondary text-white",
-			tertiary: "bg-tertiary border-tertiary text-dark",
-			success: "bg-success border-success text-white",
-			danger: "bg-danger border-danger text-white",
-			warning: "bg-warning border-warning text-dark",
-			info: "bg-info border-info text-white",
-			light: "bg-light border-light text-dark",
-			dark: "bg-dark border-dark text-white",
-			muted: "bg-muted border-muted text-white"
+			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"
 		}, g = {
-			primary: "bg-light border-primary",
-			secondary: "bg-light border-secondary",
-			tertiary: "bg-light border-tertiary",
-			success: "bg-light border-success",
-			danger: "bg-light border-danger",
-			warning: "bg-light border-warning",
-			info: "bg-light border-info",
-			light: "bg-light border-muted",
-			dark: "bg-light border-dark",
-			muted: "bg-light border-muted"
-		}, _ = (e) => typeof e == "string" && Object.prototype.hasOwnProperty.call(h, e), v = o(() => d[e.size]), y = o(() => m[e.size]), b = o(() => e.indeterminate && !t.value), x = o(() => b.value ? "mixed" : t.value), S = o(() => b.value ? "bg-primary/20 border-primary text-primary" : _(e.color) ? t.value ? h[e.color] : g[e.color] : t.value ? Ue : He);
+			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(h, e), v = o(() => d[e.size]), y = o(() => m[e.size]), b = o(() => e.indeterminate && !t.value), x = o(() => b.value ? "mixed" : t.value), S = o(() => b.value ? "hl-bg-primary/20 hl-border-primary hl-text-primary" : _(e.color) ? t.value ? h[e.color] : g[e.color] : t.value ? Ue : He);
 		return (n, o) => (D(), l("div", ze, [u("button", {
 			type: "button",
 			role: "checkbox",
@@ -576,24 +576,24 @@ var Te = {
 			"aria-labelledby": a.value ? i.value : void 0,
 			disabled: e.disabled,
 			style: { "box-shadow": "none" },
-			class: C(["inline-flex w-full appearance-none border-0 !shadow-none items-start gap-3 rounded-md bg-transparent text-left hanap-labs-font transition-all duration-200 hl-no-focus-ring", e.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"]),
+			class: C(["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-200 hl-no-focus-ring", e.disabled ? "hl-cursor-not-allowed hl-opacity-50" : "hl-cursor-pointer"]),
 			onClick: c
-		}, [u("span", { class: C(["mt-0.5 inline-flex shrink-0 items-center justify-center overflow-hidden rounded border border-solid border-gray-200 bg-white leading-none transition-colors duration-200", [
+		}, [u("span", { class: C(["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-200", [
 			v.value,
 			S.value,
-			e.noBorder && "border-0"
+			e.noBorder && "hl-border-0"
 		]]) }, [p(V, {
 			name: "check",
 			size: y.value,
 			color: e.color,
-			class: C(["transition-opacity duration-200", [f[e.size], t.value || b.value ? "opacity-100" : "opacity-0"]])
+			class: C(["hl-transition-opacity hl-duration-200", [f[e.size], t.value || b.value ? "hl-opacity-100" : "hl-opacity-0"]])
 		}, null, 8, [
 			"size",
 			"color",
 			"class"
 		])], 2), e.label || e.description ? (D(), s(Re, {
 			key: 0,
-			class: "min-w-0",
+			class: "hl-min-w-0",
 			label: e.label,
 			description: e.description,
 			"for-id": r.value,
@@ -613,13 +613,13 @@ var Te = {
 			id: r.value,
 			"onUpdate:modelValue": o[0] ||= (e) => t.value = e,
 			type: "checkbox",
-			class: "sr-only",
+			class: "hl-sr-only",
 			disabled: e.disabled
 		}, null, 8, Ve), [[oe, t.value]])]));
 	}
-}), We = { class: "w-full space-y-2 hanap-labs-font" }, Ge = { class: "relative" }, Ke = {
+}), We = { class: "hanap-labs-theme hanap-labs-font hl-w-full hl-space-y-2" }, Ge = { class: "hl-relative" }, Ke = {
 	key: 0,
-	class: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted"
+	class: "hl-pointer-events-none hl-absolute hl-inset-y-0 hl-left-0 hl-flex hl-items-center hl-pl-3 hl-text-muted"
 }, qe = [
 	"id",
 	"type",
@@ -633,13 +633,13 @@ var Te = {
 	"pattern"
 ], Je = {
 	key: 1,
-	class: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-muted"
+	class: "hl-pointer-events-none hl-absolute hl-inset-y-0 hl-right-0 hl-flex hl-items-center hl-pr-3 hl-text-muted"
 }, Ye = ["aria-label"], Xe = {
 	key: 1,
-	class: "mt-1 space-y-1"
+	class: "hl-mt-1 hl-space-y-1"
 }, Ze = {
 	key: 0,
-	class: "text-xs text-danger"
+	class: "hl-text-xs hl-text-danger"
 }, Qe = /* @__PURE__ */ be(/* @__PURE__ */ h({
 	__name: "HLInput",
 	props: /* @__PURE__ */ b({
@@ -711,27 +711,27 @@ var Te = {
 			for (let n of e.errors) t.includes(n) || t.push(n);
 			return t;
 		}), w = o(() => !!x.value || S.value.length > 0), ee = {
-			xs: "h-6 px-2 text-xs",
-			sm: "h-9 px-2.5 text-xs",
-			md: "h-control-md px-3 text-sm",
-			lg: "h-12 px-4 text-sm"
+			xs: "hl-h-6 hl-px-2 hl-text-xs",
+			sm: "hl-h-9 hl-px-2.5 hl-text-xs",
+			md: "hl-h-control-md hl-px-3 hl-text-sm",
+			lg: "hl-h-12 hl-px-4 hl-text-sm"
 		}, T = {
-			xs: "rounded-md",
-			sm: "rounded-md",
-			md: "rounded-md",
-			lg: "rounded-lg"
+			xs: "hl-rounded-md",
+			sm: "hl-rounded-md",
+			md: "hl-rounded-md",
+			lg: "hl-rounded-lg"
 		}, E = {
-			secondary: "border-secondary focus:border-secondary",
-			tertiary: "border-tertiary focus:border-tertiary",
-			primary: "border-primary focus:border-primary",
-			success: "border-success focus:border-success",
-			danger: "border-danger focus:border-danger",
-			warning: "border-warning focus:border-warning",
-			info: "border-info focus:border-info",
-			light: "border-muted focus:border-secondary",
-			dark: "border-dark focus:border-dark",
-			muted: "border-muted focus:border-muted"
-		}, te = o(() => ee[e.size]), O = o(() => e.rounded ? "rounded-full" : T[e.size]), A = o(() => e.color ? E[e.color] : "border-gray-200 focus:border-gray-200");
+			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"
+		}, te = o(() => ee[e.size]), O = o(() => e.rounded ? "hl-rounded-full" : T[e.size]), A = o(() => e.color ? E[e.color] : "hl-theme-border focus:hl-theme-border");
 		return (t, a) => (D(), l("div", We, [
 			e.label || e.description ? (D(), s(Re, {
 				key: 0,
@@ -765,17 +765,17 @@ var Te = {
 					maxlength: e.maxlength,
 					minlength: e.minlength,
 					pattern: e.pattern,
-					class: C(["block w-full appearance-none box-border border border-solid bg-transparent text-dark placeholder:text-muted leading-tight transition-colors duration-150 hl-no-focus-ring disabled:cursor-not-allowed disabled:opacity-60 hanap-labs-font", [
+					class: C(["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-150 hl-no-focus-ring disabled:hl-cursor-not-allowed disabled:hl-opacity-60", [
 						te.value,
 						O.value,
 						A.value,
 						e.inputClass,
 						{
-							"cursor-not-allowed": e.disabled || e.loading,
-							"pr-10": e.showPasswordToggle && h.value || e.loading || y.value,
-							"pl-10": e.iconLeft,
-							"border-danger focus:border-danger": w.value,
-							"border-0 focus:border-0": e.noBorder,
+							"hl-cursor-not-allowed": e.disabled || e.loading,
+							"hl-pr-10": e.showPasswordToggle && h.value || e.loading || y.value,
+							"hl-pl-10": e.iconLeft,
+							"hl-border-danger focus:hl-border-danger": w.value,
+							"hl-border-0 focus:hl-border-0": e.noBorder,
 							"hl-search-input": g.value
 						}
 					]]),
@@ -787,12 +787,12 @@ var Te = {
 				e.loading ? (D(), l("div", Je, [p(V, {
 					name: "spinner",
 					size: 20,
-					class: "animate-spin",
+					class: "hl-animate-spin",
 					color: e.color
 				}, null, 8, ["color"])])) : y.value ? (D(), l("button", {
 					key: 2,
 					type: "button",
-					class: "absolute inset-y-0 right-0 flex items-center pr-3 appearance-none border-0 bg-transparent p-0 text-muted hover:text-primary hl-no-focus-ring cursor-pointer",
+					class: "hl-absolute hl-inset-y-0 hl-right-0 hl-flex hl-items-center hl-pr-3 hl-appearance-none hl-border-0 hl-bg-transparent hl-p-0 hl-text-muted hover:hl-text-primary hl-no-focus-ring hl-cursor-pointer",
 					"aria-label": "Clear search",
 					onClick: b
 				}, [p(V, {
@@ -803,7 +803,7 @@ var Te = {
 				}, null, 8, ["color"])])) : e.showPasswordToggle && h.value ? (D(), l("button", {
 					key: 3,
 					type: "button",
-					class: "absolute inset-y-0 right-0 flex items-center pr-3 appearance-none border-0 bg-transparent p-0 text-muted hover:text-primary hl-no-focus-ring cursor-pointer",
+					class: "hl-absolute hl-inset-y-0 hl-right-0 hl-flex hl-items-center hl-pr-3 hl-appearance-none hl-border-0 hl-bg-transparent hl-p-0 hl-text-muted hover:hl-text-primary hl-no-focus-ring hl-cursor-pointer",
 					"aria-label": m.value ? "Hide password" : "Show password",
 					onClick: v
 				}, [p(V, {
@@ -815,11 +815,11 @@ var Te = {
 			]),
 			w.value ? (D(), l("div", Xe, [x.value ? (D(), l("p", Ze, N(x.value), 1)) : c("", !0), (D(!0), l(r, null, j(S.value, (e) => (D(), l("p", {
 				key: e,
-				class: "text-xs text-danger"
+				class: "hl-text-xs hl-text-danger"
 			}, N(e), 1))), 128))])) : c("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-cc19f8bd"]]);
+}), [["__scopeId", "data-v-ac65b4bd"]]);
 //#endregion
 //#region node_modules/@vueuse/shared/dist/index.js
 function $e(e, t) {
@@ -934,7 +934,7 @@ function mt(e = {}) {
 }
 //#endregion
 //#region src/components/hl-menu-action/HLMenuAction.vue?vue&type=script&setup=true&lang.ts
-var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ */ h({
+var ht = { class: "hanap-labs-theme hanap-labs-font hl-relative hl-inline-block" }, gt = /* @__PURE__ */ h({
 	__name: "HLMenuAction",
 	props: /* @__PURE__ */ b({
 		options: { default: () => [] },
@@ -971,16 +971,16 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 	], ["update:modelValue"]),
 	setup(e, { emit: n }) {
 		let i = {
-			primary: "text-primary",
-			secondary: "text-secondary",
-			tertiary: "text-tertiary",
-			success: "text-success",
-			danger: "text-danger",
-			warning: "text-warning",
-			info: "text-info",
-			light: "text-slate-700",
-			dark: "text-dark",
-			muted: "text-muted"
+			primary: "hl-text-primary",
+			secondary: "hl-text-secondary",
+			tertiary: "hl-text-tertiary",
+			success: "hl-text-success",
+			danger: "hl-text-danger",
+			warning: "hl-text-warning",
+			info: "hl-text-info",
+			light: "hl-theme-text-subtle",
+			dark: "hl-theme-text",
+			muted: "hl-text-muted"
 		}, a = L(e, "modelValue"), u = n, { ACTION_REF: f, FLOATING_REF: m, ACTION_ID: h, FLOATING_ID: g, isVisible: _, show: v, hide: y, floatingStyles: b } = t({
 			placement: "bottom-end",
 			strategy: "fixed",
@@ -1012,7 +1012,7 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 			type: "button",
 			"icon-only": !0,
 			"no-border": !0,
-			class: "!size-8 !rounded-md !bg-transparent !text-slate-600 hover:!bg-gray-100 hover:!text-slate-800",
+			class: "!hl-size-8 !hl-rounded-md !hl-bg-transparent !hl-text-[var(--hanap-labs-text-subtle)] hover:!hl-bg-[var(--hanap-labs-surface-muted)] hover:!hl-text-[var(--hanap-labs-text-default)]",
 			disabled: e.disabled,
 			"aria-label": x.value,
 			"aria-expanded": F(_),
@@ -1021,7 +1021,7 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 		}, {
 			icon: z(() => [p(V, {
 				name: "three-dots",
-				class: "size-5",
+				class: "hl-size-5",
 				decorative: !0
 			})]),
 			_: 1
@@ -1032,8 +1032,11 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 		]), F(_) ? (D(), l("div", {
 			key: 0,
 			ref: F(m),
-			style: w(F(b)),
-			class: C(["z-50 min-w-40 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg divide-y-reverse divide-gray-200 divide-y", e.menuClass]),
+			style: w([F(b), {
+				"--tw-divide-opacity": "1",
+				"border-color": "var(--hanap-labs-border-default)"
+			}]),
+			class: C(["hl-theme-border hl-theme-bg hl-z-50 hl-min-w-40 hl-overflow-hidden hl-rounded-md hl-border hl-shadow-lg hl-divide-y-reverse hl-divide-y", e.menuClass]),
 			role: "menu"
 		}, [(D(!0), l(r, null, j(e.options, (t) => (D(), s(K, {
 			key: t.value,
@@ -1042,7 +1045,8 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 			size: "xs",
 			loading: !!t.loading,
 			"no-border": !0,
-			class: C(["!h-auto !w-full !min-h-0 !justify-start !rounded-none !border-b !border-gray-200 last:!border-b-0 !bg-transparent !px-4 !py-2 !text-left !text-sm !font-normal !text-slate-700 hover:!bg-gray-100", [S(t.color), e.optionClass]]),
+			class: C(["!hl-h-auto !hl-w-full !hl-min-h-0 !hl-justify-start !hl-rounded-none !hl-border-b last:!hl-border-b-0 !hl-bg-transparent !hl-px-4 !hl-py-2 !hl-text-left !hl-text-sm !hl-font-normal !hl-text-[var(--hanap-labs-text-subtle)] hover:!hl-bg-[var(--hanap-labs-surface-muted)]", [S(t.color), e.optionClass]]),
+			style: { "border-color": "var(--hanap-labs-border-default)" },
 			disabled: t.disabled || t.loading,
 			role: "menuitem",
 			onClick: (e) => te(t)
@@ -1050,7 +1054,7 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 			name: "icon",
 			fn: z(() => [p(V, {
 				name: t.icon,
-				class: "size-4",
+				class: "hl-size-4",
 				decorative: !0
 			}, null, 8, ["name"])]),
 			key: "0"
@@ -1062,7 +1066,7 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 			"onClick"
 		]))), 128))], 6)) : c("", !0)]));
 	}
-}), _t = { class: "hanap-labs-theme relative flex w-full items-start gap-3 overflow-hidden rounded-lg border border-dark/10 bg-light/95 px-4 py-3 shadow-lg backdrop-blur-sm" }, vt = { class: "shrink-0 pt-0.5" }, yt = { class: "min-w-0 flex-1" }, bt = { class: "mt-1 break-words text-sm leading-snug text-dark" }, xt = /* @__PURE__ */ h({
+}), _t = { class: "hanap-labs-theme hanap-labs-font hl-theme-bg hl-theme-border hl-relative hl-flex hl-w-full hl-items-start hl-gap-3 hl-overflow-hidden hl-rounded-lg hl-border hl-px-4 hl-py-3 hl-shadow-lg hl-backdrop-blur-sm" }, vt = { class: "hl-shrink-0 hl-pt-0.5" }, yt = { class: "hl-min-w-0 hl-flex-1" }, bt = { class: "hl-theme-text hl-mt-1 hl-break-words hl-text-sm hl-leading-snug" }, xt = /* @__PURE__ */ h({
 	__name: "HLToast",
 	props: {
 		type: {},
@@ -1074,69 +1078,69 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 		let n = t, r = {
 			success: {
 				iconName: "check",
-				accentClass: "bg-success",
-				iconClass: "text-success",
-				titleClass: "text-success",
-				closeClass: "text-success hover:bg-success/10"
+				accentClass: "hl-bg-success",
+				iconClass: "hl-text-success",
+				titleClass: "hl-text-success",
+				closeClass: "hl-text-success hover:hl-bg-success/10"
 			},
 			error: {
 				iconName: "x-mark",
-				accentClass: "bg-danger",
-				iconClass: "text-danger",
-				titleClass: "text-danger",
-				closeClass: "text-danger hover:bg-danger/10"
+				accentClass: "hl-bg-danger",
+				iconClass: "hl-text-danger",
+				titleClass: "hl-text-danger",
+				closeClass: "hl-text-danger hover:hl-bg-danger/10"
 			},
 			info: {
 				iconName: "eye",
-				accentClass: "bg-info",
-				iconClass: "text-info",
-				titleClass: "text-info",
-				closeClass: "text-info hover:bg-info/10"
+				accentClass: "hl-bg-info",
+				iconClass: "hl-text-info",
+				titleClass: "hl-text-info",
+				closeClass: "hl-text-info hover:hl-bg-info/10"
 			},
 			warning: {
 				iconName: "eye-off",
-				accentClass: "bg-warning",
-				iconClass: "text-warning",
-				titleClass: "text-warning",
-				closeClass: "text-warning hover:bg-warning/10"
+				accentClass: "hl-bg-warning",
+				iconClass: "hl-text-warning",
+				titleClass: "hl-text-warning",
+				closeClass: "hl-text-warning hover:hl-bg-warning/10"
 			}
 		}, i = o(() => r[e.type]), a = o(() => e.title.trim().length > 0 ? e.title : e.type === "success" ? "Success" : e.type === "error" ? "Error" : e.type === "info" ? "Info" : "Warning"), s = () => {
 			n("close");
 		};
 		return (t, n) => (D(), l("div", _t, [
-			u("span", { class: C(["absolute inset-y-0 left-0 w-1", i.value.accentClass]) }, null, 2),
+			u("span", { class: C(["hl-absolute hl-inset-y-0 hl-left-0 hl-w-1", i.value.accentClass]) }, null, 2),
 			u("div", vt, [p(V, {
 				name: i.value.iconName,
-				class: C(["size-6", i.value.iconClass]),
+				class: C(["hl-size-6", i.value.iconClass]),
 				decorative: !0
 			}, null, 8, ["name", "class"])]),
-			u("div", yt, [u("p", { class: C(["truncate text-sm font-semibold leading-tight", i.value.titleClass]) }, N(a.value), 3), u("p", bt, N(e.message), 1)]),
+			u("div", yt, [u("p", { class: C(["hl-truncate hl-text-sm hl-font-semibold hl-leading-tight", i.value.titleClass]) }, N(a.value), 3), u("p", bt, N(e.message), 1)]),
 			u("button", {
 				type: "button",
-				class: C(["inline-flex size-8 shrink-0 items-center justify-center rounded-full transition-colors", i.value.closeClass]),
+				class: C(["hl-inline-flex hl-size-8 hl-shrink-0 hl-items-center hl-justify-center hl-rounded-full hl-transition-colors", i.value.closeClass]),
 				"aria-label": "close notification",
 				onClick: s
 			}, [p(V, {
 				name: "x-mark",
-				class: "size-4",
+				class: "hl-size-4",
 				decorative: !0
 			})], 2)
 		]));
 	}
 }), St = {
 	key: 0,
-	class: "pointer-events-none fixed inset-x-0 top-6 z-[9999] px-3 sm:px-0"
-}, Ct = { class: "mx-auto w-full max-w-xl" }, wt = { class: "pointer-events-auto" }, Tt = /* @__PURE__ */ h({
+	class: "hl-pointer-events-none hl-fixed hl-inset-x-0 hl-top-6 hl-z-[9999] hl-px-3 sm:hl-px-0"
+}, Ct = { class: "hl-mx-auto hl-w-full hl-max-w-xl" }, wt = { class: "hl-pointer-events-auto" }, Tt = /* @__PURE__ */ h({
 	__name: "HLGlobalNotify",
 	setup(t) {
 		let { notification: n, hide: r } = e();
 		return (e, t) => (D(), s(i, { to: "body" }, [p(a, {
-			"enter-active-class": "transition ease-out duration-200",
-			"enter-from-class": "translate-y-2 opacity-0",
-			"enter-to-class": "translate-y-0 opacity-100",
-			"leave-active-class": "transition ease-in duration-150",
-			"leave-from-class": "translate-y-0 opacity-100",
-			"leave-to-class": "translate-y-2 opacity-0"
+			"enter-active-class": "hl-transition hl-ease-out hl-duration-200",
+			"enter-from-class": "translate-y-2 hl-opacity-0",
+			"enter-to-class": "translate-y-0 hl-opacity-100",
+			"leave-active-class": "hl-transition hl-ease-in hl-duration-150",
+			"leave-from-class": "translate-y-0 hl-opacity-100",
+			"leave-to-class": "translate-y-2 hl-opacity-0"
 		}, {
 			default: z(() => [F(n).visible ? (D(), l("div", St, [u("div", Ct, [u("div", wt, [p(xt, {
 				type: F(n).type,
@@ -1174,17 +1178,17 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 	} };
 }, Nt = {
 	key: 0,
-	class: "hanap-labs-theme fixed inset-0 z-50 flex items-center justify-center"
-}, Pt = { class: "relative max-w-full pointer-events-auto" }, Ft = {
+	class: "hanap-labs-theme hl-fixed hl-inset-0 hl-z-50 hl-flex hl-items-center hl-justify-center"
+}, Pt = { class: "hl-relative hl-max-w-full hl-pointer-events-auto" }, Ft = {
 	key: 0,
-	class: "w-full max-w-md rounded-lg bg-white p-6 shadow-xl ring-1 ring-black/5"
+	class: "hl-theme-bg hl-theme-border hl-w-full hl-max-w-md hl-rounded-lg hl-border hl-p-6 hl-shadow-xl"
 }, It = {
 	key: 0,
-	class: "mb-2 text-lg font-semibold text-slate-900"
-}, Lt = { class: "mb-6 text-slate-600" }, Rt = { class: "flex justify-end gap-3" }, zt = ["disabled"], Bt = ["disabled"], Vt = /* @__PURE__ */ h({
+	class: "hl-theme-text hl-mb-2 hl-text-lg hl-font-semibold"
+}, Lt = { class: "hl-theme-text-subtle hl-mb-6" }, Rt = { class: "hl-flex hl-justify-end hl-gap-3" }, zt = ["disabled"], Bt = ["disabled"], Vt = /* @__PURE__ */ h({
 	__name: "HLPopup",
 	props: /* @__PURE__ */ b({
-		backdropClass: { default: "bg-black/50 backdrop-blur-sm" },
+		backdropClass: { default: "hl-bg-[var(--hanap-labs-overlay)] hl-backdrop-blur-sm" },
 		containerClass: { default: "" },
 		closeOnBackdrop: {
 			type: Boolean,
@@ -1229,46 +1233,46 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 		}), te(() => {
 			d();
 		}), (t, n) => (D(), s(i, { to: "body" }, [p(a, {
-			"enter-active-class": "transition duration-300 ease-out",
-			"enter-from-class": "opacity-0",
-			"enter-to-class": "opacity-100",
-			"leave-active-class": "transition duration-200 ease-in",
-			"leave-from-class": "opacity-100",
-			"leave-to-class": "opacity-0"
+			"enter-active-class": "hl-transition hl-duration-300 hl-ease-out",
+			"enter-from-class": "hl-opacity-0",
+			"enter-to-class": "hl-opacity-100",
+			"leave-active-class": "hl-transition hl-duration-200 hl-ease-in",
+			"leave-from-class": "hl-opacity-100",
+			"leave-to-class": "hl-opacity-0"
 		}, {
 			default: z(() => [m.value ? (D(), l("div", Nt, [u("div", {
-				class: C(["absolute inset-0", e.backdropClass]),
+				class: C(["hl-absolute hl-inset-0", e.backdropClass]),
 				onClick: g
 			}, null, 2), p(a, {
-				"enter-active-class": "transition duration-300 ease-out",
-				"enter-from-class": "scale-95 opacity-0",
-				"enter-to-class": "scale-100 opacity-100",
-				"leave-active-class": "transition duration-200 ease-in",
-				"leave-from-class": "scale-100 opacity-100",
-				"leave-to-class": "scale-95 opacity-0"
+				"enter-active-class": "hl-transition hl-duration-300 hl-ease-out",
+				"enter-from-class": "hl-scale-95 hl-opacity-0",
+				"enter-to-class": "hl-scale-100 hl-opacity-100",
+				"leave-active-class": "hl-transition hl-duration-200 hl-ease-in",
+				"leave-from-class": "hl-scale-100 hl-opacity-100",
+				"leave-to-class": "hl-scale-95 hl-opacity-0"
 			}, {
 				default: z(() => [m.value ? (D(), l("div", {
 					key: 0,
-					class: C(["relative z-10 flex w-full items-start justify-center px-4 pointer-events-none", e.containerClass])
+					class: C(["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])
 				}, [u("div", Pt, [e.type === "confirm" ? (D(), l("div", Ft, [
 					e.componentProps?.title ? (D(), l("h3", It, N(e.componentProps.title), 1)) : c("", !0),
 					u("p", Lt, N(e.componentProps?.message || "Are you sure?"), 1),
 					u("div", Rt, [u("button", {
-						class: "cursor-pointer text-sm font-medium text-slate-600 transition-colors hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-50",
+						class: "hl-theme-text-subtle hl-theme-hover-text hl-cursor-pointer hl-text-sm hl-font-medium hl-transition-colors disabled:hl-cursor-not-allowed disabled:hl-opacity-50",
 						disabled: e.isLoading,
 						onClick: _
 					}, N(e.componentProps?.cancelText || "Cancel"), 9, zt), u("button", {
-						class: "flex cursor-pointer items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-70",
+						class: "hl-flex hl-cursor-pointer hl-items-center hl-gap-2 hl-rounded-md hl-bg-primary hl-px-4 hl-py-2 hl-text-sm hl-font-medium hl-text-white hl-transition-colors hover:hl-bg-primary/90 disabled:hl-cursor-not-allowed disabled:hl-opacity-70",
 						disabled: e.isLoading,
 						onClick: v
 					}, [e.isLoading ? (D(), s(V, {
 						key: 0,
 						name: "spinner",
-						class: "size-4 animate-spin"
+						class: "hl-size-4 hl-animate-spin"
 					})) : c("", !0), f(" " + N(e.componentProps?.confirmText || "OK"), 1)], 8, Bt)])
 				])) : e.component ? (D(), s(ne(e.component), x({
 					key: 1,
-					class: "inline-block",
+					class: "hl-inline-block",
 					style: {
 						margin: "0",
 						width: "auto",
@@ -1322,7 +1326,7 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 	return { install(e) {
 		e.component(t.componentName, Ht), t.autoMount && qt(e, t);
 	} };
-}, Xt = { class: "relative" }, Zt = [
+}, Xt = { class: "hl-relative" }, Zt = [
 	"id",
 	"disabled",
 	"aria-expanded",
@@ -1330,20 +1334,20 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 	"aria-labelledby"
 ], Qt = {
 	key: 0,
-	class: "inline-flex min-w-0 items-center gap-1 truncate"
+	class: "hl-inline-flex hl-min-w-0 hl-items-center hl-gap-1 hl-truncate"
 }, $t = {
 	key: 0,
-	class: "text-xs text-muted"
+	class: "hl-text-xs hl-text-muted"
 }, en = {
 	key: 1,
-	class: "truncate"
+	class: "hl-truncate"
 }, tn = [
 	"id",
 	"aria-labelledby",
 	"aria-activedescendant"
-], nn = { class: "border-0 p-2" }, rn = {
+], nn = { class: "hl-border-0 hl-p-2" }, rn = {
 	key: 0,
-	class: "my-1 border-t border-solid border-gray-100"
+	class: "hl-theme-border hl-my-1 hl-border-t hl-border-solid"
 }, an = [
 	"id",
 	"data-option-index",
@@ -1351,18 +1355,18 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 	"disabled",
 	"onMouseenter",
 	"onClick"
-], on = { class: "inline-flex items-center gap-2" }, sn = { class: "min-w-0" }, cn = { class: "block truncate leading-5" }, ln = {
+], on = { class: "hl-inline-flex hl-items-center hl-gap-2" }, sn = { class: "hl-min-w-0" }, cn = { class: "hl-block hl-truncate hl-leading-5" }, ln = {
 	key: 0,
-	class: "block truncate text-xs text-muted"
+	class: "hl-block hl-truncate hl-text-xs hl-text-muted"
 }, un = {
 	key: 1,
-	class: "px-3 py-2 text-sm text-muted"
+	class: "hl-px-3 hl-py-2 hl-text-sm hl-text-muted"
 }, dn = {
 	key: 1,
-	class: "mt-1 space-y-1"
+	class: "hl-mt-1 hl-space-y-1"
 }, fn = {
 	key: 0,
-	class: "text-xs text-danger"
+	class: "hl-text-xs hl-text-danger"
 }, pn = /* @__PURE__ */ h({
 	__name: "HLSelect",
 	props: /* @__PURE__ */ b({
@@ -1412,43 +1416,43 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 	], ["update:modelValue"]),
 	setup(e, { expose: n, emit: a }) {
 		let d = L(e, "modelValue"), f = a, m = k(null), h = k(null), g = k(null), _ = k(null), v = k(""), y = k([]), b = k(0), x = k(-1), { ACTION_REF: E, FLOATING_REF: te, isVisible: O, hide: A, show: M, toggle: ne, floatingStyles: re, updatePosition: ie } = t({ placement: "bottom-start" }), P = I(), ae = o(() => e.id || P), oe = o(() => `${ae.value}-listbox`), se = o(() => `${ae.value}-label`), ce = {
-			xs: "h-6 px-2 text-xs",
-			sm: "h-9 px-2.5 text-xs",
-			md: "h-control-md px-3 text-sm",
-			lg: "h-12 px-4 text-sm"
+			xs: "hl-h-6 hl-px-2 hl-text-xs",
+			sm: "hl-h-9 hl-px-2.5 hl-text-xs",
+			md: "hl-h-control-md hl-px-3 hl-text-sm",
+			lg: "hl-h-12 hl-px-4 hl-text-sm"
 		}, le = {
-			primary: "border-primary focus:border-primary",
-			secondary: "border-secondary focus:border-secondary",
-			tertiary: "border-tertiary focus:border-tertiary",
-			success: "border-success focus:border-success",
-			danger: "border-danger focus:border-danger",
-			warning: "border-warning focus:border-warning",
-			info: "border-info focus:border-info",
-			light: "border-muted focus:border-secondary",
-			dark: "border-dark focus:border-dark",
-			muted: "border-muted focus:border-muted"
+			primary: "hl-border-primary focus:hl-border-primary",
+			secondary: "hl-border-secondary focus:hl-border-secondary",
+			tertiary: "hl-border-tertiary focus:hl-border-tertiary",
+			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"
 		}, z = {
-			primary: "text-primary",
-			secondary: "text-secondary",
-			tertiary: "text-tertiary",
-			success: "text-success",
-			danger: "text-danger",
-			warning: "text-warning",
-			info: "text-info",
-			light: "text-dark",
-			dark: "text-dark",
-			muted: "text-muted"
+			primary: "hl-text-primary",
+			secondary: "hl-text-secondary",
+			tertiary: "hl-text-tertiary",
+			success: "hl-text-success",
+			danger: "hl-text-danger",
+			warning: "hl-text-warning",
+			info: "hl-text-info",
+			light: "hl-theme-text",
+			dark: "hl-theme-text",
+			muted: "hl-text-muted"
 		}, ue = {
-			primary: "bg-primary border-primary text-white",
-			secondary: "bg-secondary border-secondary text-white",
-			tertiary: "bg-tertiary border-tertiary text-dark",
-			success: "bg-success border-success text-white",
-			danger: "bg-danger border-danger text-white",
-			warning: "bg-warning border-warning text-dark",
-			info: "bg-info border-info text-white",
-			light: "bg-light border-light text-dark",
-			dark: "bg-dark border-dark text-white",
-			muted: "bg-muted border-muted text-white"
+			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"
 		}, fe = {
 			primary: "--hanap-labs-primary",
 			secondary: "--hanap-labs-muted",
@@ -1542,15 +1546,15 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 			return !e.allowCreateWhenNoMatch || !t || Me.value.length > 0 ? !1 : !Ce.value.some((e) => e.label.toLowerCase() === t.toLowerCase());
 		}), Pe = o(() => {
 			if (!(x.value < 0) && !(x.value >= W.value.length)) return Se(x.value);
-		}), Fe = o(() => pe(e.color) ? le[e.color] : "border-gray-200 focus:border-gray-200"), Ie = o(() => pe(e.color) ? z[e.color] : "text-dark"), Le = o(() => pe(e.color) ? ue[e.color] : "border-dark bg-dark text-white"), ze = o(() => pe(e.color) ? ue[e.color] : "border-light bg-light text-dark"), Be = o(() => {
+		}), Fe = o(() => pe(e.color) ? le[e.color] : "hl-theme-border"), Ie = o(() => pe(e.color) ? z[e.color] : "hl-theme-text"), Le = o(() => pe(e.color) ? ue[e.color] : "hl-border-dark hl-bg-dark hl-text-white"), ze = o(() => pe(e.color) ? ue[e.color] : "hl-theme-border hl-bg-light hl-theme-text"), Be = o(() => {
 			if (!pe(e.color)) return {
-				"--hl-select-option-hover-bg": "#f9fafb",
-				"--hl-select-option-highlight-bg": "#f3f4f6"
+				"--hl-select-option-hover-bg": "var(--hanap-labs-surface-subtle)",
+				"--hl-select-option-highlight-bg": "var(--hanap-labs-surface-muted)"
 			};
 			let t = fe[e.color];
 			return {
-				"--hl-select-option-hover-bg": `color-mix(in srgb, var(${t}) 10%, white)`,
-				"--hl-select-option-highlight-bg": `color-mix(in srgb, var(${t}) 16%, white)`
+				"--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))`
 			};
 		});
 		function q(e) {
@@ -1719,13 +1723,13 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 				});
 			}
 		}), T(() => {
-			Ze(), window.addEventListener("resize", Ze), document.addEventListener("pointerdown", it), document.addEventListener("keydown", nt, !0);
+			Ze(), window.addEventListener("hl-resize", Ze), document.addEventListener("pointerdown", it), document.addEventListener("keydown", nt, !0);
 		}), ee(() => {
-			window.removeEventListener("resize", Ze), document.removeEventListener("pointerdown", it), document.removeEventListener("keydown", nt, !0);
+			window.removeEventListener("hl-resize", Ze), document.removeEventListener("pointerdown", it), document.removeEventListener("keydown", nt, !0);
 		}), (t, n) => (D(), l("div", {
 			ref_key: "rootRef",
 			ref: m,
-			class: "w-full hanap-labs-font"
+			class: "hanap-labs-theme hanap-labs-font hl-w-full"
 		}, [
 			e.label || e.description ? (D(), s(Re, {
 				key: 0,
@@ -1746,16 +1750,16 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 					id: ae.value,
 					ref: he,
 					type: "button",
-					class: C(["flex w-full items-center gap-2 border border-solid bg-transparent text-left leading-tight transition-colors duration-150 hl-no-focus-ring disabled:cursor-not-allowed disabled:opacity-60 rounded-md cursor-pointer", [
+					class: C(["hl-flex hl-w-full hl-items-center hl-gap-2 hl-border hl-border-solid hl-bg-transparent hl-text-left hl-leading-tight hl-transition-colors hl-duration-150 hl-no-focus-ring disabled:hl-cursor-not-allowed disabled:hl-opacity-60 hl-rounded-md hl-cursor-pointer", [
 						je.value,
 						e.inputClass,
-						ke.value ? "border-danger focus:border-danger" : Fe.value,
+						ke.value ? "hl-border-danger focus:hl-border-danger" : Fe.value,
 						{
-							"text-dark": Oe.value,
-							"text-muted": !Oe.value,
-							"pr-10": Oe.value,
-							"pr-8": !Oe.value,
-							"border-0 focus:border-0": e.noBorder
+							"hl-theme-text": Oe.value,
+							"hl-text-muted": !Oe.value,
+							"hl-pr-10": Oe.value,
+							"hl-pr-8": !Oe.value,
+							"hl-border-0 focus:hl-border-0": e.noBorder
 						}
 					]]),
 					disabled: e.disabled,
@@ -1767,12 +1771,12 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 					onKeydown: et
 				}, [e.multiple && U.value.length > 0 ? (D(), l("span", Qt, [(D(!0), l(r, null, j(Ee.value, (e, t) => (D(), l("span", {
 					key: xe(e, t),
-					class: C(["inline-flex max-w-[110px] truncate rounded border border-solid px-1.5 py-0.5 text-xs", ze.value])
+					class: C(["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])
 				}, N(e.label), 3))), 128)), De.value > 0 ? (D(), l("span", $t, " +" + N(De.value) + " more ", 1)) : c("", !0)])) : (D(), l("span", en, N(Ae.value), 1))], 42, Zt),
 				Oe.value && !e.disabled ? (D(), l("button", {
 					key: 0,
 					type: "button",
-					class: "absolute inset-y-0 right-6 my-auto px-1 text-muted hover:text-dark appearance-none border-0 bg-transparent hl-no-focus-ring cursor-pointer",
+					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(Je, ["stop"])
 				}, [p(V, {
@@ -1780,7 +1784,7 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 					size: 14,
 					decorative: !0
 				})])) : c("", !0),
-				u("span", { class: C(["pointer-events-none absolute inset-y-0 right-2 my-auto flex items-center text-muted transition-transform duration-150", { "rotate-180": F(O) }]) }, [p(V, {
+				u("span", { class: C(["hl-pointer-events-none hl-absolute hl-inset-y-0 hl-right-2 hl-my-auto hl-flex hl-items-center hl-text-muted hl-transition-transform hl-duration-150", { "hl-rotate-180": F(O) }]) }, [p(V, {
 					name: "chevron-up-down",
 					size: 20,
 					decorative: !0
@@ -1788,7 +1792,7 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 				(D(), s(i, { to: "body" }, [F(O) ? (D(), l("div", {
 					key: 0,
 					ref: ge,
-					class: "overflow-hidden rounded-md bg-white border border-gray-200 border-solid shadow-none",
+					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: w(G.value),
 					id: oe.value,
 					role: "listbox",
@@ -1802,20 +1806,20 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 					placeholder: "Search...",
 					disabled: e.disabled
 				}, null, 8, ["modelValue", "disabled"])]), u("div", {
-					class: "overflow-y-auto py-1",
+					class: "hl-overflow-y-auto hl-py-1",
 					style: w({ maxHeight: `${e.maxMenuHeight}px` })
 				}, [W.value.length > 0 ? (D(!0), l(r, { key: 0 }, j(W.value, (t, n) => (D(), l(r, { key: xe(t, n) }, [Ne.value >= 0 && n === Ne.value ? (D(), l("div", rn)) : c("", !0), u("button", {
 					type: "button",
 					id: Se(n),
 					"data-option-index": n,
-					class: C(["flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm transition-colors appearance-none border-0 bg-white hl-no-focus-ring", [
+					class: C(["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,
 						{
-							"cursor-not-allowed text-muted": t.disabled,
-							"cursor-pointer": !t.disabled,
-							"text-dark": !t.disabled && !q(t),
-							"font-medium": q(t),
-							"hover:bg-[var(--hl-select-option-hover-bg)]": !t.disabled
+							"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
 						},
 						!t.disabled && q(t) ? Ie.value : ""
 					]]),
@@ -1826,7 +1830,7 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 					onClick: (e) => qe(t)
 				}, [u("span", on, [e.multiple ? (D(), l("span", {
 					key: 0,
-					class: C(["inline-flex size-4 items-center justify-center rounded border border-solid text-[10px]", q(t) ? Le.value : "border-gray-300"])
+					class: C(["hl-inline-flex hl-size-4 hl-items-center hl-justify-center hl-rounded hl-border hl-border-solid hl-text-[10px]", q(t) ? Le.value : "hl-theme-border-strong hl-theme-bg-subtle"])
 				}, [q(t) ? (D(), s(V, {
 					key: 0,
 					name: "check",
@@ -1834,7 +1838,7 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 					decorative: !0
 				})) : c("", !0)], 2)) : c("", !0), u("span", sn, [u("span", cn, N(t.label), 1), t.description ? (D(), l("span", ln, N(t.description), 1)) : c("", !0)])]), q(t) && !e.multiple ? (D(), l("span", {
 					key: 0,
-					class: C(["shrink-0 text-xs", Ie.value])
+					class: C(["hl-shrink-0 hl-text-xs", Ie.value])
 				}, [p(V, {
 					name: "check",
 					size: 14,
@@ -1842,7 +1846,7 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 				})], 2)) : c("", !0)], 46, an)], 64))), 128)) : (D(), l("p", un, N(v.value.trim() ? "No matches found" : "No options available"), 1)), K.value ? (D(), l("button", {
 					key: 2,
 					type: "button",
-					class: "mx-2 mb-2 flex w-[calc(100%-1rem)] items-center justify-between rounded-md border-0 bg-transparent px-3 py-2 text-left text-sm text-dark appearance-none hl-no-focus-ring",
+					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: Xe
 				}, [u("span", null, "Add \"" + N(v.value.trim()) + "\"", 1), p(V, {
 					name: "plus",
@@ -1852,7 +1856,7 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 			]),
 			ke.value ? (D(), l("div", dn, [e.error ? (D(), l("p", fn, N(e.error), 1)) : c("", !0), (D(!0), l(r, null, j(e.errors, (e) => (D(), l("p", {
 				key: e,
-				class: "text-xs text-danger"
+				class: "hl-text-xs hl-text-danger"
 			}, N(e), 1))), 128))])) : c("", !0)
 		], 512));
 	}
@@ -1860,13 +1864,13 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 	__name: "HLSkeleton",
 	props: { class: { default: "" } },
 	setup(e) {
-		return (t, n) => (D(), l("div", { class: C(["hl-skeleton animate-pulse rounded-lg bg-tertiary", e.class]) }, null, 2));
+		return (t, n) => (D(), l("div", { class: C(["hl-skeleton hl-animate-pulse hl-rounded-lg hl-bg-tertiary", e.class]) }, null, 2));
 	}
-}), hn = { class: "space-y-3 rounded-xl border border-solid border-tertiary bg-light p-3 hanap-labs-font" }, gn = {
+}), hn = { class: "hanap-labs-theme hanap-labs-font hl-space-y-3 hl-rounded-xl hl-border hl-border-solid hl-border-tertiary hl-bg-light hl-p-3" }, gn = {
 	key: 0,
-	class: "flex flex-wrap items-center justify-between gap-3"
-}, _n = { class: "relative overflow-x-auto" }, vn = {
-	class: "inline-flex min-w-full justify-start gap-2 rounded-xl border border-solid border-tertiary bg-secondary p-1",
+	class: "hl-flex hl-flex-wrap hl-items-center hl-justify-between hl-gap-3"
+}, _n = { class: "hl-relative hl-overflow-x-auto" }, vn = {
+	class: "hl-inline-flex hl-min-w-full hl-justify-start hl-gap-2 hl-rounded-xl hl-border hl-border-solid hl-border-tertiary hl-bg-secondary hl-p-1",
 	role: "tablist",
 	"aria-label": "Tabs"
 }, yn = [
@@ -1913,17 +1917,17 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 				key: e.value,
 				type: "button",
 				role: "tab",
-				class: C(["relative inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold hl-color-transition hl-no-focus-ring", e.disabled ? "cursor-not-allowed opacity-50" : d.value === e.value ? "bg-primary text-light" : "cursor-pointer text-muted hover:bg-tertiary hover:text-dark"]),
+				class: C(["hl-relative hl-inline-flex hl-items-center hl-gap-2 hl-rounded-lg hl-px-4 hl-py-2 hl-text-sm hl-font-semibold hl-color-transition hl-no-focus-ring", e.disabled ? "hl-cursor-not-allowed hl-opacity-50" : d.value === e.value ? "hl-bg-primary hl-text-light" : "hl-cursor-pointer hl-text-muted hover:hl-bg-tertiary hl-theme-hover-text"]),
 				"aria-selected": d.value === e.value,
 				"aria-controls": v(e.value),
 				disabled: e.disabled,
 				onClick: (t) => g(e.value)
 			}, [
-				u("span", { class: C(["size-2 rounded-full", d.value === e.value ? "bg-light" : "bg-muted"]) }, null, 2),
+				u("span", { class: C(["hl-size-2 hl-rounded-full", d.value === e.value ? "hl-bg-light" : "hl-bg-muted"]) }, null, 2),
 				e.icon ? (D(), s(V, {
 					key: 0,
 					name: e.icon,
-					class: "size-4",
+					class: "hl-size-4",
 					decorative: !0
 				}, null, 8, ["name"])) : c("", !0),
 				f(" " + N(e.label), 1)
@@ -1933,7 +1937,7 @@ var ht = { class: "relative inline-block hanap-labs-font" }, gt = /* @__PURE__ *
 				id: v(d.value),
 				role: "tabpanel",
 				"aria-labelledby": h.value,
-				class: "px-1"
+				class: "hl-px-1"
 			}, [M(t.$slots, "default", { active: d.value })], 8, bn)) : c("", !0)
 		]));
 	}
@@ -3446,36 +3450,36 @@ function Gr(e) {
 }
 //#endregion
 //#region src/components/hl-table/HLTable.vue?vue&type=script&setup=true&lang.ts
-var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
+var Kr = { class: "hanap-labs-theme hanap-labs-font hl-flex hl-flex-col hl-gap-4" }, qr = {
 	key: 0,
-	class: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
+	class: "hl-flex hl-flex-col hl-gap-3 sm:hl-flex-row sm:hl-items-start sm:hl-justify-between"
 }, Jr = {
 	key: 0,
-	class: "flex flex-1 flex-wrap items-center gap-2"
+	class: "hl-flex hl-flex-1 hl-flex-wrap hl-items-center hl-gap-2"
 }, Yr = {
 	key: 0,
-	class: "hidden flex-none text-sm text-muted sm:block"
+	class: "hl-hidden hl-flex-none hl-text-sm hl-text-muted sm:hl-block"
 }, Xr = {
 	key: 1,
-	class: "hidden flex-none text-sm text-primary sm:block"
-}, Zr = { class: "overflow-hidden rounded-md border border-solid border-gray-200 bg-white" }, Qr = { class: "overflow-x-auto" }, $r = { class: "w-full table-auto text-left text-sm" }, ei = { class: "border-b border-solid border-gray-200 bg-gray-50 text-xs font-medium uppercase tracking-wider text-muted" }, ti = {
+	class: "hl-hidden hl-flex-none hl-text-sm hl-text-primary sm:hl-block"
+}, Zr = { class: "hl-theme-border hl-theme-bg hl-overflow-hidden hl-rounded-md hl-border hl-border-solid" }, Qr = { class: "hl-overflow-x-auto" }, $r = { class: "hl-w-full hl-table-auto hl-text-left hl-text-sm" }, ei = { class: "hl-theme-border hl-theme-bg-subtle hl-border-b hl-border-solid hl-text-xs hl-font-medium hl-uppercase hl-tracking-wider hl-theme-text-muted" }, ti = {
 	key: 0,
-	class: "w-10 whitespace-nowrap px-3 py-3 text-center"
+	class: "hl-w-10 hl-whitespace-nowrap hl-px-3 hl-py-3 hl-text-center"
 }, ni = ["onClick"], ri = {
 	key: 1,
-	class: "inline-flex min-w-4 justify-center"
-}, ii = { class: "divide-y divide-gray-200" }, ai = {
+	class: "hl-inline-flex hl-min-w-4 hl-justify-center"
+}, ii = { class: "hl-divide-y hl-divide-[var(--hanap-labs-border-default)]" }, ai = {
 	key: 0,
-	class: "w-10 whitespace-nowrap px-3 py-3 text-center"
+	class: "hl-w-10 hl-whitespace-nowrap hl-px-3 hl-py-3 hl-text-center"
 }, oi = {
 	key: 0,
-	class: "w-10 whitespace-nowrap px-3 py-3 text-center"
+	class: "hl-w-10 hl-whitespace-nowrap hl-px-3 hl-py-3 hl-text-center"
 }, si = { key: 2 }, ci = ["colspan"], li = {
 	key: 1,
-	class: "flex flex-col items-center justify-end gap-2 sm:flex-row"
-}, ui = { class: "flex items-center gap-1.5" }, di = {
+	class: "hl-flex hl-flex-col hl-items-center hl-justify-end hl-gap-2 sm:hl-flex-row"
+}, ui = { class: "hl-flex hl-items-center hl-gap-1.5" }, di = {
 	key: 1,
-	class: "inline-flex size-9 items-center justify-center text-sm text-muted"
+	class: "hl-inline-flex hl-size-9 hl-items-center hl-justify-center hl-text-sm hl-text-muted"
 }, fi = 5, pi = /* @__PURE__ */ h({
 	__name: "HLTable",
 	props: /* @__PURE__ */ b({
@@ -3630,13 +3634,13 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 			return e ?? {};
 		}
 		function I(e) {
-			return e === "center" ? "text-center" : e === "right" ? "text-right" : "text-left";
+			return e === "center" ? "hl-text-center" : e === "right" ? "hl-text-right" : "hl-text-left";
 		}
 		function oe(e) {
-			return e === "center" ? "justify-center" : e === "right" ? "justify-end" : "justify-start";
+			return e === "center" ? "hl-justify-center" : e === "right" ? "hl-justify-end" : "hl-justify-start";
 		}
 		function se(e) {
-			return e === "center" ? "mx-auto w-3/4" : e === "right" ? "ml-auto w-3/4" : "w-full";
+			return e === "center" ? "hl-mx-auto hl-w-3/4" : e === "right" ? "hl-ml-auto hl-w-3/4" : "hl-w-full";
 		}
 		R(ee, (e, t) => {
 			t && !e && g.value && (g.value = !1);
@@ -3706,7 +3710,7 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 				g.value = !1;
 			}
 		}), (t, n) => (D(), l("div", Kr, [
-			e.searchable || e.refreshable || F(d).filters ? (D(), l("div", qr, [F(d).filters ? (D(), l("div", Jr, [M(t.$slots, "filters")])) : c("", !0), u("div", { class: C(["flex items-center gap-2", { "w-full sm:w-auto": !F(d).filters }]) }, [
+			e.searchable || e.refreshable || F(d).filters ? (D(), l("div", qr, [F(d).filters ? (D(), l("div", Jr, [M(t.$slots, "filters")])) : c("", !0), u("div", { class: C(["hl-flex hl-items-center hl-gap-2", { "hl-w-full sm:hl-w-auto": !F(d).filters }]) }, [
 				e.searchable && !(e.selectable && O.value.length > 0) ? (D(), l("p", Yr, N(e.total) + " result" + N(e.total === 1 ? "" : "s"), 1)) : c("", !0),
 				e.selectable && O.value.length > 0 ? (D(), l("p", Xr, N(O.value.length) + " selected ", 1)) : c("", !0),
 				e.selectable && O.value.length > 0 ? M(t.$slots, "bulk-actions", { key: 2 }) : c("", !0),
@@ -3717,8 +3721,8 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 					type: "search",
 					placeholder: e.searchPlaceholder,
 					size: "md",
-					class: "w-full max-w-sm sm:w-72",
-					"input-class": "rounded-md border-gray-200 bg-transparent text-dark",
+					class: "hl-w-full hl-max-w-sm sm:hl-w-72",
+					"input-class": "hl-rounded-md hl-theme-border hl-bg-transparent hl-theme-text",
 					onInput: ue
 				}, null, 8, ["modelValue", "placeholder"])) : c("", !0),
 				e.refreshable ? (D(), s(K, {
@@ -3727,7 +3731,7 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 					type: "button",
 					"icon-only": !0,
 					variant: "outline",
-					class: "shrink-0 hover:text-primary",
+					class: "hl-shrink-0 hover:hl-text-primary",
 					disabled: g.value || ee.value,
 					"aria-label": "Refresh",
 					onClick: le
@@ -3737,7 +3741,7 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 						size: 20,
 						decorative: !0,
 						color: "muted",
-						class: C({ "animate-spin": g.value })
+						class: C({ "hl-animate-spin": g.value })
 					}, null, 8, ["class"])]),
 					_: 1
 				}, 8, ["disabled"])) : c("", !0)
@@ -3747,13 +3751,13 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 				indeterminate: ne.value,
 				"aria-label": "Toggle all rows",
 				size: "md",
-				class: "mx-auto max-w-max",
+				class: "hl-mx-auto hl-max-w-max",
 				"onUpdate:modelValue": me
 			}, null, 8, ["model-value", "indeterminate"])])) : c("", !0), (D(!0), l(r, null, j(F(w).getFlatHeaders().filter((e) => e.id !== "select"), (e) => (D(), l("th", {
 				key: e.id,
-				class: C(["whitespace-nowrap px-4 py-3", [I(P(e.column.columnDef.meta).alignment), { "cursor-pointer select-none hover:text-primary": e.column.getCanSort() }]]),
+				class: C(["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() }]]),
 				onClick: (t) => e.column.getCanSort() ? ce(e.id) : void 0
-			}, [u("div", { class: C(["flex w-full items-center gap-1.5", oe(P(e.column.columnDef.meta).alignment)]) }, [e.isPlaceholder ? c("", !0) : (D(), s(F(Ur), {
+			}, [u("div", { class: C(["hl-flex hl-w-full hl-items-center hl-gap-1.5", oe(P(e.column.columnDef.meta).alignment)]) }, [e.isPlaceholder ? c("", !0) : (D(), s(F(Ur), {
 				key: 0,
 				render: e.column.columnDef.header,
 				props: e.getContext()
@@ -3763,23 +3767,23 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 				decorative: !0
 			}, null, 8, ["name"])])) : c("", !0)], 2)], 10, ni))), 128))])]), u("tbody", ii, [e.initializing ? (D(), l(r, { key: 0 }, j(fi, (t) => u("tr", {
 				key: `skeleton-row-${t}`,
-				class: "animate-pulse"
-			}, [e.selectable ? (D(), l("td", ai, [...n[1] ||= [u("div", { class: "mx-auto size-5 rounded border border-solid border-gray-200 bg-gray-100" }, null, -1)]])) : c("", !0), (D(!0), l(r, null, j(F(w).getAllColumns().filter((e) => e.id !== "select"), (e) => (D(), l("td", {
+				class: "hl-animate-pulse"
+			}, [e.selectable ? (D(), l("td", ai, [...n[1] ||= [u("div", { class: "hl-theme-border hl-theme-bg-muted hl-mx-auto hl-size-5 hl-rounded hl-border hl-border-solid" }, null, -1)]])) : c("", !0), (D(!0), l(r, null, j(F(w).getAllColumns().filter((e) => e.id !== "select"), (e) => (D(), l("td", {
 				key: `${t}-${e.id}`,
-				class: C(["whitespace-nowrap px-4 py-3", I(P(e.columnDef.meta).alignment)])
-			}, [u("div", { class: C(["h-4 rounded bg-gray-100", se(P(e.columnDef.meta).alignment)]) }, null, 2)], 2))), 128))])), 64)) : (D(!0), l(r, { key: 1 }, j(F(w).getRowModel().rows, (n) => (D(), l("tr", {
+				class: C(["hl-whitespace-nowrap hl-px-4 hl-py-3", I(P(e.columnDef.meta).alignment)])
+			}, [u("div", { class: C(["hl-theme-bg-muted hl-h-4 hl-rounded", se(P(e.columnDef.meta).alignment)]) }, null, 2)], 2))), 128))])), 64)) : (D(!0), l(r, { key: 1 }, j(F(w).getRowModel().rows, (n) => (D(), l("tr", {
 				key: n.id,
-				class: C(["hover:bg-gray-50", { "bg-primary/5": n.getIsSelected() }])
+				class: C(["hl-theme-hover-bg-subtle", { "hl-bg-primary/5": n.getIsSelected() }])
 			}, [e.selectable ? (D(), l("td", oi, [p(J, {
 				"model-value": n.getIsSelected(),
 				"aria-label": "Toggle row",
 				size: "md",
-				class: "mx-auto max-w-max",
+				class: "hl-mx-auto hl-max-w-max",
 				"onUpdate:modelValue": (e) => he(n)
 			}, null, 8, ["model-value", "onUpdate:modelValue"])])) : c("", !0), (D(!0), l(r, null, j(n.getVisibleCells().filter((e) => e.column.id !== "select"), (e) => (D(), l("td", {
 				key: e.id,
-				class: C(["whitespace-nowrap px-4 py-3 text-dark", I(P(e.column.columnDef.meta).alignment)])
-			}, [u("div", { class: C(["flex w-full items-center gap-1.5", oe(P(e.column.columnDef.meta).alignment)]) }, [F(d)[e.column.id] ? M(t.$slots, e.column.id, {
+				class: C(["hl-theme-text hl-whitespace-nowrap hl-px-4 hl-py-3", I(P(e.column.columnDef.meta).alignment)])
+			}, [u("div", { class: C(["hl-flex hl-w-full hl-items-center hl-gap-1.5", oe(P(e.column.columnDef.meta).alignment)]) }, [F(d)[e.column.id] ? M(t.$slots, e.column.id, {
 				key: 0,
 				row: n.original,
 				rowId: n.id,
@@ -3791,8 +3795,8 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 				props: e.getContext()
 			}, null, 8, ["render", "props"])) : c("", !0)], 64))], 2)], 2))), 128))], 2))), 128)), !e.initializing && F(w).getRowModel().rows.length === 0 ? (D(), l("tr", si, [u("td", {
 				colspan: re.value,
-				class: "px-4 py-12 text-center text-muted"
-			}, [...n[2] ||= [u("div", { class: "flex flex-col items-center gap-1" }, [u("p", { class: "text-sm font-medium" }, "No results found"), u("p", { class: "text-xs" }, "Try adjusting your search terms")], -1)]], 8, ci)])) : c("", !0)])])])]),
+				class: "hl-px-4 hl-py-12 hl-text-center hl-text-muted"
+			}, [...n[2] ||= [u("div", { class: "hl-flex hl-flex-col hl-items-center hl-gap-1" }, [u("p", { class: "hl-text-sm hl-font-medium" }, "No results found"), u("p", { class: "hl-text-xs" }, "Try adjusting your search terms")], -1)]], 8, ci)])) : c("", !0)])])])]),
 			e.pageCount !== void 0 || te.value > 1 ? (D(), l("div", li, [u("div", ui, [
 				p(K, {
 					label: "",
@@ -3801,7 +3805,7 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 					variant: "outline",
 					rounded: !1,
 					"icon-only": !0,
-					class: "!p-0 hover:!bg-gray-100",
+					class: "!hl-p-0 hl-theme-hover-bg-muted",
 					disabled: T.value ? E.value <= 1 : !F(w).getCanPreviousPage(),
 					"aria-label": "Previous page",
 					onClick: de
@@ -3821,7 +3825,7 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 					variant: e === E.value ? "solid" : "outline",
 					color: e === E.value ? "primary" : void 0,
 					rounded: !1,
-					class: C(["!size-9 !min-w-0 !p-0 !font-medium", e === E.value ? "" : "hover:!bg-gray-100"]),
+					class: C(["!hl-size-9 !hl-min-w-0 !hl-p-0 !hl-font-medium", e === E.value ? "" : "hl-theme-hover-bg-muted"]),
 					onClick: (t) => pe(e)
 				}, null, 8, [
 					"label",
@@ -3837,7 +3841,7 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 					variant: "outline",
 					rounded: !1,
 					"icon-only": !0,
-					class: "!p-0 hover:!bg-gray-100",
+					class: "!hl-p-0 hl-theme-hover-bg-muted",
 					disabled: T.value ? E.value >= te.value : !F(w).getCanNextPage(),
 					"aria-label": "Next page",
 					onClick: fe
@@ -3852,7 +3856,7 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 			])])) : c("", !0)
 		]));
 	}
-}), mi = { class: "w-full" }, hi = { class: "relative" }, gi = [
+}), mi = { class: "hanap-labs-theme hanap-labs-font hl-w-full" }, hi = { class: "hl-relative" }, gi = [
 	"id",
 	"placeholder",
 	"required",
@@ -3863,10 +3867,10 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 	"minlength"
 ], _i = {
 	key: 1,
-	class: "mt-1 space-y-1"
+	class: "hl-mt-1 hl-space-y-1"
 }, vi = {
 	key: 0,
-	class: "text-xs text-danger"
+	class: "hl-text-xs hl-text-danger"
 }, yi = /* @__PURE__ */ be(/* @__PURE__ */ h({
 	__name: "HLTextarea",
 	props: /* @__PURE__ */ b({
@@ -3942,10 +3946,10 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 				rows: e.rows,
 				maxlength: e.maxlength,
 				minlength: e.minlength,
-				class: C(["block w-full appearance-none box-border border border-solid border-gray-200 bg-transparent text-dark placeholder:text-muted leading-tight transition-colors duration-150 hl-no-focus-ring disabled:cursor-not-allowed disabled:opacity-60 py-2.5 px-3 text-sm rounded-md resize-none hanap-labs-font", [e.inputClass, {
-					"cursor-not-allowed": e.disabled,
-					"border-danger focus:border-danger": p.value,
-					"border-0 focus:border-0": e.noBorder
+				class: C(["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-150 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-md hl-resize-none", [e.inputClass, {
+					"hl-cursor-not-allowed": e.disabled,
+					"hl-border-danger focus:hl-border-danger": p.value,
+					"hl-border-0 focus:hl-border-0": e.noBorder
 				}]]),
 				onFocus: o[1] ||= (e) => a("focus"),
 				onBlur: o[2] ||= (e) => a("blur"),
@@ -3953,10 +3957,10 @@ var Kr = { class: "flex flex-col gap-4 hanap-labs-font" }, qr = {
 			}, null, 42, gi), [[ce, n.value]])]),
 			p.value ? (D(), l("div", _i, [e.error ? (D(), l("p", vi, N(e.error), 1)) : c("", !0), e.errors.length ? (D(!0), l(r, { key: 1 }, j(e.errors, (e) => (D(), l("p", {
 				key: e,
-				class: "text-xs text-danger"
+				class: "hl-text-xs hl-text-danger"
 			}, N(e), 1))), 128)) : c("", !0)])) : c("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-1b28fb3f"]]);
+}), [["__scopeId", "data-v-064fc52f"]]);
 //#endregion
 export { ge as C, he as S, Re as _, pn as a, ke as b, Ht as c, jt as d, Tt as f, J as g, Qe as h, mn as i, Vt as l, gt as m, pi as n, Yt as o, xt as p, xn as r, Jt as s, yi as t, Mt as u, K as v, V as x, Me as y };