@leaflink/stash 50.11.0 → 50.12.1

package/dist/PageHeader.js

@@ -1,4 +1,4 @@
-import { defineComponent as g, useCssModule as u, useSlots as h, computed as f, openBlock as t, createElementBlock as s, normalizeClass as n, unref as o, createElementVNode as p, renderSlot as a, createCommentVNode as i, toDisplayString as _ } from "vue";
+import { defineComponent as g, useCssModule as u, useSlots as h, computed as f, createElementBlock as t, openBlock as s, normalizeClass as n, unref as o, createElementVNode as p, createCommentVNode as i, renderSlot as a, toDisplayString as _ } from "vue";
 import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const y = { class: "tw-col-span-full tw-flex tw-items-center lg:tw-col-span-1" }, v = {
   key: 0,
@@ -15,12 +15,12 @@ const y = { class: "tw-col-span-full tw-flex tw-items-center lg:tw-col-span-1" }
   },
   setup(m) {
     const c = m, r = u(), l = h(), d = f(() => !!(l["primary-action"] || l["secondary-action"]));
-    return (e, H) => (t(), s("header", {
+    return (e, H) => (s(), t("header", {
       class: n(["stash-page-header", [o(r).root, { [o(r).grid]: d.value }]]),
       "data-test": "stash-page-header"
     }, [
       p("div", y, [
-        o(l).media ? (t(), s("div", {
+        o(l).media ? (s(), t("div", {
           key: 0,
           class: n(["stash-page-header__media tw-mr-3 tw-self-center", o(r).mediaTest])
         }, [
@@ -28,14 +28,14 @@ const y = { class: "tw-col-span-full tw-flex tw-items-center lg:tw-col-span-1" }
         ], 2)) : i("", !0),
         p("div", null, [
           a(e.$slots, "title", {}, () => [
-            c.title ? (t(), s("h1", v, _(c.title), 1)) : i("", !0)
+            c.title ? (s(), t("h1", v, _(c.title), 1)) : i("", !0)
           ]),
           a(e.$slots, "description", {}, () => [
-            c.description ? (t(), s("p", k, _(c.description), 1)) : i("", !0)
+            c.description ? (s(), t("p", k, _(c.description), 1)) : i("", !0)
           ])
         ])
       ]),
-      d.value ? (t(), s("div", {
+      d.value ? (s(), t("div", {
         key: 0,
         class: n(["stash-page-header__actions tw-col-span-full tw-flex lg:tw-col-span-1", o(r).actions])
       }, [

package/dist/PageNavigation.js

@@ -1,4 +1,4 @@
-import { defineComponent as g, ref as x, watch as I, onMounted as _, openBlock as u, createElementBlock as i, createVNode as T, withCtx as p, Fragment as V, renderList as k, createBlock as N, unref as B, createTextVNode as C, toDisplayString as U } from "vue";
+import { defineComponent as g, ref as x, watch as I, onMounted as _, createElementBlock as i, openBlock as u, createVNode as T, withCtx as p, Fragment as V, renderList as k, createBlock as N, unref as B, createTextVNode as C, toDisplayString as U } from "vue";
 import y from "@leaflink/snitch";
 import s from "lodash-es/kebabCase";
 import { useRoute as P, useRouter as D } from "vue-router";

package/dist/Paginate.js

@@ -1,94 +1,112 @@
-import { defineComponent as C, useCssModule as w, computed as y, openBlock as i, createElementBlock as l, createElementVNode as c, normalizeClass as o, unref as r, createVNode as g, Fragment as f, renderList as S, createCommentVNode as p, toDisplayString as M } from "vue";
+import { defineComponent as L, useCssModule as M, computed as N, toRef as u, createElementBlock as i, openBlock as l, createElementVNode as d, normalizeClass as o, unref as n, createVNode as _, toDisplayString as m, Fragment as v, renderList as D, createCommentVNode as p } from "vue";
+import { u as E } from "./usePaginationStats-d_q39naC.js";
+import { t as g } from "./locale.js";
 import h from "./Icon.js";
-import { _ as E } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const L = {
+import { _ as $ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const B = {
   class: "stash-paginate tw-flex tw-justify-center",
   "data-test": "stash-paginate"
-}, $ = ["onClick"], N = /* @__PURE__ */ C({
+}, V = ["aria-label", "disabled"], F = {
+  key: 0,
+  class: "tw-mx-3 tw-text-ice-900"
+}, I = ["onClick"], j = ["aria-label", "disabled"], R = /* @__PURE__ */ L({
   name: "ll-paginate",
   __name: "Paginate",
   props: {
     currentPage: { default: 1 },
     listLength: { default: 1 },
-    pageSize: { default: 50 }
+    pageSize: { default: 50 },
+    isNextDisabled: { type: Boolean, default: !1 },
+    variant: { default: "standard" }
   },
   emits: ["set-page"],
-  setup(_, { emit: m }) {
-    const t = _, v = m, n = w(), s = y(() => Math.ceil(t.listLength / t.pageSize));
-    function u(e) {
-      v("set-page", e);
+  setup(P, { emit: b }) {
+    const t = P, x = b, r = M(), a = N(() => Math.ceil(t.listLength / t.pageSize)), w = t.variant === "stats" ? E({
+      currentPage: u(() => t.currentPage),
+      pageSize: u(() => t.pageSize),
+      totalItems: u(() => t.listLength)
+    }) : null;
+    function c(e) {
+      x("set-page", e);
     }
-    function P() {
-      t.currentPage < s.value && u(t.currentPage + 1);
+    function k() {
+      t.currentPage < a.value && c(t.currentPage + 1);
     }
-    function b() {
-      t.currentPage > 1 && u(t.currentPage - 1);
+    function S() {
+      t.currentPage > 1 && c(t.currentPage - 1);
     }
-    function z(e) {
-      const d = Math.abs(t.currentPage - e);
-      return s.value < 10 || e === 1 || e === s.value || t.currentPage < 6 && e < 8 || s.value - t.currentPage < 5 && s.value - e < 7 || d < 3;
+    function y(e) {
+      const f = Math.abs(t.currentPage - e);
+      return a.value < 10 || e === 1 || e === a.value || t.currentPage < 6 && e < 8 || a.value - t.currentPage < 5 && a.value - e < 7 || f < 3;
     }
-    function k(e) {
-      return s.value > 9 && t.currentPage > 5 && e === 2;
+    function C(e) {
+      return a.value > 9 && t.currentPage > 5 && e === 2;
     }
-    function x(e) {
-      return s.value > 9 && s.value - t.currentPage > 4 && e === s.value - 1;
+    function z(e) {
+      return a.value > 9 && a.value - t.currentPage > 4 && e === a.value - 1;
     }
-    return (e, d) => (i(), l("div", L, [
-      c("ul", {
-        class: o(["stash-paginate__list tw-flex", r(n).pagination]),
+    return (e, f) => (l(), i("div", B, [
+      d("ul", {
+        class: o(["stash-paginate__list tw-flex tw-items-center", n(r).pagination]),
         "data-test": "stash-paginate|list"
       }, [
-        c("button", {
+        d("button", {
+          "aria-label": n(g)("ll.previous"),
           "data-test": "stash-paginate|prev-page",
-          class: o([r(n).prev, { [r(n)["is-disabled"]]: e.currentPage === 1 }]),
-          onClick: b
+          class: o(n(r).prev),
+          disabled: t.currentPage === 1,
+          onClick: S
         }, [
-          g(h, {
+          _(h, {
             size: "small",
             name: "chevron-left"
           })
-        ], 2),
-        (i(!0), l(f, null, S(s.value, (a) => (i(), l(f, null, [
-          k(a) ? (i(), l("button", {
-            key: `${a}-ellipsis`,
-            "data-test": "stash-paginate|first-ellipsis"
+        ], 10, V),
+        t.variant === "stats" ? (l(), i("span", F, m(n(g)("ll.pageStats", n(w))), 1)) : (l(!0), i(v, { key: 1 }, D(a.value, (s) => (l(), i(v, null, [
+          C(s) ? (l(), i("button", {
+            key: `${s}-ellipsis`,
+            class: "tw-pointer-events-none",
+            "data-test": "stash-paginate|first-ellipsis",
+            tabindex: "-1"
           }, " … ")) : p("", !0),
-          z(a) ? (i(), l("button", {
-            key: a,
+          y(s) ? (l(), i("button", {
+            key: s,
             "data-test": "stash-paginate|page-number",
-            class: o({ [r(n)["is-active"]]: e.currentPage === a }),
-            onClick: (I) => u(a)
-          }, M(a), 11, $)) : p("", !0),
-          x(a) ? (i(), l("button", {
-            key: `${a}-ellipsis`,
-            "data-test": "stash-paginate|last-ellipsis"
+            class: o({ [n(r)["is-active"]]: t.currentPage === s }),
+            onClick: (K) => c(s)
+          }, m(s), 11, I)) : p("", !0),
+          z(s) ? (l(), i("button", {
+            key: `${s}-ellipsis`,
+            class: "tw-pointer-events-none",
+            "data-test": "stash-paginate|last-ellipsis",
+            tabindex: "-1"
           }, " … ")) : p("", !0)
         ], 64))), 256)),
-        c("button", {
+        d("button", {
+          "aria-label": n(g)("ll.next"),
           "data-test": "stash-paginate|next-page",
-          class: o([r(n).next, { [r(n)["is-disabled"]]: e.currentPage === s.value }]),
-          onClick: P
+          class: o(n(r).next),
+          disabled: t.isNextDisabled || t.currentPage === a.value,
+          onClick: k
         }, [
-          g(h, {
+          _(h, {
             size: "small",
             class: "tw-rotate-180",
             name: "chevron-left"
           })
-        ], 2)
+        ], 10, j)
       ], 2)
     ]));
   }
-}), V = "_pagination_14zhb_2", B = "_prev_14zhb_20", D = "_next_14zhb_25", F = {
-  pagination: V,
-  prev: B,
-  next: D,
-  "is-active": "_is-active_14zhb_38",
-  "is-disabled": "_is-disabled_14zhb_51"
-}, j = {
-  $style: F
-}, H = /* @__PURE__ */ E(N, [["__cssModules", j]]);
+}), q = "_pagination_104d8_2", A = "_prev_104d8_20", G = "_next_104d8_25", H = {
+  pagination: q,
+  prev: A,
+  next: G,
+  "is-active": "_is-active_104d8_38"
+}, J = {
+  $style: H
+}, X = /* @__PURE__ */ $(R, [["__cssModules", J]]);
 export {
-  H as default
+  X as default
 };
 //# sourceMappingURL=Paginate.js.map

package/dist/Paginate.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paginate.js","sources":["../src/components/Paginate/Paginate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-paginate',\n  });\n\n  export interface PaginateProps {\n    /**\n     * Current page number\n     */\n    currentPage?: number;\n    /**\n     * Total number of items in list\n     */\n    listLength?: number;\n    /**\n     * Number of items per page\n     */\n    pageSize?: number;\n  }\n\n  const props = withDefaults(defineProps<PaginateProps>(), {\n    currentPage: 1,\n    listLength: 1,\n    pageSize: 50,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the page number changes.\n     */\n    (e: 'set-page', pageNumber: number): void;\n  }>();\n\n  const classes = useCssModule();\n\n  const pages = computed(() => Math.ceil(props.listLength / props.pageSize));\n\n  /**\n   * Emits current page to list view.\n   */\n  function updatePage(currentPage: number) {\n    emit('set-page', currentPage);\n  }\n\n  /**\n   * Sets current page to next page\n   */\n  function next() {\n    if (props.currentPage < pages.value) {\n      updatePage(props.currentPage + 1);\n    }\n  }\n\n  /**\n   * Sets current page to previous page\n   */\n  function prev() {\n    if (props.currentPage > 1) {\n      updatePage(props.currentPage - 1);\n    }\n  }\n\n  /**\n   * Determines whether to show page\n   * @returns {boolean} - should show page in pagination component\n   */\n  function shouldShowPage(page: number): boolean {\n    const pageDiff = Math.abs(props.currentPage - page);\n\n    if (\n      pages.value < 10 ||\n      page === 1 ||\n      page === pages.value ||\n      (props.currentPage < 6 && page < 8) ||\n      (pages.value - props.currentPage < 5 && pages.value - page < 7) ||\n      pageDiff < 3\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether to show the leading ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowFirstEllipsis(page: number): boolean {\n    return pages.value > 9 && props.currentPage > 5 && page === 2;\n  }\n\n  /**\n   * Determines whether to show the trailing ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowLastEllipsis(page: number): boolean {\n    return pages.value > 9 && pages.value - props.currentPage > 4 && page === pages.value - 1;\n  }\n</script>\n\n<template>\n  <div class=\"stash-paginate tw-flex tw-justify-center\" data-test=\"stash-paginate\">\n    <ul class=\"stash-paginate__list tw-flex\" :class=\"classes.pagination\" data-test=\"stash-paginate|list\">\n      <button\n        data-test=\"stash-paginate|prev-page\"\n        :class=\"[classes.prev, { [classes['is-disabled']]: currentPage === 1 }]\"\n        @click=\"prev\"\n      >\n        <Icon size=\"small\" name=\"chevron-left\" />\n      </button>\n      <template v-for=\"page in pages\">\n        <button\n          v-if=\"shouldShowFirstEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          data-test=\"stash-paginate|first-ellipsis\"\n        >\n          &#x2026;\n        </button>\n        <button\n          v-if=\"shouldShowPage(page)\"\n          :key=\"page\"\n          data-test=\"stash-paginate|page-number\"\n          :class=\"{ [classes['is-active']]: currentPage === page }\"\n          @click=\"updatePage(page)\"\n        >\n          {{ page }}\n        </button>\n        <button v-if=\"shouldShowLastEllipsis(page)\" :key=\"`${page}-ellipsis`\" data-test=\"stash-paginate|last-ellipsis\">\n          &#x2026;\n        </button>\n      </template>\n      <button\n        data-test=\"stash-paginate|next-page\"\n        :class=\"[classes.next, { [classes['is-disabled']]: currentPage === pages }]\"\n        @click=\"next\"\n      >\n        <Icon size=\"small\" class=\"tw-rotate-180\" name=\"chevron-left\" />\n      </button>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .pagination {\n    /* Todo: We shouldn't really be making assumptions about the outer spacing of the pagination component */\n    margin-top: theme('spacing.12');\n    z-index: 0;\n\n    a,\n    button {\n      @apply tw-border tw-border-solid tw-border-ice-200;\n      align-items: center;\n      background-color: theme('colors.white');\n      color: var(--color-blue-500);\n      cursor: pointer;\n      display: flex;\n      height: theme('height.input');\n      justify-content: center;\n      margin: 0 0 0 -1px;\n      width: theme('height.input');\n\n      &.prev {\n        border-bottom-left-radius: theme('borderRadius.DEFAULT');\n        border-top-left-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &.next {\n        border-bottom-right-radius: theme('borderRadius.DEFAULT');\n        border-top-right-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &.is-active {\n        background-color: var(--color-blue-500);\n        color: theme('colors.white');\n        pointer-events: none;\n        z-index: theme('zIndex.control');\n      }\n\n      &:hover,\n      &.is-active {\n        @apply tw-border tw-border-solid tw-border-blue-500;\n        position: relative;\n      }\n\n      &.is-disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","pages","computed","updatePage","currentPage","next","prev","shouldShowPage","page","pageDiff","shouldShowFirstEllipsis","shouldShowLastEllipsis"],"mappings":";;;;;;;;;;;;;;;;AAwBE,UAAMA,IAAQC,GAMRC,IAAOC,GAOPC,IAAUC,EAAa,GAEvBC,IAAQC,EAAS,MAAM,KAAK,KAAKP,EAAM,aAAaA,EAAM,QAAQ,CAAC;AAKzE,aAASQ,EAAWC,GAAqB;AACvC,MAAAP,EAAK,YAAYO,CAAW;AAAA,IAAA;AAM9B,aAASC,IAAO;AACV,MAAAV,EAAM,cAAcM,EAAM,SACjBE,EAAAR,EAAM,cAAc,CAAC;AAAA,IAClC;AAMF,aAASW,IAAO;AACV,MAAAX,EAAM,cAAc,KACXQ,EAAAR,EAAM,cAAc,CAAC;AAAA,IAClC;AAOF,aAASY,EAAeC,GAAuB;AAC7C,YAAMC,IAAW,KAAK,IAAId,EAAM,cAAca,CAAI;AAGhD,aAAAP,EAAM,QAAQ,MACdO,MAAS,KACTA,MAASP,EAAM,SACdN,EAAM,cAAc,KAAKa,IAAO,KAChCP,EAAM,QAAQN,EAAM,cAAc,KAAKM,EAAM,QAAQO,IAAO,KAC7DC,IAAW;AAAA,IAKN;AAOT,aAASC,EAAwBF,GAAuB;AACtD,aAAOP,EAAM,QAAQ,KAAKN,EAAM,cAAc,KAAKa,MAAS;AAAA,IAAA;AAO9D,aAASG,EAAuBH,GAAuB;AAC9C,aAAAP,EAAM,QAAQ,KAAKA,EAAM,QAAQN,EAAM,cAAc,KAAKa,MAASP,EAAM,QAAQ;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Paginate.js","sources":["../src/components/Paginate/Paginate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, toRef, useCssModule } from 'vue';\n\n  import usePaginationStats from '../../composables/usePaginationStats/usePaginationStats';\n  import { t } from '../../locale';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-paginate',\n  });\n\n  export interface PaginateProps {\n    /**\n     * Current page number\n     */\n    currentPage?: number;\n    /**\n     * Total number of items in list\n     */\n    listLength?: number;\n    /**\n     * Number of items per page\n     */\n    pageSize?: number;\n    /*\n     * Optional override for the next button disabled state\n     */\n    isNextDisabled?: boolean;\n    /**\n     * Variant of the pagination component\n     */\n    variant?: 'standard' | 'stats';\n  }\n\n  const props = withDefaults(defineProps<PaginateProps>(), {\n    currentPage: 1,\n    listLength: 1,\n    pageSize: 50,\n    isNextDisabled: false,\n    variant: 'standard',\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the page number changes.\n     */\n    (e: 'set-page', pageNumber: number): void;\n  }>();\n\n  const classes = useCssModule();\n\n  const pageCount = computed(() => Math.ceil(props.listLength / props.pageSize));\n\n  const pageStats =\n    props.variant === 'stats'\n      ? usePaginationStats({\n          currentPage: toRef(() => props.currentPage),\n          pageSize: toRef(() => props.pageSize),\n          totalItems: toRef(() => props.listLength),\n        })\n      : null;\n\n  /**\n   * Emits current page to list view.\n   */\n  function updatePage(currentPage: number) {\n    emit('set-page', currentPage);\n  }\n\n  /**\n   * Sets current page to next page\n   */\n  function next() {\n    if (props.currentPage < pageCount.value) {\n      updatePage(props.currentPage + 1);\n    }\n  }\n\n  /**\n   * Sets current page to previous page\n   */\n  function prev() {\n    if (props.currentPage > 1) {\n      updatePage(props.currentPage - 1);\n    }\n  }\n\n  /**\n   * Determines whether to show page\n   * @returns {boolean} - should show page in pagination component\n   */\n  function shouldShowPage(page: number): boolean {\n    const pageDiff = Math.abs(props.currentPage - page);\n\n    if (\n      pageCount.value < 10 ||\n      page === 1 ||\n      page === pageCount.value ||\n      (props.currentPage < 6 && page < 8) ||\n      (pageCount.value - props.currentPage < 5 && pageCount.value - page < 7) ||\n      pageDiff < 3\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether to show the leading ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowFirstEllipsis(page: number): boolean {\n    return pageCount.value > 9 && props.currentPage > 5 && page === 2;\n  }\n\n  /**\n   * Determines whether to show the trailing ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowLastEllipsis(page: number): boolean {\n    return pageCount.value > 9 && pageCount.value - props.currentPage > 4 && page === pageCount.value - 1;\n  }\n</script>\n\n<template>\n  <div class=\"stash-paginate tw-flex tw-justify-center\" data-test=\"stash-paginate\">\n    <ul\n      class=\"stash-paginate__list tw-flex tw-items-center\"\n      :class=\"classes.pagination\"\n      data-test=\"stash-paginate|list\"\n    >\n      <button\n        :aria-label=\"t('ll.previous')\"\n        data-test=\"stash-paginate|prev-page\"\n        :class=\"classes.prev\"\n        :disabled=\"props.currentPage === 1\"\n        @click=\"prev\"\n      >\n        <Icon size=\"small\" name=\"chevron-left\" />\n      </button>\n      <span v-if=\"props.variant === 'stats'\" class=\"tw-mx-3 tw-text-ice-900\">\n        {{ t('ll.pageStats', pageStats) }}\n      </span>\n      <template v-for=\"page in pageCount\" v-else>\n        <button\n          v-if=\"shouldShowFirstEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          class=\"tw-pointer-events-none\"\n          data-test=\"stash-paginate|first-ellipsis\"\n          tabindex=\"-1\"\n        >\n          &#x2026;\n        </button>\n        <button\n          v-if=\"shouldShowPage(page)\"\n          :key=\"page\"\n          data-test=\"stash-paginate|page-number\"\n          :class=\"{ [classes['is-active']]: props.currentPage === page }\"\n          @click=\"updatePage(page)\"\n        >\n          {{ page }}\n        </button>\n        <button\n          v-if=\"shouldShowLastEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          class=\"tw-pointer-events-none\"\n          data-test=\"stash-paginate|last-ellipsis\"\n          tabindex=\"-1\"\n        >\n          &#x2026;\n        </button>\n      </template>\n      <button\n        :aria-label=\"t('ll.next')\"\n        data-test=\"stash-paginate|next-page\"\n        :class=\"classes.next\"\n        :disabled=\"props.isNextDisabled || props.currentPage === pageCount\"\n        @click=\"next\"\n      >\n        <Icon size=\"small\" class=\"tw-rotate-180\" name=\"chevron-left\" />\n      </button>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .pagination {\n    /* Todo: We shouldn't really be making assumptions about the outer spacing of the pagination component */\n    margin-top: theme('spacing.12');\n    z-index: 0;\n\n    a,\n    button {\n      @apply tw-border tw-border-solid tw-border-ice-200;\n      align-items: center;\n      background-color: theme('colors.white');\n      color: var(--color-blue-500);\n      cursor: pointer;\n      display: flex;\n      height: theme('height.input');\n      justify-content: center;\n      margin: 0 0 0 -1px;\n      width: theme('height.input');\n\n      &.prev {\n        border-bottom-left-radius: theme('borderRadius.DEFAULT');\n        border-top-left-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &.next {\n        border-bottom-right-radius: theme('borderRadius.DEFAULT');\n        border-top-right-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &.is-active {\n        background-color: var(--color-blue-500);\n        color: theme('colors.white');\n        pointer-events: none;\n        z-index: theme('zIndex.control');\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n\n      &:not(:disabled):hover,\n      &:not(:disabled):focus,\n      &.is-active {\n        @apply tw-border tw-border-solid tw-border-blue-500;\n        position: relative;\n      }\n\n      &.is-active:focus {\n        @apply tw-bg-blue-700 tw-border-blue-700;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","pageCount","computed","pageStats","usePaginationStats","toRef","updatePage","currentPage","next","prev","shouldShowPage","page","pageDiff","shouldShowFirstEllipsis","shouldShowLastEllipsis"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCE,UAAMA,IAAQC,GAQRC,IAAOC,GAOPC,IAAUC,EAAa,GAEvBC,IAAYC,EAAS,MAAM,KAAK,KAAKP,EAAM,aAAaA,EAAM,QAAQ,CAAC,GAEvEQ,IACJR,EAAM,YAAY,UACdS,EAAmB;AAAA,MACjB,aAAaC,EAAM,MAAMV,EAAM,WAAW;AAAA,MAC1C,UAAUU,EAAM,MAAMV,EAAM,QAAQ;AAAA,MACpC,YAAYU,EAAM,MAAMV,EAAM,UAAU;AAAA,IACzC,CAAA,IACD;AAKN,aAASW,EAAWC,GAAqB;AACvC,MAAAV,EAAK,YAAYU,CAAW;AAAA,IAAA;AAM9B,aAASC,IAAO;AACV,MAAAb,EAAM,cAAcM,EAAU,SACrBK,EAAAX,EAAM,cAAc,CAAC;AAAA,IAClC;AAMF,aAASc,IAAO;AACV,MAAAd,EAAM,cAAc,KACXW,EAAAX,EAAM,cAAc,CAAC;AAAA,IAClC;AAOF,aAASe,EAAeC,GAAuB;AAC7C,YAAMC,IAAW,KAAK,IAAIjB,EAAM,cAAcgB,CAAI;AAGhD,aAAAV,EAAU,QAAQ,MAClBU,MAAS,KACTA,MAASV,EAAU,SAClBN,EAAM,cAAc,KAAKgB,IAAO,KAChCV,EAAU,QAAQN,EAAM,cAAc,KAAKM,EAAU,QAAQU,IAAO,KACrEC,IAAW;AAAA,IAKN;AAOT,aAASC,EAAwBF,GAAuB;AACtD,aAAOV,EAAU,QAAQ,KAAKN,EAAM,cAAc,KAAKgB,MAAS;AAAA,IAAA;AAOlE,aAASG,EAAuBH,GAAuB;AAC9C,aAAAV,EAAU,QAAQ,KAAKA,EAAU,QAAQN,EAAM,cAAc,KAAKgB,MAASV,EAAU,QAAQ;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Paginate.vue.d.ts

@@ -30,18 +30,24 @@ declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VL
 currentPage: number;
 listLength: number;
 pageSize: number;
+isNextDisabled: boolean;
+variant: string;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "set-page": (pageNumber: number) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PaginateProps>, {
 currentPage: number;
 listLength: number;
 pageSize: number;
+isNextDisabled: boolean;
+variant: string;
 }>>> & Readonly<{
 "onSet-page"?: ((pageNumber: number) => any) | undefined;
 }>, {
+variant: "standard" | "stats";
 currentPage: number;
-listLength: number;
 pageSize: number;
+listLength: number;
+isNextDisabled: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
@@ -58,6 +64,11 @@ export declare interface PaginateProps {
      * Number of items per page
      */
     pageSize?: number;
+    isNextDisabled?: boolean;
+    /**
+     * Variant of the pagination component
+     */
+    variant?: 'standard' | 'stats';
 }
 
 export { }

package/dist/PlaidLink.js

@@ -1,4 +1,4 @@
-import { defineComponent as y, computed as h, ref as c, openBlock as E, createElementBlock as w, renderSlot as x } from "vue";
+import { defineComponent as y, computed as h, ref as c, createElementBlock as E, openBlock as w, renderSlot as x } from "vue";
 import s from "@leaflink/snitch";
 import P from "./usePlaidLink.js";
 const L = /* @__PURE__ */ y({
@@ -54,7 +54,7 @@ const L = /* @__PURE__ */ y({
     }
     return d({
       handleClick: l
-    }), (e, o) => (E(), w("span", {
+    }), (e, o) => (w(), E("span", {
       "data-test": "stash-plaid-link",
       onClick: l
     }, [

package/dist/QuickAction.js

@@ -1,4 +1,4 @@
-import { defineComponent as u, useCssModule as _, computed as s, openBlock as d, createBlock as f, resolveDynamicComponent as w, mergeProps as m, unref as p, withCtx as h, createElementVNode as e, createVNode as o, toDisplayString as n } from "vue";
+import { defineComponent as u, useCssModule as _, computed as s, createBlock as d, openBlock as f, resolveDynamicComponent as w, mergeProps as m, unref as p, withCtx as h, createElementVNode as e, createVNode as o, toDisplayString as n } from "vue";
 import r from "./Icon.js";
 import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const b = { class: "tw-flex tw-items-center tw-gap-3" }, k = { class: "tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3" }, v = { class: "tw-flex-1" }, g = { class: "tw-text-blue-500" }, y = { class: "tw-text-xs tw-font-normal tw-text-ice-700 lg:tw-mb-0" }, C = /* @__PURE__ */ u({
@@ -16,7 +16,7 @@ const b = { class: "tw-flex tw-items-center tw-gap-3" }, k = { class: "tw-flex t
     } : t.href ? {
       href: t.href
     } : {});
-    return (B, D) => (d(), f(w(l.value), m(a.value, {
+    return (B, D) => (f(), d(w(l.value), m(a.value, {
       class: ["stash-quick-action tw-rounded tw-p-3 tw-shadow", p(i).root],
       "data-test": "stash-quick-action"
     }), {

package/dist/QuickAction.vue.d.ts

@@ -22,6 +22,11 @@ export default _default;
 
 declare type IconName = (typeof iconNames)[number];
 
+/**
+ * To add a new icon, follow these steps:
+ *
+ * https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon
+ */
 declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-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", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "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 declare interface QuickActionProps {

package/dist/Radio.js

@@ -1,4 +1,4 @@
-import { useCssModule as d, openBlock as i, createElementBlock as u, normalizeClass as a, withDirectives as c, createElementVNode as s, mergeProps as _, vModelRadio as m, toDisplayString as h } from "vue";
+import { useCssModule as d, createElementBlock as i, openBlock as u, normalizeClass as a, withDirectives as c, createElementVNode as s, mergeProps as _, vModelRadio as m, toDisplayString as h } from "vue";
 import { _ as f } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const p = "_root_ul6uq_2", b = "_label_ul6uq_7", k = "_error_ul6uq_40", y = "_input_ul6uq_45", g = {
   root: p,
@@ -69,7 +69,7 @@ const p = "_root_ul6uq_2", b = "_label_ul6uq_7", k = "_error_ul6uq_40", y = "_in
   }
 }, w = ["id"], E = ["for"];
 function V(e, l, t, r, S, o) {
-  return i(), u("div", {
+  return u(), i("div", {
     class: a(["stash-radio", [r.classes.root, { error: t.hasError }]]),
     "data-test": "ll-radio"
   }, [

package/dist/RadioGroup.js

@@ -1,8 +1,8 @@
-import { defineComponent as h, inject as k, useCssModule as V, openBlock as o, createElementBlock as n, normalizeClass as p, unref as e, Fragment as B, renderList as g, createElementVNode as i, toDisplayString as $, provide as T, computed as v, createBlock as R, mergeProps as M, withCtx as G, renderSlot as C, resolveDynamicComponent as E } from "vue";
+import { defineComponent as h, inject as k, useCssModule as V, createElementBlock as n, openBlock as o, normalizeClass as p, unref as e, Fragment as B, renderList as g, createElementVNode as i, toDisplayString as $, provide as T, computed as v, createBlock as R, mergeProps as M, withCtx as G, renderSlot as C, resolveDynamicComponent as E } from "vue";
 import W from "lodash-es/uniqueId";
 import { R as y } from "./RadioGroup.keys-CqfiKkNz.js";
 import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import { _ as j } from "./Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js";
+import { _ as j } from "./Field.vue_vue_type_script_setup_true_lang-DRaKs9Lm.js";
 const D = ["id", "name", "value", "checked", "disabled"], O = ["for"], N = /* @__PURE__ */ h({
   __name: "VariantButton",
   setup(u) {

package/dist/RadioNew.js

@@ -1,4 +1,4 @@
-import { defineComponent as p, useCssModule as v, openBlock as _, createElementBlock as f, normalizeClass as d, unref as s, createElementVNode as i, toDisplayString as $, withDirectives as W, vShow as C, renderSlot as y, inject as M, computed as r, createBlock as x, resolveDynamicComponent as N, withCtx as D } from "vue";
+import { defineComponent as p, useCssModule as v, createElementBlock as f, openBlock as _, normalizeClass as d, unref as s, createElementVNode as i, toDisplayString as $, withDirectives as W, vShow as C, renderSlot as y, inject as M, computed as r, createBlock as x, resolveDynamicComponent as N, withCtx as D } from "vue";
 import { R as E } from "./RadioGroup.keys-CqfiKkNz.js";
 import { _ as h } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const R = ["id", "name", "value", "checked", "disabled"], T = ["for"], g = /* @__PURE__ */ p({

package/dist/RangeInput.js

@@ -1,4 +1,4 @@
-import { defineComponent as o, useSlots as n, openBlock as a, createElementBlock as r, renderSlot as s, createVNode as l } from "vue";
+import { defineComponent as o, useSlots as n, createElementBlock as a, openBlock as r, renderSlot as s, createVNode as l } from "vue";
 import m from "./Icon.js";
 const p = {
   "data-test": "stash-range-input",
@@ -9,7 +9,7 @@ const p = {
     const t = n();
     if (!(!!t.min && !!t.max))
       throw new Error("RangeInput: please provide slots for min and max values.");
-    return (e, u) => (a(), r("div", p, [
+    return (e, u) => (r(), a("div", p, [
       s(e.$slots, "min"),
       l(m, {
         name: "transfer",

package/dist/SearchBar.js

@@ -1,4 +1,4 @@
-import { defineComponent as C, useSlots as S, ref as i, computed as V, openBlock as h, createBlock as p, normalizeClass as m, withKeys as s, createSlots as I, withCtx as n, createVNode as u, createCommentVNode as T, unref as K, renderSlot as L } from "vue";
+import { defineComponent as C, useSlots as S, ref as i, computed as V, createBlock as h, openBlock as p, withKeys as s, normalizeClass as m, createSlots as I, withCtx as n, createCommentVNode as T, createVNode as u, unref as K, renderSlot as L } from "vue";
 import { t as f } from "./locale.js";
 import b from "./Button.js";
 import v from "./Icon.js";
@@ -28,7 +28,7 @@ const N = /* @__PURE__ */ C({
     function y() {
       l("update:model-value", a.value);
     }
-    return (r, t) => (h(), p(W, {
+    return (r, t) => (p(), h(W, {
       ref_key: "stashInputRef",
       ref: d,
       modelValue: a.value,
@@ -44,7 +44,7 @@ const N = /* @__PURE__ */ C({
       onKeyup: s(o, ["enter"])
     }, I({
       append: n(() => [
-        a.value ? (h(), p(b, {
+        a.value ? (p(), h(b, {
           key: 0,
           class: "stash-search-bar__clear-button",
           disabled: e.isLoading,
@@ -91,7 +91,7 @@ const N = /* @__PURE__ */ C({
       } : void 0
     ]), 1032, ["modelValue", "class", "label", "placeholder", "hint-text"]));
   }
-}), q = /* @__PURE__ */ w(N, [["__scopeId", "data-v-43ef4e0f"]]);
+}), q = /* @__PURE__ */ w(N, [["__scopeId", "data-v-005a7e1b"]]);
 export {
   q as default
 };

package/dist/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sources":["../src/components/SearchBar/SearchBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Input from '../Input/Input.vue';\n\n  export interface SearchBarProps {\n    /**\n     * Indicates loading activity (for example async request) that should prevent search\n     */\n    isLoading?: boolean;\n\n    /**\n     * Sets a visual indicator that the search is active\n     */\n    isWorking?: boolean;\n\n    /**\n     * The search term\n     */\n    modelValue?: string;\n\n    /**\n     * Placeholder text for the input\n     */\n    placeholder?: string;\n\n    /**\n     * Label for search bar\n     */\n    label?: string;\n\n    /**\n     * Text below the input\n     */\n    hintText?: string;\n  }\n\n  defineOptions({\n    name: 'll-search-bar',\n  });\n\n  const props = withDefaults(defineProps<SearchBarProps>(), {\n    isLoading: false,\n    isWorking: false,\n    modelValue: '',\n    placeholder: t('ll.search'),\n    label: t('ll.search'),\n    hintText: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when searching or clearing the search input\n     */\n    (e: 'search', searchTerm: string): void;\n\n    /**\n     * Emitted when the search term changes\n     */\n    (e: 'update:model-value', searchTerm: string): void;\n  }>();\n\n  const slots = useSlots();\n  const searchTerm = ref(props.modelValue);\n  const stashInputRef = ref<InstanceType<typeof Input>>();\n\n  const searchTabIndex = computed(() => (searchTerm.value ? 0 : -1));\n\n  function onSearch() {\n    if (props.isLoading || props.isWorking) {\n      return;\n    }\n    emit('search', searchTerm.value);\n  }\n\n  function clearSearchTerm() {\n    searchTerm.value = '';\n    emit('search', '');\n    emit('update:model-value', '');\n\n    stashInputRef.value?.inputEl?.focus();\n  }\n\n  function handleChange() {\n    emit('update:model-value', searchTerm.value);\n  }\n</script>\n\n<template>\n  <Input\n    ref=\"stashInputRef\"\n    v-model=\"searchTerm\"\n    class=\"stash-search-bar\"\n    :class=\"[{ 'stash-search-bar--value': !!searchTerm }]\"\n    :label=\"props.label\"\n    :placeholder=\"props.placeholder\"\n    :hint-text=\"props.hintText\"\n    data-test=\"stash-search-bar\"\n    @update:model-value=\"handleChange\"\n    @keyup.enter=\"onSearch\"\n  >\n    <template #append>\n      <Button\n        v-if=\"searchTerm\"\n        class=\"stash-search-bar__clear-button\"\n        :disabled=\"props.isLoading\"\n        data-test=\"stash-search-bar|clear-button\"\n        @click=\"clearSearchTerm\"\n        @keyup.enter=\"clearSearchTerm\"\n        @keyup.space=\"clearSearchTerm\"\n      >\n        <Icon name=\"close\" />\n      </Button>\n      <Button\n        :tabindex=\"searchTabIndex\"\n        data-test=\"stash-search-bar|search-button\"\n        :disabled=\"props.isLoading\"\n        class=\"stash-search-bar__search-button\"\n        @click=\"onSearch\"\n        @keyup.enter=\"onSearch\"\n        @keyup.space=\"onSearch\"\n      >\n        <Icon :class=\"{ 'tw-animate-spin': props.isWorking }\" :name=\"props.isWorking ? 'loading-empty' : 'search'\" />\n      </Button>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Overrides the Input hint-text prop -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Input>\n</template>\n\n<style scoped>\n  .stash-search-bar :deep(input) {\n    text-overflow: ellipsis;\n  }\n\n  .stash-search-bar--value :deep(input) {\n    padding-right: 72px;\n  }\n\n  .stash-search-bar :deep(input):hover {\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .stash-search-bar :deep(.stash-input-append) {\n    display: flex;\n    justify-content: flex-end;\n    width: 72px; /* double the the default width of 36px */\n    overflow: visible;\n  }\n\n  .stash-search-bar__clear-button {\n    color: var(--color-ice-700);\n    height: theme('spacing.9');\n    min-width: theme('spacing.9');\n    width: theme('spacing.9');\n    background: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: none;\n\n      & svg {\n        border-radius: theme(borderRadius.DEFAULT);\n\n        @apply tw-ring-4 tw-ring-blue-500 tw-ring-opacity-15;\n      }\n    }\n  }\n\n  .stash-search-bar__clear-button:disabled {\n    color: var(--color-ice-500);\n    cursor: default;\n  }\n\n  .stash-search-bar__search-button {\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n    height: theme('spacing.9');\n    min-width: theme('spacing.9');\n    width: theme('spacing.9');\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &:disabled {\n      border-color: var(--color-ice-500);\n    }\n\n    &:hover {\n      background-color: var(--color-blue-600);\n    }\n\n    &:active {\n      background-color: var(--color-blue-700);\n    }\n\n    &:focus-visible {\n      outline: none;\n      border: 1px solid var(--color-blue-900);\n      /* Simulating a bigger border so the design does not break */\n      box-shadow: inset 0 0 0 1px var(--color-blue-900), 0 0 0 4px rgb(0 114 240 / 15%); /* Unfortunatelly, we have to use RGBA to make the shadow transparent, this is blue-500 */\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","slots","useSlots","searchTerm","ref","stashInputRef","searchTabIndex","computed","onSearch","clearSearchTerm","_b","_a","handleChange"],"mappings":";;;;;;;;;;;;;;;;;;;AA4CE,UAAMA,IAAQC,GASRC,IAAOC,GAYPC,IAAQC,EAAS,GACjBC,IAAaC,EAAIP,EAAM,UAAU,GACjCQ,IAAgBD,EAAgC,GAEhDE,IAAiBC,EAAS,MAAOJ,EAAW,QAAQ,IAAI,EAAG;AAEjE,aAASK,IAAW;AACd,MAAAX,EAAM,aAAaA,EAAM,aAGxBE,EAAA,UAAUI,EAAW,KAAK;AAAA,IAAA;AAGjC,aAASM,IAAkB;;AACzB,MAAAN,EAAW,QAAQ,IACnBJ,EAAK,UAAU,EAAE,GACjBA,EAAK,sBAAsB,EAAE,IAEfW,KAAAC,IAAAN,EAAA,UAAA,gBAAAM,EAAO,YAAP,QAAAD,EAAgB;AAAA,IAAM;AAGtC,aAASE,IAAe;AACjB,MAAAb,EAAA,sBAAsBI,EAAW,KAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SearchBar.js","sources":["../src/components/SearchBar/SearchBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Input from '../Input/Input.vue';\n\n  export interface SearchBarProps {\n    /**\n     * Indicates loading activity (for example async request) that should prevent search\n     */\n    isLoading?: boolean;\n\n    /**\n     * Sets a visual indicator that the search is active\n     */\n    isWorking?: boolean;\n\n    /**\n     * The search term\n     */\n    modelValue?: string;\n\n    /**\n     * Placeholder text for the input\n     */\n    placeholder?: string;\n\n    /**\n     * Label for search bar\n     */\n    label?: string;\n\n    /**\n     * Text below the input\n     */\n    hintText?: string;\n  }\n\n  defineOptions({\n    name: 'll-search-bar',\n  });\n\n  const props = withDefaults(defineProps<SearchBarProps>(), {\n    isLoading: false,\n    isWorking: false,\n    modelValue: '',\n    placeholder: t('ll.search'),\n    label: t('ll.search'),\n    hintText: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when searching or clearing the search input\n     */\n    (e: 'search', searchTerm: string): void;\n\n    /**\n     * Emitted when the search term changes\n     */\n    (e: 'update:model-value', searchTerm: string): void;\n  }>();\n\n  const slots = useSlots();\n  const searchTerm = ref(props.modelValue);\n  const stashInputRef = ref<InstanceType<typeof Input>>();\n\n  const searchTabIndex = computed(() => (searchTerm.value ? 0 : -1));\n\n  function onSearch() {\n    if (props.isLoading || props.isWorking) {\n      return;\n    }\n    emit('search', searchTerm.value);\n  }\n\n  function clearSearchTerm() {\n    searchTerm.value = '';\n    emit('search', '');\n    emit('update:model-value', '');\n\n    stashInputRef.value?.inputEl?.focus();\n  }\n\n  function handleChange() {\n    emit('update:model-value', searchTerm.value);\n  }\n</script>\n\n<template>\n  <Input\n    ref=\"stashInputRef\"\n    v-model=\"searchTerm\"\n    class=\"stash-search-bar\"\n    :class=\"[{ 'stash-search-bar--value': !!searchTerm }]\"\n    :label=\"props.label\"\n    :placeholder=\"props.placeholder\"\n    :hint-text=\"props.hintText\"\n    data-test=\"stash-search-bar\"\n    @update:model-value=\"handleChange\"\n    @keyup.enter=\"onSearch\"\n  >\n    <template #append>\n      <Button\n        v-if=\"searchTerm\"\n        class=\"stash-search-bar__clear-button\"\n        :disabled=\"props.isLoading\"\n        data-test=\"stash-search-bar|clear-button\"\n        @click=\"clearSearchTerm\"\n        @keyup.enter=\"clearSearchTerm\"\n        @keyup.space=\"clearSearchTerm\"\n      >\n        <Icon name=\"close\" />\n      </Button>\n      <Button\n        :tabindex=\"searchTabIndex\"\n        data-test=\"stash-search-bar|search-button\"\n        :disabled=\"props.isLoading\"\n        class=\"stash-search-bar__search-button\"\n        @click=\"onSearch\"\n        @keyup.enter=\"onSearch\"\n        @keyup.space=\"onSearch\"\n      >\n        <Icon :class=\"{ 'tw-animate-spin': props.isWorking }\" :name=\"props.isWorking ? 'loading-empty' : 'search'\" />\n      </Button>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Overrides the Input hint-text prop -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Input>\n</template>\n\n<style scoped>\n  .stash-search-bar :deep(input) {\n    text-overflow: ellipsis;\n  }\n\n  .stash-search-bar--value :deep(input) {\n    padding-right: 72px;\n  }\n\n  .stash-search-bar :deep(input):hover {\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .stash-search-bar :deep(.stash-input-append) {\n    display: flex;\n    justify-content: flex-end;\n    width: 72px; /* double the the default width of 36px */\n    overflow: visible;\n  }\n\n  .stash-search-bar__clear-button {\n    color: var(--color-ice-700);\n    height: theme('spacing.9');\n    min-width: theme('spacing.9');\n    width: theme('spacing.9');\n    background: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: none;\n\n      & svg {\n        border-radius: theme(borderRadius.DEFAULT);\n\n        @apply tw-ring-4 tw-ring-blue-500 tw-ring-opacity-15;\n      }\n    }\n  }\n\n  .stash-search-bar__clear-button:disabled {\n    color: var(--color-ice-500);\n    cursor: default;\n  }\n\n  .stash-search-bar__search-button {\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n    height: theme('spacing.9');\n    min-width: theme('spacing.9');\n    width: theme('spacing.9');\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &:disabled {\n      border-color: var(--color-ice-500);\n    }\n\n    &:hover {\n      background-color: var(--color-blue-600);\n    }\n\n    &:active {\n      background-color: var(--color-blue-700);\n    }\n\n    &:focus-visible {\n      outline: none;\n      border: 1px solid var(--color-blue-900);\n      /* Simulating a bigger border so the design does not break */\n      box-shadow:\n        inset 0 0 0 1px var(--color-blue-900),\n        0 0 0 4px rgb(0 114 240 / 15%); /* Unfortunatelly, we have to use RGBA to make the shadow transparent, this is blue-500 */\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","slots","useSlots","searchTerm","ref","stashInputRef","searchTabIndex","computed","onSearch","clearSearchTerm","_b","_a","handleChange"],"mappings":";;;;;;;;;;;;;;;;;;;AA4CE,UAAMA,IAAQC,GASRC,IAAOC,GAYPC,IAAQC,EAAS,GACjBC,IAAaC,EAAIP,EAAM,UAAU,GACjCQ,IAAgBD,EAAgC,GAEhDE,IAAiBC,EAAS,MAAOJ,EAAW,QAAQ,IAAI,EAAG;AAEjE,aAASK,IAAW;AACd,MAAAX,EAAM,aAAaA,EAAM,aAGxBE,EAAA,UAAUI,EAAW,KAAK;AAAA,IAAA;AAGjC,aAASM,IAAkB;;AACzB,MAAAN,EAAW,QAAQ,IACnBJ,EAAK,UAAU,EAAE,GACjBA,EAAK,sBAAsB,EAAE,IAEfW,KAAAC,IAAAN,EAAA,UAAA,gBAAAM,EAAO,YAAP,QAAAD,EAAgB;AAAA,IAAM;AAGtC,aAASE,IAAe;AACjB,MAAAb,EAAA,sBAAsBI,EAAW,KAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select.js

@@ -1,4 +1,4 @@
-import { defineComponent as Ce, useAttrs as Oe, useSlots as Ie, ref as c, computed as h, watch as U, nextTick as Y, onMounted as Me, onUnmounted as Fe, openBlock as r, createBlock as V, mergeProps as Re, unref as y, createSlots as $e, withCtx as k, createElementVNode as d, toDisplayString as g, createElementBlock as f, Fragment as K, renderList as G, withDirectives as M, normalizeClass as F, withKeys as oe, createCommentVNode as R, renderSlot as j, createTextVNode as $, withModifiers as P, createVNode as S, Teleport as Pe, Transition as ze, normalizeStyle as He, vModelText as Ne, vShow as J } from "vue";
+import { defineComponent as Ce, useAttrs as Oe, useSlots as Ie, ref as c, computed as h, watch as U, nextTick as Y, onMounted as Me, onUnmounted as Fe, createBlock as V, openBlock as r, mergeProps as Re, unref as y, createSlots as $e, withCtx as k, createElementVNode as d, toDisplayString as g, withDirectives as M, createElementBlock as f, Fragment as K, renderList as G, withKeys as oe, normalizeClass as F, createCommentVNode as R, renderSlot as j, createTextVNode as $, withModifiers as P, createVNode as S, Teleport as Pe, Transition as ze, normalizeStyle as He, vModelText as Ne, vShow as J } from "vue";
 import { u as Ae, a as De, f as Le, o as Ue, s as Ve } from "./floating-ui.vue-pzUuloyX.js";
 import Ke from "@leaflink/snitch";
 import Ge from "lodash-es/debounce";
@@ -12,7 +12,7 @@ import Je from "./directives/clickoutside.js";
 import { D as Qe } from "./MenusPlugin-Bk6UW6o9.js";
 import ie from "./Chip.js";
 import z from "./Icon.js";
-import { _ as Ze } from "./Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js";
+import { _ as Ze } from "./Field.vue_vue_type_script_setup_true_lang-DRaKs9Lm.js";
 import { _ as et } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const tt = { class: "tw-flex tw-h-input tw-items-center tw-text-sm" }, lt = ["id", "aria-labelledby"], at = ["id", "aria-errormessage", "aria-invalid", "disabled", "multiple", "name"], st = ["selected", "value"], nt = ["aria-controls", "aria-expanded", "aria-label", "aria-disabled"], ot = ["id"], rt = ["onKeypress", "onMousedown"], it = {
   key: 0,
@@ -179,12 +179,12 @@ const tt = { class: "tw-flex tw-h-input tw-items-center tw-text-sm" }, lt = ["id
     }, be = (e) => {
       if (e.keyCode === E.ESCAPE)
         b();
-      else if (e.keyCode === E.DOWN && v.value < C.value.length - 1)
-        u.value && v.value++;
+      else if (e.keyCode === E.DOWN && v.value < C.value.length - 1 && u.value)
+        v.value++;
       else if (e.keyCode === E.UP && v.value > 0)
         u.value && v.value--, x.value && X.value && v.value === 0 && (x.value.scrollTop -= 100);
-      else if (e.keyCode === E.ENTER && v.value !== -1)
-        u.value && D(C.value[v.value]);
+      else if (e.keyCode === E.ENTER && v.value !== -1 && u.value)
+        D(C.value[v.value]);
       else
         return;
       e.preventDefault(), ge(e);
@@ -473,7 +473,7 @@ const tt = { class: "tw-flex tw-h-input tw-items-center tw-text-sm" }, lt = ["id
       } : void 0
     ]), 1040, ["class", "error-text", "hint-text"]));
   }
-}), $t = /* @__PURE__ */ et(pt, [["__scopeId", "data-v-8a707e00"]]);
+}), $t = /* @__PURE__ */ et(pt, [["__scopeId", "data-v-514b8e8b"]]);
 export {
   $t as default
 };