@leaflink/stash 51.9.2 → 51.10.0

package/dist/Alert.vue.d.ts

@@ -1,38 +1,15 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
-    };
-};
-
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-export declare interface AlertProps {
+declare interface AlertProps {
     /**
      * Determines if the alert is centered
      */
@@ -70,28 +47,14 @@ export declare interface AlertProps {
     variant?: 'outlined' | 'filled';
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AlertProps>, {
-centered: boolean;
-permanent: boolean;
-radius: string;
-severity: string;
-sticky: null;
-variant: string;
-}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AlertProps>, {
-centered: boolean;
-permanent: boolean;
-radius: string;
-severity: string;
-sticky: null;
-variant: string;
-}>>> & Readonly<{}>, {
-radius: "standard" | "none";
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<AlertProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<AlertProps> & Readonly<{}>, {
 sticky: number | null;
+radius: "standard" | "none";
 centered: boolean;
 permanent: boolean;
 severity: "error" | "warning" | "info" | "success";
 variant: "outlined" | "filled";
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;
     link?(_: {}): any;
 }>;

package/dist/AppNavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppNavigationItem.js","sources":["../src/components/AppNavigationItem/AppNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useSlots } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import Expand from '../Expand/Expand.vue';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface AppNavigationItemProps {\n    /**\n     * Location to navigate to\n     */\n    to: RouteLocationRaw;\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n    /**\n     * Text label to render\n     */\n    label: string;\n    /**\n     * Indicates whether the route is active or not\n     */\n    isActive?: boolean;\n  }\n\n  const isExpanded = ref(false);\n\n  const props = withDefaults(defineProps<AppNavigationItemProps>(), {\n    isActive: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <li>\n    <router-link\n      v-if=\"!slots['sub-items']\"\n      :to=\"props.to\"\n      :class=\"[$style.item, { [$style.active]: props.isActive }]\"\n      :active-class=\"$style.active\"\n      class=\"tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal tw-capitalize\"\n    >\n      <div class=\"tw-flex tw-flex-1 tw-items-center tw-overflow-hidden\">\n        <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n        <span class=\"tw-truncate\">{{ props.label }}</span>\n      </div>\n      <!-- @slot Default component slot, for content to the right side of item -->\n      <slot></slot>\n    </router-link>\n    <div v-else>\n      <button\n        :class=\"[$style.item, { [$style.expanded]: isExpanded }]\"\n        class=\"tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal tw-capitalize\"\n        @click=\"() => (isExpanded = !isExpanded)\"\n      >\n        <div class=\"tw-flex tw-flex-1 tw-items-center tw-overflow-hidden\">\n          <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n          <span class=\"tw-truncate\">{{ props.label }}</span>\n        </div>\n        <Icon :class=\"[$style.caret, { [$style.expandedIcon]: isExpanded }]\" name=\"chevron-left\" />\n      </button>\n      <Expand :is-expanded=\"isExpanded\" :class=\"$style.expand\">\n        <ul :class=\"$style['sub-items']\">\n          <!-- @slot Sub items component slot, for rendering nested navigation items -->\n          <slot name=\"sub-items\"></slot>\n        </ul>\n      </Expand>\n    </div>\n  </li>\n</template>\n\n<style module>\n  .item {\n    border-left: 6px solid transparent;\n    color: var(--color-ice-500);\n    padding: 10px 12px;\n    transition: background-color 150ms;\n  }\n\n  .item:hover,\n  .item:focus {\n    text-decoration: none;\n    background: #140e35;\n  }\n\n  .sub-items .item {\n    padding-left: 40px;\n  }\n\n  .expanded {\n    background-color: #263256;\n  }\n\n  .active {\n    color: var(--color-seafoam-500);\n    border-color: var(--color-seafoam-500);\n    background: #140e35;\n  }\n\n  .caret {\n    transition: transform 300ms ease-in-out;\n  }\n\n  .expanded .caret {\n    transform: rotate(-90deg);\n  }\n</style>\n"],"names":["isExpanded","ref","props","__props","slots","useSlots"],"mappings":";;;;;;;;;;;;;AA2BQ,UAAAA,IAAaC,EAAI,EAAK,GAEtBC,IAAQC,GAIRC,IAAQC,EAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AppNavigationItem.js","sources":["../src/components/AppNavigationItem/AppNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useSlots } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import Expand from '../Expand/Expand.vue';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface AppNavigationItemProps {\n    /**\n     * Location to navigate to\n     */\n    to: RouteLocationRaw;\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n    /**\n     * Text label to render\n     */\n    label: string;\n    /**\n     * Indicates whether the route is active or not\n     */\n    isActive?: boolean;\n  }\n\n  const isExpanded = ref(false);\n\n  const props = withDefaults(defineProps<AppNavigationItemProps>(), {\n    isActive: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <li>\n    <router-link\n      v-if=\"!slots['sub-items']\"\n      :to=\"props.to\"\n      :class=\"[$style.item, { [$style.active]: props.isActive }]\"\n      :active-class=\"$style.active\"\n      class=\"tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal tw-capitalize\"\n    >\n      <div class=\"tw-flex tw-flex-1 tw-items-center tw-overflow-hidden\">\n        <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n        <span class=\"tw-truncate\">{{ props.label }}</span>\n      </div>\n      <!-- @slot Default component slot, for content to the right side of item -->\n      <slot></slot>\n    </router-link>\n    <div v-else>\n      <button\n        :class=\"[$style.item, { [$style.expanded]: isExpanded }]\"\n        class=\"tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal tw-capitalize\"\n        @click=\"() => (isExpanded = !isExpanded)\"\n      >\n        <div class=\"tw-flex tw-flex-1 tw-items-center tw-overflow-hidden\">\n          <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n          <span class=\"tw-truncate\">{{ props.label }}</span>\n        </div>\n        <Icon :class=\"[$style.caret, { [$style.expandedIcon]: isExpanded }]\" name=\"chevron-left\" />\n      </button>\n      <Expand :is-expanded=\"isExpanded\" :class=\"$style.expand\">\n        <ul :class=\"$style['sub-items']\">\n          <!-- @slot Sub items component slot, for rendering nested navigation items -->\n          <slot name=\"sub-items\"></slot>\n        </ul>\n      </Expand>\n    </div>\n  </li>\n</template>\n\n<style module>\n  .item {\n    border-left: 6px solid transparent;\n    color: var(--color-ice-500);\n    padding: 10px 12px;\n    transition: background-color 150ms;\n  }\n\n  .item:hover,\n  .item:focus {\n    text-decoration: none;\n    background: #140e35;\n  }\n\n  .sub-items .item {\n    padding-left: 40px;\n  }\n\n  .expanded {\n    background-color: #263256;\n  }\n\n  .active {\n    color: var(--color-seafoam-500);\n    border-color: var(--color-seafoam-500);\n    background: #140e35;\n  }\n\n  .caret {\n    transition: transform 300ms ease-in-out;\n  }\n\n  .expanded .caret {\n    transform: rotate(-90deg);\n  }\n</style>\n"],"names":["isExpanded","ref","props","__props","slots","useSlots","_createElementBlock","_unref","_hoisted_3","_createElementVNode","_normalizeClass","$style","_cache","_hoisted_4","_createVNode","Icon","_hoisted_5","_toDisplayString","Expand","_renderSlot","_ctx","_createBlock","_component_router_link","_hoisted_1","_hoisted_2"],"mappings":";;;;;;;;;;;;;AA2BE,UAAMA,IAAaC,EAAI,EAAK,GAEtBC,IAAQC,GAIRC,IAAQC,EAAA;;;kBAIdC,EAkCK,MAAA,MAAA;AAAA,QAhCMC,EAAAH,CAAA,EAAK,WAAA,UAadE,EAkBM,OAAAE,GAAA;AAAA,UAjBJC,EAUS,UAAA;AAAA,YATN,OAAKC,EAAA,CAAA,CAAGC,EAAAA,OAAO,MAAI,EAAA,CAAKA,EAAAA,OAAO,QAAQ,GAAGX,EAAA,OAAU,GAC/C,mFAAmF,CAAA;AAAA,YACxF,SAAKY,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,MAASZ,EAAA,QAAU,CAAIA,EAAA;AAAA,UAAA;YAE7BS,EAGM,OAHNI,GAGM;AAAA,cAFJC,EAA2CC,GAAA;AAAA,gBAApC,MAAMb,EAAM;AAAA,gBAAM,OAAM;AAAA,cAAA;cAC/BO,EAAkD,QAAlDO,GAAkDC,EAArBf,EAAM,KAAK,GAAA,CAAA;AAAA,YAAA;YAE1CY,EAA2FC,GAAA;AAAA,cAApF,OAAKL,EAAA,CAAGC,SAAO,UAAUA,EAAAA,OAAO,YAAY,GAAGX,EAAA,MAAA,CAAU,CAAA;AAAA,cAAK,MAAK;AAAA,YAAA;;UAE5Ec,EAKSI,GAAA;AAAA,YALA,eAAalB,EAAA;AAAA,YAAa,OAAKU,EAAEC,EAAAA,OAAO,MAAM;AAAA,UAAA;uBACrD,MAGK;AAAA,cAHLF,EAGK,MAAA;AAAA,gBAHA,SAAOE,EAAAA,OAAM,WAAA,CAAA;AAAA,cAAA;gBAEhBQ,EAA8BC,EAAA,QAAA,WAAA;AAAA,cAAA;;;;oBA7BpCC,EAacC,GAAA;AAAA;UAXX,IAAIpB,EAAM;AAAA,UACV,OAAKQ,EAAA,CAAA,CAAGC,EAAAA,OAAO,MAAI,EAAA,CAAKA,EAAAA,OAAO,MAAM,GAAGT,EAAM,aAEzC,mFAAmF,CAAA;AAAA,UADxF,gBAAcS,EAAAA,OAAO;AAAA,QAAA;qBAGtB,MAGM;AAAA,YAHNF,EAGM,OAHNc,GAGM;AAAA,cAFJT,EAA2CC,GAAA;AAAA,gBAApC,MAAMb,EAAM;AAAA,gBAAM,OAAM;AAAA,cAAA;cAC/BO,EAAkD,QAAlDe,GAAkDP,EAArBf,EAAM,KAAK,GAAA,CAAA;AAAA,YAAA;YAG1CiB,EAAaC,EAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;;;;;;;;"}

package/dist/AppNavigationItem.vue.d.ts

@@ -1,39 +1,16 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
-    };
-};
-
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-export declare interface AppNavigationItemProps {
+declare interface AppNavigationItemProps {
     /**
      * Location to navigate to
      */
@@ -52,15 +29,11 @@ export declare interface AppNavigationItemProps {
     isActive?: boolean;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppNavigationItemProps>, {
-isActive: boolean;
-}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppNavigationItemProps>, {
-isActive: boolean;
-}>>> & Readonly<{}>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<AppNavigationItemProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<AppNavigationItemProps> & Readonly<{}>, {
 isActive: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLIElement>, {
     default?(_: {}): any;
-    "sub-items"?(_: {}): any;
+    'sub-items'?(_: {}): any;
 }>;
 export default _default;
 
@@ -71,6 +44,6 @@ declare type IconName = (typeof iconNames)[number];
  *
  * https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon
  */
-declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "bank", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "face-id", "face", "figma", "file-csv", "file", "filter-funnel", "filter-line", "fingerprint", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reorder", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "start", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "tag-leaf", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
+declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "bank", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "cloud-share", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "face-id", "face", "figma", "file-csv", "file", "filter-funnel", "filter-line", "fingerprint", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reorder", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "start", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "tag-leaf", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
 
 export { }

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 = 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        :class=\"{ 'tw-shadow-3xl': isBackdropVisible }\"\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:\n      opacity 200ms ease-in-out,\n      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,EAAS,GAEjBC,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,IAAA;AAG9B,aAASU,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAAA;AAGhD,WAAAC,EAAY,MAAM;AAChB,MAAIT,EAAmB,UAInBE,EAAkB,SACb,OAAA,OAAOE,EAAiC,OAAO;AAAA,QACpD,UAAUI,IAA0B,MAAM;AAAA,QAC1C,QAAQA,EAAwB,EAAE,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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        :class=\"{ 'tw-shadow-3xl': isBackdropVisible }\"\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:\n      opacity 200ms ease-in-out,\n      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","_createElementBlock","_createVNode","_Transition","Backdrop","_createElementVNode","_normalizeClass","Divider","_unref","_openBlock","_hoisted_1","_renderSlot","_ctx","_hoisted_2","_hoisted_3","_hoisted_4"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,EAAA,GAERC,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;AACjC,aAAQ,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,WAAAC,EAAY,MAAM;AAChB,MAAIT,EAAmB,UAInBE,EAAkB,SACpB,OAAO,OAAOE,EAAiC,OAAO;AAAA,QACpD,UAAUI,IAA0B,MAAM;AAAA,QAC1C,QAAQA,EAAA,EAA0B,MAAM;AAAA,MAAA,CACzC,GAGH,OAAO,OAAOA,EAAA,EAA0B,OAAO;AAAA,QAC7C,UAAUN,EAAkB,QAAQ,WAAWE,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQF,EAAkB,QAAQ,SAASE,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IACH,CAAC,mBAIDM,EAwCM,OAAA;AAAA,MAvCJ,IAAG;AAAA,MACH,UAAM,iCAA+B;AAAA,sCACSJ,EAAA;AAAA,sBAAmCJ,EAAA;AAAA,uBAAwCA,EAAA;AAAA,MAAA;MAKzH,aAAU;AAAA,IAAA;MAEVS,EAEaC,GAAA,EAFD,MAAK,cAAU;AAAA,mBACzB,MAAyG;AAAA,YAAzGD,EAAyGE,GAAA;AAAA,YAApE,OAAM;AAAA,YAA+B,WAAYN,GAAe,CAAA,MAAA,CAAA;AAAA,UAAA;gBAAnFL,EAAA,KAAiB;AAAA,UAAA;;;;MAErCS,EA0BaC,GAAA,EA1BD,MAAK,WAAO;AAAA,mBACtB,MAwBQ;AAAA,YAxBRE,EAwBQ,SAAA;AAAA,YAtBN,OAAKC,EAAA,CAAC,sFAAoF,EAAA,iBAC/Db,EAAA,MAAA,CAAiB,CAAA;AAAA,YAC5C,aAAU;AAAA,UAAA;YAEVS,EAA8CK,GAAA,EAArC,OAAM,8BAA4B;AAAA,YAChCC,EAAArB,CAAA,EAAK,aAAA,KAAhBsB,EAAA,GAAAR,EAGM,OAHNS,GAGM;AAAA,cADJC,EAAgCC,EAAA,QAAA,eAAA,CAAA,GAAA,QAAA,EAAA;AAAA,YAAA;YAEvBJ,EAAArB,CAAA,EAAK,iBAAA,KAAhBsB,EAAA,GAAAR,EAGM,OAHNY,GAGM;AAAA,cADJF,EAAoCC,EAAA,QAAA,mBAAA,CAAA,GAAA,QAAA,EAAA;AAAA,YAAA;YAE3BJ,EAAArB,CAAA,EAAK,cAAhBsB,EAAA,GAAAR,EAKM,OALNa,GAKM;AAAA,cAJJT,EAGK,MAHLU,GAGK;AAAA,gBADHJ,EAA+BC,EAAA,QAAA,cAAA,CAAA,GAAA,QAAA,EAAA;AAAA,cAAA;;4BAGnCP,EAA6B,OAAA,EAAxB,OAAM,YAAA,GAAW,MAAA,EAAA;AAAA,YAEtBM,EAA2BC,EAAA,QAAA,UAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;gBAtBnBf,EAAA,KAAa;AAAA,UAAA;;;;;;;"}

package/dist/AppSidebar.vue.d.ts

@@ -1,59 +1,32 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
-    };
-};
-
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-export declare interface AppSidebarProps {
+declare interface AppSidebarProps {
     /**
      * Controls wether the sidebar is opened or not
      */
     isOpen?: boolean;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppSidebarProps>, {
-isOpen: boolean;
-}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-dismiss: () => void;
-"update:is-open": (isOpen: boolean) => void;
-}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppSidebarProps>, {
-isOpen: boolean;
-}>>> & Readonly<{
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<AppSidebarProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+dismiss: () => any;
+"update:is-open": (isOpen: boolean) => any;
+}, string, PublicProps, Readonly<AppSidebarProps> & Readonly<{
 onDismiss?: (() => any) | undefined;
 "onUpdate:is-open"?: ((isOpen: boolean) => any) | undefined;
 }>, {
 isOpen: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
-    "app-context"?(_: {}): any;
-    "company-context"?(_: {}): any;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>, {
+    'app-context'?(_: {}): any;
+    'company-context'?(_: {}): any;
     navigation?(_: {}): any;
     footer?(_: {}): any;
 }>;

package/dist/AppTopbar.js

@@ -1,7 +1,7 @@
 import { defineComponent as c, createElementBlock as m, openBlock as f, createElementVNode as t, normalizeClass as i, createVNode as a, unref as h, renderSlot as o } from "vue";
 import b from "./useMediaQuery.js";
 import u from "./Icon.js";
-import { _ as l } from "./Logo.vue_vue_type_script_setup_true_lang-Dz8c98sc.js";
+import { _ as l } from "./Logo.vue_vue_type_script_setup_true_lang-Y3iE9utm.js";
 const x = {
   "data-test": "stash-app-topbar",
   class: "stash-app-topbar tw-absolute tw-left-0 tw-top-0"

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=\"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_createVNode","Icon","Logo","_unref","_normalizeClass","$attrs","_hoisted_3","_renderSlot","_ctx","_hoisted_4","_hoisted_5"],"mappings":";;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAKRC,IAAOC,GACPC,IAAqBC,EAAc,gCAAgC;sBAIzEC,EAAA,GAAAC,EAuCS,UAvCTC,GAuCS;AAAA,MAtCPC,EAmBM,OAAA;AAAA,QAlBJ,UAAM,+FAA6F;AAAA,UACpD,6BAAAT,EAAM;AAAA,UAAsD,8BAAA,CAAAA,EAAM;AAAA,QAAA;;QAKjHS,EAES,UAAA;AAAA,UAFD,OAAM;AAAA,UAAgB,gCAAOP,EAAI,gBAAA;AAAA,QAAA;UACvCQ,EAAyEC,GAAA;AAAA,YAAnE,MAAK;AAAA,YAAO,OAAM;AAAA,YAAU,cAAW;AAAA,UAAA;;QAG/CF,EAOI,KAAA;AAAA,UAPA,MAAMT,EAAM;AAAA,UAAM,OAAM;AAAA,QAAA;UAC1BU,EAIEE,GAAA;AAAA,YAHC,OAAOZ,EAAM,gBAAa,UAAA;AAAA,YAC3B,SAAQ;AAAA,YACR,OAAM;AAAA,UAAA;UAERU,EAA8GE,GAAA;AAAA,YAAvG,OAAOZ,EAAM,iBAAiBa,EAAAT,CAAA,IAAkB,UAAA;AAAA,YAAuB,OAAM;AAAA,UAAA;;;MAIxFK,EAgBM,OAAA;AAAA,QAfH,OAAKK,EAAA,CAAA,CAAGC,EAAAA,OAAO,KAAK,GACf,yKAAyK,CAAA;AAAA,MAAA;QAE/KN,EAOM,OAPNO,GAOM;AAAA,UALJC,EAA4BC,EAAA,QAAA,SAAA;AAAA,UAC5BT,EAGM,OAHNU,GAGM;AAAA,YADJF,EAA2BC,EAAA,QAAA,QAAA;AAAA,UAAA;;QAG/BT,EAGM,OAHNW,GAGM;AAAA,UADJH,EAAyBC,EAAA,QAAA,MAAA;AAAA,QAAA;;;;;"}

package/dist/AppTopbar.vue.d.ts

@@ -1,38 +1,15 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
-    };
-};
-
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-export declare interface AppTopbarProps {
+declare interface AppTopbarProps {
     /**
      * Indicates if the AppSidebar is opened or not for styling purposes
      */
@@ -43,20 +20,14 @@ export declare interface AppTopbarProps {
     href?: string;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppTopbarProps>, {
-sidebarOpened: boolean;
-href: string;
-}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<AppTopbarProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "toggle-sidebar": (...args: any[]) => void;
-}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppTopbarProps>, {
-sidebarOpened: boolean;
-href: string;
-}>>> & Readonly<{
+}, string, PublicProps, Readonly<AppTopbarProps> & Readonly<{
 "onToggle-sidebar"?: ((...args: any[]) => any) | undefined;
 }>, {
 href: string;
 sidebarOpened: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>, {
     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=\"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,EAAS,GACjBC,IAAUC,EAAa,GAEvBC,IAAiBC;AAAA,MAAS,MAC9BC,EAAgB;AAAA,QACd,OAAOR,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MACd,CAAA;AAAA,IACH,GAEMS,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;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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","_openBlock","_createElementBlock","_mergeProps","_unref","_hoisted_1","_hoisted_2"],"mappings":";;;;;;;;;;;;;;;;AAkDE,UAAMA,IAAQC,GAURC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAiBC;AAAA,MAAS,MAC9BC,EAAgB;AAAA,QACd,OAAOR,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd;AAAA,IAAA,GAGGS,IAAWF,EAAS,MAAM;AAC9B,YAAM,CAACG,GAAWC,CAAQ,IAAI,OAAOX,EAAM,IAAI,EAAE,YAAA,EAAc,MAAM,GAAG;AAGxE,aAFiBW,IAAWD,EAAU,OAAO,CAAC,IAAIC,EAAS,OAAO,CAAC,IAAID,EAAU,OAAO,CAAC;AAAA,IAG3F,CAAC,GAEKE,IAAcL,EAAS,MACpB,CAAC,CAACL,EAAM,OAChB;qBAKOF,EAAM,OADda,EAAA,GAAAC,EASE,OATFC,EASE;AAAA;MAPA,OAAK,CAAC,oEAAkE,CAC/DC,EAAAZ,CAAA,EAAQ,MAAI,EAAA,CAAKY,EAAAZ,CAAA,EAAQ,SAAS,GAAGQ,EAAA,MAAA,CAAW,CAAA;AAAA,MACxD,KAAKZ,EAAM;AAAA,MACX,KAAKA,EAAM;AAAA,MACX,UAAUY,EAAA,QAAW,IAAA;AAAA,MACtB,aAAU;AAAA,IAAA,GACFI,EAAAd,CAAA,CAAK,GAAA,MAAA,IAAAe,CAAA,MAEfJ,EAAA,GAAAC,EAcM,OAdNC,EAcM;AAAA;MAZJ,QAAM,yHAAuH;AAAA,QAC7GC,EAAAZ,CAAA,EAAQ;AAAA,QAAuB,WAAAJ,EAAM,aAAaM,EAAA,MAAe,iBAAiB;AAAA,QAAmB,SAAAN,EAAM,WAAWM,EAAA,MAAe,eAAe;AAAA,WAAaU,EAAAZ,CAAA,EAAQ,SAAS,GAAGQ,EAAA,MAAA;AAAA,MAAW;MAM/M,UAAUA,EAAA,QAAW,IAAA;AAAA,MACtB,aAAU;AAAA,IAAA,GACFI,EAAAd,CAAA,CAAK,KAEVO,EAAA,KAAQ,GAAA,IAAAS,CAAA;AAAA;;;;;;;"}

package/dist/Avatar.vue.d.ts

@@ -1,32 +1,9 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
-    };
-};
-
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-
-export declare interface AvatarProps {
+declare interface AvatarProps {
     /**
      * The name of the user will be parsed and have its initial displayed in case the src prop is empty
      */
@@ -60,31 +37,15 @@ export declare interface AvatarProps {
     textColor?: StashCommonColor;
 }
 
-declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AvatarProps>, {
-src: undefined;
-name: string;
-alt: undefined;
-colorScheme: string;
-shade: string;
-bgColor: undefined;
-textColor: undefined;
-}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AvatarProps>, {
-src: undefined;
-name: string;
-alt: undefined;
-colorScheme: string;
-shade: string;
-bgColor: undefined;
-textColor: undefined;
-}>>> & Readonly<{}>, {
+declare const _default: DefineComponent<AvatarProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
 name: string;
+textColor: "ice-700" | "white" | "black" | "red-500" | "orange-500" | "blue-500" | "green-500" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-100" | "red-700" | "red-100" | "ice-500" | "ice-200" | "ice-100";
 src: 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";
+bgColor: "ice-700" | "white" | "black" | "red-500" | "orange-500" | "blue-500" | "green-500" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-100" | "red-700" | "red-100" | "ice-500" | "ice-200" | "ice-100";
 alt: string;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 export default _default;
 
 declare type StashCommonColor = `${StashCommonColors}`;

package/dist/Backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","sources":["../src/components/Backdrop/Backdrop.vue"],"sourcesContent":["<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"stash-backdrop tw-fixed tw-inset-0 tw-z-behind tw-bg-black/50\"\n    data-test=\"stash-backdrop\"\n  >\n    <slot></slot>\n  </div>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock"],"mappings":";;cAEIA,IAAkB;AAAA,EAClB,eAAqE;AAAA,EACrE,OAAA;AAAA;;AAHF,SAAAC,EAAAC,GAAAC,GAAA;SAKeC,EAAA,GAAAC,EAAA,OAAAL,GAAA;AAAA;;;;"}
+{"version":3,"file":"Backdrop.js","sources":["../src/components/Backdrop/Backdrop.vue"],"sourcesContent":["<template>\n  <div\n    aria-hidden=\"true\"\n    class=\"stash-backdrop tw-fixed tw-inset-0 tw-z-behind tw-bg-black/50\"\n    data-test=\"stash-backdrop\"\n  >\n    <slot></slot>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx"],"mappings":";;;EAEI,eAAY;AAAA,EACZ,OAAM;AAAA,EACN,aAAU;;;AAHZ,SAAAA,EAAA,GAAAC,EAMM,OANNC,GAMM;AAAA,IADJC,EAAaC,EAAA,QAAA,SAAA;AAAA;;;"}

package/dist/Backdrop.vue.d.ts

@@ -9,7 +9,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>, {
     default?(_: {}): any;
 }>;
 export default _default;

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=\"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,EAAa,GAwDvBC,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,CAAU,MAAMD;AAAA,IAAA,CACzD,GAEKE,IAAyB,CAACC,MAAmBA,MAAU,IAAI,MAAM,GAAGA,CAAK,MAEzEC,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,IAAA,EACvF,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,MACT;AAAA,IAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx","_createElementVNode","_normalizeClass","_unref","_normalizeStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOE,UAAMA,IAAUC,EAAA,GAwDVC,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,CAAU,MAAMD;AAAA,IAC1D,CAAC,GAEKE,IAAyB,CAACC,MAAmBA,MAAU,IAAI,MAAM,GAAGA,CAAK,MAEzEC,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,IAAA,EACvF,GAEIS,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACO,GAAOK,MAAa;AACnB,QAAKZ,EAAM,WAIPY,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,QACxB,GAAG,GAAI;AAAA,MAEX;AAAA,IAAA,cAKFI,EAAA,GAAAC,EAiCO,QAjCPC,GAiCO;AAAA,MAhCLC,EAAQC,EAAA,QAAA,SAAA;AAAA,QACRC,EA8BO,QAAA;AAAA,QA5BL,aAAU;AAAA,QACT,OAAKC,EAAA;AAAA;YAAyB,CAAAC,EAAAtB,CAAA,iBAAuBE,EAAM,aAAQ,eAAoBA,EAAM,YAAO;AAAA,YAAqC,eAAAA,EAAM,YAAO,SAAcA,EAAM,aAAQ;AAAA,YAAyC,aAAAA,EAAM,aAAQ;AAAA,UAAA;AAAA;QAOzO,OAAKqB,EAAErB,EAAM,qBAAqBA,EAAM,aAAQ,cAAmBQ,EAAA,QAAmB,EAAA;AAAA,MAAA;QAEvFU,EAiBO,QAAA;AAAA,UAhBL,aAAU;AAAA,UACV,UAAM,kIAAgI;AAAA;iCACjFT,EAAA;AAAA,cAA4C,iBAAAT,EAAM,UAAK,SAAA,CAAeA,EAAM;AAAA,cAA0C,kBAAAA,EAAM,UAAK,UAAA,CAAgBA,EAAM;AAAA,cAAuC,eAAAA,EAAM,YAAO;AAAA,cAAuD,+BAAAA,EAAM;AAAA,eAAyBoB,EAAAtB,CAAA,EAAO,WAAA,CAAA,GAAgBE,EAAM,YAAO;AAAA,eAAyBoB,EAAAtB,CAAA,EAAO,gBAAA,CAAA,GAAqBE,EAAM,YAAO;AAAA,cAA0C,aAAAA,EAAM,YAAO;AAAA,YAAA;AAAA;aAahfA,EAAM,YAAO,QAAA,OAAoBE,EAAA,KAAe,GAAA,CAAA;AAAA,MAAA;YA3B7CF,EAAM,YAAO,SAAcE,EAAA,SAAoBA,EAAA,UAAe,KAAUF,EAAM,QAAQ;AAAA,MAAA;;;;;;;;;;"}

package/dist/Badge.vue.d.ts

@@ -1,38 +1,15 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
-    };
-};
-
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-export declare interface BadgeProps {
+declare interface BadgeProps {
     /**
      * If true, the badge will animate when the content changes
      */
@@ -78,46 +55,20 @@ export declare interface BadgeProps {
     variant?: 'dot' | 'standard';
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BadgeProps>, {
-animate: boolean;
-color: string;
-content: undefined;
-isDisabled: boolean;
-max: number;
-position: string;
-offset: () => {
-top: undefined;
-right: undefined;
-};
-showZero: boolean;
-variant: string;
-}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BadgeProps>, {
-animate: boolean;
-color: string;
-content: undefined;
-isDisabled: boolean;
-max: number;
-position: string;
-offset: () => {
-top: undefined;
-right: undefined;
-};
-showZero: boolean;
-variant: string;
-}>>> & Readonly<{}>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<BadgeProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+color: "blue" | "red";
 max: string | number;
+content: string | number;
+position: "inline" | "top-right";
 animate: boolean;
-color: "blue" | "red";
 offset: {
 top?: number | undefined;
 right?: number | undefined;
 };
-content: string | number;
 isDisabled: boolean;
-position: "inline" | "top-right";
 variant: "standard" | "dot";
 showZero: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>, {
     default?(_: {}): any;
 }>;
 export default _default;