@leaflink/stash 53.4.1 → 53.4.2

package/dist/Accordion.js

@@ -1,5 +1,5 @@
 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 { _ as B } from "./Expand.vue_vue_type_script_setup_true_lang-BmNJA0Xy.js";
 import g from "./Icon.js";
 import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const A = {

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 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_unref","_hoisted_3","_renderSlot","_ctx","_Fragment","_createVNode","Icon","_hoisted_4","_toDisplayString","_withDirectives","_hoisted_5","Expand","_hoisted_6"],"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,cAKFI,EAAA,GAAAC,EAoCM,OApCNC,GAoCM;AAAA,MAnCJC,EA2BM,OAAA;AAAA,QA1BJ,UAAS;AAAA,QACT,aAAU;AAAA,QACV,OAAKC,EAAA,CAAC,6CAA2C,CACxCC,EAAAb,CAAA,EAAQ,QAAQE,EAAA,SAAmBW,EAAAb,CAAA,EAAO,cAAA,CAAA,CAAA,CAAA;AAAA,QAClD,SAAOK;AAAA,QACP,YAAQ;AAAA,YAAQA,GAAM,CAAA,OAAA,CAAA;AAAA,cACEA,GAAM,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,QAAA;AAAA;QAEpBQ,EAAAjB,CAAA,EAAM,eAAjBa,EAGM,OAAAK,GAAA;AAAA,UADJC,EAA4BC,EAAA,QAAA,QAAA;AAAA,QAAA,YAE9BP,EAKWQ,GAAA,EAAA,KAAA,KAAA;AAAA,UAJTC,EAAsGC,GAAA;AAAA,YAAhG,OAAM;AAAA,YAAgB,MAAK;AAAA,YAAS,MAAMzB,EAAM;AAAA,YAAM,aAAU;AAAA,UAAA;UACtEiB,EAEM,OAFNS,GAEMC,EADD3B,EAAM,KAAK,GAAA,CAAA;AAAA,QAAA;QAIlBwB,EAMEC,GAAA;AAAA,UALA,OAAKP,EAAA,CAAC,yEAAuE,EAAA,cAIrDV,EAAA,MAAA,CAAe,CAAA;AAAA,UAHvC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,aAAU;AAAA,QAAA;;MAIdoB,EAAAX,EAAgE,MAAhEY,GAAgE,MAAA,GAAA,GAAA;AAAA,YAApDrB,EAAA,KAAe;AAAA,MAAA;MAC3BgB,EAKSM,GAAA,EALA,eAAatB,EAAA,SAAe;AAAA,mBACnC,MAGM;AAAA,UAHNS,EAGM,OAHNc,GAGM;AAAA,YADJV,EAAaC,EAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;;;;"}

package/dist/ActionsDropdown.js

@@ -35,8 +35,8 @@ const y = /* @__PURE__ */ i({
               name: "caret-down"
             })
           ]),
-          _: 2
-        }, 1032, ["aria-expanded", "class", "disabled", "onClick"])
+          _: 1
+        }, 8, ["aria-expanded", "class", "disabled", "onClick"])
       ]),
       _: 2
     }, [

package/dist/ActionsDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsDropdown.js","sources":["../src/components/ActionsDropdown/ActionsDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-actions-dropdown',\n  });\n\n  export interface ActionsDropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * Indicates whether the trigger button is disabled or not\n     */\n    disabled?: boolean;\n    /**\n     * Class to be applied to the dropdown content\n     */\n    contentClass?: string;\n    /**\n     * Text to be displayed on the trigger button\n     */\n    buttonText?: string;\n  }\n\n  const props = withDefaults(defineProps<ActionsDropdownProps>(), {\n    align: 'left',\n    disabled: false,\n    contentClass: '',\n    buttonText: () => t('ll.actions'),\n  });\n\n  const classes = useCssModule();\n</script>\n\n<template>\n  <Dropdown\n    :align=\"props.align\"\n    :content-class=\"[classes.dropdownContent, props.contentClass]\"\n    :class=\"classes.actionsDropdown\"\n  >\n    <template #toggle=\"{ isActive, toggle }\">\n      <Button\n        class=\"button flex 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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","_createBlock","Dropdown","_unref","_normalizeClass","_withCtx","isActive","toggle","_createVNode","Button","Icon","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;AAgCE,UAAMA,IAAQC,GAORC,IAAUC,EAAA;2BAIhBC,EAsBWC,GAAA;AAAA,MArBR,OAAOL,EAAM;AAAA,MACb,kBAAgBM,EAAAJ,CAAA,EAAQ,iBAAiBF,EAAM,YAAY;AAAA,MAC3D,OAAKO,EAAED,EAAAJ,CAAA,EAAQ,eAAe;AAAA,IAAA;MAEpB,QAAMM,EACf,CASS,EAVU,UAAAC,GAAU,QAAAC,QAAM;AAAA,QACnCC,EASSC,GAAA;AAAA,UARP,OAAKL,EAAA,CAAC,wFAAsF,CAGnFD,EAAAJ,CAAA,EAAQ,cAAY,EAAA,CAAKI,EAAAJ,CAAA,EAAQ,QAAQ,GAAGF,EAAM,SAAA,CAAQ,CAAA,CAAA;AAAA,UAFnE,WAAA;AAAA,UACC,iBAAeS,EAAS,SAAA;AAAA,UAExB,UAAUT,EAAM;AAAA,UAChB,SAAOU;AAAA,QAAA;qBAER,MAAsB;AAAA,gBAAnBV,EAAM,UAAU,IAAG,KAAC,CAAA;AAAA,YAAAW,EAAyCE,GAAA;AAAA,cAAnC,OAAM;AAAA,cAAS,MAAK;AAAA,YAAA;;;;;;;MAIpCb,EAAM;cAAW;AAAA,cAEhC,MAAa;AAAA,UAAbc,EAAaC,EAAA,QAAA,SAAA;AAAA,QAAA;;;;;;;;;;;;;"}

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    } 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    } 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    } 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    } 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","_createBlock","Select","_unref","_renderSlot","_ctx"],"mappings":"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"}

package/dist/AddressSelect.vue.d.ts

@@ -153,9 +153,9 @@ onError?: ((value: unknown) => any) | undefined;
 }>, {
 disabled: boolean;
 label: string;
+placeholder: string;
 errorText: string;
 hintText: string;
-placeholder: string;
 preventEmpty: boolean;
 modelValue: Address;
 apiKey: string;

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 '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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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","_createElementBlock","_createVNode","Icon","_normalizeClass","_unref","_createElementVNode","_hoisted_1","_renderSlot","_ctx","vSticky"],"mappings":"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"}

package/dist/AppNavigationItem.js

@@ -1,5 +1,5 @@
 import { defineComponent as v, ref as y, useSlots as $, resolveComponent as b, createElementBlock as r, openBlock as o, createBlock as h, unref as k, normalizeClass as a, withCtx as m, createElementVNode as t, renderSlot as d, createVNode as n, toDisplayString as u } from "vue";
-import { _ as x } from "./Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js";
+import { _ as x } from "./Expand.vue_vue_type_script_setup_true_lang-BmNJA0Xy.js";
 import i from "./Icon.js";
 import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const C = { class: "flex flex-1 items-center overflow-hidden" }, A = { class: "truncate" }, B = { key: 1 }, I = { class: "flex flex-1 items-center overflow-hidden" }, N = { class: "truncate" }, g = /* @__PURE__ */ v({

package/dist/AppNavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppNavigationItem.js","sources":["../src/components/AppNavigationItem/AppNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useSlots } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import Expand from '../Expand/Expand.vue';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface AppNavigationItemProps {\n    /**\n     * Location to navigate to\n     */\n    to: RouteLocationRaw;\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n    /**\n     * Text label to render\n     */\n    label: string;\n    /**\n     * Indicates whether the route is active or not\n     */\n    isActive?: boolean;\n  }\n\n  const isExpanded = ref(false);\n\n  const props = withDefaults(defineProps<AppNavigationItemProps>(), {\n    isActive: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <li>\n    <router-link\n      v-if=\"!slots['sub-items']\"\n      :to=\"props.to\"\n      :class=\"[$style.item, { [$style.active]: props.isActive }]\"\n      :active-class=\"$style.active\"\n      class=\"flex w-full items-center justify-between font-normal capitalize\"\n    >\n      <div class=\"flex flex-1 items-center overflow-hidden\">\n        <Icon :name=\"props.icon\" class=\"mr-3\" />\n        <span class=\"truncate\">{{ props.label }}</span>\n      </div>\n      <!-- @slot Default component slot, for content to the right side of item -->\n      <slot></slot>\n    </router-link>\n    <div v-else>\n      <button\n        :class=\"[$style.item, { [$style.expanded]: isExpanded }]\"\n        class=\"flex w-full items-center justify-between font-normal capitalize\"\n        @click=\"() => (isExpanded = !isExpanded)\"\n      >\n        <div class=\"flex flex-1 items-center overflow-hidden\">\n          <Icon :name=\"props.icon\" class=\"mr-3\" />\n          <span class=\"truncate\">{{ props.label }}</span>\n        </div>\n        <Icon :class=\"[$style.caret, { [$style.expandedIcon]: isExpanded }]\" name=\"chevron-left\" />\n      </button>\n      <Expand :is-expanded=\"isExpanded\" :class=\"$style.expand\">\n        <ul :class=\"$style['sub-items']\">\n          <!-- @slot Sub items component slot, for rendering nested navigation items -->\n          <slot name=\"sub-items\"></slot>\n        </ul>\n      </Expand>\n    </div>\n  </li>\n</template>\n\n<style module>\n  @layer utilities {\n    .item {\n      border-left: 6px solid transparent;\n      color: var(--color-ice-500);\n      padding: 10px 12px;\n      transition: background-color 150ms;\n    }\n\n    .item:hover,\n    .item:focus {\n      text-decoration: none;\n      background: #140e35;\n    }\n\n    .sub-items .item {\n      padding-left: 40px;\n    }\n\n    .expanded {\n      background-color: #263256;\n    }\n\n    .active {\n      color: var(--color-seafoam-500);\n      border-color: var(--color-seafoam-500);\n      background: #140e35;\n    }\n\n    .caret {\n      transition: transform 300ms ease-in-out;\n    }\n\n    .expanded .caret {\n      transform: rotate(-90deg);\n    }\n  }\n</style>\n"],"names":["isExpanded","ref","props","__props","slots","useSlots"],"mappings":";;;;;;;;;;;;;AA2BE,UAAMA,IAAaC,EAAI,EAAK,GAEtBC,IAAQC,GAIRC,IAAQC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AppNavigationItem.js","sources":["../src/components/AppNavigationItem/AppNavigationItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useSlots } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import Expand from '../Expand/Expand.vue';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface AppNavigationItemProps {\n    /**\n     * Location to navigate to\n     */\n    to: RouteLocationRaw;\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n    /**\n     * Text label to render\n     */\n    label: string;\n    /**\n     * Indicates whether the route is active or not\n     */\n    isActive?: boolean;\n  }\n\n  const isExpanded = ref(false);\n\n  const props = withDefaults(defineProps<AppNavigationItemProps>(), {\n    isActive: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <li>\n    <router-link\n      v-if=\"!slots['sub-items']\"\n      :to=\"props.to\"\n      :class=\"[$style.item, { [$style.active]: props.isActive }]\"\n      :active-class=\"$style.active\"\n      class=\"flex w-full items-center justify-between font-normal capitalize\"\n    >\n      <div class=\"flex flex-1 items-center overflow-hidden\">\n        <Icon :name=\"props.icon\" class=\"mr-3\" />\n        <span class=\"truncate\">{{ props.label }}</span>\n      </div>\n      <!-- @slot Default component slot, for content to the right side of item -->\n      <slot></slot>\n    </router-link>\n    <div v-else>\n      <button\n        :class=\"[$style.item, { [$style.expanded]: isExpanded }]\"\n        class=\"flex w-full items-center justify-between font-normal capitalize\"\n        @click=\"() => (isExpanded = !isExpanded)\"\n      >\n        <div class=\"flex flex-1 items-center overflow-hidden\">\n          <Icon :name=\"props.icon\" class=\"mr-3\" />\n          <span class=\"truncate\">{{ props.label }}</span>\n        </div>\n        <Icon :class=\"[$style.caret, { [$style.expandedIcon]: isExpanded }]\" name=\"chevron-left\" />\n      </button>\n      <Expand :is-expanded=\"isExpanded\" :class=\"$style.expand\">\n        <ul :class=\"$style['sub-items']\">\n          <!-- @slot Sub items component slot, for rendering nested navigation items -->\n          <slot name=\"sub-items\"></slot>\n        </ul>\n      </Expand>\n    </div>\n  </li>\n</template>\n\n<style module>\n  @layer utilities {\n    .item {\n      border-left: 6px solid transparent;\n      color: var(--color-ice-500);\n      padding: 10px 12px;\n      transition: background-color 150ms;\n    }\n\n    .item:hover,\n    .item:focus {\n      text-decoration: none;\n      background: #140e35;\n    }\n\n    .sub-items .item {\n      padding-left: 40px;\n    }\n\n    .expanded {\n      background-color: #263256;\n    }\n\n    .active {\n      color: var(--color-seafoam-500);\n      border-color: var(--color-seafoam-500);\n      background: #140e35;\n    }\n\n    .caret {\n      transition: transform 300ms ease-in-out;\n    }\n\n    .expanded .caret {\n      transform: rotate(-90deg);\n    }\n  }\n</style>\n"],"names":["isExpanded","ref","props","__props","slots","useSlots","_createElementBlock","_unref","_hoisted_3","_createElementVNode","_normalizeClass","$style","_cache","_hoisted_4","_createVNode","Icon","_hoisted_5","_toDisplayString","Expand","_renderSlot","_ctx","_createBlock","_component_router_link","_hoisted_1","_hoisted_2"],"mappings":";;;;;;;;;;;;;AA2BE,UAAMA,IAAaC,EAAI,EAAK,GAEtBC,IAAQC,GAIRC,IAAQC,EAAA;;;kBAIdC,EAkCK,MAAA,MAAA;AAAA,QAhCMC,EAAAH,CAAA,EAAK,WAAA,UAadE,EAkBM,OAAAE,GAAA;AAAA,UAjBJC,EAUS,UAAA;AAAA,YATN,OAAKC,EAAA,CAAA,CAAGC,EAAAA,OAAO,MAAI,EAAA,CAAKA,EAAAA,OAAO,QAAQ,GAAGX,EAAA,OAAU,GAC/C,iEAAiE,CAAA;AAAA,YACtE,SAAKY,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,MAASZ,EAAA,QAAU,CAAIA,EAAA;AAAA,UAAA;YAE7BS,EAGM,OAHNI,GAGM;AAAA,cAFJC,EAAwCC,GAAA;AAAA,gBAAjC,MAAMb,EAAM;AAAA,gBAAM,OAAM;AAAA,cAAA;cAC/BO,EAA+C,QAA/CO,GAA+CC,EAArBf,EAAM,KAAK,GAAA,CAAA;AAAA,YAAA;YAEvCY,EAA2FC,GAAA;AAAA,cAApF,OAAKL,EAAA,CAAGC,SAAO,UAAUA,EAAAA,OAAO,YAAY,GAAGX,EAAA,MAAA,CAAU,CAAA;AAAA,cAAK,MAAK;AAAA,YAAA;;UAE5Ec,EAKSI,GAAA;AAAA,YALA,eAAalB,EAAA;AAAA,YAAa,OAAKU,EAAEC,EAAAA,OAAO,MAAM;AAAA,UAAA;uBACrD,MAGK;AAAA,cAHLF,EAGK,MAAA;AAAA,gBAHA,SAAOE,EAAAA,OAAM,WAAA,CAAA;AAAA,cAAA;gBAEhBQ,EAA8BC,EAAA,QAAA,WAAA;AAAA,cAAA;;;;oBA7BpCC,EAacC,GAAA;AAAA;UAXX,IAAIpB,EAAM;AAAA,UACV,OAAKQ,EAAA,CAAA,CAAGC,EAAAA,OAAO,MAAI,EAAA,CAAKA,EAAAA,OAAO,MAAM,GAAGT,EAAM,aAEzC,iEAAiE,CAAA;AAAA,UADtE,gBAAcS,EAAAA,OAAO;AAAA,QAAA;qBAGtB,MAGM;AAAA,YAHNF,EAGM,OAHNc,GAGM;AAAA,cAFJT,EAAwCC,GAAA;AAAA,gBAAjC,MAAMb,EAAM;AAAA,gBAAM,OAAM;AAAA,cAAA;cAC/BO,EAA+C,QAA/Ce,GAA+CP,EAArBf,EAAM,KAAK,GAAA,CAAA;AAAA,YAAA;YAGvCiB,EAAaC,EAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;;;;;;;;"}

package/dist/AppSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppSidebar.js","sources":["../src/components/AppSidebar/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useSlots, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Divider from '../Divider/Divider.vue';\n\n  export interface AppSidebarProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    isOpen?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AppSidebarProps>(), {\n    isOpen: false,\n  });\n\n  const slots = useSlots();\n\n  const emit = defineEmits<{\n    /**\n     * @deprecated Use the `update:is-open` event instead\n     */\n    (e: 'dismiss'): void;\n    (e: 'update:is-open', isOpen: boolean): void;\n  }>();\n\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n  const isBackdropVisible = computed(() => props.isOpen && !isExtraLargeScreen.value);\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const isSidebarOpen = computed(() => props.isOpen || isExtraLargeScreen.value);\n\n  function onBackdropClick() {\n    emit('dismiss');\n    emit('update:is-open', false);\n  }\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watchEffect(() => {\n    if (isExtraLargeScreen.value) {\n      return;\n    }\n\n    if (isBackdropVisible.value) {\n      Object.assign(initialPageScrollingElementStyle.value, {\n        overflow: getPageScrollingElement().style.overflow,\n        height: getPageScrollingElement().style.height,\n      });\n    }\n\n    Object.assign(getPageScrollingElement().style, {\n      overflow: isBackdropVisible.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when AppSidebar is open\n      height: isBackdropVisible.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when AppSidebar is open\n    });\n  });\n</script>\n\n<template>\n  <div\n    id=\"stash-app-sidebar\"\n    class=\"stash-app-sidebar relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'z-modal': isBackdropVisible,\n      'z-[301]': !isBackdropVisible,\n    }\"\n    data-test=\"stash-app-sidebar\"\n  >\n    <Transition name=\"backdrop\">\n      <Backdrop v-show=\"isBackdropVisible\" class=\"stash-app-sidebar__backdrop\" @click.stop=\"onBackdropClick\" />\n    </Transition>\n    <Transition name=\"aside\">\n      <aside\n        v-show=\"isSidebarOpen\"\n        class=\"stash-app-sidebar__aside fixed flex h-screen flex-col bg-purple-500\"\n        :class=\"{ 'shadow-3xl': isBackdropVisible }\"\n        data-test=\"stash-app-sidebar__aside\"\n      >\n        <Divider class=\"stash-app-sidebar__divider\" />\n        <div v-if=\"slots['app-context']\" class=\"px-3 pt-6\">\n          <!-- @slot App Context component slot, ideally for rendering the context switcher -->\n          <slot name=\"app-context\"></slot>\n        </div>\n        <div v-if=\"slots['company-context']\" class=\"px-3 pt-6\">\n          <!-- @slot Company Context component slot, ideally for rendering the company picker -->\n          <slot name=\"company-context\"></slot>\n        </div>\n        <nav v-if=\"slots['navigation']\" class=\"pt-6\">\n          <ul role=\"menubar\" aria-orientation=\"vertical\">\n            <!-- @slot Navigation component slot, for rendering navigation items -->\n            <slot name=\"navigation\"></slot>\n          </ul>\n        </nav>\n        <div class=\"flex-1\"></div>\n        <!-- @slot Footer component slot, for rendering version/environment notes -->\n        <slot name=\"footer\"></slot>\n      </aside>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n  @layer utilities {\n    .stash-app-sidebar__aside {\n      padding-top: calc(var(--height-topbar) - 1px); /* -1px to compensate for the border height */\n      width: var(--width-sidebar);\n    }\n\n    .stash-app-sidebar__divider::before,\n    .stash-app-sidebar__divider::after {\n      border-bottom: 1px solid rgb(255 255 255 / 12%);\n    }\n\n    .backdrop-enter-active,\n    .backdrop-leave-active {\n      transition: opacity 200ms ease-in-out;\n    }\n\n    .backdrop-enter-from,\n    .backdrop-leave-to {\n      opacity: 0;\n    }\n\n    .aside-enter-active,\n    .aside-leave-active {\n      transition:\n        opacity 200ms ease-in-out,\n        transform 200ms ease-in-out;\n    }\n\n    .aside-enter-from,\n    .aside-leave-to {\n      opacity: 0;\n      transform: translateX(-20%);\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emit","__emit","isExtraLargeScreen","useMediaQuery","isBackdropVisible","computed","initialPageScrollingElementStyle","ref","isSidebarOpen","onBackdropClick","getPageScrollingElement","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,EAAA,GAERC,IAAOC,GAQPC,IAAqBC,EAAc,gCAAgC,GACnEC,IAAoBC,EAAS,MAAMT,EAAM,UAAU,CAACM,EAAmB,KAAK,GAC5EI,IAAmCC,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEC,IAAgBH,EAAS,MAAMT,EAAM,UAAUM,EAAmB,KAAK;AAE7E,aAASO,IAAkB;AACzB,MAAAT,EAAK,SAAS,GACdA,EAAK,kBAAkB,EAAK;AAAA,IAC9B;AAEA,aAASU,IAA0B;AACjC,aAAQ,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,WAAAC,EAAY,MAAM;AAChB,MAAIT,EAAmB,UAInBE,EAAkB,SACpB,OAAO,OAAOE,EAAiC,OAAO;AAAA,QACpD,UAAUI,IAA0B,MAAM;AAAA,QAC1C,QAAQA,EAAA,EAA0B,MAAM;AAAA,MAAA,CACzC,GAGH,OAAO,OAAOA,EAAA,EAA0B,OAAO;AAAA,QAC7C,UAAUN,EAAkB,QAAQ,WAAWE,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQF,EAAkB,QAAQ,SAASE,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AppSidebar.js","sources":["../src/components/AppSidebar/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useSlots, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Divider from '../Divider/Divider.vue';\n\n  export interface AppSidebarProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    isOpen?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AppSidebarProps>(), {\n    isOpen: false,\n  });\n\n  const slots = useSlots();\n\n  const emit = defineEmits<{\n    /**\n     * @deprecated Use the `update:is-open` event instead\n     */\n    (e: 'dismiss'): void;\n    (e: 'update:is-open', isOpen: boolean): void;\n  }>();\n\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n  const isBackdropVisible = computed(() => props.isOpen && !isExtraLargeScreen.value);\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const isSidebarOpen = computed(() => props.isOpen || isExtraLargeScreen.value);\n\n  function onBackdropClick() {\n    emit('dismiss');\n    emit('update:is-open', false);\n  }\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watchEffect(() => {\n    if (isExtraLargeScreen.value) {\n      return;\n    }\n\n    if (isBackdropVisible.value) {\n      Object.assign(initialPageScrollingElementStyle.value, {\n        overflow: getPageScrollingElement().style.overflow,\n        height: getPageScrollingElement().style.height,\n      });\n    }\n\n    Object.assign(getPageScrollingElement().style, {\n      overflow: isBackdropVisible.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when AppSidebar is open\n      height: isBackdropVisible.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when AppSidebar is open\n    });\n  });\n</script>\n\n<template>\n  <div\n    id=\"stash-app-sidebar\"\n    class=\"stash-app-sidebar relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'z-modal': isBackdropVisible,\n      'z-[301]': !isBackdropVisible,\n    }\"\n    data-test=\"stash-app-sidebar\"\n  >\n    <Transition name=\"backdrop\">\n      <Backdrop v-show=\"isBackdropVisible\" class=\"stash-app-sidebar__backdrop\" @click.stop=\"onBackdropClick\" />\n    </Transition>\n    <Transition name=\"aside\">\n      <aside\n        v-show=\"isSidebarOpen\"\n        class=\"stash-app-sidebar__aside fixed flex h-screen flex-col bg-purple-500\"\n        :class=\"{ 'shadow-3xl': isBackdropVisible }\"\n        data-test=\"stash-app-sidebar__aside\"\n      >\n        <Divider class=\"stash-app-sidebar__divider\" />\n        <div v-if=\"slots['app-context']\" class=\"px-3 pt-6\">\n          <!-- @slot App Context component slot, ideally for rendering the context switcher -->\n          <slot name=\"app-context\"></slot>\n        </div>\n        <div v-if=\"slots['company-context']\" class=\"px-3 pt-6\">\n          <!-- @slot Company Context component slot, ideally for rendering the company picker -->\n          <slot name=\"company-context\"></slot>\n        </div>\n        <nav v-if=\"slots['navigation']\" class=\"pt-6\">\n          <ul role=\"menubar\" aria-orientation=\"vertical\">\n            <!-- @slot Navigation component slot, for rendering navigation items -->\n            <slot name=\"navigation\"></slot>\n          </ul>\n        </nav>\n        <div class=\"flex-1\"></div>\n        <!-- @slot Footer component slot, for rendering version/environment notes -->\n        <slot name=\"footer\"></slot>\n      </aside>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n  @layer utilities {\n    .stash-app-sidebar__aside {\n      padding-top: calc(var(--height-topbar) - 1px); /* -1px to compensate for the border height */\n      width: var(--width-sidebar);\n    }\n\n    .stash-app-sidebar__divider::before,\n    .stash-app-sidebar__divider::after {\n      border-bottom: 1px solid rgb(255 255 255 / 12%);\n    }\n\n    .backdrop-enter-active,\n    .backdrop-leave-active {\n      transition: opacity 200ms ease-in-out;\n    }\n\n    .backdrop-enter-from,\n    .backdrop-leave-to {\n      opacity: 0;\n    }\n\n    .aside-enter-active,\n    .aside-leave-active {\n      transition:\n        opacity 200ms ease-in-out,\n        transform 200ms ease-in-out;\n    }\n\n    .aside-enter-from,\n    .aside-leave-to {\n      opacity: 0;\n      transform: translateX(-20%);\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emit","__emit","isExtraLargeScreen","useMediaQuery","isBackdropVisible","computed","initialPageScrollingElementStyle","ref","isSidebarOpen","onBackdropClick","getPageScrollingElement","watchEffect","_createElementBlock","_createVNode","_Transition","Backdrop","_createElementVNode","_normalizeClass","Divider","_unref","_openBlock","_hoisted_1","_renderSlot","_ctx","_hoisted_2","_hoisted_3","_hoisted_4"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,EAAA,GAERC,IAAOC,GAQPC,IAAqBC,EAAc,gCAAgC,GACnEC,IAAoBC,EAAS,MAAMT,EAAM,UAAU,CAACM,EAAmB,KAAK,GAC5EI,IAAmCC,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEC,IAAgBH,EAAS,MAAMT,EAAM,UAAUM,EAAmB,KAAK;AAE7E,aAASO,IAAkB;AACzB,MAAAT,EAAK,SAAS,GACdA,EAAK,kBAAkB,EAAK;AAAA,IAC9B;AAEA,aAASU,IAA0B;AACjC,aAAQ,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,WAAAC,EAAY,MAAM;AAChB,MAAIT,EAAmB,UAInBE,EAAkB,SACpB,OAAO,OAAOE,EAAiC,OAAO;AAAA,QACpD,UAAUI,IAA0B,MAAM;AAAA,QAC1C,QAAQA,EAAA,EAA0B,MAAM;AAAA,MAAA,CACzC,GAGH,OAAO,OAAOA,EAAA,EAA0B,OAAO;AAAA,QAC7C,UAAUN,EAAkB,QAAQ,WAAWE,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQF,EAAkB,QAAQ,SAASE,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IACH,CAAC,mBAIDM,EAwCM,OAAA;AAAA,MAvCJ,IAAG;AAAA,MACH,UAAM,8BAA4B;AAAA,sCACYJ,EAAA;AAAA,mBAAgCJ,EAAA;AAAA,oBAAqCA,EAAA;AAAA,MAAA;MAKnH,aAAU;AAAA,IAAA;MAEVS,EAEaC,GAAA,EAFD,MAAK,cAAU;AAAA,mBACzB,MAAyG;AAAA,YAAzGD,EAAyGE,GAAA;AAAA,YAApE,OAAM;AAAA,YAA+B,WAAYN,GAAe,CAAA,MAAA,CAAA;AAAA,UAAA;gBAAnFL,EAAA,KAAiB;AAAA,UAAA;;;;MAErCS,EA0BaC,GAAA,EA1BD,MAAK,WAAO;AAAA,mBACtB,MAwBQ;AAAA,YAxBRE,EAwBQ,SAAA;AAAA,YAtBN,OAAKC,EAAA,CAAC,uEAAqE,EAAA,cACnDb,EAAA,MAAA,CAAiB,CAAA;AAAA,YACzC,aAAU;AAAA,UAAA;YAEVS,EAA8CK,GAAA,EAArC,OAAM,8BAA4B;AAAA,YAChCC,EAAArB,CAAA,EAAK,aAAA,KAAhBsB,EAAA,GAAAR,EAGM,OAHNS,GAGM;AAAA,cADJC,EAAgCC,EAAA,QAAA,eAAA,CAAA,GAAA,QAAA,EAAA;AAAA,YAAA;YAEvBJ,EAAArB,CAAA,EAAK,iBAAA,KAAhBsB,EAAA,GAAAR,EAGM,OAHNY,GAGM;AAAA,cADJF,EAAoCC,EAAA,QAAA,mBAAA,CAAA,GAAA,QAAA,EAAA;AAAA,YAAA;YAE3BJ,EAAArB,CAAA,EAAK,cAAhBsB,EAAA,GAAAR,EAKM,OALNa,GAKM;AAAA,cAJJT,EAGK,MAHLU,GAGK;AAAA,gBADHJ,EAA+BC,EAAA,QAAA,cAAA,CAAA,GAAA,QAAA,EAAA;AAAA,cAAA;;4BAGnCP,EAA0B,OAAA,EAArB,OAAM,SAAA,GAAQ,MAAA,EAAA;AAAA,YAEnBM,EAA2BC,EAAA,QAAA,UAAA,CAAA,GAAA,QAAA,EAAA;AAAA,UAAA;gBAtBnBf,EAAA,KAAa;AAAA,UAAA;;;;;;;"}

package/dist/AppTopbar.js

@@ -1,7 +1,7 @@
 import { defineComponent as m, createElementBlock as f, openBlock as h, createElementVNode as e, normalizeClass as i, createVNode as a, unref as b, renderSlot as o } from "vue";
 import u from "./useMediaQuery.js";
 import x from "./Icon.js";
-import { _ as l } from "./Logo.vue_vue_type_script_setup_true_lang-DghNC_k6.js";
+import { _ as l } from "./Logo.vue_vue_type_script_setup_true_lang-qiNaaWWV.js";
 const _ = {
   "data-test": "stash-app-topbar",
   class: "stash-app-topbar absolute left-0 top-0"

package/dist/AppTopbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppTopbar.js","sources":["../src/components/AppTopbar/AppTopbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Icon from '../Icon/Icon.vue';\n  import Logo from '../Logo/Logo.vue';\n\n  export interface AppTopbarProps {\n    /**\n     * Indicates if the AppSidebar is opened or not for styling purposes\n     */\n    sidebarOpened?: boolean;\n    /**\n     * Url for the logo anchor wrapper\n     */\n    href?: string;\n  }\n\n  const props = withDefaults(defineProps<AppTopbarProps>(), {\n    sidebarOpened: false,\n    href: '/',\n  });\n\n  const emit = defineEmits(['toggle-sidebar']);\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n</script>\n\n<template>\n  <header data-test=\"stash-app-topbar\" class=\"stash-app-topbar absolute left-0 top-0\">\n    <div\n      class=\"fixed top-0 flex h-topbar w-sidebar items-center pl-3 xl:text-white\"\n      :class=\"{\n        'z-dialog text-white': props.sidebarOpened,\n        'z-[401] text-ice-700': !props.sidebarOpened,\n      }\"\n    >\n      <button class=\"xl:hidden\" @click=\"emit('toggle-sidebar')\">\n        <Icon name=\"menu\" class=\"mr-3\" aria-label=\"open sidebar navigation\" />\n      </button>\n\n      <a :href=\"props.href\" class=\"flex items-center text-inherit\">\n        <Logo\n          :color=\"props.sidebarOpened ? 'white' : 'purple'\"\n          variant=\"brandmark\"\n          class=\"transition-colors duration-500 md:hidden\"\n        />\n        <Logo :color=\"props.sidebarOpened || isExtraLargeScreen ? 'white' : 'purple'\" class=\"hidden md:block\" />\n      </a>\n    </div>\n\n    <div\n      :class=\"[$attrs.class]\"\n      class=\"fixed top-0 z-page flex h-topbar w-full flex-row-reverse items-center justify-between bg-white py-3 pl-sidebar pr-3 shadow-md\"\n    >\n      <div class=\"flex items-center\">\n        <!-- @slot Actions slot, for showing any actions to the left of the avatar -->\n        <slot name=\"actions\"></slot>\n        <div class=\"ml-6\">\n          <!-- @slot Avatar slot, for showing the avatar on the far right of the header -->\n          <slot name=\"avatar\"></slot>\n        </div>\n      </div>\n      <div class=\"hidden pl-3 xl:block\">\n        <!-- @slot Text slot, for showing informative texts on the left of large viewports -->\n        <slot name=\"text\"></slot>\n      </div>\n    </div>\n  </header>\n</template>\n"],"names":["props","__props","emit","__emit","isExtraLargeScreen","useMediaQuery"],"mappings":";;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAKRC,IAAOC,GACPC,IAAqBC,EAAc,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AppTopbar.js","sources":["../src/components/AppTopbar/AppTopbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Icon from '../Icon/Icon.vue';\n  import Logo from '../Logo/Logo.vue';\n\n  export interface AppTopbarProps {\n    /**\n     * Indicates if the AppSidebar is opened or not for styling purposes\n     */\n    sidebarOpened?: boolean;\n    /**\n     * Url for the logo anchor wrapper\n     */\n    href?: string;\n  }\n\n  const props = withDefaults(defineProps<AppTopbarProps>(), {\n    sidebarOpened: false,\n    href: '/',\n  });\n\n  const emit = defineEmits(['toggle-sidebar']);\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n</script>\n\n<template>\n  <header data-test=\"stash-app-topbar\" class=\"stash-app-topbar absolute left-0 top-0\">\n    <div\n      class=\"fixed top-0 flex h-topbar w-sidebar items-center pl-3 xl:text-white\"\n      :class=\"{\n        'z-dialog text-white': props.sidebarOpened,\n        'z-[401] text-ice-700': !props.sidebarOpened,\n      }\"\n    >\n      <button class=\"xl:hidden\" @click=\"emit('toggle-sidebar')\">\n        <Icon name=\"menu\" class=\"mr-3\" aria-label=\"open sidebar navigation\" />\n      </button>\n\n      <a :href=\"props.href\" class=\"flex items-center text-inherit\">\n        <Logo\n          :color=\"props.sidebarOpened ? 'white' : 'purple'\"\n          variant=\"brandmark\"\n          class=\"transition-colors duration-500 md:hidden\"\n        />\n        <Logo :color=\"props.sidebarOpened || isExtraLargeScreen ? 'white' : 'purple'\" class=\"hidden md:block\" />\n      </a>\n    </div>\n\n    <div\n      :class=\"[$attrs.class]\"\n      class=\"fixed top-0 z-page flex h-topbar w-full flex-row-reverse items-center justify-between bg-white py-3 pl-sidebar pr-3 shadow-md\"\n    >\n      <div class=\"flex items-center\">\n        <!-- @slot Actions slot, for showing any actions to the left of the avatar -->\n        <slot name=\"actions\"></slot>\n        <div class=\"ml-6\">\n          <!-- @slot Avatar slot, for showing the avatar on the far right of the header -->\n          <slot name=\"avatar\"></slot>\n        </div>\n      </div>\n      <div class=\"hidden pl-3 xl:block\">\n        <!-- @slot Text slot, for showing informative texts on the left of large viewports -->\n        <slot name=\"text\"></slot>\n      </div>\n    </div>\n  </header>\n</template>\n"],"names":["props","__props","emit","__emit","isExtraLargeScreen","useMediaQuery","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_createVNode","Icon","Logo","_unref","_normalizeClass","$attrs","_hoisted_3","_renderSlot","_ctx","_hoisted_4","_hoisted_5"],"mappings":";;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAKRC,IAAOC,GACPC,IAAqBC,EAAc,gCAAgC;sBAIzEC,EAAA,GAAAC,EAuCS,UAvCTC,GAuCS;AAAA,MAtCPC,EAmBM,OAAA;AAAA,QAlBJ,UAAM,uEAAqE;AAAA,UAClC,uBAAAT,EAAM;AAAA,UAAgD,wBAAA,CAAAA,EAAM;AAAA,QAAA;;QAKrGS,EAES,UAAA;AAAA,UAFD,OAAM;AAAA,UAAa,gCAAOP,EAAI,gBAAA;AAAA,QAAA;UACpCQ,EAAsEC,GAAA;AAAA,YAAhE,MAAK;AAAA,YAAO,OAAM;AAAA,YAAO,cAAW;AAAA,UAAA;;QAG5CF,EAOI,KAAA;AAAA,UAPA,MAAMT,EAAM;AAAA,UAAM,OAAM;AAAA,QAAA;UAC1BU,EAIEE,GAAA;AAAA,YAHC,OAAOZ,EAAM,gBAAa,UAAA;AAAA,YAC3B,SAAQ;AAAA,YACR,OAAM;AAAA,UAAA;UAERU,EAAwGE,GAAA;AAAA,YAAjG,OAAOZ,EAAM,iBAAiBa,EAAAT,CAAA,IAAkB,UAAA;AAAA,YAAuB,OAAM;AAAA,UAAA;;;MAIxFK,EAgBM,OAAA;AAAA,QAfH,OAAKK,EAAA,CAAA,CAAGC,EAAAA,OAAO,KAAK,GACf,+HAA+H,CAAA;AAAA,MAAA;QAErIN,EAOM,OAPNO,GAOM;AAAA,UALJC,EAA4BC,EAAA,QAAA,SAAA;AAAA,UAC5BT,EAGM,OAHNU,GAGM;AAAA,YADJF,EAA2BC,EAAA,QAAA,QAAA;AAAA,UAAA;;QAG/BT,EAGM,OAHNW,GAGM;AAAA,UADJH,EAAyBC,EAAA,QAAA,MAAA;AAAA,QAAA;;;;;"}

package/dist/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types/colors';\n  import colorSchemeUtil from '../../utils/colorScheme';\n\n  defineOptions({\n    name: 'll-avatar',\n  });\n\n  export interface AvatarProps {\n    /**\n     * The name of the user will be parsed and have its initial displayed in case the src prop is empty\n     */\n    name?: string;\n\n    /**\n     * The color for the chip that determines both the text and bg color. Needs to\n     * be one of the brand colors in our design system (not a shade).\n     */\n    colorScheme?: StashPrimaryColorGroup;\n\n    /**\n     * The shade of the provided color to use for the background color. This effects the inferred\n     * text color unless a specific text color is provided. Currently only `light` and `main`\n     * shades are supported. `dark` may be added in the future.\n     */\n    shade?: 'light' | 'main';\n\n    /**\n     * The image that will be displayed within the avatar\n     */\n    src?: string;\n\n    /**\n     * The alternative text to be displayed in case the image is unavailable\n     */\n    alt?: string;\n\n    /**\n     * The background color of the chip. Needs to be one of our design system colors.\n     */\n    bgColor?: StashCommonColor;\n\n    /**\n     * The color of the chip text. Needs to be one of our design system colors.\n     */\n    textColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<AvatarProps>(), {\n    src: undefined,\n    name: '',\n    alt: undefined,\n    colorScheme: 'ice',\n    shade: 'light',\n    bgColor: undefined,\n    textColor: undefined,\n  });\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const computedColors = computed(() =>\n    colorSchemeUtil({\n      shade: props.shade,\n      color: props.colorScheme,\n    }),\n  );\n\n  const initials = computed(() => {\n    const [firstName, lastName] = String(props.name).toUpperCase().split(' ');\n    const initials = lastName ? firstName.charAt(0) + lastName.charAt(0) : firstName.charAt(0);\n\n    return initials;\n  });\n\n  const isClickable = computed(() => {\n    return !!attrs.onClick;\n  });\n</script>\n\n<template>\n  <img\n    v-if=\"props.src\"\n    class=\"stash-avatar stash-avatar--image inline-block rounded-full\"\n    :class=\"[classes.root, { [classes.clickable]: isClickable }]\"\n    :alt=\"props.alt\"\n    :src=\"props.src\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  />\n  <div\n    v-else\n    class=\"stash-avatar stash-avatar--initials inline-block cursor-default rounded-full text-center font-semibold\"\n    :class=\"[\n      classes.root,\n      `text-${props.textColor || computedColors.computedTextColor}`,\n      `bg-${props.bgColor || computedColors.computedBgColor}`,\n      { [classes.clickable]: isClickable },\n    ]\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  >\n    {{ initials }}\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      font-size: var(--text-sm);\n      height: --spacing(9);\n      line-height: calc(--spacing(9) + 2px);\n      width: --spacing(9);\n    }\n\n    .clickable:hover,\n    .clickable:focus,\n    .clickable:active {\n      outline: 1px solid var(--color-blue-500);\n      outline-offset: -1px;\n    }\n\n    .clickable:focus,\n    .clickable:active {\n      box-shadow: 0 0 0 4px rgb(0 114 240 / 15%);\n    }\n  }\n</style>\n"],"names":["props","__props","attrs","useAttrs","classes","useCssModule","computedColors","computed","colorSchemeUtil","initials","firstName","lastName","isClickable"],"mappings":";;;;;;;;;;;;;;;;AAkDE,UAAMA,IAAQC,GAURC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAiBC;AAAA,MAAS,MAC9BC,EAAgB;AAAA,QACd,OAAOR,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd;AAAA,IAAA,GAGGS,IAAWF,EAAS,MAAM;AAC9B,YAAM,CAACG,GAAWC,CAAQ,IAAI,OAAOX,EAAM,IAAI,EAAE,YAAA,EAAc,MAAM,GAAG;AAGxE,aAFiBW,IAAWD,EAAU,OAAO,CAAC,IAAIC,EAAS,OAAO,CAAC,IAAID,EAAU,OAAO,CAAC;AAAA,IAG3F,CAAC,GAEKE,IAAcL,EAAS,MACpB,CAAC,CAACL,EAAM,OAChB;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types/colors';\n  import colorSchemeUtil from '../../utils/colorScheme';\n\n  defineOptions({\n    name: 'll-avatar',\n  });\n\n  export interface AvatarProps {\n    /**\n     * The name of the user will be parsed and have its initial displayed in case the src prop is empty\n     */\n    name?: string;\n\n    /**\n     * The color for the chip that determines both the text and bg color. Needs to\n     * be one of the brand colors in our design system (not a shade).\n     */\n    colorScheme?: StashPrimaryColorGroup;\n\n    /**\n     * The shade of the provided color to use for the background color. This effects the inferred\n     * text color unless a specific text color is provided. Currently only `light` and `main`\n     * shades are supported. `dark` may be added in the future.\n     */\n    shade?: 'light' | 'main';\n\n    /**\n     * The image that will be displayed within the avatar\n     */\n    src?: string;\n\n    /**\n     * The alternative text to be displayed in case the image is unavailable\n     */\n    alt?: string;\n\n    /**\n     * The background color of the chip. Needs to be one of our design system colors.\n     */\n    bgColor?: StashCommonColor;\n\n    /**\n     * The color of the chip text. Needs to be one of our design system colors.\n     */\n    textColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<AvatarProps>(), {\n    src: undefined,\n    name: '',\n    alt: undefined,\n    colorScheme: 'ice',\n    shade: 'light',\n    bgColor: undefined,\n    textColor: undefined,\n  });\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const computedColors = computed(() =>\n    colorSchemeUtil({\n      shade: props.shade,\n      color: props.colorScheme,\n    }),\n  );\n\n  const initials = computed(() => {\n    const [firstName, lastName] = String(props.name).toUpperCase().split(' ');\n    const initials = lastName ? firstName.charAt(0) + lastName.charAt(0) : firstName.charAt(0);\n\n    return initials;\n  });\n\n  const isClickable = computed(() => {\n    return !!attrs.onClick;\n  });\n</script>\n\n<template>\n  <img\n    v-if=\"props.src\"\n    class=\"stash-avatar stash-avatar--image inline-block rounded-full\"\n    :class=\"[classes.root, { [classes.clickable]: isClickable }]\"\n    :alt=\"props.alt\"\n    :src=\"props.src\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  />\n  <div\n    v-else\n    class=\"stash-avatar stash-avatar--initials inline-block cursor-default rounded-full text-center font-semibold\"\n    :class=\"[\n      classes.root,\n      `text-${props.textColor || computedColors.computedTextColor}`,\n      `bg-${props.bgColor || computedColors.computedBgColor}`,\n      { [classes.clickable]: isClickable },\n    ]\"\n    :tabindex=\"isClickable ? 0 : -1\"\n    data-test=\"stash-avatar\"\n    v-bind=\"attrs\"\n  >\n    {{ initials }}\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      font-size: var(--text-sm);\n      height: --spacing(9);\n      line-height: calc(--spacing(9) + 2px);\n      width: --spacing(9);\n    }\n\n    .clickable:hover,\n    .clickable:focus,\n    .clickable:active {\n      outline: 1px solid var(--color-blue-500);\n      outline-offset: -1px;\n    }\n\n    .clickable:focus,\n    .clickable:active {\n      box-shadow: 0 0 0 4px rgb(0 114 240 / 15%);\n    }\n  }\n</style>\n"],"names":["props","__props","attrs","useAttrs","classes","useCssModule","computedColors","computed","colorSchemeUtil","initials","firstName","lastName","isClickable","_openBlock","_createElementBlock","_mergeProps","_unref","_hoisted_1","_hoisted_2"],"mappings":";;;;;;;;;;;;;;;;AAkDE,UAAMA,IAAQC,GAURC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAiBC;AAAA,MAAS,MAC9BC,EAAgB;AAAA,QACd,OAAOR,EAAM;AAAA,QACb,OAAOA,EAAM;AAAA,MAAA,CACd;AAAA,IAAA,GAGGS,IAAWF,EAAS,MAAM;AAC9B,YAAM,CAACG,GAAWC,CAAQ,IAAI,OAAOX,EAAM,IAAI,EAAE,YAAA,EAAc,MAAM,GAAG;AAGxE,aAFiBW,IAAWD,EAAU,OAAO,CAAC,IAAIC,EAAS,OAAO,CAAC,IAAID,EAAU,OAAO,CAAC;AAAA,IAG3F,CAAC,GAEKE,IAAcL,EAAS,MACpB,CAAC,CAACL,EAAM,OAChB;qBAKOF,EAAM,OADda,EAAA,GAAAC,EASE,OATFC,EASE;AAAA;MAPA,OAAK,CAAC,8DAA4D,CACzDC,EAAAZ,CAAA,EAAQ,MAAI,EAAA,CAAKY,EAAAZ,CAAA,EAAQ,SAAS,GAAGQ,EAAA,MAAA,CAAW,CAAA;AAAA,MACxD,KAAKZ,EAAM;AAAA,MACX,KAAKA,EAAM;AAAA,MACX,UAAUY,EAAA,QAAW,IAAA;AAAA,MACtB,aAAU;AAAA,IAAA,GACFI,EAAAd,CAAA,CAAK,GAAA,MAAA,IAAAe,CAAA,MAEfJ,EAAA,GAAAC,EAcM,OAdNC,EAcM;AAAA;MAZJ,QAAM,0GAAwG;AAAA,QAC9FC,EAAAZ,CAAA,EAAQ;AAAA,QAAoB,QAAAJ,EAAM,aAAaM,EAAA,MAAe,iBAAiB;AAAA,QAAgB,MAAAN,EAAM,WAAWM,EAAA,MAAe,eAAe;AAAA,WAAaU,EAAAZ,CAAA,EAAQ,SAAS,GAAGQ,EAAA,MAAA;AAAA,MAAW;MAMzM,UAAUA,EAAA,QAAW,IAAA;AAAA,MACtB,aAAU;AAAA,IAAA,GACFI,EAAAd,CAAA,CAAK,KAEVO,EAAA,KAAQ,GAAA,IAAAS,CAAA;AAAA;;;;;;;"}

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useCssModule, watch } from 'vue';\n\n  defineOptions({\n    name: 'll-badge',\n  });\n\n  const classes = useCssModule();\n\n  export interface BadgeProps {\n    /**\n     * If true, the badge will animate when the content changes\n     */\n    animate?: boolean;\n\n    /**\n     * Color of the badge\n     * Options: 'red' or 'blue'\n     */\n    color?: 'red' | 'blue';\n\n    /**\n     * The badge's content\n     */\n    content?: number | string;\n\n    /**\n     * Shows a gray badge with content\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The max value of the `content` prop. If the value is greater than this, the badge will show the max value and a `+` sign.\n     */\n    max?: number | string;\n\n    /**\n     * Offset to adjust the badge's position. It does not apply to inline position badges.\n     */\n    offset?: {\n      top?: number;\n      right?: number;\n    };\n\n    /**\n     * Badge position. Options:\n     *\n     * - inline: shows the badge directly next to the content (on the right), with a left margin of 6px\n     * - top-right: will overlap the badge over whatever is passed in the default slot\n     */\n    position?: 'top-right' | 'inline';\n\n    /**\n     * The badge will be hidden if the content is `0` unless this prop is set to true.\n     */\n    showZero?: boolean;\n\n    /**\n     * Badge variant\n     */\n    variant?: 'dot' | 'standard';\n  }\n\n  const props = withDefaults(defineProps<BadgeProps>(), {\n    animate: false,\n    color: 'red',\n    content: undefined,\n    isDisabled: false,\n    max: 99,\n    position: 'top-right',\n    offset: () => ({\n      top: undefined,\n      right: undefined,\n    }),\n    showZero: false,\n    variant: 'standard',\n  });\n\n  const computedContent = computed(() => {\n    const numericContent = parseInt(props.content as string, 10);\n    const numericMax = parseInt(props.max as string, 10);\n    // We want to compare the values, not the types, so it's okay to use `!=` here. i.e. if '23' = 23, then we know\n    // the props are numbers, and we can compare the values. If you pass '23foobar' parseInt will return still return 23\n    // but this check will fail like we want it to.\n    // eslint-disable-next-line eqeqeq\n    if (numericContent != props.content || numericMax != props.max) {\n      return props.content;\n    }\n\n    return numericContent > numericMax ? `${numericMax}+` : numericContent;\n  });\n\n  const formatOffsetStyleValue = (value: number) => (value === 0 ? '0' : `${value}px`);\n\n  const computedOffsetStyle = computed(() => ({\n    top: props.offset.top !== undefined ? formatOffsetStyleValue(props.offset.top) : undefined,\n    right: props.offset.right !== undefined ? formatOffsetStyleValue(props.offset.right) : undefined,\n  }));\n\n  const playAnimation = ref(false);\n\n  watch(\n    () => props.content,\n    (value, oldValue) => {\n      if (!props.animate) {\n        return;\n      }\n\n      if (oldValue !== value) {\n        playAnimation.value = true;\n\n        setTimeout(() => {\n          playAnimation.value = false;\n        }, 1000);\n      }\n    },\n  );\n</script>\n\n<template>\n  <span class=\"stash-badge relative inline-block\" data-test=\"stash-badge\">\n    <slot />\n    <span\n      v-show=\"props.variant === 'dot' || computedContent || (computedContent === 0 && props.showZero)\"\n      data-test=\"stash-badge|content-wrapper\"\n      :class=\"[\n        {\n          [classes['top-right']]: props.position === 'top-right' && props.variant !== 'dot',\n          absolute: props.variant === 'dot' || props.position === 'top-right',\n          'ml-1.5': props.position === 'inline',\n        },\n      ]\"\n      :style=\"props.variant === 'dot' || props.position === 'top-right' ? computedOffsetStyle : ''\"\n    >\n      <span\n        data-test=\"stash-badge|content\"\n        class=\"inline-block whitespace-nowrap rounded-full text-center text-[10px] font-semibold leading-4 text-white\"\n        :class=\"[\n          {\n            'animate-grow': playAnimation,\n            'bg-red-500': props.color === 'red' && !props.isDisabled,\n            'bg-blue-500': props.color === 'blue' && !props.isDisabled,\n            absolute: props.variant === 'dot',\n            'bg-ice-200 text-white': props.isDisabled,\n            [classes['badge-dot']]: props.variant === 'dot',\n            [classes['badge-standard']]: props.variant === 'standard',\n            'px-1.5': props.variant !== 'dot',\n          },\n        ]\"\n      >\n        {{ props.variant === 'dot' ? null : computedContent }}\n      </span>\n    </span>\n  </span>\n</template>\n\n<style module>\n  @layer utilities {\n    .badge-standard {\n      height: 15px;\n      vertical-align: middle;\n    }\n\n    .badge-dot {\n      border: 2px solid var(--color-ice-100);\n      height: 10px;\n      right: 0;\n      width: 10px;\n    }\n\n    .top-right {\n      top: 0;\n      right: 0;\n      transform: translateX(50%) translateY(-48%);\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","props","__props","computedContent","computed","numericContent","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOE,UAAMA,IAAUC,EAAA,GAwDVC,IAAQC,GAeRC,IAAkBC,EAAS,MAAM;AACrC,YAAMC,IAAiB,SAASJ,EAAM,SAAmB,EAAE,GACrDK,IAAa,SAASL,EAAM,KAAe,EAAE;AAKnD,aAAII,KAAkBJ,EAAM,WAAWK,KAAcL,EAAM,MAClDA,EAAM,UAGRI,IAAiBC,IAAa,GAAGA,CAAU,MAAMD;AAAA,IAC1D,CAAC,GAEKE,IAAyB,CAACC,MAAmBA,MAAU,IAAI,MAAM,GAAGA,CAAK,MAEzEC,IAAsBL,EAAS,OAAO;AAAA,MAC1C,KAAKH,EAAM,OAAO,QAAQ,SAAYM,EAAuBN,EAAM,OAAO,GAAG,IAAI;AAAA,MACjF,OAAOA,EAAM,OAAO,UAAU,SAAYM,EAAuBN,EAAM,OAAO,KAAK,IAAI;AAAA,IAAA,EACvF,GAEIS,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACO,GAAOK,MAAa;AACnB,QAAKZ,EAAM,WAIPY,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,QACxB,GAAG,GAAI;AAAA,MAEX;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useCssModule, watch } from 'vue';\n\n  defineOptions({\n    name: 'll-badge',\n  });\n\n  const classes = useCssModule();\n\n  export interface BadgeProps {\n    /**\n     * If true, the badge will animate when the content changes\n     */\n    animate?: boolean;\n\n    /**\n     * Color of the badge\n     * Options: 'red' or 'blue'\n     */\n    color?: 'red' | 'blue';\n\n    /**\n     * The badge's content\n     */\n    content?: number | string;\n\n    /**\n     * Shows a gray badge with content\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The max value of the `content` prop. If the value is greater than this, the badge will show the max value and a `+` sign.\n     */\n    max?: number | string;\n\n    /**\n     * Offset to adjust the badge's position. It does not apply to inline position badges.\n     */\n    offset?: {\n      top?: number;\n      right?: number;\n    };\n\n    /**\n     * Badge position. Options:\n     *\n     * - inline: shows the badge directly next to the content (on the right), with a left margin of 6px\n     * - top-right: will overlap the badge over whatever is passed in the default slot\n     */\n    position?: 'top-right' | 'inline';\n\n    /**\n     * The badge will be hidden if the content is `0` unless this prop is set to true.\n     */\n    showZero?: boolean;\n\n    /**\n     * Badge variant\n     */\n    variant?: 'dot' | 'standard';\n  }\n\n  const props = withDefaults(defineProps<BadgeProps>(), {\n    animate: false,\n    color: 'red',\n    content: undefined,\n    isDisabled: false,\n    max: 99,\n    position: 'top-right',\n    offset: () => ({\n      top: undefined,\n      right: undefined,\n    }),\n    showZero: false,\n    variant: 'standard',\n  });\n\n  const computedContent = computed(() => {\n    const numericContent = parseInt(props.content as string, 10);\n    const numericMax = parseInt(props.max as string, 10);\n    // We want to compare the values, not the types, so it's okay to use `!=` here. i.e. if '23' = 23, then we know\n    // the props are numbers, and we can compare the values. If you pass '23foobar' parseInt will return still return 23\n    // but this check will fail like we want it to.\n    // eslint-disable-next-line eqeqeq\n    if (numericContent != props.content || numericMax != props.max) {\n      return props.content;\n    }\n\n    return numericContent > numericMax ? `${numericMax}+` : numericContent;\n  });\n\n  const formatOffsetStyleValue = (value: number) => (value === 0 ? '0' : `${value}px`);\n\n  const computedOffsetStyle = computed(() => ({\n    top: props.offset.top !== undefined ? formatOffsetStyleValue(props.offset.top) : undefined,\n    right: props.offset.right !== undefined ? formatOffsetStyleValue(props.offset.right) : undefined,\n  }));\n\n  const playAnimation = ref(false);\n\n  watch(\n    () => props.content,\n    (value, oldValue) => {\n      if (!props.animate) {\n        return;\n      }\n\n      if (oldValue !== value) {\n        playAnimation.value = true;\n\n        setTimeout(() => {\n          playAnimation.value = false;\n        }, 1000);\n      }\n    },\n  );\n</script>\n\n<template>\n  <span class=\"stash-badge relative inline-block\" data-test=\"stash-badge\">\n    <slot />\n    <span\n      v-show=\"props.variant === 'dot' || computedContent || (computedContent === 0 && props.showZero)\"\n      data-test=\"stash-badge|content-wrapper\"\n      :class=\"[\n        {\n          [classes['top-right']]: props.position === 'top-right' && props.variant !== 'dot',\n          absolute: props.variant === 'dot' || props.position === 'top-right',\n          'ml-1.5': props.position === 'inline',\n        },\n      ]\"\n      :style=\"props.variant === 'dot' || props.position === 'top-right' ? computedOffsetStyle : ''\"\n    >\n      <span\n        data-test=\"stash-badge|content\"\n        class=\"inline-block whitespace-nowrap rounded-full text-center text-[10px] font-semibold leading-4 text-white\"\n        :class=\"[\n          {\n            'animate-grow': playAnimation,\n            'bg-red-500': props.color === 'red' && !props.isDisabled,\n            'bg-blue-500': props.color === 'blue' && !props.isDisabled,\n            absolute: props.variant === 'dot',\n            'bg-ice-200 text-white': props.isDisabled,\n            [classes['badge-dot']]: props.variant === 'dot',\n            [classes['badge-standard']]: props.variant === 'standard',\n            'px-1.5': props.variant !== 'dot',\n          },\n        ]\"\n      >\n        {{ props.variant === 'dot' ? null : computedContent }}\n      </span>\n    </span>\n  </span>\n</template>\n\n<style module>\n  @layer utilities {\n    .badge-standard {\n      height: 15px;\n      vertical-align: middle;\n    }\n\n    .badge-dot {\n      border: 2px solid var(--color-ice-100);\n      height: 10px;\n      right: 0;\n      width: 10px;\n    }\n\n    .top-right {\n      top: 0;\n      right: 0;\n      transform: translateX(50%) translateY(-48%);\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","props","__props","computedContent","computed","numericContent","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx","_createElementVNode","_normalizeClass","_unref","_normalizeStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOE,UAAMA,IAAUC,EAAA,GAwDVC,IAAQC,GAeRC,IAAkBC,EAAS,MAAM;AACrC,YAAMC,IAAiB,SAASJ,EAAM,SAAmB,EAAE,GACrDK,IAAa,SAASL,EAAM,KAAe,EAAE;AAKnD,aAAII,KAAkBJ,EAAM,WAAWK,KAAcL,EAAM,MAClDA,EAAM,UAGRI,IAAiBC,IAAa,GAAGA,CAAU,MAAMD;AAAA,IAC1D,CAAC,GAEKE,IAAyB,CAACC,MAAmBA,MAAU,IAAI,MAAM,GAAGA,CAAK,MAEzEC,IAAsBL,EAAS,OAAO;AAAA,MAC1C,KAAKH,EAAM,OAAO,QAAQ,SAAYM,EAAuBN,EAAM,OAAO,GAAG,IAAI;AAAA,MACjF,OAAOA,EAAM,OAAO,UAAU,SAAYM,EAAuBN,EAAM,OAAO,KAAK,IAAI;AAAA,IAAA,EACvF,GAEIS,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACO,GAAOK,MAAa;AACnB,QAAKZ,EAAM,WAIPY,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,QACxB,GAAG,GAAI;AAAA,MAEX;AAAA,IAAA,cAKFI,EAAA,GAAAC,EAiCO,QAjCPC,GAiCO;AAAA,MAhCLC,EAAQC,EAAA,QAAA,SAAA;AAAA,QACRC,EA8BO,QAAA;AAAA,QA5BL,aAAU;AAAA,QACT,OAAKC,EAAA;AAAA;YAAyB,CAAAC,EAAAtB,CAAA,iBAAuBE,EAAM,aAAQ,eAAoBA,EAAM,YAAO;AAAA,YAAgC,UAAAA,EAAM,YAAO,SAAcA,EAAM,aAAQ;AAAA,YAAsC,UAAAA,EAAM,aAAQ;AAAA,UAAA;AAAA;QAOjO,OAAKqB,EAAErB,EAAM,qBAAqBA,EAAM,aAAQ,cAAmBQ,EAAA,QAAmB,EAAA;AAAA,MAAA;QAEvFU,EAiBO,QAAA;AAAA,UAhBL,aAAU;AAAA,UACV,UAAM,0GAAwG;AAAA;8BAC5DT,EAAA;AAAA,cAAyC,cAAAT,EAAM,UAAK,SAAA,CAAeA,EAAM;AAAA,cAAuC,eAAAA,EAAM,UAAK,UAAA,CAAgBA,EAAM;AAAA,cAAkC,UAAAA,EAAM,YAAO;AAAA,cAAiD,yBAAAA,EAAM;AAAA,eAAyBoB,EAAAtB,CAAA,EAAO,WAAA,CAAA,GAAgBE,EAAM,YAAO;AAAA,eAAyBoB,EAAAtB,CAAA,EAAO,gBAAA,CAAA,GAAqBE,EAAM,YAAO;AAAA,cAAuC,UAAAA,EAAM,YAAO;AAAA,YAAA;AAAA;aAazdA,EAAM,YAAO,QAAA,OAAoBE,EAAA,KAAe,GAAA,CAAA;AAAA,MAAA;YA3B7CF,EAAM,YAAO,SAAcE,EAAA,SAAoBA,EAAA,UAAe,KAAUF,EAAM,QAAQ;AAAA,MAAA;;;;;;;;;;"}

package/dist/Box.vue_vue_type_script_setup_true_lang-dFFZN40_.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.vue_vue_type_script_setup_true_lang-dFFZN40_.js","sources":["../src/components/Box/Box.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  defineOptions({\n    name: 'll-box',\n  });\n\n  export interface BoxProps {\n    /**\n     * Remove the padding around the entire Box.\n     */\n    disablePadding?: boolean;\n\n    /**\n     * Remove the padding on the left and right of the Box.\n     */\n    disableGutters?: boolean;\n\n    /**\n     * Remove the padding on the left and right of the Box.\n     */\n    disableElevation?: boolean;\n\n    /**\n     * Border radius style. Defaults to `rounded`.\n     */\n    radius?: 'none' | 'rounded';\n  }\n\n  const props = withDefaults(defineProps<BoxProps>(), {\n    disablePadding: false,\n    disableGutters: false,\n    disableElevation: false,\n    radius: 'rounded',\n  });\n</script>\n\n<template>\n  <section\n    class=\"stash-box bg-white\"\n    :class=\"{\n      rounded: props.radius === 'rounded',\n      'p-gutter': !props.disablePadding && !props.disableGutters,\n      'py-gutter': props.disableGutters,\n      shadow: !props.disableElevation,\n    }\"\n    data-test=\"stash-box\"\n  >\n    <!-- @slot default -->\n    <slot></slot>\n  </section>\n</template>\n"],"names":["props","__props"],"mappings":";;;;;;;;;;;AA2BE,UAAMA,IAAQC;;;;;;;;;;;;;;"}
+{"version":3,"file":"Box.vue_vue_type_script_setup_true_lang-dFFZN40_.js","sources":["../src/components/Box/Box.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  defineOptions({\n    name: 'll-box',\n  });\n\n  export interface BoxProps {\n    /**\n     * Remove the padding around the entire Box.\n     */\n    disablePadding?: boolean;\n\n    /**\n     * Remove the padding on the left and right of the Box.\n     */\n    disableGutters?: boolean;\n\n    /**\n     * Remove the padding on the left and right of the Box.\n     */\n    disableElevation?: boolean;\n\n    /**\n     * Border radius style. Defaults to `rounded`.\n     */\n    radius?: 'none' | 'rounded';\n  }\n\n  const props = withDefaults(defineProps<BoxProps>(), {\n    disablePadding: false,\n    disableGutters: false,\n    disableElevation: false,\n    radius: 'rounded',\n  });\n</script>\n\n<template>\n  <section\n    class=\"stash-box bg-white\"\n    :class=\"{\n      rounded: props.radius === 'rounded',\n      'p-gutter': !props.disablePadding && !props.disableGutters,\n      'py-gutter': props.disableGutters,\n      shadow: !props.disableElevation,\n    }\"\n    data-test=\"stash-box\"\n  >\n    <!-- @slot default -->\n    <slot></slot>\n  </section>\n</template>\n"],"names":["props","__props","_createElementBlock","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;AA2BE,UAAMA,IAAQC;2BASdC,EAYU,WAAA;AAAA,MAXR,UAAM,sBAAoB;AAAA,QACD,SAAAF,EAAM,WAAM;AAAA,QAAmC,YAAA,CAAAA,EAAM,kBAAc,CAAKA,EAAM;AAAA,QAAmC,aAAAA,EAAM;AAAA,QAA+B,QAAA,CAAAA,EAAM;AAAA,MAAA;MAMrL,aAAU;AAAA,IAAA;MAGVG,EAAaC,EAAA,QAAA,SAAA;AAAA,IAAA;;;"}

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\">\n  export interface ButtonProps {\n    /**\n     * Renders the secondary variant\n     */\n    secondary?: boolean;\n\n    /**\n     * Renders the button as a container for an Icon\n     */\n    icon?: boolean;\n\n    /**\n     * Renders the button as a container for an IconLabel\n     */\n    iconLabel?: boolean;\n\n    /**\n     * Renders the tertiary variant\n     */\n    tertiary?: boolean;\n\n    /**\n     * Renders the component inline\n     */\n    inline?: boolean;\n\n    /**\n     * Renders a color variant\n     */\n    color?: 'blue' | 'red';\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component. If defined, the button will render as a `<router-link />`.\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Button link. If defined, the button will render as an `<a />` tag.\n     */\n    href?: string;\n\n    /**\n     * Displays a spinning loading icon in place of the button text and disables the button\n     */\n    isLoading?: boolean;\n\n    /**\n     * Disables the button\n     */\n    disabled?: boolean;\n  }\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, useCssModule } from 'vue';\n  import { RouteLocationRaw } from 'vue-router';\n\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-button',\n  });\n\n  const props = withDefaults(defineProps<ButtonProps>(), {\n    secondary: false,\n    icon: false,\n    iconLabel: false,\n    tertiary: false,\n    inline: false,\n    color: undefined,\n    href: '',\n    to: undefined,\n    isLoading: false,\n    disabled: undefined,\n  });\n  const classes = useCssModule();\n\n  enum ButtonTypes {\n    Icon = 'icon',\n    IconLabel = 'iconLabel',\n    Secondary = 'secondary',\n    Tertiary = 'tertiary',\n    Inline = 'inline',\n    Primary = 'primary',\n  }\n\n  type ButtonType = `${ButtonTypes}`;\n\n  const buttonType = computed<ButtonType>(() => {\n    for (const type of Object.values(ButtonTypes)) {\n      if (props[type]) {\n        return type;\n      }\n    }\n\n    return ButtonTypes.Primary;\n  });\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 'button';\n  });\n\n  const buttonAttrs = 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    :disabled=\"props.isLoading || props.disabled ? true : undefined\"\n    v-bind=\"buttonAttrs\"\n    class=\"stash-button\"\n    :class=\"[\n      classes.button,\n      `stash-button--${buttonType}`,\n      classes[`button--${buttonType}`],\n      {\n        [`stash-button--${props.color}`]: props.color,\n        [classes[`button--${props.color}`]]: props.color,\n        'stash-button--is-loading': props.isLoading,\n      },\n    ]\"\n    data-test=\"ll-button\"\n  >\n    <Icon v-if=\"props.isLoading\" name=\"loading-empty\" class=\"animate-spin\" />\n    <!-- @slot default -->\n    <slot v-else></slot>\n  </component>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .button {\n      border-radius: var(--radius-sm);\n      border-width: 1px;\n      display: inline-block;\n      font-size: 0.875rem;\n      font-weight: var(--font-weight-semibold);\n      line-height: 2.125rem;\n      margin: 0;\n      min-width: 144px;\n      padding: 0 --spacing(3);\n      text-align: center;\n      text-decoration: none;\n      vertical-align: middle;\n      white-space: nowrap;\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      /* `focus` and `hover` should be added only for large screens */\n      .button:focus {\n        box-shadow: 0 0 0 3px rgb(0 123 255 / 14%);\n        outline: none;\n      }\n\n      .button:hover {\n        text-decoration: none;\n      }\n    }\n\n    .button[disabled] {\n      cursor: default;\n      pointer-events: none;\n    }\n\n    /* Solid treatment */\n    .button--solid {\n      background-color: var(--button-color);\n      border-color: transparent;\n      color: var(--text-color);\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      /* `hover` should be added only for large screens */\n      .button--solid:hover {\n        background-color: var(--button-hover-color);\n      }\n    }\n\n    .button--solid:active {\n      background-color: var(--button-hover-color);\n    }\n\n    .button--solid[disabled]:not(:global(.stash-button--is-loading)) {\n      --button-color: var(--color-ice-500) !important;\n    }\n\n    /* Ghost treatment */\n    .button--ghost {\n      background-color: rgb(0 0 0 / 0%);\n      border-color: var(--button-color);\n      color: var(--text-color);\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      /* `hover` should be added only for large screens */\n      .button--ghost:hover {\n        background-color: var(--button-hover-color);\n      }\n    }\n\n    .button--ghost:active {\n      background-color: var(--button-hover-color);\n    }\n\n    .button--ghost[disabled]:not(:global(.stash-button--is-loading)) {\n      --button-color: var(--color-ice-500) !important;\n      --text-color: var(--color-ice-500) !important;\n    }\n\n    /* Types */\n    .button--primary {\n      composes: button--solid;\n      --button-color: var(--color-blue-500);\n      --button-hover-color: var(--color-blue-hover);\n      --text-color: var(--color-white);\n    }\n\n    .button--secondary {\n      composes: button--ghost;\n      --button-color: var(--color-ice-500);\n      --button-hover-color: var(--color-ice-700-hover);\n      --text-color: var(--color-ice-700);\n    }\n\n    .button--tertiary {\n      composes: button--ghost;\n      --button-color: var(--color-white);\n      --button-hover-color: var(--color-white-hover);\n      --text-color: var(--color-white);\n    }\n\n    .button--icon,\n    .button--iconLabel {\n      /* https://developers.google.com/web/fundamentals/accessibility/accessible-styles */\n      border: 0;\n      border-radius: var(--radius-sm);\n      height: --spacing(12);\n      min-width: --spacing(12);\n      text-decoration: none;\n    }\n\n    .button--icon {\n      padding: --spacing(3);\n      width: --spacing(12);\n    }\n\n    .button--iconLabel {\n      padding: 0;\n      width: unset;\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      /* `hover` should be added only for large screens */\n      .button--icon:hover,\n      .button--iconLabel:hover {\n        text-decoration: none;\n      }\n    }\n\n    .button--icon svg,\n    .button--iconLabel svg {\n      display: block;\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    .button--icon[disabled]:not(:global(.stash-button--is-loading)) svg,\n    .button--iconLabel[disabled]:not(:global(.stash-button--is-loading)),\n    .button--iconLabel[disabled]:not(:global(.stash-button--is-loading)) svg {\n      color: var(--color-ice-500);\n    }\n\n    .button--inline {\n      border: 0;\n      color: var(--color-blue-500);\n      font-weight: var(--font-weight-medium);\n      line-height: 1.5;\n      min-width: 0;\n      padding: 0;\n    }\n\n    .button--inline:hover {\n      text-decoration: underline;\n    }\n\n    .button--inline[disabled] {\n      color: var(--color-ice-500);\n    }\n\n    /* Colors */\n    .button--blue.button--primary,\n    .button--blue.button--secondary {\n      --button-color: var(--color-blue-500);\n    }\n\n    .button--blue.button--primary {\n      --button-hover-color: var(--color-blue-hover);\n    }\n\n    .button--blue.button--secondary {\n      --text-color: var(--color-blue-500);\n      --button-hover-color: var(--button-secondary-blue-hover);\n    }\n\n    .button--red.button--primary,\n    .button--red.button--secondary {\n      --button-color: var(--color-red-500);\n    }\n\n    .button--red.button--primary {\n      --button-hover-color: var(--color-red-hover);\n    }\n\n    .button--red.button--secondary {\n      --text-color: var(--color-red-500);\n      --button-hover-color: var(--button-secondary-red-hover);\n    }\n\n    /**\n     * Button Grid\n     * TODO: Move into separate component\n     * https://leaflink.atlassian.net/browse/STASH-230\n     * See `styles/elements/_buttons.scss` for button-grid (parent element) specific styles.\n     */\n    :global(.button-grid) > .button,\n    :global(.header-button-grid) > .button {\n      width: 50%;\n    }\n\n    :global(.button-grid) > .button + .button {\n      margin-left: --spacing(6);\n    }\n\n    @media (width >= theme(--breakpoint-md)) {\n      :global(.button-grid) > .button {\n        width: auto;\n      }\n    }\n\n    :global(.header-button-grid) > .button + .button {\n      margin-left: --spacing(6);\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      :global(.header-button-grid) > .button {\n        width: auto;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","ButtonTypes","buttonType","computed","type","is","buttonAttrs"],"mappings":";;;;;;;;;;;;;;;;;;;AAgEE,UAAMA,IAAQC,GAYRC,IAAUC,EAAA;AAEhB,QAAKC;AAAL,KAAA,CAAKA,MAAL;AACEA,MAAAA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,UAAU;AAAA,IAAA,GANPA,MAAAA,IAAA,CAAA,EAAA;AAWL,UAAMC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOH,CAAW;AAC1C,YAAIJ,EAAMO,CAAI;AACZ,iBAAOA;AAIX,aAAO;AAAA,IACT,CAAC,GAEKC,IAAKF,EAAS,MACdN,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR,GAEKS,IAAcH,EAAS,MACvBN,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\">\n  export interface ButtonProps {\n    /**\n     * Renders the secondary variant\n     */\n    secondary?: boolean;\n\n    /**\n     * Renders the button as a container for an Icon\n     */\n    icon?: boolean;\n\n    /**\n     * Renders the button as a container for an IconLabel\n     */\n    iconLabel?: boolean;\n\n    /**\n     * Renders the tertiary variant\n     */\n    tertiary?: boolean;\n\n    /**\n     * Renders the component inline\n     */\n    inline?: boolean;\n\n    /**\n     * Renders a color variant\n     */\n    color?: 'blue' | 'red';\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component. If defined, the button will render as a `<router-link />`.\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Button link. If defined, the button will render as an `<a />` tag.\n     */\n    href?: string;\n\n    /**\n     * Displays a spinning loading icon in place of the button text and disables the button\n     */\n    isLoading?: boolean;\n\n    /**\n     * Disables the button\n     */\n    disabled?: boolean;\n  }\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, useCssModule } from 'vue';\n  import { RouteLocationRaw } from 'vue-router';\n\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-button',\n  });\n\n  const props = withDefaults(defineProps<ButtonProps>(), {\n    secondary: false,\n    icon: false,\n    iconLabel: false,\n    tertiary: false,\n    inline: false,\n    color: undefined,\n    href: '',\n    to: undefined,\n    isLoading: false,\n    disabled: undefined,\n  });\n  const classes = useCssModule();\n\n  enum ButtonTypes {\n    Icon = 'icon',\n    IconLabel = 'iconLabel',\n    Secondary = 'secondary',\n    Tertiary = 'tertiary',\n    Inline = 'inline',\n    Primary = 'primary',\n  }\n\n  type ButtonType = `${ButtonTypes}`;\n\n  const buttonType = computed<ButtonType>(() => {\n    for (const type of Object.values(ButtonTypes)) {\n      if (props[type]) {\n        return type;\n      }\n    }\n\n    return ButtonTypes.Primary;\n  });\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 'button';\n  });\n\n  const buttonAttrs = 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    :disabled=\"props.isLoading || props.disabled ? true : undefined\"\n    v-bind=\"buttonAttrs\"\n    class=\"stash-button\"\n    :class=\"[\n      classes.button,\n      `stash-button--${buttonType}`,\n      classes[`button--${buttonType}`],\n      {\n        [`stash-button--${props.color}`]: props.color,\n        [classes[`button--${props.color}`]]: props.color,\n        'stash-button--is-loading': props.isLoading,\n      },\n    ]\"\n    data-test=\"ll-button\"\n  >\n    <Icon v-if=\"props.isLoading\" name=\"loading-empty\" class=\"animate-spin\" />\n    <!-- @slot default -->\n    <slot v-else></slot>\n  </component>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .button {\n      border-radius: var(--radius-sm);\n      border-width: 1px;\n      display: inline-block;\n      font-size: 0.875rem;\n      font-weight: var(--font-weight-semibold);\n      line-height: 2.125rem;\n      margin: 0;\n      min-width: 144px;\n      padding: 0 --spacing(3);\n      text-align: center;\n      text-decoration: none;\n      vertical-align: middle;\n      white-space: nowrap;\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      /* `focus` and `hover` should be added only for large screens */\n      .button:focus {\n        box-shadow: 0 0 0 3px rgb(0 123 255 / 14%);\n        outline: none;\n      }\n\n      .button:hover {\n        text-decoration: none;\n      }\n    }\n\n    .button[disabled] {\n      cursor: default;\n      pointer-events: none;\n    }\n\n    /* Solid treatment */\n    .button--solid {\n      background-color: var(--button-color);\n      border-color: transparent;\n      color: var(--text-color);\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      /* `hover` should be added only for large screens */\n      .button--solid:hover {\n        background-color: var(--button-hover-color);\n      }\n    }\n\n    .button--solid:active {\n      background-color: var(--button-hover-color);\n    }\n\n    .button--solid[disabled]:not(:global(.stash-button--is-loading)) {\n      --button-color: var(--color-ice-500) !important;\n    }\n\n    /* Ghost treatment */\n    .button--ghost {\n      background-color: rgb(0 0 0 / 0%);\n      border-color: var(--button-color);\n      color: var(--text-color);\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      /* `hover` should be added only for large screens */\n      .button--ghost:hover {\n        background-color: var(--button-hover-color);\n      }\n    }\n\n    .button--ghost:active {\n      background-color: var(--button-hover-color);\n    }\n\n    .button--ghost[disabled]:not(:global(.stash-button--is-loading)) {\n      --button-color: var(--color-ice-500) !important;\n      --text-color: var(--color-ice-500) !important;\n    }\n\n    /* Types */\n    .button--primary {\n      composes: button--solid;\n      --button-color: var(--color-blue-500);\n      --button-hover-color: var(--color-blue-hover);\n      --text-color: var(--color-white);\n    }\n\n    .button--secondary {\n      composes: button--ghost;\n      --button-color: var(--color-ice-500);\n      --button-hover-color: var(--color-ice-700-hover);\n      --text-color: var(--color-ice-700);\n    }\n\n    .button--tertiary {\n      composes: button--ghost;\n      --button-color: var(--color-white);\n      --button-hover-color: var(--color-white-hover);\n      --text-color: var(--color-white);\n    }\n\n    .button--icon,\n    .button--iconLabel {\n      /* https://developers.google.com/web/fundamentals/accessibility/accessible-styles */\n      border: 0;\n      border-radius: var(--radius-sm);\n      height: --spacing(12);\n      min-width: --spacing(12);\n      text-decoration: none;\n    }\n\n    .button--icon {\n      padding: --spacing(3);\n      width: --spacing(12);\n    }\n\n    .button--iconLabel {\n      padding: 0;\n      width: unset;\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      /* `hover` should be added only for large screens */\n      .button--icon:hover,\n      .button--iconLabel:hover {\n        text-decoration: none;\n      }\n    }\n\n    .button--icon svg,\n    .button--iconLabel svg {\n      display: block;\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    .button--icon[disabled]:not(:global(.stash-button--is-loading)) svg,\n    .button--iconLabel[disabled]:not(:global(.stash-button--is-loading)),\n    .button--iconLabel[disabled]:not(:global(.stash-button--is-loading)) svg {\n      color: var(--color-ice-500);\n    }\n\n    .button--inline {\n      border: 0;\n      color: var(--color-blue-500);\n      font-weight: var(--font-weight-medium);\n      line-height: 1.5;\n      min-width: 0;\n      padding: 0;\n    }\n\n    .button--inline:hover {\n      text-decoration: underline;\n    }\n\n    .button--inline[disabled] {\n      color: var(--color-ice-500);\n    }\n\n    /* Colors */\n    .button--blue.button--primary,\n    .button--blue.button--secondary {\n      --button-color: var(--color-blue-500);\n    }\n\n    .button--blue.button--primary {\n      --button-hover-color: var(--color-blue-hover);\n    }\n\n    .button--blue.button--secondary {\n      --text-color: var(--color-blue-500);\n      --button-hover-color: var(--button-secondary-blue-hover);\n    }\n\n    .button--red.button--primary,\n    .button--red.button--secondary {\n      --button-color: var(--color-red-500);\n    }\n\n    .button--red.button--primary {\n      --button-hover-color: var(--color-red-hover);\n    }\n\n    .button--red.button--secondary {\n      --text-color: var(--color-red-500);\n      --button-hover-color: var(--button-secondary-red-hover);\n    }\n\n    /**\n     * Button Grid\n     * TODO: Move into separate component\n     * https://leaflink.atlassian.net/browse/STASH-230\n     * See `styles/elements/_buttons.scss` for button-grid (parent element) specific styles.\n     */\n    :global(.button-grid) > .button,\n    :global(.header-button-grid) > .button {\n      width: 50%;\n    }\n\n    :global(.button-grid) > .button + .button {\n      margin-left: --spacing(6);\n    }\n\n    @media (width >= theme(--breakpoint-md)) {\n      :global(.button-grid) > .button {\n        width: auto;\n      }\n    }\n\n    :global(.header-button-grid) > .button + .button {\n      margin-left: --spacing(6);\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      :global(.header-button-grid) > .button {\n        width: auto;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","ButtonTypes","buttonType","computed","type","is","buttonAttrs","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","Icon","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;;;AAgEE,UAAMA,IAAQC,GAYRC,IAAUC,EAAA;AAEhB,QAAKC;AAAL,KAAA,CAAKA,MAAL;AACEA,MAAAA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,UAAU;AAAA,IAAA,GANPA,MAAAA,IAAA,CAAA,EAAA;AAWL,UAAMC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOH,CAAW;AAC1C,YAAIJ,EAAMO,CAAI;AACZ,iBAAOA;AAIX,aAAO;AAAA,IACT,CAAC,GAEKC,IAAKF,EAAS,MACdN,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR,GAEKS,IAAcH,EAAS,MACvBN,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,CAAA,CACR;2BAIDU,EAoBYC,EAnBLH,EAAA,KAAE,GADTI,EAoBY;AAAA,MAlBT,UAAUZ,EAAM,aAAaA,EAAM,WAAQ,KAAU;AAAA,IAAA,GAC9CS,EAAA,OAAW;AAAA,MACnB,QAAM,gBAAc;AAAA,QACJI,EAAAX,CAAA,EAAQ;AAAA,yBAA+BG,EAAA,KAAU;AAAA,QAAUQ,EAAAX,CAAA,aAAmBG,EAAA,KAAU,EAAA;AAAA;UAAuC,CAAA,iBAAAL,EAAM,KAAK,EAAA,GAAKA,EAAM;AAAA,UAAgB,CAAAa,EAAAX,CAAA,aAAmBF,EAAM,KAAK,EAAA,CAAA,GAAMA,EAAM;AAAA,UAA2C,4BAAAA,EAAM;AAAA,QAAA;AAAA;MAUhR,aAAU;AAAA,IAAA;iBAEV,MAAyE;AAAA,QAA7DA,EAAM,kBAAlBU,EAAyEI,GAAA;AAAA;UAA5C,MAAK;AAAA,UAAgB,OAAM;AAAA,QAAA,MAExDC,EAAoBC,EAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA;AAAA,MAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/ButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * @deprecated use RadioGroup instead with `variant=\"button\"`.\n   * RadioGroup uses pretty much the same API as the ButtonGroup,\n   * but every button is a radio element which makes more sense semantically.\n   */\n  export default {\n    name: 'll-button-group',\n  };\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, ref } from 'vue';\n\n  export interface ButtonGroupOption {\n    id: string;\n    active?: boolean;\n    text: string;\n  }\n\n  export interface ButtonGroupProps {\n    /**\n     * A name for the group, useful when multiple ButtonGroups exist on the page\n     */\n    groupName?: string;\n\n    /**\n     * The list of buttons to render\n     */\n    options: ButtonGroupOption[];\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the active button can be deactivated\n     */\n    allowDeactivate?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ButtonGroupProps>(), {\n    groupName: uniqueId(),\n    fullWidth: false,\n    disabled: false,\n    allowDeactivate: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'input', activeButton: ButtonGroupOption | null): void;\n  }>();\n\n  const isSingleButton = computed(() => props.options.length === 1);\n\n  const canDeactivate = computed(() => props.allowDeactivate || isSingleButton.value);\n\n  const activeButton = ref(props.options.find((o) => o.active) || null);\n\n  function onClick(clickedOption: ButtonGroupOption) {\n    if (canDeactivate.value && activeButton.value?.id === clickedOption.id) {\n      activeButton.value = null;\n    } else {\n      activeButton.value = clickedOption;\n    }\n\n    emit('input', activeButton.value);\n  }\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'flex',\n      $style.buttonGroup,\n      { 'w-full': props.fullWidth },\n      { [$style.single]: isSingleButton },\n      { [$style['can-deactivate']]: canDeactivate },\n    ]\"\n    :data-test=\"`button-group-${$props.groupName}`\"\n  >\n    <button\n      v-for=\"option in props.options\"\n      :key=\"`${props.groupName}-${option.id}`\"\n      :class=\"[$style.button, { [$style.active]: activeButton?.id === option.id }]\"\n      :data-test=\"`${props.groupName}-button-${activeButton?.id === option.id ? 'active' : 'inactive'}`\"\n      :tabindex=\"0\"\n      :disabled=\"props.disabled\"\n      @click.prevent=\"onClick(option)\"\n    >\n      {{ option.text }}\n    </button>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    /* full width buttons */\n    .buttonGroup:global(.w-full) > button {\n      flex: 1 1 50%;\n      max-width: 100%;\n    }\n\n    .button {\n      border: 1px solid var(--color-ice-500);\n      border-radius: 0;\n      font-weight: var(--font-weight-semibold);\n      line-height: var(--line-height-body);\n      min-width: 100px;\n      padding: 7px 8px;\n    }\n\n    .single .button {\n      border: 1px solid var(--color-ice-700);\n      color: var(--color-ice-700);\n    }\n\n    .button:focus,\n    .button:hover {\n      border: 1px solid var(--color-blue-500) !important;\n      color: var(--color-blue-500);\n      z-index: 1;\n    }\n\n    .button.active {\n      background-color: var(--color-blue-100);\n      border: 1px solid var(--color-blue-500) !important;\n      color: var(--color-blue-500);\n      cursor: default;\n      z-index: 1;\n    }\n\n    .button.active + button {\n      border-left: 1px solid transparent;\n    }\n\n    .single .button.active,\n    .can-deactivate .button.active {\n      cursor: pointer;\n    }\n\n    .button[disabled] {\n      color: var(--color-ice-500);\n      cursor: default;\n      pointer-events: none;\n    }\n\n    .button:focus {\n      box-shadow: none;\n      outline: 0;\n    }\n\n    .button:not(:first-child) {\n      margin-left: -1px;\n    }\n\n    .button:not(:last-child) {\n      border-right: 1px solid transparent;\n    }\n\n    .button:first-child {\n      border-bottom-left-radius: var(--radius-sm);\n      border-top-left-radius: var(--radius-sm);\n    }\n\n    .button:last-child {\n      border-bottom-right-radius: var(--radius-sm);\n      border-top-right-radius: var(--radius-sm);\n    }\n  }\n</style>\n"],"names":["__default__","props","__props","emit","__emit","isSingleButton","computed","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a"],"mappings":";;;mEAMEA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAwCA,UAAMC,IAAQC,GAORC,IAAOC,GAIPC,IAAiBC,EAAS,MAAML,EAAM,QAAQ,WAAW,CAAC,GAE1DM,IAAgBD,EAAS,MAAML,EAAM,mBAAmBI,EAAe,KAAK,GAE5EG,IAAeC,EAAIR,EAAM,QAAQ,KAAK,CAACS,MAAMA,EAAE,MAAM,KAAK,IAAI;AAEpE,aAASC,EAAQC,GAAkC;;AACjD,MAAIL,EAAc,WAASM,IAAAL,EAAa,UAAb,gBAAAK,EAAoB,QAAOD,EAAc,KAClEJ,EAAa,QAAQ,OAErBA,EAAa,QAAQI,GAGvBT,EAAK,SAASK,EAAa,KAAK;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/ButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * @deprecated use RadioGroup instead with `variant=\"button\"`.\n   * RadioGroup uses pretty much the same API as the ButtonGroup,\n   * but every button is a radio element which makes more sense semantically.\n   */\n  export default {\n    name: 'll-button-group',\n  };\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, ref } from 'vue';\n\n  export interface ButtonGroupOption {\n    id: string;\n    active?: boolean;\n    text: string;\n  }\n\n  export interface ButtonGroupProps {\n    /**\n     * A name for the group, useful when multiple ButtonGroups exist on the page\n     */\n    groupName?: string;\n\n    /**\n     * The list of buttons to render\n     */\n    options: ButtonGroupOption[];\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the active button can be deactivated\n     */\n    allowDeactivate?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ButtonGroupProps>(), {\n    groupName: uniqueId(),\n    fullWidth: false,\n    disabled: false,\n    allowDeactivate: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'input', activeButton: ButtonGroupOption | null): void;\n  }>();\n\n  const isSingleButton = computed(() => props.options.length === 1);\n\n  const canDeactivate = computed(() => props.allowDeactivate || isSingleButton.value);\n\n  const activeButton = ref(props.options.find((o) => o.active) || null);\n\n  function onClick(clickedOption: ButtonGroupOption) {\n    if (canDeactivate.value && activeButton.value?.id === clickedOption.id) {\n      activeButton.value = null;\n    } else {\n      activeButton.value = clickedOption;\n    }\n\n    emit('input', activeButton.value);\n  }\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'flex',\n      $style.buttonGroup,\n      { 'w-full': props.fullWidth },\n      { [$style.single]: isSingleButton },\n      { [$style['can-deactivate']]: canDeactivate },\n    ]\"\n    :data-test=\"`button-group-${$props.groupName}`\"\n  >\n    <button\n      v-for=\"option in props.options\"\n      :key=\"`${props.groupName}-${option.id}`\"\n      :class=\"[$style.button, { [$style.active]: activeButton?.id === option.id }]\"\n      :data-test=\"`${props.groupName}-button-${activeButton?.id === option.id ? 'active' : 'inactive'}`\"\n      :tabindex=\"0\"\n      :disabled=\"props.disabled\"\n      @click.prevent=\"onClick(option)\"\n    >\n      {{ option.text }}\n    </button>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    /* full width buttons */\n    .buttonGroup:global(.w-full) > button {\n      flex: 1 1 50%;\n      max-width: 100%;\n    }\n\n    .button {\n      border: 1px solid var(--color-ice-500);\n      border-radius: 0;\n      font-weight: var(--font-weight-semibold);\n      line-height: var(--line-height-body);\n      min-width: 100px;\n      padding: 7px 8px;\n    }\n\n    .single .button {\n      border: 1px solid var(--color-ice-700);\n      color: var(--color-ice-700);\n    }\n\n    .button:focus,\n    .button:hover {\n      border: 1px solid var(--color-blue-500) !important;\n      color: var(--color-blue-500);\n      z-index: 1;\n    }\n\n    .button.active {\n      background-color: var(--color-blue-100);\n      border: 1px solid var(--color-blue-500) !important;\n      color: var(--color-blue-500);\n      cursor: default;\n      z-index: 1;\n    }\n\n    .button.active + button {\n      border-left: 1px solid transparent;\n    }\n\n    .single .button.active,\n    .can-deactivate .button.active {\n      cursor: pointer;\n    }\n\n    .button[disabled] {\n      color: var(--color-ice-500);\n      cursor: default;\n      pointer-events: none;\n    }\n\n    .button:focus {\n      box-shadow: none;\n      outline: 0;\n    }\n\n    .button:not(:first-child) {\n      margin-left: -1px;\n    }\n\n    .button:not(:last-child) {\n      border-right: 1px solid transparent;\n    }\n\n    .button:first-child {\n      border-bottom-left-radius: var(--radius-sm);\n      border-top-left-radius: var(--radius-sm);\n    }\n\n    .button:last-child {\n      border-bottom-right-radius: var(--radius-sm);\n      border-top-right-radius: var(--radius-sm);\n    }\n  }\n</style>\n"],"names":["__default__","props","__props","emit","__emit","isSingleButton","computed","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a","_createElementBlock","_normalizeClass","$style","$props","_openBlock","_Fragment","_renderList","option","_b","_withModifiers","$event","_toDisplayString","_hoisted_2"],"mappings":";;;mEAMEA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAwCA,UAAMC,IAAQC,GAORC,IAAOC,GAIPC,IAAiBC,EAAS,MAAML,EAAM,QAAQ,WAAW,CAAC,GAE1DM,IAAgBD,EAAS,MAAML,EAAM,mBAAmBI,EAAe,KAAK,GAE5EG,IAAeC,EAAIR,EAAM,QAAQ,KAAK,CAACS,MAAMA,EAAE,MAAM,KAAK,IAAI;AAEpE,aAASC,EAAQC,GAAkC;;AACjD,MAAIL,EAAc,WAASM,IAAAL,EAAa,UAAb,gBAAAK,EAAoB,QAAOD,EAAc,KAClEJ,EAAa,QAAQ,OAErBA,EAAa,QAAQI,GAGvBT,EAAK,SAASK,EAAa,KAAK;AAAA,IAClC;2BAIAM,EAqBM,OAAA;AAAA,MApBH,OAAKC,EAAA;AAAA;QAAwBC,EAAAA,OAAO;AAAA,QAA+B,EAAA,UAAAf,EAAM,UAAA;AAAA,WAAsBe,EAAAA,OAAO,MAAM,GAAGX,EAAA,MAAA;AAAA,QAA2BW,EAAAA,CAAAA,EAAAA,2BAA2BT,EAAA,MAAA;AAAA,MAAa;MAOlL,aAAS,gBAAkBU,EAAAA,OAAO,SAAS;AAAA,IAAA;OAE5CC,EAAA,EAAA,GAAAJ,EAUSK,GAAA,MAAAC,EATUnB,EAAM,UAAhBoB,MAAM;;oBADfP,EAUS,UAAA;AAAA,UARN,QAAQb,EAAM,SAAS,IAAIoB,EAAO,EAAE;AAAA,UACpC,OAAKN,EAAA,CAAGC,EAAAA,OAAO,WAAWA,EAAAA,OAAO,MAAM,KAAGH,IAAAL,YAAA,gBAAAK,EAAc,QAAOQ,EAAO,GAAA,CAAE,CAAA;AAAA,UACxE,aAAS,GAAKpB,EAAM,SAAS,aAAWqB,IAAAd,EAAA,UAAA,gBAAAc,EAAc,QAAOD,EAAO,KAAE,WAAA,UAAA;AAAA,UACtE,UAAU;AAAA,UACV,UAAUpB,EAAM;AAAA,UAChB,SAAKsB,EAAA,CAAAC,MAAUb,EAAQU,CAAM,GAAA,CAAA,SAAA,CAAA;AAAA,QAAA,GAE3BI,EAAAJ,EAAO,IAAI,GAAA,IAAAK,CAAA;AAAA;;;;;;;;;;;;"}

package/dist/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../src/components/Card/Card.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useSlots } from 'vue';\n\n  export interface CardProps {\n    /**\n     * Detach the actions from the top of the card, making them absolute-positioned.\n     * @default false\n     */\n    detachActions?: boolean;\n  }\n\n  const props = withDefaults(defineProps<CardProps>(), {\n    detachActions: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <article class=\"stash-card relative inline-block rounded border bg-white shadow-md\" data-test=\"stash-card\">\n    <div\n      v-if=\"slots['top-left'] || slots['top-right']\"\n      data-test=\"card-actions\"\n      :class=\"{ 'absolute top-0 w-full': props.detachActions }\"\n      class=\"flex flex-wrap items-start justify-between p-6\"\n    >\n      <div>\n        <!-- @slot Top left actions slot, for rendering content on the card top-left -->\n        <slot name=\"top-left\"></slot>\n      </div>\n      <div>\n        <!-- @slot Top right actions slot, for rendering content on the card top-right -->\n        <slot name=\"top-right\"></slot>\n      </div>\n    </div>\n\n    <div :class=\"{ 'mb-6 flex h-full flex-col gap-y-6': slots['default'] }\">\n      <!-- @slot Default slot, for rendering card subcomponents -->\n      <slot></slot>\n    </div>\n  </article>\n</template>\n"],"names":["props","__props","slots","useSlots"],"mappings":";;;;;;;;;;AAWE,UAAMA,IAAQC,GAIRC,IAAQC,EAAA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Card.js","sources":["../src/components/Card/Card.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useSlots } from 'vue';\n\n  export interface CardProps {\n    /**\n     * Detach the actions from the top of the card, making them absolute-positioned.\n     * @default false\n     */\n    detachActions?: boolean;\n  }\n\n  const props = withDefaults(defineProps<CardProps>(), {\n    detachActions: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <article class=\"stash-card relative inline-block rounded border bg-white shadow-md\" data-test=\"stash-card\">\n    <div\n      v-if=\"slots['top-left'] || slots['top-right']\"\n      data-test=\"card-actions\"\n      :class=\"{ 'absolute top-0 w-full': props.detachActions }\"\n      class=\"flex flex-wrap items-start justify-between p-6\"\n    >\n      <div>\n        <!-- @slot Top left actions slot, for rendering content on the card top-left -->\n        <slot name=\"top-left\"></slot>\n      </div>\n      <div>\n        <!-- @slot Top right actions slot, for rendering content on the card top-right -->\n        <slot name=\"top-right\"></slot>\n      </div>\n    </div>\n\n    <div :class=\"{ 'mb-6 flex h-full flex-col gap-y-6': slots['default'] }\">\n      <!-- @slot Default slot, for rendering card subcomponents -->\n      <slot></slot>\n    </div>\n  </article>\n</template>\n"],"names":["props","__props","slots","useSlots","_openBlock","_createElementBlock","_hoisted_1","_unref","_normalizeClass","_createElementVNode","_renderSlot","_ctx"],"mappings":";;;;;;;;;;AAWE,UAAMA,IAAQC,GAIRC,IAAQC,EAAA;sBAIdC,EAAA,GAAAC,EAqBU,WArBVC,GAqBU;AAAA,MAnBAC,EAAAL,CAAA,iBAAqBK,EAAAL,CAAA,EAAK,WAAA,UADlCG,EAcM,OAAA;AAAA;QAZJ,aAAU;AAAA,QACT,OAAKG,EAAA,CAAA,EAAA,yBAA6BR,EAAM,cAAA,GACnC,gDAAgD,CAAA;AAAA,MAAA;QAEtDS,EAGM,OAAA,MAAA;AAAA,UADJC,EAA6BC,EAAA,QAAA,UAAA;AAAA,QAAA;QAE/BF,EAGM,OAAA,MAAA;AAAA,UADJC,EAA8BC,EAAA,QAAA,WAAA;AAAA,QAAA;;MAIlCF,EAGM,OAAA;AAAA,QAHA,gDAA8CF,EAAAL,CAAA,EAAK,QAAA,CAAA;AAAA,MAAA;QAEvDQ,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;"}

package/dist/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sources":["../src/components/CardHeader/CardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  export interface CardHeaderProps {\n    /**\n     * Title to be displayed\n     */\n    title: string;\n    /**\n     * Subtitle to be displayed\n     */\n    subtitle?: string;\n    /**\n     * Additional text to be displayed\n     */\n    text?: string;\n  }\n\n  const props = defineProps<CardHeaderProps>();\n</script>\n\n<template>\n  <header class=\"stash-card-header px-6 font-medium text-ice-900\" data-test=\"stash-card-header\">\n    <h4 class=\"text-base\">\n      {{ props.title }}\n    </h4>\n    <p v-if=\"props.subtitle\" class=\"mb-0 mt-1.5\">\n      {{ props.subtitle }}\n    </p>\n    <span v-if=\"props.text\" class=\"mt-1.5 text-ice-700\">\n      {{ props.text }}\n    </span>\n  </header>\n</template>\n"],"names":["props","__props"],"mappings":";;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC;;;;;;;;"}
+{"version":3,"file":"CardHeader.js","sources":["../src/components/CardHeader/CardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  export interface CardHeaderProps {\n    /**\n     * Title to be displayed\n     */\n    title: string;\n    /**\n     * Subtitle to be displayed\n     */\n    subtitle?: string;\n    /**\n     * Additional text to be displayed\n     */\n    text?: string;\n  }\n\n  const props = defineProps<CardHeaderProps>();\n</script>\n\n<template>\n  <header class=\"stash-card-header px-6 font-medium text-ice-900\" data-test=\"stash-card-header\">\n    <h4 class=\"text-base\">\n      {{ props.title }}\n    </h4>\n    <p v-if=\"props.subtitle\" class=\"mb-0 mt-1.5\">\n      {{ props.subtitle }}\n    </p>\n    <span v-if=\"props.text\" class=\"mt-1.5 text-ice-700\">\n      {{ props.text }}\n    </span>\n  </header>\n</template>\n"],"names":["props","__props","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_toDisplayString","_hoisted_3","_hoisted_4"],"mappings":";;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC;sBAIdC,EAAA,GAAAC,EAUS,UAVTC,GAUS;AAAA,MATPC,EAEK,MAFLC,GAEKC,EADAP,EAAM,KAAK,GAAA,CAAA;AAAA,MAEPA,EAAM,YAAfE,EAAA,GAAAC,EAEI,KAFJK,GAEID,EADCP,EAAM,QAAQ,GAAA,CAAA;MAEPA,EAAM,QAAlBE,EAAA,GAAAC,EAEO,QAFPM,GAEOF,EADFP,EAAM,IAAI,GAAA,CAAA;;;;"}

package/dist/CardMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardMedia.js","sources":["../src/components/CardMedia/CardMedia.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  export interface CardMediaProps {\n    /**\n     * The image source.\n     */\n    src: string;\n    /**\n     * The image alternative text.\n     */\n    alt?: string;\n  }\n\n  const isLoading = ref(true);\n\n  const hasErrored = ref(false);\n\n  const props = defineProps<CardMediaProps>();\n\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"stash-card-media\" data-test=\"stash-card-media\">\n    <div\n      v-if=\"isLoading || hasErrored\"\n      :class=\"classes.placeholder\"\n      class=\"flex w-full items-center justify-center rounded-t bg-ice-200\"\n    >\n      <Icon name=\"image\" :class=\"classes.iconSize\" />\n    </div>\n    <img\n      :src=\"props.src\"\n      class=\"w-full rounded-t\"\n      :alt=\"props.alt\"\n      @load=\"() => (isLoading = false)\"\n      @error=\"() => (hasErrored = true)\"\n    />\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .placeholder {\n      height: 300px;\n      width: 100%;\n    }\n\n    .iconSize {\n      width: 189px;\n      height: 189px;\n    }\n  }\n</style>\n"],"names":["isLoading","ref","hasErrored","props","__props","classes","useCssModule"],"mappings":";;;;;;;;;;;;;AAgBE,UAAMA,IAAYC,EAAI,EAAI,GAEpBC,IAAaD,EAAI,EAAK,GAEtBE,IAAQC,GAERC,IAAUC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CardMedia.js","sources":["../src/components/CardMedia/CardMedia.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  export interface CardMediaProps {\n    /**\n     * The image source.\n     */\n    src: string;\n    /**\n     * The image alternative text.\n     */\n    alt?: string;\n  }\n\n  const isLoading = ref(true);\n\n  const hasErrored = ref(false);\n\n  const props = defineProps<CardMediaProps>();\n\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"stash-card-media\" data-test=\"stash-card-media\">\n    <div\n      v-if=\"isLoading || hasErrored\"\n      :class=\"classes.placeholder\"\n      class=\"flex w-full items-center justify-center rounded-t bg-ice-200\"\n    >\n      <Icon name=\"image\" :class=\"classes.iconSize\" />\n    </div>\n    <img\n      :src=\"props.src\"\n      class=\"w-full rounded-t\"\n      :alt=\"props.alt\"\n      @load=\"() => (isLoading = false)\"\n      @error=\"() => (hasErrored = true)\"\n    />\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .placeholder {\n      height: 300px;\n      width: 100%;\n    }\n\n    .iconSize {\n      width: 189px;\n      height: 189px;\n    }\n  }\n</style>\n"],"names":["isLoading","ref","hasErrored","props","__props","classes","useCssModule","_openBlock","_createElementBlock","_hoisted_1","_normalizeClass","_unref","_createVNode","Icon","_createElementVNode"],"mappings":";;;;;;;;;;;;;AAgBE,UAAMA,IAAYC,EAAI,EAAI,GAEpBC,IAAaD,EAAI,EAAK,GAEtBE,IAAQC,GAERC,IAAUC,EAAA;sBAIhBC,EAAA,GAAAC,EAeM,OAfNC,GAeM;AAAA,MAbIT,EAAA,SAAaE,EAAA,cADrBM,EAMM,OAAA;AAAA;QAJH,OAAKE,EAAA,CAAEC,EAAAN,CAAA,EAAQ,aACV,8DAA8D,CAAA;AAAA,MAAA;QAEpEO,EAA+CC,GAAA;AAAA,UAAzC,MAAK;AAAA,UAAS,OAAKH,EAAEC,EAAAN,CAAA,EAAQ,QAAQ;AAAA,QAAA;;MAE7CS,EAME,OAAA;AAAA,QALC,KAAKX,EAAM;AAAA,QACZ,OAAM;AAAA,QACL,KAAKA,EAAM;AAAA,QACX,8BAAaH,EAAA,QAAS;AAAA,QACtB,+BAAcE,EAAA,QAAU;AAAA,MAAA;;;;;;;;;"}