@leaflink/stash 53.1.0 → 53.3.2

package/dist/Copy.js

@@ -1,73 +1,112 @@
-import { defineComponent as _, useCssModule as m, ref as f, computed as h, createElementBlock as x, openBlock as o, normalizeClass as l, unref as p, renderSlot as v, createVNode as C, withCtx as i, createBlock as s, createTextVNode as k, toDisplayString as b } from "vue";
-import { UI_TIMEOUT as T } from "./constants.js";
-import { t as n } from "./locale.js";
-import g from "./Button.js";
-import r from "./Icon.js";
-import { _ as z } from "./Tooltip.vue_vue_type_script_setup_true_lang-mzBLSXy3.js";
-import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const M = /* @__PURE__ */ _({
+import { defineComponent as w, computed as r, watch as g, useCssModule as T, ref as z, createElementBlock as p, openBlock as s, normalizeClass as l, unref as d, createBlock as c, Fragment as B, renderSlot as M, createVNode as u, withCtx as a, createTextVNode as y, toDisplayString as m } from "vue";
+import E from "@leaflink/snitch";
+import { UI_TIMEOUT as I } from "./constants.js";
+import { t as f } from "./locale.js";
+import _ from "./Button.js";
+import x from "./Icon.js";
+import $ from "./IconLabel.js";
+import { _ as N } from "./Tooltip.vue_vue_type_script_setup_true_lang-CF6sw2VC.js";
+import { _ as S } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const U = /* @__PURE__ */ w({
   __name: "Copy",
   props: {
     text: { default: void 0 },
-    value: { default: "" },
-    visible: { type: Boolean, default: !1 }
+    value: {},
+    visible: { type: Boolean, default: !1 },
+    mode: { default: "unset" }
   },
-  setup(d) {
-    const t = d, c = m(), e = f(!1), y = h(() => e.value ? n("ll.copy.copied") : t.text ? null : n("ll.copy.copyToClipboard"));
-    function a() {
+  emits: ["copy"],
+  setup(h, { emit: v }) {
+    const t = h, o = r(() => t.mode !== "unset" ? t.mode : t.text ? "text" : "icon");
+    g(
+      [o, () => t.text, () => t.visible],
+      () => {
+        if (!t.text && ["text", "icon-button"].includes(o.value))
+          throw new Error("Copy: text prop is required when mode is text or icon-button");
+        if (t.text && o.value === "icon")
+          throw new Error("Copy: text prop is not allowed when mode is icon");
+        o.value === "icon-button" && t.visible === !1 && E.warn("Copy: visible prop is ignored when mode is icon-button");
+      },
+      { immediate: !0 }
+    );
+    const b = v, n = T(), e = z(!1), C = r(() => e.value ? f("ll.copy.copied") : t.text ? null : f("ll.copy.copyToClipboard"));
+    function i() {
       navigator.clipboard.writeText(t.value), e.value = !0, setTimeout(() => {
         e.value = !1;
-      }, T);
+      }, I), b("copy");
     }
-    return (u, N) => (o(), x("div", {
-      class: l(["stash-copy flex items-center", { [p(c).hidden]: !t.visible }]),
+    return (k, L) => (s(), p("div", {
+      class: l(["stash-copy flex items-center", { [d(n).hidden]: !t.visible }]),
       "data-test": "stash-copy"
     }, [
-      v(u.$slots, "default"),
-      C(z, {
-        side: "top",
-        text: y.value,
-        "is-disabled": !!t.text,
-        class: l(["stash-copy__copy-zone ml-3 cursor-pointer", p(c).copy]),
-        "data-test": "stash-copy|copy-zone"
+      o.value !== "icon-button" ? (s(), p(B, { key: 0 }, [
+        M(k.$slots, "default"),
+        u(N, {
+          side: "top",
+          text: C.value,
+          "is-disabled": !!t.text,
+          class: l(["stash-copy__copy-zone ml-3 cursor-pointer", d(n).copy]),
+          "data-test": "stash-copy|copy-zone"
+        }, {
+          default: a(() => [
+            e.value ? (s(), c(x, {
+              key: 0,
+              class: "stash-copy__success-icon text-green-500",
+              name: "circle-check",
+              "data-test": "stash-copy|success-icon"
+            })) : o.value === "text" ? (s(), c(_, {
+              key: 1,
+              class: "stash-copy__copy-text",
+              inline: "",
+              "data-test": "stash-copy|copy-target",
+              onClick: i
+            }, {
+              default: a(() => [
+                y(m(t.text), 1)
+              ]),
+              _: 1
+            })) : (s(), c(x, {
+              key: 2,
+              class: "stash-copy__copy-icon",
+              name: "copy",
+              title: "Copy to clipboard",
+              "data-test": "stash-copy|copy-target",
+              onClick: i
+            }))
+          ]),
+          _: 1
+        }, 8, ["text", "is-disabled", "class"])
+      ], 64)) : (s(), c(_, {
+        key: 1,
+        "icon-label": "",
+        "data-test": e.value ? "stash-copy|success-icon-button" : "stash-copy|copy-target",
+        title: t.text,
+        class: l(e.value ? "text-green-500" : ""),
+        onClick: i
       }, {
-        default: i(() => [
-          e.value ? (o(), s(r, {
-            key: 0,
-            class: "stash-copy__success-icon text-green-500",
-            name: "circle-check",
-            "data-test": "stash-copy|success-icon"
-          })) : t.text ? (o(), s(g, {
-            key: 1,
-            class: "stash-copy__copy-text",
-            inline: "",
-            "data-test": "stash-copy|copy-target",
-            onClick: a
+        default: a(() => [
+          u($, {
+            icon: e.value ? "circle-check" : "copy",
+            title: t.text,
+            stacked: ""
           }, {
-            default: i(() => [
-              k(b(t.text), 1)
+            default: a(() => [
+              y(m(t.text), 1)
             ]),
             _: 1
-          })) : (o(), s(r, {
-            key: 2,
-            class: "stash-copy__copy-icon",
-            name: "copy",
-            title: "Copy to clipboard",
-            "data-test": "stash-copy|copy-target",
-            onClick: a
-          }))
+          }, 8, ["icon", "title"])
         ]),
         _: 1
-      }, 8, ["text", "is-disabled", "class"])
+      }, 8, ["data-test", "title", "class"]))
     ], 2));
   }
-}), I = "_hidden_z4re6_3", $ = "_copy_z4re6_4", w = {
-  hidden: I,
-  copy: $
-}, E = {
-  $style: w
-}, A = /* @__PURE__ */ B(M, [["__cssModules", E]]);
+}), V = "_hidden_z4re6_3", q = "_copy_z4re6_4", D = {
+  hidden: V,
+  copy: q
+}, F = {
+  $style: D
+}, R = /* @__PURE__ */ S(U, [["__cssModules", F]]);
 export {
-  A as default
+  R as default
 };
 //# sourceMappingURL=Copy.js.map

package/dist/Copy.js.map

@@ -1 +1 @@
-{"version":3,"file":"Copy.js","sources":["../src/components/Copy/Copy.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useCssModule } from 'vue';\n\n  import { UI_TIMEOUT } from '../../constants';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Tooltip from '../Tooltip/Tooltip.vue';\n\n  export interface CopyProps {\n    /**\n     * Optional text to display instead of icon.\n     */\n    text?: string;\n\n    /**\n     * The value to copy to clipboard.\n     */\n    value?: string;\n\n    /**\n     * Sets the copy icon or text to always be visible. By default, icon/text only appears when hovering over slot content.\n     */\n    visible?: boolean;\n  }\n\n  const props = withDefaults(defineProps<CopyProps>(), {\n    text: undefined,\n    value: '', // Todo - We should default this to the content of the default slot so you can do <Copy>631f67a</Copy>.\n    visible: false,\n  });\n  const classes = useCssModule();\n\n  // Flag to indicate whether a user successfully copied the text to their clipboard.\n  // Note: We reset this flag after a timeout to allow the user to copy the text multiple times.\n  const isCopied = ref(false);\n\n  const tooltip = computed(() => {\n    return isCopied.value ? t('ll.copy.copied') : !props.text ? t('ll.copy.copyToClipboard') : null;\n  });\n\n  function handleCopy() {\n    navigator.clipboard.writeText(props.value);\n    isCopied.value = true;\n\n    setTimeout(() => {\n      isCopied.value = false;\n    }, UI_TIMEOUT);\n  }\n</script>\n\n<template>\n  <div class=\"stash-copy flex items-center\" :class=\"{ [classes.hidden]: !props.visible }\" data-test=\"stash-copy\">\n    <!-- @slot Anything you want to render. This is not what will be copied to the clipboard. -->\n    <slot></slot>\n    <Tooltip\n      side=\"top\"\n      :text=\"tooltip\"\n      :is-disabled=\"!!props.text\"\n      class=\"stash-copy__copy-zone ml-3 cursor-pointer\"\n      :class=\"classes.copy\"\n      data-test=\"stash-copy|copy-zone\"\n    >\n      <Icon\n        v-if=\"isCopied\"\n        class=\"stash-copy__success-icon text-green-500\"\n        name=\"circle-check\"\n        data-test=\"stash-copy|success-icon\"\n      />\n      <Button\n        v-else-if=\"props.text\"\n        class=\"stash-copy__copy-text\"\n        inline\n        data-test=\"stash-copy|copy-target\"\n        @click=\"handleCopy\"\n      >\n        {{ props.text }}\n      </Button>\n      <Icon\n        v-else\n        class=\"stash-copy__copy-icon\"\n        name=\"copy\"\n        title=\"Copy to clipboard\"\n        data-test=\"stash-copy|copy-target\"\n        @click=\"handleCopy\"\n      />\n    </Tooltip>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .hidden {\n      .copy {\n        visibility: hidden;\n      }\n\n      &:hover {\n        .copy {\n          visibility: visible;\n        }\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","isCopied","ref","tooltip","computed","t","handleCopy","UI_TIMEOUT"],"mappings":";;;;;;;;;;;;;;;AA0BE,UAAMA,IAAQC,GAKRC,IAAUC,EAAA,GAIVC,IAAWC,EAAI,EAAK,GAEpBC,IAAUC,EAAS,MAChBH,EAAS,QAAQI,EAAE,gBAAgB,IAAKR,EAAM,OAAsC,OAA/BQ,EAAE,yBAAyB,CACxF;AAED,aAASC,IAAa;AACpB,gBAAU,UAAU,UAAUT,EAAM,KAAK,GACzCI,EAAS,QAAQ,IAEjB,WAAW,MAAM;AACf,QAAAA,EAAS,QAAQ;AAAA,MACnB,GAAGM,CAAU;AAAA,IACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Copy.js","sources":["../src/components/Copy/Copy.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, ref, useCssModule, watch } from 'vue';\n\n  import { UI_TIMEOUT } from '../../constants';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import IconLabel from '../IconLabel/IconLabel.vue';\n  import Tooltip from '../Tooltip/Tooltip.vue';\n\n  export interface CopyProps {\n    /**\n     * Optional text to display instead of icon.\n     */\n    text?: string;\n\n    /**\n     * The value to copy to clipboard.\n     */\n    value: string;\n\n    /**\n     * Sets the copy icon or text to always be visible. By default, icon/text only appears when hovering over slot content.\n     */\n    visible?: boolean;\n\n    /**\n     * Sets the mode of the copy component.\n     */\n    // TODO: remove unset mode eventually but it will cause a breaking change\n    mode?: 'icon' | 'text' | 'icon-button' | 'unset';\n  }\n\n  const props = withDefaults(defineProps<CopyProps>(), {\n    text: undefined,\n    visible: false,\n    mode: 'unset',\n  });\n\n  /**\n   * Compute the mode based on the props for backwards compatibility.  Previously the checks were done\n   * in the template based on text being present.  Have to calculate it here after the text prop is set.\n   */\n  const computedMode = computed(() => {\n    // If the mode is set, use it (new behavior)\n    if (props.mode !== 'unset') return props.mode;\n\n    // Otherwise, determine it based on the text prop (old behavior)\n    return props.text ? 'text' : 'icon';\n  });\n\n  watch(\n    [computedMode, () => props.text, () => props.visible],\n    () => {\n      // Validate the mode based on the text prop.  This will still pass if the mode is unset but the text prop is present.\n      if (!props.text && ['text', 'icon-button'].includes(computedMode.value)) {\n        throw new Error('Copy: text prop is required when mode is text or icon-button');\n      } else if (props.text && computedMode.value === 'icon') {\n        throw new Error('Copy: text prop is not allowed when mode is icon');\n      }\n\n      // If the mode is icon-button and the visible prop is false,\n      // warn the user that the visible prop is ignored when mode is icon-button\n      // Because we have to show the whole control\n      if (computedMode.value === 'icon-button' && props.visible === false) {\n        logger.warn('Copy: visible prop is ignored when mode is icon-button');\n      }\n    },\n    { immediate: true },\n  );\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the copy action is completed.\n     */\n    (e: 'copy'): void;\n  }>();\n\n  const classes = useCssModule();\n\n  // Flag to indicate whether a user successfully copied the text to their clipboard.\n  // Note: We reset this flag after a timeout to allow the user to copy the text multiple times.\n  const isCopied = ref(false);\n\n  const tooltip = computed(() => {\n    return isCopied.value ? t('ll.copy.copied') : !props.text ? t('ll.copy.copyToClipboard') : null;\n  });\n\n  function handleCopy() {\n    navigator.clipboard.writeText(props.value);\n    isCopied.value = true;\n\n    // Reset the copied state after the timeout to flip the icon back\n    setTimeout(() => {\n      isCopied.value = false;\n    }, UI_TIMEOUT);\n\n    emit('copy');\n  }\n</script>\n\n<template>\n  <div class=\"stash-copy flex items-center\" :class=\"{ [classes.hidden]: !props.visible }\" data-test=\"stash-copy\">\n    <!-- If the mode is not icon-button, render the appropriate content based on the mode -->\n    <template v-if=\"computedMode !== 'icon-button'\">\n      <!-- @slot Anything you want to render. This is not what will be copied to the clipboard. -->\n      <slot></slot>\n      <Tooltip\n        side=\"top\"\n        :text=\"tooltip\"\n        :is-disabled=\"!!props.text\"\n        class=\"stash-copy__copy-zone ml-3 cursor-pointer\"\n        :class=\"classes.copy\"\n        data-test=\"stash-copy|copy-zone\"\n      >\n        <!-- Regardless of the mode, we always render ONLY the success icon if the text has been copied \n         Which is why this is the first in the `v-if` block-->\n        <Icon\n          v-if=\"isCopied\"\n          class=\"stash-copy__success-icon text-green-500\"\n          name=\"circle-check\"\n          data-test=\"stash-copy|success-icon\"\n        />\n        <!-- If the mode is text, we render a button with the text -->\n        <Button\n          v-else-if=\"computedMode === 'text'\"\n          class=\"stash-copy__copy-text\"\n          inline\n          data-test=\"stash-copy|copy-target\"\n          @click=\"handleCopy\"\n        >\n          {{ props.text }}\n        </Button>\n        <!-- If the mode is icon, we render just the icon -->\n        <Icon\n          v-else\n          class=\"stash-copy__copy-icon\"\n          name=\"copy\"\n          title=\"Copy to clipboard\"\n          data-test=\"stash-copy|copy-target\"\n          @click=\"handleCopy\"\n        />\n      </Tooltip>\n    </template>\n    <template v-else>\n      <!-- If the mode is icon-button, we render an icon button with the icon and text -->\n      <Button\n        icon-label\n        :data-test=\"isCopied ? 'stash-copy|success-icon-button' : 'stash-copy|copy-target'\"\n        :title=\"props.text\"\n        :class=\"isCopied ? 'text-green-500' : ''\"\n        @click=\"handleCopy\"\n      >\n        <IconLabel :icon=\"isCopied ? 'circle-check' : 'copy'\" :title=\"props.text\" stacked>\n          {{ props.text }}\n        </IconLabel>\n      </Button>\n    </template>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .hidden {\n      .copy {\n        visibility: hidden;\n      }\n\n      &:hover {\n        .copy {\n          visibility: visible;\n        }\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","computedMode","computed","watch","logger","emit","__emit","classes","useCssModule","isCopied","ref","tooltip","t","handleCopy","UI_TIMEOUT"],"mappings":";;;;;;;;;;;;;;;;;;;AAkCE,UAAMA,IAAQC,GAURC,IAAeC,EAAS,MAExBH,EAAM,SAAS,UAAgBA,EAAM,OAGlCA,EAAM,OAAO,SAAS,MAC9B;AAED,IAAAI;AAAA,MACE,CAACF,GAAc,MAAMF,EAAM,MAAM,MAAMA,EAAM,OAAO;AAAA,MACpD,MAAM;AAEJ,YAAI,CAACA,EAAM,QAAQ,CAAC,QAAQ,aAAa,EAAE,SAASE,EAAa,KAAK;AACpE,gBAAM,IAAI,MAAM,8DAA8D;AAChF,YAAWF,EAAM,QAAQE,EAAa,UAAU;AAC9C,gBAAM,IAAI,MAAM,kDAAkD;AAMpE,QAAIA,EAAa,UAAU,iBAAiBF,EAAM,YAAY,MAC5DK,EAAO,KAAK,wDAAwD;AAAA,MAExE;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK;AAGpB,UAAMC,IAAOC,GAOPC,IAAUC,EAAA,GAIVC,IAAWC,EAAI,EAAK,GAEpBC,IAAUT,EAAS,MAChBO,EAAS,QAAQG,EAAE,gBAAgB,IAAKb,EAAM,OAAsC,OAA/Ba,EAAE,yBAAyB,CACxF;AAED,aAASC,IAAa;AACpB,gBAAU,UAAU,UAAUd,EAAM,KAAK,GACzCU,EAAS,QAAQ,IAGjB,WAAW,MAAM;AACf,QAAAA,EAAS,QAAQ;AAAA,MACnB,GAAGK,CAAU,GAEbT,EAAK,MAAM;AAAA,IACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Copy.vue.d.ts

@@ -40,24 +40,32 @@ export declare interface CopyProps {
     /**
      * The value to copy to clipboard.
      */
-    value?: string;
+    value: string;
     /**
      * Sets the copy icon or text to always be visible. By default, icon/text only appears when hovering over slot content.
      */
     visible?: boolean;
+    /**
+     * Sets the mode of the copy component.
+     */
+    mode?: 'icon' | 'text' | 'icon-button' | 'unset';
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CopyProps>, {
 text: undefined;
-value: string;
 visible: boolean;
-}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CopyProps>, {
+mode: string;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+copy: () => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CopyProps>, {
 text: undefined;
-value: string;
 visible: boolean;
-}>>> & Readonly<{}>, {
+mode: string;
+}>>> & Readonly<{
+onCopy?: (() => any) | undefined;
+}>, {
+mode: "text" | "icon" | "unset" | "icon-button";
 text: string;
-value: string;
 visible: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;

package/dist/Dialog.js

@@ -28,7 +28,7 @@ const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
   },
   emits: ["update:open", "cancel"],
   setup(M, { emit: E }) {
-    const t = M, b = E, h = H(), v = K(), n = L(), x = O("dialog-header-"), r = S(!1), c = S(), N = s(() => t.confirmText || (t.alert ? i("ll.okay") : i("ll.confirm"))), k = s(() => !!h.default || t.description), V = s(
+    const t = M, h = E, b = H(), v = K(), n = L(), x = O("dialog-header-"), r = S(!1), c = S(), N = s(() => t.confirmText || (t.alert ? i("ll.okay") : i("ll.confirm"))), k = s(() => !!b.default || t.description), V = s(
       () => t.status ? I[y(t.status)] : I.Info
     ), $ = s(
       () => t.status ? g[y(t.status)] : g.Info
@@ -36,7 +36,7 @@ const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
       () => t.status ? w[y(t.status)] : w.Info
     ), Z = s(() => t.dangerZone || t.status === g.Error);
     function T() {
-      b("update:open", !1), b("cancel");
+      h("update:open", !1), h("cancel");
     }
     async function z(u) {
       if (!r.value) {
@@ -97,7 +97,7 @@ const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
                 }, p(t.header), 11, W)
               ], 2),
               k.value ? (l(), _("p", X, [
-                e(h).default ? G(u.$slots, "default", { key: 0 }) : (l(), _("span", {
+                e(b).default ? G(u.$slots, "default", { key: 0 }) : (l(), _("span", {
                   key: 1,
                   innerHTML: t.description
                 }, null, 8, tt))
@@ -146,7 +146,7 @@ const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
       _: 3
     }));
   }
-}), at = "_dialog_u78oe_5", st = "_body_u78oe_22", lt = "_grey_u78oe_35", nt = "_content_u78oe_45", rt = "_footer_u78oe_50", dt = {
+}), at = "_dialog_1t4hs_5", st = "_body_1t4hs_22", lt = "_grey_1t4hs_35", nt = "_content_1t4hs_45", rt = "_footer_1t4hs_50", dt = {
   dialog: at,
   body: st,
   grey: lt,
@@ -154,8 +154,8 @@ const U = ["open", "aria-labelledby", "data-test"], W = ["id"], X = {
   footer: rt
 }, it = {
   $style: dt
-}, ht = /* @__PURE__ */ R(ot, [["__cssModules", it]]);
+}, bt = /* @__PURE__ */ R(ot, [["__cssModules", it]]);
 export {
-  ht as default
+  bt as default
 };
 //# sourceMappingURL=Dialog.js.map

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: var(--border-width) 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"],"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FileUpload.js

@@ -1,11 +1,11 @@
-import { defineComponent as H, useCssModule as K, ref as U, inject as Q, useAttrs as W, computed as g, createElementBlock as r, openBlock as n, normalizeClass as c, unref as l, withDirectives as Z, createVNode as E, withModifiers as p, withCtx as S, renderSlot as N, createTextVNode as F, toDisplayString as u, createElementVNode as v, createCommentVNode as k, Fragment as R, createBlock as ee, renderList as te, mergeProps as le, vShow as se } from "vue";
+import { defineComponent as q, useCssModule as K, ref as U, inject as Q, useAttrs as W, computed as g, createElementBlock as r, openBlock as n, normalizeClass as c, unref as l, withDirectives as Z, createVNode as E, withModifiers as p, withCtx as S, renderSlot as x, createTextVNode as N, toDisplayString as u, createElementVNode as v, createCommentVNode as k, Fragment as j, createBlock as ee, renderList as te, mergeProps as le, vShow as se } from "vue";
 import ne from "@leaflink/snitch";
 import { I as oe } from "./index-D6bxWkZ1.js";
 import { t as f } from "./locale.js";
-import w from "./Button.js";
+import F from "./Button.js";
 import ae from "./Icon.js";
 import { _ as ie } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const M = {
+const w = {
   CSV: {
     EXTENSION: ["csv"],
     MIME_TYPES: ["text/csv", "application/octet-stream", "application/vnd.ms-excel"],
@@ -41,7 +41,7 @@ var h = /* @__PURE__ */ ((m) => (m.Dense = "dense", m.Standard = "standard", m))
 const re = { key: 0 }, de = { class: "text-ice-900" }, ce = {
   key: 0,
   class: "mt-6 text-center text-xs text-ice-700"
-}, pe = ["disabled", "accept", "multiple"], ue = /* @__PURE__ */ H({
+}, pe = ["disabled", "accept", "multiple"], ue = /* @__PURE__ */ q({
   __name: "FileUpload",
   props: {
     files: { default: () => [] },
@@ -52,22 +52,22 @@ const re = { key: 0 }, de = { class: "text-ice-900" }, ce = {
     size: { default: "standard" }
   },
   emits: ["file-select", "file-delete", "file-error"],
-  setup(m, { emit: A }) {
-    const o = m, d = K(), _ = A, y = U(!1), T = U(), b = Q("stashOptions"), x = W(), X = g(() => {
-      const e = { ...x };
+  setup(m, { emit: R }) {
+    const o = m, d = K(), _ = R, y = U(!1), T = U(), b = Q("stashOptions"), M = W(), A = g(() => {
+      const e = { ...M };
       return delete e["data-test"], delete e.class, delete e.type, delete e.accept, e;
     });
     function D(e, t) {
       return e.concat(t);
     }
-    const I = g(() => o.fileTypes.map((e) => M[e].MIME_TYPES).reduce(D)), O = g(() => o.fileTypes.map((e) => M[e].EXTENSION).reduce(D)), Y = g(() => `${b == null ? void 0 : b.staticPath}/illustrations/FileUpload/${M[o.fileTypes[0]].ILLUSTRATION}.svg`);
+    const I = g(() => o.fileTypes.map((e) => w[e].MIME_TYPES).reduce(D)), O = g(() => o.fileTypes.map((e) => w[e].EXTENSION).reduce(D)), X = g(() => `${b == null ? void 0 : b.staticPath}/illustrations/FileUpload/${w[o.fileTypes[0]].ILLUSTRATION}.svg`);
     function L() {
       T.value && (T.value.value = "", T.value.click());
     }
-    function $() {
+    function Y() {
       y.value = !0;
     }
-    function j() {
+    function $() {
       y.value = !1;
     }
     function B(e) {
@@ -76,9 +76,9 @@ const re = { key: 0 }, de = { class: "text-ice-900" }, ce = {
       });
       _("file-error", t), ne.log(e);
     }
-    async function q(e) {
+    async function V(e) {
       if (!I.value.length) return !0;
-      const t = await Promise.all(e.map((i) => J(i)));
+      const t = await Promise.all(e.map((i) => H(i)));
       if (!(!!t.length && t.every((i) => I.value.includes(i))))
         throw new Error("One or more files contains an unacceptable mime type.");
       if (!e.every((i) => {
@@ -90,27 +90,27 @@ const re = { key: 0 }, de = { class: "text-ice-900" }, ce = {
     }
     async function P(e) {
       try {
-        await q(e), _("file-select", { files: e });
+        await V(e), _("file-select", { files: e });
       } catch (t) {
         B(t);
       }
     }
-    function V(e) {
+    function z(e) {
       var s;
       const t = [...((s = e.target) == null ? void 0 : s.files) || []];
       P(t);
     }
-    function z(e) {
+    function G(e) {
       var s;
       if (o.disabled)
         return;
       const t = [...((s = e.dataTransfer) == null ? void 0 : s.files) || []];
       return y.value = !1, P(t);
     }
-    function G(e) {
+    function J(e) {
       _("file-delete", e);
     }
-    function J(e) {
+    function H(e) {
       return new Promise((t, s) => {
         if (e.type)
           return t(e.type);
@@ -125,19 +125,19 @@ const re = { key: 0 }, de = { class: "text-ice-900" }, ce = {
       });
     }
     return (e, t) => (n(), r("div", {
-      class: c(["stash-file-upload", l(x).class]),
+      class: c(["stash-file-upload", l(M).class]),
       "data-test": "stash-file-upload"
     }, [
       e.buttonOnly ? (n(), r("div", re, [
-        E(w, {
+        E(F, {
           secondary: "",
           type: "button",
           disabled: o.disabled,
           onClick: p(L, ["stop", "prevent"])
         }, {
           default: S(() => [
-            N(e.$slots, "submitText", {}, () => [
-              F(u(l(f)("ll.fileUpload.uploadFile")), 1)
+            x(e.$slots, "submitText", {}, () => [
+              N(u(l(f)("ll.fileUpload.uploadFile")), 1)
             ])
           ]),
           _: 3
@@ -151,31 +151,31 @@ const re = { key: 0 }, de = { class: "text-ice-900" }, ce = {
             [l(d)["is-disabled"]]: o.disabled
           }
         ]]),
-        onDragover: p($, ["prevent"]),
-        onDrop: p(z, ["prevent"]),
-        onDragleave: p(j, ["prevent"])
+        onDragover: p(Y, ["prevent"]),
+        onDrop: p(G, ["prevent"]),
+        onDragleave: p($, ["prevent"])
       }, [
         v("div", {
           class: c(["flex flex-col items-center justify-center text-center", [{ "items-center md:flex-row": e.size === l(h).Dense }]])
         }, [
-          e.files.length ? (n(!0), r(R, { key: 1 }, te(e.files, (s) => (n(), r("div", {
+          e.files.length ? (n(!0), r(j, { key: 1 }, te(e.files, (s) => (n(), r("div", {
             key: s.name
           }, [
             E(ae, { name: "file" }),
             v("span", null, u(s.name), 1),
-            E(w, {
+            E(F, {
               class: c([l(d)["remove-button"], l(d).button]),
-              onClick: p((a) => G(s), ["stop", "prevent"])
+              onClick: p((a) => J(s), ["stop", "prevent"])
             }, {
               default: S(() => [
-                F(u(l(f)("ll.fileUpload.remove")), 1)
+                N(u(l(f)("ll.fileUpload.remove")), 1)
               ]),
               _: 2
             }, 1032, ["class", "onClick"])
-          ]))), 128)) : (n(), r(R, { key: 0 }, [
+          ]))), 128)) : (n(), r(j, { key: 0 }, [
             e.size !== l(h).Dense ? (n(), ee(l(oe), {
               key: 0,
-              src: Y.value,
+              src: X.value,
               name: "file",
               width: "84",
               height: "96"
@@ -184,7 +184,7 @@ const re = { key: 0 }, de = { class: "text-ice-900" }, ce = {
             v("span", {
               class: c(e.size === l(h).Dense ? "md:ml-1.5 md:mr-3 md:my-0 my-1.5 text-ice-900" : "mt-1.5 my-1.5")
             }, u(l(f)("ll.fileUpload.or")), 3),
-            E(w, {
+            E(F, {
               class: c(["mt-1.5", l(d)["file-select-button"]]),
               secondary: "",
               type: "button",
@@ -192,8 +192,8 @@ const re = { key: 0 }, de = { class: "text-ice-900" }, ce = {
               onClick: p(L, ["stop", "prevent"])
             }, {
               default: S(() => [
-                N(e.$slots, "submitText", {}, () => [
-                  F(u(l(f)("ll.fileUpload.uploadFile")), 1)
+                x(e.$slots, "submitText", {}, () => [
+                  N(u(l(f)("ll.fileUpload.uploadFile")), 1)
                 ])
               ]),
               _: 3
@@ -201,10 +201,10 @@ const re = { key: 0 }, de = { class: "text-ice-900" }, ce = {
           ], 64))
         ], 2),
         e.$slots.hint && !e.files.length ? (n(), r("div", ce, [
-          N(e.$slots, "hint")
+          x(e.$slots, "hint")
         ])) : k("", !0)
       ], 34)),
-      Z(v("input", le(X.value, {
+      Z(v("input", le(A.value, {
         ref_key: "fileUploadRef",
         ref: T,
         "data-test": "stash-file-upload|input",
@@ -212,24 +212,24 @@ const re = { key: 0 }, de = { class: "text-ice-900" }, ce = {
         disabled: e.disabled,
         accept: I.value.join(","),
         multiple: o.multiple,
-        onChange: V
+        onChange: z
       }), null, 16, pe), [
         [se, !1]
       ])
     ], 2));
   }
-}), fe = "_button_qf143_30", me = {
-  "file-dropbox": "_file-dropbox_qf143_3",
-  "is-dragging": "_is-dragging_qf143_11",
-  "is-disabled": "_is-disabled_qf143_20",
-  "upload-icon": "_upload-icon_qf143_25",
-  "remove-button": "_remove-button_qf143_30",
+}), fe = "_button_e6txj_30", me = {
+  "file-dropbox": "_file-dropbox_e6txj_3",
+  "is-dragging": "_is-dragging_e6txj_11",
+  "is-disabled": "_is-disabled_e6txj_20",
+  "upload-icon": "_upload-icon_e6txj_25",
+  "remove-button": "_remove-button_e6txj_30",
   button: fe
 }, ve = {
   $style: me
 }, Ie = /* @__PURE__ */ ie(ue, [["__cssModules", ve]]);
 export {
-  M as FILE_TYPES,
+  w as FILE_TYPES,
   h as FileUploadSizes,
   Ie as default
 };