@code-coaching/vuetiful 0.17.1 → 0.18.1

package/dist/vuetiful.es.mjs

@@ -1,11 +1,11 @@
-import { defineComponent, ref, computed, useAttrs, openBlock, createElementBlock, normalizeClass, createElementVNode, unref, toDisplayString, renderSlot, createBlock, resolveDynamicComponent, withCtx, withDirectives, createTextVNode, onMounted, Fragment, cloneVNode, h as h$1, inject, provide, watchEffect, onUnmounted, watch, nextTick, toRaw, createCommentVNode, reactive, readonly, toRefs, createVNode, Transition, mergeProps, renderList, pushScopeId, popScopeId, resolveComponent } from "vue";
+import { defineComponent, ref, computed, useAttrs, openBlock, createElementBlock, normalizeClass, createElementVNode, unref, toDisplayString, renderSlot, createBlock, resolveDynamicComponent, withCtx, withDirectives, createTextVNode, onMounted, Fragment, cloneVNode, h as h$1, inject, provide, watchEffect, onUnmounted, watch, nextTick, toRaw, createCommentVNode, reactive, readonly, toRefs, createVNode, Transition, renderList, pushScopeId, popScopeId, mergeProps, vShow, resolveComponent } from "vue";
 const _hoisted_1$b = ["src", "alt"];
 const _hoisted_2$6 = {
   key: 1,
   class: "avatar-initials h-full w-full",
   viewBox: "0 0 512 512"
 };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "VAvatar",
   props: {
     initials: { type: String, default: "" },
@@ -61,7 +61,7 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$n = {};
+const _sfc_main$q = {};
 const _hoisted_1$a = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-badge badge`)
 };
@@ -70,8 +70,8 @@ function _sfc_render$3(_ctx, _cache) {
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$3]]);
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$3]]);
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "VButton",
   props: {
     icon: {
@@ -121,7 +121,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$l = {};
+const _sfc_main$o = {};
 const _hoisted_1$9 = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-chip chip`)
 };
@@ -130,7 +130,7 @@ function _sfc_render$2(_ctx, _cache) {
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$2]]);
+var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$2]]);
 var deepFreezeEs6 = { exports: {} };
 function deepFreeze(obj) {
   if (obj instanceof Map) {
@@ -9352,7 +9352,7 @@ function css(hljs2) {
   };
 }
 var css_1 = css;
-function d$3(hljs2) {
+function d$4(hljs2) {
   const D_KEYWORDS = {
     $pattern: hljs2.UNDERSCORE_IDENT_RE,
     keyword: "abstract alias align asm assert auto body break byte case cast catch class const continue debug default delete deprecated do else enum export extern final finally for foreach foreach_reverse|10 goto if immutable import in inout int interface invariant is lazy macro mixin module new nothrow out override package pragma private protected public pure ref return scope shared static struct super switch synchronized template this throw try typedef typeid typeof union unittest version void volatile while with __FILE__ __LINE__ __gshared|10 __thread __traits __DATE__ __EOF__ __TIME__ __TIMESTAMP__ __VENDOR__ __VERSION__",
@@ -9462,7 +9462,7 @@ function d$3(hljs2) {
     ]
   };
 }
-var d_1 = d$3;
+var d_1 = d$4;
 function markdown(hljs2) {
   const regex = hljs2.regex;
   const INLINE_HTML = {
@@ -46476,7 +46476,7 @@ const _hoisted_2$5 = {
   class: /* @__PURE__ */ normalizeClass(`code-block-language`)
 };
 const _hoisted_3$3 = ["innerHTML"];
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "VCodeBlock",
   props: {
     language: {
@@ -46539,7 +46539,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           class: normalizeClass(`code-block-header flex items-center justify-between p-2 pb-0 pl-4 text-xs uppercase text-white/50 ${__props.headerClass}`)
         }, [
           createElementVNode("span", _hoisted_2$5, toDisplayString(languageFormatter(__props.language)), 1),
-          withDirectives((openBlock(), createBlock(unref(_sfc_main$m), {
+          withDirectives((openBlock(), createBlock(unref(_sfc_main$p), {
             class: normalizeClass(`code-block-btn ${__props.buttonClass}`),
             onClick: _cache[0] || (_cache[0] = ($event) => onCopyClick())
           }, {
@@ -46563,7 +46563,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$j = defineComponent({
+const _sfc_main$m = defineComponent({
   props: {
     bgLight: {
       type: String,
@@ -46685,7 +46685,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ], 2)
   ], 42, _hoisted_1$7);
 }
-var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$1]]);
+var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$1]]);
 function u$2(r2, n2, ...a2) {
   if (r2 in n2) {
     let e2 = n2[r2];
@@ -46697,7 +46697,7 @@ function u$2(r2, n2, ...a2) {
 var N$1 = ((o2) => (o2[o2.None = 0] = "None", o2[o2.RenderStrategy = 1] = "RenderStrategy", o2[o2.Static = 2] = "Static", o2))(N$1 || {}), S$1 = ((e2) => (e2[e2.Unmount = 0] = "Unmount", e2[e2.Hidden = 1] = "Hidden", e2))(S$1 || {});
 function H$2({ visible: r2 = true, features: t2 = 0, ourProps: e2, theirProps: o2, ...i2 }) {
   var a2;
-  let n2 = j$2(o2, e2), l2 = Object.assign(i2, { props: n2 });
+  let n2 = j$3(o2, e2), l2 = Object.assign(i2, { props: n2 });
   if (r2 || t2 & 2 && n2.static)
     return y$2(l2);
   if (t2 & 1) {
@@ -46727,7 +46727,7 @@ function y$2({ props: r2, attrs: t2, slots: e2, slot: o2, name: i2 }) {
 `), "", "You can apply a few solutions:", ['Add an `as="..."` prop, to ensure that we render an actual element instead of a "template".', "Render a single element as the child so that we can forward the props onto that element."].map((s2) => `  - ${s2}`).join(`
 `)].join(`
 `));
-      let p2 = j$2((h2 = u2.props) != null ? h2 : {}, l2), f2 = cloneVNode(u2, p2);
+      let p2 = j$3((h2 = u2.props) != null ? h2 : {}, l2), f2 = cloneVNode(u2, p2);
       for (let s2 in p2)
         s2.startsWith("on") && (f2.props || (f2.props = {}), f2.props[s2] = p2[s2]);
       return f2;
@@ -46739,7 +46739,7 @@ function y$2({ props: r2, attrs: t2, slots: e2, slot: o2, name: i2 }) {
 function b$2(r2) {
   return r2.flatMap((t2) => t2.type === Fragment ? b$2(t2.children) : [t2]);
 }
-function j$2(...r2) {
+function j$3(...r2) {
   if (r2.length === 0)
     return {};
   if (r2.length === 1)
@@ -46780,7 +46780,7 @@ let e$1 = 0;
 function n$2() {
   return ++e$1;
 }
-function t() {
+function t$1() {
   return n$2();
 }
 var o$1 = ((r2) => (r2.Space = " ", r2.Enter = "Enter", r2.Escape = "Escape", r2.Backspace = "Backspace", r2.Delete = "Delete", r2.ArrowLeft = "ArrowLeft", r2.ArrowUp = "ArrowUp", r2.ArrowRight = "ArrowRight", r2.ArrowDown = "ArrowDown", r2.Home = "Home", r2.End = "End", r2.PageUp = "PageUp", r2.PageDown = "PageDown", r2.Tab = "Tab", r2))(o$1 || {});
@@ -46845,8 +46845,8 @@ function b$1(t2, e2) {
   }), n2;
 }
 var i = Object.defineProperty;
-var d$2 = (t2, e2, r2) => e2 in t2 ? i(t2, e2, { enumerable: true, configurable: true, writable: true, value: r2 }) : t2[e2] = r2;
-var n = (t2, e2, r2) => (d$2(t2, typeof e2 != "symbol" ? e2 + "" : e2, r2), r2);
+var d$3 = (t2, e2, r2) => e2 in t2 ? i(t2, e2, { enumerable: true, configurable: true, writable: true, value: r2 }) : t2[e2] = r2;
+var n = (t2, e2, r2) => (d$3(t2, typeof e2 != "symbol" ? e2 + "" : e2, r2), r2);
 class s$1 {
   constructor() {
     n(this, "current", this.detect());
@@ -47039,7 +47039,7 @@ function p$1(n2) {
       }
   }
 }
-function d$1(u2, e2, r2) {
+function d$2(u2, e2, r2) {
   let i2 = ref(r2 == null ? void 0 : r2.value), f2 = computed(() => u2.value !== void 0);
   return [computed(() => f2.value ? u2.value : i2.value), function(t2) {
     return f2.value || (i2.value = t2), e2 == null ? void 0 : e2(t2);
@@ -47057,6 +47057,11 @@ function u() {
     e2.value = r(n2);
   } };
 }
+function t(e2) {
+  typeof queueMicrotask == "function" ? queueMicrotask(e2) : Promise.resolve().then(e2).catch((o2) => setTimeout(() => {
+    throw o2;
+  }));
+}
 let p = Symbol("DescriptionContext");
 function b() {
   let t2 = inject(p, null);
@@ -47074,7 +47079,7 @@ function M({ slot: t2 = ref({}), name: i2 = "Description", props: o2 = {} } = {}
   }
   return provide(p, { register: s2, slot: t2, name: i2, props: o2 }), computed(() => e2.value.length > 0 ? e2.value.join(" ") : void 0);
 }
-let E = defineComponent({ name: "Description", props: { as: { type: [Object, String], default: "p" }, id: { type: String, default: () => `headlessui-description-${t()}` } }, setup(t2, { attrs: i2, slots: o2 }) {
+let E = defineComponent({ name: "Description", props: { as: { type: [Object, String], default: "p" }, id: { type: String, default: () => `headlessui-description-${t$1()}` } }, setup(t2, { attrs: i2, slots: o2 }) {
   let e2 = b();
   return onMounted(() => onUnmounted(e2.register(t2.id))), () => {
     let { name: s2 = "Description", slot: n2 = ref({}), props: r2 = {} } = e2, { id: d2, ...l2 } = t2, c2 = { ...Object.entries(r2).reduce((f2, [a2, g]) => Object.assign(f2, { [a2]: unref(g) }), {}), id: d2 };
@@ -47088,12 +47093,12 @@ var fe = ((u2) => (u2[u2.Open = 0] = "Open", u2[u2.Closed = 1] = "Closed", u2))(
 function ve(t2) {
   requestAnimationFrame(() => requestAnimationFrame(t2));
 }
-let U = Symbol("ListboxContext");
-function j$1(t2) {
-  let b2 = inject(U, null);
+let U$1 = Symbol("ListboxContext");
+function j$2(t2) {
+  let b2 = inject(U$1, null);
   if (b2 === null) {
     let u2 = new Error(`<${t2} /> is missing a parent <Listbox /> component.`);
-    throw Error.captureStackTrace && Error.captureStackTrace(u2, j$1), u2;
+    throw Error.captureStackTrace && Error.captureStackTrace(u2, j$2), u2;
   }
   return b2;
 }
@@ -47103,7 +47108,7 @@ let je = defineComponent({ name: "Listbox", emits: { "update:modelValue": (t2) =
     let l2 = i2.value !== null ? f2.value[i2.value] : null, r2 = O(a2(f2.value.slice()), (S2) => o(S2.dataRef.domRef)), s2 = l2 ? r2.indexOf(l2) : null;
     return s2 === -1 && (s2 = null), { options: r2, activeOptionIndex: s2 };
   }
-  let h$2 = computed(() => t2.multiple ? 1 : 0), [y$12, M2] = d$1(computed(() => t2.modelValue === void 0 ? u$2(h$2.value, { [1]: [], [0]: void 0 }) : t2.modelValue), (a2) => L("update:modelValue", a2), computed(() => t2.defaultValue)), n2 = { listboxState: e$12, value: y$12, mode: h$2, compare(a2, l2) {
+  let h$2 = computed(() => t2.multiple ? 1 : 0), [y$12, M2] = d$2(computed(() => t2.modelValue === void 0 ? u$2(h$2.value, { [1]: [], [0]: void 0 }) : t2.modelValue), (a2) => L("update:modelValue", a2), computed(() => t2.defaultValue)), n2 = { listboxState: e$12, value: y$12, mode: h$2, compare(a2, l2) {
     if (typeof t2.by == "string") {
       let r2 = t2.by;
       return (a2 == null ? void 0 : a2[r2]) === (l2 == null ? void 0 : l2[r2]);
@@ -47116,15 +47121,15 @@ let je = defineComponent({ name: "Listbox", emits: { "update:modelValue": (t2) =
   }, goToOption(a2, l2, r2) {
     if (t2.disabled || e$12.value === 1)
       return;
-    let s2 = R(), S2 = x(a2 === a$2.Specific ? { focus: a$2.Specific, id: l2 } : { focus: a2 }, { resolveItems: () => s2.options, resolveActiveIndex: () => s2.activeOptionIndex, resolveId: (k) => k.id, resolveDisabled: (k) => k.dataRef.disabled });
+    let s2 = R(), S2 = x(a2 === a$2.Specific ? { focus: a$2.Specific, id: l2 } : { focus: a2 }, { resolveItems: () => s2.options, resolveActiveIndex: () => s2.activeOptionIndex, resolveId: (k2) => k2.id, resolveDisabled: (k2) => k2.dataRef.disabled });
     o$12.value = "", i2.value = S2, w$1.value = r2 != null ? r2 : 1, f2.value = s2.options;
   }, search(a2) {
     if (t2.disabled || e$12.value === 1)
       return;
     let r2 = o$12.value !== "" ? 0 : 1;
     o$12.value += a2.toLowerCase();
-    let S2 = (i2.value !== null ? f2.value.slice(i2.value + r2).concat(f2.value.slice(0, i2.value + r2)) : f2.value).find((V) => V.dataRef.textValue.startsWith(o$12.value) && !V.dataRef.disabled), k = S2 ? f2.value.indexOf(S2) : -1;
-    k === -1 || k === i2.value || (i2.value = k, w$1.value = 1);
+    let S2 = (i2.value !== null ? f2.value.slice(i2.value + r2).concat(f2.value.slice(0, i2.value + r2)) : f2.value).find((V) => V.dataRef.textValue.startsWith(o$12.value) && !V.dataRef.disabled), k2 = S2 ? f2.value.indexOf(S2) : -1;
+    k2 === -1 || k2 === i2.value || (i2.value = k2, w$1.value = 1);
   }, clearSearch() {
     t2.disabled || e$12.value !== 1 && o$12.value !== "" && (o$12.value = "");
   }, registerOption(a2, l2) {
@@ -47145,7 +47150,7 @@ let je = defineComponent({ name: "Listbox", emits: { "update:modelValue": (t2) =
   y([m2, x$1], (a2, l2) => {
     var r2;
     n2.closeListbox(), w(l2, h.Loose) || (a2.preventDefault(), (r2 = o(m2)) == null || r2.focus());
-  }, computed(() => e$12.value === 0)), provide(U, n2), c$2(computed(() => u$2(e$12.value, { [0]: l.Open, [1]: l.Closed })));
+  }, computed(() => e$12.value === 0)), provide(U$1, n2), c$2(computed(() => u$2(e$12.value, { [0]: l.Open, [1]: l.Closed })));
   let p2 = computed(() => {
     var a2;
     return (a2 = o(m2)) == null ? void 0 : a2.closest("form");
@@ -47163,11 +47168,11 @@ let je = defineComponent({ name: "Listbox", emits: { "update:modelValue": (t2) =
       };
     }, { immediate: true });
   }), () => {
-    let { name: a2, modelValue: l2, disabled: r2, form: s2, ...S2 } = t2, k = { open: e$12.value === 0, disabled: r2, value: y$12.value };
-    return h$1(Fragment, [...a2 != null && y$12.value != null ? e({ [a2]: y$12.value }).map(([V, $]) => h$1(f$1, K$1({ features: a$1.Hidden, key: V, as: "input", type: "hidden", hidden: true, readOnly: true, form: s2, name: V, value: $ }))) : [], H$2({ ourProps: {}, theirProps: { ...u2, ...T$2(S2, ["defaultValue", "onUpdate:modelValue", "horizontal", "multiple", "by"]) }, slot: k, slots: b2, attrs: u2, name: "Listbox" })]);
+    let { name: a2, modelValue: l2, disabled: r2, form: s2, ...S2 } = t2, k2 = { open: e$12.value === 0, disabled: r2, value: y$12.value };
+    return h$1(Fragment, [...a2 != null && y$12.value != null ? e({ [a2]: y$12.value }).map(([V, $]) => h$1(f$1, K$1({ features: a$1.Hidden, key: V, as: "input", type: "hidden", hidden: true, readOnly: true, form: s2, name: V, value: $ }))) : [], H$2({ ourProps: {}, theirProps: { ...u2, ...T$2(S2, ["defaultValue", "onUpdate:modelValue", "horizontal", "multiple", "by"]) }, slot: k2, slots: b2, attrs: u2, name: "Listbox" })]);
   };
-} }), Ae = defineComponent({ name: "ListboxLabel", props: { as: { type: [Object, String], default: "label" }, id: { type: String, default: () => `headlessui-listbox-label-${t()}` } }, setup(t2, { attrs: b2, slots: u2 }) {
-  let L = j$1("ListboxLabel");
+} }), Ae = defineComponent({ name: "ListboxLabel", props: { as: { type: [Object, String], default: "label" }, id: { type: String, default: () => `headlessui-listbox-label-${t$1()}` } }, setup(t2, { attrs: b2, slots: u2 }) {
+  let L = j$2("ListboxLabel");
   function e2() {
     var d2;
     (d2 = o(L.buttonRef)) == null || d2.focus({ preventScroll: true });
@@ -47176,8 +47181,8 @@ let je = defineComponent({ name: "Listbox", emits: { "update:modelValue": (t2) =
     let d2 = { open: L.listboxState.value === 0, disabled: L.disabled.value }, { id: m2, ...x2 } = t2, f2 = { id: m2, ref: L.labelRef, onClick: e2 };
     return H$2({ ourProps: f2, theirProps: x2, slot: d2, attrs: b2, slots: u2, name: "ListboxLabel" });
   };
-} }), Fe = defineComponent({ name: "ListboxButton", props: { as: { type: [Object, String], default: "button" }, id: { type: String, default: () => `headlessui-listbox-button-${t()}` } }, setup(t2, { attrs: b2, slots: u2, expose: L }) {
-  let e2 = j$1("ListboxButton");
+} }), Fe = defineComponent({ name: "ListboxButton", props: { as: { type: [Object, String], default: "button" }, id: { type: String, default: () => `headlessui-listbox-button-${t$1()}` } }, setup(t2, { attrs: b2, slots: u2, expose: L }) {
+  let e2 = j$2("ListboxButton");
   L({ el: e2.buttonRef, $el: e2.buttonRef });
   function d2(o$2) {
     switch (o$2.key) {
@@ -47219,8 +47224,8 @@ let je = defineComponent({ name: "Listbox", emits: { "update:modelValue": (t2) =
     let o$12 = { open: e2.listboxState.value === 0, disabled: e2.disabled.value, value: e2.value.value }, { id: i2, ...w2 } = t2, R = { ref: e2.buttonRef, id: i2, type: f2.value, "aria-haspopup": "listbox", "aria-controls": (h2 = o(e2.optionsRef)) == null ? void 0 : h2.id, "aria-expanded": e2.disabled.value ? void 0 : e2.listboxState.value === 0, "aria-labelledby": e2.labelRef.value ? [(y2 = o(e2.labelRef)) == null ? void 0 : y2.id, i2].join(" ") : void 0, disabled: e2.disabled.value === true ? true : void 0, onKeydown: d2, onKeyup: m2, onClick: x2 };
     return H$2({ ourProps: R, theirProps: w2, slot: o$12, attrs: b2, slots: u2, name: "ListboxButton" });
   };
-} }), Be = defineComponent({ name: "ListboxOptions", props: { as: { type: [Object, String], default: "ul" }, static: { type: Boolean, default: false }, unmount: { type: Boolean, default: true }, id: { type: String, default: () => `headlessui-listbox-options-${t()}` } }, setup(t2, { attrs: b2, slots: u2, expose: L }) {
-  let e2 = j$1("ListboxOptions"), d2 = ref(null);
+} }), Be = defineComponent({ name: "ListboxOptions", props: { as: { type: [Object, String], default: "ul" }, static: { type: Boolean, default: false }, unmount: { type: Boolean, default: true }, id: { type: String, default: () => `headlessui-listbox-options-${t$1()}` } }, setup(t2, { attrs: b2, slots: u2, expose: L }) {
+  let e2 = j$2("ListboxOptions"), d2 = ref(null);
   L({ el: e2.optionsRef, $el: e2.optionsRef });
   function m2(o$2) {
     switch (d2.value && clearTimeout(d2.value), o$2.key) {
@@ -47267,8 +47272,8 @@ let je = defineComponent({ name: "Listbox", emits: { "update:modelValue": (t2) =
     let o$12 = { open: e2.listboxState.value === 0 }, { id: i2, ...w2 } = t2, R = { "aria-activedescendant": e2.activeOptionIndex.value === null || (h2 = e2.options.value[e2.activeOptionIndex.value]) == null ? void 0 : h2.id, "aria-multiselectable": e2.mode.value === 1 ? true : void 0, "aria-labelledby": (n2 = (y2 = o(e2.labelRef)) == null ? void 0 : y2.id) != null ? n2 : (M2 = o(e2.buttonRef)) == null ? void 0 : M2.id, "aria-orientation": e2.orientation.value, id: i2, onKeydown: m2, role: "listbox", tabIndex: 0, ref: e2.optionsRef };
     return H$2({ ourProps: R, theirProps: w2, slot: o$12, attrs: b2, slots: u2, features: N$1.RenderStrategy | N$1.Static, visible: f2.value, name: "ListboxOptions" });
   };
-} }), Ke = defineComponent({ name: "ListboxOption", props: { as: { type: [Object, String], default: "li" }, value: { type: [Object, String, Number, Boolean] }, disabled: { type: Boolean, default: false }, id: { type: String, default: () => `headlessui-listbox.option-${t()}` } }, setup(t2, { slots: b2, attrs: u$12, expose: L }) {
-  let e2 = j$1("ListboxOption"), d2 = ref(null);
+} }), Ke = defineComponent({ name: "ListboxOption", props: { as: { type: [Object, String], default: "li" }, value: { type: [Object, String, Number, Boolean] }, disabled: { type: Boolean, default: false }, id: { type: String, default: () => `headlessui-listbox.option-${t$1()}` } }, setup(t2, { slots: b2, attrs: u$12, expose: L }) {
+  let e2 = j$2("ListboxOption"), d2 = ref(null);
   L({ el: d2, $el: d2 });
   let m2 = computed(() => e2.activeOptionIndex.value !== null ? e2.options.value[e2.activeOptionIndex.value].id === t2.id : false), x2 = computed(() => u$2(e2.mode.value, { [0]: () => e2.compare(toRaw(e2.value.value), toRaw(t2.value)), [1]: () => toRaw(e2.value.value).some((n2) => e2.compare(toRaw(n2), toRaw(t2.value))) })), f2 = computed(() => u$2(e2.mode.value, { [1]: () => {
     var p2;
@@ -47322,11 +47327,11 @@ let je = defineComponent({ name: "Listbox", emits: { "update:modelValue": (t2) =
   };
 } });
 let a = Symbol("LabelContext");
-function d() {
+function d$1() {
   let t2 = inject(a, null);
   if (t2 === null) {
     let n2 = new Error("You used a <Label /> component, but it is not inside a parent.");
-    throw Error.captureStackTrace && Error.captureStackTrace(n2, d), n2;
+    throw Error.captureStackTrace && Error.captureStackTrace(n2, d$1), n2;
   }
   return t2;
 }
@@ -47340,8 +47345,8 @@ function K({ slot: t2 = {}, name: n2 = "Label", props: i2 = {} } = {}) {
   }
   return provide(a, { register: l2, slot: t2, name: n2, props: i2 }), computed(() => e2.value.length > 0 ? e2.value.join(" ") : void 0);
 }
-let T = defineComponent({ name: "Label", props: { as: { type: [Object, String], default: "label" }, passive: { type: [Boolean], default: false }, id: { type: String, default: () => `headlessui-label-${t()}` } }, setup(t2, { slots: n2, attrs: i2 }) {
-  let e2 = d();
+let T = defineComponent({ name: "Label", props: { as: { type: [Object, String], default: "label" }, passive: { type: [Boolean], default: false }, id: { type: String, default: () => `headlessui-label-${t$1()}` } }, setup(t2, { slots: n2, attrs: i2 }) {
+  let e2 = d$1();
   return onMounted(() => onUnmounted(e2.register(t2.id))), () => {
     let { name: l2 = "Label", slot: r2 = {}, props: o2 = {} } = e2, { id: p2, passive: c2, ...u2 } = t2, s2 = { ...Object.entries(o2).reduce((f2, [b2, g]) => Object.assign(f2, { [b2]: unref(g) }), {}), id: p2 };
     return c2 && (delete s2.onClick, delete s2.htmlFor, delete u2.onClick), H$2({ ourProps: s2, theirProps: u2, slot: r2, attrs: i2, slots: n2, name: l2 });
@@ -47350,19 +47355,19 @@ let T = defineComponent({ name: "Label", props: { as: { type: [Object, String],
 function re(t2, c2) {
   return t2 === c2;
 }
-let j = Symbol("RadioGroupContext");
+let j$1 = Symbol("RadioGroupContext");
 function H(t2) {
-  let c2 = inject(j, null);
+  let c2 = inject(j$1, null);
   if (c2 === null) {
     let u2 = new Error(`<${t2} /> is missing a parent <RadioGroup /> component.`);
     throw Error.captureStackTrace && Error.captureStackTrace(u2, H), u2;
   }
   return c2;
 }
-let ke = defineComponent({ name: "RadioGroup", emits: { "update:modelValue": (t2) => true }, props: { as: { type: [Object, String], default: "div" }, disabled: { type: [Boolean], default: false }, by: { type: [String, Function], default: () => re }, modelValue: { type: [Object, String, Number, Boolean], default: void 0 }, defaultValue: { type: [Object, String, Number, Boolean], default: void 0 }, form: { type: String, optional: true }, name: { type: String, optional: true }, id: { type: String, default: () => `headlessui-radiogroup-${t()}` } }, inheritAttrs: false, setup(t2, { emit: c2, attrs: u2, slots: E2, expose: d2 }) {
+let ke = defineComponent({ name: "RadioGroup", emits: { "update:modelValue": (t2) => true }, props: { as: { type: [Object, String], default: "div" }, disabled: { type: [Boolean], default: false }, by: { type: [String, Function], default: () => re }, modelValue: { type: [Object, String, Number, Boolean], default: void 0 }, defaultValue: { type: [Object, String, Number, Boolean], default: void 0 }, form: { type: String, optional: true }, name: { type: String, optional: true }, id: { type: String, default: () => `headlessui-radiogroup-${t$1()}` } }, inheritAttrs: false, setup(t2, { emit: c2, attrs: u2, slots: E2, expose: d2 }) {
   let s2 = ref(null), i2 = ref([]), R = K({ name: "RadioGroupLabel" }), w2 = M({ name: "RadioGroupDescription" });
   d2({ el: s2, $el: s2 });
-  let [f2, S2] = d$1(computed(() => t2.modelValue), (e2) => c2("update:modelValue", e2), computed(() => t2.defaultValue)), p2 = { options: i2, value: f2, disabled: computed(() => t2.disabled), firstOption: computed(() => i2.value.find((e2) => !e2.propsRef.disabled)), containsCheckedOption: computed(() => i2.value.some((e2) => p2.compare(toRaw(e2.propsRef.value), toRaw(t2.modelValue)))), compare(e2, a2) {
+  let [f2, S2] = d$2(computed(() => t2.modelValue), (e2) => c2("update:modelValue", e2), computed(() => t2.defaultValue)), p2 = { options: i2, value: f2, disabled: computed(() => t2.disabled), firstOption: computed(() => i2.value.find((e2) => !e2.propsRef.disabled)), containsCheckedOption: computed(() => i2.value.some((e2) => p2.compare(toRaw(e2.propsRef.value), toRaw(t2.modelValue)))), compare(e2, a2) {
     if (typeof t2.by == "string") {
       let n2 = t2.by;
       return (e2 == null ? void 0 : e2[n2]) === (a2 == null ? void 0 : a2[n2]);
@@ -47380,7 +47385,7 @@ let ke = defineComponent({ name: "RadioGroup", emits: { "update:modelValue": (t2
     let a2 = i2.value.findIndex((n2) => n2.id === e2);
     a2 !== -1 && i2.value.splice(a2, 1);
   } };
-  provide(j, p2), p$2({ container: computed(() => o(s2)), accept(e2) {
+  provide(j$1, p2), p$2({ container: computed(() => o(s2)), accept(e2) {
     return e2.getAttribute("role") === "radio" ? NodeFilter.FILTER_REJECT : e2.hasAttribute("role") ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
   }, walk(e2) {
     e2.setAttribute("role", "none");
@@ -47447,7 +47452,7 @@ let ke = defineComponent({ name: "RadioGroup", emits: { "update:modelValue": (t2
   };
 } });
 var ie = ((u2) => (u2[u2.Empty = 1] = "Empty", u2[u2.Active = 2] = "Active", u2))(ie || {});
-let Ee = defineComponent({ name: "RadioGroupOption", props: { as: { type: [Object, String], default: "div" }, value: { type: [Object, String, Number, Boolean] }, disabled: { type: Boolean, default: false }, id: { type: String, default: () => `headlessui-radiogroup-option-${t()}` } }, setup(t2, { attrs: c2, slots: u2, expose: E2 }) {
+let Ee = defineComponent({ name: "RadioGroupOption", props: { as: { type: [Object, String], default: "div" }, value: { type: [Object, String, Number, Boolean] }, disabled: { type: Boolean, default: false }, id: { type: String, default: () => `headlessui-radiogroup-option-${t$1()}` } }, setup(t2, { attrs: c2, slots: u2, expose: E2 }) {
   let d2 = H("RadioGroupOption"), s2 = K({ name: "RadioGroupLabel" }), i2 = M({ name: "RadioGroupDescription" }), R = ref(null), w2 = computed(() => ({ value: t2.value, disabled: t2.disabled })), f2 = ref(1);
   E2({ el: R, $el: R });
   let S2 = computed(() => o(R));
@@ -47470,7 +47475,7 @@ let Ee = defineComponent({ name: "RadioGroupOption", props: { as: { type: [Objec
     let { id: r2, value: b2, disabled: T2, ...G } = t2, N2 = { checked: v2.value, disabled: m2.value, active: Boolean(f2.value & 2) }, K2 = { id: r2, ref: R, role: "radio", "aria-checked": v2.value ? "true" : "false", "aria-labelledby": s2.value, "aria-describedby": i2.value, "aria-disabled": m2.value ? true : void 0, tabIndex: e2.value, onClick: m2.value ? void 0 : a2, onFocus: m2.value ? void 0 : n2, onBlur: m2.value ? void 0 : l2 };
     return H$2({ ourProps: K2, theirProps: G, slot: N2, attrs: c2, slots: u2, name: "RadioGroupOption" });
   };
-} }), we = T, Se = E;
+} }), we = T, Se$1 = E;
 let S = Symbol("GroupContext"), ae = defineComponent({ name: "SwitchGroup", props: { as: { type: [Object, String], default: "template" } }, setup(l2, { slots: p2, attrs: a2 }) {
   let o2 = ref(null), f2 = K({ name: "SwitchLabel", props: { htmlFor: computed(() => {
     var r2;
@@ -47479,14 +47484,14 @@ let S = Symbol("GroupContext"), ae = defineComponent({ name: "SwitchGroup", prop
     o2.value && (r2.currentTarget.tagName === "LABEL" && r2.preventDefault(), o2.value.click(), o2.value.focus({ preventScroll: true }));
   } } }), t2 = M({ name: "SwitchDescription" });
   return provide(S, { switchRef: o2, labelledby: f2, describedby: t2 }), () => H$2({ theirProps: l2, ourProps: {}, slot: {}, slots: p2, attrs: a2, name: "SwitchGroup" });
-} }), ue = defineComponent({ name: "Switch", emits: { "update:modelValue": (l2) => true }, props: { as: { type: [Object, String], default: "button" }, modelValue: { type: Boolean, default: void 0 }, defaultChecked: { type: Boolean, optional: true }, form: { type: String, optional: true }, name: { type: String, optional: true }, value: { type: String, optional: true }, id: { type: String, default: () => `headlessui-switch-${t()}` } }, inheritAttrs: false, setup(l2, { emit: p2, attrs: a2, slots: o$2, expose: f2 }) {
-  let t2 = inject(S, null), [i2, r2] = d$1(computed(() => l2.modelValue), (e2) => p2("update:modelValue", e2), computed(() => l2.defaultChecked));
+} }), ue = defineComponent({ name: "Switch", emits: { "update:modelValue": (l2) => true }, props: { as: { type: [Object, String], default: "button" }, modelValue: { type: Boolean, default: void 0 }, defaultChecked: { type: Boolean, optional: true }, form: { type: String, optional: true }, name: { type: String, optional: true }, value: { type: String, optional: true }, id: { type: String, default: () => `headlessui-switch-${t$1()}` } }, inheritAttrs: false, setup(l2, { emit: p2, attrs: a2, slots: o$2, expose: f2 }) {
+  let t2 = inject(S, null), [i2, r2] = d$2(computed(() => l2.modelValue), (e2) => p2("update:modelValue", e2), computed(() => l2.defaultChecked));
   function s2() {
     r2(!i2.value);
   }
   let w2 = ref(null), u2 = t2 === null ? w2 : t2.switchRef, g = b$1(computed(() => ({ as: l2.as, type: a2.type })), u2);
   f2({ el: u2, $el: u2 });
-  function k(e2) {
+  function k2(e2) {
     e2.preventDefault(), s2();
   }
   function C(e2) {
@@ -47512,11 +47517,200 @@ let S = Symbol("GroupContext"), ae = defineComponent({ name: "SwitchGroup", prop
       };
     }, { immediate: true });
   }), () => {
-    let { id: e2, name: n2, value: L, form: D, ...R } = l2, K2 = { checked: i2.value }, x2 = { id: e2, ref: u2, role: "switch", type: g.value, tabIndex: 0, "aria-checked": i2.value, "aria-labelledby": t2 == null ? void 0 : t2.labelledby.value, "aria-describedby": t2 == null ? void 0 : t2.describedby.value, onClick: k, onKeyup: C, onKeypress: E2 };
+    let { id: e2, name: n2, value: L, form: D, ...R } = l2, K2 = { checked: i2.value }, x2 = { id: e2, ref: u2, role: "switch", type: g.value, tabIndex: 0, "aria-checked": i2.value, "aria-labelledby": t2 == null ? void 0 : t2.labelledby.value, "aria-describedby": t2 == null ? void 0 : t2.describedby.value, onClick: k2, onKeyup: C, onKeypress: E2 };
     return h$1(Fragment, [n2 != null && i2.value != null ? h$1(f$1, K$1({ features: a$1.Hidden, as: "input", type: "checkbox", hidden: true, readOnly: true, checked: i2.value, form: D, name: n2, value: L })) : null, H$2({ ourProps: x2, theirProps: { ...a2, ...T$2(R, ["modelValue", "defaultChecked"]) }, slot: K2, attrs: a2, slots: o$2, name: "Switch" })]);
   };
 } }), de = T, ce = E;
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+let d = defineComponent({ props: { onFocus: { type: Function, required: true } }, setup(t2) {
+  let n2 = ref(true);
+  return () => n2.value ? h$1(f$1, { as: "button", type: "button", features: a$1.Focusable, onFocus(o2) {
+    o2.preventDefault();
+    let e2, a2 = 50;
+    function r2() {
+      var u2;
+      if (a2-- <= 0) {
+        e2 && cancelAnimationFrame(e2);
+        return;
+      }
+      if ((u2 = t2.onFocus) != null && u2.call(t2)) {
+        n2.value = false, cancelAnimationFrame(e2);
+        return;
+      }
+      e2 = requestAnimationFrame(r2);
+    }
+    e2 = requestAnimationFrame(r2);
+  } }) : null;
+} });
+var te = ((i2) => (i2[i2.Forwards = 0] = "Forwards", i2[i2.Backwards = 1] = "Backwards", i2))(te || {}), le = ((s2) => (s2[s2.Less = -1] = "Less", s2[s2.Equal = 0] = "Equal", s2[s2.Greater = 1] = "Greater", s2))(le || {});
+let U = Symbol("TabsContext");
+function k(a2) {
+  let v2 = inject(U, null);
+  if (v2 === null) {
+    let i2 = new Error(`<${a2} /> is missing a parent <TabGroup /> component.`);
+    throw Error.captureStackTrace && Error.captureStackTrace(i2, k), i2;
+  }
+  return v2;
+}
+let j = Symbol("TabsSSRContext"), xe = defineComponent({ name: "TabGroup", emits: { change: (a2) => true }, props: { as: { type: [Object, String], default: "template" }, selectedIndex: { type: [Number], default: null }, defaultIndex: { type: [Number], default: 0 }, vertical: { type: [Boolean], default: false }, manual: { type: [Boolean], default: false } }, inheritAttrs: false, setup(a2, { slots: v2, attrs: i2, emit: s2 }) {
+  var h2;
+  let l2 = ref((h2 = a2.selectedIndex) != null ? h2 : a2.defaultIndex), n2 = ref([]), o$12 = ref([]), T2 = computed(() => a2.selectedIndex !== null), b2 = computed(() => T2.value ? a2.selectedIndex : l2.value);
+  function m2(t2) {
+    var S2;
+    let e2 = O(r2.tabs.value, o), u2 = O(r2.panels.value, o), f2 = e2.filter((p2) => {
+      var E2;
+      return !((E2 = o(p2)) != null && E2.hasAttribute("disabled"));
+    });
+    if (t2 < 0 || t2 > e2.length - 1) {
+      let p2 = u$2(l2.value === null ? 0 : Math.sign(t2 - l2.value), { [-1]: () => 1, [0]: () => u$2(Math.sign(t2), { [-1]: () => 0, [0]: () => 0, [1]: () => 1 }), [1]: () => 0 });
+      l2.value = u$2(p2, { [0]: () => e2.indexOf(f2[0]), [1]: () => e2.indexOf(f2[f2.length - 1]) }), r2.tabs.value = e2, r2.panels.value = u2;
+    } else {
+      let p2 = e2.slice(0, t2), G = [...e2.slice(t2), ...p2].find((W) => f2.includes(W));
+      if (!G)
+        return;
+      let B = (S2 = e2.indexOf(G)) != null ? S2 : r2.selectedIndex.value;
+      B === -1 && (B = r2.selectedIndex.value), l2.value = B, r2.tabs.value = e2, r2.panels.value = u2;
+    }
+  }
+  let r2 = { selectedIndex: computed(() => {
+    var t2, e2;
+    return (e2 = (t2 = l2.value) != null ? t2 : a2.defaultIndex) != null ? e2 : null;
+  }), orientation: computed(() => a2.vertical ? "vertical" : "horizontal"), activation: computed(() => a2.manual ? "manual" : "auto"), tabs: n2, panels: o$12, setSelectedIndex(t2) {
+    b2.value !== t2 && s2("change", t2), T2.value || m2(t2);
+  }, registerTab(t2) {
+    var f2;
+    if (n2.value.includes(t2))
+      return;
+    let e2 = n2.value[l2.value];
+    n2.value.push(t2), n2.value = O(n2.value, o);
+    let u2 = (f2 = n2.value.indexOf(e2)) != null ? f2 : l2.value;
+    u2 !== -1 && (l2.value = u2);
+  }, unregisterTab(t2) {
+    let e2 = n2.value.indexOf(t2);
+    e2 !== -1 && n2.value.splice(e2, 1);
+  }, registerPanel(t2) {
+    o$12.value.includes(t2) || (o$12.value.push(t2), o$12.value = O(o$12.value, o));
+  }, unregisterPanel(t2) {
+    let e2 = o$12.value.indexOf(t2);
+    e2 !== -1 && o$12.value.splice(e2, 1);
+  } };
+  provide(U, r2);
+  let R = ref({ tabs: [], panels: [] }), y2 = ref(false);
+  onMounted(() => {
+    y2.value = true;
+  }), provide(j, computed(() => y2.value ? null : R.value));
+  let w2 = computed(() => a2.selectedIndex);
+  return onMounted(() => {
+    watch([w2], () => {
+      var t2;
+      return m2((t2 = a2.selectedIndex) != null ? t2 : a2.defaultIndex);
+    }, { immediate: true });
+  }), watchEffect(() => {
+    if (!T2.value || b2.value == null || r2.tabs.value.length <= 0)
+      return;
+    let t2 = O(r2.tabs.value, o);
+    t2.some((u2, f2) => o(r2.tabs.value[f2]) !== o(u2)) && r2.setSelectedIndex(t2.findIndex((u2) => o(u2) === o(r2.tabs.value[b2.value])));
+  }), () => {
+    let t2 = { selectedIndex: l2.value };
+    return h$1(Fragment, [n2.value.length <= 0 && h$1(d, { onFocus: () => {
+      for (let e2 of n2.value) {
+        let u2 = o(e2);
+        if ((u2 == null ? void 0 : u2.tabIndex) === 0)
+          return u2.focus(), true;
+      }
+      return false;
+    } }), H$2({ theirProps: { ...i2, ...T$2(a2, ["selectedIndex", "defaultIndex", "manual", "vertical", "onChange"]) }, ourProps: {}, slot: t2, slots: v2, attrs: i2, name: "TabGroup" })]);
+  };
+} }), Ie = defineComponent({ name: "TabList", props: { as: { type: [Object, String], default: "div" } }, setup(a2, { attrs: v2, slots: i2 }) {
+  let s2 = k("TabList");
+  return () => {
+    let l2 = { selectedIndex: s2.selectedIndex.value }, n2 = { role: "tablist", "aria-orientation": s2.orientation.value };
+    return H$2({ ourProps: n2, theirProps: a2, slot: l2, attrs: v2, slots: i2, name: "TabList" });
+  };
+} }), ye = defineComponent({ name: "Tab", props: { as: { type: [Object, String], default: "button" }, disabled: { type: [Boolean], default: false }, id: { type: String, default: () => `headlessui-tabs-tab-${t$1()}` } }, setup(a2, { attrs: v2, slots: i2, expose: s2 }) {
+  let l2 = k("Tab"), n2 = ref(null);
+  s2({ el: n2, $el: n2 }), onMounted(() => l2.registerTab(n2)), onUnmounted(() => l2.unregisterTab(n2));
+  let o$2 = inject(j), T2 = computed(() => {
+    if (o$2.value) {
+      let e2 = o$2.value.tabs.indexOf(a2.id);
+      return e2 === -1 ? o$2.value.tabs.push(a2.id) - 1 : e2;
+    }
+    return -1;
+  }), b2 = computed(() => {
+    let e2 = l2.tabs.value.indexOf(n2);
+    return e2 === -1 ? T2.value : e2;
+  }), m$1 = computed(() => b2.value === l2.selectedIndex.value);
+  function r2(e2) {
+    var f2;
+    let u2 = e2();
+    if (u2 === T$1.Success && l2.activation.value === "auto") {
+      let S2 = (f2 = m(n2)) == null ? void 0 : f2.activeElement, p2 = l2.tabs.value.findIndex((E2) => o(E2) === S2);
+      p2 !== -1 && l2.setSelectedIndex(p2);
+    }
+    return u2;
+  }
+  function R(e2) {
+    let u2 = l2.tabs.value.map((S2) => o(S2)).filter(Boolean);
+    if (e2.key === o$1.Space || e2.key === o$1.Enter) {
+      e2.preventDefault(), e2.stopPropagation(), l2.setSelectedIndex(b2.value);
+      return;
+    }
+    switch (e2.key) {
+      case o$1.Home:
+      case o$1.PageUp:
+        return e2.preventDefault(), e2.stopPropagation(), r2(() => P(u2, N.First));
+      case o$1.End:
+      case o$1.PageDown:
+        return e2.preventDefault(), e2.stopPropagation(), r2(() => P(u2, N.Last));
+    }
+    if (r2(() => u$2(l2.orientation.value, { vertical() {
+      return e2.key === o$1.ArrowUp ? P(u2, N.Previous | N.WrapAround) : e2.key === o$1.ArrowDown ? P(u2, N.Next | N.WrapAround) : T$1.Error;
+    }, horizontal() {
+      return e2.key === o$1.ArrowLeft ? P(u2, N.Previous | N.WrapAround) : e2.key === o$1.ArrowRight ? P(u2, N.Next | N.WrapAround) : T$1.Error;
+    } })) === T$1.Success)
+      return e2.preventDefault();
+  }
+  let y2 = ref(false);
+  function w2() {
+    var e2;
+    y2.value || (y2.value = true, !a2.disabled && ((e2 = o(n2)) == null || e2.focus(), l2.setSelectedIndex(b2.value), t(() => {
+      y2.value = false;
+    })));
+  }
+  function h2(e2) {
+    e2.preventDefault();
+  }
+  let t$12 = b$1(computed(() => ({ as: a2.as, type: v2.type })), n2);
+  return () => {
+    var p2;
+    let e2 = { selected: m$1.value }, { id: u2, ...f2 } = a2, S2 = { ref: n2, onKeydown: R, onMousedown: h2, onClick: w2, id: u2, role: "tab", type: t$12.value, "aria-controls": (p2 = o(l2.panels.value[b2.value])) == null ? void 0 : p2.id, "aria-selected": m$1.value, tabIndex: m$1.value ? 0 : -1, disabled: a2.disabled ? true : void 0 };
+    return H$2({ ourProps: S2, theirProps: f2, slot: e2, attrs: v2, slots: i2, name: "Tab" });
+  };
+} }), Se = defineComponent({ name: "TabPanels", props: { as: { type: [Object, String], default: "div" } }, setup(a2, { slots: v2, attrs: i2 }) {
+  let s2 = k("TabPanels");
+  return () => {
+    let l2 = { selectedIndex: s2.selectedIndex.value };
+    return H$2({ theirProps: a2, ourProps: {}, slot: l2, attrs: i2, slots: v2, name: "TabPanels" });
+  };
+} }), ge = defineComponent({ name: "TabPanel", props: { as: { type: [Object, String], default: "div" }, static: { type: Boolean, default: false }, unmount: { type: Boolean, default: true }, id: { type: String, default: () => `headlessui-tabs-panel-${t$1()}` }, tabIndex: { type: Number, default: 0 } }, setup(a2, { attrs: v2, slots: i2, expose: s2 }) {
+  let l2 = k("TabPanel"), n2 = ref(null);
+  s2({ el: n2, $el: n2 }), onMounted(() => l2.registerPanel(n2)), onUnmounted(() => l2.unregisterPanel(n2));
+  let o$12 = inject(j), T2 = computed(() => {
+    if (o$12.value) {
+      let r2 = o$12.value.panels.indexOf(a2.id);
+      return r2 === -1 ? o$12.value.panels.push(a2.id) - 1 : r2;
+    }
+    return -1;
+  }), b2 = computed(() => {
+    let r2 = l2.panels.value.indexOf(n2);
+    return r2 === -1 ? T2.value : r2;
+  }), m2 = computed(() => b2.value === l2.selectedIndex.value);
+  return () => {
+    var t2;
+    let r2 = { selected: m2.value }, { id: R, tabIndex: y2, ...w2 } = a2, h2 = { ref: n2, id: R, role: "tabpanel", "aria-labelledby": (t2 = o(l2.tabs.value[b2.value])) == null ? void 0 : t2.id, tabIndex: m2.value ? y2 : -1 };
+    return !m2.value && a2.unmount && !a2.static ? h$1(f$1, { as: "span", ...h2 }) : H$2({ ourProps: h2, theirProps: w2, slot: r2, attrs: v2, slots: i2, features: N$1.Static | N$1.RenderStrategy, visible: m2.value, name: "TabPanel" });
+  };
+} });
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "VRadioDescription",
   props: {
     as: {
@@ -47526,7 +47720,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Se), { as: __props.as }, {
+      return openBlock(), createBlock(unref(Se$1), { as: __props.as }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
@@ -47535,7 +47729,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "VRadioGroup",
   props: {
     as: {
@@ -47603,7 +47797,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "VRadioItem",
   props: {
     value: {
@@ -47629,7 +47823,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "VRadioLabel",
   props: {
     as: {
@@ -47652,7 +47846,7 @@ const _hoisted_1$6 = {
   key: 0,
   class: "sr-only"
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "VSwitch",
   props: {
     modelValue: {
@@ -47741,7 +47935,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "VSwitchDescription",
   props: {
     as: {
@@ -47760,7 +47954,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "VSwitchGroup",
   props: {
     as: {
@@ -47779,7 +47973,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "VSwitchLabel",
   props: {
     as: {
@@ -47925,7 +48119,7 @@ const useDarkMode = () => {
   };
 };
 const _hoisted_1$5 = ["aria-labelledby", "aria-describedby"];
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "VDrawer",
   props: {
     regionBackdrop: {
@@ -48012,206 +48206,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = { class: "v-rail grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  __name: "VRail",
-  props: {
-    active: {
-      type: String,
-      default: "bg-secondary-active-token"
-    },
-    hover: {
-      type: String,
-      default: "hover:bg-secondary-hover-token"
-    },
-    regionLead: {
-      type: String,
-      default: ""
-    },
-    regionDefault: {
-      type: String,
-      default: ""
-    },
-    regionTrail: {
-      type: String,
-      default: ""
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    provide("active", props.active);
-    provide("hover", props.hover);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        createElementVNode("div", {
-          class: normalizeClass(["v-bar-lead", __props.regionLead])
-        }, [
-          renderSlot(_ctx.$slots, "lead")
-        ], 2),
-        createElementVNode("div", {
-          class: normalizeClass(["v-bar-default", __props.regionDefault])
-        }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 2),
-        createElementVNode("div", {
-          class: normalizeClass(["v-bar-trail", __props.regionTrail])
-        }, [
-          renderSlot(_ctx.$slots, "trail")
-        ], 2)
-      ]);
-    };
-  }
-});
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "VRailTile",
-  props: {
-    value: {
-      type: String,
-      default: ""
-    },
-    tag: {
-      type: String,
-      default: "button"
-    },
-    label: {
-      type: String,
-      default: ""
-    },
-    regionIcon: {
-      type: String,
-      default: ""
-    },
-    regionLabel: {
-      type: String,
-      default: ""
-    }
-  },
-  emits: ["click"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const attrs = useAttrs();
-    const { selectedRailTile: selectedRailTile2 } = useRail();
-    const active = inject("active");
-    const hover = inject("hover");
-    const activate = () => {
-      selectedRailTile2.value = props.value;
-      emit("click");
-    };
-    const clickHandler = (event) => {
-      event.preventDefault();
-      activate();
-    };
-    const keydownHandler = (event) => {
-      if (["Enter", " "].includes(event.key))
-        event.preventDefault();
-      if (event.key === "Enter")
-        activate();
-    };
-    const keyupHandler = (event) => {
-      if (event.key === " ") {
-        event.preventDefault();
-        activate();
-      }
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps({
-        onClick: clickHandler,
-        onKeydown: keydownHandler,
-        onKeyup: keyupHandler
-      }, unref(attrs), {
-        class: `app-rail-tile unstyled grid aspect-square w-full cursor-pointer place-content-center place-items-center space-y-1.5 ${unref(hover)} ${unref(selectedRailTile2) === __props.value ? `${unref(active)}` : ""}`
-      }), {
-        default: withCtx(() => [
-          _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass(`app-rail-tile-icon ${__props.regionIcon}`)
-          }, [
-            renderSlot(_ctx.$slots, "default")
-          ], 2)) : createCommentVNode("", true),
-          __props.label ? (openBlock(), createElementBlock("div", {
-            key: 1,
-            class: normalizeClass(`app-rail-tile-label text-center text-xs font-bold ${__props.regionLabel}`)
-          }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
-        ]),
-        _: 3
-      }, 16, ["class"]);
-    };
-  }
-});
-const _hoisted_1$3 = { class: "vuetiful-shell flex h-full w-full flex-col overflow-hidden" };
-const _hoisted_2$3 = { class: "vuetiful-shell-content flex h-full w-full flex-auto overflow-hidden" };
-const _sfc_main$7 = defineComponent({
-  __name: "VShell",
-  props: {
-    regionPage: { type: String, default: "" },
-    slotFixedHeader: { type: String, default: "z-10" },
-    slotSidebarLeft: { type: String, default: "w-auto" },
-    slotSidebarRight: { type: String, default: "w-auto" },
-    slotPageHeader: { type: String, default: "" },
-    slotPageContent: { type: String, default: "" },
-    slotPageFooter: { type: String, default: "" },
-    slotFixedFooter: { type: String, default: "" }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
-        _ctx.$slots.fixedHeader ? (openBlock(), createElementBlock("header", {
-          key: 0,
-          class: normalizeClass(`vuetiful-fixed-header ${__props.slotFixedHeader}`)
-        }, [
-          renderSlot(_ctx.$slots, "fixedHeader")
-        ], 2)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$3, [
-          _ctx.$slots.sidebarLeft ? (openBlock(), createElementBlock("aside", {
-            key: 0,
-            class: normalizeClass(`vuetiful-sidebar-left overflow-y-auto overflow-x-hidden ${__props.slotSidebarLeft}`)
-          }, [
-            renderSlot(_ctx.$slots, "sidebarLeft")
-          ], 2)) : createCommentVNode("", true),
-          createElementVNode("div", {
-            tabindex: "-1",
-            class: normalizeClass(`vuetiful-page flex flex-1 flex-col overflow-x-hidden ${(_a = __props.regionPage) != null ? _a : ""}`)
-          }, [
-            _ctx.$slots.pageHeader ? (openBlock(), createElementBlock("header", {
-              key: 0,
-              class: normalizeClass(`vuetiful-page-header flex-none ${__props.slotPageHeader}`)
-            }, [
-              renderSlot(_ctx.$slots, "pageHeader")
-            ], 2)) : createCommentVNode("", true),
-            createElementVNode("main", {
-              class: normalizeClass(`vuetiful-page-content flex-auto ${__props.slotPageContent}`)
-            }, [
-              renderSlot(_ctx.$slots, "default")
-            ], 2),
-            _ctx.$slots.pageFooter ? (openBlock(), createElementBlock("footer", {
-              key: 1,
-              class: normalizeClass(`vuetiful-page-footer flex-none ${__props.slotPageFooter}`)
-            }, [
-              renderSlot(_ctx.$slots, "pageFooter")
-            ], 2)) : createCommentVNode("", true)
-          ], 2),
-          _ctx.$slots.sidebarRight ? (openBlock(), createElementBlock("aside", {
-            key: 1,
-            class: normalizeClass(`vuetiful-sidebar-right flex-none overflow-y-auto overflow-x-hidden ${__props.slotSidebarRight}`)
-          }, [
-            renderSlot(_ctx.$slots, "sidebarRight")
-          ], 2)) : createCommentVNode("", true)
-        ]),
-        _ctx.$slots.fixedFooter ? (openBlock(), createElementBlock("footer", {
-          key: 1,
-          class: normalizeClass(`vuetiful-fixed-footer ${__props.slotFixedFooter}`)
-        }, [
-          renderSlot(_ctx.$slots, "fixedFooter")
-        ], 2)) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
 var VPreview_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _withScopeId$1 = (n2) => (pushScopeId("data-v-0d055d3d"), n2 = n2(), popScopeId(), n2);
-const _hoisted_1$2 = { class: "vuetiful-previewer overflow-hidden shadow-2xl shadow-surface-500/10 rounded-container-token dark:shadow-black/10" };
-const _hoisted_2$2 = { class: "flex items-center gap-2" };
+const _hoisted_1$4 = { class: "vuetiful-previewer overflow-hidden shadow-2xl shadow-surface-500/10 rounded-container-token dark:shadow-black/10" };
+const _hoisted_2$3 = { class: "flex items-center gap-2" };
 const _hoisted_3$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
@@ -48261,7 +48259,7 @@ const _hoisted_9 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createEl
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" })
 ], -1));
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "VPreview",
   props: {
     hideMobileToggle: {
@@ -48317,17 +48315,17 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const swatches = ref(false);
     const toggleSwatches = () => swatches.value = !swatches.value;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
         createElementVNode("header", {
           class: normalizeClass(`vuetiful-previewer-header flex items-center justify-between gap-4 p-4 bg-surface-200-700-token ${__props.regionHeader}`)
         }, [
-          createElementVNode("div", _hoisted_2$2, [
-            createVNode(unref(_sfc_main$h), {
+          createElementVNode("div", _hoisted_2$3, [
+            createVNode(unref(_sfc_main$k), {
               modelValue: tabView.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tabView.value = $event)
             }, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$g), {
+                createVNode(unref(_sfc_main$j), {
                   "data-test": "radio-item-preview",
                   value: "preview",
                   title: "Preview"
@@ -48339,7 +48337,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }),
-                createVNode(unref(_sfc_main$g), {
+                createVNode(unref(_sfc_main$j), {
                   "data-test": "radio-item-code",
                   value: "code",
                   title: "Code"
@@ -48354,14 +48352,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               ]),
               _: 3
             }, 8, ["modelValue"]),
-            !__props.hideMobileToggle && tabView.value === "preview" ? (openBlock(), createBlock(unref(_sfc_main$h), {
+            !__props.hideMobileToggle && tabView.value === "preview" ? (openBlock(), createBlock(unref(_sfc_main$k), {
               key: 0,
               class: "hidden sm:!inline-flex",
               modelValue: radioSize.value,
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => radioSize.value = $event)
             }, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$g), {
+                createVNode(unref(_sfc_main$j), {
                   "data-test": "radio-item-mobile",
                   value: "mobile"
                 }, {
@@ -48372,7 +48370,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }),
-                createVNode(unref(_sfc_main$g), { value: "full" }, {
+                createVNode(unref(_sfc_main$j), { value: "full" }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "desktop-item", {}, () => [
                       _hoisted_6$1
@@ -48384,7 +48382,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               _: 3
             }, 8, ["modelValue"])) : createCommentVNode("", true)
           ]),
-          !__props.hideSwatches ? (openBlock(), createBlock(unref(_sfc_main$m), {
+          !__props.hideSwatches ? (openBlock(), createBlock(unref(_sfc_main$p), {
             key: 0,
             "data-test": "swatch-button",
             class: normalizeClass(`${swatches.value ? "variant-filled" : "variant-ghost"} px-4 py-1 border-token border-surface-400-500-token`),
@@ -48399,7 +48397,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             _: 3
           }, 8, ["class"])) : createCommentVNode("", true)
         ], 2),
-        swatches.value ? (openBlock(), createBlock(unref(_sfc_main$h), {
+        swatches.value ? (openBlock(), createBlock(unref(_sfc_main$k), {
           key: 0,
           "data-test": "swatches",
           class: normalizeClass(`vuetiful-previewer-swatches variant-soft grid grid-cols-6 gap-2 !rounded-none p-4 sm:grid-cols-12`),
@@ -48410,7 +48408,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(Object.entries(backgrounds), ([key, value], index2) => {
-              return openBlock(), createBlock(unref(_sfc_main$g), {
+              return openBlock(), createBlock(unref(_sfc_main$j), {
                 value: key,
                 key: index2,
                 class: normalizeClass(`${value} flex aspect-square cursor-pointer items-center justify-center rounded ring-[1px] ring-surface-500/50`),
@@ -48463,7 +48461,203 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-0d055d3d"]]);
+var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-0d055d3d"]]);
+const _hoisted_1$3 = { class: "v-rail grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20" };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "VRail",
+  props: {
+    active: {
+      type: String,
+      default: "bg-secondary-active-token"
+    },
+    hover: {
+      type: String,
+      default: "hover:bg-secondary-hover-token"
+    },
+    regionLead: {
+      type: String,
+      default: ""
+    },
+    regionDefault: {
+      type: String,
+      default: ""
+    },
+    regionTrail: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    provide("active", props.active);
+    provide("hover", props.hover);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        createElementVNode("div", {
+          class: normalizeClass(["v-bar-lead", __props.regionLead])
+        }, [
+          renderSlot(_ctx.$slots, "lead")
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(["v-bar-default", __props.regionDefault])
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(["v-bar-trail", __props.regionTrail])
+        }, [
+          renderSlot(_ctx.$slots, "trail")
+        ], 2)
+      ]);
+    };
+  }
+});
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "VRailTile",
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    tag: {
+      type: String,
+      default: "button"
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    regionIcon: {
+      type: String,
+      default: ""
+    },
+    regionLabel: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["click"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const { selectedRailTile: selectedRailTile2 } = useRail();
+    const active = inject("active");
+    const hover = inject("hover");
+    const activate = () => {
+      selectedRailTile2.value = props.value;
+      emit("click");
+    };
+    const clickHandler = (event) => {
+      event.preventDefault();
+      activate();
+    };
+    const keydownHandler = (event) => {
+      if (["Enter", " "].includes(event.key))
+        event.preventDefault();
+      if (event.key === "Enter")
+        activate();
+    };
+    const keyupHandler = (event) => {
+      if (event.key === " ") {
+        event.preventDefault();
+        activate();
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps({
+        onClick: clickHandler,
+        onKeydown: keydownHandler,
+        onKeyup: keyupHandler
+      }, unref(attrs), {
+        class: `app-rail-tile unstyled grid aspect-square w-full cursor-pointer place-content-center place-items-center space-y-1.5 ${unref(hover)} ${unref(selectedRailTile2) === __props.value ? `${unref(active)}` : ""}`
+      }), {
+        default: withCtx(() => [
+          _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(`app-rail-tile-icon ${__props.regionIcon}`)
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 2)) : createCommentVNode("", true),
+          __props.label ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(`app-rail-tile-label text-center text-xs font-bold ${__props.regionLabel}`)
+          }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const _hoisted_1$2 = { class: "vuetiful-shell flex h-full w-full flex-col overflow-hidden" };
+const _hoisted_2$2 = { class: "vuetiful-shell-content flex h-full w-full flex-auto overflow-hidden" };
+const _sfc_main$9 = defineComponent({
+  __name: "VShell",
+  props: {
+    regionPage: { type: String, default: "" },
+    slotFixedHeader: { type: String, default: "z-10" },
+    slotSidebarLeft: { type: String, default: "w-auto" },
+    slotSidebarRight: { type: String, default: "w-auto" },
+    slotPageHeader: { type: String, default: "" },
+    slotPageContent: { type: String, default: "" },
+    slotPageFooter: { type: String, default: "" },
+    slotFixedFooter: { type: String, default: "" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        _ctx.$slots.fixedHeader ? (openBlock(), createElementBlock("header", {
+          key: 0,
+          class: normalizeClass(`vuetiful-fixed-header ${__props.slotFixedHeader}`)
+        }, [
+          renderSlot(_ctx.$slots, "fixedHeader")
+        ], 2)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2$2, [
+          _ctx.$slots.sidebarLeft ? (openBlock(), createElementBlock("aside", {
+            key: 0,
+            class: normalizeClass(`vuetiful-sidebar-left overflow-y-auto overflow-x-hidden ${__props.slotSidebarLeft}`)
+          }, [
+            renderSlot(_ctx.$slots, "sidebarLeft")
+          ], 2)) : createCommentVNode("", true),
+          createElementVNode("div", {
+            tabindex: "-1",
+            class: normalizeClass(`vuetiful-page flex flex-1 flex-col overflow-x-hidden ${(_a = __props.regionPage) != null ? _a : ""}`)
+          }, [
+            _ctx.$slots.pageHeader ? (openBlock(), createElementBlock("header", {
+              key: 0,
+              class: normalizeClass(`vuetiful-page-header flex-none ${__props.slotPageHeader}`)
+            }, [
+              renderSlot(_ctx.$slots, "pageHeader")
+            ], 2)) : createCommentVNode("", true),
+            createElementVNode("main", {
+              class: normalizeClass(`vuetiful-page-content flex-auto ${__props.slotPageContent}`)
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 2),
+            _ctx.$slots.pageFooter ? (openBlock(), createElementBlock("footer", {
+              key: 1,
+              class: normalizeClass(`vuetiful-page-footer flex-none ${__props.slotPageFooter}`)
+            }, [
+              renderSlot(_ctx.$slots, "pageFooter")
+            ], 2)) : createCommentVNode("", true)
+          ], 2),
+          _ctx.$slots.sidebarRight ? (openBlock(), createElementBlock("aside", {
+            key: 1,
+            class: normalizeClass(`vuetiful-sidebar-right flex-none overflow-y-auto overflow-x-hidden ${__props.slotSidebarRight}`)
+          }, [
+            renderSlot(_ctx.$slots, "sidebarRight")
+          ], 2)) : createCommentVNode("", true)
+        ]),
+        _ctx.$slots.fixedFooter ? (openBlock(), createElementBlock("footer", {
+          key: 1,
+          class: normalizeClass(`vuetiful-fixed-footer ${__props.slotFixedFooter}`)
+        }, [
+          renderSlot(_ctx.$slots, "fixedFooter")
+        ], 2)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
 var VListboxButton_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _withScopeId = (n2) => (pushScopeId("data-v-85546624"), n2 = n2(), popScopeId(), n2);
 const _hoisted_1$1 = { key: 0 };
@@ -48481,7 +48675,7 @@ const _hoisted_3$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createEl
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z" })
 ], -1));
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "VListboxButton",
   props: {
     as: {
@@ -48515,8 +48709,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VListboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-85546624"]]);
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+var VListboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-85546624"]]);
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "VListboxItems",
   props: {
     as: {
@@ -48551,7 +48745,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "VListboxLabel",
   props: {
     as: {
@@ -48570,7 +48764,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "VListbox",
   props: {
     by: {
@@ -48663,7 +48857,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => parentModelValue.value = $event)
       }, {
         default: withCtx(() => [
-          __props.labelText ? (openBlock(), createBlock(_sfc_main$3, {
+          __props.labelText ? (openBlock(), createBlock(_sfc_main$6, {
             key: 0,
             class: normalizeClass(__props.labelClasses)
           }, {
@@ -48672,12 +48866,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["class"])) : createCommentVNode("", true),
-          createVNode(VListboxButton, { "data-test": "v-listbox-button" }, {
+          createVNode(VListboxButton, {
+            "data-test": "v-listbox-button",
+            class: normalizeClass(`${__props.background} ${__props.text}`)
+          }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(unref(showText)), 1)
             ]),
             _: 1
-          }),
+          }, 8, ["class"]),
           createVNode(Transition, {
             "enter-active-class": "transition duration-150 ease-in-out",
             "enter-from-class": "opacity-0",
@@ -48687,7 +48884,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             "leave-to-class": "opacity-0"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$4, { class: "absolute mt-1 min-w-full" }, {
+              createVNode(_sfc_main$7, { class: "absolute mt-1 min-w-full" }, {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "default")
                 ]),
@@ -48702,7 +48899,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "VListboxItem",
   props: {
     value: {
@@ -48728,40 +48925,180 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "VTab",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const activeClass = inject("active");
+    const hoverClass = inject("hover");
+    const vertical = inject("vertical");
+    const classTab = inject("classTab");
+    const hideSeparator = inject("hideSeparator");
+    const tabClass = computed(() => {
+      return classTab ? classTab : "w-full px-4 py-2";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ye), {
+        disabled: __props.disabled,
+        class: normalizeClass(`flex ${unref(vertical) ? "flex-row justify-between" : "flex-col"}`)
+      }, {
+        default: withCtx(({ selected }) => [
+          createElementVNode("div", {
+            "data-test": "slot-container",
+            class: normalizeClass(`text-base rounded-token ${selected ? unref(activeClass) : unref(hoverClass)} ${unref(tabClass)}`)
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 2),
+          withDirectives(createElementVNode("div", {
+            class: normalizeClass(`z-10 border-surface-900-50-token ${unref(vertical) ? "mr-[-2px] h-full border-r-2" : "mb-[-2px] border-b-2"}`)
+          }, null, 2), [
+            [vShow, selected && !unref(hideSeparator)]
+          ])
+        ]),
+        _: 3
+      }, 8, ["disabled", "class"]);
+    };
+  }
+});
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "VTabPanel",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ge), null, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "VTabs",
+  props: {
+    hideSeparator: {
+      type: Boolean,
+      default: false
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    active: {
+      type: String,
+      default: ""
+    },
+    hover: {
+      type: String,
+      default: "hover:variant-ghost"
+    },
+    classPanels: {
+      type: String,
+      default: ""
+    },
+    classTabs: {
+      type: String,
+      default: ""
+    },
+    classTab: {
+      type: String,
+      default: ""
+    },
+    classSeparator: {
+      type: String,
+      default: "border border-surface-400-500-token"
+    },
+    defaultIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    provide("active", props.active);
+    provide("hover", props.hover);
+    provide("vertical", props.vertical);
+    provide("classTab", props.classTab);
+    provide("hideSeparator", props.hideSeparator);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(xe), {
+        as: "div",
+        vertical: __props.vertical,
+        defaultIndex: __props.defaultIndex,
+        class: normalizeClass(`${__props.vertical ? "flex" : ""}`)
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Ie), {
+            "data-test": "vuetiful-tab-list",
+            class: normalizeClass(`vuetiful-tab-list flex ${__props.vertical ? "flex-col" : ""} ${__props.vertical ? "!rounded-br-none !rounded-tr-none" : "!rounded-bl-none !rounded-br-none"} rounded-container-token ${__props.classTabs}`)
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "tabs")
+            ]),
+            _: 3
+          }, 8, ["class"]),
+          !__props.hideSeparator ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            "data-test": "vuetiful-tab-separator",
+            class: normalizeClass(`${__props.classSeparator}`)
+          }, null, 2)) : createCommentVNode("", true),
+          createVNode(unref(Se), {
+            "data-test": "vuetiful-tab-panels",
+            class: normalizeClass(`vuetiful-tab-panels ${__props.vertical ? "!rounded-bl-none !rounded-tl-none" : "!rounded-tl-none !rounded-tr-none"} rounded-container-token ${__props.classPanels}`)
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["class"])
+        ]),
+        _: 3
+      }, 8, ["vertical", "defaultIndex", "class"]);
+    };
+  }
+});
 var components = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
-  VAvatar: _sfc_main$o,
-  VButton: _sfc_main$m,
+  VAvatar: _sfc_main$r,
+  VButton: _sfc_main$p,
   VBadge,
   VChip,
-  VCodeBlock: _sfc_main$k,
+  VCodeBlock: _sfc_main$n,
   VLightSwitch,
-  VRadioGroup: _sfc_main$h,
-  VRadioItem: _sfc_main$g,
-  VRadioLabel: _sfc_main$f,
-  VRadioDescription: _sfc_main$i,
-  VSwitchGroup: _sfc_main$c,
-  VSwitchLabel: _sfc_main$b,
-  VSwitchDescription: _sfc_main$d,
-  VSwitch: _sfc_main$e,
-  VRail: _sfc_main$9,
-  VRailTile: _sfc_main$8,
-  VShell: _sfc_main$7,
-  VDrawer: _sfc_main$a,
+  VRadioGroup: _sfc_main$k,
+  VRadioItem: _sfc_main$j,
+  VRadioLabel: _sfc_main$i,
+  VRadioDescription: _sfc_main$l,
+  VSwitchGroup: _sfc_main$f,
+  VSwitchLabel: _sfc_main$e,
+  VSwitchDescription: _sfc_main$g,
+  VSwitch: _sfc_main$h,
+  VDrawer: _sfc_main$d,
+  VListbox: _sfc_main$5,
+  VListboxButton,
+  VListboxItem: _sfc_main$4,
+  VListboxItems: _sfc_main$7,
+  VListboxLabel: _sfc_main$6,
   VPreview,
-  VListbox: _sfc_main$2,
-  VListboxItem: _sfc_main$1,
-  VListboxItems: _sfc_main$4,
-  VListboxLabel: _sfc_main$3,
-  VListboxButton
+  VRail: _sfc_main$b,
+  VRailTile: _sfc_main$a,
+  VShell: _sfc_main$9,
+  VTab: _sfc_main$3,
+  VTabPanel: _sfc_main$2,
+  VTabs: _sfc_main$1
 });
 var main = "";
 var tailwind = "";
 const _sfc_main = defineComponent({
   components: {
     VLightSwitch,
-    VButton: _sfc_main$m
+    VButton: _sfc_main$p
   },
   props: {
     bgLight: {
@@ -49001,4 +49338,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { themeSwitcher as ThemeSwitcher, _sfc_main$o as VAvatar, VBadge, _sfc_main$m as VButton, VChip, _sfc_main$k as VCodeBlock, _sfc_main$a as VDrawer, VLightSwitch, _sfc_main$2 as VListbox, VListboxButton, _sfc_main$1 as VListboxItem, _sfc_main$4 as VListboxItems, _sfc_main$3 as VListboxLabel, VPreview, _sfc_main$i as VRadioDescription, _sfc_main$h as VRadioGroup, _sfc_main$g as VRadioItem, _sfc_main$f as VRadioLabel, _sfc_main$9 as VRail, _sfc_main$8 as VRailTile, _sfc_main$7 as VShell, _sfc_main$e as VSwitch, _sfc_main$d as VSwitchDescription, _sfc_main$c as VSwitchGroup, _sfc_main$b as VSwitchLabel, index as default, useDarkMode, useDrawer, useHighlight, useRail, useTheme, clipboard as vClipboard };
+export { themeSwitcher as ThemeSwitcher, _sfc_main$r as VAvatar, VBadge, _sfc_main$p as VButton, VChip, _sfc_main$n as VCodeBlock, _sfc_main$d as VDrawer, VLightSwitch, _sfc_main$5 as VListbox, VListboxButton, _sfc_main$4 as VListboxItem, _sfc_main$7 as VListboxItems, _sfc_main$6 as VListboxLabel, VPreview, _sfc_main$l as VRadioDescription, _sfc_main$k as VRadioGroup, _sfc_main$j as VRadioItem, _sfc_main$i as VRadioLabel, _sfc_main$b as VRail, _sfc_main$a as VRailTile, _sfc_main$9 as VShell, _sfc_main$h as VSwitch, _sfc_main$g as VSwitchDescription, _sfc_main$f as VSwitchGroup, _sfc_main$e as VSwitchLabel, _sfc_main$3 as VTab, _sfc_main$2 as VTabPanel, _sfc_main$1 as VTabs, index as default, useDarkMode, useDrawer, useHighlight, useRail, useTheme, clipboard as vClipboard };