@leaflink/stash 52.0.3 → 53.0.0

package/dist/AppNavigationItem.js

@@ -1,8 +1,8 @@
-import { defineComponent as _, ref as v, useSlots as y, resolveComponent as $, createElementBlock as r, openBlock as o, createBlock as b, unref as h, normalizeClass as n, withCtx as m, createElementVNode as s, renderSlot as d, createVNode as a, toDisplayString as u } from "vue";
-import { _ as k } from "./Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js";
+import { defineComponent as v, ref as y, useSlots as $, resolveComponent as b, createElementBlock as r, openBlock as o, createBlock as h, unref as k, normalizeClass as a, withCtx as m, createElementVNode as t, renderSlot as d, createVNode as n, toDisplayString as u } from "vue";
+import { _ as x } from "./Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js";
 import i from "./Icon.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__ */ _({
+import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const C = { class: "flex flex-1 items-center overflow-hidden" }, A = { class: "truncate" }, B = { key: 1 }, I = { class: "flex flex-1 items-center overflow-hidden" }, N = { class: "truncate" }, g = /* @__PURE__ */ v({
   __name: "AppNavigationItem",
   props: {
     to: {},
@@ -11,53 +11,53 @@ const C = { class: "tw-flex tw-flex-1 tw-items-center tw-overflow-hidden" }, A =
     isActive: { type: Boolean, default: !1 }
   },
   setup(p) {
-    const l = v(!1), t = p, f = y();
+    const l = y(!1), s = p, f = $();
     return (e, c) => {
-      const w = $("router-link");
+      const _ = b("router-link");
       return o(), r("li", null, [
-        h(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"]),
+        k(f)["sub-items"] ? (o(), r("div", B, [
+          t("button", {
+            class: a([[e.$style.item, { [e.$style.expanded]: l.value }], "flex w-full items-center justify-between font-normal capitalize"]),
             onClick: c[0] || (c[0] = () => l.value = !l.value)
           }, [
-            s("div", I, [
-              a(i, {
-                name: t.icon,
-                class: "tw-mr-3"
+            t("div", I, [
+              n(i, {
+                name: s.icon,
+                class: "mr-3"
               }, null, 8, ["name"]),
-              s("span", N, u(t.label), 1)
+              t("span", N, u(s.label), 1)
             ]),
-            a(i, {
-              class: n([e.$style.caret, { [e.$style.expandedIcon]: l.value }]),
+            n(i, {
+              class: a([e.$style.caret, { [e.$style.expandedIcon]: l.value }]),
               name: "chevron-left"
             }, null, 8, ["class"])
           ], 2),
-          a(k, {
+          n(x, {
             "is-expanded": l.value,
-            class: n(e.$style.expand)
+            class: a(e.$style.expand)
           }, {
             default: m(() => [
-              s("ul", {
-                class: n(e.$style["sub-items"])
+              t("ul", {
+                class: a(e.$style["sub-items"])
               }, [
                 d(e.$slots, "sub-items")
               ], 2)
             ]),
             _: 3
           }, 8, ["is-expanded", "class"])
-        ])) : (o(), b(w, {
+        ])) : (o(), h(_, {
           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"]),
+          to: s.to,
+          class: a([[e.$style.item, { [e.$style.active]: s.isActive }], "flex w-full items-center justify-between font-normal capitalize"]),
           "active-class": e.$style.active
         }, {
           default: m(() => [
-            s("div", C, [
-              a(i, {
-                name: t.icon,
-                class: "tw-mr-3"
+            t("div", C, [
+              n(i, {
+                name: s.icon,
+                class: "mr-3"
               }, null, 8, ["name"]),
-              s("span", A, u(t.label), 1)
+              t("span", A, u(s.label), 1)
             ]),
             d(e.$slots, "default")
           ]),
@@ -66,15 +66,15 @@ const C = { class: "tw-flex tw-flex-1 tw-items-center tw-overflow-hidden" }, A =
       ]);
     };
   }
-}), z = "_item_n8mr7_2", E = "_expanded_n8mr7_19", S = "_active_n8mr7_23", j = "_caret_n8mr7_29", M = {
+}), z = "_item_4474r_3", E = "_expanded_4474r_20", S = "_active_4474r_24", j = "_caret_4474r_30", M = {
   item: z,
-  "sub-items": "_sub-items_n8mr7_15",
+  "sub-items": "_sub-items_4474r_16",
   expanded: E,
   active: S,
   caret: j
 }, V = {
   $style: M
-}, H = /* @__PURE__ */ x(g, [["__cssModules", V]]);
+}, H = /* @__PURE__ */ w(g, [["__cssModules", V]]);
 export {
   H as default
 };

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":";;;;;;;;;;;;;AA2BE,UAAMA,IAAaC,EAAI,EAAK,GAEtBC,IAAQC,GAIRC,IAAQC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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=\"flex w-full items-center justify-between font-normal capitalize\"\n    >\n      <div class=\"flex flex-1 items-center overflow-hidden\">\n        <Icon :name=\"props.icon\" class=\"mr-3\" />\n        <span class=\"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=\"flex w-full items-center justify-between font-normal capitalize\"\n        @click=\"() => (isExpanded = !isExpanded)\"\n      >\n        <div class=\"flex flex-1 items-center overflow-hidden\">\n          <Icon :name=\"props.icon\" class=\"mr-3\" />\n          <span class=\"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  @layer utilities {\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  }\n</style>\n"],"names":["isExpanded","ref","props","__props","slots","useSlots"],"mappings":";;;;;;;;;;;;;AA2BE,UAAMA,IAAaC,EAAI,EAAK,GAEtBC,IAAQC,GAIRC,IAAQC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AppSidebar.js

@@ -1,17 +1,17 @@
-import { defineComponent as B, useSlots as C, computed as w, ref as O, watchEffect as V, createElementBlock as s, openBlock as a, normalizeClass as _, createVNode as o, Transition as b, withCtx as g, withDirectives as x, withModifiers as $, vShow as k, createElementVNode as p, createCommentVNode as c, renderSlot as i, unref as u } from "vue";
+import { defineComponent as B, useSlots as C, computed as _, ref as O, watchEffect as V, createElementBlock as s, openBlock as a, normalizeClass as b, createVNode as o, Transition as g, withCtx as x, withDirectives as k, withModifiers as $, vShow as w, createElementVNode as p, createCommentVNode as c, renderSlot as i, unref as u } from "vue";
 import z from "./useMediaQuery.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"
+  class: "px-3 pt-6"
 }, M = {
   key: 1,
-  class: "tw-px-3 tw-pt-6"
+  class: "px-3 pt-6"
 }, P = {
   key: 2,
-  class: "tw-pt-6"
+  class: "pt-6"
 }, I = {
   role: "menubar",
   "aria-orientation": "vertical"
@@ -22,7 +22,7 @@ const D = {
   },
   emits: ["dismiss", "update:is-open"],
   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);
+    const v = y, r = C(), m = S, l = z("screen and (min-width: 1321px)"), e = _(() => v.isOpen && !l.value), n = O({ height: "", overflow: "" }), f = _(() => v.isOpen || l.value);
     function E() {
       m("dismiss"), m("update:is-open", !1);
     }
@@ -41,28 +41,28 @@ const D = {
       }));
     }), (t, h) => (a(), s("div", {
       id: "stash-app-sidebar",
-      class: _(["stash-app-sidebar tw-relative", {
+      class: b(["stash-app-sidebar relative", {
         "stash-app-sidebar--is-open": f.value,
-        "tw-z-modal": e.value,
-        "tw-z-[301]": !e.value
+        "z-modal": e.value,
+        "z-[301]": !e.value
       }]),
       "data-test": "stash-app-sidebar"
     }, [
-      o(b, { name: "backdrop" }, {
-        default: g(() => [
-          x(o(N, {
+      o(g, { name: "backdrop" }, {
+        default: x(() => [
+          k(o(N, {
             class: "stash-app-sidebar__backdrop",
             onClick: $(E, ["stop"])
           }, null, 512), [
-            [k, e.value]
+            [w, e.value]
           ])
         ]),
         _: 1
       }),
-      o(b, { name: "aside" }, {
-        default: g(() => [
-          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 }]),
+      o(g, { name: "aside" }, {
+        default: x(() => [
+          k(p("aside", {
+            class: b(["stash-app-sidebar__aside fixed flex h-screen flex-col bg-purple-500", { "shadow-3xl": e.value }]),
             "data-test": "stash-app-sidebar__aside"
           }, [
             o(j, { class: "stash-app-sidebar__divider" }),
@@ -77,17 +77,17 @@ const D = {
                 i(t.$slots, "navigation", {}, void 0, !0)
               ])
             ])) : c("", !0),
-            h[0] || (h[0] = p("div", { class: "tw-flex-1" }, null, -1)),
+            h[0] || (h[0] = p("div", { class: "flex-1" }, null, -1)),
             i(t.$slots, "footer", {}, void 0, !0)
           ], 2), [
-            [k, f.value]
+            [w, f.value]
           ])
         ]),
         _: 3
       })
     ], 2));
   }
-}), H = /* @__PURE__ */ A(L, [["__scopeId", "data-v-334e749f"]]);
+}), H = /* @__PURE__ */ A(L, [["__scopeId", "data-v-1d101ddc"]]);
 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:\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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'z-modal': isBackdropVisible,\n      '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 fixed flex h-screen flex-col bg-purple-500\"\n        :class=\"{ '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=\"px-3 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=\"px-3 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=\"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=\"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  @layer utilities {\n    .stash-app-sidebar__aside {\n      padding-top: calc(var(--height-topbar) - 1px); /* -1px to compensate for the border height */\n      width: var(--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  }\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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AppTopbar.js

@@ -1,61 +1,61 @@
-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";
-const x = {
+import { defineComponent as m, createElementBlock as f, openBlock as h, createElementVNode as e, normalizeClass as i, createVNode as a, unref as b, renderSlot as o } from "vue";
+import u from "./useMediaQuery.js";
+import x from "./Icon.js";
+import { _ as l } from "./Logo.vue_vue_type_script_setup_true_lang-DghNC_k6.js";
+const _ = {
   "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" }, C = /* @__PURE__ */ c({
+  class: "stash-app-topbar absolute left-0 top-0"
+}, w = ["href"], v = { class: "flex items-center" }, g = { class: "ml-6" }, k = { class: "hidden pl-3 xl:block" }, C = /* @__PURE__ */ m({
   __name: "AppTopbar",
   props: {
     sidebarOpened: { type: Boolean, default: !1 },
     href: { default: "/" }
   },
   emits: ["toggle-sidebar"],
-  setup(n, { emit: w }) {
-    const e = n, d = w, p = b("screen and (min-width: 1321px)");
-    return (s, r) => (f(), m("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,
-          "tw-z-[401] tw-text-ice-700": !e.sidebarOpened
+  setup(n, { emit: d }) {
+    const t = n, p = d, c = u("screen and (min-width: 1321px)");
+    return (s, r) => (h(), f("header", _, [
+      e("div", {
+        class: i(["fixed top-0 flex h-topbar w-sidebar items-center pl-3 xl:text-white", {
+          "z-dialog text-white": t.sidebarOpened,
+          "z-[401] text-ice-700": !t.sidebarOpened
         }])
       }, [
-        t("button", {
-          class: "xl:tw-hidden",
-          onClick: r[0] || (r[0] = ($) => d("toggle-sidebar"))
+        e("button", {
+          class: "xl:hidden",
+          onClick: r[0] || (r[0] = ($) => p("toggle-sidebar"))
         }, [
-          a(u, {
+          a(x, {
             name: "menu",
-            class: "tw-mr-3",
+            class: "mr-3",
             "aria-label": "open sidebar navigation"
           })
         ]),
-        t("a", {
-          href: e.href,
-          class: "tw-flex tw-items-center tw-text-inherit"
+        e("a", {
+          href: t.href,
+          class: "flex items-center text-inherit"
         }, [
           a(l, {
-            color: e.sidebarOpened ? "white" : "purple",
+            color: t.sidebarOpened ? "white" : "purple",
             variant: "brandmark",
-            class: "tw-transition-colors tw-duration-500 md:tw-hidden"
+            class: "transition-colors duration-500 md:hidden"
           }, null, 8, ["color"]),
           a(l, {
-            color: e.sidebarOpened || h(p) ? "white" : "purple",
-            class: "tw-hidden md:tw-block"
+            color: t.sidebarOpened || b(c) ? "white" : "purple",
+            class: "hidden md:block"
           }, null, 8, ["color"])
-        ], 8, _)
+        ], 8, w)
       ], 2),
-      t("div", {
-        class: i([[s.$attrs.class], "tw-fixed tw-top-0 tw-z-page tw-flex tw-h-topbar tw-w-full tw-flex-row-reverse tw-items-center tw-justify-between tw-bg-white tw-py-3 tw-pl-sidebar tw-pr-3 tw-shadow-md"])
+      e("div", {
+        class: i([[s.$attrs.class], "fixed top-0 z-page flex h-topbar w-full flex-row-reverse items-center justify-between bg-white py-3 pl-sidebar pr-3 shadow-md"])
       }, [
-        t("div", v, [
+        e("div", v, [
           o(s.$slots, "actions"),
-          t("div", g, [
+          e("div", g, [
             o(s.$slots, "avatar")
           ])
         ]),
-        t("div", k, [
+        e("div", k, [
           o(s.$slots, "text")
         ])
       ], 2)

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 absolute left-0 top-0\">\n    <div\n      class=\"fixed top-0 flex h-topbar w-sidebar items-center pl-3 xl:text-white\"\n      :class=\"{\n        'z-dialog text-white': props.sidebarOpened,\n        'z-[401] text-ice-700': !props.sidebarOpened,\n      }\"\n    >\n      <button class=\"xl:hidden\" @click=\"emit('toggle-sidebar')\">\n        <Icon name=\"menu\" class=\"mr-3\" aria-label=\"open sidebar navigation\" />\n      </button>\n\n      <a :href=\"props.href\" class=\"flex items-center text-inherit\">\n        <Logo\n          :color=\"props.sidebarOpened ? 'white' : 'purple'\"\n          variant=\"brandmark\"\n          class=\"transition-colors duration-500 md:hidden\"\n        />\n        <Logo :color=\"props.sidebarOpened || isExtraLargeScreen ? 'white' : 'purple'\" class=\"hidden md:block\" />\n      </a>\n    </div>\n\n    <div\n      :class=\"[$attrs.class]\"\n      class=\"fixed top-0 z-page flex h-topbar w-full flex-row-reverse items-center justify-between bg-white py-3 pl-sidebar pr-3 shadow-md\"\n    >\n      <div class=\"flex items-center\">\n        <!-- @slot Actions slot, for showing any actions to the left of the avatar -->\n        <slot name=\"actions\"></slot>\n        <div class=\"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=\"hidden pl-3 xl: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/Avatar.js

@@ -1,7 +1,7 @@
-import { defineComponent as p, useAttrs as v, useCssModule as _, computed as c, createElementBlock as i, openBlock as d, mergeProps as u, unref as a, toDisplayString as h } from "vue";
+import { defineComponent as v, useAttrs as _, useCssModule as f, computed as c, createElementBlock as i, openBlock 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-CHgC5LLL.js";
-const g = ["alt", "src", "tabindex"], x = ["tabindex"], C = /* @__PURE__ */ p({
+import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const k = ["alt", "src", "tabindex"], g = ["tabindex"], C = /* @__PURE__ */ v({
   name: "ll-avatar",
   __name: "Avatar",
   props: {
@@ -14,41 +14,41 @@ const g = ["alt", "src", "tabindex"], x = ["tabindex"], C = /* @__PURE__ */ p({
     textColor: { default: void 0 }
   },
   setup(m) {
-    const t = m, s = v(), e = _(), n = c(
+    const t = m, s = _(), e = f(), n = c(
       () => b({
         shade: t.shade,
         color: t.colorScheme
       })
-    ), f = c(() => {
+    ), p = c(() => {
       const [l, r] = String(t.name).toUpperCase().split(" ");
       return r ? l.charAt(0) + r.charAt(0) : l.charAt(0);
     }), o = c(() => !!s.onClick);
     return (l, r) => t.src ? (d(), i("img", u({
       key: 0,
-      class: ["stash-avatar stash-avatar--image tw-inline-block tw-rounded-full", [a(e).root, { [a(e).clickable]: o.value }]],
+      class: ["stash-avatar stash-avatar--image inline-block rounded-full", [a(e).root, { [a(e).clickable]: o.value }]],
       alt: t.alt,
       src: t.src,
       tabindex: o.value ? 0 : -1,
       "data-test": "stash-avatar"
-    }, a(s)), null, 16, g)) : (d(), i("div", u({
+    }, a(s)), null, 16, k)) : (d(), i("div", u({
       key: 1,
-      class: ["stash-avatar stash-avatar--initials tw-inline-block tw-cursor-default tw-rounded-full tw-text-center tw-font-semibold", [
+      class: ["stash-avatar stash-avatar--initials inline-block cursor-default rounded-full text-center font-semibold", [
         a(e).root,
-        `tw-text-${t.textColor || n.value.computedTextColor}`,
-        `tw-bg-${t.bgColor || n.value.computedBgColor}`,
+        `text-${t.textColor || n.value.computedTextColor}`,
+        `bg-${t.bgColor || n.value.computedBgColor}`,
         { [a(e).clickable]: o.value }
       ]],
       tabindex: o.value ? 0 : -1,
       "data-test": "stash-avatar"
-    }, a(s)), h(f.value), 17, x));
+    }, a(s)), h(p.value), 17, g));
   }
-}), w = "_root_g79af_2", A = "_clickable_g79af_9", y = {
-  root: w,
-  clickable: A
-}, S = {
-  $style: y
-}, D = /* @__PURE__ */ k(C, [["__cssModules", S]]);
+}), A = "_root_7gax4_5", y = "_clickable_7gax4_12", S = {
+  root: A,
+  clickable: y
+}, B = {
+  $style: S
+}, E = /* @__PURE__ */ x(C, [["__cssModules", B]]);
 export {
-  D as default
+  E as default
 };
 //# sourceMappingURL=Avatar.js.map

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,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;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 inline-block 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 inline-block cursor-default rounded-full text-center font-semibold\"\n    :class=\"[\n      classes.root,\n      `text-${props.textColor || computedColors.computedTextColor}`,\n      `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  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      font-size: var(--text-sm);\n      height: --spacing(9);\n      line-height: calc(--spacing(9) + 2px);\n      width: --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  }\n</style>\n"],"names":["props","__props","attrs","useAttrs","classes","useCssModule","computedColors","computed","colorSchemeUtil","initials","firstName","lastName","isClickable"],"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;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Backdrop.js

@@ -1,13 +1,13 @@
-import { createElementBlock as e, openBlock as r, renderSlot as o } from "vue";
+import { createElementBlock as t, openBlock as r, renderSlot as o } from "vue";
 import { _ as s } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const a = {}, c = {
   "aria-hidden": "true",
-  class: "stash-backdrop tw-fixed tw-inset-0 tw-z-behind tw-bg-black/50",
+  class: "stash-backdrop fixed inset-0 z-behind bg-black/50",
   "data-test": "stash-backdrop"
 };
-function d(t, n) {
-  return r(), e("div", c, [
-    o(t.$slots, "default")
+function d(e, n) {
+  return r(), t("div", c, [
+    o(e.$slots, "default")
   ]);
 }
 const f = /* @__PURE__ */ s(a, [["render", d]]);

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,IAAY;AAAA,EACZ,eAAM;AAAA,EACN,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 aria-hidden=\"true\" class=\"stash-backdrop fixed inset-0 z-behind bg-black/50\" data-test=\"stash-backdrop\">\n    <slot></slot>\n  </div>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock"],"mappings":";;cACOA,IAAY;AAAA,EAAO,eAAM;AAAA,EAAoD,OAAA;AAAA;;AAAlF,SAAAC,EAAAC,GAAAC,GAAA;SACEC,EAAa,GAAAC,EAAA,OAAAL,GAAA;AAAA;;;;"}

package/dist/Badge.js

@@ -1,9 +1,9 @@
-import { defineComponent as u, useCssModule as g, computed as l, ref as w, watch as b, createElementBlock as h, openBlock as m, renderSlot as v, withDirectives as _, createElementVNode as r, normalizeStyle as x, normalizeClass as c, unref as i, toDisplayString as y, vShow as k } from "vue";
-import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const D = {
-  class: "stash-badge tw-relative tw-inline-block",
+import { defineComponent as u, useCssModule as g, computed as d, ref as m, watch as v, createElementBlock as b, openBlock as h, renderSlot as _, withDirectives as x, createElementVNode as r, normalizeStyle as w, normalizeClass as c, unref as i, toDisplayString as y, vShow as B } from "vue";
+import { _ as D } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const S = {
+  class: "stash-badge relative inline-block",
   "data-test": "stash-badge"
-}, S = /* @__PURE__ */ u({
+}, C = /* @__PURE__ */ u({
   name: "ll-badge",
   __name: "Badge",
   props: {
@@ -21,60 +21,60 @@ const D = {
     variant: { default: "standard" }
   },
   setup(p) {
-    const o = g(), t = p, s = l(() => {
-      const e = parseInt(t.content, 10), a = parseInt(t.max, 10);
-      return e != t.content || a != t.max ? t.content : e > a ? `${a}+` : e;
-    }), d = (e) => e === 0 ? "0" : `${e}px`, f = l(() => ({
-      top: t.offset.top !== void 0 ? d(t.offset.top) : void 0,
-      right: t.offset.right !== void 0 ? d(t.offset.right) : void 0
-    })), n = w(!1);
-    return b(
+    const a = g(), t = p, s = d(() => {
+      const e = parseInt(t.content, 10), o = parseInt(t.max, 10);
+      return e != t.content || o != t.max ? t.content : e > o ? `${o}+` : e;
+    }), l = (e) => e === 0 ? "0" : `${e}px`, f = d(() => ({
+      top: t.offset.top !== void 0 ? l(t.offset.top) : void 0,
+      right: t.offset.right !== void 0 ? l(t.offset.right) : void 0
+    })), n = m(!1);
+    return v(
       () => t.content,
-      (e, a) => {
-        t.animate && a !== e && (n.value = !0, setTimeout(() => {
+      (e, o) => {
+        t.animate && o !== e && (n.value = !0, setTimeout(() => {
           n.value = !1;
         }, 1e3));
       }
-    ), (e, a) => (m(), h("span", D, [
-      v(e.$slots, "default"),
-      _(r("span", {
+    ), (e, o) => (h(), b("span", S, [
+      _(e.$slots, "default"),
+      x(r("span", {
         "data-test": "stash-badge|content-wrapper",
         class: c([
           {
-            [i(o)["top-right"]]: t.position === "top-right" && t.variant !== "dot",
-            "tw-absolute": t.variant === "dot" || t.position === "top-right",
-            "tw-ml-1.5": t.position === "inline"
+            [i(a)["top-right"]]: t.position === "top-right" && t.variant !== "dot",
+            absolute: t.variant === "dot" || t.position === "top-right",
+            "ml-1.5": t.position === "inline"
           }
         ]),
-        style: x(t.variant === "dot" || t.position === "top-right" ? f.value : "")
+        style: w(t.variant === "dot" || t.position === "top-right" ? f.value : "")
       }, [
         r("span", {
           "data-test": "stash-badge|content",
-          class: c(["tw-inline-block tw-whitespace-nowrap tw-rounded-full tw-text-center tw-text-[10px] tw-font-semibold tw-leading-4 tw-text-white", [
+          class: c(["inline-block whitespace-nowrap rounded-full text-center text-[10px] font-semibold leading-4 text-white", [
             {
-              "tw-animate-grow": n.value,
-              "tw-bg-red-500": t.color === "red" && !t.isDisabled,
-              "tw-bg-blue-500": t.color === "blue" && !t.isDisabled,
-              "tw-absolute": t.variant === "dot",
-              "tw-bg-ice-200 tw-text-white": t.isDisabled,
-              [i(o)["badge-dot"]]: t.variant === "dot",
-              [i(o)["badge-standard"]]: t.variant === "standard",
-              "tw-px-1.5": t.variant !== "dot"
+              "animate-grow": n.value,
+              "bg-red-500": t.color === "red" && !t.isDisabled,
+              "bg-blue-500": t.color === "blue" && !t.isDisabled,
+              absolute: t.variant === "dot",
+              "bg-ice-200 text-white": t.isDisabled,
+              [i(a)["badge-dot"]]: t.variant === "dot",
+              [i(a)["badge-standard"]]: t.variant === "standard",
+              "px-1.5": t.variant !== "dot"
             }
           ]])
         }, y(t.variant === "dot" ? null : s.value), 3)
       ], 6), [
-        [k, t.variant === "dot" || s.value || s.value === 0 && t.showZero]
+        [B, t.variant === "dot" || s.value || s.value === 0 && t.showZero]
       ])
     ]));
   }
-}), C = {
-  "badge-standard": "_badge-standard_hcbk5_2",
-  "badge-dot": "_badge-dot_hcbk5_7",
-  "top-right": "_top-right_hcbk5_14"
+}), k = {
+  "badge-standard": "_badge-standard_1gool_3",
+  "badge-dot": "_badge-dot_1gool_8",
+  "top-right": "_top-right_1gool_15"
 }, M = {
-  $style: C
-}, E = /* @__PURE__ */ B(S, [["__cssModules", M]]);
+  $style: k
+}, E = /* @__PURE__ */ D(C, [["__cssModules", M]]);
 export {
   E as default
 };