@leaflink/stash 48.16.1 → 48.17.0

package/dist/AppSidebar.js

@@ -1,9 +1,9 @@
-import { defineComponent as k, useSlots as x, computed as m, ref as C, watchEffect as E, openBlock as a, createElementBlock as o, normalizeClass as B, createVNode as i, Transition as w, withCtx as b, withDirectives as g, withModifiers as O, vShow as y, createElementVNode as v, unref as c, renderSlot as n, createCommentVNode as u, pushScopeId as I, popScopeId as V } from "vue";
-import $ from "./useMediaQuery.js";
-import z from "./Backdrop.js";
-import A from "./Divider.js";
-import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
-const j = (t) => (I("data-v-78582cf0"), t = t(), V(), t), D = {
+import { defineComponent as E, useSlots as B, computed as h, ref as C, watchEffect as O, openBlock as s, createElementBlock as a, normalizeClass as V, createVNode as o, Transition as w, withCtx as b, withDirectives as g, withModifiers as $, vShow as y, createElementVNode as d, unref as c, renderSlot as i, createCommentVNode as u } from "vue";
+import z from "./useMediaQuery.js";
+import A from "./Backdrop.js";
+import N from "./Divider.js";
+import { _ as j } from "./_plugin-vue_export-helper-dad06003.js";
+const D = {
   class: "stash-app-sidebar__aside tw-fixed tw-flex tw-h-screen tw-flex-col tw-bg-purple-500",
   "data-test": "stash-app-sidebar__aside"
 }, M = {
@@ -12,75 +12,75 @@ const j = (t) => (I("data-v-78582cf0"), t = t(), V(), t), D = {
 }, P = {
   key: 1,
   class: "tw-px-3 tw-pt-6"
-}, L = {
+}, I = {
   key: 2,
   class: "tw-pt-6"
-}, Q = {
+}, L = {
   role: "menubar",
   "aria-orientation": "vertical"
-}, T = /* @__PURE__ */ j(() => /* @__PURE__ */ v("div", { class: "tw-flex-1" }, null, -1)), q = /* @__PURE__ */ k({
+}, Q = /* @__PURE__ */ E({
   __name: "AppSidebar",
   props: {
     isOpen: { type: Boolean, default: !1 }
   },
   emits: ["dismiss", "update:is-open"],
-  setup(t, { emit: _ }) {
-    const f = t, r = x(), l = $("screen and (min-width: 1321px)"), e = m(() => f.isOpen && !l.value), p = C({ height: "", overflow: "" }), h = m(() => f.isOpen || l.value);
+  setup(x, { emit: k }) {
+    const v = x, n = B(), m = k, r = z("screen and (min-width: 1321px)"), e = h(() => v.isOpen && !r.value), l = C({ height: "", overflow: "" }), f = h(() => v.isOpen || r.value);
     function S() {
-      _("dismiss"), _("update:is-open", !1);
+      m("dismiss"), m("update:is-open", !1);
     }
-    function d() {
+    function p() {
       return document.scrollingElement || document.body;
     }
-    return E(() => {
-      l.value || (e.value && Object.assign(p.value, {
-        overflow: d().style.overflow,
-        height: d().style.height
-      }), Object.assign(d().style, {
-        overflow: e.value ? "hidden" : p.value.overflow,
+    return O(() => {
+      r.value || (e.value && Object.assign(l.value, {
+        overflow: p().style.overflow,
+        height: p().style.height
+      }), Object.assign(p().style, {
+        overflow: e.value ? "hidden" : l.value.overflow,
         // Prevents page from scrolling when AppSidebar is open
-        height: e.value ? "100%" : p.value.height
+        height: e.value ? "100%" : l.value.height
         // Ensures the backdrop covers the entire page when AppSidebar is open
       }));
-    }), (s, F) => (a(), o("div", {
+    }), (t, _) => (s(), a("div", {
       id: "stash-app-sidebar",
-      class: B(["stash-app-sidebar tw-relative", {
-        "stash-app-sidebar--is-open": h.value,
+      class: V(["stash-app-sidebar tw-relative", {
+        "stash-app-sidebar--is-open": f.value,
         "tw-z-modal": e.value,
         "tw-z-[301]": !e.value
       }]),
       "data-test": "stash-app-sidebar"
     }, [
-      i(w, { name: "backdrop" }, {
+      o(w, { name: "backdrop" }, {
         default: b(() => [
-          g(i(z, {
+          g(o(A, {
             class: "stash-app-sidebar__backdrop",
-            onClick: O(S, ["stop"])
-          }, null, 8, ["onClick"]), [
+            onClick: $(S, ["stop"])
+          }, null, 512), [
             [y, e.value]
           ])
         ]),
         _: 1
       }),
-      i(w, { name: "aside" }, {
+      o(w, { name: "aside" }, {
         default: b(() => [
-          g(v("aside", D, [
-            i(A, { class: "stash-app-sidebar__divider" }),
-            c(r)["app-context"] ? (a(), o("div", M, [
-              n(s.$slots, "app-context", {}, void 0, !0)
+          g(d("aside", D, [
+            o(N, { class: "stash-app-sidebar__divider" }),
+            c(n)["app-context"] ? (s(), a("div", M, [
+              i(t.$slots, "app-context", {}, void 0, !0)
             ])) : u("", !0),
-            c(r)["company-context"] ? (a(), o("div", P, [
-              n(s.$slots, "company-context", {}, void 0, !0)
+            c(n)["company-context"] ? (s(), a("div", P, [
+              i(t.$slots, "company-context", {}, void 0, !0)
             ])) : u("", !0),
-            c(r).navigation ? (a(), o("nav", L, [
-              v("ul", Q, [
-                n(s.$slots, "navigation", {}, void 0, !0)
+            c(n).navigation ? (s(), a("nav", I, [
+              d("ul", L, [
+                i(t.$slots, "navigation", {}, void 0, !0)
               ])
             ])) : u("", !0),
-            T,
-            n(s.$slots, "footer", {}, void 0, !0)
+            _[0] || (_[0] = d("div", { class: "tw-flex-1" }, null, -1)),
+            i(t.$slots, "footer", {}, void 0, !0)
           ], 512), [
-            [y, h.value]
+            [y, f.value]
           ])
         ]),
         _: 3
@@ -88,8 +88,8 @@ const j = (t) => (I("data-v-78582cf0"), t = t(), V(), t), D = {
     ], 2));
   }
 });
-const U = /* @__PURE__ */ N(q, [["__scopeId", "data-v-78582cf0"]]);
+const J = /* @__PURE__ */ j(Q, [["__scopeId", "data-v-f666b942"]]);
 export {
-  U as default
+  J as default
 };
 //# sourceMappingURL=AppSidebar.js.map

package/dist/AppSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppSidebar.js","sources":["../src/components/AppSidebar/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useSlots, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Divider from '../Divider/Divider.vue';\n\n  export interface AppSidebarProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    isOpen?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AppSidebarProps>(), {\n    isOpen: false,\n  });\n\n  const slots = useSlots();\n\n  const emit =\n    defineEmits<{\n      /**\n       * @deprecated Use the `update:is-open` event instead\n       */\n      (e: 'dismiss'): void;\n      (e: 'update:is-open', isOpen: boolean): void;\n    }>();\n\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n  const isBackdropVisible = computed(() => props.isOpen && !isExtraLargeScreen.value);\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const isSidebarOpen = computed(() => props.isOpen || isExtraLargeScreen.value);\n\n  function onBackdropClick() {\n    emit('dismiss');\n    emit('update:is-open', false);\n  }\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watchEffect(() => {\n    if (isExtraLargeScreen.value) {\n      return;\n    }\n\n    if (isBackdropVisible.value) {\n      Object.assign(initialPageScrollingElementStyle.value, {\n        overflow: getPageScrollingElement().style.overflow,\n        height: getPageScrollingElement().style.height,\n      });\n    }\n\n    Object.assign(getPageScrollingElement().style, {\n      overflow: isBackdropVisible.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when AppSidebar is open\n      height: isBackdropVisible.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when AppSidebar is open\n    });\n  });\n</script>\n\n<template>\n  <div\n    id=\"stash-app-sidebar\"\n    class=\"stash-app-sidebar tw-relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'tw-z-modal': isBackdropVisible,\n      'tw-z-[301]': !isBackdropVisible,\n    }\"\n    data-test=\"stash-app-sidebar\"\n  >\n    <Transition name=\"backdrop\">\n      <Backdrop v-show=\"isBackdropVisible\" class=\"stash-app-sidebar__backdrop\" @click.stop=\"onBackdropClick\" />\n    </Transition>\n    <Transition name=\"aside\">\n      <aside\n        v-show=\"isSidebarOpen\"\n        class=\"stash-app-sidebar__aside tw-fixed tw-flex tw-h-screen tw-flex-col tw-bg-purple-500\"\n        data-test=\"stash-app-sidebar__aside\"\n      >\n        <Divider class=\"stash-app-sidebar__divider\" />\n        <div v-if=\"slots['app-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot App Context component slot, ideally for rendering the context switcher -->\n          <slot name=\"app-context\"></slot>\n        </div>\n        <div v-if=\"slots['company-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot Company Context component slot, ideally for rendering the company picker -->\n          <slot name=\"company-context\"></slot>\n        </div>\n        <nav v-if=\"slots['navigation']\" class=\"tw-pt-6\">\n          <ul role=\"menubar\" aria-orientation=\"vertical\">\n            <!-- @slot Navigation component slot, for rendering navigation items -->\n            <slot name=\"navigation\"></slot>\n          </ul>\n        </nav>\n        <div class=\"tw-flex-1\"></div>\n        <!-- @slot Footer component slot, for rendering version/environment notes -->\n        <slot name=\"footer\"></slot>\n      </aside>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n  .stash-app-sidebar__aside {\n    padding-top: calc(theme('height.topbar') - 1px); /* -1px to compensate for the border height */\n    width: theme('width.sidebar');\n  }\n\n  .stash-app-sidebar__divider::before,\n  .stash-app-sidebar__divider::after {\n    border-bottom: 1px solid rgb(255 255 255 / 12%);\n  }\n\n  .backdrop-enter-active,\n  .backdrop-leave-active {\n    transition: opacity 200ms ease-in-out;\n  }\n\n  .backdrop-enter-from,\n  .backdrop-leave-to {\n    opacity: 0;\n  }\n\n  .aside-enter-active,\n  .aside-leave-active {\n    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;\n  }\n\n  .aside-enter-from,\n  .aside-leave-to {\n    opacity: 0;\n    transform: translateX(-20%);\n  }\n</style>\n"],"names":["slots","useSlots","isExtraLargeScreen","useMediaQuery","isBackdropVisible","computed","props","initialPageScrollingElementStyle","ref","isSidebarOpen","onBackdropClick","emit","getPageScrollingElement","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkBQA,IAAQC,KAWRC,IAAqBC,EAAc,gCAAgC,GACnEC,IAAoBC,EAAS,MAAMC,EAAM,UAAU,CAACJ,EAAmB,KAAK,GAC5EK,IAAmCC,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEC,IAAgBJ,EAAS,MAAMC,EAAM,UAAUJ,EAAmB,KAAK;AAE7E,aAASQ,IAAkB;AACzB,MAAAC,EAAK,SAAS,GACdA,EAAK,kBAAkB,EAAK;AAAA,IAC9B;AAEA,aAASC,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,WAAAC,EAAY,MAAM;AAChB,MAAIX,EAAmB,UAInBE,EAAkB,SACb,OAAA,OAAOG,EAAiC,OAAO;AAAA,QACpD,UAAUK,IAA0B,MAAM;AAAA,QAC1C,QAAQA,IAA0B,MAAM;AAAA,MAAA,CACzC,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUR,EAAkB,QAAQ,WAAWG,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQH,EAAkB,QAAQ,SAASG,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AppSidebar.js","sources":["../src/components/AppSidebar/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useSlots, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Divider from '../Divider/Divider.vue';\n\n  export interface AppSidebarProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    isOpen?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AppSidebarProps>(), {\n    isOpen: false,\n  });\n\n  const slots = useSlots();\n\n  const emit = defineEmits<{\n    /**\n     * @deprecated Use the `update:is-open` event instead\n     */\n    (e: 'dismiss'): void;\n    (e: 'update:is-open', isOpen: boolean): void;\n  }>();\n\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n  const isBackdropVisible = computed(() => props.isOpen && !isExtraLargeScreen.value);\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const isSidebarOpen = computed(() => props.isOpen || isExtraLargeScreen.value);\n\n  function onBackdropClick() {\n    emit('dismiss');\n    emit('update:is-open', false);\n  }\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watchEffect(() => {\n    if (isExtraLargeScreen.value) {\n      return;\n    }\n\n    if (isBackdropVisible.value) {\n      Object.assign(initialPageScrollingElementStyle.value, {\n        overflow: getPageScrollingElement().style.overflow,\n        height: getPageScrollingElement().style.height,\n      });\n    }\n\n    Object.assign(getPageScrollingElement().style, {\n      overflow: isBackdropVisible.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when AppSidebar is open\n      height: isBackdropVisible.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when AppSidebar is open\n    });\n  });\n</script>\n\n<template>\n  <div\n    id=\"stash-app-sidebar\"\n    class=\"stash-app-sidebar tw-relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'tw-z-modal': isBackdropVisible,\n      'tw-z-[301]': !isBackdropVisible,\n    }\"\n    data-test=\"stash-app-sidebar\"\n  >\n    <Transition name=\"backdrop\">\n      <Backdrop v-show=\"isBackdropVisible\" class=\"stash-app-sidebar__backdrop\" @click.stop=\"onBackdropClick\" />\n    </Transition>\n    <Transition name=\"aside\">\n      <aside\n        v-show=\"isSidebarOpen\"\n        class=\"stash-app-sidebar__aside tw-fixed tw-flex tw-h-screen tw-flex-col tw-bg-purple-500\"\n        data-test=\"stash-app-sidebar__aside\"\n      >\n        <Divider class=\"stash-app-sidebar__divider\" />\n        <div v-if=\"slots['app-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot App Context component slot, ideally for rendering the context switcher -->\n          <slot name=\"app-context\"></slot>\n        </div>\n        <div v-if=\"slots['company-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot Company Context component slot, ideally for rendering the company picker -->\n          <slot name=\"company-context\"></slot>\n        </div>\n        <nav v-if=\"slots['navigation']\" class=\"tw-pt-6\">\n          <ul role=\"menubar\" aria-orientation=\"vertical\">\n            <!-- @slot Navigation component slot, for rendering navigation items -->\n            <slot name=\"navigation\"></slot>\n          </ul>\n        </nav>\n        <div class=\"tw-flex-1\"></div>\n        <!-- @slot Footer component slot, for rendering version/environment notes -->\n        <slot name=\"footer\"></slot>\n      </aside>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n  .stash-app-sidebar__aside {\n    padding-top: calc(theme('height.topbar') - 1px); /* -1px to compensate for the border height */\n    width: theme('width.sidebar');\n  }\n\n  .stash-app-sidebar__divider::before,\n  .stash-app-sidebar__divider::after {\n    border-bottom: 1px solid rgb(255 255 255 / 12%);\n  }\n\n  .backdrop-enter-active,\n  .backdrop-leave-active {\n    transition: opacity 200ms ease-in-out;\n  }\n\n  .backdrop-enter-from,\n  .backdrop-leave-to {\n    opacity: 0;\n  }\n\n  .aside-enter-active,\n  .aside-leave-active {\n    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;\n  }\n\n  .aside-enter-from,\n  .aside-leave-to {\n    opacity: 0;\n    transform: translateX(-20%);\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emit","__emit","isExtraLargeScreen","useMediaQuery","isBackdropVisible","computed","initialPageScrollingElementStyle","ref","isSidebarOpen","onBackdropClick","getPageScrollingElement","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,KAERC,IAAOC,GAQPC,IAAqBC,EAAc,gCAAgC,GACnEC,IAAoBC,EAAS,MAAMT,EAAM,UAAU,CAACM,EAAmB,KAAK,GAC5EI,IAAmCC,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEC,IAAgBH,EAAS,MAAMT,EAAM,UAAUM,EAAmB,KAAK;AAE7E,aAASO,IAAkB;AACzB,MAAAT,EAAK,SAAS,GACdA,EAAK,kBAAkB,EAAK;AAAA,IAC9B;AAEA,aAASU,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,WAAAC,EAAY,MAAM;AAChB,MAAIT,EAAmB,UAInBE,EAAkB,SACb,OAAA,OAAOE,EAAiC,OAAO;AAAA,QACpD,UAAUI,IAA0B,MAAM;AAAA,QAC1C,QAAQA,IAA0B,MAAM;AAAA,MAAA,CACzC,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUN,EAAkB,QAAQ,WAAWE,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQF,EAAkB,QAAQ,SAASE,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AppSidebar.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -40,19 +39,19 @@ export declare interface AppSidebarProps {
     isOpen?: boolean;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppSidebarProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppSidebarProps>, {
     isOpen: boolean;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     dismiss: () => void;
     "update:is-open": (isOpen: boolean) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppSidebarProps>, {
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppSidebarProps>, {
     isOpen: boolean;
-}>>> & {
+}>>> & Readonly<{
     onDismiss?: (() => any) | undefined;
     "onUpdate:is-open"?: ((isOpen: boolean) => any) | undefined;
-}, {
+}>, {
     isOpen: boolean;
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     "app-context"?(_: {}): any;
     "company-context"?(_: {}): any;
     navigation?(_: {}): any;

package/dist/AppTopbar.js

@@ -1,16 +1,16 @@
-import { defineComponent as p, openBlock as c, createElementBlock as m, createElementVNode as t, normalizeClass as i, createVNode as o, unref as f, renderSlot as r } from "vue";
-import h from "./useMediaQuery.js";
-import b from "./Icon.js";
-import { _ as l } from "./Logo.vue_vue_type_script_setup_true_lang-d7da48a0.js";
+import { defineComponent as c, openBlock as m, createElementBlock as f, createElementVNode as t, normalizeClass as i, createVNode as o, unref as h, renderSlot as r } from "vue";
+import b from "./useMediaQuery.js";
+import u from "./Icon.js";
+import { _ as l } from "./Logo.vue_vue_type_script_setup_true_lang-2a2597cb.js";
 import "lodash-es/uniqueId";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./_plugin-vue_export-helper-dad06003.js";
 import "@leaflink/snitch";
-const u = {
+const x = {
   "data-test": "stash-app-topbar",
   class: "stash-app-topbar tw-absolute tw-left-0 tw-top-0"
-}, x = ["href"], _ = { class: "tw-flex tw-items-center" }, v = { class: "tw-ml-6" }, g = { class: "tw-hidden tw-pl-3 xl:tw-block" }, V = /* @__PURE__ */ p({
+}, _ = ["href"], v = { class: "tw-flex tw-items-center" }, g = { class: "tw-ml-6" }, k = { class: "tw-hidden tw-pl-3 xl:tw-block" }, j = /* @__PURE__ */ c({
   __name: "AppTopbar",
   props: {
     sidebarOpened: { type: Boolean, default: !1 },
@@ -18,8 +18,8 @@ const u = {
   },
   emits: ["toggle-sidebar"],
   setup(n, { emit: w }) {
-    const e = n, d = h("screen and (min-width: 1321px)");
-    return (s, a) => (c(), m("header", u, [
+    const e = n, d = w, p = b("screen and (min-width: 1321px)");
+    return (s, a) => (m(), f("header", x, [
       t("div", {
         class: i(["tw-fixed tw-top-0 tw-flex tw-h-topbar tw-w-sidebar tw-items-center tw-pl-3 xl:tw-text-white", {
           "tw-z-dialog tw-text-white": e.sidebarOpened,
@@ -28,9 +28,9 @@ const u = {
       }, [
         t("button", {
           class: "xl:tw-hidden",
-          onClick: a[0] || (a[0] = (k) => w("toggle-sidebar"))
+          onClick: a[0] || (a[0] = ($) => d("toggle-sidebar"))
         }, [
-          o(b, {
+          o(u, {
             name: "menu",
             class: "tw-mr-3",
             "aria-label": "open sidebar navigation"
@@ -46,21 +46,21 @@ const u = {
             class: "tw-transition-colors tw-duration-500 md:tw-hidden"
           }, null, 8, ["color"]),
           o(l, {
-            color: e.sidebarOpened || f(d) ? "white" : "purple",
+            color: e.sidebarOpened || h(p) ? "white" : "purple",
             class: "tw-hidden md:tw-block"
           }, null, 8, ["color"])
-        ], 8, x)
+        ], 8, _)
       ], 2),
       t("div", {
         class: i([[s.$attrs.class], "tw-fixed tw-top-0 tw-z-page tw-flex tw-h-topbar tw-w-full tw-flex-row-reverse tw-items-center tw-justify-between tw-bg-white tw-py-3 tw-pl-sidebar tw-pr-3 tw-shadow-md"])
       }, [
-        t("div", _, [
+        t("div", v, [
           r(s.$slots, "actions"),
-          t("div", v, [
+          t("div", g, [
             r(s.$slots, "avatar")
           ])
         ]),
-        t("div", g, [
+        t("div", k, [
           r(s.$slots, "text")
         ])
       ], 2)
@@ -68,6 +68,6 @@ const u = {
   }
 });
 export {
-  V as default
+  j as default
 };
 //# sourceMappingURL=AppTopbar.js.map

package/dist/AppTopbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppTopbar.js","sources":["../src/components/AppTopbar/AppTopbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Icon from '../Icon/Icon.vue';\n  import Logo from '../Logo/Logo.vue';\n\n  export interface AppTopbarProps {\n    /**\n     * Indicates if the AppSidebar is opened or not for styling purposes\n     */\n    sidebarOpened?: boolean;\n    /**\n     * Url for the logo anchor wrapper\n     */\n    href?: string;\n  }\n\n  const props = withDefaults(defineProps<AppTopbarProps>(), {\n    sidebarOpened: false,\n    href: '/',\n  });\n\n  const emit = defineEmits(['toggle-sidebar']);\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n</script>\n\n<template>\n  <header data-test=\"stash-app-topbar\" class=\"stash-app-topbar tw-absolute tw-left-0 tw-top-0\">\n    <div\n      class=\"tw-fixed tw-top-0 tw-flex tw-h-topbar tw-w-sidebar tw-items-center tw-pl-3 xl:tw-text-white\"\n      :class=\"{\n        'tw-z-dialog tw-text-white': props.sidebarOpened,\n        'tw-z-[401] tw-text-ice-700': !props.sidebarOpened,\n      }\"\n    >\n      <button class=\"xl:tw-hidden\" @click=\"emit('toggle-sidebar')\">\n        <Icon name=\"menu\" class=\"tw-mr-3\" aria-label=\"open sidebar navigation\" />\n      </button>\n\n      <a :href=\"props.href\" class=\"tw-flex tw-items-center tw-text-inherit\">\n        <Logo\n          :color=\"props.sidebarOpened ? 'white' : 'purple'\"\n          variant=\"brandmark\"\n          class=\"tw-transition-colors tw-duration-500 md:tw-hidden\"\n        />\n        <Logo :color=\"props.sidebarOpened || isExtraLargeScreen ? 'white' : 'purple'\" class=\"tw-hidden md:tw-block\" />\n      </a>\n    </div>\n\n    <div\n      :class=\"[$attrs.class]\"\n      class=\"\n        tw-fixed\n        tw-top-0\n        tw-z-page\n        tw-flex\n        tw-h-topbar\n        tw-w-full\n        tw-flex-row-reverse\n        tw-items-center\n        tw-justify-between\n        tw-bg-white\n        tw-py-3\n        tw-pl-sidebar\n        tw-pr-3\n        tw-shadow-md\n      \"\n    >\n      <div class=\"tw-flex tw-items-center\">\n        <!-- @slot Actions slot, for showing any actions to the left of the avatar -->\n        <slot name=\"actions\"></slot>\n        <div class=\"tw-ml-6\">\n          <!-- @slot Avatar slot, for showing the avatar on the far right of the header -->\n          <slot name=\"avatar\"></slot>\n        </div>\n      </div>\n      <div class=\"tw-hidden tw-pl-3 xl:tw-block\">\n        <!-- @slot Text slot, for showing informative texts on the left of large viewports -->\n        <slot name=\"text\"></slot>\n      </div>\n    </div>\n  </header>\n</template>\n"],"names":["isExtraLargeScreen","useMediaQuery"],"mappings":";;;;;;;;;;;;;;;;;;;;iBAsBQA,IAAqBC,EAAc,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AppTopbar.js","sources":["../src/components/AppTopbar/AppTopbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Icon from '../Icon/Icon.vue';\n  import Logo from '../Logo/Logo.vue';\n\n  export interface AppTopbarProps {\n    /**\n     * Indicates if the AppSidebar is opened or not for styling purposes\n     */\n    sidebarOpened?: boolean;\n    /**\n     * Url for the logo anchor wrapper\n     */\n    href?: string;\n  }\n\n  const props = withDefaults(defineProps<AppTopbarProps>(), {\n    sidebarOpened: false,\n    href: '/',\n  });\n\n  const emit = defineEmits(['toggle-sidebar']);\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n</script>\n\n<template>\n  <header data-test=\"stash-app-topbar\" class=\"stash-app-topbar tw-absolute tw-left-0 tw-top-0\">\n    <div\n      class=\"tw-fixed tw-top-0 tw-flex tw-h-topbar tw-w-sidebar tw-items-center tw-pl-3 xl:tw-text-white\"\n      :class=\"{\n        'tw-z-dialog tw-text-white': props.sidebarOpened,\n        'tw-z-[401] tw-text-ice-700': !props.sidebarOpened,\n      }\"\n    >\n      <button class=\"xl:tw-hidden\" @click=\"emit('toggle-sidebar')\">\n        <Icon name=\"menu\" class=\"tw-mr-3\" aria-label=\"open sidebar navigation\" />\n      </button>\n\n      <a :href=\"props.href\" class=\"tw-flex tw-items-center tw-text-inherit\">\n        <Logo\n          :color=\"props.sidebarOpened ? 'white' : 'purple'\"\n          variant=\"brandmark\"\n          class=\"tw-transition-colors tw-duration-500 md:tw-hidden\"\n        />\n        <Logo :color=\"props.sidebarOpened || isExtraLargeScreen ? 'white' : 'purple'\" class=\"tw-hidden md:tw-block\" />\n      </a>\n    </div>\n\n    <div\n      :class=\"[$attrs.class]\"\n      class=\"tw-fixed tw-top-0 tw-z-page tw-flex tw-h-topbar tw-w-full tw-flex-row-reverse tw-items-center tw-justify-between tw-bg-white tw-py-3 tw-pl-sidebar tw-pr-3 tw-shadow-md\"\n    >\n      <div class=\"tw-flex tw-items-center\">\n        <!-- @slot Actions slot, for showing any actions to the left of the avatar -->\n        <slot name=\"actions\"></slot>\n        <div class=\"tw-ml-6\">\n          <!-- @slot Avatar slot, for showing the avatar on the far right of the header -->\n          <slot name=\"avatar\"></slot>\n        </div>\n      </div>\n      <div class=\"tw-hidden tw-pl-3 xl:tw-block\">\n        <!-- @slot Text slot, for showing informative texts on the left of large viewports -->\n        <slot name=\"text\"></slot>\n      </div>\n    </div>\n  </header>\n</template>\n"],"names":["props","__props","emit","__emit","isExtraLargeScreen","useMediaQuery"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAKRC,IAAOC,GACPC,IAAqBC,EAAc,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AppTopbar.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -44,20 +43,20 @@ export declare interface AppTopbarProps {
     href?: string;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppTopbarProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppTopbarProps>, {
     sidebarOpened: boolean;
     href: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "toggle-sidebar": (...args: any[]) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppTopbarProps>, {
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppTopbarProps>, {
     sidebarOpened: boolean;
     href: string;
-}>>> & {
+}>>> & Readonly<{
     "onToggle-sidebar"?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
     href: string;
     sidebarOpened: boolean;
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     actions?(_: {}): any;
     avatar?(_: {}): any;
     text?(_: {}): any;

package/dist/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types/colors';\n  import colorSchemeUtil from '../../utils/colorScheme';\n\n  defineOptions({\n    name: 'll-avatar',\n  });\n\n  export interface AvatarProps {\n    /**\n     * The name of the user will be parsed and have its initial displayed in case the src prop is empty\n     */\n    name?: string;\n\n    /**\n     * The color for the chip that determines both the text and bg color. Needs to\n     * be one of the brand colors in our design system (not a shade).\n     */\n    colorScheme?: StashPrimaryColorGroup;\n\n    /**\n     * The shade of the provided color to use for the background color. This effects the inferred\n     * text color unless a specific text color is provided. Currently only `light` and `main`\n     * shades are supported. `dark` may be added in the future.\n     */\n    shade?: 'light' | 'main';\n\n    /**\n     * The image that will be displayed within the avatar\n     */\n    src?: string;\n\n    /**\n     * The alternative text to be displayed in case the image is unavailable\n     */\n    alt?: string;\n\n    /**\n     * The background color of the chip. Needs to be one of our design system colors.\n     */\n    bgColor?: StashCommonColor;\n\n    /**\n     * The color of the chip text. Needs to be one of our design system colors.\n     */\n    textColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<AvatarProps>(), {\n    src: undefined,\n    name: '',\n    alt: undefined,\n    colorScheme: 'ice',\n    shade: 'light',\n    bgColor: undefined,\n    textColor: undefined,\n  });\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const computedColors = computed(() =>\n    colorSchemeUtil({\n      shade: props.shade,\n      color: props.colorScheme,\n    }),\n  );\n\n  const initials = computed(() => {\n    const [firstName, lastName] = String(props.name).toUpperCase().split(' ');\n    const initials = lastName ? firstName.charAt(0) + lastName.charAt(0) : firstName.charAt(0);\n\n    return initials;\n  });\n\n  const isClickable = computed(() => {\n    return !!attrs.onClick;\n  });\n</script>\n\n<template>\n  <img\n    v-if=\"props.src\"\n    class=\"stash-avatar stash-avatar--image tw-inline-block tw-rounded-full\"\n    :class=\"[classes.root, { [classes.clickable]: isClickable }]\"\n    :alt=\"props.alt\"\n    :src=\"props.src\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  />\n  <div\n    v-else\n    class=\"\n      stash-avatar stash-avatar--initials\n      tw-inline-block tw-cursor-default tw-rounded-full tw-text-center tw-font-semibold\n    \"\n    :class=\"[\n      classes.root,\n      `tw-text-${props.textColor || computedColors.computedTextColor}`,\n      `tw-bg-${props.bgColor || computedColors.computedBgColor}`,\n      { [classes.clickable]: isClickable },\n    ]\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  >\n    {{ initials }}\n  </div>\n</template>\n\n<style module>\n  .root {\n    font-size: theme('fontSize.sm');\n    height: theme('spacing.9');\n    line-height: calc(theme('spacing.9') + 2px);\n    width: theme('spacing.9');\n  }\n\n  .clickable:hover,\n  .clickable:focus,\n  .clickable:active {\n    outline: 1px solid var(--color-blue-500);\n    outline-offset: -1px;\n  }\n\n  .clickable:focus,\n  .clickable:active {\n    box-shadow: 0 0 0 4px rgb(0 114 240 / 15%);\n  }\n</style>\n"],"names":["attrs","useAttrs","classes","useCssModule","computedColors","computed","colorSchemeUtil","props","initials","firstName","lastName","isClickable"],"mappings":";;;;;;;;;;;;;;;;iBA4DQA,IAAQC,KACRC,IAAUC,KAEVC,IAAiBC;AAAA,MAAS,MAC9BC,EAAgB;AAAA,QACd,OAAOC,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd;AAAA,IAAA,GAGGC,IAAWH,EAAS,MAAM;AACxB,YAAA,CAACI,GAAWC,CAAQ,IAAI,OAAOH,EAAM,IAAI,EAAE,YAAA,EAAc,MAAM,GAAG;AAGjEC,aAFUE,IAAWD,EAAU,OAAO,CAAC,IAAIC,EAAS,OAAO,CAAC,IAAID,EAAU,OAAO,CAAC;AAAA,IAElF,CACR,GAEKE,IAAcN,EAAS,MACpB,CAAC,CAACL,EAAM,OAChB;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types/colors';\n  import colorSchemeUtil from '../../utils/colorScheme';\n\n  defineOptions({\n    name: 'll-avatar',\n  });\n\n  export interface AvatarProps {\n    /**\n     * The name of the user will be parsed and have its initial displayed in case the src prop is empty\n     */\n    name?: string;\n\n    /**\n     * The color for the chip that determines both the text and bg color. Needs to\n     * be one of the brand colors in our design system (not a shade).\n     */\n    colorScheme?: StashPrimaryColorGroup;\n\n    /**\n     * The shade of the provided color to use for the background color. This effects the inferred\n     * text color unless a specific text color is provided. Currently only `light` and `main`\n     * shades are supported. `dark` may be added in the future.\n     */\n    shade?: 'light' | 'main';\n\n    /**\n     * The image that will be displayed within the avatar\n     */\n    src?: string;\n\n    /**\n     * The alternative text to be displayed in case the image is unavailable\n     */\n    alt?: string;\n\n    /**\n     * The background color of the chip. Needs to be one of our design system colors.\n     */\n    bgColor?: StashCommonColor;\n\n    /**\n     * The color of the chip text. Needs to be one of our design system colors.\n     */\n    textColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<AvatarProps>(), {\n    src: undefined,\n    name: '',\n    alt: undefined,\n    colorScheme: 'ice',\n    shade: 'light',\n    bgColor: undefined,\n    textColor: undefined,\n  });\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const computedColors = computed(() =>\n    colorSchemeUtil({\n      shade: props.shade,\n      color: props.colorScheme,\n    }),\n  );\n\n  const initials = computed(() => {\n    const [firstName, lastName] = String(props.name).toUpperCase().split(' ');\n    const initials = lastName ? firstName.charAt(0) + lastName.charAt(0) : firstName.charAt(0);\n\n    return initials;\n  });\n\n  const isClickable = computed(() => {\n    return !!attrs.onClick;\n  });\n</script>\n\n<template>\n  <img\n    v-if=\"props.src\"\n    class=\"stash-avatar stash-avatar--image tw-inline-block tw-rounded-full\"\n    :class=\"[classes.root, { [classes.clickable]: isClickable }]\"\n    :alt=\"props.alt\"\n    :src=\"props.src\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  />\n  <div\n    v-else\n    class=\"stash-avatar stash-avatar--initials tw-inline-block tw-cursor-default tw-rounded-full tw-text-center tw-font-semibold\"\n    :class=\"[\n      classes.root,\n      `tw-text-${props.textColor || computedColors.computedTextColor}`,\n      `tw-bg-${props.bgColor || computedColors.computedBgColor}`,\n      { [classes.clickable]: isClickable },\n    ]\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  >\n    {{ initials }}\n  </div>\n</template>\n\n<style module>\n  .root {\n    font-size: theme('fontSize.sm');\n    height: theme('spacing.9');\n    line-height: calc(theme('spacing.9') + 2px);\n    width: theme('spacing.9');\n  }\n\n  .clickable:hover,\n  .clickable:focus,\n  .clickable:active {\n    outline: 1px solid var(--color-blue-500);\n    outline-offset: -1px;\n  }\n\n  .clickable:focus,\n  .clickable:active {\n    box-shadow: 0 0 0 4px rgb(0 114 240 / 15%);\n  }\n</style>\n"],"names":["props","__props","attrs","useAttrs","classes","useCssModule","computedColors","computed","colorSchemeUtil","initials","firstName","lastName","isClickable"],"mappings":";;;;;;;;;;;;;;;;AAkDE,UAAMA,IAAQC,GAURC,IAAQC,KACRC,IAAUC,KAEVC,IAAiBC;AAAA,MAAS,MAC9BC,EAAgB;AAAA,QACd,OAAOR,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd;AAAA,IAAA,GAGGS,IAAWF,EAAS,MAAM;AACxB,YAAA,CAACG,GAAWC,CAAQ,IAAI,OAAOX,EAAM,IAAI,EAAE,YAAA,EAAc,MAAM,GAAG;AAGjES,aAFUE,IAAWD,EAAU,OAAO,CAAC,IAAIC,EAAS,OAAO,CAAC,IAAID,EAAU,OAAO,CAAC;AAAA,IAElF,CACR,GAEKE,IAAcL,EAAS,MACpB,CAAC,CAACL,EAAM,OAChB;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Avatar.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -61,7 +60,7 @@ export declare interface AvatarProps {
     textColor?: StashCommonColor;
 }
 
-declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AvatarProps>, {
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AvatarProps>, {
     src: undefined;
     name: string;
     alt: undefined;
@@ -69,7 +68,7 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     shade: string;
     bgColor: undefined;
     textColor: undefined;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AvatarProps>, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AvatarProps>, {
     src: undefined;
     name: string;
     alt: undefined;
@@ -77,15 +76,15 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     shade: string;
     bgColor: undefined;
     textColor: undefined;
-}>>>, {
+}>>> & Readonly<{}>, {
     name: string;
     src: string;
-    alt: string;
     shade: "main" | "light";
     colorScheme: StashPrimaryColorGroup;
     bgColor: "ice-700" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-500" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-500" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-500" | "orange-100" | "red-700" | "red-500" | "red-100" | "ice-500" | "ice-200" | "ice-100" | "white" | "black";
     textColor: "ice-700" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-500" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-500" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-500" | "orange-100" | "red-700" | "red-500" | "red-100" | "ice-500" | "ice-200" | "ice-100" | "white" | "black";
-}, {}>;
+    alt: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 declare type StashCommonColor = `${StashCommonColors}`;

package/dist/Backdrop.vue.d.ts

@@ -1,9 +1,7 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
@@ -11,7 +9,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/Badge.js

@@ -21,7 +21,7 @@ const D = {
     variant: { default: "standard" }
   },
   setup(p) {
-    const t = p, o = g(), s = l(() => {
+    const o = g(), t = p, s = l(() => {
       const e = parseInt(t.content, 10), a = parseInt(t.max, 10);
       return e != t.content || a != t.max ? t.content : e > a ? `${a}+` : e;
     }), d = (e) => e === 0 ? "0" : `${e}px`, f = l(() => ({

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useCssModule, watch } from 'vue';\n\n  defineOptions({\n    name: 'll-badge',\n  });\n\n  const classes = useCssModule();\n\n  export interface BadgeProps {\n    /**\n     * If true, the badge will animate when the content changes\n     */\n    animate?: boolean;\n\n    /**\n     * Color of the badge\n     * Options: 'red' or 'blue'\n     */\n    color?: 'red' | 'blue';\n\n    /**\n     * The badge's content\n     */\n    content?: number | string;\n\n    /**\n     * Shows a gray badge with content\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The max value of the `content` prop. If the value is greater than this, the badge will show the max value and a `+` sign.\n     */\n    max?: number | string;\n\n    /**\n     * Offset to adjust the badge's position. It does not apply to inline position badges.\n     */\n    offset?: {\n      top?: number;\n      right?: number;\n    };\n\n    /**\n     * Badge position. Options:\n     *\n     * - inline: shows the badge directly next to the content (on the right), with a left margin of 6px\n     * - top-right: will overlap the badge over whatever is passed in the default slot\n     */\n    position?: 'top-right' | 'inline';\n\n    /**\n     * The badge will be hidden if the content is `0` unless this prop is set to true.\n     */\n    showZero?: boolean;\n\n    /**\n     * Badge variant\n     */\n    variant?: 'dot' | 'standard';\n  }\n\n  const props = withDefaults(defineProps<BadgeProps>(), {\n    animate: false,\n    color: 'red',\n    content: undefined,\n    isDisabled: false,\n    max: 99,\n    position: 'top-right',\n    offset: () => ({\n      top: undefined,\n      right: undefined,\n    }),\n    showZero: false,\n    variant: 'standard',\n  });\n\n  const computedContent = computed(() => {\n    const numericContent = parseInt(props.content as string, 10);\n    const numericMax = parseInt(props.max as string, 10);\n    // We want to compare the values, not the types, so it's okay to use `!=` here. i.e. if '23' = 23, then we know\n    // the props are numbers, and we can compare the values. If you pass '23foobar' parseInt will return still return 23\n    // but this check will fail like we want it to.\n    // eslint-disable-next-line eqeqeq\n    if (numericContent != props.content || numericMax != props.max) {\n      return props.content;\n    }\n\n    return numericContent > numericMax ? `${numericMax}+` : numericContent;\n  });\n\n  const formatOffsetStyleValue = (value: number) => (value === 0 ? '0' : `${value}px`);\n\n  const computedOffsetStyle = computed(() => ({\n    top: props.offset.top !== undefined ? formatOffsetStyleValue(props.offset.top) : undefined,\n    right: props.offset.right !== undefined ? formatOffsetStyleValue(props.offset.right) : undefined,\n  }));\n\n  const playAnimation = ref(false);\n\n  watch(\n    () => props.content,\n    (value, oldValue) => {\n      if (!props.animate) {\n        return;\n      }\n\n      if (oldValue !== value) {\n        playAnimation.value = true;\n\n        setTimeout(() => {\n          playAnimation.value = false;\n        }, 1000);\n      }\n    },\n  );\n</script>\n\n<template>\n  <span class=\"stash-badge tw-relative tw-inline-block\" data-test=\"stash-badge\">\n    <slot />\n    <span\n      v-show=\"props.variant === 'dot' || computedContent || (computedContent === 0 && props.showZero)\"\n      data-test=\"stash-badge|content-wrapper\"\n      :class=\"[\n        {\n          [classes['top-right']]: props.position === 'top-right' && props.variant !== 'dot',\n          'tw-absolute': props.variant === 'dot' || props.position === 'top-right',\n          'tw-ml-1.5': props.position === 'inline',\n        },\n      ]\"\n      :style=\"props.variant === 'dot' || props.position === 'top-right' ? computedOffsetStyle : ''\"\n    >\n      <span\n        data-test=\"stash-badge|content\"\n        class=\"\n          tw-inline-block\n          tw-whitespace-nowrap\n          tw-rounded-full\n          tw-text-center\n          tw-text-[10px]\n          tw-font-semibold\n          tw-leading-4\n          tw-text-white\n        \"\n        :class=\"[\n          {\n            'tw-animate-grow': playAnimation,\n            'tw-bg-red-500': props.color === 'red' && !props.isDisabled,\n            'tw-bg-blue-500': props.color === 'blue' && !props.isDisabled,\n            'tw-absolute': props.variant === 'dot',\n            'tw-bg-ice-200 tw-text-white': props.isDisabled,\n            [classes['badge-dot']]: props.variant === 'dot',\n            [classes['badge-standard']]: props.variant === 'standard',\n            'tw-px-1.5': props.variant !== 'dot',\n          },\n        ]\"\n      >\n        {{ props.variant === 'dot' ? null : computedContent }}\n      </span>\n    </span>\n  </span>\n</template>\n\n<style module>\n  .badge-standard {\n    height: 15px;\n    vertical-align: middle;\n  }\n\n  .badge-dot {\n    border: 2px solid var(--color-ice-100);\n    height: 10px;\n    right: 0;\n    width: 10px;\n  }\n\n  .top-right {\n    top: 0;\n    right: 0;\n    transform: translateX(50%) translateY(-48%);\n  }\n</style>\n"],"names":["classes","useCssModule","computedContent","computed","numericContent","props","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAOQA,IAAUC,KAuEVC,IAAkBC,EAAS,MAAM;AACrC,YAAMC,IAAiB,SAASC,EAAM,SAAmB,EAAE,GACrDC,IAAa,SAASD,EAAM,KAAe,EAAE;AAKnD,aAAID,KAAkBC,EAAM,WAAWC,KAAcD,EAAM,MAClDA,EAAM,UAGRD,IAAiBE,IAAa,GAAGA,OAAgBF;AAAA,IAAA,CACzD,GAEKG,IAAyB,CAACC,MAAmBA,MAAU,IAAI,MAAM,GAAGA,OAEpEC,IAAsBN,EAAS,OAAO;AAAA,MAC1C,KAAKE,EAAM,OAAO,QAAQ,SAAYE,EAAuBF,EAAM,OAAO,GAAG,IAAI;AAAA,MACjF,OAAOA,EAAM,OAAO,UAAU,SAAYE,EAAuBF,EAAM,OAAO,KAAK,IAAI;AAAA,IACvF,EAAA,GAEIK,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACG,GAAOK,MAAa;AACf,QAACR,EAAM,WAIPQ,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,WACrB,GAAI;AAAA,MAEX;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useCssModule, watch } from 'vue';\n\n  defineOptions({\n    name: 'll-badge',\n  });\n\n  const classes = useCssModule();\n\n  export interface BadgeProps {\n    /**\n     * If true, the badge will animate when the content changes\n     */\n    animate?: boolean;\n\n    /**\n     * Color of the badge\n     * Options: 'red' or 'blue'\n     */\n    color?: 'red' | 'blue';\n\n    /**\n     * The badge's content\n     */\n    content?: number | string;\n\n    /**\n     * Shows a gray badge with content\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The max value of the `content` prop. If the value is greater than this, the badge will show the max value and a `+` sign.\n     */\n    max?: number | string;\n\n    /**\n     * Offset to adjust the badge's position. It does not apply to inline position badges.\n     */\n    offset?: {\n      top?: number;\n      right?: number;\n    };\n\n    /**\n     * Badge position. Options:\n     *\n     * - inline: shows the badge directly next to the content (on the right), with a left margin of 6px\n     * - top-right: will overlap the badge over whatever is passed in the default slot\n     */\n    position?: 'top-right' | 'inline';\n\n    /**\n     * The badge will be hidden if the content is `0` unless this prop is set to true.\n     */\n    showZero?: boolean;\n\n    /**\n     * Badge variant\n     */\n    variant?: 'dot' | 'standard';\n  }\n\n  const props = withDefaults(defineProps<BadgeProps>(), {\n    animate: false,\n    color: 'red',\n    content: undefined,\n    isDisabled: false,\n    max: 99,\n    position: 'top-right',\n    offset: () => ({\n      top: undefined,\n      right: undefined,\n    }),\n    showZero: false,\n    variant: 'standard',\n  });\n\n  const computedContent = computed(() => {\n    const numericContent = parseInt(props.content as string, 10);\n    const numericMax = parseInt(props.max as string, 10);\n    // We want to compare the values, not the types, so it's okay to use `!=` here. i.e. if '23' = 23, then we know\n    // the props are numbers, and we can compare the values. If you pass '23foobar' parseInt will return still return 23\n    // but this check will fail like we want it to.\n    // eslint-disable-next-line eqeqeq\n    if (numericContent != props.content || numericMax != props.max) {\n      return props.content;\n    }\n\n    return numericContent > numericMax ? `${numericMax}+` : numericContent;\n  });\n\n  const formatOffsetStyleValue = (value: number) => (value === 0 ? '0' : `${value}px`);\n\n  const computedOffsetStyle = computed(() => ({\n    top: props.offset.top !== undefined ? formatOffsetStyleValue(props.offset.top) : undefined,\n    right: props.offset.right !== undefined ? formatOffsetStyleValue(props.offset.right) : undefined,\n  }));\n\n  const playAnimation = ref(false);\n\n  watch(\n    () => props.content,\n    (value, oldValue) => {\n      if (!props.animate) {\n        return;\n      }\n\n      if (oldValue !== value) {\n        playAnimation.value = true;\n\n        setTimeout(() => {\n          playAnimation.value = false;\n        }, 1000);\n      }\n    },\n  );\n</script>\n\n<template>\n  <span class=\"stash-badge tw-relative tw-inline-block\" data-test=\"stash-badge\">\n    <slot />\n    <span\n      v-show=\"props.variant === 'dot' || computedContent || (computedContent === 0 && props.showZero)\"\n      data-test=\"stash-badge|content-wrapper\"\n      :class=\"[\n        {\n          [classes['top-right']]: props.position === 'top-right' && props.variant !== 'dot',\n          'tw-absolute': props.variant === 'dot' || props.position === 'top-right',\n          'tw-ml-1.5': props.position === 'inline',\n        },\n      ]\"\n      :style=\"props.variant === 'dot' || props.position === 'top-right' ? computedOffsetStyle : ''\"\n    >\n      <span\n        data-test=\"stash-badge|content\"\n        class=\"tw-inline-block tw-whitespace-nowrap tw-rounded-full tw-text-center tw-text-[10px] tw-font-semibold tw-leading-4 tw-text-white\"\n        :class=\"[\n          {\n            'tw-animate-grow': playAnimation,\n            'tw-bg-red-500': props.color === 'red' && !props.isDisabled,\n            'tw-bg-blue-500': props.color === 'blue' && !props.isDisabled,\n            'tw-absolute': props.variant === 'dot',\n            'tw-bg-ice-200 tw-text-white': props.isDisabled,\n            [classes['badge-dot']]: props.variant === 'dot',\n            [classes['badge-standard']]: props.variant === 'standard',\n            'tw-px-1.5': props.variant !== 'dot',\n          },\n        ]\"\n      >\n        {{ props.variant === 'dot' ? null : computedContent }}\n      </span>\n    </span>\n  </span>\n</template>\n\n<style module>\n  .badge-standard {\n    height: 15px;\n    vertical-align: middle;\n  }\n\n  .badge-dot {\n    border: 2px solid var(--color-ice-100);\n    height: 10px;\n    right: 0;\n    width: 10px;\n  }\n\n  .top-right {\n    top: 0;\n    right: 0;\n    transform: translateX(50%) translateY(-48%);\n  }\n</style>\n"],"names":["classes","useCssModule","props","__props","computedContent","computed","numericContent","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOE,UAAMA,IAAUC,KAwDVC,IAAQC,GAeRC,IAAkBC,EAAS,MAAM;AACrC,YAAMC,IAAiB,SAASJ,EAAM,SAAmB,EAAE,GACrDK,IAAa,SAASL,EAAM,KAAe,EAAE;AAKnD,aAAII,KAAkBJ,EAAM,WAAWK,KAAcL,EAAM,MAClDA,EAAM,UAGRI,IAAiBC,IAAa,GAAGA,OAAgBD;AAAA,IAAA,CACzD,GAEKE,IAAyB,CAACC,MAAmBA,MAAU,IAAI,MAAM,GAAGA,OAEpEC,IAAsBL,EAAS,OAAO;AAAA,MAC1C,KAAKH,EAAM,OAAO,QAAQ,SAAYM,EAAuBN,EAAM,OAAO,GAAG,IAAI;AAAA,MACjF,OAAOA,EAAM,OAAO,UAAU,SAAYM,EAAuBN,EAAM,OAAO,KAAK,IAAI;AAAA,IACvF,EAAA,GAEIS,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACO,GAAOK,MAAa;AACf,QAACZ,EAAM,WAIPY,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,WACrB,GAAI;AAAA,MAEX;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Badge.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -79,7 +78,7 @@ export declare interface BadgeProps {
     variant?: 'dot' | 'standard';
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BadgeProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BadgeProps>, {
     animate: boolean;
     color: string;
     content: undefined;
@@ -92,7 +91,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     };
     showZero: boolean;
     variant: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BadgeProps>, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BadgeProps>, {
     animate: boolean;
     color: string;
     content: undefined;
@@ -105,10 +104,10 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     };
     showZero: boolean;
     variant: string;
-}>>>, {
+}>>> & Readonly<{}>, {
+    max: string | number;
     animate: boolean;
     color: "blue" | "red";
-    max: string | number;
     offset: {
         top?: number | undefined;
         right?: number | undefined;
@@ -118,7 +117,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     variant: "standard" | "dot";
     isDisabled: boolean;
     showZero: boolean;
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/Box.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -52,22 +51,22 @@ export declare interface BoxProps {
     radius?: 'none' | 'rounded';
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BoxProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BoxProps>, {
     disablePadding: boolean;
     disableGutters: boolean;
     disableElevation: boolean;
     radius: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BoxProps>, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BoxProps>, {
     disablePadding: boolean;
     disableGutters: boolean;
     disableElevation: boolean;
     radius: string;
-}>>>, {
+}>>> & Readonly<{}>, {
     radius: "none" | "rounded";
     disablePadding: boolean;
     disableGutters: boolean;
     disableElevation: boolean;
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/Box.vue_vue_type_script_setup_true_lang-69e5176b.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.vue_vue_type_script_setup_true_lang-69e5176b.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Box.vue_vue_type_script_setup_true_lang-69e5176b.js","sources":["../src/components/Box/Box.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  defineOptions({\n    name: 'll-box',\n  });\n\n  export interface BoxProps {\n    /**\n     * Remove the padding around the entire Box.\n     */\n    disablePadding?: boolean;\n\n    /**\n     * Remove the padding on the left and right of the Box.\n     */\n    disableGutters?: boolean;\n\n    /**\n     * Remove the padding on the left and right of the Box.\n     */\n    disableElevation?: boolean;\n\n    /**\n     * Border radius style. Defaults to `rounded`.\n     */\n    radius?: 'none' | 'rounded';\n  }\n\n  const props = withDefaults(defineProps<BoxProps>(), {\n    disablePadding: false,\n    disableGutters: false,\n    disableElevation: false,\n    radius: 'rounded',\n  });\n</script>\n\n<template>\n  <section\n    class=\"stash-box tw-bg-white\"\n    :class=\"{\n      'tw-rounded': props.radius === 'rounded',\n      'tw-p-gutter': !props.disablePadding && !props.disableGutters,\n      'tw-py-gutter': props.disableGutters,\n      'tw-shadow': !props.disableElevation,\n    }\"\n    data-test=\"stash-box\"\n  >\n    <!-- @slot default -->\n    <slot></slot>\n  </section>\n</template>\n"],"names":["props","__props"],"mappings":";;;;;;;;;;;AA2BE,UAAMA,IAAQC;;;;;;;;;;;;;;"}