@leaflink/stash 52.0.2 → 53.0.0

package/README.md

@@ -25,6 +25,7 @@ level. This project is intended to be used across our digital product portfolio.
 - [Legacy Styles](#legacy-styles)
 - [Tailwind](#tailwind)
   - [Configuration](#configuration)
+  - [VSCode](#vscode)
 - [Resources](#resources)
 - [Core files & Entry Points](#core-files--entry-points)
 - [à la carte](#%C3%A0-la-carte)
@@ -67,7 +68,7 @@ pnpm install
 
 ## Quick Start
 
-Stash requires Vue 3 and Tailwind CSS 3. To get started, install the package and its peer dependencies:
+Stash requires Vue 3 and Tailwind CSS v4. To get started, install the package and its peer dependencies:
 
 ```sh
 npx install-peerdeps @leaflink/stash
@@ -81,7 +82,7 @@ import { createApp } from 'vue';
 import stash from '@leaflink/stash';
 
 // stash styles
-import '@leaflink/stash/styles/base.css';
+import '@leaflink/stash/styles/theme.css';
 import '@leaflink/stash/components.css';
 
 // app styles
@@ -92,30 +93,23 @@ 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:
+Your app styles should be loaded after the Stash styles to ensure that they override the Stash styles. **Tailwind v4:**
+Stash uses Tailwind v4 with CSS-first configuration. Simply import Stash's theme styles and add your content sources:
 
 ```css filename="app.css"
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import '@leaflink/stash/styles/backwards-compat.css' layer(base) source(none); /* optional */
+@import '@leaflink/stash/components.css';
+@import 'tailwindcss/utilities.css' layer(utilities) source(none);
+@import '@leaflink/stash/styles/sofia-font.css' layer(base) source(none);
+@import '@leaflink/stash/styles/theme.css';
+
+/* Scan your app files for Tailwind classes */
+@source "./src/**/*.{vue,ts,js}";
 ```
 
-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.
+No `tailwind.config.ts` needed! See the [Tailwind](#tailwind) section and `TAILWIND_V4_MIGRATION.md` for more details.
 
 > [!NOTE] For apps still requiring deprecated css & utility classes, you can include the backwards compat styles from
 > Stash:
@@ -123,7 +117,7 @@ See the [Tailwind](#tailwind) section for more details on how to configure it in
 ```ts filename="main.ts"
 import '@leaflink/stash/styles/backwards-compat.css'; // Add this line before the base and components styles.
 import '@leaflink/stash/styles/sofia-font.css'; // Add this line before the base and components styles if you're using the Sofia font.
-import '@leaflink/stash/styles/base.css';
+import '@leaflink/stash/styles/theme.css';
 import '@leaflink/stash/components.css';
 import './app.css';
 ```
@@ -151,7 +145,7 @@ export default defineConfig(({ mode }) => {
 
 `@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`.
+etc. can be accessible via tailwind utility classes like `text-blue-500 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.
@@ -278,7 +272,7 @@ import '@leaflink/stash/styles/backwards-compat.css';
 import '@leaflink/stash/styles/sofia-font.css';
 
 /* stash styles */
-import '@leaflink/stash/styles/base.css';
+import '@leaflink/stash/styles/theme.css';
 import '@leaflink/stash/components.css';
 
 import './app.css';
@@ -289,15 +283,11 @@ import './app.css';
 `@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 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`.
-
 ```jsx
 import Button from '@leaflink/stash/Button.vue';
 import IconLabel from '@leaflink/stash/IconLabel.vue';
 
-<Button icon-label class="tw-hidden md:tw-inline tw-ml-3">
+<Button icon-label class="hidden md:inline ml-3">
   <IconLabel icon="user-add" title="Add Recipient" size="dense" stacked>
     Add Recipient
   </IconLabel>
@@ -306,30 +296,41 @@ import IconLabel from '@leaflink/stash/IconLabel.vue';
 
 ### Configuration
 
-In order to properly use Tailwind with Stash, it's necessary to add Stash's base styles as a preset of your project.
-
-```ts
-// tailwind.config.ts
+**Tailwind v4 Configuration:**
 
-import stashPreset from '@leaflink/stash/tailwind-base';
+Stash uses Tailwind v4 with CSS-first configuration. Import Stash's base styles in your main CSS file:
 
-/** @type {import('tailwindcss').Config} */
-export default {
-  presets: [stashPreset],
+```css
+/* app.css */
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import '@leaflink/stash/styles/backwards-compat.css' layer(base) source(none); /* optional */
+@import '@leaflink/stash/components.css';
+@import 'tailwindcss/utilities.css' layer(utilities) source(none);
+@import '@leaflink/stash/styles/sofia-font.css' layer(base) source(none);
+@import '@leaflink/stash/styles/theme.css';
 
-  content: ['./src/**/*.{vue,ts,js}', './node_modules/@leaflink/stash/dist/*.js'],
+/* Scan your app files */
+@source "./src/**/*.{vue,ts,js}";
 
-  theme: {
-    extend: {
-      // Add this to your tailwind config to use the DM Sans font instead of the legacy Sofia font.
-      fontFamily: {
-        sans: ['DM Sans', 'sans-serif'],
-      },
-    },
-  },
-};
+/* Optional: Override theme values */
+@theme {
+  /* Use DM Sans instead of Sofia */
+  --font-family-sans: 'DM Sans', sans-serif;
+}
 ```
 
+### VSCode
+
+To avoid warnings from VSCode (and Cursor) saying "Unknown at rule" for `@reference`, `@apply`, and others from
+tailwind:
+
+1. Create a `.vscode/` directory (it is gitignored)
+2. Add a `settings.json` file inside of it unless one already exists
+3. Create a `custom-css.json` file in the `.vscode` directory
+4. In the `custom-css.json` file, copy-paste its content from
+   [here](https://github.com/tailwindlabs/tailwindcss/discussions/5258#discussioncomment-13239940)
+
 ## Resources
 
 - **index.js**: This is the "install" entry point, for use with `app.use(...)`.
@@ -382,7 +383,7 @@ package itself.
   Required compatibility with this package on version **^4.x**.
 
 - `tailwindcss`: Our utility-first CSS framework used for building our responsive and customizable components. Required
-  compatibility with this package on version **^3.3.1** or higher.
+  compatibility with this package on version **^4.x.x**.
 
 - `vue-router`: The official router for Vue.js applications. Required compatibility with this package on version
   **^4.x** or higher.

package/dist/Accordion.js

@@ -1,14 +1,14 @@
-import { defineComponent as v, useSlots as x, useCssModule as y, ref as E, watch as b, createElementBlock as a, openBlock as c, createElementVNode as s, withDirectives as k, createVNode as i, withKeys as h, normalizeClass as w, withModifiers as C, unref as l, renderSlot as _, Fragment as M, toDisplayString as S, vShow as $, withCtx as z } from "vue";
+import { defineComponent as x, useSlots as w, useCssModule as y, ref as E, watch as b, createElementBlock as a, openBlock as c, createElementVNode as s, withDirectives as k, createVNode as i, withKeys as h, normalizeClass as _, withModifiers as C, unref as l, renderSlot as m, Fragment as M, toDisplayString as S, vShow as $, withCtx as z } from "vue";
 import { _ as B } from "./Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js";
-import m from "./Icon.js";
+import g from "./Icon.js";
 import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const A = {
-  class: "stash-accordion tw-rounded tw-border tw-border-ice-500 tw-bg-white",
+  class: "stash-accordion rounded border border-ice-500 bg-white",
   "data-test": "stash-accordion"
-}, D = ["onKeypress"], I = { key: 0 }, N = { class: "tw-flex-1 tw-select-none tw-font-medium tw-leading-5 tw-text-ice-900" }, V = { class: "tw-mx-[18px] tw-h-px tw-bg-ice-200" }, j = {
-  class: "stash-accordion__content tw-p-[18px]",
+}, D = ["onKeypress"], I = { key: 0 }, N = { class: "flex-1 select-none font-medium leading-5 text-ice-900" }, V = { class: "mx-[18px] border-ice-200" }, j = {
+  class: "stash-accordion__content p-[18px]",
   "data-test": "stash-accordion|content"
-}, F = /* @__PURE__ */ v({
+}, F = /* @__PURE__ */ x({
   __name: "Accordion",
   props: {
     icon: { default: "circle-info" },
@@ -16,8 +16,8 @@ const A = {
     isExpanded: { type: Boolean, default: !1 }
   },
   emits: ["toggle", "open", "close"],
-  setup(g, { emit: f }) {
-    const t = g, d = x(), r = f, p = y();
+  setup(f, { emit: v }) {
+    const t = f, d = w(), r = v, p = y();
     if (!t.title && !d.header)
       throw new Error("Either a title prop or header slot must be provided");
     const e = E(t.isExpanded);
@@ -36,7 +36,7 @@ const A = {
       s("div", {
         tabindex: "0",
         "data-test": "stash-accordion|toggle",
-        class: w(["stash-accordion__toggle tw-flex tw-items-center", [l(p).toggle, e.value && l(p)["toggle--open"]]]),
+        class: _(["stash-accordion__toggle flex items-center", [l(p).toggle, e.value && l(p)["toggle--open"]]]),
         onClick: n,
         onKeypress: [
           h(n, ["enter"]),
@@ -44,18 +44,18 @@ const A = {
         ]
       }, [
         l(d).header ? (c(), a("div", I, [
-          _(o.$slots, "header")
+          m(o.$slots, "header")
         ])) : (c(), a(M, { key: 1 }, [
-          i(m, {
-            class: "tw-text-blue-500",
+          i(g, {
+            class: "text-blue-500",
             size: "dense",
             name: t.icon,
             "data-test": "stash-accordion|toggle-icon"
           }, null, 8, ["name"]),
           s("div", N, S(t.title), 1)
         ], 64)),
-        i(m, {
-          class: w(["tw-ml-auto tw-justify-center tw-text-ice-900 tw-transition-transform tw-duration-300", { "tw-rotate-180": e.value }]),
+        i(g, {
+          class: _(["ml-auto justify-center text-ice-900 transition-transform duration-300", { "rotate-180": e.value }]),
           size: "dense",
           name: "chevron-down",
           "data-test": "stash-accordion|toggle-chevron"
@@ -67,14 +67,14 @@ const A = {
       i(B, { "is-expanded": e.value }, {
         default: z(() => [
           s("div", j, [
-            _(o.$slots, "default")
+            m(o.$slots, "default")
           ])
         ]),
         _: 3
       }, 8, ["is-expanded"])
     ]));
   }
-}), q = "_toggle_1lu5k_2", G = {
+}), q = "_toggle_iohx0_5", G = {
   toggle: q
 }, H = {
   $style: G

package/dist/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../src/components/Accordion/Accordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useCssModule, useSlots, watch } from 'vue';\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 AccordionProps {\n    /**\n     * The filename of the icon that will be displayed on the left side of the header\n     */\n    icon?: IconName;\n\n    /**\n     * Title of the Accordion, displayed in the header\n     */\n    title?: string;\n\n    /**\n     * Whether the Accordion is expanded or not\n     */\n    isExpanded?: boolean;\n  }\n\n  type ToggleState = {\n    isExpanded: boolean;\n  };\n\n  const props = withDefaults(defineProps<AccordionProps>(), {\n    icon: 'circle-info',\n    title: undefined,\n    isExpanded: false,\n  });\n  const slots = useSlots();\n\n  const emit = defineEmits<{\n    (e: 'toggle', state: ToggleState): void;\n    (e: 'open' | 'close'): void;\n  }>();\n\n  const classes = useCssModule();\n\n  if (!props.title && !slots.header) {\n    throw new Error('Either a title prop or header slot must be provided');\n  }\n\n  const localIsExpanded = ref(props.isExpanded);\n\n  function emitEvents() {\n    emit('toggle', { isExpanded: localIsExpanded.value });\n    emit(localIsExpanded.value ? 'open' : 'close');\n  }\n\n  const toggle = () => {\n    localIsExpanded.value = !localIsExpanded.value;\n    emitEvents();\n  };\n\n  watch(\n    () => props.isExpanded,\n    (newVal) => {\n      localIsExpanded.value = newVal;\n      emitEvents();\n    },\n  );\n</script>\n\n<template>\n  <div class=\"stash-accordion tw-rounded tw-border tw-border-ice-500 tw-bg-white\" data-test=\"stash-accordion\">\n    <div\n      tabindex=\"0\"\n      data-test=\"stash-accordion|toggle\"\n      class=\"stash-accordion__toggle tw-flex tw-items-center\"\n      :class=\"[classes.toggle, localIsExpanded && classes['toggle--open']]\"\n      @click=\"toggle\"\n      @keypress.enter=\"toggle\"\n      @keypress.space.prevent=\"toggle\"\n    >\n      <div v-if=\"slots.header\">\n        <!-- @slot Accordion header -->\n        <slot name=\"header\"> </slot>\n      </div>\n      <template v-else>\n        <Icon class=\"tw-text-blue-500\" size=\"dense\" :name=\"props.icon\" data-test=\"stash-accordion|toggle-icon\" />\n        <div class=\"tw-flex-1 tw-select-none tw-font-medium tw-leading-5 tw-text-ice-900\">\n          {{ props.title }}\n        </div>\n      </template>\n\n      <Icon\n        class=\"tw-ml-auto tw-justify-center tw-text-ice-900 tw-transition-transform tw-duration-300\"\n        size=\"dense\"\n        name=\"chevron-down\"\n        data-test=\"stash-accordion|toggle-chevron\"\n        :class=\"{ 'tw-rotate-180': localIsExpanded }\"\n      />\n    </div>\n    <hr v-show=\"localIsExpanded\" class=\"tw-mx-[18px] tw-h-px tw-bg-ice-200\" />\n    <Expand :is-expanded=\"localIsExpanded\">\n      <div class=\"stash-accordion__content tw-p-[18px]\" data-test=\"stash-accordion|content\">\n        <!-- @slot Accordion content -->\n        <slot></slot>\n      </div>\n    </Expand>\n  </div>\n</template>\n\n<style module>\n  .toggle {\n    @apply tw-outline-none tw-ring-blue-500 tw-ring-opacity-15;\n\n    display: flex;\n    cursor: pointer;\n    gap: theme('gap[1.5]');\n    padding: 17px;\n    outline: none;\n    border-radius: theme('borderRadius.DEFAULT');\n\n    &:focus-visible {\n      @apply tw-ring-4;\n      border-color: var(--color-ice-900);\n      padding: 15px;\n      border-width: 2px;\n    }\n\n    &--open {\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--color-ice-100);\n      }\n    }\n\n    &:active {\n      background-color: var(--color-ice-200);\n    }\n\n    &:active + hr,\n    &:hover + hr {\n      opacity: 0;\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emit","__emit","classes","useCssModule","localIsExpanded","ref","emitEvents","toggle","watch","newVal"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BE,UAAMA,IAAQC,GAKRC,IAAQC,EAAA,GAERC,IAAOC,GAKPC,IAAUC,EAAA;AAEhB,QAAI,CAACP,EAAM,SAAS,CAACE,EAAM;AACzB,YAAM,IAAI,MAAM,qDAAqD;AAGvE,UAAMM,IAAkBC,EAAIT,EAAM,UAAU;AAE5C,aAASU,IAAa;AACpB,MAAAN,EAAK,UAAU,EAAE,YAAYI,EAAgB,OAAO,GACpDJ,EAAKI,EAAgB,QAAQ,SAAS,OAAO;AAAA,IAC/C;AAEA,UAAMG,IAAS,MAAM;AACnB,MAAAH,EAAgB,QAAQ,CAACA,EAAgB,OACzCE,EAAA;AAAA,IACF;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,CAACa,MAAW;AACV,QAAAL,EAAgB,QAAQK,GACxBH,EAAA;AAAA,MACF;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Accordion.js","sources":["../src/components/Accordion/Accordion.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useCssModule, useSlots, watch } from 'vue';\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 AccordionProps {\n    /**\n     * The filename of the icon that will be displayed on the left side of the header\n     */\n    icon?: IconName;\n\n    /**\n     * Title of the Accordion, displayed in the header\n     */\n    title?: string;\n\n    /**\n     * Whether the Accordion is expanded or not\n     */\n    isExpanded?: boolean;\n  }\n\n  type ToggleState = {\n    isExpanded: boolean;\n  };\n\n  const props = withDefaults(defineProps<AccordionProps>(), {\n    icon: 'circle-info',\n    title: undefined,\n    isExpanded: false,\n  });\n  const slots = useSlots();\n\n  const emit = defineEmits<{\n    (e: 'toggle', state: ToggleState): void;\n    (e: 'open' | 'close'): void;\n  }>();\n\n  const classes = useCssModule();\n\n  if (!props.title && !slots.header) {\n    throw new Error('Either a title prop or header slot must be provided');\n  }\n\n  const localIsExpanded = ref(props.isExpanded);\n\n  function emitEvents() {\n    emit('toggle', { isExpanded: localIsExpanded.value });\n    emit(localIsExpanded.value ? 'open' : 'close');\n  }\n\n  const toggle = () => {\n    localIsExpanded.value = !localIsExpanded.value;\n    emitEvents();\n  };\n\n  watch(\n    () => props.isExpanded,\n    (newVal) => {\n      localIsExpanded.value = newVal;\n      emitEvents();\n    },\n  );\n</script>\n\n<template>\n  <div class=\"stash-accordion rounded border border-ice-500 bg-white\" data-test=\"stash-accordion\">\n    <div\n      tabindex=\"0\"\n      data-test=\"stash-accordion|toggle\"\n      class=\"stash-accordion__toggle flex items-center\"\n      :class=\"[classes.toggle, localIsExpanded && classes['toggle--open']]\"\n      @click=\"toggle\"\n      @keypress.enter=\"toggle\"\n      @keypress.space.prevent=\"toggle\"\n    >\n      <div v-if=\"slots.header\">\n        <!-- @slot Accordion header -->\n        <slot name=\"header\"> </slot>\n      </div>\n      <template v-else>\n        <Icon class=\"text-blue-500\" size=\"dense\" :name=\"props.icon\" data-test=\"stash-accordion|toggle-icon\" />\n        <div class=\"flex-1 select-none font-medium leading-5 text-ice-900\">\n          {{ props.title }}\n        </div>\n      </template>\n\n      <Icon\n        class=\"ml-auto justify-center text-ice-900 transition-transform duration-300\"\n        size=\"dense\"\n        name=\"chevron-down\"\n        data-test=\"stash-accordion|toggle-chevron\"\n        :class=\"{ 'rotate-180': localIsExpanded }\"\n      />\n    </div>\n    <hr v-show=\"localIsExpanded\" class=\"mx-[18px] border-ice-200\" />\n    <Expand :is-expanded=\"localIsExpanded\">\n      <div class=\"stash-accordion__content p-[18px]\" data-test=\"stash-accordion|content\">\n        <!-- @slot Accordion content -->\n        <slot></slot>\n      </div>\n    </Expand>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .toggle {\n      @apply outline-none ring-blue-500/15;\n\n      display: flex;\n      cursor: pointer;\n      gap: --spacing(1.5);\n      padding: 17px;\n      outline: none;\n      border-radius: var(--radius-sm);\n\n      &:focus-visible {\n        @apply ring-4;\n        border-color: var(--color-ice-900);\n        padding: 15px;\n        border-width: 2px;\n      }\n\n      &--open {\n        border-bottom-right-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--color-ice-100);\n        }\n      }\n\n      &:active {\n        background-color: var(--color-ice-200);\n      }\n\n      &:active + hr,\n      &:hover + hr {\n        opacity: 0;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emit","__emit","classes","useCssModule","localIsExpanded","ref","emitEvents","toggle","watch","newVal"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BE,UAAMA,IAAQC,GAKRC,IAAQC,EAAA,GAERC,IAAOC,GAKPC,IAAUC,EAAA;AAEhB,QAAI,CAACP,EAAM,SAAS,CAACE,EAAM;AACzB,YAAM,IAAI,MAAM,qDAAqD;AAGvE,UAAMM,IAAkBC,EAAIT,EAAM,UAAU;AAE5C,aAASU,IAAa;AACpB,MAAAN,EAAK,UAAU,EAAE,YAAYI,EAAgB,OAAO,GACpDJ,EAAKI,EAAgB,QAAQ,SAAS,OAAO;AAAA,IAC/C;AAEA,UAAMG,IAAS,MAAM;AACnB,MAAAH,EAAgB,QAAQ,CAACA,EAAgB,OACzCE,EAAA;AAAA,IACF;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,CAACa,MAAW;AACV,QAAAL,EAAgB,QAAQK,GACxBH,EAAA;AAAA,MACF;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AccordionGroup.js

@@ -1,16 +1,16 @@
-import { createElementBlock as t, openBlock as r, renderSlot as c } from "vue";
-import { _ as e } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { createElementBlock as e, openBlock as r, renderSlot as t } from "vue";
+import { _ as c } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const s = {}, a = {
-  class: "stash-accordion-group tw-space-y-2",
+  class: "stash-accordion-group flex flex-col gap-y-2",
   "data-test": "stash-accordion-group"
 };
 function n(o, d) {
-  return r(), t("div", a, [
-    c(o.$slots, "default")
+  return r(), e("div", a, [
+    t(o.$slots, "default")
   ]);
 }
-const p = /* @__PURE__ */ e(s, [["render", n]]);
+const _ = /* @__PURE__ */ c(s, [["render", n]]);
 export {
-  p as default
+  _ as default
 };
 //# sourceMappingURL=AccordionGroup.js.map

package/dist/AccordionGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionGroup.js","sources":["../src/components/AccordionGroup/AccordionGroup.vue"],"sourcesContent":["<template>\n  <div class=\"stash-accordion-group tw-space-y-2\" data-test=\"stash-accordion-group\">\n    <slot></slot>\n  </div>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock"],"mappings":";;cACOA,IAAM;AAAA,EAAqC,OAAA;AAAA;;AAAhD,SAAAC,EAAAC,GAAAC,GAAA;SACEC,EAAa,GAAAC,EAAA,OAAAL,GAAA;AAAA;;;;"}
+{"version":3,"file":"AccordionGroup.js","sources":["../src/components/AccordionGroup/AccordionGroup.vue"],"sourcesContent":["<template>\n  <div class=\"stash-accordion-group flex flex-col gap-y-2\" data-test=\"stash-accordion-group\">\n    <slot></slot>\n  </div>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock"],"mappings":";;cACOA,IAAM;AAAA,EAA8C,OAAA;AAAA;;AAAzD,SAAAC,EAAAC,GAAAC,GAAA;SACEC,EAAa,GAAAC,EAAA,OAAAL,GAAA;AAAA;;;;"}

package/dist/ActionsDropdown.js

@@ -1,4 +1,4 @@
-import { defineComponent as i, useCssModule as p, createBlock as u, openBlock as f, normalizeClass as s, unref as n, createSlots as w, withCtx as e, createVNode as a, createTextVNode as _, toDisplayString as m, renderSlot as b } from "vue";
+import { defineComponent as i, useCssModule as p, createBlock as u, openBlock as f, normalizeClass as s, unref as n, createSlots as _, withCtx as e, createVNode as a, createTextVNode as m, toDisplayString as b, renderSlot as w } from "vue";
 import { t as C } from "./locale.js";
 import x from "./Button.js";
 import g from "./Dropdown.js";
@@ -14,24 +14,24 @@ const y = /* @__PURE__ */ i({
     buttonText: { default: () => C("ll.actions") }
   },
   setup(d) {
-    const t = d, o = p();
+    const o = d, t = p();
     return (l, N) => (f(), u(g, {
-      align: t.align,
-      "content-class": [n(o).dropdownContent, t.contentClass],
-      class: s(n(o).actionsDropdown)
-    }, w({
-      toggle: e(({ isActive: r, toggle: c }) => [
+      align: o.align,
+      "content-class": [n(t).dropdownContent, o.contentClass],
+      class: s(n(t).actionsDropdown)
+    }, _({
+      toggle: e(({ isActive: c, toggle: r }) => [
         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 }]]),
+          class: s(["button flex w-full items-center justify-between border border-blue-500 text-blue-500", [n(t).actionButton, { [n(t).disabled]: o.disabled }]]),
           secondary: "",
-          "aria-expanded": r.toString(),
-          disabled: t.disabled,
-          onClick: c
+          "aria-expanded": c.toString(),
+          disabled: o.disabled,
+          onClick: r
         }, {
           default: e(() => [
-            _(m(t.buttonText) + " ", 1),
+            m(b(o.buttonText) + " ", 1),
             a(B, {
-              class: "tw-ml-1.5",
+              class: "ml-1.5",
               name: "caret-down"
             })
           ]),
@@ -40,16 +40,16 @@ const y = /* @__PURE__ */ i({
       ]),
       _: 2
     }, [
-      t.disabled ? void 0 : {
+      o.disabled ? void 0 : {
         name: "default",
         fn: e(() => [
-          b(l.$slots, "default")
+          w(l.$slots, "default")
         ]),
         key: "0"
       }
     ]), 1032, ["align", "content-class", "class"]));
   }
-}), k = "_actionButton_144dr_2", S = "_disabled_144dr_12", M = "_dropdownContent_144dr_18", T = "_actionsDropdown_144dr_33", h = {
+}), k = "_actionButton_1i07n_5", S = "_disabled_1i07n_15", M = "_dropdownContent_1i07n_21", T = "_actionsDropdown_1i07n_36", h = {
   actionButton: k,
   disabled: S,
   dropdownContent: M,

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 tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-border-blue-500 tw-text-blue-500\"\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":["props","__props","classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;AAgCE,UAAMA,IAAQC,GAORC,IAAUC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 w-full items-center justify-between border border-blue-500 text-blue-500\"\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=\"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  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\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 (width >= theme(--breakpoint-md)) {\n      .actionsDropdown {\n        min-width: 156px;\n      }\n\n      .dropdownContent:global(.dropdown__content) {\n        min-width: 156px;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;AAgCE,UAAMA,IAAQC,GAORC,IAAUC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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    ]\n      .filter(Boolean)\n      .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(\n    () => props.modelValue,\n    () => {\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    },\n    { immediate: true },\n  );\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","props","__props","emit","__emit","slots","useSlots","stashOptions","inject","googleMapsApiKey","computed","getPlaceDetails","getPlacePredictions","useGoogleMaps","isLoading","ref","options","internalValue","debouncedSearch","debounce","search","formattedAddress","_a","_b","_c","_d","_e","_f","watch","option","uniqueId","query","error","select","address"],"mappings":"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"}
+{"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    ]\n      .filter(Boolean)\n      .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(\n    () => props.modelValue,\n    () => {\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    },\n    { immediate: true },\n  );\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","props","__props","emit","__emit","slots","useSlots","stashOptions","inject","googleMapsApiKey","computed","getPlaceDetails","getPlacePredictions","useGoogleMaps","isLoading","ref","options","internalValue","debouncedSearch","debounce","search","formattedAddress","_a","_b","_c","_d","_e","_f","watch","option","uniqueId","query","error","select","address"],"mappings":"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"}

package/dist/AddressSelect.vue.d.ts

@@ -91,7 +91,7 @@ export declare interface AddressSelectProps {
     /**
      * Model value address
      */
-    modelValue: Address;
+    modelValue?: Address;
     /**
      * Hint text to be passed down to Select component
      */

package/dist/Alert.js

@@ -1,11 +1,11 @@
-import { defineComponent as x, useSlots as $, useCssModule as C, ref as I, computed as s, withDirectives as S, createCommentVNode as i, createElementBlock as l, openBlock as o, normalizeClass as r, createVNode as w, createElementVNode as f, unref as t, renderSlot as m } from "vue";
-import y from "lodash-es/capitalize";
+import { defineComponent as w, useSlots as $, useCssModule as C, ref as I, computed as s, withDirectives as S, createCommentVNode as i, createElementBlock as l, openBlock as o, normalizeClass as r, createVNode as f, createElementVNode as m, unref as t, renderSlot as y } from "vue";
+import p from "lodash-es/capitalize";
 import B from "lodash-es/uniqueId";
 import { S as M, a as N } from "./statusLevels-D8EgtE_L.js";
 import V from "./directives/sticky.js";
-import p from "./Icon.js";
+import b from "./Icon.js";
 import { _ as j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
+const z = { class: "m-0" }, A = /* @__PURE__ */ w({
   name: "ll-alert",
   __name: "Alert",
   props: {
@@ -16,55 +16,55 @@ const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
     sticky: { default: null },
     variant: { default: "outlined" }
   },
-  setup(b) {
-    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");
+  setup(g) {
+    const e = g, _ = B("close-icon"), h = $(), a = C(), c = I(!0), u = s(() => M[p(e.severity)]), k = s(() => N[p(e.severity)]), x = s(() => e.variant === "filled" && ["warning", "success"].includes(e.severity) ? "text-ice-900" : e.variant === "filled" && ["info", "error"].includes(e.severity) ? "text-white" : `text-${k.value}`), n = s(() => e.variant === "filled" && ["info", "error"].includes(e.severity) ? "text-white" : "text-ice-900");
     return (d, v) => c.value ? S((o(), l("div", {
       key: 0,
-      class: r(["stash-alert tw-relative tw-flex tw-items-center tw-border tw-border-solid tw-p-3 tw-leading-6", [
+      class: r(["stash-alert relative flex items-center border border-solid p-3 leading-6", [
         `stash-alert--${e.severity}`,
         `stash-alert--${e.variant}`,
         n.value,
         {
-          "tw-my-6": e.variant === "outlined",
+          "my-6": e.variant === "outlined",
           // Todo - this makes ZERO sense. We should remove this altogether and let the consumer handle the margin.
-          "tw-rounded": e.radius === "standard",
-          "tw-border-red-500": e.severity === "error",
-          "tw-border-orange-500": e.severity === "warning",
-          "tw-border-blue-500": e.severity === "info",
-          "tw-border-green-500": e.severity === "success",
-          "tw-bg-red-500": e.severity === "error" && e.variant === "filled",
-          "tw-bg-orange-500": e.severity === "warning" && e.variant === "filled",
-          "tw-bg-blue-500": e.severity === "info" && e.variant === "filled",
-          "tw-bg-green-500": e.severity === "success" && e.variant === "filled",
-          "tw-bg-red-100": e.severity === "error" && e.variant === "outlined",
-          "tw-bg-orange-100": e.severity === "warning" && e.variant === "outlined",
-          "tw-bg-blue-100": e.severity === "info" && e.variant === "outlined",
-          "tw-bg-green-100": e.severity === "success" && e.variant === "outlined"
+          rounded: e.radius === "standard",
+          "border-red-500": e.severity === "error",
+          "border-orange-500": e.severity === "warning",
+          "border-blue-500": e.severity === "info",
+          "border-green-500": e.severity === "success",
+          "bg-red-500": e.severity === "error" && e.variant === "filled",
+          "bg-orange-500": e.severity === "warning" && e.variant === "filled",
+          "bg-blue-500": e.severity === "info" && e.variant === "filled",
+          "bg-green-500": e.severity === "success" && e.variant === "filled",
+          "bg-red-100": e.severity === "error" && e.variant === "outlined",
+          "bg-orange-100": e.severity === "warning" && e.variant === "outlined",
+          "bg-blue-100": e.severity === "info" && e.variant === "outlined",
+          "bg-green-100": e.severity === "success" && e.variant === "outlined"
         }
       ]]),
       "data-test": "stash-alert"
     }, [
-      w(p, {
-        class: r(["stash-alert__icon", [t(a).iconInfo, k.value, `stash-alert__icon--${u.value}`]]),
+      f(b, {
+        class: r(["stash-alert__icon", [t(a).iconInfo, x.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-flex-wrap tw-px-2", {
-          "tw-justify-center": e.centered,
-          "tw-justify-between": !e.centered
+      m("div", {
+        class: r(["flex flex-1 flex-wrap px-2", {
+          "justify-center": e.centered,
+          "justify-between": !e.centered
         }])
       }, [
-        f("p", z, [
-          m(d.$slots, "default")
+        m("p", z, [
+          y(d.$slots, "default")
         ]),
-        t(_).link ? (o(), l("div", {
+        t(h).link ? (o(), l("div", {
           key: 0,
-          class: r(["stash-alert__link tw-cursor-pointer tw-underline hover:tw-no-underline", [t(a).link, n.value, { "tw-ml-2": e.centered }]]),
+          class: r(["stash-alert__link cursor-pointer underline hover:no-underline", [t(a).link, n.value, { "ml-2": e.centered }]]),
           "data-test": "stash-alert|link"
         }, [
-          m(d.$slots, "link")
+          y(d.$slots, "link")
         ], 2)) : i("", !0)
       ], 2),
       e.permanent ? i("", !0) : (o(), l("button", {
@@ -74,8 +74,8 @@ const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
         "data-test": "stash-alert|close",
         onClick: v[0] || (v[0] = (q) => c.value = !1)
       }, [
-        w(p, {
-          id: t(g),
+        f(b, {
+          id: t(_),
           name: "close",
           title: "Dismiss alert"
         }, null, 8, ["id"])

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-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":["props","__props","iconId","uniqueId","slots","useSlots","classes","useCssModule","show","ref","icon","computed","StatusIcons","capitalize","color","StatusColors","iconColor","computedTextColor"],"mappings":";;;;;;;;;;;;;;;;;;;AAwDE,UAAMA,IAAQC,GASRC,IAASC,EAAS,YAAY,GAC9BC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GACVC,IAAOC,EAAI,EAAI,GACfC,IAAOC,EAAqB,MAAMC,EAAYC,EAAWb,EAAM,QAAQ,CAAC,CAAC,GACzEc,IAAQH,EAAsB,MAAMI,EAAaF,EAAWb,EAAM,QAAQ,CAAC,CAAC,GAE5EgB,IAAYL,EAAiB,MAC7BX,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,IAAoBN,EAAiB,MACrCX,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 'text-ice-900';\n    }\n\n    if (props.variant === 'filled' && ['info', 'error'].includes(props.severity)) {\n      return 'text-white';\n    }\n\n    return `text-${color.value}`;\n  });\n\n  const computedTextColor = computed<string>(() => {\n    if (props.variant === 'filled' && ['info', 'error'].includes(props.severity)) {\n      return 'text-white';\n    }\n\n    return 'text-ice-900';\n  });\n</script>\n\n<template>\n  <div\n    v-if=\"show\"\n    v-sticky=\"props.sticky\"\n    class=\"stash-alert relative flex items-center border border-solid p-3 leading-6\"\n    :class=\"[\n      `stash-alert--${props.severity}`,\n      `stash-alert--${props.variant}`,\n      computedTextColor,\n      {\n        'my-6': props.variant === 'outlined', // Todo - this makes ZERO sense. We should remove this altogether and let the consumer handle the margin.\n        rounded: props.radius === 'standard',\n        'border-red-500': props.severity === 'error',\n        'border-orange-500': props.severity === 'warning',\n        'border-blue-500': props.severity === 'info',\n        'border-green-500': props.severity === 'success',\n        'bg-red-500': props.severity === 'error' && props.variant === 'filled',\n        'bg-orange-500': props.severity === 'warning' && props.variant === 'filled',\n        'bg-blue-500': props.severity === 'info' && props.variant === 'filled',\n        'bg-green-500': props.severity === 'success' && props.variant === 'filled',\n        'bg-red-100': props.severity === 'error' && props.variant === 'outlined',\n        'bg-orange-100': props.severity === 'warning' && props.variant === 'outlined',\n        'bg-blue-100': props.severity === 'info' && props.variant === 'outlined',\n        '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=\"flex flex-1 flex-wrap px-2\"\n      :class=\"{\n        'justify-center': props.centered,\n        'justify-between': !props.centered,\n      }\"\n    >\n      <p class=\"m-0\">\n        <slot></slot>\n      </p>\n\n      <div\n        v-if=\"slots.link\"\n        class=\"stash-alert__link cursor-pointer underline hover:no-underline\"\n        :class=\"[classes.link, computedTextColor, { '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  @layer utilities {\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: var(--color-white);\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","iconId","uniqueId","slots","useSlots","classes","useCssModule","show","ref","icon","computed","StatusIcons","capitalize","color","StatusColors","iconColor","computedTextColor"],"mappings":";;;;;;;;;;;;;;;;;;;AAwDE,UAAMA,IAAQC,GASRC,IAASC,EAAS,YAAY,GAC9BC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GACVC,IAAOC,EAAI,EAAI,GACfC,IAAOC,EAAqB,MAAMC,EAAYC,EAAWb,EAAM,QAAQ,CAAC,CAAC,GACzEc,IAAQH,EAAsB,MAAMI,EAAaF,EAAWb,EAAM,QAAQ,CAAC,CAAC,GAE5EgB,IAAYL,EAAiB,MAC7BX,EAAM,YAAY,YAAY,CAAC,WAAW,SAAS,EAAE,SAASA,EAAM,QAAQ,IACvE,iBAGLA,EAAM,YAAY,YAAY,CAAC,QAAQ,OAAO,EAAE,SAASA,EAAM,QAAQ,IAClE,eAGF,QAAQc,EAAM,KAAK,EAC3B,GAEKG,IAAoBN,EAAiB,MACrCX,EAAM,YAAY,YAAY,CAAC,QAAQ,OAAO,EAAE,SAASA,EAAM,QAAQ,IAClE,eAGF,cACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}