@leaflink/stash 48.16.1 → 48.17.0

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","classes","useCssModule","buttonType","computed","type","props","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;;;;;;;;;;;;;;;iBAFCC,IAAUC,KAaVC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOL,CAAW;AACtC,YAAAM,EAAMD,CAAI;AACL,iBAAAA;AAIJ,aAAA;AAAA,IAAA,CACR,GAEKE,IAAKH,EAAS,MACdE,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR,GAEKE,IAAcJ,EAAS,MACvBE,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, 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;;;;;;;;;;;;;;;;;;;"}

package/dist/Button.vue.d.ts

@@ -1,13 +1,12 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
+import { PublicProps } from 'vue';
 import { RouteLocationAsPathGeneric } from 'vue-router';
 import { RouteLocationAsRelativeGeneric } from 'vue-router';
 import { RouteLocationRaw } from 'vue-router';
-import { VNodeProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -71,7 +70,7 @@ export declare interface ButtonProps {
     href?: string;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
     secondary: boolean;
     icon: boolean;
     iconLabel: boolean;
@@ -80,7 +79,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     color: undefined;
     href: string;
     to: undefined;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
     secondary: boolean;
     icon: boolean;
     iconLabel: boolean;
@@ -89,7 +88,8 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     color: undefined;
     href: string;
     to: undefined;
-}>>>, {
+}>>> & Readonly<{}>, {
+    to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
     icon: boolean;
     href: string;
     secondary: boolean;
@@ -97,8 +97,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     tertiary: boolean;
     inline: boolean;
     color: "blue" | "red";
-    to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/ButtonGroup.js

@@ -1,12 +1,12 @@
-import { defineComponent as b, computed as r, ref as m, openBlock as o, createElementBlock as s, normalizeClass as p, Fragment as g, renderList as $, withModifiers as y, toDisplayString as B } from "vue";
-import h from "lodash-es/uniqueId";
-import { _ as w } from "./_plugin-vue_export-helper-dad06003.js";
-const z = ["data-test"], k = ["data-test", "disabled", "onClick"], C = {
+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";
+const k = ["data-test"], C = ["data-test", "disabled", "onClick"], G = {
   name: "ll-button-group"
-}, G = /* @__PURE__ */ b({
-  ...C,
+}, D = /* @__PURE__ */ m({
+  ...G,
   props: {
-    groupName: { default: h() },
+    groupName: { default: w() },
     options: {},
     fullWidth: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
@@ -14,12 +14,12 @@ const z = ["data-test"], k = ["data-test", "disabled", "onClick"], C = {
   },
   emits: ["input"],
   setup(v, { emit: _ }) {
-    const e = v, u = r(() => e.options.length === 1), i = r(() => e.allowDeactivate || u.value), a = m(e.options.find((t) => t.active) || null);
-    function f(t) {
-      var l;
-      i.value && ((l = a.value) == null ? void 0 : l.id) === t.id ? a.value = null : a.value = t, _("input", a.value);
+    const e = v, f = _, u = r(() => e.options.length === 1), i = r(() => e.allowDeactivate || u.value), n = g(e.options.find((t) => t.active) || null);
+    function b(t) {
+      var o;
+      i.value && ((o = n.value) == null ? void 0 : o.id) === t.id ? n.value = null : n.value = t, f("input", n.value);
     }
-    return (t, l) => (o(), s("div", {
+    return (t, o) => (l(), s("div", {
       class: p([
         "tw-flex",
         t.$style.buttonGroup,
@@ -29,29 +29,29 @@ const z = ["data-test"], k = ["data-test", "disabled", "onClick"], C = {
       ]),
       "data-test": `button-group-${t.$props.groupName}`
     }, [
-      (o(!0), s(g, null, $(e.options, (n) => {
+      (l(!0), s($, null, y(e.options, (a) => {
         var c, d;
-        return o(), s("button", {
-          key: `${e.groupName}-${n.id}`,
-          class: p([t.$style.button, { [t.$style.active]: ((c = a.value) == null ? void 0 : c.id) === n.id }]),
-          "data-test": `${e.groupName}-button-${((d = a.value) == null ? void 0 : d.id) === n.id ? "active" : "inactive"}`,
+        return l(), s("button", {
+          key: `${e.groupName}-${a.id}`,
+          class: p([t.$style.button, { [t.$style.active]: ((c = n.value) == null ? void 0 : c.id) === a.id }]),
+          "data-test": `${e.groupName}-button-${((d = n.value) == null ? void 0 : d.id) === a.id ? "active" : "inactive"}`,
           tabindex: 0,
           disabled: e.disabled,
-          onClick: y((E) => f(n), ["prevent"])
-        }, B(n.text), 11, k);
+          onClick: B((F) => b(a), ["prevent"])
+        }, h(a.text), 11, C);
       }), 128))
-    ], 10, z));
+    ], 10, k));
   }
-}), D = "_buttonGroup_1bnlz_3", N = "_button_1bnlz_3", M = "_single_1bnlz_17", S = "_active_1bnlz_29", W = {
-  buttonGroup: D,
-  button: N,
-  single: M,
-  active: S,
+}), N = "_buttonGroup_1bnlz_3", M = "_button_1bnlz_3", S = "_single_1bnlz_17", W = "_active_1bnlz_29", q = {
+  buttonGroup: N,
+  button: M,
+  single: S,
+  active: W,
   "can-deactivate": "_can-deactivate_1bnlz_42"
-}, q = {
-  $style: W
-}, j = /* @__PURE__ */ w(G, [["__cssModules", q]]);
+}, E = {
+  $style: q
+}, x = /* @__PURE__ */ z(D, [["__cssModules", E]]);
 export {
-  j as default
+  x as default
 };
 //# sourceMappingURL=ButtonGroup.js.map

package/dist/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/ButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * @deprecated use RadioGroup instead with `variant=\"button\"`.\n   * RadioGroup uses pretty much the same API as the ButtonGroup,\n   * but every button is a radio element which makes more sense semantically.\n   */\n  export default {\n    name: 'll-button-group',\n  };\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, ref } from 'vue';\n\n  export interface ButtonGroupOption {\n    id: string;\n    active?: boolean;\n    text: string;\n  }\n\n  export interface ButtonGroupProps {\n    /**\n     * A name for the group, useful when multiple ButtonGroups exist on the page\n     */\n    groupName?: string;\n\n    /**\n     * The list of buttons to render\n     */\n    options: ButtonGroupOption[];\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the active button can be deactivated\n     */\n    allowDeactivate?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ButtonGroupProps>(), {\n    groupName: uniqueId(),\n    fullWidth: false,\n    disabled: false,\n    allowDeactivate: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'input', activeButton: ButtonGroupOption | null): void;\n    }>();\n\n  const isSingleButton = computed(() => props.options.length === 1);\n\n  const canDeactivate = computed(() => props.allowDeactivate || isSingleButton.value);\n\n  const activeButton = ref(props.options.find((o) => o.active) || null);\n\n  function onClick(clickedOption: ButtonGroupOption) {\n    if (canDeactivate.value && activeButton.value?.id === clickedOption.id) {\n      activeButton.value = null;\n    } else {\n      activeButton.value = clickedOption;\n    }\n\n    emit('input', activeButton.value);\n  }\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tw-flex',\n      $style.buttonGroup,\n      { 'tw-w-full': props.fullWidth },\n      { [$style.single]: isSingleButton },\n      { [$style['can-deactivate']]: canDeactivate },\n    ]\"\n    :data-test=\"`button-group-${$props.groupName}`\"\n  >\n    <button\n      v-for=\"option in props.options\"\n      :key=\"`${props.groupName}-${option.id}`\"\n      :class=\"[$style.button, { [$style.active]: activeButton?.id === option.id }]\"\n      :data-test=\"`${props.groupName}-button-${activeButton?.id === option.id ? 'active' : 'inactive'}`\"\n      :tabindex=\"0\"\n      :disabled=\"props.disabled\"\n      @click.prevent=\"onClick(option)\"\n    >\n      {{ option.text }}\n    </button>\n  </div>\n</template>\n\n<style module>\n  /* full width buttons */\n  .buttonGroup:global(.w-full) > button {\n    flex: 1 1 50%;\n    max-width: 100%;\n  }\n\n  .button {\n    border: 1px solid var(--color-ice-500);\n    border-radius: 0;\n    font-weight: theme('fontWeight.semibold');\n    line-height: theme('lineHeight.body');\n    min-width: 100px;\n    padding: 7px 8px;\n  }\n\n  .single .button {\n    border: 1px solid var(--color-ice-700);\n    color: var(--color-ice-700);\n  }\n\n  .button:focus,\n  .button:hover {\n    border: 1px solid var(--color-blue-500) !important;\n    color: var(--color-blue-500);\n    z-index: 1;\n  }\n\n  .button.active {\n    background-color: var(--color-blue-100);\n    border: 1px solid var(--color-blue-500) !important;\n    color: var(--color-blue-500);\n    cursor: default;\n    z-index: 1;\n  }\n\n  .button.active + button {\n    border-left: 1px solid transparent;\n  }\n\n  .single .button.active,\n  .can-deactivate .button.active {\n    cursor: pointer;\n  }\n\n  .button[disabled] {\n    color: var(--color-ice-500);\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .button:focus {\n    box-shadow: none;\n    outline: 0;\n  }\n\n  .button:not(:first-child) {\n    margin-left: -1px;\n  }\n\n  .button:not(:last-child) {\n    border-right: 1px solid transparent;\n  }\n\n  .button:first-child {\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .button:last-child {\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n  }\n</style>\n"],"names":["isSingleButton","computed","props","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a","emit"],"mappings":";;;uEAMiB;AAAA,EACb,MAAM;AACR;;;;;;;;;;;iBAoDMA,IAAiBC,EAAS,MAAMC,EAAM,QAAQ,WAAW,CAAC,GAE1DC,IAAgBF,EAAS,MAAMC,EAAM,mBAAmBF,EAAe,KAAK,GAE5EI,IAAeC,EAAIH,EAAM,QAAQ,KAAK,CAACI,MAAMA,EAAE,MAAM,KAAK,IAAI;AAEpE,aAASC,EAAQC,GAAkC;;AACjD,MAAIL,EAAc,WAASM,IAAAL,EAAa,UAAb,gBAAAK,EAAoB,QAAOD,EAAc,KAClEJ,EAAa,QAAQ,OAErBA,EAAa,QAAQI,GAGlBE,EAAA,SAASN,EAAa,KAAK;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/ButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * @deprecated use RadioGroup instead with `variant=\"button\"`.\n   * RadioGroup uses pretty much the same API as the ButtonGroup,\n   * but every button is a radio element which makes more sense semantically.\n   */\n  export default {\n    name: 'll-button-group',\n  };\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, ref } from 'vue';\n\n  export interface ButtonGroupOption {\n    id: string;\n    active?: boolean;\n    text: string;\n  }\n\n  export interface ButtonGroupProps {\n    /**\n     * A name for the group, useful when multiple ButtonGroups exist on the page\n     */\n    groupName?: string;\n\n    /**\n     * The list of buttons to render\n     */\n    options: ButtonGroupOption[];\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the active button can be deactivated\n     */\n    allowDeactivate?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ButtonGroupProps>(), {\n    groupName: uniqueId(),\n    fullWidth: false,\n    disabled: false,\n    allowDeactivate: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'input', activeButton: ButtonGroupOption | null): void;\n  }>();\n\n  const isSingleButton = computed(() => props.options.length === 1);\n\n  const canDeactivate = computed(() => props.allowDeactivate || isSingleButton.value);\n\n  const activeButton = ref(props.options.find((o) => o.active) || null);\n\n  function onClick(clickedOption: ButtonGroupOption) {\n    if (canDeactivate.value && activeButton.value?.id === clickedOption.id) {\n      activeButton.value = null;\n    } else {\n      activeButton.value = clickedOption;\n    }\n\n    emit('input', activeButton.value);\n  }\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tw-flex',\n      $style.buttonGroup,\n      { 'tw-w-full': props.fullWidth },\n      { [$style.single]: isSingleButton },\n      { [$style['can-deactivate']]: canDeactivate },\n    ]\"\n    :data-test=\"`button-group-${$props.groupName}`\"\n  >\n    <button\n      v-for=\"option in props.options\"\n      :key=\"`${props.groupName}-${option.id}`\"\n      :class=\"[$style.button, { [$style.active]: activeButton?.id === option.id }]\"\n      :data-test=\"`${props.groupName}-button-${activeButton?.id === option.id ? 'active' : 'inactive'}`\"\n      :tabindex=\"0\"\n      :disabled=\"props.disabled\"\n      @click.prevent=\"onClick(option)\"\n    >\n      {{ option.text }}\n    </button>\n  </div>\n</template>\n\n<style module>\n  /* full width buttons */\n  .buttonGroup:global(.w-full) > button {\n    flex: 1 1 50%;\n    max-width: 100%;\n  }\n\n  .button {\n    border: 1px solid var(--color-ice-500);\n    border-radius: 0;\n    font-weight: theme('fontWeight.semibold');\n    line-height: theme('lineHeight.body');\n    min-width: 100px;\n    padding: 7px 8px;\n  }\n\n  .single .button {\n    border: 1px solid var(--color-ice-700);\n    color: var(--color-ice-700);\n  }\n\n  .button:focus,\n  .button:hover {\n    border: 1px solid var(--color-blue-500) !important;\n    color: var(--color-blue-500);\n    z-index: 1;\n  }\n\n  .button.active {\n    background-color: var(--color-blue-100);\n    border: 1px solid var(--color-blue-500) !important;\n    color: var(--color-blue-500);\n    cursor: default;\n    z-index: 1;\n  }\n\n  .button.active + button {\n    border-left: 1px solid transparent;\n  }\n\n  .single .button.active,\n  .can-deactivate .button.active {\n    cursor: pointer;\n  }\n\n  .button[disabled] {\n    color: var(--color-ice-500);\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .button:focus {\n    box-shadow: none;\n    outline: 0;\n  }\n\n  .button:not(:first-child) {\n    margin-left: -1px;\n  }\n\n  .button:not(:last-child) {\n    border-right: 1px solid transparent;\n  }\n\n  .button:first-child {\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .button:last-child {\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n  }\n</style>\n"],"names":["props","__props","emit","__emit","isSingleButton","computed","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a"],"mappings":";;;uEAMiB;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAwCA,UAAMA,IAAQC,GAORC,IAAOC,GAIPC,IAAiBC,EAAS,MAAML,EAAM,QAAQ,WAAW,CAAC,GAE1DM,IAAgBD,EAAS,MAAML,EAAM,mBAAmBI,EAAe,KAAK,GAE5EG,IAAeC,EAAIR,EAAM,QAAQ,KAAK,CAACS,MAAMA,EAAE,MAAM,KAAK,IAAI;AAEpE,aAASC,EAAQC,GAAkC;;AACjD,MAAIL,EAAc,WAASM,IAAAL,EAAa,UAAb,gBAAAK,EAAoB,QAAOD,EAAc,KAClEJ,EAAa,QAAQ,OAErBA,EAAa,QAAQI,GAGlBT,EAAA,SAASK,EAAa,KAAK;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ButtonGroup.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -61,26 +60,26 @@ export declare interface ButtonGroupProps {
  * RadioGroup uses pretty much the same API as the ButtonGroup,
  * but every button is a radio element which makes more sense semantically.
  */
-declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonGroupProps>, {
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonGroupProps>, {
     groupName: string;
     fullWidth: boolean;
     disabled: boolean;
     allowDeactivate: boolean;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     input: (activeButton: ButtonGroupOption | null) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonGroupProps>, {
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonGroupProps>, {
     groupName: string;
     fullWidth: boolean;
     disabled: boolean;
     allowDeactivate: boolean;
-}>>> & {
+}>>> & Readonly<{
     onInput?: ((activeButton: ButtonGroupOption | null) => any) | undefined;
-}, {
+}>, {
     disabled: boolean;
     groupName: string;
     fullWidth: boolean;
     allowDeactivate: boolean;
-}, {}>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 export { }

package/dist/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../src/components/Card/Card.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useSlots } from 'vue';\n\n  export interface CardProps {\n    /**\n     * Detach the actions from the top of the card, making them absolute-positioned.\n     * @default false\n     */\n    detachActions?: boolean;\n  }\n\n  const props = withDefaults(defineProps<CardProps>(), {\n    detachActions: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <article\n    class=\"stash-card tw-relative tw-inline-block tw-rounded tw-border tw-bg-white tw-shadow-md\"\n    data-test=\"stash-card\"\n  >\n    <div\n      v-if=\"slots['top-left'] || slots['top-right']\"\n      data-test=\"card-actions\"\n      :class=\"{ 'tw-absolute tw-top-0 tw-w-full': props.detachActions }\"\n      class=\"tw-flex tw-flex-wrap tw-items-start tw-justify-between tw-p-6\"\n    >\n      <div>\n        <!-- @slot Top left actions slot, for rendering content on the card top-left -->\n        <slot name=\"top-left\"></slot>\n      </div>\n      <div>\n        <!-- @slot Top right actions slot, for rendering content on the card top-right -->\n        <slot name=\"top-right\"></slot>\n      </div>\n    </div>\n\n    <div :class=\"{ 'tw-mb-6 tw-flex tw-h-full tw-flex-col tw-gap-y-6': slots['default'] }\">\n      <!-- @slot Default slot, for rendering card subcomponents -->\n      <slot></slot>\n    </div>\n  </article>\n</template>\n"],"names":["slots","useSlots"],"mappings":";;;;;;;;;;iBAeQA,IAAQC;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Card.js","sources":["../src/components/Card/Card.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useSlots } from 'vue';\n\n  export interface CardProps {\n    /**\n     * Detach the actions from the top of the card, making them absolute-positioned.\n     * @default false\n     */\n    detachActions?: boolean;\n  }\n\n  const props = withDefaults(defineProps<CardProps>(), {\n    detachActions: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <article\n    class=\"stash-card tw-relative tw-inline-block tw-rounded tw-border tw-bg-white tw-shadow-md\"\n    data-test=\"stash-card\"\n  >\n    <div\n      v-if=\"slots['top-left'] || slots['top-right']\"\n      data-test=\"card-actions\"\n      :class=\"{ 'tw-absolute tw-top-0 tw-w-full': props.detachActions }\"\n      class=\"tw-flex tw-flex-wrap tw-items-start tw-justify-between tw-p-6\"\n    >\n      <div>\n        <!-- @slot Top left actions slot, for rendering content on the card top-left -->\n        <slot name=\"top-left\"></slot>\n      </div>\n      <div>\n        <!-- @slot Top right actions slot, for rendering content on the card top-right -->\n        <slot name=\"top-right\"></slot>\n      </div>\n    </div>\n\n    <div :class=\"{ 'tw-mb-6 tw-flex tw-h-full tw-flex-col tw-gap-y-6': slots['default'] }\">\n      <!-- @slot Default slot, for rendering card subcomponents -->\n      <slot></slot>\n    </div>\n  </article>\n</template>\n"],"names":["props","__props","slots","useSlots"],"mappings":";;;;;;;;;;AAWE,UAAMA,IAAQC,GAIRC,IAAQC;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Card.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -41,13 +40,13 @@ export declare interface CardProps {
     detachActions?: boolean;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CardProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CardProps>, {
     detachActions: boolean;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CardProps>, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CardProps>, {
     detachActions: boolean;
-}>>>, {
+}>>> & Readonly<{}>, {
     detachActions: boolean;
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     "top-left"?(_: {}): any;
     "top-right"?(_: {}): any;
     default?(_: {}): any;

package/dist/CardContent.vue.d.ts

@@ -1,9 +1,7 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
@@ -11,7 +9,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/CardFooter.vue.d.ts

@@ -1,9 +1,7 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
@@ -11,7 +9,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CardHeader.js","sources":["../src/components/CardHeader/CardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  export interface CardHeaderProps {\n    /**\n     * Title to be displayed\n     */\n    title: string;\n    /**\n     * Subtitle to be displayed\n     */\n    subtitle?: string;\n    /**\n     * Additional text to be displayed\n     */\n    text?: string;\n  }\n\n  const props = defineProps<CardHeaderProps>();\n</script>\n\n<template>\n  <header class=\"stash-card-header tw-px-6 tw-font-medium tw-text-ice-900\" data-test=\"stash-card-header\">\n    <h4 class=\"tw-text-base\">\n      {{ props.title }}\n    </h4>\n    <p v-if=\"props.subtitle\" class=\"tw-mb-0 tw-mt-1.5\">\n      {{ props.subtitle }}\n    </p>\n    <span v-if=\"props.text\" class=\"tw-mt-1.5 tw-text-ice-700\">\n      {{ props.text }}\n    </span>\n  </header>\n</template>\n"],"names":["props","__props"],"mappings":";;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC;;;;;;;;"}

package/dist/CardHeader.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -32,7 +31,7 @@ export declare interface CardHeaderProps {
     text?: string;
 }
 
-declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<CardHeaderProps>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<CardHeaderProps>>>, {}, {}>;
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<CardHeaderProps>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<CardHeaderProps>>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 export { }

package/dist/CardMedia.js

@@ -14,9 +14,9 @@ const h = {
     alt: {}
   },
   setup(i) {
-    const t = i, s = a(!0), o = a(!1), r = u();
+    const t = a(!0), s = a(!1), o = i, r = u();
     return (E, e) => (l(), c("div", h, [
-      s.value || o.value ? (l(), c("div", {
+      t.value || s.value ? (l(), c("div", {
         key: 0,
         class: n([d(r).placeholder, "tw-flex tw-w-full tw-items-center tw-justify-center tw-rounded-t tw-bg-ice-200"])
       }, [
@@ -26,11 +26,11 @@ const h = {
         }, null, 8, ["class"])
       ], 2)) : _("", !0),
       f("img", {
-        src: t.src,
+        src: o.src,
         class: "tw-w-full tw-rounded-t",
-        alt: t.alt,
-        onLoad: e[0] || (e[0] = () => s.value = !1),
-        onError: e[1] || (e[1] = () => o.value = !0)
+        alt: o.alt,
+        onLoad: e[0] || (e[0] = () => t.value = !1),
+        onError: e[1] || (e[1] = () => s.value = !0)
       }, null, 40, v)
     ]));
   }

package/dist/CardMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardMedia.js","sources":["../src/components/CardMedia/CardMedia.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  export interface CardMediaProps {\n    /**\n     * The image source.\n     */\n    src: string;\n    /**\n     * The image alternative text.\n     */\n    alt?: string;\n  }\n\n  const isLoading = ref(true);\n\n  const hasErrored = ref(false);\n\n  const props = defineProps<CardMediaProps>();\n\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"stash-card-media\" data-test=\"stash-card-media\">\n    <div\n      v-if=\"isLoading || hasErrored\"\n      :class=\"classes.placeholder\"\n      class=\"tw-flex tw-w-full tw-items-center tw-justify-center tw-rounded-t tw-bg-ice-200\"\n    >\n      <Icon name=\"image\" :class=\"classes.iconSize\" />\n    </div>\n    <img\n      :src=\"props.src\"\n      class=\"tw-w-full tw-rounded-t\"\n      :alt=\"props.alt\"\n      @load=\"() => (isLoading = false)\"\n      @error=\"() => (hasErrored = true)\"\n    />\n  </div>\n</template>\n\n<style module>\n  .placeholder {\n    height: 300px;\n    width: 100%;\n  }\n\n  .iconSize {\n    width: 189px;\n    height: 189px;\n  }\n</style>\n"],"names":["isLoading","ref","hasErrored","classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;iBAgBQA,IAAYC,EAAI,EAAI,GAEpBC,IAAaD,EAAI,EAAK,GAItBE,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CardMedia.js","sources":["../src/components/CardMedia/CardMedia.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  export interface CardMediaProps {\n    /**\n     * The image source.\n     */\n    src: string;\n    /**\n     * The image alternative text.\n     */\n    alt?: string;\n  }\n\n  const isLoading = ref(true);\n\n  const hasErrored = ref(false);\n\n  const props = defineProps<CardMediaProps>();\n\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"stash-card-media\" data-test=\"stash-card-media\">\n    <div\n      v-if=\"isLoading || hasErrored\"\n      :class=\"classes.placeholder\"\n      class=\"tw-flex tw-w-full tw-items-center tw-justify-center tw-rounded-t tw-bg-ice-200\"\n    >\n      <Icon name=\"image\" :class=\"classes.iconSize\" />\n    </div>\n    <img\n      :src=\"props.src\"\n      class=\"tw-w-full tw-rounded-t\"\n      :alt=\"props.alt\"\n      @load=\"() => (isLoading = false)\"\n      @error=\"() => (hasErrored = true)\"\n    />\n  </div>\n</template>\n\n<style module>\n  .placeholder {\n    height: 300px;\n    width: 100%;\n  }\n\n  .iconSize {\n    width: 189px;\n    height: 189px;\n  }\n</style>\n"],"names":["isLoading","ref","hasErrored","props","__props","classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;AAgBQ,UAAAA,IAAYC,EAAI,EAAI,GAEpBC,IAAaD,EAAI,EAAK,GAEtBE,IAAQC,GAERC,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/CardMedia.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -28,7 +27,7 @@ export declare interface CardMediaProps {
     alt?: string;
 }
 
-declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<CardMediaProps>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<CardMediaProps>>>, {}, {}>;
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<CardMediaProps>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<CardMediaProps>>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 export { }