@leaflink/stash 53.4.1 → 53.4.2

package/dist/DatePicker.vue.d.ts

@@ -205,11 +205,11 @@ name: string;
 disabled: boolean;
 mode: "time" | "date" | "dateTime";
 label: string;
+placeholder: string;
 id: string;
 addBottomSpace: boolean;
 errorText: string;
 hintText: string;
-placeholder: string;
 modelValue: string;
 enableTeleport: boolean;
 format: string;

package/dist/DescriptionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionList.js","sources":["../src/components/DescriptionList/DescriptionList.types.ts","../src/components/DescriptionList/DescriptionList.vue"],"sourcesContent":["export enum DescriptionListVariant {\n  Columns = 'columns',\n  Inline = 'inline',\n  Stacked = 'stacked',\n  SpaceBetween = 'space-between',\n}\n\nexport type DescriptionListVariants = `${DescriptionListVariant}`;\n\n/**\n * Description List provide/inject keys\n */\nexport interface DescriptionListInjection {\n  /**\n   * Divide the list groups with a border.\n   */\n  divide?: boolean;\n  /**\n   * Different variants of description lists.\n   */\n  variant?: DescriptionListVariants;\n}\n","<script lang=\"ts\">\n  import type { DescriptionListVariants } from './DescriptionList.types';\n\n  export * from './DescriptionList.keys';\n  export * from './DescriptionList.types';\n\n  export interface DescriptionListProps {\n    /**\n     * Divide the list groups with a border.\n     */\n    divide?: boolean;\n    /**\n     * Different variants of description lists.\n     */\n    variant?: DescriptionListVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { provide } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from './DescriptionList.keys';\n\n  const props = withDefaults(defineProps<DescriptionListProps>(), {\n    variant: 'columns',\n    divide: false,\n  });\n\n  provide(DESCRIPTION_LIST_INJECTION.key, { divide: props.divide, variant: props.variant });\n</script>\n\n<template>\n  <dl\n    :data-variant=\"props.variant\"\n    class=\"stash-description-list text-sm\"\n    :class=\"{\n      'divide-y divide-ice-200': props.divide,\n    }\"\n    data-test=\"stash-description-list\"\n  >\n    <!-- @slot Default slot, for rendering a description list -->\n    <slot></slot>\n  </dl>\n</template>\n"],"names":["DescriptionListVariant","props","__props","provide","DESCRIPTION_LIST_INJECTION"],"mappings":";;AAAO,IAAKA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,eAAe,iBAJLA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;ACuBV,UAAMC,IAAQC;AAKd,WAAAC,EAAQC,EAA2B,KAAK,EAAE,QAAQH,EAAM,QAAQ,SAASA,EAAM,SAAS;;;;;;;;;;;"}
+{"version":3,"file":"DescriptionList.js","sources":["../src/components/DescriptionList/DescriptionList.types.ts","../src/components/DescriptionList/DescriptionList.vue"],"sourcesContent":["export enum DescriptionListVariant {\n  Columns = 'columns',\n  Inline = 'inline',\n  Stacked = 'stacked',\n  SpaceBetween = 'space-between',\n}\n\nexport type DescriptionListVariants = `${DescriptionListVariant}`;\n\n/**\n * Description List provide/inject keys\n */\nexport interface DescriptionListInjection {\n  /**\n   * Divide the list groups with a border.\n   */\n  divide?: boolean;\n  /**\n   * Different variants of description lists.\n   */\n  variant?: DescriptionListVariants;\n}\n","<script lang=\"ts\">\n  import type { DescriptionListVariants } from './DescriptionList.types';\n\n  export * from './DescriptionList.keys';\n  export * from './DescriptionList.types';\n\n  export interface DescriptionListProps {\n    /**\n     * Divide the list groups with a border.\n     */\n    divide?: boolean;\n    /**\n     * Different variants of description lists.\n     */\n    variant?: DescriptionListVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { provide } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from './DescriptionList.keys';\n\n  const props = withDefaults(defineProps<DescriptionListProps>(), {\n    variant: 'columns',\n    divide: false,\n  });\n\n  provide(DESCRIPTION_LIST_INJECTION.key, { divide: props.divide, variant: props.variant });\n</script>\n\n<template>\n  <dl\n    :data-variant=\"props.variant\"\n    class=\"stash-description-list text-sm\"\n    :class=\"{\n      'divide-y divide-ice-200': props.divide,\n    }\"\n    data-test=\"stash-description-list\"\n  >\n    <!-- @slot Default slot, for rendering a description list -->\n    <slot></slot>\n  </dl>\n</template>\n"],"names":["DescriptionListVariant","props","__props","provide","DESCRIPTION_LIST_INJECTION","_createElementBlock","_renderSlot","_ctx"],"mappings":";;AAAO,IAAKA,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,eAAe,iBAJLA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;ACuBV,UAAMC,IAAQC;AAKd,WAAAC,EAAQC,EAA2B,KAAK,EAAE,QAAQH,EAAM,QAAQ,SAASA,EAAM,SAAS,mBAIxFI,EAUK,MAAA;AAAA,MATF,gBAAcJ,EAAM;AAAA,MACrB,UAAM,kCAAgC;AAAA,QACK,2BAAAA,EAAM;AAAA,MAAA;MAGjD,aAAU;AAAA,IAAA;MAGVK,EAAaC,EAAA,QAAA,SAAA;AAAA,IAAA;;;"}

package/dist/DescriptionListDetail.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionListDetail.js","sources":["../src/components/DescriptionListDetail/DescriptionListDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <dd\n    class=\"stash-description-list-detail flex-1 text-ice-900\"\n    :class=\"{\n      'md:text-right': variant === 'space-between',\n    }\"\n    data-test=\"stash-description-list-detail\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a description detail -->\n    <slot></slot>\n  </dd>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","variant"],"mappings":";;;;;AAKE,UAAMA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAM,EAAE,SAAAG,MAAYH;;;;;;;;;;;;"}
+{"version":3,"file":"DescriptionListDetail.js","sources":["../src/components/DescriptionListDetail/DescriptionListDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <dd\n    class=\"stash-description-list-detail flex-1 text-ice-900\"\n    :class=\"{\n      'md:text-right': variant === 'space-between',\n    }\"\n    data-test=\"stash-description-list-detail\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a description detail -->\n    <slot></slot>\n  </dd>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","variant","_createElementBlock","_unref","_renderSlot","_ctx"],"mappings":";;;;;AAKE,UAAMA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAM,EAAE,SAAAG,MAAYH;2BAIpBI,EAUK,MAAA;AAAA,MATH,UAAM,qDAAmD;AAAA,yBACxBC,EAAAF,CAAA,MAAO;AAAA,MAAA;MAGxC,aAAU;AAAA,MACT,gBAAcE,EAAAF,CAAA;AAAA,IAAA;MAGfG,EAAaC,EAAA,QAAA,SAAA;AAAA,IAAA;;;"}

package/dist/DescriptionListGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionListGroup.js","sources":["../src/components/DescriptionListGroup/DescriptionListGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { divide, variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <div\n    class=\"stash-description-list-group\"\n    :class=\"{\n      'md:flex md:items-start md:gap-x-6': variant === 'columns' || variant === 'space-between',\n      'justify-between': variant === 'space-between',\n      'md:flex md:items-start': variant === 'inline',\n      'py-1.5 first:pt-0 last:pb-0': !divide,\n      'py-3 first:pt-0 last:pb-0': divide,\n    }\"\n    data-test=\"stash-description-list-group\"\n    :data-divide=\"divide\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a description detail -->\n    <slot></slot>\n  </div>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","divide","variant"],"mappings":";;;;;AAKE,UAAMA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAM,EAAE,QAAAG,GAAQ,SAAAC,EAAA,IAAYJ;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DescriptionListGroup.js","sources":["../src/components/DescriptionListGroup/DescriptionListGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { divide, variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <div\n    class=\"stash-description-list-group\"\n    :class=\"{\n      'md:flex md:items-start md:gap-x-6': variant === 'columns' || variant === 'space-between',\n      'justify-between': variant === 'space-between',\n      'md:flex md:items-start': variant === 'inline',\n      'py-1.5 first:pt-0 last:pb-0': !divide,\n      'py-3 first:pt-0 last:pb-0': divide,\n    }\"\n    data-test=\"stash-description-list-group\"\n    :data-divide=\"divide\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Default slot, for rendering a description detail -->\n    <slot></slot>\n  </div>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","divide","variant","_createElementBlock","_unref","_renderSlot","_ctx"],"mappings":";;;;;AAKE,UAAMA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAM,EAAE,QAAAG,GAAQ,SAAAC,EAAA,IAAYJ;2BAI5BK,EAeM,OAAA;AAAA,MAdJ,UAAM,gCAA8B;AAAA,QACiB,qCAAAC,EAAAF,CAAA,mBAAyBE,EAAAF,CAAA,MAAO;AAAA,2BAA+CE,EAAAF,CAAA,MAAO;AAAA,kCAAsDE,EAAAF,CAAA,MAAO;AAAA,wCAAqDE,EAAAH,CAAA;AAAA,qCAA2CG,EAAAH,CAAA;AAAA,MAAA;MAOxS,aAAU;AAAA,MACT,eAAaG,EAAAH,CAAA;AAAA,MACb,gBAAcG,EAAAF,CAAA;AAAA,IAAA;MAGfG,EAAaC,EAAA,QAAA,SAAA;AAAA,IAAA;;;"}

package/dist/DescriptionListTerm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionListTerm.js","sources":["../src/components/DescriptionListTerm/DescriptionListTerm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <dt\n    class=\"stash-description-list-term flex items-center gap-x-1 font-bold text-ice-900\"\n    :class=\"{\n      'md:max-w-40 md:basis-2/5': variant === 'columns',\n      'mr-1.5': variant === 'inline',\n      'pb-1.5': variant === 'stacked',\n      'pb-1.5 md:pb-0': variant !== 'stacked',\n    }\"\n    data-test=\"stash-description-list-term\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Prepend slot, for rendering a prepended element -->\n    <slot name=\"prepend\"></slot>\n    <!-- @slot Default slot, for rendering a term -->\n    <slot></slot>\n    <!-- @slot Append slot, for rendering an appended element -->\n    <slot name=\"append\"></slot>\n  </dt>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","variant"],"mappings":";;;;;AAKE,UAAMA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAM,EAAE,SAAAG,MAAYH;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DescriptionListTerm.js","sources":["../src/components/DescriptionListTerm/DescriptionListTerm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { DESCRIPTION_LIST_INJECTION } from '../DescriptionList/DescriptionList.keys';\n\n  const descriptionListInjectedValues = inject(DESCRIPTION_LIST_INJECTION.key);\n  if (!descriptionListInjectedValues) {\n    throw new Error('DescriptionListDetail must be used within a DescriptionList component.');\n  }\n  const { variant } = descriptionListInjectedValues;\n</script>\n\n<template>\n  <dt\n    class=\"stash-description-list-term flex items-center gap-x-1 font-bold text-ice-900\"\n    :class=\"{\n      'md:max-w-40 md:basis-2/5': variant === 'columns',\n      'mr-1.5': variant === 'inline',\n      'pb-1.5': variant === 'stacked',\n      'pb-1.5 md:pb-0': variant !== 'stacked',\n    }\"\n    data-test=\"stash-description-list-term\"\n    :data-variant=\"variant\"\n  >\n    <!-- @slot Prepend slot, for rendering a prepended element -->\n    <slot name=\"prepend\"></slot>\n    <!-- @slot Default slot, for rendering a term -->\n    <slot></slot>\n    <!-- @slot Append slot, for rendering an appended element -->\n    <slot name=\"append\"></slot>\n  </dt>\n</template>\n"],"names":["descriptionListInjectedValues","inject","DESCRIPTION_LIST_INJECTION","variant","_createElementBlock","_unref","_renderSlot","_ctx"],"mappings":";;;;;AAKE,UAAMA,IAAgCC,EAAOC,EAA2B,GAAG;AAC3E,QAAI,CAACF;AACH,YAAM,IAAI,MAAM,wEAAwE;AAE1F,UAAM,EAAE,SAAAG,MAAYH;2BAIpBI,EAiBK,MAAA;AAAA,MAhBH,UAAM,gFAA8E;AAAA,oCACxCC,EAAAF,CAAA,MAAO;AAAA,kBAAgCE,EAAAF,CAAA,MAAO;AAAA,kBAA+BE,EAAAF,CAAA,MAAO;AAAA,0BAAwCE,EAAAF,CAAA,MAAO;AAAA,MAAA;MAM/K,aAAU;AAAA,MACT,gBAAcE,EAAAF,CAAA;AAAA,IAAA;MAGfG,EAA4BC,EAAA,QAAA,SAAA;AAAA,MAE5BD,EAAaC,EAAA,QAAA,SAAA;AAAA,MAEbD,EAA2BC,EAAA,QAAA,QAAA;AAAA,IAAA;;;"}

package/dist/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import capitalize from 'lodash-es/capitalize';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, ref, useAttrs, useCssModule, useSlots, watchEffect } from 'vue';\n\n  import {\n    StatusColor,\n    StatusColors,\n    StatusIcon,\n    StatusIcons,\n    StatusSeverities,\n    StatusSeverity,\n  } from '../../../types/statusLevels';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface DialogProps {\n    /**\n     * Shows or hides the dialog.\n     * Usage: v-model:open=\"isOpen\"\n     */\n    open?: boolean;\n\n    /**\n     * Whether the confirmation button is enabled or not.\n     */\n    disabled?: boolean;\n\n    /**\n     * Is this a dangerous action? Will turn the confirmation button red.\n     */\n    dangerZone?: boolean;\n\n    /**\n     * Header text.\n     */\n    header?: string;\n\n    /**\n     * Description text.\n     */\n    description?: string;\n\n    /**\n     * Cancel button text.\n     */\n    cancelText?: string;\n\n    /**\n     * Confirm button text.\n     */\n    confirmText?: string;\n\n    /**\n     * Callback function when the confirm button is clicked.\n     */\n    onConfirm?: (event: Event) => Promise<void> | void;\n\n    /**\n     * Treats it like an Alert Dialog, with only the confirmation button showing.\n     *\n     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/alert}\n     */\n    alert?: boolean;\n\n    /**\n     * Adds a top accent border and icon next to the header.\n     * This behaves similarly to the Alert component in respect to the levels, icons, and colors\n     * passing `error` will treat the dialog the same as `dangerZone`\n     */\n    status?: StatusSeverity;\n  }\n\n  const props = withDefaults(defineProps<DialogProps>(), {\n    open: false,\n    disabled: false,\n    dangerZone: false,\n    header: t('ll.areYouSure'),\n    description: '',\n    cancelText: t('ll.cancel'),\n    confirmText: '',\n    onConfirm: () => undefined,\n    alert: false,\n    status: undefined,\n  });\n\n  defineOptions({\n    name: 'll-dialog',\n    inheritAttrs: false,\n  });\n\n  const emits = defineEmits<{\n    (e: 'update:open', value: boolean): void;\n    (e: 'cancel'): void;\n  }>();\n\n  const slots = useSlots();\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const headerId = uniqueId('dialog-header-');\n\n  const isConfirming = ref(false);\n  const root = ref();\n\n  // Set the default confirm button text to \"Confirm\".\n  // If the `alert` prop is true, the default text is \"Okay\".\n  // If the `confirmText` prop is provided, `confirmText` is used whether the alert prop is true.\n  const modifiedConfirmText = computed(() => props.confirmText || (props.alert ? t('ll.okay') : t('ll.confirm')));\n\n  const hasDescription = computed(() => !!slots.default || props.description);\n\n  const statusIcon = computed<StatusIcon>(() =>\n    props.status ? StatusIcons[capitalize(props.status)] : StatusIcons.Info,\n  );\n  const statusTitle = computed<StatusSeverity>(() =>\n    props.status ? StatusSeverities[capitalize(props.status)] : StatusSeverities.Info,\n  );\n  const statusColor = computed<StatusColor>(() =>\n    props.status ? StatusColors[capitalize(props.status)] : StatusColors.Info,\n  );\n\n  const computedDangerZone = computed(() => props.dangerZone || props.status === StatusSeverities.Error);\n\n  function cancel() {\n    emits('update:open', false);\n    emits('cancel');\n  }\n\n  async function handleConfirm(event: Event) {\n    if (isConfirming.value) {\n      return;\n    }\n\n    isConfirming.value = true;\n\n    try {\n      await props.onConfirm(event);\n    } finally {\n      isConfirming.value = false;\n    }\n  }\n\n  watchEffect(() => {\n    if (props.open && root.value) {\n      // Move focus to confirm button\n      nextTick(function () {\n        root.value.focus();\n      });\n    }\n  });\n</script>\n\n<template>\n  <transition name=\"fade\">\n    <dialog\n      v-if=\"props.open\"\n      ref=\"root\"\n      :open=\"props.open\"\n      tabindex=\"0\"\n      :aria-labelledby=\"headerId\"\n      aria-modal=\"true\"\n      class=\"stash-dialog\"\n      :class=\"classes.dialog\"\n      :data-test=\"attrs['data-test'] || 'll-dialog'\"\n      v-bind=\"attrs\"\n      @keydown.esc=\"cancel\"\n    >\n      <div\n        class=\"stash-dialog__body\"\n        :class=\"[\n          classes.body,\n          `border-${statusColor}`,\n          {\n            'border-t-6': props.status,\n          },\n        ]\"\n        data-test=\"stash-dialog|body\"\n      >\n        <div class=\"stash-dialog__body__content\" :class=\"classes.content\" data-test=\"stash-dialog|body-content\">\n          <div class=\"flex items-start\" :class=\"hasDescription && 'mb-1.5'\">\n            <Icon\n              v-if=\"props.status\"\n              data-test=\"dialog-status-icon\"\n              :name=\"statusIcon\"\n              :title=\"statusTitle\"\n              :class=\"`text-${statusColor}`\"\n            />\n            <h3 :id=\"headerId\" :class=\"{ 'ml-1.5 mt-px': props.status }\">{{ props.header }}</h3>\n          </div>\n\n          <p v-if=\"hasDescription\" class=\"mb-0\">\n            <slot v-if=\"slots.default\"></slot>\n            <!-- eslint-disable-next-line vue/no-v-html -->\n            <span v-else v-html=\"props.description\"></span>\n          </p>\n        </div>\n\n        <footer class=\"stash-dialog__footer\" :class=\"classes.footer\" data-test=\"stash-dialog|footer\">\n          <div class=\"text-right\">\n            <div :class=\"{ 'button-grid': !props.alert }\">\n              <Button v-if=\"!props.alert\" data-test=\"button|cancel\" secondary @click=\"cancel\">\n                {{ props.cancelText }}\n              </Button>\n\n              <Button\n                data-test=\"button|confirm\"\n                :disabled=\"props.disabled\"\n                :is-loading=\"isConfirming\"\n                :color=\"computedDangerZone ? 'red' : 'blue'\"\n                :class=\"{\n                  'w-full': props.alert,\n                }\"\n                @click=\"handleConfirm\"\n              >\n                {{ modifiedConfirmText }}\n              </Button>\n            </div>\n          </div>\n        </footer>\n      </div>\n    </dialog>\n  </transition>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .dialog {\n      background: rgb(0 0 0 / 30%);\n      bottom: 0;\n      display: flex;\n      flex-direction: column;\n      left: 0;\n      overflow: auto;\n      -webkit-overflow-scrolling: touch;\n      place-content: center;\n      position: fixed;\n      right: 0;\n      top: 0;\n      z-index: var(--z-index-dialog);\n      width: 100%;\n      height: 100vh;\n    }\n\n    .body {\n      @apply shadow-3xl;\n\n      background: var(--color-white);\n      color: var(--color-ice-700);\n      display: flex;\n      flex-direction: column;\n      margin: 0 auto;\n      max-height: 100vh;\n      max-width: 360px;\n      transition: transform 150 var(--ease-swing);\n      width: 100%;\n\n      &.grey {\n        background: var(--color-ice-200);\n        border-radius: var(--radius-sm);\n      }\n\n      @media (width >= theme(--breakpoint-md)) {\n        border-radius: var(--radius-sm);\n      }\n    }\n\n    .content {\n      flex-grow: 1;\n      padding: --spacing(6) var(--grid-gutter);\n    }\n\n    .footer {\n      background: var(--color-ice-200);\n      border-top: 1px solid var(--color-ice-500);\n      display: initial; /* TEMP. Will need to fix marketplace `footer` style */\n      padding: --spacing(6) var(--grid-gutter);\n\n      @media (width >= theme(--breakpoint-md)) {\n        border-bottom-left-radius: var(--radius-sm);\n        border-bottom-right-radius: var(--radius-sm);\n      }\n    }\n\n    :global(.fade-enter-from),\n    :global(.fade-leave-active) {\n      .body {\n        transform: translate3d(0, --spacing(3), 0);\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emits","__emit","slots","useSlots","attrs","useAttrs","classes","useCssModule","headerId","uniqueId","isConfirming","ref","root","modifiedConfirmText","computed","t","hasDescription","statusIcon","StatusIcons","capitalize","statusTitle","StatusSeverities","statusColor","StatusColors","computedDangerZone","cancel","handleConfirm","event","watchEffect","nextTick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EE,UAAMA,IAAQC,GAkBRC,IAAQC,GAKRC,IAAQC,EAAA,GACRC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GACVC,IAAWC,EAAS,gBAAgB,GAEpCC,IAAeC,EAAI,EAAK,GACxBC,IAAOD,EAAA,GAKPE,IAAsBC,EAAS,MAAMhB,EAAM,gBAAgBA,EAAM,QAAQiB,EAAE,SAAS,IAAIA,EAAE,YAAY,EAAE,GAExGC,IAAiBF,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAWJ,EAAM,WAAW,GAEpEmB,IAAaH;AAAA,MAAqB,MACtChB,EAAM,SAASoB,EAAYC,EAAWrB,EAAM,MAAM,CAAC,IAAIoB,EAAY;AAAA,IAAA,GAE/DE,IAAcN;AAAA,MAAyB,MAC3ChB,EAAM,SAASuB,EAAiBF,EAAWrB,EAAM,MAAM,CAAC,IAAIuB,EAAiB;AAAA,IAAA,GAEzEC,IAAcR;AAAA,MAAsB,MACxChB,EAAM,SAASyB,EAAaJ,EAAWrB,EAAM,MAAM,CAAC,IAAIyB,EAAa;AAAA,IAAA,GAGjEC,IAAqBV,EAAS,MAAMhB,EAAM,cAAcA,EAAM,WAAWuB,EAAiB,KAAK;AAErG,aAASI,IAAS;AAChB,MAAAzB,EAAM,eAAe,EAAK,GAC1BA,EAAM,QAAQ;AAAA,IAChB;AAEA,mBAAe0B,EAAcC,GAAc;AACzC,UAAI,CAAAjB,EAAa,OAIjB;AAAA,QAAAA,EAAa,QAAQ;AAErB,YAAI;AACF,gBAAMZ,EAAM,UAAU6B,CAAK;AAAA,QAC7B,UAAA;AACE,UAAAjB,EAAa,QAAQ;AAAA,QACvB;AAAA;AAAA,IACF;AAEA,WAAAkB,EAAY,MAAM;AAChB,MAAI9B,EAAM,QAAQc,EAAK,SAErBiB,EAAS,WAAY;AACnB,QAAAjB,EAAK,MAAM,MAAA;AAAA,MACb,CAAC;AAAA,IAEL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Dialog.js","sources":["../src/components/Dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import capitalize from 'lodash-es/capitalize';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, ref, useAttrs, useCssModule, useSlots, watchEffect } from 'vue';\n\n  import {\n    StatusColor,\n    StatusColors,\n    StatusIcon,\n    StatusIcons,\n    StatusSeverities,\n    StatusSeverity,\n  } from '../../../types/statusLevels';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface DialogProps {\n    /**\n     * Shows or hides the dialog.\n     * Usage: v-model:open=\"isOpen\"\n     */\n    open?: boolean;\n\n    /**\n     * Whether the confirmation button is enabled or not.\n     */\n    disabled?: boolean;\n\n    /**\n     * Is this a dangerous action? Will turn the confirmation button red.\n     */\n    dangerZone?: boolean;\n\n    /**\n     * Header text.\n     */\n    header?: string;\n\n    /**\n     * Description text.\n     */\n    description?: string;\n\n    /**\n     * Cancel button text.\n     */\n    cancelText?: string;\n\n    /**\n     * Confirm button text.\n     */\n    confirmText?: string;\n\n    /**\n     * Callback function when the confirm button is clicked.\n     */\n    onConfirm?: (event: Event) => Promise<void> | void;\n\n    /**\n     * Treats it like an Alert Dialog, with only the confirmation button showing.\n     *\n     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/alert}\n     */\n    alert?: boolean;\n\n    /**\n     * Adds a top accent border and icon next to the header.\n     * This behaves similarly to the Alert component in respect to the levels, icons, and colors\n     * passing `error` will treat the dialog the same as `dangerZone`\n     */\n    status?: StatusSeverity;\n  }\n\n  const props = withDefaults(defineProps<DialogProps>(), {\n    open: false,\n    disabled: false,\n    dangerZone: false,\n    header: t('ll.areYouSure'),\n    description: '',\n    cancelText: t('ll.cancel'),\n    confirmText: '',\n    onConfirm: () => undefined,\n    alert: false,\n    status: undefined,\n  });\n\n  defineOptions({\n    name: 'll-dialog',\n    inheritAttrs: false,\n  });\n\n  const emits = defineEmits<{\n    (e: 'update:open', value: boolean): void;\n    (e: 'cancel'): void;\n  }>();\n\n  const slots = useSlots();\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const headerId = uniqueId('dialog-header-');\n\n  const isConfirming = ref(false);\n  const root = ref();\n\n  // Set the default confirm button text to \"Confirm\".\n  // If the `alert` prop is true, the default text is \"Okay\".\n  // If the `confirmText` prop is provided, `confirmText` is used whether the alert prop is true.\n  const modifiedConfirmText = computed(() => props.confirmText || (props.alert ? t('ll.okay') : t('ll.confirm')));\n\n  const hasDescription = computed(() => !!slots.default || props.description);\n\n  const statusIcon = computed<StatusIcon>(() =>\n    props.status ? StatusIcons[capitalize(props.status)] : StatusIcons.Info,\n  );\n  const statusTitle = computed<StatusSeverity>(() =>\n    props.status ? StatusSeverities[capitalize(props.status)] : StatusSeverities.Info,\n  );\n  const statusColor = computed<StatusColor>(() =>\n    props.status ? StatusColors[capitalize(props.status)] : StatusColors.Info,\n  );\n\n  const computedDangerZone = computed(() => props.dangerZone || props.status === StatusSeverities.Error);\n\n  function cancel() {\n    emits('update:open', false);\n    emits('cancel');\n  }\n\n  async function handleConfirm(event: Event) {\n    if (isConfirming.value) {\n      return;\n    }\n\n    isConfirming.value = true;\n\n    try {\n      await props.onConfirm(event);\n    } finally {\n      isConfirming.value = false;\n    }\n  }\n\n  watchEffect(() => {\n    if (props.open && root.value) {\n      // Move focus to confirm button\n      nextTick(function () {\n        root.value.focus();\n      });\n    }\n  });\n</script>\n\n<template>\n  <transition name=\"fade\">\n    <dialog\n      v-if=\"props.open\"\n      ref=\"root\"\n      :open=\"props.open\"\n      tabindex=\"0\"\n      :aria-labelledby=\"headerId\"\n      aria-modal=\"true\"\n      class=\"stash-dialog\"\n      :class=\"classes.dialog\"\n      :data-test=\"attrs['data-test'] || 'll-dialog'\"\n      v-bind=\"attrs\"\n      @keydown.esc=\"cancel\"\n    >\n      <div\n        class=\"stash-dialog__body\"\n        :class=\"[\n          classes.body,\n          `border-${statusColor}`,\n          {\n            'border-t-6': props.status,\n          },\n        ]\"\n        data-test=\"stash-dialog|body\"\n      >\n        <div class=\"stash-dialog__body__content\" :class=\"classes.content\" data-test=\"stash-dialog|body-content\">\n          <div class=\"flex items-start\" :class=\"hasDescription && 'mb-1.5'\">\n            <Icon\n              v-if=\"props.status\"\n              data-test=\"dialog-status-icon\"\n              :name=\"statusIcon\"\n              :title=\"statusTitle\"\n              :class=\"`text-${statusColor}`\"\n            />\n            <h3 :id=\"headerId\" :class=\"{ 'ml-1.5 mt-px': props.status }\">{{ props.header }}</h3>\n          </div>\n\n          <p v-if=\"hasDescription\" class=\"mb-0\">\n            <slot v-if=\"slots.default\"></slot>\n            <!-- eslint-disable-next-line vue/no-v-html -->\n            <span v-else v-html=\"props.description\"></span>\n          </p>\n        </div>\n\n        <footer class=\"stash-dialog__footer\" :class=\"classes.footer\" data-test=\"stash-dialog|footer\">\n          <div class=\"text-right\">\n            <div :class=\"{ 'button-grid': !props.alert }\">\n              <Button v-if=\"!props.alert\" data-test=\"button|cancel\" secondary @click=\"cancel\">\n                {{ props.cancelText }}\n              </Button>\n\n              <Button\n                data-test=\"button|confirm\"\n                :disabled=\"props.disabled\"\n                :is-loading=\"isConfirming\"\n                :color=\"computedDangerZone ? 'red' : 'blue'\"\n                :class=\"{\n                  'w-full': props.alert,\n                }\"\n                @click=\"handleConfirm\"\n              >\n                {{ modifiedConfirmText }}\n              </Button>\n            </div>\n          </div>\n        </footer>\n      </div>\n    </dialog>\n  </transition>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .dialog {\n      background: rgb(0 0 0 / 30%);\n      bottom: 0;\n      display: flex;\n      flex-direction: column;\n      left: 0;\n      overflow: auto;\n      -webkit-overflow-scrolling: touch;\n      place-content: center;\n      position: fixed;\n      right: 0;\n      top: 0;\n      z-index: var(--z-index-dialog);\n      width: 100%;\n      height: 100vh;\n    }\n\n    .body {\n      @apply shadow-3xl;\n\n      background: var(--color-white);\n      color: var(--color-ice-700);\n      display: flex;\n      flex-direction: column;\n      margin: 0 auto;\n      max-height: 100vh;\n      max-width: 360px;\n      transition: transform 150 var(--ease-swing);\n      width: 100%;\n\n      &.grey {\n        background: var(--color-ice-200);\n        border-radius: var(--radius-sm);\n      }\n\n      @media (width >= theme(--breakpoint-md)) {\n        border-radius: var(--radius-sm);\n      }\n    }\n\n    .content {\n      flex-grow: 1;\n      padding: --spacing(6) var(--grid-gutter);\n    }\n\n    .footer {\n      background: var(--color-ice-200);\n      border-top: 1px solid var(--color-ice-500);\n      display: initial; /* TEMP. Will need to fix marketplace `footer` style */\n      padding: --spacing(6) var(--grid-gutter);\n\n      @media (width >= theme(--breakpoint-md)) {\n        border-bottom-left-radius: var(--radius-sm);\n        border-bottom-right-radius: var(--radius-sm);\n      }\n    }\n\n    :global(.fade-enter-from),\n    :global(.fade-leave-active) {\n      .body {\n        transform: translate3d(0, --spacing(3), 0);\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emits","__emit","slots","useSlots","attrs","useAttrs","classes","useCssModule","headerId","uniqueId","isConfirming","ref","root","modifiedConfirmText","computed","t","hasDescription","statusIcon","StatusIcons","capitalize","statusTitle","StatusSeverities","statusColor","StatusColors","computedDangerZone","cancel","handleConfirm","event","watchEffect","nextTick","_createBlock","_Transition","_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_normalizeClass","Icon","_toDisplayString","_hoisted_2","_hoisted_3","_renderSlot","_ctx","_hoisted_5","Button","_createTextVNode","_createVNode"],"mappings":"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"}

package/dist/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../src/components/Divider/Divider.vue"],"sourcesContent":["<script>\n  export default {\n    name: 'll-divider',\n  };\n</script>\n\n<template>\n  <div class=\"flex items-center text-center uppercase\" :class=\"$style.separator\" role=\"separator\">\n    <slot></slot>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .separator::before,\n    .separator::after {\n      border-bottom: 1px solid var(--color-ice-200);\n      content: '';\n      flex: 1;\n    }\n\n    .separator:not(:empty)::before {\n      margin-right: --spacing(3);\n    }\n\n    .separator:not(:empty)::after {\n      margin-left: --spacing(3);\n    }\n  }\n</style>\n"],"names":["_sfc_main","_createElementBlock","_normalizeClass","_ctx","_renderSlot"],"mappings":";;;;GACOA,IAAU;AAAA,EACb,MAAM;;;cAKRC,EAEM,OAAA;AAAA,IAFD,OAPPC,EAAA,CAOa,2CAAkDC,EAAA,OAAO,SAAS,CAAA;AAAA,IAAE,MAAK;AAAA;IAClFC,EAAaD,EAAA,QAAA,SAAA;AAAA;;;;;"}
+{"version":3,"file":"Divider.js","sources":["../src/components/Divider/Divider.vue"],"sourcesContent":["<script>\n  export default {\n    name: 'll-divider',\n  };\n</script>\n\n<template>\n  <div class=\"flex items-center text-center uppercase\" :class=\"$style.separator\" role=\"separator\">\n    <slot></slot>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .separator::before,\n    .separator::after {\n      border-bottom: 1px solid var(--color-ice-200);\n      content: '';\n      flex: 1;\n    }\n\n    .separator:not(:empty)::before {\n      margin-right: --spacing(3);\n    }\n\n    .separator:not(:empty)::after {\n      margin-left: --spacing(3);\n    }\n  }\n</style>\n"],"names":["_sfc_main","_createElementBlock","_normalizeClass","_ctx","_renderSlot"],"mappings":";;;;GACOA,IAAU;AAAA,EACb,MAAM;;;cAKRC,EAEM,OAAA;AAAA,IAFD,OAAKC,EAAA,CAAC,2CAAkDC,EAAA,OAAO,SAAS,CAAA;AAAA,IAAE,MAAK;AAAA;IAClFC,EAAaD,EAAA,QAAA,SAAA;AAAA;;;;;"}

package/dist/Dropdown.js

@@ -1,9 +1,9 @@
-import { defineComponent as I, ref as r, useCssModule as q, watch as C, onMounted as K, onBeforeUnmount as R, computed as U, withDirectives as _, createElementBlock as k, openBlock as m, renderSlot as x, createVNode as E, createElementVNode as b, normalizeClass as S, createBlock as V, createTextVNode as W, toDisplayString as Y, Transition as F, withCtx as j, normalizeStyle as G, unref as M, vShow as H, nextTick as A } from "vue";
-import { KEY_CODES as d } from "./constants.js";
+import { defineComponent as I, ref as r, useCssModule as q, watch as x, onMounted as K, onBeforeUnmount as R, computed as U, withDirectives as k, createElementBlock as _, openBlock as p, renderSlot as E, createVNode as b, createElementVNode as S, normalizeClass as M, createBlock as V, createTextVNode as W, toDisplayString as Y, Transition as F, withCtx as j, normalizeStyle as G, unref as A, vShow as H, nextTick as B } from "vue";
+import { KEY_CODES as f } from "./constants.js";
 import J from "./directives/clickoutside.js";
 import Q from "./utils/calculateElementOverflow.js";
 import { getMountPoint as X } from "./utils/helpers.js";
-import B from "./Icon.js";
+import D from "./Icon.js";
 import { _ as Z } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const ee = ["aria-expanded"], te = {
   key: 0,
@@ -21,19 +21,19 @@ const ee = ["aria-expanded"], te = {
     fluidContent: { type: Boolean, default: !1 }
   },
   emits: ["toggle", "dismiss"],
-  setup(D, { expose: $, emit: L }) {
-    const a = D, p = L, t = r(null), g = r(null), f = [], s = r(f), i = r(-1), l = r(!1), y = r({}), T = q();
-    C(l, (e) => {
-      e || (i.value = -1), p("toggle", e);
-    }), C(i, (e, o) => {
+  setup(c, { expose: $, emit: L }) {
+    const a = c, g = L, t = r(null), y = r(null), v = [], s = r(v), i = r(-1), l = r(!1), w = r({}), T = q();
+    x(l, (e) => {
+      e || (i.value = -1), g("toggle", e);
+    }), x(i, (e, o) => {
       e in s.value && s.value[e].classList.add("bg-ice-200"), o in s.value && s.value[o].classList.remove("bg-ice-200");
     }), K(() => {
       var e, o, n;
       if (a.reattach) {
-        const c = X();
-        t.value && c.appendChild(t.value);
+        const d = X();
+        t.value && d.appendChild(t.value);
       }
-      (e = t.value) != null && e.querySelector(".stash-menu") ? s.value = ((o = t.value) == null ? void 0 : o.querySelectorAll(".stash-menu-item")) ?? f : s.value = ((n = t.value) == null ? void 0 : n.querySelectorAll(".dropdown__item")) ?? f, window.addEventListener("resize", () => u());
+      (e = t.value) != null && e.querySelector(".stash-menu") ? s.value = ((o = t.value) == null ? void 0 : o.querySelectorAll(".stash-menu-item")) ?? v : s.value = ((n = t.value) == null ? void 0 : n.querySelectorAll(".dropdown__item")) ?? v, window.addEventListener("resize", () => u());
     }), R(() => {
       var e, o;
       window.removeEventListener("resize", () => u()), (o = (e = t == null ? void 0 : t.value) == null ? void 0 : e.parentNode) == null || o.removeChild(t.value);
@@ -43,20 +43,20 @@ const ee = ["aria-expanded"], te = {
       if (a.closeManually && ((n = t.value) != null && n.contains(e == null ? void 0 : e.target) || t.value === (e == null ? void 0 : e.target)))
         return;
       const o = l.value;
-      l.value = !1, o && p("dismiss");
+      l.value = !1, o && g("dismiss");
     }
-    async function v() {
+    async function m() {
       var e;
       l.value ? l.value = !1 : (l.value = !0, await z(), (e = t.value) == null || e.focus());
     }
     function N(e) {
-      if (e.keyCode === d.ESCAPE)
+      if (e.keyCode === f.ESCAPE)
         u();
-      else if (e.keyCode === d.DOWN && i.value < s.value.length - 1 && l.value)
+      else if (e.keyCode === f.DOWN && i.value < s.value.length - 1 && l.value)
         i.value++;
-      else if (e.keyCode === d.UP && i.value > -1 && l.value)
+      else if (e.keyCode === f.UP && i.value > -1 && l.value)
         i.value--;
-      else if (e.keyCode === d.ENTER && i.value !== -1 && l.value)
+      else if (e.keyCode === f.ENTER && i.value !== -1 && l.value)
         s[i.value].click();
       else
         return;
@@ -67,75 +67,75 @@ const ee = ["aria-expanded"], te = {
       (e = t.value) == null || e.style.setProperty("--offset", "0");
     }
     async function z() {
-      var w, h;
-      await A();
-      const e = ((w = g.value) == null ? void 0 : w.getBoundingClientRect()) || {}, o = e.top + e.height, n = {
+      var h, C;
+      await B();
+      const e = ((h = y.value) == null ? void 0 : h.getBoundingClientRect()) || {}, o = e.top + e.height, n = {
         x: 0,
         y: 0,
         ...a.offset
       };
-      a.reattach && (y.value = {
+      a.reattach && (w.value = {
         left: a.align === "left" ? `${Math.round(e.left) + n.x}px` : void 0,
         right: a.align === "right" ? `${document.documentElement.clientWidth - Math.round(e.right) + n.x}px` : void 0,
         top: `${window.scrollY + o + n.y}px`
-      }, await A());
-      const c = Q(t == null ? void 0 : t.value);
-      if (c) {
+      }, await B());
+      const d = Q(t == null ? void 0 : t.value);
+      if (d) {
         const P = a.align === "left" ? "-" : "";
-        (h = t.value) == null || h.style.setProperty("--offset", `${P}${c.value}`);
+        (C = t.value) == null || C.style.setProperty("--offset", `${P}${d.value}`);
       }
     }
     return $({
       isActive: U(() => l.value),
-      toggle: v,
+      toggle: m,
       dismiss: u
-    }), (e, o) => _((m(), k("div", {
+    }), (e, o) => k((p(), _("div", {
       ref_key: "dropdownRef",
-      ref: g,
+      ref: y,
       class: "relative inline-block",
       "data-test": "ll-dropdown",
       onKeydown: N
     }, [
-      x(e.$slots, "toggle", {
+      E(e.$slots, "toggle", {
         isActive: l.value,
-        toggle: v
+        toggle: m
       }, () => [
-        b("button", {
+        S("button", {
           "data-test": "button|toggle",
           "aria-expanded": l.value,
-          class: S([e.label ? "outline-hidden min-w-auto" : "rounded p-3"]),
-          onClick: v
+          class: M([c.label ? "outline-hidden min-w-auto" : "rounded p-3"]),
+          onClick: m
         }, [
-          e.label ? (m(), k("span", te, [
-            W(Y(e.label) + " ", 1),
-            E(B, { name: "caret-down" })
-          ])) : (m(), V(B, {
+          c.label ? (p(), _("span", te, [
+            W(Y(c.label) + " ", 1),
+            b(D, { name: "caret-down" })
+          ])) : (p(), V(D, {
             key: 1,
             name: "ellipsis"
           }))
         ], 10, ee)
       ]),
-      E(F, {
+      b(F, {
         name: "fade",
         onAfterLeave: O
       }, {
         default: j(() => [
-          _(b("div", {
+          k(S("div", {
             ref_key: "contentRef",
             ref: t,
             "data-test": "ll-dropdown-content",
-            class: S([
-              M(T).content,
-              e.contentClass,
+            class: M([
+              A(T).content,
+              c.contentClass,
               {
                 "left-0 after:left-6": a.align === "left",
                 "right-0": a.align === "right",
                 "max-w-[360px]": !a.fluidContent
               }
             ]),
-            style: G(y.value)
+            style: G(w.value)
           }, [
-            x(e.$slots, "default", {
+            E(e.$slots, "default", {
               dismiss: u,
               isActive: l.value
             })
@@ -146,7 +146,7 @@ const ee = ["aria-expanded"], te = {
         _: 3
       })
     ], 32)), [
-      [M(J), u]
+      [A(J), u]
     ]);
   }
 }), oe = "_content_81ltz_5", ae = {

package/dist/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../src/components/Dropdown/Dropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useCssModule, watch } from 'vue';\n\n  import { KEY_CODES } from '../../constants';\n  import vClickoutside from '../../directives/clickoutside/clickoutside';\n  import calculateElementOverflow from '../../utils/calculateElementOverflow';\n  import { getMountPoint } from '../../utils/helpers';\n  import Icon from '../Icon/Icon.vue';\n\n  export type DropdownOffset = {\n    x?: number;\n    y?: number;\n  };\n\n  export interface DropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * When passed, text with caret is displayed instead of default kebab menu.\n     */\n    label?: string;\n    /**\n     * If true, dropdown will remain open when clicking on its content. Otherwise, it'll close automatically on click.\n     */\n    closeManually?: boolean;\n    /**\n     * Used to horizontally and vertically offset the dropdown in pixels\n     * Keep in mind, `x` value is relative to `align` value.\n     */\n    offset?: DropdownOffset;\n    /**\n     * If `reattach` is true, the contents will be mounted in the mount point container,\n     * so as to circumvent clipping issues from a parent's overflow property.\n     */\n    reattach?: boolean;\n    /**\n     * Custom class to apply to the default dropdown content element\n     */\n    contentClass?: string | string[];\n    /**\n     * Removes content container's max width\n     */\n    fluidContent?: boolean;\n  }\n\n  type DropdownStyles = {\n    left?: string;\n    right?: string;\n    top?: string;\n  };\n\n  defineOptions({\n    name: 'll-dropdown',\n  });\n\n  const props = withDefaults(defineProps<DropdownProps>(), {\n    align: 'right',\n    label: '',\n    closeManually: false,\n    offset: () => ({}),\n    reattach: true,\n    contentClass: '',\n    fluidContent: false,\n  });\n\n  const emit = defineEmits<{\n    toggle: [isActive: boolean];\n    dismiss: [];\n  }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n  const dropdownRef = ref<HTMLDivElement | null>(null);\n\n  const DEFAULT_ITEMS_LIST = [] as unknown as NodeListOf<Element>;\n\n  const items = ref<NodeListOf<Element>>(DEFAULT_ITEMS_LIST);\n  const itemIndex = ref(-1);\n  const isActive = ref(false);\n\n  const styles = ref<DropdownStyles>({});\n  const classes = useCssModule();\n\n  watch(isActive, (val) => {\n    if (!val) {\n      itemIndex.value = -1;\n    }\n\n    emit('toggle', val);\n  });\n\n  watch(itemIndex, (next, prev) => {\n    if (next in items.value) {\n      items.value[next].classList.add('bg-ice-200');\n    }\n    if (prev in items.value) {\n      items.value[prev].classList.remove('bg-ice-200');\n    }\n  });\n\n  onMounted(() => {\n    if (props.reattach) {\n      const target = getMountPoint();\n\n      if (contentRef.value) {\n        target.appendChild(contentRef.value);\n      }\n    }\n\n    // if stash-menu exists, use it's items\n    if (contentRef.value?.querySelector('.stash-menu')) {\n      items.value = contentRef.value?.querySelectorAll('.stash-menu-item') ?? DEFAULT_ITEMS_LIST;\n    } else {\n      items.value = contentRef.value?.querySelectorAll('.dropdown__item') ?? DEFAULT_ITEMS_LIST;\n    }\n\n    // avoid calling dismiss with ResizeEvent because it's target is the Window element and it's not a valid Node element to be passed to dismiss\n    window.addEventListener('resize', () => dismiss());\n  });\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('resize', () => dismiss());\n    contentRef?.value?.parentNode?.removeChild(contentRef.value);\n  });\n\n  /**\n   * Dismisses the Dropdown.\n   */\n  function dismiss(event?: Event) {\n    if (\n      props.closeManually &&\n      (contentRef.value?.contains(event?.target as HTMLElement) || contentRef.value === event?.target)\n    ) {\n      return;\n    }\n\n    const wasOpen = isActive.value;\n\n    isActive.value = false;\n\n    if (wasOpen) {\n      emit('dismiss');\n    }\n  }\n\n  /**\n   * Opens or closes the Dropdown. If opening, positions and focuses its content.\n   */\n  async function toggle() {\n    if (isActive.value) {\n      isActive.value = false;\n    } else {\n      isActive.value = true;\n      await calculateOffset();\n      contentRef.value?.focus();\n    }\n  }\n\n  /**\n   * Handles all user keyboard input on the Dropdown.\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  function onKeyDown(e: KeyboardEvent) {\n    if (e.keyCode === KEY_CODES.ESCAPE) {\n      dismiss();\n    } else if (e.keyCode === KEY_CODES.DOWN && itemIndex.value < items.value.length - 1 && isActive.value) {\n      itemIndex.value++;\n    } else if (e.keyCode === KEY_CODES.UP && itemIndex.value > -1 && isActive.value) {\n      itemIndex.value--;\n    } else if (e.keyCode === KEY_CODES.ENTER && itemIndex.value !== -1 && isActive.value) {\n      items[itemIndex.value].click();\n    } else {\n      return;\n    }\n\n    e.preventDefault(); // if keyDown did something / we didn't return\n  }\n\n  /**\n   * Reset any page overflow offset\n   */\n  function resetOffset() {\n    contentRef.value?.style.setProperty('--offset', '0');\n  }\n\n  /**\n   * Calculate the position for the Dropdown content element,\n   * relative to the viewport.\n   * Repositions the dropdown content element (& arrow)\n   * if it overflows the page (including gutter).\n   */\n  async function calculateOffset() {\n    await nextTick();\n\n    const toggleBCR = dropdownRef.value?.getBoundingClientRect() || ({} as DOMRect);\n    const top = toggleBCR.top + toggleBCR.height;\n    const offset = {\n      x: 0,\n      y: 0,\n      ...props.offset,\n    };\n\n    if (props.reattach) {\n      styles.value = {\n        left: props.align === 'left' ? `${Math.round(toggleBCR.left) + offset.x}px` : undefined,\n        right:\n          props.align === 'right'\n            ? `${document.documentElement.clientWidth - Math.round(toggleBCR.right) + offset.x}px`\n            : undefined,\n        top: `${window.scrollY + top + offset.y}px`,\n      };\n      await nextTick(); // wait for style updates to sync in the DOM\n    }\n\n    const overflow = calculateElementOverflow(contentRef?.value);\n\n    if (overflow) {\n      const direction = props.align === 'left' ? '-' : '';\n      contentRef.value?.style.setProperty('--offset', `${direction}${overflow.value}`);\n    }\n  }\n\n  defineExpose({\n    isActive: computed(() => isActive.value),\n    toggle,\n    dismiss,\n  });\n</script>\n\n<template>\n  <div\n    ref=\"dropdownRef\"\n    v-clickoutside=\"dismiss\"\n    class=\"relative inline-block\"\n    data-test=\"ll-dropdown\"\n    @keydown=\"onKeyDown\"\n  >\n    <!-- @slot Toggle component slot, receives `toggle` method to trigger Dropdown display -->\n    <slot name=\"toggle\" :is-active=\"isActive\" :toggle=\"toggle\">\n      <button\n        data-test=\"button|toggle\"\n        :aria-expanded=\"isActive\"\n        :class=\"[label ? 'outline-hidden min-w-auto' : 'rounded p-3']\"\n        @click=\"toggle\"\n      >\n        <span v-if=\"label\" class=\"flex items-center font-medium text-blue-500 hover:text-blue-700\">\n          {{ label }}\n          <Icon name=\"caret-down\" />\n        </span>\n        <Icon v-else name=\"ellipsis\" />\n      </button>\n    </slot>\n\n    <transition name=\"fade\" @after-leave=\"resetOffset\">\n      <div\n        v-show=\"isActive\"\n        ref=\"contentRef\"\n        data-test=\"ll-dropdown-content\"\n        :class=\"[\n          classes.content,\n          contentClass,\n          {\n            'left-0 after:left-6': props.align === 'left',\n            'right-0': props.align === 'right',\n            'max-w-[360px]': !props.fluidContent,\n          },\n        ]\"\n        :style=\"styles\"\n      >\n        <!-- @slot Dropdown content slot. Receives `dismiss` method, to trigger manual close. You must call dismiss with parentheses. Receives `is-active` prop.  -->\n        <slot :dismiss=\"dismiss\" :is-active=\"isActive\"></slot>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .content {\n      --offset: 0;\n\n      @apply shadow-2xl\n        bg-white\n        border\n        border-solid\n        border-blue-500\n        rounded\n        absolute\n        z-[301]\n        min-w-[200px];\n\n      transform: translateX(calc(var(--offset) * 1px));\n    }\n\n    /**\n    * TODO: these global styles should be componentized in https://leaflink.atlassian.net/browse/STASH-566\n    */\n    :global(.dropdown__list) {\n      @apply bg-white list-none m-1.5 p-0;\n    }\n\n    :global(.dropdown__item) {\n      @apply block mx-0 mt-0 mb-1.5 w-full first:mt-0 last:mb-0;\n    }\n\n    :global(.dropdown__item) button {\n      @apply border-none text-left p-1.5;\n    }\n\n    :global(.dropdown__item) :where(a, button) {\n      @apply rounded\n      text-ice-700\n        block\n        py-[10px]\n        px-1.5\n        w-full\n        disabled:text-ice-500\n        disabled:cursor-default\n        hover:bg-ice-200\n        hover:text-ice-700\n        hover:no-underline\n        transition-all\n        duration-150\n        ease-swing;\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","contentRef","ref","dropdownRef","DEFAULT_ITEMS_LIST","items","itemIndex","isActive","styles","classes","useCssModule","watch","val","next","prev","onMounted","target","getMountPoint","_a","_b","_c","dismiss","onBeforeUnmount","event","wasOpen","toggle","calculateOffset","onKeyDown","KEY_CODES","resetOffset","nextTick","toggleBCR","top","offset","overflow","calculateElementOverflow","direction","__expose","computed"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../src/components/Dropdown/Dropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useCssModule, watch } from 'vue';\n\n  import { KEY_CODES } from '../../constants';\n  import vClickoutside from '../../directives/clickoutside/clickoutside';\n  import calculateElementOverflow from '../../utils/calculateElementOverflow';\n  import { getMountPoint } from '../../utils/helpers';\n  import Icon from '../Icon/Icon.vue';\n\n  export type DropdownOffset = {\n    x?: number;\n    y?: number;\n  };\n\n  export interface DropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * When passed, text with caret is displayed instead of default kebab menu.\n     */\n    label?: string;\n    /**\n     * If true, dropdown will remain open when clicking on its content. Otherwise, it'll close automatically on click.\n     */\n    closeManually?: boolean;\n    /**\n     * Used to horizontally and vertically offset the dropdown in pixels\n     * Keep in mind, `x` value is relative to `align` value.\n     */\n    offset?: DropdownOffset;\n    /**\n     * If `reattach` is true, the contents will be mounted in the mount point container,\n     * so as to circumvent clipping issues from a parent's overflow property.\n     */\n    reattach?: boolean;\n    /**\n     * Custom class to apply to the default dropdown content element\n     */\n    contentClass?: string | string[];\n    /**\n     * Removes content container's max width\n     */\n    fluidContent?: boolean;\n  }\n\n  type DropdownStyles = {\n    left?: string;\n    right?: string;\n    top?: string;\n  };\n\n  defineOptions({\n    name: 'll-dropdown',\n  });\n\n  const props = withDefaults(defineProps<DropdownProps>(), {\n    align: 'right',\n    label: '',\n    closeManually: false,\n    offset: () => ({}),\n    reattach: true,\n    contentClass: '',\n    fluidContent: false,\n  });\n\n  const emit = defineEmits<{\n    toggle: [isActive: boolean];\n    dismiss: [];\n  }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n  const dropdownRef = ref<HTMLDivElement | null>(null);\n\n  const DEFAULT_ITEMS_LIST = [] as unknown as NodeListOf<Element>;\n\n  const items = ref<NodeListOf<Element>>(DEFAULT_ITEMS_LIST);\n  const itemIndex = ref(-1);\n  const isActive = ref(false);\n\n  const styles = ref<DropdownStyles>({});\n  const classes = useCssModule();\n\n  watch(isActive, (val) => {\n    if (!val) {\n      itemIndex.value = -1;\n    }\n\n    emit('toggle', val);\n  });\n\n  watch(itemIndex, (next, prev) => {\n    if (next in items.value) {\n      items.value[next].classList.add('bg-ice-200');\n    }\n    if (prev in items.value) {\n      items.value[prev].classList.remove('bg-ice-200');\n    }\n  });\n\n  onMounted(() => {\n    if (props.reattach) {\n      const target = getMountPoint();\n\n      if (contentRef.value) {\n        target.appendChild(contentRef.value);\n      }\n    }\n\n    // if stash-menu exists, use it's items\n    if (contentRef.value?.querySelector('.stash-menu')) {\n      items.value = contentRef.value?.querySelectorAll('.stash-menu-item') ?? DEFAULT_ITEMS_LIST;\n    } else {\n      items.value = contentRef.value?.querySelectorAll('.dropdown__item') ?? DEFAULT_ITEMS_LIST;\n    }\n\n    // avoid calling dismiss with ResizeEvent because it's target is the Window element and it's not a valid Node element to be passed to dismiss\n    window.addEventListener('resize', () => dismiss());\n  });\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('resize', () => dismiss());\n    contentRef?.value?.parentNode?.removeChild(contentRef.value);\n  });\n\n  /**\n   * Dismisses the Dropdown.\n   */\n  function dismiss(event?: Event) {\n    if (\n      props.closeManually &&\n      (contentRef.value?.contains(event?.target as HTMLElement) || contentRef.value === event?.target)\n    ) {\n      return;\n    }\n\n    const wasOpen = isActive.value;\n\n    isActive.value = false;\n\n    if (wasOpen) {\n      emit('dismiss');\n    }\n  }\n\n  /**\n   * Opens or closes the Dropdown. If opening, positions and focuses its content.\n   */\n  async function toggle() {\n    if (isActive.value) {\n      isActive.value = false;\n    } else {\n      isActive.value = true;\n      await calculateOffset();\n      contentRef.value?.focus();\n    }\n  }\n\n  /**\n   * Handles all user keyboard input on the Dropdown.\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  function onKeyDown(e: KeyboardEvent) {\n    if (e.keyCode === KEY_CODES.ESCAPE) {\n      dismiss();\n    } else if (e.keyCode === KEY_CODES.DOWN && itemIndex.value < items.value.length - 1 && isActive.value) {\n      itemIndex.value++;\n    } else if (e.keyCode === KEY_CODES.UP && itemIndex.value > -1 && isActive.value) {\n      itemIndex.value--;\n    } else if (e.keyCode === KEY_CODES.ENTER && itemIndex.value !== -1 && isActive.value) {\n      items[itemIndex.value].click();\n    } else {\n      return;\n    }\n\n    e.preventDefault(); // if keyDown did something / we didn't return\n  }\n\n  /**\n   * Reset any page overflow offset\n   */\n  function resetOffset() {\n    contentRef.value?.style.setProperty('--offset', '0');\n  }\n\n  /**\n   * Calculate the position for the Dropdown content element,\n   * relative to the viewport.\n   * Repositions the dropdown content element (& arrow)\n   * if it overflows the page (including gutter).\n   */\n  async function calculateOffset() {\n    await nextTick();\n\n    const toggleBCR = dropdownRef.value?.getBoundingClientRect() || ({} as DOMRect);\n    const top = toggleBCR.top + toggleBCR.height;\n    const offset = {\n      x: 0,\n      y: 0,\n      ...props.offset,\n    };\n\n    if (props.reattach) {\n      styles.value = {\n        left: props.align === 'left' ? `${Math.round(toggleBCR.left) + offset.x}px` : undefined,\n        right:\n          props.align === 'right'\n            ? `${document.documentElement.clientWidth - Math.round(toggleBCR.right) + offset.x}px`\n            : undefined,\n        top: `${window.scrollY + top + offset.y}px`,\n      };\n      await nextTick(); // wait for style updates to sync in the DOM\n    }\n\n    const overflow = calculateElementOverflow(contentRef?.value);\n\n    if (overflow) {\n      const direction = props.align === 'left' ? '-' : '';\n      contentRef.value?.style.setProperty('--offset', `${direction}${overflow.value}`);\n    }\n  }\n\n  defineExpose({\n    isActive: computed(() => isActive.value),\n    toggle,\n    dismiss,\n  });\n</script>\n\n<template>\n  <div\n    ref=\"dropdownRef\"\n    v-clickoutside=\"dismiss\"\n    class=\"relative inline-block\"\n    data-test=\"ll-dropdown\"\n    @keydown=\"onKeyDown\"\n  >\n    <!-- @slot Toggle component slot, receives `toggle` method to trigger Dropdown display -->\n    <slot name=\"toggle\" :is-active=\"isActive\" :toggle=\"toggle\">\n      <button\n        data-test=\"button|toggle\"\n        :aria-expanded=\"isActive\"\n        :class=\"[label ? 'outline-hidden min-w-auto' : 'rounded p-3']\"\n        @click=\"toggle\"\n      >\n        <span v-if=\"label\" class=\"flex items-center font-medium text-blue-500 hover:text-blue-700\">\n          {{ label }}\n          <Icon name=\"caret-down\" />\n        </span>\n        <Icon v-else name=\"ellipsis\" />\n      </button>\n    </slot>\n\n    <transition name=\"fade\" @after-leave=\"resetOffset\">\n      <div\n        v-show=\"isActive\"\n        ref=\"contentRef\"\n        data-test=\"ll-dropdown-content\"\n        :class=\"[\n          classes.content,\n          contentClass,\n          {\n            'left-0 after:left-6': props.align === 'left',\n            'right-0': props.align === 'right',\n            'max-w-[360px]': !props.fluidContent,\n          },\n        ]\"\n        :style=\"styles\"\n      >\n        <!-- @slot Dropdown content slot. Receives `dismiss` method, to trigger manual close. You must call dismiss with parentheses. Receives `is-active` prop.  -->\n        <slot :dismiss=\"dismiss\" :is-active=\"isActive\"></slot>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .content {\n      --offset: 0;\n\n      @apply shadow-2xl\n        bg-white\n        border\n        border-solid\n        border-blue-500\n        rounded\n        absolute\n        z-[301]\n        min-w-[200px];\n\n      transform: translateX(calc(var(--offset) * 1px));\n    }\n\n    /**\n    * TODO: these global styles should be componentized in https://leaflink.atlassian.net/browse/STASH-566\n    */\n    :global(.dropdown__list) {\n      @apply bg-white list-none m-1.5 p-0;\n    }\n\n    :global(.dropdown__item) {\n      @apply block mx-0 mt-0 mb-1.5 w-full first:mt-0 last:mb-0;\n    }\n\n    :global(.dropdown__item) button {\n      @apply border-none text-left p-1.5;\n    }\n\n    :global(.dropdown__item) :where(a, button) {\n      @apply rounded\n      text-ice-700\n        block\n        py-[10px]\n        px-1.5\n        w-full\n        disabled:text-ice-500\n        disabled:cursor-default\n        hover:bg-ice-200\n        hover:text-ice-700\n        hover:no-underline\n        transition-all\n        duration-150\n        ease-swing;\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","contentRef","ref","dropdownRef","DEFAULT_ITEMS_LIST","items","itemIndex","isActive","styles","classes","useCssModule","watch","val","next","prev","onMounted","target","getMountPoint","_a","_b","_c","dismiss","onBeforeUnmount","event","wasOpen","toggle","calculateOffset","onKeyDown","KEY_CODES","resetOffset","nextTick","toggleBCR","top","offset","overflow","calculateElementOverflow","direction","__expose","computed","_createElementBlock","_renderSlot","_ctx","_createElementVNode","_openBlock","_hoisted_2","_createTextVNode","_toDisplayString","_createVNode","Icon","_createBlock","_Transition","_normalizeClass","_unref"],"mappings":"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"}

package/dist/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import { VignetteNames } from '../Illustration/Illustration.models';\n  import Illustration from '../Illustration/Illustration.vue';\n\n  export interface EmptyStateProps {\n    /**\n     * @deprecated Use illustration instead.\n     */\n    image?: {\n      alt?: string;\n      src: string;\n    };\n\n    /**\n     * @deprecated Use title instead.\n     */\n    text?: string;\n\n    /**\n     * the title text of the empty state\n     */\n    title?: string;\n\n    /**\n     * the subtitle text of the empty state\n     */\n    subtitle?: string;\n\n    /**\n     * additional text to place at the bottom of the empty state\n     */\n    footnote?: string;\n\n    /**\n     * The name of the vignette illustration to render\n     */\n    vignette?: VignetteNames;\n\n    /**\n     * The size in pixels of the vignette illustration. Defaults to 300.\n     */\n    vignetteSize?: number;\n  }\n\n  export interface EmptyStateSlots {\n    title?: () => unknown;\n    subtitle?: () => unknown;\n    footnote?: () => unknown;\n    button?: () => unknown;\n    image?: () => unknown;\n  }\n\n  defineOptions({\n    name: 'll-empty-state',\n  });\n\n  const props = withDefaults(defineProps<EmptyStateProps>(), {\n    /**\n     * An optional image to render\n     */\n    image: () => ({\n      alt: '',\n      src: '',\n    }),\n\n    /**\n     * The custom message to render\n     */\n    text: '',\n\n    title: '',\n    subtitle: '',\n    footnote: '',\n    vignette: undefined,\n    vignetteSize: 300,\n  });\n\n  const classes = useCssModule();\n  const slots = defineSlots<EmptyStateSlots>();\n</script>\n\n<template>\n  <div key=\"empty\" class=\"stash-empty-state\" data-test=\"stash-empty-state\">\n    <template v-if=\"props.title || slots.title || props.subtitle || slots.subtitle || props.vignette\">\n      <div class=\"flex flex-col items-center text-center md:flex-row md:text-left\">\n        <Illustration\n          v-if=\"props.vignette\"\n          data-test=\"stash-empty-state|illustration\"\n          type=\"vignette\"\n          class=\"mx-3\"\n          :name=\"props.vignette\"\n          :size=\"props.vignetteSize\"\n        />\n        <section>\n          <slot name=\"title\">\n            <h3 class=\"mb-1.5\">\n              {{ props.title }}\n            </h3>\n          </slot>\n\n          <slot name=\"subtitle\">\n            <p v-if=\"props.subtitle || slots.subtitle\" :class=\"{ 'mb-8': slots.button, 'mb-0': !slots.button }\">\n              {{ props.subtitle }}\n            </p>\n          </slot>\n\n          <slot name=\"button\"></slot>\n          <slot name=\"footnote\">\n            <p v-if=\"props.footnote\" class=\"mb-0 text-xs\" :class=\"{ 'mt-3': slots.button }\">\n              {{ props.footnote }}\n            </p>\n          </slot>\n        </section>\n      </div>\n    </template>\n\n    <template v-else>\n      <div\n        class=\"mx-auto my-0 flex items-center justify-center py-12\"\n        :class=\"[classes.root, { 'text-center': !props.image.src && !slots.image }]\"\n      >\n        <slot name=\"image\">\n          <img\n            v-if=\"props.image.src\"\n            class=\"mr-6\"\n            :alt=\"props.image.alt\"\n            :class=\"classes.image\"\n            :src=\"props.image.src\"\n            data-test=\"stash-empty-state__img\"\n          />\n        </slot>\n\n        {{ props.text || t('ll.emptyState.noResults') }}\n      </div>\n    </template>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .root {\n      max-width: 600px;\n    }\n\n    .image {\n      max-width: 60px;\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","slots","_useSlots"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DE,UAAMA,IAAQC,GAqBRC,IAAUC,EAAA,GACVC,IAAQC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"EmptyState.js","sources":["../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import { VignetteNames } from '../Illustration/Illustration.models';\n  import Illustration from '../Illustration/Illustration.vue';\n\n  export interface EmptyStateProps {\n    /**\n     * @deprecated Use illustration instead.\n     */\n    image?: {\n      alt?: string;\n      src: string;\n    };\n\n    /**\n     * @deprecated Use title instead.\n     */\n    text?: string;\n\n    /**\n     * the title text of the empty state\n     */\n    title?: string;\n\n    /**\n     * the subtitle text of the empty state\n     */\n    subtitle?: string;\n\n    /**\n     * additional text to place at the bottom of the empty state\n     */\n    footnote?: string;\n\n    /**\n     * The name of the vignette illustration to render\n     */\n    vignette?: VignetteNames;\n\n    /**\n     * The size in pixels of the vignette illustration. Defaults to 300.\n     */\n    vignetteSize?: number;\n  }\n\n  export interface EmptyStateSlots {\n    title?: () => unknown;\n    subtitle?: () => unknown;\n    footnote?: () => unknown;\n    button?: () => unknown;\n    image?: () => unknown;\n  }\n\n  defineOptions({\n    name: 'll-empty-state',\n  });\n\n  const props = withDefaults(defineProps<EmptyStateProps>(), {\n    /**\n     * An optional image to render\n     */\n    image: () => ({\n      alt: '',\n      src: '',\n    }),\n\n    /**\n     * The custom message to render\n     */\n    text: '',\n\n    title: '',\n    subtitle: '',\n    footnote: '',\n    vignette: undefined,\n    vignetteSize: 300,\n  });\n\n  const classes = useCssModule();\n  const slots = defineSlots<EmptyStateSlots>();\n</script>\n\n<template>\n  <div key=\"empty\" class=\"stash-empty-state\" data-test=\"stash-empty-state\">\n    <template v-if=\"props.title || slots.title || props.subtitle || slots.subtitle || props.vignette\">\n      <div class=\"flex flex-col items-center text-center md:flex-row md:text-left\">\n        <Illustration\n          v-if=\"props.vignette\"\n          data-test=\"stash-empty-state|illustration\"\n          type=\"vignette\"\n          class=\"mx-3\"\n          :name=\"props.vignette\"\n          :size=\"props.vignetteSize\"\n        />\n        <section>\n          <slot name=\"title\">\n            <h3 class=\"mb-1.5\">\n              {{ props.title }}\n            </h3>\n          </slot>\n\n          <slot name=\"subtitle\">\n            <p v-if=\"props.subtitle || slots.subtitle\" :class=\"{ 'mb-8': slots.button, 'mb-0': !slots.button }\">\n              {{ props.subtitle }}\n            </p>\n          </slot>\n\n          <slot name=\"button\"></slot>\n          <slot name=\"footnote\">\n            <p v-if=\"props.footnote\" class=\"mb-0 text-xs\" :class=\"{ 'mt-3': slots.button }\">\n              {{ props.footnote }}\n            </p>\n          </slot>\n        </section>\n      </div>\n    </template>\n\n    <template v-else>\n      <div\n        class=\"mx-auto my-0 flex items-center justify-center py-12\"\n        :class=\"[classes.root, { 'text-center': !props.image.src && !slots.image }]\"\n      >\n        <slot name=\"image\">\n          <img\n            v-if=\"props.image.src\"\n            class=\"mr-6\"\n            :alt=\"props.image.alt\"\n            :class=\"classes.image\"\n            :src=\"props.image.src\"\n            data-test=\"stash-empty-state__img\"\n          />\n        </slot>\n\n        {{ props.text || t('ll.emptyState.noResults') }}\n      </div>\n    </template>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .root {\n      max-width: 600px;\n    }\n\n    .image {\n      max-width: 60px;\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","slots","_useSlots","_openBlock","_createElementBlock","_hoisted_1","_hoisted_2","_createBlock","Illustration","_createElementVNode","_renderSlot","_ctx","_hoisted_3","_toDisplayString","_normalizeClass","_unref","_createTextVNode","t"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DE,UAAMA,IAAQC,GAqBRC,IAAUC,EAAA,GACVC,IAAQC,EAAA;sBAIdC,EAAA,GAAAC,EAqDM,OArDNC,GAqDM;AAAA,MApDYR,EAAM,SAASI,EAAM,SAASJ,EAAM,YAAYI,EAAM,YAAYJ,EAAM,YACtFM,EAAA,GAAAC,EA6BM,OA7BNE,GA6BM;AAAA,QA3BIT,EAAM,iBADdU,EAOEC,GAAA;AAAA;UALA,aAAU;AAAA,UACV,MAAK;AAAA,UACL,OAAM;AAAA,UACL,MAAMX,EAAM;AAAA,UACZ,MAAMA,EAAM;AAAA,QAAA;QAEfY,EAmBU,WAAA,MAAA;AAAA,UAlBRC,EAIOC,uBAJP,MAIO;AAAA,YAHLF,EAEK,MAFLG,GAEKC,EADAhB,EAAM,KAAK,GAAA,CAAA;AAAA,UAAA;UAIlBa,EAIOC,0BAJP,MAIO;AAAA,YAHId,EAAM,YAAYI,EAAM,iBAAjCG,EAEI,KAAA;AAAA;cAFwC,mBAAiBH,EAAM,QAAM,QAAA,CAAWA,EAAM,OAAA,CAAM;AAAA,YAAA,GAC3FY,EAAAhB,EAAM,QAAQ,GAAA,CAAA;;UAIrBa,EAA2BC,EAAA,QAAA,QAAA;AAAA,UAC3BD,EAIOC,0BAJP,MAIO;AAAA,YAHId,EAAM,iBAAfO,EAEI,KAAA;AAAA;cAFqB,OAAKU,EAAA,CAAC,gBAAc,EAAA,QAAmBb,EAAM,QAAM,CAAA;AAAA,YAAA,GACvEY,EAAAhB,EAAM,QAAQ,GAAA,CAAA;;;kBAQzBO,EAgBM,OAAA;AAAA;QAfJ,OAAKU,EAAA,CAAC,uDAAqD,CAClDC,EAAAhB,CAAA,EAAQ,MAAI,EAAA,eAAA,CAAoBF,EAAM,MAAM,OAAG,CAAKI,EAAM,MAAA,CAAK,CAAA,CAAA;AAAA,MAAA;QAExES,EASOC,uBATP,MASO;AAAA,UAPGd,EAAM,MAAM,YADpBO,EAOE,OAAA;AAAA;YALA,OAAKU,EAAA,CAAC,QAEEC,EAAAhB,CAAA,EAAQ,KAAK,CAAA;AAAA,YADpB,KAAKF,EAAM,MAAM;AAAA,YAEjB,KAAKA,EAAM,MAAM;AAAA,YAClB,aAAU;AAAA,UAAA;;QAEPmB,EAAA,MAEPH,EAAGhB,EAAM,QAAQkB,EAAAE,CAAA,EAAC,yBAAA,CAAA,GAAA,CAAA;AAAA,MAAA;;;;;;;;;"}

package/dist/Expand.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js";
+import { _ as f } from "./Expand.vue_vue_type_script_setup_true_lang-BmNJA0Xy.js";
 export {
   f as default
 };

package/dist/Expand.vue_vue_type_script_setup_true_lang-BmNJA0Xy.js

@@ -0,0 +1,74 @@
+import { defineComponent as p, ref as x, onMounted as u, createBlock as m, openBlock as s, resolveDynamicComponent as v, normalizeClass as E, withCtx as d, createVNode as g, Transition as k, createElementBlock as i, withDirectives as w, Fragment as C, createCommentVNode as B, renderSlot as l, vShow as N } from "vue";
+const z = /* @__PURE__ */ p({
+  name: "ll-expand",
+  __name: "Expand",
+  props: {
+    is: { default: "div" },
+    isExpanded: { type: Boolean, default: !1 },
+    isLazy: { type: Boolean, default: !1 },
+    transitionName: { default: "expand" }
+  },
+  emits: ["after-expand"],
+  setup(t, { emit: r }) {
+    const o = t, f = r, a = x(null);
+    u(() => {
+      !o.isExpanded && a.value && (a.value.style.overflow = "hidden");
+    });
+    const h = (e) => {
+      e.style.visibility = "hidden", e.style.height = "auto";
+      const n = e.offsetHeight;
+      e.style.visibility = "", e.style.display = "", e.style.height = 0, requestAnimationFrame(() => {
+        e.style.height = `${n}px`;
+      });
+    }, c = (e) => {
+      e.style.height = "", e.style.overflow = "", f("after-expand");
+    }, y = (e) => {
+      const n = e.offsetHeight;
+      e.style.height = `${n}px`, e.style.overflow = "hidden", requestAnimationFrame(() => {
+        e.style.height = 0;
+      });
+    };
+    return (e, n) => (s(), m(v(o.is), {
+      class: E(["stash-expand", {
+        "stash-expand--expanded": t.isExpanded,
+        "stash-expand--collapsed": !t.isExpanded
+      }]),
+      "data-test": "stash-expand"
+    }, {
+      default: d(() => [
+        g(k, {
+          name: t.transitionName,
+          onAfterEnter: c,
+          onEnter: h,
+          onLeave: y
+        }, {
+          default: d(() => [
+            t.isLazy ? (s(), i(C, { key: 0 }, [
+              t.isExpanded ? (s(), i("div", {
+                key: 0,
+                ref_key: "contentRef",
+                ref: a
+              }, [
+                l(e.$slots, "default")
+              ], 512)) : B("", !0)
+            ], 64)) : w((s(), i("div", {
+              key: 1,
+              ref_key: "contentRef",
+              ref: a
+            }, [
+              l(e.$slots, "default")
+            ], 512)), [
+              [N, t.isExpanded]
+            ])
+          ]),
+          _: 3
+        }, 8, ["name"])
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+});
+export {
+  z as _
+};
+//# sourceMappingURL=Expand.vue_vue_type_script_setup_true_lang-BmNJA0Xy.js.map

package/dist/{Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js.map → Expand.vue_vue_type_script_setup_true_lang-BmNJA0Xy.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Expand.vue_vue_type_script_setup_true_lang-CiONJfAp.js","sources":["../src/components/Expand/Expand.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { onMounted, ref } from 'vue';\n\n  defineOptions({\n    name: 'll-expand',\n  });\n\n  export type ExpandOuterElement = 'div' | 'td' | 'li';\n\n  export interface ExpandProps {\n    /**\n     * The root element to use as the root element the expand transition gets applied to\n     */\n    is?: ExpandOuterElement;\n\n    /**\n     * Dictates whether the content is expanded or collapsed\n     */\n    isExpanded?: boolean;\n\n    /**\n     * Whether to only render content on expand\n     */\n    isLazy?: boolean;\n\n    /**\n     * The name of the transition to pass to the transition component\n     * @see: https://vuejs.org/guide/built-ins/transition.html#css-based-transitions\n     */\n    transitionName?: string;\n  }\n\n  const props = withDefaults(defineProps<ExpandProps>(), {\n    is: 'div',\n    isExpanded: false,\n    isLazy: false,\n    transitionName: 'expand',\n  });\n\n  const emit = defineEmits<{\n    (e: 'after-expand'): void;\n  }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n\n  onMounted(() => {\n    if (!props.isExpanded && contentRef.value) {\n      contentRef.value.style.overflow = 'hidden';\n    }\n  });\n\n  /**\n   * Expands the element\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const onExpand = (element) => {\n    // Trick to calculate the height of the hidden element\n    element.style.visibility = 'hidden';\n    element.style.height = 'auto';\n\n    const height = element.offsetHeight;\n\n    // Restore default styling\n    element.style.visibility = '';\n    element.style.display = '';\n\n    // Set height on the element to zero\n    element.style.height = 0;\n\n    // Set expanded height after the other height change takes affect\n    requestAnimationFrame(() => {\n      element.style.height = `${height}px`;\n    });\n  };\n\n  /**\n   * Resores default styling after the expand animation is completed\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const afterExpand = (element) => {\n    element.style.height = '';\n    element.style.overflow = '';\n    emit('after-expand');\n  };\n\n  /**\n   * Collapses the element\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const onCollapse = (element) => {\n    const height = element.offsetHeight;\n\n    // Set height to the expanded height\n    element.style.height = `${height}px`;\n    element.style.overflow = 'hidden';\n\n    // Set height to zero after the other height change takes affect\n    requestAnimationFrame(() => {\n      element.style.height = 0;\n    });\n  };\n</script>\n\n<template>\n  <component\n    :is=\"props.is\"\n    class=\"stash-expand\"\n    data-test=\"stash-expand\"\n    :class=\"{\n      'stash-expand--expanded': isExpanded,\n      'stash-expand--collapsed': !isExpanded,\n    }\"\n  >\n    <transition :name=\"transitionName\" @after-enter=\"afterExpand\" @enter=\"onExpand\" @leave=\"onCollapse\">\n      <template v-if=\"isLazy\">\n        <div v-if=\"isExpanded\" ref=\"contentRef\">\n          <slot></slot>\n        </div>\n      </template>\n      <template v-else>\n        <div v-show=\"isExpanded\" ref=\"contentRef\">\n          <slot></slot>\n        </div>\n      </template>\n    </transition>\n  </component>\n</template>\n"],"names":["props","__props","emit","__emit","contentRef","ref","onMounted","onExpand","element","height","afterExpand","onCollapse"],"mappings":";;;;;;;;;;;;AAgCE,UAAMA,IAAQC,GAORC,IAAOC,GAIPC,IAAaC,EAAwB,IAAI;AAE/C,IAAAC,EAAU,MAAM;AACd,MAAI,CAACN,EAAM,cAAcI,EAAW,UAClCA,EAAW,MAAM,MAAM,WAAW;AAAA,IAEtC,CAAC;AAOD,UAAMG,IAAW,CAACC,MAAY;AAE5B,MAAAA,EAAQ,MAAM,aAAa,UAC3BA,EAAQ,MAAM,SAAS;AAEvB,YAAMC,IAASD,EAAQ;AAGvB,MAAAA,EAAQ,MAAM,aAAa,IAC3BA,EAAQ,MAAM,UAAU,IAGxBA,EAAQ,MAAM,SAAS,GAGvB,sBAAsB,MAAM;AAC1B,QAAAA,EAAQ,MAAM,SAAS,GAAGC,CAAM;AAAA,MAClC,CAAC;AAAA,IACH,GAOMC,IAAc,CAACF,MAAY;AAC/B,MAAAA,EAAQ,MAAM,SAAS,IACvBA,EAAQ,MAAM,WAAW,IACzBN,EAAK,cAAc;AAAA,IACrB,GAOMS,IAAa,CAACH,MAAY;AAC9B,YAAMC,IAASD,EAAQ;AAGvB,MAAAA,EAAQ,MAAM,SAAS,GAAGC,CAAM,MAChCD,EAAQ,MAAM,WAAW,UAGzB,sBAAsB,MAAM;AAC1B,QAAAA,EAAQ,MAAM,SAAS;AAAA,MACzB,CAAC;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Expand.vue_vue_type_script_setup_true_lang-BmNJA0Xy.js","sources":["../src/components/Expand/Expand.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { onMounted, ref } from 'vue';\n\n  defineOptions({\n    name: 'll-expand',\n  });\n\n  export type ExpandOuterElement = 'div' | 'td' | 'li';\n\n  export interface ExpandProps {\n    /**\n     * The root element to use as the root element the expand transition gets applied to\n     */\n    is?: ExpandOuterElement;\n\n    /**\n     * Dictates whether the content is expanded or collapsed\n     */\n    isExpanded?: boolean;\n\n    /**\n     * Whether to only render content on expand\n     */\n    isLazy?: boolean;\n\n    /**\n     * The name of the transition to pass to the transition component\n     * @see: https://vuejs.org/guide/built-ins/transition.html#css-based-transitions\n     */\n    transitionName?: string;\n  }\n\n  const props = withDefaults(defineProps<ExpandProps>(), {\n    is: 'div',\n    isExpanded: false,\n    isLazy: false,\n    transitionName: 'expand',\n  });\n\n  const emit = defineEmits<{\n    (e: 'after-expand'): void;\n  }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n\n  onMounted(() => {\n    if (!props.isExpanded && contentRef.value) {\n      contentRef.value.style.overflow = 'hidden';\n    }\n  });\n\n  /**\n   * Expands the element\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const onExpand = (element) => {\n    // Trick to calculate the height of the hidden element\n    element.style.visibility = 'hidden';\n    element.style.height = 'auto';\n\n    const height = element.offsetHeight;\n\n    // Restore default styling\n    element.style.visibility = '';\n    element.style.display = '';\n\n    // Set height on the element to zero\n    element.style.height = 0;\n\n    // Set expanded height after the other height change takes affect\n    requestAnimationFrame(() => {\n      element.style.height = `${height}px`;\n    });\n  };\n\n  /**\n   * Resores default styling after the expand animation is completed\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const afterExpand = (element) => {\n    element.style.height = '';\n    element.style.overflow = '';\n    emit('after-expand');\n  };\n\n  /**\n   * Collapses the element\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const onCollapse = (element) => {\n    const height = element.offsetHeight;\n\n    // Set height to the expanded height\n    element.style.height = `${height}px`;\n    element.style.overflow = 'hidden';\n\n    // Set height to zero after the other height change takes affect\n    requestAnimationFrame(() => {\n      element.style.height = 0;\n    });\n  };\n</script>\n\n<template>\n  <component\n    :is=\"props.is\"\n    class=\"stash-expand\"\n    data-test=\"stash-expand\"\n    :class=\"{\n      'stash-expand--expanded': isExpanded,\n      'stash-expand--collapsed': !isExpanded,\n    }\"\n  >\n    <transition :name=\"transitionName\" @after-enter=\"afterExpand\" @enter=\"onExpand\" @leave=\"onCollapse\">\n      <template v-if=\"isLazy\">\n        <div v-if=\"isExpanded\" ref=\"contentRef\">\n          <slot></slot>\n        </div>\n      </template>\n      <template v-else>\n        <div v-show=\"isExpanded\" ref=\"contentRef\">\n          <slot></slot>\n        </div>\n      </template>\n    </transition>\n  </component>\n</template>\n"],"names":["props","__props","emit","__emit","contentRef","ref","onMounted","onExpand","element","height","afterExpand","onCollapse","_createBlock","_resolveDynamicComponent","_createVNode","_Transition","_createElementBlock","_Fragment","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;AAgCE,UAAMA,IAAQC,GAORC,IAAOC,GAIPC,IAAaC,EAAwB,IAAI;AAE/C,IAAAC,EAAU,MAAM;AACd,MAAI,CAACN,EAAM,cAAcI,EAAW,UAClCA,EAAW,MAAM,MAAM,WAAW;AAAA,IAEtC,CAAC;AAOD,UAAMG,IAAW,CAACC,MAAY;AAE5B,MAAAA,EAAQ,MAAM,aAAa,UAC3BA,EAAQ,MAAM,SAAS;AAEvB,YAAMC,IAASD,EAAQ;AAGvB,MAAAA,EAAQ,MAAM,aAAa,IAC3BA,EAAQ,MAAM,UAAU,IAGxBA,EAAQ,MAAM,SAAS,GAGvB,sBAAsB,MAAM;AAC1B,QAAAA,EAAQ,MAAM,SAAS,GAAGC,CAAM;AAAA,MAClC,CAAC;AAAA,IACH,GAOMC,IAAc,CAACF,MAAY;AAC/B,MAAAA,EAAQ,MAAM,SAAS,IACvBA,EAAQ,MAAM,WAAW,IACzBN,EAAK,cAAc;AAAA,IACrB,GAOMS,IAAa,CAACH,MAAY;AAC9B,YAAMC,IAASD,EAAQ;AAGvB,MAAAA,EAAQ,MAAM,SAAS,GAAGC,CAAM,MAChCD,EAAQ,MAAM,WAAW,UAGzB,sBAAsB,MAAM;AAC1B,QAAAA,EAAQ,MAAM,SAAS;AAAA,MACzB,CAAC;AAAA,IACH;2BAIAI,EAqBYC,EApBLb,EAAM,EAAE,GAAA;AAAA,MACb,UAAM,gBAAc;AAAA,kCAEsBC,EAAA;AAAA,oCAA8CA,EAAA;AAAA,MAAA;MADxF,aAAU;AAAA,IAAA;iBAMV,MAWa;AAAA,QAXba,EAWaC,GAAA;AAAA,UAXA,MAAMd,EAAA;AAAA,UAAiB,cAAaS;AAAA,UAAc,SAAOH;AAAA,UAAW,SAAOI;AAAA,QAAA;qBACtF,MAIW;AAAA,YAJKV,EAAA,eAAhBe,EAIWC,GAAA,EAAA,KAAA,KAAA;AAAA,cAHEhB,EAAA,mBAAXe,EAEM,OAAA;AAAA;yBAFqB;AAAA,gBAAJ,KAAIZ;AAAA,cAAA;gBACzBc,EAAaC,EAAA,QAAA,SAAA;AAAA,cAAA;8BAIfH,EAEM,OAAA;AAAA;uBAFuB;AAAA,cAAJ,KAAIZ;AAAA,YAAA;cAC3Bc,EAAaC,EAAA,QAAA,SAAA;AAAA,YAAA;kBADFlB,EAAA,UAAU;AAAA,YAAA;;;;;;;;;"}

package/dist/Field.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./Field.vue_vue_type_script_setup_true_lang-dAGKfjf5.js";
+import { _ as f } from "./Field.vue_vue_type_script_setup_true_lang-D2I8xDEW.js";
 export {
   f as default
 };