@leaflink/stash 42.8.1 → 43.0.1

package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js

@@ -0,0 +1,11 @@
+const _ = "_pagination_kh7yl_2", i = "_prev_kh7yl_20", t = "_next_kh7yl_25", n = {
+  pagination: _,
+  prev: i,
+  next: t,
+  "is-active": "_is-active_kh7yl_38",
+  "is-disabled": "_is-disabled_kh7yl_51"
+};
+export {
+  n as s
+};
+//# sourceMappingURL=Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js.map

package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js.map

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

package/dist/QuickAction.js

@@ -1,10 +1,10 @@
-import { defineComponent as l, computed as o, openBlock as u, createBlock as _, resolveDynamicComponent as d, mergeProps as p, withCtx as f, createElementVNode as e, createVNode as s, toDisplayString as n } from "vue";
-import r from "./Icon.js";
-import { _ as m } from "./_plugin-vue_export-helper-dad06003.js";
+import { defineComponent as l, computed as o, openBlock as u, createBlock as _, resolveDynamicComponent as d, mergeProps as p, withCtx as m, createElementVNode as e, createVNode as s, toDisplayString as c } from "vue";
+import n from "./Icon.js";
+import { _ as f } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const w = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3" }, x = { class: "tw-flex-1" }, b = { class: "tw-text-blue" }, v = { class: "subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal" }, k = /* @__PURE__ */ l({
+const w = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3" }, x = { class: "tw-flex-1" }, v = { class: "tw-text-blue-500" }, b = { class: "subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal" }, k = /* @__PURE__ */ l({
   __name: "QuickAction",
   props: {
     title: {},
@@ -13,8 +13,8 @@ const w = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw
     href: {},
     icon: {}
   },
-  setup(c) {
-    const t = c, i = o(() => t.to ? "router-link" : t.href ? "a" : "div"), a = o(() => t.to ? {
+  setup(r) {
+    const t = r, i = o(() => t.to ? "router-link" : t.href ? "a" : "div"), a = o(() => t.to ? {
       to: t.to
     } : t.href ? {
       href: t.href
@@ -23,21 +23,21 @@ const w = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw
       class: "stash-quick-action root tw-p-3 tw-shadow tw-rounded",
       "data-test": "stash-quick-action"
     }), {
-      default: f(() => [
+      default: m(() => [
         e("div", w, [
           e("div", h, [
-            s(r, {
+            s(n, {
               name: t.icon,
-              class: "tw-text-blue"
+              class: "tw-text-blue-500"
             }, null, 8, ["name"])
           ]),
           e("div", x, [
-            e("h4", b, n(t.title), 1),
-            e("p", v, n(t.subtitle), 1)
+            e("h4", v, c(t.title), 1),
+            e("p", b, c(t.subtitle), 1)
           ]),
-          s(r, {
+          s(n, {
             name: "arrow-right",
-            class: "tw-text-blue"
+            class: "tw-text-blue-500"
           })
         ])
       ]),
@@ -45,7 +45,7 @@ const w = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw
     }, 16));
   }
 });
-const I = /* @__PURE__ */ m(k, [["__scopeId", "data-v-704bf5c4"]]);
+const I = /* @__PURE__ */ f(k, [["__scopeId", "data-v-e72c0cc9"]]);
 export {
   I as default
 };

package/dist/QuickAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface QuickActionProps {\n    /**\n     * The title prop will show the first line of text\n     */\n    title: string;\n\n    /**\n     * The subtitle prop will show the second line of text\n     */\n    subtitle: string;\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component\n     */\n    to?: RouteLocationRaw;\n    /**\n     * If defined, the quick action will render as an `<a />` tag.\n     */\n    href?: string;\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n  }\n\n  const props = defineProps<QuickActionProps>();\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 'div';\n  });\n\n  const linkAttrs = 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=\"linkAttrs\"\n    class=\"stash-quick-action root tw-p-3 tw-shadow tw-rounded\"\n    data-test=\"stash-quick-action\"\n  >\n    <div class=\"content tw-flex tw-items-center\">\n      <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n        <Icon :name=\"props.icon\" class=\"tw-text-blue\" />\n      </div>\n      <div class=\"tw-flex-1\">\n        <h4 class=\"tw-text-blue\">{{ props.title }}</h4>\n        <p class=\"subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal\">\n          {{ props.subtitle }}\n        </p>\n      </div>\n      <Icon name=\"arrow-right\" class=\"tw-text-blue\" />\n    </div>\n  </component>\n</template>\n\n<style scoped>\n  .root {\n    background-color: #fff;\n    border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  .root:hover,\n  .root:active,\n  .root:focus {\n    border: 1px solid var(--color-blue-500);\n    text-decoration: none;\n  }\n\n  .content {\n    gap: 12px;\n  }\n</style>\n"],"names":["is","computed","props","linkAttrs"],"mappings":";;;;;;;;;;;;;;;;iBAkCQA,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAYF,EAAS,MACrBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface QuickActionProps {\n    /**\n     * The title prop will show the first line of text\n     */\n    title: string;\n\n    /**\n     * The subtitle prop will show the second line of text\n     */\n    subtitle: string;\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component\n     */\n    to?: RouteLocationRaw;\n    /**\n     * If defined, the quick action will render as an `<a />` tag.\n     */\n    href?: string;\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n  }\n\n  const props = defineProps<QuickActionProps>();\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 'div';\n  });\n\n  const linkAttrs = 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=\"linkAttrs\"\n    class=\"stash-quick-action root tw-p-3 tw-shadow tw-rounded\"\n    data-test=\"stash-quick-action\"\n  >\n    <div class=\"content tw-flex tw-items-center\">\n      <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n        <Icon :name=\"props.icon\" class=\"tw-text-blue-500\" />\n      </div>\n      <div class=\"tw-flex-1\">\n        <h4 class=\"tw-text-blue-500\">{{ props.title }}</h4>\n        <p class=\"subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal\">\n          {{ props.subtitle }}\n        </p>\n      </div>\n      <Icon name=\"arrow-right\" class=\"tw-text-blue-500\" />\n    </div>\n  </component>\n</template>\n\n<style scoped>\n  .root {\n    background-color: #fff;\n    border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  .root:hover,\n  .root:active,\n  .root:focus {\n    border: 1px solid var(--color-blue-500);\n    text-decoration: none;\n  }\n\n  .content {\n    gap: 12px;\n  }\n</style>\n"],"names":["is","computed","props","linkAttrs"],"mappings":";;;;;;;;;;;;;;;;iBAkCQA,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAYF,EAAS,MACrBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/RadioGroup.js

@@ -1,4 +1,4 @@
-import { defineComponent as y, inject as x, openBlock as d, createElementBlock as n, Fragment as w, renderList as V, unref as e, normalizeClass as f, createElementVNode as o, toDisplayString as h, provide as g, computed as v, createBlock as B, withCtx as T, renderSlot as R, resolveDynamicComponent as C } from "vue";
+import { defineComponent as y, inject as x, openBlock as r, createElementBlock as n, Fragment as w, renderList as V, unref as e, normalizeClass as v, createElementVNode as d, toDisplayString as h, provide as g, computed as b, createBlock as B, withCtx as T, renderSlot as R, resolveDynamicComponent as C } from "vue";
 import E from "lodash-es/uniqueId";
 import { _ as G } from "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
 import { R as $ } from "./RadioGroup.keys-974818d6.js";
@@ -9,27 +9,27 @@ import "lodash-es/get";
 const O = { class: "root flex" }, W = ["id", "name", "value", "checked", "disabled"], j = ["for"], q = /* @__PURE__ */ y({
   __name: "VariantButton",
   setup(u) {
-    const r = x($.key);
-    if (!r)
+    const i = x($.key);
+    if (!i)
       throw new Error("VariantButton must be used with a RadioGroup instance.");
-    const { name: a, disabled: _, fullWidth: p, modelValue: l, options: i, update: s } = r;
-    return (I, c) => (d(), n("div", O, [
-      (d(!0), n(w, null, V(e(i), (t) => (d(), n("div", {
+    const { name: a, disabled: p, fullWidth: m, modelValue: l, options: o, update: s } = i;
+    return (I, c) => (r(), n("div", O, [
+      (r(!0), n(w, null, V(e(o), (t) => (r(), n("div", {
         key: `${e(a)}-${t.id}`,
-        class: f([{ "w-full": e(p) }])
+        class: v([{ "w-full": e(m) }])
       }, [
-        o("input", {
+        d("input", {
           id: `${e(a)}-${t.id}`,
           class: "sr-only",
           type: "radio",
           name: e(a),
           value: t.value,
           checked: e(l) === t.value,
-          disabled: e(_) || t.disabled,
+          disabled: e(p) || t.disabled,
           onInput: c[0] || (c[0] = //@ts-ignore
-          (...m) => e(s) && e(s)(...m))
+          (...f) => e(s) && e(s)(...f))
         }, null, 40, W),
-        o("label", {
+        d("label", {
           for: `${e(a)}-${t.id}`
         }, h(t.text), 9, j)
       ], 2))), 128))
@@ -39,27 +39,27 @@ const O = { class: "root flex" }, W = ["id", "name", "value", "checked", "disabl
 const S = /* @__PURE__ */ k(q, [["__scopeId", "data-v-e8a24f17"]]), D = { class: "root flex flex-wrap tw-my-1.5" }, L = ["id", "name", "value", "checked", "disabled"], N = ["for"], z = /* @__PURE__ */ y({
   __name: "VariantChip",
   setup(u) {
-    const r = x($.key);
-    if (!r)
+    const i = x($.key);
+    if (!i)
       throw new Error("VariantChip must be used with a RadioGroup instance.");
-    const { name: a, disabled: _, fullWidth: p, modelValue: l, options: i, update: s } = r;
-    return (I, c) => (d(), n("div", D, [
-      (d(!0), n(w, null, V(e(i), (t) => (d(), n("div", {
+    const { name: a, disabled: p, fullWidth: m, modelValue: l, options: o, update: s } = i;
+    return (I, c) => (r(), n("div", D, [
+      (r(!0), n(w, null, V(e(o), (t) => (r(), n("div", {
         key: `${e(a)}-${t.id}`,
-        class: f([{ "w-full": e(p) }])
+        class: v([{ "w-full": e(m) }])
       }, [
-        o("input", {
+        d("input", {
           id: `${e(a)}-${t.id}`,
           class: "sr-only",
           type: "radio",
           name: e(a),
           value: t.value,
           checked: e(l) === t.value,
-          disabled: e(_) || t.disabled,
+          disabled: e(p) || t.disabled,
           onInput: c[0] || (c[0] = //@ts-ignore
-          (...m) => e(s) && e(s)(...m))
+          (...f) => e(s) && e(s)(...f))
         }, null, 40, L),
-        o("label", {
+        d("label", {
           for: `${e(a)}-${t.id}`
         }, h(t.text), 9, N)
       ], 2))), 128))
@@ -69,26 +69,26 @@ const S = /* @__PURE__ */ k(q, [["__scopeId", "data-v-e8a24f17"]]), D = { class:
 const A = /* @__PURE__ */ k(z, [["__scopeId", "data-v-b4b020c6"]]), F = { class: "root flex flex-wrap" }, J = ["id", "name", "value", "checked", "disabled"], M = ["for"], P = /* @__PURE__ */ y({
   __name: "VariantRadio",
   setup(u) {
-    const r = x($.key);
-    if (!r)
+    const i = x($.key);
+    if (!i)
       throw new Error("VariantRadio must be used with a RadioGroup instance.");
-    const { name: a, disabled: _, fullWidth: p, modelValue: l, options: i, update: s } = r;
-    return (I, c) => (d(), n("div", F, [
-      (d(!0), n(w, null, V(e(i), (t) => (d(), n("div", {
+    const { name: a, disabled: p, fullWidth: m, modelValue: l, options: o, update: s } = i;
+    return (I, c) => (r(), n("div", F, [
+      (r(!0), n(w, null, V(e(o), (t) => (r(), n("div", {
         key: `${e(a)}-${t.id}`,
-        class: f([{ "w-full": e(p) }])
+        class: v([{ "w-full": e(m) }])
       }, [
-        o("input", {
+        d("input", {
           id: `${e(a)}-${t.id}`,
           type: "radio",
           name: e(a),
           value: t.value,
           checked: e(l) === t.value,
-          disabled: e(_) || t.disabled,
+          disabled: e(p) || t.disabled,
           onInput: c[0] || (c[0] = //@ts-ignore
-          (...m) => e(s) && e(s)(...m))
+          (...f) => e(s) && e(s)(...f))
         }, null, 40, J),
-        o("label", {
+        d("label", {
           for: `${e(a)}-${t.id}`
         }, h(t.text), 9, M)
       ], 2))), 128))
@@ -98,52 +98,52 @@ const A = /* @__PURE__ */ k(z, [["__scopeId", "data-v-b4b020c6"]]), F = { class:
 const U = /* @__PURE__ */ k(P, [["__scopeId", "data-v-1962fcc7"]]), H = { class: "root flex flex-wrap" }, K = ["for"], Q = ["id", "name", "value", "checked", "disabled"], X = { class: "color-ice-900 tw-m-0" }, Y = { class: "color-ice-700 tw-m-0" }, Z = /* @__PURE__ */ y({
   __name: "VariantTile",
   setup(u) {
-    const r = x($.key);
-    if (!r)
+    const i = x($.key);
+    if (!i)
       throw new Error("VariantTile must be used with a RadioGroup instance.");
-    const { name: a, disabled: _, fullWidth: p, modelValue: l, options: i, update: s } = r;
-    return (I, c) => (d(), n("div", H, [
-      (d(!0), n(w, null, V(e(i), (t) => (d(), n("label", {
+    const { name: a, disabled: p, fullWidth: m, modelValue: l, options: o, update: s } = i;
+    return (I, c) => (r(), n("div", H, [
+      (r(!0), n(w, null, V(e(o), (t) => (r(), n("label", {
         key: `${e(a)}-${t.id}`,
-        class: f(["tile-container", { "w-full": e(p) }]),
+        class: v(["tile-container", { "w-full": e(m) }]),
         for: `${e(a)}-${t.id}`
       }, [
-        o("div", {
-          class: f(["tile-header border flex", {
+        d("div", {
+          class: v(["tile-header border flex", {
             "border-blue-500 bg-blue-100 color-ice-900": e(l) === t.value,
             "border-ice-500 bg-ice-100 color-ice-700": e(l) !== t.value
           }])
         }, [
-          o("input", {
+          d("input", {
             id: `${e(a)}-${t.id}`,
             class: "sr-only",
             type: "radio",
             name: e(a),
             value: t.value,
             checked: e(l) === t.value,
-            disabled: e(_) || t.disabled,
+            disabled: e(p) || t.disabled,
             onInput: c[0] || (c[0] = //@ts-ignore
-            (...m) => e(s) && e(s)(...m))
+            (...f) => e(s) && e(s)(...f))
           }, null, 40, Q),
-          o("div", null, [
-            o("span", null, h(t.text), 1)
+          d("div", null, [
+            d("span", null, h(t.text), 1)
           ])
         ], 2),
-        o("div", {
-          class: f(["tile-body border-r border-b border-l", {
+        d("div", {
+          class: v(["tile-body border-r border-b border-l", {
             "border-ice-500": e(l) !== t.value,
             "border-blue-500": e(l) === t.value
           }])
         }, [
-          o("p", X, h(t.subTitle), 1),
-          o("p", Y, h(t.subText), 1)
+          d("p", X, h(t.subTitle), 1),
+          d("p", Y, h(t.subText), 1)
         ], 2)
       ], 10, K))), 128))
     ]));
   }
 });
 const ee = /* @__PURE__ */ k(Z, [["__scopeId", "data-v-e6997760"]]);
-var b = /* @__PURE__ */ ((u) => (u.Radio = "radio", u.Button = "button", u.Chip = "chip", u.Tile = "tile", u))(b || {});
+var _ = /* @__PURE__ */ ((u) => (u.Radio = "radio", u.Button = "button", u.Chip = "chip", u.Tile = "tile", u))(_ || {});
 const ne = /* @__PURE__ */ y({
   __name: "RadioGroup",
   props: {
@@ -162,30 +162,32 @@ const ne = /* @__PURE__ */ y({
     showOptionalInLabel: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(u, { emit: r }) {
-    const a = u, _ = {
-      [b.Button]: S,
-      [b.Chip]: A,
-      [b.Radio]: U,
-      [b.Tile]: ee
+  setup(u, { emit: i }) {
+    const a = u, p = {
+      [_.Button]: S,
+      [_.Chip]: A,
+      [_.Radio]: U,
+      [_.Tile]: ee
     };
-    function p(i) {
-      r("update:modelValue", i.target.value);
+    function m(o) {
+      i("update:modelValue", o.target.value);
     }
     const l = E("radio-group-field-error-");
     return g($.key, {
-      name: v(() => a.name),
-      disabled: v(() => a.disabled),
-      fullWidth: v(() => a.fullWidth),
-      modelValue: v(() => a.modelValue),
-      options: v(() => a.options),
-      variant: v(() => a.variant),
-      update: p
-    }), (i, s) => (d(), B(G, {
-      class: f([
+      name: b(() => a.name),
+      disabled: b(() => a.disabled),
+      fullWidth: b(() => a.fullWidth),
+      modelValue: b(() => a.modelValue),
+      options: b(() => a.options),
+      variant: b(() => a.variant),
+      update: m
+    }), (o, s) => (r(), B(G, {
+      class: v([
         {
           "tw-flex": !a.options,
-          "tw-gap-6": !a.options && a.variant !== e(b).Button
+          "tw-flex-wrap": !a.options && (a.variant === e(_).Chip || a.variant === e(_).Radio),
+          "tw-gap-x-1.5 tw-gap-y-3": !a.options && a.variant === e(_).Chip,
+          "tw-gap-6": !a.options && (a.variant === e(_).Radio || a.variant === e(_).Tile)
         }
       ]),
       "aria-errormessage": e(l),
@@ -202,9 +204,9 @@ const ne = /* @__PURE__ */ y({
       "is-read-only": a.isReadOnly
     }, {
       default: T(() => [
-        a.options ? R(i.$slots, "default", { key: 0 }, () => [
-          (d(), B(C(_[a.variant])))
-        ]) : R(i.$slots, "default", { key: 1 })
+        a.options ? R(o.$slots, "default", { key: 0 }, () => [
+          (r(), B(C(p[a.variant])))
+        ]) : R(o.$slots, "default", { key: 1 })
       ]),
       _: 3
     }, 8, ["class", "aria-errormessage", "aria-invalid", "label", "add-bottom-space", "error-id", "error-text", "hint-text", "show-optional-in-label", "is-required", "is-read-only"]));
@@ -212,7 +214,7 @@ const ne = /* @__PURE__ */ y({
 });
 export {
   $ as RADIO_GROUP_INJECTION,
-  b as RadioGroupVariant,
+  _ as RadioGroupVariant,
   ne as default
 };
 //# sourceMappingURL=RadioGroup.js.map

package/dist/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../src/components/RadioGroup/components/VariantButton.vue","../src/components/RadioGroup/components/VariantChip.vue","../src/components/RadioGroup/components/VariantRadio.vue","../src/components/RadioGroup/components/VariantTile.vue","../src/components/RadioGroup/RadioGroup.types.ts","../src/components/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantButton must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n  <div class=\"root flex\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"sr-only\"\n        type=\"radio\"\n        :name=\"name\"\n        :value=\"option.value\"\n        :checked=\"modelValue === option.value\"\n        :disabled=\"disabled || option.disabled\"\n        @input=\"update\"\n      />\n      <label :for=\"`${name}-${option.id}`\">\n        {{ option.text }}\n      </label>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n  .root label {\n    padding: 8px 30px;\n    border: 1px solid var(--color-ice);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-ice-700);\n    cursor: pointer;\n    transition: all 0.2s;\n    user-select: none;\n    display: block;\n    text-align: center;\n  }\n\n  .root > div:first-child label {\n    border-top-left-radius: var(--border-radius);\n    border-bottom-left-radius: var(--border-radius);\n  }\n\n  .root > div:last-child label {\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n  }\n\n  .root > div:not(:first-child) label {\n    margin-left: -1px;\n  }\n\n  .root > div:not(:last-child) label {\n    border-right-color: transparent;\n  }\n\n  .root input:disabled ~ label {\n    background-color: var(--color-ice-200);\n    color: var(--color-ice);\n    cursor: auto;\n  }\n\n  .root input:not(:checked, :disabled) ~ label:hover {\n    border-color: var(--color-blue);\n    color: var(--color-blue);\n    z-index: 1;\n    position: relative;\n  }\n\n  .root input:checked:not(:disabled) ~ label {\n    border-color: var(--color-blue);\n    color: var(--color-blue);\n    background-color: var(--color-blue-100);\n    z-index: 1;\n    position: relative;\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantChip must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n  <div class=\"root flex flex-wrap tw-my-1.5\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"sr-only\"\n        type=\"radio\"\n        :name=\"name\"\n        :value=\"option.value\"\n        :checked=\"modelValue === option.value\"\n        :disabled=\"disabled || option.disabled\"\n        @input=\"update\"\n      />\n      <label :for=\"`${name}-${option.id}`\">\n        {{ option.text }}\n      </label>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n  .root {\n    gap: var(--ll-space-3);\n  }\n\n  .root label {\n    padding: var(--ll-space-1) var(--ll-space-2);\n    border: 1px solid var(--color-ice);\n    font-weight: var(--font-weight-normal);\n    color: var(--color-ice-900);\n    cursor: pointer;\n    transition: all 0.2s;\n    user-select: none;\n    border-radius: 9999px;\n    white-space: nowrap;\n  }\n\n  .root input:disabled ~ label {\n    background-color: var(--color-ice-200);\n    color: var(--color-ice);\n    cursor: auto;\n  }\n\n  .root input:checked:not(:disabled) ~ label {\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    font-weight: var(--font-weight-bold);\n  }\n\n  .root input:not(:checked, :disabled) ~ label:hover {\n    border-color: var(--color-blue);\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantRadio must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n  <div class=\"root flex flex-wrap\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        type=\"radio\"\n        :name=\"name\"\n        :value=\"option.value\"\n        :checked=\"modelValue === option.value\"\n        :disabled=\"disabled || option.disabled\"\n        @input=\"update\"\n      />\n      <label :for=\"`${name}-${option.id}`\">\n        {{ option.text }}\n      </label>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n  .root {\n    gap: var(--ll-space-3);\n  }\n\n  .root label {\n    font-weight: var(--font-weight-medium);\n    user-select: none;\n    cursor: pointer;\n    padding: 0 var(--ll-space-2);\n  }\n\n  .root input {\n    appearance: none;\n    border-radius: 50%;\n    width: 20px;\n    height: 20px;\n    border: 1px solid var(--color-ice);\n    transition: all 0.2s;\n    position: relative;\n    cursor: pointer;\n    top: 5px;\n  }\n\n  .root input:checked {\n    background-image: radial-gradient(var(--color-blue) 50%, transparent 54%);\n  }\n\n  .root input:disabled {\n    background: #eef2f4;\n  }\n\n  .root input:disabled ~ label {\n    cursor: auto;\n  }\n\n  .root input:disabled:checked {\n    background-image: radial-gradient(var(--color-ice) 50%, transparent 54%);\n  }\n\n  .root input:hover:not(:disabled) {\n    border-color: var(--color-blue);\n  }\n\n  .root input:hover:not(:disabled) ~ label {\n    color: var(--color-ice-900);\n  }\n\n  .root input:not(:disabled) ~ label:hover {\n    color: var(--color-ice-900);\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantTile must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n  <div class=\"root flex flex-wrap\">\n    <label\n      v-for=\"option in options\"\n      :key=\"`${name}-${option.id}`\"\n      class=\"tile-container\"\n      :class=\"{ 'w-full': fullWidth }\"\n      :for=\"`${name}-${option.id}`\"\n    >\n      <div\n        class=\"tile-header border flex\"\n        :class=\"{\n          'border-blue-500 bg-blue-100 color-ice-900': modelValue === option.value,\n          'border-ice-500 bg-ice-100 color-ice-700': modelValue !== option.value,\n        }\"\n      >\n        <input\n          :id=\"`${name}-${option.id}`\"\n          class=\"sr-only\"\n          type=\"radio\"\n          :name=\"name\"\n          :value=\"option.value\"\n          :checked=\"modelValue === option.value\"\n          :disabled=\"disabled || option.disabled\"\n          @input=\"update\"\n        />\n        <div>\n          <span>\n            {{ option.text }}\n          </span>\n        </div>\n      </div>\n      <div\n        class=\"tile-body border-r border-b border-l\"\n        :class=\"{\n          'border-ice-500': modelValue !== option.value,\n          'border-blue-500': modelValue === option.value,\n        }\"\n      >\n        <p class=\"color-ice-900 tw-m-0\">{{ option.subTitle }}</p>\n        <p class=\"color-ice-700 tw-m-0\">{{ option.subText }}</p>\n      </div>\n    </label>\n  </div>\n</template>\n\n<style scoped>\n  .root {\n    gap: var(--ll-space-3);\n  }\n\n  .root label {\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .root input:disabled ~ label {\n    cursor: auto;\n  }\n\n  .root input:hover:not(:disabled) ~ label {\n    color: var(--color-ice-900);\n  }\n\n  .root input:not(:disabled) ~ label:hover {\n    color: var(--color-ice-900);\n  }\n\n  .root label.tile-container {\n    border-radius: var(--border-radius);\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n  }\n\n  .tile-header,\n  .tile-body {\n    transition: all 0.2s;\n  }\n\n  .tile-header {\n    border-radius: var(--border-radius) var(--border-radius) 0 0;\n    padding: var(--ll-space-2) 0;\n  }\n\n  .root label.tile-container:hover .tile-header {\n    background-color: var(--color-blue-100) !important;\n    border-color: var(--color-blue) !important;\n    color: var(--color-ice-900) !important;\n    transition: all 0.2s;\n  }\n\n  .tile-body {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n    background-color: var(--color-white);\n    padding: var(--ll-space-3);\n    display: flex;\n    flex-direction: column;\n  }\n\n  .root label.tile-container:hover .tile-body {\n    border-color: var(--color-blue) !important;\n    transition: all 0.2s;\n  }\n\n  .root input {\n    appearance: none;\n    background-color: var(--color-white);\n    border-radius: 50%;\n    width: 20px;\n    height: 20px;\n    border: 1px solid var(--color-ice);\n    transition: all 0.2s;\n    position: relative;\n    cursor: pointer;\n    top: 2px;\n  }\n\n  .root input ~ div {\n    font-weight: var(--font-weight-medium);\n    user-select: none;\n    cursor: pointer;\n    padding: 0 var(--ll-space-2);\n  }\n\n  .root input:disabled {\n    background: #eef2f4;\n  }\n\n  .root input:checked {\n    background-image: radial-gradient(var(--color-blue) 50%, transparent 54%);\n  }\n\n  .root label.tile-container input {\n    margin-left: var(--ll-space-2);\n  }\n\n  .root input:disabled:checked {\n    background-image: radial-gradient(var(--color-ice) 50%, transparent 54%);\n  }\n\n  @media screen and (width <= 640px) {\n    .root {\n      flex-direction: column;\n    }\n  }\n</style>\n","import { ComputedRef } from 'vue';\n\nexport enum RadioGroupVariant {\n  Radio = 'radio',\n  Button = 'button',\n  Chip = 'chip',\n  Tile = 'tile',\n}\n\nexport type RadioGroupVariants = `${RadioGroupVariant}`;\n\n/**\n * An individual radio `<input>` within a RadioGroup instance\n */\nexport interface RadioGroupOption {\n  /**\n   * Disables the RadioGroupOption if truthy\n   */\n  disabled?: boolean;\n\n  /**\n   * The unique identifier for the option\n   */\n  id: string;\n\n  /**\n   * The text to be displayed for the option\n   */\n  text: string;\n\n  /**\n   * The value of the option. Used for the modelValue of the RadioGroup.\n   */\n  value: string;\n\n  /**\n   * The subtitle for tile variant\n   */\n  subTitle?: string;\n\n  /**\n   * The subtext for tile variant\n   */\n  subText?: string;\n}\n\n/**\n * Properties and utilities provided to children of a RadioGroup instance\n */\nexport interface RadioGroupInjection {\n  /**\n   * This type should match RadioGroupProps['disabled']\n   */\n  disabled: ComputedRef<boolean | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['fullWidth']\n   */\n  fullWidth: ComputedRef<boolean | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['modelValue']\n   */\n  modelValue: ComputedRef<string | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['name']\n   */\n  name: ComputedRef<string | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['options']\n   */\n  options: ComputedRef<RadioGroupOption[] | undefined>;\n\n  /**\n   * Triggered when the user changes their selection; updates the v-model.\n   */\n  update: (e: Event) => void;\n\n  /**\n   * This type should match RadioGroupProps['variant']\n   * @default 'radio'\n   */\n  variant: ComputedRef<RadioGroupVariants | undefined>;\n}\n","<script lang=\"ts\">\n  import { RadioGroupOption, RadioGroupVariant, RadioGroupVariants } from './RadioGroup.types';\n\n  export * from './RadioGroup.keys';\n  export * from './RadioGroup.types';\n\n  export interface RadioGroupProps {\n    /**\n     * Passed to the \"name\" attribute of the `<input>` elements within the RadioGroup.\n     */\n    name?: string;\n\n    /**\n     * Deprecated - Compose your radio group with the `Radio` component instead\n     * @deprecated\n     */\n    options?: RadioGroupOption[];\n\n    modelValue?: RadioGroupOption['value'];\n\n    /**\n     * @defaultValue 'radio'\n     */\n    variant?: RadioGroupVariants;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Adds spacing under the field that is consistent whether or not hint/error text is displayed.\n     */\n    addBottomSpace?: boolean;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * Whether it's a readonly field.\n     */\n    isReadOnly?: boolean;\n\n    /**\n     * Whether the field is required.\n     */\n    isRequired?: boolean;\n\n    /**\n     * Label to render above the input.\n     */\n    label?: string;\n\n    /**\n     * Show \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, provide } from 'vue';\n\n  import Field from '../Field/Field.vue';\n  import VariantButton from './components/VariantButton.vue';\n  import VariantChip from './components/VariantChip.vue';\n  import VariantRadio from './components/VariantRadio.vue';\n  import VariantTile from './components/VariantTile.vue';\n  import { RADIO_GROUP_INJECTION } from './RadioGroup.keys';\n\n  const variantComponentsMap = {\n    [RadioGroupVariant.Button]: VariantButton,\n    [RadioGroupVariant.Chip]: VariantChip,\n    [RadioGroupVariant.Radio]: VariantRadio,\n    [RadioGroupVariant.Tile]: VariantTile,\n  };\n\n  const props = withDefaults(defineProps<RadioGroupProps>(), {\n    variant: 'radio',\n    disabled: false,\n    fullWidth: false,\n    errorText: undefined,\n    hintText: undefined,\n    label: undefined,\n    modelValue: undefined,\n    name: undefined,\n    options: undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Occurs when the user selects a radio option. Also, it enables v-model usage on the component.\n       */\n      (e: 'update:modelValue', value: RadioGroupOption['value']): void;\n    }>();\n\n  function update(e: Event) {\n    emit('update:modelValue', (e.target as HTMLInputElement).value);\n  }\n\n  const errorId = uniqueId('radio-group-field-error-');\n\n  provide(RADIO_GROUP_INJECTION.key, {\n    name: computed(() => props.name),\n    disabled: computed(() => props.disabled),\n    fullWidth: computed(() => props.fullWidth),\n    modelValue: computed(() => props.modelValue),\n    options: computed(() => props.options),\n    variant: computed(() => props.variant),\n    update,\n  });\n</script>\n\n<template>\n  <Field\n    :class=\"[\n      {\n        'tw-flex': !props.options,\n        'tw-gap-6': !props.options && props.variant !== RadioGroupVariant.Button,\n      },\n    ]\"\n    :aria-errormessage=\"errorId\"\n    :aria-invalid=\"!!props.errorText\"\n    role=\"radiogroup\"\n    fieldset\n    :label=\"props.label\"\n    :add-bottom-space=\"props.addBottomSpace\"\n    :error-id=\"errorId\"\n    :error-text=\"props.errorText\"\n    :hint-text=\"props.hintText\"\n    :show-optional-in-label=\"props.showOptionalInLabel\"\n    :is-required=\"props.isRequired\"\n    :is-read-only=\"props.isReadOnly\"\n  >\n    <slot v-if=\"props.options\">\n      <component :is=\"variantComponentsMap[props.variant]\" />\n    </slot>\n    <slot v-else></slot>\n  </Field>\n</template>\n"],"names":["radioGroupInjection","inject","RADIO_GROUP_INJECTION","name","disabled","fullWidth","modelValue","options","update","RadioGroupVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","e","emit","errorId","uniqueId","provide","computed","props"],"mappings":";;;;;;;;;;;AAKQ,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,wDAAwD;AAG1E,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;;ACN7D,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;;ACN7D,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,uDAAuD;AAGzE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;ACN7D,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACTzD,IAAAS,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,OAAO,QAJGA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCiFJC,IAAuB;AAAA,MAC3B,CAACD,EAAkB,MAAM,GAAGE;AAAA,MAC5B,CAACF,EAAkB,IAAI,GAAGG;AAAA,MAC1B,CAACH,EAAkB,KAAK,GAAGI;AAAA,MAC3B,CAACJ,EAAkB,IAAI,GAAGK;AAAA,IAAA;AAuB5B,aAASN,EAAOO,GAAU;AACnB,MAAAC,EAAA,qBAAsBD,EAAE,OAA4B,KAAK;AAAA,IAChE;AAEM,UAAAE,IAAUC,EAAS,0BAA0B;AAEnD,WAAAC,EAAQjB,EAAsB,KAAK;AAAA,MACjC,MAAMkB,EAAS,MAAMC,EAAM,IAAI;AAAA,MAC/B,UAAUD,EAAS,MAAMC,EAAM,QAAQ;AAAA,MACvC,WAAWD,EAAS,MAAMC,EAAM,SAAS;AAAA,MACzC,YAAYD,EAAS,MAAMC,EAAM,UAAU;AAAA,MAC3C,SAASD,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,SAASD,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,QAAAb;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RadioGroup.js","sources":["../src/components/RadioGroup/components/VariantButton.vue","../src/components/RadioGroup/components/VariantChip.vue","../src/components/RadioGroup/components/VariantRadio.vue","../src/components/RadioGroup/components/VariantTile.vue","../src/components/RadioGroup/RadioGroup.types.ts","../src/components/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantButton must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n  <div class=\"root flex\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"sr-only\"\n        type=\"radio\"\n        :name=\"name\"\n        :value=\"option.value\"\n        :checked=\"modelValue === option.value\"\n        :disabled=\"disabled || option.disabled\"\n        @input=\"update\"\n      />\n      <label :for=\"`${name}-${option.id}`\">\n        {{ option.text }}\n      </label>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n  .root label {\n    padding: 8px 30px;\n    border: 1px solid var(--color-ice);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-ice-700);\n    cursor: pointer;\n    transition: all 0.2s;\n    user-select: none;\n    display: block;\n    text-align: center;\n  }\n\n  .root > div:first-child label {\n    border-top-left-radius: var(--border-radius);\n    border-bottom-left-radius: var(--border-radius);\n  }\n\n  .root > div:last-child label {\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n  }\n\n  .root > div:not(:first-child) label {\n    margin-left: -1px;\n  }\n\n  .root > div:not(:last-child) label {\n    border-right-color: transparent;\n  }\n\n  .root input:disabled ~ label {\n    background-color: var(--color-ice-200);\n    color: var(--color-ice);\n    cursor: auto;\n  }\n\n  .root input:not(:checked, :disabled) ~ label:hover {\n    border-color: var(--color-blue);\n    color: var(--color-blue);\n    z-index: 1;\n    position: relative;\n  }\n\n  .root input:checked:not(:disabled) ~ label {\n    border-color: var(--color-blue);\n    color: var(--color-blue);\n    background-color: var(--color-blue-100);\n    z-index: 1;\n    position: relative;\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantChip must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n  <div class=\"root flex flex-wrap tw-my-1.5\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"sr-only\"\n        type=\"radio\"\n        :name=\"name\"\n        :value=\"option.value\"\n        :checked=\"modelValue === option.value\"\n        :disabled=\"disabled || option.disabled\"\n        @input=\"update\"\n      />\n      <label :for=\"`${name}-${option.id}`\">\n        {{ option.text }}\n      </label>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n  .root {\n    gap: var(--ll-space-3);\n  }\n\n  .root label {\n    padding: var(--ll-space-1) var(--ll-space-2);\n    border: 1px solid var(--color-ice);\n    font-weight: var(--font-weight-normal);\n    color: var(--color-ice-900);\n    cursor: pointer;\n    transition: all 0.2s;\n    user-select: none;\n    border-radius: 9999px;\n    white-space: nowrap;\n  }\n\n  .root input:disabled ~ label {\n    background-color: var(--color-ice-200);\n    color: var(--color-ice);\n    cursor: auto;\n  }\n\n  .root input:checked:not(:disabled) ~ label {\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    background-color: var(--color-blue);\n    font-weight: var(--font-weight-bold);\n  }\n\n  .root input:not(:checked, :disabled) ~ label:hover {\n    border-color: var(--color-blue);\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantRadio must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n  <div class=\"root flex flex-wrap\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        type=\"radio\"\n        :name=\"name\"\n        :value=\"option.value\"\n        :checked=\"modelValue === option.value\"\n        :disabled=\"disabled || option.disabled\"\n        @input=\"update\"\n      />\n      <label :for=\"`${name}-${option.id}`\">\n        {{ option.text }}\n      </label>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n  .root {\n    gap: var(--ll-space-3);\n  }\n\n  .root label {\n    font-weight: var(--font-weight-medium);\n    user-select: none;\n    cursor: pointer;\n    padding: 0 var(--ll-space-2);\n  }\n\n  .root input {\n    appearance: none;\n    border-radius: 50%;\n    width: 20px;\n    height: 20px;\n    border: 1px solid var(--color-ice);\n    transition: all 0.2s;\n    position: relative;\n    cursor: pointer;\n    top: 5px;\n  }\n\n  .root input:checked {\n    background-image: radial-gradient(var(--color-blue) 50%, transparent 54%);\n  }\n\n  .root input:disabled {\n    background: #eef2f4;\n  }\n\n  .root input:disabled ~ label {\n    cursor: auto;\n  }\n\n  .root input:disabled:checked {\n    background-image: radial-gradient(var(--color-ice) 50%, transparent 54%);\n  }\n\n  .root input:hover:not(:disabled) {\n    border-color: var(--color-blue);\n  }\n\n  .root input:hover:not(:disabled) ~ label {\n    color: var(--color-ice-900);\n  }\n\n  .root input:not(:disabled) ~ label:hover {\n    color: var(--color-ice-900);\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { inject } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantTile must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n</script>\n\n<template>\n  <div class=\"root flex flex-wrap\">\n    <label\n      v-for=\"option in options\"\n      :key=\"`${name}-${option.id}`\"\n      class=\"tile-container\"\n      :class=\"{ 'w-full': fullWidth }\"\n      :for=\"`${name}-${option.id}`\"\n    >\n      <div\n        class=\"tile-header border flex\"\n        :class=\"{\n          'border-blue-500 bg-blue-100 color-ice-900': modelValue === option.value,\n          'border-ice-500 bg-ice-100 color-ice-700': modelValue !== option.value,\n        }\"\n      >\n        <input\n          :id=\"`${name}-${option.id}`\"\n          class=\"sr-only\"\n          type=\"radio\"\n          :name=\"name\"\n          :value=\"option.value\"\n          :checked=\"modelValue === option.value\"\n          :disabled=\"disabled || option.disabled\"\n          @input=\"update\"\n        />\n        <div>\n          <span>\n            {{ option.text }}\n          </span>\n        </div>\n      </div>\n      <div\n        class=\"tile-body border-r border-b border-l\"\n        :class=\"{\n          'border-ice-500': modelValue !== option.value,\n          'border-blue-500': modelValue === option.value,\n        }\"\n      >\n        <p class=\"color-ice-900 tw-m-0\">{{ option.subTitle }}</p>\n        <p class=\"color-ice-700 tw-m-0\">{{ option.subText }}</p>\n      </div>\n    </label>\n  </div>\n</template>\n\n<style scoped>\n  .root {\n    gap: var(--ll-space-3);\n  }\n\n  .root label {\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .root input:disabled ~ label {\n    cursor: auto;\n  }\n\n  .root input:hover:not(:disabled) ~ label {\n    color: var(--color-ice-900);\n  }\n\n  .root input:not(:disabled) ~ label:hover {\n    color: var(--color-ice-900);\n  }\n\n  .root label.tile-container {\n    border-radius: var(--border-radius);\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n  }\n\n  .tile-header,\n  .tile-body {\n    transition: all 0.2s;\n  }\n\n  .tile-header {\n    border-radius: var(--border-radius) var(--border-radius) 0 0;\n    padding: var(--ll-space-2) 0;\n  }\n\n  .root label.tile-container:hover .tile-header {\n    background-color: var(--color-blue-100) !important;\n    border-color: var(--color-blue) !important;\n    color: var(--color-ice-900) !important;\n    transition: all 0.2s;\n  }\n\n  .tile-body {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n    background-color: var(--color-white);\n    padding: var(--ll-space-3);\n    display: flex;\n    flex-direction: column;\n  }\n\n  .root label.tile-container:hover .tile-body {\n    border-color: var(--color-blue) !important;\n    transition: all 0.2s;\n  }\n\n  .root input {\n    appearance: none;\n    background-color: var(--color-white);\n    border-radius: 50%;\n    width: 20px;\n    height: 20px;\n    border: 1px solid var(--color-ice);\n    transition: all 0.2s;\n    position: relative;\n    cursor: pointer;\n    top: 2px;\n  }\n\n  .root input ~ div {\n    font-weight: var(--font-weight-medium);\n    user-select: none;\n    cursor: pointer;\n    padding: 0 var(--ll-space-2);\n  }\n\n  .root input:disabled {\n    background: #eef2f4;\n  }\n\n  .root input:checked {\n    background-image: radial-gradient(var(--color-blue) 50%, transparent 54%);\n  }\n\n  .root label.tile-container input {\n    margin-left: var(--ll-space-2);\n  }\n\n  .root input:disabled:checked {\n    background-image: radial-gradient(var(--color-ice) 50%, transparent 54%);\n  }\n\n  @media screen and (width <= 640px) {\n    .root {\n      flex-direction: column;\n    }\n  }\n</style>\n","import { ComputedRef } from 'vue';\n\nexport enum RadioGroupVariant {\n  Radio = 'radio',\n  Button = 'button',\n  Chip = 'chip',\n  Tile = 'tile',\n}\n\nexport type RadioGroupVariants = `${RadioGroupVariant}`;\n\n/**\n * An individual radio `<input>` within a RadioGroup instance\n */\nexport interface RadioGroupOption {\n  /**\n   * Disables the RadioGroupOption if truthy\n   */\n  disabled?: boolean;\n\n  /**\n   * The unique identifier for the option\n   */\n  id: string;\n\n  /**\n   * The text to be displayed for the option\n   */\n  text: string;\n\n  /**\n   * The value of the option. Used for the modelValue of the RadioGroup.\n   */\n  value: string;\n\n  /**\n   * The subtitle for tile variant\n   */\n  subTitle?: string;\n\n  /**\n   * The subtext for tile variant\n   */\n  subText?: string;\n}\n\n/**\n * Properties and utilities provided to children of a RadioGroup instance\n */\nexport interface RadioGroupInjection {\n  /**\n   * This type should match RadioGroupProps['disabled']\n   */\n  disabled: ComputedRef<boolean | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['fullWidth']\n   */\n  fullWidth: ComputedRef<boolean | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['modelValue']\n   */\n  modelValue: ComputedRef<string | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['name']\n   */\n  name: ComputedRef<string | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['options']\n   */\n  options: ComputedRef<RadioGroupOption[] | undefined>;\n\n  /**\n   * Triggered when the user changes their selection; updates the v-model.\n   */\n  update: (e: Event) => void;\n\n  /**\n   * This type should match RadioGroupProps['variant']\n   * @default 'radio'\n   */\n  variant: ComputedRef<RadioGroupVariants | undefined>;\n}\n","<script lang=\"ts\">\n  import { RadioGroupOption, RadioGroupVariant, RadioGroupVariants } from './RadioGroup.types';\n\n  export * from './RadioGroup.keys';\n  export * from './RadioGroup.types';\n\n  export interface RadioGroupProps {\n    /**\n     * Passed to the \"name\" attribute of the `<input>` elements within the RadioGroup.\n     */\n    name?: string;\n\n    /**\n     * Deprecated - Compose your radio group with the `Radio` component instead\n     * @deprecated\n     */\n    options?: RadioGroupOption[];\n\n    modelValue?: RadioGroupOption['value'];\n\n    /**\n     * @defaultValue 'radio'\n     */\n    variant?: RadioGroupVariants;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Adds spacing under the field that is consistent whether or not hint/error text is displayed.\n     */\n    addBottomSpace?: boolean;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * Whether it's a readonly field.\n     */\n    isReadOnly?: boolean;\n\n    /**\n     * Whether the field is required.\n     */\n    isRequired?: boolean;\n\n    /**\n     * Label to render above the input.\n     */\n    label?: string;\n\n    /**\n     * Show \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, provide } from 'vue';\n\n  import Field from '../Field/Field.vue';\n  import VariantButton from './components/VariantButton.vue';\n  import VariantChip from './components/VariantChip.vue';\n  import VariantRadio from './components/VariantRadio.vue';\n  import VariantTile from './components/VariantTile.vue';\n  import { RADIO_GROUP_INJECTION } from './RadioGroup.keys';\n\n  const variantComponentsMap = {\n    [RadioGroupVariant.Button]: VariantButton,\n    [RadioGroupVariant.Chip]: VariantChip,\n    [RadioGroupVariant.Radio]: VariantRadio,\n    [RadioGroupVariant.Tile]: VariantTile,\n  };\n\n  const props = withDefaults(defineProps<RadioGroupProps>(), {\n    variant: 'radio',\n    disabled: false,\n    fullWidth: false,\n    errorText: undefined,\n    hintText: undefined,\n    label: undefined,\n    modelValue: undefined,\n    name: undefined,\n    options: undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Occurs when the user selects a radio option. Also, it enables v-model usage on the component.\n       */\n      (e: 'update:modelValue', value: RadioGroupOption['value']): void;\n    }>();\n\n  function update(e: Event) {\n    emit('update:modelValue', (e.target as HTMLInputElement).value);\n  }\n\n  const errorId = uniqueId('radio-group-field-error-');\n\n  provide(RADIO_GROUP_INJECTION.key, {\n    name: computed(() => props.name),\n    disabled: computed(() => props.disabled),\n    fullWidth: computed(() => props.fullWidth),\n    modelValue: computed(() => props.modelValue),\n    options: computed(() => props.options),\n    variant: computed(() => props.variant),\n    update,\n  });\n</script>\n\n<template>\n  <Field\n    :class=\"[\n      {\n        'tw-flex': !props.options,\n        'tw-flex-wrap':\n          !props.options && (props.variant === RadioGroupVariant.Chip || props.variant === RadioGroupVariant.Radio),\n        'tw-gap-x-1.5 tw-gap-y-3': !props.options && props.variant === RadioGroupVariant.Chip,\n        'tw-gap-6':\n          !props.options && (props.variant === RadioGroupVariant.Radio || props.variant === RadioGroupVariant.Tile),\n      },\n    ]\"\n    :aria-errormessage=\"errorId\"\n    :aria-invalid=\"!!props.errorText\"\n    role=\"radiogroup\"\n    fieldset\n    :label=\"props.label\"\n    :add-bottom-space=\"props.addBottomSpace\"\n    :error-id=\"errorId\"\n    :error-text=\"props.errorText\"\n    :hint-text=\"props.hintText\"\n    :show-optional-in-label=\"props.showOptionalInLabel\"\n    :is-required=\"props.isRequired\"\n    :is-read-only=\"props.isReadOnly\"\n  >\n    <slot v-if=\"props.options\">\n      <component :is=\"variantComponentsMap[props.variant]\" />\n    </slot>\n    <slot v-else></slot>\n  </Field>\n</template>\n"],"names":["radioGroupInjection","inject","RADIO_GROUP_INJECTION","name","disabled","fullWidth","modelValue","options","update","RadioGroupVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","e","emit","errorId","uniqueId","provide","computed","props"],"mappings":";;;;;;;;;;;AAKQ,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,wDAAwD;AAG1E,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;;ACN7D,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;;ACN7D,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,uDAAuD;AAGzE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;ACN7D,UAAAA,IAAsBC,EAAOC,EAAsB,GAAG;AAE5D,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,sDAAsD;AAGxE,UAAM,EAAE,MAAAG,GAAM,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,SAAAC,GAAS,QAAAC,EAAW,IAAAR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACTzD,IAAAS,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,OAAO,QAJGA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCiFJC,IAAuB;AAAA,MAC3B,CAACD,EAAkB,MAAM,GAAGE;AAAA,MAC5B,CAACF,EAAkB,IAAI,GAAGG;AAAA,MAC1B,CAACH,EAAkB,KAAK,GAAGI;AAAA,MAC3B,CAACJ,EAAkB,IAAI,GAAGK;AAAA,IAAA;AAuB5B,aAASN,EAAOO,GAAU;AACnB,MAAAC,EAAA,qBAAsBD,EAAE,OAA4B,KAAK;AAAA,IAChE;AAEM,UAAAE,IAAUC,EAAS,0BAA0B;AAEnD,WAAAC,EAAQjB,EAAsB,KAAK;AAAA,MACjC,MAAMkB,EAAS,MAAMC,EAAM,IAAI;AAAA,MAC/B,UAAUD,EAAS,MAAMC,EAAM,QAAQ;AAAA,MACvC,WAAWD,EAAS,MAAMC,EAAM,SAAS;AAAA,MACzC,YAAYD,EAAS,MAAMC,EAAM,UAAU;AAAA,MAC3C,SAASD,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,SAASD,EAAS,MAAMC,EAAM,OAAO;AAAA,MACrC,QAAAb;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/RadioNew.js

@@ -35,7 +35,7 @@ const N = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
     ], 2));
   }
 });
-const D = /* @__PURE__ */ v(T, [["__scopeId", "data-v-7a7766df"]]), E = ["id", "name", "value", "checked", "disabled"], O = ["for"], S = /* @__PURE__ */ r({
+const D = /* @__PURE__ */ v(T, [["__scopeId", "data-v-2172fc90"]]), E = ["id", "name", "value", "checked", "disabled"], O = ["for"], S = /* @__PURE__ */ r({
   __name: "VariantChip",
   props: {
     disabled: { type: Boolean },
@@ -69,7 +69,7 @@ const D = /* @__PURE__ */ v(T, [["__scopeId", "data-v-7a7766df"]]), E = ["id", "
     ], 2));
   }
 });
-const M = /* @__PURE__ */ v(S, [["__scopeId", "data-v-d8634d42"]]), z = ["id", "name", "value", "checked", "disabled"], A = ["for"], F = /* @__PURE__ */ r({
+const M = /* @__PURE__ */ v(S, [["__scopeId", "data-v-8bfe9d47"]]), z = ["id", "name", "value", "checked", "disabled"], A = ["for"], F = /* @__PURE__ */ r({
   __name: "VariantRadio",
   props: {
     disabled: { type: Boolean },
@@ -105,7 +105,7 @@ const M = /* @__PURE__ */ v(S, [["__scopeId", "data-v-d8634d42"]]), z = ["id", "
     ], 2));
   }
 });
-const I = /* @__PURE__ */ v(F, [["__scopeId", "data-v-a70879f8"]]), J = ["for"], P = ["id", "aria-labelledby", "name", "value", "checked", "disabled"], U = ["id"], q = /* @__PURE__ */ r({
+const I = /* @__PURE__ */ v(F, [["__scopeId", "data-v-7175a75d"]]), J = ["for"], P = ["id", "aria-labelledby", "name", "value", "checked", "disabled"], U = ["id"], q = /* @__PURE__ */ r({
   __name: "VariantTile",
   props: {
     disabled: { type: Boolean },
@@ -156,7 +156,7 @@ const I = /* @__PURE__ */ v(F, [["__scopeId", "data-v-a70879f8"]]), J = ["for"],
     ], 10, J));
   }
 });
-const H = /* @__PURE__ */ v(q, [["__scopeId", "data-v-8067593a"]]);
+const H = /* @__PURE__ */ v(q, [["__scopeId", "data-v-1984a217"]]);
 var u = /* @__PURE__ */ ((a) => (a.Radio = "radio", a.Button = "button", a.Chip = "chip", a.Tile = "tile", a))(u || {});
 const Y = /* @__PURE__ */ r({
   __name: "RadioNew",

package/dist/SearchBar.js

@@ -1,4 +1,4 @@
-import { defineComponent as C, useCssModule as B, useSlots as S, ref as h, openBlock as m, createBlock as f, normalizeClass as o, unref as r, withKeys as V, createSlots as w, withCtx as n, createVNode as i, createCommentVNode as I, renderSlot as L } from "vue";
+import { defineComponent as C, useCssModule as B, useSlots as S, ref as m, openBlock as h, createBlock as f, normalizeClass as o, unref as r, withKeys as V, createSlots as w, withCtx as n, createVNode as u, createCommentVNode as I, renderSlot as L } from "vue";
 import { t as b } from "./locale.js";
 import _ from "./Button.js";
 import v from "./Icon.js";
@@ -26,21 +26,21 @@ const W = /* @__PURE__ */ C({
     hintText: { default: void 0 }
   },
   emits: ["search", "update:model-value"],
-  setup(g, { emit: s }) {
-    const e = g, c = B(), k = S(), a = h(e.modelValue), u = h();
+  setup(k, { emit: s }) {
+    const e = k, c = B(), g = S(), a = m(e.modelValue), i = m();
     function d() {
       s("search", a.value);
     }
     function x() {
       var l, t;
-      a.value = "", s("search", ""), s("update:model-value", ""), (t = (l = u.value) == null ? void 0 : l.inputEl) == null || t.focus();
+      a.value = "", s("search", ""), s("update:model-value", ""), (t = (l = i.value) == null ? void 0 : l.inputEl) == null || t.focus();
     }
     function y() {
       s("update:model-value", a.value);
     }
-    return (l, t) => (m(), f(T, {
+    return (l, t) => (h(), f(T, {
       ref_key: "stashInputRef",
-      ref: u,
+      ref: i,
       modelValue: a.value,
       "onUpdate:modelValue": [
         t[0] || (t[0] = (p) => a.value = p),
@@ -54,7 +54,7 @@ const W = /* @__PURE__ */ C({
       onKeyup: t[1] || (t[1] = V((p) => !e.isLoading && d(), ["enter"]))
     }, w({
       append: n(() => [
-        a.value ? (m(), f(_, {
+        a.value ? (h(), f(_, {
           key: 0,
           class: o(r(c)["clear-button"]),
           disabled: e.isLoading,
@@ -62,19 +62,19 @@ const W = /* @__PURE__ */ C({
           onClick: x
         }, {
           default: n(() => [
-            i(v, { name: "close" })
+            u(v, { name: "close" })
           ]),
           _: 1
         }, 8, ["class", "disabled"])) : I("", !0),
-        i(_, {
+        u(_, {
           "data-test": "stash-search-bar|search-button",
           disabled: e.isLoading,
           class: o(r(c)["search-button"]),
           onClick: d
         }, {
           default: n(() => [
-            i(v, {
-              class: o({ "fx-spin tw-text-teal": e.isWorking }),
+            u(v, {
+              class: o({ "fx-spin tw-text-teal-500": e.isWorking }),
               name: e.isWorking ? "working" : "search"
             }, null, 8, ["class", "name"])
           ]),
@@ -83,7 +83,7 @@ const W = /* @__PURE__ */ C({
       ]),
       _: 2
     }, [
-      r(k).hint ? {
+      r(g).hint ? {
         name: "hint",
         fn: n(() => [
           L(l.$slots, "hint")
@@ -93,9 +93,9 @@ const W = /* @__PURE__ */ C({
     ]), 1032, ["modelValue", "class", "label", "placeholder", "hint-text"]));
   }
 }), $ = {
-  "search-input": "_search-input_7ir7g_2",
-  "clear-button": "_clear-button_7ir7g_8",
-  "search-button": "_search-button_7ir7g_23"
+  "search-input": "_search-input_1e6pm_2",
+  "clear-button": "_clear-button_1e6pm_8",
+  "search-button": "_search-button_1e6pm_23"
 }, K = {
   $style: $
 }, X = /* @__PURE__ */ M(W, [["__cssModules", K]]);

package/dist/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sources":["../src/components/SearchBar/SearchBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { ref, useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Input from '../Input/Input.vue';\n\n  export interface SearchBarProps {\n    /**\n     * Indicates loading activity (for example async request) that should prevent search\n     */\n    isLoading?: boolean;\n\n    /**\n     * Sets a visual indicator that the search is active\n     */\n    isWorking?: boolean;\n\n    /**\n     * The search term\n     */\n    modelValue?: string;\n\n    /**\n     * Placeholder text for the input\n     */\n    placeholder?: string;\n\n    /**\n     * Label for search bar\n     */\n    label?: string;\n\n    /**\n     * Text below the input\n     */\n    hintText?: string;\n  }\n\n  defineOptions({\n    name: 'll-search-bar',\n  });\n\n  const props = withDefaults(defineProps<SearchBarProps>(), {\n    isLoading: false,\n    isWorking: false,\n    modelValue: '',\n    placeholder: t('ll.search'),\n    label: t('ll.search'),\n    hintText: undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when searching or clearing the search input\n       */\n      (e: 'search', searchTerm: string): void;\n\n      /**\n       * Emitted when the search term changes\n       */\n      (e: 'update:model-value', searchTerm: string): void;\n    }>();\n\n  const classes = useCssModule();\n  const slots = useSlots();\n  const searchTerm = ref(props.modelValue);\n  const stashInputRef = ref<InstanceType<typeof Input>>();\n\n  function onSearch() {\n    emit('search', searchTerm.value);\n  }\n\n  function clearSearchTerm() {\n    searchTerm.value = '';\n    emit('search', '');\n    emit('update:model-value', '');\n\n    stashInputRef.value?.inputEl?.focus();\n  }\n\n  function handleChange() {\n    emit('update:model-value', searchTerm.value);\n  }\n</script>\n\n<template>\n  <Input\n    ref=\"stashInputRef\"\n    v-model=\"searchTerm\"\n    class=\"stash-search-bar\"\n    :class=\"classes['search-input']\"\n    :label=\"props.label\"\n    :placeholder=\"props.placeholder\"\n    :hint-text=\"props.hintText\"\n    data-test=\"stash-search-bar\"\n    @update:model-value=\"handleChange\"\n    @keyup.enter=\"!props.isLoading && onSearch()\"\n  >\n    <template #append>\n      <Button\n        v-if=\"searchTerm\"\n        :class=\"classes['clear-button']\"\n        :disabled=\"props.isLoading\"\n        data-test=\"stash-search-bar|clear-button\"\n        @click=\"clearSearchTerm\"\n      >\n        <Icon name=\"close\" />\n      </Button>\n      <Button\n        data-test=\"stash-search-bar|search-button\"\n        :disabled=\"props.isLoading\"\n        :class=\"classes['search-button']\"\n        @click=\"onSearch\"\n      >\n        <Icon :class=\"{ 'fx-spin tw-text-teal': props.isWorking }\" :name=\"props.isWorking ? 'working' : 'search'\" />\n      </Button>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Overrides the Input hint-text prop -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Input>\n</template>\n\n<style module>\n  .search-input :global(.stash-input-append) {\n    display: flex;\n    justify-content: flex-end;\n    width: 72px; /* double the the default width of 36px */\n  }\n\n  .search-input :global(.stash-input-append) .clear-button {\n    color: theme(colors.ice.700);\n    height: theme(spacing.9);\n    margin: 0;\n    min-width: theme(spacing.9);\n    padding: 0;\n    width: theme(spacing.9);\n    background: none;\n  }\n\n  .search-input :global(.stash-input-append) .clear-button:disabled {\n    color: theme(colors.ice.DEFAULT);\n    cursor: default;\n  }\n\n  .search-input :global(.stash-input-append) .search-button {\n    border-bottom-left-radius: 0;\n    border-left: none;\n    border-top-left-radius: 0;\n    min-width: theme(spacing.9);\n    padding: 0 theme(spacing[1.5]);\n    width: theme(spacing.9);\n  }\n\n  .search-input :global(.stash-input-append) .search-button:focus {\n    box-shadow: none;\n  }\n\n  .search-input :global(.stash-input-append) .search-button:disabled {\n    border-color: theme(colors.ice.DEFAULT);\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots","searchTerm","ref","props","stashInputRef","onSearch","emit","clearSearchTerm","_b","_a","handleChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkEQA,IAAUC,KACVC,IAAQC,KACRC,IAAaC,EAAIC,EAAM,UAAU,GACjCC,IAAgBF;AAEtB,aAASG,IAAW;AACb,MAAAC,EAAA,UAAUL,EAAW,KAAK;AAAA,IACjC;AAEA,aAASM,IAAkB;;AACzB,MAAAN,EAAW,QAAQ,IACnBK,EAAK,UAAU,EAAE,GACjBA,EAAK,sBAAsB,EAAE,IAEfE,KAAAC,IAAAL,EAAA,UAAA,gBAAAK,EAAO,YAAP,QAAAD,EAAgB;AAAA,IAChC;AAEA,aAASE,IAAe;AACjB,MAAAJ,EAAA,sBAAsBL,EAAW,KAAK;AAAA,IAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SearchBar.js","sources":["../src/components/SearchBar/SearchBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { ref, useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Input from '../Input/Input.vue';\n\n  export interface SearchBarProps {\n    /**\n     * Indicates loading activity (for example async request) that should prevent search\n     */\n    isLoading?: boolean;\n\n    /**\n     * Sets a visual indicator that the search is active\n     */\n    isWorking?: boolean;\n\n    /**\n     * The search term\n     */\n    modelValue?: string;\n\n    /**\n     * Placeholder text for the input\n     */\n    placeholder?: string;\n\n    /**\n     * Label for search bar\n     */\n    label?: string;\n\n    /**\n     * Text below the input\n     */\n    hintText?: string;\n  }\n\n  defineOptions({\n    name: 'll-search-bar',\n  });\n\n  const props = withDefaults(defineProps<SearchBarProps>(), {\n    isLoading: false,\n    isWorking: false,\n    modelValue: '',\n    placeholder: t('ll.search'),\n    label: t('ll.search'),\n    hintText: undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when searching or clearing the search input\n       */\n      (e: 'search', searchTerm: string): void;\n\n      /**\n       * Emitted when the search term changes\n       */\n      (e: 'update:model-value', searchTerm: string): void;\n    }>();\n\n  const classes = useCssModule();\n  const slots = useSlots();\n  const searchTerm = ref(props.modelValue);\n  const stashInputRef = ref<InstanceType<typeof Input>>();\n\n  function onSearch() {\n    emit('search', searchTerm.value);\n  }\n\n  function clearSearchTerm() {\n    searchTerm.value = '';\n    emit('search', '');\n    emit('update:model-value', '');\n\n    stashInputRef.value?.inputEl?.focus();\n  }\n\n  function handleChange() {\n    emit('update:model-value', searchTerm.value);\n  }\n</script>\n\n<template>\n  <Input\n    ref=\"stashInputRef\"\n    v-model=\"searchTerm\"\n    class=\"stash-search-bar\"\n    :class=\"classes['search-input']\"\n    :label=\"props.label\"\n    :placeholder=\"props.placeholder\"\n    :hint-text=\"props.hintText\"\n    data-test=\"stash-search-bar\"\n    @update:model-value=\"handleChange\"\n    @keyup.enter=\"!props.isLoading && onSearch()\"\n  >\n    <template #append>\n      <Button\n        v-if=\"searchTerm\"\n        :class=\"classes['clear-button']\"\n        :disabled=\"props.isLoading\"\n        data-test=\"stash-search-bar|clear-button\"\n        @click=\"clearSearchTerm\"\n      >\n        <Icon name=\"close\" />\n      </Button>\n      <Button\n        data-test=\"stash-search-bar|search-button\"\n        :disabled=\"props.isLoading\"\n        :class=\"classes['search-button']\"\n        @click=\"onSearch\"\n      >\n        <Icon :class=\"{ 'fx-spin tw-text-teal-500': props.isWorking }\" :name=\"props.isWorking ? 'working' : 'search'\" />\n      </Button>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Overrides the Input hint-text prop -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Input>\n</template>\n\n<style module>\n  .search-input :global(.stash-input-append) {\n    display: flex;\n    justify-content: flex-end;\n    width: 72px; /* double the the default width of 36px */\n  }\n\n  .search-input :global(.stash-input-append) .clear-button {\n    color: theme(colors.ice.700);\n    height: theme(spacing.9);\n    margin: 0;\n    min-width: theme(spacing.9);\n    padding: 0;\n    width: theme(spacing.9);\n    background: none;\n  }\n\n  .search-input :global(.stash-input-append) .clear-button:disabled {\n    color: theme('colors.ice.500');\n    cursor: default;\n  }\n\n  .search-input :global(.stash-input-append) .search-button {\n    border-bottom-left-radius: 0;\n    border-left: none;\n    border-top-left-radius: 0;\n    min-width: theme(spacing.9);\n    padding: 0 theme(spacing[1.5]);\n    width: theme(spacing.9);\n  }\n\n  .search-input :global(.stash-input-append) .search-button:focus {\n    box-shadow: none;\n  }\n\n  .search-input :global(.stash-input-append) .search-button:disabled {\n    border-color: theme('colors.ice.500');\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots","searchTerm","ref","props","stashInputRef","onSearch","emit","clearSearchTerm","_b","_a","handleChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkEQA,IAAUC,KACVC,IAAQC,KACRC,IAAaC,EAAIC,EAAM,UAAU,GACjCC,IAAgBF;AAEtB,aAASG,IAAW;AACb,MAAAC,EAAA,UAAUL,EAAW,KAAK;AAAA,IACjC;AAEA,aAASM,IAAkB;;AACzB,MAAAN,EAAW,QAAQ,IACnBK,EAAK,UAAU,EAAE,GACjBA,EAAK,sBAAsB,EAAE,IAEfE,KAAAC,IAAAL,EAAA,UAAA,gBAAAK,EAAO,YAAP,QAAAD,EAAgB;AAAA,IAChC;AAEA,aAASE,IAAe;AACjB,MAAAJ,EAAA,sBAAsBL,EAAW,KAAK;AAAA,IAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}