@stachelock/ui 0.3.1 → 0.5.0

package/dist/DynamicFormField.vue_vue_type_script_setup_true_lang-Ct8b80dM.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DynamicFormField.vue_vue_type_script_setup_true_lang-Ct8b80dM.js","sources":["../src/components/forms/DynamicFormField.vue"],"sourcesContent":["<!--\n  @component DynamicFormField\n  @description Renders a single field based on field configuration.\n  \n  Used by DynamicForm to render individual fields. Maps field type to\n  appropriate input component and passes configuration props.\n  \n  @props\n  - field (DynamicFormField, required): Field configuration object\n  - modelValue (any, optional): Field value via v-model\n  - formData (object, optional): Complete form data for conditional logic\n  \n  @emits\n  - update:modelValue: Emitted when field value changes\n  - field-change: Emitted with field and value on change\n  \n  @example\n  <DynamicFormField\n    :field=\"{ name: 'email', type: 'email', label: 'Email' }\"\n    v-model=\"formData.email\"\n  />\n-->\n<template>\n  <component\n    :is=\"fieldComponent\"\n    v-if=\"fieldComponent\"\n    v-bind=\"componentProps\"\n    v-on=\"componentEvents\"\n    :model-value=\"fieldValue\"\n    @update:model-value=\"handleFieldChange\"\n  />\n  \n  <!-- Fallback for unknown field types -->\n  <div \n    v-else\n    class=\"sl-p-4 sl-bg-yellow-50 sl-border sl-border-yellow-200 sl-rounded-md\"\n  >\n    <div class=\"sl-flex\">\n      <ExclamationTriangleIcon class=\"sl-h-5 sl-w-5 sl-text-yellow-400\" />\n      <div class=\"sl-ml-3\">\n        <h3 class=\"sl-text-sm sl-font-medium sl-text-yellow-800\">\n          Unknown field type\n        </h3>\n        <div class=\"sl-mt-2 sl-text-sm sl-text-yellow-700\">\n          <p>Field type \"{{ field.type }}\" is not supported.</p>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * DynamicFormField - Field renderer for DynamicForm\n * \n * Dynamically loads and renders the appropriate input component based on\n * the field type configuration. Handles prop mapping and event forwarding.\n * \n * ## Supported Field Types\n * - text, email, password, number, tel, url → UiTextInput\n * - textarea → TextAreaInput\n * - select → SelectInput\n * - combobox → ComboboxInput\n * - checkbox → CheckboxInput\n * - switch → SwitchInput\n * \n * @module components/forms/DynamicFormField\n * @see {@link DynamicFormField} for field configuration\n */\nimport { computed, defineAsyncComponent } from 'vue'\nimport UiTextInput from '../inputs/TextInput.vue'\nimport { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'\nimport type { DynamicFormField } from '../../types/form'\n\ninterface Props {\n  field: DynamicFormField\n  modelValue?: any\n  formData?: Record<string, any>\n}\n\nconst props = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: any]\n  'field-change': [field: DynamicFormField, value: any]\n}>()\n\n// Component mapping for dynamic loading\nconst componentMap: Record<string, () => Promise<any>> = {\n  text: () => Promise.resolve(UiTextInput),\n  email: () => Promise.resolve(UiTextInput), \n  password: () => Promise.resolve(UiTextInput),\n  number: () => Promise.resolve(UiTextInput),\n  tel: () => Promise.resolve(UiTextInput),\n  url: () => Promise.resolve(UiTextInput),\n  textarea: () => import('../inputs/TextAreaInput.vue'),\n  select: () => import('../inputs/SelectInput.vue'),\n  combobox: () => import('../inputs/ComboboxInput.vue'),\n  checkbox: () => import('../inputs/CheckboxInput.vue'),\n  switch: () => import('../inputs/SwitchInput.vue'),\n}\n\nconst fieldComponent = computed(() => {\n  const componentLoader = componentMap[props.field.type]\n  if (componentLoader) {\n    return defineAsyncComponent({\n      loader: componentLoader,\n      errorComponent: () => null,\n      delay: 0\n    })\n  }\n  return null\n})\n\nconst fieldValue = computed({\n  get: () => props.modelValue ?? props.field.defaultValue ?? getDefaultValue(),\n  set: (value) => {\n    emit('update:modelValue', value)\n    emit('field-change', props.field, value)\n  }\n})\n\nconst componentProps = computed(() => {\n  const baseProps: Record<string, any> = {\n    name: props.field.name,\n    label: props.field.label,\n    placeholder: props.field.placeholder,\n    disabled: props.field.disabled,\n    rules: props.field.validation,\n    validateOnMount: props.field.validateOnMount,\n    tertiaryLabel: props.field.tertiaryLabel,\n    successMessage: props.field.successMessage\n  }\n\n  // Type-specific props\n  switch (props.field.type) {\n    case 'text':\n    case 'email':\n    case 'password':\n    case 'number':\n    case 'tel':\n    case 'url':\n      return {\n        ...baseProps,\n        type: props.field.inputType || props.field.type,\n        maxlength: props.field.maxLength,\n        minlength: props.field.minLength,\n        min: props.field.min,\n        max: props.field.max,\n        step: props.field.step,\n        spellcheck: props.field.spellcheck,\n        autocomplete: props.field.autocomplete\n      }\n    \n    case 'textarea':\n      return {\n        ...baseProps,\n        rows: props.field.rows,\n        maxlength: props.field.maxLength,\n        spellcheck: props.field.spellcheck\n      }\n    \n    case 'select':\n      return {\n        ...baseProps,\n        items: props.field.options || [],\n        multiple: props.field.multiple,\n        itemKey: props.field.optionKey || 'value',\n        itemText: props.field.optionLabel || 'label',\n        showAll: props.field.showSelectAll\n      }\n    \n    case 'combobox':\n      return {\n        ...baseProps,\n        items: props.field.options || [],\n        itemKey: props.field.optionKey || 'value',\n        itemText: props.field.optionLabel || 'label',\n        customQuery: props.field.customQuery,\n        loading: props.field.loading\n      }\n    \n    case 'checkbox':\n      return {\n        ...baseProps,\n        description: props.field.description,\n        immediate: props.field.immediate ?? true,\n        isDescriptionHtml: props.field.isDescriptionHtml\n      }\n    \n    case 'switch':\n      return {\n        ...baseProps,\n        description: props.field.description,\n        immediate: props.field.immediate ?? true,\n        boxShadow: props.field.boxShadow,\n        hideMainLabel: props.field.hideMainLabel,\n        textTrue: props.field.textTrue,\n        textFalse: props.field.textFalse\n      }\n    \n    default:\n      return baseProps\n  }\n})\n\nconst componentEvents = computed(() => {\n  const baseEvents: Record<string, Function> = {}\n  \n  // Add event handlers based on field configuration\n  if (props.field.onBlur) {\n    baseEvents.blur = props.field.onBlur\n  }\n  \n  if (props.field.onFocus) {\n    baseEvents.focus = props.field.onFocus\n  }\n  \n  if (props.field.onChange) {\n    baseEvents['update:modelValue'] = (value: any) => {\n      fieldValue.value = value\n      props.field.onChange?.(value, props.field, props.formData ?? {})\n    }\n  }\n  \n  return baseEvents\n})\n\nconst getDefaultValue = () => {\n  switch (props.field.type) {\n    case 'checkbox':\n    case 'switch':\n      return false\n    case 'select':\n      return props.field.multiple ? [] : null\n    case 'number':\n      return props.field.min || 0\n    default:\n      return ''\n  }\n}\n\nconst handleFieldChange = (value: any) => {\n  fieldValue.value = value\n}\n</script>\n"],"names":["props","__props","emit","__emit","componentMap","UiTextInput","fieldComponent","computed","componentLoader","defineAsyncComponent","fieldValue","getDefaultValue","value","componentProps","baseProps","componentEvents","baseEvents","handleFieldChange","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_createVNode","_unref","ExclamationTriangleIcon","_hoisted_3","_cache","_hoisted_4","_toDisplayString","field"],"mappings":"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"}

package/dist/EmailInput.vue_vue_type_script_setup_true_lang-Dhfgs2Jn.js

@@ -1,122 +0,0 @@
-import { defineComponent as I, ref as M, toRef as m, watch as r, nextTick as V, createElementBlock as F, openBlock as K, createVNode as q, unref as a, withCtx as c, renderSlot as L, createElementVNode as N, withKeys as O, normalizeClass as T, withModifiers as $ } from "vue";
-import { useField as z } from "vee-validate";
-import { string as H } from "yup";
-import R from "./forms/FormFieldWrapper.js";
-import { g as S } from "./id-DafBB_QF.js";
-const U = { class: "sl-w-full" }, W = ["name", "id", "value", "placeholder", "autocomplete", "disabled", "onKeydown"], P = /* @__PURE__ */ I({
-  __name: "EmailInput",
-  props: {
-    name: {},
-    value: { default: "" },
-    label: { default: "Email" },
-    placeholder: { default: "you@example.com" },
-    disabled: { type: Boolean, default: !1 },
-    disabledMessage: { default: "" },
-    rules: { default: () => H().email("Invalid email address").required("Email is required") },
-    successMessage: { default: "" },
-    tertiaryLabel: { default: "" },
-    colorfulValidation: { type: Boolean, default: !0 },
-    showValidCheck: { type: Boolean, default: !0 },
-    showErrors: { type: Boolean, default: !1 },
-    autoComplete: { default: "email" }
-  },
-  emits: ["update:value", "update:validity", "focus", "blur", "submit"],
-  setup(p, { expose: f, emit: h }) {
-    const t = p, l = h, i = S(`sl-${t.name}`), u = M(!1), {
-      value: s,
-      errorMessage: v,
-      handleBlur: g,
-      handleChange: b,
-      meta: d,
-      validate: n,
-      setTouched: y
-    } = z(m(t, "name"), m(t, "rules"), {
-      initialValue: t.value,
-      validateOnValueUpdate: !0,
-      validateOnMount: !1
-    });
-    r(
-      () => t.value,
-      (e) => {
-        e !== void 0 && e !== s.value && (s.value = e);
-      },
-      { immediate: !0 }
-    ), r(
-      () => d.valid,
-      (e) => V(() => l("update:validity", e)),
-      { immediate: !0 }
-    ), r(s, (e, o) => {
-      e !== o && l("update:value", e || "");
-    });
-    function w(e) {
-      const o = e.target.value;
-      b(o), l("update:value", o);
-    }
-    async function k(e) {
-      u.value || (u.value = !0, y(!0)), await n(), g(e), l("blur", e);
-    }
-    function B(e) {
-      l("focus", e);
-    }
-    function E() {
-      d.valid && s.value && l("submit");
-    }
-    return f({
-      focus: () => {
-        document.getElementById(i)?.focus();
-      },
-      blur: () => {
-        document.getElementById(i)?.blur();
-      },
-      validate: n
-    }), (e, o) => (K(), F("div", U, [
-      q(R, {
-        id: a(i),
-        name: e.name,
-        label: e.label,
-        "tertiary-label": e.tertiaryLabel,
-        "error-message": a(v),
-        "success-message": e.successMessage,
-        "is-valid": a(d).valid,
-        "is-touched": a(d).touched,
-        "show-errors": e.showErrors,
-        "show-valid-check": e.showValidCheck,
-        "colorful-validation": e.colorfulValidation,
-        disabled: e.disabled,
-        "disabled-message": e.disabledMessage
-      }, {
-        default: c(({ inputClasses: C }) => [
-          N("input", {
-            name: e.name,
-            id: a(i),
-            type: "email",
-            value: a(s),
-            placeholder: e.placeholder,
-            autocomplete: e.autoComplete,
-            disabled: e.disabled,
-            class: T(["sl-block sl-w-full sl-bg-transparent sl-text-gray-900 dark:sl-text-gray-100 placeholder:sl-text-gray-400 dark:placeholder:sl-text-gray-500 focus:sl-ring-0 focus:sl-outline-none sm:sl-text-sm sm:sl-leading-6", [
-              C,
-              "sl-py-1.5 sl-pl-2",
-              { "sl-text-gray-400": e.disabled },
-              { "sl-pr-10": e.showValidCheck }
-            ]]),
-            onInput: w,
-            onFocus: B,
-            onBlur: k,
-            onKeydown: O($(E, ["prevent"]), ["enter"]),
-            enterkeyhint: "go",
-            "data-testid": "email-input"
-          }, null, 42, W)
-        ]),
-        "input-right": c(() => [
-          L(e.$slots, "input-right")
-        ]),
-        _: 3
-      }, 8, ["id", "name", "label", "tertiary-label", "error-message", "success-message", "is-valid", "is-touched", "show-errors", "show-valid-check", "colorful-validation", "disabled", "disabled-message"])
-    ]));
-  }
-});
-export {
-  P as _
-};
-//# sourceMappingURL=EmailInput.vue_vue_type_script_setup_true_lang-Dhfgs2Jn.js.map

package/dist/EmptyState.vue_vue_type_script_setup_true_lang-B_XAq5Sr.js

@@ -1,74 +0,0 @@
-import { defineComponent as d, createElementBlock as t, openBlock as e, normalizeClass as l, createCommentVNode as n, createElementVNode as a, renderSlot as i, createBlock as p, resolveDynamicComponent as u, toDisplayString as o } from "vue";
-const f = {
-  key: 0,
-  class: "sl-mx-auto sl-mb-4"
-}, h = ["href"], b = /* @__PURE__ */ d({
-  __name: "EmptyState",
-  props: {
-    title: {},
-    description: {},
-    icon: {},
-    actionLabel: {},
-    actionHref: {},
-    compact: { type: Boolean, default: !1 }
-  },
-  emits: ["action"],
-  setup(k, { emit: c }) {
-    const r = c, m = () => {
-      r("action");
-    };
-    return (s, y) => (e(), t("div", {
-      class: l(["sl-text-center", s.compact ? "sl-py-6" : "sl-py-12"])
-    }, [
-      s.icon || s.$slots.icon ? (e(), t("div", f, [
-        i(s.$slots, "icon", {}, () => [
-          (e(), p(u(s.icon), {
-            class: l([
-              "sl-mx-auto sl-text-gray-400 dark:sl-text-slate-500",
-              s.compact ? "sl-h-10 sl-w-10" : "sl-h-12 sl-w-12"
-            ]),
-            "aria-hidden": "true"
-          }, null, 8, ["class"]))
-        ])
-      ])) : n("", !0),
-      a("h3", {
-        class: l([
-          "sl-font-medium sl-text-gray-900 dark:sl-text-white",
-          s.compact ? "sl-text-sm" : "sl-text-lg"
-        ])
-      }, o(s.title), 3),
-      s.description || s.$slots.description ? (e(), t("div", {
-        key: 1,
-        class: l([
-          "sl-text-gray-500 dark:sl-text-slate-400",
-          s.compact ? "sl-mt-1 sl-text-sm" : "sl-mt-2 sl-text-base"
-        ])
-      }, [
-        i(s.$slots, "description", {}, () => [
-          a("p", null, o(s.description), 1)
-        ])
-      ], 2)) : n("", !0),
-      s.actionLabel || s.$slots.action ? (e(), t("div", {
-        key: 2,
-        class: l(s.compact ? "sl-mt-4" : "sl-mt-6")
-      }, [
-        i(s.$slots, "action", {}, () => [
-          s.actionHref ? (e(), t("a", {
-            key: 0,
-            href: s.actionHref,
-            class: "sl-inline-flex sl-items-center sl-rounded-md sl-bg-stachelock-600 sl-px-4 sl-py-2 sl-text-sm sl-font-medium sl-text-white sl-shadow-sm hover:sl-bg-stachelock-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-500 focus:sl-ring-offset-2 sl-transition-colors"
-          }, o(s.actionLabel), 9, h)) : (e(), t("button", {
-            key: 1,
-            type: "button",
-            onClick: m,
-            class: "sl-inline-flex sl-items-center sl-rounded-md sl-bg-stachelock-600 sl-px-4 sl-py-2 sl-text-sm sl-font-medium sl-text-white sl-shadow-sm hover:sl-bg-stachelock-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-500 focus:sl-ring-offset-2 sl-transition-colors"
-          }, o(s.actionLabel), 1))
-        ])
-      ], 2)) : n("", !0)
-    ], 2));
-  }
-});
-export {
-  b as _
-};
-//# sourceMappingURL=EmptyState.vue_vue_type_script_setup_true_lang-B_XAq5Sr.js.map

package/dist/EmptyState.vue_vue_type_script_setup_true_lang-B_XAq5Sr.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmptyState.vue_vue_type_script_setup_true_lang-B_XAq5Sr.js","sources":["../src/components/empty-state/EmptyState.vue"],"sourcesContent":["<!--\n  @component EmptyState\n  @description Generic empty state display with customizable content.\n  \n  A flexible empty state component with icon, title, description,\n  and action button support.\n  \n  @props\n  - title (string, required): Main heading text\n  - description (string, optional): Description text\n  - icon (Component, optional): Icon component to display\n  - actionLabel (string, optional): Action button label\n  - actionHref (string, optional): Action button link\n  - compact (boolean, optional): Use compact layout\n  \n  @emits\n  - action: Emitted when action button is clicked\n  \n  @slots\n  - icon: Custom icon slot\n  - description: Custom description content\n  - action: Custom action content\n  \n  @example\n  <EmptyState\n    title=\"No items found\"\n    description=\"Get started by creating a new item.\"\n    action-label=\"Create Item\"\n    @action=\"handleCreate\"\n  >\n    <template #icon>\n      <PlusIcon class=\"sl-h-12 sl-w-12\" />\n    </template>\n  </EmptyState>\n-->\n<template>\n  <div \n    class=\"sl-text-center\"\n    :class=\"compact ? 'sl-py-6' : 'sl-py-12'\"\n  >\n    <!-- Icon -->\n    <div v-if=\"icon || $slots.icon\" class=\"sl-mx-auto sl-mb-4\">\n      <slot name=\"icon\">\n        <component \n          :is=\"icon\" \n          :class=\"[\n            'sl-mx-auto sl-text-gray-400 dark:sl-text-slate-500',\n            compact ? 'sl-h-10 sl-w-10' : 'sl-h-12 sl-w-12'\n          ]\"\n          aria-hidden=\"true\" \n        />\n      </slot>\n    </div>\n\n    <!-- Title -->\n    <h3 \n      :class=\"[\n        'sl-font-medium sl-text-gray-900 dark:sl-text-white',\n        compact ? 'sl-text-sm' : 'sl-text-lg'\n      ]\"\n    >\n      {{ title }}\n    </h3>\n\n    <!-- Description -->\n    <div \n      v-if=\"description || $slots.description\" \n      :class=\"[\n        'sl-text-gray-500 dark:sl-text-slate-400',\n        compact ? 'sl-mt-1 sl-text-sm' : 'sl-mt-2 sl-text-base'\n      ]\"\n    >\n      <slot name=\"description\">\n        <p>{{ description }}</p>\n      </slot>\n    </div>\n\n    <!-- Action -->\n    <div \n      v-if=\"actionLabel || $slots.action\" \n      :class=\"compact ? 'sl-mt-4' : 'sl-mt-6'\"\n    >\n      <slot name=\"action\">\n        <a\n          v-if=\"actionHref\"\n          :href=\"actionHref\"\n          class=\"sl-inline-flex sl-items-center sl-rounded-md sl-bg-stachelock-600 sl-px-4 sl-py-2 sl-text-sm sl-font-medium sl-text-white sl-shadow-sm hover:sl-bg-stachelock-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-500 focus:sl-ring-offset-2 sl-transition-colors\"\n        >\n          {{ actionLabel }}\n        </a>\n        <button\n          v-else\n          type=\"button\"\n          @click=\"handleAction\"\n          class=\"sl-inline-flex sl-items-center sl-rounded-md sl-bg-stachelock-600 sl-px-4 sl-py-2 sl-text-sm sl-font-medium sl-text-white sl-shadow-sm hover:sl-bg-stachelock-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-500 focus:sl-ring-offset-2 sl-transition-colors\"\n        >\n          {{ actionLabel }}\n        </button>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Component } from 'vue';\n\ninterface Props {\n  title: string;\n  description?: string;\n  icon?: Component;\n  actionLabel?: string;\n  actionHref?: string;\n  compact?: boolean;\n}\n\nwithDefaults(defineProps<Props>(), {\n  compact: false,\n});\n\nconst emit = defineEmits<{\n  action: [];\n}>();\n\nconst handleAction = (): void => {\n  emit('action');\n};\n</script>\n\n"],"names":["emit","__emit","handleAction","_createElementBlock","_normalizeClass","compact","icon","$slots","_openBlock","_hoisted_1","_renderSlot","_ctx","_createBlock","_resolveDynamicComponent","_createElementVNode","title","description","actionLabel","actionHref","_hoisted_2"],"mappings":";;;;;;;;;;;;;;;;AAuHA,UAAMA,IAAOC,GAIPC,IAAe,MAAY;AAC/B,MAAAF,EAAK,QAAQ;AAAA,IACf;2BAzFEG,EAgEM,OAAA;AAAA,MA/DJ,OAAKC,EAAA,CAAC,kBACEC,EAAAA,UAAO,YAAA,UAAA,CAAA;AAAA,IAAA;MAGJC,EAAAA,QAAQC,EAAAA,OAAO,QAA1BC,KAAAL,EAWM,OAXNM,GAWM;AAAA,QAVJC,EASOC,sBATP,MASO;AAAA,WARLH,KAAAI,EAOEC,EANKP,EAAAA,IAAI,GAAA;AAAA,YACR,OAAKF,EAAA;AAAA;cAAkFC,EAAAA,UAAO,oBAAA;AAAA,YAAA;YAI/F,eAAY;AAAA,UAAA;;;MAMlBS,EAOK,MAAA;AAAA,QANF,OAAKV,EAAA;AAAA;UAA0EC,EAAAA,UAAO,eAAA;AAAA,QAAA;WAKpFU,EAAAA,KAAK,GAAA,CAAA;AAAA,MAKFC,EAAAA,eAAeT,EAAAA,OAAO,oBAD9BJ,EAUM,OAAA;AAAA;QARH,OAAKC,EAAA;AAAA;UAA+DC,EAAAA,UAAO,uBAAA;AAAA,QAAA;;QAK5EK,EAEOC,6BAFP,MAEO;AAAA,UADLG,EAAwB,aAAlBE,EAAAA,WAAW,GAAA,CAAA;AAAA,QAAA;;MAMbC,EAAAA,eAAeV,EAAAA,OAAO,eAD9BJ,EAqBM,OAAA;AAAA;QAnBH,SAAOE,EAAAA,UAAO,YAAA,SAAA;AAAA,MAAA;QAEfK,EAgBOC,wBAhBP,MAgBO;AAAA,UAdGO,EAAAA,mBADRf,EAMI,KAAA;AAAA;YAJD,MAAMe,EAAAA;AAAAA,YACP,OAAM;AAAA,UAAA,KAEHD,EAAAA,WAAW,GAAA,GAAAE,CAAA,WAEhBhB,EAOS,UAAA;AAAA;YALP,MAAK;AAAA,YACJ,SAAOD;AAAA,YACR,OAAM;AAAA,UAAA,KAEHe,EAAAA,WAAW,GAAA,CAAA;AAAA,QAAA;;;;;"}

package/dist/LottieAnimation.vue_vue_type_script_setup_true_lang-CwOOShcM.js

@@ -1,36 +0,0 @@
-import { defineComponent as m, defineAsyncComponent as d, inject as s, computed as p, createBlock as f, createCommentVNode as v, openBlock as y, unref as h } from "vue";
-const g = /* @__PURE__ */ m({
-  __name: "LottieAnimation",
-  props: {
-    animationData: {},
-    height: { default: 200 },
-    width: { default: 200 },
-    loop: { type: [Boolean, Number], default: void 0 },
-    autoplay: { type: Boolean, default: void 0 },
-    speed: { default: 1 },
-    pauseOnHover: { type: Boolean, default: !1 }
-  },
-  emits: ["complete", "loop-complete", "enter-frame"],
-  setup(i) {
-    const l = d(
-      () => import("./vue3-lottie.es-C_MDkNwR.js").then((e) => e.Vue3Lottie)
-    ), t = i, a = s("lottie", {}), r = p(() => t.loop !== void 0 ? t.loop : a.loop ?? !0), u = p(() => t.autoplay !== void 0 ? t.autoplay : a.autoplay ?? !0);
-    return (e, o) => e.animationData ? (y(), f(h(l), {
-      key: 0,
-      animationData: e.animationData,
-      height: e.height,
-      width: e.width,
-      loop: r.value,
-      autoplay: u.value,
-      speed: e.speed,
-      pauseOnHover: e.pauseOnHover,
-      onComplete: o[0] || (o[0] = (n) => e.$emit("complete")),
-      onLoopComplete: o[1] || (o[1] = (n) => e.$emit("loop-complete")),
-      onEnterFrame: o[2] || (o[2] = (n) => e.$emit("enter-frame", n))
-    }, null, 8, ["animationData", "height", "width", "loop", "autoplay", "speed", "pauseOnHover"])) : v("", !0);
-  }
-});
-export {
-  g as _
-};
-//# sourceMappingURL=LottieAnimation.vue_vue_type_script_setup_true_lang-CwOOShcM.js.map

package/dist/NavigationGroup.vue_vue_type_script_setup_true_lang-2tAB9Hbx.js

@@ -1,30 +0,0 @@
-import { defineComponent as l, createElementBlock as s, openBlock as t, createCommentVNode as o, createElementVNode as n, normalizeClass as r, toDisplayString as a, renderSlot as c } from "vue";
-const i = { class: "sl-space-y-1" }, p = {
-  role: "list",
-  class: "sl-space-y-1"
-}, _ = /* @__PURE__ */ l({
-  __name: "NavigationGroup",
-  props: {
-    title: {},
-    iconOnly: { type: Boolean }
-  },
-  setup(d) {
-    return (e, m) => (t(), s("div", i, [
-      e.title ? (t(), s("h3", {
-        key: 0,
-        class: r([
-          "sl-px-3 sl-py-2 sl-text-xs sl-font-semibold sl-uppercase sl-tracking-wider",
-          e.iconOnly ? "sl-text-center" : ""
-        ]),
-        style: { color: "var(--sl-color-stachelock-050, #edeff9)" }
-      }, a(e.title), 3)) : o("", !0),
-      n("ul", p, [
-        c(e.$slots, "default")
-      ])
-    ]));
-  }
-});
-export {
-  _
-};
-//# sourceMappingURL=NavigationGroup.vue_vue_type_script_setup_true_lang-2tAB9Hbx.js.map

package/dist/NotificationToast.vue_vue_type_script_setup_true_lang-Cm5RsC7C.js

@@ -1,162 +0,0 @@
-import { defineComponent as N, computed as n, createBlock as g, openBlock as r, unref as c, withCtx as u, createElementVNode as l, normalizeStyle as A, normalizeClass as i, createVNode as p, createElementBlock as h, createCommentVNode as m, resolveDynamicComponent as O, toDisplayString as y } from "vue";
-import { r as o, a as V } from "./InformationCircleIcon-B322GNIt.js";
-import { r as x } from "./ExclamationCircleIcon-DjxYk45_.js";
-import { r as D } from "./ExclamationTriangleIcon-BNKYmV_J.js";
-import { r as E } from "./XMarkIcon-DNvCkiOy.js";
-import { S as T, h as I } from "./transition-_rPfnoET.js";
-const L = { class: "sl-p-4" }, R = { class: "sl-flex sl-items-start" }, j = { class: "sl-ml-3 sl-w-0 sl-flex-1 sl-pt-0.5" }, M = /* @__PURE__ */ N({
-  __name: "NotificationToast",
-  props: {
-    notification: {}
-  },
-  emits: ["close"],
-  setup(v, { emit: b }) {
-    const t = v, w = b, k = () => {
-      w("close", t.notification);
-    }, C = () => {
-    }, _ = n(() => {
-      const s = {
-        primary: "sl-bg-stachelock-600 sl-text-white",
-        secondary: "sl-bg-gray-600 sl-text-white",
-        dark: "sl-bg-gray-800 sl-text-white",
-        light: "sl-bg-white sl-text-gray-800 sl-border sl-border-gray-200",
-        warning: "sl-bg-amber-500 sl-text-white",
-        danger: "sl-bg-red-500 sl-text-white",
-        success: "sl-bg-emerald-500 sl-text-white",
-        info: "sl-bg-blue-500 sl-text-white",
-        ghost: "sl-bg-white sl-text-gray-800 sl-border sl-border-gray-200"
-      };
-      return s[t.notification.theme] || s.primary;
-    }), f = n(() => {
-      const s = t.notification.theme;
-      return ["light", "ghost"].includes(s) ? "sl-text-gray-800" : "sl-text-white";
-    }), $ = n(() => {
-      const s = {
-        primary: "focus:sl-ring-stachelock-400",
-        secondary: "focus:sl-ring-gray-400",
-        dark: "focus:sl-ring-gray-400",
-        light: "focus:sl-ring-gray-300",
-        warning: "focus:sl-ring-amber-300",
-        danger: "focus:sl-ring-red-300",
-        success: "focus:sl-ring-emerald-300",
-        info: "focus:sl-ring-blue-300",
-        ghost: "focus:sl-ring-gray-300"
-      };
-      return s[t.notification.theme] || s.primary;
-    }), d = n(() => {
-      if (t.notification.icon)
-        return t.notification.icon;
-      const s = t.notification.theme, e = {
-        primary: o,
-        secondary: o,
-        dark: x,
-        light: o,
-        warning: D,
-        danger: x,
-        success: V,
-        info: o,
-        ghost: o
-      };
-      return e[s] || e.primary;
-    }), S = n(() => {
-      const s = t.notification.position;
-      return {
-        tr: "sl-items-end",
-        tl: "sl-items-start",
-        bl: "sl-items-start",
-        br: "sl-items-end",
-        tc: "sl-items-center",
-        bc: "sl-items-center"
-      }[s] || "sl-items-end";
-    }), z = n(() => {
-      const s = t.notification.position;
-      return {
-        tr: "sl-items-start",
-        tl: "sl-items-start",
-        bl: "sl-items-end",
-        br: "sl-items-end",
-        tc: "sl-items-start",
-        bc: "sl-items-end"
-      }[s] || "sl-items-end";
-    }), B = n(() => {
-      const s = t.notification.position, e = t.notification.yOffset, a = {
-        zIndex: 9999
-      };
-      return ["tl", "tr", "tc"].includes(s) ? a.marginTop = `${e}px` : a.marginBottom = `${e}px`, a;
-    });
-    return (s, e) => (r(), g(c(T), {
-      appear: "",
-      show: s.notification.isOpen,
-      as: "template",
-      onAfterLeave: C
-    }, {
-      default: u(() => [
-        l("div", {
-          "aria-live": "assertive",
-          class: i([
-            "sl-pointer-events-none sl-fixed sl-inset-0 sl-flex sl-px-4 sl-py-6 sm:sl-p-6",
-            z.value
-          ]),
-          style: A(B.value)
-        }, [
-          l("div", {
-            class: i(["sl-flex sl-w-full sl-flex-col sl-items-center sl-space-y-4", S.value])
-          }, [
-            p(c(I), {
-              as: "template",
-              enter: "sl-duration-300 sl-ease-out sl-transform",
-              "enter-from": "sl-translate-y-4 sl-opacity-0 sm:sl-translate-y-0 sm:sl-translate-x-4",
-              "enter-to": "sl-translate-y-0 sl-opacity-100 sm:sl-translate-x-0",
-              leave: "sl-duration-200 sl-ease-in",
-              "leave-from": "sl-opacity-100",
-              "leave-to": "sl-opacity-0"
-            }, {
-              default: u(() => [
-                s.notification.isOpen ? (r(), h("div", {
-                  key: 0,
-                  class: i([[_.value], "sl-pointer-events-auto sl-w-full sl-max-w-sm sl-overflow-hidden sl-rounded-lg sl-shadow-lg sl-ring-1 sl-ring-black sl-ring-opacity-5"])
-                }, [
-                  l("div", L, [
-                    l("div", R, [
-                      d.value ? (r(), g(O(d.value), {
-                        key: 0,
-                        class: "sl-h-6 sl-w-6 sl-flex-shrink-0",
-                        "aria-hidden": "true"
-                      })) : m("", !0),
-                      l("div", j, [
-                        l("p", {
-                          class: i(["sl-text-sm sl-font-medium", f.value])
-                        }, y(s.notification.title), 3),
-                        s.notification.message ? (r(), h("p", {
-                          key: 0,
-                          class: i(["sl-mt-1 sl-text-sm sl-opacity-90", f.value])
-                        }, y(s.notification.message), 3)) : m("", !0)
-                      ]),
-                      l("button", {
-                        type: "button",
-                        onClick: k,
-                        class: i(["sl-ml-4 sl-inline-flex sl-rounded-md sl-text-current sl-opacity-70 hover:sl-opacity-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2", $.value])
-                      }, [
-                        e[0] || (e[0] = l("span", { class: "sl-sr-only" }, "Close", -1)),
-                        p(c(E), {
-                          class: "sl-h-5 sl-w-5",
-                          "aria-hidden": "true"
-                        })
-                      ], 2)
-                    ])
-                  ])
-                ], 2)) : m("", !0)
-              ]),
-              _: 1
-            })
-          ], 2)
-        ], 6)
-      ]),
-      _: 1
-    }, 8, ["show"]));
-  }
-});
-export {
-  M as _
-};
-//# sourceMappingURL=NotificationToast.vue_vue_type_script_setup_true_lang-Cm5RsC7C.js.map

package/dist/NotificationToast.vue_vue_type_script_setup_true_lang-Cm5RsC7C.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationToast.vue_vue_type_script_setup_true_lang-Cm5RsC7C.js","sources":["../src/components/notifications/NotificationToast.vue"],"sourcesContent":["<!--\n  @component NotificationToast\n  @description Individual notification toast with animations and theming\n  \n  Displays a single notification with icon, title, message, and close button.\n  Supports multiple themes and positions with smooth enter/leave transitions.\n  \n  @props\n  - notification (NotificationState): The notification data object\n  \n  @emits\n  - close: Emitted when the close button is clicked\n  \n  @example\n  <NotificationToast \n    :notification=\"notification\" \n    @close=\"handleClose\" \n  />\n-->\n<template>\n  <TransitionRoot \n    appear \n    :show=\"notification.isOpen\" \n    as=\"template\" \n    @after-leave=\"onAfterLeave\"\n  >\n    <div \n      aria-live=\"assertive\" \n      :class=\"[\n        'sl-pointer-events-none sl-fixed sl-inset-0 sl-flex sl-px-4 sl-py-6 sm:sl-p-6',\n        verticalAlignClass\n      ]\"\n      :style=\"containerStyle\"\n    >\n      <div \n        class=\"sl-flex sl-w-full sl-flex-col sl-items-center sl-space-y-4\" \n        :class=\"horizontalAlignClass\"\n      >\n        <TransitionChild \n          as=\"template\" \n          enter=\"sl-duration-300 sl-ease-out sl-transform\"\n          enter-from=\"sl-translate-y-4 sl-opacity-0 sm:sl-translate-y-0 sm:sl-translate-x-4\"\n          enter-to=\"sl-translate-y-0 sl-opacity-100 sm:sl-translate-x-0\" \n          leave=\"sl-duration-200 sl-ease-in\"\n          leave-from=\"sl-opacity-100\" \n          leave-to=\"sl-opacity-0\"\n        >\n          <div \n            v-if=\"notification.isOpen\" \n            :class=\"[themeClass]\"\n            class=\"sl-pointer-events-auto sl-w-full sl-max-w-sm sl-overflow-hidden sl-rounded-lg sl-shadow-lg sl-ring-1 sl-ring-black sl-ring-opacity-5\"\n          >\n            <div class=\"sl-p-4\">\n              <div class=\"sl-flex sl-items-start\">\n                <component \n                  v-if=\"iconComponent\"\n                  :is=\"iconComponent\" \n                  class=\"sl-h-6 sl-w-6 sl-flex-shrink-0\" \n                  aria-hidden=\"true\" \n                />\n                <div class=\"sl-ml-3 sl-w-0 sl-flex-1 sl-pt-0.5\">\n                  <p class=\"sl-text-sm sl-font-medium\" :class=\"textClass\">\n                    {{ notification.title }}\n                  </p>\n                  <p \n                    v-if=\"notification.message\" \n                    class=\"sl-mt-1 sl-text-sm sl-opacity-90\" \n                    :class=\"textClass\"\n                  >\n                    {{ notification.message }}\n                  </p>\n                </div>\n                <button \n                  type=\"button\" \n                  @click=\"handleClose\"\n                  class=\"sl-ml-4 sl-inline-flex sl-rounded-md sl-text-current sl-opacity-70 hover:sl-opacity-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2\"\n                  :class=\"focusRingClass\"\n                >\n                  <span class=\"sl-sr-only\">Close</span>\n                  <XMarkIcon class=\"sl-h-5 sl-w-5\" aria-hidden=\"true\" />\n                </button>\n              </div>\n            </div>\n          </div>\n        </TransitionChild>\n      </div>\n    </div>\n  </TransitionRoot>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * NotificationToast - Individual notification display\n * \n * Renders a single notification with theming, icons, and animations.\n * Used internally by NotificationContainer but can be used standalone.\n */\nimport { computed } from 'vue';\nimport { \n  CheckCircleIcon, \n  ExclamationTriangleIcon, \n  ExclamationCircleIcon, \n  InformationCircleIcon \n} from '@heroicons/vue/24/outline';\nimport { XMarkIcon } from '@heroicons/vue/20/solid';\nimport { TransitionRoot, TransitionChild } from '@headlessui/vue';\nimport type { NotificationState } from '../../composables/useNotifications';\n\nconst props = defineProps<{ \n  notification: NotificationState \n}>();\n\nconst emit = defineEmits<{\n  close: [notification: NotificationState];\n}>();\n\nconst handleClose = () => {\n  emit('close', props.notification);\n};\n\nconst onAfterLeave = () => {\n  // Animation cleanup callback\n};\n\nconst themeClass = computed(() => {\n  const themes: Record<string, string> = {\n    primary: 'sl-bg-stachelock-600 sl-text-white',\n    secondary: 'sl-bg-gray-600 sl-text-white',\n    dark: 'sl-bg-gray-800 sl-text-white',\n    light: 'sl-bg-white sl-text-gray-800 sl-border sl-border-gray-200',\n    warning: 'sl-bg-amber-500 sl-text-white',\n    danger: 'sl-bg-red-500 sl-text-white',\n    success: 'sl-bg-emerald-500 sl-text-white',\n    info: 'sl-bg-blue-500 sl-text-white',\n    ghost: 'sl-bg-white sl-text-gray-800 sl-border sl-border-gray-200',\n  };\n  return themes[props.notification.theme] || themes.primary;\n});\n\nconst textClass = computed(() => {\n  const theme = props.notification.theme;\n  return ['light', 'ghost'].includes(theme) ? 'sl-text-gray-800' : 'sl-text-white';\n});\n\nconst focusRingClass = computed(() => {\n  const rings: Record<string, string> = {\n    primary: 'focus:sl-ring-stachelock-400',\n    secondary: 'focus:sl-ring-gray-400',\n    dark: 'focus:sl-ring-gray-400',\n    light: 'focus:sl-ring-gray-300',\n    warning: 'focus:sl-ring-amber-300',\n    danger: 'focus:sl-ring-red-300',\n    success: 'focus:sl-ring-emerald-300',\n    info: 'focus:sl-ring-blue-300',\n    ghost: 'focus:sl-ring-gray-300',\n  };\n  return rings[props.notification.theme] || rings.primary;\n});\n\nconst iconComponent = computed(() => {\n  // Allow custom icon override\n  if (props.notification.icon) {\n    return props.notification.icon;\n  }\n  \n  const theme = props.notification.theme;\n  const icons: Record<string, typeof CheckCircleIcon> = {\n    primary: InformationCircleIcon,\n    secondary: InformationCircleIcon,\n    dark: ExclamationCircleIcon,\n    light: InformationCircleIcon,\n    warning: ExclamationTriangleIcon,\n    danger: ExclamationCircleIcon,\n    success: CheckCircleIcon,\n    info: InformationCircleIcon,\n    ghost: InformationCircleIcon,\n  };\n  return icons[theme] || icons.primary;\n});\n\nconst horizontalAlignClass = computed(() => {\n  const position = props.notification.position;\n  const alignments: Record<string, string> = {\n    tr: 'sl-items-end',\n    tl: 'sl-items-start',\n    bl: 'sl-items-start',\n    br: 'sl-items-end',\n    tc: 'sl-items-center',\n    bc: 'sl-items-center',\n  };\n  return alignments[position] || 'sl-items-end';\n});\n\nconst verticalAlignClass = computed(() => {\n  const position = props.notification.position;\n  const alignments: Record<string, string> = {\n    tr: 'sl-items-start',\n    tl: 'sl-items-start',\n    bl: 'sl-items-end',\n    br: 'sl-items-end',\n    tc: 'sl-items-start',\n    bc: 'sl-items-end',\n  };\n  return alignments[position] || 'sl-items-end';\n});\n\nconst containerStyle = computed(() => {\n  const position = props.notification.position;\n  const offset = props.notification.yOffset;\n  \n  const styles: Record<string, string | number> = {\n    zIndex: 9999,\n  };\n  \n  // Apply offset based on position (top or bottom)\n  if (['tl', 'tr', 'tc'].includes(position)) {\n    styles.marginTop = `${offset}px`;\n  } else {\n    styles.marginBottom = `${offset}px`;\n  }\n  \n  return styles;\n});\n</script>\n\n"],"names":["props","__props","emit","__emit","handleClose","onAfterLeave","themeClass","computed","themes","textClass","theme","focusRingClass","rings","iconComponent","icons","InformationCircleIcon","ExclamationCircleIcon","ExclamationTriangleIcon","CheckCircleIcon","horizontalAlignClass","position","verticalAlignClass","containerStyle","offset","styles","_createBlock","_unref","TransitionRoot","notification","_createElementVNode","_normalizeClass","_createVNode","TransitionChild","_createElementBlock","_hoisted_1","_hoisted_2","_openBlock","_resolveDynamicComponent","_hoisted_3","_cache","XMarkIcon"],"mappings":"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"}

package/dist/ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-Cri9BiBy.js

@@ -1,130 +0,0 @@
-import { defineComponent as _, ref as d, computed as o, onMounted as $, onBeforeUnmount as j, createElementBlock as a, openBlock as t, createElementVNode as r, createVNode as B, createCommentVNode as i, normalizeStyle as p, normalizeClass as h, renderSlot as m, createBlock as U, toDisplayString as u, Transition as I, withCtx as R } from "vue";
-import S from "./components/CloudinaryImage.js";
-const M = { class: "sl-relative sl-flex sl-items-center sl-gap-3" }, P = ["aria-expanded"], T = ["src", "alt"], V = {
-  key: 2,
-  class: "sl-w-full sl-h-full sl-inline-flex sl-items-center sl-justify-center sl-bg-stachelock-200 dark:sl-bg-stachelock-700"
-}, O = { class: "sl-p-4 sl-border-b sl-border-gray-200 dark:sl-border-slate-700" }, A = { class: "sl-text-sm sl-font-medium sl-text-gray-900 dark:sl-text-white" }, D = { class: "sl-text-xs sl-text-gray-500 dark:sl-text-slate-400" }, H = {
-  key: 0,
-  class: "sl-py-1"
-}, G = /* @__PURE__ */ _({
-  __name: "ProfileHeaderAvatar",
-  props: {
-    userName: {},
-    userEmail: { default: "" },
-    imagePublicId: {},
-    imageUrl: {},
-    showLogout: { type: Boolean, default: !0 },
-    logoutLabel: { default: "Log Out" },
-    size: { default: 40 },
-    ringColorClass: { default: "sl-ring-stachelock-400" },
-    menuTop: { default: "3rem" },
-    menuRight: { default: "0" }
-  },
-  emits: ["logout", "menu-toggle"],
-  setup(v, { expose: k, emit: y }) {
-    const l = v, c = y, s = d(!1), b = d(null), w = d(null), C = o(() => l.userName ? l.userName.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2) : "U"), x = o(() => `hover:sl-ring-2 hover:${l.ringColorClass}`), z = o(() => `sl-ring-2 ${l.ringColorClass}`), N = o(() => l.size < 32 ? "sl-text-xs" : l.size < 48 ? "sl-text-sm" : "sl-text-base"), E = o(() => ({
-      top: l.menuTop,
-      right: l.menuRight
-    })), f = () => {
-      s.value = !s.value, c("menu-toggle", s.value);
-    }, n = () => {
-      s.value && (s.value = !1, c("menu-toggle", !1));
-    }, L = () => {
-      n(), c("logout");
-    }, g = (e) => {
-      e.key === "Escape" && n();
-    };
-    return $(() => {
-      document.addEventListener("keydown", g);
-    }), j(() => {
-      document.removeEventListener("keydown", g);
-    }), k({
-      toggleMenu: f,
-      closeMenu: n,
-      isMenuOpen: s
-    }), (e, K) => (t(), a("div", M, [
-      r("button", {
-        ref_key: "avatarButton",
-        ref: b,
-        type: "button",
-        onClick: f,
-        class: h(["sl-relative sl-inline-flex sl-items-center sl-justify-center sl-rounded-full sl-overflow-hidden sl-transition-all sl-flex-shrink-0 focus:sl-outline-none", [
-          x.value,
-          { [z.value]: s.value }
-        ]]),
-        style: p({ width: `${e.size}px`, height: `${e.size}px` }),
-        "aria-expanded": s.value,
-        "aria-haspopup": "true"
-      }, [
-        m(e.$slots, "avatar", {}, () => [
-          e.imagePublicId ? (t(), U(S, {
-            key: 0,
-            "public-id": e.imagePublicId,
-            alt: e.userName,
-            width: e.size,
-            height: e.size,
-            "custom-classes": { image: { "sl-w-full sl-h-full sl-object-cover sl-object-center": !0 } },
-            skeleton: "user"
-          }, null, 8, ["public-id", "alt", "width", "height"])) : e.imageUrl ? (t(), a("img", {
-            key: 1,
-            src: e.imageUrl,
-            alt: e.userName,
-            class: "sl-w-full sl-h-full sl-object-cover sl-object-center"
-          }, null, 8, T)) : (t(), a("div", V, [
-            r("span", {
-              class: h(["sl-font-semibold sl-text-stachelock-700 dark:sl-text-stachelock-200", N.value])
-            }, u(C.value), 3)
-          ]))
-        ])
-      ], 14, P),
-      B(I, {
-        "enter-active-class": "sl-transition sl-ease-out sl-duration-100",
-        "enter-from-class": "sl-transform sl-opacity-0 sl-scale-95",
-        "enter-to-class": "sl-transform sl-opacity-100 sl-scale-100",
-        "leave-active-class": "sl-transition sl-ease-in sl-duration-75",
-        "leave-from-class": "sl-transform sl-opacity-100 sl-scale-100",
-        "leave-to-class": "sl-transform sl-opacity-0 sl-scale-95"
-      }, {
-        default: R(() => [
-          s.value ? (t(), a("div", {
-            key: 0,
-            ref_key: "menuRef",
-            ref: w,
-            class: "sl-absolute sl-bg-white dark:sl-bg-slate-800 sl-rounded-lg sl-shadow-lg sl-border sl-border-gray-200 dark:sl-border-slate-700 sl-z-50 sl-min-w-max sl-overflow-hidden",
-            style: p(E.value),
-            role: "menu",
-            "aria-orientation": "vertical"
-          }, [
-            r("div", O, [
-              m(e.$slots, "menu-header", {}, () => [
-                r("p", A, u(e.userName), 1),
-                r("p", D, u(e.userEmail), 1)
-              ])
-            ]),
-            e.$slots["menu-items"] ? (t(), a("div", H, [
-              m(e.$slots, "menu-items")
-            ])) : i("", !0),
-            e.showLogout ? (t(), a("button", {
-              key: 1,
-              type: "button",
-              onClick: L,
-              class: "sl-w-full sl-text-left sl-px-4 sl-py-2 sl-text-sm sl-text-red-600 dark:sl-text-red-400 hover:sl-bg-red-50 dark:hover:sl-bg-red-900/20 sl-transition-colors",
-              role: "menuitem"
-            }, u(e.logoutLabel), 1)) : i("", !0)
-          ], 4)) : i("", !0)
-        ]),
-        _: 3
-      }),
-      s.value ? (t(), a("div", {
-        key: 0,
-        class: "sl-fixed sl-inset-0 sl-z-40",
-        onClick: n,
-        "aria-hidden": "true"
-      })) : i("", !0)
-    ]));
-  }
-});
-export {
-  G as _
-};
-//# sourceMappingURL=ProfileHeaderAvatar.vue_vue_type_script_setup_true_lang-Cri9BiBy.js.map