@enos5/enos-vue-default 1.8.17 → 1.9.0

package/dist/{plugin-DyVd9Eh7.js → plugin-BhIV8ihv.js}

@@ -1,4 +1,4 @@
-import { Fragment, Teleport, Transition, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, h, inject, isVNode, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useSlots, vModelCheckbox, vModelText, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { Fragment, Teleport, Transition, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, h, inject, isVNode, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toHandlers, unref, useAttrs, useSlots, vModelCheckbox, vModelText, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, ExclamationCircleIcon, ExclamationTriangleIcon, EyeDropperIcon, LockClosedIcon, MagnifyingGlassIcon, PencilSquareIcon, PhotoIcon, XMarkIcon } from "@heroicons/vue/24/outline";
 import Editor from "@tinymce/tinymce-vue";
 import { useI18n } from "vue-i18n";
@@ -36,12 +36,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 //#endregion
 //#region src/components/CardTabs.vue
-var _hoisted_1$40 = { class: "border-b border-neutral-200 bg-neutral-50/80 p-2 dark:border-neutral-800 dark:bg-neutral-900/80" };
-var _hoisted_2$24 = {
+var _hoisted_1$37 = { class: "border-b border-neutral-200 bg-neutral-50/80 p-2 dark:border-neutral-800 dark:bg-neutral-900/80" };
+var _hoisted_2$21 = {
 	role: "tablist",
 	class: "flex overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-neutral-200 dark:bg-neutral-950 dark:ring-neutral-800"
 };
-var _hoisted_3$17 = [
+var _hoisted_3$16 = [
 	"aria-selected",
 	"tabindex",
 	"onClick",
@@ -106,7 +106,7 @@ var _sfc_main$40 = {
 			focusTabAtIndex(targetIndex);
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$40, [createElementVNode("div", _hoisted_2$24, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tab, index) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$37, [createElementVNode("div", _hoisted_2$21, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tab, index) => {
 				return openBlock(), createElementBlock("button", {
 					key: tab.value,
 					ref_for: true,
@@ -123,18 +123,18 @@ var _sfc_main$40 = {
 					]),
 					onClick: ($event) => activateTab(tab.value),
 					onKeydown: ($event) => onTabKeydown($event, index)
-				}, toDisplayString(tab.label), 47, _hoisted_3$17);
+				}, toDisplayString(tab.label), 47, _hoisted_3$16);
 			}), 128))])]);
 		};
 	}
 };
 //#endregion
 //#region src/components/Card.vue
-var _hoisted_1$39 = {
+var _hoisted_1$36 = {
 	key: 0,
 	class: "mb-4"
 };
-var _hoisted_2$23 = {
+var _hoisted_2$20 = {
 	key: 1,
 	class: "mb-4 text-xl font-semibold tracking-tight text-neutral-950 dark:text-neutral-50"
 };
@@ -204,7 +204,7 @@ var _sfc_main$39 = {
 				"active-tab": __props.activeTab,
 				"onUpdate:activeTab": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:activeTab", $event)),
 				onTabClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("tab-click", $event))
-			}, null, 8, ["tabs", "active-tab"])) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(__props.paddingClass) }, [_ctx.$slots.customTitle ? (openBlock(), createElementBlock("div", _hoisted_1$39, [renderSlot(_ctx.$slots, "customTitle")])) : __props.title ? (openBlock(), createElementBlock("h3", _hoisted_2$23, toDisplayString(__props.title), 1)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(["relative", __props.tabs.length > 0 ? "overflow-hidden" : "overflow-visible"]) }, [createVNode(Transition, {
+			}, null, 8, ["tabs", "active-tab"])) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(__props.paddingClass) }, [_ctx.$slots.customTitle ? (openBlock(), createElementBlock("div", _hoisted_1$36, [renderSlot(_ctx.$slots, "customTitle")])) : __props.title ? (openBlock(), createElementBlock("h3", _hoisted_2$20, toDisplayString(__props.title), 1)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(["relative", __props.tabs.length > 0 ? "overflow-hidden" : "overflow-visible"]) }, [createVNode(Transition, {
 				"enter-active-class": "transition-all duration-200 ease-in-out",
 				"enter-from-class": slideDirection.value === "right" ? "translate-x-full opacity-0" : "-translate-x-full opacity-0",
 				"enter-to-class": "translate-x-0 opacity-100",
@@ -271,7 +271,7 @@ var _sfc_main$37 = {
 };
 //#endregion
 //#region src/components/ActionMessage.vue
-var _hoisted_1$38 = { class: "text-sm text-gray-600" };
+var _hoisted_1$35 = { class: "text-sm text-gray-600" };
 var _sfc_main$36 = {
 	__name: "ActionMessage",
 	props: { on: Boolean },
@@ -282,7 +282,7 @@ var _sfc_main$36 = {
 				"leave-from-class": "opacity-100",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: withCtx(() => [withDirectives(createElementVNode("div", _hoisted_1$38, [renderSlot(_ctx.$slots, "default")], 512), [[vShow, __props.on]])]),
+				default: withCtx(() => [withDirectives(createElementVNode("div", _hoisted_1$35, [renderSlot(_ctx.$slots, "default")], 512), [[vShow, __props.on]])]),
 				_: 3
 			})]);
 		};
@@ -298,35 +298,35 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 //#endregion
 //#region src/components/SectionTitle.vue
 var _sfc_main$35 = {};
-var _hoisted_1$37 = { class: "md:col-span-1 flex justify-between" };
-var _hoisted_2$22 = { class: "px-4 sm:px-0" };
-var _hoisted_3$16 = { class: "text-xl font-semibold tracking-tight text-neutral-950 dark:text-neutral-50" };
-var _hoisted_4$12 = { class: "mt-1 max-w-2xl text-sm text-neutral-600 dark:text-neutral-200" };
-var _hoisted_5$10 = { class: "px-4 sm:px-0" };
+var _hoisted_1$34 = { class: "md:col-span-1 flex justify-between" };
+var _hoisted_2$19 = { class: "px-4 sm:px-0" };
+var _hoisted_3$15 = { class: "text-xl font-semibold tracking-tight text-neutral-950 dark:text-neutral-50" };
+var _hoisted_4$11 = { class: "mt-1 max-w-2xl text-sm text-neutral-600 dark:text-neutral-200" };
+var _hoisted_5$8 = { class: "px-4 sm:px-0" };
 function _sfc_render(_ctx, _cache) {
-	return openBlock(), createElementBlock("div", _hoisted_1$37, [createElementVNode("div", _hoisted_2$22, [createElementVNode("h3", _hoisted_3$16, [renderSlot(_ctx.$slots, "title")]), createElementVNode("p", _hoisted_4$12, [renderSlot(_ctx.$slots, "description")])]), createElementVNode("div", _hoisted_5$10, [renderSlot(_ctx.$slots, "aside")])]);
+	return openBlock(), createElementBlock("div", _hoisted_1$34, [createElementVNode("div", _hoisted_2$19, [createElementVNode("h3", _hoisted_3$15, [renderSlot(_ctx.$slots, "title")]), createElementVNode("p", _hoisted_4$11, [renderSlot(_ctx.$slots, "description")])]), createElementVNode("div", _hoisted_5$8, [renderSlot(_ctx.$slots, "aside")])]);
 }
 var SectionTitle_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$35, [["render", _sfc_render]]);
 //#endregion
 //#region src/components/ActionSection.vue
-var _hoisted_1$36 = { class: "md:grid md:grid-cols-3 md:gap-6" };
-var _hoisted_2$21 = { class: "mt-5 md:mt-0 md:col-span-2" };
-var _hoisted_3$15 = { class: "rounded-lg border border-neutral-200 bg-white px-4 py-5 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 sm:p-6" };
+var _hoisted_1$33 = { class: "md:grid md:grid-cols-3 md:gap-6" };
+var _hoisted_2$18 = { class: "mt-5 md:mt-0 md:col-span-2" };
+var _hoisted_3$14 = { class: "rounded-lg border border-neutral-200 bg-white px-4 py-5 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 sm:p-6" };
 var _sfc_main$34 = {
 	__name: "ActionSection",
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$36, [createVNode(SectionTitle_default, null, {
+			return openBlock(), createElementBlock("div", _hoisted_1$33, [createVNode(SectionTitle_default, null, {
 				title: withCtx(() => [renderSlot(_ctx.$slots, "title")]),
 				description: withCtx(() => [renderSlot(_ctx.$slots, "description")]),
 				_: 3
-			}), createElementVNode("div", _hoisted_2$21, [createElementVNode("div", _hoisted_3$15, [renderSlot(_ctx.$slots, "content")])])]);
+			}), createElementVNode("div", _hoisted_2$18, [createElementVNode("div", _hoisted_3$14, [renderSlot(_ctx.$slots, "content")])])]);
 		};
 	}
 };
 //#endregion
 //#region src/components/Badge.vue
-var _hoisted_1$35 = { class: "sr-only" };
+var _hoisted_1$32 = { class: "sr-only" };
 var _sfc_main$33 = {
 	__name: "Badge",
 	props: {
@@ -431,7 +431,7 @@ var _sfc_main$33 = {
 			return __props.type === "dot" ? (openBlock(), createElementBlock("span", {
 				key: 0,
 				class: normalizeClass(["inline-flex items-center justify-center w-6 h-6 rounded-full", colorClasses[__props.color].bg])
-			}, [createElementVNode("span", { class: normalizeClass(["w-2 h-2 rounded-full", colorClasses[__props.color].dot]) }, null, 2), createElementVNode("span", _hoisted_1$35, [renderSlot(_ctx.$slots, "default")])], 2)) : (openBlock(), createElementBlock("span", {
+			}, [createElementVNode("span", { class: normalizeClass(["w-2 h-2 rounded-full", colorClasses[__props.color].dot]) }, null, 2), createElementVNode("span", _hoisted_1$32, [renderSlot(_ctx.$slots, "default")])], 2)) : (openBlock(), createElementBlock("span", {
 				key: 1,
 				class: normalizeClass(["inline-flex items-center font-medium", [
 					colorClasses[__props.color].bg,
@@ -445,7 +445,7 @@ var _sfc_main$33 = {
 };
 //#endregion
 //#region src/components/Button.vue
-var _hoisted_1$34 = ["type", "disabled"];
+var _hoisted_1$31 = ["type", "disabled"];
 var _sfc_main$32 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 	__name: "Button",
 	props: {
@@ -509,13 +509,13 @@ var _sfc_main$32 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 				type: __props.type,
 				disabled: __props.disabled,
 				class: buttonClasses.value
-			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$34);
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$31);
 		};
 	}
 });
 //#endregion
 //#region src/components/Checkbox.vue
-var _hoisted_1$33 = ["value"];
+var _hoisted_1$30 = ["value"];
 var _sfc_main$31 = {
 	__name: "Checkbox",
 	props: {
@@ -546,13 +546,13 @@ var _sfc_main$31 = {
 				type: "checkbox",
 				value: __props.value,
 				class: "rounded border-neutral-300 text-neutral-900 shadow-sm focus:ring-neutral-900 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100 dark:focus:ring-neutral-100"
-			}, null, 8, _hoisted_1$33)), [[vModelCheckbox, proxyChecked.value]]);
+			}, null, 8, _hoisted_1$30)), [[vModelCheckbox, proxyChecked.value]]);
 		};
 	}
 };
 //#endregion
 //#region src/components/CheckboxInput.vue
-var _hoisted_1$32 = [
+var _hoisted_1$29 = [
 	"name",
 	"checked",
 	"disabled"
@@ -597,6 +597,10 @@ var _sfc_main$30 = {
 		disabled: {
 			type: Boolean,
 			default: false
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue"],
@@ -615,11 +619,15 @@ var _sfc_main$30 = {
 			emit("update:modelValue", event.target.checked ? props.value : props.uncheckedValue);
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("label", { class: normalizeClass(["inline-flex items-center gap-2 rounded-full border px-3 py-1 text-sm font-medium select-none transition-colors", [
+			return openBlock(), createElementBlock("label", { class: normalizeClass([
+				"inline-flex items-center gap-2 rounded-full border px-3 py-1 text-sm font-medium select-none transition-colors",
+				props.ui.root,
 				isChecked.value ? "border-neutral-900 bg-neutral-900 text-neutral-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50" : "border-neutral-200 text-neutral-600 dark:border-neutral-700 dark:text-neutral-300",
 				__props.disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer",
-				hasFocus.value && !__props.disabled ? "ring-2 ring-neutral-900/20 ring-offset-2 ring-offset-white dark:ring-neutral-100/20 dark:ring-offset-neutral-950" : ""
-			]]) }, [
+				hasFocus.value && !__props.disabled ? "ring-2 ring-neutral-900/20 ring-offset-2 ring-offset-white dark:ring-neutral-100/20 dark:ring-offset-neutral-950" : "",
+				isChecked.value ? props.ui.controlChecked : props.ui.controlUnchecked,
+				hasFocus.value && !__props.disabled ? props.ui.focus : ""
+			]) }, [
 				createElementVNode("input", {
 					type: "checkbox",
 					class: "sr-only",
@@ -629,34 +637,34 @@ var _sfc_main$30 = {
 					onChange,
 					onFocus: handleFocus,
 					onBlur: handleBlur
-				}, null, 40, _hoisted_1$32),
-				createElementVNode("span", { class: normalizeClass(["inline-flex h-4 w-4 items-center justify-center border text-[10px] font-bold leading-none", [isChecked.value ? "border-current bg-white/15 text-current dark:bg-neutral-900/15" : "border-neutral-400 text-transparent dark:border-neutral-500", "rounded"]]) }, " ✓ ", 2),
-				createElementVNode("span", null, toDisplayString(__props.label), 1)
+				}, null, 40, _hoisted_1$29),
+				createElementVNode("span", { class: normalizeClass([
+					"inline-flex h-4 w-4 items-center justify-center border text-[10px] font-bold leading-none",
+					props.ui.control,
+					isChecked.value ? "border-current bg-white/15 text-current dark:bg-neutral-900/15" : "border-neutral-400 text-transparent dark:border-neutral-500",
+					"rounded"
+				]) }, [createElementVNode("span", { class: normalizeClass(props.ui.indicator) }, "✓", 2)], 2),
+				createElementVNode("span", { class: normalizeClass(props.ui.label) }, toDisplayString(__props.label), 3)
 			], 2);
 		};
 	}
 };
 //#endregion
 //#region src/components/TextInput.vue
-var _hoisted_1$31 = { class: "relative flex items-center" };
-var _hoisted_2$20 = {
-	key: 0,
-	class: "absolute inset-y-0 left-0 flex items-center pointer-events-none pl-3"
-};
-var _hoisted_3$14 = [
+var _hoisted_1$28 = [
 	"type",
 	"value",
 	"disabled"
 ];
-var _hoisted_4$11 = ["aria-label"];
-var _hoisted_5$9 = {
+var _hoisted_2$17 = ["aria-label"];
+var _hoisted_3$13 = {
 	key: 0,
 	class: "h-5 w-5",
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24"
 };
-var _hoisted_6$8 = {
+var _hoisted_4$10 = {
 	key: 1,
 	class: "h-5 w-5",
 	fill: "none",
@@ -682,6 +690,10 @@ var _sfc_main$29 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 		disabledClass: {
 			type: String,
 			default: "!border-neutral-200 !bg-neutral-100 !text-neutral-500 dark:!border-neutral-800 dark:!bg-neutral-900 dark:!text-neutral-500"
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue", "blur"],
@@ -703,7 +715,8 @@ var _sfc_main$29 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 		const inputClasses = computed(() => [
 			"w-full min-w-0 max-w-full rounded-lg border border-neutral-200 bg-white text-neutral-950 shadow-sm outline-none transition-colors placeholder:text-neutral-400 focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:placeholder:text-neutral-500 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
 			attrs.class,
-			isPasswordField.value ? "pr-10 pl-10" : ""
+			isPasswordField.value ? "pr-10 pl-10" : "",
+			props.ui.input
 		]);
 		const toggleVisibility = () => {
 			revealed.value = !revealed.value;
@@ -719,8 +732,11 @@ var _sfc_main$29 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 		});
 		__expose({ focus: () => input.value?.focus() });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$31, [
-				isPasswordField.value ? (openBlock(), createElementBlock("div", _hoisted_2$20, [createVNode(unref(LockClosedIcon), { class: "h-5 w-5 text-neutral-400 dark:text-neutral-200" })])) : createCommentVNode("", true),
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["relative flex items-center", props.ui.root]) }, [
+				isPasswordField.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["absolute inset-y-0 left-0 flex items-center pointer-events-none pl-3", props.ui.leadingIcon])
+				}, [createVNode(unref(LockClosedIcon), { class: "h-5 w-5 text-neutral-400 dark:text-neutral-200" })], 2)) : createCommentVNode("", true),
 				createElementVNode("input", mergeProps({
 					ref_key: "input",
 					ref: input
@@ -732,19 +748,19 @@ var _sfc_main$29 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 					onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value)),
 					onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event)),
 					onWheel: handleWheel
-				}), null, 16, _hoisted_3$14),
+				}), null, 16, _hoisted_1$28),
 				isPasswordField.value ? (openBlock(), createElementBlock("button", {
 					key: 1,
 					type: "button",
-					class: "absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 transition-colors hover:text-neutral-700 focus:outline-none dark:text-neutral-200 dark:hover:text-neutral-50",
+					class: normalizeClass(["absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 transition-colors hover:text-neutral-700 focus:outline-none dark:text-neutral-200 dark:hover:text-neutral-50", props.ui.trailingAction]),
 					"aria-label": revealed.value ? "Hide password" : "Show password",
 					onClick: toggleVisibility
-				}, [revealed.value ? (openBlock(), createElementBlock("svg", _hoisted_5$9, [..._cache[2] || (_cache[2] = [createElementVNode("path", {
+				}, [revealed.value ? (openBlock(), createElementBlock("svg", _hoisted_3$13, [..._cache[2] || (_cache[2] = [createElementVNode("path", {
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round",
 					"stroke-width": "2",
 					d: "M13.875 18.825A10.05 10.05 0 0112 19c-5 0-9.27-3.11-11-7 1.01-2.27 2.78-4.1 5-5.32m3.08-1.3A9.96 9.96 0 0112 5c5 0 9.27 3.11 11 7a11.03 11.03 0 01-4.16 4.91M15 12a3 3 0 00-3-3m0 0a3 3 0 00-2.94 3.59M3 3l18 18"
-				}, null, -1)])])) : (openBlock(), createElementBlock("svg", _hoisted_6$8, [..._cache[3] || (_cache[3] = [createElementVNode("path", {
+				}, null, -1)])])) : (openBlock(), createElementBlock("svg", _hoisted_4$10, [..._cache[3] || (_cache[3] = [createElementVNode("path", {
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round",
 					"stroke-width": "2",
@@ -754,14 +770,14 @@ var _sfc_main$29 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 					"stroke-linejoin": "round",
 					"stroke-width": "2",
 					d: "M2.458 12C3.732 7.943 7.523 5 12 5s8.268 2.943 9.542 7c-1.274 4.057-5.065 7-9.542 7S3.732 16.057 2.458 12z"
-				}, null, -1)])]))], 8, _hoisted_4$11)) : createCommentVNode("", true)
-			]);
+				}, null, -1)])]))], 10, _hoisted_2$17)) : createCommentVNode("", true)
+			], 2);
 		};
 	}
 });
 //#endregion
 //#region src/components/TextArea.vue
-var _hoisted_1$30 = ["value", "disabled"];
+var _hoisted_1$27 = ["value", "disabled"];
 var DEFAULT_MAX_LENGTH = 1e3;
 var _sfc_main$28 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 	__name: "TextArea",
@@ -778,6 +794,10 @@ var _sfc_main$28 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 		autoResize: {
 			type: Boolean,
 			default: true
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue"],
@@ -794,7 +814,8 @@ var _sfc_main$28 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 		const textareaClasses = computed(() => [
 			"w-full min-w-0 max-w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-950 shadow-sm outline-none transition-colors placeholder:text-neutral-400 focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:placeholder:text-neutral-500 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
 			props.autoResize ? "resize-none overflow-y-auto" : "resize-y",
-			attrs.class
+			attrs.class,
+			props.ui.input
 		]);
 		const resizeTextarea = () => {
 			if (!props.autoResize || !textarea.value) return;
@@ -818,7 +839,7 @@ var _sfc_main$28 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 		});
 		__expose({ focus: () => textarea.value?.focus() });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", null, [createElementVNode("textarea", mergeProps({
+			return openBlock(), createElementBlock("div", { class: normalizeClass(props.ui.root) }, [createElementVNode("textarea", mergeProps({
 				ref_key: "textarea",
 				ref: textarea
 			}, textareaAttrs.value, {
@@ -826,25 +847,25 @@ var _sfc_main$28 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 				value: props.modelValue,
 				disabled: props.disabled,
 				onInput: updateValue
-			}), null, 16, _hoisted_1$30)]);
+			}), null, 16, _hoisted_1$27)], 2);
 		};
 	}
 });
 //#endregion
 //#region src/components/CustomSelect.vue
-var _hoisted_1$29 = { class: "flex h-5 items-center gap-1" };
-var _hoisted_2$19 = ["placeholder"];
-var _hoisted_3$13 = [
+var _hoisted_1$26 = { class: "flex h-5 items-center gap-1" };
+var _hoisted_2$16 = ["placeholder"];
+var _hoisted_3$12 = [
 	"data-option-value",
 	"onClick",
 	"onFocus",
 	"onKeydown"
 ];
-var _hoisted_4$10 = {
+var _hoisted_4$9 = {
 	key: 0,
 	class: "flex items-center gap-3"
 };
-var _hoisted_5$8 = [
+var _hoisted_5$7 = [
 	"checked",
 	"disabled",
 	"onChange"
@@ -1005,6 +1026,10 @@ var _sfc_main$27 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 		noOptionsText: {
 			type: String,
 			default: "No options available"
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue"],
@@ -1078,6 +1103,48 @@ var _sfc_main$27 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 		const hasVisibleOptions = computed(() => filteredOptions.value.length > 0);
 		const visibleOptions = computed(() => filteredOptions.value);
 		const canClearSelection = computed(() => !props.multiple && !props.placeholderDisabled && !props.disabled && props.modelValue !== null && props.modelValue !== void 0 && props.modelValue !== "");
+		const triggerClasses = computed(() => [
+			props.baseClass,
+			selectedDeletedOption.value || props.multiple && selectedMultipleOptions.value.some(optionDeleted) ? props.deletedSelectedClass : props.normalTextClass,
+			{ "text-neutral-50": isDarkMode.value && !(selectedDeletedOption.value || props.multiple && selectedMultipleOptions.value.some(optionDeleted)) },
+			"flex items-center justify-between cursor-pointer",
+			attrs.class,
+			props.ui.trigger
+		]);
+		const triggerValueClasses = computed(() => [(props.multiple && selectedMultipleOptions.value.length === 0 || !props.multiple && !props.modelValue) && props.placeholder ? props.placeholderClass : null, props.multiple && selectedMultipleOptions.value.length === 0 || !props.multiple && !props.modelValue ? props.ui.placeholder : props.ui.value]);
+		const clearButtonClasses = computed(() => ["inline-flex size-5 shrink-0 items-center justify-center rounded-full text-neutral-400 transition hover:bg-neutral-100 hover:text-neutral-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:hover:bg-neutral-900 dark:hover:text-neutral-200 dark:focus-visible:ring-neutral-100/20", props.ui.clearButton]);
+		const chevronClasses = computed(() => [
+			"size-5 text-neutral-400 transition-transform dark:text-neutral-200",
+			{ "rotate-180": isOpen.value },
+			props.ui.chevron
+		]);
+		const dropdownClasses = computed(() => [
+			props.dropdownClass,
+			{ "bg-neutral-950 border-neutral-800": isDarkMode.value },
+			props.ui.dropdown
+		]);
+		const searchInputClasses = computed(() => [props.searchInputClass, props.ui.searchInput]);
+		const emptyStateClasses = computed(() => [
+			props.dropdownOptionClass,
+			props.placeholderClass,
+			"cursor-default",
+			props.ui.option,
+			props.ui.placeholder
+		]);
+		const optionClasses = (option) => [
+			props.dropdownOptionClass,
+			optionDeleted(option) ? props.deletedOptionClass : props.optionClass,
+			props.ui.option,
+			{ "text-neutral-50": isDarkMode.value && !optionDeleted(option) },
+			{
+				[props.dropdownHighlightedClass]: optionIsHighlighted(option),
+				[props.dropdownSelectedClass]: props.multiple ? optionIsSelected(option) : optionValue(option) === props.modelValue || String(optionValue(option)) === String(props.modelValue),
+				"rounded-b-lg": option === availableOptions.value[availableOptions.value.length - 1],
+				"rounded-lg": availableOptions.value.length === 1
+			},
+			optionIsHighlighted(option) ? props.ui.optionHighlighted : null,
+			(props.multiple ? optionIsSelected(option) : optionValue(option) === props.modelValue || String(optionValue(option)) === String(props.modelValue)) ? props.ui.optionSelected : null
+		];
 		const displayText = computed(() => {
 			if (props.multiple) {
 				if (selectedMultipleOptions.value.length === 0) return props.placeholder;
@@ -1350,29 +1417,23 @@ var _sfc_main$27 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 			return openBlock(), createElementBlock("div", {
 				ref_key: "rootRef",
 				ref: rootRef,
-				class: "relative",
+				class: normalizeClass(["relative", props.ui.root]),
 				onClick: toggleDropdown
 			}, [createElementVNode("div", mergeProps({
 				ref_key: "triggerRef",
 				ref: triggerRef,
-				class: [
-					__props.baseClass,
-					selectedDeletedOption.value || __props.multiple && selectedMultipleOptions.value.some(optionDeleted) ? __props.deletedSelectedClass : __props.normalTextClass,
-					{ "text-neutral-50": isDarkMode.value && !(selectedDeletedOption.value || __props.multiple && selectedMultipleOptions.value.some(optionDeleted)) },
-					"flex items-center justify-between cursor-pointer",
-					unref(attrs).class
-				]
+				class: triggerClasses.value
 			}, unref(attrs), { tabindex: "0" }), [createElementVNode("span", {
-				class: normalizeClass((__props.multiple && selectedMultipleOptions.value.length === 0 || !__props.multiple && !__props.modelValue) && __props.placeholder ? __props.placeholderClass : null),
+				class: normalizeClass(triggerValueClasses.value),
 				style: normalizeStyle(darkTextStyle.value)
-			}, toDisplayString(displayText.value), 7), createElementVNode("div", _hoisted_1$29, [canClearSelection.value ? (openBlock(), createElementBlock("button", {
+			}, toDisplayString(displayText.value), 7), createElementVNode("div", _hoisted_1$26, [canClearSelection.value ? (openBlock(), createElementBlock("button", {
 				key: 0,
 				type: "button",
-				class: "inline-flex size-5 shrink-0 items-center justify-center rounded-full text-neutral-400 transition hover:bg-neutral-100 hover:text-neutral-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:hover:bg-neutral-900 dark:hover:text-neutral-200 dark:focus-visible:ring-neutral-100/20",
+				class: normalizeClass(clearButtonClasses.value),
 				"aria-label": "Clear selection",
 				onClick: withModifiers(clearSelection, ["stop", "prevent"]),
 				onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
-			}, [createVNode(unref(XMarkIcon), { class: "size-4" })], 32)) : createCommentVNode("", true), createVNode(unref(ChevronDownIcon), { class: normalizeClass(["size-5 text-neutral-400 transition-transform dark:text-neutral-200", { "rotate-180": isOpen.value }]) }, null, 8, ["class"])])], 16), isMounted.value ? (openBlock(), createBlock(Teleport, {
+			}, [createVNode(unref(XMarkIcon), { class: "size-4" })], 34)) : createCommentVNode("", true), createVNode(unref(ChevronDownIcon), { class: normalizeClass(chevronClasses.value) }, null, 8, ["class"])])], 16), isMounted.value ? (openBlock(), createBlock(Teleport, {
 				key: 0,
 				to: teleportTarget.value
 			}, [createVNode(Transition, {
@@ -1387,9 +1448,9 @@ var _sfc_main$27 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 					key: 0,
 					ref_key: "dropdownMenuRef",
 					ref: dropdownMenuRef,
-					class: normalizeClass({ dark: isDarkMode.value }),
+					class: normalizeClass([{ dark: isDarkMode.value }, props.ui.dropdownRoot]),
 					style: normalizeStyle(dropdownStyle.value)
-				}, [createElementVNode("div", { class: normalizeClass([__props.dropdownClass, { "bg-neutral-950 border-neutral-800": isDarkMode.value }]) }, [
+				}, [createElementVNode("div", { class: normalizeClass(dropdownClasses.value) }, [
 					__props.searchable ? withDirectives((openBlock(), createElementBlock("input", {
 						key: 0,
 						ref_key: "searchInputRef",
@@ -1397,10 +1458,10 @@ var _sfc_main$27 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchQuery.value = $event),
 						type: "text",
 						placeholder: __props.searchPlaceholder,
-						class: normalizeClass(__props.searchInputClass),
+						class: normalizeClass(searchInputClasses.value),
 						onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
 						onKeydown: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
-					}, null, 42, _hoisted_2$19)), [[vModelText, searchQuery.value]]) : createCommentVNode("", true),
+					}, null, 42, _hoisted_2$16)), [[vModelText, searchQuery.value]]) : createCommentVNode("", true),
 					selectedDeletedOption.value ? (openBlock(), createElementBlock("div", {
 						key: 1,
 						class: normalizeClass([
@@ -1411,11 +1472,7 @@ var _sfc_main$27 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 					}, toDisplayString(optionText(selectedDeletedOption.value)), 3)) : createCommentVNode("", true),
 					!hasVisibleOptions.value ? (openBlock(), createElementBlock("div", {
 						key: 2,
-						class: normalizeClass([
-							__props.dropdownOptionClass,
-							__props.placeholderClass,
-							"cursor-default"
-						]),
+						class: normalizeClass(emptyStateClasses.value),
 						style: normalizeStyle(darkTextStyle.value)
 					}, toDisplayString(__props.noOptionsText), 7)) : createCommentVNode("", true),
 					(openBlock(true), createElementBlock(Fragment, null, renderList(filteredOptions.value, (option) => {
@@ -1424,36 +1481,26 @@ var _sfc_main$27 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 							"data-option-value": String(optionValue(option) ?? ""),
 							"data-select-option": "true",
 							tabindex: "-1",
-							class: normalizeClass([
-								__props.dropdownOptionClass,
-								optionDeleted(option) ? __props.deletedOptionClass : __props.optionClass,
-								{ "text-neutral-50": isDarkMode.value && !optionDeleted(option) },
-								{
-									[__props.dropdownHighlightedClass]: optionIsHighlighted(option),
-									[__props.dropdownSelectedClass]: __props.multiple ? optionIsSelected(option) : optionValue(option) === __props.modelValue || String(optionValue(option)) === String(__props.modelValue),
-									"rounded-b-lg": option === availableOptions.value[availableOptions.value.length - 1],
-									"rounded-lg": availableOptions.value.length === 1
-								}
-							]),
+							class: normalizeClass(optionClasses(option)),
 							onClick: withModifiers(($event) => __props.multiple ? toggleMultipleOption(option) : selectOption(option), ["stop"]),
 							onFocus: ($event) => highlightedOptionValue.value = String(optionValue(option) ?? ""),
 							onKeydown: ($event) => handleOptionKeydown($event, option)
-						}, [__props.multiple ? (openBlock(), createElementBlock("div", _hoisted_4$10, [createElementVNode("input", {
+						}, [__props.multiple ? (openBlock(), createElementBlock("div", _hoisted_4$9, [createElementVNode("input", {
 							type: "checkbox",
-							class: "h-4 w-4 rounded border-neutral-300 text-neutral-900 focus:ring-neutral-900",
+							class: normalizeClass(["h-4 w-4 rounded border-neutral-300 text-neutral-900 focus:ring-neutral-900", props.ui.optionControl]),
 							checked: optionIsSelected(option),
 							disabled: __props.disabled,
 							tabindex: "-1",
 							onClick: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"])),
 							onChange: withModifiers(($event) => toggleMultipleOption(option), ["stop"])
-						}, null, 40, _hoisted_5$8), createElementVNode("span", { style: normalizeStyle(darkTextStyle.value) }, toDisplayString(optionText(option)), 5)])) : (openBlock(), createElementBlock("span", {
+						}, null, 42, _hoisted_5$7), createElementVNode("span", { style: normalizeStyle(darkTextStyle.value) }, toDisplayString(optionText(option)), 5)])) : (openBlock(), createElementBlock("span", {
 							key: 1,
 							style: normalizeStyle(darkTextStyle.value)
-						}, toDisplayString(optionText(option)), 5))], 42, _hoisted_3$13);
+						}, toDisplayString(optionText(option)), 5))], 42, _hoisted_3$12);
 					}), 128))
 				], 2)], 6)) : createCommentVNode("", true)]),
 				_: 1
-			})], 8, ["to"])) : createCommentVNode("", true)], 512);
+			})], 8, ["to"])) : createCommentVNode("", true)], 2);
 		};
 	}
 });
@@ -1615,6 +1662,10 @@ var _sfc_main$26 = {
 		noOptionsText: {
 			type: String,
 			default: "No options available"
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue"],
@@ -1648,6 +1699,7 @@ var _sfc_main$26 = {
 				"search-placeholder": __props.searchPlaceholder,
 				"search-input-class": __props.searchInputClass,
 				"no-options-text": __props.noOptionsText,
+				ui: __props.ui,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event))
 			}, _ctx.$attrs), null, 16, [
 				"model-value",
@@ -1675,14 +1727,15 @@ var _sfc_main$26 = {
 				"searchable",
 				"search-placeholder",
 				"search-input-class",
-				"no-options-text"
+				"no-options-text",
+				"ui"
 			]);
 		};
 	}
 };
 //#endregion
 //#region src/components/DateInput.vue
-var _hoisted_1$28 = [
+var _hoisted_1$25 = [
 	"type",
 	"lang",
 	"max",
@@ -1715,6 +1768,10 @@ var DateInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		disabledClass: {
 			type: String,
 			default: "!border-neutral-200 !bg-neutral-100 !text-neutral-500 dark:!border-neutral-800 dark:!bg-neutral-900 dark:!text-neutral-500"
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue"],
@@ -1739,7 +1796,11 @@ var DateInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			const { class: _class, type: _type, lang: _lang, ...rest } = attrs;
 			return rest;
 		});
-		const inputClasses = computed(() => ["date-input w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-950 shadow-sm outline-none transition-colors focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10", attrs.class]);
+		const inputClasses = computed(() => [
+			"date-input w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-950 shadow-sm outline-none transition-colors focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
+			attrs.class,
+			props.ui.input
+		]);
 		const normalizeDateValue = (rawValue) => {
 			if (typeof rawValue !== "string") return "";
 			return rawValue.replace(/^(\d{4})\d+/, "$1");
@@ -1769,34 +1830,23 @@ var DateInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				disabled: props.disabled,
 				onInput: handleDateInput,
 				onChange: handleDateInput
-			}), null, 16, _hoisted_1$28);
+			}), null, 16, _hoisted_1$25);
 		};
 	}
-}), [["__scopeId", "data-v-c8cee934"]]);
+}), [["__scopeId", "data-v-6342acda"]]);
 //#endregion
 //#region src/components/DateRangeInput.vue
-var _hoisted_1$27 = { class: "relative" };
-var _hoisted_2$18 = {
-	key: 0,
-	class: "text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1 block"
-};
-var _hoisted_3$12 = ["value", "disabled"];
-var _hoisted_4$9 = { class: "p-4" };
-var _hoisted_5$7 = { class: "mb-4 flex items-center justify-between" };
-var _hoisted_6$7 = { class: "text-sm font-medium text-neutral-900 dark:text-neutral-50" };
-var _hoisted_7$7 = { class: "grid grid-cols-7 gap-1 mb-2" };
-var _hoisted_8$5 = { class: "grid grid-cols-7 gap-1" };
-var _hoisted_9$4 = [
+var _hoisted_1$24 = ["value", "disabled"];
+var _hoisted_2$15 = { class: "grid grid-cols-7 gap-1" };
+var _hoisted_3$11 = [
 	"disabled",
 	"onClick",
 	"onMouseenter"
 ];
-var _hoisted_10$4 = { class: "mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-800" };
-var _hoisted_11$4 = { class: "flex items-center justify-between" };
-var _hoisted_12$3 = { class: "text-xs text-neutral-500 dark:text-neutral-400" };
-var _hoisted_13$3 = { key: 0 };
-var _hoisted_14$3 = { key: 1 };
-var _hoisted_15$3 = { key: 2 };
+var _hoisted_4$8 = { class: "flex items-center justify-between" };
+var _hoisted_5$6 = { key: 0 };
+var _hoisted_6$6 = { key: 1 };
+var _hoisted_7$6 = { key: 2 };
 var DateRangeInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
 	__name: "DateRangeInput",
 	props: {
@@ -1842,6 +1892,10 @@ var DateRangeInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		locale: {
 			type: String,
 			default: "en"
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue"],
@@ -1930,7 +1984,11 @@ var DateRangeInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			const daysDiff = Math.ceil((selected - start) / (1e3 * 60 * 60 * 24)) + 1;
 			return daysDiff >= props.minDays && (props.maxDays === null || daysDiff <= props.maxDays);
 		};
-		const inputClasses = computed(() => ["date-range-input w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-950 shadow-sm outline-none transition-colors focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10 cursor-pointer", attrs.class]);
+		const inputClasses = computed(() => [
+			"date-range-input w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-950 shadow-sm outline-none transition-colors focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10 cursor-pointer",
+			attrs.class,
+			props.ui.trigger
+		]);
 		const toggleCalendar = () => {
 			if (!props.disabled) if (isOpen.value) {
 				if (startDate.value && !endDate.value) emit("update:modelValue", {
@@ -2049,8 +2107,11 @@ var DateRangeInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			document.removeEventListener("click", closeCalendar);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$27, [
-				__props.label ? (openBlock(), createElementBlock("label", _hoisted_2$18, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["relative", props.ui.root]) }, [
+				__props.label ? (openBlock(), createElementBlock("label", {
+					key: 0,
+					class: normalizeClass(["text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1 block", props.ui.label])
+				}, toDisplayString(__props.label), 3)) : createCommentVNode("", true),
 				createElementVNode("input", {
 					ref_key: "inputRef",
 					ref: inputRef,
@@ -2059,18 +2120,18 @@ var DateRangeInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 					value: displayText.value,
 					disabled: props.disabled,
 					onClick: toggleCalendar
-				}, null, 10, _hoisted_3$12),
+				}, null, 10, _hoisted_1$24),
 				isOpen.value ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					ref_key: "calendarRef",
 					ref: calendarRef,
-					class: "absolute top-full left-0 z-50 mt-1 w-80 rounded-lg border border-neutral-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-950",
+					class: normalizeClass(["absolute top-full left-0 z-50 mt-1 w-80 rounded-lg border border-neutral-200 bg-white shadow-xl dark:border-neutral-800 dark:bg-neutral-950", props.ui.panel]),
 					onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
-				}, [createElementVNode("div", _hoisted_4$9, [
-					createElementVNode("div", _hoisted_5$7, [
+				}, [createElementVNode("div", { class: normalizeClass(["p-4", props.ui.panelContent]) }, [
+					createElementVNode("div", { class: normalizeClass(["mb-4 flex items-center justify-between", props.ui.header]) }, [
 						createElementVNode("button", {
 							type: "button",
-							class: "p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",
+							class: normalizeClass(["p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors", props.ui.navButton]),
 							onClick: previousMonth
 						}, [..._cache[1] || (_cache[1] = [createElementVNode("svg", {
 							class: "w-4 h-4 text-neutral-600 dark:text-neutral-400",
@@ -2082,11 +2143,11 @@ var DateRangeInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 							"stroke-linejoin": "round",
 							"stroke-width": "2",
 							d: "M15 19l-7-7 7-7"
-						})], -1)])]),
-						createElementVNode("div", _hoisted_6$7, toDisplayString(monthNames.value[currentMonth.value]) + " " + toDisplayString(currentYear.value), 1),
+						})], -1)])], 2),
+						createElementVNode("div", { class: normalizeClass(["text-sm font-medium text-neutral-900 dark:text-neutral-50", props.ui.monthLabel]) }, toDisplayString(monthNames.value[currentMonth.value]) + " " + toDisplayString(currentYear.value), 3),
 						createElementVNode("button", {
 							type: "button",
-							class: "p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",
+							class: normalizeClass(["p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors", props.ui.navButton]),
 							onClick: nextMonth
 						}, [..._cache[2] || (_cache[2] = [createElementVNode("svg", {
 							class: "w-4 h-4 text-neutral-600 dark:text-neutral-400",
@@ -2098,63 +2159,64 @@ var DateRangeInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 							"stroke-linejoin": "round",
 							"stroke-width": "2",
 							d: "M9 5l7 7-7 7"
-						})], -1)])])
-					]),
-					createElementVNode("div", _hoisted_7$7, [(openBlock(true), createElementBlock(Fragment, null, renderList(dayNames.value, (day) => {
+						})], -1)])], 2)
+					], 2),
+					createElementVNode("div", { class: normalizeClass(["grid grid-cols-7 gap-1 mb-2", props.ui.weekdays]) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(dayNames.value, (day) => {
 						return openBlock(), createElementBlock("div", {
 							key: day,
-							class: "text-xs font-medium text-neutral-500 dark:text-neutral-400 text-center py-1"
-						}, toDisplayString(day), 1);
-					}), 128))]),
-					createElementVNode("div", _hoisted_8$5, [(openBlock(true), createElementBlock(Fragment, null, renderList(calendarDays.value, (day) => {
+							class: normalizeClass(["text-xs font-medium text-neutral-500 dark:text-neutral-400 text-center py-1", props.ui.weekday])
+						}, toDisplayString(day), 3);
+					}), 128))], 2),
+					createElementVNode("div", _hoisted_2$15, [(openBlock(true), createElementBlock(Fragment, null, renderList(calendarDays.value, (day) => {
 						return openBlock(), createElementBlock("div", {
 							key: day.date.toISOString(),
 							class: "relative"
 						}, [createElementVNode("button", {
 							type: "button",
-							class: normalizeClass(["w-8 h-8 text-xs rounded transition-colors", {
-								"text-neutral-400 dark:text-neutral-600": !day.isCurrentMonth,
-								"text-neutral-900 dark:text-neutral-50": day.isCurrentMonth && !day.isDisabled,
-								"text-neutral-300 dark:text-neutral-500 cursor-not-allowed": day.isDisabled,
-								"bg-neutral-200 dark:bg-neutral-700": day.isToday && !day.isSelected,
-								"bg-blue-500 text-white hover:bg-blue-600": day.isSelected,
-								"bg-blue-100 dark:bg-blue-900": day.isInRange,
-								"bg-blue-50 dark:bg-blue-950": day.isHoveredInRange,
-								"hover:bg-neutral-100 dark:hover:bg-neutral-800": !day.isDisabled,
-								"rounded-l-full": day.isStartDate && !day.isEndDate,
-								"rounded-r-full": day.isEndDate && !day.isStartDate,
-								"rounded-full": day.isStartDate && day.isEndDate
-							}]),
+							class: normalizeClass([
+								"w-8 h-8 text-xs rounded transition-colors",
+								props.ui.day,
+								day.isToday && !day.isSelected ? props.ui.dayToday : null,
+								day.isDisabled ? props.ui.dayDisabled : null,
+								day.isSelected ? props.ui.daySelected : null,
+								day.isInRange ? props.ui.dayInRange : null,
+								day.isHoveredInRange ? props.ui.dayHovered : null,
+								{
+									"text-neutral-400 dark:text-neutral-600": !day.isCurrentMonth,
+									"text-neutral-900 dark:text-neutral-50": day.isCurrentMonth && !day.isDisabled,
+									"text-neutral-300 dark:text-neutral-500 cursor-not-allowed": day.isDisabled,
+									"bg-neutral-200 dark:bg-neutral-700": day.isToday && !day.isSelected,
+									"bg-blue-500 text-white hover:bg-blue-600": day.isSelected,
+									"bg-blue-100 dark:bg-blue-900": day.isInRange,
+									"bg-blue-50 dark:bg-blue-950": day.isHoveredInRange,
+									"hover:bg-neutral-100 dark:hover:bg-neutral-800": !day.isDisabled,
+									"rounded-l-full": day.isStartDate && !day.isEndDate,
+									"rounded-r-full": day.isEndDate && !day.isStartDate,
+									"rounded-full": day.isStartDate && day.isEndDate
+								}
+							]),
 							disabled: day.isDisabled,
 							onClick: ($event) => selectDate(day.date),
 							onMouseenter: ($event) => handleDateHover(day.date),
 							onMouseleave: handleDateLeave
-						}, toDisplayString(day.date.getDate()), 43, _hoisted_9$4)]);
+						}, toDisplayString(day.date.getDate()), 43, _hoisted_3$11)]);
 					}), 128))]),
-					createElementVNode("div", _hoisted_10$4, [createElementVNode("div", _hoisted_11$4, [createElementVNode("div", _hoisted_12$3, [startDate.value && endDate.value ? (openBlock(), createElementBlock("div", _hoisted_13$3, " Range: " + toDisplayString(daysBetween.value) + " days ", 1)) : startDate.value ? (openBlock(), createElementBlock("div", _hoisted_14$3, " Select end date ")) : (openBlock(), createElementBlock("div", _hoisted_15$3, " Select start date "))]), startDate.value || endDate.value ? (openBlock(), createElementBlock("button", {
+					createElementVNode("div", { class: normalizeClass(["mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-800", props.ui.footer]) }, [createElementVNode("div", _hoisted_4$8, [createElementVNode("div", { class: normalizeClass(["text-xs text-neutral-500 dark:text-neutral-400", props.ui.footerText]) }, [startDate.value && endDate.value ? (openBlock(), createElementBlock("div", _hoisted_5$6, " Range: " + toDisplayString(daysBetween.value) + " days ", 1)) : startDate.value ? (openBlock(), createElementBlock("div", _hoisted_6$6, " Select end date ")) : (openBlock(), createElementBlock("div", _hoisted_7$6, " Select start date "))], 2), startDate.value || endDate.value ? (openBlock(), createElementBlock("button", {
 						key: 0,
 						type: "button",
-						class: "text-xs text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors",
+						class: normalizeClass(["text-xs text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors", props.ui.clearButton]),
 						onClick: clearSelection
-					}, " Clear ")) : createCommentVNode("", true)])])
-				])], 512)) : createCommentVNode("", true)
-			]);
+					}, " Clear ", 2)) : createCommentVNode("", true)])], 2)
+				], 2)], 2)) : createCommentVNode("", true)
+			], 2);
 		};
 	}
-}), [["__scopeId", "data-v-5c96a933"]]);
+}), [["__scopeId", "data-v-bbfd1ca8"]]);
 //#endregion
 //#region src/components/ImageInput.vue
-var _hoisted_1$26 = { class: "relative" };
-var _hoisted_2$17 = { class: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" };
-var _hoisted_3$11 = ["accept"];
-var _hoisted_4$8 = {
-	key: 0,
-	class: "mt-4 rounded-lg border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-800 dark:bg-neutral-900/50"
-};
-var _hoisted_5$6 = { class: "flex items-center space-x-4" };
-var _hoisted_6$6 = ["src"];
-var _hoisted_7$6 = { class: "text-sm font-medium text-neutral-900 dark:text-neutral-50" };
-var _hoisted_8$4 = { class: "text-xs text-neutral-500 dark:text-neutral-200" };
+var _hoisted_1$23 = ["accept"];
+var _hoisted_2$14 = { class: "flex items-center space-x-4" };
+var _hoisted_3$10 = ["src"];
 var _sfc_main$23 = {
 	__name: "ImageInput",
 	props: {
@@ -2177,6 +2239,10 @@ var _sfc_main$23 = {
 		attrs: {
 			type: Object,
 			default: () => ({})
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue"],
@@ -2187,23 +2253,25 @@ var _sfc_main$23 = {
 			emit("update:modelValue", event.target.files?.[0] ?? null);
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", null, [createElementVNode("div", _hoisted_1$26, [createElementVNode("div", _hoisted_2$17, [createVNode(unref(PhotoIcon), { class: "size-5 text-neutral-400 dark:text-neutral-200" })]), createElementVNode("input", mergeProps(__props.attrs, {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(props.ui.root) }, [createElementVNode("div", { class: normalizeClass(["relative", props.ui.inputWrapper]) }, [createElementVNode("div", { class: normalizeClass(["absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", props.ui.leadingIcon]) }, [createVNode(unref(PhotoIcon), { class: "size-5 text-neutral-400 dark:text-neutral-200" })], 2), createElementVNode("input", mergeProps(__props.attrs, {
 				type: "file",
 				accept: __props.accept,
-				class: "block w-full cursor-pointer rounded-lg border border-neutral-200 bg-white py-3 pl-10 pr-4 text-sm text-neutral-700 shadow-sm transition-all duration-200 file:mr-4 file:rounded-md file:border-0 file:bg-neutral-900 file:px-4 file:py-2 file:text-sm file:font-medium file:text-neutral-50 hover:file:bg-neutral-800 focus:border-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-100 dark:file:bg-neutral-800 dark:file:text-neutral-50 dark:hover:file:bg-neutral-700 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
+				class: ["block w-full cursor-pointer rounded-lg border border-neutral-200 bg-white py-3 pl-10 pr-4 text-sm text-neutral-700 shadow-sm transition-all duration-200 file:mr-4 file:rounded-md file:border-0 file:bg-neutral-900 file:px-4 file:py-2 file:text-sm file:font-medium file:text-neutral-50 hover:file:bg-neutral-800 focus:border-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-100 dark:file:bg-neutral-800 dark:file:text-neutral-50 dark:hover:file:bg-neutral-700 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10", props.ui.input],
 				onChange: handleFileChange
-			}), null, 16, _hoisted_3$11)]), props.currentImageUrl ? (openBlock(), createElementBlock("div", _hoisted_4$8, [createElementVNode("div", _hoisted_5$6, [createElementVNode("img", {
+			}), null, 16, _hoisted_1$23)], 2), props.currentImageUrl ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(["mt-4 rounded-lg border border-neutral-200 bg-neutral-50 p-4 dark:border-neutral-800 dark:bg-neutral-900/50", props.ui.previewCard])
+			}, [createElementVNode("div", _hoisted_2$14, [createElementVNode("img", {
 				src: props.currentImageUrl,
 				alt: "Current logo",
-				class: "h-16 w-auto max-w-24 object-contain rounded-lg shadow-sm"
-			}, null, 8, _hoisted_6$6), createElementVNode("div", null, [createElementVNode("p", _hoisted_7$6, toDisplayString(props.currentLabel), 1), createElementVNode("p", _hoisted_8$4, toDisplayString(props.currentSubtext), 1)])])])) : createCommentVNode("", true)]);
+				class: normalizeClass(["h-16 w-auto max-w-24 object-contain rounded-lg shadow-sm", props.ui.previewImage])
+			}, null, 10, _hoisted_3$10), createElementVNode("div", null, [createElementVNode("p", { class: normalizeClass(["text-sm font-medium text-neutral-900 dark:text-neutral-50", props.ui.previewTitle]) }, toDisplayString(props.currentLabel), 3), createElementVNode("p", { class: normalizeClass(["text-xs text-neutral-500 dark:text-neutral-200", props.ui.previewText]) }, toDisplayString(props.currentSubtext), 3)])])], 2)) : createCommentVNode("", true)], 2);
 		};
 	}
 };
 //#endregion
 //#region src/components/NotationInput.vue
-var _hoisted_1$25 = { class: "flex h-12 overflow-hidden rounded-lg border border-neutral-200 bg-white text-sm dark:border-neutral-800 dark:bg-neutral-950" };
-var _hoisted_2$16 = ["disabled", "onClick"];
+var _hoisted_1$22 = ["disabled", "onClick"];
 var _sfc_main$22 = {
 	__name: "NotationInput",
 	props: {
@@ -2222,6 +2290,10 @@ var _sfc_main$22 = {
 		disabled: {
 			type: Boolean,
 			default: false
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue"],
@@ -2234,26 +2306,29 @@ var _sfc_main$22 = {
 		const isSelected = (option) => String(option) === String(props.modelValue ?? "");
 		const selectOption = (option) => emit("update:modelValue", option);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$25, [(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option, idx) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["flex h-12 overflow-hidden rounded-lg border border-neutral-200 bg-white text-sm dark:border-neutral-800 dark:bg-neutral-950", props.ui.root]) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option, idx) => {
 				return openBlock(), createElementBlock("button", {
 					key: `notation-${idx}-${option}`,
 					type: "button",
-					class: normalizeClass(["flex-1 border-l border-neutral-200 px-2 text-center font-semibold transition-colors duration-150 first:border-l-0 dark:border-neutral-800", [
+					class: normalizeClass([
+						"flex-1 border-l border-neutral-200 px-2 text-center font-semibold transition-colors duration-150 first:border-l-0 dark:border-neutral-800",
+						props.ui.option,
 						idx === 0 ? "rounded-l-lg" : "",
 						idx === normalizedOptions.value.length - 1 ? "rounded-r-lg" : "",
 						isSelected(option) ? "bg-neutral-900 text-neutral-50 dark:bg-neutral-800 dark:text-neutral-50" : "bg-white text-neutral-700 hover:bg-neutral-100 dark:bg-neutral-950 dark:text-neutral-100 dark:hover:bg-neutral-900",
-						"focus-visible:ring-2 focus-visible:ring-neutral-900/20 focus-visible:ring-offset-0 dark:focus-visible:ring-neutral-100/20"
-					]]),
+						"focus-visible:ring-2 focus-visible:ring-neutral-900/20 focus-visible:ring-offset-0 dark:focus-visible:ring-neutral-100/20",
+						isSelected(option) ? props.ui.optionSelected : props.ui.optionUnselected
+					]),
 					disabled: __props.disabled,
 					onClick: ($event) => selectOption(option)
-				}, toDisplayString(option), 11, _hoisted_2$16);
-			}), 128))]);
+				}, toDisplayString(option), 11, _hoisted_1$22);
+			}), 128))], 2);
 		};
 	}
 };
 //#endregion
 //#region src/components/RadioInput.vue
-var _hoisted_1$24 = [
+var _hoisted_1$21 = [
 	"name",
 	"value",
 	"checked",
@@ -2290,6 +2365,10 @@ var _sfc_main$21 = {
 		disabled: {
 			type: Boolean,
 			default: false
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue"],
@@ -2306,11 +2385,15 @@ var _sfc_main$21 = {
 		};
 		const onChange = () => emit("update:modelValue", props.value);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("label", { class: normalizeClass(["inline-flex items-center rounded-full border px-3 py-1 text-sm font-medium select-none transition-colors", [
+			return openBlock(), createElementBlock("label", { class: normalizeClass([
+				"inline-flex items-center rounded-full border px-3 py-1 text-sm font-medium select-none transition-colors",
+				props.ui.root,
 				isChecked.value ? "border-neutral-900 bg-neutral-900 text-neutral-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50" : "border-neutral-200 text-neutral-600 dark:border-neutral-800 dark:text-neutral-100",
 				__props.disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer",
-				hasFocus.value && !__props.disabled ? "ring-2 ring-neutral-900/20 ring-offset-2 ring-offset-white dark:ring-neutral-100/20 dark:ring-offset-neutral-950" : ""
-			]]) }, [createElementVNode("input", {
+				hasFocus.value && !__props.disabled ? "ring-2 ring-neutral-900/20 ring-offset-2 ring-offset-white dark:ring-neutral-100/20 dark:ring-offset-neutral-950" : "",
+				isChecked.value ? props.ui.controlChecked : props.ui.controlUnchecked,
+				hasFocus.value && !__props.disabled ? props.ui.focus : ""
+			]) }, [createElementVNode("input", {
 				type: "radio",
 				class: "sr-only",
 				name: __props.name,
@@ -2320,21 +2403,17 @@ var _sfc_main$21 = {
 				onChange,
 				onFocus: handleFocus,
 				onBlur: handleBlur
-			}, null, 40, _hoisted_1$24), createElementVNode("span", null, toDisplayString(isChecked.value ? "✓" : "○") + " " + toDisplayString(__props.label), 1)], 2);
+			}, null, 40, _hoisted_1$21), createElementVNode("span", { class: normalizeClass(props.ui.label) }, [createElementVNode("span", { class: normalizeClass(props.ui.indicator) }, toDisplayString(isChecked.value ? "✓" : "○"), 3), createTextVNode(" " + toDisplayString(__props.label), 1)], 2)], 2);
 		};
 	}
 };
 //#endregion
 //#region src/components/ToggleInput.vue
-var _hoisted_1$23 = [
+var _hoisted_1$20 = [
 	"name",
 	"checked",
 	"disabled"
 ];
-var _hoisted_2$15 = {
-	key: 0,
-	class: "text-sm text-neutral-700 dark:text-neutral-200"
-};
 var _sfc_main$20 = {
 	__name: "ToggleInput",
 	props: {
@@ -2375,6 +2454,10 @@ var _sfc_main$20 = {
 		disabled: {
 			type: Boolean,
 			default: false
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue", "blur"],
@@ -2394,7 +2477,13 @@ var _sfc_main$20 = {
 			emit("update:modelValue", event.target.checked ? props.value : props.uncheckedValue);
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("label", { class: normalizeClass(["inline-flex items-center gap-3 select-none", [__props.disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer", hasFocus.value && !__props.disabled ? "rounded-full ring-2 ring-neutral-900/20 ring-offset-2 ring-offset-white dark:ring-neutral-100/20 dark:ring-offset-neutral-950" : ""]]) }, [
+			return openBlock(), createElementBlock("label", { class: normalizeClass([
+				"inline-flex items-center gap-3 select-none",
+				props.ui.root,
+				__props.disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer",
+				hasFocus.value && !__props.disabled ? "rounded-full ring-2 ring-neutral-900/20 ring-offset-2 ring-offset-white dark:ring-neutral-100/20 dark:ring-offset-neutral-950" : "",
+				hasFocus.value && !__props.disabled ? props.ui.focus : ""
+			]) }, [
 				createElementVNode("input", {
 					type: "checkbox",
 					class: "sr-only",
@@ -2404,19 +2493,30 @@ var _sfc_main$20 = {
 					onChange,
 					onFocus: handleFocus,
 					onBlur: handleBlur
-				}, null, 40, _hoisted_1$23),
+				}, null, 40, _hoisted_1$20),
 				createElementVNode("span", {
 					"aria-hidden": "true",
-					class: normalizeClass(["relative inline-flex h-6 w-11 items-center rounded-full border transition-colors duration-200", [isChecked.value ? "border-neutral-900 bg-neutral-900 dark:border-neutral-100 dark:bg-neutral-100" : "border-neutral-300 bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"]])
-				}, [createElementVNode("span", { class: normalizeClass(["inline-block size-4 rounded-full bg-white shadow-sm transition-transform duration-200 dark:bg-neutral-950", [isChecked.value ? "translate-x-6" : "translate-x-1"]]) }, null, 2)], 2),
-				__props.label ? (openBlock(), createElementBlock("span", _hoisted_2$15, toDisplayString(__props.label), 1)) : createCommentVNode("", true)
+					class: normalizeClass([
+						"relative inline-flex h-6 w-11 items-center rounded-full border transition-colors duration-200",
+						props.ui.control,
+						isChecked.value ? "border-neutral-900 bg-neutral-900 dark:border-neutral-100 dark:bg-neutral-100" : "border-neutral-300 bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800",
+						isChecked.value ? props.ui.controlChecked : props.ui.controlUnchecked
+					])
+				}, [createElementVNode("span", { class: normalizeClass([
+					"inline-block size-4 rounded-full bg-white shadow-sm transition-transform duration-200 dark:bg-neutral-950",
+					props.ui.indicator,
+					isChecked.value ? "translate-x-6" : "translate-x-1"
+				]) }, null, 2)], 2),
+				__props.label ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(["text-sm text-neutral-700 dark:text-neutral-200", props.ui.label])
+				}, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
 			], 2);
 		};
 	}
 };
 //#endregion
 //#region src/components/RadioMultipleInput.vue
-var _hoisted_1$22 = { class: "flex flex-wrap gap-3" };
 var _sfc_main$19 = {
 	__name: "RadioMultipleInput",
 	props: {
@@ -2439,6 +2539,10 @@ var _sfc_main$19 = {
 		disabled: {
 			type: Boolean,
 			default: false
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue"],
@@ -2450,7 +2554,7 @@ var _sfc_main$19 = {
 		});
 		const selectOption = (option) => emit("update:modelValue", option);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$22, [(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["flex flex-wrap gap-3", props.ui.group]) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option) => {
 				return openBlock(), createBlock(_sfc_main$16, {
 					key: `radio-${__props.name ?? "group"}-${option}`,
 					type: "radio-input",
@@ -2459,24 +2563,22 @@ var _sfc_main$19 = {
 					value: option,
 					label: option,
 					disabled: __props.disabled,
+					ui: props.ui.item ?? props.ui,
 					"onUpdate:modelValue": selectOption
 				}, null, 8, [
 					"model-value",
 					"name",
 					"value",
 					"label",
-					"disabled"
+					"disabled",
+					"ui"
 				]);
-			}), 128))]);
+			}), 128))], 2);
 		};
 	}
 };
 //#endregion
 //#region src/components/TinyEditor.vue
-var _hoisted_1$21 = {
-	key: 0,
-	class: "min-h-[12rem] w-full rounded-lg border border-slate-300 bg-slate-50"
-};
 var _sfc_main$18 = {
 	__name: "TinyEditor",
 	props: {
@@ -2521,6 +2623,10 @@ var _sfc_main$18 = {
 		outputFormat: {
 			type: String,
 			default: "html"
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: [
@@ -2550,18 +2656,18 @@ var _sfc_main$18 = {
 			});
 		};
 		const loadTinyMce = async () => {
-			const tinymceModule = await import("./tinymce-DQF9Ibks.js").then((m) => /* @__PURE__ */ __toESM(m.default));
+			const tinymceModule = await import("./tinymce-jnDxhM7R.js").then((m) => /* @__PURE__ */ __toESM(m.default));
 			const tinymce = tinymceModule.default ?? tinymceModule;
 			if (typeof globalThis !== "undefined" && !globalThis.tinymce) globalThis.tinymce = tinymce;
 			await Promise.all([
-				import("./dom-DNRnXSoJ.js"),
-				import("./default-CIJCtYmL.js"),
-				import("./silver-DMBzT-QW.js"),
-				import("./code-Ber986DY.js"),
-				import("./image-BBEGvs_X.js"),
-				import("./link-BCKWs7cm.js"),
-				import("./lists-DO3bIHZE.js"),
-				import("./table-CAjD5lLC.js")
+				import("./dom-C2b0-qGe.js"),
+				import("./default-CVpB4VJr.js"),
+				import("./silver-Bhae9sxf.js"),
+				import("./code-CNAjpGRK.js"),
+				import("./image-CA5S43dI.js"),
+				import("./link-DmWIj_-A.js"),
+				import("./lists-eNzbNL4I.js"),
+				import("./table-DFnvpjbb.js")
 			]);
 			isEditorReady.value = true;
 		};
@@ -2640,10 +2746,17 @@ var _sfc_main$18 = {
 			}
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { key: editorKey.value }, [!isEditorReady.value ? (openBlock(), createElementBlock("div", _hoisted_1$21)) : (openBlock(), createBlock(unref(Editor), {
+			return openBlock(), createElementBlock("div", {
+				key: editorKey.value,
+				class: normalizeClass(props.ui.root)
+			}, [!isEditorReady.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(["min-h-[12rem] w-full rounded-lg border border-slate-300 bg-slate-50", props.ui.container])
+			}, null, 2)) : (openBlock(), createBlock(unref(Editor), {
 				key: 1,
 				ref_key: "editorComponentRef",
 				ref: editorComponentRef,
+				class: normalizeClass([props.ui.container, props.ui.editorFrame]),
 				"initial-value": content.value,
 				"license-key": __props.licenseKey,
 				readonly: __props.readonly,
@@ -2653,72 +2766,63 @@ var _sfc_main$18 = {
 				onInput: handleEditorInput,
 				onBlur: handleEditorBlur
 			}, null, 8, [
+				"class",
 				"initial-value",
 				"license-key",
 				"readonly",
 				"output-format",
 				"init"
-			]))]);
+			]))], 2);
 		};
 	}
 };
 //#endregion
 //#region src/components/ColorPicker.vue
-var _hoisted_1$20 = { class: "relative w-full" };
-var _hoisted_2$14 = [
+var _hoisted_1$19 = [
 	"name",
 	"value",
 	"disabled",
 	"required"
 ];
-var _hoisted_3$10 = ["disabled", "aria-expanded"];
-var _hoisted_4$7 = { class: "color-picker-checker relative inline-flex size-10 shrink-0 overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-700" };
+var _hoisted_2$13 = ["disabled", "aria-expanded"];
+var _hoisted_3$9 = { class: "min-w-0 flex-1" };
+var _hoisted_4$7 = { class: "flex items-start gap-3" };
 var _hoisted_5$5 = { class: "min-w-0 flex-1" };
-var _hoisted_6$5 = { class: "block text-xs font-medium uppercase tracking-[0.16em] text-neutral-500 dark:text-neutral-400" };
-var _hoisted_7$5 = { class: "block truncate font-mono text-sm text-neutral-900 dark:text-neutral-50" };
-var _hoisted_8$3 = { class: "rounded-2xl border border-neutral-200 bg-white/96 p-4 shadow-2xl shadow-neutral-950/12 backdrop-blur dark:border-neutral-800 dark:bg-neutral-950/96 dark:shadow-black/30" };
-var _hoisted_9$3 = { class: "flex items-start gap-3" };
-var _hoisted_10$3 = { class: "color-picker-checker relative size-14 shrink-0 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700" };
-var _hoisted_11$3 = { class: "min-w-0 flex-1" };
-var _hoisted_12$2 = { class: "text-xs font-medium uppercase tracking-[0.16em] text-neutral-500 dark:text-neutral-400" };
-var _hoisted_13$2 = { class: "truncate font-mono text-base text-neutral-900 dark:text-neutral-50" };
-var _hoisted_14$2 = ["disabled", "aria-label"];
-var _hoisted_15$2 = { class: "mt-4 space-y-4" };
-var _hoisted_16$1 = ["aria-label", "aria-valuenow"];
-var _hoisted_17$1 = {
+var _hoisted_6$5 = ["disabled", "aria-label"];
+var _hoisted_7$5 = { class: "mt-4 space-y-4" };
+var _hoisted_8$3 = ["aria-label", "aria-valuenow"];
+var _hoisted_9$3 = {
 	key: 0,
 	class: "absolute inset-0 bg-[linear-gradient(to_right,#fff,transparent)]"
 };
-var _hoisted_18$1 = {
+var _hoisted_10$3 = {
 	key: 2,
 	class: "absolute inset-0 bg-[linear-gradient(to_top,#000,transparent)]"
 };
-var _hoisted_19 = { class: "space-y-3" };
-var _hoisted_20 = {
+var _hoisted_11$3 = { class: "space-y-3" };
+var _hoisted_12$2 = {
 	key: 0,
 	class: "space-y-2"
 };
-var _hoisted_21 = { class: "flex items-center justify-between text-xs font-medium text-neutral-500 dark:text-neutral-400" };
-var _hoisted_22 = ["for"];
-var _hoisted_23 = [
+var _hoisted_13$2 = ["for"];
+var _hoisted_14$2 = [
 	"id",
 	"disabled",
 	"value"
 ];
-var _hoisted_24 = {
+var _hoisted_15$2 = {
 	key: 1,
 	class: "space-y-2"
 };
-var _hoisted_25 = { class: "flex items-center justify-between text-xs font-medium text-neutral-500 dark:text-neutral-400" };
-var _hoisted_26 = ["for"];
-var _hoisted_27 = [
+var _hoisted_16$1 = ["for"];
+var _hoisted_17$1 = [
 	"id",
 	"disabled",
 	"value"
 ];
-var _hoisted_28 = { class: "space-y-2" };
-var _hoisted_29 = ["for"];
-var _hoisted_30 = [
+var _hoisted_18$1 = { class: "space-y-2" };
+var _hoisted_19 = ["for"];
+var _hoisted_20 = [
 	"id",
 	"maxlength",
 	"placeholder",
@@ -2751,6 +2855,10 @@ var ColorPicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		variant: {
 			type: String,
 			default: "classic"
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue", "blur"],
@@ -2946,7 +3054,8 @@ var ColorPicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		const triggerClasses = computed(() => [
 			"group flex w-full items-center gap-3 rounded-lg border border-neutral-200 bg-white px-3 py-3 text-left text-sm text-neutral-950 shadow-sm outline-none transition-colors focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
 			attrs.class,
-			props.disabled ? props.disabledClass : ""
+			props.disabled ? props.disabledClass : "",
+			props.ui.trigger
 		]);
 		const hiddenInputRequired = computed(() => Boolean(attrs.required) && !props.disabled);
 		const hexInputPlaceholder = computed(() => props.allowAlpha ? "#RRGGBBAA" : "#RRGGBB");
@@ -3171,7 +3280,7 @@ var ColorPicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		});
 		__expose({ focus: () => triggerRef.value?.focus() });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$20, [
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["relative w-full", props.ui.root]) }, [
 				fieldName.value ? (openBlock(), createElementBlock("input", {
 					key: 0,
 					type: "hidden",
@@ -3179,7 +3288,7 @@ var ColorPicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 					value: emittedValue.value,
 					disabled: props.disabled,
 					required: hiddenInputRequired.value
-				}, null, 8, _hoisted_2$14)) : createCommentVNode("", true),
+				}, null, 8, _hoisted_1$19)) : createCommentVNode("", true),
 				createElementVNode("button", mergeProps({
 					ref_key: "triggerRef",
 					ref: triggerRef
@@ -3191,13 +3300,17 @@ var ColorPicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 					"aria-haspopup": "dialog",
 					onClick: togglePanel
 				}), [
-					createElementVNode("span", _hoisted_4$7, [createElementVNode("span", {
+					createElementVNode("span", { class: normalizeClass(["color-picker-checker relative inline-flex size-10 shrink-0 overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-700", props.ui.swatch]) }, [createElementVNode("span", {
 						class: "absolute inset-0",
 						style: normalizeStyle({ backgroundColor: swatchColor.value })
-					}, null, 4)]),
-					createElementVNode("span", _hoisted_5$5, [createElementVNode("span", _hoisted_6$5, toDisplayString(unref(t)("Color")), 1), createElementVNode("span", _hoisted_7$5, toDisplayString(emittedValue.value), 1)]),
-					createVNode(unref(ChevronDownIcon), { class: normalizeClass(["size-4 shrink-0 text-neutral-400 transition-transform dark:text-neutral-500", isOpen.value ? "rotate-180" : ""]) }, null, 8, ["class"])
-				], 16, _hoisted_3$10),
+					}, null, 4)], 2),
+					createElementVNode("span", _hoisted_3$9, [createElementVNode("span", { class: normalizeClass(["block text-xs font-medium uppercase tracking-[0.16em] text-neutral-500 dark:text-neutral-400", props.ui.sectionLabel]) }, toDisplayString(unref(t)("Color")), 3), createElementVNode("span", { class: normalizeClass(["block truncate font-mono text-sm text-neutral-900 dark:text-neutral-50", props.ui.value]) }, toDisplayString(emittedValue.value), 3)]),
+					createVNode(unref(ChevronDownIcon), { class: normalizeClass([
+						"size-4 shrink-0 text-neutral-400 transition-transform dark:text-neutral-500",
+						isOpen.value ? "rotate-180" : "",
+						props.ui.chevron
+					]) }, null, 8, ["class"])
+				], 16, _hoisted_2$13),
 				(openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, {
 					"enter-active-class": "transition duration-150 ease-out",
 					"enter-from-class": "opacity-0 translate-y-1",
@@ -3210,27 +3323,31 @@ var ColorPicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 						key: 0,
 						ref_key: "panelRef",
 						ref: panelRef,
-						class: "z-50",
+						class: normalizeClass(["z-50", props.ui.panelRoot]),
 						style: normalizeStyle(panelStyle.value)
-					}, [createElementVNode("div", _hoisted_8$3, [createElementVNode("div", _hoisted_9$3, [
-						createElementVNode("div", _hoisted_10$3, [createElementVNode("span", {
+					}, [createElementVNode("div", { class: normalizeClass(["rounded-2xl border border-neutral-200 bg-white/96 p-4 shadow-2xl shadow-neutral-950/12 backdrop-blur dark:border-neutral-800 dark:bg-neutral-950/96 dark:shadow-black/30", props.ui.panel]) }, [createElementVNode("div", _hoisted_4$7, [
+						createElementVNode("div", { class: normalizeClass(["color-picker-checker relative size-14 shrink-0 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700", props.ui.previewSwatch]) }, [createElementVNode("span", {
 							class: "absolute inset-0",
 							style: normalizeStyle({ backgroundColor: swatchColor.value })
-						}, null, 4)]),
-						createElementVNode("div", _hoisted_11$3, [createElementVNode("p", _hoisted_12$2, toDisplayString(unref(t)("Selected color")), 1), createElementVNode("p", _hoisted_13$2, toDisplayString(emittedValue.value), 1)]),
+						}, null, 4)], 2),
+						createElementVNode("div", _hoisted_5$5, [createElementVNode("p", { class: normalizeClass(["text-xs font-medium uppercase tracking-[0.16em] text-neutral-500 dark:text-neutral-400", props.ui.sectionLabel]) }, toDisplayString(unref(t)("Selected color")), 3), createElementVNode("p", { class: normalizeClass(["truncate font-mono text-base text-neutral-900 dark:text-neutral-50", props.ui.value]) }, toDisplayString(emittedValue.value), 3)]),
 						supportsEyeDropper.value ? (openBlock(), createElementBlock("button", {
 							key: 0,
 							type: "button",
-							class: normalizeClass(["inline-flex size-10 items-center justify-center rounded-xl border border-neutral-200 text-neutral-600 transition-colors hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-900 dark:focus:ring-neutral-100/10", props.disabled ? "cursor-not-allowed opacity-50" : ""]),
+							class: normalizeClass([
+								"inline-flex size-10 items-center justify-center rounded-xl border border-neutral-200 text-neutral-600 transition-colors hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-900 dark:focus:ring-neutral-100/10",
+								props.disabled ? "cursor-not-allowed opacity-50" : "",
+								props.ui.eyedropperButton
+							]),
 							disabled: props.disabled,
 							"aria-label": unref(t)("Pick color from screen"),
 							onClick: pickFromScreen
-						}, [createVNode(unref(EyeDropperIcon), { class: "size-5" })], 10, _hoisted_14$2)) : createCommentVNode("", true)
-					]), createElementVNode("div", _hoisted_15$2, [
+						}, [createVNode(unref(EyeDropperIcon), { class: "size-5" })], 10, _hoisted_6$5)) : createCommentVNode("", true)
+					]), createElementVNode("div", _hoisted_7$5, [
 						createElementVNode("div", {
 							ref_key: "saturationRef",
 							ref: saturationRef,
-							class: "relative h-48 cursor-crosshair overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800",
+							class: normalizeClass(["relative h-48 cursor-crosshair overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800", props.ui.saturationArea]),
 							style: normalizeStyle(saturationAreaStyle.value),
 							tabindex: "0",
 							role: "slider",
@@ -3241,40 +3358,40 @@ var ColorPicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 							onPointerdown: _cache[0] || (_cache[0] = ($event) => beginDrag($event, updateFromSaturationPointer)),
 							onKeydown: updateFromSaturationKey
 						}, [
-							!isRainbowVariant.value ? (openBlock(), createElementBlock("div", _hoisted_17$1)) : createCommentVNode("", true),
-							isRainbowVariant.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [_cache[1] || (_cache[1] = createElementVNode("div", { class: "absolute inset-x-0 top-0 h-1/2 bg-[linear-gradient(to_bottom,#fff,transparent)]" }, null, -1)), _cache[2] || (_cache[2] = createElementVNode("div", { class: "absolute inset-x-0 bottom-0 h-1/2 bg-[linear-gradient(to_bottom,transparent,#000)]" }, null, -1))], 64)) : (openBlock(), createElementBlock("div", _hoisted_18$1)),
+							!isRainbowVariant.value ? (openBlock(), createElementBlock("div", _hoisted_9$3)) : createCommentVNode("", true),
+							isRainbowVariant.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [_cache[1] || (_cache[1] = createElementVNode("div", { class: "absolute inset-x-0 top-0 h-1/2 bg-[linear-gradient(to_bottom,#fff,transparent)]" }, null, -1)), _cache[2] || (_cache[2] = createElementVNode("div", { class: "absolute inset-x-0 bottom-0 h-1/2 bg-[linear-gradient(to_bottom,transparent,#000)]" }, null, -1))], 64)) : (openBlock(), createElementBlock("div", _hoisted_10$3)),
 							createElementVNode("span", {
-								class: "pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.3)]",
+								class: normalizeClass(["pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.3)]", props.ui.saturationHandle]),
 								style: normalizeStyle(saturationHandleStyle.value)
-							}, null, 4)
-						], 44, _hoisted_16$1),
-						createElementVNode("div", _hoisted_19, [!isRainbowVariant.value ? (openBlock(), createElementBlock("div", _hoisted_20, [createElementVNode("div", _hoisted_21, [createElementVNode("label", { for: fieldId.value ? `${fieldId.value}-hue` : void 0 }, toDisplayString(unref(t)("Hue")), 9, _hoisted_22), createElementVNode("span", null, toDisplayString(Math.round(hue.value)) + "°", 1)]), createElementVNode("input", {
+							}, null, 6)
+						], 46, _hoisted_8$3),
+						createElementVNode("div", _hoisted_11$3, [!isRainbowVariant.value ? (openBlock(), createElementBlock("div", _hoisted_12$2, [createElementVNode("div", { class: normalizeClass(["flex items-center justify-between text-xs font-medium text-neutral-500 dark:text-neutral-400", props.ui.sectionLabel]) }, [createElementVNode("label", { for: fieldId.value ? `${fieldId.value}-hue` : void 0 }, toDisplayString(unref(t)("Hue")), 9, _hoisted_13$2), createElementVNode("span", null, toDisplayString(Math.round(hue.value)) + "°", 1)], 2), createElementVNode("input", {
 							id: fieldId.value ? `${fieldId.value}-hue` : void 0,
 							type: "range",
 							min: "0",
 							max: "360",
 							step: "1",
-							class: "color-picker-range",
+							class: normalizeClass(["color-picker-range", props.ui.range]),
 							disabled: props.disabled,
 							value: hue.value,
 							style: { "background": "linear-gradient(90deg, #FF0000 0%, #FFFF00 17%, #00FF00 33%, #00FFFF 50%, #0000FF 67%, #FF00FF 83%, #FF0000 100%)" },
 							onInput: handleHueInput
-						}, null, 40, _hoisted_23)])) : createCommentVNode("", true), props.allowAlpha ? (openBlock(), createElementBlock("div", _hoisted_24, [createElementVNode("div", _hoisted_25, [createElementVNode("label", { for: fieldId.value ? `${fieldId.value}-alpha` : void 0 }, toDisplayString(unref(t)("Opacity")), 9, _hoisted_26), createElementVNode("span", null, toDisplayString(opacityPercent.value) + "%", 1)]), createElementVNode("input", {
+						}, null, 42, _hoisted_14$2)])) : createCommentVNode("", true), props.allowAlpha ? (openBlock(), createElementBlock("div", _hoisted_15$2, [createElementVNode("div", { class: normalizeClass(["flex items-center justify-between text-xs font-medium text-neutral-500 dark:text-neutral-400", props.ui.sectionLabel]) }, [createElementVNode("label", { for: fieldId.value ? `${fieldId.value}-alpha` : void 0 }, toDisplayString(unref(t)("Opacity")), 9, _hoisted_16$1), createElementVNode("span", null, toDisplayString(opacityPercent.value) + "%", 1)], 2), createElementVNode("input", {
 							id: fieldId.value ? `${fieldId.value}-alpha` : void 0,
 							type: "range",
 							min: "0",
 							max: "100",
 							step: "1",
-							class: "color-picker-range",
+							class: normalizeClass(["color-picker-range", props.ui.range]),
 							disabled: props.disabled,
 							value: opacityPercent.value,
 							style: normalizeStyle({ background: alphaGradient.value }),
 							onInput: handleAlphaInput
-						}, null, 44, _hoisted_27)])) : createCommentVNode("", true)]),
-						createElementVNode("div", _hoisted_28, [createElementVNode("label", {
+						}, null, 46, _hoisted_17$1)])) : createCommentVNode("", true)]),
+						createElementVNode("div", _hoisted_18$1, [createElementVNode("label", {
 							for: fieldId.value ? `${fieldId.value}-hex` : void 0,
-							class: "text-xs font-medium uppercase tracking-[0.16em] text-neutral-500 dark:text-neutral-400"
-						}, toDisplayString(unref(t)("Hex value")), 9, _hoisted_29), createElementVNode("input", {
+							class: normalizeClass(["text-xs font-medium uppercase tracking-[0.16em] text-neutral-500 dark:text-neutral-400", props.ui.sectionLabel])
+						}, toDisplayString(unref(t)("Hex value")), 11, _hoisted_19), createElementVNode("input", {
 							id: fieldId.value ? `${fieldId.value}-hex` : void 0,
 							ref_key: "hexInputRef",
 							ref: hexInputRef,
@@ -3284,31 +3401,27 @@ var ColorPicker_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 							autocapitalize: "characters",
 							maxlength: props.allowAlpha ? 9 : 7,
 							placeholder: hexInputPlaceholder.value,
-							class: "w-full rounded-xl border border-neutral-200 bg-white px-3 py-2.5 font-mono text-sm text-neutral-950 shadow-sm outline-none transition-colors focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
+							class: normalizeClass(["w-full rounded-xl border border-neutral-200 bg-white px-3 py-2.5 font-mono text-sm text-neutral-950 shadow-sm outline-none transition-colors focus:border-neutral-900 focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10", props.ui.hexInput]),
 							value: displayValue.value,
 							disabled: props.disabled,
 							onInput: handleHexInput,
 							onBlur: handleHexBlur
-						}, null, 40, _hoisted_30)])
-					])])], 4)) : createCommentVNode("", true)]),
+						}, null, 42, _hoisted_20)])
+					])], 2)], 6)) : createCommentVNode("", true)]),
 					_: 1
 				})]))
-			]);
+			], 2);
 		};
 	}
-}), [["__scopeId", "data-v-7d6915fa"]]);
+}), [["__scopeId", "data-v-ace35bd9"]]);
 //#endregion
 //#region src/components/InputGroup.vue
-var _hoisted_1$19 = ["for"];
-var _hoisted_2$13 = {
-	key: 1,
-	class: "text-xs text-gray-500 mb-1 block"
-};
-var _hoisted_3$9 = {
-	key: 18,
-	class: "flex items-center mt-2 text-sm text-red-600"
-};
+var _hoisted_1$18 = ["for"];
 var defaultFieldClass = "block w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-950 placeholder:text-neutral-400 shadow-sm transition-all duration-200 focus:border-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:placeholder:text-neutral-500 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10";
+var defaultLabelClass = "mb-1 block text-base font-semibold text-gray-900 dark:text-gray-50";
+var defaultHelperTextClass = "mb-1 block text-xs text-gray-500";
+var defaultErrorClass = "mt-2 flex items-center text-sm text-red-600";
+var defaultErrorIconClass = "mr-1 h-4 w-4 flex-shrink-0";
 var _sfc_main$16 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 	__name: "InputGroup",
 	props: {
@@ -3549,6 +3662,58 @@ var _sfc_main$16 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 		noOptionsText: {
 			type: String,
 			default: void 0
+		},
+		rootClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: void 0
+		},
+		labelClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: void 0
+		},
+		helperTextClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: void 0
+		},
+		errorClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: void 0
+		},
+		errorIconClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: void 0
+		},
+		errorTextClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: void 0
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue", "blur"],
@@ -3557,6 +3722,12 @@ var _sfc_main$16 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 		const emit = __emit;
 		const attrs = useAttrs();
 		const updateValue = (value) => emit("update:modelValue", value);
+		const onUpdateModelValue = (value) => emit("update:modelValue", value);
+		const onBlur = (event) => emit("blur", event);
+		const fieldListeners = {
+			"update:modelValue": onUpdateModelValue,
+			blur: onBlur
+		};
 		const hasError = computed(() => Boolean(props.errorMessage));
 		const showsInlineChoiceControl = computed(() => isCheckboxSingleType.value || isRadioSingleType.value || isToggleSingleType.value);
 		const fieldId = computed(() => {
@@ -3598,7 +3769,8 @@ var _sfc_main$16 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 			name: props.name,
 			modelValue: props.modelValue,
 			disabled: props.disabled,
-			disabledClass: props.disabledClass
+			disabledClass: props.disabledClass,
+			ui: props.ui
 		}));
 		const textAreaBindings = computed(() => ({
 			...attrs,
@@ -3606,7 +3778,8 @@ var _sfc_main$16 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 			name: props.name,
 			modelValue: props.modelValue,
 			disabled: props.disabled,
-			disabledClass: props.disabledClass
+			disabledClass: props.disabledClass,
+			ui: props.ui
 		}));
 		const dateBindings = computed(() => ({
 			...attrs,
@@ -3616,7 +3789,8 @@ var _sfc_main$16 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 			locale: props.locale,
 			withTimestamp: props.type === "datetime-local" || props.withTimestamp,
 			disabled: props.disabled,
-			disabledClass: props.disabledClass
+			disabledClass: props.disabledClass,
+			ui: props.ui
 		}));
 		const selectBindings = computed(() => {
 			const inputProps = {
@@ -3634,7 +3808,8 @@ var _sfc_main$16 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 				labelKey: props.labelKey,
 				valueKey: props.valueKey,
 				deletedKey: props.deletedKey,
-				optionLabel: props.optionLabel
+				optionLabel: props.optionLabel,
+				ui: props.ui
 			};
 			if (props.baseClass !== void 0) inputProps.baseClass = props.baseClass;
 			if (props.normalTextClass !== void 0) inputProps.normalTextClass = props.normalTextClass;
@@ -3654,42 +3829,48 @@ var _sfc_main$16 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 			name: props.name,
 			modelValue: props.modelValue,
 			options: props.options,
-			disabled: props.disabled
+			disabled: props.disabled,
+			ui: props.ui
 		}));
 		const checkboxBindings = computed(() => ({
 			...attrs,
 			name: props.name,
 			modelValue: props.modelValue,
 			options: props.options,
-			disabled: props.disabled
+			disabled: props.disabled,
+			ui: props.ui
 		}));
 		const radioBindings = computed(() => ({
 			...attrs,
 			modelValue: props.modelValue,
 			options: props.options,
 			name: props.name ?? attrs.name,
-			disabled: props.disabled
+			disabled: props.disabled,
+			ui: props.ui
 		}));
 		const checkboxSingleBindings = computed(() => ({
 			...attrs,
 			name: props.name,
 			modelValue: props.modelValue,
 			label: props.label || attrs.label || "",
-			disabled: props.disabled
+			disabled: props.disabled,
+			ui: props.ui
 		}));
 		const radioSingleBindings = computed(() => ({
 			...attrs,
 			modelValue: props.modelValue,
 			label: props.label || attrs.label || "",
 			name: props.name ?? attrs.name,
-			disabled: props.disabled
+			disabled: props.disabled,
+			ui: props.ui
 		}));
 		const toggleSingleBindings = computed(() => ({
 			...attrs,
 			name: props.name,
 			modelValue: props.modelValue,
 			label: props.label || attrs.label || "",
-			disabled: props.disabled
+			disabled: props.disabled,
+			ui: props.ui
 		}));
 		const imageBindings = computed(() => {
 			return {
@@ -3698,7 +3879,8 @@ var _sfc_main$16 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 				modelValue: props.modelValue,
 				currentImageUrl: props.currentImageUrl,
 				currentLabel: props.currentLabel,
-				currentSubtext: props.currentSubtext
+				currentSubtext: props.currentSubtext,
+				ui: props.ui
 			};
 		});
 		const tinyEditorBindings = computed(() => {
@@ -3709,7 +3891,8 @@ var _sfc_main$16 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 				height: props.height,
 				menubar: props.menubar,
 				licenseKey: props.licenseKey,
-				outputFormat: props.outputFormat
+				outputFormat: props.outputFormat,
+				ui: props.ui
 			};
 			if (props.toolbar !== void 0) inputProps.toolbar = props.toolbar;
 			if (props.plugins !== void 0) inputProps.plugins = props.plugins;
@@ -3729,7 +3912,8 @@ var _sfc_main$16 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 			endLabel: props.endLabel,
 			locale: props.locale,
 			disabled: props.disabled,
-			disabledClass: props.disabledClass
+			disabledClass: props.disabledClass,
+			ui: props.ui
 		}));
 		const colorPickerBindings = computed(() => ({
 			...attrs,
@@ -3739,83 +3923,107 @@ var _sfc_main$16 = /*@__PURE__*/ Object.assign({ inheritAttrs: false }, {
 			disabled: props.disabled,
 			disabledClass: props.disabledClass,
 			allowAlpha: props.allowAlpha,
-			variant: props.variant
+			variant: props.variant,
+			ui: props.ui
 		}));
+		const resolvedFieldComponent = computed(() => {
+			if (isTextareaType.value) return _sfc_main$28;
+			if (isTinyEditorType.value) return _sfc_main$18;
+			if (isColorPickerType.value) return ColorPicker_default;
+			if (isSelectType.value) return _sfc_main$26;
+			if (isDateType.value) return DateInput_default;
+			if (isDateRangeType.value) return DateRangeInput_default;
+			if (isTextLikeType.value) return _sfc_main$29;
+			if (isImageType.value) return _sfc_main$23;
+			if (isCheckboxSingleType.value) return _sfc_main$30;
+			if (isRadioSingleType.value) return _sfc_main$21;
+			if (isToggleSingleType.value) return _sfc_main$20;
+			if (isNotationType.value) return _sfc_main$22;
+			if (isCheckboxType.value) return _sfc_main$15;
+			if (isRadioType.value) return _sfc_main$19;
+			return null;
+		});
+		const resolvedFieldBindings = computed(() => {
+			if (isTextareaType.value) return textAreaBindings.value;
+			if (isTinyEditorType.value) return tinyEditorBindings.value;
+			if (isColorPickerType.value) return colorPickerBindings.value;
+			if (isSelectType.value) return selectBindings.value;
+			if (isDateType.value) return dateBindings.value;
+			if (isDateRangeType.value) return dateRangeBindings.value;
+			if (isTextLikeType.value) return textInputBindings.value;
+			if (isImageType.value) return imageBindings.value;
+			if (isCheckboxSingleType.value) return checkboxSingleBindings.value;
+			if (isRadioSingleType.value) return radioSingleBindings.value;
+			if (isToggleSingleType.value) return toggleSingleBindings.value;
+			if (isNotationType.value) return notationBindings.value;
+			if (isCheckboxType.value) return checkboxBindings.value;
+			if (isRadioType.value) return radioBindings.value;
+			return {};
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", null, [
+			return openBlock(), createElementBlock("div", { class: normalizeClass(__props.rootClass) }, [renderSlot(_ctx.$slots, "wrapper", {
+				fieldId: fieldId.value,
+				label: __props.label,
+				helperText: __props.helperText,
+				errorMessage: __props.errorMessage,
+				hasError: hasError.value,
+				showsInlineChoiceControl: showsInlineChoiceControl.value,
+				fieldComponent: resolvedFieldComponent.value,
+				fieldBindings: resolvedFieldBindings.value,
+				fieldListeners,
+				onUpdateModelValue,
+				onBlur,
+				labelClass: props.labelClass ?? defaultLabelClass,
+				helperTextClass: props.helperTextClass ?? defaultHelperTextClass,
+				errorClass: props.errorClass ?? defaultErrorClass,
+				errorIconClass: props.errorIconClass ?? defaultErrorIconClass,
+				errorTextClass: props.errorTextClass,
+				type: __props.type,
+				modelValue: __props.modelValue,
+				updateValue,
+				attrs: unref(attrs)
+			}, () => [
 				!showsInlineChoiceControl.value && (_ctx.$slots.label || __props.label) ? renderSlot(_ctx.$slots, "label", {
 					key: 0,
 					label: __props.label,
-					for: fieldId.value
+					for: fieldId.value,
+					labelClass: props.labelClass ?? defaultLabelClass
 				}, () => [__props.label ? (openBlock(), createElementBlock("label", {
 					key: 0,
 					for: fieldId.value,
-					class: "text-base font-semibold text-gray-900 dark:text-gray-50 mb-1 block"
-				}, toDisplayString(__props.label), 9, _hoisted_1$19)) : createCommentVNode("", true)]) : createCommentVNode("", true),
-				__props.helperText && !showsInlineChoiceControl.value ? (openBlock(), createElementBlock("span", _hoisted_2$13, toDisplayString(__props.helperText), 1)) : createCommentVNode("", true),
-				isTextareaType.value ? (openBlock(), createBlock(_sfc_main$28, mergeProps({ key: 2 }, textAreaBindings.value, {
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event)),
-					onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event))
-				}), null, 16)) : isTinyEditorType.value ? (openBlock(), createBlock(_sfc_main$18, mergeProps({ key: 3 }, tinyEditorBindings.value, {
-					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => emit("update:modelValue", $event)),
-					onBlur: _cache[3] || (_cache[3] = ($event) => emit("blur", $event))
-				}), null, 16)) : isColorPickerType.value ? (openBlock(), createBlock(ColorPicker_default, mergeProps({ key: 4 }, colorPickerBindings.value, {
-					"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => emit("update:modelValue", $event)),
-					onBlur: _cache[5] || (_cache[5] = ($event) => emit("blur", $event))
-				}), null, 16)) : isSelectType.value ? (openBlock(), createBlock(_sfc_main$26, mergeProps({ key: 5 }, selectBindings.value, {
-					"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => emit("update:modelValue", $event)),
-					onBlur: _cache[7] || (_cache[7] = ($event) => emit("blur", $event))
-				}), null, 16)) : isDateType.value ? (openBlock(), createBlock(DateInput_default, mergeProps({ key: 6 }, dateBindings.value, {
-					"onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => emit("update:modelValue", $event)),
-					onBlur: _cache[9] || (_cache[9] = ($event) => emit("blur", $event))
-				}), null, 16)) : isDateRangeType.value ? (openBlock(), createBlock(DateRangeInput_default, mergeProps({ key: 7 }, dateRangeBindings.value, {
-					"onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => emit("update:modelValue", $event)),
-					onBlur: _cache[11] || (_cache[11] = ($event) => emit("blur", $event))
-				}), null, 16)) : isTextLikeType.value ? (openBlock(), createBlock(_sfc_main$29, mergeProps({ key: 8 }, textInputBindings.value, {
-					"onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => emit("update:modelValue", $event)),
-					onBlur: _cache[13] || (_cache[13] = ($event) => emit("blur", $event))
-				}), null, 16)) : isImageType.value ? (openBlock(), createBlock(_sfc_main$23, mergeProps({ key: 9 }, imageBindings.value, {
-					"onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => emit("update:modelValue", $event)),
-					onBlur: _cache[15] || (_cache[15] = ($event) => emit("blur", $event))
-				}), null, 16)) : isCheckboxSingleType.value ? (openBlock(), createBlock(_sfc_main$30, mergeProps({ key: 10 }, checkboxSingleBindings.value, {
-					"onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => emit("update:modelValue", $event)),
-					onBlur: _cache[17] || (_cache[17] = ($event) => emit("blur", $event))
-				}), null, 16)) : isRadioSingleType.value ? (openBlock(), createBlock(_sfc_main$21, mergeProps({ key: 11 }, radioSingleBindings.value, {
-					"onUpdate:modelValue": _cache[18] || (_cache[18] = ($event) => emit("update:modelValue", $event)),
-					onBlur: _cache[19] || (_cache[19] = ($event) => emit("blur", $event))
-				}), null, 16)) : isToggleSingleType.value ? (openBlock(), createBlock(_sfc_main$20, mergeProps({ key: 12 }, toggleSingleBindings.value, {
-					"onUpdate:modelValue": _cache[20] || (_cache[20] = ($event) => emit("update:modelValue", $event)),
-					onBlur: _cache[21] || (_cache[21] = ($event) => emit("blur", $event))
-				}), null, 16)) : isNotationType.value ? (openBlock(), createBlock(_sfc_main$22, mergeProps({ key: 13 }, notationBindings.value, {
-					"onUpdate:modelValue": _cache[22] || (_cache[22] = ($event) => emit("update:modelValue", $event)),
-					onBlur: _cache[23] || (_cache[23] = ($event) => emit("blur", $event))
-				}), null, 16)) : isCheckboxType.value ? (openBlock(), createBlock(_sfc_main$15, mergeProps({ key: 14 }, checkboxBindings.value, {
-					"onUpdate:modelValue": _cache[24] || (_cache[24] = ($event) => emit("update:modelValue", $event)),
-					onBlur: _cache[25] || (_cache[25] = ($event) => emit("blur", $event))
-				}), null, 16)) : isRadioType.value ? (openBlock(), createBlock(_sfc_main$19, mergeProps({ key: 15 }, radioBindings.value, {
-					"onUpdate:modelValue": _cache[26] || (_cache[26] = ($event) => emit("update:modelValue", $event)),
-					onBlur: _cache[27] || (_cache[27] = ($event) => emit("blur", $event))
-				}), null, 16)) : isNoComponentType.value ? renderSlot(_ctx.$slots, "unsupported-type", {
-					key: 16,
+					class: normalizeClass(props.labelClass ?? defaultLabelClass)
+				}, toDisplayString(__props.label), 11, _hoisted_1$18)) : createCommentVNode("", true)]) : createCommentVNode("", true),
+				__props.helperText && !showsInlineChoiceControl.value ? renderSlot(_ctx.$slots, "helper", {
+					key: 1,
+					helperText: __props.helperText,
+					helperTextClass: props.helperTextClass ?? defaultHelperTextClass
+				}, () => [createElementVNode("span", { class: normalizeClass(props.helperTextClass ?? defaultHelperTextClass) }, toDisplayString(__props.helperText), 3)]) : createCommentVNode("", true),
+				resolvedFieldComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(resolvedFieldComponent.value), mergeProps({ key: 2 }, resolvedFieldBindings.value, toHandlers(fieldListeners)), null, 16)) : isNoComponentType.value ? renderSlot(_ctx.$slots, "unsupported-type", {
+					key: 3,
 					type: __props.type,
 					modelValue: __props.modelValue,
 					updateValue,
 					attrs: unref(attrs)
 				}) : renderSlot(_ctx.$slots, "unsupported-type", {
-					key: 17,
+					key: 4,
 					type: __props.type,
 					modelValue: __props.modelValue,
 					updateValue,
 					attrs: unref(attrs)
 				}),
-				hasError.value ? (openBlock(), createElementBlock("div", _hoisted_3$9, [createVNode(unref(ExclamationCircleIcon), { class: "mr-1 h-4 w-4 flex-shrink-0" }), createElementVNode("span", null, toDisplayString(__props.errorMessage), 1)])) : createCommentVNode("", true)
-			]);
+				hasError.value ? renderSlot(_ctx.$slots, "error", {
+					key: 5,
+					errorMessage: __props.errorMessage,
+					errorClass: props.errorClass ?? defaultErrorClass,
+					errorIconClass: props.errorIconClass ?? defaultErrorIconClass,
+					errorTextClass: props.errorTextClass
+				}, () => [createElementVNode("div", { class: normalizeClass(props.errorClass ?? defaultErrorClass) }, [createVNode(unref(ExclamationCircleIcon), { class: normalizeClass(props.errorIconClass ?? defaultErrorIconClass) }, null, 8, ["class"]), createElementVNode("span", { class: normalizeClass(props.errorTextClass) }, toDisplayString(__props.errorMessage), 3)], 2)]) : createCommentVNode("", true)
+			])], 2);
 		};
 	}
 });
 //#endregion
 //#region src/components/CheckboxMultipleInput.vue
-var _hoisted_1$18 = { class: "flex flex-wrap gap-3" };
 var _sfc_main$15 = {
 	__name: "CheckboxMultipleInput",
 	props: {
@@ -3834,6 +4042,10 @@ var _sfc_main$15 = {
 		disabled: {
 			type: Boolean,
 			default: false
+		},
+		ui: {
+			type: Object,
+			default: () => ({})
 		}
 	},
 	emits: ["update:modelValue"],
@@ -3854,7 +4066,7 @@ var _sfc_main$15 = {
 			emit("update:modelValue", nextSelection);
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$18, [(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["flex flex-wrap gap-3", props.ui.group]) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option) => {
 				return openBlock(), createBlock(_sfc_main$16, {
 					key: `checkbox-${option}`,
 					type: "checkbox-input",
@@ -3864,15 +4076,17 @@ var _sfc_main$15 = {
 					"unchecked-value": false,
 					label: option,
 					disabled: __props.disabled,
+					ui: props.ui.item ?? props.ui,
 					"onUpdate:modelValue": (checked) => updateSelection(option, checked)
 				}, null, 8, [
 					"name",
 					"model-value",
 					"label",
 					"disabled",
+					"ui",
 					"onUpdate:modelValue"
 				]);
-			}), 128))]);
+			}), 128))], 2);
 		};
 	}
 };
@@ -5418,6 +5632,10 @@ var _sfc_main$1 = {
 			type: String,
 			default: "Search..."
 		},
+		searchValue: {
+			type: String,
+			default: void 0
+		},
 		searchCountLabel: {
 			type: String,
 			default: "results"
@@ -5448,13 +5666,24 @@ var _sfc_main$1 = {
 			validator: (value) => ["client", "server"].includes(value)
 		}
 	},
-	emits: ["sort", "update:searchShowDeleted"],
+	emits: [
+		"sort",
+		"update:searchShowDeleted",
+		"update:searchValue"
+	],
 	setup(__props, { emit: __emit }) {
 		const slots = useSlots();
 		const props = __props;
 		const emit = __emit;
 		computed(() => !!slots.actions);
-		const searchQuery = ref("");
+		const internalSearchQuery = ref("");
+		const searchQuery = computed({
+			get: () => props.searchValue ?? internalSearchQuery.value,
+			set: (value) => {
+				internalSearchQuery.value = value;
+				emit("update:searchValue", value);
+			}
+		});
 		const filteredData = computed(() => {
 			if (props.searchMode !== "client" || !props.search || !searchQuery.value.trim()) return props.data;
 			const query = searchQuery.value.toLowerCase().trim();
@@ -5598,7 +5827,7 @@ var _sfc_main$1 = {
 //#region src/components/TableListForm.vue
 var _hoisted_1$2 = { class: "relative max-w-sm" };
 var _hoisted_2$1 = { class: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none" };
-var _hoisted_3$1 = ["placeholder"];
+var _hoisted_3$1 = ["value", "placeholder"];
 var _hoisted_4 = { class: "min-w-full divide-y divide-neutral-200 dark:divide-neutral-800" };
 var _hoisted_5 = { class: "bg-neutral-50 dark:bg-neutral-900" };
 var _hoisted_6 = {
@@ -5674,6 +5903,10 @@ var _sfc_main = {
 			type: String,
 			default: "Search..."
 		},
+		searchValue: {
+			type: String,
+			default: void 0
+		},
 		searchMode: {
 			type: String,
 			default: "server",
@@ -5737,7 +5970,8 @@ var _sfc_main = {
 		"update",
 		"update:editingRowKey",
 		"edit-start",
-		"edit-cancel"
+		"edit-cancel",
+		"update:searchValue"
 	],
 	setup(__props, { emit: __emit }) {
 		const slots = useSlots();
@@ -5745,7 +5979,14 @@ var _sfc_main = {
 		const emit = __emit;
 		const localSortField = ref(props.sortField);
 		const localSortDirection = ref(props.sortDirection);
-		const searchQuery = ref("");
+		const internalSearchQuery = ref("");
+		const searchQuery = computed({
+			get: () => props.searchValue ?? internalSearchQuery.value,
+			set: (value) => {
+				internalSearchQuery.value = value;
+				emit("update:searchValue", value);
+			}
+		});
 		const internalEditingRowKey = ref(null);
 		const editingDraft = ref({});
 		const resolvedEditingRowKey = computed(() => {
@@ -5948,12 +6189,13 @@ var _sfc_main = {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(["bg-white dark:bg-neutral-950", __props.isCard ? "mx-4 rounded-xl animate-fadeIn border border-neutral-200 shadow-sm dark:border-neutral-800 md:mx-0 overflow-hidden" : ""]) }, [__props.search ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: normalizeClass(["px-6 py-4", __props.isCard ? "rounded-t-xl border-b border-neutral-200 bg-neutral-50/80 dark:border-neutral-800 dark:bg-neutral-900/80" : "mb-4 bg-white/80 backdrop-blur-sm dark:bg-neutral-950/80"])
-			}, [createElementVNode("div", _hoisted_1$2, [createElementVNode("div", _hoisted_2$1, [createVNode(unref(MagnifyingGlassIcon), { class: "h-4 w-4 text-neutral-400 dark:text-neutral-200" })]), withDirectives(createElementVNode("input", {
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+			}, [createElementVNode("div", _hoisted_1$2, [createElementVNode("div", _hoisted_2$1, [createVNode(unref(MagnifyingGlassIcon), { class: "h-4 w-4 text-neutral-400 dark:text-neutral-200" })]), createElementVNode("input", {
+				value: searchQuery.value,
 				type: "text",
 				placeholder: __props.searchPlaceholder,
-				class: "block w-full rounded-lg border border-neutral-200 bg-white py-2 pl-9 pr-3 text-sm text-neutral-900 placeholder:text-neutral-500 transition-colors duration-200 focus:border-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:placeholder:text-neutral-500 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10"
-			}, null, 8, _hoisted_3$1), [[vModelText, searchQuery.value]])])], 2)) : createCommentVNode("", true), hasData.value ? (openBlock(), createElementBlock("div", {
+				class: "block w-full rounded-lg border border-neutral-200 bg-white py-2 pl-9 pr-3 text-sm text-neutral-900 placeholder:text-neutral-500 transition-colors duration-200 focus:border-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950/10 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:placeholder:text-neutral-500 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10",
+				onInput: _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event.target.value)
+			}, null, 40, _hoisted_3$1)])], 2)) : createCommentVNode("", true), hasData.value ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: normalizeClass(["overflow-x-auto", __props.isCard ? __props.search ? "" : "rounded-t-xl" : ""])
 			}, [createElementVNode("table", _hoisted_4, [createElementVNode("thead", _hoisted_5, [createElementVNode("tr", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column) => {
@@ -6255,4 +6497,4 @@ var plugin_default = { install(app) {
 //#endregion
 export { SectionTitle_default as $, _sfc_main$12 as A, _sfc_main$22 as B, _sfc_main$5 as C, _sfc_main$9 as D, _sfc_main$8 as E, ColorPicker_default as F, _sfc_main$27 as G, DateRangeInput_default as H, _sfc_main$18 as I, _sfc_main$30 as J, _sfc_main$28 as K, _sfc_main$19 as L, _sfc_main$14 as M, _sfc_main$15 as N, _sfc_main$10 as O, _sfc_main$16 as P, _sfc_main$34 as Q, _sfc_main$20 as R, useSidebar as S, _sfc_main$7 as T, DateInput_default as U, _sfc_main$23 as V, _sfc_main$26 as W, _sfc_main$32 as X, _sfc_main$31 as Y, _sfc_main$33 as Z, SidebarGroupContent_default as _, _sfc_main$1 as a, __commonJSMin as at, SidebarContent_default as b, _sfc_main$4 as c, SidebarMenuItem_default as d, _sfc_main$36 as et, SidebarMenuButton_default as f, SidebarGroupLabel_default as g, SidebarHeader_default as h, _sfc_main as i, _sfc_main$40 as it, _sfc_main$13 as j, _sfc_main$11 as k, SidebarTrigger_default as l, SidebarInset_default as m, ToastContainer_default as n, _sfc_main$38 as nt, _sfc_main$2 as o, SidebarMenu_default as p, _sfc_main$29 as q, Toast_default as r, _sfc_main$39 as rt, _sfc_main$3 as s, plugin_default as t, _sfc_main$37 as tt, SidebarProvider_default as u, SidebarGroup_default as v, _sfc_main$6 as w, Sidebar_default as x, SidebarFooter_default as y, _sfc_main$21 as z };
 
-//# sourceMappingURL=plugin-DyVd9Eh7.js.map
+//# sourceMappingURL=plugin-BhIV8ihv.js.map