@leaflink/stash 53.4.1 → 53.4.2

package/dist/TextEditor.vue.d.ts

@@ -47,8 +47,8 @@ onBlur?: ((editor: default_3) => any) | undefined;
 onFocus?: ((editor: default_3) => any) | undefined;
 "onUpdate:model-value"?: ((value: string) => any) | undefined;
 }>, {
-controls: TextEditorControls;
 placeholder: string;
+controls: TextEditorControls;
 modelValue: string;
 handlers: TextEditorControlHandlerMap;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

package/dist/Textarea.js

@@ -1,5 +1,5 @@
 import { defineComponent as k, useAttrs as E, useSlots as H, useCssModule as A, ref as x, computed as y, watch as I, onMounted as P, nextTick as V, onBeforeUnmount as $, createBlock as q, openBlock as D, mergeProps as b, unref as p, createSlots as L, withCtx as g, createElementVNode as j, renderSlot as F } from "vue";
-import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-dAGKfjf5.js";
+import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-D2I8xDEW.js";
 import { _ as U } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const W = ["id", "aria-errormessage", "aria-invalid", "maxlength", "value", "placeholder", "disabled", "readonly", "rows"], Y = /* @__PURE__ */ k({
   name: "ll-textarea",

package/dist/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n  import { FieldProps } from '../Field/Field.types';\n  import Field from '../Field/Field.vue';\n\n  export interface TextareaResizeOptions {\n    /**\n     * It will automatically scroll the page down when it reaches the bottom of the viewport/element\n     */\n    forceBrowserScroll: boolean;\n  }\n\n  export interface TextAreaProps extends FieldProps {\n    /**\n     * Value for the textarea element.\n     */\n    modelValue?: string;\n\n    /**\n     * Deprecated. Use :model-value or v-model instead of :value.\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Allow textarea to be resizable vertically.\n     * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`\n     */\n    resize?: boolean | TextareaResizeOptions;\n\n    /**\n     * Placeholder text for the textarea element.\n     * **Note:** placeholders should be used to display examples; they should not be used as labels because they are not accessible as labels. If a real label cannot be used, use the `aria-label` attribute.\n     */\n    placeholder?: string;\n\n    /**\n     * Number of rows to display in the textarea.\n     */\n    rows?: number;\n\n    /**\n     * Maximum number of characters allowed in the textarea.\n     */\n    maxlength?: number;\n  }\n\n  defineOptions({\n    name: 'll-textarea',\n  });\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<TextAreaProps>(), {\n    modelValue: '',\n    value: null,\n    resize: false,\n    maxlength: undefined,\n    rows: undefined,\n    placeholder: undefined,\n  });\n\n  const emits = defineEmits<{\n    /**\n     * Emitted when the model value changes.\n     */\n    (e: 'update:model-value', value: string): void;\n  }>();\n\n  const textareaRef = ref<HTMLTextAreaElement>();\n  const observer = ref<ResizeObserver>();\n  const isReadOnly = computed(() => props.isReadOnly || ('readonly' in attrs && attrs.readonly !== false));\n\n  const inputAttrs = computed(() => {\n    const allAttrs = { ...attrs };\n\n    delete allAttrs['data-test'];\n    delete allAttrs.class;\n\n    return allAttrs;\n  });\n\n  watch(\n    () => props.resize,\n    (v) => {\n      if (v) {\n        setupResizeObserver();\n      } else {\n        observer.value?.disconnect();\n      }\n    },\n  );\n\n  const onInput = (event: Event) => {\n    emits('update:model-value', (event.target as HTMLTextAreaElement).value);\n  };\n\n  const setupResizeObserver = () => {\n    if (observer.value || !textareaRef.value) {\n      return;\n    }\n\n    // the ResizeObserver will be in charge to detect if page needs to scroll when resizing the component\n    observer.value = new ResizeObserver((entries) => {\n      const entry = entries[0];\n\n      if (!entry) {\n        return;\n      }\n\n      const { target } = entry;\n      const parent = findParentScrollable(textareaRef.value as HTMLTextAreaElement) || document.documentElement;\n\n      const { scrollTop: scrollPosition } = parent;\n      let offsetDiff = 0;\n\n      // checks if the closest parent element scrollable is the document page\n      if (parent === document.documentElement) {\n        const { top, height } = getOffsetClipRect(target as HTMLElement);\n        const { innerHeight: viewportHeight } = window;\n\n        offsetDiff = Math.max(top + height - (viewportHeight + scrollPosition), 0);\n      } else {\n        const { top, height } = (target as HTMLElement).getBoundingClientRect();\n        const { top: parentTop } = parent.getBoundingClientRect();\n        const { offsetHeight: parentHeight } = parent;\n        const offsetTop = top - parentTop;\n\n        offsetDiff = Math.max(offsetTop + height - parentHeight, 0);\n      }\n\n      if (offsetDiff) {\n        requestAnimationFrame(() => {\n          parent.scrollTop = scrollPosition + offsetDiff;\n        });\n      }\n    });\n\n    observer.value.observe(textareaRef.value);\n  };\n\n  /**\n   * Retrieve the closest parent that has a scroll. Defaults to the document page.\n   */\n  const findParentScrollable = (el: HTMLElement): HTMLElement | null => {\n    const parent = el.parentElement as HTMLElement;\n    if (!parent) {\n      return null;\n    }\n\n    const { overflowY } = getComputedStyle(parent);\n    if (overflowY !== 'visible') {\n      return parent;\n    }\n\n    if (parent === document.body) {\n      return document.documentElement;\n    }\n\n    return findParentScrollable(parent);\n  };\n\n  /**\n   * Retrieve element absolute positioning relative to the page.\n   */\n  const getOffsetClipRect = (el: HTMLElement) => {\n    const { offsetWidth: width, offsetHeight: height } = el;\n\n    let left = 0;\n    let top = 0;\n\n    const findPos = function ({ offsetLeft, offsetTop, offsetParent }: HTMLElement) {\n      left += offsetLeft;\n      top += offsetTop;\n\n      if (offsetParent) {\n        findPos(offsetParent as HTMLElement);\n      }\n    };\n\n    findPos(el);\n\n    return {\n      top,\n      left,\n      width,\n      height,\n    };\n  };\n\n  onMounted(async () => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n\n    if (\n      (typeof props.resize === 'boolean' && props.resize) ||\n      (props.resize as TextareaResizeOptions)?.forceBrowserScroll\n    ) {\n      await nextTick();\n      setupResizeObserver();\n    }\n  });\n\n  onBeforeUnmount(() => {\n    observer.value?.disconnect();\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-textarea\" :class=\"[classes.root]\" data-test=\"stash-textarea\">\n    <template #default=\"{ fieldId, fieldErrorId, hasError }\">\n      <textarea\n        :id=\"fieldId\"\n        ref=\"textareaRef\"\n        :aria-errormessage=\"fieldErrorId\"\n        :aria-invalid=\"hasError\"\n        :class=\"[\n          classes.textarea,\n          'border border-ice-500',\n          {\n            'stash-textarea--error border-red-500 text-red-500': hasError,\n            'text-ice-700 hover:border-ice-500 focus:border-blue-500 active:border-blue-500':\n              !hasError && !props.disabled,\n            'resize-y': props.resize,\n            'min-h-[100px]': !props.rows,\n            'resize-none': !props.resize,\n          },\n        ]\"\n        :maxlength=\"props.maxlength\"\n        :value=\"props.modelValue\"\n        data-test=\"stash-textarea|textarea\"\n        :placeholder=\"props.placeholder\"\n        v-bind=\"inputAttrs\"\n        :disabled=\"props.disabled\"\n        :readonly=\"isReadOnly\"\n        :rows=\"props.rows\"\n        @input=\"onInput\"\n      ></textarea>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint content -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      position: relative;\n      width: 100%;\n    }\n\n    .textarea {\n      background: var(--color-white);\n      border-radius: var(--radius-sm);\n      display: block;\n      outline: none;\n      padding: --spacing(1.5);\n      width: 100%;\n\n      &::placeholder {\n        color: var(--color-ice-500);\n        opacity: 1;\n      }\n\n      &[disabled] {\n        background-color: var(--color-ice-100);\n        border-color: var(--color-ice-500);\n        color: var(--color-ice-500);\n        pointer-events: none;\n      }\n\n      &[disabled]:active,\n      &[disabled]:focus {\n        box-shadow: none;\n      }\n\n      &[disabled]::placeholder {\n        text-transform: none;\n        color: var(--color-ice-500);\n      }\n\n      &[readonly] {\n        border-color: transparent;\n        background-color: transparent;\n        padding-left: 0;\n        padding-right: 0;\n        min-height: unset;\n      }\n    }\n  }\n</style>\n"],"names":["attrs","useAttrs","slots","useSlots","classes","useCssModule","props","__props","emits","__emit","textareaRef","ref","observer","isReadOnly","computed","inputAttrs","allAttrs","watch","v","setupResizeObserver","_a","onInput","event","entries","entry","target","parent","findParentScrollable","scrollPosition","offsetDiff","top","height","getOffsetClipRect","viewportHeight","parentTop","parentHeight","offsetTop","el","overflowY","width","left","findPos","offsetLeft","offsetParent","onMounted","nextTick","onBeforeUnmount"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n  import { FieldProps } from '../Field/Field.types';\n  import Field from '../Field/Field.vue';\n\n  export interface TextareaResizeOptions {\n    /**\n     * It will automatically scroll the page down when it reaches the bottom of the viewport/element\n     */\n    forceBrowserScroll: boolean;\n  }\n\n  export interface TextAreaProps extends FieldProps {\n    /**\n     * Value for the textarea element.\n     */\n    modelValue?: string;\n\n    /**\n     * Deprecated. Use :model-value or v-model instead of :value.\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Allow textarea to be resizable vertically.\n     * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`\n     */\n    resize?: boolean | TextareaResizeOptions;\n\n    /**\n     * Placeholder text for the textarea element.\n     * **Note:** placeholders should be used to display examples; they should not be used as labels because they are not accessible as labels. If a real label cannot be used, use the `aria-label` attribute.\n     */\n    placeholder?: string;\n\n    /**\n     * Number of rows to display in the textarea.\n     */\n    rows?: number;\n\n    /**\n     * Maximum number of characters allowed in the textarea.\n     */\n    maxlength?: number;\n  }\n\n  defineOptions({\n    name: 'll-textarea',\n  });\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<TextAreaProps>(), {\n    modelValue: '',\n    value: null,\n    resize: false,\n    maxlength: undefined,\n    rows: undefined,\n    placeholder: undefined,\n  });\n\n  const emits = defineEmits<{\n    /**\n     * Emitted when the model value changes.\n     */\n    (e: 'update:model-value', value: string): void;\n  }>();\n\n  const textareaRef = ref<HTMLTextAreaElement>();\n  const observer = ref<ResizeObserver>();\n  const isReadOnly = computed(() => props.isReadOnly || ('readonly' in attrs && attrs.readonly !== false));\n\n  const inputAttrs = computed(() => {\n    const allAttrs = { ...attrs };\n\n    delete allAttrs['data-test'];\n    delete allAttrs.class;\n\n    return allAttrs;\n  });\n\n  watch(\n    () => props.resize,\n    (v) => {\n      if (v) {\n        setupResizeObserver();\n      } else {\n        observer.value?.disconnect();\n      }\n    },\n  );\n\n  const onInput = (event: Event) => {\n    emits('update:model-value', (event.target as HTMLTextAreaElement).value);\n  };\n\n  const setupResizeObserver = () => {\n    if (observer.value || !textareaRef.value) {\n      return;\n    }\n\n    // the ResizeObserver will be in charge to detect if page needs to scroll when resizing the component\n    observer.value = new ResizeObserver((entries) => {\n      const entry = entries[0];\n\n      if (!entry) {\n        return;\n      }\n\n      const { target } = entry;\n      const parent = findParentScrollable(textareaRef.value as HTMLTextAreaElement) || document.documentElement;\n\n      const { scrollTop: scrollPosition } = parent;\n      let offsetDiff = 0;\n\n      // checks if the closest parent element scrollable is the document page\n      if (parent === document.documentElement) {\n        const { top, height } = getOffsetClipRect(target as HTMLElement);\n        const { innerHeight: viewportHeight } = window;\n\n        offsetDiff = Math.max(top + height - (viewportHeight + scrollPosition), 0);\n      } else {\n        const { top, height } = (target as HTMLElement).getBoundingClientRect();\n        const { top: parentTop } = parent.getBoundingClientRect();\n        const { offsetHeight: parentHeight } = parent;\n        const offsetTop = top - parentTop;\n\n        offsetDiff = Math.max(offsetTop + height - parentHeight, 0);\n      }\n\n      if (offsetDiff) {\n        requestAnimationFrame(() => {\n          parent.scrollTop = scrollPosition + offsetDiff;\n        });\n      }\n    });\n\n    observer.value.observe(textareaRef.value);\n  };\n\n  /**\n   * Retrieve the closest parent that has a scroll. Defaults to the document page.\n   */\n  const findParentScrollable = (el: HTMLElement): HTMLElement | null => {\n    const parent = el.parentElement as HTMLElement;\n    if (!parent) {\n      return null;\n    }\n\n    const { overflowY } = getComputedStyle(parent);\n    if (overflowY !== 'visible') {\n      return parent;\n    }\n\n    if (parent === document.body) {\n      return document.documentElement;\n    }\n\n    return findParentScrollable(parent);\n  };\n\n  /**\n   * Retrieve element absolute positioning relative to the page.\n   */\n  const getOffsetClipRect = (el: HTMLElement) => {\n    const { offsetWidth: width, offsetHeight: height } = el;\n\n    let left = 0;\n    let top = 0;\n\n    const findPos = function ({ offsetLeft, offsetTop, offsetParent }: HTMLElement) {\n      left += offsetLeft;\n      top += offsetTop;\n\n      if (offsetParent) {\n        findPos(offsetParent as HTMLElement);\n      }\n    };\n\n    findPos(el);\n\n    return {\n      top,\n      left,\n      width,\n      height,\n    };\n  };\n\n  onMounted(async () => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n\n    if (\n      (typeof props.resize === 'boolean' && props.resize) ||\n      (props.resize as TextareaResizeOptions)?.forceBrowserScroll\n    ) {\n      await nextTick();\n      setupResizeObserver();\n    }\n  });\n\n  onBeforeUnmount(() => {\n    observer.value?.disconnect();\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-textarea\" :class=\"[classes.root]\" data-test=\"stash-textarea\">\n    <template #default=\"{ fieldId, fieldErrorId, hasError }\">\n      <textarea\n        :id=\"fieldId\"\n        ref=\"textareaRef\"\n        :aria-errormessage=\"fieldErrorId\"\n        :aria-invalid=\"hasError\"\n        :class=\"[\n          classes.textarea,\n          'border border-ice-500',\n          {\n            'stash-textarea--error border-red-500 text-red-500': hasError,\n            'text-ice-700 hover:border-ice-500 focus:border-blue-500 active:border-blue-500':\n              !hasError && !props.disabled,\n            'resize-y': props.resize,\n            'min-h-[100px]': !props.rows,\n            'resize-none': !props.resize,\n          },\n        ]\"\n        :maxlength=\"props.maxlength\"\n        :value=\"props.modelValue\"\n        data-test=\"stash-textarea|textarea\"\n        :placeholder=\"props.placeholder\"\n        v-bind=\"inputAttrs\"\n        :disabled=\"props.disabled\"\n        :readonly=\"isReadOnly\"\n        :rows=\"props.rows\"\n        @input=\"onInput\"\n      ></textarea>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint content -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      position: relative;\n      width: 100%;\n    }\n\n    .textarea {\n      background: var(--color-white);\n      border-radius: var(--radius-sm);\n      display: block;\n      outline: none;\n      padding: --spacing(1.5);\n      width: 100%;\n\n      &::placeholder {\n        color: var(--color-ice-500);\n        opacity: 1;\n      }\n\n      &[disabled] {\n        background-color: var(--color-ice-100);\n        border-color: var(--color-ice-500);\n        color: var(--color-ice-500);\n        pointer-events: none;\n      }\n\n      &[disabled]:active,\n      &[disabled]:focus {\n        box-shadow: none;\n      }\n\n      &[disabled]::placeholder {\n        text-transform: none;\n        color: var(--color-ice-500);\n      }\n\n      &[readonly] {\n        border-color: transparent;\n        background-color: transparent;\n        padding-left: 0;\n        padding-right: 0;\n        min-height: unset;\n      }\n    }\n  }\n</style>\n"],"names":["attrs","useAttrs","slots","useSlots","classes","useCssModule","props","__props","emits","__emit","textareaRef","ref","observer","isReadOnly","computed","inputAttrs","allAttrs","watch","v","setupResizeObserver","_a","onInput","event","entries","entry","target","parent","findParentScrollable","scrollPosition","offsetDiff","top","height","getOffsetClipRect","viewportHeight","parentTop","parentHeight","offsetTop","el","overflowY","width","left","findPos","offsetLeft","offsetParent","onMounted","nextTick","onBeforeUnmount","_createBlock","Field","_mergeProps","_unref","fieldId","fieldErrorId","hasError","_createElementVNode","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDE,UAAMA,IAAQC,EAAA,GACRC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAQC,GASRC,IAAQC,GAORC,IAAcC,EAAA,GACdC,IAAWD,EAAA,GACXE,IAAaC,EAAS,MAAMR,EAAM,cAAe,cAAcN,KAASA,EAAM,aAAa,EAAM,GAEjGe,IAAaD,EAAS,MAAM;AAChC,YAAME,IAAW,EAAE,GAAGhB,EAAA;AAEtB,oBAAOgB,EAAS,WAAW,GAC3B,OAAOA,EAAS,OAETA;AAAA,IACT,CAAC;AAED,IAAAC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACY,MAAM;;AACL,QAAIA,IACFC,EAAA,KAEAC,IAAAR,EAAS,UAAT,QAAAQ,EAAgB;AAAA,MAEpB;AAAA,IAAA;AAGF,UAAMC,IAAU,CAACC,MAAiB;AAChC,MAAAd,EAAM,sBAAuBc,EAAM,OAA+B,KAAK;AAAA,IACzE,GAEMH,IAAsB,MAAM;AAChC,MAAIP,EAAS,SAAS,CAACF,EAAY,UAKnCE,EAAS,QAAQ,IAAI,eAAe,CAACW,MAAY;AAC/C,cAAMC,IAAQD,EAAQ,CAAC;AAEvB,YAAI,CAACC;AACH;AAGF,cAAM,EAAE,QAAAC,MAAWD,GACbE,IAASC,EAAqBjB,EAAY,KAA4B,KAAK,SAAS,iBAEpF,EAAE,WAAWkB,EAAA,IAAmBF;AACtC,YAAIG,IAAa;AAGjB,YAAIH,MAAW,SAAS,iBAAiB;AACvC,gBAAM,EAAE,KAAAI,GAAK,QAAAC,MAAWC,EAAkBP,CAAqB,GACzD,EAAE,aAAaQ,EAAA,IAAmB;AAExC,UAAAJ,IAAa,KAAK,IAAIC,IAAMC,KAAUE,IAAiBL,IAAiB,CAAC;AAAA,QAC3E,OAAO;AACL,gBAAM,EAAE,KAAAE,GAAK,QAAAC,MAAYN,EAAuB,sBAAA,GAC1C,EAAE,KAAKS,MAAcR,EAAO,sBAAA,GAC5B,EAAE,cAAcS,EAAA,IAAiBT,GACjCU,IAAYN,IAAMI;AAExB,UAAAL,IAAa,KAAK,IAAIO,IAAYL,IAASI,GAAc,CAAC;AAAA,QAC5D;AAEA,QAAIN,KACF,sBAAsB,MAAM;AAC1B,UAAAH,EAAO,YAAYE,IAAiBC;AAAA,QACtC,CAAC;AAAA,MAEL,CAAC,GAEDjB,EAAS,MAAM,QAAQF,EAAY,KAAK;AAAA,IAC1C,GAKMiB,IAAuB,CAACU,MAAwC;AACpE,YAAMX,IAASW,EAAG;AAClB,UAAI,CAACX;AACH,eAAO;AAGT,YAAM,EAAE,WAAAY,EAAA,IAAc,iBAAiBZ,CAAM;AAC7C,aAAIY,MAAc,YACTZ,IAGLA,MAAW,SAAS,OACf,SAAS,kBAGXC,EAAqBD,CAAM;AAAA,IACpC,GAKMM,IAAoB,CAACK,MAAoB;AAC7C,YAAM,EAAE,aAAaE,GAAO,cAAcR,MAAWM;AAErD,UAAIG,IAAO,GACPV,IAAM;AAEV,YAAMW,IAAU,SAAU,EAAE,YAAAC,GAAY,WAAAN,GAAW,cAAAO,KAA6B;AAC9E,QAAAH,KAAQE,GACRZ,KAAOM,GAEHO,KACFF,EAAQE,CAA2B;AAAA,MAEvC;AAEA,aAAAF,EAAQJ,CAAE,GAEH;AAAA,QACL,KAAAP;AAAA,QACA,MAAAU;AAAA,QACA,OAAAD;AAAA,QACA,QAAAR;AAAA,MAAA;AAAA,IAEJ;AAEA,WAAAa,EAAU,YAAY;;AACpB,UAAItC,EAAM,UAAU;AAClB,cAAM,IAAI,MAAM,0DAA0D;AAG5E,UAAIN,EAAM;AACR,cAAM,IAAI,MAAM,+DAA+D;AAGjF,OACG,OAAOM,EAAM,UAAW,aAAaA,EAAM,WAC3Cc,IAAAd,EAAM,WAAN,QAAAc,EAAwC,wBAEzC,MAAMyB,EAAA,GACN1B,EAAA;AAAA,IAEJ,CAAC,GAED2B,EAAgB,MAAM;;AACpB,OAAA1B,IAAAR,EAAS,UAAT,QAAAQ,EAAgB;AAAA,IAClB,CAAC,mBAID2B,EAkCQC,GAlCRC,EAkCQ3C,GAlCY;AAAA,MAAE,OAAK,CAAC,kBAAgB,CAAU4C,EAAA9C,CAAA,EAAQ,IAAI,CAAA;AAAA,MAAG,aAAU;AAAA,IAAA;MAClE,WACT,CA0BY,EA3BQ,SAAA+C,GAAS,cAAAC,GAAc,UAAAC,QAAQ;AAAA,QACnDC,EA0BY,YA1BZL,EA0BY;AAAA,UAzBT,IAAIE;AAAA,mBACD;AAAA,UAAJ,KAAIzC;AAAA,UACH,qBAAmB0C;AAAA,UACnB,gBAAcC;AAAA,UACd,OAAK;AAAA,YAAcH,EAAA9C,CAAA,EAAQ;AAAA;;mEAA0HiD;AAAA,iGAAuHA,KAAQ,CAAK/C,EAAM;AAAA,cAAkC,YAAAA,EAAM;AAAA,cAAsC,iBAAA,CAAAA,EAAM;AAAA,cAAkC,eAAA,CAAAA,EAAM;AAAA,YAAA;AAAA;UAY3Z,WAAWA,EAAM;AAAA,UACjB,OAAOA,EAAM;AAAA,UACd,aAAU;AAAA,UACT,aAAaA,EAAM;AAAA,QAAA,GACZS,EAAA,OAAU;AAAA,UACjB,UAAUT,EAAM;AAAA,UAChB,UAAUO,EAAA;AAAA,UACV,MAAMP,EAAM;AAAA,UACZ,SAAAe;AAAA,QAAA;;;;MAGW6B,EAAAhD,CAAA,EAAM;cAAO;AAAA,cAE3B,MAAyB;AAAA,UAAzBqD,EAAyBC,EAAA,QAAA,MAAA;AAAA,QAAA;;;;;;;;;;;"}

package/dist/Thumbnail.js

@@ -1,9 +1,9 @@
-import { defineComponent as k, useCssModule as C, inject as T, computed as B, toValue as I, createElementBlock as y, openBlock as b, unref as e, normalizeClass as m, createVNode as h, createBlock as M, createCommentVNode as N, renderSlot as $, withModifiers as q, withCtx as V } from "vue";
+import { defineComponent as k, useCssModule as C, inject as T, computed as B, toValue as I, createElementBlock as y, openBlock as h, unref as t, normalizeClass as s, createVNode as d, createBlock as M, createCommentVNode as N, renderSlot as $, withModifiers as q, withCtx as V } from "vue";
 import { t as w } from "./locale.js";
 import z from "./Button.js";
 import E from "./Icon.js";
 import { _ as U } from "./Image.vue_vue_type_script_setup_true_lang-CAj0FH9h.js";
-import { T as d } from "./ThumbnailGroup.keys-EJ4qFNhx.js";
+import { T as _ } from "./ThumbnailGroup.keys-EJ4qFNhx.js";
 import { _ as j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const A = ["aria-current", "draggable"], D = /* @__PURE__ */ k({
   __name: "Thumbnail",
@@ -13,65 +13,65 @@ const A = ["aria-current", "draggable"], D = /* @__PURE__ */ k({
     variant: { default: "opaque" }
   },
   emits: ["remove", "click"],
-  setup(_, { emit: p }) {
-    const o = _, s = p, t = C(), { thumbnails: v, activeThumbnail: i, draggable: f, isDragging: r, radius: n, removable: u } = T(
-      d.key,
-      d.defaults
-    ), a = B(() => I(v).findIndex((l) => l === o.thumbnail));
+  setup(n, { emit: v }) {
+    const u = n, r = v, e = C(), { thumbnails: p, activeThumbnail: l, draggable: f, isDragging: c, radius: i, removable: o } = T(
+      _.key,
+      _.defaults
+    ), a = B(() => I(p).findIndex((m) => m === u.thumbnail));
     function g() {
-      i.value = a.value, s("click", a.value);
+      l.value = a.value, r("click", a.value);
     }
     function x() {
-      s("remove", a.value), i.value = -1;
+      r("remove", a.value), l.value = -1;
     }
-    return (l, c) => (b(), y("li", {
-      class: m(["stash-thumbnail focus-visible:outline-hidden group relative cursor-pointer", [
+    return (m, b) => (h(), y("li", {
+      class: s(["stash-thumbnail focus-visible:outline-hidden group relative cursor-pointer", [
         {
-          [e(t)["thumbnail-translucent"]]: o.variant === "translucent",
-          [e(t)["thumbnail-opaque"]]: o.variant === "opaque",
-          [e(t)["thumbnail-removable"]]: e(u),
-          [e(t)["thumbnail-circle"]]: e(n) === "circle",
-          [e(t)["thumbnail-rounded"]]: e(n) === "rounded"
+          [t(e)["thumbnail-translucent"]]: u.variant === "translucent",
+          [t(e)["thumbnail-opaque"]]: u.variant === "opaque",
+          [t(e)["thumbnail-removable"]]: t(o),
+          [t(e)["thumbnail-circle"]]: t(i) === "circle",
+          [t(e)["thumbnail-rounded"]]: t(i) === "rounded"
         }
       ]]),
-      "aria-current": e(i) === a.value,
-      draggable: e(f),
+      "aria-current": t(l) === a.value,
+      draggable: t(f),
       "data-test": "stash-thumbnail",
       tabindex: "0",
-      onClick: c[0] || (c[0] = (L) => g())
+      onClick: b[0] || (b[0] = (L) => g())
     }, [
-      h(U, {
-        class: m(["stash-thumbnail__img border-ice-200 outline-blue-500/15 transition-colors", [
-          e(t)["thumbnail-img"],
+      d(U, {
+        class: s(["stash-thumbnail__img border-ice-200 outline-blue-500/15 transition-colors", [
+          t(e)["thumbnail-img"],
           {
-            [e(t)["thumbnail-mask"]]: e(u) && e(n) !== "circle",
-            [e(t)["thumbnail-active"]]: e(i) === a.value && !e(r),
-            "group-hover:border-blue-500 group-focus-visible:border-blue-500 group-focus-visible:outline": !e(r)
+            [t(e)["thumbnail-mask"]]: t(o) && t(i) !== "circle",
+            [t(e)["thumbnail-active"]]: t(l) === a.value && !t(c),
+            "group-hover:border-blue-500 group-focus-visible:border-blue-500 group-focus-visible:outline": !t(c)
           }
         ]]),
         "data-test": "stash-thumbnail|img",
-        radius: e(n),
-        src: l.thumbnail.imageUrl,
-        alt: l.altText
+        radius: t(i),
+        src: n.thumbnail.imageUrl,
+        alt: n.altText
       }, null, 8, ["class", "radius", "src", "alt"]),
-      e(u) ? (b(), M(z, {
+      t(o) ? (h(), M(z, {
         key: 0,
-        class: m(["stash-thumbnail__remove", [e(t)["thumbnail-remove"]]]),
+        class: s(["stash-thumbnail__remove", [t(e)["thumbnail-remove"]]]),
         "data-test": "stash-thumbnail|remove",
-        "aria-label": e(w)("ll.thumbnail.removeButton", { index: a.value + 1 }),
+        "aria-label": t(w)("ll.thumbnail.removeButton", { index: a.value + 1 }),
         type: "button",
         icon: "",
         onClick: q(x, ["stop", "prevent"])
       }, {
         default: V(() => [
-          h(E, {
+          d(E, {
             name: "close",
             size: "small"
           })
         ]),
         _: 1
       }, 8, ["class", "aria-label"])) : N("", !0),
-      $(l.$slots, "hint")
+      $(m.$slots, "hint")
     ], 10, A));
   }
 }), H = {

package/dist/Thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.js","sources":["../src/components/Thumbnail/Thumbnail.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { ThumbnailDefinition, ThumbnailVariant } from './Thumbnail.types';\n\n  export * from './Thumbnail.types';\n</script>\n\n<script setup lang=\"ts\" generic=\"ThumbnailItem extends ThumbnailDefinition\">\n  import { computed, inject, toValue, useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Image from '../Image/Image.vue';\n  import { THUMBNAIL_INJECTION } from '../ThumbnailGroup/ThumbnailGroup.keys';\n\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * Thumbnail data containing and id and the image url\n       */\n      thumbnail: ThumbnailItem;\n\n      /**\n       * Thumbnail alt text for the image\n       * @default ''\n       */\n      altText?: string;\n\n      /**\n       * Whether the thumbnail has some transparency or is fully opaque\n       * @default 'opaque'\n       */\n      variant?: ThumbnailVariant;\n    }>(),\n    {\n      variant: 'opaque',\n      altText: '',\n    },\n  );\n\n  const emit = defineEmits<{\n    /**\n     * Emits when a thumbnail is removed\n     */\n    remove: [index: number];\n\n    /**\n     * Emits when a thumbnail is clicked\n     */\n    click: [index: number];\n  }>();\n\n  const classes = useCssModule();\n\n  const { thumbnails, activeThumbnail, draggable, isDragging, radius, removable } = inject(\n    THUMBNAIL_INJECTION.key,\n    THUMBNAIL_INJECTION.defaults,\n  );\n\n  const thumbnailIndex = computed(() => toValue(thumbnails).findIndex((t) => t === props.thumbnail));\n\n  function handleThumbnailClick() {\n    activeThumbnail.value = thumbnailIndex.value;\n    emit('click', thumbnailIndex.value);\n  }\n\n  function handleRemove() {\n    emit('remove', thumbnailIndex.value);\n    activeThumbnail.value = -1;\n  }\n</script>\n\n<template>\n  <li\n    class=\"stash-thumbnail focus-visible:outline-hidden group relative cursor-pointer\"\n    :class=\"[\n      {\n        [classes['thumbnail-translucent']]: props.variant === 'translucent',\n        [classes['thumbnail-opaque']]: props.variant === 'opaque',\n        [classes['thumbnail-removable']]: removable,\n        [classes['thumbnail-circle']]: radius === 'circle',\n        [classes['thumbnail-rounded']]: radius === 'rounded',\n      },\n    ]\"\n    :aria-current=\"activeThumbnail === thumbnailIndex\"\n    :draggable=\"draggable\"\n    data-test=\"stash-thumbnail\"\n    tabindex=\"0\"\n    @click=\"handleThumbnailClick()\"\n  >\n    <Image\n      class=\"stash-thumbnail__img border-ice-200 outline-blue-500/15 transition-colors\"\n      :class=\"[\n        classes['thumbnail-img'],\n        {\n          [classes['thumbnail-mask']]: removable && radius !== 'circle',\n          [classes['thumbnail-active']]: activeThumbnail === thumbnailIndex && !isDragging,\n          'group-hover:border-blue-500 group-focus-visible:border-blue-500 group-focus-visible:outline': !isDragging,\n        },\n      ]\"\n      data-test=\"stash-thumbnail|img\"\n      :radius=\"radius\"\n      :src=\"thumbnail.imageUrl\"\n      :alt=\"altText\"\n    />\n\n    <Button\n      v-if=\"removable\"\n      class=\"stash-thumbnail__remove\"\n      :class=\"[classes['thumbnail-remove']]\"\n      data-test=\"stash-thumbnail|remove\"\n      :aria-label=\"t('ll.thumbnail.removeButton', { index: thumbnailIndex + 1 })\"\n      type=\"button\"\n      icon\n      @click.stop.prevent=\"handleRemove\"\n    >\n      <Icon name=\"close\" size=\"small\" />\n    </Button>\n\n    <!-- @slot: Slot to add a hint below the image -->\n    <slot name=\"hint\" />\n  </li>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .thumbnail-remove {\n      position: absolute;\n      top: calc(--spacing(1.5) * -1);\n      right: calc(--spacing(1.5) * -1);\n      padding: 1px;\n      height: auto;\n      width: auto !important;\n      min-width: auto;\n      border-radius: calc(infinity * 1px);\n      background: var(--color-blue-500);\n      color: white;\n\n      &:hover,\n      &:focus {\n        background: var(--color-blue-600);\n      }\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .thumbnail-img {\n      border-style: solid;\n      object-fit: cover;\n      height: --spacing(12);\n      width: --spacing(12);\n      border-width: 1px;\n      outline-width: --spacing(1);\n\n      .thumbnail-translucent & {\n        opacity: var(--opacity-40);\n\n        &:hover,\n        &.thumbnail-active {\n          opacity: var(--opacity-100);\n        }\n      }\n    }\n\n    .thumbnail-active {\n      border: 1px solid var(--color-ice-500);\n    }\n\n    .thumbnail-mask {\n      mask-image: radial-gradient(circle at top right, transparent 20%, white 20.5%);\n    }\n\n    .thumbnail-full {\n      border-radius: calc(infinity * 1px);\n    }\n\n    .thumbnail-rounded {\n      border-radius: var(--radius-sm);\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","thumbnails","activeThumbnail","draggable","isDragging","radius","removable","inject","THUMBNAIL_INJECTION","thumbnailIndex","computed","toValue","t","handleThumbnailClick","handleRemove"],"mappings":";;;;;;;;;;;;;;;;AAeE,UAAMA,IAAQC,GAyBRC,IAAOC,GAYPC,IAAUC,EAAA,GAEV,EAAE,YAAAC,GAAY,iBAAAC,GAAiB,WAAAC,GAAW,YAAAC,GAAY,QAAAC,GAAQ,WAAAC,MAAcC;AAAA,MAChFC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA,GAGhBC,IAAiBC,EAAS,MAAMC,EAAQV,CAAU,EAAE,UAAU,CAACW,MAAMA,MAAMjB,EAAM,SAAS,CAAC;AAEjG,aAASkB,IAAuB;AAC9B,MAAAX,EAAgB,QAAQO,EAAe,OACvCZ,EAAK,SAASY,EAAe,KAAK;AAAA,IACpC;AAEA,aAASK,IAAe;AACtB,MAAAjB,EAAK,UAAUY,EAAe,KAAK,GACnCP,EAAgB,QAAQ;AAAA,IAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Thumbnail.js","sources":["../src/components/Thumbnail/Thumbnail.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { ThumbnailDefinition, ThumbnailVariant } from './Thumbnail.types';\n\n  export * from './Thumbnail.types';\n</script>\n\n<script setup lang=\"ts\" generic=\"ThumbnailItem extends ThumbnailDefinition\">\n  import { computed, inject, toValue, useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Image from '../Image/Image.vue';\n  import { THUMBNAIL_INJECTION } from '../ThumbnailGroup/ThumbnailGroup.keys';\n\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * Thumbnail data containing and id and the image url\n       */\n      thumbnail: ThumbnailItem;\n\n      /**\n       * Thumbnail alt text for the image\n       * @default ''\n       */\n      altText?: string;\n\n      /**\n       * Whether the thumbnail has some transparency or is fully opaque\n       * @default 'opaque'\n       */\n      variant?: ThumbnailVariant;\n    }>(),\n    {\n      variant: 'opaque',\n      altText: '',\n    },\n  );\n\n  const emit = defineEmits<{\n    /**\n     * Emits when a thumbnail is removed\n     */\n    remove: [index: number];\n\n    /**\n     * Emits when a thumbnail is clicked\n     */\n    click: [index: number];\n  }>();\n\n  const classes = useCssModule();\n\n  const { thumbnails, activeThumbnail, draggable, isDragging, radius, removable } = inject(\n    THUMBNAIL_INJECTION.key,\n    THUMBNAIL_INJECTION.defaults,\n  );\n\n  const thumbnailIndex = computed(() => toValue(thumbnails).findIndex((t) => t === props.thumbnail));\n\n  function handleThumbnailClick() {\n    activeThumbnail.value = thumbnailIndex.value;\n    emit('click', thumbnailIndex.value);\n  }\n\n  function handleRemove() {\n    emit('remove', thumbnailIndex.value);\n    activeThumbnail.value = -1;\n  }\n</script>\n\n<template>\n  <li\n    class=\"stash-thumbnail focus-visible:outline-hidden group relative cursor-pointer\"\n    :class=\"[\n      {\n        [classes['thumbnail-translucent']]: props.variant === 'translucent',\n        [classes['thumbnail-opaque']]: props.variant === 'opaque',\n        [classes['thumbnail-removable']]: removable,\n        [classes['thumbnail-circle']]: radius === 'circle',\n        [classes['thumbnail-rounded']]: radius === 'rounded',\n      },\n    ]\"\n    :aria-current=\"activeThumbnail === thumbnailIndex\"\n    :draggable=\"draggable\"\n    data-test=\"stash-thumbnail\"\n    tabindex=\"0\"\n    @click=\"handleThumbnailClick()\"\n  >\n    <Image\n      class=\"stash-thumbnail__img border-ice-200 outline-blue-500/15 transition-colors\"\n      :class=\"[\n        classes['thumbnail-img'],\n        {\n          [classes['thumbnail-mask']]: removable && radius !== 'circle',\n          [classes['thumbnail-active']]: activeThumbnail === thumbnailIndex && !isDragging,\n          'group-hover:border-blue-500 group-focus-visible:border-blue-500 group-focus-visible:outline': !isDragging,\n        },\n      ]\"\n      data-test=\"stash-thumbnail|img\"\n      :radius=\"radius\"\n      :src=\"thumbnail.imageUrl\"\n      :alt=\"altText\"\n    />\n\n    <Button\n      v-if=\"removable\"\n      class=\"stash-thumbnail__remove\"\n      :class=\"[classes['thumbnail-remove']]\"\n      data-test=\"stash-thumbnail|remove\"\n      :aria-label=\"t('ll.thumbnail.removeButton', { index: thumbnailIndex + 1 })\"\n      type=\"button\"\n      icon\n      @click.stop.prevent=\"handleRemove\"\n    >\n      <Icon name=\"close\" size=\"small\" />\n    </Button>\n\n    <!-- @slot: Slot to add a hint below the image -->\n    <slot name=\"hint\" />\n  </li>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .thumbnail-remove {\n      position: absolute;\n      top: calc(--spacing(1.5) * -1);\n      right: calc(--spacing(1.5) * -1);\n      padding: 1px;\n      height: auto;\n      width: auto !important;\n      min-width: auto;\n      border-radius: calc(infinity * 1px);\n      background: var(--color-blue-500);\n      color: white;\n\n      &:hover,\n      &:focus {\n        background: var(--color-blue-600);\n      }\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .thumbnail-img {\n      border-style: solid;\n      object-fit: cover;\n      height: --spacing(12);\n      width: --spacing(12);\n      border-width: 1px;\n      outline-width: --spacing(1);\n\n      .thumbnail-translucent & {\n        opacity: var(--opacity-40);\n\n        &:hover,\n        &.thumbnail-active {\n          opacity: var(--opacity-100);\n        }\n      }\n    }\n\n    .thumbnail-active {\n      border: 1px solid var(--color-ice-500);\n    }\n\n    .thumbnail-mask {\n      mask-image: radial-gradient(circle at top right, transparent 20%, white 20.5%);\n    }\n\n    .thumbnail-full {\n      border-radius: calc(infinity * 1px);\n    }\n\n    .thumbnail-rounded {\n      border-radius: var(--radius-sm);\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","thumbnails","activeThumbnail","draggable","isDragging","radius","removable","inject","THUMBNAIL_INJECTION","thumbnailIndex","computed","toValue","t","handleThumbnailClick","handleRemove","_createElementBlock","_unref","_createVNode","Image","_createBlock","Button","_normalizeClass","Icon","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;AAeE,UAAMA,IAAQC,GAyBRC,IAAOC,GAYPC,IAAUC,EAAA,GAEV,EAAE,YAAAC,GAAY,iBAAAC,GAAiB,WAAAC,GAAW,YAAAC,GAAY,QAAAC,GAAQ,WAAAC,MAAcC;AAAA,MAChFC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA,GAGhBC,IAAiBC,EAAS,MAAMC,EAAQV,CAAU,EAAE,UAAU,CAACW,MAAMA,MAAMjB,EAAM,SAAS,CAAC;AAEjG,aAASkB,IAAuB;AAC9B,MAAAX,EAAgB,QAAQO,EAAe,OACvCZ,EAAK,SAASY,EAAe,KAAK;AAAA,IACpC;AAEA,aAASK,IAAe;AACtB,MAAAjB,EAAK,UAAUY,EAAe,KAAK,GACnCP,EAAgB,QAAQ;AAAA,IAC1B;2BAIAa,EAgDK,MAAA;AAAA,MA/CH,UAAM,8EAA4E;AAAA;WACvDC,EAAAjB,CAAA,EAAO,uBAAA,CAAA,GAA4BJ,EAAM,YAAO;AAAA,WAA6BqB,EAAAjB,CAAA,EAAO,kBAAA,CAAA,GAAuBJ,EAAM,YAAO;AAAA,UAAwB,CAAAqB,EAAAjB,CAAA,2BAAiCiB,EAAAV,CAAA;AAAA,UAAoB,CAAAU,EAAAjB,CAAA,wBAA8BiB,EAAAX,CAAA,MAAM;AAAA,UAAwB,CAAAW,EAAAjB,CAAA,yBAA+BiB,EAAAX,CAAA,MAAM;AAAA,QAAA;AAAA;MAShU,gBAAcW,EAAAd,CAAA,MAAoBO,EAAA;AAAA,MAClC,WAAWO,EAAAb,CAAA;AAAA,MACZ,aAAU;AAAA,MACV,UAAS;AAAA,MACR,gCAAOU,EAAA;AAAA,IAAoB;MAE5BI,EAcEC,GAAA;AAAA,QAbA,UAAM,6EAA2E;AAAA,UAC/DF,EAAAjB,CAAA,EAAO,eAAA;AAAA;aAAwCiB,EAAAjB,CAAA,EAAO,gBAAA,CAAA,GAAqBiB,EAAAV,CAAA,KAAaU,EAAAX,CAAA,MAAM;AAAA,YAA0B,CAAAW,EAAAjB,CAAA,EAAO,kBAAA,CAAA,GAAuBiB,EAAAd,CAAA,MAAoBO,EAAA,UAAmBO,EAAAZ,CAAA;AAAA,4GAAsHY,EAAAZ,CAAA;AAAA,UAAA;AAAA;QAQrU,aAAU;AAAA,QACT,QAAQY,EAAAX,CAAA;AAAA,QACR,KAAKT,EAAA,UAAU;AAAA,QACf,KAAKA,EAAA;AAAA,MAAA;MAIAoB,EAAAV,CAAA,UADRa,EAWSC,GAAA;AAAA;QATP,OAAKC,EAAA,CAAC,2BAAyB,CACtBL,EAAAjB,CAAA,EAAO,kBAAA,CAAA,CAAA,CAAA;AAAA,QAChB,aAAU;AAAA,QACT,cAAYiB,EAAAJ,CAAA,EAAC,6BAAA,EAAA,OAAuCH,EAAA,QAAc,GAAA;AAAA,QACnE,MAAK;AAAA,QACL,MAAA;AAAA,QACC,WAAoBK,GAAY,CAAA,QAAA,SAAA,CAAA;AAAA,MAAA;mBAEjC,MAAkC;AAAA,UAAlCG,EAAkCK,GAAA;AAAA,YAA5B,MAAK;AAAA,YAAQ,MAAK;AAAA,UAAA;;;;MAI1BC,EAAoBC,EAAA,QAAA,MAAA;AAAA,IAAA;;;;;;;;;;;;;"}

package/dist/Thumbnail.vue.d.ts

@@ -17,7 +17,7 @@ declare const _default: <ThumbnailItem extends ThumbnailDefinition>(__VLS_props:
     slots: {
         hint?(_: {}): any;
     };
-    emit: ((evt: "click", index: number) => void) & ((evt: "remove", index: number) => void);
+    emit: ((evt: "remove", index: number) => void) & ((evt: "click", index: number) => void);
 } | undefined, __VLS_expose?: ((exposed: ShallowUnwrapRef<    {}>) => void) | undefined, __VLS_setup?: Promise<{
     props: {
         readonly onClick?: ((index: number) => any) | undefined;
@@ -31,7 +31,7 @@ declare const _default: <ThumbnailItem extends ThumbnailDefinition>(__VLS_props:
     slots: {
         hint?(_: {}): any;
     };
-    emit: ((evt: "click", index: number) => void) & ((evt: "remove", index: number) => void);
+    emit: ((evt: "remove", index: number) => void) & ((evt: "click", index: number) => void);
 }>) => VNode<RendererNode, RendererElement, {
 [key: string]: any;
 }> & {
@@ -48,7 +48,7 @@ declare const _default: <ThumbnailItem extends ThumbnailDefinition>(__VLS_props:
         slots: {
             hint?(_: {}): any;
         };
-        emit: ((evt: "click", index: number) => void) & ((evt: "remove", index: number) => void);
+        emit: ((evt: "remove", index: number) => void) & ((evt: "click", index: number) => void);
     } | undefined;
 };
 export default _default;

package/dist/ThumbnailEmpty.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailEmpty.js","sources":["../src/components/ThumbnailEmpty/ThumbnailEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n  import { THUMBNAIL_INJECTION } from '../ThumbnailGroup/ThumbnailGroup.keys';\n\n  const classes = useCssModule();\n\n  const { radius } = inject(THUMBNAIL_INJECTION.key, THUMBNAIL_INJECTION.defaults);\n</script>\n\n<template>\n  <li\n    class=\"stash-thumbnail-empty\"\n    :class=\"[\n      classes['thumbnail-empty'],\n      {\n        'rounded-full': radius === 'circle',\n        rounded: radius === 'rounded',\n      },\n    ]\"\n    data-test=\"stash-thumbnail-empty\"\n  >\n    <Icon name=\"image\" data-test=\"stash-thumbnail-empty|icon\" />\n  </li>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .thumbnail-empty {\n      height: --spacing(12);\n      width: --spacing(12);\n      border-width: 1px;\n      outline-width: --spacing(1);\n      border-style: dashed;\n      border-color: var(--colors-ice-500);\n      background-color: var(--colors-ice-100);\n      color: var(--colors-ice-700);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","radius","inject","THUMBNAIL_INJECTION"],"mappings":";;;;;;;AAME,UAAMA,IAAUC,EAAA,GAEV,EAAE,QAAAC,EAAA,IAAWC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ThumbnailEmpty.js","sources":["../src/components/ThumbnailEmpty/ThumbnailEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n  import { THUMBNAIL_INJECTION } from '../ThumbnailGroup/ThumbnailGroup.keys';\n\n  const classes = useCssModule();\n\n  const { radius } = inject(THUMBNAIL_INJECTION.key, THUMBNAIL_INJECTION.defaults);\n</script>\n\n<template>\n  <li\n    class=\"stash-thumbnail-empty\"\n    :class=\"[\n      classes['thumbnail-empty'],\n      {\n        'rounded-full': radius === 'circle',\n        rounded: radius === 'rounded',\n      },\n    ]\"\n    data-test=\"stash-thumbnail-empty\"\n  >\n    <Icon name=\"image\" data-test=\"stash-thumbnail-empty|icon\" />\n  </li>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .thumbnail-empty {\n      height: --spacing(12);\n      width: --spacing(12);\n      border-width: 1px;\n      outline-width: --spacing(1);\n      border-style: dashed;\n      border-color: var(--colors-ice-500);\n      background-color: var(--colors-ice-100);\n      color: var(--colors-ice-700);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","radius","inject","THUMBNAIL_INJECTION","_createElementBlock","_unref","_createVNode","Icon"],"mappings":";;;;;;;AAME,UAAMA,IAAUC,EAAA,GAEV,EAAE,QAAAC,EAAA,IAAWC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ;2BAI/EC,EAYK,MAAA;AAAA,MAXH,UAAM,yBAAuB;AAAA,QACbC,EAAAN,CAAA,EAAO,iBAAA;AAAA;0BAAqDM,EAAAJ,CAAA,MAAM;AAAA,mBAAgCI,EAAAJ,CAAA,MAAM;AAAA,QAAA;AAAA;MAOxH,aAAU;AAAA,IAAA;MAEVK,EAA4DC,GAAA;AAAA,QAAtD,MAAK;AAAA,QAAQ,aAAU;AAAA,MAAA;;;;;;;;"}

package/dist/ThumbnailGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailGroup.js","sources":["../src/components/ThumbnailGroup/ThumbnailGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n  import type { ThumbnailEmptyOptions, ThumbnailRadius } from './ThumbnailGroup.types';\n\n  export * from '../../composables/useSortable/useSortable';\n  export * from './ThumbnailGroup.types';\n</script>\n\n<script setup lang=\"ts\" generic=\"Thumbnail extends ThumbnailDefinition\">\n  import { computed, provide, ref } from 'vue';\n\n  import useSortable, {\n    moveSortableElements,\n    type SortableOnDragEndEvent,\n    type SortableOnDragStartEvent,\n  } from '../../composables/useSortable/useSortable';\n  import { ThumbnailDefinition } from '../Thumbnail/Thumbnail.types';\n  import ThumbnailEmpty from '../ThumbnailEmpty/ThumbnailEmpty.vue';\n  import { THUMBNAIL_INJECTION } from './ThumbnailGroup.keys';\n\n  const emit = defineEmits<{\n    /**\n     * Emits when a thumbnail starts dragging\n     */\n    dragStart: [event: SortableOnDragStartEvent];\n\n    /**\n     * Emits when a thumbnail stops dragging\n     */\n    dragEnd: [event: SortableOnDragEndEvent];\n\n    /**\n     * Emits when the thumbnails are updated\n     */\n    'update:thumbnails': [thumbnails: Thumbnail[]];\n  }>();\n\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * Enable drag and drop functionality\n       * @default false\n       */\n      draggable?: boolean;\n\n      /**\n       * Thumbnail radius. Can be 'rounded' or 'circle'\n       * @default 'rounded'\n       */\n      radius?: ThumbnailRadius;\n\n      /**\n       * Shows a close button on the thumbnail when set to true\n       * @default false\n       */\n      removable?: boolean;\n\n      /**\n       * Shows empty thumbnails when set to true\n       */\n      showEmpty?: boolean;\n\n      /**\n       * Empty thumbnail options. Only applicable when `showEmpty` is true\n       * @default { max: 6 }\n       */\n      emptyOptions?: ThumbnailEmptyOptions;\n\n      /**\n       * List of thumbnails to display\n       * @default []\n       */\n      thumbnails?: Thumbnail[];\n    }>(),\n    {\n      thumbnails: () => [],\n      draggable: false,\n      radius: 'rounded',\n      variant: 'opaque',\n      removable: false,\n      showEmpty: false,\n      emptyOptions: () => ({ max: 6 }),\n    },\n  );\n\n  /**\n   * The active thumbnail index\n   */\n  const activeThumbnail = defineModel<number>('activeThumbnail', {\n    default: -1,\n  });\n\n  const internalThumbnails = computed({\n    get() {\n      return props.thumbnails;\n    },\n    set(value) {\n      emit('update:thumbnails', value);\n    },\n  });\n\n  const thumbnailRef = ref<HTMLElement | null>(null);\n  const { isDragging } = useSortable({\n    ref: thumbnailRef,\n    list: internalThumbnails,\n    isEnabled: props.draggable,\n    ghostClass: 'thumbnail-ghost',\n    chosenClass: 'thumbnail-chosen',\n    sortInPlace: false,\n    onDragStart: (e) => emit('dragStart', e),\n    onDragEnd: (e) => {\n      activeThumbnail.value = e.newIndex;\n      moveSortableElements({ list: internalThumbnails, from: e.oldIndex, to: e.newIndex });\n      emit('dragEnd', e);\n    },\n  });\n\n  const emptyThumbnailsCount = computed(() => {\n    if (!props.showEmpty) return 0;\n\n    const { max } = props.emptyOptions || {};\n\n    return internalThumbnails.value.length < max ? max - internalThumbnails.value.length : 0;\n  });\n\n  provide(\n    THUMBNAIL_INJECTION.key,\n    Object.freeze({\n      draggable: computed(() => props.draggable),\n      removable: computed(() => props.removable),\n      thumbnails: internalThumbnails,\n      radius: props.radius,\n      activeThumbnail,\n      isDragging,\n    }),\n  );\n</script>\n\n<template>\n  <ul ref=\"thumbnailRef\" class=\"stash-thumbnail-group flex flex-wrap gap-3\" data-test=\"stash-thumbnail-group\">\n    <slot v-bind=\"{ activeThumbnail, isDragging }\"></slot>\n\n    <ThumbnailEmpty v-for=\"(_, index) in emptyThumbnailsCount\" :key=\"`empty_thumb_${index}`\" />\n  </ul>\n</template>\n\n<style>\n  @layer utilities {\n    .thumbnail-ghost {\n      .stash-thumbnail-item__img {\n        border: 1px solid var(--color-blue-500);\n        mask-image: none !important;\n        box-shadow: var(--shadow-sm);\n      }\n\n      .stash-thumbnail-item__remove {\n        opacity: 0;\n      }\n    }\n  }\n</style>\n\n<style scoped>\n  @layer utilities {\n    :deep(.thumbnail-chosen) {\n      opacity: 0 !important;\n    }\n  }\n</style>\n"],"names":["emit","__emit","props","__props","activeThumbnail","_useModel","internalThumbnails","computed","value","thumbnailRef","ref","isDragging","useSortable","moveSortableElements","emptyThumbnailsCount","max","provide","THUMBNAIL_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBE,UAAMA,IAAOC,GAiBPC,IAAQC,GAmDRC,IAAkBC,EAAmBF,GAAC,iBAE3C,GAEKG,IAAqBC,EAAS;AAAA,MAClC,MAAM;AACJ,eAAOL,EAAM;AAAA,MACf;AAAA,MACA,IAAIM,GAAO;AACT,QAAAR,EAAK,qBAAqBQ,CAAK;AAAA,MACjC;AAAA,IAAA,CACD,GAEKC,IAAeC,EAAwB,IAAI,GAC3C,EAAE,YAAAC,EAAA,IAAeC,EAAY;AAAA,MACjC,KAAKH;AAAA,MACL,MAAMH;AAAA,MACN,WAAWJ,EAAM;AAAA,MACjB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa,CAAC,MAAMF,EAAK,aAAa,CAAC;AAAA,MACvC,WAAW,CAAC,MAAM;AAChB,QAAAI,EAAgB,QAAQ,EAAE,UAC1BS,EAAqB,EAAE,MAAMP,GAAoB,MAAM,EAAE,UAAU,IAAI,EAAE,UAAU,GACnFN,EAAK,WAAW,CAAC;AAAA,MACnB;AAAA,IAAA,CACD,GAEKc,IAAuBP,EAAS,MAAM;AAC1C,UAAI,CAACL,EAAM,UAAW,QAAO;AAE7B,YAAM,EAAE,KAAAa,EAAA,IAAQb,EAAM,gBAAgB,CAAA;AAEtC,aAAOI,EAAmB,MAAM,SAASS,IAAMA,IAAMT,EAAmB,MAAM,SAAS;AAAA,IACzF,CAAC;AAED,WAAAU;AAAA,MACEC,EAAoB;AAAA,MACpB,OAAO,OAAO;AAAA,QACZ,WAAWV,EAAS,MAAML,EAAM,SAAS;AAAA,QACzC,WAAWK,EAAS,MAAML,EAAM,SAAS;AAAA,QACzC,YAAYI;AAAA,QACZ,QAAQJ,EAAM;AAAA,QACd,iBAAAE;AAAA,QACA,YAAAO;AAAA,MAAA,CACD;AAAA,IAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"ThumbnailGroup.js","sources":["../src/components/ThumbnailGroup/ThumbnailGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n  import type { ThumbnailEmptyOptions, ThumbnailRadius } from './ThumbnailGroup.types';\n\n  export * from '../../composables/useSortable/useSortable';\n  export * from './ThumbnailGroup.types';\n</script>\n\n<script setup lang=\"ts\" generic=\"Thumbnail extends ThumbnailDefinition\">\n  import { computed, provide, ref } from 'vue';\n\n  import useSortable, {\n    moveSortableElements,\n    type SortableOnDragEndEvent,\n    type SortableOnDragStartEvent,\n  } from '../../composables/useSortable/useSortable';\n  import { ThumbnailDefinition } from '../Thumbnail/Thumbnail.types';\n  import ThumbnailEmpty from '../ThumbnailEmpty/ThumbnailEmpty.vue';\n  import { THUMBNAIL_INJECTION } from './ThumbnailGroup.keys';\n\n  const emit = defineEmits<{\n    /**\n     * Emits when a thumbnail starts dragging\n     */\n    dragStart: [event: SortableOnDragStartEvent];\n\n    /**\n     * Emits when a thumbnail stops dragging\n     */\n    dragEnd: [event: SortableOnDragEndEvent];\n\n    /**\n     * Emits when the thumbnails are updated\n     */\n    'update:thumbnails': [thumbnails: Thumbnail[]];\n  }>();\n\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * Enable drag and drop functionality\n       * @default false\n       */\n      draggable?: boolean;\n\n      /**\n       * Thumbnail radius. Can be 'rounded' or 'circle'\n       * @default 'rounded'\n       */\n      radius?: ThumbnailRadius;\n\n      /**\n       * Shows a close button on the thumbnail when set to true\n       * @default false\n       */\n      removable?: boolean;\n\n      /**\n       * Shows empty thumbnails when set to true\n       */\n      showEmpty?: boolean;\n\n      /**\n       * Empty thumbnail options. Only applicable when `showEmpty` is true\n       * @default { max: 6 }\n       */\n      emptyOptions?: ThumbnailEmptyOptions;\n\n      /**\n       * List of thumbnails to display\n       * @default []\n       */\n      thumbnails?: Thumbnail[];\n    }>(),\n    {\n      thumbnails: () => [],\n      draggable: false,\n      radius: 'rounded',\n      variant: 'opaque',\n      removable: false,\n      showEmpty: false,\n      emptyOptions: () => ({ max: 6 }),\n    },\n  );\n\n  /**\n   * The active thumbnail index\n   */\n  const activeThumbnail = defineModel<number>('activeThumbnail', {\n    default: -1,\n  });\n\n  const internalThumbnails = computed({\n    get() {\n      return props.thumbnails;\n    },\n    set(value) {\n      emit('update:thumbnails', value);\n    },\n  });\n\n  const thumbnailRef = ref<HTMLElement | null>(null);\n  const { isDragging } = useSortable({\n    ref: thumbnailRef,\n    list: internalThumbnails,\n    isEnabled: props.draggable,\n    ghostClass: 'thumbnail-ghost',\n    chosenClass: 'thumbnail-chosen',\n    sortInPlace: false,\n    onDragStart: (e) => emit('dragStart', e),\n    onDragEnd: (e) => {\n      activeThumbnail.value = e.newIndex;\n      moveSortableElements({ list: internalThumbnails, from: e.oldIndex, to: e.newIndex });\n      emit('dragEnd', e);\n    },\n  });\n\n  const emptyThumbnailsCount = computed(() => {\n    if (!props.showEmpty) return 0;\n\n    const { max } = props.emptyOptions || {};\n\n    return internalThumbnails.value.length < max ? max - internalThumbnails.value.length : 0;\n  });\n\n  provide(\n    THUMBNAIL_INJECTION.key,\n    Object.freeze({\n      draggable: computed(() => props.draggable),\n      removable: computed(() => props.removable),\n      thumbnails: internalThumbnails,\n      radius: props.radius,\n      activeThumbnail,\n      isDragging,\n    }),\n  );\n</script>\n\n<template>\n  <ul ref=\"thumbnailRef\" class=\"stash-thumbnail-group flex flex-wrap gap-3\" data-test=\"stash-thumbnail-group\">\n    <slot v-bind=\"{ activeThumbnail, isDragging }\"></slot>\n\n    <ThumbnailEmpty v-for=\"(_, index) in emptyThumbnailsCount\" :key=\"`empty_thumb_${index}`\" />\n  </ul>\n</template>\n\n<style>\n  @layer utilities {\n    .thumbnail-ghost {\n      .stash-thumbnail-item__img {\n        border: 1px solid var(--color-blue-500);\n        mask-image: none !important;\n        box-shadow: var(--shadow-sm);\n      }\n\n      .stash-thumbnail-item__remove {\n        opacity: 0;\n      }\n    }\n  }\n</style>\n\n<style scoped>\n  @layer utilities {\n    :deep(.thumbnail-chosen) {\n      opacity: 0 !important;\n    }\n  }\n</style>\n"],"names":["emit","__emit","props","__props","activeThumbnail","_useModel","internalThumbnails","computed","value","thumbnailRef","ref","isDragging","useSortable","moveSortableElements","emptyThumbnailsCount","max","provide","THUMBNAIL_INJECTION","_createElementBlock","_renderSlot","_ctx","_normalizeProps","_guardReactiveProps","_unref","_openBlock","_Fragment","_renderList","_","index","_createBlock","ThumbnailEmpty"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBE,UAAMA,IAAOC,GAiBPC,IAAQC,GAmDRC,IAAkBC,EAAmBF,GAAC,iBAE3C,GAEKG,IAAqBC,EAAS;AAAA,MAClC,MAAM;AACJ,eAAOL,EAAM;AAAA,MACf;AAAA,MACA,IAAIM,GAAO;AACT,QAAAR,EAAK,qBAAqBQ,CAAK;AAAA,MACjC;AAAA,IAAA,CACD,GAEKC,IAAeC,EAAwB,IAAI,GAC3C,EAAE,YAAAC,EAAA,IAAeC,EAAY;AAAA,MACjC,KAAKH;AAAA,MACL,MAAMH;AAAA,MACN,WAAWJ,EAAM;AAAA,MACjB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa,CAAC,MAAMF,EAAK,aAAa,CAAC;AAAA,MACvC,WAAW,CAAC,MAAM;AAChB,QAAAI,EAAgB,QAAQ,EAAE,UAC1BS,EAAqB,EAAE,MAAMP,GAAoB,MAAM,EAAE,UAAU,IAAI,EAAE,UAAU,GACnFN,EAAK,WAAW,CAAC;AAAA,MACnB;AAAA,IAAA,CACD,GAEKc,IAAuBP,EAAS,MAAM;AAC1C,UAAI,CAACL,EAAM,UAAW,QAAO;AAE7B,YAAM,EAAE,KAAAa,EAAA,IAAQb,EAAM,gBAAgB,CAAA;AAEtC,aAAOI,EAAmB,MAAM,SAASS,IAAMA,IAAMT,EAAmB,MAAM,SAAS;AAAA,IACzF,CAAC;AAED,WAAAU;AAAA,MACEC,EAAoB;AAAA,MACpB,OAAO,OAAO;AAAA,QACZ,WAAWV,EAAS,MAAML,EAAM,SAAS;AAAA,QACzC,WAAWK,EAAS,MAAML,EAAM,SAAS;AAAA,QACzC,YAAYI;AAAA,QACZ,QAAQJ,EAAM;AAAA,QACd,iBAAAE;AAAA,QACA,YAAAO;AAAA,MAAA,CACD;AAAA,IAAA,mBAKHO,EAIK,MAAA;AAAA,eAJG;AAAA,MAAJ,KAAIT;AAAA,MAAe,OAAM;AAAA,MAA6C,aAAU;AAAA,IAAA;MAClFU,EAAsDC,EAAA,QAAA,WAAAC,EAAAC,EAAA,EAAA,iBAAtClB,EAAA,OAAe,YAAEmB,EAAAZ,CAAA,EAAA,CAAU,CAAA,GAAA,QAAA,EAAA;AAAA,OAE3Ca,EAAA,EAAA,GAAAN,EAA2FO,GAAA,MAAAC,EAAtDZ,EAAA,OAAoB,CAAjCa,GAAGC,YAA3BC,EAA2FC,GAAA;AAAA,QAA/B,oBAAoBF,CAAK;AAAA,MAAA;;;;"}

package/dist/Timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.js","sources":["../src/components/Timeline/Timeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, provide } from 'vue';\n\n  import { SpacingDensities } from '../../../types/misc';\n  import { TIMELINE_INJECTION } from './keys';\n\n  export interface TimelineProps {\n    /**\n     * Sets which side of the timeline the main and opposed content is going to be displayed.\n     */\n    side?: 'start' | 'end';\n\n    /**\n     * Sets the size of each timeline item.\n     */\n    density?: SpacingDensities;\n  }\n\n  const props = withDefaults(defineProps<TimelineProps>(), {\n    side: 'end',\n    density: 'comfortable',\n  });\n\n  provide(TIMELINE_INJECTION.key, {\n    side: computed(() => props.side),\n    density: computed(() => props.density),\n  });\n</script>\n\n<template>\n  <ol\n    class=\"stash-timeline grid grid-flow-dense items-start justify-center gap-x-3 gap-y-1.5\"\n    :class=\"[`stash-timeline--${props.side}`, `stash-timeline--${props.density}`]\"\n    data-test=\"stash-timeline\"\n  >\n    <slot></slot>\n  </ol>\n</template>\n\n<style scoped>\n  @layer utilities {\n    .stash-timeline {\n      grid-template-columns: auto min-content auto;\n    }\n  }\n</style>\n"],"names":["props","__props","provide","TIMELINE_INJECTION","computed"],"mappings":";;;;;;;;;;AAkBE,UAAMA,IAAQC;AAKd,WAAAC,EAAQC,EAAmB,KAAK;AAAA,MAC9B,MAAMC,EAAS,MAAMJ,EAAM,IAAI;AAAA,MAC/B,SAASI,EAAS,MAAMJ,EAAM,OAAO;AAAA,IAAA,CACtC;;;;;;;;"}
+{"version":3,"file":"Timeline.js","sources":["../src/components/Timeline/Timeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, provide } from 'vue';\n\n  import { SpacingDensities } from '../../../types/misc';\n  import { TIMELINE_INJECTION } from './keys';\n\n  export interface TimelineProps {\n    /**\n     * Sets which side of the timeline the main and opposed content is going to be displayed.\n     */\n    side?: 'start' | 'end';\n\n    /**\n     * Sets the size of each timeline item.\n     */\n    density?: SpacingDensities;\n  }\n\n  const props = withDefaults(defineProps<TimelineProps>(), {\n    side: 'end',\n    density: 'comfortable',\n  });\n\n  provide(TIMELINE_INJECTION.key, {\n    side: computed(() => props.side),\n    density: computed(() => props.density),\n  });\n</script>\n\n<template>\n  <ol\n    class=\"stash-timeline grid grid-flow-dense items-start justify-center gap-x-3 gap-y-1.5\"\n    :class=\"[`stash-timeline--${props.side}`, `stash-timeline--${props.density}`]\"\n    data-test=\"stash-timeline\"\n  >\n    <slot></slot>\n  </ol>\n</template>\n\n<style scoped>\n  @layer utilities {\n    .stash-timeline {\n      grid-template-columns: auto min-content auto;\n    }\n  }\n</style>\n"],"names":["props","__props","provide","TIMELINE_INJECTION","computed","_createElementBlock","_normalizeClass","_renderSlot","_ctx"],"mappings":";;;;;;;;;;AAkBE,UAAMA,IAAQC;AAKd,WAAAC,EAAQC,EAAmB,KAAK;AAAA,MAC9B,MAAMC,EAAS,MAAMJ,EAAM,IAAI;AAAA,MAC/B,SAASI,EAAS,MAAMJ,EAAM,OAAO;AAAA,IAAA,CACtC,mBAIDK,EAMK,MAAA;AAAA,MALH,OAAKC,EAAA,CAAC,oFAAkF,CAAA,mBAC5DN,EAAM,IAAI,IAAA,mBAAuBA,EAAM,OAAO,EAAA,CAAA,CAAA;AAAA,MAC1E,aAAU;AAAA,IAAA;MAEVO,EAAaC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,IAAA;;;"}

package/dist/TimelineItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.js","sources":["../src/components/TimelineItem/TimelineItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject } from 'vue';\n\n  import { TIMELINE_INJECTION } from '../Timeline/keys';\n\n  const slots = defineSlots<{\n    /**\n     * The opposite content of the timeline item.\n     */\n    opposite?: () => Record<string, never>;\n\n    /**\n     * The default content of the timeline item.\n     */\n    default: () => Record<string, never>;\n  }>();\n\n  const timelineInjection = inject(TIMELINE_INJECTION.key);\n\n  if (!timelineInjection) {\n    throw Error('The TimelineItem component must be a child of the Timeline component.');\n  }\n\n  const { density, side } = timelineInjection;\n\n  const sideClasses = computed(() => {\n    return {\n      main: {\n        'col-start-3': side.value === 'end',\n        'col-end-2': side.value === 'start',\n      },\n      opposite: {\n        'col-end-2': side.value === 'end',\n        'col-start-3': side.value === 'start',\n      },\n    };\n  });\n\n  const contentDensity = computed(() => ({\n    'mb-3': density.value === 'compact',\n    'mb-6': density.value === 'comfortable',\n  }));\n</script>\n\n<template>\n  <li class=\"stash-timeline-item group contents list-none\" data-test=\"stash-timeline-item\">\n    <div\n      class=\"stash-timeline-item__main-content\"\n      :class=\"[sideClasses.main, contentDensity]\"\n      data-test=\"stash-timeline-item|content\"\n    >\n      <slot></slot>\n    </div>\n\n    <div\n      class=\"stash-timeline-separator col-start-2 col-end-3 flex h-full flex-col items-center\"\n      data-test=\"stash-timeline-separator\"\n    >\n      <div class=\"mt-[5px] rounded-full bg-ice-500 p-1.5\"></div>\n      <div class=\"w-[2px] flex-1 bg-ice-500\"></div>\n    </div>\n\n    <div\n      v-if=\"slots.opposite\"\n      class=\"stash-timeline-item__opposite-content\"\n      :class=\"[sideClasses.opposite, contentDensity]\"\n      data-test=\"stash-timeline-item|opposite-content\"\n    >\n      <slot name=\"opposite\"></slot>\n    </div>\n  </li>\n</template>\n"],"names":["slots","_useSlots","timelineInjection","inject","TIMELINE_INJECTION","density","side","sideClasses","computed","contentDensity"],"mappings":";;;;;;;;AAKE,UAAMA,IAAQC,EAAA,GAYRC,IAAoBC,EAAOC,EAAmB,GAAG;AAEvD,QAAI,CAACF;AACH,YAAM,MAAM,uEAAuE;AAGrF,UAAM,EAAE,SAAAG,GAAS,MAAAC,EAAA,IAASJ,GAEpBK,IAAcC,EAAS,OACpB;AAAA,MACL,MAAM;AAAA,QACJ,eAAeF,EAAK,UAAU;AAAA,QAC9B,aAAaA,EAAK,UAAU;AAAA,MAAA;AAAA,MAE9B,UAAU;AAAA,QACR,aAAaA,EAAK,UAAU;AAAA,QAC5B,eAAeA,EAAK,UAAU;AAAA,MAAA;AAAA,IAChC,EAEH,GAEKG,IAAiBD,EAAS,OAAO;AAAA,MACrC,QAAQH,EAAQ,UAAU;AAAA,MAC1B,QAAQA,EAAQ,UAAU;AAAA,IAAA,EAC1B;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TimelineItem.js","sources":["../src/components/TimelineItem/TimelineItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject } from 'vue';\n\n  import { TIMELINE_INJECTION } from '../Timeline/keys';\n\n  const slots = defineSlots<{\n    /**\n     * The opposite content of the timeline item.\n     */\n    opposite?: () => Record<string, never>;\n\n    /**\n     * The default content of the timeline item.\n     */\n    default: () => Record<string, never>;\n  }>();\n\n  const timelineInjection = inject(TIMELINE_INJECTION.key);\n\n  if (!timelineInjection) {\n    throw Error('The TimelineItem component must be a child of the Timeline component.');\n  }\n\n  const { density, side } = timelineInjection;\n\n  const sideClasses = computed(() => {\n    return {\n      main: {\n        'col-start-3': side.value === 'end',\n        'col-end-2': side.value === 'start',\n      },\n      opposite: {\n        'col-end-2': side.value === 'end',\n        'col-start-3': side.value === 'start',\n      },\n    };\n  });\n\n  const contentDensity = computed(() => ({\n    'mb-3': density.value === 'compact',\n    'mb-6': density.value === 'comfortable',\n  }));\n</script>\n\n<template>\n  <li class=\"stash-timeline-item group contents list-none\" data-test=\"stash-timeline-item\">\n    <div\n      class=\"stash-timeline-item__main-content\"\n      :class=\"[sideClasses.main, contentDensity]\"\n      data-test=\"stash-timeline-item|content\"\n    >\n      <slot></slot>\n    </div>\n\n    <div\n      class=\"stash-timeline-separator col-start-2 col-end-3 flex h-full flex-col items-center\"\n      data-test=\"stash-timeline-separator\"\n    >\n      <div class=\"mt-[5px] rounded-full bg-ice-500 p-1.5\"></div>\n      <div class=\"w-[2px] flex-1 bg-ice-500\"></div>\n    </div>\n\n    <div\n      v-if=\"slots.opposite\"\n      class=\"stash-timeline-item__opposite-content\"\n      :class=\"[sideClasses.opposite, contentDensity]\"\n      data-test=\"stash-timeline-item|opposite-content\"\n    >\n      <slot name=\"opposite\"></slot>\n    </div>\n  </li>\n</template>\n"],"names":["slots","_useSlots","timelineInjection","inject","TIMELINE_INJECTION","density","side","sideClasses","computed","contentDensity","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_renderSlot","_ctx"],"mappings":";;;;;;;;AAKE,UAAMA,IAAQC,EAAA,GAYRC,IAAoBC,EAAOC,EAAmB,GAAG;AAEvD,QAAI,CAACF;AACH,YAAM,MAAM,uEAAuE;AAGrF,UAAM,EAAE,SAAAG,GAAS,MAAAC,EAAA,IAASJ,GAEpBK,IAAcC,EAAS,OACpB;AAAA,MACL,MAAM;AAAA,QACJ,eAAeF,EAAK,UAAU;AAAA,QAC9B,aAAaA,EAAK,UAAU;AAAA,MAAA;AAAA,MAE9B,UAAU;AAAA,QACR,aAAaA,EAAK,UAAU;AAAA,QAC5B,eAAeA,EAAK,UAAU;AAAA,MAAA;AAAA,IAChC,EAEH,GAEKG,IAAiBD,EAAS,OAAO;AAAA,MACrC,QAAQH,EAAQ,UAAU;AAAA,MAC1B,QAAQA,EAAQ,UAAU;AAAA,IAAA,EAC1B;sBAIFK,EAAA,GAAAC,EAyBK,MAzBLC,GAyBK;AAAA,MAxBHC,EAMM,OAAA;AAAA,QALJ,UAAM,qCAAmC,CAChCN,QAAY,MAAME,EAAA,KAAc,CAAA,CAAA;AAAA,QACzC,aAAU;AAAA,MAAA;QAEVK,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;sBAGfF,EAMM,OAAA;AAAA,QALJ,OAAM;AAAA,QACN,aAAU;AAAA,MAAA;QAEVA,EAA0D,OAAA,EAArD,OAAM,0CAAwC;AAAA,QACnDA,EAA6C,OAAA,EAAxC,OAAM,6BAA2B;AAAA,MAAA;MAIhCb,EAAM,iBADdW,EAOM,OAAA;AAAA;QALJ,UAAM,yCAAuC,CACpCJ,QAAY,UAAUE,EAAA,KAAc,CAAA,CAAA;AAAA,QAC7C,aAAU;AAAA,MAAA;QAEVK,EAA6BC,EAAA,QAAA,UAAA;AAAA,MAAA;;;;"}

package/dist/Toast.js

@@ -15,7 +15,7 @@ const {
 } = Object;
 let {
   freeze: S,
-  seal: L,
+  seal: O,
   create: Rt
 } = Object, {
   apply: ve,
@@ -24,7 +24,7 @@ let {
 S || (S = function(n) {
   return n;
 });
-L || (L = function(n) {
+O || (O = function(n) {
   return n;
 });
 ve || (ve = function(n, r, s) {
@@ -55,8 +55,8 @@ function l(a, n) {
   for (; s--; ) {
     let u = n[s];
     if (typeof u == "string") {
-      const N = r(u);
-      N !== u && (an(n) || (n[s] = N), u = N);
+      const L = r(u);
+      L !== u && (an(n) || (n[s] = L), u = L);
     }
     a[u] = !0;
   }
@@ -89,13 +89,13 @@ function K(a, n) {
   }
   return r;
 }
-const _t = S(["a", "abbr", "acronym", "address", "area", "article", "aside", "audio", "b", "bdi", "bdo", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "decorator", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "element", "em", "fieldset", "figcaption", "figure", "font", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "img", "input", "ins", "kbd", "label", "legend", "li", "main", "map", "mark", "marquee", "menu", "menuitem", "meter", "nav", "nobr", "ol", "optgroup", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "section", "select", "shadow", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "tr", "track", "tt", "u", "ul", "var", "video", "wbr"]), Me = S(["svg", "a", "altglyph", "altglyphdef", "altglyphitem", "animatecolor", "animatemotion", "animatetransform", "circle", "clippath", "defs", "desc", "ellipse", "filter", "font", "g", "glyph", "glyphref", "hkern", "image", "line", "lineargradient", "marker", "mask", "metadata", "mpath", "path", "pattern", "polygon", "polyline", "radialgradient", "rect", "stop", "style", "switch", "symbol", "text", "textpath", "title", "tref", "tspan", "view", "vkern"]), Ce = S(["feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence"]), _n = S(["animate", "color-profile", "cursor", "discard", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignobject", "hatch", "hatchpath", "mesh", "meshgradient", "meshpatch", "meshrow", "missing-glyph", "script", "set", "solidcolor", "unknown", "use"]), we = S(["math", "menclose", "merror", "mfenced", "mfrac", "mglyph", "mi", "mlabeledtr", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msup", "msubsup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "mprescripts"]), Tn = S(["maction", "maligngroup", "malignmark", "mlongdiv", "mscarries", "mscarry", "msgroup", "mstack", "msline", "msrow", "semantics", "annotation", "annotation-xml", "mprescripts", "none"]), Tt = S(["#text"]), Et = S(["accept", "action", "align", "alt", "autocapitalize", "autocomplete", "autopictureinpicture", "autoplay", "background", "bgcolor", "border", "capture", "cellpadding", "cellspacing", "checked", "cite", "class", "clear", "color", "cols", "colspan", "controls", "controlslist", "coords", "crossorigin", "datetime", "decoding", "default", "dir", "disabled", "disablepictureinpicture", "disableremoteplayback", "download", "draggable", "enctype", "enterkeyhint", "face", "for", "headers", "height", "hidden", "high", "href", "hreflang", "id", "inputmode", "integrity", "ismap", "kind", "label", "lang", "list", "loading", "loop", "low", "max", "maxlength", "media", "method", "min", "minlength", "multiple", "muted", "name", "nonce", "noshade", "novalidate", "nowrap", "open", "optimum", "pattern", "placeholder", "playsinline", "popover", "popovertarget", "popovertargetaction", "poster", "preload", "pubdate", "radiogroup", "readonly", "rel", "required", "rev", "reversed", "role", "rows", "rowspan", "spellcheck", "scope", "selected", "shape", "size", "sizes", "span", "srclang", "start", "src", "srcset", "step", "style", "summary", "tabindex", "title", "translate", "type", "usemap", "valign", "value", "width", "wrap", "xmlns", "slot"]), xe = S(["accent-height", "accumulate", "additive", "alignment-baseline", "amplitude", "ascent", "attributename", "attributetype", "azimuth", "basefrequency", "baseline-shift", "begin", "bias", "by", "class", "clip", "clippathunits", "clip-path", "clip-rule", "color", "color-interpolation", "color-interpolation-filters", "color-profile", "color-rendering", "cx", "cy", "d", "dx", "dy", "diffuseconstant", "direction", "display", "divisor", "dur", "edgemode", "elevation", "end", "exponent", "fill", "fill-opacity", "fill-rule", "filter", "filterunits", "flood-color", "flood-opacity", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", "font-weight", "fx", "fy", "g1", "g2", "glyph-name", "glyphref", "gradientunits", "gradienttransform", "height", "href", "id", "image-rendering", "in", "in2", "intercept", "k", "k1", "k2", "k3", "k4", "kerning", "keypoints", "keysplines", "keytimes", "lang", "lengthadjust", "letter-spacing", "kernelmatrix", "kernelunitlength", "lighting-color", "local", "marker-end", "marker-mid", "marker-start", "markerheight", "markerunits", "markerwidth", "maskcontentunits", "maskunits", "max", "mask", "media", "method", "mode", "min", "name", "numoctaves", "offset", "operator", "opacity", "order", "orient", "orientation", "origin", "overflow", "paint-order", "path", "pathlength", "patterncontentunits", "patterntransform", "patternunits", "points", "preservealpha", "preserveaspectratio", "primitiveunits", "r", "rx", "ry", "radius", "refx", "refy", "repeatcount", "repeatdur", "restart", "result", "rotate", "scale", "seed", "shape-rendering", "slope", "specularconstant", "specularexponent", "spreadmethod", "startoffset", "stddeviation", "stitchtiles", "stop-color", "stop-opacity", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke", "stroke-width", "style", "surfacescale", "systemlanguage", "tabindex", "tablevalues", "targetx", "targety", "transform", "transform-origin", "text-anchor", "text-decoration", "text-rendering", "textlength", "type", "u1", "u2", "unicode", "values", "viewbox", "visibility", "version", "vert-adv-y", "vert-origin-x", "vert-origin-y", "width", "word-spacing", "wrap", "writing-mode", "xchannelselector", "ychannelselector", "x", "x1", "x2", "xmlns", "y", "y1", "y2", "z", "zoomandpan"]), gt = S(["accent", "accentunder", "align", "bevelled", "close", "columnsalign", "columnlines", "columnspan", "denomalign", "depth", "dir", "display", "displaystyle", "encoding", "fence", "frame", "height", "href", "id", "largeop", "length", "linethickness", "lspace", "lquote", "mathbackground", "mathcolor", "mathsize", "mathvariant", "maxsize", "minsize", "movablelimits", "notation", "numalign", "open", "rowalign", "rowlines", "rowspacing", "rowspan", "rspace", "rquote", "scriptlevel", "scriptminsize", "scriptsizemultiplier", "selection", "separator", "separators", "stretchy", "subscriptshift", "supscriptshift", "symmetric", "voffset", "width", "xmlns"]), fe = S(["xlink:href", "xml:id", "xlink:title", "xml:space", "xmlns:xlink"]), En = L(/\{\{[\w\W]*|[\w\W]*\}\}/gm), gn = L(/<%[\w\W]*|[\w\W]*%>/gm), hn = L(/\$\{[\w\W]*/gm), An = L(/^data-[\-\w.\u00B7-\uFFFF]+$/), Sn = L(/^aria-[\-\w]+$/), yt = L(
+const _t = S(["a", "abbr", "acronym", "address", "area", "article", "aside", "audio", "b", "bdi", "bdo", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "decorator", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "element", "em", "fieldset", "figcaption", "figure", "font", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "img", "input", "ins", "kbd", "label", "legend", "li", "main", "map", "mark", "marquee", "menu", "menuitem", "meter", "nav", "nobr", "ol", "optgroup", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "section", "select", "shadow", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "tr", "track", "tt", "u", "ul", "var", "video", "wbr"]), Me = S(["svg", "a", "altglyph", "altglyphdef", "altglyphitem", "animatecolor", "animatemotion", "animatetransform", "circle", "clippath", "defs", "desc", "ellipse", "filter", "font", "g", "glyph", "glyphref", "hkern", "image", "line", "lineargradient", "marker", "mask", "metadata", "mpath", "path", "pattern", "polygon", "polyline", "radialgradient", "rect", "stop", "style", "switch", "symbol", "text", "textpath", "title", "tref", "tspan", "view", "vkern"]), Ce = S(["feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence"]), _n = S(["animate", "color-profile", "cursor", "discard", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignobject", "hatch", "hatchpath", "mesh", "meshgradient", "meshpatch", "meshrow", "missing-glyph", "script", "set", "solidcolor", "unknown", "use"]), we = S(["math", "menclose", "merror", "mfenced", "mfrac", "mglyph", "mi", "mlabeledtr", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msup", "msubsup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "mprescripts"]), Tn = S(["maction", "maligngroup", "malignmark", "mlongdiv", "mscarries", "mscarry", "msgroup", "mstack", "msline", "msrow", "semantics", "annotation", "annotation-xml", "mprescripts", "none"]), Tt = S(["#text"]), Et = S(["accept", "action", "align", "alt", "autocapitalize", "autocomplete", "autopictureinpicture", "autoplay", "background", "bgcolor", "border", "capture", "cellpadding", "cellspacing", "checked", "cite", "class", "clear", "color", "cols", "colspan", "controls", "controlslist", "coords", "crossorigin", "datetime", "decoding", "default", "dir", "disabled", "disablepictureinpicture", "disableremoteplayback", "download", "draggable", "enctype", "enterkeyhint", "face", "for", "headers", "height", "hidden", "high", "href", "hreflang", "id", "inputmode", "integrity", "ismap", "kind", "label", "lang", "list", "loading", "loop", "low", "max", "maxlength", "media", "method", "min", "minlength", "multiple", "muted", "name", "nonce", "noshade", "novalidate", "nowrap", "open", "optimum", "pattern", "placeholder", "playsinline", "popover", "popovertarget", "popovertargetaction", "poster", "preload", "pubdate", "radiogroup", "readonly", "rel", "required", "rev", "reversed", "role", "rows", "rowspan", "spellcheck", "scope", "selected", "shape", "size", "sizes", "span", "srclang", "start", "src", "srcset", "step", "style", "summary", "tabindex", "title", "translate", "type", "usemap", "valign", "value", "width", "wrap", "xmlns", "slot"]), xe = S(["accent-height", "accumulate", "additive", "alignment-baseline", "amplitude", "ascent", "attributename", "attributetype", "azimuth", "basefrequency", "baseline-shift", "begin", "bias", "by", "class", "clip", "clippathunits", "clip-path", "clip-rule", "color", "color-interpolation", "color-interpolation-filters", "color-profile", "color-rendering", "cx", "cy", "d", "dx", "dy", "diffuseconstant", "direction", "display", "divisor", "dur", "edgemode", "elevation", "end", "exponent", "fill", "fill-opacity", "fill-rule", "filter", "filterunits", "flood-color", "flood-opacity", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", "font-weight", "fx", "fy", "g1", "g2", "glyph-name", "glyphref", "gradientunits", "gradienttransform", "height", "href", "id", "image-rendering", "in", "in2", "intercept", "k", "k1", "k2", "k3", "k4", "kerning", "keypoints", "keysplines", "keytimes", "lang", "lengthadjust", "letter-spacing", "kernelmatrix", "kernelunitlength", "lighting-color", "local", "marker-end", "marker-mid", "marker-start", "markerheight", "markerunits", "markerwidth", "maskcontentunits", "maskunits", "max", "mask", "media", "method", "mode", "min", "name", "numoctaves", "offset", "operator", "opacity", "order", "orient", "orientation", "origin", "overflow", "paint-order", "path", "pathlength", "patterncontentunits", "patterntransform", "patternunits", "points", "preservealpha", "preserveaspectratio", "primitiveunits", "r", "rx", "ry", "radius", "refx", "refy", "repeatcount", "repeatdur", "restart", "result", "rotate", "scale", "seed", "shape-rendering", "slope", "specularconstant", "specularexponent", "spreadmethod", "startoffset", "stddeviation", "stitchtiles", "stop-color", "stop-opacity", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke", "stroke-width", "style", "surfacescale", "systemlanguage", "tabindex", "tablevalues", "targetx", "targety", "transform", "transform-origin", "text-anchor", "text-decoration", "text-rendering", "textlength", "type", "u1", "u2", "unicode", "values", "viewbox", "visibility", "version", "vert-adv-y", "vert-origin-x", "vert-origin-y", "width", "word-spacing", "wrap", "writing-mode", "xchannelselector", "ychannelselector", "x", "x1", "x2", "xmlns", "y", "y1", "y2", "z", "zoomandpan"]), gt = S(["accent", "accentunder", "align", "bevelled", "close", "columnsalign", "columnlines", "columnspan", "denomalign", "depth", "dir", "display", "displaystyle", "encoding", "fence", "frame", "height", "href", "id", "largeop", "length", "linethickness", "lspace", "lquote", "mathbackground", "mathcolor", "mathsize", "mathvariant", "maxsize", "minsize", "movablelimits", "notation", "numalign", "open", "rowalign", "rowlines", "rowspacing", "rowspan", "rspace", "rquote", "scriptlevel", "scriptminsize", "scriptsizemultiplier", "selection", "separator", "separators", "stretchy", "subscriptshift", "supscriptshift", "symmetric", "voffset", "width", "xmlns"]), fe = S(["xlink:href", "xml:id", "xlink:title", "xml:space", "xmlns:xlink"]), En = O(/\{\{[\w\W]*|[\w\W]*\}\}/gm), gn = O(/<%[\w\W]*|[\w\W]*%>/gm), hn = O(/\$\{[\w\W]*/gm), An = O(/^data-[\-\w.\u00B7-\uFFFF]+$/), Sn = O(/^aria-[\-\w]+$/), yt = O(
   /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i
   // eslint-disable-line no-useless-escape
-), Rn = L(/^(?:\w+script|data):/i), yn = L(
+), Rn = O(/^(?:\w+script|data):/i), yn = O(
   /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g
   // eslint-disable-line no-control-regex
-), Ot = L(/^html$/i), On = L(/^[a-z][.\w]*(-[.\w]+)+$/i);
+), Ot = O(/^html$/i), On = O(/^[a-z][.\w]*(-[.\w]+)+$/i);
 var ht = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   ARIA_ATTR: Sn,
@@ -124,18 +124,18 @@ const Z = {
   let s = null;
   const u = "data-tt-policy-suffix";
   r && r.hasAttribute(u) && (s = r.getAttribute(u));
-  const N = "dompurify" + (s ? "#" + s : "");
+  const L = "dompurify" + (s ? "#" + s : "");
   try {
-    return n.createPolicy(N, {
-      createHTML(O) {
-        return O;
+    return n.createPolicy(L, {
+      createHTML(N) {
+        return N;
       },
-      createScriptURL(O) {
-        return O;
+      createScriptURL(N) {
+        return N;
       }
     });
   } catch {
-    return console.warn("TrustedTypes policy " + N + " could not be created."), null;
+    return console.warn("TrustedTypes policy " + L + " could not be created."), null;
   }
 }, At = function() {
   return {
@@ -159,8 +159,8 @@ function Lt() {
     document: r
   } = a;
   const s = r, u = s.currentScript, {
-    DocumentFragment: N,
-    HTMLTemplateElement: O,
+    DocumentFragment: L,
+    HTMLTemplateElement: N,
     Node: J,
     Element: ke,
     NodeFilter: z,
@@ -169,7 +169,7 @@ function Lt() {
     DOMParser: Dt,
     trustedTypes: Q
   } = a, G = ke.prototype, It = K(G, "cloneNode"), Mt = K(G, "remove"), Ct = K(G, "nextSibling"), wt = K(G, "childNodes"), ee = K(G, "parentNode");
-  if (typeof O == "function") {
+  if (typeof N == "function") {
     const i = r.createElement("template");
     i.content && i.content.ownerDocument && (r = i.content.ownerDocument);
   }
@@ -450,7 +450,7 @@ function Lt() {
     let t = null;
     const o = et(e);
     for (C(g.beforeSanitizeShadowDOM, e, null); t = o.nextNode(); )
-      C(g.uponSanitizeShadowNode, t, null), nt(t), rt(t), t.content instanceof N && i(t.content);
+      C(g.uponSanitizeShadowNode, t, null), nt(t), rt(t), t.content instanceof L && i(t.content);
     C(g.afterSanitizeShadowDOM, e, null);
   };
   return n.sanitize = function(i) {
@@ -481,7 +481,7 @@ function Lt() {
     t && Ae && D(t.firstChild);
     const _ = et(Y ? i : t);
     for (; c = _.nextNode(); )
-      nt(c), rt(c), c.content instanceof N && jt(c.content);
+      nt(c), rt(c), c.content instanceof L && jt(c.content);
     if (Y)
       return i;
     if (P) {
@@ -529,20 +529,20 @@ const Dn = ["role"], In = ["innerHTML"], Mn = { key: 1 }, Cn = /* @__PURE__ */ q
     offsetTop: { default: void 0 }
   },
   setup(a) {
-    Kt((O) => ({
-      "8a96e6c8": r.offsetTop
+    Kt((N) => ({
+      v8a96e6c8: r.offsetTop
     }));
     const n = Zt(), r = a, s = lt(
       () => r.status ? ut[en(r.status)] : ut.Info
-    ), u = lt(() => r.status === tn.Error ? "alert" : "status"), N = () => {
+    ), u = lt(() => r.status === tn.Error ? "alert" : "status"), L = () => {
       if (typeof r.text != "function")
         return ft.error(
           `Toast: ${r.text} is not a valid text prop value. Must be either a render function or a string.`
         ), null;
-      const O = r.text();
-      return Qt(O) ? O : (ft.error("Toast: The text prop must return a VNode."), null);
+      const N = r.text();
+      return Qt(N) ? N : (ft.error("Toast: The text prop must return a VNode."), null);
     };
-    return (O, J) => (De(), be("li", {
+    return (N, J) => (De(), be("li", {
       role: u.value,
       class: Jt([[le(n).root, le(n)[`status--${r.status}`], { [le(n)["custom-offset-top"]]: r.offsetTop }], "stash-toast"]),
       "data-test": "stash-toast"
@@ -550,9 +550,9 @@ const Dn = ["role"], In = ["innerHTML"], Mn = { key: 1 }, Cn = /* @__PURE__ */ q
       ct(on, { name: s.value }, null, 8, ["name"]),
       typeof r.text == "string" ? (De(), be("div", {
         key: 0,
-        innerHTML: le(bn).sanitize(O.text)
+        innerHTML: le(bn).sanitize(a.text)
       }, null, 8, In)) : (De(), be("div", Mn, [
-        ct(nn, { render: N })
+        ct(nn, { render: L })
       ]))
     ], 10, Dn));
   }