@code-coaching/vuetiful 0.19.0 → 0.21.0

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, renderList, pushScopeId, popScopeId, mergeProps, vShow, resolveComponent } from "vue";
-const _hoisted_1$d = ["src", "alt"];
-const _hoisted_2$7 = {
+const _hoisted_1$i = ["src", "alt"];
+const _hoisted_2$9 = {
   key: 1,
   class: "avatar-initials h-full w-full",
   viewBox: "0 0 512 512"
 };
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "VAvatar",
   props: {
     initials: { type: String, default: "" },
@@ -39,7 +39,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
           src: imgSrc.value,
           alt: __props.alt,
           onError: _cache[0] || (_cache[0] = () => imgSrc.value = __props.fallback)
-        }, null, 40, _hoisted_1$d)) : (openBlock(), createElementBlock("svg", _hoisted_2$7, [
+        }, null, 40, _hoisted_1$i)) : (openBlock(), createElementBlock("svg", _hoisted_2$9, [
           createElementVNode("text", {
             x: "50%",
             y: "50%",
@@ -61,17 +61,17 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$s = {};
-const _hoisted_1$c = {
+const _sfc_main$x = {};
+const _hoisted_1$h = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-badge badge`)
 };
-function _sfc_render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$c, [
+function _sfc_render$4(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$h, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$3]]);
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$4]]);
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "VButton",
   props: {
     icon: {
@@ -121,16 +121,16 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$q = {};
-const _hoisted_1$b = {
+const _sfc_main$v = {};
+const _hoisted_1$g = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-chip chip`)
 };
-function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$b, [
+function _sfc_render$3(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$g, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$2]]);
+var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$3]]);
 var deepFreezeEs6 = { exports: {} };
 function deepFreeze(obj) {
   if (obj instanceof Map) {
@@ -46471,12 +46471,12 @@ const useHighlight = () => {
   };
 };
 var githubDark = "";
-const _hoisted_1$a = { class: "code-block max-w-full bg-neutral-900/90 text-sm text-white shadow rounded-container-token" };
-const _hoisted_2$6 = {
+const _hoisted_1$f = { class: "code-block max-w-full bg-neutral-900/90 text-sm text-white shadow rounded-container-token" };
+const _hoisted_2$8 = {
   class: /* @__PURE__ */ normalizeClass(`code-block-language`)
 };
-const _hoisted_3$4 = ["innerHTML"];
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _hoisted_3$5 = ["innerHTML"];
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "VCodeBlock",
   props: {
     language: {
@@ -46534,12 +46534,12 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       emit("copy");
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
         createElementVNode("header", {
           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$6, toDisplayString(languageFormatter(__props.language)), 1),
-          withDirectives((openBlock(), createBlock(unref(_sfc_main$r), {
+          createElementVNode("span", _hoisted_2$8, toDisplayString(languageFormatter(__props.language)), 1),
+          withDirectives((openBlock(), createBlock(unref(_sfc_main$w), {
             class: normalizeClass(`code-block-btn ${__props.buttonClass}`),
             onClick: _cache[0] || (_cache[0] = ($event) => onCopyClick())
           }, {
@@ -46557,13 +46557,13 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           createElementVNode("code", {
             class: normalizeClass(`code-block-code language-${__props.language}`),
             innerHTML: unref(highlight2)(props.code, props.language)
-          }, null, 10, _hoisted_3$4)
+          }, null, 10, _hoisted_3$5)
         ], 2)
       ]);
     };
   }
 });
-const _sfc_main$o = defineComponent({
+const _sfc_main$t = defineComponent({
   props: {
     bgLight: {
       type: String,
@@ -46654,9 +46654,9 @@ const _sfc_main$o = defineComponent({
     };
   }
 });
-const _hoisted_1$9 = ["aria-checked", "title"];
-const _hoisted_2$5 = ["d"];
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$e = ["aria-checked", "title"];
+const _hoisted_2$7 = ["d"];
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(`lightswitch-track ${_ctx.classesTrack}`),
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onToggleHandler && _ctx.onToggleHandler(...args)),
@@ -46680,12 +46680,12 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         createElementVNode("path", {
           fill: "currentColor",
           d: _ctx.currentMode ? _ctx.svgPath.sun : _ctx.svgPath.moon
-        }, null, 8, _hoisted_2$5)
+        }, null, 8, _hoisted_2$7)
       ], 2))
     ], 2)
-  ], 42, _hoisted_1$9);
+  ], 42, _hoisted_1$e);
 }
-var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$1]]);
+var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$2]]);
 function u$2(r2, n2, ...a2) {
   if (r2 in n2) {
     let e2 = n2[r2];
@@ -47796,7 +47796,7 @@ let j = Symbol("TabsSSRContext"), xe = defineComponent({ name: "TabGroup", emits
     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$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "VRadioDescription",
   props: {
     as: {
@@ -47815,7 +47815,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "VRadioGroup",
   props: {
     as: {
@@ -47883,7 +47883,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "VRadioItem",
   props: {
     value: {
@@ -47909,7 +47909,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "VRadioLabel",
   props: {
     as: {
@@ -47928,11 +47928,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$8 = {
+const _hoisted_1$d = {
   key: 0,
   class: "sr-only"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "VSwitch",
   props: {
     modelValue: {
@@ -48008,7 +48008,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: normalizeClass(`slide-toggle-track flex transition-all duration-[150ms] border-token rounded-token ${unref(trackSize)} ${__props.disabled ? "cursor-not-allowed" : "cursor-pointer"} ${__props.switchClass}`)
           }, [
-            _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$8, [
+            _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$d, [
               renderSlot(_ctx.$slots, "default")
             ])) : createCommentVNode("", true),
             createElementVNode("div", {
@@ -48021,7 +48021,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "VSwitchDescription",
   props: {
     as: {
@@ -48040,7 +48040,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "VSwitchGroup",
   props: {
     as: {
@@ -48059,7 +48059,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "VSwitchLabel",
   props: {
     as: {
@@ -48204,8 +48204,8 @@ const useDarkMode = () => {
     MODE
   };
 };
-const _hoisted_1$7 = ["aria-labelledby", "aria-describedby"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _hoisted_1$c = ["aria-labelledby", "aria-describedby"];
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "VDrawer",
   props: {
     regionBackdrop: {
@@ -48269,7 +48269,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               "aria-describedby": unref(describedby)
             }, [
               renderSlot(_ctx.$slots, "default")
-            ], 10, _hoisted_1$7)) : createCommentVNode("", true)
+            ], 10, _hoisted_1$c)) : createCommentVNode("", true)
           ]),
           _: 3
         }, 8, ["name"]),
@@ -48293,59 +48293,59 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 var VPreview_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId$2 = (n2) => (pushScopeId("data-v-0d055d3d"), n2 = n2(), popScopeId(), n2);
-const _hoisted_1$6 = { class: "vuetiful-previewer overflow-hidden shadow-2xl shadow-surface-500/10 rounded-container-token dark:shadow-black/10" };
-const _hoisted_2$4 = { class: "flex items-center gap-2" };
-const _hoisted_3$3 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
+const _withScopeId$3 = (n2) => (pushScopeId("data-v-0d055d3d"), n2 = n2(), popScopeId(), n2);
+const _hoisted_1$b = { class: "vuetiful-previewer overflow-hidden shadow-2xl shadow-surface-500/10 rounded-container-token dark:shadow-black/10" };
+const _hoisted_2$6 = { class: "flex items-center gap-2" };
+const _hoisted_3$4 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 576 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z" })
 ], -1));
-const _hoisted_4$1 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_4$2 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 640 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z" })
 ], -1));
-const _hoisted_5$1 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_5$2 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 384 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM144 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160c-8.8 0-16 7.2-16 16zM304 64H80V384H304V64z" })
 ], -1));
-const _hoisted_6$1 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_6$2 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 576 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64H240l-10.7 32H160c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H346.7L336 416H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM512 64V352H64V64H512z" })
 ], -1));
-const _hoisted_7 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_7$1 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M0 32C0 14.3 14.3 0 32 0H160c17.7 0 32 14.3 32 32V416c0 53-43 96-96 96s-96-43-96-96V32zM223.6 425.9c.3-3.3 .4-6.6 .4-9.9V154l75.4-75.4c12.5-12.5 32.8-12.5 45.3 0l90.5 90.5c12.5 12.5 12.5 32.8 0 45.3L223.6 425.9zM182.8 512l192-192H480c17.7 0 32 14.3 32 32V480c0 17.7-14.3 32-32 32H182.8zM128 64H64v64h64V64zM64 192v64h64V192H64zM96 440a24 24 0 1 0 0-48 24 24 0 1 0 0 48z" })
 ], -1));
-const _hoisted_8 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_8$1 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" })
 ], -1));
-const _hoisted_9 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_9$1 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 }, [
   /* @__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$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "VPreview",
   props: {
     hideMobileToggle: {
@@ -48401,36 +48401,36 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const swatches = ref(false);
     const toggleSwatches = () => swatches.value = !swatches.value;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
         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$4, [
-            createVNode(unref(_sfc_main$m), {
+          createElementVNode("div", _hoisted_2$6, [
+            createVNode(unref(_sfc_main$r), {
               modelValue: tabView.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tabView.value = $event)
             }, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$l), {
+                createVNode(unref(_sfc_main$q), {
                   "data-test": "radio-item-preview",
                   value: "preview",
                   title: "Preview"
                 }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "preview-item", {}, () => [
-                      _hoisted_3$3
+                      _hoisted_3$4
                     ], true)
                   ]),
                   _: 3
                 }),
-                createVNode(unref(_sfc_main$l), {
+                createVNode(unref(_sfc_main$q), {
                   "data-test": "radio-item-code",
                   value: "code",
                   title: "Code"
                 }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "code-item", {}, () => [
-                      _hoisted_4$1
+                      _hoisted_4$2
                     ], true)
                   ]),
                   _: 3
@@ -48438,28 +48438,28 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               ]),
               _: 3
             }, 8, ["modelValue"]),
-            !__props.hideMobileToggle && tabView.value === "preview" ? (openBlock(), createBlock(unref(_sfc_main$m), {
+            !__props.hideMobileToggle && tabView.value === "preview" ? (openBlock(), createBlock(unref(_sfc_main$r), {
               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$l), {
+                createVNode(unref(_sfc_main$q), {
                   "data-test": "radio-item-mobile",
                   value: "mobile"
                 }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "mobile-item", {}, () => [
-                      _hoisted_5$1
+                      _hoisted_5$2
                     ], true)
                   ]),
                   _: 3
                 }),
-                createVNode(unref(_sfc_main$l), { value: "full" }, {
+                createVNode(unref(_sfc_main$q), { value: "full" }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "desktop-item", {}, () => [
-                      _hoisted_6$1
+                      _hoisted_6$2
                     ], true)
                   ]),
                   _: 3
@@ -48468,7 +48468,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               _: 3
             }, 8, ["modelValue"])) : createCommentVNode("", true)
           ]),
-          !__props.hideSwatches ? (openBlock(), createBlock(unref(_sfc_main$r), {
+          !__props.hideSwatches ? (openBlock(), createBlock(unref(_sfc_main$w), {
             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`),
@@ -48477,13 +48477,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "swatchbook-item", {}, () => [
-                _hoisted_7
+                _hoisted_7$1
               ], true)
             ]),
             _: 3
           }, 8, ["class"])) : createCommentVNode("", true)
         ], 2),
-        swatches.value ? (openBlock(), createBlock(unref(_sfc_main$m), {
+        swatches.value ? (openBlock(), createBlock(unref(_sfc_main$r), {
           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`),
@@ -48494,7 +48494,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(Object.entries(backgrounds), ([key, value], index2) => {
-              return openBlock(), createBlock(unref(_sfc_main$l), {
+              return openBlock(), createBlock(unref(_sfc_main$q), {
                 value: key,
                 key: index2,
                 class: normalizeClass(`${value} flex aspect-square cursor-pointer items-center justify-center rounded ring-[1px] ring-surface-500/50`),
@@ -48502,10 +48502,10 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               }, {
                 default: withCtx(() => [
                   index2 === 0 && chosenBackground.value !== key ? renderSlot(_ctx.$slots, "cancel-item", { key: 0 }, () => [
-                    _hoisted_8
+                    _hoisted_8$1
                   ], true) : createCommentVNode("", true),
                   chosenBackground.value === key ? renderSlot(_ctx.$slots, "selected-item", { key: 1 }, () => [
-                    _hoisted_9
+                    _hoisted_9$1
                   ], true) : createCommentVNode("", true)
                 ]),
                 _: 2
@@ -48547,9 +48547,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-0d055d3d"]]);
-const _hoisted_1$5 = { class: "v-rail grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20" };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-0d055d3d"]]);
+const _hoisted_1$a = { class: "v-rail grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20" };
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "VRail",
   props: {
     active: {
@@ -48578,7 +48578,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     provide("active", props.active);
     provide("hover", props.hover);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         createElementVNode("div", {
           class: normalizeClass(["v-bar-lead", __props.regionLead])
         }, [
@@ -48598,7 +48598,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "VRailTile",
   props: {
     value: {
@@ -48674,9 +48674,9 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = { 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$b = defineComponent({
+const _hoisted_1$9 = { class: "vuetiful-shell flex h-full w-full flex-col overflow-hidden" };
+const _hoisted_2$5 = { class: "vuetiful-shell-content flex h-full w-full flex-auto overflow-hidden" };
+const _sfc_main$g = defineComponent({
   __name: "VShell",
   props: {
     regionPage: { type: String, default: "" },
@@ -48691,14 +48691,14 @@ const _sfc_main$b = defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       var _a;
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
         _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, [
+        createElementVNode("div", _hoisted_2$5, [
           _ctx.$slots.sidebarLeft ? (openBlock(), createElementBlock("aside", {
             key: 0,
             class: normalizeClass(`vuetiful-sidebar-left overflow-y-auto overflow-x-hidden ${__props.slotSidebarLeft}`)
@@ -48745,23 +48745,23 @@ const _sfc_main$b = defineComponent({
   }
 });
 var VListboxButton_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId$1 = (n2) => (pushScopeId("data-v-85546624"), n2 = n2(), popScopeId(), n2);
-const _hoisted_1$3 = { key: 0 };
-const _hoisted_2$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
+const _withScopeId$2 = (n2) => (pushScopeId("data-v-85546624"), n2 = n2(), popScopeId(), n2);
+const _hoisted_1$8 = { key: 0 };
+const _hoisted_2$4 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M233.4 406.6c12.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 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" })
 ], -1));
-const _hoisted_3$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_3$3 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 }, [
   /* @__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$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "VListboxButton",
   props: {
     as: {
@@ -48781,12 +48781,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(({ open }) => [
           renderSlot(_ctx.$slots, "default", {}, void 0, true),
-          !__props.hideIcon ? (openBlock(), createElementBlock("span", _hoisted_1$3, [
+          !__props.hideIcon ? (openBlock(), createElementBlock("span", _hoisted_1$8, [
             !open ? renderSlot(_ctx.$slots, "open-icon", { key: 0 }, () => [
-              _hoisted_2$2
+              _hoisted_2$4
             ], true) : createCommentVNode("", true),
             open ? renderSlot(_ctx.$slots, "close-icon", { key: 1 }, () => [
-              _hoisted_3$2
+              _hoisted_3$3
             ], true) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
         ]),
@@ -48795,8 +48795,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VListboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-85546624"]]);
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+var VListboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-85546624"]]);
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "VListboxItems",
   props: {
     as: {
@@ -48831,7 +48831,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "VListboxLabel",
   props: {
     as: {
@@ -48850,7 +48850,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "VListbox",
   props: {
     by: {
@@ -48943,7 +48943,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => parentModelValue.value = $event)
       }, {
         default: withCtx(() => [
-          __props.labelText ? (openBlock(), createBlock(_sfc_main$8, {
+          __props.labelText ? (openBlock(), createBlock(_sfc_main$d, {
             key: 0,
             class: normalizeClass(__props.labelClasses)
           }, {
@@ -48952,12 +48952,15 @@ const _sfc_main$7 = /* @__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",
@@ -48967,7 +48970,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             "leave-to-class": "opacity-0"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$9, { class: "absolute mt-1 min-w-full" }, {
+              createVNode(_sfc_main$e, { class: "absolute mt-1 min-w-full" }, {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "default")
                 ]),
@@ -48982,7 +48985,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "VListboxItem",
   props: {
     value: {
@@ -49008,7 +49011,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "VTab",
   props: {
     disabled: {
@@ -49048,7 +49051,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "VTabPanel",
   setup(__props) {
     return (_ctx, _cache) => {
@@ -49061,7 +49064,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "VTabs",
   props: {
     hideSeparator: {
@@ -49145,8 +49148,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = { class: "vuetiful-accordion flex w-full flex-col gap-1" };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = { class: "vuetiful-accordion flex w-full flex-col gap-1" };
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "VAccordion",
   props: {
     hover: {
@@ -49163,30 +49166,30 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     provide("hover", props.hover);
     provide("background", props.background);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
         renderSlot(_ctx.$slots, "default")
       ]);
     };
   }
 });
 var VAccordionItem_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId = (n2) => (pushScopeId("data-v-75f8b8b4"), n2 = n2(), popScopeId(), n2);
-const _hoisted_1$1 = { class: "vuetiful-accordion-title" };
-const _hoisted_2$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+const _withScopeId$1 = (n2) => (pushScopeId("data-v-75f8b8b4"), n2 = n2(), popScopeId(), n2);
+const _hoisted_1$6 = { class: "vuetiful-accordion-title" };
+const _hoisted_2$3 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 448 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z" })
 ], -1));
-const _hoisted_3$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_3$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 448 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z" })
 ], -1));
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "VAccordionItem",
   props: {
     title: {
@@ -49210,12 +49213,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               createElementVNode("div", {
                 class: normalizeClass(["flex items-center justify-between p-4 rounded-container-token hover:cursor-pointer", `${unref(background)} ${unref(hover)} ${open ? "!rounded-bl-none !rounded-br-none" : ""}`])
               }, [
-                createElementVNode("span", _hoisted_1$1, toDisplayString(__props.title), 1),
+                createElementVNode("span", _hoisted_1$6, toDisplayString(__props.title), 1),
                 !open ? renderSlot(_ctx.$slots, "open-item", { key: 0 }, () => [
-                  _hoisted_2$1
+                  _hoisted_2$3
                 ], true) : createCommentVNode("", true),
                 open ? renderSlot(_ctx.$slots, "close-item", { key: 1 }, () => [
-                  _hoisted_3$1
+                  _hoisted_3$2
                 ], true) : createCommentVNode("", true)
               ], 2)
             ]),
@@ -49235,46 +49238,302 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-75f8b8b4"]]);
+var VAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-75f8b8b4"]]);
+var VAlert_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _withScopeId = (n2) => (pushScopeId("data-v-5669e826"), n2 = n2(), popScopeId(), n2);
+const _hoisted_1$5 = { key: 0 };
+const _hoisted_2$2 = {
+  key: 0,
+  class: "icon",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 512 512"
+};
+const _hoisted_3$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" }, null, -1));
+const _hoisted_4$1 = [
+  _hoisted_3$1
+];
+const _hoisted_5$1 = {
+  key: 1,
+  class: "icon",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 512 512"
+};
+const _hoisted_6$1 = /* @__PURE__ */ _withScopeId(() => /* @__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" }, null, -1));
+const _hoisted_7 = [
+  _hoisted_6$1
+];
+const _hoisted_8 = {
+  key: 2,
+  class: "icon",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 512 512"
+};
+const _hoisted_9 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" }, null, -1));
+const _hoisted_10 = [
+  _hoisted_9
+];
+const _hoisted_11 = {
+  key: 3,
+  class: "icon",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 512 512"
+};
+const _hoisted_12 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" }, null, -1));
+const _hoisted_13 = [
+  _hoisted_12
+];
+const _hoisted_14 = { class: "vuetiful-alert-message flex-auto" };
+const _hoisted_15 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1));
+const _hoisted_16 = [
+  _hoisted_15
+];
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "VAlert",
+  props: {
+    hideIcon: {
+      type: Boolean,
+      default: false
+    },
+    hideClose: {
+      type: Boolean,
+      default: false
+    },
+    show: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["close"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const typeBackground = computed(() => {
+      switch (props.type) {
+        case "info":
+          return "variant-filled";
+        case "success":
+          return "variant-filled-success";
+        case "warning":
+          return "variant-filled-warning";
+        case "error":
+          return "variant-filled-error";
+        default:
+          return "variant-filled-primary";
+      }
+    });
+    const close = () => emit("close");
+    const handleKeydown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        close();
+      }
+    };
+    return (_ctx, _cache) => {
+      return __props.show ? (openBlock(), createElementBlock("aside", {
+        key: 0,
+        class: normalizeClass(`vuetiful-alert flex w-full flex-row items-center gap-4 p-4 border-token rounded-container-token ${unref(typeBackground)}`)
+      }, [
+        !__props.hideIcon ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
+          _ctx.$slots.pre ? renderSlot(_ctx.$slots, "pre", { key: 0 }, void 0, true) : createCommentVNode("", true),
+          !_ctx.$slots.pre ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            __props.type === "info" ? (openBlock(), createElementBlock("svg", _hoisted_2$2, _hoisted_4$1)) : createCommentVNode("", true),
+            __props.type === "success" ? (openBlock(), createElementBlock("svg", _hoisted_5$1, _hoisted_7)) : createCommentVNode("", true),
+            __props.type === "warning" ? (openBlock(), createElementBlock("svg", _hoisted_8, _hoisted_10)) : createCommentVNode("", true),
+            __props.type === "error" ? (openBlock(), createElementBlock("svg", _hoisted_11, _hoisted_13)) : createCommentVNode("", true)
+          ], 64)) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_14, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
+        renderSlot(_ctx.$slots, "actions", {}, void 0, true),
+        !__props.hideClose ? (openBlock(), createElementBlock("svg", {
+          key: 1,
+          "data-test": "close",
+          tabindex: "0",
+          onKeydown: handleKeydown,
+          onClick: close,
+          class: "icon hover:cursor-pointer",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 384 512"
+        }, _hoisted_16, 32)) : createCommentVNode("", true)
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
+var VAlert = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-5669e826"]]);
+var VCard_vue_vue_type_style_index_0_lang = "";
+const _hoisted_1$4 = ["tabindex"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "VCard",
+  props: {
+    hideSeparator: {
+      type: Boolean,
+      default: false
+    },
+    background: {
+      type: String,
+      default: "bg-surface-200-700-token"
+    },
+    text: {
+      type: String,
+      default: "text-surface-900-50-token"
+    },
+    horizontal: {
+      type: Boolean,
+      default: false
+    },
+    clickable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["click"],
+  setup(__props, { emit }) {
+    const props = __props;
+    provide("hideSeparator", props.hideSeparator);
+    const onClick = () => {
+      if (!props.clickable)
+        return;
+      emit("click");
+    };
+    const onKeydown = (event) => {
+      if (!props.clickable)
+        return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        emit("click");
+      }
+      if (event.key === " ") {
+        event.preventDefault();
+        emit("click");
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        onClick,
+        onKeydown,
+        tabindex: __props.clickable ? 0 : void 0,
+        class: normalizeClass(`vuetiful-card flex border-token rounded-container-token ring-outline-token ${__props.horizontal ? "flex-row" : "flex-col"} ${__props.background} ${__props.text} ${__props.clickable ? "card-hover hover:cursor-pointer" : ""}`)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 42, _hoisted_1$4);
+    };
+  }
+});
+const _sfc_main$3 = {};
+const _hoisted_1$3 = {
+  "data-test": "vuetiful-card-body-content",
+  class: "vuetiful-card-body p-4"
+};
+function _sfc_render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$3, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+var VCardBody = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$1]]);
+const _hoisted_1$2 = {
+  key: 0,
+  "data-test": "vuetiful-card-footer-separator",
+  class: "opacity-90"
+};
+const _hoisted_2$1 = {
+  "data-test": "vuetiful-card-footer-content",
+  class: "vuetiful-card-footer p-4"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "VCardFooter",
+  setup(__props) {
+    const hideSeparator = inject("hideSeparator", false);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        !unref(hideSeparator) ? (openBlock(), createElementBlock("hr", _hoisted_1$2)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2$1, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ], 64);
+    };
+  }
+});
+var VCardHeader_vue_vue_type_style_index_0_lang = "";
+const _hoisted_1$1 = {
+  key: 0,
+  "data-test": "vuetiful-card-header-separator",
+  class: "opacity-90"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "VCardHeader",
+  setup(__props) {
+    const headerRef = ref();
+    const hasImageAsChild = computed(() => {
+      var _a;
+      const children = (_a = headerRef.value) == null ? void 0 : _a.children;
+      if (!children)
+        return false;
+      const childrenArray = Array.from(children);
+      return childrenArray.some((child) => child.tagName === "IMG");
+    });
+    const hideSeparator = inject("hideSeparator", false);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          ref_key: "headerRef",
+          ref: headerRef,
+          "data-test": "vuetiful-card-header-content",
+          class: normalizeClass(`vuetiful-card-header ${unref(hasImageAsChild) ? "" : "p-4"}`)
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2),
+        !unref(hideSeparator) ? (openBlock(), createElementBlock("hr", _hoisted_1$1)) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
 var components = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
-  VAvatar: _sfc_main$t,
-  VButton: _sfc_main$r,
+  VAvatar: _sfc_main$y,
+  VButton: _sfc_main$w,
   VBadge,
   VChip,
-  VCodeBlock: _sfc_main$p,
+  VCodeBlock: _sfc_main$u,
   VLightSwitch,
-  VRadioGroup: _sfc_main$m,
-  VRadioItem: _sfc_main$l,
-  VRadioLabel: _sfc_main$k,
-  VRadioDescription: _sfc_main$n,
-  VSwitchGroup: _sfc_main$h,
-  VSwitchLabel: _sfc_main$g,
-  VSwitchDescription: _sfc_main$i,
-  VSwitch: _sfc_main$j,
-  VAccordion: _sfc_main$2,
+  VRadioGroup: _sfc_main$r,
+  VRadioItem: _sfc_main$q,
+  VRadioLabel: _sfc_main$p,
+  VRadioDescription: _sfc_main$s,
+  VSwitchGroup: _sfc_main$m,
+  VSwitchLabel: _sfc_main$l,
+  VSwitchDescription: _sfc_main$n,
+  VSwitch: _sfc_main$o,
+  VAccordion: _sfc_main$7,
   VAccordionItem,
-  VDrawer: _sfc_main$f,
-  VListbox: _sfc_main$7,
+  VAlert,
+  VCard: _sfc_main$4,
+  VCardBody,
+  VCardFooter: _sfc_main$2,
+  VCardHeader: _sfc_main$1,
+  VDrawer: _sfc_main$k,
+  VListbox: _sfc_main$c,
   VListboxButton,
-  VListboxItem: _sfc_main$6,
-  VListboxItems: _sfc_main$9,
-  VListboxLabel: _sfc_main$8,
+  VListboxItem: _sfc_main$b,
+  VListboxItems: _sfc_main$e,
+  VListboxLabel: _sfc_main$d,
   VPreview,
-  VRail: _sfc_main$d,
-  VRailTile: _sfc_main$c,
-  VShell: _sfc_main$b,
-  VTab: _sfc_main$5,
-  VTabPanel: _sfc_main$4,
-  VTabs: _sfc_main$3
+  VRail: _sfc_main$i,
+  VRailTile: _sfc_main$h,
+  VShell: _sfc_main$g,
+  VTab: _sfc_main$a,
+  VTabPanel: _sfc_main$9,
+  VTabs: _sfc_main$8
 });
 var main = "";
 var tailwind = "";
 const _sfc_main = defineComponent({
   components: {
     VLightSwitch,
-    VButton: _sfc_main$r
+    VButton: _sfc_main$w
   },
   props: {
     bgLight: {
@@ -49514,4 +49773,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { themeSwitcher as ThemeSwitcher, _sfc_main$2 as VAccordion, VAccordionItem, _sfc_main$t as VAvatar, VBadge, _sfc_main$r as VButton, VChip, _sfc_main$p as VCodeBlock, _sfc_main$f as VDrawer, VLightSwitch, _sfc_main$7 as VListbox, VListboxButton, _sfc_main$6 as VListboxItem, _sfc_main$9 as VListboxItems, _sfc_main$8 as VListboxLabel, VPreview, _sfc_main$n as VRadioDescription, _sfc_main$m as VRadioGroup, _sfc_main$l as VRadioItem, _sfc_main$k as VRadioLabel, _sfc_main$d as VRail, _sfc_main$c as VRailTile, _sfc_main$b as VShell, _sfc_main$j as VSwitch, _sfc_main$i as VSwitchDescription, _sfc_main$h as VSwitchGroup, _sfc_main$g as VSwitchLabel, _sfc_main$5 as VTab, _sfc_main$4 as VTabPanel, _sfc_main$3 as VTabs, index as default, useDarkMode, useDrawer, useHighlight, useRail, useTheme, clipboard as vClipboard };
+export { themeSwitcher as ThemeSwitcher, _sfc_main$7 as VAccordion, VAccordionItem, VAlert, _sfc_main$y as VAvatar, VBadge, _sfc_main$w as VButton, _sfc_main$4 as VCard, VCardBody, _sfc_main$2 as VCardFooter, _sfc_main$1 as VCardHeader, VChip, _sfc_main$u as VCodeBlock, _sfc_main$k as VDrawer, VLightSwitch, _sfc_main$c as VListbox, VListboxButton, _sfc_main$b as VListboxItem, _sfc_main$e as VListboxItems, _sfc_main$d as VListboxLabel, VPreview, _sfc_main$s as VRadioDescription, _sfc_main$r as VRadioGroup, _sfc_main$q as VRadioItem, _sfc_main$p as VRadioLabel, _sfc_main$i as VRail, _sfc_main$h as VRailTile, _sfc_main$g as VShell, _sfc_main$o as VSwitch, _sfc_main$n as VSwitchDescription, _sfc_main$m as VSwitchGroup, _sfc_main$l as VSwitchLabel, _sfc_main$a as VTab, _sfc_main$9 as VTabPanel, _sfc_main$8 as VTabs, index as default, useDarkMode, useDrawer, useHighlight, useRail, useTheme, clipboard as vClipboard };