@leaflink/stash 44.0.0-beta.7 → 44.0.0-beta.9

package/dist/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.types.ts","../src/components/Modal/Modal.vue"],"sourcesContent":["export enum ModalSize {\n  Narrow = 'narrow',\n  Medium = 'medium',\n  Wide = 'wide',\n}\n\nexport type ModalSizes = `${ModalSize}`;\n\nexport enum ModalPosition {\n  Center = 'center',\n  Left = 'left',\n  Right = 'right',\n}\n\nexport type ModalPositions = `${ModalPosition}`;\n","<script lang=\"ts\">\n  import { ModalPositions, ModalSizes } from './Modal.types';\n\n  export * from './Modal.types';\n\n  export interface ModalProps {\n    /**\n     * Hides the \"close\" button\n     */\n    hideClose?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     * @deprecated Use `isOpen` instead\n     */\n    open?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     */\n    isOpen?: boolean;\n\n    /**\n     * Use v-model:is-open or :is-open instead of :model-value and v-model.\n     * @deprecated\n     */\n    modelValue?: boolean;\n\n    /**\n     * Sets a preset max-width on the modal.\n     * Options: default (648px), narrow (360px), wide (960px)\n     */\n    size?: ModalSizes;\n\n    /**\n     * Should the modal be scrollable within the content area. This prop is treated as `true` when the `position` prop is set to \"left\" or \"right\".\n     */\n    scrollable?: boolean;\n\n    /**\n     * Gives the modal body have a light gray background\n     */\n    contrast?: boolean;\n\n    /**\n     * Text to display in the modal header\n     */\n    title?: string;\n\n    /**\n     * Disables the default padding in the modal body.\n     */\n    disableBodyPadding?: boolean;\n\n    /**\n     * The position on the screen to display the modal.\n     */\n    position?: ModalPositions;\n\n    /**\n     * Hide the header. Typically used with the featuredContent slot to display a graphic and create a \"promo\" modal.\n     */\n    hideHeader?: boolean;\n\n    /**\n     * Add classes to the close button. This can be used with the hideHeader prop and featuredContent slot to\n     * accommodate images with different color backgrounds.\n     */\n    closeButtonColorClass?: string;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue';\n\n  import { FOCUS_ELEMENTS_SELECTOR } from '../../constants';\n  import { t } from '../../locale';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-modal' });\n\n  const props = withDefaults(defineProps<ModalProps>(), {\n    hideClose: false,\n    open: false,\n    isOpen: false,\n    modelValue: false,\n    size: 'medium',\n    scrollable: false,\n    contrast: false,\n    title: '',\n    position: 'center',\n    hideHeader: false,\n    closeButtonColorClass: 'tw-text-white/50',\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * @deprecated Use the `update:is-open` event instead\n       */\n      (e: 'update:open', isOpen?: boolean): void;\n      (e: 'update:is-open', isOpen?: boolean): void;\n      (e: 'dismiss'): void;\n    }>();\n\n  const slots = useSlots();\n\n  const rootRef = ref<HTMLElement>();\n  const lastExternalFocusedElement = ref<HTMLElement>();\n  const focusElements = ref<HTMLElement[]>([]);\n  const firstFocusElement = ref<HTMLElement>();\n  const lastFocusElement = ref<HTMLElement>();\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const headerId = uniqueId('modal-header-');\n  const hasFooterContent = computed(() => !!slots.actions || !!slots.footer);\n  const isModalOpen = computed(() => props.open || props.isOpen);\n  const isDrawer = computed(() => props.position === 'left' || props.position === 'right');\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watch(\n    isModalOpen,\n    () => {\n      if (isModalOpen.value) {\n        Object.assign(initialPageScrollingElementStyle.value, {\n          height: getPageScrollingElement().style.height,\n          overflow: getPageScrollingElement().style.overflow,\n        });\n      }\n\n      Object.assign(getPageScrollingElement().style, {\n        overflow: isModalOpen.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when modal is open\n        height: isModalOpen.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when modal is open; see https://github.com/LeafLink/stash/pull/713#issuecomment-1184602535\n      });\n    },\n    { immediate: true },\n  );\n\n  onBeforeUnmount(() => {\n    // In cases where the watchEffect for isModalOpen isn't triggered while closing/nagivating away from modal, this ensures scrolling returns to normal\n    Object.assign(getPageScrollingElement().style, {\n      overflow: initialPageScrollingElementStyle.value.overflow,\n      height: initialPageScrollingElementStyle.value.height,\n    });\n\n    // Clear focus trap tab listener\n    document.removeEventListener('keydown', handleTab);\n    lastExternalFocusedElement.value?.focus();\n  });\n\n  function dismiss() {\n    emit('update:open', false);\n    emit('update:is-open', false);\n    emit('dismiss');\n  }\n\n  // This watcher ensures the Tab key cycles through focusable elements within the modal.\n  watch(rootRef, () => {\n    if (!rootRef.value) {\n      return;\n    }\n\n    lastExternalFocusedElement.value = document.activeElement as HTMLElement;\n    rootRef.value.focus();\n\n    focusElements.value = Array.from(rootRef.value.querySelectorAll<HTMLElement>(FOCUS_ELEMENTS_SELECTOR));\n    firstFocusElement.value = focusElements.value[0];\n    lastFocusElement.value = focusElements.value[focusElements.value.length - 1];\n    document.addEventListener('keydown', handleTab);\n  });\n\n  function handleTab(e) {\n    if (e.key === 'Tab') {\n      if (e.shiftKey && document.activeElement === firstFocusElement.value) {\n        lastFocusElement.value?.focus();\n        e.preventDefault();\n      } else if (document.activeElement === lastFocusElement.value) {\n        firstFocusElement.value?.focus();\n        e.preventDefault();\n      }\n    }\n  }\n</script>\n\n<template>\n  <div\n    v-if=\"isModalOpen\"\n    ref=\"rootRef\"\n    class=\"stash-modal tw-fixed tw-inset-0 tw-overflow-y-auto\"\n    :class=\"{\n      'tw-invisible tw-z-behind': !isModalOpen,\n      'tw-visible tw-z-modal': isModalOpen,\n      'lg:tw-flex lg:tw-flex-col lg:tw-items-center lg:tw-justify-center': props.position === 'center',\n    }\"\n    data-test=\"ll-modal\"\n    tabindex=\"0\"\n    @keydown.esc=\"dismiss\"\n  >\n    <Backdrop class=\"stash-modal__backdrop\" @click.stop=\"dismiss\" />\n    <div\n      aria-modal=\"true\"\n      role=\"dialog\"\n      :aria-labelledby=\"headerId\"\n      class=\"stash-modal__dialog tw-relative tw-flex tw-h-screen tw-w-full tw-flex-col lg:tw-shadow\"\n      :class=\"[\n        `stash-modal__dialog--size-${props.size}`,\n        `stash-modal__dialog--position-${props.position}`,\n        {\n          'stash-modal__dialog--is-open': isModalOpen,\n          'stash-modal__dialog--is-drawer': isDrawer,\n          'stash-modal__dialog--is-contrast': props.contrast,\n          'stash-modal__dialog--is-scrollable': props.scrollable,\n          'lg:tw-w-[360px]': props.size === 'narrow',\n          'lg:tw-w-[648px]': props.size === 'medium',\n          'lg:tw-w-[960px]': props.size === 'wide',\n          'lg:tw-my-0 lg:tw-h-auto lg:tw-max-h-[90vh]': props.position === 'center',\n          'lg:tw-absolute lg:tw-h-screen': isDrawer,\n          'lg:tw-left-0': props.position === 'left',\n          'lg:tw-right-0': props.position === 'right',\n        },\n      ]\"\n      @click.stop\n    >\n      <header\n        v-if=\"!props.hideHeader\"\n        data-test=\"stash-modal__header\"\n        class=\"stash-modal__header tw-grid tw-h-12 tw-place-items-center tw-bg-purple-500\"\n        :class=\"{ 'lg:tw-rounded-t': !isDrawer }\"\n      >\n        <div class=\"tw-flex tw-place-items-center\">\n          <!-- @slot Adds an action to the left side of the header bar. An example usage is a modal with multiple pages and a back button can be inserted here -->\n          <slot name=\"headerAction\"></slot>\n        </div>\n\n        <h3 v-if=\"props.title\" :id=\"headerId\" class=\"tw-m-0 tw-flex-1 tw-leading-6 tw-text-white\">\n          {{ props.title }}\n        </h3>\n\n        <Button\n          v-if=\"!props.hideClose\"\n          icon\n          data-test=\"ll-modal-close\"\n          :title=\"t('ll.closeModal')\"\n          type=\"button\"\n          @click=\"dismiss\"\n        >\n          <Icon class=\"tw-text-white\" name=\"close\" />\n        </Button>\n      </header>\n\n      <Button\n        v-if=\"!props.hideClose && props.hideHeader\"\n        class=\"tw-absolute tw-right-0 tw-top-0 tw-z-10\"\n        icon\n        data-test=\"ll-modal-close\"\n        type=\"button\"\n        :title=\"t('ll.closeModal')\"\n        @click=\"dismiss\"\n      >\n        <Icon class=\"tw-drop-shadow-md\" name=\"close\" :class=\"[props.closeButtonColorClass]\" />\n      </Button>\n\n      <div\n        v-if=\"!!slots['featured-content']\"\n        class=\"stash-modal__featured-content tw-relative\"\n        :class=\"{\n          'tw-rounded-t': props.hideHeader,\n        }\"\n      >\n        <slot name=\"featured-content\"></slot>\n      </div>\n\n      <div\n        class=\"stash-modal__body tw-flex-1 tw-overflow-y-auto\"\n        :class=\"[\n          {\n            'tw-p-3 lg:tw-p-6': !props.disableBodyPadding,\n            'lg:tw-overflow-y-visible': !props.scrollable && !isDrawer,\n            'lg:tw-rounded-b': !hasFooterContent && !isDrawer,\n            'tw-bg-white': !props.contrast,\n            'tw-bg-ice-200': props.contrast,\n          },\n        ]\"\n        data-test=\"stash-modal__body\"\n      >\n        <slot></slot>\n      </div>\n\n      <footer\n        v-if=\"hasFooterContent\"\n        class=\"stash-modal__footer tw-border-ice-500 tw-bg-ice-100 tw-p-3 lg:tw-p-6\"\n        :class=\"{ 'lg:tw-rounded-b': !isDrawer }\"\n      >\n        <!-- @slot Overrides the whole footer section. Used for rendering custom footers with more than 2 actions. If defined, \"actions\" slot will get ignored. -->\n        <slot name=\"footer\">\n          <div class=\"stash-modal__footer__actions tw-flex tw-flex-col tw-justify-end lg:tw-flex-row\">\n            <!-- @slot Modal footer actions, supports rendering up to 2 `<Button>` children -->\n            <slot name=\"actions\"></slot>\n          </div>\n        </slot>\n      </footer>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n  .stash-modal__header {\n    grid-template-columns: 48px 1fr 48px;\n  }\n\n  .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n    order: 2;\n  }\n\n  .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n    margin-bottom: var(--ll-space-2);\n    order: 1;\n  }\n\n  @media screen and (width >= 961px) {\n    .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n      order: 1;\n    }\n\n    .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n      margin-bottom: 0;\n      order: 2;\n    }\n\n    .stash-modal__footer__actions > :deep(.stash-button + .stash-button) {\n      margin-left: var(--grid-gutter);\n    }\n  }\n\n  .stash-modal__featured-content > :deep(*) {\n    border-radius: inherit;\n  }\n</style>\n"],"names":["ModalSize","ModalPosition","slots","useSlots","rootRef","ref","lastExternalFocusedElement","focusElements","firstFocusElement","lastFocusElement","initialPageScrollingElementStyle","headerId","uniqueId","hasFooterContent","computed","isModalOpen","props","isDrawer","getPageScrollingElement","watch","onBeforeUnmount","handleTab","_a","dismiss","emit","FOCUS_ELEMENTS_SELECTOR","e","_b"],"mappings":";;;;;;;;;;;;AAAY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAHEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCoGJC,IAAQC,KAERC,IAAUC,KACVC,IAA6BD,KAC7BE,IAAgBF,EAAmB,CAAA,CAAE,GACrCG,IAAoBH,KACpBI,IAAmBJ,KACnBK,IAAmCL,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEM,IAAWC,EAAS,eAAe,GACnCC,IAAmBC,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAW,CAAC,CAACA,EAAM,MAAM,GACnEa,IAAcD,EAAS,MAAME,EAAM,QAAQA,EAAM,MAAM,GACvDC,IAAWH,EAAS,MAAME,EAAM,aAAa,UAAUA,EAAM,aAAa,OAAO;AAEvF,aAASE,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,IAAAC;AAAA,MACEJ;AAAA,MACA,MAAM;AACJ,QAAIA,EAAY,SACP,OAAA,OAAOL,EAAiC,OAAO;AAAA,UACpD,QAAQQ,IAA0B,MAAM;AAAA,UACxC,UAAUA,IAA0B,MAAM;AAAA,QAAA,CAC3C,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,UAC7C,UAAUH,EAAY,QAAQ,WAAWL,EAAiC,MAAM;AAAA;AAAA,UAChF,QAAQK,EAAY,QAAQ,SAASL,EAAiC,MAAM;AAAA;AAAA,QAAA,CAC7E;AAAA,MACH;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBU,EAAgB,MAAM;;AAEb,aAAA,OAAOF,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUR,EAAiC,MAAM;AAAA,QACjD,QAAQA,EAAiC,MAAM;AAAA,MAAA,CAChD,GAGQ,SAAA,oBAAoB,WAAWW,CAAS,IACjDC,IAAAhB,EAA2B,UAA3B,QAAAgB,EAAkC;AAAA,IAAM,CACzC;AAED,aAASC,IAAU;AACjB,MAAAC,EAAK,eAAe,EAAK,GACzBA,EAAK,kBAAkB,EAAK,GAC5BA,EAAK,SAAS;AAAA,IAChB;AAGA,IAAAL,EAAMf,GAAS,MAAM;AACf,MAACA,EAAQ,UAIbE,EAA2B,QAAQ,SAAS,eAC5CF,EAAQ,MAAM,SAEdG,EAAc,QAAQ,MAAM,KAAKH,EAAQ,MAAM,iBAA8BqB,CAAuB,CAAC,GACnFjB,EAAA,QAAQD,EAAc,MAAM,CAAC,GAC/CE,EAAiB,QAAQF,EAAc,MAAMA,EAAc,MAAM,SAAS,CAAC,GAClE,SAAA,iBAAiB,WAAWc,CAAS;AAAA,IAAA,CAC/C;AAED,aAASA,EAAUK,GAAG;;AAChB,MAAAA,EAAE,QAAQ,UACRA,EAAE,YAAY,SAAS,kBAAkBlB,EAAkB,UAC7Dc,IAAAb,EAAiB,UAAjB,QAAAa,EAAwB,SACxBI,EAAE,eAAe,KACR,SAAS,kBAAkBjB,EAAiB,WACrDkB,IAAAnB,EAAkB,UAAlB,QAAAmB,EAAyB,SACzBD,EAAE,eAAe;AAAA,IAGvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.types.ts","../src/components/Modal/Modal.vue"],"sourcesContent":["export enum ModalSize {\n  Narrow = 'narrow',\n  Medium = 'medium',\n  Wide = 'wide',\n}\n\nexport type ModalSizes = `${ModalSize}`;\n\nexport enum ModalPosition {\n  Center = 'center',\n  Left = 'left',\n  Right = 'right',\n}\n\nexport type ModalPositions = `${ModalPosition}`;\n","<script lang=\"ts\">\n  import { ModalPositions, ModalSizes } from './Modal.types';\n\n  export * from './Modal.types';\n\n  export interface ModalProps {\n    /**\n     * Hides the \"close\" button\n     */\n    hideClose?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     * @deprecated Use `isOpen` instead\n     */\n    open?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     */\n    isOpen?: boolean;\n\n    /**\n     * Use v-model:is-open or :is-open instead of :model-value and v-model.\n     * @deprecated\n     */\n    modelValue?: boolean;\n\n    /**\n     * Sets a preset max-width on the modal.\n     * Options: default (648px), narrow (360px), wide (960px)\n     */\n    size?: ModalSizes;\n\n    /**\n     * Should the modal be scrollable within the content area. This prop is treated as `true` when the `position` prop is set to \"left\" or \"right\".\n     */\n    scrollable?: boolean;\n\n    /**\n     * Gives the modal body have a light gray background\n     */\n    contrast?: boolean;\n\n    /**\n     * Text to display in the modal header\n     */\n    title?: string;\n\n    /**\n     * Disables the default padding in the modal body.\n     */\n    disableBodyPadding?: boolean;\n\n    /**\n     * The position on the screen to display the modal.\n     */\n    position?: ModalPositions;\n\n    /**\n     * Hide the header. Typically used with the featuredContent slot to display a graphic and create a \"promo\" modal.\n     */\n    hideHeader?: boolean;\n\n    /**\n     * Add classes to the close button. This can be used with the hideHeader prop and featuredContent slot to\n     * accommodate images with different color backgrounds.\n     */\n    closeButtonColorClass?: string;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue';\n\n  import { FOCUS_ELEMENTS_SELECTOR } from '../../constants';\n  import { t } from '../../locale';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-modal' });\n\n  const props = withDefaults(defineProps<ModalProps>(), {\n    hideClose: false,\n    open: false,\n    isOpen: false,\n    modelValue: false,\n    size: 'medium',\n    scrollable: false,\n    contrast: false,\n    title: '',\n    position: 'center',\n    hideHeader: false,\n    closeButtonColorClass: 'tw-text-white/50',\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * @deprecated Use the `update:is-open` event instead\n       */\n      (e: 'update:open', isOpen?: boolean): void;\n      (e: 'update:is-open', isOpen?: boolean): void;\n      (e: 'dismiss'): void;\n    }>();\n\n  const slots = useSlots();\n\n  const rootRef = ref<HTMLElement>();\n  const lastExternalFocusedElement = ref<HTMLElement>();\n  const focusElements = ref<HTMLElement[]>([]);\n  const firstFocusElement = ref<HTMLElement>();\n  const lastFocusElement = ref<HTMLElement>();\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const headerId = uniqueId('modal-header-');\n  const hasFooterContent = computed(() => !!slots.actions || !!slots.footer);\n  const isModalOpen = computed(() => props.open || props.isOpen);\n  const isDrawer = computed(() => props.position === 'left' || props.position === 'right');\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watch(\n    isModalOpen,\n    () => {\n      if (isModalOpen.value) {\n        Object.assign(initialPageScrollingElementStyle.value, {\n          height: getPageScrollingElement().style.height,\n          overflow: getPageScrollingElement().style.overflow,\n        });\n      }\n\n      Object.assign(getPageScrollingElement().style, {\n        overflow: isModalOpen.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when modal is open\n        height: isModalOpen.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when modal is open; see https://github.com/LeafLink/stash/pull/713#issuecomment-1184602535\n      });\n    },\n    { immediate: true },\n  );\n\n  onBeforeUnmount(() => {\n    // In cases where the watchEffect for isModalOpen isn't triggered while closing/nagivating away from modal, this ensures scrolling returns to normal\n    Object.assign(getPageScrollingElement().style, {\n      overflow: initialPageScrollingElementStyle.value.overflow,\n      height: initialPageScrollingElementStyle.value.height,\n    });\n\n    // Clear focus trap tab listener\n    document.removeEventListener('keydown', handleTab);\n    lastExternalFocusedElement.value?.focus();\n  });\n\n  function dismiss() {\n    emit('update:open', false);\n    emit('update:is-open', false);\n    emit('dismiss');\n  }\n\n  // This watcher ensures the Tab key cycles through focusable elements within the modal.\n  watch(rootRef, () => {\n    if (!rootRef.value) {\n      return;\n    }\n\n    lastExternalFocusedElement.value = document.activeElement as HTMLElement;\n    rootRef.value.focus();\n\n    focusElements.value = Array.from(rootRef.value.querySelectorAll<HTMLElement>(FOCUS_ELEMENTS_SELECTOR));\n    firstFocusElement.value = focusElements.value[0];\n    lastFocusElement.value = focusElements.value[focusElements.value.length - 1];\n    document.addEventListener('keydown', handleTab);\n  });\n\n  function handleTab(e) {\n    if (e.key === 'Tab') {\n      if (e.shiftKey && document.activeElement === firstFocusElement.value) {\n        lastFocusElement.value?.focus();\n        e.preventDefault();\n      } else if (document.activeElement === lastFocusElement.value) {\n        firstFocusElement.value?.focus();\n        e.preventDefault();\n      }\n    }\n  }\n</script>\n\n<template>\n  <div\n    v-if=\"isModalOpen\"\n    ref=\"rootRef\"\n    class=\"stash-modal tw-fixed tw-inset-0 tw-overflow-y-auto\"\n    :class=\"{\n      'tw-invisible tw-z-behind': !isModalOpen,\n      'tw-visible tw-z-modal': isModalOpen,\n      'lg:tw-flex lg:tw-flex-col lg:tw-items-center lg:tw-justify-center': props.position === 'center',\n    }\"\n    data-test=\"ll-modal\"\n    tabindex=\"0\"\n    @keydown.esc=\"dismiss\"\n  >\n    <Backdrop class=\"stash-modal__backdrop\" @click.stop=\"dismiss\" />\n    <div\n      aria-modal=\"true\"\n      role=\"dialog\"\n      :aria-labelledby=\"headerId\"\n      class=\"stash-modal__dialog tw-relative tw-flex tw-h-screen tw-w-full tw-flex-col lg:tw-shadow\"\n      :class=\"[\n        `stash-modal__dialog--size-${props.size}`,\n        `stash-modal__dialog--position-${props.position}`,\n        {\n          'stash-modal__dialog--is-open': isModalOpen,\n          'stash-modal__dialog--is-drawer': isDrawer,\n          'stash-modal__dialog--is-contrast': props.contrast,\n          'stash-modal__dialog--is-scrollable': props.scrollable,\n          'lg:tw-w-[360px]': props.size === 'narrow',\n          'lg:tw-w-[648px]': props.size === 'medium',\n          'lg:tw-w-[960px]': props.size === 'wide',\n          'lg:tw-my-0 lg:tw-h-auto lg:tw-max-h-[90vh]': props.position === 'center',\n          'lg:tw-absolute lg:tw-h-screen': isDrawer,\n          'lg:tw-left-0': props.position === 'left',\n          'lg:tw-right-0': props.position === 'right',\n        },\n      ]\"\n      @click.stop\n    >\n      <header\n        v-if=\"!props.hideHeader\"\n        data-test=\"stash-modal__header\"\n        class=\"stash-modal__header tw-grid tw-h-12 tw-place-items-center tw-bg-purple-500\"\n        :class=\"{ 'lg:tw-rounded-t': !isDrawer }\"\n      >\n        <div class=\"tw-flex tw-place-items-center\">\n          <!-- @slot Adds an action to the left side of the header bar. An example usage is a modal with multiple pages and a back button can be inserted here -->\n          <slot name=\"headerAction\"></slot>\n        </div>\n\n        <h3 v-if=\"props.title\" :id=\"headerId\" class=\"tw-m-0 tw-flex-1 tw-leading-6 tw-text-white\">\n          {{ props.title }}\n        </h3>\n\n        <Button\n          v-if=\"!props.hideClose\"\n          icon\n          data-test=\"ll-modal-close\"\n          :title=\"t('ll.closeModal')\"\n          type=\"button\"\n          @click=\"dismiss\"\n        >\n          <Icon class=\"tw-text-white\" name=\"close\" />\n        </Button>\n      </header>\n\n      <Button\n        v-if=\"!props.hideClose && props.hideHeader\"\n        class=\"tw-absolute tw-right-0 tw-top-0 tw-z-10\"\n        icon\n        data-test=\"ll-modal-close\"\n        type=\"button\"\n        :title=\"t('ll.closeModal')\"\n        @click=\"dismiss\"\n      >\n        <Icon class=\"tw-drop-shadow-md\" name=\"close\" :class=\"[props.closeButtonColorClass]\" />\n      </Button>\n\n      <div\n        v-if=\"!!slots['featured-content']\"\n        class=\"stash-modal__featured-content tw-relative\"\n        :class=\"{\n          'tw-rounded-t': props.hideHeader,\n        }\"\n      >\n        <slot name=\"featured-content\"></slot>\n      </div>\n\n      <div\n        class=\"stash-modal__body tw-flex-1 tw-overflow-y-auto\"\n        :class=\"[\n          {\n            'tw-p-3 lg:tw-p-6': !props.disableBodyPadding,\n            'lg:tw-overflow-y-visible': !props.scrollable && !isDrawer,\n            'lg:tw-rounded-b': !hasFooterContent && !isDrawer,\n            'tw-bg-white': !props.contrast,\n            'tw-bg-ice-200': props.contrast,\n          },\n        ]\"\n        data-test=\"stash-modal__body\"\n      >\n        <slot></slot>\n      </div>\n\n      <footer\n        v-if=\"hasFooterContent\"\n        class=\"stash-modal__footer tw-border-ice-500 tw-bg-ice-100 tw-p-3 lg:tw-p-6\"\n        :class=\"{ 'lg:tw-rounded-b': !isDrawer }\"\n      >\n        <!-- @slot Overrides the whole footer section. Used for rendering custom footers with more than 2 actions. If defined, \"actions\" slot will get ignored. -->\n        <slot name=\"footer\">\n          <div class=\"stash-modal__footer__actions tw-flex tw-flex-col tw-justify-end lg:tw-flex-row\">\n            <!-- @slot Modal footer actions, supports rendering up to 2 `<Button>` children -->\n            <slot name=\"actions\"></slot>\n          </div>\n        </slot>\n      </footer>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n  .stash-modal__header {\n    grid-template-columns: 48px 1fr 48px;\n  }\n\n  .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n    order: 2;\n  }\n\n  .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n    margin-bottom: theme('spacing.3');\n    order: 1;\n  }\n\n  @media screen('lg') {\n    .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n      order: 1;\n    }\n\n    .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n      margin-bottom: 0;\n      order: 2;\n    }\n\n    .stash-modal__footer__actions > :deep(.stash-button + .stash-button) {\n      margin-left: var(--grid-gutter);\n    }\n  }\n\n  .stash-modal__featured-content > :deep(*) {\n    border-radius: inherit;\n  }\n</style>\n"],"names":["ModalSize","ModalPosition","slots","useSlots","rootRef","ref","lastExternalFocusedElement","focusElements","firstFocusElement","lastFocusElement","initialPageScrollingElementStyle","headerId","uniqueId","hasFooterContent","computed","isModalOpen","props","isDrawer","getPageScrollingElement","watch","onBeforeUnmount","handleTab","_a","dismiss","emit","FOCUS_ELEMENTS_SELECTOR","e","_b"],"mappings":";;;;;;;;;;;;AAAY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAHEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCoGJC,IAAQC,KAERC,IAAUC,KACVC,IAA6BD,KAC7BE,IAAgBF,EAAmB,CAAA,CAAE,GACrCG,IAAoBH,KACpBI,IAAmBJ,KACnBK,IAAmCL,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEM,IAAWC,EAAS,eAAe,GACnCC,IAAmBC,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAW,CAAC,CAACA,EAAM,MAAM,GACnEa,IAAcD,EAAS,MAAME,EAAM,QAAQA,EAAM,MAAM,GACvDC,IAAWH,EAAS,MAAME,EAAM,aAAa,UAAUA,EAAM,aAAa,OAAO;AAEvF,aAASE,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,IAAAC;AAAA,MACEJ;AAAA,MACA,MAAM;AACJ,QAAIA,EAAY,SACP,OAAA,OAAOL,EAAiC,OAAO;AAAA,UACpD,QAAQQ,IAA0B,MAAM;AAAA,UACxC,UAAUA,IAA0B,MAAM;AAAA,QAAA,CAC3C,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,UAC7C,UAAUH,EAAY,QAAQ,WAAWL,EAAiC,MAAM;AAAA;AAAA,UAChF,QAAQK,EAAY,QAAQ,SAASL,EAAiC,MAAM;AAAA;AAAA,QAAA,CAC7E;AAAA,MACH;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBU,EAAgB,MAAM;;AAEb,aAAA,OAAOF,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUR,EAAiC,MAAM;AAAA,QACjD,QAAQA,EAAiC,MAAM;AAAA,MAAA,CAChD,GAGQ,SAAA,oBAAoB,WAAWW,CAAS,IACjDC,IAAAhB,EAA2B,UAA3B,QAAAgB,EAAkC;AAAA,IAAM,CACzC;AAED,aAASC,IAAU;AACjB,MAAAC,EAAK,eAAe,EAAK,GACzBA,EAAK,kBAAkB,EAAK,GAC5BA,EAAK,SAAS;AAAA,IAChB;AAGA,IAAAL,EAAMf,GAAS,MAAM;AACf,MAACA,EAAQ,UAIbE,EAA2B,QAAQ,SAAS,eAC5CF,EAAQ,MAAM,SAEdG,EAAc,QAAQ,MAAM,KAAKH,EAAQ,MAAM,iBAA8BqB,CAAuB,CAAC,GACnFjB,EAAA,QAAQD,EAAc,MAAM,CAAC,GAC/CE,EAAiB,QAAQF,EAAc,MAAMA,EAAc,MAAM,SAAS,CAAC,GAClE,SAAA,iBAAiB,WAAWc,CAAS;AAAA,IAAA,CAC/C;AAED,aAASA,EAAUK,GAAG;;AAChB,MAAAA,EAAE,QAAQ,UACRA,EAAE,YAAY,SAAS,kBAAkBlB,EAAkB,UAC7Dc,IAAAb,EAAiB,UAAjB,QAAAa,EAAwB,SACxBI,EAAE,eAAe,KACR,SAAS,kBAAkBjB,EAAiB,WACrDkB,IAAAnB,EAAkB,UAAlB,QAAAmB,EAAyB,SACzBD,EAAE,eAAe;AAAA,IAGvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ObfuscateText.js

@@ -1,12 +1,15 @@
-import { defineComponent as g, ref as d, useCssModule as b, computed as h, openBlock as u, createElementBlock as C, createTextVNode as _, toDisplayString as x, createBlock as T, normalizeClass as k, unref as v, withCtx as w, createVNode as y, createCommentVNode as B } from "vue";
-import V from "./Button.js";
-import K from "./Icon.js";
-import { _ as M } from "./_plugin-vue_export-helper-dad06003.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
+import { defineComponent as r, ref as u, computed as c, openBlock as s, createElementBlock as i, createTextVNode as p, toDisplayString as f, createBlock as h, withCtx as m, createVNode as d, normalizeClass as g, createCommentVNode as x } from "vue";
+import C from "./Button.js";
+import b from "./Icon.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
+import "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const N = /* @__PURE__ */ g({
+const k = {
+  class: "stash-obfuscate-text",
+  "data-test": "stash-obfuscate-text"
+}, A = /* @__PURE__ */ r({
   name: "ll-obfuscate-text",
   __name: "ObfuscateText",
   props: {
@@ -18,42 +21,37 @@ const N = /* @__PURE__ */ g({
     obfuscateAll: { type: Boolean, default: !1 },
     showToggle: { type: Boolean, default: !1 }
   },
-  setup(c) {
-    const i = c, t = d(!1), f = b(), p = h(() => {
-      const { showToggle: s, text: e, obfuscateAll: r, lengthToKeep: a, maskChar: l, maskCharCount: n, position: m } = i;
-      if (s && t.value)
-        return e;
-      if (r || !a)
-        return l.repeat(n);
+  setup(l) {
+    const t = l, e = u(!1), n = c(() => {
+      if (t.showToggle && e.value)
+        return t.text;
+      if (t.obfuscateAll || !t.lengthToKeep)
+        return t.maskChar.repeat(t.maskCharCount);
       let o;
-      return m === "end" ? (o = e.substring(0, a), o + l.repeat(n)) : (o = e.substring(e.length - a), l.repeat(n) + o);
+      return t.position === "end" ? (o = t.text.substring(0, t.lengthToKeep), o + t.maskChar.repeat(t.maskCharCount)) : (o = t.text.substring(t.text.length - t.lengthToKeep), t.maskChar.repeat(t.maskCharCount) + o);
     });
-    return (s, e) => (u(), C("span", null, [
-      _(x(p.value) + " ", 1),
-      s.showToggle ? (u(), T(V, {
+    return (o, a) => (s(), i("span", k, [
+      p(f(n.value) + " ", 1),
+      o.showToggle ? (s(), h(C, {
         key: 0,
-        class: k(v(f)["obfuscation-toggle-button"]),
+        class: "tw-ml-1 tw-h-auto tw-w-auto tw-p-0",
         icon: "",
         type: "button",
-        onClick: e[0] || (e[0] = (r) => t.value = !t.value)
+        onClick: a[0] || (a[0] = (w) => e.value = !e.value)
       }, {
-        default: w(() => [
-          y(K, {
-            name: t.value ? "hide" : "show",
-            class: "tw-cursor-pointer",
-            "data-test": t.value ? "hide-toggle-icon" : "show-toggle-icon"
-          }, null, 8, ["name", "data-test"])
+        default: m(() => [
+          d(b, {
+            name: e.value ? "hide" : "show",
+            class: g(["tw-cursor-pointer", e.value ? "stash-obfuscate-text__hide-toggle-icon" : "stash-obfuscate-text__show-toggle-icon"]),
+            "data-test": e.value ? "stash-obfuscate-text|hide-toggle-icon" : "stash-obfuscate-text|show-toggle-icon"
+          }, null, 8, ["name", "class", "data-test"])
         ]),
         _: 1
-      }, 8, ["class"])) : B("", !0)
+      })) : x("", !0)
     ]));
   }
-}), A = {
-  "obfuscation-toggle-button": "_obfuscation-toggle-button_16egb_2"
-}, O = {
-  $style: A
-}, q = /* @__PURE__ */ M(N, [["__cssModules", O]]);
+});
 export {
-  q as default
+  A as default
 };
 //# sourceMappingURL=ObfuscateText.js.map

package/dist/ObfuscateText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObfuscateText.js","sources":["../src/components/ObfuscateText/ObfuscateText.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useCssModule } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-obfuscate-text' });\n\n  export interface ObfuscateTextProps {\n    /**\n     * The full text\n     */\n    text: string;\n\n    /**\n     * Character to obfuscate text with\n     */\n    maskChar?: string;\n\n    /**\n     * The number of masked characters to display\n     */\n    maskCharCount?: number;\n\n    /**\n     * Num of characters to keep revealed.\n     * Default will obfuscate entire string\n     * with length of maskCharCount.\n     */\n    lengthToKeep?: number;\n\n    /**\n     * Position to start obfuscating text\n     */\n    position?: 'start' | 'end';\n    /**\n     * Whether or not to obfuscate all characters.\n     * @deprecated omit the lengthToKeep prop to achieve the same result\n     */\n    obfuscateAll?: boolean;\n    /**\n     * Displays a button for toggling text visibility\n     */\n    showToggle?: boolean;\n  }\n\n  const isFullTextVisible = ref(false);\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<ObfuscateTextProps>(), {\n    maskChar: '•',\n    maskCharCount: 10,\n    lengthToKeep: 0,\n    position: 'start',\n    obfuscateAll: false,\n    showToggle: false,\n  });\n\n  const obfuscatedText = computed(() => {\n    const { showToggle, text, obfuscateAll, lengthToKeep, maskChar, maskCharCount, position } = props;\n\n    if (showToggle && isFullTextVisible.value) {\n      return text;\n    }\n\n    if (obfuscateAll || !lengthToKeep) {\n      return maskChar.repeat(maskCharCount);\n    }\n\n    let charsToKeep;\n\n    if (position === 'end') {\n      charsToKeep = text.substring(0, lengthToKeep);\n\n      return charsToKeep + maskChar.repeat(maskCharCount);\n    } else {\n      charsToKeep = text.substring(text.length - lengthToKeep);\n\n      return maskChar.repeat(maskCharCount) + charsToKeep;\n    }\n  });\n</script>\n\n<template>\n  <span\n    >{{ obfuscatedText }}\n    <Button\n      v-if=\"showToggle\"\n      :class=\"classes['obfuscation-toggle-button']\"\n      icon\n      type=\"button\"\n      @click=\"isFullTextVisible = !isFullTextVisible\"\n    >\n      <Icon\n        :name=\"isFullTextVisible ? 'hide' : 'show'\"\n        class=\"tw-cursor-pointer\"\n        :data-test=\"isFullTextVisible ? 'hide-toggle-icon' : 'show-toggle-icon'\"\n      />\n    </Button>\n  </span>\n</template>\n\n<style module>\n  .obfuscation-toggle-button {\n    height: auto;\n    width: auto;\n    padding: 0;\n    margin-left: 4px;\n  }\n</style>\n"],"names":["isFullTextVisible","ref","classes","useCssModule","obfuscatedText","computed","showToggle","text","obfuscateAll","lengthToKeep","maskChar","maskCharCount","position","props","charsToKeep"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBA8CQA,IAAoBC,EAAI,EAAK,GAC7BC,IAAUC,KAWVC,IAAiBC,EAAS,MAAM;AAC9B,YAAA,EAAE,YAAAC,GAAY,MAAAC,GAAM,cAAAC,GAAc,cAAAC,GAAc,UAAAC,GAAU,eAAAC,GAAe,UAAAC,EAAa,IAAAC;AAExF,UAAAP,KAAcN,EAAkB;AAC3B,eAAAO;AAGL,UAAAC,KAAgB,CAACC;AACZ,eAAAC,EAAS,OAAOC,CAAa;AAGlC,UAAAG;AAEJ,aAAIF,MAAa,SACDE,IAAAP,EAAK,UAAU,GAAGE,CAAY,GAErCK,IAAcJ,EAAS,OAAOC,CAAa,MAElDG,IAAcP,EAAK,UAAUA,EAAK,SAASE,CAAY,GAEhDC,EAAS,OAAOC,CAAa,IAAIG;AAAA,IAC1C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ObfuscateText.js","sources":["../src/components/ObfuscateText/ObfuscateText.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-obfuscate-text' });\n\n  export interface ObfuscateTextProps {\n    /**\n     * The full text\n     */\n    text: string;\n\n    /**\n     * Character to obfuscate text with\n     */\n    maskChar?: string;\n\n    /**\n     * The number of masked characters to display\n     */\n    maskCharCount?: number;\n\n    /**\n     * Num of characters to keep revealed.\n     * Default will obfuscate entire string\n     * with length of maskCharCount.\n     */\n    lengthToKeep?: number;\n\n    /**\n     * Position to start obfuscating text\n     */\n    position?: 'start' | 'end';\n\n    /**\n     * Whether to obfuscate all characters.\n     * @deprecated omit the lengthToKeep prop to achieve the same result\n     */\n    obfuscateAll?: boolean;\n\n    /**\n     * Displays a button for toggling text visibility\n     */\n    showToggle?: boolean;\n  }\n\n  const isFullTextVisible = ref(false);\n\n  const props = withDefaults(defineProps<ObfuscateTextProps>(), {\n    maskChar: '•',\n    maskCharCount: 10,\n    lengthToKeep: 0,\n    position: 'start',\n    obfuscateAll: false,\n    showToggle: false,\n  });\n\n  const obfuscatedText = computed(() => {\n    if (props.showToggle && isFullTextVisible.value) {\n      return props.text;\n    }\n\n    if (props.obfuscateAll || !props.lengthToKeep) {\n      return props.maskChar.repeat(props.maskCharCount);\n    }\n\n    let charsToKeep;\n\n    if (props.position === 'end') {\n      charsToKeep = props.text.substring(0, props.lengthToKeep);\n\n      return charsToKeep + props.maskChar.repeat(props.maskCharCount);\n    } else {\n      charsToKeep = props.text.substring(props.text.length - props.lengthToKeep);\n\n      return props.maskChar.repeat(props.maskCharCount) + charsToKeep;\n    }\n  });\n</script>\n\n<template>\n  <span class=\"stash-obfuscate-text\" data-test=\"stash-obfuscate-text\">\n    {{ obfuscatedText }}\n    <Button\n      v-if=\"showToggle\"\n      class=\"tw-ml-1 tw-h-auto tw-w-auto tw-p-0\"\n      icon\n      type=\"button\"\n      @click=\"isFullTextVisible = !isFullTextVisible\"\n    >\n      <Icon\n        :name=\"isFullTextVisible ? 'hide' : 'show'\"\n        class=\"tw-cursor-pointer\"\n        :class=\"isFullTextVisible ? 'stash-obfuscate-text__hide-toggle-icon' : 'stash-obfuscate-text__show-toggle-icon'\"\n        :data-test=\"\n          isFullTextVisible ? 'stash-obfuscate-text|hide-toggle-icon' : 'stash-obfuscate-text|show-toggle-icon'\n        \"\n      />\n    </Button>\n  </span>\n</template>\n"],"names":["isFullTextVisible","ref","obfuscatedText","computed","props","charsToKeep"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;iBAgDQA,IAAoBC,EAAI,EAAK,GAW7BC,IAAiBC,EAAS,MAAM;AAChC,UAAAC,EAAM,cAAcJ,EAAkB;AACxC,eAAOI,EAAM;AAGf,UAAIA,EAAM,gBAAgB,CAACA,EAAM;AAC/B,eAAOA,EAAM,SAAS,OAAOA,EAAM,aAAa;AAG9C,UAAAC;AAEA,aAAAD,EAAM,aAAa,SACrBC,IAAcD,EAAM,KAAK,UAAU,GAAGA,EAAM,YAAY,GAEjDC,IAAcD,EAAM,SAAS,OAAOA,EAAM,aAAa,MAE9DC,IAAcD,EAAM,KAAK,UAAUA,EAAM,KAAK,SAASA,EAAM,YAAY,GAElEA,EAAM,SAAS,OAAOA,EAAM,aAAa,IAAIC;AAAA,IACtD,CACD;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ObfuscateText.vue.d.ts

@@ -75,7 +75,7 @@ export declare interface ObfuscateTextProps {
      */
     position?: 'start' | 'end';
     /**
-     * Whether or not to obfuscate all characters.
+     * Whether to obfuscate all characters.
      * @deprecated omit the lengthToKeep prop to achieve the same result
      */
     obfuscateAll?: boolean;

package/dist/PageContent.js

@@ -1,11 +1,11 @@
-import { defineComponent as c, useSlots as d, useCssModule as l, openBlock as n, createElementBlock as r, normalizeClass as _, unref as e, createElementVNode as i, renderSlot as a, createCommentVNode as m } from "vue";
+import { defineComponent as l, useSlots as d, useCssModule as c, openBlock as n, createElementBlock as r, normalizeClass as _, unref as e, createElementVNode as i, renderSlot as a, createCommentVNode as m } from "vue";
 import { _ as u } from "./_plugin-vue_export-helper-dad06003.js";
-const p = { key: 0 }, g = /* @__PURE__ */ c({
+const p = { key: 0 }, g = /* @__PURE__ */ l({
   name: "ll-page-content",
   __name: "PageContent",
-  setup(k) {
-    const s = d(), t = l();
-    return (o, y) => (n(), r("div", {
+  setup(y) {
+    const s = d(), t = c();
+    return (o, M) => (n(), r("div", {
       class: _(["stash-page-content", [
         e(t).root,
         {
@@ -23,14 +23,14 @@ const p = { key: 0 }, g = /* @__PURE__ */ c({
       ])) : m("", !0)
     ], 2));
   }
-}), b = "_root_ecz53_2", f = "_grid_ecz53_10", C = "_sidebar_ecz53_17", h = {
+}), b = "_root_r9enl_2", f = "_grid_r9enl_10", C = "_sidebar_r9enl_17", h = {
   root: b,
   grid: f,
   sidebar: C
-}, z = {
+}, k = {
   $style: h
-}, v = /* @__PURE__ */ u(g, [["__cssModules", z]]);
+}, B = /* @__PURE__ */ u(g, [["__cssModules", k]]);
 export {
-  v as default
+  B as default
 };
 //# sourceMappingURL=PageContent.js.map

package/dist/PageContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageContent.js","sources":["../src/components/PageContent/PageContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useCssModule, useSlots } from 'vue';\n\n  defineOptions({\n    name: 'll-page-content',\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div\n    class=\"stash-page-content\"\n    :class=\"[\n      classes.root,\n      {\n        [classes.grid]: !!slots.sidebar,\n        [classes.sidebar]: !!slots.sidebar,\n      },\n    ]\"\n    date-test=\"stash-page-content\"\n  >\n    <div>\n      <!-- @slot Default content -->\n      <slot name=\"default\"></slot>\n    </div>\n\n    <aside v-if=\"!!slots.sidebar\">\n      <!-- @slot Sidebar content -->\n      <slot name=\"sidebar\"></slot>\n    </aside>\n  </div>\n</template>\n\n<style module>\n  .root {\n    max-width: theme(width.container); /* 1400px */\n    padding-inline: theme(spacing.gutter);\n    position: relative;\n    margin-inline: auto;\n    width: 100%;\n  }\n\n  .grid {\n    display: grid;\n    grid-gap: theme(spacing.gutter);\n    grid-template-columns: [start] 1fr [end];\n  }\n\n  @media screen(lg) {\n    .sidebar {\n      grid-template-columns: [start] 3fr 1fr [end]; /* 9 cols / 3 cols */\n    }\n  }\n</style>\n"],"names":["slots","useSlots","classes","useCssModule"],"mappings":";;;;;;AAOE,UAAMA,IAAQC,KACRC,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PageContent.js","sources":["../src/components/PageContent/PageContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useCssModule, useSlots } from 'vue';\n\n  defineOptions({\n    name: 'll-page-content',\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div\n    class=\"stash-page-content\"\n    :class=\"[\n      classes.root,\n      {\n        [classes.grid]: !!slots.sidebar,\n        [classes.sidebar]: !!slots.sidebar,\n      },\n    ]\"\n    date-test=\"stash-page-content\"\n  >\n    <div>\n      <!-- @slot Default content -->\n      <slot name=\"default\"></slot>\n    </div>\n\n    <aside v-if=\"!!slots.sidebar\">\n      <!-- @slot Sidebar content -->\n      <slot name=\"sidebar\"></slot>\n    </aside>\n  </div>\n</template>\n\n<style module>\n  .root {\n    max-width: theme('width.container'); /* 1400px */\n    padding-inline: var(--grid-gutter);\n    position: relative;\n    margin-inline: auto;\n    width: 100%;\n  }\n\n  .grid {\n    display: grid;\n    grid-gap: var(--grid-gutter);\n    grid-template-columns: [start] 1fr [end];\n  }\n\n  @media screen('lg') {\n    .sidebar {\n      grid-template-columns: [start] 3fr 1fr [end]; /* 9 cols / 3 cols */\n    }\n  }\n</style>\n"],"names":["slots","useSlots","classes","useCssModule"],"mappings":";;;;;;AAOE,UAAMA,IAAQC,KACRC,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PageHeader.js

@@ -1,9 +1,9 @@
-import { defineComponent as h, useCssModule as u, useSlots as f, computed as g, openBlock as a, createElementBlock as r, normalizeClass as l, unref as s, createElementVNode as c, renderSlot as t, createCommentVNode as i, toDisplayString as _ } from "vue";
+import { defineComponent as g, useCssModule as h, useSlots as u, computed as f, openBlock as a, createElementBlock as c, normalizeClass as n, unref as s, createElementVNode as l, renderSlot as t, createCommentVNode as i, toDisplayString as _ } from "vue";
 import { _ as w } from "./_plugin-vue_export-helper-dad06003.js";
 const y = { class: "tw-col-span-full tw-flex tw-items-center lg:tw-col-span-1" }, v = { class: "stash-page-header__title tw-my-0" }, $ = {
   key: 0,
   class: "stash-page-header__description tw-mb-0 tw-mt-1.5"
-}, b = /* @__PURE__ */ h({
+}, k = /* @__PURE__ */ g({
   name: "ll-page-header",
   __name: "PageHeader",
   props: {
@@ -11,45 +11,45 @@ const y = { class: "tw-col-span-full tw-flex tw-items-center lg:tw-col-span-1" }
     description: { default: "" }
   },
   setup(m) {
-    const d = m, o = u(), n = f(), p = g(() => !!(n["primary-action"] || n["secondary-action"]));
-    return (e, E) => (a(), r("header", {
-      class: l(["stash-page-header", [s(o).root, { [s(o).grid]: p.value }]]),
+    const d = m, o = h(), r = u(), p = f(() => !!(r["primary-action"] || r["secondary-action"]));
+    return (e, H) => (a(), c("header", {
+      class: n(["stash-page-header", [s(o).root, { [s(o).grid]: p.value }]]),
       "date-test": "stash-page-header"
     }, [
-      c("div", y, [
-        s(n).media ? (a(), r("div", {
+      l("div", y, [
+        s(r).media ? (a(), c("div", {
           key: 0,
-          class: l(["stash-page-header__media tw-mr-3 tw-self-center", s(o).mediaTest])
+          class: n(["stash-page-header__media tw-mr-3 tw-self-center", s(o).mediaTest])
         }, [
           t(e.$slots, "media")
         ], 2)) : i("", !0),
-        c("div", null, [
+        l("div", null, [
           t(e.$slots, "title", {}, () => [
-            c("h1", v, _(d.title), 1)
+            l("h1", v, _(d.title), 1)
           ]),
           t(e.$slots, "description", {}, () => [
-            e.description ? (a(), r("p", $, _(d.description), 1)) : i("", !0)
+            e.description ? (a(), c("p", $, _(d.description), 1)) : i("", !0)
           ])
         ])
       ]),
-      p.value ? (a(), r("div", {
+      p.value ? (a(), c("div", {
         key: 0,
-        class: l(["stash-page-header__actions tw-col-span-full tw-flex lg:tw-col-span-1", s(o).actions])
+        class: n(["stash-page-header__actions tw-col-span-full tw-flex lg:tw-col-span-1", s(o).actions])
       }, [
         t(e.$slots, "secondary-action"),
         t(e.$slots, "primary-action")
       ], 2)) : i("", !0)
     ], 2));
   }
-}), k = "_root_1wbf5_2", C = "_grid_1wbf5_13", M = "_actions_1wbf5_18", S = {
-  root: k,
-  grid: C,
-  actions: M,
-  "media-test": "_media-test_1wbf5_41"
-}, B = {
-  $style: S
-}, P = /* @__PURE__ */ w(b, [["__cssModules", B]]);
+}), C = "_root_1gg6c_2", M = "_grid_1gg6c_13", S = "_actions_1gg6c_18", B = {
+  root: C,
+  grid: M,
+  actions: S,
+  "media-test": "_media-test_1gg6c_41"
+}, E = {
+  $style: B
+}, V = /* @__PURE__ */ w(k, [["__cssModules", E]]);
 export {
-  P as default
+  V as default
 };
 //# sourceMappingURL=PageHeader.js.map

package/dist/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sources":["../src/components/PageHeader/PageHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  export interface PageHeaderProps {\n    /**\n     * The title of the page.\n     */\n    title: string;\n    /**\n     * The description of the page.\n     */\n    description?: string;\n  }\n\n  defineOptions({\n    name: 'll-page-header',\n  });\n\n  const props = withDefaults(defineProps<PageHeaderProps>(), {\n    description: '',\n  });\n\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  const hasActions = computed<boolean>(() => !!(slots['primary-action'] || slots['secondary-action']));\n</script>\n\n<template>\n  <header\n    class=\"stash-page-header\"\n    :class=\"[classes.root, { [classes.grid]: hasActions }]\"\n    date-test=\"stash-page-header\"\n  >\n    <div class=\"tw-col-span-full tw-flex tw-items-center lg:tw-col-span-1\">\n      <div v-if=\"slots.media\" class=\"stash-page-header__media tw-mr-3 tw-self-center\" :class=\"classes.mediaTest\">\n        <!-- @slot Receives a custom media -->\n        <slot name=\"media\"></slot>\n      </div>\n\n      <div>\n        <!-- @slot Receives a custom title -->\n        <slot name=\"title\">\n          <h1 class=\"stash-page-header__title tw-my-0\">{{ props.title }}</h1>\n        </slot>\n\n        <!-- @slot Receives a custom description -->\n        <slot name=\"description\">\n          <p v-if=\"description\" class=\"stash-page-header__description tw-mb-0 tw-mt-1.5\">{{ props.description }}</p>\n        </slot>\n      </div>\n    </div>\n\n    <div\n      v-if=\"hasActions\"\n      class=\"stash-page-header__actions tw-col-span-full tw-flex lg:tw-col-span-1\"\n      :class=\"classes.actions\"\n    >\n      <!-- @slot Receives a custom secondary action -->\n      <slot name=\"secondary-action\"> </slot>\n      <!-- @slot Receives a custom primary action -->\n      <slot name=\"primary-action\"> </slot>\n    </div>\n  </header>\n</template>\n\n<style module>\n  .root {\n    border-bottom: 0;\n    display: grid;\n    gap: theme(spacing.gutter);\n    margin: 0 auto;\n    max-width: theme(width.container);\n    padding: theme(spacing.6) theme(spacing.gutter) theme(spacing.12);\n    width: 100%;\n  }\n\n  @media screen(lg) {\n    .root.grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  .actions {\n    align-self: flex-end;\n    flex-direction: column-reverse;\n    row-gap: theme(spacing.gutter);\n  }\n\n  @media screen(md) {\n    .actions {\n      column-gap: theme(spacing.gutter);\n      flex-direction: row;\n      row-gap: 0;\n    }\n  }\n\n  @media screen(lg) {\n    .actions {\n      align-items: flex-end;\n      flex-direction: row;\n      justify-content: flex-end;\n    }\n  }\n\n  /* max size for media/marketing illustration icons we would be passing to the slot */\n  .media-test {\n    max-width: 58px;\n    max-height: 58px;\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots","hasActions","computed"],"mappings":";;;;;;;;;;;;;iBAsBQA,IAAUC,KACVC,IAAQC,KAERC,IAAaC,EAAkB,MAAM,CAAC,EAAEH,EAAM,gBAAgB,KAAKA,EAAM,kBAAkB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PageHeader.js","sources":["../src/components/PageHeader/PageHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  export interface PageHeaderProps {\n    /**\n     * The title of the page.\n     */\n    title: string;\n    /**\n     * The description of the page.\n     */\n    description?: string;\n  }\n\n  defineOptions({\n    name: 'll-page-header',\n  });\n\n  const props = withDefaults(defineProps<PageHeaderProps>(), {\n    description: '',\n  });\n\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  const hasActions = computed<boolean>(() => !!(slots['primary-action'] || slots['secondary-action']));\n</script>\n\n<template>\n  <header\n    class=\"stash-page-header\"\n    :class=\"[classes.root, { [classes.grid]: hasActions }]\"\n    date-test=\"stash-page-header\"\n  >\n    <div class=\"tw-col-span-full tw-flex tw-items-center lg:tw-col-span-1\">\n      <div v-if=\"slots.media\" class=\"stash-page-header__media tw-mr-3 tw-self-center\" :class=\"classes.mediaTest\">\n        <!-- @slot Receives a custom media -->\n        <slot name=\"media\"></slot>\n      </div>\n\n      <div>\n        <!-- @slot Receives a custom title -->\n        <slot name=\"title\">\n          <h1 class=\"stash-page-header__title tw-my-0\">{{ props.title }}</h1>\n        </slot>\n\n        <!-- @slot Receives a custom description -->\n        <slot name=\"description\">\n          <p v-if=\"description\" class=\"stash-page-header__description tw-mb-0 tw-mt-1.5\">{{ props.description }}</p>\n        </slot>\n      </div>\n    </div>\n\n    <div\n      v-if=\"hasActions\"\n      class=\"stash-page-header__actions tw-col-span-full tw-flex lg:tw-col-span-1\"\n      :class=\"classes.actions\"\n    >\n      <!-- @slot Receives a custom secondary action -->\n      <slot name=\"secondary-action\"> </slot>\n      <!-- @slot Receives a custom primary action -->\n      <slot name=\"primary-action\"> </slot>\n    </div>\n  </header>\n</template>\n\n<style module>\n  .root {\n    border-bottom: 0;\n    display: grid;\n    gap: var(--grid-gutter);\n    margin: 0 auto;\n    max-width: theme('width.container');\n    padding: theme('spacing.6') var(--grid-gutter) theme('spacing.12');\n    width: 100%;\n  }\n\n  @media screen('lg') {\n    .root.grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  .actions {\n    align-self: flex-end;\n    flex-direction: column-reverse;\n    row-gap: var(--grid-gutter);\n  }\n\n  @media screen('md') {\n    .actions {\n      column-gap: var(--grid-gutter);\n      flex-direction: row;\n      row-gap: 0;\n    }\n  }\n\n  @media screen('lg') {\n    .actions {\n      align-items: flex-end;\n      flex-direction: row;\n      justify-content: flex-end;\n    }\n  }\n\n  /* max size for media/marketing illustration icons we would be passing to the slot */\n  .media-test {\n    max-width: 58px;\n    max-height: 58px;\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots","hasActions","computed"],"mappings":";;;;;;;;;;;;;iBAsBQA,IAAUC,KACVC,IAAQC,KAERC,IAAaC,EAAkB,MAAM,CAAC,EAAEH,EAAM,gBAAgB,KAAKA,EAAM,kBAAkB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Paginate.js

@@ -1,6 +1,6 @@
 import { defineComponent as w, useCssModule as y, computed as S, openBlock as r, createElementBlock as l, createElementVNode as c, normalizeClass as o, unref as i, createVNode as f, Fragment as g, renderList as x, createCommentVNode as p, toDisplayString as z } from "vue";
 import m from "./Icon.js";
-import { s as M } from "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js";
+import { s as M } from "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
 import { _ as E } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";

package/dist/Paginate.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paginate.js","sources":["../src/components/Paginate/Paginate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-paginate',\n  });\n\n  export interface PaginateProps {\n    /**\n     * Current page number\n     */\n    currentPage?: number;\n    /**\n     * Total number of items in list\n     */\n    listLength?: number;\n    /**\n     * Number of items per page\n     */\n    pageSize?: number;\n  }\n\n  const props = withDefaults(defineProps<PaginateProps>(), {\n    currentPage: 1,\n    listLength: 1,\n    pageSize: 50,\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when the page number changes.\n       */\n      (e: 'set-page', pageNumber: number): void;\n    }>();\n\n  const classes = useCssModule();\n\n  const pages = computed(() => Math.ceil(props.listLength / props.pageSize));\n\n  /**\n   * Emits current page to list view.\n   */\n  function updatePage(currentPage: number) {\n    emit('set-page', currentPage);\n  }\n\n  /**\n   * Sets current page to next page\n   */\n  function next() {\n    if (props.currentPage < pages.value) {\n      updatePage(props.currentPage + 1);\n    }\n  }\n\n  /**\n   * Sets current page to previous page\n   */\n  function prev() {\n    if (props.currentPage > 1) {\n      updatePage(props.currentPage - 1);\n    }\n  }\n\n  /**\n   * Determines whether to show page\n   * @returns {boolean} - should show page in pagination component\n   */\n  function shouldShowPage(page: number): boolean {\n    const pageDiff = Math.abs(props.currentPage - page);\n\n    if (\n      pages.value < 10 ||\n      page === 1 ||\n      page === pages.value ||\n      (props.currentPage < 6 && page < 8) ||\n      (pages.value - props.currentPage < 5 && pages.value - page < 7) ||\n      pageDiff < 3\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether to show the leading ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowFirstEllipsis(page: number): boolean {\n    return pages.value > 9 && props.currentPage > 5 && page === 2;\n  }\n\n  /**\n   * Determines whether to show the trailing ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowLastEllipsis(page: number): boolean {\n    return pages.value > 9 && pages.value - props.currentPage > 4 && page === pages.value - 1;\n  }\n</script>\n\n<template>\n  <div class=\"stash-paginate tw-flex tw-justify-center\" data-test=\"stash-paginate\">\n    <ul class=\"stash-paginate__list tw-flex\" :class=\"classes.pagination\" data-test=\"stash-paginate|list\">\n      <button\n        data-test=\"stash-paginate|prev-page\"\n        :class=\"[classes.prev, { [classes['is-disabled']]: currentPage === 1 }]\"\n        @click=\"prev\"\n      >\n        <Icon size=\"small\" name=\"chevron-left\" />\n      </button>\n      <template v-for=\"page in pages\">\n        <button\n          v-if=\"shouldShowFirstEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          data-test=\"stash-paginate|first-ellipsis\"\n        >\n          &#x2026;\n        </button>\n        <button\n          v-if=\"shouldShowPage(page)\"\n          :key=\"page\"\n          data-test=\"stash-paginate|page-number\"\n          :class=\"{ [classes['is-active']]: currentPage === page }\"\n          @click=\"updatePage(page)\"\n        >\n          {{ page }}\n        </button>\n        <button v-if=\"shouldShowLastEllipsis(page)\" :key=\"`${page}-ellipsis`\" data-test=\"stash-paginate|last-ellipsis\">\n          &#x2026;\n        </button>\n      </template>\n      <button\n        data-test=\"stash-paginate|next-page\"\n        :class=\"[classes.next, { [classes['is-disabled']]: currentPage === pages }]\"\n        @click=\"next\"\n      >\n        <Icon size=\"small\" class=\"tw-rotate-180\" name=\"chevron-left\" />\n      </button>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .pagination {\n    /* Todo: We shouldn't really be making assumptions about the outer spacing of the pagination component */\n    margin-top: theme(spacing.12);\n    z-index: 0;\n\n    a,\n    button {\n      @apply tw-border tw-border-solid tw-border-ice-200;\n      align-items: center;\n      background-color: theme(colors.white);\n      color: var(--color-blue-500);\n      cursor: pointer;\n      display: flex;\n      height: theme(height.input);\n      justify-content: center;\n      margin: 0 0 0 -1px;\n      width: theme(height.input);\n\n      &.prev {\n        border-bottom-left-radius: theme(borderRadius.DEFAULT);\n        border-top-left-radius: theme(borderRadius.DEFAULT);\n      }\n\n      &.next {\n        border-bottom-right-radius: theme(borderRadius.DEFAULT);\n        border-top-right-radius: theme(borderRadius.DEFAULT);\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &.is-active {\n        background-color: var(--color-blue-500);\n        color: theme(colors.white);\n        pointer-events: none;\n        z-index: theme(zIndex.control);\n      }\n\n      &:hover,\n      &.is-active {\n        @apply tw-border tw-border-solid tw-border-blue-500;\n        position: relative;\n      }\n\n      &.is-disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","pages","computed","props","updatePage","currentPage","emit","next","prev","shouldShowPage","page","pageDiff","shouldShowFirstEllipsis","shouldShowLastEllipsis"],"mappings":";;;;;;;;;;;;;;;;;;;;iBAsCQA,IAAUC,KAEVC,IAAQC,EAAS,MAAM,KAAK,KAAKC,EAAM,aAAaA,EAAM,QAAQ,CAAC;AAKzE,aAASC,EAAWC,GAAqB;AACvC,MAAAC,EAAK,YAAYD,CAAW;AAAA,IAC9B;AAKA,aAASE,IAAO;AACV,MAAAJ,EAAM,cAAcF,EAAM,SACjBG,EAAAD,EAAM,cAAc,CAAC;AAAA,IAEpC;AAKA,aAASK,IAAO;AACV,MAAAL,EAAM,cAAc,KACXC,EAAAD,EAAM,cAAc,CAAC;AAAA,IAEpC;AAMA,aAASM,EAAeC,GAAuB;AAC7C,YAAMC,IAAW,KAAK,IAAIR,EAAM,cAAcO,CAAI;AAGhD,aAAAT,EAAM,QAAQ,MACdS,MAAS,KACTA,MAAST,EAAM,SACdE,EAAM,cAAc,KAAKO,IAAO,KAChCT,EAAM,QAAQE,EAAM,cAAc,KAAKF,EAAM,QAAQS,IAAO,KAC7DC,IAAW;AAAA,IAMf;AAMA,aAASC,EAAwBF,GAAuB;AACtD,aAAOT,EAAM,QAAQ,KAAKE,EAAM,cAAc,KAAKO,MAAS;AAAA,IAC9D;AAMA,aAASG,EAAuBH,GAAuB;AAC9C,aAAAT,EAAM,QAAQ,KAAKA,EAAM,QAAQE,EAAM,cAAc,KAAKO,MAAST,EAAM,QAAQ;AAAA,IAC1F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Paginate.js","sources":["../src/components/Paginate/Paginate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-paginate',\n  });\n\n  export interface PaginateProps {\n    /**\n     * Current page number\n     */\n    currentPage?: number;\n    /**\n     * Total number of items in list\n     */\n    listLength?: number;\n    /**\n     * Number of items per page\n     */\n    pageSize?: number;\n  }\n\n  const props = withDefaults(defineProps<PaginateProps>(), {\n    currentPage: 1,\n    listLength: 1,\n    pageSize: 50,\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when the page number changes.\n       */\n      (e: 'set-page', pageNumber: number): void;\n    }>();\n\n  const classes = useCssModule();\n\n  const pages = computed(() => Math.ceil(props.listLength / props.pageSize));\n\n  /**\n   * Emits current page to list view.\n   */\n  function updatePage(currentPage: number) {\n    emit('set-page', currentPage);\n  }\n\n  /**\n   * Sets current page to next page\n   */\n  function next() {\n    if (props.currentPage < pages.value) {\n      updatePage(props.currentPage + 1);\n    }\n  }\n\n  /**\n   * Sets current page to previous page\n   */\n  function prev() {\n    if (props.currentPage > 1) {\n      updatePage(props.currentPage - 1);\n    }\n  }\n\n  /**\n   * Determines whether to show page\n   * @returns {boolean} - should show page in pagination component\n   */\n  function shouldShowPage(page: number): boolean {\n    const pageDiff = Math.abs(props.currentPage - page);\n\n    if (\n      pages.value < 10 ||\n      page === 1 ||\n      page === pages.value ||\n      (props.currentPage < 6 && page < 8) ||\n      (pages.value - props.currentPage < 5 && pages.value - page < 7) ||\n      pageDiff < 3\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether to show the leading ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowFirstEllipsis(page: number): boolean {\n    return pages.value > 9 && props.currentPage > 5 && page === 2;\n  }\n\n  /**\n   * Determines whether to show the trailing ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowLastEllipsis(page: number): boolean {\n    return pages.value > 9 && pages.value - props.currentPage > 4 && page === pages.value - 1;\n  }\n</script>\n\n<template>\n  <div class=\"stash-paginate tw-flex tw-justify-center\" data-test=\"stash-paginate\">\n    <ul class=\"stash-paginate__list tw-flex\" :class=\"classes.pagination\" data-test=\"stash-paginate|list\">\n      <button\n        data-test=\"stash-paginate|prev-page\"\n        :class=\"[classes.prev, { [classes['is-disabled']]: currentPage === 1 }]\"\n        @click=\"prev\"\n      >\n        <Icon size=\"small\" name=\"chevron-left\" />\n      </button>\n      <template v-for=\"page in pages\">\n        <button\n          v-if=\"shouldShowFirstEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          data-test=\"stash-paginate|first-ellipsis\"\n        >\n          &#x2026;\n        </button>\n        <button\n          v-if=\"shouldShowPage(page)\"\n          :key=\"page\"\n          data-test=\"stash-paginate|page-number\"\n          :class=\"{ [classes['is-active']]: currentPage === page }\"\n          @click=\"updatePage(page)\"\n        >\n          {{ page }}\n        </button>\n        <button v-if=\"shouldShowLastEllipsis(page)\" :key=\"`${page}-ellipsis`\" data-test=\"stash-paginate|last-ellipsis\">\n          &#x2026;\n        </button>\n      </template>\n      <button\n        data-test=\"stash-paginate|next-page\"\n        :class=\"[classes.next, { [classes['is-disabled']]: currentPage === pages }]\"\n        @click=\"next\"\n      >\n        <Icon size=\"small\" class=\"tw-rotate-180\" name=\"chevron-left\" />\n      </button>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .pagination {\n    /* Todo: We shouldn't really be making assumptions about the outer spacing of the pagination component */\n    margin-top: theme('spacing.12');\n    z-index: 0;\n\n    a,\n    button {\n      @apply tw-border tw-border-solid tw-border-ice-200;\n      align-items: center;\n      background-color: theme('colors.white');\n      color: var(--color-blue-500);\n      cursor: pointer;\n      display: flex;\n      height: theme('height.input');\n      justify-content: center;\n      margin: 0 0 0 -1px;\n      width: theme('height.input');\n\n      &.prev {\n        border-bottom-left-radius: theme('borderRadius.DEFAULT');\n        border-top-left-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &.next {\n        border-bottom-right-radius: theme('borderRadius.DEFAULT');\n        border-top-right-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &.is-active {\n        background-color: var(--color-blue-500);\n        color: theme('colors.white');\n        pointer-events: none;\n        z-index: theme('zIndex.control');\n      }\n\n      &:hover,\n      &.is-active {\n        @apply tw-border tw-border-solid tw-border-blue-500;\n        position: relative;\n      }\n\n      &.is-disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","pages","computed","props","updatePage","currentPage","emit","next","prev","shouldShowPage","page","pageDiff","shouldShowFirstEllipsis","shouldShowLastEllipsis"],"mappings":";;;;;;;;;;;;;;;;;;;;iBAsCQA,IAAUC,KAEVC,IAAQC,EAAS,MAAM,KAAK,KAAKC,EAAM,aAAaA,EAAM,QAAQ,CAAC;AAKzE,aAASC,EAAWC,GAAqB;AACvC,MAAAC,EAAK,YAAYD,CAAW;AAAA,IAC9B;AAKA,aAASE,IAAO;AACV,MAAAJ,EAAM,cAAcF,EAAM,SACjBG,EAAAD,EAAM,cAAc,CAAC;AAAA,IAEpC;AAKA,aAASK,IAAO;AACV,MAAAL,EAAM,cAAc,KACXC,EAAAD,EAAM,cAAc,CAAC;AAAA,IAEpC;AAMA,aAASM,EAAeC,GAAuB;AAC7C,YAAMC,IAAW,KAAK,IAAIR,EAAM,cAAcO,CAAI;AAGhD,aAAAT,EAAM,QAAQ,MACdS,MAAS,KACTA,MAAST,EAAM,SACdE,EAAM,cAAc,KAAKO,IAAO,KAChCT,EAAM,QAAQE,EAAM,cAAc,KAAKF,EAAM,QAAQS,IAAO,KAC7DC,IAAW;AAAA,IAMf;AAMA,aAASC,EAAwBF,GAAuB;AACtD,aAAOT,EAAM,QAAQ,KAAKE,EAAM,cAAc,KAAKO,MAAS;AAAA,IAC9D;AAMA,aAASG,EAAuBH,GAAuB;AAC9C,aAAAT,EAAM,QAAQ,KAAKA,EAAM,QAAQE,EAAM,cAAc,KAAKO,MAAST,EAAM,QAAQ;AAAA,IAC1F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js

@@ -0,0 +1,11 @@
+const _ = "_pagination_14zhb_2", i = "_prev_14zhb_20", t = "_next_14zhb_25", n = {
+  pagination: _,
+  prev: i,
+  next: t,
+  "is-active": "_is-active_14zhb_38",
+  "is-disabled": "_is-disabled_14zhb_51"
+};
+export {
+  n as s
+};
+//# sourceMappingURL=Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js.map

package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/Radio.js

@@ -1,9 +1,11 @@
-import { useCssModule as d, openBlock as n, createElementBlock as i, normalizeClass as u, withDirectives as c, createElementVNode as l, mergeProps as m, vModelRadio as h, toDisplayString as _ } from "vue";
+import { useCssModule as d, openBlock as i, createElementBlock as u, normalizeClass as a, withDirectives as c, createElementVNode as s, mergeProps as _, vModelRadio as m, toDisplayString as h } from "vue";
 import { _ as f } from "./_plugin-vue_export-helper-dad06003.js";
-const p = "_root_1u1rr_2", k = "_error_1u1rr_40", y = {
+const p = "_root_ul6uq_2", b = "_label_ul6uq_7", k = "_error_ul6uq_40", y = "_input_ul6uq_45", g = {
   root: p,
-  error: k
-}, g = {
+  label: b,
+  error: k,
+  input: y
+}, v = {
   name: "ll-radio",
   props: {
     /**
@@ -65,27 +67,30 @@ const p = "_root_1u1rr_2", k = "_error_1u1rr_40", y = {
     if (this.$attrs.onChange)
       throw new Error("ll-radio: use the @update:checked event instead of @input");
   }
-}, v = ["id"], w = ["for"];
-function E(e, t, r, a, b, o) {
-  return n(), i("div", {
-    class: u(["stash-radio", [a.classes.root, { error: r.hasError }]]),
+}, w = ["id"], E = ["for"];
+function V(e, l, t, r, S, o) {
+  return i(), u("div", {
+    class: a(["stash-radio", [r.classes.root, { error: t.hasError }]]),
     "data-test": "ll-radio"
   }, [
-    c(l("input", m({
-      id: r.id,
-      "onUpdate:modelValue": t[0] || (t[0] = (s) => o.internalValue = s),
-      class: "tw-sr-only",
+    c(s("input", _({
+      id: t.id,
+      "onUpdate:modelValue": l[0] || (l[0] = (n) => o.internalValue = n),
+      class: ["tw-sr-only", r.classes.input],
       type: "radio"
-    }, e.$attrs), null, 16, v), [
-      [h, o.internalValue]
+    }, e.$attrs), null, 16, w), [
+      [m, o.internalValue]
     ]),
-    l("label", { for: r.id }, _(r.label), 9, w)
+    s("label", {
+      for: t.id,
+      class: a(r.classes.label)
+    }, h(t.label), 11, E)
   ], 2);
 }
-const V = {
-  $style: y
-}, B = /* @__PURE__ */ f(g, [["render", E], ["__cssModules", V]]);
+const q = {
+  $style: g
+}, C = /* @__PURE__ */ f(v, [["render", V], ["__cssModules", q]]);
 export {
-  B as default
+  C as default
 };
 //# sourceMappingURL=Radio.js.map

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../src/components/Radio/Radio.vue"],"sourcesContent":["<script>\n  import { useCssModule } from 'vue';\n\n  /**\n   * @deprecated use components/RadioNew/Radio instead.\n   * if you need multiple Radio components considering using RadioGroup instead.\n   */\n  export default {\n    name: 'll-radio',\n\n    props: {\n      /**\n       * The checked/selected state of the radio button\n       */\n      checked: {\n        type: [String, Number],\n        default: undefined,\n      },\n\n      /**\n       * Use :checked or v-model:checked instead of :model-value and v-model.\n       */\n      modelValue: {\n        type: [String, Number, null],\n        default: null,\n        validator(value) {\n          if (value !== null) {\n            throw new Error('ll-radio: use :checked or v-model:checked instead of :model-value and v-model.');\n          }\n\n          return true;\n        },\n      },\n\n      /**\n       * Adds error styling\n       */\n      hasError: Boolean,\n\n      /**\n       * A unique string to distinguish one Radio instance from another\n       * and to link the label to the input; required for accessibility\n       */\n      id: {\n        type: String,\n        required: true,\n      },\n\n      /**\n       * The description which appears to the right of the radio button\n       */\n      label: {\n        type: String,\n        default: '',\n      },\n    },\n\n    emits: ['update:checked'],\n\n    setup() {\n      return {\n        classes: useCssModule(),\n      };\n    },\n\n    computed: {\n      internalValue: {\n        get() {\n          return this.checked;\n        },\n        set(value) {\n          this.$emit('update:checked', value);\n        },\n      },\n    },\n\n    created() {\n      if (this.$attrs.onChange) {\n        throw new Error('ll-radio: use the @update:checked event instead of @input');\n      }\n    },\n  };\n</script>\n\n<template>\n  <div class=\"stash-radio\" data-test=\"ll-radio\" :class=\"[classes.root, { error: hasError }]\">\n    <input :id=\"id\" v-model=\"internalValue\" class=\"tw-sr-only\" type=\"radio\" v-bind=\"$attrs\" />\n\n    <label :for=\"id\">\n      {{ label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n    margin: var(--ll-space-1) 0;\n  }\n\n  label {\n    color: var(--color-ice-700);\n    cursor: pointer;\n    display: inline-block;\n    font-size: var(--text-sm);\n    font-weight: var(--font-weight-normal);\n    line-height: var(--ll-space-3);\n    min-height: var(--ll-space-4);\n    overflow: visible;\n    padding: var(--ll-space-1) 0 var(--ll-space-1) calc(20px + var(--ll-space-2));\n    position: relative;\n    vertical-align: top;\n  }\n\n  label::before {\n    background: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    content: '';\n    display: inline-block;\n    vertical-align: top;\n  }\n\n  label::before,\n  label::after {\n    height: 20px;\n    left: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    border-radius: 50%;\n  }\n\n  .error label {\n    color: var(--color-red-500);\n  }\n\n  .error label::before,\n  .error input {\n    border-color: var(--color-red-500);\n  }\n\n  input:checked + label::after {\n    background: var(--color-blue-500);\n    content: '';\n    height: 14px;\n    left: 3px;\n    width: 14px;\n  }\n\n  input:checked:disabled + label::after {\n    background: var(--color-ice-500);\n  }\n\n  input:not(:disabled, :checked) + label:hover::before {\n    border-color: var(--color-blue-500);\n  }\n\n  @media screen and (width >= 961px) {\n    .root input {\n      margin: 0;\n    }\n  }\n</style>\n"],"names":["_sfc_main","value","useCssModule","_createElementBlock","$setup","$props","_withDirectives","_createElementVNode","_mergeProps","$options","$event","_ctx","_hoisted_1","_hoisted_2"],"mappings":";;;;;GAOOA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,SAAS;AAAA,MACP,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,QAAQ,IAAI;AAAA,MAC3B,SAAS;AAAA,MACT,UAAUC,GAAO;AACf,YAAIA,MAAU;AACZ,gBAAM,IAAI,MAAM,gFAAgF;AAGlG,eAAO;AAAA,MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMV,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,gBAAgB;AAAA,EAExB,QAAQ;AACN,WAAO;AAAA,MACL,SAASC,EAAc;AAAA;EAE1B;AAAA,EAED,UAAU;AAAA,IACR,eAAe;AAAA,MACb,MAAM;AACJ,eAAO,KAAK;AAAA,MACb;AAAA,MACD,IAAID,GAAO;AACT,aAAK,MAAM,kBAAkBA,CAAK;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAU;AACR,QAAI,KAAK,OAAO;AACd,YAAM,IAAI,MAAM,2DAA2D;AAAA,EAE9E;;;cAKHE,EAMM,OAAA;AAAA,IAND,UAAM,eAAa,CAA+BC,UAAQ,eAAeC,EAAQ,SAAA,CAAA,CAAA,CAAA;AAAA,IAA7D,aAAU;AAAA;IACjCC,EAAAC,EAA0F,SAA1FC,EAA0F;AAAA,MAAlF,IAAIH,EAAE;AAAA,oDAAWI,EAAa,gBAAAC;AAAA,MAAE,OAAM;AAAA,MAAa,MAAK;AAAA,OAAgBC,EAAM,MAAA,GAAA,MAAA,IAAAC,CAAA,GAAA;AAAA,UAA7DH,EAAa,aAAA;AAAA;IAEtCF,EAEQ,SAFA,EAAA,KAAKF,EAAA,GAAE,KACVA,EAAK,KAAA,GAAA,GAAAQ,CAAA;AAAA;;;;;"}
+{"version":3,"file":"Radio.js","sources":["../src/components/Radio/Radio.vue"],"sourcesContent":["<script>\n  import { useCssModule } from 'vue';\n\n  /**\n   * @deprecated use components/RadioNew/Radio instead.\n   * if you need multiple Radio components considering using RadioGroup instead.\n   */\n  export default {\n    name: 'll-radio',\n\n    props: {\n      /**\n       * The checked/selected state of the radio button\n       */\n      checked: {\n        type: [String, Number],\n        default: undefined,\n      },\n\n      /**\n       * Use :checked or v-model:checked instead of :model-value and v-model.\n       */\n      modelValue: {\n        type: [String, Number, null],\n        default: null,\n        validator(value) {\n          if (value !== null) {\n            throw new Error('ll-radio: use :checked or v-model:checked instead of :model-value and v-model.');\n          }\n\n          return true;\n        },\n      },\n\n      /**\n       * Adds error styling\n       */\n      hasError: Boolean,\n\n      /**\n       * A unique string to distinguish one Radio instance from another\n       * and to link the label to the input; required for accessibility\n       */\n      id: {\n        type: String,\n        required: true,\n      },\n\n      /**\n       * The description which appears to the right of the radio button\n       */\n      label: {\n        type: String,\n        default: '',\n      },\n    },\n\n    emits: ['update:checked'],\n\n    setup() {\n      return {\n        classes: useCssModule(),\n      };\n    },\n\n    computed: {\n      internalValue: {\n        get() {\n          return this.checked;\n        },\n        set(value) {\n          this.$emit('update:checked', value);\n        },\n      },\n    },\n\n    created() {\n      if (this.$attrs.onChange) {\n        throw new Error('ll-radio: use the @update:checked event instead of @input');\n      }\n    },\n  };\n</script>\n\n<template>\n  <div class=\"stash-radio\" data-test=\"ll-radio\" :class=\"[classes.root, { error: hasError }]\">\n    <input :id=\"id\" v-model=\"internalValue\" class=\"tw-sr-only\" :class=\"classes.input\" type=\"radio\" v-bind=\"$attrs\" />\n\n    <label :for=\"id\" :class=\"classes.label\">\n      {{ label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n    margin: theme('spacing[1.5]') 0;\n  }\n\n  .label {\n    color: var(--color-ice-700);\n    cursor: pointer;\n    display: inline-block;\n    font-size: theme('fontSize.sm');\n    font-weight: theme('fontWeight.normal');\n    line-height: theme('spacing.6');\n    min-height: theme('spacing.9');\n    overflow: visible;\n    padding: theme('spacing[1.5]') 0 theme('spacing[1.5]') calc(20px + theme('spacing.3'));\n    position: relative;\n    vertical-align: top;\n  }\n\n  .label::before {\n    background: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    content: '';\n    display: inline-block;\n    vertical-align: top;\n  }\n\n  .label::before,\n  .label::after {\n    height: 20px;\n    left: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    border-radius: 50%;\n  }\n\n  .error .label {\n    color: var(--color-red-500);\n  }\n\n  .error .label::before,\n  .error .input {\n    border-color: var(--color-red-500);\n  }\n\n  .input:checked + .label::after {\n    background: var(--color-blue-500);\n    content: '';\n    height: 14px;\n    left: 3px;\n    width: 14px;\n  }\n\n  .input:checked:disabled + .label::after {\n    background: var(--color-ice-500);\n  }\n\n  .input:not(:disabled, :checked) + .label:hover::before {\n    border-color: var(--color-blue-500);\n  }\n\n  @media screen('lg') {\n    .root input {\n      margin: 0;\n    }\n  }\n</style>\n"],"names":["_sfc_main","value","useCssModule","_createElementBlock","$setup","$props","_withDirectives","_createElementVNode","_mergeProps","$options","$event","_ctx","_hoisted_1","_normalizeClass","_hoisted_2"],"mappings":";;;;;;;GAOOA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,SAAS;AAAA,MACP,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,QAAQ,IAAI;AAAA,MAC3B,SAAS;AAAA,MACT,UAAUC,GAAO;AACf,YAAIA,MAAU;AACZ,gBAAM,IAAI,MAAM,gFAAgF;AAGlG,eAAO;AAAA,MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMV,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,gBAAgB;AAAA,EAExB,QAAQ;AACN,WAAO;AAAA,MACL,SAASC,EAAc;AAAA;EAE1B;AAAA,EAED,UAAU;AAAA,IACR,eAAe;AAAA,MACb,MAAM;AACJ,eAAO,KAAK;AAAA,MACb;AAAA,MACD,IAAID,GAAO;AACT,aAAK,MAAM,kBAAkBA,CAAK;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAU;AACR,QAAI,KAAK,OAAO;AACd,YAAM,IAAI,MAAM,2DAA2D;AAAA,EAE9E;;;cAKHE,EAMM,OAAA;AAAA,IAND,UAAM,eAAa,CAA+BC,UAAQ,eAAeC,EAAQ,SAAA,CAAA,CAAA,CAAA;AAAA,IAA7D,aAAU;AAAA;IACjCC,EAAAC,EAAiH,SAAjHC,EAAiH;AAAA,MAAzG,IAAIH,EAAE;AAAA,oDAAWI,EAAa,gBAAAC;AAAA,MAAE,OAAM,CAAA,cAAqBN,EAAA,QAAQ,KAAK;AAAA,MAAE,MAAK;AAAA,OAAgBO,EAAM,MAAA,GAAA,MAAA,IAAAC,CAAA,GAAA;AAAA,UAApFH,EAAa,aAAA;AAAA;IAEtCF,EAEQ,SAAA;AAAA,MAFA,KAAKF,EAAE;AAAA,MAAG,OAAKQ,EAAET,EAAO,QAAC,KAAK;AAAA,SACjCC,EAAK,KAAA,GAAA,IAAAS,CAAA;AAAA;;;;;"}