@leaflink/stash 49.4.1 → 50.0.0

package/dist/AppTopbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppTopbar.js","sources":["../src/components/AppTopbar/AppTopbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Icon from '../Icon/Icon.vue';\n  import Logo from '../Logo/Logo.vue';\n\n  export interface AppTopbarProps {\n    /**\n     * Indicates if the AppSidebar is opened or not for styling purposes\n     */\n    sidebarOpened?: boolean;\n    /**\n     * Url for the logo anchor wrapper\n     */\n    href?: string;\n  }\n\n  const props = withDefaults(defineProps<AppTopbarProps>(), {\n    sidebarOpened: false,\n    href: '/',\n  });\n\n  const emit = defineEmits(['toggle-sidebar']);\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n</script>\n\n<template>\n  <header data-test=\"stash-app-topbar\" class=\"stash-app-topbar tw-absolute tw-left-0 tw-top-0\">\n    <div\n      class=\"tw-fixed tw-top-0 tw-flex tw-h-topbar tw-w-sidebar tw-items-center tw-pl-3 xl:tw-text-white\"\n      :class=\"{\n        'tw-z-dialog tw-text-white': props.sidebarOpened,\n        'tw-z-[401] tw-text-ice-700': !props.sidebarOpened,\n      }\"\n    >\n      <button class=\"xl:tw-hidden\" @click=\"emit('toggle-sidebar')\">\n        <Icon name=\"menu\" class=\"tw-mr-3\" aria-label=\"open sidebar navigation\" />\n      </button>\n\n      <a :href=\"props.href\" class=\"tw-flex tw-items-center tw-text-inherit\">\n        <Logo\n          :color=\"props.sidebarOpened ? 'white' : 'purple'\"\n          variant=\"brandmark\"\n          class=\"tw-transition-colors tw-duration-500 md:tw-hidden\"\n        />\n        <Logo :color=\"props.sidebarOpened || isExtraLargeScreen ? 'white' : 'purple'\" class=\"tw-hidden md:tw-block\" />\n      </a>\n    </div>\n\n    <div\n      :class=\"[$attrs.class]\"\n      class=\"tw-fixed tw-top-0 tw-z-page tw-flex tw-h-topbar tw-w-full tw-flex-row-reverse tw-items-center tw-justify-between tw-bg-white tw-py-3 tw-pl-sidebar tw-pr-3 tw-shadow-md\"\n    >\n      <div class=\"tw-flex tw-items-center\">\n        <!-- @slot Actions slot, for showing any actions to the left of the avatar -->\n        <slot name=\"actions\"></slot>\n        <div class=\"tw-ml-6\">\n          <!-- @slot Avatar slot, for showing the avatar on the far right of the header -->\n          <slot name=\"avatar\"></slot>\n        </div>\n      </div>\n      <div class=\"tw-hidden tw-pl-3 xl:tw-block\">\n        <!-- @slot Text slot, for showing informative texts on the left of large viewports -->\n        <slot name=\"text\"></slot>\n      </div>\n    </div>\n  </header>\n</template>\n"],"names":["props","__props","emit","__emit","isExtraLargeScreen","useMediaQuery"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAKRC,IAAOC,GACPC,IAAqBC,EAAc,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AppTopbar.js","sources":["../src/components/AppTopbar/AppTopbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import useMediaQuery from '../../composables/useMediaQuery/useMediaQuery';\n  import Icon from '../Icon/Icon.vue';\n  import Logo from '../Logo/Logo.vue';\n\n  export interface AppTopbarProps {\n    /**\n     * Indicates if the AppSidebar is opened or not for styling purposes\n     */\n    sidebarOpened?: boolean;\n    /**\n     * Url for the logo anchor wrapper\n     */\n    href?: string;\n  }\n\n  const props = withDefaults(defineProps<AppTopbarProps>(), {\n    sidebarOpened: false,\n    href: '/',\n  });\n\n  const emit = defineEmits(['toggle-sidebar']);\n  const isExtraLargeScreen = useMediaQuery('screen and (min-width: 1321px)');\n</script>\n\n<template>\n  <header data-test=\"stash-app-topbar\" class=\"stash-app-topbar tw-absolute tw-left-0 tw-top-0\">\n    <div\n      class=\"tw-fixed tw-top-0 tw-flex tw-h-topbar tw-w-sidebar tw-items-center tw-pl-3 xl:tw-text-white\"\n      :class=\"{\n        'tw-z-dialog tw-text-white': props.sidebarOpened,\n        'tw-z-[401] tw-text-ice-700': !props.sidebarOpened,\n      }\"\n    >\n      <button class=\"xl:tw-hidden\" @click=\"emit('toggle-sidebar')\">\n        <Icon name=\"menu\" class=\"tw-mr-3\" aria-label=\"open sidebar navigation\" />\n      </button>\n\n      <a :href=\"props.href\" class=\"tw-flex tw-items-center tw-text-inherit\">\n        <Logo\n          :color=\"props.sidebarOpened ? 'white' : 'purple'\"\n          variant=\"brandmark\"\n          class=\"tw-transition-colors tw-duration-500 md:tw-hidden\"\n        />\n        <Logo :color=\"props.sidebarOpened || isExtraLargeScreen ? 'white' : 'purple'\" class=\"tw-hidden md:tw-block\" />\n      </a>\n    </div>\n\n    <div\n      :class=\"[$attrs.class]\"\n      class=\"tw-fixed tw-top-0 tw-z-page tw-flex tw-h-topbar tw-w-full tw-flex-row-reverse tw-items-center tw-justify-between tw-bg-white tw-py-3 tw-pl-sidebar tw-pr-3 tw-shadow-md\"\n    >\n      <div class=\"tw-flex tw-items-center\">\n        <!-- @slot Actions slot, for showing any actions to the left of the avatar -->\n        <slot name=\"actions\"></slot>\n        <div class=\"tw-ml-6\">\n          <!-- @slot Avatar slot, for showing the avatar on the far right of the header -->\n          <slot name=\"avatar\"></slot>\n        </div>\n      </div>\n      <div class=\"tw-hidden tw-pl-3 xl:tw-block\">\n        <!-- @slot Text slot, for showing informative texts on the left of large viewports -->\n        <slot name=\"text\"></slot>\n      </div>\n    </div>\n  </header>\n</template>\n"],"names":["props","__props","emit","__emit","isExtraLargeScreen","useMediaQuery"],"mappings":";;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC,GAKRC,IAAOC,GACPC,IAAqBC,EAAc,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AppTopbar.vue.d.ts

@@ -44,18 +44,18 @@ export declare interface AppTopbarProps {
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppTopbarProps>, {
-    sidebarOpened: boolean;
-    href: string;
+sidebarOpened: boolean;
+href: string;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    "toggle-sidebar": (...args: any[]) => void;
+"toggle-sidebar": (...args: any[]) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AppTopbarProps>, {
-    sidebarOpened: boolean;
-    href: string;
+sidebarOpened: boolean;
+href: string;
 }>>> & Readonly<{
-    "onToggle-sidebar"?: ((...args: any[]) => any) | undefined;
+"onToggle-sidebar"?: ((...args: any[]) => any) | undefined;
 }>, {
-    href: string;
-    sidebarOpened: boolean;
+href: string;
+sidebarOpened: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     actions?(_: {}): any;
     avatar?(_: {}): any;

package/dist/Avatar.js

@@ -1,6 +1,6 @@
 import { defineComponent as p, useAttrs as v, useCssModule as _, computed as c, openBlock as i, createElementBlock as d, mergeProps as u, unref as a, toDisplayString as h } from "vue";
 import b from "./utils/colorScheme.js";
-import { _ as k } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as k } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const g = ["alt", "src", "tabindex"], x = ["tabindex"], C = /* @__PURE__ */ p({
   name: "ll-avatar",
   __name: "Avatar",

package/dist/Avatar.vue.d.ts

@@ -61,29 +61,29 @@ export declare interface AvatarProps {
 }
 
 declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AvatarProps>, {
-    src: undefined;
-    name: string;
-    alt: undefined;
-    colorScheme: string;
-    shade: string;
-    bgColor: undefined;
-    textColor: undefined;
+src: undefined;
+name: string;
+alt: undefined;
+colorScheme: string;
+shade: string;
+bgColor: undefined;
+textColor: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AvatarProps>, {
-    src: undefined;
-    name: string;
-    alt: undefined;
-    colorScheme: string;
-    shade: string;
-    bgColor: undefined;
-    textColor: undefined;
+src: undefined;
+name: string;
+alt: undefined;
+colorScheme: string;
+shade: string;
+bgColor: undefined;
+textColor: undefined;
 }>>> & Readonly<{}>, {
-    name: string;
-    src: string;
-    shade: "main" | "light";
-    colorScheme: StashPrimaryColorGroup;
-    bgColor: "ice-700" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-500" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-500" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-500" | "orange-100" | "red-700" | "red-500" | "red-100" | "ice-500" | "ice-200" | "ice-100" | "white" | "black";
-    textColor: "ice-700" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-500" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-500" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-500" | "orange-100" | "red-700" | "red-500" | "red-100" | "ice-500" | "ice-200" | "ice-100" | "white" | "black";
-    alt: string;
+name: string;
+src: string;
+shade: "main" | "light";
+colorScheme: StashPrimaryColorGroup;
+bgColor: "ice-700" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-500" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-500" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-500" | "orange-100" | "red-700" | "red-500" | "red-100" | "ice-500" | "ice-200" | "ice-100" | "white" | "black";
+textColor: "ice-700" | "purple-700" | "purple-500" | "purple-100" | "royal-700" | "royal-500" | "royal-100" | "blue-700" | "blue-500" | "blue-100" | "teal-700" | "teal-500" | "teal-100" | "green-700" | "green-500" | "green-100" | "seafoam-700" | "seafoam-500" | "seafoam-100" | "yellow-700" | "yellow-500" | "yellow-100" | "orange-700" | "orange-500" | "orange-100" | "red-700" | "red-500" | "red-100" | "ice-500" | "ice-200" | "ice-100" | "white" | "black";
+alt: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
@@ -122,7 +122,7 @@ declare enum StashCommonColors {
     Red100 = "red-100",
     Ice700 = "ice-700",
     Ice500 = "ice-500",
-    Ice200 = "ice-200",
+    Ice200 = "ice-200",// This is the one outlier, but it's used purposefully in a few places
     Ice100 = "ice-100",
     White = "white",
     Black = "black"

package/dist/Backdrop.js

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as r, renderSlot as o } from "vue";
-import { _ as s } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as s } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const a = {}, c = {
   "aria-hidden": "true",
   class: "stash-backdrop tw-fixed tw-inset-0 tw-z-behind tw-bg-black/50",

package/dist/Backdrop.vue.d.ts

@@ -9,7 +9,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/Badge.js

@@ -1,5 +1,5 @@
 import { defineComponent as u, useCssModule as g, computed as l, ref as w, watch as b, openBlock as h, createElementBlock as m, renderSlot as v, withDirectives as _, createElementVNode as r, normalizeClass as c, unref as i, normalizeStyle as x, toDisplayString as y, vShow as k } from "vue";
-import { _ as B } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const D = {
   class: "stash-badge tw-relative tw-inline-block",
   "data-test": "stash-badge"

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useCssModule, watch } from 'vue';\n\n  defineOptions({\n    name: 'll-badge',\n  });\n\n  const classes = useCssModule();\n\n  export interface BadgeProps {\n    /**\n     * If true, the badge will animate when the content changes\n     */\n    animate?: boolean;\n\n    /**\n     * Color of the badge\n     * Options: 'red' or 'blue'\n     */\n    color?: 'red' | 'blue';\n\n    /**\n     * The badge's content\n     */\n    content?: number | string;\n\n    /**\n     * Shows a gray badge with content\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The max value of the `content` prop. If the value is greater than this, the badge will show the max value and a `+` sign.\n     */\n    max?: number | string;\n\n    /**\n     * Offset to adjust the badge's position. It does not apply to inline position badges.\n     */\n    offset?: {\n      top?: number;\n      right?: number;\n    };\n\n    /**\n     * Badge position. Options:\n     *\n     * - inline: shows the badge directly next to the content (on the right), with a left margin of 6px\n     * - top-right: will overlap the badge over whatever is passed in the default slot\n     */\n    position?: 'top-right' | 'inline';\n\n    /**\n     * The badge will be hidden if the content is `0` unless this prop is set to true.\n     */\n    showZero?: boolean;\n\n    /**\n     * Badge variant\n     */\n    variant?: 'dot' | 'standard';\n  }\n\n  const props = withDefaults(defineProps<BadgeProps>(), {\n    animate: false,\n    color: 'red',\n    content: undefined,\n    isDisabled: false,\n    max: 99,\n    position: 'top-right',\n    offset: () => ({\n      top: undefined,\n      right: undefined,\n    }),\n    showZero: false,\n    variant: 'standard',\n  });\n\n  const computedContent = computed(() => {\n    const numericContent = parseInt(props.content as string, 10);\n    const numericMax = parseInt(props.max as string, 10);\n    // We want to compare the values, not the types, so it's okay to use `!=` here. i.e. if '23' = 23, then we know\n    // the props are numbers, and we can compare the values. If you pass '23foobar' parseInt will return still return 23\n    // but this check will fail like we want it to.\n    // eslint-disable-next-line eqeqeq\n    if (numericContent != props.content || numericMax != props.max) {\n      return props.content;\n    }\n\n    return numericContent > numericMax ? `${numericMax}+` : numericContent;\n  });\n\n  const formatOffsetStyleValue = (value: number) => (value === 0 ? '0' : `${value}px`);\n\n  const computedOffsetStyle = computed(() => ({\n    top: props.offset.top !== undefined ? formatOffsetStyleValue(props.offset.top) : undefined,\n    right: props.offset.right !== undefined ? formatOffsetStyleValue(props.offset.right) : undefined,\n  }));\n\n  const playAnimation = ref(false);\n\n  watch(\n    () => props.content,\n    (value, oldValue) => {\n      if (!props.animate) {\n        return;\n      }\n\n      if (oldValue !== value) {\n        playAnimation.value = true;\n\n        setTimeout(() => {\n          playAnimation.value = false;\n        }, 1000);\n      }\n    },\n  );\n</script>\n\n<template>\n  <span class=\"stash-badge tw-relative tw-inline-block\" data-test=\"stash-badge\">\n    <slot />\n    <span\n      v-show=\"props.variant === 'dot' || computedContent || (computedContent === 0 && props.showZero)\"\n      data-test=\"stash-badge|content-wrapper\"\n      :class=\"[\n        {\n          [classes['top-right']]: props.position === 'top-right' && props.variant !== 'dot',\n          'tw-absolute': props.variant === 'dot' || props.position === 'top-right',\n          'tw-ml-1.5': props.position === 'inline',\n        },\n      ]\"\n      :style=\"props.variant === 'dot' || props.position === 'top-right' ? computedOffsetStyle : ''\"\n    >\n      <span\n        data-test=\"stash-badge|content\"\n        class=\"tw-inline-block tw-whitespace-nowrap tw-rounded-full tw-text-center tw-text-[10px] tw-font-semibold tw-leading-4 tw-text-white\"\n        :class=\"[\n          {\n            'tw-animate-grow': playAnimation,\n            'tw-bg-red-500': props.color === 'red' && !props.isDisabled,\n            'tw-bg-blue-500': props.color === 'blue' && !props.isDisabled,\n            'tw-absolute': props.variant === 'dot',\n            'tw-bg-ice-200 tw-text-white': props.isDisabled,\n            [classes['badge-dot']]: props.variant === 'dot',\n            [classes['badge-standard']]: props.variant === 'standard',\n            'tw-px-1.5': props.variant !== 'dot',\n          },\n        ]\"\n      >\n        {{ props.variant === 'dot' ? null : computedContent }}\n      </span>\n    </span>\n  </span>\n</template>\n\n<style module>\n  .badge-standard {\n    height: 15px;\n    vertical-align: middle;\n  }\n\n  .badge-dot {\n    border: 2px solid var(--color-ice-100);\n    height: 10px;\n    right: 0;\n    width: 10px;\n  }\n\n  .top-right {\n    top: 0;\n    right: 0;\n    transform: translateX(50%) translateY(-48%);\n  }\n</style>\n"],"names":["classes","useCssModule","props","__props","computedContent","computed","numericContent","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOE,UAAMA,IAAUC,KAwDVC,IAAQC,GAeRC,IAAkBC,EAAS,MAAM;AACrC,YAAMC,IAAiB,SAASJ,EAAM,SAAmB,EAAE,GACrDK,IAAa,SAASL,EAAM,KAAe,EAAE;AAKnD,aAAII,KAAkBJ,EAAM,WAAWK,KAAcL,EAAM,MAClDA,EAAM,UAGRI,IAAiBC,IAAa,GAAGA,OAAgBD;AAAA,IAAA,CACzD,GAEKE,IAAyB,CAACC,MAAmBA,MAAU,IAAI,MAAM,GAAGA,OAEpEC,IAAsBL,EAAS,OAAO;AAAA,MAC1C,KAAKH,EAAM,OAAO,QAAQ,SAAYM,EAAuBN,EAAM,OAAO,GAAG,IAAI;AAAA,MACjF,OAAOA,EAAM,OAAO,UAAU,SAAYM,EAAuBN,EAAM,OAAO,KAAK,IAAI;AAAA,IACvF,EAAA,GAEIS,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACO,GAAOK,MAAa;AACf,QAACZ,EAAM,WAIPY,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,WACrB,GAAI;AAAA,MAEX;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useCssModule, watch } from 'vue';\n\n  defineOptions({\n    name: 'll-badge',\n  });\n\n  const classes = useCssModule();\n\n  export interface BadgeProps {\n    /**\n     * If true, the badge will animate when the content changes\n     */\n    animate?: boolean;\n\n    /**\n     * Color of the badge\n     * Options: 'red' or 'blue'\n     */\n    color?: 'red' | 'blue';\n\n    /**\n     * The badge's content\n     */\n    content?: number | string;\n\n    /**\n     * Shows a gray badge with content\n     */\n    isDisabled?: boolean;\n\n    /**\n     * The max value of the `content` prop. If the value is greater than this, the badge will show the max value and a `+` sign.\n     */\n    max?: number | string;\n\n    /**\n     * Offset to adjust the badge's position. It does not apply to inline position badges.\n     */\n    offset?: {\n      top?: number;\n      right?: number;\n    };\n\n    /**\n     * Badge position. Options:\n     *\n     * - inline: shows the badge directly next to the content (on the right), with a left margin of 6px\n     * - top-right: will overlap the badge over whatever is passed in the default slot\n     */\n    position?: 'top-right' | 'inline';\n\n    /**\n     * The badge will be hidden if the content is `0` unless this prop is set to true.\n     */\n    showZero?: boolean;\n\n    /**\n     * Badge variant\n     */\n    variant?: 'dot' | 'standard';\n  }\n\n  const props = withDefaults(defineProps<BadgeProps>(), {\n    animate: false,\n    color: 'red',\n    content: undefined,\n    isDisabled: false,\n    max: 99,\n    position: 'top-right',\n    offset: () => ({\n      top: undefined,\n      right: undefined,\n    }),\n    showZero: false,\n    variant: 'standard',\n  });\n\n  const computedContent = computed(() => {\n    const numericContent = parseInt(props.content as string, 10);\n    const numericMax = parseInt(props.max as string, 10);\n    // We want to compare the values, not the types, so it's okay to use `!=` here. i.e. if '23' = 23, then we know\n    // the props are numbers, and we can compare the values. If you pass '23foobar' parseInt will return still return 23\n    // but this check will fail like we want it to.\n    // eslint-disable-next-line eqeqeq\n    if (numericContent != props.content || numericMax != props.max) {\n      return props.content;\n    }\n\n    return numericContent > numericMax ? `${numericMax}+` : numericContent;\n  });\n\n  const formatOffsetStyleValue = (value: number) => (value === 0 ? '0' : `${value}px`);\n\n  const computedOffsetStyle = computed(() => ({\n    top: props.offset.top !== undefined ? formatOffsetStyleValue(props.offset.top) : undefined,\n    right: props.offset.right !== undefined ? formatOffsetStyleValue(props.offset.right) : undefined,\n  }));\n\n  const playAnimation = ref(false);\n\n  watch(\n    () => props.content,\n    (value, oldValue) => {\n      if (!props.animate) {\n        return;\n      }\n\n      if (oldValue !== value) {\n        playAnimation.value = true;\n\n        setTimeout(() => {\n          playAnimation.value = false;\n        }, 1000);\n      }\n    },\n  );\n</script>\n\n<template>\n  <span class=\"stash-badge tw-relative tw-inline-block\" data-test=\"stash-badge\">\n    <slot />\n    <span\n      v-show=\"props.variant === 'dot' || computedContent || (computedContent === 0 && props.showZero)\"\n      data-test=\"stash-badge|content-wrapper\"\n      :class=\"[\n        {\n          [classes['top-right']]: props.position === 'top-right' && props.variant !== 'dot',\n          'tw-absolute': props.variant === 'dot' || props.position === 'top-right',\n          'tw-ml-1.5': props.position === 'inline',\n        },\n      ]\"\n      :style=\"props.variant === 'dot' || props.position === 'top-right' ? computedOffsetStyle : ''\"\n    >\n      <span\n        data-test=\"stash-badge|content\"\n        class=\"tw-inline-block tw-whitespace-nowrap tw-rounded-full tw-text-center tw-text-[10px] tw-font-semibold tw-leading-4 tw-text-white\"\n        :class=\"[\n          {\n            'tw-animate-grow': playAnimation,\n            'tw-bg-red-500': props.color === 'red' && !props.isDisabled,\n            'tw-bg-blue-500': props.color === 'blue' && !props.isDisabled,\n            'tw-absolute': props.variant === 'dot',\n            'tw-bg-ice-200 tw-text-white': props.isDisabled,\n            [classes['badge-dot']]: props.variant === 'dot',\n            [classes['badge-standard']]: props.variant === 'standard',\n            'tw-px-1.5': props.variant !== 'dot',\n          },\n        ]\"\n      >\n        {{ props.variant === 'dot' ? null : computedContent }}\n      </span>\n    </span>\n  </span>\n</template>\n\n<style module>\n  .badge-standard {\n    height: 15px;\n    vertical-align: middle;\n  }\n\n  .badge-dot {\n    border: 2px solid var(--color-ice-100);\n    height: 10px;\n    right: 0;\n    width: 10px;\n  }\n\n  .top-right {\n    top: 0;\n    right: 0;\n    transform: translateX(50%) translateY(-48%);\n  }\n</style>\n"],"names":["classes","useCssModule","props","__props","computedContent","computed","numericContent","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOE,UAAMA,IAAUC,KAwDVC,IAAQC,GAeRC,IAAkBC,EAAS,MAAM;AACrC,YAAMC,IAAiB,SAASJ,EAAM,SAAmB,EAAE,GACrDK,IAAa,SAASL,EAAM,KAAe,EAAE;AAKnD,aAAII,KAAkBJ,EAAM,WAAWK,KAAcL,EAAM,MAClDA,EAAM,UAGRI,IAAiBC,IAAa,GAAGA,CAAU,MAAMD;AAAA,IAAA,CACzD,GAEKE,IAAyB,CAACC,MAAmBA,MAAU,IAAI,MAAM,GAAGA,CAAK,MAEzEC,IAAsBL,EAAS,OAAO;AAAA,MAC1C,KAAKH,EAAM,OAAO,QAAQ,SAAYM,EAAuBN,EAAM,OAAO,GAAG,IAAI;AAAA,MACjF,OAAOA,EAAM,OAAO,UAAU,SAAYM,EAAuBN,EAAM,OAAO,KAAK,IAAI;AAAA,IACvF,EAAA,GAEIS,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACO,GAAOK,MAAa;AACf,QAACZ,EAAM,WAIPY,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,WACrB,GAAI;AAAA,MAEX;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Badge.vue.d.ts

@@ -79,44 +79,44 @@ export declare interface BadgeProps {
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BadgeProps>, {
-    animate: boolean;
-    color: string;
-    content: undefined;
-    isDisabled: boolean;
-    max: number;
-    position: string;
-    offset: () => {
-        top: undefined;
-        right: undefined;
-    };
-    showZero: boolean;
-    variant: string;
+animate: boolean;
+color: string;
+content: undefined;
+isDisabled: boolean;
+max: number;
+position: string;
+offset: () => {
+top: undefined;
+right: undefined;
+};
+showZero: boolean;
+variant: string;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BadgeProps>, {
-    animate: boolean;
-    color: string;
-    content: undefined;
-    isDisabled: boolean;
-    max: number;
-    position: string;
-    offset: () => {
-        top: undefined;
-        right: undefined;
-    };
-    showZero: boolean;
-    variant: string;
+animate: boolean;
+color: string;
+content: undefined;
+isDisabled: boolean;
+max: number;
+position: string;
+offset: () => {
+top: undefined;
+right: undefined;
+};
+showZero: boolean;
+variant: string;
 }>>> & Readonly<{}>, {
-    max: string | number;
-    animate: boolean;
-    color: "blue" | "red";
-    offset: {
-        top?: number | undefined;
-        right?: number | undefined;
-    };
-    content: string | number;
-    isDisabled: boolean;
-    position: "inline" | "top-right";
-    variant: "standard" | "dot";
-    showZero: boolean;
+max: string | number;
+animate: boolean;
+color: "blue" | "red";
+offset: {
+top?: number | undefined;
+right?: number | undefined;
+};
+content: string | number;
+isDisabled: boolean;
+position: "inline" | "top-right";
+variant: "standard" | "dot";
+showZero: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;

package/dist/Box.js

@@ -1,6 +1,5 @@
-import { _ as m } from "./Box.vue_vue_type_script_setup_true_lang-69e5176b.js";
-import "vue";
+import { _ as f } from "./Box.vue_vue_type_script_setup_true_lang-DgJHq-09.js";
 export {
-  m as default
+  f as default
 };
 //# sourceMappingURL=Box.js.map

package/dist/Box.js.map

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

package/dist/Box.vue.d.ts

@@ -52,20 +52,20 @@ export declare interface BoxProps {
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BoxProps>, {
-    disablePadding: boolean;
-    disableGutters: boolean;
-    disableElevation: boolean;
-    radius: string;
+disablePadding: boolean;
+disableGutters: boolean;
+disableElevation: boolean;
+radius: string;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BoxProps>, {
-    disablePadding: boolean;
-    disableGutters: boolean;
-    disableElevation: boolean;
-    radius: string;
+disablePadding: boolean;
+disableGutters: boolean;
+disableElevation: boolean;
+radius: string;
 }>>> & Readonly<{}>, {
-    radius: "none" | "rounded";
-    disablePadding: boolean;
-    disableGutters: boolean;
-    disableElevation: boolean;
+radius: "none" | "rounded";
+disablePadding: boolean;
+disableGutters: boolean;
+disableElevation: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;

package/dist/{Box.vue_vue_type_script_setup_true_lang-69e5176b.js → Box.vue_vue_type_script_setup_true_lang-DgJHq-09.js}

@@ -26,4 +26,4 @@ const u = /* @__PURE__ */ s({
 export {
   u as _
 };
-//# sourceMappingURL=Box.vue_vue_type_script_setup_true_lang-69e5176b.js.map
+//# sourceMappingURL=Box.vue_vue_type_script_setup_true_lang-DgJHq-09.js.map

package/dist/{Box.vue_vue_type_script_setup_true_lang-69e5176b.js.map → Box.vue_vue_type_script_setup_true_lang-DgJHq-09.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Box.vue_vue_type_script_setup_true_lang-69e5176b.js","sources":["../src/components/Box/Box.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  defineOptions({\n    name: 'll-box',\n  });\n\n  export interface BoxProps {\n    /**\n     * Remove the padding around the entire Box.\n     */\n    disablePadding?: boolean;\n\n    /**\n     * Remove the padding on the left and right of the Box.\n     */\n    disableGutters?: boolean;\n\n    /**\n     * Remove the padding on the left and right of the Box.\n     */\n    disableElevation?: boolean;\n\n    /**\n     * Border radius style. Defaults to `rounded`.\n     */\n    radius?: 'none' | 'rounded';\n  }\n\n  const props = withDefaults(defineProps<BoxProps>(), {\n    disablePadding: false,\n    disableGutters: false,\n    disableElevation: false,\n    radius: 'rounded',\n  });\n</script>\n\n<template>\n  <section\n    class=\"stash-box tw-bg-white\"\n    :class=\"{\n      'tw-rounded': props.radius === 'rounded',\n      'tw-p-gutter': !props.disablePadding && !props.disableGutters,\n      'tw-py-gutter': props.disableGutters,\n      'tw-shadow': !props.disableElevation,\n    }\"\n    data-test=\"stash-box\"\n  >\n    <!-- @slot default -->\n    <slot></slot>\n  </section>\n</template>\n"],"names":["props","__props"],"mappings":";;;;;;;;;;;AA2BE,UAAMA,IAAQC;;;;;;;;;;;;;;"}
+{"version":3,"file":"Box.vue_vue_type_script_setup_true_lang-DgJHq-09.js","sources":["../src/components/Box/Box.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  defineOptions({\n    name: 'll-box',\n  });\n\n  export interface BoxProps {\n    /**\n     * Remove the padding around the entire Box.\n     */\n    disablePadding?: boolean;\n\n    /**\n     * Remove the padding on the left and right of the Box.\n     */\n    disableGutters?: boolean;\n\n    /**\n     * Remove the padding on the left and right of the Box.\n     */\n    disableElevation?: boolean;\n\n    /**\n     * Border radius style. Defaults to `rounded`.\n     */\n    radius?: 'none' | 'rounded';\n  }\n\n  const props = withDefaults(defineProps<BoxProps>(), {\n    disablePadding: false,\n    disableGutters: false,\n    disableElevation: false,\n    radius: 'rounded',\n  });\n</script>\n\n<template>\n  <section\n    class=\"stash-box tw-bg-white\"\n    :class=\"{\n      'tw-rounded': props.radius === 'rounded',\n      'tw-p-gutter': !props.disablePadding && !props.disableGutters,\n      'tw-py-gutter': props.disableGutters,\n      'tw-shadow': !props.disableElevation,\n    }\"\n    data-test=\"stash-box\"\n  >\n    <!-- @slot default -->\n    <slot></slot>\n  </section>\n</template>\n"],"names":["props","__props"],"mappings":";;;;;;;;;;;AA2BE,UAAMA,IAAQC;;;;;;;;;;;;;;"}

package/dist/Button.js

@@ -1,12 +1,7 @@
-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({
+import { defineComponent as c, useCssModule as d, computed as a, openBlock as s, createBlock as u, resolveDynamicComponent as f, mergeProps as h, unref as l, withCtx as p, renderSlot as y } from "vue";
+import m from "./Icon.js";
+import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const q = /* @__PURE__ */ c({
   name: "ll-button",
   __name: "Button",
   props: {
@@ -18,48 +13,66 @@ const k = /* @__PURE__ */ p({
     color: { default: void 0 },
     to: { default: void 0 },
     href: { default: "" },
-    isLoading: { type: Boolean, default: !1 }
+    isLoading: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
   },
-  setup(e) {
-    const t = e, a = m(), c = b(), s = n(() => {
-      for (const o of Object.values(u))
+  setup(i) {
+    const t = i, e = d();
+    let n;
+    ((o) => {
+      o.Icon = "icon", o.IconLabel = "iconLabel", o.Secondary = "secondary", o.Tertiary = "tertiary", o.Inline = "inline", o.Primary = "primary";
+    })(n || (n = {}));
+    const r = a(() => {
+      for (const o of Object.values(n))
         if (t[o])
           return o;
       return "primary";
-    }), f = n(() => t.to ? "router-link" : t.href ? "a" : "button"), d = n(() => t.to ? {
+    }), _ = a(() => t.to ? "router-link" : t.href ? "a" : "button"), b = a(() => t.to ? {
       to: t.to
     } : t.href ? {
       href: t.href
     } : {});
-    return (o, C) => (l(), i(y(f.value), h({
-      disabled: t.isLoading || r(c).disabled
-    }, d.value, {
+    return (o, B) => (s(), u(f(_.value), h({
+      disabled: t.isLoading || t.disabled
+    }, b.value, {
       class: ["stash-button", [
-        r(a).button,
-        `stash-button--${s.value}`,
-        r(a)[`button--${s.value}`],
+        l(e).button,
+        `stash-button--${r.value}`,
+        l(e)[`button--${r.value}`],
         {
           [`stash-button--${t.color}`]: t.color,
-          [r(a)[`button--${t.color}`]]: t.color,
+          [l(e)[`button--${t.color}`]]: t.color,
           "stash-button--is-loading": t.isLoading
         }
       ]],
       "data-test": "ll-button"
     }), {
-      default: _(() => [
-        t.isLoading ? (l(), i(g, {
+      default: p(() => [
+        t.isLoading ? (s(), u(m, {
           key: 0,
           name: "loading-empty",
           class: "tw-animate-spin"
-        })) : v(o.$slots, "default", { key: 1 })
+        })) : y(o.$slots, "default", { key: 1 })
       ]),
       _: 3
     }, 16, ["disabled", "class"]));
   }
-}), B = {
+}), g = "_button_4w1qh_2", L = {
+  button: g,
+  "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"
+}, v = {
   $style: L
-}, j = /* @__PURE__ */ $(k, [["__cssModules", B]]);
+}, I = /* @__PURE__ */ w(q, [["__cssModules", v]]);
 export {
-  j as default
+  I 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, 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\">\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     * Disables the button\n     */\n    disabled?: boolean;\n  }\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, 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  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    disabled: false,\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    :disabled=\"props.isLoading || props.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":["props","__props","classes","useCssModule","ButtonTypes","buttonType","computed","type","is","buttonAttrs"],"mappings":";;;;;;;;;;;;;;;;;;;AAgEE,UAAMA,IAAQC,GAYRC,IAAUC;AAEX,QAAAC;AAAL,KAAA,CAAKA,MAAL;AACEA,MAAAA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,UAAU;AAAA,IANP,GAAAA,MAAAA,IAAA,CAAA,EAAA;AAWC,UAAAC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOH,CAAW;AACtC,YAAAJ,EAAMO,CAAI;AACL,iBAAAA;AAIJ,aAAA;AAAA,IAAA,CACR,GAEKC,IAAKF,EAAS,MACdN,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR,GAEKS,IAAcH,EAAS,MACvBN,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

@@ -72,38 +72,45 @@ export declare interface ButtonProps {
      * Displays a spinning loading icon in place of the button text and disables the button
      */
     isLoading?: boolean;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
-    secondary: boolean;
-    icon: boolean;
-    iconLabel: boolean;
-    tertiary: boolean;
-    inline: boolean;
-    color: undefined;
-    href: string;
-    to: undefined;
-    isLoading: boolean;
+secondary: boolean;
+icon: boolean;
+iconLabel: boolean;
+tertiary: boolean;
+inline: boolean;
+color: undefined;
+href: string;
+to: undefined;
+isLoading: boolean;
+disabled: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
-    secondary: boolean;
-    icon: boolean;
-    iconLabel: boolean;
-    tertiary: boolean;
-    inline: boolean;
-    color: undefined;
-    href: string;
-    to: undefined;
-    isLoading: boolean;
+secondary: boolean;
+icon: boolean;
+iconLabel: boolean;
+tertiary: boolean;
+inline: boolean;
+color: undefined;
+href: string;
+to: undefined;
+isLoading: boolean;
+disabled: boolean;
 }>>> & Readonly<{}>, {
-    to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
-    icon: boolean;
-    href: string;
-    secondary: boolean;
-    iconLabel: boolean;
-    tertiary: boolean;
-    inline: boolean;
-    color: "blue" | "red";
-    isLoading: boolean;
+to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
+disabled: boolean;
+icon: boolean;
+href: string;
+secondary: boolean;
+iconLabel: boolean;
+tertiary: boolean;
+inline: boolean;
+color: "blue" | "red";
+isLoading: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;

package/dist/ButtonGroup.js

@@ -1,6 +1,6 @@
 import { defineComponent as m, computed as r, ref as g, openBlock as l, createElementBlock as s, normalizeClass as p, Fragment as $, renderList as y, withModifiers as B, toDisplayString as h } from "vue";
 import w from "lodash-es/uniqueId";
-import { _ as z } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as z } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const k = ["data-test"], C = ["data-test", "disabled", "onClick"], G = {
   name: "ll-button-group"
 }, D = /* @__PURE__ */ m({

package/dist/ButtonGroup.vue.d.ts

@@ -61,24 +61,24 @@ export declare interface ButtonGroupProps {
  * but every button is a radio element which makes more sense semantically.
  */
 declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonGroupProps>, {
-    groupName: string;
-    fullWidth: boolean;
-    disabled: boolean;
-    allowDeactivate: boolean;
+groupName: string;
+fullWidth: boolean;
+disabled: boolean;
+allowDeactivate: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    input: (activeButton: ButtonGroupOption | null) => void;
+input: (activeButton: ButtonGroupOption | null) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonGroupProps>, {
-    groupName: string;
-    fullWidth: boolean;
-    disabled: boolean;
-    allowDeactivate: boolean;
+groupName: string;
+fullWidth: boolean;
+disabled: boolean;
+allowDeactivate: boolean;
 }>>> & Readonly<{
-    onInput?: ((activeButton: ButtonGroupOption | null) => any) | undefined;
+onInput?: ((activeButton: ButtonGroupOption | null) => any) | undefined;
 }>, {
-    disabled: boolean;
-    groupName: string;
-    fullWidth: boolean;
-    allowDeactivate: boolean;
+disabled: boolean;
+groupName: string;
+fullWidth: boolean;
+allowDeactivate: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 

package/dist/Card.vue.d.ts

@@ -41,11 +41,11 @@ export declare interface CardProps {
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CardProps>, {
-    detachActions: boolean;
+detachActions: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CardProps>, {
-    detachActions: boolean;
+detachActions: boolean;
 }>>> & Readonly<{}>, {
-    detachActions: boolean;
+detachActions: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     "top-left"?(_: {}): any;
     "top-right"?(_: {}): any;