@leaflink/stash 43.5.1 → 44.0.0-beta.2

package/dist/ActionsDropdown.js

@@ -5,7 +5,7 @@ import x from "./Dropdown.js";
 import B from "./Icon.js";
 import { _ as D } 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 "./constants.js";
 import "./clickoutside.js";
 import "./utils/calculateElementOverflow.js";
@@ -27,7 +27,7 @@ const y = /* @__PURE__ */ c({
   },
   setup(l) {
     const o = l, t = p();
-    return (d, A) => (m(), u(x, {
+    return (d, N) => (m(), u(x, {
       align: o.align,
       "content-class": [n(t).dropdownContent, o.contentClass],
       class: s(n(t).actionsDropdown)
@@ -61,14 +61,14 @@ const y = /* @__PURE__ */ c({
       }
     ]), 1032, ["align", "content-class", "class"]));
   }
-}), k = "_actionButton_vmot1_2", v = "_disabled_vmot1_12", S = "_dropdownContent_vmot1_18", M = "_actionsDropdown_vmot1_33", T = {
+}), k = "_actionButton_184sp_2", S = "_disabled_184sp_12", M = "_dropdownContent_184sp_18", T = "_actionsDropdown_184sp_33", h = {
   actionButton: k,
-  disabled: v,
-  dropdownContent: S,
-  actionsDropdown: M
-}, h = {
-  $style: T
-}, U = /* @__PURE__ */ D(y, [["__cssModules", h]]);
+  disabled: S,
+  dropdownContent: M,
+  actionsDropdown: T
+}, A = {
+  $style: h
+}, U = /* @__PURE__ */ D(y, [["__cssModules", A]]);
 export {
   U as default
 };

package/dist/ActionsDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsDropdown.js","sources":["../src/components/ActionsDropdown/ActionsDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-actions-dropdown',\n  });\n\n  export interface ActionsDropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * Indicates whether the trigger button is disabled or not\n     */\n    disabled?: boolean;\n    /**\n     * Class to be applied to the dropdown content\n     */\n    contentClass?: string;\n    /**\n     * Text to be displayed on the trigger button\n     */\n    buttonText?: string;\n  }\n\n  const props = withDefaults(defineProps<ActionsDropdownProps>(), {\n    align: 'left',\n    disabled: false,\n    contentClass: '',\n    buttonText: () => t('ll.actions'),\n  });\n\n  const classes = useCssModule();\n</script>\n\n<template>\n  <Dropdown\n    :align=\"props.align\"\n    :content-class=\"[classes.dropdownContent, props.contentClass]\"\n    :class=\"classes.actionsDropdown\"\n  >\n    <template #toggle=\"{ isActive, toggle }\">\n      <Button\n        class=\"button flex align-middle align-justify w-full border border-blue text-blue\"\n        secondary\n        :aria-expanded=\"isActive.toString()\"\n        :class=\"[classes.actionButton, { [classes.disabled]: props.disabled }]\"\n        :disabled=\"props.disabled\"\n        @click=\"toggle\"\n      >\n        {{ props.buttonText }} <Icon class=\"tw-ml-1.5\" name=\"caret-down\" />\n      </Button>\n    </template>\n\n    <template v-if=\"!props.disabled\" #default>\n      <!-- @slot Dropdown content -->\n      <slot></slot>\n    </template>\n  </Dropdown>\n</template>\n\n<style module>\n  .actionButton {\n    min-width: 156px;\n    white-space: normal;\n  }\n\n  .actionButton:hover {\n    background-color: var(--color-blue-100);\n    border-color: var(--color-blue) !important;\n  }\n\n  .disabled {\n    background-color: var(--color-ice-100) !important;\n    border-color: var(--color-ice-500) !important;\n    color: var(--color-ice-500) !important;\n  }\n\n  .dropdownContent {\n    margin-top: 4px;\n  }\n\n  .dropdownContent:global(.dropdown__content) {\n    margin-left: 0;\n    margin-right: 0;\n    max-width: 90vw;\n  }\n\n  .dropdownContent:global(.dropdown__content)::after {\n    display: none;\n  }\n\n  @media screen(md) {\n    .actionsDropdown {\n      min-width: 156px;\n    }\n\n    .dropdownContent:global(.dropdown__content) {\n      min-width: 156px;\n    }\n  }\n</style>\n"],"names":["classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuCQA,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ActionsDropdown.js","sources":["../src/components/ActionsDropdown/ActionsDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-actions-dropdown',\n  });\n\n  export interface ActionsDropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * Indicates whether the trigger button is disabled or not\n     */\n    disabled?: boolean;\n    /**\n     * Class to be applied to the dropdown content\n     */\n    contentClass?: string;\n    /**\n     * Text to be displayed on the trigger button\n     */\n    buttonText?: string;\n  }\n\n  const props = withDefaults(defineProps<ActionsDropdownProps>(), {\n    align: 'left',\n    disabled: false,\n    contentClass: '',\n    buttonText: () => t('ll.actions'),\n  });\n\n  const classes = useCssModule();\n</script>\n\n<template>\n  <Dropdown\n    :align=\"props.align\"\n    :content-class=\"[classes.dropdownContent, props.contentClass]\"\n    :class=\"classes.actionsDropdown\"\n  >\n    <template #toggle=\"{ isActive, toggle }\">\n      <Button\n        class=\"button flex align-middle align-justify w-full border border-blue text-blue\"\n        secondary\n        :aria-expanded=\"isActive.toString()\"\n        :class=\"[classes.actionButton, { [classes.disabled]: props.disabled }]\"\n        :disabled=\"props.disabled\"\n        @click=\"toggle\"\n      >\n        {{ props.buttonText }} <Icon class=\"tw-ml-1.5\" name=\"caret-down\" />\n      </Button>\n    </template>\n\n    <template v-if=\"!props.disabled\" #default>\n      <!-- @slot Dropdown content -->\n      <slot></slot>\n    </template>\n  </Dropdown>\n</template>\n\n<style module>\n  .actionButton {\n    min-width: 156px;\n    white-space: normal;\n  }\n\n  .actionButton:hover {\n    background-color: var(--color-blue-100);\n    border-color: var(--color-blue-500) !important;\n  }\n\n  .disabled {\n    background-color: var(--color-ice-100) !important;\n    border-color: var(--color-ice-500) !important;\n    color: var(--color-ice-500) !important;\n  }\n\n  .dropdownContent {\n    margin-top: 4px;\n  }\n\n  .dropdownContent:global(.dropdown__content) {\n    margin-left: 0;\n    margin-right: 0;\n    max-width: 90vw;\n  }\n\n  .dropdownContent:global(.dropdown__content)::after {\n    display: none;\n  }\n\n  @media screen(md) {\n    .actionsDropdown {\n      min-width: 156px;\n    }\n\n    .dropdownContent:global(.dropdown__content) {\n      min-width: 156px;\n    }\n  }\n</style>\n"],"names":["classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuCQA,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AddressSelect.js

@@ -5,6 +5,7 @@ import C from "./useGoogleMaps.js";
 import { DEBOUNCE as U } from "./constants.js";
 import q from "./Select.js";
 import "lodash-es/keyBy";
+import "@leaflink/snitch";
 import "lodash-es/isEmpty";
 import "lodash-es/isEqual";
 import "lodash-es/isPlainObject";
@@ -23,10 +24,10 @@ import "./Icon.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./_plugin-vue_export-helper-dad06003.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";
 import "./locale.js";
-const _ = "address-select-", fe = /* @__PURE__ */ M({
+const _ = "address-select-", ve = /* @__PURE__ */ M({
   __name: "AddressSelect",
   props: {
     apiKey: { default: void 0 },
@@ -51,7 +52,7 @@ const _ = "address-select-", fe = /* @__PURE__ */ M({
     const t = g, V = S(), d = A("stashOptions"), u = h(() => t.apiKey || (d == null ? void 0 : d.googleMapsApiKey));
     if (!u.value)
       throw new Error("Google Maps API key is required");
-    const { getPlaceDetails: b, getPlacePredictions: x } = C(u.value), s = n(!1), a = n(), r = n(), E = G(w, t.debounceTime), i = h(() => {
+    const { getPlaceDetails: b, getPlacePredictions: x } = C(u.value), i = n(!1), a = n(), r = n(), E = G(w, t.debounceTime), s = h(() => {
       var e, p, m, c, f, v;
       return [
         [(e = t.modelValue) == null ? void 0 : e.street_address, (p = t.modelValue) == null ? void 0 : p.extended_address].filter(Boolean).join(" "),
@@ -62,18 +63,18 @@ const _ = "address-select-", fe = /* @__PURE__ */ M({
     });
     T(() => t.modelValue, () => {
       var o;
-      if (i.value && !((o = a.value) != null && o.length)) {
+      if (s.value && !((o = a.value) != null && o.length)) {
         const e = {
           id: t.modelValue.place_id || K(_),
-          name: i.value,
+          name: s.value,
           address: t.modelValue
         };
         a.value = [e], r.value = e;
       } else
-        i.value || (r.value = void 0, a.value = []);
+        s.value || (r.value = void 0, a.value = []);
     }, { immediate: !0 });
     async function w(o) {
-      s.value = !0;
+      i.value = !0;
       try {
         a.value = await x(o);
       } catch (e) {
@@ -82,7 +83,7 @@ const _ = "address-select-", fe = /* @__PURE__ */ M({
         else
           throw e;
       } finally {
-        s.value = !1;
+        i.value = !1;
       }
     }
     async function B(o) {
@@ -115,7 +116,7 @@ const _ = "address-select-", fe = /* @__PURE__ */ M({
       single: "",
       "data-test": "select|address",
       disabled: t.disabled,
-      loading: s.value,
+      loading: i.value,
       options: a.value,
       placeholder: t.placeholder,
       label: t.label,
@@ -138,6 +139,6 @@ const _ = "address-select-", fe = /* @__PURE__ */ M({
   }
 });
 export {
-  fe as default
+  ve as default
 };
 //# sourceMappingURL=AddressSelect.js.map

package/dist/AddressSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressSelect.js","sources":["../src/components/AddressSelect/AddressSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import debounce from 'lodash-es/debounce';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useSlots, watch } from 'vue';\n\n  import { StashProvideState } from '../../../types/misc';\n  import useGoogleMaps, { type Address, type AddressOption } from '../../composables/useGoogleMaps/useGoogleMaps';\n  import { DEBOUNCE } from '../../constants';\n  import Select from '../Select/Select.vue';\n\n  export interface AddressSelectProps {\n    /**\n     * Google Maps API Key. This takes precedence over the key defined in stashOptions\n     */\n    apiKey?: string;\n    /**\n     * Wether the Select is disabled or not\n     */\n    disabled?: boolean;\n    /**\n     * Select placeholder\n     */\n    placeholder?: string;\n    /**\n     * Debounce time in milliseconds to perform API requests on search\n     */\n    debounceTime?: number;\n    /**\n     * Model value address\n     */\n    modelValue: Address;\n    /**\n     * Hint text to be passed down to Select component\n     */\n    hintText?: string;\n    /**\n     * Error text to be passed down to Select component\n     */\n    errorText?: string;\n    /**\n     * Label text to be passed down to Select component\n     */\n    label?: string;\n    /**\n     * Disallows values from being de-selected\n     */\n    preventEmpty?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AddressSelectProps>(), {\n    disabled: false,\n    placeholder: 'Type an address',\n    debounceTime: DEBOUNCE.MEDIUM,\n    modelValue: () => ({\n      street_address: undefined,\n      extended_address: undefined,\n      city: undefined,\n      state: undefined,\n      postal_code: undefined,\n      country: undefined,\n    }),\n    hintText: undefined,\n    errorText: undefined,\n    label: undefined,\n    preventEmpty: false,\n    apiKey: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (e: 'update:modelValue', value: Address): void,\n    /**\n     * Emitted when an error occurs while reaching out to Google's API\n     */\n    (e: 'error', value: unknown): void\n  }>();\n\n  const slots = useSlots();\n  const stashOptions = inject<StashProvideState>('stashOptions');\n\n  const googleMapsApiKey = computed(() => props.apiKey || stashOptions?.googleMapsApiKey);\n\n  if (!googleMapsApiKey.value) {\n    throw new Error('Google Maps API key is required');\n  }\n\n  const { getPlaceDetails, getPlacePredictions } = useGoogleMaps(googleMapsApiKey.value);\n\n  const ID_PREFIX = 'address-select-';\n\n  const isLoading = ref(false);\n  const options = ref<Array<AddressOption>>();\n  const internalValue = ref<AddressOption>();\n\n  const debouncedSearch = debounce(search, props.debounceTime);\n\n  const formattedAddress = computed(() => {\n    const formattedAddress = [\n      [props.modelValue?.street_address, props.modelValue?.extended_address].filter(Boolean).join(' '),\n      props.modelValue?.city,\n      [props.modelValue?.state, props.modelValue?.postal_code].filter(Boolean).join(' '),\n      props.modelValue?.country\n    ].filter(Boolean).join(', ');\n\n    return formattedAddress;\n  });\n\n  // When we don't have options just yet, we need to create them on our own\n  watch(() => props.modelValue, () => {\n    if (formattedAddress.value && !options.value?.length) {\n      const option = {\n        id: props.modelValue.place_id || uniqueId(ID_PREFIX),\n        name: formattedAddress.value,\n        address: props.modelValue,\n      };\n\n      options.value = [option];\n      internalValue.value = option;\n    } else if (!formattedAddress.value) {\n      internalValue.value = undefined;\n      options.value = [];\n    }\n  }, { immediate: true });\n\n  async function search(query: string) {\n    isLoading.value = true;\n\n    try {\n      options.value = await getPlacePredictions(query);\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } catch (error: any) {\n      options.value = [];\n      if (error?.isGoogleMapsError) {\n        emit('error', error);\n      } else {\n        throw error;\n      }\n    } finally {\n      isLoading.value = false;\n    }\n  }\n\n  async function select(option: AddressOption) {\n    internalValue.value = option;\n\n    // When an option is de-selected, the option will be undefined\n    if (!option) {\n      emit('update:modelValue', {\n        street_address: undefined,\n        extended_address: undefined,\n        city: undefined,\n        state: undefined,\n        postal_code: undefined,\n        country: undefined,\n      });\n      return;\n    }\n\n    // When an option does not have a google place id, we don't want to fetch it's details\n    if (option.id.startsWith(ID_PREFIX) && option.address) {\n      emit('update:modelValue', option.address);\n      return;\n    }\n\n    try {\n      const address = await getPlaceDetails(option.id);\n      emit('update:modelValue', address);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } catch (error: any) {\n      if (error?.isGoogleMapsError) {\n        emit('error', error);\n      } else {\n        throw error;\n      }\n    }\n  }\n</script>\n\n<template>\n  <Select\n    single\n    data-test=\"select|address\"\n    :disabled=\"props.disabled\"\n    :loading=\"isLoading\"\n    :options=\"options\"\n    :placeholder=\"props.placeholder\"\n    :label=\"props.label\"\n    :hint-text=\"props.hintText\"\n    :error=\"props.errorText\"\n    :model-value=\"internalValue\"\n    :prevent-empty=\"props.preventEmpty\"\n    disable-filtering\n    @search=\"debouncedSearch\"\n    @update:model-value=\"select\"\n  >\n    <template v-if=\"slots.hint\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Select>\n</template>\n"],"names":["ID_PREFIX","slots","useSlots","stashOptions","inject","googleMapsApiKey","computed","props","getPlaceDetails","getPlacePredictions","useGoogleMaps","isLoading","ref","options","internalValue","debouncedSearch","debounce","search","formattedAddress","_a","_b","_c","_d","_e","_f","watch","option","uniqueId","query","error","emit","select","address"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FE,MAAMA,IAAY;;;;;;;;;;;;;;;;;;;;;;iBAXZC,IAAQC,KACRC,IAAeC,EAA0B,cAAc,GAEvDC,IAAmBC,EAAS,MAAMC,EAAM,WAAUJ,KAAA,gBAAAA,EAAc,iBAAgB;AAElF,QAAA,CAACE,EAAiB;AACd,YAAA,IAAI,MAAM,iCAAiC;AAGnD,UAAM,EAAE,iBAAAG,GAAiB,qBAAAC,EAAA,IAAwBC,EAAcL,EAAiB,KAAK,GAI/EM,IAAYC,EAAI,EAAK,GACrBC,IAAUD,KACVE,IAAgBF,KAEhBG,IAAkBC,EAASC,GAAQV,EAAM,YAAY,GAErDW,IAAmBZ,EAAS,MAAM;;AAQ/BY,aAPkB;AAAA,QACvB,EAACC,IAAAZ,EAAM,eAAN,gBAAAY,EAAkB,iBAAgBC,IAAAb,EAAM,eAAN,gBAAAa,EAAkB,gBAAgB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,SAC/FC,IAAAd,EAAM,eAAN,gBAAAc,EAAkB;AAAA,QAClB,EAACC,IAAAf,EAAM,eAAN,gBAAAe,EAAkB,QAAOC,IAAAhB,EAAM,eAAN,gBAAAgB,EAAkB,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,SACjFC,IAAAjB,EAAM,eAAN,gBAAAiB,EAAkB;AAAA,MAClB,EAAA,OAAO,OAAO,EAAE,KAAK,IAAI;AAAA,IAEpB,CACR;AAGK,IAAAC,EAAA,MAAMlB,EAAM,YAAY,MAAM;;AAClC,UAAIW,EAAiB,SAAS,GAACC,IAAAN,EAAQ,UAAR,QAAAM,EAAe,SAAQ;AACpD,cAAMO,IAAS;AAAA,UACb,IAAInB,EAAM,WAAW,YAAYoB,EAAS3B,CAAS;AAAA,UACnD,MAAMkB,EAAiB;AAAA,UACvB,SAASX,EAAM;AAAA,QAAA;AAGT,QAAAM,EAAA,QAAQ,CAACa,CAAM,GACvBZ,EAAc,QAAQY;AAAA,MAAA;AACxB,QAAYR,EAAiB,UAC3BJ,EAAc,QAAQ,QACtBD,EAAQ,QAAQ;IAClB,GACC,EAAE,WAAW,GAAA,CAAM;AAEtB,mBAAeI,EAAOW,GAAe;AACnC,MAAAjB,EAAU,QAAQ;AAEd,UAAA;AACM,QAAAE,EAAA,QAAQ,MAAMJ,EAAoBmB,CAAK;AAAA,eAExCC,GAAY;AAEnB,YADAhB,EAAQ,QAAQ,IACZgB,KAAA,QAAAA,EAAO;AACT,UAAAC,EAAK,SAASD,CAAK;AAAA;AAEb,gBAAAA;AAAA,MACR,UACA;AACA,QAAAlB,EAAU,QAAQ;AAAA,MACpB;AAAA,IACF;AAEA,mBAAeoB,EAAOL,GAAuB;AAI3C,UAHAZ,EAAc,QAAQY,GAGlB,CAACA,GAAQ;AACX,QAAAI,EAAK,qBAAqB;AAAA,UACxB,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,UAClB,MAAM;AAAA,UACN,OAAO;AAAA,UACP,aAAa;AAAA,UACb,SAAS;AAAA,QAAA,CACV;AACD;AAAA,MACF;AAGA,UAAIJ,EAAO,GAAG,WAAW1B,CAAS,KAAK0B,EAAO,SAAS;AAChD,QAAAI,EAAA,qBAAqBJ,EAAO,OAAO;AACxC;AAAA,MACF;AAEI,UAAA;AACF,cAAMM,IAAU,MAAMxB,EAAgBkB,EAAO,EAAE;AAC/C,QAAAI,EAAK,qBAAqBE,CAAO;AAAA,eAE1BH,GAAY;AACnB,YAAIA,KAAA,QAAAA,EAAO;AACT,UAAAC,EAAK,SAASD,CAAK;AAAA;AAEb,gBAAAA;AAAA,MAEV;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AddressSelect.js","sources":["../src/components/AddressSelect/AddressSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import debounce from 'lodash-es/debounce';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useSlots, watch } from 'vue';\n\n  import { StashProvideState } from '../../../types/misc';\n  import useGoogleMaps, { type Address, type AddressOption } from '../../composables/useGoogleMaps/useGoogleMaps';\n  import { DEBOUNCE } from '../../constants';\n  import Select from '../Select/Select.vue';\n\n  export interface AddressSelectProps {\n    /**\n     * Google Maps API Key. This takes precedence over the key defined in stashOptions\n     */\n    apiKey?: string;\n    /**\n     * Wether the Select is disabled or not\n     */\n    disabled?: boolean;\n    /**\n     * Select placeholder\n     */\n    placeholder?: string;\n    /**\n     * Debounce time in milliseconds to perform API requests on search\n     */\n    debounceTime?: number;\n    /**\n     * Model value address\n     */\n    modelValue: Address;\n    /**\n     * Hint text to be passed down to Select component\n     */\n    hintText?: string;\n    /**\n     * Error text to be passed down to Select component\n     */\n    errorText?: string;\n    /**\n     * Label text to be passed down to Select component\n     */\n    label?: string;\n    /**\n     * Disallows values from being de-selected\n     */\n    preventEmpty?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AddressSelectProps>(), {\n    disabled: false,\n    placeholder: 'Type an address',\n    debounceTime: DEBOUNCE.MEDIUM,\n    modelValue: () => ({\n      street_address: undefined,\n      extended_address: undefined,\n      city: undefined,\n      state: undefined,\n      postal_code: undefined,\n      country: undefined,\n    }),\n    hintText: undefined,\n    errorText: undefined,\n    label: undefined,\n    preventEmpty: false,\n    apiKey: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (e: 'update:modelValue', value: Address): void,\n    /**\n     * Emitted when an error occurs while reaching out to Google's API\n     */\n    (e: 'error', value: unknown): void\n  }>();\n\n  const slots = useSlots();\n  const stashOptions = inject<StashProvideState>('stashOptions');\n\n  const googleMapsApiKey = computed(() => props.apiKey || stashOptions?.googleMapsApiKey);\n\n  if (!googleMapsApiKey.value) {\n    throw new Error('Google Maps API key is required');\n  }\n\n  const { getPlaceDetails, getPlacePredictions } = useGoogleMaps(googleMapsApiKey.value);\n\n  const ID_PREFIX = 'address-select-';\n\n  const isLoading = ref(false);\n  const options = ref<Array<AddressOption>>();\n  const internalValue = ref<AddressOption>();\n\n  const debouncedSearch = debounce(search, props.debounceTime);\n\n  const formattedAddress = computed(() => {\n    const formattedAddress = [\n      [props.modelValue?.street_address, props.modelValue?.extended_address].filter(Boolean).join(' '),\n      props.modelValue?.city,\n      [props.modelValue?.state, props.modelValue?.postal_code].filter(Boolean).join(' '),\n      props.modelValue?.country\n    ].filter(Boolean).join(', ');\n\n    return formattedAddress;\n  });\n\n  // When we don't have options just yet, we need to create them on our own\n  watch(() => props.modelValue, () => {\n    if (formattedAddress.value && !options.value?.length) {\n      const option = {\n        id: props.modelValue.place_id || uniqueId(ID_PREFIX),\n        name: formattedAddress.value,\n        address: props.modelValue,\n      };\n\n      options.value = [option];\n      internalValue.value = option;\n    } else if (!formattedAddress.value) {\n      internalValue.value = undefined;\n      options.value = [];\n    }\n  }, { immediate: true });\n\n  async function search(query: string) {\n    isLoading.value = true;\n\n    try {\n      options.value = await getPlacePredictions(query);\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } catch (error: any) {\n      options.value = [];\n      if (error?.isGoogleMapsError) {\n        emit('error', error);\n      } else {\n        throw error;\n      }\n    } finally {\n      isLoading.value = false;\n    }\n  }\n\n  async function select(option: AddressOption) {\n    internalValue.value = option;\n\n    // When an option is de-selected, the option will be undefined\n    if (!option) {\n      emit('update:modelValue', {\n        street_address: undefined,\n        extended_address: undefined,\n        city: undefined,\n        state: undefined,\n        postal_code: undefined,\n        country: undefined,\n      });\n      return;\n    }\n\n    // When an option does not have a google place id, we don't want to fetch it's details\n    if (option.id.startsWith(ID_PREFIX) && option.address) {\n      emit('update:modelValue', option.address);\n      return;\n    }\n\n    try {\n      const address = await getPlaceDetails(option.id);\n      emit('update:modelValue', address);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } catch (error: any) {\n      if (error?.isGoogleMapsError) {\n        emit('error', error);\n      } else {\n        throw error;\n      }\n    }\n  }\n</script>\n\n<template>\n  <Select\n    single\n    data-test=\"select|address\"\n    :disabled=\"props.disabled\"\n    :loading=\"isLoading\"\n    :options=\"options\"\n    :placeholder=\"props.placeholder\"\n    :label=\"props.label\"\n    :hint-text=\"props.hintText\"\n    :error=\"props.errorText\"\n    :model-value=\"internalValue\"\n    :prevent-empty=\"props.preventEmpty\"\n    disable-filtering\n    @search=\"debouncedSearch\"\n    @update:model-value=\"select\"\n  >\n    <template v-if=\"slots.hint\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Select>\n</template>\n"],"names":["ID_PREFIX","slots","useSlots","stashOptions","inject","googleMapsApiKey","computed","props","getPlaceDetails","getPlacePredictions","useGoogleMaps","isLoading","ref","options","internalValue","debouncedSearch","debounce","search","formattedAddress","_a","_b","_c","_d","_e","_f","watch","option","uniqueId","query","error","emit","select","address"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FE,MAAMA,IAAY;;;;;;;;;;;;;;;;;;;;;;iBAXZC,IAAQC,KACRC,IAAeC,EAA0B,cAAc,GAEvDC,IAAmBC,EAAS,MAAMC,EAAM,WAAUJ,KAAA,gBAAAA,EAAc,iBAAgB;AAElF,QAAA,CAACE,EAAiB;AACd,YAAA,IAAI,MAAM,iCAAiC;AAGnD,UAAM,EAAE,iBAAAG,GAAiB,qBAAAC,EAAA,IAAwBC,EAAcL,EAAiB,KAAK,GAI/EM,IAAYC,EAAI,EAAK,GACrBC,IAAUD,KACVE,IAAgBF,KAEhBG,IAAkBC,EAASC,GAAQV,EAAM,YAAY,GAErDW,IAAmBZ,EAAS,MAAM;;AAQ/BY,aAPkB;AAAA,QACvB,EAACC,IAAAZ,EAAM,eAAN,gBAAAY,EAAkB,iBAAgBC,IAAAb,EAAM,eAAN,gBAAAa,EAAkB,gBAAgB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,SAC/FC,IAAAd,EAAM,eAAN,gBAAAc,EAAkB;AAAA,QAClB,EAACC,IAAAf,EAAM,eAAN,gBAAAe,EAAkB,QAAOC,IAAAhB,EAAM,eAAN,gBAAAgB,EAAkB,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,SACjFC,IAAAjB,EAAM,eAAN,gBAAAiB,EAAkB;AAAA,MAClB,EAAA,OAAO,OAAO,EAAE,KAAK,IAAI;AAAA,IAEpB,CACR;AAGK,IAAAC,EAAA,MAAMlB,EAAM,YAAY,MAAM;;AAClC,UAAIW,EAAiB,SAAS,GAACC,IAAAN,EAAQ,UAAR,QAAAM,EAAe,SAAQ;AACpD,cAAMO,IAAS;AAAA,UACb,IAAInB,EAAM,WAAW,YAAYoB,EAAS3B,CAAS;AAAA,UACnD,MAAMkB,EAAiB;AAAA,UACvB,SAASX,EAAM;AAAA,QAAA;AAGT,QAAAM,EAAA,QAAQ,CAACa,CAAM,GACvBZ,EAAc,QAAQY;AAAA,MAAA;AACxB,QAAYR,EAAiB,UAC3BJ,EAAc,QAAQ,QACtBD,EAAQ,QAAQ;IAClB,GACC,EAAE,WAAW,GAAA,CAAM;AAEtB,mBAAeI,EAAOW,GAAe;AACnC,MAAAjB,EAAU,QAAQ;AAEd,UAAA;AACM,QAAAE,EAAA,QAAQ,MAAMJ,EAAoBmB,CAAK;AAAA,eAExCC,GAAY;AAEnB,YADAhB,EAAQ,QAAQ,IACZgB,KAAA,QAAAA,EAAO;AACT,UAAAC,EAAK,SAASD,CAAK;AAAA;AAEb,gBAAAA;AAAA,MACR,UACA;AACA,QAAAlB,EAAU,QAAQ;AAAA,MACpB;AAAA,IACF;AAEA,mBAAeoB,EAAOL,GAAuB;AAI3C,UAHAZ,EAAc,QAAQY,GAGlB,CAACA,GAAQ;AACX,QAAAI,EAAK,qBAAqB;AAAA,UACxB,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,UAClB,MAAM;AAAA,UACN,OAAO;AAAA,UACP,aAAa;AAAA,UACb,SAAS;AAAA,QAAA,CACV;AACD;AAAA,MACF;AAGA,UAAIJ,EAAO,GAAG,WAAW1B,CAAS,KAAK0B,EAAO,SAAS;AAChD,QAAAI,EAAA,qBAAqBJ,EAAO,OAAO;AACxC;AAAA,MACF;AAEI,UAAA;AACF,cAAMM,IAAU,MAAMxB,EAAgBkB,EAAO,EAAE;AAC/C,QAAAI,EAAK,qBAAqBE,CAAO;AAAA,eAE1BH,GAAY;AACnB,YAAIA,KAAA,QAAAA,EAAO;AACT,UAAAC,EAAK,SAASD,CAAK;AAAA;AAEb,gBAAAA;AAAA,MAEV;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Alert.js

@@ -22,7 +22,7 @@ const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
     const e = b, g = B("close-icon"), _ = $(), a = C(), c = I(!0), d = s(() => M[y(e.severity)]), h = s(() => N[y(e.severity)]), k = s(() => e.variant === "filled" && ["warning", "success"].includes(e.severity) ? "tw-text-ice-900" : e.variant === "filled" && ["info", "error"].includes(e.severity) ? "tw-text-white" : `tw-text-${h.value}`), n = s(() => e.variant === "filled" && ["info", "error"].includes(e.severity) ? "tw-text-white" : "tw-text-ice-900");
     return (u, v) => c.value ? S((i(), l("div", {
       key: 0,
-      class: r(["stash-alert tw-items-center tw-flex tw-p-3 tw-relative tw-leading-6 tw-border tw-border-solid", [
+      class: r(["stash-alert tw-relative tw-flex tw-items-center tw-border tw-border-solid tw-p-3 tw-leading-6", [
         `stash-alert--${e.severity}`,
         `stash-alert--${e.variant}`,
         n.value,
@@ -53,7 +53,7 @@ const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
         "data-test": "stash-alert|status-icon"
       }, null, 8, ["class", "name", "title"]),
       f("div", {
-        class: r(["tw-flex tw-flex-1 tw-px-2 tw-flex-wrap", {
+        class: r(["tw-flex tw-flex-1 tw-flex-wrap tw-px-2", {
           "tw-justify-center": e.centered,
           "tw-justify-between": !e.centered
         }])

package/dist/Alert.js.map

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

package/dist/AppNavigationItem.js

@@ -1,4 +1,4 @@
-import { defineComponent as v, ref as y, useSlots as $, resolveComponent as x, openBlock as n, createElementBlock as r, unref as b, createBlock as w, normalizeClass as a, withCtx as m, createElementVNode as s, createVNode as o, toDisplayString as p, renderSlot as d } from "vue";
+import { defineComponent as v, ref as y, useSlots as $, resolveComponent as x, openBlock as a, createElementBlock as r, unref as b, createBlock as w, normalizeClass as n, withCtx as m, createElementVNode as s, createVNode as o, toDisplayString as d, renderSlot as p } from "vue";
 import { _ as h } from "./Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js";
 import i from "./Icon.js";
 import { _ as k } from "./_plugin-vue_export-helper-dad06003.js";
@@ -17,10 +17,10 @@ const C = { class: "flex-1 flex items-center overflow-hidden" }, A = { class: "t
     const t = u, l = y(!1), f = $();
     return (e, c) => {
       const _ = x("router-link");
-      return n(), r("li", null, [
-        b(f)["sub-items"] ? (n(), r("div", B, [
+      return a(), r("li", null, [
+        b(f)["sub-items"] ? (a(), r("div", B, [
           s("button", {
-            class: a([[e.$style.item, { [e.$style.expanded]: l.value }], "flex items-center justify-between text-capitalize font-normal w-full"]),
+            class: n([[e.$style.item, { [e.$style.expanded]: l.value }], "flex items-center justify-between text-capitalize font-normal w-full"]),
             onClick: c[0] || (c[0] = () => l.value = !l.value)
           }, [
             s("div", I, [
@@ -28,30 +28,30 @@ const C = { class: "flex-1 flex items-center overflow-hidden" }, A = { class: "t
                 name: t.icon,
                 class: "tw-mr-3"
               }, null, 8, ["name"]),
-              s("span", N, p(t.label), 1)
+              s("span", N, d(t.label), 1)
             ]),
             o(i, {
-              class: a([e.$style.caret, { [e.$style.expandedIcon]: l.value }]),
+              class: n([e.$style.caret, { [e.$style.expandedIcon]: l.value }]),
               name: "chevron-left"
             }, null, 8, ["class"])
           ], 2),
           o(h, {
             "is-expanded": l.value,
-            class: a(e.$style.expand)
+            class: n(e.$style.expand)
           }, {
             default: m(() => [
               s("ul", {
-                class: a(e.$style["sub-items"])
+                class: n(e.$style["sub-items"])
               }, [
-                d(e.$slots, "sub-items")
+                p(e.$slots, "sub-items")
               ], 2)
             ]),
             _: 3
           }, 8, ["is-expanded", "class"])
-        ])) : (n(), w(_, {
+        ])) : (a(), w(_, {
           key: 0,
           to: t.to,
-          class: a([[e.$style.item, { [e.$style.active]: t.isActive }], "flex items-center justify-between text-capitalize font-normal w-full"]),
+          class: n([[e.$style.item, { [e.$style.active]: t.isActive }], "flex items-center justify-between text-capitalize font-normal w-full"]),
           "active-class": e.$style.active
         }, {
           default: m(() => [
@@ -60,18 +60,18 @@ const C = { class: "flex-1 flex items-center overflow-hidden" }, A = { class: "t
                 name: t.icon,
                 class: "tw-mr-3"
               }, null, 8, ["name"]),
-              s("span", A, p(t.label), 1)
+              s("span", A, d(t.label), 1)
             ]),
-            d(e.$slots, "default")
+            p(e.$slots, "default")
           ]),
           _: 3
         }, 8, ["to", "class", "active-class"]))
       ]);
     };
   }
-}), z = "_item_18p7a_2", E = "_expanded_18p7a_19", S = "_active_18p7a_23", j = "_caret_18p7a_29", M = {
+}), z = "_item_n8mr7_2", E = "_expanded_n8mr7_19", S = "_active_n8mr7_23", j = "_caret_n8mr7_29", M = {
   item: z,
-  "sub-items": "_sub-items_18p7a_15",
+  "sub-items": "_sub-items_n8mr7_15",
   expanded: E,
   active: S,
   caret: j

package/dist/AppNavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppNavigationItem.js","sources":["../src/components/AppNavigationItem/AppNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useSlots } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import Expand from '../Expand/Expand.vue';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface AppNavigationItemProps {\n    /**\n     * Location to navigate to\n     */\n    to: RouteLocationRaw,\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n    /**\n     * Text label to render\n     */\n    label: string;\n    /**\n     * Indicates whether the route is active or not\n     */\n    isActive?: boolean;\n  }\n\n  const isExpanded = ref(false);\n\n  const props = withDefaults(defineProps<AppNavigationItemProps>(), {\n    isActive: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <li>\n    <router-link\n      v-if=\"!slots['sub-items']\"\n      :to=\"props.to\"\n      :class=\"[$style.item, { [$style.active]: props.isActive }]\"\n      :active-class=\"$style.active\"\n      class=\"flex items-center justify-between text-capitalize font-normal w-full\"\n    >\n      <div class=\"flex-1 flex items-center overflow-hidden\">\n        <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n        <span class=\"text-truncate\">{{ props.label }}</span>\n      </div>\n      <!-- @slot Default component slot, for content to the right side of item -->\n      <slot></slot>\n    </router-link>\n    <div v-else>\n      <button\n        :class=\"[$style.item, { [$style.expanded]: isExpanded }]\"\n        class=\"flex items-center justify-between text-capitalize font-normal w-full\"\n        @click=\"() => (isExpanded = !isExpanded)\"\n      >\n        <div class=\"flex-1 flex items-center overflow-hidden\">\n          <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n          <span class=\"text-truncate\">{{ props.label }}</span>\n        </div>\n        <Icon :class=\"[$style.caret, { [$style.expandedIcon]: isExpanded }]\" name=\"chevron-left\" />\n      </button>\n      <Expand :is-expanded=\"isExpanded\" :class=\"$style.expand\">\n        <ul :class=\"$style['sub-items']\">\n          <!-- @slot Sub items component slot, for rendering nested navigation items -->\n          <slot name=\"sub-items\"></slot>\n        </ul>\n      </Expand>\n    </div>\n  </li>\n</template>\n\n<style module>\n  .item {\n    border-left: 6px solid transparent;\n    color: var(--color-ice);\n    padding: 10px 12px;\n    transition: background-color 150ms;\n  }\n\n  .item:hover,\n  .item:focus {\n    text-decoration: none;\n    background: #140e35;\n  }\n\n  .sub-items .item {\n    padding-left: 40px;\n  }\n\n  .expanded {\n    background-color: #263256;\n  }\n\n  .active {\n    color: var(--color-seafoam);\n    border-color: var(--color-seafoam);\n    background: #140e35;\n  }\n\n  .caret {\n    transition: transform 300ms ease-in-out;\n  }\n\n  .expanded .caret {\n    transform: rotate(-90deg);\n  }\n</style>\n"],"names":["isExpanded","ref","slots","useSlots"],"mappings":";;;;;;;;;;;;;;;;iBA2BQA,IAAaC,EAAI,EAAK,GAMtBC,IAAQC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AppNavigationItem.js","sources":["../src/components/AppNavigationItem/AppNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useSlots } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import Expand from '../Expand/Expand.vue';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface AppNavigationItemProps {\n    /**\n     * Location to navigate to\n     */\n    to: RouteLocationRaw,\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n    /**\n     * Text label to render\n     */\n    label: string;\n    /**\n     * Indicates whether the route is active or not\n     */\n    isActive?: boolean;\n  }\n\n  const isExpanded = ref(false);\n\n  const props = withDefaults(defineProps<AppNavigationItemProps>(), {\n    isActive: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <li>\n    <router-link\n      v-if=\"!slots['sub-items']\"\n      :to=\"props.to\"\n      :class=\"[$style.item, { [$style.active]: props.isActive }]\"\n      :active-class=\"$style.active\"\n      class=\"flex items-center justify-between text-capitalize font-normal w-full\"\n    >\n      <div class=\"flex-1 flex items-center overflow-hidden\">\n        <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n        <span class=\"text-truncate\">{{ props.label }}</span>\n      </div>\n      <!-- @slot Default component slot, for content to the right side of item -->\n      <slot></slot>\n    </router-link>\n    <div v-else>\n      <button\n        :class=\"[$style.item, { [$style.expanded]: isExpanded }]\"\n        class=\"flex items-center justify-between text-capitalize font-normal w-full\"\n        @click=\"() => (isExpanded = !isExpanded)\"\n      >\n        <div class=\"flex-1 flex items-center overflow-hidden\">\n          <Icon :name=\"props.icon\" class=\"tw-mr-3\" />\n          <span class=\"text-truncate\">{{ props.label }}</span>\n        </div>\n        <Icon :class=\"[$style.caret, { [$style.expandedIcon]: isExpanded }]\" name=\"chevron-left\" />\n      </button>\n      <Expand :is-expanded=\"isExpanded\" :class=\"$style.expand\">\n        <ul :class=\"$style['sub-items']\">\n          <!-- @slot Sub items component slot, for rendering nested navigation items -->\n          <slot name=\"sub-items\"></slot>\n        </ul>\n      </Expand>\n    </div>\n  </li>\n</template>\n\n<style module>\n  .item {\n    border-left: 6px solid transparent;\n    color: var(--color-ice-500);\n    padding: 10px 12px;\n    transition: background-color 150ms;\n  }\n\n  .item:hover,\n  .item:focus {\n    text-decoration: none;\n    background: #140e35;\n  }\n\n  .sub-items .item {\n    padding-left: 40px;\n  }\n\n  .expanded {\n    background-color: #263256;\n  }\n\n  .active {\n    color: var(--color-seafoam-500);\n    border-color: var(--color-seafoam-500);\n    background: #140e35;\n  }\n\n  .caret {\n    transition: transform 300ms ease-in-out;\n  }\n\n  .expanded .caret {\n    transform: rotate(-90deg);\n  }\n</style>\n"],"names":["isExpanded","ref","slots","useSlots"],"mappings":";;;;;;;;;;;;;;;;iBA2BQA,IAAaC,EAAI,EAAK,GAMtBC,IAAQC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AppSidebar.js

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

package/dist/AppSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppSidebar.js","sources":["../src/components/AppSidebar/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useSlots, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Divider from '../Divider/Divider.vue';\n\n  export interface AppSidebarProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    isOpen?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AppSidebarProps>(), {\n    isOpen: false,\n  });\n\n  const slots = useSlots();\n\n  const emit =\n    defineEmits<{\n      /**\n       * @deprecated Use the `update:is-open` event instead\n       */\n      (e: 'dismiss'): void;\n      (e: 'update:is-open', isOpen: boolean): void;\n    }>();\n\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n  const isBackdropVisible = computed(() => props.isOpen && !isExtraLargeScreen.value);\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const isSidebarOpen = computed(() => props.isOpen || isExtraLargeScreen.value);\n\n  function onBackdropClick() {\n    emit('dismiss');\n    emit('update:is-open', false);\n  }\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watchEffect(() => {\n    if (isExtraLargeScreen.value) {\n      return;\n    }\n\n    if (isBackdropVisible.value) {\n      Object.assign(initialPageScrollingElementStyle.value, {\n        overflow: getPageScrollingElement().style.overflow,\n        height: getPageScrollingElement().style.height,\n      });\n    }\n\n    Object.assign(getPageScrollingElement().style, {\n      overflow: isBackdropVisible.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when AppSidebar is open\n      height: isBackdropVisible.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when AppSidebar is open\n    });\n  });\n</script>\n\n<template>\n  <div\n    id=\"stash-app-sidebar\"\n    class=\"stash-app-sidebar tw-relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'tw-z-modal': isBackdropVisible,\n      'tw-z-[301]': !isBackdropVisible,\n    }\"\n    data-test=\"stash-app-sidebar\"\n  >\n    <Transition name=\"backdrop\">\n      <Backdrop v-show=\"isBackdropVisible\" class=\"stash-app-sidebar__backdrop\" @click.stop=\"onBackdropClick\" />\n    </Transition>\n    <Transition name=\"aside\">\n      <aside\n        v-show=\"isSidebarOpen\"\n        class=\"stash-app-sidebar__aside tw-fixed tw-h-screen tw-bg-purple-500 tw-flex tw-flex-col\"\n        data-test=\"stash-app-sidebar__aside\"\n      >\n        <Divider class=\"stash-app-sidebar__divider\" />\n        <div v-if=\"slots['app-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot App Context component slot, ideally for rendering the context switcher -->\n          <slot name=\"app-context\"></slot>\n        </div>\n        <div v-if=\"slots['company-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot Company Context component slot, ideally for rendering the company picker -->\n          <slot name=\"company-context\"></slot>\n        </div>\n        <nav v-if=\"slots['navigation']\" class=\"tw-pt-6\">\n          <ul role=\"menubar\" aria-orientation=\"vertical\">\n            <!-- @slot Navigation component slot, for rendering navigation items -->\n            <slot name=\"navigation\"></slot>\n          </ul>\n        </nav>\n        <div class=\"tw-flex-1\"></div>\n        <!-- @slot Footer component slot, for rendering version/environment notes -->\n        <slot name=\"footer\"></slot>\n      </aside>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n  .stash-app-sidebar__aside {\n    padding-top: calc(var(--top-header-height) - 1px); /* -1px to compensate for the border height */\n    width: var(--sidebar-width);\n  }\n\n  .stash-app-sidebar__divider::before,\n  .stash-app-sidebar__divider::after {\n    border-bottom: 1px solid rgb(255 255 255 / 12%);\n  }\n\n  .backdrop-enter-active,\n  .backdrop-leave-active {\n    transition: opacity 200ms ease-in-out;\n  }\n\n  .backdrop-enter-from,\n  .backdrop-leave-to {\n    opacity: 0;\n  }\n\n  .aside-enter-active,\n  .aside-leave-active {\n    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;\n  }\n\n  .aside-enter-from,\n  .aside-leave-to {\n    opacity: 0;\n    transform: translateX(-20%);\n  }\n</style>\n"],"names":["slots","useSlots","isExtraLargeScreen","useMediaQuery","isBackdropVisible","computed","props","initialPageScrollingElementStyle","ref","isSidebarOpen","onBackdropClick","emit","getPageScrollingElement","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkBQA,IAAQC,KAWRC,IAAqBC,EAAc,gCAAgC,GACnEC,IAAoBC,EAAS,MAAMC,EAAM,UAAU,CAACJ,EAAmB,KAAK,GAC5EK,IAAmCC,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEC,IAAgBJ,EAAS,MAAMC,EAAM,UAAUJ,EAAmB,KAAK;AAE7E,aAASQ,IAAkB;AACzB,MAAAC,EAAK,SAAS,GACdA,EAAK,kBAAkB,EAAK;AAAA,IAC9B;AAEA,aAASC,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,WAAAC,EAAY,MAAM;AAChB,MAAIX,EAAmB,UAInBE,EAAkB,SACb,OAAA,OAAOG,EAAiC,OAAO;AAAA,QACpD,UAAUK,IAA0B,MAAM;AAAA,QAC1C,QAAQA,IAA0B,MAAM;AAAA,MAAA,CACzC,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUR,EAAkB,QAAQ,WAAWG,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQH,EAAkB,QAAQ,SAASG,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AppSidebar.js","sources":["../src/components/AppSidebar/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useSlots, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Divider from '../Divider/Divider.vue';\n\n  export interface AppSidebarProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    isOpen?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AppSidebarProps>(), {\n    isOpen: false,\n  });\n\n  const slots = useSlots();\n\n  const emit =\n    defineEmits<{\n      /**\n       * @deprecated Use the `update:is-open` event instead\n       */\n      (e: 'dismiss'): void;\n      (e: 'update:is-open', isOpen: boolean): void;\n    }>();\n\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n  const isBackdropVisible = computed(() => props.isOpen && !isExtraLargeScreen.value);\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const isSidebarOpen = computed(() => props.isOpen || isExtraLargeScreen.value);\n\n  function onBackdropClick() {\n    emit('dismiss');\n    emit('update:is-open', false);\n  }\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watchEffect(() => {\n    if (isExtraLargeScreen.value) {\n      return;\n    }\n\n    if (isBackdropVisible.value) {\n      Object.assign(initialPageScrollingElementStyle.value, {\n        overflow: getPageScrollingElement().style.overflow,\n        height: getPageScrollingElement().style.height,\n      });\n    }\n\n    Object.assign(getPageScrollingElement().style, {\n      overflow: isBackdropVisible.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when AppSidebar is open\n      height: isBackdropVisible.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when AppSidebar is open\n    });\n  });\n</script>\n\n<template>\n  <div\n    id=\"stash-app-sidebar\"\n    class=\"stash-app-sidebar tw-relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'tw-z-modal': isBackdropVisible,\n      'tw-z-[301]': !isBackdropVisible,\n    }\"\n    data-test=\"stash-app-sidebar\"\n  >\n    <Transition name=\"backdrop\">\n      <Backdrop v-show=\"isBackdropVisible\" class=\"stash-app-sidebar__backdrop\" @click.stop=\"onBackdropClick\" />\n    </Transition>\n    <Transition name=\"aside\">\n      <aside\n        v-show=\"isSidebarOpen\"\n        class=\"stash-app-sidebar__aside tw-fixed tw-flex tw-h-screen tw-flex-col tw-bg-purple-500\"\n        data-test=\"stash-app-sidebar__aside\"\n      >\n        <Divider class=\"stash-app-sidebar__divider\" />\n        <div v-if=\"slots['app-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot App Context component slot, ideally for rendering the context switcher -->\n          <slot name=\"app-context\"></slot>\n        </div>\n        <div v-if=\"slots['company-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot Company Context component slot, ideally for rendering the company picker -->\n          <slot name=\"company-context\"></slot>\n        </div>\n        <nav v-if=\"slots['navigation']\" class=\"tw-pt-6\">\n          <ul role=\"menubar\" aria-orientation=\"vertical\">\n            <!-- @slot Navigation component slot, for rendering navigation items -->\n            <slot name=\"navigation\"></slot>\n          </ul>\n        </nav>\n        <div class=\"tw-flex-1\"></div>\n        <!-- @slot Footer component slot, for rendering version/environment notes -->\n        <slot name=\"footer\"></slot>\n      </aside>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n  .stash-app-sidebar__aside {\n    padding-top: calc(var(--top-header-height) - 1px); /* -1px to compensate for the border height */\n    width: var(--sidebar-width);\n  }\n\n  .stash-app-sidebar__divider::before,\n  .stash-app-sidebar__divider::after {\n    border-bottom: 1px solid rgb(255 255 255 / 12%);\n  }\n\n  .backdrop-enter-active,\n  .backdrop-leave-active {\n    transition: opacity 200ms ease-in-out;\n  }\n\n  .backdrop-enter-from,\n  .backdrop-leave-to {\n    opacity: 0;\n  }\n\n  .aside-enter-active,\n  .aside-leave-active {\n    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;\n  }\n\n  .aside-enter-from,\n  .aside-leave-to {\n    opacity: 0;\n    transform: translateX(-20%);\n  }\n</style>\n"],"names":["slots","useSlots","isExtraLargeScreen","useMediaQuery","isBackdropVisible","computed","props","initialPageScrollingElementStyle","ref","isSidebarOpen","onBackdropClick","emit","getPageScrollingElement","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkBQA,IAAQC,KAWRC,IAAqBC,EAAc,gCAAgC,GACnEC,IAAoBC,EAAS,MAAMC,EAAM,UAAU,CAACJ,EAAmB,KAAK,GAC5EK,IAAmCC,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEC,IAAgBJ,EAAS,MAAMC,EAAM,UAAUJ,EAAmB,KAAK;AAE7E,aAASQ,IAAkB;AACzB,MAAAC,EAAK,SAAS,GACdA,EAAK,kBAAkB,EAAK;AAAA,IAC9B;AAEA,aAASC,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,WAAAC,EAAY,MAAM;AAChB,MAAIX,EAAmB,UAInBE,EAAkB,SACb,OAAA,OAAOG,EAAiC,OAAO;AAAA,QACpD,UAAUK,IAA0B,MAAM;AAAA,QAC1C,QAAQA,IAA0B,MAAM;AAAA,MAAA,CACzC,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUR,EAAkB,QAAQ,WAAWG,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQH,EAAkB,QAAQ,SAASG,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AppTopbar.js

@@ -1,4 +1,4 @@
-import { openBlock as n, createElementBlock as p, createStaticVNode as h, defineComponent as c, createElementVNode as t, normalizeClass as i, createVNode as a, unref as m, renderSlot as o } from "vue";
+import { openBlock as n, createElementBlock as p, createStaticVNode as h, defineComponent as c, createElementVNode as t, normalizeClass as i, createVNode as s, unref as m, renderSlot as o } from "vue";
 import d from "./Icon.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
@@ -16,8 +16,8 @@ function b(r, w) {
 }
 const H = { render: b }, u = {
   "data-test": "stash-app-topbar",
-  class: "stash-app-topbar tw-absolute tw-top-0 tw-left-0"
-}, x = ["href"], _ = { class: "tw-flex tw-items-center" }, g = { class: "tw-ml-6" }, v = { class: "tw-hidden xl:tw-block tw-pl-3" }, y = /* @__PURE__ */ c({
+  class: "stash-app-topbar tw-absolute tw-left-0 tw-top-0"
+}, x = ["href"], _ = { class: "tw-flex tw-items-center" }, g = { class: "tw-ml-6" }, v = { class: "tw-hidden tw-pl-3 xl:tw-block" }, y = /* @__PURE__ */ c({
   __name: "AppTopbar",
   props: {
     sidebarOpened: { type: Boolean, default: !1 },
@@ -25,38 +25,38 @@ const H = { render: b }, u = {
   },
   emits: ["toggle-sidebar"],
   setup(r, { emit: w }) {
-    const s = r;
+    const a = r;
     return (e, l) => (n(), p("header", u, [
       t("div", {
-        class: i(["tw-fixed tw-top-0 tw-pl-3 tw-flex tw-items-center tw-h-topbar tw-w-sidebar xl:tw-text-white tw-transition-colors tw-duration-500", {
-          "tw-text-white tw-z-[1001]": s.sidebarOpened,
-          "tw-text-purple-500 tw-z-[401]": !s.sidebarOpened
+        class: i(["tw-fixed tw-top-0 tw-flex tw-h-topbar tw-w-sidebar tw-items-center tw-pl-3 tw-transition-colors tw-duration-500 xl:tw-text-white", {
+          "tw-z-dialog tw-text-white": a.sidebarOpened,
+          "tw-z-[401] tw-text-purple-500": !a.sidebarOpened
         }])
       }, [
         t("button", {
           class: "xl:tw-hidden",
           onClick: l[0] || (l[0] = (M) => w("toggle-sidebar"))
         }, [
-          a(d, {
+          s(d, {
             name: "menu",
             class: "tw-mr-3",
             "aria-label": "open sidebar navigation"
           })
         ]),
         t("a", {
-          href: s.href,
+          href: a.href,
           class: "tw-flex tw-items-center tw-text-inherit"
         }, [
-          a(d, {
+          s(d, {
             name: "logo-ll",
             class: "tw-mr-1.5",
             size: "large"
           }),
-          a(m(H), { class: "tw-w-full tw-max-w-[104px] tw-h-6 tw-hidden md:tw-block" })
+          s(m(H), { class: "tw-hidden tw-h-6 tw-w-full tw-max-w-[104px] md:tw-block" })
         ], 8, x)
       ], 2),
       t("div", {
-        class: i([[e.$attrs.class], "tw-fixed tw-top-0 tw-w-full tw-pr-3 tw-py-3 tw-z-page tw-shadow-md tw-flex tw-items-center tw-justify-between tw-flex-row-reverse tw-bg-white tw-h-topbar tw-pl-sidebar"])
+        class: i([[e.$attrs.class], "tw-fixed tw-top-0 tw-z-page tw-flex tw-h-topbar tw-w-full tw-flex-row-reverse tw-items-center tw-justify-between tw-bg-white tw-py-3 tw-pl-sidebar tw-pr-3 tw-shadow-md"])
       }, [
         t("div", _, [
           o(e.$slots, "actions"),

package/dist/Avatar.js

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

package/dist/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types/colors';\n  import colorSchemeUtil from '../../utils/colorScheme';\n\n  defineOptions({\n    name: 'll-avatar',\n  });\n\n  export interface AvatarProps {\n    /**\n     * The name of the user will be parsed and have its initial displayed in case the src prop is empty\n     */\n    name?: string;\n\n    /**\n     * The color for the chip that determines both the text and bg color. Needs to\n     * be one of the brand colors in our design system (not a shade).\n     */\n    colorScheme?: StashPrimaryColorGroup;\n\n    /**\n     * The shade of the provided color to use for the background color. This effects the inferred\n     * text color unless a specific text color is provided. Currently only `light` and `main`\n     * shades are supported. `dark` may be added in the future.\n     */\n    shade?: 'light' | 'main';\n\n    /**\n     * The image that will be displayed within the avatar\n     */\n    src?: string;\n\n    /**\n     * The alternative text to be displayed in case the image is unavailable\n     */\n    alt?: string;\n\n    /**\n     * The background color of the chip. Needs to be one of our design system colors.\n     */\n    bgColor?: StashCommonColor;\n\n    /**\n     * The color of the chip text. Needs to be one of our design system colors.\n     */\n    textColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<AvatarProps>(), {\n    src: undefined,\n    name: '',\n    alt: undefined,\n    colorScheme: 'ice',\n    shade: 'light',\n    bgColor: undefined,\n    textColor: undefined,\n  });\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const computedColors = computed(() =>\n    colorSchemeUtil({\n      shade: props.shade,\n      color: props.colorScheme,\n    }),\n  );\n\n  const initials = computed(() => {\n    const [firstName, lastName] = String(props.name).toUpperCase().split(' ');\n    const initials = lastName ? firstName.charAt(0) + lastName.charAt(0) : firstName.charAt(0);\n\n    return initials;\n  });\n\n  const isClickable = computed(() => {\n    return !!attrs.onClick;\n  });\n</script>\n\n<template>\n  <img\n    v-if=\"props.src\"\n    class=\"stash-avatar stash-avatar--image tw-inline-block tw-rounded-full\"\n    :class=\"[classes.root, { [classes.clickable]: isClickable }]\"\n    :alt=\"props.alt\"\n    :src=\"props.src\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  />\n  <div\n    v-else\n    class=\"\n      stash-avatar stash-avatar--initials\n      tw-inline-block tw-rounded-full tw-text-center tw-font-semibold tw-cursor-default\n    \"\n    :class=\"[\n      classes.root,\n      `tw-text-${props.textColor || computedColors.computedTextColor}`,\n      `tw-bg-${props.bgColor || computedColors.computedBgColor}`,\n      { [classes.clickable]: isClickable },\n    ]\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  >\n    {{ initials }}\n  </div>\n</template>\n\n<style module>\n  .root {\n    font-size: theme('fontSize.sm');\n    height: theme('spacing.9');\n    line-height: calc(theme('spacing.9') + 2px);\n    width: theme('spacing.9');\n  }\n\n  .clickable:hover,\n  .clickable:focus,\n  .clickable:active {\n    outline: 1px solid theme('colors.blue.500');\n    outline-offset: -1px;\n  }\n\n  .clickable:focus,\n  .clickable:active {\n    box-shadow: 0 0 0 4px rgb(0 114 240 / 15%);\n  }\n</style>\n"],"names":["attrs","useAttrs","classes","useCssModule","computedColors","computed","colorSchemeUtil","props","initials","firstName","lastName","isClickable"],"mappings":";;;;;;;;;;;;;;;;iBA4DQA,IAAQC,KACRC,IAAUC,KAEVC,IAAiBC;AAAA,MAAS,MAC9BC,EAAgB;AAAA,QACd,OAAOC,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd;AAAA,IAAA,GAGGC,IAAWH,EAAS,MAAM;AACxB,YAAA,CAACI,GAAWC,CAAQ,IAAI,OAAOH,EAAM,IAAI,EAAE,YAAA,EAAc,MAAM,GAAG;AAGjEC,aAFUE,IAAWD,EAAU,OAAO,CAAC,IAAIC,EAAS,OAAO,CAAC,IAAID,EAAU,OAAO,CAAC;AAAA,IAElF,CACR,GAEKE,IAAcN,EAAS,MACpB,CAAC,CAACL,EAAM,OAChB;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types/colors';\n  import colorSchemeUtil from '../../utils/colorScheme';\n\n  defineOptions({\n    name: 'll-avatar',\n  });\n\n  export interface AvatarProps {\n    /**\n     * The name of the user will be parsed and have its initial displayed in case the src prop is empty\n     */\n    name?: string;\n\n    /**\n     * The color for the chip that determines both the text and bg color. Needs to\n     * be one of the brand colors in our design system (not a shade).\n     */\n    colorScheme?: StashPrimaryColorGroup;\n\n    /**\n     * The shade of the provided color to use for the background color. This effects the inferred\n     * text color unless a specific text color is provided. Currently only `light` and `main`\n     * shades are supported. `dark` may be added in the future.\n     */\n    shade?: 'light' | 'main';\n\n    /**\n     * The image that will be displayed within the avatar\n     */\n    src?: string;\n\n    /**\n     * The alternative text to be displayed in case the image is unavailable\n     */\n    alt?: string;\n\n    /**\n     * The background color of the chip. Needs to be one of our design system colors.\n     */\n    bgColor?: StashCommonColor;\n\n    /**\n     * The color of the chip text. Needs to be one of our design system colors.\n     */\n    textColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<AvatarProps>(), {\n    src: undefined,\n    name: '',\n    alt: undefined,\n    colorScheme: 'ice',\n    shade: 'light',\n    bgColor: undefined,\n    textColor: undefined,\n  });\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const computedColors = computed(() =>\n    colorSchemeUtil({\n      shade: props.shade,\n      color: props.colorScheme,\n    }),\n  );\n\n  const initials = computed(() => {\n    const [firstName, lastName] = String(props.name).toUpperCase().split(' ');\n    const initials = lastName ? firstName.charAt(0) + lastName.charAt(0) : firstName.charAt(0);\n\n    return initials;\n  });\n\n  const isClickable = computed(() => {\n    return !!attrs.onClick;\n  });\n</script>\n\n<template>\n  <img\n    v-if=\"props.src\"\n    class=\"stash-avatar stash-avatar--image tw-inline-block tw-rounded-full\"\n    :class=\"[classes.root, { [classes.clickable]: isClickable }]\"\n    :alt=\"props.alt\"\n    :src=\"props.src\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  />\n  <div\n    v-else\n    class=\"\n      stash-avatar stash-avatar--initials\n      tw-inline-block tw-cursor-default tw-rounded-full tw-text-center tw-font-semibold\n    \"\n    :class=\"[\n      classes.root,\n      `tw-text-${props.textColor || computedColors.computedTextColor}`,\n      `tw-bg-${props.bgColor || computedColors.computedBgColor}`,\n      { [classes.clickable]: isClickable },\n    ]\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  >\n    {{ initials }}\n  </div>\n</template>\n\n<style module>\n  .root {\n    font-size: theme('fontSize.sm');\n    height: theme('spacing.9');\n    line-height: calc(theme('spacing.9') + 2px);\n    width: theme('spacing.9');\n  }\n\n  .clickable:hover,\n  .clickable:focus,\n  .clickable:active {\n    outline: 1px solid var(--color-blue-500);\n    outline-offset: -1px;\n  }\n\n  .clickable:focus,\n  .clickable:active {\n    box-shadow: 0 0 0 4px rgb(0 114 240 / 15%);\n  }\n</style>\n"],"names":["attrs","useAttrs","classes","useCssModule","computedColors","computed","colorSchemeUtil","props","initials","firstName","lastName","isClickable"],"mappings":";;;;;;;;;;;;;;;;iBA4DQA,IAAQC,KACRC,IAAUC,KAEVC,IAAiBC;AAAA,MAAS,MAC9BC,EAAgB;AAAA,QACd,OAAOC,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd;AAAA,IAAA,GAGGC,IAAWH,EAAS,MAAM;AACxB,YAAA,CAACI,GAAWC,CAAQ,IAAI,OAAOH,EAAM,IAAI,EAAE,YAAA,EAAc,MAAM,GAAG;AAGjEC,aAFUE,IAAWD,EAAU,OAAO,CAAC,IAAIC,EAAS,OAAO,CAAC,IAAID,EAAU,OAAO,CAAC;AAAA,IAElF,CACR,GAEKE,IAAcN,EAAS,MACpB,CAAC,CAACL,EAAM,OAChB;;;;;;;;;;;;;;;;;;;;;;;;;;"}