@leaflink/stash 43.5.1 → 44.0.0-beta.2

package/dist/ConfirmationCodeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationCodeInput.js","sources":["../src/components/ConfirmationCodeInput/ConfirmationCodeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { Ref, ref, useCssModule, watch } from 'vue';\n\n  const classes = useCssModule();\n\n  export interface VerificationCodeInputProps {\n    digitCount?: number;\n    /**\n     * Error text to display.\n     */\n    errorText?: string;\n    /**\n     * Success text to display.\n     */\n    successText?: string;\n  }\n\n  const props = withDefaults(defineProps<VerificationCodeInputProps>(), {\n    digitCount: 6,\n    errorText: undefined,\n    successText: undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'update:model-value', value: number | null): void;\n    }>();\n\n  const data: Ref<Array<string>> = ref([]);\n  const inputEl = ref();\n\n  function handleOtpInput(e) {\n    if (e.data && e.target.nextElementSibling) {\n      e.target.nextElementSibling.focus();\n    } else if (e.data == null && e.target.previousElementSibling) {\n      e.target.previousElementSibling.focus();\n    }\n  }\n\n  function handleFocus(event, elementIndex: number) {\n    event.preventDefault();\n\n    if (data.value[elementIndex]) {\n      inputEl.value[elementIndex].focus();\n\n      return;\n    }\n\n    let focusedIndex = 0;\n\n    data.value.forEach((value, index) => {\n      if (value) {\n        focusedIndex = index + 1;\n      }\n    });\n\n    inputEl.value[focusedIndex].focus();\n  }\n\n  function handleKeyUp(e: KeyboardEvent, index: number) {\n    if (e.key !== 'Backspace' && !new RegExp('^([0-9])$').test(e.key)) {\n      e.preventDefault();\n      return;\n    }\n\n    let focusedIndex = 0;\n\n    if (index !== 0) {\n      focusedIndex = index - 1;\n    } else {\n      focusedIndex = 0;\n    }\n\n    if (e.key === 'Backspace') {\n      if (index + 1 === data.value.length - 1 && data.value[index]) {\n        inputEl.value[index + 1].focus();\n        return;\n      }\n\n      if (data.value[index]) {\n        return;\n      }\n\n      data.value[focusedIndex] = '';\n      inputEl.value[focusedIndex].focus();\n\n      return;\n    }\n\n    if (!new RegExp('^([0-9])$').test(e.key) && !data.value[index]) {\n      data.value[focusedIndex] = '';\n      inputEl.value[focusedIndex].focus();\n      return;\n    }\n  }\n\n  function handlePaste(e: ClipboardEvent) {\n    const pasteData = e.clipboardData?.getData('text');\n\n    if (isNaN(Number(pasteData))) {\n      inputEl.value[0].focus();\n      return;\n    }\n\n    let nextEl = inputEl.value[0].nextElementSibling;\n    if (pasteData) {\n      for (let i = 1; i < pasteData.length; i++) {\n        if (nextEl) {\n          data.value[i] = pasteData[i];\n          nextEl = nextEl.nextElementSibling;\n        }\n      }\n    }\n  }\n\n  watch(\n    () => data,\n    (newVal) => {\n      if (newVal.value.join('') === '') {\n        emit('update:model-value', null);\n      } else {\n        if (isNaN(Number(newVal.value[0]))) {\n          data.value[0] = '';\n          return;\n        }\n        emit('update:model-value', Number(newVal.value.join('')));\n      }\n    },\n    { deep: true },\n  );\n</script>\n\n<template>\n  <form\n    ref=\"otpCont\"\n    class=\"stash-confirmation-code-input tw-inline-block\"\n    data-test=\"stash-confirmation-code-input\"\n    @input=\"handleOtpInput\"\n  >\n    <div class=\"tw-flex tw-gap-6 tw-mb-3\">\n      <template v-for=\"(field, index) in props.digitCount\" :key=\"field\">\n        <input\n          ref=\"inputEl\"\n          v-model=\"data[field - 1]\"\n          data-test=\"stash-confirmation-code-input__otp\"\n          type=\"text\"\n          maxlength=\"1\"\n          class=\"tw-p-2 tw-border focus:tw-border-blue-500 tw-text-center tw-text-ice-900 tw-font-medium tw-text-base\"\n          :class=\"[\n            classes.otpCodeInput,\n            { [classes['has-error']]: !!props.errorText },\n            { [classes['has-success']]: !!props.successText },\n          ]\"\n          inputmode=\"numeric\"\n          @paste=\"field === 1 && handlePaste($event)\"\n          @keyup=\"handleKeyUp($event, index)\"\n          @click=\"(evt) => handleFocus(evt, index)\"\n        />\n      </template>\n    </div>\n    <small\n      v-if=\"props.errorText\"\n      class=\"tw-block tw-text-red-500 tw-text-center\"\n      :class=\"classes.error\"\n      data-test=\"field-error\"\n    >\n      {{ props.errorText }}\n    </small>\n    <small\n      v-if=\"props.successText\"\n      class=\"tw-block tw-text-green-500 tw-text-center\"\n      :class=\"classes.error\"\n      data-test=\"field-error\"\n    >\n      {{ props.successText }}\n    </small>\n  </form>\n</template>\n\n<style module>\n  .otpCodeInput {\n    border-radius: 4px;\n    caret-color: transparent;\n    height: 36px;\n    width: 36px;\n  }\n\n  .otpCodeInput.has-error:not(:focus) {\n    border-color: theme('colors.red.500');\n  }\n\n  .otpCodeInput.has-success:not(:focus) {\n    border-color: theme('colors.green.500');\n  }\n\n  .otpCodeInput:focus {\n    outline: none;\n  }\n\n  .error {\n    margin-top: 4px;\n    white-space: pre-line;\n  }\n</style>\n"],"names":["classes","useCssModule","data","ref","inputEl","handleOtpInput","handleFocus","event","elementIndex","focusedIndex","value","index","handleKeyUp","handlePaste","pasteData","_a","nextEl","i","watch","newVal","emit"],"mappings":";;;;;;;;;;;iBAGQA,IAAUC,KAyBVC,IAA2BC,EAAI,CAAA,CAAE,GACjCC,IAAUD;AAEhB,aAASE,EAAe,GAAG;AACzB,MAAI,EAAE,QAAQ,EAAE,OAAO,qBACnB,EAAA,OAAO,mBAAmB,UACnB,EAAE,QAAQ,QAAQ,EAAE,OAAO,0BAClC,EAAA,OAAO,uBAAuB;IAEpC;AAES,aAAAC,EAAYC,GAAOC,GAAsB;AAG5C,UAFJD,EAAM,eAAe,GAEjBL,EAAK,MAAMM,CAAY,GAAG;AACpB,QAAAJ,EAAA,MAAMI,CAAY,EAAE,MAAM;AAElC;AAAA,MACF;AAEA,UAAIC,IAAe;AAEnB,MAAAP,EAAK,MAAM,QAAQ,CAACQ,GAAOC,MAAU;AACnC,QAAID,MACFD,IAAeE,IAAQ;AAAA,MACzB,CACD,GAEOP,EAAA,MAAMK,CAAY,EAAE,MAAM;AAAA,IACpC;AAES,aAAAG,EAAY,GAAkBD,GAAe;AAChD,UAAA,EAAE,QAAQ,eAAe,CAAC,IAAI,OAAO,WAAW,EAAE,KAAK,EAAE,GAAG,GAAG;AACjE,UAAE,eAAe;AACjB;AAAA,MACF;AAEA,UAAIF,IAAe;AAQf,UANAE,MAAU,IACZF,IAAeE,IAAQ,IAERF,IAAA,GAGb,EAAE,QAAQ,aAAa;AACrB,YAAAE,IAAQ,MAAMT,EAAK,MAAM,SAAS,KAAKA,EAAK,MAAMS,CAAK,GAAG;AAC5D,UAAAP,EAAQ,MAAMO,IAAQ,CAAC,EAAE,MAAM;AAC/B;AAAA,QACF;AAEI,YAAAT,EAAK,MAAMS,CAAK;AAClB;AAGG,QAAAT,EAAA,MAAMO,CAAY,IAAI,IACnBL,EAAA,MAAMK,CAAY,EAAE,MAAM;AAElC;AAAA,MACF;AAEA,UAAI,CAAC,IAAI,OAAO,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,CAACP,EAAK,MAAMS,CAAK,GAAG;AACzD,QAAAT,EAAA,MAAMO,CAAY,IAAI,IACnBL,EAAA,MAAMK,CAAY,EAAE,MAAM;AAClC;AAAA,MACF;AAAA,IACF;AAEA,aAASI,EAAY,GAAmB;;AACtC,YAAMC,KAAYC,IAAA,EAAE,kBAAF,gBAAAA,EAAiB,QAAQ;AAE3C,UAAI,MAAM,OAAOD,CAAS,CAAC,GAAG;AACpB,QAAAV,EAAA,MAAM,CAAC,EAAE,MAAM;AACvB;AAAA,MACF;AAEA,UAAIY,IAASZ,EAAQ,MAAM,CAAC,EAAE;AAC9B,UAAIU;AACF,iBAASG,IAAI,GAAGA,IAAIH,EAAU,QAAQG;AACpC,UAAID,MACFd,EAAK,MAAMe,CAAC,IAAIH,EAAUG,CAAC,GAC3BD,IAASA,EAAO;AAAA,IAIxB;AAEA,WAAAE;AAAA,MACE,MAAMhB;AAAA,MACN,CAACiB,MAAW;AACV,YAAIA,EAAO,MAAM,KAAK,EAAE,MAAM;AAC5B,UAAAC,EAAK,sBAAsB,IAAI;AAAA,aAC1B;AACL,cAAI,MAAM,OAAOD,EAAO,MAAM,CAAC,CAAC,CAAC,GAAG;AAC7B,YAAAjB,EAAA,MAAM,CAAC,IAAI;AAChB;AAAA,UACF;AACA,UAAAkB,EAAK,sBAAsB,OAAOD,EAAO,MAAM,KAAK,EAAE,CAAC,CAAC;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,EAAE,MAAM,GAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ConfirmationCodeInput.js","sources":["../src/components/ConfirmationCodeInput/ConfirmationCodeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { Ref, ref, useCssModule, watch } from 'vue';\n\n  const classes = useCssModule();\n\n  export interface VerificationCodeInputProps {\n    digitCount?: number;\n    /**\n     * Error text to display.\n     */\n    errorText?: string;\n    /**\n     * Success text to display.\n     */\n    successText?: string;\n  }\n\n  const props = withDefaults(defineProps<VerificationCodeInputProps>(), {\n    digitCount: 6,\n    errorText: undefined,\n    successText: undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'update:model-value', value: number | null): void;\n    }>();\n\n  const data: Ref<Array<string>> = ref([]);\n  const inputEl = ref();\n\n  function handleOtpInput(e) {\n    if (e.data && e.target.nextElementSibling) {\n      e.target.nextElementSibling.focus();\n    } else if (e.data == null && e.target.previousElementSibling) {\n      e.target.previousElementSibling.focus();\n    }\n  }\n\n  function handleFocus(event, elementIndex: number) {\n    event.preventDefault();\n\n    if (data.value[elementIndex]) {\n      inputEl.value[elementIndex].focus();\n\n      return;\n    }\n\n    let focusedIndex = 0;\n\n    data.value.forEach((value, index) => {\n      if (value) {\n        focusedIndex = index + 1;\n      }\n    });\n\n    inputEl.value[focusedIndex].focus();\n  }\n\n  function handleKeyUp(e: KeyboardEvent, index: number) {\n    if (e.key !== 'Backspace' && !new RegExp('^([0-9])$').test(e.key)) {\n      e.preventDefault();\n      return;\n    }\n\n    let focusedIndex = 0;\n\n    if (index !== 0) {\n      focusedIndex = index - 1;\n    } else {\n      focusedIndex = 0;\n    }\n\n    if (e.key === 'Backspace') {\n      if (index + 1 === data.value.length - 1 && data.value[index]) {\n        inputEl.value[index + 1].focus();\n        return;\n      }\n\n      if (data.value[index]) {\n        return;\n      }\n\n      data.value[focusedIndex] = '';\n      inputEl.value[focusedIndex].focus();\n\n      return;\n    }\n\n    if (!new RegExp('^([0-9])$').test(e.key) && !data.value[index]) {\n      data.value[focusedIndex] = '';\n      inputEl.value[focusedIndex].focus();\n      return;\n    }\n  }\n\n  function handlePaste(e: ClipboardEvent) {\n    const pasteData = e.clipboardData?.getData('text');\n\n    if (isNaN(Number(pasteData))) {\n      inputEl.value[0].focus();\n      return;\n    }\n\n    let nextEl = inputEl.value[0].nextElementSibling;\n    if (pasteData) {\n      for (let i = 1; i < pasteData.length; i++) {\n        if (nextEl) {\n          data.value[i] = pasteData[i];\n          nextEl = nextEl.nextElementSibling;\n        }\n      }\n    }\n  }\n\n  watch(\n    () => data,\n    (newVal) => {\n      if (newVal.value.join('') === '') {\n        emit('update:model-value', null);\n      } else {\n        if (isNaN(Number(newVal.value[0]))) {\n          data.value[0] = '';\n          return;\n        }\n        emit('update:model-value', Number(newVal.value.join('')));\n      }\n    },\n    { deep: true },\n  );\n</script>\n\n<template>\n  <form\n    ref=\"otpCont\"\n    class=\"stash-confirmation-code-input tw-inline-block\"\n    data-test=\"stash-confirmation-code-input\"\n    @input=\"handleOtpInput\"\n  >\n    <div class=\"tw-mb-3 tw-flex tw-gap-6\">\n      <template v-for=\"(field, index) in props.digitCount\" :key=\"field\">\n        <input\n          ref=\"inputEl\"\n          v-model=\"data[field - 1]\"\n          data-test=\"stash-confirmation-code-input__otp\"\n          type=\"text\"\n          maxlength=\"1\"\n          class=\"tw-border tw-p-2 tw-text-center tw-text-base tw-font-medium tw-text-ice-900 focus:tw-border-blue-500\"\n          :class=\"[\n            classes.otpCodeInput,\n            { [classes['has-error']]: !!props.errorText },\n            { [classes['has-success']]: !!props.successText },\n          ]\"\n          inputmode=\"numeric\"\n          @paste=\"field === 1 && handlePaste($event)\"\n          @keyup=\"handleKeyUp($event, index)\"\n          @click=\"(evt) => handleFocus(evt, index)\"\n        />\n      </template>\n    </div>\n    <small\n      v-if=\"props.errorText\"\n      class=\"tw-block tw-text-center tw-text-red-500\"\n      :class=\"classes.error\"\n      data-test=\"field-error\"\n    >\n      {{ props.errorText }}\n    </small>\n    <small\n      v-if=\"props.successText\"\n      class=\"tw-block tw-text-center tw-text-green-500\"\n      :class=\"classes.error\"\n      data-test=\"field-error\"\n    >\n      {{ props.successText }}\n    </small>\n  </form>\n</template>\n\n<style module>\n  .otpCodeInput {\n    border-radius: 4px;\n    caret-color: transparent;\n    height: 36px;\n    width: 36px;\n  }\n\n  .otpCodeInput.has-error:not(:focus) {\n    border-color: var(--color-red-500);\n  }\n\n  .otpCodeInput.has-success:not(:focus) {\n    border-color: var(--color-green-500);\n  }\n\n  .otpCodeInput:focus {\n    outline: none;\n  }\n\n  .error {\n    margin-top: 4px;\n    white-space: pre-line;\n  }\n</style>\n"],"names":["classes","useCssModule","data","ref","inputEl","handleOtpInput","handleFocus","event","elementIndex","focusedIndex","value","index","handleKeyUp","handlePaste","pasteData","_a","nextEl","i","watch","newVal","emit"],"mappings":";;;;;;;;;;;iBAGQA,IAAUC,KAyBVC,IAA2BC,EAAI,CAAA,CAAE,GACjCC,IAAUD;AAEhB,aAASE,EAAe,GAAG;AACzB,MAAI,EAAE,QAAQ,EAAE,OAAO,qBACnB,EAAA,OAAO,mBAAmB,UACnB,EAAE,QAAQ,QAAQ,EAAE,OAAO,0BAClC,EAAA,OAAO,uBAAuB;IAEpC;AAES,aAAAC,EAAYC,GAAOC,GAAsB;AAG5C,UAFJD,EAAM,eAAe,GAEjBL,EAAK,MAAMM,CAAY,GAAG;AACpB,QAAAJ,EAAA,MAAMI,CAAY,EAAE,MAAM;AAElC;AAAA,MACF;AAEA,UAAIC,IAAe;AAEnB,MAAAP,EAAK,MAAM,QAAQ,CAACQ,GAAOC,MAAU;AACnC,QAAID,MACFD,IAAeE,IAAQ;AAAA,MACzB,CACD,GAEOP,EAAA,MAAMK,CAAY,EAAE,MAAM;AAAA,IACpC;AAES,aAAAG,EAAY,GAAkBD,GAAe;AAChD,UAAA,EAAE,QAAQ,eAAe,CAAC,IAAI,OAAO,WAAW,EAAE,KAAK,EAAE,GAAG,GAAG;AACjE,UAAE,eAAe;AACjB;AAAA,MACF;AAEA,UAAIF,IAAe;AAQf,UANAE,MAAU,IACZF,IAAeE,IAAQ,IAERF,IAAA,GAGb,EAAE,QAAQ,aAAa;AACrB,YAAAE,IAAQ,MAAMT,EAAK,MAAM,SAAS,KAAKA,EAAK,MAAMS,CAAK,GAAG;AAC5D,UAAAP,EAAQ,MAAMO,IAAQ,CAAC,EAAE,MAAM;AAC/B;AAAA,QACF;AAEI,YAAAT,EAAK,MAAMS,CAAK;AAClB;AAGG,QAAAT,EAAA,MAAMO,CAAY,IAAI,IACnBL,EAAA,MAAMK,CAAY,EAAE,MAAM;AAElC;AAAA,MACF;AAEA,UAAI,CAAC,IAAI,OAAO,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,CAACP,EAAK,MAAMS,CAAK,GAAG;AACzD,QAAAT,EAAA,MAAMO,CAAY,IAAI,IACnBL,EAAA,MAAMK,CAAY,EAAE,MAAM;AAClC;AAAA,MACF;AAAA,IACF;AAEA,aAASI,EAAY,GAAmB;;AACtC,YAAMC,KAAYC,IAAA,EAAE,kBAAF,gBAAAA,EAAiB,QAAQ;AAE3C,UAAI,MAAM,OAAOD,CAAS,CAAC,GAAG;AACpB,QAAAV,EAAA,MAAM,CAAC,EAAE,MAAM;AACvB;AAAA,MACF;AAEA,UAAIY,IAASZ,EAAQ,MAAM,CAAC,EAAE;AAC9B,UAAIU;AACF,iBAASG,IAAI,GAAGA,IAAIH,EAAU,QAAQG;AACpC,UAAID,MACFd,EAAK,MAAMe,CAAC,IAAIH,EAAUG,CAAC,GAC3BD,IAASA,EAAO;AAAA,IAIxB;AAEA,WAAAE;AAAA,MACE,MAAMhB;AAAA,MACN,CAACiB,MAAW;AACV,YAAIA,EAAO,MAAM,KAAK,EAAE,MAAM;AAC5B,UAAAC,EAAK,sBAAsB,IAAI;AAAA,aAC1B;AACL,cAAI,MAAM,OAAOD,EAAO,MAAM,CAAC,CAAC,CAAC,GAAG;AAC7B,YAAAjB,EAAA,MAAM,CAAC,IAAI;AAChB;AAAA,UACF;AACA,UAAAkB,EAAK,sBAAsB,OAAOD,EAAO,MAAM,KAAK,EAAE,CAAC,CAAC;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,EAAE,MAAM,GAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ContextSwitcher.js

@@ -1,15 +1,16 @@
 import { defineComponent as k, computed as _, resolveComponent as C, openBlock as s, createElementBlock as l, Fragment as u, renderList as g, normalizeClass as d, toDisplayString as f, createBlock as x, withCtx as E, createTextVNode as S } from "vue";
 import { APPS as a } from "./constants.js";
 import { setPersistentItem as b, getPersistentItem as T, removePersistentItem as v } from "./utils/storage.js";
+import "@leaflink/snitch";
 import "./utils/helpers.js";
 import "lodash-es/camelCase";
 import "lodash-es/get";
 import "lodash-es/isFinite";
 import "lodash-es/isPlainObject";
 const R = {
-  class: "stash-context-switcher tw-bg-purple-700 tw-flex tw-text-center tw-p-1.5 tw-mx-auto tw-w-64 tw-rounded-full tw-border tw-border-white/10",
+  class: "stash-context-switcher tw-mx-auto tw-flex tw-w-64 tw-rounded-full tw-border tw-border-white/10 tw-bg-purple-700 tw-p-1.5 tw-text-center",
   "data-test": "stash-context-switcher"
-}, N = ["href", "onClick"], h = "-last-session", K = /* @__PURE__ */ k({
+}, N = ["href", "onClick"], h = "-last-session", O = /* @__PURE__ */ k({
   name: "ll-context-switcher",
   __name: "ContextSwitcher",
   props: {
@@ -56,12 +57,12 @@ const R = {
         }, [
           t.hasBaseRoute ? (s(), l("a", {
             key: 0,
-            class: d(["!tw-capitalize !tw-no-underline tw-w-1/2 tw-leading-none tw-font-semibold tw-py-2.5 tw-rounded-full tw-cursor-pointer", e.activeApp === t.app ? "tw-text-white tw-bg-royal-500" : "tw-text-ice-500"]),
+            class: d(["tw-w-1/2 tw-cursor-pointer tw-rounded-full tw-py-2.5 tw-font-semibold !tw-capitalize tw-leading-none !tw-no-underline", e.activeApp === t.app ? "tw-text-white tw-bg-royal-500" : "tw-text-ice-500"]),
             href: `/${t.name}`,
             onClick: (c) => m(c, t.app)
           }, f(t.app), 11, N)) : (s(), x(r, {
             key: 1,
-            class: d(["!tw-capitalize !tw-no-underline tw-w-1/2 tw-leading-none tw-font-semibold tw-py-2.5 tw-rounded-full tw-cursor-pointer", e.activeApp === t.app ? "tw-text-white tw-bg-royal-500" : "tw-text-ice-500"]),
+            class: d(["tw-w-1/2 tw-cursor-pointer tw-rounded-full tw-py-2.5 tw-font-semibold !tw-capitalize tw-leading-none !tw-no-underline", e.activeApp === t.app ? "tw-text-white tw-bg-royal-500" : "tw-text-ice-500"]),
             to: { name: t.name, query: o.routeQuery },
             "data-test-route": JSON.stringify({ name: t.name, query: o.routeQuery }),
             onClick: (c) => m(c, t.app)
@@ -77,6 +78,6 @@ const R = {
   }
 });
 export {
-  K as default
+  O as default
 };
 //# sourceMappingURL=ContextSwitcher.js.map

package/dist/ContextSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextSwitcher.js","sources":["../src/components/ContextSwitcher/ContextSwitcher.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import type { LocationQuery } from 'vue-router';\n\n  import { APPS } from '../../constants';\n  import { getPersistentItem, removePersistentItem, setPersistentItem } from '../../utils/storage';\n\n  defineOptions({\n    name: 'll-context-switcher',\n  });\n\n  type AppValues = typeof APPS[keyof typeof APPS];\n\n  export interface ContextSwitcherProps {\n    /**\n     * The current app that is active. Choices are 'marketplace' | 'payments'.\n     */\n    activeApp: AppValues;\n\n    /**\n     * Portal access to both marketplace and payments.\n     */\n    portalAccess?: {\n      commercePortal: boolean;\n      paymentsPortal: boolean;\n    };\n\n    /**\n     * Url to replace the other app if current user does not have portal access.\n     */\n    limitedAccessUrl: string;\n\n    routeQuery?: LocationQuery;\n  }\n\n  const props = withDefaults(defineProps<ContextSwitcherProps>(), {\n    portalAccess: () => ({\n      commercePortal: false,\n      paymentsPortal: false,\n    }),\n    routeQuery: () => ({}),\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Fires on click of the context switcher.\n       * @deprecated Use `switch` instead.\n       */\n      (e: 'click', urlInfo: { from: string; to: string }): void;\n      /**\n       * Fires on click of the context switcher.\n       */\n      (e: 'switch', evt: MouseEvent, urlInfo: { from: string; to: string }): void;\n    }>();\n\n  interface ContextItem {\n    app: AppValues;\n    name: string;\n    hasBaseRoute: boolean;\n  }\n\n  const CONTEXT_SWITCHER_STORAGE_KEY = '-last-session';\n\n  const routes = computed<ContextItem[]>(() => {\n    return [\n      {\n        app: APPS.MARKETPLACE,\n        name: props.portalAccess.commercePortal ? 'dashboard' : props.limitedAccessUrl,\n        hasBaseRoute: props.portalAccess.commercePortal,\n      },\n      {\n        app: APPS.PAYMENTS,\n        name: props.portalAccess.paymentsPortal ? 'payments' : props.limitedAccessUrl,\n        hasBaseRoute: false,\n      },\n    ];\n  });\n\n  /**\n   * Saves the current url in local storage before leaving the current app, if user has access to both apps\n   * If a previous session url exists, redirect users there instead then remove the local storage item afterward.\n   *\n   * @param event - Event from user click.\n   * @param app - App name of the clicked link, is a key of `APPS`.\n   */\n  function handleClick(event: MouseEvent, app: AppValues) {\n    if (app === props.activeApp) {\n      return;\n    }\n\n    const currentLocation = window.location.href;\n    let destination = (event.target as HTMLAnchorElement).href;\n\n    if (props.portalAccess.paymentsPortal && props.portalAccess.commercePortal) {\n      const appRoute = app === APPS.PAYMENTS ? APPS.MARKETPLACE : APPS.PAYMENTS;\n      const currentSessionName = `${appRoute}${CONTEXT_SWITCHER_STORAGE_KEY}`;\n      const prevSessionName = `${app}${CONTEXT_SWITCHER_STORAGE_KEY}`;\n\n      // save the current url in local storage\n      setPersistentItem(currentSessionName, currentLocation, { global: true });\n\n      // get the other app's url from local storage\n      const prevSessionUrl = getPersistentItem(prevSessionName, { global: true });\n\n      // if it exists, redirect users to such location and remove the item from local storage\n      if (prevSessionUrl) {\n        event.preventDefault();\n        destination = prevSessionUrl;\n        window.location.href = prevSessionUrl;\n        removePersistentItem(prevSessionName, { global: true });\n      }\n    }\n\n    emit('click', { from: currentLocation, to: destination });\n    emit('switch', event, { from: currentLocation, to: destination });\n  }\n</script>\n\n<template>\n  <div\n    class=\"\n      stash-context-switcher\n      tw-bg-purple-700 tw-flex tw-text-center tw-p-1.5 tw-mx-auto tw-w-64 tw-rounded-full tw-border tw-border-white/10\n    \"\n    data-test=\"stash-context-switcher\"\n  >\n    <template v-for=\"route in routes\" :key=\"route.app\">\n      <!-- render anchor tag to override base route in Payments -->\n      <a\n        v-if=\"route.hasBaseRoute\"\n        class=\"\n          !tw-capitalize !tw-no-underline\n          tw-w-1/2 tw-leading-none tw-font-semibold tw-py-2.5 tw-rounded-full tw-cursor-pointer\n        \"\n        :class=\"props.activeApp === route.app ? 'tw-text-white tw-bg-royal-500' : 'tw-text-ice-500'\"\n        :href=\"`/${route.name}`\"\n        @click=\"(evt) => handleClick(evt, route.app)\"\n      >\n        {{ route.app }}\n      </a>\n\n      <router-link\n        v-else\n        class=\"\n          !tw-capitalize !tw-no-underline\n          tw-w-1/2 tw-leading-none tw-font-semibold tw-py-2.5 tw-rounded-full tw-cursor-pointer\n        \"\n        :class=\"props.activeApp === route.app ? 'tw-text-white tw-bg-royal-500' : 'tw-text-ice-500'\"\n        :to=\"{ name: route.name, query: routeQuery }\"\n        :data-test-route=\"JSON.stringify({ name: route.name, query: routeQuery })\"\n        @click=\"(evt) => handleClick(evt, route.app)\"\n      >\n        {{ route.app }}\n      </router-link>\n    </template>\n  </div>\n</template>\n"],"names":["CONTEXT_SWITCHER_STORAGE_KEY","routes","computed","APPS","props","handleClick","event","app","currentLocation","destination","currentSessionName","prevSessionName","setPersistentItem","prevSessionUrl","getPersistentItem","removePersistentItem","emit"],"mappings":";;;;;;;;;;;4BA8DQA,IAA+B;;;;;;;;;;;;;;iBAE/BC,IAASC,EAAwB,MAC9B;AAAA,MACL;AAAA,QACE,KAAKC,EAAK;AAAA,QACV,MAAMC,EAAM,aAAa,iBAAiB,cAAcA,EAAM;AAAA,QAC9D,cAAcA,EAAM,aAAa;AAAA,MACnC;AAAA,MACA;AAAA,QACE,KAAKD,EAAK;AAAA,QACV,MAAMC,EAAM,aAAa,iBAAiB,aAAaA,EAAM;AAAA,QAC7D,cAAc;AAAA,MAChB;AAAA,IAAA,CAEH;AASQ,aAAAC,EAAYC,GAAmBC,GAAgB;AAClD,UAAAA,MAAQH,EAAM;AAChB;AAGI,YAAAI,IAAkB,OAAO,SAAS;AACpC,UAAAC,IAAeH,EAAM,OAA6B;AAEtD,UAAIF,EAAM,aAAa,kBAAkBA,EAAM,aAAa,gBAAgB;AAE1E,cAAMM,IAAqB,GADVH,MAAQJ,EAAK,WAAWA,EAAK,cAAcA,EAAK,QAC3B,GAAGH,CAA4B,IAC/DW,IAAkB,GAAGJ,CAAG,GAAGP,CAA4B;AAG7D,QAAAY,EAAkBF,GAAoBF,GAAiB,EAAE,QAAQ,GAAM,CAAA;AAGvE,cAAMK,IAAiBC,EAAkBH,GAAiB,EAAE,QAAQ,IAAM;AAG1E,QAAIE,MACFP,EAAM,eAAe,GACPG,IAAAI,GACd,OAAO,SAAS,OAAOA,GACvBE,EAAqBJ,GAAiB,EAAE,QAAQ,GAAM,CAAA;AAAA,MAE1D;AAEA,MAAAK,EAAK,SAAS,EAAE,MAAMR,GAAiB,IAAIC,GAAa,GACxDO,EAAK,UAAUV,GAAO,EAAE,MAAME,GAAiB,IAAIC,GAAa;AAAA,IAClE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ContextSwitcher.js","sources":["../src/components/ContextSwitcher/ContextSwitcher.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import type { LocationQuery } from 'vue-router';\n\n  import { APPS } from '../../constants';\n  import { getPersistentItem, removePersistentItem, setPersistentItem } from '../../utils/storage';\n\n  defineOptions({\n    name: 'll-context-switcher',\n  });\n\n  type AppValues = typeof APPS[keyof typeof APPS];\n\n  export interface ContextSwitcherProps {\n    /**\n     * The current app that is active. Choices are 'marketplace' | 'payments'.\n     */\n    activeApp: AppValues;\n\n    /**\n     * Portal access to both marketplace and payments.\n     */\n    portalAccess?: {\n      commercePortal: boolean;\n      paymentsPortal: boolean;\n    };\n\n    /**\n     * Url to replace the other app if current user does not have portal access.\n     */\n    limitedAccessUrl: string;\n\n    routeQuery?: LocationQuery;\n  }\n\n  const props = withDefaults(defineProps<ContextSwitcherProps>(), {\n    portalAccess: () => ({\n      commercePortal: false,\n      paymentsPortal: false,\n    }),\n    routeQuery: () => ({}),\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Fires on click of the context switcher.\n       * @deprecated Use `switch` instead.\n       */\n      (e: 'click', urlInfo: { from: string; to: string }): void;\n      /**\n       * Fires on click of the context switcher.\n       */\n      (e: 'switch', evt: MouseEvent, urlInfo: { from: string; to: string }): void;\n    }>();\n\n  interface ContextItem {\n    app: AppValues;\n    name: string;\n    hasBaseRoute: boolean;\n  }\n\n  const CONTEXT_SWITCHER_STORAGE_KEY = '-last-session';\n\n  const routes = computed<ContextItem[]>(() => {\n    return [\n      {\n        app: APPS.MARKETPLACE,\n        name: props.portalAccess.commercePortal ? 'dashboard' : props.limitedAccessUrl,\n        hasBaseRoute: props.portalAccess.commercePortal,\n      },\n      {\n        app: APPS.PAYMENTS,\n        name: props.portalAccess.paymentsPortal ? 'payments' : props.limitedAccessUrl,\n        hasBaseRoute: false,\n      },\n    ];\n  });\n\n  /**\n   * Saves the current url in local storage before leaving the current app, if user has access to both apps\n   * If a previous session url exists, redirect users there instead then remove the local storage item afterward.\n   *\n   * @param event - Event from user click.\n   * @param app - App name of the clicked link, is a key of `APPS`.\n   */\n  function handleClick(event: MouseEvent, app: AppValues) {\n    if (app === props.activeApp) {\n      return;\n    }\n\n    const currentLocation = window.location.href;\n    let destination = (event.target as HTMLAnchorElement).href;\n\n    if (props.portalAccess.paymentsPortal && props.portalAccess.commercePortal) {\n      const appRoute = app === APPS.PAYMENTS ? APPS.MARKETPLACE : APPS.PAYMENTS;\n      const currentSessionName = `${appRoute}${CONTEXT_SWITCHER_STORAGE_KEY}`;\n      const prevSessionName = `${app}${CONTEXT_SWITCHER_STORAGE_KEY}`;\n\n      // save the current url in local storage\n      setPersistentItem(currentSessionName, currentLocation, { global: true });\n\n      // get the other app's url from local storage\n      const prevSessionUrl = getPersistentItem(prevSessionName, { global: true });\n\n      // if it exists, redirect users to such location and remove the item from local storage\n      if (prevSessionUrl) {\n        event.preventDefault();\n        destination = prevSessionUrl;\n        window.location.href = prevSessionUrl;\n        removePersistentItem(prevSessionName, { global: true });\n      }\n    }\n\n    emit('click', { from: currentLocation, to: destination });\n    emit('switch', event, { from: currentLocation, to: destination });\n  }\n</script>\n\n<template>\n  <div\n    class=\"\n      stash-context-switcher\n      tw-mx-auto tw-flex tw-w-64 tw-rounded-full tw-border tw-border-white/10 tw-bg-purple-700 tw-p-1.5 tw-text-center\n    \"\n    data-test=\"stash-context-switcher\"\n  >\n    <template v-for=\"route in routes\" :key=\"route.app\">\n      <!-- render anchor tag to override base route in Payments -->\n      <a\n        v-if=\"route.hasBaseRoute\"\n        class=\"\n          tw-w-1/2 tw-cursor-pointer tw-rounded-full tw-py-2.5 tw-font-semibold\n          !tw-capitalize\n          tw-leading-none\n          !tw-no-underline\n        \"\n        :class=\"props.activeApp === route.app ? 'tw-text-white tw-bg-royal-500' : 'tw-text-ice-500'\"\n        :href=\"`/${route.name}`\"\n        @click=\"(evt) => handleClick(evt, route.app)\"\n      >\n        {{ route.app }}\n      </a>\n\n      <router-link\n        v-else\n        class=\"\n          tw-w-1/2 tw-cursor-pointer tw-rounded-full tw-py-2.5 tw-font-semibold\n          !tw-capitalize\n          tw-leading-none\n          !tw-no-underline\n        \"\n        :class=\"props.activeApp === route.app ? 'tw-text-white tw-bg-royal-500' : 'tw-text-ice-500'\"\n        :to=\"{ name: route.name, query: routeQuery }\"\n        :data-test-route=\"JSON.stringify({ name: route.name, query: routeQuery })\"\n        @click=\"(evt) => handleClick(evt, route.app)\"\n      >\n        {{ route.app }}\n      </router-link>\n    </template>\n  </div>\n</template>\n"],"names":["CONTEXT_SWITCHER_STORAGE_KEY","routes","computed","APPS","props","handleClick","event","app","currentLocation","destination","currentSessionName","prevSessionName","setPersistentItem","prevSessionUrl","getPersistentItem","removePersistentItem","emit"],"mappings":";;;;;;;;;;;;4BA8DQA,IAA+B;;;;;;;;;;;;;;iBAE/BC,IAASC,EAAwB,MAC9B;AAAA,MACL;AAAA,QACE,KAAKC,EAAK;AAAA,QACV,MAAMC,EAAM,aAAa,iBAAiB,cAAcA,EAAM;AAAA,QAC9D,cAAcA,EAAM,aAAa;AAAA,MACnC;AAAA,MACA;AAAA,QACE,KAAKD,EAAK;AAAA,QACV,MAAMC,EAAM,aAAa,iBAAiB,aAAaA,EAAM;AAAA,QAC7D,cAAc;AAAA,MAChB;AAAA,IAAA,CAEH;AASQ,aAAAC,EAAYC,GAAmBC,GAAgB;AAClD,UAAAA,MAAQH,EAAM;AAChB;AAGI,YAAAI,IAAkB,OAAO,SAAS;AACpC,UAAAC,IAAeH,EAAM,OAA6B;AAEtD,UAAIF,EAAM,aAAa,kBAAkBA,EAAM,aAAa,gBAAgB;AAE1E,cAAMM,IAAqB,GADVH,MAAQJ,EAAK,WAAWA,EAAK,cAAcA,EAAK,QAC3B,GAAGH,CAA4B,IAC/DW,IAAkB,GAAGJ,CAAG,GAAGP,CAA4B;AAG7D,QAAAY,EAAkBF,GAAoBF,GAAiB,EAAE,QAAQ,GAAM,CAAA;AAGvE,cAAMK,IAAiBC,EAAkBH,GAAiB,EAAE,QAAQ,IAAM;AAG1E,QAAIE,MACFP,EAAM,eAAe,GACPG,IAAAI,GACd,OAAO,SAAS,OAAOA,GACvBE,EAAqBJ,GAAiB,EAAE,QAAQ,GAAM,CAAA;AAAA,MAE1D;AAEA,MAAAK,EAAK,SAAS,EAAE,MAAMR,GAAiB,IAAIC,GAAa,GACxDO,EAAK,UAAUV,GAAO,EAAE,MAAME,GAAiB,IAAIC,GAAa;AAAA,IAClE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Copy.js

@@ -12,7 +12,7 @@ import "lodash-es/camelCase";
 import "lodash-es/get";
 import "lodash-es/isFinite";
 import "lodash-es/isPlainObject";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";

package/dist/CurrencyInput.js

@@ -6,9 +6,9 @@ import "./utils/i18n.js";
 import "./constants.js";
 import "./locale.js";
 import "lodash-es/get";
-import "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
+import "./Field.vue_vue_type_script_setup_true_lang-42cf79d4.js";
 import "lodash-es/uniqueId";
-import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
+import "./Label.vue_vue_type_script_setup_true_lang-c5589919.js";
 import "./Icon.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";

package/dist/DataView.js

@@ -8,7 +8,7 @@ import "./Icon.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js";
 function _(e) {
   const n = e[0] === "-" ? "desc" : "asc";
   return { id: n === "asc" ? e : e.slice(1), order: n };

package/dist/DataViewFilters.js

@@ -6,16 +6,16 @@ import { _ as Z } from "./Box.vue_vue_type_script_setup_true_lang-69e5176b.js";
 import A from "./Button.js";
 import T from "lodash-es/cloneDeep";
 import $ from "./Icon.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js";
 import { D as G } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import q from "./FilterChip.js";
-import { _ as H } from "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
+import { _ as H } from "./Label.vue_vue_type_script_setup_true_lang-c5589919.js";
 import K from "./Modal.js";
 import X from "./SearchBar.js";
 import { D as Y } from "./DataViewFilters.keys-c80ffabe.js";
 import { i as L } from "./isDefined-2ce6cde4.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
 import "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
@@ -26,7 +26,7 @@ import "./Backdrop.js";
 import "./Input.js";
 import "lodash-es/isNil";
 import "./utils/i18n.js";
-import "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
+import "./Field.vue_vue_type_script_setup_true_lang-42cf79d4.js";
 function Pe({
   schema: a,
   dataViewRef: w
@@ -82,8 +82,8 @@ function Pe({
 }
 const ee = {
   key: 1,
-  class: "tw-col-span-12 tw-row-start-2 md:tw-row-start-1 md:tw-col-start-7 lg:tw-col-start-5 lg:tw-col-span-8"
-}, te = { class: "tw-hidden md:tw-block" }, le = { class: "tw-flex tw-gap-4" }, re = { class: "tw-inline-flex tw-items-center tw-gap-3" }, se = { class: "tw-flex tw-flex-col-reverse lg:tw-flex-row lg:tw-justify-end tw-gap-gutter" }, Te = /* @__PURE__ */ R({
+  class: "tw-col-span-12 tw-row-start-2 md:tw-col-start-7 md:tw-row-start-1 lg:tw-col-span-8 lg:tw-col-start-5"
+}, te = { class: "tw-hidden md:tw-block" }, le = { class: "tw-flex tw-gap-4" }, re = { class: "tw-inline-flex tw-items-center tw-gap-3" }, se = { class: "tw-flex tw-flex-col-reverse tw-gap-gutter lg:tw-flex-row lg:tw-justify-end" }, Te = /* @__PURE__ */ R({
   __name: "DataViewFilters",
   props: {
     filtersLabelText: { default: n("ll.filterBy") },
@@ -135,7 +135,7 @@ const ee = {
     return O(r, () => {
       r.value && w("open-drawer");
     }), (s, d) => (c(), v(Z, {
-      class: J(["stash-data-view-filters tw-grid tw-grid-cols-12 tw-p-3 tw-gap-6", { "lg:tw-p-6": t(D) === "comfortable", "tw-mb-3": !t(b) }]),
+      class: J(["stash-data-view-filters tw-grid tw-grid-cols-12 tw-gap-6 tw-p-3", { "lg:tw-p-6": t(D) === "comfortable", "tw-mb-3": !t(b) }]),
       radius: t(b) ? "none" : "rounded",
       "data-test": "stash-data-view-filters",
       "disable-padding": ""

package/dist/DataViewFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewFilters.js","sources":["../src/components/DataViewFilters/useFilters.ts","../src/components/DataViewFilters/DataViewFilters.vue"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep';\nimport { computed, ComputedRef, Ref, ref } from 'vue';\n\nimport isDefined from '../../composables/useValidation/utils/isDefined';\nimport DataView from '../DataView/DataView.vue';\n\ntype DataViewInstance = InstanceType<typeof DataView>;\n\n/**\n * Contains metadata and configuration for the filters.\n * @see https://www.typescriptlang.org/docs/handbook/2/mapped-types.html\n */\nexport type UseFiltersSchema<Values extends object, Groups extends string> = {\n  [Property in keyof Values]: {\n    defaultValue?: Values[Property];\n    group?: Groups;\n    isActive?: (value: Values[Property]) => boolean;\n  };\n};\n\nexport interface UseFiltersArgs<Values extends object, Groups extends string> {\n  schema: UseFiltersSchema<Values, Groups>;\n  /** A ref for an instance of DataView */\n  dataViewRef: Ref<unknown>; // Note: using `Ref<InstanceType<typeof DataView>>` here causes type errors when providing a value for this argument\n}\n\nexport interface UseFiltersReturnType<Values = object, Groups extends string = string> {\n  applyFilters: () => void;\n  resetAllFilters: () => void;\n  resetFilterGroup: (group: string) => void; // Note: group is intentionally not typed as `Groups` since there is no way to pass in a Groups type to UseFiltersReturnType within DataViewFilters.vue\n  undoWorkingFilters: () => void;\n  activeFiltersCounts: ComputedRef<Record<Groups, number>>;\n  totalActiveFiltersCount: ComputedRef<number>;\n  appliedFilters: Ref<Values>;\n  workingFilters: Ref<Values>;\n}\n\n/**\n * Provides utility functions for working with `DataViewFilters`.\n */\nexport function useFilters<Values extends object, Groups extends string>({\n  schema,\n  dataViewRef,\n}: UseFiltersArgs<Values, Groups>): UseFiltersReturnType<Values, Groups> {\n  const appliedFilters = ref({}) as Ref<Values>;\n  const workingFilters = ref({}) as Ref<Values>;\n\n  for (const filterName in schema) {\n    // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n    appliedFilters.value[filterName] = schema[filterName].defaultValue;\n    // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n    workingFilters.value[filterName] = schema[filterName].defaultValue;\n  }\n\n  const dvRef = dataViewRef as Ref<DataViewInstance>;\n\n  /**\n   * For when an \"Apply\" button is clicked. It does the following:\n   *   1) applies the working filter state\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function applyFilters() {\n    appliedFilters.value = cloneDeep(workingFilters.value);\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * For when a \"Reset all\" button is clicked. It does the following:\n   *   1) applies the defaultValue filter values to all filters\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function resetAllFilters() {\n    for (const filterName in schema) {\n      // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n      appliedFilters.value[filterName] = schema[filterName].defaultValue;\n      // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n      workingFilters.value[filterName] = schema[filterName].defaultValue;\n    }\n\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * For when a \"Reset\" button is clicked. It does the following:\n   *   1) applies the defaultValue filter values to the given filter group\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function resetFilterGroup(group: Groups) {\n    for (const filterName in schema) {\n      if (schema[filterName].group === group) {\n        // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n        appliedFilters.value[filterName] = schema[filterName].defaultValue;\n        // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n        workingFilters.value[filterName] = schema[filterName].defaultValue;\n      }\n    }\n\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * Resets the `workingFilters` to match the `appliedFilters`. This can be used when the FilterDrawer or a FilterDropdown is dismissed without clicking \"Reset\" or \"Apply\".\n   */\n  function undoWorkingFilters() {\n    workingFilters.value = cloneDeep(appliedFilters.value);\n  }\n\n  const activeFiltersCounts = computed(() => {\n    const counts = {} as Record<Groups, number>;\n\n    for (const filterName in schema) {\n      const config = schema[filterName];\n      const value = appliedFilters.value[filterName];\n      const isActive = config.isActive?.(value) || isDefined(value);\n\n      if (isActive && config.group) {\n        counts[config.group] = (counts[config.group] ?? 0) + 1;\n      }\n    }\n\n    return counts;\n  });\n\n  const totalActiveFiltersCount = computed(() => {\n    let count = 0;\n\n    for (const filterName in schema) {\n      const config = schema[filterName];\n      const value = appliedFilters.value[filterName];\n      const isActive = config.isActive?.(value) || isDefined(value);\n\n      if (isActive) {\n        count += 1;\n      }\n    }\n\n    return count;\n  });\n\n  return {\n    applyFilters,\n    resetAllFilters,\n    // @ts-expect-error \"could be instantiated with a different subtype\": TODO: figure out how to resolve the types\n    resetFilterGroup,\n    undoWorkingFilters,\n    activeFiltersCounts,\n    totalActiveFiltersCount,\n    appliedFilters,\n    workingFilters,\n  };\n}\n\nexport default useFilters;\n","<script lang=\"ts\">\n  export * from './DataViewFilters.keys';\n  export * from './DataViewFilters.types';\n  export * from './useFilters';\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, ref, watch } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import { SCREEN_SIZES } from '../../constants';\n  import { t } from '../../locale';\n  import Box from '../Box/Box.vue';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Label from '../Label/Label.vue';\n  import Modal, { type ModalProps } from '../Modal/Modal.vue';\n  import SearchBar, { SearchBarProps } from '../SearchBar/SearchBar.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from './DataViewFilters.keys';\n  import type { DrawerStyle, OnApplyFilters } from './DataViewFilters.types';\n  import type { UseFiltersReturnType } from './useFilters';\n\n  export interface DataViewFiltersProps {\n    filtersLabelText?: string;\n    /**\n     * Props to pass to the `SearchBar` component.\n     */\n    searchBarProps?: SearchBarProps;\n    showSearch?: boolean;\n    /** 'cascade' displays all fields within every filter group; 'nested' displays only the group names and requires clicking a group to view its fields */\n    drawerStyle?: DrawerStyle;\n    drawerProps?: ModalProps;\n    showDrawerPreviousButton?: boolean;\n    /**\n     * Required when using filters. This prop should contain the return value of the `useFilters()` composable.\n     */\n    useFiltersInstance?: UseFiltersReturnType;\n    onApply?: OnApplyFilters;\n    /** The name of the active filter group. The active filter group is determined by which instance of FilterDropdown or FilterDrawerItem is open. */\n    activeGroup?: string;\n  }\n\n  export interface DataViewFiltersSlots {\n    default?: void;\n    drawer?: void;\n    'filters-label'?: void;\n  }\n\n  const props = withDefaults(defineProps<DataViewFiltersProps>(), {\n    filtersLabelText: t('ll.filterBy'),\n    isLoading: false,\n    drawerStyle: 'nested',\n    drawerProps: undefined,\n    searchBarProps: undefined,\n    showDrawerPreviousButton: false,\n    showSearch: true,\n    useFiltersInstance: undefined,\n    onApply: undefined,\n    activeGroup: '',\n  });\n\n  const emit =\n    defineEmits<{\n      /** When the drawer is opened */\n      (e: 'open-drawer'): void;\n      /** When the drawer is dismissed */\n      (e: 'dismiss'): void;\n      /** When the \"Previous\" button in the header is clicked */\n      (e: 'previous'): void;\n      /** When the \"Reset\" button is clicked while viewing a filter group */\n      (e: 'reset-group'): void;\n      /** When one of the \"Reset All\" buttons is clicked */\n      (e: 'reset-all'): void;\n    }>();\n\n  const slots = defineSlots<DataViewFiltersSlots>();\n\n  const isDesktop = useMediaQuery(`(min-width: ${SCREEN_SIZES.lg})`);\n\n  const {\n    density,\n    isLoading: isDataViewLoading,\n    isWithinModule,\n    currentSearch,\n    updateCurrentSearch,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  provide(DATA_VIEW_FILTERS_UTILS_INJECTION.key, { useFiltersInstance: props.useFiltersInstance, drawerStyle: props.drawerStyle});\n\n  const totalActiveFiltersCount = computed(() => props.useFiltersInstance?.totalActiveFiltersCount.value ?? 0);\n  const activeGroupActiveFiltersCount = computed(\n    () => props.useFiltersInstance?.activeFiltersCounts.value[props.activeGroup] ?? 0,\n  );\n  const isDrawerOpen = ref(false);\n\n  async function handleApplyClick() {\n    const { preventDismiss } = (await props.onApply?.()) || props.useFiltersInstance?.applyFilters() || {};\n\n    if (!preventDismiss) {\n      isDrawerOpen.value = false;\n    }\n  }\n\n  function handleResetGroupClick() {\n    props.useFiltersInstance?.resetFilterGroup(props.activeGroup);\n    emit('reset-group');\n    isDrawerOpen.value = false;\n  }\n\n  function handleResetAllClick() {\n    props.useFiltersInstance?.resetAllFilters();\n    emit('reset-all');\n    isDrawerOpen.value = false;\n  }\n\n  function onDismiss() {\n    props.useFiltersInstance?.undoWorkingFilters();\n    isDrawerOpen.value = false;\n    emit('dismiss');\n  }\n\n  watch(isDrawerOpen, () => {\n    if (isDrawerOpen.value) {\n      emit('open-drawer');\n    }\n  });\n</script>\n\n<template>\n  <Box\n    class=\"stash-data-view-filters tw-grid tw-grid-cols-12 tw-p-3 tw-gap-6\"\n    :class=\"{ 'lg:tw-p-6': density === 'comfortable', 'tw-mb-3': !isWithinModule }\"\n    :radius=\"isWithinModule ? 'none' : 'rounded'\"\n    data-test=\"stash-data-view-filters\"\n    disable-padding\n  >\n    <SearchBar\n      v-if=\"props.showSearch\"\n      class=\"tw-col-span-12 md:tw-col-span-6 lg:tw-col-span-4\"\n      data-test=\"stash-data-view-filters|search-bar\"\n      :is-loading=\"isDataViewLoading\"\n      :label=\"t('ll.search')\"\n      :model-value=\"currentSearch\"\n      v-bind=\"props.searchBarProps\"\n      @search=\"(searchTerm) => updateCurrentSearch(searchTerm, { shouldEmit: true })\"\n    />\n    <div\n      v-if=\"slots.default\"\n      class=\"tw-col-span-12 tw-row-start-2 md:tw-row-start-1 md:tw-col-start-7 lg:tw-col-start-5 lg:tw-col-span-8\"\n    >\n      <div class=\"tw-hidden md:tw-block\">\n        <slot name=\"filters-label\">\n          <Label>{{ props.filtersLabelText }}</Label>\n        </slot>\n      </div>\n      <div class=\"tw-flex tw-gap-4\">\n        <FilterChip\n          secondary\n          class=\"!tw-flex tw-w-full tw-justify-center tw-gap-4 md:!tw-inline-flex md:tw-w-auto\"\n          data-test=\"stash-data-view-filters|drawer-toggle-button\"\n          :filter-count=\"totalActiveFiltersCount\"\n          @click=\"isDrawerOpen = true\"\n        >\n          <span class=\"tw-inline-flex tw-items-center tw-gap-3\">\n            <Icon name=\"filter-line\" class=\"tw-text-ice-700\" />\n            <span>{{ t('ll.filters') }}</span>\n          </span>\n        </FilterChip>\n        <slot v-if=\"isDesktop\"></slot>\n        <Button v-if=\"totalActiveFiltersCount > 0 && isDesktop\" inline @click=\"handleResetAllClick\">\n          {{ t('ll.resetAll') }}\n        </Button>\n      </div>\n    </div>\n    <Modal\n      v-if=\"slots.drawer\"\n      data-test=\"stash-data-view-filters|drawer\"\n      disable-body-padding\n      position=\"right\"\n      :is-open=\"isDrawerOpen\"\n      :title=\"t('ll.allFilters')\"\n      v-bind=\"props.drawerProps\"\n      @dismiss=\"onDismiss\"\n    >\n      <template #headerAction>\n        <Button\n          v-if=\"props.showDrawerPreviousButton\"\n          icon\n          class=\"tw-text-ice-100\"\n          data-test=\"stash-data-view-filters|drawer-previous-button\"\n          :aria-label=\"t('ll.previous')\"\n          :title=\"t('ll.previous')\"\n          @click=\"emit('previous')\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n      </template>\n\n      <slot name=\"drawer\"></slot>\n\n      <template #footer>\n        <div class=\"tw-flex tw-flex-col-reverse lg:tw-flex-row lg:tw-justify-end tw-gap-gutter\">\n          <Button\n            v-if=\"!props.showDrawerPreviousButton && totalActiveFiltersCount > 0\"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetAllClick\"\n          >\n            {{ t('ll.resetAll') }}\n          </Button>\n          <Button\n            v-if=\"\n              (props.showDrawerPreviousButton || props.drawerStyle === 'cascade') && activeGroupActiveFiltersCount > 0\n            \"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetGroupClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button\n            v-if=\"props.showDrawerPreviousButton || props.drawerStyle === 'cascade'\"\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleApplyClick\"\n          >\n            {{ t('ll.apply') }}\n          </Button>\n        </div>\n      </template>\n    </Modal>\n  </Box>\n</template>\n"],"names":["useFilters","schema","dataViewRef","appliedFilters","ref","workingFilters","filterName","dvRef","applyFilters","cloneDeep","resetAllFilters","resetFilterGroup","group","undoWorkingFilters","activeFiltersCounts","computed","counts","config","value","_a","isDefined","totalActiveFiltersCount","count","slots","_useSlots","isDesktop","useMediaQuery","SCREEN_SIZES","density","isDataViewLoading","isWithinModule","currentSearch","updateCurrentSearch","inject","DATA_VIEW_INJECTION","provide","DATA_VIEW_FILTERS_UTILS_INJECTION","props","activeGroupActiveFiltersCount","isDrawerOpen","handleApplyClick","preventDismiss","_b","handleResetGroupClick","emit","handleResetAllClick","onDismiss","watch"],"mappings":"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"}
+{"version":3,"file":"DataViewFilters.js","sources":["../src/components/DataViewFilters/useFilters.ts","../src/components/DataViewFilters/DataViewFilters.vue"],"sourcesContent":["import cloneDeep from 'lodash-es/cloneDeep';\nimport { computed, ComputedRef, Ref, ref } from 'vue';\n\nimport isDefined from '../../composables/useValidation/utils/isDefined';\nimport DataView from '../DataView/DataView.vue';\n\ntype DataViewInstance = InstanceType<typeof DataView>;\n\n/**\n * Contains metadata and configuration for the filters.\n * @see https://www.typescriptlang.org/docs/handbook/2/mapped-types.html\n */\nexport type UseFiltersSchema<Values extends object, Groups extends string> = {\n  [Property in keyof Values]: {\n    defaultValue?: Values[Property];\n    group?: Groups;\n    isActive?: (value: Values[Property]) => boolean;\n  };\n};\n\nexport interface UseFiltersArgs<Values extends object, Groups extends string> {\n  schema: UseFiltersSchema<Values, Groups>;\n  /** A ref for an instance of DataView */\n  dataViewRef: Ref<unknown>; // Note: using `Ref<InstanceType<typeof DataView>>` here causes type errors when providing a value for this argument\n}\n\nexport interface UseFiltersReturnType<Values = object, Groups extends string = string> {\n  applyFilters: () => void;\n  resetAllFilters: () => void;\n  resetFilterGroup: (group: string) => void; // Note: group is intentionally not typed as `Groups` since there is no way to pass in a Groups type to UseFiltersReturnType within DataViewFilters.vue\n  undoWorkingFilters: () => void;\n  activeFiltersCounts: ComputedRef<Record<Groups, number>>;\n  totalActiveFiltersCount: ComputedRef<number>;\n  appliedFilters: Ref<Values>;\n  workingFilters: Ref<Values>;\n}\n\n/**\n * Provides utility functions for working with `DataViewFilters`.\n */\nexport function useFilters<Values extends object, Groups extends string>({\n  schema,\n  dataViewRef,\n}: UseFiltersArgs<Values, Groups>): UseFiltersReturnType<Values, Groups> {\n  const appliedFilters = ref({}) as Ref<Values>;\n  const workingFilters = ref({}) as Ref<Values>;\n\n  for (const filterName in schema) {\n    // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n    appliedFilters.value[filterName] = schema[filterName].defaultValue;\n    // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n    workingFilters.value[filterName] = schema[filterName].defaultValue;\n  }\n\n  const dvRef = dataViewRef as Ref<DataViewInstance>;\n\n  /**\n   * For when an \"Apply\" button is clicked. It does the following:\n   *   1) applies the working filter state\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function applyFilters() {\n    appliedFilters.value = cloneDeep(workingFilters.value);\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * For when a \"Reset all\" button is clicked. It does the following:\n   *   1) applies the defaultValue filter values to all filters\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function resetAllFilters() {\n    for (const filterName in schema) {\n      // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n      appliedFilters.value[filterName] = schema[filterName].defaultValue;\n      // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n      workingFilters.value[filterName] = schema[filterName].defaultValue;\n    }\n\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * For when a \"Reset\" button is clicked. It does the following:\n   *   1) applies the defaultValue filter values to the given filter group\n   *   2) sets the current page to 1\n   *   3) emits the \"update\" event from DataView\n   */\n  function resetFilterGroup(group: Groups) {\n    for (const filterName in schema) {\n      if (schema[filterName].group === group) {\n        // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n        appliedFilters.value[filterName] = schema[filterName].defaultValue;\n        // @ts-expect-error \"could be instantiated with an arbitrary type\"; TODO: figure out how to resolve the types\n        workingFilters.value[filterName] = schema[filterName].defaultValue;\n      }\n    }\n\n    dvRef.value.updateCurrentFilters(appliedFilters.value, { shouldEmit: true });\n  }\n\n  /**\n   * Resets the `workingFilters` to match the `appliedFilters`. This can be used when the FilterDrawer or a FilterDropdown is dismissed without clicking \"Reset\" or \"Apply\".\n   */\n  function undoWorkingFilters() {\n    workingFilters.value = cloneDeep(appliedFilters.value);\n  }\n\n  const activeFiltersCounts = computed(() => {\n    const counts = {} as Record<Groups, number>;\n\n    for (const filterName in schema) {\n      const config = schema[filterName];\n      const value = appliedFilters.value[filterName];\n      const isActive = config.isActive?.(value) || isDefined(value);\n\n      if (isActive && config.group) {\n        counts[config.group] = (counts[config.group] ?? 0) + 1;\n      }\n    }\n\n    return counts;\n  });\n\n  const totalActiveFiltersCount = computed(() => {\n    let count = 0;\n\n    for (const filterName in schema) {\n      const config = schema[filterName];\n      const value = appliedFilters.value[filterName];\n      const isActive = config.isActive?.(value) || isDefined(value);\n\n      if (isActive) {\n        count += 1;\n      }\n    }\n\n    return count;\n  });\n\n  return {\n    applyFilters,\n    resetAllFilters,\n    // @ts-expect-error \"could be instantiated with a different subtype\": TODO: figure out how to resolve the types\n    resetFilterGroup,\n    undoWorkingFilters,\n    activeFiltersCounts,\n    totalActiveFiltersCount,\n    appliedFilters,\n    workingFilters,\n  };\n}\n\nexport default useFilters;\n","<script lang=\"ts\">\n  export * from './DataViewFilters.keys';\n  export * from './DataViewFilters.types';\n  export * from './useFilters';\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, ref, watch } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import { SCREEN_SIZES } from '../../constants';\n  import { t } from '../../locale';\n  import Box from '../Box/Box.vue';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import FilterChip from '../FilterChip/FilterChip.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Label from '../Label/Label.vue';\n  import Modal, { type ModalProps } from '../Modal/Modal.vue';\n  import SearchBar, { SearchBarProps } from '../SearchBar/SearchBar.vue';\n  import { DATA_VIEW_FILTERS_UTILS_INJECTION } from './DataViewFilters.keys';\n  import type { DrawerStyle, OnApplyFilters } from './DataViewFilters.types';\n  import type { UseFiltersReturnType } from './useFilters';\n\n  export interface DataViewFiltersProps {\n    filtersLabelText?: string;\n    /**\n     * Props to pass to the `SearchBar` component.\n     */\n    searchBarProps?: SearchBarProps;\n    showSearch?: boolean;\n    /** 'cascade' displays all fields within every filter group; 'nested' displays only the group names and requires clicking a group to view its fields */\n    drawerStyle?: DrawerStyle;\n    drawerProps?: ModalProps;\n    showDrawerPreviousButton?: boolean;\n    /**\n     * Required when using filters. This prop should contain the return value of the `useFilters()` composable.\n     */\n    useFiltersInstance?: UseFiltersReturnType;\n    onApply?: OnApplyFilters;\n    /** The name of the active filter group. The active filter group is determined by which instance of FilterDropdown or FilterDrawerItem is open. */\n    activeGroup?: string;\n  }\n\n  export interface DataViewFiltersSlots {\n    default?: void;\n    drawer?: void;\n    'filters-label'?: void;\n  }\n\n  const props = withDefaults(defineProps<DataViewFiltersProps>(), {\n    filtersLabelText: t('ll.filterBy'),\n    isLoading: false,\n    drawerStyle: 'nested',\n    drawerProps: undefined,\n    searchBarProps: undefined,\n    showDrawerPreviousButton: false,\n    showSearch: true,\n    useFiltersInstance: undefined,\n    onApply: undefined,\n    activeGroup: '',\n  });\n\n  const emit =\n    defineEmits<{\n      /** When the drawer is opened */\n      (e: 'open-drawer'): void;\n      /** When the drawer is dismissed */\n      (e: 'dismiss'): void;\n      /** When the \"Previous\" button in the header is clicked */\n      (e: 'previous'): void;\n      /** When the \"Reset\" button is clicked while viewing a filter group */\n      (e: 'reset-group'): void;\n      /** When one of the \"Reset All\" buttons is clicked */\n      (e: 'reset-all'): void;\n    }>();\n\n  const slots = defineSlots<DataViewFiltersSlots>();\n\n  const isDesktop = useMediaQuery(`(min-width: ${SCREEN_SIZES.lg})`);\n\n  const {\n    density,\n    isLoading: isDataViewLoading,\n    isWithinModule,\n    currentSearch,\n    updateCurrentSearch,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  provide(DATA_VIEW_FILTERS_UTILS_INJECTION.key, { useFiltersInstance: props.useFiltersInstance, drawerStyle: props.drawerStyle});\n\n  const totalActiveFiltersCount = computed(() => props.useFiltersInstance?.totalActiveFiltersCount.value ?? 0);\n  const activeGroupActiveFiltersCount = computed(\n    () => props.useFiltersInstance?.activeFiltersCounts.value[props.activeGroup] ?? 0,\n  );\n  const isDrawerOpen = ref(false);\n\n  async function handleApplyClick() {\n    const { preventDismiss } = (await props.onApply?.()) || props.useFiltersInstance?.applyFilters() || {};\n\n    if (!preventDismiss) {\n      isDrawerOpen.value = false;\n    }\n  }\n\n  function handleResetGroupClick() {\n    props.useFiltersInstance?.resetFilterGroup(props.activeGroup);\n    emit('reset-group');\n    isDrawerOpen.value = false;\n  }\n\n  function handleResetAllClick() {\n    props.useFiltersInstance?.resetAllFilters();\n    emit('reset-all');\n    isDrawerOpen.value = false;\n  }\n\n  function onDismiss() {\n    props.useFiltersInstance?.undoWorkingFilters();\n    isDrawerOpen.value = false;\n    emit('dismiss');\n  }\n\n  watch(isDrawerOpen, () => {\n    if (isDrawerOpen.value) {\n      emit('open-drawer');\n    }\n  });\n</script>\n\n<template>\n  <Box\n    class=\"stash-data-view-filters tw-grid tw-grid-cols-12 tw-gap-6 tw-p-3\"\n    :class=\"{ 'lg:tw-p-6': density === 'comfortable', 'tw-mb-3': !isWithinModule }\"\n    :radius=\"isWithinModule ? 'none' : 'rounded'\"\n    data-test=\"stash-data-view-filters\"\n    disable-padding\n  >\n    <SearchBar\n      v-if=\"props.showSearch\"\n      class=\"tw-col-span-12 md:tw-col-span-6 lg:tw-col-span-4\"\n      data-test=\"stash-data-view-filters|search-bar\"\n      :is-loading=\"isDataViewLoading\"\n      :label=\"t('ll.search')\"\n      :model-value=\"currentSearch\"\n      v-bind=\"props.searchBarProps\"\n      @search=\"(searchTerm) => updateCurrentSearch(searchTerm, { shouldEmit: true })\"\n    />\n    <div\n      v-if=\"slots.default\"\n      class=\"tw-col-span-12 tw-row-start-2 md:tw-col-start-7 md:tw-row-start-1 lg:tw-col-span-8 lg:tw-col-start-5\"\n    >\n      <div class=\"tw-hidden md:tw-block\">\n        <slot name=\"filters-label\">\n          <Label>{{ props.filtersLabelText }}</Label>\n        </slot>\n      </div>\n      <div class=\"tw-flex tw-gap-4\">\n        <FilterChip\n          secondary\n          class=\"!tw-flex tw-w-full tw-justify-center tw-gap-4 md:!tw-inline-flex md:tw-w-auto\"\n          data-test=\"stash-data-view-filters|drawer-toggle-button\"\n          :filter-count=\"totalActiveFiltersCount\"\n          @click=\"isDrawerOpen = true\"\n        >\n          <span class=\"tw-inline-flex tw-items-center tw-gap-3\">\n            <Icon name=\"filter-line\" class=\"tw-text-ice-700\" />\n            <span>{{ t('ll.filters') }}</span>\n          </span>\n        </FilterChip>\n        <slot v-if=\"isDesktop\"></slot>\n        <Button v-if=\"totalActiveFiltersCount > 0 && isDesktop\" inline @click=\"handleResetAllClick\">\n          {{ t('ll.resetAll') }}\n        </Button>\n      </div>\n    </div>\n    <Modal\n      v-if=\"slots.drawer\"\n      data-test=\"stash-data-view-filters|drawer\"\n      disable-body-padding\n      position=\"right\"\n      :is-open=\"isDrawerOpen\"\n      :title=\"t('ll.allFilters')\"\n      v-bind=\"props.drawerProps\"\n      @dismiss=\"onDismiss\"\n    >\n      <template #headerAction>\n        <Button\n          v-if=\"props.showDrawerPreviousButton\"\n          icon\n          class=\"tw-text-ice-100\"\n          data-test=\"stash-data-view-filters|drawer-previous-button\"\n          :aria-label=\"t('ll.previous')\"\n          :title=\"t('ll.previous')\"\n          @click=\"emit('previous')\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n      </template>\n\n      <slot name=\"drawer\"></slot>\n\n      <template #footer>\n        <div class=\"tw-flex tw-flex-col-reverse tw-gap-gutter lg:tw-flex-row lg:tw-justify-end\">\n          <Button\n            v-if=\"!props.showDrawerPreviousButton && totalActiveFiltersCount > 0\"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetAllClick\"\n          >\n            {{ t('ll.resetAll') }}\n          </Button>\n          <Button\n            v-if=\"\n              (props.showDrawerPreviousButton || props.drawerStyle === 'cascade') && activeGroupActiveFiltersCount > 0\n            \"\n            secondary\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleResetGroupClick\"\n          >\n            {{ t('ll.reset') }}\n          </Button>\n          <Button\n            v-if=\"props.showDrawerPreviousButton || props.drawerStyle === 'cascade'\"\n            :disabled=\"isDataViewLoading\"\n            @click=\"handleApplyClick\"\n          >\n            {{ t('ll.apply') }}\n          </Button>\n        </div>\n      </template>\n    </Modal>\n  </Box>\n</template>\n"],"names":["useFilters","schema","dataViewRef","appliedFilters","ref","workingFilters","filterName","dvRef","applyFilters","cloneDeep","resetAllFilters","resetFilterGroup","group","undoWorkingFilters","activeFiltersCounts","computed","counts","config","value","_a","isDefined","totalActiveFiltersCount","count","slots","_useSlots","isDesktop","useMediaQuery","SCREEN_SIZES","density","isDataViewLoading","isWithinModule","currentSearch","updateCurrentSearch","inject","DATA_VIEW_INJECTION","provide","DATA_VIEW_FILTERS_UTILS_INJECTION","props","activeGroupActiveFiltersCount","isDrawerOpen","handleApplyClick","preventDismiss","_b","handleResetGroupClick","emit","handleResetAllClick","onDismiss","watch"],"mappings":"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"}

package/dist/DataViewSortButton.js

@@ -3,13 +3,13 @@ import { t as S } from "./locale.js";
 import u from "./Button.js";
 import "lodash-es/cloneDeep";
 import h from "./Icon.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js";
 import { D as b } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import V from "./Dropdown.js";
 import v from "./IconLabel.js";
 import { _ as B } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
@@ -79,7 +79,7 @@ const I = {
                   t.id === e(a) && e(s) === "asc" ? (r(), n(h, {
                     key: 0,
                     name: "check",
-                    class: "tw-text-blue-500 tw-ml-auto"
+                    class: "tw-ml-auto tw-text-blue-500"
                   })) : m("", !0)
                 ]),
                 _: 2
@@ -98,7 +98,7 @@ const I = {
                   t.id === e(a) && e(s) === "desc" ? (r(), n(h, {
                     key: 0,
                     name: "check",
-                    class: "tw-text-blue-500 tw-ml-auto"
+                    class: "tw-ml-auto tw-text-blue-500"
                   })) : m("", !0)
                 ]),
                 _: 2
@@ -111,7 +111,7 @@ const I = {
     })) : m("", !0);
   }
 });
-const rt = /* @__PURE__ */ B(A, [["__scopeId", "data-v-e33a9680"]]);
+const rt = /* @__PURE__ */ B(A, [["__scopeId", "data-v-a7f74e2e"]]);
 export {
   rt as default
 };

package/dist/DataViewSortButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewSortButton.js","sources":["../src/components/DataViewSortButton/DataViewSortButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { inject } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import IconLabel from '../IconLabel/IconLabel.vue';\n  import { SortOption } from './DataViewSortButton.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * An array of sort options to display in the dropdown.\n     */\n    sortOptions?: SortOption[];\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    sortOptions: () => [],\n  });\n\n  const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n    DATA_VIEW_INJECTION.key,\n    DATA_VIEW_INJECTION.defaults,\n  );\n</script>\n\n<template>\n  <Dropdown\n    v-if=\"props.sortOptions.length\"\n    align=\"left\"\n    class=\"stash-data-view-sort-button\"\n    data-test=\"stash-data-view-sort-button\"\n  >\n    <template #toggle=\"{ isActive, toggle }\">\n      <Button\n        icon-label\n        :aria-expanded=\"isActive.toString()\"\n        class=\"tw-text-blue-500\"\n        data-test=\"stash-data-view-sort-button|sort-menu-button\"\n        @click=\"toggle\"\n      >\n        <IconLabel icon=\"sort\" stacked>\n          {{ t('ll.sort') }}\n        </IconLabel>\n      </Button>\n    </template>\n    <ul class=\"dropdown__list\" data-test=\"stash-data-view-sort-button|sort-menu\">\n      <template v-for=\"sortOption in props.sortOptions\" :key=\"sortOption.id\">\n        <li\n          class=\"dropdown__item rounded\"\n          :class=\"{ 'is-selected': sortOption.id === currentSortId && currentSortOrder === 'asc' }\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'asc', shouldEmit: true })\"\n        >\n          <Button inline class=\"tw-h-9\">\n            {{ sortOption.labelAsc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'asc'\"\n              name=\"check\"\n              class=\"tw-text-blue-500 tw-ml-auto\"\n            />\n          </Button>\n        </li>\n        <li\n          class=\"dropdown__item rounded\"\n          :class=\"{ 'is-selected': sortOption.id === currentSortId && currentSortOrder === 'desc' }\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'desc', shouldEmit: true })\"\n        >\n          <Button inline class=\"tw-h-9\">\n            {{ sortOption.labelDesc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'desc'\"\n              name=\"check\"\n              class=\"tw-text-blue-500 tw-ml-auto\"\n            />\n          </Button>\n        </li>\n      </template>\n    </ul>\n  </Dropdown>\n</template>\n\n<style scoped>\n  .dropdown__item > button {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n</style>\n"],"names":["currentSortId","currentSortOrder","updateCurrentSort","inject","DATA_VIEW_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAsBQ,EAAE,eAAAA,GAAe,kBAAAC,GAAkB,mBAAAC,EAAsB,IAAAC;AAAA,MAC7DC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DataViewSortButton.js","sources":["../src/components/DataViewSortButton/DataViewSortButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { inject } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import IconLabel from '../IconLabel/IconLabel.vue';\n  import { SortOption } from './DataViewSortButton.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * An array of sort options to display in the dropdown.\n     */\n    sortOptions?: SortOption[];\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    sortOptions: () => [],\n  });\n\n  const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n    DATA_VIEW_INJECTION.key,\n    DATA_VIEW_INJECTION.defaults,\n  );\n</script>\n\n<template>\n  <Dropdown\n    v-if=\"props.sortOptions.length\"\n    align=\"left\"\n    class=\"stash-data-view-sort-button\"\n    data-test=\"stash-data-view-sort-button\"\n  >\n    <template #toggle=\"{ isActive, toggle }\">\n      <Button\n        icon-label\n        :aria-expanded=\"isActive.toString()\"\n        class=\"tw-text-blue-500\"\n        data-test=\"stash-data-view-sort-button|sort-menu-button\"\n        @click=\"toggle\"\n      >\n        <IconLabel icon=\"sort\" stacked>\n          {{ t('ll.sort') }}\n        </IconLabel>\n      </Button>\n    </template>\n    <ul class=\"dropdown__list\" data-test=\"stash-data-view-sort-button|sort-menu\">\n      <template v-for=\"sortOption in props.sortOptions\" :key=\"sortOption.id\">\n        <li\n          class=\"dropdown__item rounded\"\n          :class=\"{ 'is-selected': sortOption.id === currentSortId && currentSortOrder === 'asc' }\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'asc', shouldEmit: true })\"\n        >\n          <Button inline class=\"tw-h-9\">\n            {{ sortOption.labelAsc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'asc'\"\n              name=\"check\"\n              class=\"tw-ml-auto tw-text-blue-500\"\n            />\n          </Button>\n        </li>\n        <li\n          class=\"dropdown__item rounded\"\n          :class=\"{ 'is-selected': sortOption.id === currentSortId && currentSortOrder === 'desc' }\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'desc', shouldEmit: true })\"\n        >\n          <Button inline class=\"tw-h-9\">\n            {{ sortOption.labelDesc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'desc'\"\n              name=\"check\"\n              class=\"tw-ml-auto tw-text-blue-500\"\n            />\n          </Button>\n        </li>\n      </template>\n    </ul>\n  </Dropdown>\n</template>\n\n<style scoped>\n  .dropdown__item > button {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n</style>\n"],"names":["currentSortId","currentSortOrder","updateCurrentSort","inject","DATA_VIEW_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAsBQ,EAAE,eAAAA,GAAe,kBAAAC,GAAkB,mBAAAC,EAAsB,IAAAC;AAAA,MAC7DC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DataViewToolbar.js

@@ -3,11 +3,11 @@ import { t as z } from "./locale.js";
 import h from "./Button.js";
 import "lodash-es/cloneDeep";
 import x from "./Icon.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js";
 import { D as y } from "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import { _ as j } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
@@ -16,7 +16,7 @@ const A = {
   class: "tw-flex tw-items-center"
 }, W = {
   key: 0,
-  class: "tw-text-xs tw-mr-1.5"
+  class: "tw-mr-1.5 tw-text-xs"
 }, F = /* @__PURE__ */ D({
   __name: "DataViewToolbar",
   props: {
@@ -40,7 +40,7 @@ const A = {
       return z("ll.pageStats", { from: l, to: e, total: i });
     });
     return (l, e) => (a(), s("div", {
-      class: g(["stash-data-view-toolbar tw-flex tw-justify-between tw-items-center tw-bg-white tw-py-1.5 tw-min-h-[3.75rem]", {
+      class: g(["stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5", {
         "tw-border-t tw-border-ice-200": t(n),
         "tw-rounded": v.value === "rounded",
         "tw-rounded-t": v.value === "rounded-top",

package/dist/DataViewToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { ToolbarRadiuses } from './DataViewToolbar.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * Hides the page statistics (ex: \"1 - 12 of 20\") in the toolbar\n     */\n    hidePageStats?: boolean;\n\n    /**\n     * Controls the corners of DataViewToolbar with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: ToolbarRadiuses;\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    hidePageStats: false,\n    radius: 'rounded',\n  });\n  const classes = useCssModule();\n\n  const {\n    isWithinModule,\n    variant: dataViewVariant,\n    density,\n    currentPage,\n    isPaginationEnabled,\n    pageCount,\n    pageSize,\n    totalDataCount,\n    goPrevPage,\n    goNextPage,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const computedRadius = computed<ToolbarRadiuses>(() => {\n    if (isWithinModule.value) {\n      return 'none';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-top';\n    }\n\n    return props.radius;\n  });\n\n  // #region pagination\n  const pageStats = computed(() => {\n    const from = pageSize.value * (currentPage.value - 1) + 1;\n    const to = Math.min(pageSize.value * currentPage.value, totalDataCount.value);\n    const total = totalDataCount.value;\n\n    return t('ll.pageStats', { from, to, total });\n  });\n  // #endregion pagination\n</script>\n\n<template>\n  <div\n    class=\"stash-data-view-toolbar tw-flex tw-justify-between tw-items-center tw-bg-white tw-py-1.5 tw-min-h-[3.75rem]\"\n    :class=\"{\n      'tw-border-t tw-border-ice-200': isWithinModule,\n      'tw-rounded': computedRadius === 'rounded',\n      'tw-rounded-t': computedRadius === 'rounded-top',\n      'tw-mb-3': dataViewVariant !== 'table' && !isWithinModule,\n      'tw-px-0': density === 'compact',\n      'lg:tw-px-3': density === 'comfortable',\n    }\"\n    data-test=\"stash-data-view-toolbar\"\n  >\n    <div class=\"tw-flex tw-items-center\" :class=\"classes['default-slot']\">\n      <!-- @slot default -->\n      <slot></slot>\n    </div>\n\n    <!-- Pagination -->\n    <div v-if=\"isPaginationEnabled\" class=\"tw-flex tw-items-center\">\n      <span v-if=\"!props.hidePageStats\" class=\"tw-text-xs tw-mr-1.5\">\n        {{ pageStats }}\n      </span>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|prev-page\"\n          :disabled=\"currentPage === 1\"\n          @click=\"goPrevPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|next-page\"\n          :disabled=\"currentPage === pageCount\"\n          @click=\"goNextPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-right\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style module>\n  .default-slot > *:not(:last-of-type) {\n    margin-right: 0.5rem;\n  }\n</style>\n"],"names":["classes","useCssModule","isWithinModule","dataViewVariant","density","currentPage","isPaginationEnabled","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","inject","DATA_VIEW_INJECTION","computedRadius","computed","props","pageStats","from","to","total","t"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;iBAyBQA,IAAUC,KAEV;AAAA,MACJ,gBAAAC;AAAA,MACA,SAASC;AAAA,MACT,SAAAC;AAAA,MACA,aAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,IACE,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1DC,IAAiBC,EAA0B,MAC3Cb,EAAe,QACV,SAGLC,EAAgB,UAAU,UACrB,gBAGFa,EAAM,MACd,GAGKC,IAAYF,EAAS,MAAM;AAC/B,YAAMG,IAAOV,EAAS,SAASH,EAAY,QAAQ,KAAK,GAClDc,IAAK,KAAK,IAAIX,EAAS,QAAQH,EAAY,OAAOI,EAAe,KAAK,GACtEW,IAAQX,EAAe;AAE7B,aAAOY,EAAE,gBAAgB,EAAE,MAAAH,GAAM,IAAAC,GAAI,OAAAC,GAAO;AAAA,IAAA,CAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { ToolbarRadiuses } from './DataViewToolbar.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * Hides the page statistics (ex: \"1 - 12 of 20\") in the toolbar\n     */\n    hidePageStats?: boolean;\n\n    /**\n     * Controls the corners of DataViewToolbar with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: ToolbarRadiuses;\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    hidePageStats: false,\n    radius: 'rounded',\n  });\n  const classes = useCssModule();\n\n  const {\n    isWithinModule,\n    variant: dataViewVariant,\n    density,\n    currentPage,\n    isPaginationEnabled,\n    pageCount,\n    pageSize,\n    totalDataCount,\n    goPrevPage,\n    goNextPage,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const computedRadius = computed<ToolbarRadiuses>(() => {\n    if (isWithinModule.value) {\n      return 'none';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-top';\n    }\n\n    return props.radius;\n  });\n\n  // #region pagination\n  const pageStats = computed(() => {\n    const from = pageSize.value * (currentPage.value - 1) + 1;\n    const to = Math.min(pageSize.value * currentPage.value, totalDataCount.value);\n    const total = totalDataCount.value;\n\n    return t('ll.pageStats', { from, to, total });\n  });\n  // #endregion pagination\n</script>\n\n<template>\n  <div\n    class=\"stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5\"\n    :class=\"{\n      'tw-border-t tw-border-ice-200': isWithinModule,\n      'tw-rounded': computedRadius === 'rounded',\n      'tw-rounded-t': computedRadius === 'rounded-top',\n      'tw-mb-3': dataViewVariant !== 'table' && !isWithinModule,\n      'tw-px-0': density === 'compact',\n      'lg:tw-px-3': density === 'comfortable',\n    }\"\n    data-test=\"stash-data-view-toolbar\"\n  >\n    <div class=\"tw-flex tw-items-center\" :class=\"classes['default-slot']\">\n      <!-- @slot default -->\n      <slot></slot>\n    </div>\n\n    <!-- Pagination -->\n    <div v-if=\"isPaginationEnabled\" class=\"tw-flex tw-items-center\">\n      <span v-if=\"!props.hidePageStats\" class=\"tw-mr-1.5 tw-text-xs\">\n        {{ pageStats }}\n      </span>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|prev-page\"\n          :disabled=\"currentPage === 1\"\n          @click=\"goPrevPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|next-page\"\n          :disabled=\"currentPage === pageCount\"\n          @click=\"goNextPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-right\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style module>\n  .default-slot > *:not(:last-of-type) {\n    margin-right: 0.5rem;\n  }\n</style>\n"],"names":["classes","useCssModule","isWithinModule","dataViewVariant","density","currentPage","isPaginationEnabled","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","inject","DATA_VIEW_INJECTION","computedRadius","computed","props","pageStats","from","to","total","t"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;iBAyBQA,IAAUC,KAEV;AAAA,MACJ,gBAAAC;AAAA,MACA,SAASC;AAAA,MACT,SAAAC;AAAA,MACA,aAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,IACE,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1DC,IAAiBC,EAA0B,MAC3Cb,EAAe,QACV,SAGLC,EAAgB,UAAU,UACrB,gBAGFa,EAAM,MACd,GAGKC,IAAYF,EAAS,MAAM;AAC/B,YAAMG,IAAOV,EAAS,SAASH,EAAY,QAAQ,KAAK,GAClDc,IAAK,KAAK,IAAIX,EAAS,QAAQH,EAAY,OAAOI,EAAe,KAAK,GACtEW,IAAQX,EAAe;AAE7B,aAAOY,EAAE,gBAAgB,EAAE,MAAAH,GAAM,IAAAC,GAAI,OAAAC,GAAO;AAAA,IAAA,CAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DatePicker.js

@@ -15,13 +15,13 @@ import { _ as Bf } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
 import "./toTimeZone-e6e9ab75.js";
 import "./_commonjsHelpers-10dfc225.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "lodash-es/isNil";
 import "./utils/i18n.js";
-import "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
-import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-42cf79d4.js";
+import "./Label.vue_vue_type_script_setup_true_lang-c5589919.js";
 function Uf(e, t) {
   he(2, arguments);
   var r = ge(e).getTime(), n = je(t);
@@ -11628,12 +11628,12 @@ const cY = /* @__PURE__ */ bt(sY, [["render", lY]]), fY = ["id"], dY = { class:
       }, 8, ["available-dates", "disabled-dates", "max-date", "min-date", "max-page", "min-page", "mode", "model-value", "popover", "hide-time-header"])
     ], 2));
   }
-}), pY = "_input_1f5vg_294", yY = {
-  "vc-overrides": "_vc-overrides_1f5vg_176",
-  "close-button": "_close-button_1f5vg_271",
-  "button-today": "_button-today_1f5vg_277",
+}), pY = "_input_1p4vg_294", yY = {
+  "vc-overrides": "_vc-overrides_1p4vg_176",
+  "close-button": "_close-button_1p4vg_271",
+  "button-today": "_button-today_1p4vg_277",
   input: pY,
-  "calendar-icon": "_calendar-icon_1f5vg_300"
+  "calendar-icon": "_calendar-icon_1p4vg_300"
 }, hY = {
   $style: yY
 }, FY = /* @__PURE__ */ Bf(vY, [["__cssModules", hY]]);