@leaflink/stash 48.18.0 → 48.20.0

package/dist/ActionsDropdown.js

@@ -5,7 +5,10 @@ import g from "./Dropdown.js";
 import B from "./Icon.js";
 import { _ as D } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
+import "lodash-es/uniqueId";
+import "./index-9e1095ef.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./constants.js";
 import "./clickoutside.js";
 import "./utils/calculateElementOverflow.js";
@@ -13,9 +16,6 @@ import "./utils/helpers.js";
 import "lodash-es/camelCase";
 import "lodash-es/isFinite";
 import "lodash-es/isPlainObject";
-import "lodash-es/uniqueId";
-import "./index-9e1095ef.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const y = /* @__PURE__ */ c({
   name: "ll-actions-dropdown",
   __name: "ActionsDropdown",

package/dist/Button.js

@@ -1,8 +1,12 @@
-import { defineComponent as f, useCssModule as i, computed as n, openBlock as d, createBlock as p, resolveDynamicComponent as m, mergeProps as b, unref as a, withCtx as y, renderSlot as _ } from "vue";
-import { s as h } from "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
-import { _ as v } from "./_plugin-vue_export-helper-dad06003.js";
-var s = /* @__PURE__ */ ((e) => (e.Icon = "icon", e.IconLabel = "iconLabel", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Inline = "inline", e.Primary = "primary", e))(s || {});
-const $ = /* @__PURE__ */ f({
+import { defineComponent as p, useCssModule as m, useAttrs as b, computed as n, openBlock as l, createBlock as i, resolveDynamicComponent as y, mergeProps as h, unref as r, withCtx as _, renderSlot as v } from "vue";
+import g from "./Icon.js";
+import { s as L } from "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
+import { _ as $ } from "./_plugin-vue_export-helper-dad06003.js";
+import "lodash-es/uniqueId";
+import "./index-9e1095ef.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+var u = /* @__PURE__ */ ((e) => (e.Icon = "icon", e.IconLabel = "iconLabel", e.Secondary = "secondary", e.Tertiary = "tertiary", e.Inline = "inline", e.Primary = "primary", e))(u || {});
+const k = /* @__PURE__ */ p({
   name: "ll-button",
   __name: "Button",
   props: {
@@ -13,38 +17,49 @@ const $ = /* @__PURE__ */ f({
     inline: { type: Boolean, default: !1 },
     color: { default: void 0 },
     to: { default: void 0 },
-    href: { default: "" }
+    href: { default: "" },
+    isLoading: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, r = i(), l = n(() => {
-      for (const o of Object.values(s))
+    const t = e, a = m(), c = b(), s = n(() => {
+      for (const o of Object.values(u))
         if (t[o])
           return o;
       return "primary";
-    }), u = n(() => t.to ? "router-link" : t.href ? "a" : "button"), c = n(() => t.to ? {
+    }), f = n(() => t.to ? "router-link" : t.href ? "a" : "button"), d = n(() => t.to ? {
       to: t.to
     } : t.href ? {
       href: t.href
     } : {});
-    return (o, C) => (d(), p(m(u.value), b(c.value, {
+    return (o, C) => (l(), i(y(f.value), h({
+      disabled: t.isLoading || r(c).disabled
+    }, d.value, {
       class: ["stash-button", [
-        a(r).button,
-        `stash-button--${l.value}`,
-        a(r)[`button--${l.value}`],
-        { [`stash-button--${t.color}`]: t.color, [a(r)[`button--${t.color}`]]: t.color }
+        r(a).button,
+        `stash-button--${s.value}`,
+        r(a)[`button--${s.value}`],
+        {
+          [`stash-button--${t.color}`]: t.color,
+          [r(a)[`button--${t.color}`]]: t.color,
+          "stash-button--is-loading": t.isLoading
+        }
       ]],
       "data-test": "ll-button"
     }), {
-      default: y(() => [
-        _(o.$slots, "default")
+      default: _(() => [
+        t.isLoading ? (l(), i(g, {
+          key: 0,
+          name: "loading-empty",
+          class: "tw-animate-spin"
+        })) : v(o.$slots, "default", { key: 1 })
       ]),
       _: 3
-    }, 16, ["class"]));
+    }, 16, ["disabled", "class"]));
   }
 }), B = {
-  $style: h
-}, L = /* @__PURE__ */ v($, [["__cssModules", B]]);
+  $style: L
+}, j = /* @__PURE__ */ $(k, [["__cssModules", B]]);
 export {
-  L as default
+  j as default
 };
 //# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, useCssModule } from 'vue';\n  import { RouteLocationRaw } from 'vue-router';\n\n  defineOptions({\n    name: 'll-button',\n  });\n\n  export interface ButtonProps {\n    /**\n     * Renders the secondary variant\n     */\n    secondary?: boolean;\n\n    /**\n     * Renders the button as a container for an Icon\n     */\n    icon?: boolean;\n\n    /**\n     * Renders the button as a container for an IconLabel\n     */\n    iconLabel?: boolean;\n\n    /**\n     * Renders the tertiary variant\n     */\n    tertiary?: boolean;\n\n    /**\n     * Renders the component inline\n     */\n    inline?: boolean;\n\n    /**\n     * Renders a color variant\n     */\n    color?: 'blue' | 'red';\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component. If defined, the button will render as a `<router-link />`.\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Button link. If defined, the button will render as an `<a />` tag.\n     */\n    href?: string;\n  }\n\n  const props = withDefaults(defineProps<ButtonProps>(), {\n    secondary: false,\n    icon: false,\n    iconLabel: false,\n    tertiary: false,\n    inline: false,\n    color: undefined,\n    href: '',\n    to: undefined,\n  });\n  const classes = useCssModule();\n\n  enum ButtonTypes {\n    Icon = 'icon',\n    IconLabel = 'iconLabel',\n    Secondary = 'secondary',\n    Tertiary = 'tertiary',\n    Inline = 'inline',\n    Primary = 'primary',\n  }\n\n  type ButtonType = `${ButtonTypes}`;\n\n  const buttonType = computed<ButtonType>(() => {\n    for (const type of Object.values(ButtonTypes)) {\n      if (props[type]) {\n        return type;\n      }\n    }\n\n    return ButtonTypes.Primary;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  const buttonAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href,\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"buttonAttrs\"\n    class=\"stash-button\"\n    :class=\"[\n      classes.button,\n      `stash-button--${buttonType}`,\n      classes[`button--${buttonType}`],\n      { [`stash-button--${props.color}`]: props.color, [classes[`button--${props.color}`]]: props.color },\n    ]\"\n    data-test=\"ll-button\"\n  >\n    <!-- @slot default -->\n    <slot></slot>\n  </component>\n</template>\n\n<style module>\n  .button {\n    border-radius: theme('borderRadius.DEFAULT');\n    border-width: 1px;\n    display: inline-block;\n    font-size: 0.875rem;\n    font-weight: theme('fontWeight.semibold');\n    line-height: 2.125rem;\n    margin: 0;\n    min-width: 144px;\n    padding: 0 theme('spacing.3');\n    text-align: center;\n    text-decoration: none;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  @media screen('lg') {\n    /* `focus` and `hover` should be added only for large screens */\n    .button:focus {\n      box-shadow: 0 0 0 3px rgb(0 123 255 / 14%);\n      outline: none;\n    }\n\n    .button:hover {\n      text-decoration: none;\n    }\n  }\n\n  .button[disabled] {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* Solid treatment */\n  .button--solid {\n    background-color: var(--button-color);\n    border-color: transparent;\n    color: var(--text-color);\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--solid:hover {\n      background-color: var(--button-hover-color);\n    }\n  }\n\n  .button--solid:active {\n    background-color: var(--button-hover-color);\n  }\n\n  .button--solid[disabled] {\n    --button-color: var(--color-ice-500) !important;\n  }\n\n  /* Ghost treatment */\n  .button--ghost {\n    background-color: rgb(0 0 0 / 0%);\n    border-color: var(--button-color);\n    color: var(--text-color);\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--ghost:hover {\n      background-color: var(--button-hover-color);\n    }\n  }\n\n  .button--ghost:active {\n    background-color: var(--button-hover-color);\n  }\n\n  .button--ghost[disabled] {\n    --button-color: var(--color-ice-500) !important;\n    --text-color: var(--color-ice-500) !important;\n  }\n\n  /* Types */\n  .button--primary {\n    composes: button--solid;\n    --button-color: var(--color-blue-500);\n    --button-hover-color: var(--color-blue-hover);\n    --text-color: var(--color-white);\n  }\n\n  .button--secondary {\n    composes: button--ghost;\n    --button-color: var(--color-ice-500);\n    --button-hover-color: var(--color-ice-700-hover);\n    --text-color: var(--color-ice-700);\n  }\n\n  .button--tertiary {\n    composes: button--ghost;\n    --button-color: var(--color-white);\n    --button-hover-color: var(--color-white-hover);\n    --text-color: var(--color-white);\n  }\n\n  .button--icon,\n  .button--iconLabel {\n    /* https://developers.google.com/web/fundamentals/accessibility/accessible-styles */\n    border: 0;\n    border-radius: theme('borderRadius.DEFAULT');\n    height: theme('spacing.12');\n    min-width: theme('spacing.12');\n    text-decoration: none;\n  }\n\n  .button--icon {\n    padding: theme('spacing.3');\n    width: theme('spacing.12');\n  }\n\n  .button--iconLabel {\n    padding: 0;\n    width: unset;\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--icon:hover,\n    .button--iconLabel:hover {\n      text-decoration: none;\n    }\n  }\n\n  .button--icon svg,\n  .button--iconLabel svg {\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .button--icon[disabled] svg,\n  .button--iconLabel[disabled],\n  .button--iconLabel[disabled] svg {\n    color: var(--color-ice-500);\n  }\n\n  .button--inline {\n    border: 0;\n    color: var(--color-blue-500);\n    font-weight: theme('fontWeight.medium');\n    line-height: 1.5;\n    min-width: 0;\n    padding: 0;\n  }\n\n  .button--inline:hover {\n    text-decoration: underline;\n  }\n\n  .button--inline[disabled] {\n    color: var(--color-ice-500);\n  }\n\n  /* Colors */\n  .button--blue.button--primary,\n  .button--blue.button--secondary {\n    --button-color: var(--color-blue-500);\n  }\n\n  .button--blue.button--primary {\n    --button-hover-color: var(--color-blue-hover);\n  }\n\n  .button--blue.button--secondary {\n    --text-color: var(--color-blue-500);\n    --button-hover-color: var(--button-secondary-blue-hover);\n  }\n\n  .button--red.button--primary,\n  .button--red.button--secondary {\n    --button-color: var(--color-red-500);\n  }\n\n  .button--red.button--primary {\n    --button-hover-color: var(--color-red-hover);\n  }\n\n  .button--red.button--secondary {\n    --text-color: var(--color-red-500);\n    --button-hover-color: var(--button-secondary-red-hover);\n  }\n\n  /**\n   * Button Grid\n   * TODO: Move into separate component\n   * https://leaflink.atlassian.net/browse/STASH-230\n   * See `styles/elements/_buttons.scss` for button-grid (parent element) specific styles.\n   */\n  :global(.button-grid) > .button,\n  :global(.header-button-grid) > .button {\n    width: 50%;\n  }\n\n  :global(.button-grid) > .button + .button {\n    margin-left: theme('spacing.6');\n  }\n\n  @media screen('md') {\n    :global(.button-grid) > .button {\n      width: auto;\n    }\n  }\n\n  :global(.header-button-grid) > .button + .button {\n    margin-left: theme('spacing.6');\n  }\n\n  @media screen('lg') {\n    :global(.header-button-grid) > .button {\n      width: auto;\n    }\n  }\n</style>\n"],"names":["ButtonTypes","props","__props","classes","useCssModule","buttonType","computed","type","is","buttonAttrs"],"mappings":";;;AA8DE,IAAKA,sBAAAA,OACHA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,UAAU,WANPA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;AAZL,UAAMC,IAAQC,GAURC,IAAUC,KAaVC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOP,CAAW;AACtC,YAAAC,EAAMM,CAAI;AACL,iBAAAA;AAIJ,aAAA;AAAA,IAAA,CACR,GAEKC,IAAKF,EAAS,MACdL,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR,GAEKQ,IAAcH,EAAS,MACvBL,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, useAttrs, useCssModule } from 'vue';\n  import { RouteLocationRaw } from 'vue-router';\n\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-button',\n  });\n\n  export interface ButtonProps {\n    /**\n     * Renders the secondary variant\n     */\n    secondary?: boolean;\n\n    /**\n     * Renders the button as a container for an Icon\n     */\n    icon?: boolean;\n\n    /**\n     * Renders the button as a container for an IconLabel\n     */\n    iconLabel?: boolean;\n\n    /**\n     * Renders the tertiary variant\n     */\n    tertiary?: boolean;\n\n    /**\n     * Renders the component inline\n     */\n    inline?: boolean;\n\n    /**\n     * Renders a color variant\n     */\n    color?: 'blue' | 'red';\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component. If defined, the button will render as a `<router-link />`.\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Button link. If defined, the button will render as an `<a />` tag.\n     */\n    href?: string;\n\n    /**\n     * Displays a spinning loading icon in place of the button text and disables the button\n     */\n    isLoading?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ButtonProps>(), {\n    secondary: false,\n    icon: false,\n    iconLabel: false,\n    tertiary: false,\n    inline: false,\n    color: undefined,\n    href: '',\n    to: undefined,\n    isLoading: false,\n  });\n  const classes = useCssModule();\n  const attrs = useAttrs();\n\n  enum ButtonTypes {\n    Icon = 'icon',\n    IconLabel = 'iconLabel',\n    Secondary = 'secondary',\n    Tertiary = 'tertiary',\n    Inline = 'inline',\n    Primary = 'primary',\n  }\n\n  type ButtonType = `${ButtonTypes}`;\n\n  const buttonType = computed<ButtonType>(() => {\n    for (const type of Object.values(ButtonTypes)) {\n      if (props[type]) {\n        return type;\n      }\n    }\n\n    return ButtonTypes.Primary;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  const buttonAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href,\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    :disabled=\"props.isLoading || attrs.disabled\"\n    v-bind=\"buttonAttrs\"\n    class=\"stash-button\"\n    :class=\"[\n      classes.button,\n      `stash-button--${buttonType}`,\n      classes[`button--${buttonType}`],\n      {\n        [`stash-button--${props.color}`]: props.color,\n        [classes[`button--${props.color}`]]: props.color,\n        'stash-button--is-loading': props.isLoading,\n      },\n    ]\"\n    data-test=\"ll-button\"\n  >\n    <Icon v-if=\"props.isLoading\" name=\"loading-empty\" class=\"tw-animate-spin\" />\n    <!-- @slot default -->\n    <slot v-else></slot>\n  </component>\n</template>\n\n<style module>\n  .button {\n    border-radius: theme('borderRadius.DEFAULT');\n    border-width: 1px;\n    display: inline-block;\n    font-size: 0.875rem;\n    font-weight: theme('fontWeight.semibold');\n    line-height: 2.125rem;\n    margin: 0;\n    min-width: 144px;\n    padding: 0 theme('spacing.3');\n    text-align: center;\n    text-decoration: none;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  @media screen('lg') {\n    /* `focus` and `hover` should be added only for large screens */\n    .button:focus {\n      box-shadow: 0 0 0 3px rgb(0 123 255 / 14%);\n      outline: none;\n    }\n\n    .button:hover {\n      text-decoration: none;\n    }\n  }\n\n  .button[disabled] {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* Solid treatment */\n  .button--solid {\n    background-color: var(--button-color);\n    border-color: transparent;\n    color: var(--text-color);\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--solid:hover {\n      background-color: var(--button-hover-color);\n    }\n  }\n\n  .button--solid:active {\n    background-color: var(--button-hover-color);\n  }\n\n  .button--solid[disabled]:not(:global(.stash-button--is-loading)) {\n    --button-color: var(--color-ice-500) !important;\n  }\n\n  /* Ghost treatment */\n  .button--ghost {\n    background-color: rgb(0 0 0 / 0%);\n    border-color: var(--button-color);\n    color: var(--text-color);\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--ghost:hover {\n      background-color: var(--button-hover-color);\n    }\n  }\n\n  .button--ghost:active {\n    background-color: var(--button-hover-color);\n  }\n\n  .button--ghost[disabled]:not(:global(.stash-button--is-loading)) {\n    --button-color: var(--color-ice-500) !important;\n    --text-color: var(--color-ice-500) !important;\n  }\n\n  /* Types */\n  .button--primary {\n    composes: button--solid;\n    --button-color: var(--color-blue-500);\n    --button-hover-color: var(--color-blue-hover);\n    --text-color: var(--color-white);\n  }\n\n  .button--secondary {\n    composes: button--ghost;\n    --button-color: var(--color-ice-500);\n    --button-hover-color: var(--color-ice-700-hover);\n    --text-color: var(--color-ice-700);\n  }\n\n  .button--tertiary {\n    composes: button--ghost;\n    --button-color: var(--color-white);\n    --button-hover-color: var(--color-white-hover);\n    --text-color: var(--color-white);\n  }\n\n  .button--icon,\n  .button--iconLabel {\n    /* https://developers.google.com/web/fundamentals/accessibility/accessible-styles */\n    border: 0;\n    border-radius: theme('borderRadius.DEFAULT');\n    height: theme('spacing.12');\n    min-width: theme('spacing.12');\n    text-decoration: none;\n  }\n\n  .button--icon {\n    padding: theme('spacing.3');\n    width: theme('spacing.12');\n  }\n\n  .button--iconLabel {\n    padding: 0;\n    width: unset;\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--icon:hover,\n    .button--iconLabel:hover {\n      text-decoration: none;\n    }\n  }\n\n  .button--icon svg,\n  .button--iconLabel svg {\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .button--icon[disabled]:not(:global(.stash-button--is-loading)) svg,\n  .button--iconLabel[disabled]:not(:global(.stash-button--is-loading)),\n  .button--iconLabel[disabled]:not(:global(.stash-button--is-loading)) svg {\n    color: var(--color-ice-500);\n  }\n\n  .button--inline {\n    border: 0;\n    color: var(--color-blue-500);\n    font-weight: theme('fontWeight.medium');\n    line-height: 1.5;\n    min-width: 0;\n    padding: 0;\n  }\n\n  .button--inline:hover {\n    text-decoration: underline;\n  }\n\n  .button--inline[disabled] {\n    color: var(--color-ice-500);\n  }\n\n  /* Colors */\n  .button--blue.button--primary,\n  .button--blue.button--secondary {\n    --button-color: var(--color-blue-500);\n  }\n\n  .button--blue.button--primary {\n    --button-hover-color: var(--color-blue-hover);\n  }\n\n  .button--blue.button--secondary {\n    --text-color: var(--color-blue-500);\n    --button-hover-color: var(--button-secondary-blue-hover);\n  }\n\n  .button--red.button--primary,\n  .button--red.button--secondary {\n    --button-color: var(--color-red-500);\n  }\n\n  .button--red.button--primary {\n    --button-hover-color: var(--color-red-hover);\n  }\n\n  .button--red.button--secondary {\n    --text-color: var(--color-red-500);\n    --button-hover-color: var(--button-secondary-red-hover);\n  }\n\n  /**\n   * Button Grid\n   * TODO: Move into separate component\n   * https://leaflink.atlassian.net/browse/STASH-230\n   * See `styles/elements/_buttons.scss` for button-grid (parent element) specific styles.\n   */\n  :global(.button-grid) > .button,\n  :global(.header-button-grid) > .button {\n    width: 50%;\n  }\n\n  :global(.button-grid) > .button + .button {\n    margin-left: theme('spacing.6');\n  }\n\n  @media screen('md') {\n    :global(.button-grid) > .button {\n      width: auto;\n    }\n  }\n\n  :global(.header-button-grid) > .button + .button {\n    margin-left: theme('spacing.6');\n  }\n\n  @media screen('lg') {\n    :global(.header-button-grid) > .button {\n      width: auto;\n    }\n  }\n</style>\n"],"names":["ButtonTypes","props","__props","classes","useCssModule","attrs","useAttrs","buttonType","computed","type","is","buttonAttrs"],"mappings":";;;;;;;AAuEE,IAAKA,sBAAAA,OACHA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,UAAU,WANPA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;AAdL,UAAMC,IAAQC,GAWRC,IAAUC,KACVC,IAAQC,KAaRC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOT,CAAW;AACtC,YAAAC,EAAMQ,CAAI;AACL,iBAAAA;AAIJ,aAAA;AAAA,IAAA,CACR,GAEKC,IAAKF,EAAS,MACdP,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR,GAEKU,IAAcH,EAAS,MACvBP,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Button.vue.d.ts

@@ -68,6 +68,10 @@ export declare interface ButtonProps {
      * Button link. If defined, the button will render as an `<a />` tag.
      */
     href?: string;
+    /**
+     * Displays a spinning loading icon in place of the button text and disables the button
+     */
+    isLoading?: boolean;
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
@@ -79,6 +83,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes
     color: undefined;
     href: string;
     to: undefined;
+    isLoading: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
     secondary: boolean;
     icon: boolean;
@@ -88,6 +93,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes
     color: undefined;
     href: string;
     to: undefined;
+    isLoading: boolean;
 }>>> & Readonly<{}>, {
     to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
     icon: boolean;
@@ -97,6 +103,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes
     tertiary: boolean;
     inline: boolean;
     color: "blue" | "red";
+    isLoading: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;

package/dist/Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js

@@ -0,0 +1,17 @@
+const t = "_button_4w1qh_2", o = {
+  button: t,
+  "button--solid": "_button--solid_4w1qh_36",
+  "button--ghost": "_button--ghost_4w1qh_58",
+  "button--primary": "_button--primary_4w1qh_81 _button--solid_4w1qh_36",
+  "button--secondary": "_button--secondary_4w1qh_88 _button--ghost_4w1qh_58",
+  "button--tertiary": "_button--tertiary_4w1qh_95 _button--ghost_4w1qh_58",
+  "button--icon": "_button--icon_4w1qh_102",
+  "button--iconLabel": "_button--iconLabel_4w1qh_103",
+  "button--inline": "_button--inline_4w1qh_143",
+  "button--blue": "_button--blue_4w1qh_161",
+  "button--red": "_button--red_4w1qh_175"
+};
+export {
+  o as s
+};
+//# sourceMappingURL=Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js.map

package/dist/Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js.map

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

package/dist/ChevronToggle.js

@@ -1,12 +1,12 @@
 import { _ as o } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-fcdf0c19.js";
 import "vue";
 import "./Button.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
-import "./_plugin-vue_export-helper-dad06003.js";
 import "./Icon.js";
 import "lodash-es/uniqueId";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+import "./_plugin-vue_export-helper-dad06003.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
 export {
   o as default
 };

package/dist/Copy.js

@@ -12,7 +12,7 @@ import "lodash-es/camelCase";
 import "lodash-es/get";
 import "lodash-es/isFinite";
 import "lodash-es/isPlainObject";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
 import "lodash-es/uniqueId";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";

package/dist/DataViewFilters.js

@@ -15,7 +15,7 @@ import Y from "./SearchBar.js";
 import { D as ee } from "./DataViewFilters.keys-c80ffabe.js";
 import { i as L } from "./isDefined-2ce6cde4.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
 import "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-9e1095ef.js";

package/dist/DataViewSortButton.js

@@ -9,7 +9,7 @@ import E from "./Dropdown.js";
 import I from "./IconLabel.js";
 import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
 import "lodash-es/uniqueId";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";

package/dist/DataViewToolbar.js

@@ -7,13 +7,13 @@ import C from "./Icon.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
 import { D as B } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
 import "./_plugin-vue_export-helper-dad06003.js";
-import "@leaflink/snitch";
 import "lodash-es/uniqueId";
-import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+import "@leaflink/snitch";
+import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
 const q = { class: "tw-flex tw-place-items-center" }, G = { class: "tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6" }, H = {
   key: 0,
   class: "tw-flex tw-items-center"

package/dist/DatePicker.js

@@ -15,7 +15,7 @@ import { _ as Bf } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
 import "./toTimeZone-e6e9ab75.js";
 import "./_commonjsHelpers-10dfc225.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "lodash-es/isNil";

package/dist/Dialog.js

@@ -7,7 +7,7 @@ import D from "./Button.js";
 import R from "./Icon.js";
 import { _ as U } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const W = ["open", "aria-labelledby", "data-test"], X = ["id"], tt = {

package/dist/FileUpload.js

@@ -6,7 +6,7 @@ import F from "./Button.js";
 import ie from "./Icon.js";
 import { _ as ae } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const M = {

package/dist/FilterDropdown.js

@@ -11,8 +11,10 @@ import { D as G } from "./DataViewFilters.keys-c80ffabe.js";
 import $ from "./Dropdown.js";
 import q from "./FilterChip.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
+import "./Icon.js";
+import "./index-9e1095ef.js";
 import "./_plugin-vue_export-helper-dad06003.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
 import "./constants.js";
 import "./clickoutside.js";
 import "./utils/calculateElementOverflow.js";
@@ -20,8 +22,6 @@ import "./utils/helpers.js";
 import "lodash-es/camelCase";
 import "lodash-es/isFinite";
 import "lodash-es/isPlainObject";
-import "./Icon.js";
-import "./index-9e1095ef.js";
 import "./Chip.js";
 import "./utils/colorScheme.js";
 const H = { class: "tw-flex tw-h-full tw-flex-col tw-rounded" }, K = { class: "tw-relative tw-grow tw-overflow-hidden tw-rounded-t" }, M = {

package/dist/Filters.js

@@ -23,8 +23,11 @@ import "./utils/helpers.js";
 import "lodash-es/camelCase";
 import "lodash-es/isFinite";
 import "lodash-es/isPlainObject";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
+import "./Icon.js";
 import "lodash-es/uniqueId";
+import "./index-9e1095ef.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
 import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
 import "./utils/createValidDate.js";
 import "./index-5e5945a9.js";
@@ -33,9 +36,6 @@ import "./utils/formatDateTime.js";
 import "./utils/normalizeDate.js";
 import "./toTimeZone-e6e9ab75.js";
 import "./_commonjsHelpers-10dfc225.js";
-import "./Icon.js";
-import "./index-9e1095ef.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "lodash-es/isNil";
 import "./utils/i18n.js";
 import "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";

package/dist/Filters.vue.d.ts

@@ -117,6 +117,10 @@ declare const _default: DefineComponent<any, {
                 type: PropType<"blue" | "red">;
                 default: undefined;
             };
+            isLoading: {
+                type: PropType<boolean>;
+                default: boolean;
+            };
         }>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<ExtractPropTypes<{
             to: {
                 type: PropType<string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric>;
@@ -150,6 +154,10 @@ declare const _default: DefineComponent<any, {
                 type: PropType<"blue" | "red">;
                 default: undefined;
             };
+            isLoading: {
+                type: PropType<boolean>;
+                default: boolean;
+            };
         }>> & Readonly<{}>, {
             to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
             icon: boolean;
@@ -159,6 +167,7 @@ declare const _default: DefineComponent<any, {
             tertiary: boolean;
             inline: boolean;
             color: "blue" | "red";
+            isLoading: boolean;
         }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
             P: {};
             B: {};
@@ -199,6 +208,10 @@ declare const _default: DefineComponent<any, {
                 type: PropType<"blue" | "red">;
                 default: undefined;
             };
+            isLoading: {
+                type: PropType<boolean>;
+                default: boolean;
+            };
         }>> & Readonly<{}>, {}, {}, {}, {}, {
             to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
             icon: boolean;
@@ -208,6 +221,7 @@ declare const _default: DefineComponent<any, {
             tertiary: boolean;
             inline: boolean;
             color: "blue" | "red";
+            isLoading: boolean;
         }>;
         __isFragment?: undefined;
         __isTeleport?: undefined;
@@ -245,6 +259,10 @@ declare const _default: DefineComponent<any, {
             type: PropType<"blue" | "red">;
             default: undefined;
         };
+        isLoading: {
+            type: PropType<boolean>;
+            default: boolean;
+        };
     }>> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
         to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
         icon: boolean;
@@ -254,6 +272,7 @@ declare const _default: DefineComponent<any, {
         tertiary: boolean;
         inline: boolean;
         color: "blue" | "red";
+        isLoading: boolean;
     }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
         $slots: {
             default?(_: {}): any;

package/dist/HttpError.js

@@ -1,13 +1,15 @@
-import { defineComponent as B, useCssModule as b, useSlots as z, computed as i, resolveComponent as S, openBlock as _, createElementBlock as m, normalizeClass as n, unref as s, createElementVNode as o, createVNode as p, withCtx as h, toDisplayString as a, createTextVNode as c, renderSlot as V, createCommentVNode as X } from "vue";
+import { defineComponent as B, useCssModule as b, useSlots as z, computed as s, resolveComponent as S, openBlock as m, createElementBlock as _, normalizeClass as n, unref as i, createElementVNode as o, createVNode as p, withCtx as h, toDisplayString as a, createTextVNode as c, renderSlot as V, createCommentVNode as X } from "vue";
 import { t } from "./locale.js";
 import I from "./Button.js";
 import { _ as N, I as $, V as M } from "./Illustration.vue_vue_type_script_setup_true_lang-e26c3841.js";
 import { _ as T } from "./Logo.vue_vue_type_script_setup_true_lang-2a2597cb.js";
 import { _ as D } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
+import "./Icon.js";
 import "lodash-es/uniqueId";
 import "./index-9e1095ef.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
 import "@leaflink/snitch";
 const H = { class: "heading-jumbo tw-m-0 tw-mb-3 !tw-text-white" }, j = { class: "tw-mb-8 tw-text-white" }, F = { class: "tw-mb-4 tw-text-white" }, R = ["href"], Y = {
   key: 0,
@@ -56,15 +58,15 @@ const H = { class: "heading-jumbo tw-m-0 tw-mb-3 !tw-text-white" }, j = { class:
         title: t("ll.httpError.504.title"),
         description: t("ll.httpError.504.description")
       }
-    }, r = f, l = b(), w = z(), E = i(() => r.errorCode.toString()), g = i(() => parseInt(E.value, 10)), u = i(() => d[g.value] || d[500]), v = i(() => r.title || u.value.title), y = i(() => r.description || u.value.description), k = i(() => !r.hideLogoutButton && r.onLogout), C = i(() => r.retryLink || window.location.href);
+    }, r = f, l = b(), w = z(), E = s(() => r.errorCode.toString()), g = s(() => parseInt(E.value, 10)), u = s(() => d[g.value] || d[500]), v = s(() => r.title || u.value.title), y = s(() => r.description || u.value.description), k = s(() => !r.hideLogoutButton && r.onLogout), C = s(() => r.retryLink || window.location.href);
     return (x, e) => {
       const L = S("router-link");
-      return _(), m("div", {
-        class: n(["stash-http-error tw-px-6 tw-py-12", s(l).root]),
+      return m(), _("div", {
+        class: n(["stash-http-error tw-px-6 tw-py-12", i(l).root]),
         "data-test": "stash-http-error"
       }, [
         o("div", {
-          class: n(s(l).wrapper)
+          class: n(i(l).wrapper)
         }, [
           p(L, {
             to: "/",
@@ -79,10 +81,10 @@ const H = { class: "heading-jumbo tw-m-0 tw-mb-3 !tw-text-white" }, j = { class:
             _: 1
           }),
           o("div", {
-            class: n(["tw-mb-8 tw-gap-6", s(l).content])
+            class: n(["tw-mb-8 tw-gap-6", i(l).content])
           }, [
             o("div", {
-              class: n(["tw-order-2 lg:tw-order-1", s(l).content__text])
+              class: n(["tw-order-2 lg:tw-order-1", i(l).content__text])
             }, [
               o("h1", H, a(v.value), 1),
               o("h2", j, "Error Code: " + a(r.errorCode), 1),
@@ -101,16 +103,16 @@ const H = { class: "heading-jumbo tw-m-0 tw-mb-3 !tw-text-white" }, j = { class:
               ])
             ], 2),
             o("div", {
-              class: n(["tw-order-1 lg:tw-order-2", s(l).illustration])
+              class: n(["tw-order-1 lg:tw-order-2", i(l).illustration])
             }, [
               p(N, {
                 size: 300,
-                type: s($).Vignette,
-                name: s(M).SearchStorefront
+                type: i($).Vignette,
+                name: i(M).SearchStorefront
               }, null, 8, ["type", "name"])
             ], 2)
           ], 2),
-          s(w).actions || k.value ? (_(), m("div", Y, [
+          i(w).actions || k.value ? (m(), _("div", Y, [
             V(x.$slots, "actions", {}, () => [
               p(I, {
                 tertiary: "",
@@ -135,8 +137,8 @@ const H = { class: "heading-jumbo tw-m-0 tw-mb-3 !tw-text-white" }, j = { class:
   content__text: O
 }, Q = {
   $style: P
-}, pt = /* @__PURE__ */ D(q, [["__cssModules", Q]]);
+}, at = /* @__PURE__ */ D(q, [["__cssModules", Q]]);
 export {
-  pt as default
+  at as default
 };
 //# sourceMappingURL=HttpError.js.map

package/dist/HttpError.js.map

@@ -1 +1 @@
-{"version":3,"file":"HttpError.js","sources":["../src/components/HttpError/HttpError.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { IllustrationType, VignetteName } from '../Illustration/Illustration.models';\n  import Illustration from '../Illustration/Illustration.vue';\n  import Logo from '../Logo/Logo.vue';\n\n  type ErrorCodes = 401 | 403 | 404 | 405 | 500 | 502 | 503 | 504;\n  const errors: Record<ErrorCodes, { title: string; description: string }> = {\n    401: {\n      title: t('ll.httpError.401.title'),\n      description: t('ll.httpError.401.description'),\n    },\n    403: {\n      title: t('ll.httpError.403.title'),\n      description: t('ll.httpError.403.description'),\n    },\n    404: {\n      title: t('ll.httpError.404.title'),\n      description: t('ll.httpError.404.description'),\n    },\n    405: {\n      title: t('ll.httpError.405.title'),\n      description: t('ll.httpError.405.description'),\n    },\n    500: {\n      title: t('ll.httpError.50X.title'),\n      description: t('ll.httpError.50X.description'),\n    },\n    502: {\n      title: t('ll.httpError.50X.title'),\n      description: t('ll.httpError.50X.description'),\n    },\n    503: {\n      title: t('ll.httpError.50X.title'),\n      description: t('ll.httpError.50X.description'),\n    },\n    504: {\n      title: t('ll.httpError.504.title'),\n      description: t('ll.httpError.504.description'),\n    },\n  };\n\n  export interface HttpErrorProps {\n    /**\n     * A description of what possibly happened.\n     */\n    description?: string;\n\n    /**\n     * The error code.\n     */\n    errorCode: keyof typeof errors | `${keyof typeof errors}`;\n\n    /**\n     * By default, the logout button is visible unless content is provided to the `actions` slot or\n     * this prop is `true`.\n     */\n    hideLogoutButton?: boolean;\n\n    /**\n     * A callback that will be called when the user clicks the logout button. If not provided,\n     * a `logout` event will be emitted.\n     */\n    onLogout?: () => void;\n\n    /**\n     * A link to redirect the user to see if a hard refresh fixes the issue.\n     */\n    retryLink?: string;\n\n    /**\n     * The error title.\n     */\n    title?: string;\n  }\n\n  const props = withDefaults(defineProps<HttpErrorProps>(), {\n    description: '',\n    errorCode: '404',\n    onLogout: undefined,\n    hideLogoutButton: false,\n    retryLink: undefined,\n    title: '',\n  });\n\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  const errorCodeStr = computed(() => props.errorCode.toString());\n  const errorCodeInt = computed(() => parseInt(errorCodeStr.value, 10));\n  const defaultInfoByErrorCode = computed(() => errors[errorCodeInt.value] || errors['500']);\n  const errorTitle = computed(() => props.title || defaultInfoByErrorCode.value.title);\n  const errorDescription = computed(() => props.description || defaultInfoByErrorCode.value.description);\n\n  const showLogoutButton = computed(() => !props.hideLogoutButton && props.onLogout);\n  const computedRetryLink = computed(() => props.retryLink || window.location.href);\n</script>\n\n<template>\n  <div class=\"stash-http-error tw-px-6 tw-py-12\" :class=\"classes.root\" data-test=\"stash-http-error\">\n    <div :class=\"classes.wrapper\">\n      <router-link to=\"/\" class=\"tw-mb-8 tw-block\">\n        <Logo color=\"white\" width=\"192\" />\n      </router-link>\n\n      <div class=\"tw-mb-8 tw-gap-6\" :class=\"classes.content\">\n        <div class=\"tw-order-2 lg:tw-order-1\" :class=\"classes.content__text\">\n          <h1 class=\"heading-jumbo tw-m-0 tw-mb-3 !tw-text-white\">\n            {{ errorTitle }}\n          </h1>\n          <h2 class=\"tw-mb-8 tw-text-white\">Error Code: {{ props.errorCode }}</h2>\n          <p class=\"tw-mb-4 tw-text-white\">\n            {{ errorDescription }} You can <a :href=\"computedRetryLink\" class=\"link\">try again</a> or reach out to\n            <a href=\"mailto:support@leaflink.com\" class=\"link\">support@leaflink.com</a> for assistance.\n          </p>\n        </div>\n        <div class=\"tw-order-1 lg:tw-order-2\" :class=\"classes.illustration\">\n          <Illustration :size=\"300\" :type=\"IllustrationType.Vignette\" :name=\"VignetteName.SearchStorefront\" />\n        </div>\n      </div>\n\n      <div v-if=\"slots.actions || showLogoutButton\" class=\"tw-flex tw-items-start tw-gap-6\">\n        <slot name=\"actions\">\n          <Button tertiary @click=\"props.onLogout\">Logout</Button>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n  .root {\n    background-color: var(--color-purple-500);\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    align-items: center;\n    max-width: 100vw;\n  }\n\n  .wrapper {\n    max-width: 100%;\n    width: 56rem;\n  }\n\n  .content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .illustration {\n    /* width and height similar to figma. */\n    width: 300px;\n    height: 193px;\n  }\n\n  @media screen and (width < 1024px) {\n    .content {\n      flex-wrap: wrap;\n      gap: 0;\n    }\n\n    .illustration {\n      margin-bottom: 30px;\n    }\n  }\n\n  @media screen and (width >= 1024px) {\n    .content__text {\n      max-width: 50vw;\n    }\n  }\n\n  .illustration svg {\n    /*\n     * We cannot use the same sizes from figma because the illustration would be smaller\n     * and it would break alignment. The specified height in figma is 193px but the\n     * illustration is 300px, so, (300 - 193) / 2 ~= 53, which keeps it aligned.\n     */\n    margin-top: -53px;\n  }\n</style>\n"],"names":["errors","props","__props","classes","useCssModule","slots","useSlots","errorCodeStr","computed","errorCodeInt","defaultInfoByErrorCode","errorTitle","errorDescription","showLogoutButton","computedRetryLink"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAUE,UAAMA,IAAqE;AAAA,MACzE,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,IAAA,GAqCIC,IAAQC,GASRC,IAAUC,KACVC,IAAQC,KAERC,IAAeC,EAAS,MAAMP,EAAM,UAAU,UAAU,GACxDQ,IAAeD,EAAS,MAAM,SAASD,EAAa,OAAO,EAAE,CAAC,GAC9DG,IAAyBF,EAAS,MAAMR,EAAOS,EAAa,KAAK,KAAKT,EAAO,GAAK,CAAC,GACnFW,IAAaH,EAAS,MAAMP,EAAM,SAASS,EAAuB,MAAM,KAAK,GAC7EE,IAAmBJ,EAAS,MAAMP,EAAM,eAAeS,EAAuB,MAAM,WAAW,GAE/FG,IAAmBL,EAAS,MAAM,CAACP,EAAM,oBAAoBA,EAAM,QAAQ,GAC3Ea,IAAoBN,EAAS,MAAMP,EAAM,aAAa,OAAO,SAAS,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"HttpError.js","sources":["../src/components/HttpError/HttpError.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { IllustrationType, VignetteName } from '../Illustration/Illustration.models';\n  import Illustration from '../Illustration/Illustration.vue';\n  import Logo from '../Logo/Logo.vue';\n\n  type ErrorCodes = 401 | 403 | 404 | 405 | 500 | 502 | 503 | 504;\n  const errors: Record<ErrorCodes, { title: string; description: string }> = {\n    401: {\n      title: t('ll.httpError.401.title'),\n      description: t('ll.httpError.401.description'),\n    },\n    403: {\n      title: t('ll.httpError.403.title'),\n      description: t('ll.httpError.403.description'),\n    },\n    404: {\n      title: t('ll.httpError.404.title'),\n      description: t('ll.httpError.404.description'),\n    },\n    405: {\n      title: t('ll.httpError.405.title'),\n      description: t('ll.httpError.405.description'),\n    },\n    500: {\n      title: t('ll.httpError.50X.title'),\n      description: t('ll.httpError.50X.description'),\n    },\n    502: {\n      title: t('ll.httpError.50X.title'),\n      description: t('ll.httpError.50X.description'),\n    },\n    503: {\n      title: t('ll.httpError.50X.title'),\n      description: t('ll.httpError.50X.description'),\n    },\n    504: {\n      title: t('ll.httpError.504.title'),\n      description: t('ll.httpError.504.description'),\n    },\n  };\n\n  export interface HttpErrorProps {\n    /**\n     * A description of what possibly happened.\n     */\n    description?: string;\n\n    /**\n     * The error code.\n     */\n    errorCode: keyof typeof errors | `${keyof typeof errors}`;\n\n    /**\n     * By default, the logout button is visible unless content is provided to the `actions` slot or\n     * this prop is `true`.\n     */\n    hideLogoutButton?: boolean;\n\n    /**\n     * A callback that will be called when the user clicks the logout button. If not provided,\n     * a `logout` event will be emitted.\n     */\n    onLogout?: () => void;\n\n    /**\n     * A link to redirect the user to see if a hard refresh fixes the issue.\n     */\n    retryLink?: string;\n\n    /**\n     * The error title.\n     */\n    title?: string;\n  }\n\n  const props = withDefaults(defineProps<HttpErrorProps>(), {\n    description: '',\n    errorCode: '404',\n    onLogout: undefined,\n    hideLogoutButton: false,\n    retryLink: undefined,\n    title: '',\n  });\n\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  const errorCodeStr = computed(() => props.errorCode.toString());\n  const errorCodeInt = computed(() => parseInt(errorCodeStr.value, 10));\n  const defaultInfoByErrorCode = computed(() => errors[errorCodeInt.value] || errors['500']);\n  const errorTitle = computed(() => props.title || defaultInfoByErrorCode.value.title);\n  const errorDescription = computed(() => props.description || defaultInfoByErrorCode.value.description);\n\n  const showLogoutButton = computed(() => !props.hideLogoutButton && props.onLogout);\n  const computedRetryLink = computed(() => props.retryLink || window.location.href);\n</script>\n\n<template>\n  <div class=\"stash-http-error tw-px-6 tw-py-12\" :class=\"classes.root\" data-test=\"stash-http-error\">\n    <div :class=\"classes.wrapper\">\n      <router-link to=\"/\" class=\"tw-mb-8 tw-block\">\n        <Logo color=\"white\" width=\"192\" />\n      </router-link>\n\n      <div class=\"tw-mb-8 tw-gap-6\" :class=\"classes.content\">\n        <div class=\"tw-order-2 lg:tw-order-1\" :class=\"classes.content__text\">\n          <h1 class=\"heading-jumbo tw-m-0 tw-mb-3 !tw-text-white\">\n            {{ errorTitle }}\n          </h1>\n          <h2 class=\"tw-mb-8 tw-text-white\">Error Code: {{ props.errorCode }}</h2>\n          <p class=\"tw-mb-4 tw-text-white\">\n            {{ errorDescription }} You can <a :href=\"computedRetryLink\" class=\"link\">try again</a> or reach out to\n            <a href=\"mailto:support@leaflink.com\" class=\"link\">support@leaflink.com</a> for assistance.\n          </p>\n        </div>\n        <div class=\"tw-order-1 lg:tw-order-2\" :class=\"classes.illustration\">\n          <Illustration :size=\"300\" :type=\"IllustrationType.Vignette\" :name=\"VignetteName.SearchStorefront\" />\n        </div>\n      </div>\n\n      <div v-if=\"slots.actions || showLogoutButton\" class=\"tw-flex tw-items-start tw-gap-6\">\n        <slot name=\"actions\">\n          <Button tertiary @click=\"props.onLogout\">Logout</Button>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n  .root {\n    background-color: var(--color-purple-500);\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    align-items: center;\n    max-width: 100vw;\n  }\n\n  .wrapper {\n    max-width: 100%;\n    width: 56rem;\n  }\n\n  .content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .illustration {\n    /* width and height similar to figma. */\n    width: 300px;\n    height: 193px;\n  }\n\n  @media screen and (width < 1024px) {\n    .content {\n      flex-wrap: wrap;\n      gap: 0;\n    }\n\n    .illustration {\n      margin-bottom: 30px;\n    }\n  }\n\n  @media screen and (width >= 1024px) {\n    .content__text {\n      max-width: 50vw;\n    }\n  }\n\n  .illustration svg {\n    /*\n     * We cannot use the same sizes from figma because the illustration would be smaller\n     * and it would break alignment. The specified height in figma is 193px but the\n     * illustration is 300px, so, (300 - 193) / 2 ~= 53, which keeps it aligned.\n     */\n    margin-top: -53px;\n  }\n</style>\n"],"names":["errors","props","__props","classes","useCssModule","slots","useSlots","errorCodeStr","computed","errorCodeInt","defaultInfoByErrorCode","errorTitle","errorDescription","showLogoutButton","computedRetryLink"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAUE,UAAMA,IAAqE;AAAA,MACzE,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,MACA,KAAK;AAAA,QACH,OAAO,EAAE,wBAAwB;AAAA,QACjC,aAAa,EAAE,8BAA8B;AAAA,MAC/C;AAAA,IAAA,GAqCIC,IAAQC,GASRC,IAAUC,KACVC,IAAQC,KAERC,IAAeC,EAAS,MAAMP,EAAM,UAAU,UAAU,GACxDQ,IAAeD,EAAS,MAAM,SAASD,EAAa,OAAO,EAAE,CAAC,GAC9DG,IAAyBF,EAAS,MAAMR,EAAOS,EAAa,KAAK,KAAKT,EAAO,GAAK,CAAC,GACnFW,IAAaH,EAAS,MAAMP,EAAM,SAASS,EAAuB,MAAM,KAAK,GAC7EE,IAAmBJ,EAAS,MAAMP,EAAM,eAAeS,EAAuB,MAAM,WAAW,GAE/FG,IAAmBL,EAAS,MAAM,CAACP,EAAM,oBAAoBA,EAAM,QAAQ,GAC3Ea,IAAoBN,EAAS,MAAMP,EAAM,aAAa,OAAO,SAAS,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ListView.js

@@ -26,13 +26,13 @@ import "lodash-es/camelCase";
 import "lodash-es/isFinite";
 import "./utils/storage.js";
 import "@leaflink/snitch";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-a9290468.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
 import "lodash-es/uniqueId";
+import "./index-9e1095ef.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
 import "./clickoutside.js";
 import "./utils/calculateElementOverflow.js";
-import "./index-9e1095ef.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "lodash-es/merge";
 import "./useValidation.js";
 import "lodash-es/debounce";