@leaflink/stash 41.6.4 → 42.0.0

package/dist/Module.js

@@ -1,7 +1,7 @@
-import { defineComponent as i, onMounted as l, provide as s, computed as d, openBlock as p, createBlock as u, normalizeClass as b, unref as t, withCtx as m, renderSlot as w } from "vue";
+import { defineComponent as i, onMounted as l, provide as s, computed as d, openBlock as p, createBlock as u, normalizeClass as b, unref as t, withCtx as m, renderSlot as c } from "vue";
 import o from "@leaflink/snitch";
-import { M as c } from "./Module.keys-2cc7d830.js";
-import { _ as v } from "./Box.vue_vue_type_script_setup_true_lang-dd4c9bc9.js";
+import { M as w } from "./Module.keys-2cc7d830.js";
+import { _ as v } from "./Box.vue_vue_type_script_setup_true_lang-69e5176b.js";
 import { M as e } from "./Module.types-3f78f2a0.js";
 const y = /* @__PURE__ */ i({
   name: "ll-module",
@@ -17,11 +17,11 @@ const y = /* @__PURE__ */ i({
     const a = r;
     return l(() => {
       a.variant === "card" && o.warn('Card Modules are no longer a thing. You\'re probably looking for `<RadioGroup variant="card">`.'), a.variant === "list" && o.warn("Only used with deprecated ListView component. Use `table` variant with `Table` component instead.");
-    }), s(c.key, { variant: d(() => a.variant) }), (n, f) => (p(), u(v, {
+    }), s(w.key, { variant: d(() => a.variant) }), (n, f) => (p(), u(v, {
       class: b(["stash-module tw-flex tw-flex-col", {
-        "tw-shadow-none lg:tw-shadow-low tw-bg-transparent": a.variant === t(e).Table,
+        "tw-shadow-none lg:tw-shadow tw-bg-transparent": a.variant === t(e).Table,
         "tw-border tw-border-ice": a.variant === t(e).Card,
-        "tw-shadow-none lg:tw-shadow-low tw-bg-transparent tw-mb-6": a.variant === t(e).List
+        "tw-shadow-none lg:tw-shadow tw-bg-transparent tw-mb-6": a.variant === t(e).List
       }]),
       "data-test": "stash-module",
       "disable-gutters": a.disableGutters,
@@ -29,14 +29,14 @@ const y = /* @__PURE__ */ i({
       "disable-elevation": a.disableElevation || a.variant === t(e).Table || a.variant === t(e).Card || a.variant === t(e).List
     }, {
       default: m(() => [
-        w(n.$slots, "default")
+        c(n.$slots, "default")
       ]),
       _: 3
     }, 8, ["class", "disable-gutters", "disable-padding", "disable-elevation"]));
   }
 });
 export {
-  c as MODULE_INJECTION,
+  w as MODULE_INJECTION,
   e as ModuleVariant,
   y as default
 };

package/dist/Module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Module.js","sources":["../src/components/Module/Module.vue"],"sourcesContent":["<script lang=\"ts\">\n  import Box, { type BoxProps } from '../Box/Box.vue';\n  import { ModuleVariant, type ModuleVariants } from './Module.types';\n\n  export * from './Module.keys';\n  export * from './Module.types';\n\n  export interface ModuleProps extends BoxProps {\n    /**\n     * Variant applied.\n     *\n     * Options: `box`, `card`, `list`.\n     */\n    variant?: ModuleVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, onMounted, provide } from 'vue';\n\n  import { MODULE_INJECTION } from './Module.keys';\n\n  defineOptions({\n    name: 'll-module',\n  });\n\n  const props = withDefaults(defineProps<ModuleProps>(), {\n    variant: ModuleVariant.Box,\n  });\n\n  onMounted(() => {\n    if (props.variant === 'card') {\n      logger.warn('Card Modules are no longer a thing. You\\'re probably looking for `<RadioGroup variant=\"card\">`.');\n    }\n\n    if (props.variant === 'list') {\n      logger.warn('Only used with deprecated ListView component. Use `table` variant with `Table` component instead.');\n    }\n  });\n\n  provide(MODULE_INJECTION.key, { variant: computed(() => props.variant) });\n</script>\n\n<template>\n  <Box\n    class=\"stash-module tw-flex tw-flex-col\"\n    data-test=\"stash-module\"\n    :class=\"{\n      'tw-shadow-none lg:tw-shadow-low tw-bg-transparent': props.variant === ModuleVariant.Table,\n      'tw-border tw-border-ice': props.variant === ModuleVariant.Card,\n      'tw-shadow-none lg:tw-shadow-low tw-bg-transparent tw-mb-6': props.variant === ModuleVariant.List,\n    }\"\n    :disable-gutters=\"props.disableGutters\"\n    :disable-padding=\"props.disablePadding || ['card', 'list', 'table'].includes(props.variant)\"\n    :disable-elevation=\"\n      props.disableElevation ||\n      props.variant === ModuleVariant.Table ||\n      props.variant === ModuleVariant.Card ||\n      props.variant === ModuleVariant.List\n    \"\n  >\n    <slot></slot>\n  </Box>\n</template>\n"],"names":["onMounted","props","logger","provide","MODULE_INJECTION","computed"],"mappings":";;;;;;;;;;;;;;;;;AA+BE,WAAAA,EAAU,MAAM;AACV,MAAAC,EAAM,YAAY,UACpBC,EAAO,KAAK,iGAAiG,GAG3GD,EAAM,YAAY,UACpBC,EAAO,KAAK,mGAAmG;AAAA,IACjH,CACD,GAEOC,EAAAC,EAAiB,KAAK,EAAE,SAASC,EAAS,MAAMJ,EAAM,OAAO,EAAA,CAAG;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Module.js","sources":["../src/components/Module/Module.vue"],"sourcesContent":["<script lang=\"ts\">\n  import Box, { type BoxProps } from '../Box/Box.vue';\n  import { ModuleVariant, type ModuleVariants } from './Module.types';\n\n  export * from './Module.keys';\n  export * from './Module.types';\n\n  export interface ModuleProps extends BoxProps {\n    /**\n     * Variant applied.\n     *\n     * Options: `box`, `card`, `list`.\n     */\n    variant?: ModuleVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, onMounted, provide } from 'vue';\n\n  import { MODULE_INJECTION } from './Module.keys';\n\n  defineOptions({\n    name: 'll-module',\n  });\n\n  const props = withDefaults(defineProps<ModuleProps>(), {\n    variant: ModuleVariant.Box,\n  });\n\n  onMounted(() => {\n    if (props.variant === 'card') {\n      logger.warn('Card Modules are no longer a thing. You\\'re probably looking for `<RadioGroup variant=\"card\">`.');\n    }\n\n    if (props.variant === 'list') {\n      logger.warn('Only used with deprecated ListView component. Use `table` variant with `Table` component instead.');\n    }\n  });\n\n  provide(MODULE_INJECTION.key, { variant: computed(() => props.variant) });\n</script>\n\n<template>\n  <Box\n    class=\"stash-module tw-flex tw-flex-col\"\n    data-test=\"stash-module\"\n    :class=\"{\n      'tw-shadow-none lg:tw-shadow tw-bg-transparent': props.variant === ModuleVariant.Table,\n      'tw-border tw-border-ice': props.variant === ModuleVariant.Card,\n      'tw-shadow-none lg:tw-shadow tw-bg-transparent tw-mb-6': props.variant === ModuleVariant.List,\n    }\"\n    :disable-gutters=\"props.disableGutters\"\n    :disable-padding=\"props.disablePadding || ['card', 'list', 'table'].includes(props.variant)\"\n    :disable-elevation=\"\n      props.disableElevation ||\n      props.variant === ModuleVariant.Table ||\n      props.variant === ModuleVariant.Card ||\n      props.variant === ModuleVariant.List\n    \"\n  >\n    <slot></slot>\n  </Box>\n</template>\n"],"names":["onMounted","props","logger","provide","MODULE_INJECTION","computed"],"mappings":";;;;;;;;;;;;;;;;;AA+BE,WAAAA,EAAU,MAAM;AACV,MAAAC,EAAM,YAAY,UACpBC,EAAO,KAAK,iGAAiG,GAG3GD,EAAM,YAAY,UACpBC,EAAO,KAAK,mGAAmG;AAAA,IACjH,CACD,GAEOC,EAAAC,EAAiB,KAAK,EAAE,SAASC,EAAS,MAAMJ,EAAM,OAAO,EAAA,CAAG;;;;;;;;;;;;;;;;;;"}

package/dist/ModuleFooter.js

@@ -1,19 +1,19 @@
-import { defineComponent as n, ref as l, onBeforeMount as w, inject as u, openBlock as d, createElementBlock as s, normalizeClass as p, unref as o, renderSlot as i } from "vue";
+import { defineComponent as n, ref as l, onBeforeMount as u, inject as w, openBlock as d, createElementBlock as s, normalizeClass as p, unref as o, renderSlot as i } from "vue";
 import { M as a } from "./Module.keys-2cc7d830.js";
 import { M as r } from "./Module.types-3f78f2a0.js";
 const h = /* @__PURE__ */ n({
   __name: "ModuleFooter",
   setup(m) {
     const t = l();
-    return w(() => {
-      const e = u(a.key, a.defaults);
+    return u(() => {
+      const e = w(a.key, a.defaults);
       if (!e.variant)
         throw new Error("ModuleContent must be used within a Module component.");
       t.value = e.variant.value;
     }), (e, f) => (d(), s("div", {
       class: p(["stash-module-footer tw-flex tw-flex-wrap tw-justify-between", {
         "tw-px-3 lg:tw-px-6 tw-pb-6 tw-pt-0 tw-border-b tw-border-ice tw-rounded-b": t.value === o(r).Card,
-        "tw-px-3 lg:tw-px-6 tw-py-3 tw-bg-white tw-rounded lg:tw-rounded-t-none tw-shadow-low lg:tw-shadow-none": t.value === o(r).Table || t.value === o(r).List,
+        "tw-px-3 lg:tw-px-6 tw-py-3 tw-bg-white tw-rounded lg:tw-rounded-t-none tw-shadow lg:tw-shadow-none": t.value === o(r).Table || t.value === o(r).List,
         "tw-pt-3 lg:tw-pt-6 tw-mb-0": t.value === o(r).Box
       }]),
       "data-test": "stash-module-footer"

package/dist/ModuleFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModuleFooter.js","sources":["../src/components/ModuleFooter/ModuleFooter.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, onBeforeMount, ref } from 'vue';\n\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { ModuleVariant } from '../Module/Module.types';\n\n  const moduleVariant = ref();\n\n  onBeforeMount(() => {\n    const moduleInjectedValues = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n    if (!moduleInjectedValues.variant) {\n      throw new Error('ModuleContent must be used within a Module component.');\n    }\n    moduleVariant.value = moduleInjectedValues.variant.value;\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-module-footer tw-flex tw-flex-wrap tw-justify-between\"\n    :class=\"{\n      'tw-px-3 lg:tw-px-6 tw-pb-6 tw-pt-0 tw-border-b tw-border-ice tw-rounded-b': moduleVariant === ModuleVariant.Card,\n      'tw-px-3 lg:tw-px-6 tw-py-3 tw-bg-white tw-rounded lg:tw-rounded-t-none tw-shadow-low lg:tw-shadow-none':\n        moduleVariant === ModuleVariant.Table || moduleVariant === ModuleVariant.List,\n      'tw-pt-3 lg:tw-pt-6 tw-mb-0': moduleVariant === ModuleVariant.Box,\n    }\"\n    data-test=\"stash-module-footer\"\n  >\n    <slot></slot>\n  </div>\n</template>\n"],"names":["moduleVariant","ref","onBeforeMount","moduleInjectedValues","inject","MODULE_INJECTION"],"mappings":";;;;;;AAME,UAAMA,IAAgBC;AAEtB,WAAAC,EAAc,MAAM;AAClB,YAAMC,IAAuBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ;AAC/E,UAAA,CAACF,EAAqB;AAClB,cAAA,IAAI,MAAM,uDAAuD;AAE3D,MAAAH,EAAA,QAAQG,EAAqB,QAAQ;AAAA,IAAA,CACpD;;;;;;;;;;;;"}
+{"version":3,"file":"ModuleFooter.js","sources":["../src/components/ModuleFooter/ModuleFooter.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, onBeforeMount, ref } from 'vue';\n\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { ModuleVariant } from '../Module/Module.types';\n\n  const moduleVariant = ref();\n\n  onBeforeMount(() => {\n    const moduleInjectedValues = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n    if (!moduleInjectedValues.variant) {\n      throw new Error('ModuleContent must be used within a Module component.');\n    }\n    moduleVariant.value = moduleInjectedValues.variant.value;\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-module-footer tw-flex tw-flex-wrap tw-justify-between\"\n    :class=\"{\n      'tw-px-3 lg:tw-px-6 tw-pb-6 tw-pt-0 tw-border-b tw-border-ice tw-rounded-b': moduleVariant === ModuleVariant.Card,\n      'tw-px-3 lg:tw-px-6 tw-py-3 tw-bg-white tw-rounded lg:tw-rounded-t-none tw-shadow lg:tw-shadow-none':\n        moduleVariant === ModuleVariant.Table || moduleVariant === ModuleVariant.List,\n      'tw-pt-3 lg:tw-pt-6 tw-mb-0': moduleVariant === ModuleVariant.Box,\n    }\"\n    data-test=\"stash-module-footer\"\n  >\n    <slot></slot>\n  </div>\n</template>\n"],"names":["moduleVariant","ref","onBeforeMount","moduleInjectedValues","inject","MODULE_INJECTION"],"mappings":";;;;;;AAME,UAAMA,IAAgBC;AAEtB,WAAAC,EAAc,MAAM;AAClB,YAAMC,IAAuBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ;AAC/E,UAAA,CAACF,EAAqB;AAClB,cAAA,IAAI,MAAM,uDAAuD;AAE3D,MAAAH,EAAA,QAAQG,EAAqB,QAAQ;AAAA,IAAA,CACpD;;;;;;;;;;;;"}

package/dist/ModuleHeader.js

@@ -50,7 +50,7 @@ const T = { class: "tw-flex tw-items-center" }, $ = {
     return (e, H) => (l(), r("header", {
       class: n(["stash-module-header tw-flex tw-flex-wrap tw-justify-between", {
         "tw-bg-ice-100 tw-px-3 lg:tw-px-6 tw-py-3 tw-border-b tw-border-ice tw-rounded-t": s.value === a(o).Card,
-        "tw-px-3 lg:tw-px-6 tw-pt-3 lg:tw-pt-6 tw-bg-white tw-mb-6 lg:tw-mb-0 tw-rounded lg:tw-rounded-b-none tw-shadow-low lg:tw-shadow-none": s.value === a(o).Table || s.value === a(o).List,
+        "tw-px-3 lg:tw-px-6 tw-pt-3 lg:tw-pt-6 tw-bg-white tw-mb-6 lg:tw-mb-0 tw-rounded lg:tw-rounded-b-none tw-shadow lg:tw-shadow-none": s.value === a(o).Table || s.value === a(o).List,
         "tw-border-b tw-border-ice-200 tw-mb-3 lg:tw-mb-6": t.underline
       }]),
       "data-test": "stash-module-header"

package/dist/ModuleHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModuleHeader.js","sources":["../src/components/ModuleHeader/ModuleHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref, useCssModule, useSlots } from 'vue';\n\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { ModuleVariant } from '../Module/Module.types';\n\n  defineOptions({\n    name: 'll-module-header',\n  });\n\n  export interface ModuleHeaderProps {\n    /**\n     * Header title. Will get overridden by the `title` slot if provided.\n     */\n    title?: string;\n\n    /**\n     * Size of the header.\n     *\n     * - `small` = `h4`\n     * - `medium` = `h3`\n     * - `large` = `h2`\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * Header description, aka subtitle. Will get overridden by the `description` slot if provided.\n     */\n    description?: string;\n\n    /**\n     * Stop the actions slot from force-wrapping on medium and smalls screens.\n     */\n    preventActionsWrap?: boolean;\n\n    /**\n     * Displays a border at the bottom\n     */\n    underline?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ModuleHeaderProps>(), {\n    title: '',\n    size: 'medium',\n    description: '',\n    preventActionsWrap: false,\n    underline: false,\n  });\n  const classes = useCssModule();\n  const slots = useSlots();\n  const moduleVariant = ref();\n\n  onBeforeMount(() => {\n    const moduleInjectedValues = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n    if (!moduleInjectedValues.variant) {\n      throw new Error('ModuleHeader must be used within a Module component.');\n    }\n    moduleVariant.value = moduleInjectedValues.variant.value;\n  });\n\n  const is = computed(() => {\n    let component;\n\n    switch (props.size) {\n      case 'small':\n        component = 'h4';\n        break;\n\n      case 'medium':\n        component = 'h3';\n        break;\n\n      case 'large':\n        component = 'h2';\n        break;\n\n      default:\n        component = 'h3';\n        break;\n    }\n\n    return component;\n  });\n\n  const marginBottomClasses = computed(() => {\n    const isBoxOrTableOrList =\n      moduleVariant.value === ModuleVariant.Box ||\n      moduleVariant.value === ModuleVariant.Table ||\n      moduleVariant.value === ModuleVariant.List;\n\n    if (isBoxOrTableOrList && !props.underline) {\n      return 'tw-mb-3 lg:tw-mb-6';\n    } else if (isBoxOrTableOrList && props.underline) {\n      return 'tw-mb-3';\n    } else {\n      return '';\n    }\n  });\n</script>\n\n<template>\n  <header\n    class=\"stash-module-header tw-flex tw-flex-wrap tw-justify-between\"\n    :class=\"{\n      'tw-bg-ice-100 tw-px-3 lg:tw-px-6 tw-py-3 tw-border-b tw-border-ice tw-rounded-t':\n        moduleVariant === ModuleVariant.Card,\n      'tw-px-3 lg:tw-px-6 tw-pt-3 lg:tw-pt-6 tw-bg-white tw-mb-6 lg:tw-mb-0 tw-rounded lg:tw-rounded-b-none tw-shadow-low lg:tw-shadow-none':\n        moduleVariant === ModuleVariant.Table || moduleVariant === ModuleVariant.List,\n      'tw-border-b tw-border-ice-200 tw-mb-3 lg:tw-mb-6': props.underline,\n    }\"\n    data-test=\"stash-module-header\"\n  >\n    <div\n      class=\"stash-module-header__content tw-mr-6\"\n      :class=\"marginBottomClasses\"\n      data-test=\"stash-module-header|content\"\n    >\n      <div class=\"tw-flex tw-items-center\">\n        <div\n          v-if=\"slots.media && props.size === 'large'\"\n          class=\"stash-module-header__content__media tw-mr-3\"\n          :class=\"classes.media\"\n          data-test=\"stash-module-header|content-media\"\n        >\n          <slot name=\"media\"></slot>\n        </div>\n\n        <div class=\"stash-module-header__content__text\" data-test=\"stash-module-header|content-text\">\n          <!--\n            @slot Header title\n            @type String\n            @default HTML header element with the `title` prop as the text.\n            TODO: this doesn't work...\n          -->\n          <slot name=\"title\">\n            <component :is=\"is\" v-if=\"props.title\" class=\"tw-my-0\">{{ props.title }}</component>\n          </slot>\n\n          <!--\n            @slot Header title\n            @type String\n            @default HTML <p> element with the `description` prop as the text.\n          -->\n          <slot name=\"description\">\n            <p v-if=\"props.description\" class=\"tw-mt-3 tw-mb-0\">{{ props.description }}</p>\n          </slot>\n        </div>\n      </div>\n    </div>\n\n    <!-- todo: how can we pass a prop/class to actions in order to top align vs middle align? -->\n    <div\n      v-if=\"slots.actions\"\n      class=\"stash-module-header__actions tw-self-center\"\n      :class=\"[\n        marginBottomClasses,\n        {\n          'tw-w-full lg:tw-w-auto': !props.preventActionsWrap,\n        },\n      ]\"\n      data-test=\"stash-module-header|actions\"\n    >\n      <slot name=\"actions\"></slot>\n    </div>\n  </header>\n</template>\n\n<style module>\n  /* max size for media/marketing illustration icons we would be passing to the slot */\n  .media {\n    max-height: 58px;\n    max-width: 58px;\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots","moduleVariant","ref","onBeforeMount","moduleInjectedValues","inject","MODULE_INJECTION","is","computed","component","props","marginBottomClasses","isBoxOrTableOrList","ModuleVariant"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBAgDQA,IAAUC,KACVC,IAAQC,KACRC,IAAgBC;AAEtB,IAAAC,EAAc,MAAM;AAClB,YAAMC,IAAuBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ;AAC/E,UAAA,CAACF,EAAqB;AAClB,cAAA,IAAI,MAAM,sDAAsD;AAE1D,MAAAH,EAAA,QAAQG,EAAqB,QAAQ;AAAA,IAAA,CACpD;AAEK,UAAAG,IAAKC,EAAS,MAAM;AACpB,UAAAC;AAEJ,cAAQC,EAAM,MAAM;AAAA,QAClB,KAAK;AACS,UAAAD,IAAA;AACZ;AAAA,QAEF,KAAK;AACS,UAAAA,IAAA;AACZ;AAAA,QAEF,KAAK;AACS,UAAAA,IAAA;AACZ;AAAA,QAEF;AACc,UAAAA,IAAA;AACZ;AAAA,MACJ;AAEO,aAAAA;AAAA,IAAA,CACR,GAEKE,IAAsBH,EAAS,MAAM;AACnC,YAAAI,IACJX,EAAc,UAAUY,EAAc,OACtCZ,EAAc,UAAUY,EAAc,SACtCZ,EAAc,UAAUY,EAAc;AAEpC,aAAAD,KAAsB,CAACF,EAAM,YACxB,uBACEE,KAAsBF,EAAM,YAC9B,YAEA;AAAA,IACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ModuleHeader.js","sources":["../src/components/ModuleHeader/ModuleHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref, useCssModule, useSlots } from 'vue';\n\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { ModuleVariant } from '../Module/Module.types';\n\n  defineOptions({\n    name: 'll-module-header',\n  });\n\n  export interface ModuleHeaderProps {\n    /**\n     * Header title. Will get overridden by the `title` slot if provided.\n     */\n    title?: string;\n\n    /**\n     * Size of the header.\n     *\n     * - `small` = `h4`\n     * - `medium` = `h3`\n     * - `large` = `h2`\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * Header description, aka subtitle. Will get overridden by the `description` slot if provided.\n     */\n    description?: string;\n\n    /**\n     * Stop the actions slot from force-wrapping on medium and smalls screens.\n     */\n    preventActionsWrap?: boolean;\n\n    /**\n     * Displays a border at the bottom\n     */\n    underline?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ModuleHeaderProps>(), {\n    title: '',\n    size: 'medium',\n    description: '',\n    preventActionsWrap: false,\n    underline: false,\n  });\n  const classes = useCssModule();\n  const slots = useSlots();\n  const moduleVariant = ref();\n\n  onBeforeMount(() => {\n    const moduleInjectedValues = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n    if (!moduleInjectedValues.variant) {\n      throw new Error('ModuleHeader must be used within a Module component.');\n    }\n    moduleVariant.value = moduleInjectedValues.variant.value;\n  });\n\n  const is = computed(() => {\n    let component;\n\n    switch (props.size) {\n      case 'small':\n        component = 'h4';\n        break;\n\n      case 'medium':\n        component = 'h3';\n        break;\n\n      case 'large':\n        component = 'h2';\n        break;\n\n      default:\n        component = 'h3';\n        break;\n    }\n\n    return component;\n  });\n\n  const marginBottomClasses = computed(() => {\n    const isBoxOrTableOrList =\n      moduleVariant.value === ModuleVariant.Box ||\n      moduleVariant.value === ModuleVariant.Table ||\n      moduleVariant.value === ModuleVariant.List;\n\n    if (isBoxOrTableOrList && !props.underline) {\n      return 'tw-mb-3 lg:tw-mb-6';\n    } else if (isBoxOrTableOrList && props.underline) {\n      return 'tw-mb-3';\n    } else {\n      return '';\n    }\n  });\n</script>\n\n<template>\n  <header\n    class=\"stash-module-header tw-flex tw-flex-wrap tw-justify-between\"\n    :class=\"{\n      'tw-bg-ice-100 tw-px-3 lg:tw-px-6 tw-py-3 tw-border-b tw-border-ice tw-rounded-t':\n        moduleVariant === ModuleVariant.Card,\n      'tw-px-3 lg:tw-px-6 tw-pt-3 lg:tw-pt-6 tw-bg-white tw-mb-6 lg:tw-mb-0 tw-rounded lg:tw-rounded-b-none tw-shadow lg:tw-shadow-none':\n        moduleVariant === ModuleVariant.Table || moduleVariant === ModuleVariant.List,\n      'tw-border-b tw-border-ice-200 tw-mb-3 lg:tw-mb-6': props.underline,\n    }\"\n    data-test=\"stash-module-header\"\n  >\n    <div\n      class=\"stash-module-header__content tw-mr-6\"\n      :class=\"marginBottomClasses\"\n      data-test=\"stash-module-header|content\"\n    >\n      <div class=\"tw-flex tw-items-center\">\n        <div\n          v-if=\"slots.media && props.size === 'large'\"\n          class=\"stash-module-header__content__media tw-mr-3\"\n          :class=\"classes.media\"\n          data-test=\"stash-module-header|content-media\"\n        >\n          <slot name=\"media\"></slot>\n        </div>\n\n        <div class=\"stash-module-header__content__text\" data-test=\"stash-module-header|content-text\">\n          <!--\n            @slot Header title\n            @type String\n            @default HTML header element with the `title` prop as the text.\n            TODO: this doesn't work...\n          -->\n          <slot name=\"title\">\n            <component :is=\"is\" v-if=\"props.title\" class=\"tw-my-0\">{{ props.title }}</component>\n          </slot>\n\n          <!--\n            @slot Header title\n            @type String\n            @default HTML <p> element with the `description` prop as the text.\n          -->\n          <slot name=\"description\">\n            <p v-if=\"props.description\" class=\"tw-mt-3 tw-mb-0\">{{ props.description }}</p>\n          </slot>\n        </div>\n      </div>\n    </div>\n\n    <!-- todo: how can we pass a prop/class to actions in order to top align vs middle align? -->\n    <div\n      v-if=\"slots.actions\"\n      class=\"stash-module-header__actions tw-self-center\"\n      :class=\"[\n        marginBottomClasses,\n        {\n          'tw-w-full lg:tw-w-auto': !props.preventActionsWrap,\n        },\n      ]\"\n      data-test=\"stash-module-header|actions\"\n    >\n      <slot name=\"actions\"></slot>\n    </div>\n  </header>\n</template>\n\n<style module>\n  /* max size for media/marketing illustration icons we would be passing to the slot */\n  .media {\n    max-height: 58px;\n    max-width: 58px;\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots","moduleVariant","ref","onBeforeMount","moduleInjectedValues","inject","MODULE_INJECTION","is","computed","component","props","marginBottomClasses","isBoxOrTableOrList","ModuleVariant"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBAgDQA,IAAUC,KACVC,IAAQC,KACRC,IAAgBC;AAEtB,IAAAC,EAAc,MAAM;AAClB,YAAMC,IAAuBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ;AAC/E,UAAA,CAACF,EAAqB;AAClB,cAAA,IAAI,MAAM,sDAAsD;AAE1D,MAAAH,EAAA,QAAQG,EAAqB,QAAQ;AAAA,IAAA,CACpD;AAEK,UAAAG,IAAKC,EAAS,MAAM;AACpB,UAAAC;AAEJ,cAAQC,EAAM,MAAM;AAAA,QAClB,KAAK;AACS,UAAAD,IAAA;AACZ;AAAA,QAEF,KAAK;AACS,UAAAA,IAAA;AACZ;AAAA,QAEF,KAAK;AACS,UAAAA,IAAA;AACZ;AAAA,QAEF;AACc,UAAAA,IAAA;AACZ;AAAA,MACJ;AAEO,aAAAA;AAAA,IAAA,CACR,GAEKE,IAAsBH,EAAS,MAAM;AACnC,YAAAI,IACJX,EAAc,UAAUY,EAAc,OACtCZ,EAAc,UAAUY,EAAc,SACtCZ,EAAc,UAAUY,EAAc;AAEpC,aAAAD,KAAsB,CAACF,EAAM,YACxB,uBACEE,KAAsBF,EAAM,YAC9B,YAEA;AAAA,IACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/QuickAction.js

@@ -1,12 +1,12 @@
 import { defineComponent as l, computed as o, openBlock as u, createBlock as _, resolveDynamicComponent as p, mergeProps as m, withCtx as d, createElementVNode as e, createVNode as s, toDisplayString as r } from "vue";
 import n from "./Icon.js";
-import { _ as w } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as f } from "./_plugin-vue_export-helper-dad06003.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
 import "./uniqueId-847efe53.js";
 import "./toString-7d5bf363.js";
 import "./isObjectLike-54341556.js";
 import "./index-79ce320f.js";
-const f = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3" }, x = { class: "tw-flex-1" }, v = { class: "tw-text-blue" }, b = { class: "subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal" }, k = /* @__PURE__ */ l({
+const w = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3" }, x = { class: "tw-flex-1" }, b = { class: "tw-text-blue" }, v = { class: "subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal" }, k = /* @__PURE__ */ l({
   __name: "QuickAction",
   props: {
     title: {},
@@ -22,11 +22,11 @@ const f = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw
       href: t.href
     } : {});
     return (g, y) => (u(), _(p(i.value), m(a.value, {
-      class: "stash-quick-action root tw-p-3 tw-shadow-low tw-rounded",
+      class: "stash-quick-action root tw-p-3 tw-shadow tw-rounded",
       "data-test": "stash-quick-action"
     }), {
       default: d(() => [
-        e("div", f, [
+        e("div", w, [
           e("div", h, [
             s(n, {
               name: t.icon,
@@ -34,8 +34,8 @@ const f = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw
             }, null, 8, ["name"])
           ]),
           e("div", x, [
-            e("h4", v, r(t.title), 1),
-            e("p", b, r(t.subtitle), 1)
+            e("h4", b, r(t.title), 1),
+            e("p", v, r(t.subtitle), 1)
           ]),
           s(n, {
             name: "arrow-right",
@@ -47,7 +47,7 @@ const f = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw
     }, 16));
   }
 });
-const V = /* @__PURE__ */ w(k, [["__scopeId", "data-v-5688a76c"]]);
+const V = /* @__PURE__ */ f(k, [["__scopeId", "data-v-704bf5c4"]]);
 export {
   V as default
 };

package/dist/QuickAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface QuickActionProps {\n    /**\n     * The title prop will show the first line of text\n     */\n    title: string;\n\n    /**\n     * The subtitle prop will show the second line of text\n     */\n    subtitle: string;\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component\n     */\n    to?: RouteLocationRaw;\n    /**\n     * If defined, the quick action will render as an `<a />` tag.\n     */\n    href?: string;\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n  }\n\n  const props = defineProps<QuickActionProps>();\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'div';\n  });\n\n  const linkAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"linkAttrs\"\n    class=\"stash-quick-action root tw-p-3 tw-shadow-low tw-rounded\"\n    data-test=\"stash-quick-action\"\n  >\n    <div class=\"content tw-flex tw-items-center\">\n      <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n        <Icon :name=\"props.icon\" class=\"tw-text-blue\" />\n      </div>\n      <div class=\"tw-flex-1\">\n        <h4 class=\"tw-text-blue\">{{ props.title }}</h4>\n        <p class=\"subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal\">\n          {{ props.subtitle }}\n        </p>\n      </div>\n      <Icon name=\"arrow-right\" class=\"tw-text-blue\" />\n    </div>\n  </component>\n</template>\n\n<style scoped>\n  .root {\n    background-color: #fff;\n    border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  .root:hover,\n  .root:active,\n  .root:focus {\n    border: 1px solid var(--color-blue-500);\n    text-decoration: none;\n  }\n\n  .content {\n    gap: 12px;\n  }\n</style>\n"],"names":["is","computed","props","linkAttrs"],"mappings":";;;;;;;;;;;;;;;;;;iBAkCQA,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAYF,EAAS,MACrBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface QuickActionProps {\n    /**\n     * The title prop will show the first line of text\n     */\n    title: string;\n\n    /**\n     * The subtitle prop will show the second line of text\n     */\n    subtitle: string;\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component\n     */\n    to?: RouteLocationRaw;\n    /**\n     * If defined, the quick action will render as an `<a />` tag.\n     */\n    href?: string;\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n  }\n\n  const props = defineProps<QuickActionProps>();\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'div';\n  });\n\n  const linkAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"linkAttrs\"\n    class=\"stash-quick-action root tw-p-3 tw-shadow tw-rounded\"\n    data-test=\"stash-quick-action\"\n  >\n    <div class=\"content tw-flex tw-items-center\">\n      <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n        <Icon :name=\"props.icon\" class=\"tw-text-blue\" />\n      </div>\n      <div class=\"tw-flex-1\">\n        <h4 class=\"tw-text-blue\">{{ props.title }}</h4>\n        <p class=\"subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal\">\n          {{ props.subtitle }}\n        </p>\n      </div>\n      <Icon name=\"arrow-right\" class=\"tw-text-blue\" />\n    </div>\n  </component>\n</template>\n\n<style scoped>\n  .root {\n    background-color: #fff;\n    border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  .root:hover,\n  .root:active,\n  .root:focus {\n    border: 1px solid var(--color-blue-500);\n    text-decoration: none;\n  }\n\n  .content {\n    gap: 12px;\n  }\n</style>\n"],"names":["is","computed","props","linkAttrs"],"mappings":";;;;;;;;;;;;;;;;;;iBAkCQA,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAYF,EAAS,MACrBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select.js

@@ -966,7 +966,7 @@ function Cn(e, n, t) {
     update: E
   };
 }
-const Rn = (e) => (Mt("data-v-a0f55f2d"), e = e(), Dt(), e), On = ["id", "aria-errormessage", "aria-invalid", "disabled", "multiple", "name"], kn = ["selected", "value"], Bn = /* @__PURE__ */ Rn(() => /* @__PURE__ */ z("option", { value: "" }, null, -1)), Tn = ["aria-controls", "aria-expanded", "aria-label", "aria-disabled", "onKeyup"], An = ["id"], Ln = ["onKeypress", "onMousedown"], Mn = {
+const Rn = (e) => (Mt("data-v-e1beefda"), e = e(), Dt(), e), On = ["id", "aria-errormessage", "aria-invalid", "disabled", "multiple", "name"], kn = ["selected", "value"], Bn = /* @__PURE__ */ Rn(() => /* @__PURE__ */ z("option", { value: "" }, null, -1)), Tn = ["aria-controls", "aria-expanded", "aria-label", "aria-disabled", "onKeyup"], An = ["id"], Ln = ["onKeypress", "onMousedown"], Mn = {
   key: 0,
   class: "stash-select__total"
 }, Dn = {
@@ -1325,7 +1325,7 @@ const Rn = (e) => (Mt("data-v-a0f55f2d"), e = e(), Dt(), e), On = ["id", "aria-e
                   de(z("div", {
                     ref_key: "optionsWrapperRef",
                     ref: u,
-                    class: "stash-select__border-selector border-selector tw-shadow-low tw-w-full",
+                    class: "stash-select__border-selector border-selector tw-shadow tw-w-full",
                     style: At(F(C)),
                     onClick: m[3] || (m[3] = he(() => {
                     }, ["stop"]))
@@ -1409,7 +1409,7 @@ const Rn = (e) => (Mt("data-v-a0f55f2d"), e = e(), Dt(), e), On = ["id", "aria-e
     ]), 1032, ["id", "add-bottom-space", "class", "error-text", "hint-text", "label", "show-optional-in-label"]));
   }
 });
-const So = /* @__PURE__ */ Kt($n, [["__scopeId", "data-v-a0f55f2d"]]);
+const So = /* @__PURE__ */ Kt($n, [["__scopeId", "data-v-e1beefda"]]);
 export {
   So as default
 };