@leaflink/stash 49.5.0 → 50.0.1

package/dist/Alert.js

@@ -1,12 +1,10 @@
 import { defineComponent as x, useSlots as $, useCssModule as C, ref as I, computed as s, withDirectives as S, openBlock as i, createElementBlock as l, normalizeClass as r, createVNode as w, unref as t, createElementVNode as f, renderSlot as m, createCommentVNode as o } from "vue";
 import y from "lodash-es/capitalize";
 import B from "lodash-es/uniqueId";
-import { S as M, a as N } from "./statusLevels-a8b041f4.js";
+import { S as M, a as N } from "./statusLevels-D8EgtE_L.js";
 import V from "./directives/sticky.js";
 import p from "./Icon.js";
-import { _ as j } from "./_plugin-vue_export-helper-dad06003.js";
-import "./index-9e1095ef.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+import { _ as j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
   name: "ll-alert",
   __name: "Alert",
@@ -88,8 +86,8 @@ const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
   }
 }), D = {}, E = {
   $style: D
-}, Q = /* @__PURE__ */ j(A, [["__cssModules", E]]);
+}, O = /* @__PURE__ */ j(A, [["__cssModules", E]]);
 export {
-  Q as default
+  O as default
 };
 //# sourceMappingURL=Alert.js.map

package/dist/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../src/components/Alert/Alert.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import capitalize from 'lodash-es/capitalize';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, ref, useCssModule, useSlots } from 'vue';\n\n  import { StatusColor, StatusColors, StatusIcon, StatusIcons, StatusSeverity } from '../../../types/statusLevels';\n  import vSticky from '../../directives/sticky/sticky';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-alert',\n  });\n\n  export interface AlertProps {\n    /**\n     * Determines if the alert is centered\n     */\n    centered?: boolean;\n\n    /**\n     * Determines if the alert is permanent (doesn't have a close button).\n     */\n    permanent?: boolean;\n\n    /**\n     * The type of border radius to use. Available types:\n     *\n     * - `none` - no border radius\n     * - `standard` - 4px border radius\n     */\n    radius?: 'none' | 'standard';\n\n    /**\n     * The type of alert. Available types:\n     *\n     * - `info`\n     * - `success`\n     * - `warning`\n     * - `error`\n     */\n    severity?: StatusSeverity;\n\n    /**\n     * Determines if the alert is sticky. By default, it's not sticky. The provided `number` value is a top offset of alert.\n     */\n    sticky?: number | null;\n\n    /**\n     * The variant of alert. Available variants:\n     *\n     * - `filled` - previously alert component\n     * - `outlined` - previously banner component\n     */\n    variant?: 'outlined' | 'filled';\n  }\n\n  const props = withDefaults(defineProps<AlertProps>(), {\n    centered: false,\n    permanent: false,\n    radius: 'standard',\n    severity: 'info',\n    sticky: null,\n    variant: 'outlined',\n  });\n\n  const iconId = uniqueId('close-icon');\n  const slots = useSlots();\n  const classes = useCssModule();\n  const show = ref(true);\n  const icon = computed<StatusIcon>(() => StatusIcons[capitalize(props.severity)]);\n  const color = computed<StatusColor>(() => StatusColors[capitalize(props.severity)]);\n\n  const iconColor = computed<string>(() => {\n    if (props.variant === 'filled' && ['warning', 'success'].includes(props.severity)) {\n      return 'tw-text-ice-900';\n    }\n\n    if (props.variant === 'filled' && ['info', 'error'].includes(props.severity)) {\n      return 'tw-text-white';\n    }\n\n    return `tw-text-${color.value}`;\n  });\n\n  const computedTextColor = computed<string>(() => {\n    if (props.variant === 'filled' && ['info', 'error'].includes(props.severity)) {\n      return 'tw-text-white';\n    }\n\n    return 'tw-text-ice-900';\n  });\n</script>\n\n<template>\n  <div\n    v-if=\"show\"\n    v-sticky=\"props.sticky\"\n    class=\"stash-alert tw-relative tw-flex tw-items-center tw-border tw-border-solid tw-p-3 tw-leading-6\"\n    :class=\"[\n      `stash-alert--${props.severity}`,\n      `stash-alert--${props.variant}`,\n      computedTextColor,\n      {\n        'tw-my-6': props.variant === 'outlined', // Todo - this makes ZERO sense. We should remove this altogether and let the consumer handle the margin.\n        'tw-rounded': props.radius === 'standard',\n        'tw-border-red-500': props.severity === 'error',\n        'tw-border-orange-500': props.severity === 'warning',\n        'tw-border-blue-500': props.severity === 'info',\n        'tw-border-green-500': props.severity === 'success',\n        'tw-bg-red-500': props.severity === 'error' && props.variant === 'filled',\n        'tw-bg-orange-500': props.severity === 'warning' && props.variant === 'filled',\n        'tw-bg-blue-500': props.severity === 'info' && props.variant === 'filled',\n        'tw-bg-green-500': props.severity === 'success' && props.variant === 'filled',\n        'tw-bg-red-100': props.severity === 'error' && props.variant === 'outlined',\n        'tw-bg-orange-100': props.severity === 'warning' && props.variant === 'outlined',\n        'tw-bg-blue-100': props.severity === 'info' && props.variant === 'outlined',\n        'tw-bg-green-100': props.severity === 'success' && props.variant === 'outlined',\n      },\n    ]\"\n    data-test=\"stash-alert\"\n  >\n    <Icon\n      class=\"stash-alert__icon\"\n      :class=\"[classes.iconInfo, iconColor, `stash-alert__icon--${icon}`]\"\n      :name=\"icon\"\n      :title=\"`${props.severity} icon`\"\n      data-test=\"stash-alert|status-icon\"\n    />\n\n    <!-- Alert text elements -->\n    <div\n      class=\"tw-flex tw-flex-1 tw-flex-wrap tw-px-2\"\n      :class=\"{\n        'tw-justify-center': props.centered,\n        'tw-justify-between': !props.centered,\n      }\"\n    >\n      <p class=\"tw-m-0\">\n        <slot></slot>\n      </p>\n\n      <div\n        v-if=\"slots.link\"\n        class=\"stash-alert__link tw-cursor-pointer tw-underline hover:tw-no-underline\"\n        :class=\"[classes.link, computedTextColor, { 'tw-ml-2': props.centered }]\"\n        data-test=\"stash-alert|link\"\n      >\n        <slot name=\"link\"></slot>\n      </div>\n    </div>\n\n    <button\n      v-if=\"!props.permanent\"\n      class=\"stash-alert__close\"\n      :class=\"[classes.button, computedTextColor]\"\n      type=\"button\"\n      data-test=\"stash-alert|close\"\n      @click=\"show = false\"\n    >\n      <Icon :id=\"iconId\" name=\"close\" title=\"Dismiss alert\" />\n    </button>\n  </div>\n</template>\n\n<style module>\n  :global(.stash-alert__link) {\n    a,\n    button {\n      color: var(--color-ice-900);\n      cursor: pointer;\n      text-decoration: underline;\n\n      &:hover {\n        text-decoration: none;\n      }\n    }\n  }\n\n  :global(.stash-alert--filled.stash-alert--error),\n  :global(.stash-alert--filled.stash-alert--info) {\n    :global(.stash-alert__link) a,\n    :global(.stash-alert__link) button {\n      color: theme('colors.white');\n    }\n  }\n</style>\n"],"names":["props","__props","iconId","uniqueId","slots","useSlots","classes","useCssModule","show","ref","icon","computed","StatusIcons","capitalize","color","StatusColors","iconColor","computedTextColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwDE,UAAMA,IAAQC,GASRC,IAASC,EAAS,YAAY,GAC9BC,IAAQC,KACRC,IAAUC,KACVC,IAAOC,EAAI,EAAI,GACfC,IAAOC,EAAqB,MAAMC,EAAYC,EAAWb,EAAM,QAAQ,CAAC,CAAC,GACzEc,IAAQH,EAAsB,MAAMI,EAAaF,EAAWb,EAAM,QAAQ,CAAC,CAAC,GAE5EgB,IAAYL,EAAiB,MAC7BX,EAAM,YAAY,YAAY,CAAC,WAAW,SAAS,EAAE,SAASA,EAAM,QAAQ,IACvE,oBAGLA,EAAM,YAAY,YAAY,CAAC,QAAQ,OAAO,EAAE,SAASA,EAAM,QAAQ,IAClE,kBAGF,WAAWc,EAAM,OACzB,GAEKG,IAAoBN,EAAiB,MACrCX,EAAM,YAAY,YAAY,CAAC,QAAQ,OAAO,EAAE,SAASA,EAAM,QAAQ,IAClE,kBAGF,iBACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Alert.js","sources":["../src/components/Alert/Alert.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import capitalize from 'lodash-es/capitalize';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, ref, useCssModule, useSlots } from 'vue';\n\n  import { StatusColor, StatusColors, StatusIcon, StatusIcons, StatusSeverity } from '../../../types/statusLevels';\n  import vSticky from '../../directives/sticky/sticky';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-alert',\n  });\n\n  export interface AlertProps {\n    /**\n     * Determines if the alert is centered\n     */\n    centered?: boolean;\n\n    /**\n     * Determines if the alert is permanent (doesn't have a close button).\n     */\n    permanent?: boolean;\n\n    /**\n     * The type of border radius to use. Available types:\n     *\n     * - `none` - no border radius\n     * - `standard` - 4px border radius\n     */\n    radius?: 'none' | 'standard';\n\n    /**\n     * The type of alert. Available types:\n     *\n     * - `info`\n     * - `success`\n     * - `warning`\n     * - `error`\n     */\n    severity?: StatusSeverity;\n\n    /**\n     * Determines if the alert is sticky. By default, it's not sticky. The provided `number` value is a top offset of alert.\n     */\n    sticky?: number | null;\n\n    /**\n     * The variant of alert. Available variants:\n     *\n     * - `filled` - previously alert component\n     * - `outlined` - previously banner component\n     */\n    variant?: 'outlined' | 'filled';\n  }\n\n  const props = withDefaults(defineProps<AlertProps>(), {\n    centered: false,\n    permanent: false,\n    radius: 'standard',\n    severity: 'info',\n    sticky: null,\n    variant: 'outlined',\n  });\n\n  const iconId = uniqueId('close-icon');\n  const slots = useSlots();\n  const classes = useCssModule();\n  const show = ref(true);\n  const icon = computed<StatusIcon>(() => StatusIcons[capitalize(props.severity)]);\n  const color = computed<StatusColor>(() => StatusColors[capitalize(props.severity)]);\n\n  const iconColor = computed<string>(() => {\n    if (props.variant === 'filled' && ['warning', 'success'].includes(props.severity)) {\n      return 'tw-text-ice-900';\n    }\n\n    if (props.variant === 'filled' && ['info', 'error'].includes(props.severity)) {\n      return 'tw-text-white';\n    }\n\n    return `tw-text-${color.value}`;\n  });\n\n  const computedTextColor = computed<string>(() => {\n    if (props.variant === 'filled' && ['info', 'error'].includes(props.severity)) {\n      return 'tw-text-white';\n    }\n\n    return 'tw-text-ice-900';\n  });\n</script>\n\n<template>\n  <div\n    v-if=\"show\"\n    v-sticky=\"props.sticky\"\n    class=\"stash-alert tw-relative tw-flex tw-items-center tw-border tw-border-solid tw-p-3 tw-leading-6\"\n    :class=\"[\n      `stash-alert--${props.severity}`,\n      `stash-alert--${props.variant}`,\n      computedTextColor,\n      {\n        'tw-my-6': props.variant === 'outlined', // Todo - this makes ZERO sense. We should remove this altogether and let the consumer handle the margin.\n        'tw-rounded': props.radius === 'standard',\n        'tw-border-red-500': props.severity === 'error',\n        'tw-border-orange-500': props.severity === 'warning',\n        'tw-border-blue-500': props.severity === 'info',\n        'tw-border-green-500': props.severity === 'success',\n        'tw-bg-red-500': props.severity === 'error' && props.variant === 'filled',\n        'tw-bg-orange-500': props.severity === 'warning' && props.variant === 'filled',\n        'tw-bg-blue-500': props.severity === 'info' && props.variant === 'filled',\n        'tw-bg-green-500': props.severity === 'success' && props.variant === 'filled',\n        'tw-bg-red-100': props.severity === 'error' && props.variant === 'outlined',\n        'tw-bg-orange-100': props.severity === 'warning' && props.variant === 'outlined',\n        'tw-bg-blue-100': props.severity === 'info' && props.variant === 'outlined',\n        'tw-bg-green-100': props.severity === 'success' && props.variant === 'outlined',\n      },\n    ]\"\n    data-test=\"stash-alert\"\n  >\n    <Icon\n      class=\"stash-alert__icon\"\n      :class=\"[classes.iconInfo, iconColor, `stash-alert__icon--${icon}`]\"\n      :name=\"icon\"\n      :title=\"`${props.severity} icon`\"\n      data-test=\"stash-alert|status-icon\"\n    />\n\n    <!-- Alert text elements -->\n    <div\n      class=\"tw-flex tw-flex-1 tw-flex-wrap tw-px-2\"\n      :class=\"{\n        'tw-justify-center': props.centered,\n        'tw-justify-between': !props.centered,\n      }\"\n    >\n      <p class=\"tw-m-0\">\n        <slot></slot>\n      </p>\n\n      <div\n        v-if=\"slots.link\"\n        class=\"stash-alert__link tw-cursor-pointer tw-underline hover:tw-no-underline\"\n        :class=\"[classes.link, computedTextColor, { 'tw-ml-2': props.centered }]\"\n        data-test=\"stash-alert|link\"\n      >\n        <slot name=\"link\"></slot>\n      </div>\n    </div>\n\n    <button\n      v-if=\"!props.permanent\"\n      class=\"stash-alert__close\"\n      :class=\"[classes.button, computedTextColor]\"\n      type=\"button\"\n      data-test=\"stash-alert|close\"\n      @click=\"show = false\"\n    >\n      <Icon :id=\"iconId\" name=\"close\" title=\"Dismiss alert\" />\n    </button>\n  </div>\n</template>\n\n<style module>\n  :global(.stash-alert__link) {\n    a,\n    button {\n      color: var(--color-ice-900);\n      cursor: pointer;\n      text-decoration: underline;\n\n      &:hover {\n        text-decoration: none;\n      }\n    }\n  }\n\n  :global(.stash-alert--filled.stash-alert--error),\n  :global(.stash-alert--filled.stash-alert--info) {\n    :global(.stash-alert__link) a,\n    :global(.stash-alert__link) button {\n      color: theme('colors.white');\n    }\n  }\n</style>\n"],"names":["props","__props","iconId","uniqueId","slots","useSlots","classes","useCssModule","show","ref","icon","computed","StatusIcons","capitalize","color","StatusColors","iconColor","computedTextColor"],"mappings":";;;;;;;;;;;;;;;;;;;AAwDE,UAAMA,IAAQC,GASRC,IAASC,EAAS,YAAY,GAC9BC,IAAQC,KACRC,IAAUC,KACVC,IAAOC,EAAI,EAAI,GACfC,IAAOC,EAAqB,MAAMC,EAAYC,EAAWb,EAAM,QAAQ,CAAC,CAAC,GACzEc,IAAQH,EAAsB,MAAMI,EAAaF,EAAWb,EAAM,QAAQ,CAAC,CAAC,GAE5EgB,IAAYL,EAAiB,MAC7BX,EAAM,YAAY,YAAY,CAAC,WAAW,SAAS,EAAE,SAASA,EAAM,QAAQ,IACvE,oBAGLA,EAAM,YAAY,YAAY,CAAC,QAAQ,OAAO,EAAE,SAASA,EAAM,QAAQ,IAClE,kBAGF,WAAWc,EAAM,KAAK,EAC9B,GAEKG,IAAoBN,EAAiB,MACrCX,EAAM,YAAY,YAAY,CAAC,QAAQ,OAAO,EAAE,SAASA,EAAM,QAAQ,IAClE,kBAGF,iBACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Alert.vue.d.ts

@@ -71,26 +71,26 @@ export declare interface AlertProps {
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AlertProps>, {
-    centered: boolean;
-    permanent: boolean;
-    radius: string;
-    severity: string;
-    sticky: null;
-    variant: string;
+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;
+centered: boolean;
+permanent: boolean;
+radius: string;
+severity: string;
+sticky: null;
+variant: string;
 }>>> & Readonly<{}>, {
-    radius: "standard" | "none";
-    sticky: number | null;
-    centered: boolean;
-    permanent: boolean;
-    severity: "error" | "warning" | "info" | "success";
-    variant: "outlined" | "filled";
+radius: "standard" | "none";
+sticky: number | null;
+centered: boolean;
+permanent: boolean;
+severity: "error" | "warning" | "info" | "success";
+variant: "outlined" | "filled";
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
     link?(_: {}): any;

package/dist/AppNavigationItem.js

@@ -1,10 +1,7 @@
-import { defineComponent as _, ref as v, useSlots as y, resolveComponent as $, openBlock as a, createElementBlock as r, unref as b, createBlock as h, normalizeClass as n, withCtx as m, createElementVNode as s, createVNode as o, toDisplayString as d, renderSlot as p } from "vue";
-import { _ as k } from "./Expand.vue_vue_type_script_setup_true_lang-0f236267.js";
+import { defineComponent as _, ref as v, useSlots as y, resolveComponent as $, openBlock as o, createElementBlock as r, unref as b, createBlock as h, normalizeClass as n, withCtx as m, createElementVNode as s, createVNode as a, toDisplayString as d, renderSlot as u } from "vue";
+import { _ as k } from "./Expand.vue_vue_type_script_setup_true_lang-D0fSAtHr.js";
 import i from "./Icon.js";
-import { _ as x } from "./_plugin-vue_export-helper-dad06003.js";
-import "lodash-es/uniqueId";
-import "./index-9e1095ef.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const C = { class: "tw-flex tw-flex-1 tw-items-center tw-overflow-hidden" }, A = { class: "tw-truncate" }, B = { key: 1 }, I = { class: "tw-flex tw-flex-1 tw-items-center tw-overflow-hidden" }, N = { class: "tw-truncate" }, g = /* @__PURE__ */ _({
   __name: "AppNavigationItem",
   props: {
@@ -13,29 +10,29 @@ const C = { class: "tw-flex tw-flex-1 tw-items-center tw-overflow-hidden" }, A =
     label: {},
     isActive: { type: Boolean, default: !1 }
   },
-  setup(u) {
-    const l = v(!1), t = u, f = y();
+  setup(p) {
+    const l = v(!1), t = p, f = y();
     return (e, c) => {
       const w = $("router-link");
-      return a(), r("li", null, [
-        b(f)["sub-items"] ? (a(), r("div", B, [
+      return o(), r("li", null, [
+        b(f)["sub-items"] ? (o(), r("div", B, [
           s("button", {
             class: n([[e.$style.item, { [e.$style.expanded]: l.value }], "tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal tw-capitalize"]),
             onClick: c[0] || (c[0] = () => l.value = !l.value)
           }, [
             s("div", I, [
-              o(i, {
+              a(i, {
                 name: t.icon,
                 class: "tw-mr-3"
               }, null, 8, ["name"]),
               s("span", N, d(t.label), 1)
             ]),
-            o(i, {
+            a(i, {
               class: n([e.$style.caret, { [e.$style.expandedIcon]: l.value }]),
               name: "chevron-left"
             }, null, 8, ["class"])
           ], 2),
-          o(k, {
+          a(k, {
             "is-expanded": l.value,
             class: n(e.$style.expand)
           }, {
@@ -43,12 +40,12 @@ const C = { class: "tw-flex tw-flex-1 tw-items-center tw-overflow-hidden" }, A =
               s("ul", {
                 class: n(e.$style["sub-items"])
               }, [
-                p(e.$slots, "sub-items")
+                u(e.$slots, "sub-items")
               ], 2)
             ]),
             _: 3
           }, 8, ["is-expanded", "class"])
-        ])) : (a(), h(w, {
+        ])) : (o(), h(w, {
           key: 0,
           to: t.to,
           class: n([[e.$style.item, { [e.$style.active]: t.isActive }], "tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal tw-capitalize"]),
@@ -56,13 +53,13 @@ const C = { class: "tw-flex tw-flex-1 tw-items-center tw-overflow-hidden" }, A =
         }, {
           default: m(() => [
             s("div", C, [
-              o(i, {
+              a(i, {
                 name: t.icon,
                 class: "tw-mr-3"
               }, null, 8, ["name"]),
               s("span", A, d(t.label), 1)
             ]),
-            p(e.$slots, "default")
+            u(e.$slots, "default")
           ]),
           _: 3
         }, 8, ["to", "class", "active-class"]))
@@ -77,8 +74,8 @@ const C = { class: "tw-flex tw-flex-1 tw-items-center tw-overflow-hidden" }, A =
   caret: j
 }, V = {
   $style: M
-}, L = /* @__PURE__ */ x(g, [["__cssModules", V]]);
+}, H = /* @__PURE__ */ x(g, [["__cssModules", V]]);
 export {
-  L as default
+  H as default
 };
 //# sourceMappingURL=AppNavigationItem.js.map

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AppNavigationItem.vue.d.ts

@@ -53,11 +53,11 @@ export declare interface AppNavigationItemProps {
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppNavigationItemProps>, {
-    isActive: boolean;
+isActive: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppNavigationItemProps>, {
-    isActive: boolean;
+isActive: boolean;
 }>>> & Readonly<{}>, {
-    isActive: boolean;
+isActive: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
     "sub-items"?(_: {}): any;
@@ -66,6 +66,6 @@ export default _default;
 
 declare type IconName = (typeof iconNames)[number];
 
-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", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "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", "figma", "file-csv", "file", "filter-funnel", "filter-line", "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", "image", "keyboard-return", "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", "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", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "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", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "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-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", "figma", "file-csv", "file", "filter-funnel", "filter-line", "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", "image", "import", "keyboard-return", "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", "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", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
 
 export { }

package/dist/AppSidebar.js

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

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: 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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: 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

@@ -40,17 +40,17 @@ export declare interface AppSidebarProps {
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppSidebarProps>, {
-    isOpen: boolean;
+isOpen: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    dismiss: () => void;
-    "update:is-open": (isOpen: boolean) => void;
+dismiss: () => void;
+"update:is-open": (isOpen: boolean) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppSidebarProps>, {
-    isOpen: boolean;
+isOpen: boolean;
 }>>> & Readonly<{
-    onDismiss?: (() => any) | undefined;
-    "onUpdate:is-open"?: ((isOpen: boolean) => any) | undefined;
+onDismiss?: (() => any) | undefined;
+"onUpdate:is-open"?: ((isOpen: boolean) => any) | undefined;
 }>, {
-    isOpen: boolean;
+isOpen: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     "app-context"?(_: {}): any;
     "company-context"?(_: {}): any;

package/dist/AppTopbar.js

@@ -1,16 +1,11 @@
-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 { defineComponent as c, openBlock as m, createElementBlock 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-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";
+import { _ as l } from "./Logo.vue_vue_type_script_setup_true_lang-BfUU9J9O.js";
 const x = {
   "data-test": "stash-app-topbar",
   class: "stash-app-topbar tw-absolute tw-left-0 tw-top-0"
-}, _ = ["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({
+}, _ = ["href"], v = { class: "tw-flex tw-items-center" }, g = { class: "tw-ml-6" }, k = { class: "tw-hidden tw-pl-3 xl:tw-block" }, C = /* @__PURE__ */ c({
   __name: "AppTopbar",
   props: {
     sidebarOpened: { type: Boolean, default: !1 },
@@ -19,7 +14,7 @@ const x = {
   emits: ["toggle-sidebar"],
   setup(n, { emit: w }) {
     const e = n, d = w, p = b("screen and (min-width: 1321px)");
-    return (s, a) => (m(), f("header", x, [
+    return (s, r) => (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 +23,9 @@ const x = {
       }, [
         t("button", {
           class: "xl:tw-hidden",
-          onClick: a[0] || (a[0] = ($) => d("toggle-sidebar"))
+          onClick: r[0] || (r[0] = ($) => d("toggle-sidebar"))
         }, [
-          o(u, {
+          a(u, {
             name: "menu",
             class: "tw-mr-3",
             "aria-label": "open sidebar navigation"
@@ -40,12 +35,12 @@ const x = {
           href: e.href,
           class: "tw-flex tw-items-center tw-text-inherit"
         }, [
-          o(l, {
+          a(l, {
             color: e.sidebarOpened ? "white" : "purple",
             variant: "brandmark",
             class: "tw-transition-colors tw-duration-500 md:tw-hidden"
           }, null, 8, ["color"]),
-          o(l, {
+          a(l, {
             color: e.sidebarOpened || h(p) ? "white" : "purple",
             class: "tw-hidden md:tw-block"
           }, null, 8, ["color"])
@@ -55,19 +50,19 @@ const x = {
         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", v, [
-          r(s.$slots, "actions"),
+          o(s.$slots, "actions"),
           t("div", g, [
-            r(s.$slots, "avatar")
+            o(s.$slots, "avatar")
           ])
         ]),
         t("div", k, [
-          r(s.$slots, "text")
+          o(s.$slots, "text")
         ])
       ], 2)
     ]));
   }
 });
 export {
-  j as default
+  C 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=\"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"],"mappings":";;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAKRC,IAAOC,GACPC,IAAqBC,EAAc,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AppTopbar.vue.d.ts

@@ -44,18 +44,18 @@ export declare interface AppTopbarProps {
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppTopbarProps>, {
-    sidebarOpened: boolean;
-    href: string;
+sidebarOpened: boolean;
+href: string;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    "toggle-sidebar": (...args: any[]) => void;
+"toggle-sidebar": (...args: any[]) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppTopbarProps>, {
-    sidebarOpened: boolean;
-    href: string;
+sidebarOpened: boolean;
+href: string;
 }>>> & Readonly<{
-    "onToggle-sidebar"?: ((...args: any[]) => any) | undefined;
+"onToggle-sidebar"?: ((...args: any[]) => any) | undefined;
 }>, {
-    href: string;
-    sidebarOpened: boolean;
+href: string;
+sidebarOpened: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     actions?(_: {}): any;
     avatar?(_: {}): any;

package/dist/Avatar.js

@@ -1,6 +1,6 @@
 import { defineComponent as p, useAttrs as v, useCssModule as _, computed as c, openBlock as i, createElementBlock as d, mergeProps as u, unref as a, toDisplayString as h } from "vue";
 import b from "./utils/colorScheme.js";
-import { _ as k } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as k } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const g = ["alt", "src", "tabindex"], x = ["tabindex"], C = /* @__PURE__ */ p({
   name: "ll-avatar",
   __name: "Avatar",