@leaflink/stash 44.0.0-beta.1 → 44.0.0-beta.11

package/README.md

@@ -36,25 +36,100 @@ Stash is a collection of primitive, product-agnostic elements that help encapsul
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-## Getting Started
+## Quick Start
+
+Stash requires Vue 3 and Tailwind CSS 3. To get started, install the package and its peer dependencies:
 
 ```sh
-npm install @leaflink/stash
+npm install @leaflink/stash tailwindcss@3
 ```
 
-```js
-// src/main.ts
+Then, import the package and its styles in your app. Load the base and components styles from Stash, and then add your
+app's styles after them.
+
+```ts filename="main.ts"
 import { createApp } from 'vue';
 import stash from '@leaflink/stash';
 
+// stash styles
+import '@leaflink/stash/styles/base.css';
+import '@leaflink/stash/components.css';
+
+// app styles
+import './app.css';
+
 const app = createApp(App);
 
 app.use(stash);
 ```
 
+Your app styles should be loaded after the Stash styles to ensure that they override the Stash styles. At minimum, your
+app styles should include the following:
+
+```css filename="app.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Configure Tailwind in your app by creating a `tailwind.config.ts` file. It should include the Stash files in the
+`content` setting.
+
+```ts filename="tailwind.config.ts"
+import stashPreset from '@leaflink/stash/tailwind-base';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [stashPreset],
+
+  content: ['./src/**/*.{vue,ts,js}', './node_modules/@leaflink/stash/dist/*.js'],
+};
+```
+
+See the [Tailwind](#tailwind) section for more details on how to configure it in your app.
+
+> [!INFO]
+> For apps still requiring deprecated css & utility classes, you can include the backwards compat styles from Stash:
+
+```ts filename="main.ts"
+import '@leaflink/stash/styles/backwards-compat.css'; // Add this line before the base and components styles.
+import '@leaflink/stash/styles/base.css';
+import '@leaflink/stash/components.css';
+
+import './app.css';
+```
+
+Also, if you still need legacy Stash sass variables, functions, and mixins in your components, you can configure Vite to
+import them:
+
+```ts filename="vite.config.ts"
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+
+  return {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: '@use "sass:map"; @import "@leaflink/stash/styles/core";',
+        },
+      },
+    },
+  };
+});
+```
+
 ## Usage
 
-There are several ways to configure the framework to suit your specific needs.
+`@leaflink/stash` is a Vue component library that implements [Leaflink's Stash Design System](https://stash.leaflink.com). So every one of LeafLink's colors, typography, shadows, etc. can be accessible via tailwind utility classes like `tw-text-blue-500 tw-text-sm`.
+
+Stash is a Vue plugin that can be installed in your app. You **do not need to install the plugin in order to use the components**, but it is required if you need to configure the framework to suit your specific needs.
+
+There are several options to configure the framework to suit your specific needs, and they are all optional. Any options
+you pass to the plugin will be merged with the default options & applied to the entire framework.
+
+> [!WARNING]
+> If you don't install the plugin in your app, you will need to manually setup [modals](https://stash.leaflink.com/guides/modals.html#installation), [toasts](https://stash.leaflink.com/guides/toasts.html#installation), and other features that
+> require some setup that's normally done for you by the Stash plugin.
 
 ```ts
 interface StashPluginOptions {
@@ -130,11 +205,11 @@ app.use(stash, {
     locale,
     t: (key, value) => i18n.t(key, value)
   },
-  googleMapsApiKey: import.meta.env.VITE_GOOGLE_MAPS_API
+  googleMapsApiKey: import.meta.env.VITE_GOOGLE_MAPS_API,
 });
 ```
 
-This example will load the core i18n options and google maps api key.
+This example will load the core i18n options and Google Maps api key.
 
 ### npm scripts
 
@@ -151,40 +226,37 @@ A few commonly used commands are:
 - `npm run build` will build the application and prepare it for production.
 - `npm run build-ts` will build the application, perform a static analysis to find any type errors and prepare it for production.
 
-## Styles
+## Legacy Styles
 
-`@leaflink/stash` exposes its core and components styles to be used downstream. It's required to import these styles in order for the components to have it's styles correctly applied.
-
-```ts
-// main.ts
+`@leaflink/stash` exposes a stylesheet for backwards compatibility with legacy stash utilities. This stylesheet includes
+styles for components that have been deprecated or removed from the Stash Design System. It is not required for
+greenfield projects.
 
+```ts filename="main.ts"
 /* legacy stash styles - not required for greenfield projects */
-import '@leaflink/stash/styles/main.scss'; // once backwards-compat.css is filled out, this can be removed
 import '@leaflink/stash/styles/backwards-compat.css';
 
 /* stash styles */
 import '@leaflink/stash/styles/base.css';
 import '@leaflink/stash/components.css';
 
-/* any other styles */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+import './app.css';
 ```
 
-> Tailwind CSS is required in order to run Stash. See below for details on [how to configure it](#tailwind) in your app.
-
-### Tailwind
+## Tailwind
 
-`@leaflink/stash` uses [Tailwind](https://tailwindcss.com/) behind the scene to style its components. It's currently required to run this library downstream in order to generate styles for stash's tw classes used. This helps avoiding issues with duplications & css ordering.
+`@leaflink/stash` uses [Tailwind](https://tailwindcss.com/) behind the scene to style its components. It's currently
+required to **run this library downstream in order to avoid issues with css duplication & ordering**.
 
-In order to avoid class name clashes, `@leaflink/stash` prefixes Tailwind utility classes with `tw-`. So when needed to use a tailwind class, just use like this `tw-flex md:tw-text-blue`.
+In order to avoid class name clashes with legacy utilities, `@leaflink/stash` prefixes Tailwind utility classes with
+`tw-`. This may change in the future when all LeafLink apps no longer need deprecated styles. For now, when needing to
+use a tailwind class, just add the `tw` prefix like so: `tw-flex md:tw-text-blue`.
 
-```js
-import Button from "@leaflink/stash/Button.vue"
-import IconLabel from "@leaflink/stash/IconLabel.vue"
+```jsx
+import Button from '@leaflink/stash/Button.vue';
+import IconLabel from '@leaflink/stash/IconLabel.vue';
 
-<Button icon-label class="tw-text-blue-500 tw-ml-3">
+<Button icon-label class="tw-hidden md:tw-inline tw-ml-3">
   <IconLabel icon="user-add" title="Add Recipient" size="dense" stacked>Add Recipient</IconLabel>
 </Button>
 ```
@@ -206,21 +278,17 @@ export default {
 };
 ```
 
-### Design System
-
-`@leaflink/stash` is a Vue component library that implements [Leaflink's Stash Design System](https://leaflink.atlassian.net/wiki/spaces/EN/pages/2394063290/Stash+Design+System). So every one of LeafLink's colors, typography, shadows, etc. can be accessible via tailwind utility classes like `tw-text-blue-500 tw-text-sm`.
-
 ## Resources
 
-  * **index.js**: This is the "install" entry point, for use with `app.use(...)`.
-  * **components**: All components
-  * **composables**: Similar to mixins or React's "Hooks", but for a Vue component
-  * **constants**: LeafLink global constants
-  * **directives**: [Vue directives](https://vuejs.org/guide/reusability/custom-directives#custom-directives)
-  * **plugins**: [Vue plugins](https://vuejs.org/guide/reusability/plugins.html#plugins)
-  * **styles**: SCSS, CSS, style utils, etc.
-  * **types**: TypeScript type declarations
-  * **utils**: Includes various helpers for internal and external use
+* **index.js**: This is the "install" entry point, for use with `app.use(...)`.
+* **components**: All components
+* **composables**: Similar to mixins or React's "Hooks", but for a Vue component
+* **constants**: LeafLink global constants
+* **directives**: [Vue directives](https://vuejs.org/guide/reusability/custom-directives#custom-directives)
+* **plugins**: [Vue plugins](https://vuejs.org/guide/reusability/plugins.html#plugins)
+* **styles**: SCSS, CSS, style utils, etc.
+* **types**: TypeScript type declarations
+* **utils**: Includes various helpers for internal and external use
 
 ## Core files & Entry Points
 

package/dist/ActionsDropdown.js

@@ -1,11 +1,11 @@
-import { defineComponent as c, useCssModule as p, openBlock as m, createBlock as u, unref as n, normalizeClass as s, createSlots as f, withCtx as e, createVNode as a, createTextVNode as _, toDisplayString as b, renderSlot as w } from "vue";
+import { defineComponent as c, useCssModule as p, openBlock as m, createBlock as u, unref as n, normalizeClass as s, createSlots as f, withCtx as e, createVNode as a, createTextVNode as w, toDisplayString as _, renderSlot as b } from "vue";
 import { t as C } from "./locale.js";
-import g from "./Button.js";
-import x from "./Dropdown.js";
+import x from "./Button.js";
+import g 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-63d31dc0.js";
 import "./constants.js";
 import "./clickoutside.js";
 import "./utils/calculateElementOverflow.js";
@@ -25,23 +25,23 @@ const y = /* @__PURE__ */ c({
     contentClass: { default: "" },
     buttonText: { default: () => C("ll.actions") }
   },
-  setup(l) {
-    const o = l, t = p();
-    return (d, A) => (m(), u(x, {
-      align: o.align,
-      "content-class": [n(t).dropdownContent, o.contentClass],
-      class: s(n(t).actionsDropdown)
+  setup(r) {
+    const t = r, o = p();
+    return (d, N) => (m(), u(g, {
+      align: t.align,
+      "content-class": [n(o).dropdownContent, t.contentClass],
+      class: s(n(o).actionsDropdown)
     }, f({
-      toggle: e(({ isActive: r, toggle: i }) => [
-        a(g, {
-          class: s(["button flex align-middle align-justify w-full border border-blue text-blue", [n(t).actionButton, { [n(t).disabled]: o.disabled }]]),
+      toggle: e(({ isActive: l, toggle: i }) => [
+        a(x, {
+          class: s(["button tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-border-blue-500 tw-text-blue-500", [n(o).actionButton, { [n(o).disabled]: t.disabled }]]),
           secondary: "",
-          "aria-expanded": r.toString(),
-          disabled: o.disabled,
+          "aria-expanded": l.toString(),
+          disabled: t.disabled,
           onClick: i
         }, {
           default: e(() => [
-            _(b(o.buttonText) + " ", 1),
+            w(_(t.buttonText) + " ", 1),
             a(B, {
               class: "tw-ml-1.5",
               name: "caret-down"
@@ -52,23 +52,23 @@ const y = /* @__PURE__ */ c({
       ]),
       _: 2
     }, [
-      o.disabled ? void 0 : {
+      t.disabled ? void 0 : {
         name: "default",
         fn: e(() => [
-          w(d.$slots, "default")
+          b(d.$slots, "default")
         ]),
         key: "0"
       }
     ]), 1032, ["align", "content-class", "class"]));
   }
-}), k = "_actionButton_vmot1_2", v = "_disabled_vmot1_12", S = "_dropdownContent_vmot1_18", M = "_actionsDropdown_vmot1_33", T = {
+}), k = "_actionButton_144dr_2", S = "_disabled_144dr_12", M = "_dropdownContent_144dr_18", T = "_actionsDropdown_144dr_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=\"\n          button\n          tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-border-blue-500 tw-text-blue-500\n        \"\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-42ba3c5a.js";
+import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.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

@@ -19,10 +19,10 @@ const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
     variant: { default: "outlined" }
   },
   setup(b) {
-    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", {
+    const e = b, g = B("close-icon"), _ = $(), a = C(), c = I(!0), u = 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 (d, 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,
@@ -47,26 +47,26 @@ const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
       "data-test": "stash-alert"
     }, [
       w(p, {
-        class: r(["stash-alert__icon", [t(a).iconInfo, k.value, `stash-alert__icon--${d.value}`]]),
-        name: d.value,
+        class: r(["stash-alert__icon", [t(a).iconInfo, k.value, `stash-alert__icon--${u.value}`]]),
+        name: u.value,
         title: `${e.severity} icon`,
         "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
         }])
       }, [
         f("p", z, [
-          m(u.$slots, "default")
+          m(d.$slots, "default")
         ]),
         t(_).link ? (i(), l("div", {
           key: 0,
-          class: r(["stash-alert__link tw-pointer tw-underline hover:tw-no-underline", [t(a).link, n.value, { "tw-ml-2": e.centered }]]),
+          class: r(["stash-alert__link tw-cursor-pointer tw-underline hover:tw-no-underline", [t(a).link, n.value, { "tw-ml-2": e.centered }]]),
           "data-test": "stash-alert|link"
         }, [
-          m(u.$slots, "link")
+          m(d.$slots, "link")
         ], 2)) : o("", !0)
       ], 2),
       e.permanent ? o("", !0) : (i(), l("button", {

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-cursor-pointer tw-underline hover:tw-no-underline\"\n        :class=\"[classes.link, computedTextColor, { 'tw-ml-2': props.centered }]\"\n        data-test=\"stash-alert|link\"\n      >\n        <slot name=\"link\"></slot>\n      </div>\n    </div>\n\n    <button\n      v-if=\"!props.permanent\"\n      class=\"stash-alert__close\"\n      :class=\"[classes.button, computedTextColor]\"\n      type=\"button\"\n      data-test=\"stash-alert|close\"\n      @click=\"show = false\"\n    >\n      <Icon :id=\"iconId\" name=\"close\" title=\"Dismiss alert\" />\n    </button>\n  </div>\n</template>\n\n<style module>\n  :global(.stash-alert__link) {\n    a,\n    button {\n      color: var(--color-ice-900);\n      cursor: pointer;\n      text-decoration: underline;\n\n      &:hover {\n        text-decoration: none;\n      }\n    }\n  }\n\n  :global(.stash-alert--filled.stash-alert--error),\n  :global(.stash-alert--filled.stash-alert--info) {\n    :global(.stash-alert__link) a,\n    :global(.stash-alert__link) button {\n      color: theme('colors.white');\n    }\n  }\n</style>\n"],"names":["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,11 +1,11 @@
-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 { _ as h } from "./Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js";
+import { defineComponent as _, ref as v, useSlots as y, resolveComponent as $, openBlock as a, createElementBlock as r, unref as b, createBlock as h, normalizeClass as n, withCtx as m, createElementVNode as s, createVNode as o, toDisplayString as d, renderSlot as p } from "vue";
+import { _ as k } from "./Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js";
 import i from "./Icon.js";
-import { _ as k } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as x } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const C = { class: "flex-1 flex items-center overflow-hidden" }, A = { class: "text-truncate" }, B = { key: 1 }, I = { class: "flex-1 flex items-center overflow-hidden" }, N = { class: "text-truncate" }, g = /* @__PURE__ */ v({
+const C = { class: "tw-flex tw-flex-1 tw-items-center tw-overflow-hidden" }, A = { class: "tw-truncate" }, B = { key: 1 }, I = { class: "tw-flex tw-flex-1 tw-items-center tw-overflow-hidden" }, N = { class: "tw-truncate" }, g = /* @__PURE__ */ _({
   __name: "AppNavigationItem",
   props: {
     to: {},
@@ -14,13 +14,13 @@ const C = { class: "flex-1 flex items-center overflow-hidden" }, A = { class: "t
     isActive: { type: Boolean, default: !1 }
   },
   setup(u) {
-    const t = u, l = y(!1), f = $();
+    const t = u, l = v(!1), f = y();
     return (e, c) => {
-      const _ = x("router-link");
-      return n(), r("li", null, [
-        b(f)["sub-items"] ? (n(), r("div", B, [
+      const w = $("router-link");
+      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 }], "tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal tw-capitalize"]),
             onClick: c[0] || (c[0] = () => l.value = !l.value)
           }, [
             s("div", I, [
@@ -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, {
+          o(k, {
             "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(), h(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 }], "tw-flex tw-w-full tw-items-center tw-justify-between tw-font-normal tw-capitalize"]),
           "active-class": e.$style.active
         }, {
           default: m(() => [
@@ -60,24 +60,24 @@ 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
 }, V = {
   $style: M
-}, L = /* @__PURE__ */ k(g, [["__cssModules", V]]);
+}, L = /* @__PURE__ */ x(g, [["__cssModules", V]]);
 export {
   L as default
 };