@leaflink/stash 42.4.4 → 42.5.1

package/dist/DatePicker.vue.d.ts

@@ -5,6 +5,7 @@ import { DateRangeSource } from 'v-calendar/dist/types/src/utils/date/range';
 import { DateRangeSource as DateRangeSource_2 } from 'v-calendar/dist/types/src/utils/date/range.js';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
+import { PopoverOptions } from 'v-calendar/dist/types/src/utils/popovers';
 import { PropType } from 'vue';
 import { VNodeProps } from 'vue';
 
@@ -35,6 +36,10 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
+declare interface DatePickerPopoverOptions extends Partial<PopoverOptions> {
+    positionFixed?: boolean;
+}
+
 declare interface DatePickerProps {
     /**
      * Dates or date range objects that are available for selection or navigation.
@@ -52,6 +57,12 @@ declare interface DatePickerProps {
      * @see: https://vcalendar.io/api/v2.0/calendar.html#disabled-dates
      */
     disabledDates?: DateRangeSource[];
+    /**
+     * Adds default modifiers to make the calendar popover teleport; useful in preventing the calendar
+     * popover from getting hidden behind its containing element.
+     * Although we are not using vue teleport, this name is to future-proof the prop name for when the vCalendar is updated to use teleport internally.
+     */
+    enableTeleport?: boolean;
     /**
      * Error text to display. Replaces `hintText` (if provided) & adds error styling.
      */
@@ -124,6 +135,11 @@ declare interface DatePickerProps {
      * `placeholder' property for datepicker input
      */
     placeholder?: string;
+    /**
+     * Popover configuration; v-calendar uses Popover internally.
+     * @see https://v2--vcalendar.netlify.app/api/v2.0/datepicker.html#popover
+     */
+    popoverOptions?: DatePickerPopoverOptions;
     /**
      * `timezone` TZ DB time zone property
      * @see https://vcalendar.io/i18n/timezones.html
@@ -155,6 +171,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     modelValue: string;
     name: string;
     placeholder: undefined;
+    enableTeleport: boolean;
     timeZone: string;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "update:model-value": (date: string | number | Date) => void;
@@ -179,6 +196,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     modelValue: string;
     name: string;
     placeholder: undefined;
+    enableTeleport: boolean;
     timeZone: string;
 }>>> & {
     onBlur?: (() => any) | undefined;
@@ -193,6 +211,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     errorText: string;
     hintText: string;
     modelValue: string;
+    enableTeleport: boolean;
     mode: "time" | "date" | "dateTime";
     timeZone: string;
     format: string;

package/dist/Dialog.js

@@ -1,18 +1,15 @@
 import { defineComponent as V, useSlots as $, useAttrs as K, useCssModule as Z, ref as C, computed as n, watchEffect as z, nextTick as A, openBlock as s, createBlock as f, Transition as H, withCtx as m, createElementBlock as p, mergeProps as L, unref as e, withKeys as P, createElementVNode as a, normalizeClass as o, createCommentVNode as r, toDisplayString as _, renderSlot as Y, createTextVNode as T, createVNode as F } from "vue";
-import { c as S } from "./capitalize-667d9f60.js";
-import { u as G } from "./uniqueId-847efe53.js";
+import S from "lodash-es/capitalize";
+import G from "lodash-es/uniqueId";
 import { b as B, a as I, S as J } from "./statusLevels-2c64f4f8.js";
 import { t as c } from "./locale.js";
 import q from "./Button.js";
 import O from "./Icon.js";
 import { _ as Q } from "./_plugin-vue_export-helper-dad06003.js";
-import "./toString-7d5bf363.js";
-import "./isObjectLike-54341556.js";
-import "./get-27d90892.js";
-import "./_MapCache-65811284.js";
+import "lodash-es/get";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
 import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const R = ["open", "aria-labelledby", "data-test", "onKeydown"], U = ["id"], W = {
   key: 0,
   class: "tw-mb-0"
@@ -147,8 +144,8 @@ const R = ["open", "aria-labelledby", "data-test", "onKeydown"], U = ["id"], W =
   footer: lt
 }, ct = {
   $style: rt
-}, Ct = /* @__PURE__ */ Q(et, [["__cssModules", ct]]);
+}, vt = /* @__PURE__ */ Q(et, [["__cssModules", ct]]);
 export {
-  Ct as default
+  vt 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     * 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    alert: false,\n    status: undefined,\n  });\n\n  defineOptions({\n    name: 'll-dialog',\n    inheritAttrs: false,\n  });\n\n  const emits =\n    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  /**\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 or not\n   * the alert prop is true.\n   */\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 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    isConfirming.value = true;\n\n    // useAttrs returns a Record<string, unknown> type, which causes\n    // TS errors when trying to call a passed listener\n    const onConfirm = attrs.onConfirm as (event: Event) => void;\n\n    // Call the parent confirm listener and await it. Using Async/Await lets\n    // us await even non-promises. Pass the event so modifiers can work.\n    await onConfirm(event);\n    isConfirming.value = false;\n  }\n\n  watchEffect(() => {\n    if (props.open) {\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=\"classes.dialog\"\n      :data-test=\"attrs['data-test'] || 'll-dialog'\"\n      v-bind=\"attrs\"\n      @keydown.esc=\"cancel\"\n    >\n      <div\n        :class=\"[\n          classes.body,\n          `tw-border-${statusColor}`,\n          {\n            'tw-border-t-6': props.status,\n          },\n        ]\"\n      >\n        <div :class=\"classes.content\">\n          <div class=\"flex items-center\" :class=\"hasDescription && 'tw-mb-1.5'\">\n            <Icon\n              v-if=\"props.status\"\n              data-test=\"dialog-status-icon\"\n              :name=\"statusIcon\"\n              :class=\"`tw-text-${statusColor}`\"\n            />\n            <h3 :id=\"headerId\" :class=\"{ 'tw-ml-1.5 tw-mt-px': props.status }\">{{ props.header }}</h3>\n          </div>\n\n          <p v-if=\"hasDescription\" class=\"tw-mb-0\">\n            <slot v-if=\"slots.default\"></slot>\n            <span v-else v-html=\"props.description\"></span>\n          </p>\n        </div>\n\n        <footer :class=\"classes.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 || 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 lang=\"scss\" module>\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: z-index('dialog');\n    width: 100%;\n    height: 100vh;\n  }\n\n  .body {\n    @include elevation('low');\n\n    background: var(--color-white);\n    border-radius: $border-radius;\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 $primary-transition;\n    width: 100%;\n\n    &.grey {\n      background: var(--color-ice-200);\n      border-radius: $border-radius;\n    }\n  }\n\n  .content {\n    flex-grow: 1;\n    padding: space(3) var(--grid-gutter);\n  }\n\n  .footer {\n    background: var(--color-ice-200);\n    border-top: border('thin', var(--color-ice));\n    display: initial; // TEMP. Will need to fix marketplace `footer` style\n    padding: space(3) var(--grid-gutter);\n\n    @include breakpoint('md') {\n      border-bottom-left-radius: $border-radius;\n      border-bottom-right-radius: $border-radius;\n    }\n  }\n\n  :global(.fade-enter-from),\n  :global(.fade-leave-active) {\n    .body {\n      transform: translate3d(0, #{space(2)}, 0);\n    }\n  }\n</style>\n"],"names":["slots","useSlots","attrs","useAttrs","classes","useCssModule","headerId","uniqueId","isConfirming","ref","root","modifiedConfirmText","computed","props","t","hasDescription","statusIcon","StatusIcons","capitalize","statusColor","StatusColors","computedDangerZone","StatusSeverities","cancel","emits","handleConfirm","event","onConfirm","watchEffect","nextTick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4FQA,IAAQC,KACRC,IAAQC,KACRC,IAAUC,KACVC,IAAWC,EAAS,gBAAgB,GAEpCC,IAAeC,EAAI,EAAK,GACxBC,IAAOD,KAQPE,IAAsBC,EAAS,MAAMC,EAAM,gBAAgBA,EAAM,QAAQC,EAAE,SAAS,IAAIA,EAAE,YAAY,EAAE,GAExGC,IAAiBH,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAWa,EAAM,WAAW,GAEpEG,IAAaJ;AAAA,MAAqB,MACtCC,EAAM,SAASI,EAAYC,EAAWL,EAAM,MAAM,CAAC,IAAII,EAAY;AAAA,IAAA,GAE/DE,IAAcP;AAAA,MAAsB,MACxCC,EAAM,SAASO,EAAaF,EAAWL,EAAM,MAAM,CAAC,IAAIO,EAAa;AAAA,IAAA,GAGjEC,IAAqBT,EAAS,MAAMC,EAAM,cAAcA,EAAM,WAAWS,EAAiB,KAAK;AAErG,aAASC,IAAS;AAChB,MAAAC,EAAM,eAAe,EAAK,GAC1BA,EAAM,QAAQ;AAAA,IAChB;AAEA,mBAAeC,EAAcC,GAAc;AACzC,MAAAlB,EAAa,QAAQ;AAIrB,YAAMmB,IAAYzB,EAAM;AAIxB,YAAMyB,EAAUD,CAAK,GACrBlB,EAAa,QAAQ;AAAA,IACvB;AAEA,WAAAoB,EAAY,MAAM;AAChB,MAAIf,EAAM,QAERgB,EAAS,WAAY;AACnB,QAAAnB,EAAK,MAAM;MAAM,CAClB;AAAA,IACH,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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     * 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    alert: false,\n    status: undefined,\n  });\n\n  defineOptions({\n    name: 'll-dialog',\n    inheritAttrs: false,\n  });\n\n  const emits =\n    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  /**\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 or not\n   * the alert prop is true.\n   */\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 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    isConfirming.value = true;\n\n    // useAttrs returns a Record<string, unknown> type, which causes\n    // TS errors when trying to call a passed listener\n    const onConfirm = attrs.onConfirm as (event: Event) => void;\n\n    // Call the parent confirm listener and await it. Using Async/Await lets\n    // us await even non-promises. Pass the event so modifiers can work.\n    await onConfirm(event);\n    isConfirming.value = false;\n  }\n\n  watchEffect(() => {\n    if (props.open) {\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=\"classes.dialog\"\n      :data-test=\"attrs['data-test'] || 'll-dialog'\"\n      v-bind=\"attrs\"\n      @keydown.esc=\"cancel\"\n    >\n      <div\n        :class=\"[\n          classes.body,\n          `tw-border-${statusColor}`,\n          {\n            'tw-border-t-6': props.status,\n          },\n        ]\"\n      >\n        <div :class=\"classes.content\">\n          <div class=\"flex items-center\" :class=\"hasDescription && 'tw-mb-1.5'\">\n            <Icon\n              v-if=\"props.status\"\n              data-test=\"dialog-status-icon\"\n              :name=\"statusIcon\"\n              :class=\"`tw-text-${statusColor}`\"\n            />\n            <h3 :id=\"headerId\" :class=\"{ 'tw-ml-1.5 tw-mt-px': props.status }\">{{ props.header }}</h3>\n          </div>\n\n          <p v-if=\"hasDescription\" class=\"tw-mb-0\">\n            <slot v-if=\"slots.default\"></slot>\n            <span v-else v-html=\"props.description\"></span>\n          </p>\n        </div>\n\n        <footer :class=\"classes.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 || 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 lang=\"scss\" module>\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: z-index('dialog');\n    width: 100%;\n    height: 100vh;\n  }\n\n  .body {\n    @include elevation('low');\n\n    background: var(--color-white);\n    border-radius: $border-radius;\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 $primary-transition;\n    width: 100%;\n\n    &.grey {\n      background: var(--color-ice-200);\n      border-radius: $border-radius;\n    }\n  }\n\n  .content {\n    flex-grow: 1;\n    padding: space(3) var(--grid-gutter);\n  }\n\n  .footer {\n    background: var(--color-ice-200);\n    border-top: border('thin', var(--color-ice));\n    display: initial; // TEMP. Will need to fix marketplace `footer` style\n    padding: space(3) var(--grid-gutter);\n\n    @include breakpoint('md') {\n      border-bottom-left-radius: $border-radius;\n      border-bottom-right-radius: $border-radius;\n    }\n  }\n\n  :global(.fade-enter-from),\n  :global(.fade-leave-active) {\n    .body {\n      transform: translate3d(0, #{space(2)}, 0);\n    }\n  }\n</style>\n"],"names":["slots","useSlots","attrs","useAttrs","classes","useCssModule","headerId","uniqueId","isConfirming","ref","root","modifiedConfirmText","computed","props","t","hasDescription","statusIcon","StatusIcons","capitalize","statusColor","StatusColors","computedDangerZone","StatusSeverities","cancel","emits","handleConfirm","event","onConfirm","watchEffect","nextTick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4FQA,IAAQC,KACRC,IAAQC,KACRC,IAAUC,KACVC,IAAWC,EAAS,gBAAgB,GAEpCC,IAAeC,EAAI,EAAK,GACxBC,IAAOD,KAQPE,IAAsBC,EAAS,MAAMC,EAAM,gBAAgBA,EAAM,QAAQC,EAAE,SAAS,IAAIA,EAAE,YAAY,EAAE,GAExGC,IAAiBH,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAWa,EAAM,WAAW,GAEpEG,IAAaJ;AAAA,MAAqB,MACtCC,EAAM,SAASI,EAAYC,EAAWL,EAAM,MAAM,CAAC,IAAII,EAAY;AAAA,IAAA,GAE/DE,IAAcP;AAAA,MAAsB,MACxCC,EAAM,SAASO,EAAaF,EAAWL,EAAM,MAAM,CAAC,IAAIO,EAAa;AAAA,IAAA,GAGjEC,IAAqBT,EAAS,MAAMC,EAAM,cAAcA,EAAM,WAAWS,EAAiB,KAAK;AAErG,aAASC,IAAS;AAChB,MAAAC,EAAM,eAAe,EAAK,GAC1BA,EAAM,QAAQ;AAAA,IAChB;AAEA,mBAAeC,EAAcC,GAAc;AACzC,MAAAlB,EAAa,QAAQ;AAIrB,YAAMmB,IAAYzB,EAAM;AAIxB,YAAMyB,EAAUD,CAAK,GACrBlB,EAAa,QAAQ;AAAA,IACvB;AAEA,WAAAoB,EAAY,MAAM;AAChB,MAAIf,EAAM,QAERgB,EAAS,WAAY;AACnB,QAAAnB,EAAK,MAAM;MAAM,CAClB;AAAA,IACH,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Dropdown.js

@@ -1,22 +1,17 @@
-import { defineComponent as R, ref as u, useCssModule as z, watch as C, onMounted as I, onBeforeUnmount as q, computed as K, withDirectives as _, openBlock as p, createElementBlock as k, renderSlot as x, createElementVNode as E, normalizeClass as b, createTextVNode as U, toDisplayString as V, createVNode as S, createBlock as W, Transition as Y, withCtx as F, unref as M, normalizeStyle as j, vShow as G, nextTick as A } from "vue";
+import { defineComponent as R, ref as u, useCssModule as z, watch as C, onMounted as I, onBeforeUnmount as q, computed as K, withDirectives as _, openBlock as v, createElementBlock as k, renderSlot as x, createElementVNode as E, normalizeClass as b, createTextVNode as U, toDisplayString as V, createVNode as S, createBlock as W, Transition as Y, withCtx as F, unref as M, normalizeStyle as j, vShow as G, nextTick as A } from "vue";
 import { KEY_CODES as d } from "./constants.js";
 import H from "./clickoutside.js";
 import J from "./utils/calculateElementOverflow.js";
 import { getMountPoint as Q } from "./utils/helpers.js";
 import B from "./Icon.js";
 import { _ as X } from "./_plugin-vue_export-helper-dad06003.js";
-import "./capitalize-667d9f60.js";
-import "./toString-7d5bf363.js";
-import "./isObjectLike-54341556.js";
-import "./_createCompounder-ae01a723.js";
-import "./get-27d90892.js";
-import "./_MapCache-65811284.js";
-import "./isPlainObject-55c7f916.js";
-import "./_getPrototype-3e6fccd6.js";
-import "./_overArg-6d920d99.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import "./uniqueId-847efe53.js";
+import "lodash-es/camelCase";
+import "lodash-es/get";
+import "lodash-es/isFinite";
+import "lodash-es/isPlainObject";
+import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const Z = ["aria-expanded"], ee = {
   key: 0,
   class: "tw-font-medium tw-flex tw-items-center tw-text-blue hover:tw-text-blue-700"
@@ -33,10 +28,10 @@ const Z = ["aria-expanded"], ee = {
     fluidContent: { type: Boolean, default: !1 }
   },
   emits: ["toggle", "dismiss"],
-  setup(D, { expose: $, emit: v }) {
+  setup(D, { expose: $, emit: p }) {
     const a = D, t = u(null), w = u(null), f = [], s = u(f), i = u(-1), o = u(!1), g = u({}), L = z();
     C(o, (e) => {
-      e || (i.value = -1), v("toggle", e);
+      e || (i.value = -1), p("toggle", e);
     }), C(i, (e, l) => {
       e in s.value && s.value[e].classList.add("is-highlighted"), l in s.value && s.value[l].classList.remove("is-highlighted");
     }), I(() => {
@@ -55,7 +50,7 @@ const Z = ["aria-expanded"], ee = {
       if (a.closeManually && ((n = t.value) != null && n.contains(e == null ? void 0 : e.target) || t.value === (e == null ? void 0 : e.target)))
         return;
       const l = o.value;
-      o.value = !1, l && v("dismiss");
+      o.value = !1, l && p("dismiss");
     }
     async function m() {
       var e;
@@ -101,7 +96,7 @@ const Z = ["aria-expanded"], ee = {
       isActive: K(() => o.value),
       toggle: m,
       dismiss: r
-    }), (e, l) => _((p(), k("div", {
+    }), (e, l) => _((v(), k("div", {
       ref_key: "dropdownRef",
       ref: w,
       class: "tw-inline-block tw-relative",
@@ -118,10 +113,10 @@ const Z = ["aria-expanded"], ee = {
           class: b([e.label ? "button--tertiary tw-outline-none tw-min-w-auto" : "button--icon button tw-rounded"]),
           onClick: m
         }, [
-          e.label ? (p(), k("span", ee, [
+          e.label ? (v(), k("span", ee, [
             U(V(e.label) + " ", 1),
             S(B, { name: "caret-down" })
-          ])) : (p(), W(B, {
+          ])) : (v(), W(B, {
             key: 1,
             name: "ellipsis"
           }))
@@ -165,8 +160,8 @@ const Z = ["aria-expanded"], ee = {
   content: oe
 }, ae = {
   $style: le
-}, Ee = /* @__PURE__ */ X(te, [["__cssModules", ae]]);
+}, ye = /* @__PURE__ */ X(te, [["__cssModules", ae]]);
 export {
-  Ee as default
+  ye as default
 };
 //# sourceMappingURL=Dropdown.js.map

package/dist/Dropdown.js.map

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

package/dist/EmptyState.js

@@ -1,11 +1,8 @@
-import { defineComponent as n, useCssModule as i, useSlots as p, openBlock as o, createElementBlock as a, normalizeClass as r, unref as e, renderSlot as d, createCommentVNode as u, createTextVNode as y, toDisplayString as f } from "vue";
+import { defineComponent as n, useCssModule as i, useSlots as p, openBlock as a, createElementBlock as o, normalizeClass as l, unref as e, renderSlot as d, createCommentVNode as u, createTextVNode as y, toDisplayString as f } from "vue";
 import { t as g } from "./locale.js";
 import { s as _ } from "./EmptyState.vue_used_vue_type_style_index_0_lang.module-2f171ae7.js";
 import { _ as x } from "./_plugin-vue_export-helper-dad06003.js";
-import "./get-27d90892.js";
-import "./isObjectLike-54341556.js";
-import "./toString-7d5bf363.js";
-import "./_MapCache-65811284.js";
+import "lodash-es/get";
 const S = ["alt", "src"], k = /* @__PURE__ */ n({
   name: "ll-empty-state",
   __name: "EmptyState",
@@ -16,17 +13,17 @@ const S = ["alt", "src"], k = /* @__PURE__ */ n({
     }) },
     text: { default: "" }
   },
-  setup(l) {
-    const t = l, s = i(), m = p();
-    return (c, h) => (o(), a("div", {
+  setup(r) {
+    const t = r, s = i(), m = p();
+    return (c, h) => (a(), o("div", {
       key: "empty",
-      class: r(["stash-empty-state flex align-center align-middle tw-py-12", [e(s).root, { "text-center": !t.image.src && !e(m).image }]]),
+      class: l(["stash-empty-state flex align-center align-middle tw-py-12", [e(s).root, { "text-center": !t.image.src && !e(m).image }]]),
       "data-test": "ll-empty-state"
     }, [
       d(c.$slots, "image", {}, () => [
-        t.image.src ? (o(), a("img", {
+        t.image.src ? (a(), o("img", {
           key: 0,
-          class: r(["tw-mr-6", e(s).image]),
+          class: l(["tw-mr-6", e(s).image]),
           alt: t.image.alt,
           src: t.image.src
         }, null, 10, S)) : u("", !0)
@@ -36,8 +33,8 @@ const S = ["alt", "src"], k = /* @__PURE__ */ n({
   }
 }), C = {
   $style: _
-}, z = /* @__PURE__ */ x(k, [["__cssModules", C]]);
+}, V = /* @__PURE__ */ x(k, [["__cssModules", C]]);
 export {
-  z as default
+  V as default
 };
 //# sourceMappingURL=EmptyState.js.map

package/dist/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n\n  export interface EmptyStateProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    image?: {\n      alt?: string;\n      src: string;\n    };\n    text?: string;\n  }\n\n  defineOptions({\n    name: 'll-empty-state',\n  });\n\n  const props = withDefaults(defineProps<EmptyStateProps>(), {\n    /**\n     * An optional image to render\n     */\n    image: () => ({\n      alt: '',\n      src: '',\n    }),\n\n    /**\n     * The custom message to render\n     */\n    text: '',\n  });\n\n  const classes = useCssModule();\n  const slots = useSlots();\n</script>\n\n<template>\n  <div\n    key=\"empty\"\n    class=\"stash-empty-state flex align-center align-middle tw-py-12\"\n    data-test=\"ll-empty-state\"\n    :class=\"[classes.root, { 'text-center': !props.image.src && !slots.image }]\"\n  >\n    <slot name=\"image\">\n      <img\n        v-if=\"props.image.src\"\n        class=\"tw-mr-6\"\n        :alt=\"props.image.alt\"\n        :class=\"classes.image\"\n        :src=\"props.image.src\"\n      />\n    </slot>\n\n    {{ props.text || t('ll.emptyState.noResults') }}\n  </div>\n</template>\n\n<style module>\n  .root {\n    margin: 0 auto;\n    max-width: 600px;\n  }\n\n  .image {\n    max-width: 60px;\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots"],"mappings":";;;;;;;;;;;;;;;;;;;iBAmCQA,IAAUC,KACVC,IAAQC;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"EmptyState.js","sources":["../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n\n  export interface EmptyStateProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    image?: {\n      alt?: string;\n      src: string;\n    };\n    text?: string;\n  }\n\n  defineOptions({\n    name: 'll-empty-state',\n  });\n\n  const props = withDefaults(defineProps<EmptyStateProps>(), {\n    /**\n     * An optional image to render\n     */\n    image: () => ({\n      alt: '',\n      src: '',\n    }),\n\n    /**\n     * The custom message to render\n     */\n    text: '',\n  });\n\n  const classes = useCssModule();\n  const slots = useSlots();\n</script>\n\n<template>\n  <div\n    key=\"empty\"\n    class=\"stash-empty-state flex align-center align-middle tw-py-12\"\n    data-test=\"ll-empty-state\"\n    :class=\"[classes.root, { 'text-center': !props.image.src && !slots.image }]\"\n  >\n    <slot name=\"image\">\n      <img\n        v-if=\"props.image.src\"\n        class=\"tw-mr-6\"\n        :alt=\"props.image.alt\"\n        :class=\"classes.image\"\n        :src=\"props.image.src\"\n      />\n    </slot>\n\n    {{ props.text || t('ll.emptyState.noResults') }}\n  </div>\n</template>\n\n<style module>\n  .root {\n    margin: 0 auto;\n    max-width: 600px;\n  }\n\n  .image {\n    max-width: 60px;\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots"],"mappings":";;;;;;;;;;;;;;;;iBAmCQA,IAAUC,KACVC,IAAQC;;;;;;;;;;;;;;;;;;;;"}

package/dist/Field.js

@@ -1,12 +1,9 @@
-import { _ as o } from "./Field.vue_vue_type_script_setup_true_lang-c864abd3.js";
+import { _ as o } from "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
 import "vue";
-import "./uniqueId-847efe53.js";
-import "./toString-7d5bf363.js";
-import "./isObjectLike-54341556.js";
+import "lodash-es/uniqueId";
 import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
 import "./locale.js";
-import "./get-27d90892.js";
-import "./_MapCache-65811284.js";
+import "lodash-es/get";
 export {
   o as default
 };

package/dist/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"Field.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/{Field.vue_vue_type_script_setup_true_lang-c864abd3.js → Field.vue_vue_type_script_setup_true_lang-475832fe.js}

@@ -1,5 +1,5 @@
 import { defineComponent as x, useAttrs as k, useSlots as T, computed as a, openBlock as l, createBlock as m, resolveDynamicComponent as B, mergeProps as O, unref as f, withCtx as v, normalizeClass as R, createTextVNode as q, toDisplayString as p, createCommentVNode as s, createElementBlock as o, renderSlot as c } from "vue";
-import { u as h } from "./uniqueId-847efe53.js";
+import h from "lodash-es/uniqueId";
 import { _ as E } from "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
 const L = ["aria-labelledby"], S = ["id"], C = {
   key: 4,
@@ -93,4 +93,4 @@ const L = ["aria-labelledby"], S = ["id"], C = {
 export {
   z as _
 };
-//# sourceMappingURL=Field.vue_vue_type_script_setup_true_lang-c864abd3.js.map
+//# sourceMappingURL=Field.vue_vue_type_script_setup_true_lang-475832fe.js.map

package/dist/{Field.vue_vue_type_script_setup_true_lang-c864abd3.js.map → Field.vue_vue_type_script_setup_true_lang-475832fe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-c864abd3.js","sources":["../src/components/Field/Field.vue"],"sourcesContent":["<script lang=\"ts\">\n  export default {\n    inheritAttrs: false,\n  };\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useSlots } from 'vue';\n\n  import Label from '../Label/Label.vue';\n\n  export interface FieldProps {\n    /**\n     * Adds spacing under the field that is consistent whether or not hint/error text is displayed.\n     */\n    addBottomSpace?: boolean;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * ID for the Label and Input; must be unique\n     */\n    id?: string;\n\n    /**\n     * ID for the error text element; useful for aria-errormessage\n     */\n    errorId?: string;\n\n    /**\n     * Whether it's a readonly field.\n     */\n    isReadOnly?: boolean;\n\n    /**\n     * Whether the field is required.\n     */\n    isRequired?: boolean;\n\n    /**\n     * Label to render above the input.\n     */\n    label?: string;\n\n    /**\n     * Show \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n\n    /**\n     * Indicates wheter the field is a fieldset or not\n     */\n    fieldset?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FieldProps>(), {\n    addBottomSpace: false,\n    errorText: undefined,\n    hintText: undefined,\n    id: undefined,\n    errorId: undefined,\n    isRequired: false,\n    label: undefined,\n    showOptionalInLabel: false,\n    fieldset: false,\n  });\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const fieldId = computed(() => props.id || uniqueId('field-'));\n  const fieldErrorId = computed(() => props.errorId || uniqueId('field-error-'));\n  const labelId = computed(() => uniqueId('field-label-'));\n  const hasError = computed(() => !!props.errorText);\n  const wrapperElement = computed(() => (props.fieldset ? 'fieldset' : 'div'));\n\n  // Any attributes that are unique to form elements, you want to exclude from\n  // being bound from the root element.\n  const rootAttrs = computed(() => {\n    const { placeholder, ...otherAttrs } = attrs;\n\n    return otherAttrs;\n  });\n</script>\n\n<template>\n  <component\n    v-bind=\"rootAttrs\"\n    :is=\"wrapperElement\"\n    :class=\"[\n      { 'tw-p-0': props.fieldset },\n      { 'tw-mb-9': props.addBottomSpace && !props.errorText && !props.hintText && !slots.hint },\n      { 'tw-mb-4': props.addBottomSpace && (props.errorText || props.hintText || slots.hint) },\n    ]\"\n  >\n    <Label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :class=\"{ 'tw-mb-1.5': !!props.isReadOnly }\"\n      :for=\"fieldId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :show-optional=\"props.showOptionalInLabel\"\n      :legend=\"props.fieldset\"\n    >\n      {{ props.label }}\n    </Label>\n\n    <!-- @slot for the form field; the Label can also be rendered here instead of using the label prop -->\n    <template v-if=\"props.isReadOnly\">\n      <div :aria-labelledby=\"labelId\">\n        <slot\n          :field-id=\"fieldId\"\n          :field-error-id=\"fieldErrorId\"\n          :has-error=\"hasError\"\n          :is-required=\"isRequired\"\n          :label-id=\"labelId\"\n          :show-optional-in-label=\"props.showOptionalInLabel\"\n        ></slot>\n      </div>\n    </template>\n    <template v-else>\n      <slot\n        :field-id=\"fieldId\"\n        :field-error-id=\"fieldErrorId\"\n        :has-error=\"hasError\"\n        :is-required=\"isRequired\"\n        :label-id=\"labelId\"\n        :show-optional-in-label=\"props.showOptionalInLabel\"\n      ></slot>\n    </template>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"fieldErrorId\"\n      class=\"tw-block tw-text-xs tw-mt-1 tw-whitespace-pre-line tw-text-red-500\"\n      data-test=\"field-error\"\n    >\n      {{ props.errorText }}\n    </span>\n\n    <span v-else-if=\"props.hintText\" class=\"tw-block tw-text-xs tw-mt-1 tw-whitespace-pre-line\" data-test=\"field-hint\">\n      <span v-if=\"!props.isReadOnly\">{{ props.hintText }}</span>\n    </span>\n\n    <div v-else-if=\"slots.hint\" class=\"tw-text-xs tw-mt-1 tw-whitespace-pre-line\" data-test=\"field-hint\">\n      <!-- @slot for displaying hint text below the field -->\n      <slot v-if=\"!props.isReadOnly\" name=\"hint\"></slot>\n    </div>\n  </component>\n</template>\n"],"names":["attrs","useAttrs","slots","useSlots","fieldId","computed","props","uniqueId","fieldErrorId","labelId","hasError","wrapperElement","rootAttrs","placeholder","otherAttrs"],"mappings":";;;;;;;;;;;OACiB;AAAA,EACb,cAAc;AAChB;;;;;;;;;;;;;;;;iBAwEMA,IAAQC,KACRC,IAAQC,KACRC,IAAUC,EAAS,MAAMC,EAAM,MAAMC,EAAS,QAAQ,CAAC,GACvDC,IAAeH,EAAS,MAAMC,EAAM,WAAWC,EAAS,cAAc,CAAC,GACvEE,IAAUJ,EAAS,MAAME,EAAS,cAAc,CAAC,GACjDG,IAAWL,EAAS,MAAM,CAAC,CAACC,EAAM,SAAS,GAC3CK,IAAiBN,EAAS,MAAOC,EAAM,WAAW,aAAa,KAAM,GAIrEM,IAAYP,EAAS,MAAM;AAC/B,YAAM,EAAE,aAAAQ,GAAa,GAAGC,EAAA,IAAed;AAEhC,aAAAc;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-475832fe.js","sources":["../src/components/Field/Field.vue"],"sourcesContent":["<script lang=\"ts\">\n  export default {\n    inheritAttrs: false,\n  };\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useSlots } from 'vue';\n\n  import Label from '../Label/Label.vue';\n\n  export interface FieldProps {\n    /**\n     * Adds spacing under the field that is consistent whether or not hint/error text is displayed.\n     */\n    addBottomSpace?: boolean;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * ID for the Label and Input; must be unique\n     */\n    id?: string;\n\n    /**\n     * ID for the error text element; useful for aria-errormessage\n     */\n    errorId?: string;\n\n    /**\n     * Whether it's a readonly field.\n     */\n    isReadOnly?: boolean;\n\n    /**\n     * Whether the field is required.\n     */\n    isRequired?: boolean;\n\n    /**\n     * Label to render above the input.\n     */\n    label?: string;\n\n    /**\n     * Show \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n\n    /**\n     * Indicates wheter the field is a fieldset or not\n     */\n    fieldset?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FieldProps>(), {\n    addBottomSpace: false,\n    errorText: undefined,\n    hintText: undefined,\n    id: undefined,\n    errorId: undefined,\n    isRequired: false,\n    label: undefined,\n    showOptionalInLabel: false,\n    fieldset: false,\n  });\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const fieldId = computed(() => props.id || uniqueId('field-'));\n  const fieldErrorId = computed(() => props.errorId || uniqueId('field-error-'));\n  const labelId = computed(() => uniqueId('field-label-'));\n  const hasError = computed(() => !!props.errorText);\n  const wrapperElement = computed(() => (props.fieldset ? 'fieldset' : 'div'));\n\n  // Any attributes that are unique to form elements, you want to exclude from\n  // being bound from the root element.\n  const rootAttrs = computed(() => {\n    const { placeholder, ...otherAttrs } = attrs;\n\n    return otherAttrs;\n  });\n</script>\n\n<template>\n  <component\n    v-bind=\"rootAttrs\"\n    :is=\"wrapperElement\"\n    :class=\"[\n      { 'tw-p-0': props.fieldset },\n      { 'tw-mb-9': props.addBottomSpace && !props.errorText && !props.hintText && !slots.hint },\n      { 'tw-mb-4': props.addBottomSpace && (props.errorText || props.hintText || slots.hint) },\n    ]\"\n  >\n    <Label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :class=\"{ 'tw-mb-1.5': !!props.isReadOnly }\"\n      :for=\"fieldId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :show-optional=\"props.showOptionalInLabel\"\n      :legend=\"props.fieldset\"\n    >\n      {{ props.label }}\n    </Label>\n\n    <!-- @slot for the form field; the Label can also be rendered here instead of using the label prop -->\n    <template v-if=\"props.isReadOnly\">\n      <div :aria-labelledby=\"labelId\">\n        <slot\n          :field-id=\"fieldId\"\n          :field-error-id=\"fieldErrorId\"\n          :has-error=\"hasError\"\n          :is-required=\"isRequired\"\n          :label-id=\"labelId\"\n          :show-optional-in-label=\"props.showOptionalInLabel\"\n        ></slot>\n      </div>\n    </template>\n    <template v-else>\n      <slot\n        :field-id=\"fieldId\"\n        :field-error-id=\"fieldErrorId\"\n        :has-error=\"hasError\"\n        :is-required=\"isRequired\"\n        :label-id=\"labelId\"\n        :show-optional-in-label=\"props.showOptionalInLabel\"\n      ></slot>\n    </template>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"fieldErrorId\"\n      class=\"tw-block tw-text-xs tw-mt-1 tw-whitespace-pre-line tw-text-red-500\"\n      data-test=\"field-error\"\n    >\n      {{ props.errorText }}\n    </span>\n\n    <span v-else-if=\"props.hintText\" class=\"tw-block tw-text-xs tw-mt-1 tw-whitespace-pre-line\" data-test=\"field-hint\">\n      <span v-if=\"!props.isReadOnly\">{{ props.hintText }}</span>\n    </span>\n\n    <div v-else-if=\"slots.hint\" class=\"tw-text-xs tw-mt-1 tw-whitespace-pre-line\" data-test=\"field-hint\">\n      <!-- @slot for displaying hint text below the field -->\n      <slot v-if=\"!props.isReadOnly\" name=\"hint\"></slot>\n    </div>\n  </component>\n</template>\n"],"names":["attrs","useAttrs","slots","useSlots","fieldId","computed","props","uniqueId","fieldErrorId","labelId","hasError","wrapperElement","rootAttrs","placeholder","otherAttrs"],"mappings":";;;;;;;;;;;OACiB;AAAA,EACb,cAAc;AAChB;;;;;;;;;;;;;;;;iBAwEMA,IAAQC,KACRC,IAAQC,KACRC,IAAUC,EAAS,MAAMC,EAAM,MAAMC,EAAS,QAAQ,CAAC,GACvDC,IAAeH,EAAS,MAAMC,EAAM,WAAWC,EAAS,cAAc,CAAC,GACvEE,IAAUJ,EAAS,MAAME,EAAS,cAAc,CAAC,GACjDG,IAAWL,EAAS,MAAM,CAAC,CAACC,EAAM,SAAS,GAC3CK,IAAiBN,EAAS,MAAOC,EAAM,WAAW,aAAa,KAAM,GAIrEM,IAAYP,EAAS,MAAM;AAC/B,YAAM,EAAE,aAAAQ,GAAa,GAAGC,EAAA,IAAed;AAEhC,aAAAc;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FileUpload.js

@@ -2,15 +2,12 @@ import { I as x } from "./index-79ce320f.js";
 import { t as u } from "./locale.js";
 import F from "./Button.js";
 import O from "./Icon.js";
-import { resolveComponent as g, openBlock as n, createElementBlock as o, normalizeClass as d, createVNode as h, withModifiers as c, withCtx as T, createTextVNode as y, toDisplayString as p, createElementVNode as f, Fragment as E, createBlock as C, createCommentVNode as b, renderSlot as S, renderList as w, withDirectives as U, mergeProps as M, vShow as N } from "vue";
+import { resolveComponent as g, openBlock as r, createElementBlock as o, normalizeClass as d, createVNode as h, withModifiers as c, withCtx as T, createTextVNode as y, toDisplayString as p, createElementVNode as f, Fragment as E, createBlock as C, createCommentVNode as b, renderSlot as S, renderList as w, withDirectives as U, mergeProps as M, vShow as N } from "vue";
 import { _ as P } from "./_plugin-vue_export-helper-dad06003.js";
-import "./get-27d90892.js";
-import "./isObjectLike-54341556.js";
-import "./toString-7d5bf363.js";
-import "./_MapCache-65811284.js";
+import "lodash-es/get";
 import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import "./uniqueId-847efe53.js";
+import "lodash-es/uniqueId";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const A = "_button_fvrzb_201", L = {
   "file-dropbox": "_file-dropbox_fvrzb_176",
   "is-dragging": "_is-dragging_fvrzb_184",
@@ -205,11 +202,11 @@ const A = "_button_fvrzb_201", L = {
         if (e.type)
           return t(e.type);
         if (window.FileReader) {
-          const r = new FileReader();
-          r.onload = () => {
-            const a = r.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/) ? r.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0] : "";
-            t(a);
-          }, r.readAsDataURL(e);
+          const a = new FileReader();
+          a.onload = () => {
+            const n = a.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/) ? a.result.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0] : "";
+            t(n);
+          }, a.readAsDataURL(e);
         } else
           i(new Error("Failed to read file."));
       });
@@ -222,13 +219,13 @@ const A = "_button_fvrzb_201", L = {
   key: 0,
   class: "tw-mt-6 text-center text-small text-ice-700"
 }, Y = ["accept", "multiple"];
-function B(e, t, i, r, a, l) {
+function B(e, t, i, a, n, l) {
   const m = g("ll-button"), D = g("InlineSvg"), I = g("ll-icon");
-  return n(), o("div", {
+  return r(), o("div", {
     class: d(e.$attrs.class),
     "data-test": e.$attrs["data-test"]
   }, [
-    i.buttonOnly ? (n(), o("div", R, [
+    i.buttonOnly ? (r(), o("div", R, [
       h(m, {
         secondary: "",
         type: "button",
@@ -236,21 +233,21 @@ function B(e, t, i, r, a, l) {
         onClick: c(l.openFileDialog, ["stop", "prevent"])
       }, {
         default: T(() => [
-          y(p(a.fileUploadUploadFileText), 1)
+          y(p(n.fileUploadUploadFileText), 1)
         ]),
         _: 1
       }, 8, ["disabled", "onClick"])
-    ])) : (n(), o("div", {
+    ])) : (r(), o("div", {
       key: 1,
-      class: d(["tw-p-6 rounded", [e.$style["file-dropbox"], a.isDraggingOver && e.$style["is-dragging"], i.disabled && e.$style["is-disabled"]]]),
+      class: d(["tw-p-6 rounded", [e.$style["file-dropbox"], n.isDraggingOver && e.$style["is-dragging"], i.disabled && e.$style["is-disabled"]]]),
       onDragover: t[0] || (t[0] = c((...s) => l.handleDragEnter && l.handleDragEnter(...s), ["prevent"])),
       onDrop: t[1] || (t[1] = c((...s) => l.handleDropFile && l.handleDropFile(...s), ["prevent"])),
       onDragleave: t[2] || (t[2] = c((...s) => l.handleDragLeave && l.handleDragLeave(...s), ["prevent"]))
     }, [
       f("div", {
-        class: d(["flex text-center flex-column align-center align-middle", [{ "items-center md:flex-row": i.size === r.Sizes.Dense }]])
+        class: d(["flex text-center flex-column align-center align-middle", [{ "items-center md:flex-row": i.size === a.Sizes.Dense }]])
       }, [
-        i.files.length ? (n(!0), o(E, { key: 1 }, w(i.files, (s) => (n(), o("div", {
+        i.files.length ? (r(!0), o(E, { key: 1 }, w(i.files, (s) => (r(), o("div", {
           key: s.name
         }, [
           h(I, { name: "file" }),
@@ -260,22 +257,22 @@ function B(e, t, i, r, a, l) {
             onClick: c((H) => l.handleFileDelete(s), ["stop", "prevent"])
           }, {
             default: T(() => [
-              y(p(a.removeText), 1)
+              y(p(n.removeText), 1)
             ]),
             _: 2
           }, 1032, ["class", "onClick"])
-        ]))), 128)) : (n(), o(E, { key: 0 }, [
-          i.size !== r.Sizes.Dense ? (n(), C(D, {
+        ]))), 128)) : (r(), o(E, { key: 0 }, [
+          i.size !== a.Sizes.Dense ? (r(), C(D, {
             key: 0,
             src: l.illustrationPath,
             name: "file",
             width: "84",
             height: "96"
           }, null, 8, ["src"])) : b("", !0),
-          f("span", j, p(a.fileUploadDragDropFileHereText), 1),
+          f("span", j, p(n.fileUploadDragDropFileHereText), 1),
           f("span", {
-            class: d(i.size === r.Sizes.Dense ? "md:ml-1 md:mr-2 md:my-0 my-1 text-ice-900" : "tw-mt-1.5 my-1")
-          }, p(a.fileUploadOrText), 3),
+            class: d(i.size === a.Sizes.Dense ? "md:ml-1 md:mr-2 md:my-0 my-1 text-ice-900" : "tw-mt-1.5 my-1")
+          }, p(n.fileUploadOrText), 3),
           h(m, {
             class: d(["tw-mt-1.5", e.$style["file-select-button"]]),
             secondary: "",
@@ -285,14 +282,14 @@ function B(e, t, i, r, a, l) {
           }, {
             default: T(() => [
               S(e.$slots, "submitText", {}, () => [
-                y(p(a.fileUploadUploadFileText), 1)
+                y(p(n.fileUploadUploadFileText), 1)
               ])
             ]),
             _: 3
           }, 8, ["class", "disabled", "onClick"])
         ], 64))
       ], 2),
-      e.$slots.hint && !i.files.length ? (n(), o("div", X, [
+      e.$slots.hint && !i.files.length ? (r(), o("div", X, [
         S(e.$slots, "hint")
       ])) : b("", !0)
     ], 34)),
@@ -309,10 +306,10 @@ function B(e, t, i, r, a, l) {
 }
 const V = {
   $style: L
-}, re = /* @__PURE__ */ P(k, [["render", B], ["__cssModules", V]]);
+}, le = /* @__PURE__ */ P(k, [["render", B], ["__cssModules", V]]);
 export {
   v as FILE_TYPES,
   _ as Sizes,
-  re as default
+  le as default
 };
 //# sourceMappingURL=FileUpload.js.map