@leaflink/stash 50.5.1 → 50.5.3

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 emits = defineEmits<{\n    (e: 'toggle', state: ToggleState): void;\n    (e: 'open'): void;\n    (e: '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  watch(\n    () => props.isExpanded,\n    (newVal) => {\n      localIsExpanded.value = newVal;\n      emitEvents();\n    },\n  );\n\n  const toggle = () => {\n    localIsExpanded.value = !localIsExpanded.value;\n    emitEvents();\n  };\n\n  function emitEvents() {\n    emits('toggle', { isExpanded: localIsExpanded.value });\n    localIsExpanded.value ? emits('open') : emits('close');\n  }\n</script>\n\n<template>\n  <div class=\"stash-accordion tw-rounded tw-border tw-border-ice-500 tw-bg-white\" data-test=\"stash-accordion\">\n    <div\n      tabindex=\"0\"\n      data-test=\"stash-accordion|toggle\"\n      class=\"stash-accordion__toggle tw-flex tw-items-center\"\n      :class=\"[classes.toggle, localIsExpanded && classes['toggle--open']]\"\n      @click=\"toggle\"\n      @keypress.enter=\"toggle\"\n      @keypress.space.prevent=\"toggle\"\n    >\n      <div v-if=\"slots.header\">\n        <!-- @slot Accordion header -->\n        <slot name=\"header\"> </slot>\n      </div>\n      <template v-else>\n        <Icon class=\"tw-text-blue-500\" size=\"dense\" :name=\"props.icon\" data-test=\"stash-accordion|toggle-icon\" />\n        <div class=\"tw-flex-1 tw-select-none tw-font-medium tw-leading-5 tw-text-ice-900\">\n          {{ props.title }}\n        </div>\n      </template>\n\n      <Icon\n        class=\"tw-ml-auto tw-justify-center tw-text-ice-900 tw-transition-transform tw-duration-300\"\n        size=\"dense\"\n        name=\"chevron-down\"\n        data-test=\"stash-accordion|toggle-chevron\"\n        :class=\"{ 'tw-rotate-180': localIsExpanded }\"\n      />\n    </div>\n    <hr v-show=\"localIsExpanded\" class=\"tw-mx-[18px] tw-h-px tw-bg-ice-200\" />\n    <Expand :is-expanded=\"localIsExpanded\">\n      <div class=\"stash-accordion__content tw-p-[18px]\" data-test=\"stash-accordion|content\">\n        <!-- @slot Accordion content -->\n        <slot></slot>\n      </div>\n    </Expand>\n  </div>\n</template>\n\n<style module>\n  .toggle {\n    @apply tw-outline-none tw-ring-blue-500 tw-ring-opacity-15;\n\n    display: flex;\n    cursor: pointer;\n    gap: theme('gap[1.5]');\n    padding: 17px;\n    outline: none;\n    border-radius: theme('borderRadius.DEFAULT');\n\n    &:focus-visible {\n      @apply tw-ring-4;\n      border-color: var(--color-ice-900);\n      padding: 15px;\n      border-width: 2px;\n    }\n\n    &--open {\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--color-ice-100);\n      }\n    }\n\n    &:active {\n      background-color: var(--color-ice-200);\n    }\n\n    &:active + hr,\n    &:hover + hr {\n      opacity: 0;\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emits","__emit","classes","useCssModule","localIsExpanded","ref","watch","newVal","emitEvents","toggle"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BE,UAAMA,IAAQC,GAKRC,IAAQC,KAERC,IAAQC,GAMRC,IAAUC;AAEhB,QAAI,CAACP,EAAM,SAAS,CAACE,EAAM;AACnB,YAAA,IAAI,MAAM,qDAAqD;AAGjE,UAAAM,IAAkBC,EAAIT,EAAM,UAAU;AAE5C,IAAAU;AAAA,MACE,MAAMV,EAAM;AAAA,MACZ,CAACW,MAAW;AACV,QAAAH,EAAgB,QAAQG,GACbC;MACb;AAAA,IAAA;AAGF,UAAMC,IAAS,MAAM;AACH,MAAAL,EAAA,QAAQ,CAACA,EAAgB,OAC9BI;IAAA;AAGb,aAASA,IAAa;AACpB,MAAAR,EAAM,UAAU,EAAE,YAAYI,EAAgB,MAAO,CAAA,GACrDA,EAAgB,QAAQJ,EAAM,MAAM,IAAIA,EAAM,OAAO;AAAA,IACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 emits = defineEmits<{\n    (e: 'toggle', state: ToggleState): void;\n    (e: 'open'): void;\n    (e: '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  watch(\n    () => props.isExpanded,\n    (newVal) => {\n      localIsExpanded.value = newVal;\n      emitEvents();\n    },\n  );\n\n  const toggle = () => {\n    localIsExpanded.value = !localIsExpanded.value;\n    emitEvents();\n  };\n\n  function emitEvents() {\n    emits('toggle', { isExpanded: localIsExpanded.value });\n    localIsExpanded.value ? emits('open') : emits('close');\n  }\n</script>\n\n<template>\n  <div class=\"stash-accordion tw-rounded tw-border tw-border-ice-500 tw-bg-white\" data-test=\"stash-accordion\">\n    <div\n      tabindex=\"0\"\n      data-test=\"stash-accordion|toggle\"\n      class=\"stash-accordion__toggle tw-flex tw-items-center\"\n      :class=\"[classes.toggle, localIsExpanded && classes['toggle--open']]\"\n      @click=\"toggle\"\n      @keypress.enter=\"toggle\"\n      @keypress.space.prevent=\"toggle\"\n    >\n      <div v-if=\"slots.header\">\n        <!-- @slot Accordion header -->\n        <slot name=\"header\"> </slot>\n      </div>\n      <template v-else>\n        <Icon class=\"tw-text-blue-500\" size=\"dense\" :name=\"props.icon\" data-test=\"stash-accordion|toggle-icon\" />\n        <div class=\"tw-flex-1 tw-select-none tw-font-medium tw-leading-5 tw-text-ice-900\">\n          {{ props.title }}\n        </div>\n      </template>\n\n      <Icon\n        class=\"tw-ml-auto tw-justify-center tw-text-ice-900 tw-transition-transform tw-duration-300\"\n        size=\"dense\"\n        name=\"chevron-down\"\n        data-test=\"stash-accordion|toggle-chevron\"\n        :class=\"{ 'tw-rotate-180': localIsExpanded }\"\n      />\n    </div>\n    <hr v-show=\"localIsExpanded\" class=\"tw-mx-[18px] tw-h-px tw-bg-ice-200\" />\n    <Expand :is-expanded=\"localIsExpanded\">\n      <div class=\"stash-accordion__content tw-p-[18px]\" data-test=\"stash-accordion|content\">\n        <!-- @slot Accordion content -->\n        <slot></slot>\n      </div>\n    </Expand>\n  </div>\n</template>\n\n<style module>\n  .toggle {\n    @apply tw-outline-none tw-ring-blue-500 tw-ring-opacity-15;\n\n    display: flex;\n    cursor: pointer;\n    gap: theme('gap[1.5]');\n    padding: 17px;\n    outline: none;\n    border-radius: theme('borderRadius.DEFAULT');\n\n    &:focus-visible {\n      @apply tw-ring-4;\n      border-color: var(--color-ice-900);\n      padding: 15px;\n      border-width: 2px;\n    }\n\n    &--open {\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: var(--color-ice-100);\n      }\n    }\n\n    &:active {\n      background-color: var(--color-ice-200);\n    }\n\n    &:active + hr,\n    &:hover + hr {\n      opacity: 0;\n    }\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emits","__emit","classes","useCssModule","localIsExpanded","ref","watch","newVal","emitEvents","toggle"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BE,UAAMA,IAAQC,GAKRC,IAAQC,EAAS,GAEjBC,IAAQC,GAMRC,IAAUC,EAAa;AAE7B,QAAI,CAACP,EAAM,SAAS,CAACE,EAAM;AACnB,YAAA,IAAI,MAAM,qDAAqD;AAGjE,UAAAM,IAAkBC,EAAIT,EAAM,UAAU;AAE5C,IAAAU;AAAA,MACE,MAAMV,EAAM;AAAA,MACZ,CAACW,MAAW;AACV,QAAAH,EAAgB,QAAQG,GACbC,EAAA;AAAA,MAAA;AAAA,IAEf;AAEA,UAAMC,IAAS,MAAM;AACH,MAAAL,EAAA,QAAQ,CAACA,EAAgB,OAC9BI,EAAA;AAAA,IACb;AAEA,aAASA,IAAa;AACpB,MAAAR,EAAM,UAAU,EAAE,YAAYI,EAAgB,OAAO,GACrDA,EAAgB,QAAQJ,EAAM,MAAM,IAAIA,EAAM,OAAO;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ActionsDropdown.js.map

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

package/dist/AddressSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressSelect.js","sources":["../src/components/AddressSelect/AddressSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import debounce from 'lodash-es/debounce';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useSlots, watch } from 'vue';\n\n  import { StashProvideState } from '../../../types/misc';\n  import useGoogleMaps, { type Address, type AddressOption } from '../../composables/useGoogleMaps/useGoogleMaps';\n  import { DEBOUNCE } from '../../constants';\n  import Select from '../Select/Select.vue';\n\n  export interface AddressSelectProps {\n    /**\n     * Google Maps API Key. This takes precedence over the key defined in stashOptions\n     */\n    apiKey?: string;\n    /**\n     * Wether the Select is disabled or not\n     */\n    disabled?: boolean;\n    /**\n     * Select placeholder\n     */\n    placeholder?: string;\n    /**\n     * Debounce time in milliseconds to perform API requests on search\n     */\n    debounceTime?: number;\n    /**\n     * Model value address\n     */\n    modelValue: Address;\n    /**\n     * Hint text to be passed down to Select component\n     */\n    hintText?: string;\n    /**\n     * Error text to be passed down to Select component\n     */\n    errorText?: string;\n    /**\n     * Label text to be passed down to Select component\n     */\n    label?: string;\n    /**\n     * Disallows values from being de-selected\n     */\n    preventEmpty?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AddressSelectProps>(), {\n    disabled: false,\n    placeholder: 'Type an address',\n    debounceTime: DEBOUNCE.MEDIUM,\n    modelValue: () => ({\n      street_address: undefined,\n      extended_address: undefined,\n      city: undefined,\n      state: undefined,\n      postal_code: undefined,\n      country: undefined,\n    }),\n    hintText: undefined,\n    errorText: undefined,\n    label: undefined,\n    preventEmpty: false,\n    apiKey: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (e: 'update:modelValue', value: Address): void;\n    /**\n     * Emitted when an error occurs while reaching out to Google's API\n     */\n    (e: 'error', value: unknown): void;\n  }>();\n\n  const slots = useSlots();\n  const stashOptions = inject<StashProvideState>('stashOptions');\n\n  const googleMapsApiKey = computed(() => props.apiKey || stashOptions?.googleMapsApiKey);\n\n  if (!googleMapsApiKey.value) {\n    throw new Error('Google Maps API key is required');\n  }\n\n  const { getPlaceDetails, getPlacePredictions } = useGoogleMaps(googleMapsApiKey.value);\n\n  const ID_PREFIX = 'address-select-';\n\n  const isLoading = ref(false);\n  const options = ref<Array<AddressOption>>();\n  const internalValue = ref<AddressOption>();\n\n  const debouncedSearch = debounce(search, props.debounceTime);\n\n  const formattedAddress = computed(() => {\n    const formattedAddress = [\n      [props.modelValue?.street_address, props.modelValue?.extended_address].filter(Boolean).join(' '),\n      props.modelValue?.city,\n      [props.modelValue?.state, props.modelValue?.postal_code].filter(Boolean).join(' '),\n      props.modelValue?.country,\n    ]\n      .filter(Boolean)\n      .join(', ');\n\n    return formattedAddress;\n  });\n\n  // When we don't have options just yet, we need to create them on our own\n  watch(\n    () => props.modelValue,\n    () => {\n      if (formattedAddress.value && !options.value?.length) {\n        const option = {\n          id: props.modelValue.place_id || uniqueId(ID_PREFIX),\n          name: formattedAddress.value,\n          address: props.modelValue,\n        };\n\n        options.value = [option];\n        internalValue.value = option;\n      } else if (!formattedAddress.value) {\n        internalValue.value = undefined;\n        options.value = [];\n      }\n    },\n    { immediate: true },\n  );\n\n  async function search(query: string) {\n    isLoading.value = true;\n\n    try {\n      options.value = await getPlacePredictions(query);\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } catch (error: any) {\n      options.value = [];\n      if (error?.isGoogleMapsError) {\n        emit('error', error);\n      } else {\n        throw error;\n      }\n    } finally {\n      isLoading.value = false;\n    }\n  }\n\n  async function select(option: AddressOption) {\n    internalValue.value = option;\n\n    // When an option is de-selected, the option will be undefined\n    if (!option) {\n      emit('update:modelValue', {\n        street_address: undefined,\n        extended_address: undefined,\n        city: undefined,\n        state: undefined,\n        postal_code: undefined,\n        country: undefined,\n      });\n      return;\n    }\n\n    // When an option does not have a google place id, we don't want to fetch it's details\n    if (option.id.startsWith(ID_PREFIX) && option.address) {\n      emit('update:modelValue', option.address);\n      return;\n    }\n\n    try {\n      const address = await getPlaceDetails(option.id);\n      emit('update:modelValue', address);\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } catch (error: any) {\n      if (error?.isGoogleMapsError) {\n        emit('error', error);\n      } else {\n        throw error;\n      }\n    }\n  }\n</script>\n\n<template>\n  <Select\n    single\n    data-test=\"select|address\"\n    :disabled=\"props.disabled\"\n    :loading=\"isLoading\"\n    :options=\"options\"\n    :placeholder=\"props.placeholder\"\n    :label=\"props.label\"\n    :hint-text=\"props.hintText\"\n    :error=\"props.errorText\"\n    :model-value=\"internalValue\"\n    :prevent-empty=\"props.preventEmpty\"\n    disable-filtering\n    @search=\"debouncedSearch\"\n    @update:model-value=\"select\"\n  >\n    <template v-if=\"slots.hint\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Select>\n</template>\n"],"names":["ID_PREFIX","props","__props","emit","__emit","slots","useSlots","stashOptions","inject","googleMapsApiKey","computed","getPlaceDetails","getPlacePredictions","useGoogleMaps","isLoading","ref","options","internalValue","debouncedSearch","debounce","search","formattedAddress","_a","_b","_c","_d","_e","_f","watch","option","uniqueId","query","error","select","address"],"mappings":";;;;;;AA0FE,MAAMA,IAAY;;;;;;;;;;;;;;;;;;;;;;AAzClB,UAAMC,IAAQC,GAmBRC,IAAOC,GAWPC,IAAQC,KACRC,IAAeC,EAA0B,cAAc,GAEvDC,IAAmBC,EAAS,MAAMT,EAAM,WAAUM,KAAA,gBAAAA,EAAc,iBAAgB;AAElF,QAAA,CAACE,EAAiB;AACd,YAAA,IAAI,MAAM,iCAAiC;AAGnD,UAAM,EAAE,iBAAAE,GAAiB,qBAAAC,EAAA,IAAwBC,EAAcJ,EAAiB,KAAK,GAI/EK,IAAYC,EAAI,EAAK,GACrBC,IAAUD,KACVE,IAAgBF,KAEhBG,IAAkBC,EAASC,GAAQnB,EAAM,YAAY,GAErDoB,IAAmBX,EAAS,MAAM;;AAU/BW,aATkB;AAAA,QACvB,EAACC,IAAArB,EAAM,eAAN,gBAAAqB,EAAkB,iBAAgBC,IAAAtB,EAAM,eAAN,gBAAAsB,EAAkB,gBAAgB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,SAC/FC,IAAAvB,EAAM,eAAN,gBAAAuB,EAAkB;AAAA,QAClB,EAACC,IAAAxB,EAAM,eAAN,gBAAAwB,EAAkB,QAAOC,IAAAzB,EAAM,eAAN,gBAAAyB,EAAkB,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,SACjFC,IAAA1B,EAAM,eAAN,gBAAA0B,EAAkB;AAAA,MAEjB,EAAA,OAAO,OAAO,EACd,KAAK,IAAI;AAAA,IAEL,CACR;AAGD,IAAAC;AAAA,MACE,MAAM3B,EAAM;AAAA,MACZ,MAAM;;AACJ,YAAIoB,EAAiB,SAAS,GAACC,IAAAN,EAAQ,UAAR,QAAAM,EAAe,SAAQ;AACpD,gBAAMO,IAAS;AAAA,YACb,IAAI5B,EAAM,WAAW,YAAY6B,EAAS9B,CAAS;AAAA,YACnD,MAAMqB,EAAiB;AAAA,YACvB,SAASpB,EAAM;AAAA,UAAA;AAGT,UAAAe,EAAA,QAAQ,CAACa,CAAM,GACvBZ,EAAc,QAAQY;AAAA,QAAA,MACxB,CAAYR,EAAiB,UAC3BJ,EAAc,QAAQ,QACtBD,EAAQ,QAAQ;MAEpB;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA;AAGpB,mBAAeI,EAAOW,GAAe;AACnC,MAAAjB,EAAU,QAAQ;AAEd,UAAA;AACM,QAAAE,EAAA,QAAQ,MAAMJ,EAAoBmB,CAAK;AAAA,eAExCC,GAAY;AAEnB,YADAhB,EAAQ,QAAQ,IACZgB,KAAA,QAAAA,EAAO;AACT,UAAA7B,EAAK,SAAS6B,CAAK;AAAA;AAEb,gBAAAA;AAAA,MACR,UACA;AACA,QAAAlB,EAAU,QAAQ;AAAA,MACpB;AAAA,IACF;AAEA,mBAAemB,EAAOJ,GAAuB;AAI3C,UAHAZ,EAAc,QAAQY,GAGlB,CAACA,GAAQ;AACX,QAAA1B,EAAK,qBAAqB;AAAA,UACxB,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,UAClB,MAAM;AAAA,UACN,OAAO;AAAA,UACP,aAAa;AAAA,UACb,SAAS;AAAA,QAAA,CACV;AACD;AAAA,MACF;AAGA,UAAI0B,EAAO,GAAG,WAAW7B,CAAS,KAAK6B,EAAO,SAAS;AAChD,QAAA1B,EAAA,qBAAqB0B,EAAO,OAAO;AACxC;AAAA,MACF;AAEI,UAAA;AACF,cAAMK,IAAU,MAAMvB,EAAgBkB,EAAO,EAAE;AAC/C,QAAA1B,EAAK,qBAAqB+B,CAAO;AAAA,eAE1BF,GAAY;AACnB,YAAIA,KAAA,QAAAA,EAAO;AACT,UAAA7B,EAAK,SAAS6B,CAAK;AAAA;AAEb,gBAAAA;AAAA,MAEV;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AddressSelect.js","sources":["../src/components/AddressSelect/AddressSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import debounce from 'lodash-es/debounce';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useSlots, watch } from 'vue';\n\n  import { StashProvideState } from '../../../types/misc';\n  import useGoogleMaps, { type Address, type AddressOption } from '../../composables/useGoogleMaps/useGoogleMaps';\n  import { DEBOUNCE } from '../../constants';\n  import Select from '../Select/Select.vue';\n\n  export interface AddressSelectProps {\n    /**\n     * Google Maps API Key. This takes precedence over the key defined in stashOptions\n     */\n    apiKey?: string;\n    /**\n     * Wether the Select is disabled or not\n     */\n    disabled?: boolean;\n    /**\n     * Select placeholder\n     */\n    placeholder?: string;\n    /**\n     * Debounce time in milliseconds to perform API requests on search\n     */\n    debounceTime?: number;\n    /**\n     * Model value address\n     */\n    modelValue: Address;\n    /**\n     * Hint text to be passed down to Select component\n     */\n    hintText?: string;\n    /**\n     * Error text to be passed down to Select component\n     */\n    errorText?: string;\n    /**\n     * Label text to be passed down to Select component\n     */\n    label?: string;\n    /**\n     * Disallows values from being de-selected\n     */\n    preventEmpty?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AddressSelectProps>(), {\n    disabled: false,\n    placeholder: 'Type an address',\n    debounceTime: DEBOUNCE.MEDIUM,\n    modelValue: () => ({\n      street_address: undefined,\n      extended_address: undefined,\n      city: undefined,\n      state: undefined,\n      postal_code: undefined,\n      country: undefined,\n    }),\n    hintText: undefined,\n    errorText: undefined,\n    label: undefined,\n    preventEmpty: false,\n    apiKey: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (e: 'update:modelValue', value: Address): void;\n    /**\n     * Emitted when an error occurs while reaching out to Google's API\n     */\n    (e: 'error', value: unknown): void;\n  }>();\n\n  const slots = useSlots();\n  const stashOptions = inject<StashProvideState>('stashOptions');\n\n  const googleMapsApiKey = computed(() => props.apiKey || stashOptions?.googleMapsApiKey);\n\n  if (!googleMapsApiKey.value) {\n    throw new Error('Google Maps API key is required');\n  }\n\n  const { getPlaceDetails, getPlacePredictions } = useGoogleMaps(googleMapsApiKey.value);\n\n  const ID_PREFIX = 'address-select-';\n\n  const isLoading = ref(false);\n  const options = ref<Array<AddressOption>>();\n  const internalValue = ref<AddressOption>();\n\n  const debouncedSearch = debounce(search, props.debounceTime);\n\n  const formattedAddress = computed(() => {\n    const formattedAddress = [\n      [props.modelValue?.street_address, props.modelValue?.extended_address].filter(Boolean).join(' '),\n      props.modelValue?.city,\n      [props.modelValue?.state, props.modelValue?.postal_code].filter(Boolean).join(' '),\n      props.modelValue?.country,\n    ]\n      .filter(Boolean)\n      .join(', ');\n\n    return formattedAddress;\n  });\n\n  // When we don't have options just yet, we need to create them on our own\n  watch(\n    () => props.modelValue,\n    () => {\n      if (formattedAddress.value && !options.value?.length) {\n        const option = {\n          id: props.modelValue.place_id || uniqueId(ID_PREFIX),\n          name: formattedAddress.value,\n          address: props.modelValue,\n        };\n\n        options.value = [option];\n        internalValue.value = option;\n      } else if (!formattedAddress.value) {\n        internalValue.value = undefined;\n        options.value = [];\n      }\n    },\n    { immediate: true },\n  );\n\n  async function search(query: string) {\n    isLoading.value = true;\n\n    try {\n      options.value = await getPlacePredictions(query);\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } catch (error: any) {\n      options.value = [];\n      if (error?.isGoogleMapsError) {\n        emit('error', error);\n      } else {\n        throw error;\n      }\n    } finally {\n      isLoading.value = false;\n    }\n  }\n\n  async function select(option: AddressOption) {\n    internalValue.value = option;\n\n    // When an option is de-selected, the option will be undefined\n    if (!option) {\n      emit('update:modelValue', {\n        street_address: undefined,\n        extended_address: undefined,\n        city: undefined,\n        state: undefined,\n        postal_code: undefined,\n        country: undefined,\n      });\n      return;\n    }\n\n    // When an option does not have a google place id, we don't want to fetch it's details\n    if (option.id.startsWith(ID_PREFIX) && option.address) {\n      emit('update:modelValue', option.address);\n      return;\n    }\n\n    try {\n      const address = await getPlaceDetails(option.id);\n      emit('update:modelValue', address);\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } catch (error: any) {\n      if (error?.isGoogleMapsError) {\n        emit('error', error);\n      } else {\n        throw error;\n      }\n    }\n  }\n</script>\n\n<template>\n  <Select\n    single\n    data-test=\"select|address\"\n    :disabled=\"props.disabled\"\n    :loading=\"isLoading\"\n    :options=\"options\"\n    :placeholder=\"props.placeholder\"\n    :label=\"props.label\"\n    :hint-text=\"props.hintText\"\n    :error=\"props.errorText\"\n    :model-value=\"internalValue\"\n    :prevent-empty=\"props.preventEmpty\"\n    disable-filtering\n    @search=\"debouncedSearch\"\n    @update:model-value=\"select\"\n  >\n    <template v-if=\"slots.hint\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Select>\n</template>\n"],"names":["ID_PREFIX","props","__props","emit","__emit","slots","useSlots","stashOptions","inject","googleMapsApiKey","computed","getPlaceDetails","getPlacePredictions","useGoogleMaps","isLoading","ref","options","internalValue","debouncedSearch","debounce","search","formattedAddress","_a","_b","_c","_d","_e","_f","watch","option","uniqueId","query","error","select","address"],"mappings":";;;;;;AA0FE,MAAMA,IAAY;;;;;;;;;;;;;;;;;;;;;;AAzClB,UAAMC,IAAQC,GAmBRC,IAAOC,GAWPC,IAAQC,EAAS,GACjBC,IAAeC,EAA0B,cAAc,GAEvDC,IAAmBC,EAAS,MAAMT,EAAM,WAAUM,KAAA,gBAAAA,EAAc,iBAAgB;AAElF,QAAA,CAACE,EAAiB;AACd,YAAA,IAAI,MAAM,iCAAiC;AAGnD,UAAM,EAAE,iBAAAE,GAAiB,qBAAAC,EAAA,IAAwBC,EAAcJ,EAAiB,KAAK,GAI/EK,IAAYC,EAAI,EAAK,GACrBC,IAAUD,EAA0B,GACpCE,IAAgBF,EAAmB,GAEnCG,IAAkBC,EAASC,GAAQnB,EAAM,YAAY,GAErDoB,IAAmBX,EAAS,MAAM;;AAU/BW,aATkB;AAAA,QACvB,EAACC,IAAArB,EAAM,eAAN,gBAAAqB,EAAkB,iBAAgBC,IAAAtB,EAAM,eAAN,gBAAAsB,EAAkB,gBAAgB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,SAC/FC,IAAAvB,EAAM,eAAN,gBAAAuB,EAAkB;AAAA,QAClB,EAACC,IAAAxB,EAAM,eAAN,gBAAAwB,EAAkB,QAAOC,IAAAzB,EAAM,eAAN,gBAAAyB,EAAkB,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,SACjFC,IAAA1B,EAAM,eAAN,gBAAA0B,EAAkB;AAAA,MAEjB,EAAA,OAAO,OAAO,EACd,KAAK,IAAI;AAAA,IAEL,CACR;AAGD,IAAAC;AAAA,MACE,MAAM3B,EAAM;AAAA,MACZ,MAAM;;AACJ,YAAIoB,EAAiB,SAAS,GAACC,IAAAN,EAAQ,UAAR,QAAAM,EAAe,SAAQ;AACpD,gBAAMO,IAAS;AAAA,YACb,IAAI5B,EAAM,WAAW,YAAY6B,EAAS9B,CAAS;AAAA,YACnD,MAAMqB,EAAiB;AAAA,YACvB,SAASpB,EAAM;AAAA,UACjB;AAEQ,UAAAe,EAAA,QAAQ,CAACa,CAAM,GACvBZ,EAAc,QAAQY;AAAA,QAAA,MACxB,CAAYR,EAAiB,UAC3BJ,EAAc,QAAQ,QACtBD,EAAQ,QAAQ,CAAC;AAAA,MAErB;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IACpB;AAEA,mBAAeI,EAAOW,GAAe;AACnC,MAAAjB,EAAU,QAAQ;AAEd,UAAA;AACM,QAAAE,EAAA,QAAQ,MAAMJ,EAAoBmB,CAAK;AAAA,eAExCC,GAAY;AAEnB,YADAhB,EAAQ,QAAQ,CAAC,GACbgB,KAAA,QAAAA,EAAO;AACT,UAAA7B,EAAK,SAAS6B,CAAK;AAAA;AAEb,gBAAAA;AAAA,MACR,UACA;AACA,QAAAlB,EAAU,QAAQ;AAAA,MAAA;AAAA,IACpB;AAGF,mBAAemB,EAAOJ,GAAuB;AAI3C,UAHAZ,EAAc,QAAQY,GAGlB,CAACA,GAAQ;AACX,QAAA1B,EAAK,qBAAqB;AAAA,UACxB,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,UAClB,MAAM;AAAA,UACN,OAAO;AAAA,UACP,aAAa;AAAA,UACb,SAAS;AAAA,QAAA,CACV;AACD;AAAA,MAAA;AAIF,UAAI0B,EAAO,GAAG,WAAW7B,CAAS,KAAK6B,EAAO,SAAS;AAChD,QAAA1B,EAAA,qBAAqB0B,EAAO,OAAO;AACxC;AAAA,MAAA;AAGE,UAAA;AACF,cAAMK,IAAU,MAAMvB,EAAgBkB,EAAO,EAAE;AAC/C,QAAA1B,EAAK,qBAAqB+B,CAAO;AAAA,eAE1BF,GAAY;AACnB,YAAIA,KAAA,QAAAA,EAAO;AACT,UAAA7B,EAAK,SAAS6B,CAAK;AAAA;AAEb,gBAAAA;AAAA,MACR;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Alert.js.map

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

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

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 tw-relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'tw-z-modal': isBackdropVisible,\n      'tw-z-[301]': !isBackdropVisible,\n    }\"\n    data-test=\"stash-app-sidebar\"\n  >\n    <Transition name=\"backdrop\">\n      <Backdrop v-show=\"isBackdropVisible\" class=\"stash-app-sidebar__backdrop\" @click.stop=\"onBackdropClick\" />\n    </Transition>\n    <Transition name=\"aside\">\n      <aside\n        v-show=\"isSidebarOpen\"\n        class=\"stash-app-sidebar__aside tw-fixed tw-flex tw-h-screen tw-flex-col tw-bg-purple-500\"\n        :class=\"{ 'tw-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=\"tw-px-3 tw-pt-6\">\n          <!-- @slot App Context component slot, ideally for rendering the context switcher -->\n          <slot name=\"app-context\"></slot>\n        </div>\n        <div v-if=\"slots['company-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot Company Context component slot, ideally for rendering the company picker -->\n          <slot name=\"company-context\"></slot>\n        </div>\n        <nav v-if=\"slots['navigation']\" class=\"tw-pt-6\">\n          <ul role=\"menubar\" aria-orientation=\"vertical\">\n            <!-- @slot Navigation component slot, for rendering navigation items -->\n            <slot name=\"navigation\"></slot>\n          </ul>\n        </nav>\n        <div class=\"tw-flex-1\"></div>\n        <!-- @slot Footer component slot, for rendering version/environment notes -->\n        <slot name=\"footer\"></slot>\n      </aside>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n  .stash-app-sidebar__aside {\n    padding-top: calc(theme('height.topbar') - 1px); /* -1px to compensate for the border height */\n    width: theme('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: opacity 200ms ease-in-out, transform 200ms ease-in-out;\n  }\n\n  .aside-enter-from,\n  .aside-leave-to {\n    opacity: 0;\n    transform: translateX(-20%);\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emit","__emit","isExtraLargeScreen","useMediaQuery","isBackdropVisible","computed","initialPageScrollingElementStyle","ref","isSidebarOpen","onBackdropClick","getPageScrollingElement","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,KAERC,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;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,WAAAC,EAAY,MAAM;AAChB,MAAIT,EAAmB,UAInBE,EAAkB,SACb,OAAA,OAAOE,EAAiC,OAAO;AAAA,QACpD,UAAUI,IAA0B,MAAM;AAAA,QAC1C,QAAQA,IAA0B,MAAM;AAAA,MAAA,CACzC,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUN,EAAkB,QAAQ,WAAWE,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQF,EAAkB,QAAQ,SAASE,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AppSidebar.js","sources":["../src/components/AppSidebar/AppSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useSlots, watchEffect } from 'vue';\n\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Divider from '../Divider/Divider.vue';\n\n  export interface AppSidebarProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    isOpen?: boolean;\n  }\n\n  const props = withDefaults(defineProps<AppSidebarProps>(), {\n    isOpen: false,\n  });\n\n  const slots = useSlots();\n\n  const emit = defineEmits<{\n    /**\n     * @deprecated Use the `update:is-open` event instead\n     */\n    (e: 'dismiss'): void;\n    (e: 'update:is-open', isOpen: boolean): void;\n  }>();\n\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n  const isBackdropVisible = computed(() => props.isOpen && !isExtraLargeScreen.value);\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const isSidebarOpen = computed(() => props.isOpen || isExtraLargeScreen.value);\n\n  function onBackdropClick() {\n    emit('dismiss');\n    emit('update:is-open', false);\n  }\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watchEffect(() => {\n    if (isExtraLargeScreen.value) {\n      return;\n    }\n\n    if (isBackdropVisible.value) {\n      Object.assign(initialPageScrollingElementStyle.value, {\n        overflow: getPageScrollingElement().style.overflow,\n        height: getPageScrollingElement().style.height,\n      });\n    }\n\n    Object.assign(getPageScrollingElement().style, {\n      overflow: isBackdropVisible.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when AppSidebar is open\n      height: isBackdropVisible.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when AppSidebar is open\n    });\n  });\n</script>\n\n<template>\n  <div\n    id=\"stash-app-sidebar\"\n    class=\"stash-app-sidebar tw-relative\"\n    :class=\"{\n      'stash-app-sidebar--is-open': isSidebarOpen,\n      'tw-z-modal': isBackdropVisible,\n      'tw-z-[301]': !isBackdropVisible,\n    }\"\n    data-test=\"stash-app-sidebar\"\n  >\n    <Transition name=\"backdrop\">\n      <Backdrop v-show=\"isBackdropVisible\" class=\"stash-app-sidebar__backdrop\" @click.stop=\"onBackdropClick\" />\n    </Transition>\n    <Transition name=\"aside\">\n      <aside\n        v-show=\"isSidebarOpen\"\n        class=\"stash-app-sidebar__aside tw-fixed tw-flex tw-h-screen tw-flex-col tw-bg-purple-500\"\n        :class=\"{ 'tw-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=\"tw-px-3 tw-pt-6\">\n          <!-- @slot App Context component slot, ideally for rendering the context switcher -->\n          <slot name=\"app-context\"></slot>\n        </div>\n        <div v-if=\"slots['company-context']\" class=\"tw-px-3 tw-pt-6\">\n          <!-- @slot Company Context component slot, ideally for rendering the company picker -->\n          <slot name=\"company-context\"></slot>\n        </div>\n        <nav v-if=\"slots['navigation']\" class=\"tw-pt-6\">\n          <ul role=\"menubar\" aria-orientation=\"vertical\">\n            <!-- @slot Navigation component slot, for rendering navigation items -->\n            <slot name=\"navigation\"></slot>\n          </ul>\n        </nav>\n        <div class=\"tw-flex-1\"></div>\n        <!-- @slot Footer component slot, for rendering version/environment notes -->\n        <slot name=\"footer\"></slot>\n      </aside>\n    </Transition>\n  </div>\n</template>\n\n<style scoped>\n  .stash-app-sidebar__aside {\n    padding-top: calc(theme('height.topbar') - 1px); /* -1px to compensate for the border height */\n    width: theme('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: opacity 200ms ease-in-out, transform 200ms ease-in-out;\n  }\n\n  .aside-enter-from,\n  .aside-leave-to {\n    opacity: 0;\n    transform: translateX(-20%);\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","emit","__emit","isExtraLargeScreen","useMediaQuery","isBackdropVisible","computed","initialPageScrollingElementStyle","ref","isSidebarOpen","onBackdropClick","getPageScrollingElement","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcE,UAAMA,IAAQC,GAIRC,IAAQC,EAAS,GAEjBC,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,IAAA;AAG9B,aAASU,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAAA;AAGhD,WAAAC,EAAY,MAAM;AAChB,MAAIT,EAAmB,UAInBE,EAAkB,SACb,OAAA,OAAOE,EAAiC,OAAO;AAAA,QACpD,UAAUI,IAA0B,MAAM;AAAA,QAC1C,QAAQA,EAAwB,EAAE,MAAM;AAAA,MAAA,CACzC,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUN,EAAkB,QAAQ,WAAWE,EAAiC,MAAM;AAAA;AAAA,QACtF,QAAQF,EAAkB,QAAQ,SAASE,EAAiC,MAAM;AAAA;AAAA,MAAA,CACnF;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Avatar.js.map

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

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 tw-relative tw-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          'tw-absolute': props.variant === 'dot' || props.position === 'top-right',\n          'tw-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=\"tw-inline-block tw-whitespace-nowrap tw-rounded-full tw-text-center tw-text-[10px] tw-font-semibold tw-leading-4 tw-text-white\"\n        :class=\"[\n          {\n            'tw-animate-grow': playAnimation,\n            'tw-bg-red-500': props.color === 'red' && !props.isDisabled,\n            'tw-bg-blue-500': props.color === 'blue' && !props.isDisabled,\n            'tw-absolute': props.variant === 'dot',\n            'tw-bg-ice-200 tw-text-white': props.isDisabled,\n            [classes['badge-dot']]: props.variant === 'dot',\n            [classes['badge-standard']]: props.variant === 'standard',\n            'tw-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  .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</style>\n"],"names":["classes","useCssModule","props","__props","computedContent","computed","numericContent","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOE,UAAMA,IAAUC,KAwDVC,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,IAAA,CACzD,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,IACvF,EAAA,GAEIS,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACO,GAAOK,MAAa;AACf,QAACZ,EAAM,WAIPY,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,WACrB,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 tw-relative tw-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          'tw-absolute': props.variant === 'dot' || props.position === 'top-right',\n          'tw-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=\"tw-inline-block tw-whitespace-nowrap tw-rounded-full tw-text-center tw-text-[10px] tw-font-semibold tw-leading-4 tw-text-white\"\n        :class=\"[\n          {\n            'tw-animate-grow': playAnimation,\n            'tw-bg-red-500': props.color === 'red' && !props.isDisabled,\n            'tw-bg-blue-500': props.color === 'blue' && !props.isDisabled,\n            'tw-absolute': props.variant === 'dot',\n            'tw-bg-ice-200 tw-text-white': props.isDisabled,\n            [classes['badge-dot']]: props.variant === 'dot',\n            [classes['badge-standard']]: props.variant === 'standard',\n            'tw-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  .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</style>\n"],"names":["classes","useCssModule","props","__props","computedContent","computed","numericContent","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOE,UAAMA,IAAUC,EAAa,GAwDvBC,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,IAAA,CACzD,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;AACf,QAACZ,EAAM,WAIPY,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,WACrB,GAAI;AAAA,MACT;AAAA,IAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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=\"tw-animate-spin\" />\n    <!-- @slot default -->\n    <slot v-else></slot>\n  </component>\n</template>\n\n<style module>\n  .button {\n    border-radius: theme('borderRadius.DEFAULT');\n    border-width: 1px;\n    display: inline-block;\n    font-size: 0.875rem;\n    font-weight: theme('fontWeight.semibold');\n    line-height: 2.125rem;\n    margin: 0;\n    min-width: 144px;\n    padding: 0 theme('spacing.3');\n    text-align: center;\n    text-decoration: none;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  @media screen('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 screen('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 screen('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: theme('borderRadius.DEFAULT');\n    height: theme('spacing.12');\n    min-width: theme('spacing.12');\n    text-decoration: none;\n  }\n\n  .button--icon {\n    padding: theme('spacing.3');\n    width: theme('spacing.12');\n  }\n\n  .button--iconLabel {\n    padding: 0;\n    width: unset;\n  }\n\n  @media screen('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: theme('fontWeight.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: theme('spacing.6');\n  }\n\n  @media screen('md') {\n    :global(.button-grid) > .button {\n      width: auto;\n    }\n  }\n\n  :global(.header-button-grid) > .button + .button {\n    margin-left: theme('spacing.6');\n  }\n\n  @media screen('lg') {\n    :global(.header-button-grid) > .button {\n      width: auto;\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","ButtonTypes","buttonType","computed","type","is","buttonAttrs"],"mappings":";;;;;;;;;;;;;;;;;;;AAgEE,UAAMA,IAAQC,GAYRC,IAAUC;AAEX,QAAAC;AAAL,KAAA,CAAKA,MAAL;AACEA,MAAAA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,UAAU;AAAA,IANP,GAAAA,MAAAA,IAAA,CAAA,EAAA;AAWC,UAAAC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOH,CAAW;AACtC,YAAAJ,EAAMO,CAAI;AACL,iBAAAA;AAIJ,aAAA;AAAA,IAAA,CACR,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,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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=\"tw-animate-spin\" />\n    <!-- @slot default -->\n    <slot v-else></slot>\n  </component>\n</template>\n\n<style module>\n  .button {\n    border-radius: theme('borderRadius.DEFAULT');\n    border-width: 1px;\n    display: inline-block;\n    font-size: 0.875rem;\n    font-weight: theme('fontWeight.semibold');\n    line-height: 2.125rem;\n    margin: 0;\n    min-width: 144px;\n    padding: 0 theme('spacing.3');\n    text-align: center;\n    text-decoration: none;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  @media screen('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 screen('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 screen('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: theme('borderRadius.DEFAULT');\n    height: theme('spacing.12');\n    min-width: theme('spacing.12');\n    text-decoration: none;\n  }\n\n  .button--icon {\n    padding: theme('spacing.3');\n    width: theme('spacing.12');\n  }\n\n  .button--iconLabel {\n    padding: 0;\n    width: unset;\n  }\n\n  @media screen('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: theme('fontWeight.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: theme('spacing.6');\n  }\n\n  @media screen('md') {\n    :global(.button-grid) > .button {\n      width: auto;\n    }\n  }\n\n  :global(.header-button-grid) > .button + .button {\n    margin-left: theme('spacing.6');\n  }\n\n  @media screen('lg') {\n    :global(.header-button-grid) > .button {\n      width: auto;\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","ButtonTypes","buttonType","computed","type","is","buttonAttrs"],"mappings":";;;;;;;;;;;;;;;;;;;AAgEE,UAAMA,IAAQC,GAYRC,IAAUC,EAAa;AAExB,QAAAC;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;AAWC,UAAAC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOH,CAAW;AACtC,YAAAJ,EAAMO,CAAI;AACL,iBAAAA;AAIJ,aAAA;AAAA,IAAA,CACR,GAEKC,IAAKF,EAAS,MACdN,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR,GAEKS,IAAcH,EAAS,MACvBN,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IACZ,IAGEA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IACd,IAGK,CAAC,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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      'tw-flex',\n      $style.buttonGroup,\n      { 'tw-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  /* 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: theme('fontWeight.semibold');\n    line-height: theme('lineHeight.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: theme('borderRadius.DEFAULT');\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .button:last-child {\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n  }\n</style>\n"],"names":["props","__props","emit","__emit","isSingleButton","computed","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a"],"mappings":";;;uEAMiB;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAwCA,UAAMA,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,GAGlBT,EAAA,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      'tw-flex',\n      $style.buttonGroup,\n      { 'tw-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  /* 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: theme('fontWeight.semibold');\n    line-height: theme('lineHeight.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: theme('borderRadius.DEFAULT');\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .button:last-child {\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n  }\n</style>\n"],"names":["__default__","props","__props","emit","__emit","isSingleButton","computed","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a"],"mappings":";;;mEAMiBA,IAAA;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,GAGlBT,EAAA,SAASK,EAAa,KAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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\n    class=\"stash-card tw-relative tw-inline-block tw-rounded tw-border tw-bg-white tw-shadow-md\"\n    data-test=\"stash-card\"\n  >\n    <div\n      v-if=\"slots['top-left'] || slots['top-right']\"\n      data-test=\"card-actions\"\n      :class=\"{ 'tw-absolute tw-top-0 tw-w-full': props.detachActions }\"\n      class=\"tw-flex tw-flex-wrap tw-items-start tw-justify-between tw-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=\"{ 'tw-mb-6 tw-flex tw-h-full tw-flex-col tw-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;;;;;;;;;;;;;;;;;;;;;;"}
+{"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\n    class=\"stash-card tw-relative tw-inline-block tw-rounded tw-border tw-bg-white tw-shadow-md\"\n    data-test=\"stash-card\"\n  >\n    <div\n      v-if=\"slots['top-left'] || slots['top-right']\"\n      data-test=\"card-actions\"\n      :class=\"{ 'tw-absolute tw-top-0 tw-w-full': props.detachActions }\"\n      class=\"tw-flex tw-flex-wrap tw-items-start tw-justify-between tw-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=\"{ 'tw-mb-6 tw-flex tw-h-full tw-flex-col tw-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,EAAS;;;;;;;;;;;;;;;;;;;;;;"}

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=\"tw-flex tw-w-full tw-items-center tw-justify-center tw-rounded-t tw-bg-ice-200\"\n    >\n      <Icon name=\"image\" :class=\"classes.iconSize\" />\n    </div>\n    <img\n      :src=\"props.src\"\n      class=\"tw-w-full tw-rounded-t\"\n      :alt=\"props.alt\"\n      @load=\"() => (isLoading = false)\"\n      @error=\"() => (hasErrored = true)\"\n    />\n  </div>\n</template>\n\n<style module>\n  .placeholder {\n    height: 300px;\n    width: 100%;\n  }\n\n  .iconSize {\n    width: 189px;\n    height: 189px;\n  }\n</style>\n"],"names":["isLoading","ref","hasErrored","props","__props","classes","useCssModule"],"mappings":";;;;;;;;;;;;;AAgBQ,UAAAA,IAAYC,EAAI,EAAI,GAEpBC,IAAaD,EAAI,EAAK,GAEtBE,IAAQC,GAERC,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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=\"tw-flex tw-w-full tw-items-center tw-justify-center tw-rounded-t tw-bg-ice-200\"\n    >\n      <Icon name=\"image\" :class=\"classes.iconSize\" />\n    </div>\n    <img\n      :src=\"props.src\"\n      class=\"tw-w-full tw-rounded-t\"\n      :alt=\"props.alt\"\n      @load=\"() => (isLoading = false)\"\n      @error=\"() => (hasErrored = true)\"\n    />\n  </div>\n</template>\n\n<style module>\n  .placeholder {\n    height: 300px;\n    width: 100%;\n  }\n\n  .iconSize {\n    width: 189px;\n    height: 189px;\n  }\n</style>\n"],"names":["isLoading","ref","hasErrored","props","__props","classes","useCssModule"],"mappings":";;;;;;;;;;;;;AAgBQ,UAAAA,IAAYC,EAAI,EAAI,GAEpBC,IAAaD,EAAI,EAAK,GAEtBE,IAAQC,GAERC,IAAUC,EAAa;;;;;;;;;;;;;;;;;;;;;;;;;;"}