@leaflink/stash 52.0.3 → 53.1.0

package/dist/Badge.js

@@ -1,9 +1,9 @@
-import { defineComponent as u, useCssModule as g, computed as l, ref as w, watch as b, createElementBlock as h, openBlock as m, renderSlot as v, withDirectives as _, createElementVNode as r, normalizeStyle as x, normalizeClass as c, unref as i, toDisplayString as y, vShow as k } from "vue";
-import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const D = {
-  class: "stash-badge tw-relative tw-inline-block",
+import { defineComponent as u, useCssModule as g, computed as d, ref as m, watch as v, createElementBlock as b, openBlock as h, renderSlot as _, withDirectives as x, createElementVNode as r, normalizeStyle as w, normalizeClass as c, unref as i, toDisplayString as y, vShow as B } from "vue";
+import { _ as D } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const S = {
+  class: "stash-badge relative inline-block",
   "data-test": "stash-badge"
-}, S = /* @__PURE__ */ u({
+}, C = /* @__PURE__ */ u({
   name: "ll-badge",
   __name: "Badge",
   props: {
@@ -21,60 +21,60 @@ const D = {
     variant: { default: "standard" }
   },
   setup(p) {
-    const o = g(), t = p, s = l(() => {
-      const e = parseInt(t.content, 10), a = parseInt(t.max, 10);
-      return e != t.content || a != t.max ? t.content : e > a ? `${a}+` : e;
-    }), d = (e) => e === 0 ? "0" : `${e}px`, f = l(() => ({
-      top: t.offset.top !== void 0 ? d(t.offset.top) : void 0,
-      right: t.offset.right !== void 0 ? d(t.offset.right) : void 0
-    })), n = w(!1);
-    return b(
+    const a = g(), t = p, s = d(() => {
+      const e = parseInt(t.content, 10), o = parseInt(t.max, 10);
+      return e != t.content || o != t.max ? t.content : e > o ? `${o}+` : e;
+    }), l = (e) => e === 0 ? "0" : `${e}px`, f = d(() => ({
+      top: t.offset.top !== void 0 ? l(t.offset.top) : void 0,
+      right: t.offset.right !== void 0 ? l(t.offset.right) : void 0
+    })), n = m(!1);
+    return v(
       () => t.content,
-      (e, a) => {
-        t.animate && a !== e && (n.value = !0, setTimeout(() => {
+      (e, o) => {
+        t.animate && o !== e && (n.value = !0, setTimeout(() => {
           n.value = !1;
         }, 1e3));
       }
-    ), (e, a) => (m(), h("span", D, [
-      v(e.$slots, "default"),
-      _(r("span", {
+    ), (e, o) => (h(), b("span", S, [
+      _(e.$slots, "default"),
+      x(r("span", {
         "data-test": "stash-badge|content-wrapper",
         class: c([
           {
-            [i(o)["top-right"]]: t.position === "top-right" && t.variant !== "dot",
-            "tw-absolute": t.variant === "dot" || t.position === "top-right",
-            "tw-ml-1.5": t.position === "inline"
+            [i(a)["top-right"]]: t.position === "top-right" && t.variant !== "dot",
+            absolute: t.variant === "dot" || t.position === "top-right",
+            "ml-1.5": t.position === "inline"
           }
         ]),
-        style: x(t.variant === "dot" || t.position === "top-right" ? f.value : "")
+        style: w(t.variant === "dot" || t.position === "top-right" ? f.value : "")
       }, [
         r("span", {
           "data-test": "stash-badge|content",
-          class: c(["tw-inline-block tw-whitespace-nowrap tw-rounded-full tw-text-center tw-text-[10px] tw-font-semibold tw-leading-4 tw-text-white", [
+          class: c(["inline-block whitespace-nowrap rounded-full text-center text-[10px] font-semibold leading-4 text-white", [
             {
-              "tw-animate-grow": n.value,
-              "tw-bg-red-500": t.color === "red" && !t.isDisabled,
-              "tw-bg-blue-500": t.color === "blue" && !t.isDisabled,
-              "tw-absolute": t.variant === "dot",
-              "tw-bg-ice-200 tw-text-white": t.isDisabled,
-              [i(o)["badge-dot"]]: t.variant === "dot",
-              [i(o)["badge-standard"]]: t.variant === "standard",
-              "tw-px-1.5": t.variant !== "dot"
+              "animate-grow": n.value,
+              "bg-red-500": t.color === "red" && !t.isDisabled,
+              "bg-blue-500": t.color === "blue" && !t.isDisabled,
+              absolute: t.variant === "dot",
+              "bg-ice-200 text-white": t.isDisabled,
+              [i(a)["badge-dot"]]: t.variant === "dot",
+              [i(a)["badge-standard"]]: t.variant === "standard",
+              "px-1.5": t.variant !== "dot"
             }
           ]])
         }, y(t.variant === "dot" ? null : s.value), 3)
       ], 6), [
-        [k, t.variant === "dot" || s.value || s.value === 0 && t.showZero]
+        [B, t.variant === "dot" || s.value || s.value === 0 && t.showZero]
       ])
     ]));
   }
-}), C = {
-  "badge-standard": "_badge-standard_hcbk5_2",
-  "badge-dot": "_badge-dot_hcbk5_7",
-  "top-right": "_top-right_hcbk5_14"
+}), k = {
+  "badge-standard": "_badge-standard_1gool_3",
+  "badge-dot": "_badge-dot_1gool_8",
+  "top-right": "_top-right_1gool_15"
 }, M = {
-  $style: C
-}, E = /* @__PURE__ */ B(S, [["__cssModules", M]]);
+  $style: k
+}, E = /* @__PURE__ */ D(C, [["__cssModules", M]]);
 export {
   E as default
 };

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,EAAA,GAwDVC,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,IAC1D,CAAC,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,IAAA,EACvF,GAEIS,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACO,GAAOK,MAAa;AACnB,QAAKZ,EAAM,WAIPY,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,QACxB,GAAG,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 relative 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          absolute: props.variant === 'dot' || props.position === 'top-right',\n          '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=\"inline-block whitespace-nowrap rounded-full text-center text-[10px] font-semibold leading-4 text-white\"\n        :class=\"[\n          {\n            'animate-grow': playAnimation,\n            'bg-red-500': props.color === 'red' && !props.isDisabled,\n            'bg-blue-500': props.color === 'blue' && !props.isDisabled,\n            absolute: props.variant === 'dot',\n            'bg-ice-200 text-white': props.isDisabled,\n            [classes['badge-dot']]: props.variant === 'dot',\n            [classes['badge-standard']]: props.variant === 'standard',\n            '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  @layer utilities {\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  }\n</style>\n"],"names":["classes","useCssModule","props","__props","computedContent","computed","numericContent","numericMax","formatOffsetStyleValue","value","computedOffsetStyle","playAnimation","ref","watch","oldValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOE,UAAMA,IAAUC,EAAA,GAwDVC,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,IAC1D,CAAC,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,IAAA,EACvF,GAEIS,IAAgBC,EAAI,EAAK;AAE/B,WAAAC;AAAA,MACE,MAAMX,EAAM;AAAA,MACZ,CAACO,GAAOK,MAAa;AACnB,QAAKZ,EAAM,WAIPY,MAAaL,MACfE,EAAc,QAAQ,IAEtB,WAAW,MAAM;AACf,UAAAA,EAAc,QAAQ;AAAA,QACxB,GAAG,GAAI;AAAA,MAEX;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Box.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./Box.vue_vue_type_script_setup_true_lang-rFnvwLVY.js";
+import { _ as f } from "./Box.vue_vue_type_script_setup_true_lang-dFFZN40_.js";
 export {
   f as default
 };

package/dist/{Box.vue_vue_type_script_setup_true_lang-rFnvwLVY.js → Box.vue_vue_type_script_setup_true_lang-dFFZN40_.js}

@@ -11,11 +11,11 @@ const u = /* @__PURE__ */ s({
   setup(t) {
     const e = t;
     return (a, r) => (l(), o("section", {
-      class: d(["stash-box tw-bg-white", {
-        "tw-rounded": e.radius === "rounded",
-        "tw-p-gutter": !e.disablePadding && !e.disableGutters,
-        "tw-py-gutter": e.disableGutters,
-        "tw-shadow": !e.disableElevation
+      class: d(["stash-box bg-white", {
+        rounded: e.radius === "rounded",
+        "p-gutter": !e.disablePadding && !e.disableGutters,
+        "py-gutter": e.disableGutters,
+        shadow: !e.disableElevation
       }]),
       "data-test": "stash-box"
     }, [
@@ -26,4 +26,4 @@ const u = /* @__PURE__ */ s({
 export {
   u as _
 };
-//# sourceMappingURL=Box.vue_vue_type_script_setup_true_lang-rFnvwLVY.js.map
+//# sourceMappingURL=Box.vue_vue_type_script_setup_true_lang-dFFZN40_.js.map

package/dist/{Box.vue_vue_type_script_setup_true_lang-rFnvwLVY.js.map → Box.vue_vue_type_script_setup_true_lang-dFFZN40_.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Box.vue_vue_type_script_setup_true_lang-rFnvwLVY.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-dFFZN40_.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 bg-white\"\n    :class=\"{\n      rounded: props.radius === 'rounded',\n      'p-gutter': !props.disablePadding && !props.disableGutters,\n      'py-gutter': props.disableGutters,\n      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,6 +1,6 @@
-import { defineComponent as c, useCssModule as d, computed as a, createBlock as s, openBlock as u, resolveDynamicComponent as f, mergeProps as h, unref as r, withCtx as p, renderSlot as y } from "vue";
+import { defineComponent as c, useCssModule as d, computed as a, createBlock as s, openBlock as u, resolveDynamicComponent as f, mergeProps as p, unref as r, withCtx as y, renderSlot as v } from "vue";
 import m from "./Icon.js";
-import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { _ as h } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const q = /* @__PURE__ */ c({
   name: "ll-button",
   __name: "Button",
@@ -32,7 +32,7 @@ const q = /* @__PURE__ */ c({
     } : t.href ? {
       href: t.href
     } : {});
-    return (o, B) => (u(), s(f(_.value), h({
+    return (o, $) => (u(), s(f(_.value), p({
       disabled: t.isLoading || t.disabled ? !0 : void 0
     }, b.value, {
       class: ["stash-button", [
@@ -47,32 +47,32 @@ const q = /* @__PURE__ */ c({
       ]],
       "data-test": "ll-button"
     }), {
-      default: p(() => [
+      default: y(() => [
         t.isLoading ? (u(), s(m, {
           key: 0,
           name: "loading-empty",
-          class: "tw-animate-spin"
-        })) : y(o.$slots, "default", { key: 1 })
+          class: "animate-spin"
+        })) : v(o.$slots, "default", { key: 1 })
       ]),
       _: 3
     }, 16, ["disabled", "class"]));
   }
-}), g = "_button_4w1qh_2", v = {
+}), g = "_button_v7aq8_5", 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"
-}, L = {
-  $style: v
-}, I = /* @__PURE__ */ w(q, [["__cssModules", L]]);
+  "button--solid": "_button--solid_v7aq8_39",
+  "button--ghost": "_button--ghost_v7aq8_61",
+  "button--primary": "_button--primary_v7aq8_84 _button--solid_v7aq8_39",
+  "button--secondary": "_button--secondary_v7aq8_91 _button--ghost_v7aq8_61",
+  "button--tertiary": "_button--tertiary_v7aq8_98 _button--ghost_v7aq8_61",
+  "button--icon": "_button--icon_v7aq8_105",
+  "button--iconLabel": "_button--iconLabel_v7aq8_106",
+  "button--inline": "_button--inline_v7aq8_146",
+  "button--blue": "_button--blue_v7aq8_164",
+  "button--red": "_button--red_v7aq8_178"
+}, B = {
+  $style: L
+}, x = /* @__PURE__ */ h(q, [["__cssModules", B]]);
 export {
-  I as default
+  x 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\">\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: 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    :disabled=\"props.isLoading || props.disabled ? true : undefined\"\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,EAAA;AAEhB,QAAKC;AAAL,KAAA,CAAKA,MAAL;AACEA,MAAAA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,UAAU;AAAA,IAAA,GANPA,MAAAA,IAAA,CAAA,EAAA;AAWL,UAAMC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOH,CAAW;AAC1C,YAAIJ,EAAMO,CAAI;AACZ,iBAAOA;AAIX,aAAO;AAAA,IACT,CAAC,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,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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: 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    :disabled=\"props.isLoading || props.disabled ? true : undefined\"\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=\"animate-spin\" />\n    <!-- @slot default -->\n    <slot v-else></slot>\n  </component>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .button {\n      border-radius: var(--radius-sm);\n      border-width: 1px;\n      display: inline-block;\n      font-size: 0.875rem;\n      font-weight: var(--font-weight-semibold);\n      line-height: 2.125rem;\n      margin: 0;\n      min-width: 144px;\n      padding: 0 --spacing(3);\n      text-align: center;\n      text-decoration: none;\n      vertical-align: middle;\n      white-space: nowrap;\n    }\n\n    @media (width >= theme(--breakpoint-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 (width >= theme(--breakpoint-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 (width >= theme(--breakpoint-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: var(--radius-sm);\n      height: --spacing(12);\n      min-width: --spacing(12);\n      text-decoration: none;\n    }\n\n    .button--icon {\n      padding: --spacing(3);\n      width: --spacing(12);\n    }\n\n    .button--iconLabel {\n      padding: 0;\n      width: unset;\n    }\n\n    @media (width >= theme(--breakpoint-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: var(--font-weight-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: --spacing(6);\n    }\n\n    @media (width >= theme(--breakpoint-md)) {\n      :global(.button-grid) > .button {\n        width: auto;\n      }\n    }\n\n    :global(.header-button-grid) > .button + .button {\n      margin-left: --spacing(6);\n    }\n\n    @media (width >= theme(--breakpoint-lg)) {\n      :global(.header-button-grid) > .button {\n        width: auto;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","ButtonTypes","buttonType","computed","type","is","buttonAttrs"],"mappings":";;;;;;;;;;;;;;;;;;;AAgEE,UAAMA,IAAQC,GAYRC,IAAUC,EAAA;AAEhB,QAAKC;AAAL,KAAA,CAAKA,MAAL;AACEA,MAAAA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,UAAU;AAAA,IAAA,GANPA,MAAAA,IAAA,CAAA,EAAA;AAWL,UAAMC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOH,CAAW;AAC1C,YAAIJ,EAAMO,CAAI;AACZ,iBAAOA;AAIX,aAAO;AAAA,IACT,CAAC,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,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ButtonGroup.js

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

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 = 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":["__default__","props","__props","emit","__emit","isSingleButton","computed","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a"],"mappings":";;;mEAMEA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAwCA,UAAMC,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,GAGvBT,EAAK,SAASK,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      'flex',\n      $style.buttonGroup,\n      { '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  @layer utilities {\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: var(--font-weight-semibold);\n      line-height: var(--line-height-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: var(--radius-sm);\n      border-top-left-radius: var(--radius-sm);\n    }\n\n    .button:last-child {\n      border-bottom-right-radius: var(--radius-sm);\n      border-top-right-radius: var(--radius-sm);\n    }\n  }\n</style>\n"],"names":["__default__","props","__props","emit","__emit","isSingleButton","computed","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a"],"mappings":";;;mEAMEA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAwCA,UAAMC,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,GAGvBT,EAAK,SAASK,EAAa,KAAK;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Card.js

@@ -1,36 +1,36 @@
-import { defineComponent as w, useSlots as i, createElementBlock as a, openBlock as r, createCommentVNode as f, createElementVNode as s, unref as l, normalizeClass as n, renderSlot as o } from "vue";
-const p = {
-  class: "stash-card tw-relative tw-inline-block tw-rounded tw-border tw-bg-white tw-shadow-md",
+import { defineComponent as i, useSlots as f, createElementBlock as a, openBlock as r, createCommentVNode as p, createElementVNode as s, unref as l, normalizeClass as n, renderSlot as o } from "vue";
+const u = {
+  class: "stash-card relative inline-block rounded border bg-white shadow-md",
   "data-test": "stash-card"
-}, h = /* @__PURE__ */ w({
+}, b = /* @__PURE__ */ i({
   __name: "Card",
   props: {
     detachActions: { type: Boolean, default: !1 }
   },
   setup(d) {
-    const c = d, t = i();
-    return (e, u) => (r(), a("article", p, [
-      l(t)["top-left"] || l(t)["top-right"] ? (r(), a("div", {
+    const c = d, e = f();
+    return (t, m) => (r(), a("article", u, [
+      l(e)["top-left"] || l(e)["top-right"] ? (r(), a("div", {
         key: 0,
         "data-test": "card-actions",
-        class: n([{ "tw-absolute tw-top-0 tw-w-full": c.detachActions }, "tw-flex tw-flex-wrap tw-items-start tw-justify-between tw-p-6"])
+        class: n([{ "absolute top-0 w-full": c.detachActions }, "flex flex-wrap items-start justify-between p-6"])
       }, [
         s("div", null, [
-          o(e.$slots, "top-left")
+          o(t.$slots, "top-left")
         ]),
         s("div", null, [
-          o(e.$slots, "top-right")
+          o(t.$slots, "top-right")
         ])
-      ], 2)) : f("", !0),
+      ], 2)) : p("", !0),
       s("div", {
-        class: n({ "tw-mb-6 tw-flex tw-h-full tw-flex-col tw-gap-y-6": l(t).default })
+        class: n({ "mb-6 flex h-full flex-col gap-y-6": l(e).default })
       }, [
-        o(e.$slots, "default")
+        o(t.$slots, "default")
       ], 2)
     ]));
   }
 });
 export {
-  h as default
+  b as default
 };
 //# sourceMappingURL=Card.js.map

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":["props","__props","slots","useSlots"],"mappings":";;;;;;;;;;AAWE,UAAMA,IAAQC,GAIRC,IAAQC,EAAA;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 class=\"stash-card relative inline-block rounded border bg-white shadow-md\" data-test=\"stash-card\">\n    <div\n      v-if=\"slots['top-left'] || slots['top-right']\"\n      data-test=\"card-actions\"\n      :class=\"{ 'absolute top-0 w-full': props.detachActions }\"\n      class=\"flex flex-wrap items-start justify-between 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=\"{ 'mb-6 flex h-full flex-col 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,EAAA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/CardContent.js

@@ -1,7 +1,7 @@
 import { createElementBlock as e, openBlock as o, renderSlot as n } from "vue";
 import { _ as r } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const s = {}, c = {
-  class: "stash-card-content tw-px-6",
+  class: "stash-card-content px-6",
   "data-test": "stash-card-content"
 };
 function a(t, d) {

package/dist/CardContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardContent.js","sources":["../src/components/CardContent/CardContent.vue"],"sourcesContent":["<template>\n  <div class=\"stash-card-content tw-px-6\" data-test=\"stash-card-content\">\n    <!-- @slot Default slot, for rendering any card content -->\n    <slot></slot>\n  </div>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock"],"mappings":";;cACOA,IAAM;AAAA,EAA6B,OAAA;AAAA;;AAAxC,SAAAC,EAAAC,GAAAC,GAAA;SAEEC,EAAa,GAAAC,EAAA,OAAAL,GAAA;AAAA;;;;"}
+{"version":3,"file":"CardContent.js","sources":["../src/components/CardContent/CardContent.vue"],"sourcesContent":["<template>\n  <div class=\"stash-card-content px-6\" data-test=\"stash-card-content\">\n    <!-- @slot Default slot, for rendering any card content -->\n    <slot></slot>\n  </div>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock"],"mappings":";;cACOA,IAAM;AAAA,EAA0B,OAAA;AAAA;;AAArC,SAAAC,EAAAC,GAAAC,GAAA;SAEEC,EAAa,GAAAC,EAAA,OAAAL,GAAA;AAAA;;;;"}

package/dist/CardFooter.js

@@ -1,7 +1,7 @@
 import { createElementBlock as o, openBlock as e, renderSlot as r } from "vue";
 import { _ as s } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const a = {}, c = {
-  class: "stash-card-footer tw-px-6",
+  class: "stash-card-footer px-6",
   "data-test": "stash-card-footer"
 };
 function n(t, f) {

package/dist/CardFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardFooter.js","sources":["../src/components/CardFooter/CardFooter.vue"],"sourcesContent":["<template>\n  <footer class=\"stash-card-footer tw-px-6\" data-test=\"stash-card-footer\">\n    <!-- @slot Default slot, for rendering any card footer content -->\n    <slot></slot>\n  </footer>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock"],"mappings":";;cACUA,IAAM;AAAA,EAA4B,OAAA;AAAA;;AAA1C,SAAAC,EAAAC,GAAAC,GAAA;SAEEC,EAAa,GAAAC,EAAA,UAAAL,GAAA;AAAA;;;;"}
+{"version":3,"file":"CardFooter.js","sources":["../src/components/CardFooter/CardFooter.vue"],"sourcesContent":["<template>\n  <footer class=\"stash-card-footer px-6\" data-test=\"stash-card-footer\">\n    <!-- @slot Default slot, for rendering any card footer content -->\n    <slot></slot>\n  </footer>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock"],"mappings":";;cACUA,IAAM;AAAA,EAAyB,OAAA;AAAA;;AAAvC,SAAAC,EAAAC,GAAAC,GAAA;SAEEC,EAAa,GAAAC,EAAA,UAAAL,GAAA;AAAA;;;;"}

package/dist/CardHeader.js

@@ -1,13 +1,13 @@
 import { defineComponent as r, createElementBlock as e, openBlock as s, createElementVNode as n, createCommentVNode as o, toDisplayString as a } from "vue";
 const d = {
-  class: "stash-card-header tw-px-6 tw-font-medium tw-text-ice-900",
+  class: "stash-card-header px-6 font-medium text-ice-900",
   "data-test": "stash-card-header"
-}, i = { class: "tw-text-base" }, l = {
+}, i = { class: "text-base" }, l = {
   key: 0,
-  class: "tw-mb-0 tw-mt-1.5"
+  class: "mb-0 mt-1.5"
 }, m = {
   key: 1,
-  class: "tw-mt-1.5 tw-text-ice-700"
+  class: "mt-1.5 text-ice-700"
 }, u = /* @__PURE__ */ r({
   __name: "CardHeader",
   props: {

package/dist/CardHeader.js.map

@@ -1 +1 @@
-{"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;;;;;;;;"}
+{"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 px-6 font-medium text-ice-900\" data-test=\"stash-card-header\">\n    <h4 class=\"text-base\">\n      {{ props.title }}\n    </h4>\n    <p v-if=\"props.subtitle\" class=\"mb-0 mt-1.5\">\n      {{ props.subtitle }}\n    </p>\n    <span v-if=\"props.text\" class=\"mt-1.5 text-ice-700\">\n      {{ props.text }}\n    </span>\n  </header>\n</template>\n"],"names":["props","__props"],"mappings":";;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC;;;;;;;;"}