@leaflink/stash 45.1.1 → 45.1.2

package/dist/AddressSelect.js

@@ -24,7 +24,7 @@ import "./Icon.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./_plugin-vue_export-helper-dad06003.js";
-import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./locale.js";
 const _ = "address-select-", ve = /* @__PURE__ */ M({

package/dist/CurrencyInput.js

@@ -6,7 +6,7 @@ import "./utils/i18n.js";
 import "./constants.js";
 import "./locale.js";
 import "lodash-es/get";
-import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
 import "lodash-es/uniqueId";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./Icon.js";

package/dist/DataViewFilters.js

@@ -26,7 +26,7 @@ import "./Backdrop.js";
 import "./Input.js";
 import "lodash-es/isNil";
 import "./utils/i18n.js";
-import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
 function Pe({
   schema: a,
   dataViewRef: w

package/dist/DatePicker.js

@@ -20,7 +20,7 @@ import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "lodash-es/isNil";
 import "./utils/i18n.js";
-import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 function Uf(e, t) {
   he(2, arguments);

package/dist/Field.js

@@ -1,4 +1,4 @@
-import { _ as o } from "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
+import { _ as o } from "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
 import "vue";
 import "lodash-es/uniqueId";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";

package/dist/Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js

@@ -0,0 +1,93 @@
+import { defineComponent as _, useAttrs as T, useSlots as k, computed as l, openBlock as s, createBlock as w, resolveDynamicComponent as B, mergeProps as O, unref as f, withCtx as m, normalizeClass as R, createTextVNode as q, toDisplayString as h, createCommentVNode as v, createElementBlock as o, renderSlot as u } from "vue";
+import p from "lodash-es/uniqueId";
+import { _ as E } from "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
+const L = ["aria-labelledby"], S = ["id"], C = {
+  key: 4,
+  class: "stash-field-hint tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs",
+  "data-test": "stash-field-hint"
+}, g = {
+  key: 5,
+  class: "stash-field-hint tw-mt-1 tw-whitespace-pre-line tw-text-xs",
+  "data-test": "stash-field-hint"
+}, N = /* @__PURE__ */ _({
+  inheritAttrs: !1,
+  __name: "Field",
+  props: {
+    addBottomSpace: { type: Boolean, default: !1 },
+    errorText: { default: void 0 },
+    hintText: { default: void 0 },
+    id: { default: void 0 },
+    errorId: { default: void 0 },
+    isReadOnly: { type: Boolean },
+    isRequired: { type: Boolean, default: !1 },
+    label: { default: void 0 },
+    showOptionalInLabel: { type: Boolean, default: !1 },
+    fieldset: { type: Boolean, default: !1 }
+  },
+  setup(b) {
+    const e = b, y = T(), r = k(), i = l(() => e.id || p("stash-field-")), d = l(() => e.errorId || p("stash-field-error-")), a = l(() => p("stash-field-label-")), n = l(() => !!e.errorText), I = l(() => e.fieldset ? "fieldset" : "div"), x = l(() => {
+      const { placeholder: t, ...c } = y;
+      return c;
+    });
+    return (t, c) => (s(), w(B(I.value), O({
+      "data-test": "stash-field",
+      class: ["stash-field", [
+        { "tw-p-0": e.fieldset },
+        { "tw-mb-9": e.addBottomSpace && !e.errorText && !e.hintText && !f(r).hint },
+        { "tw-mb-4": e.addBottomSpace && (e.errorText || e.hintText || f(r).hint) }
+      ]]
+    }, x.value), {
+      default: m(() => [
+        e.label ? (s(), w(E, {
+          key: 0,
+          id: a.value,
+          class: R({ "tw-mb-1.5": !!e.isReadOnly }),
+          for: i.value,
+          "has-error": n.value,
+          "is-required": t.isRequired,
+          "show-optional": e.showOptionalInLabel,
+          legend: e.fieldset
+        }, {
+          default: m(() => [
+            q(h(e.label), 1)
+          ]),
+          _: 1
+        }, 8, ["id", "class", "for", "has-error", "is-required", "show-optional", "legend"])) : v("", !0),
+        e.isReadOnly ? (s(), o("div", {
+          key: 1,
+          "aria-labelledby": a.value
+        }, [
+          u(t.$slots, "default", {
+            fieldId: i.value,
+            fieldErrorId: d.value,
+            hasError: n.value,
+            isRequired: t.isRequired,
+            labelId: a.value,
+            showOptionalInLabel: e.showOptionalInLabel
+          })
+        ], 8, L)) : u(t.$slots, "default", {
+          key: 2,
+          fieldId: i.value,
+          fieldErrorId: d.value,
+          hasError: n.value,
+          isRequired: t.isRequired,
+          labelId: a.value,
+          showOptionalInLabel: e.showOptionalInLabel
+        }),
+        e.errorText ? (s(), o("span", {
+          key: 3,
+          id: d.value,
+          class: "stash-field-error tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500",
+          "data-test": "stash-field-error"
+        }, h(e.errorText), 9, S)) : e.hintText && !e.isReadOnly ? (s(), o("span", C, h(e.hintText), 1)) : f(r).hint && !e.isReadOnly ? (s(), o("div", g, [
+          u(t.$slots, "hint")
+        ])) : v("", !0)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+});
+export {
+  N as _
+};
+//# sourceMappingURL=Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js.map

package/dist/Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js","sources":["../src/components/Field/Field.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useSlots } from 'vue';\n\n  import Label from '../Label/Label.vue';\n\n  defineOptions({\n    inheritAttrs: false,\n  });\n\n  export interface FieldProps {\n    /**\n     * Adds spacing under the field that is consistent whether 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     * ID for the Label and Input; must be unique\n     */\n    id?: string;\n\n    /**\n     * ID for the error text element; useful for aria-errormessage\n     */\n    errorId?: 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    /**\n     * Indicates wheter the field is a fieldset or not\n     */\n    fieldset?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FieldProps>(), {\n    addBottomSpace: false,\n    errorText: undefined,\n    hintText: undefined,\n    id: undefined,\n    errorId: undefined,\n    isRequired: false,\n    label: undefined,\n    showOptionalInLabel: false,\n    fieldset: false,\n  });\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const fieldId = computed(() => props.id || uniqueId('stash-field-'));\n  const fieldErrorId = computed(() => props.errorId || uniqueId('stash-field-error-'));\n  const labelId = computed(() => uniqueId('stash-field-label-'));\n  const hasError = computed(() => !!props.errorText);\n  const wrapperElement = computed(() => (props.fieldset ? 'fieldset' : 'div'));\n\n  // Any attributes that are unique to form elements, you want to exclude from\n  // being bound from the root element.\n  const rootAttrs = computed(() => {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { placeholder, ...otherAttrs } = attrs;\n\n    return otherAttrs;\n  });\n</script>\n\n<template>\n  <component\n    :is=\"wrapperElement\"\n    data-test=\"stash-field\"\n    class=\"stash-field\"\n    :class=\"[\n      { 'tw-p-0': props.fieldset },\n      { 'tw-mb-9': props.addBottomSpace && !props.errorText && !props.hintText && !slots.hint },\n      { 'tw-mb-4': props.addBottomSpace && (props.errorText || props.hintText || slots.hint) },\n    ]\"\n    v-bind=\"rootAttrs\"\n  >\n    <Label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :class=\"{ 'tw-mb-1.5': !!props.isReadOnly }\"\n      :for=\"fieldId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :show-optional=\"props.showOptionalInLabel\"\n      :legend=\"props.fieldset\"\n    >\n      {{ props.label }}\n    </Label>\n\n    <!-- @slot for the form field; the Label can also be rendered here instead of using the label prop -->\n    <template v-if=\"props.isReadOnly\">\n      <div :aria-labelledby=\"labelId\">\n        <slot\n          :field-id=\"fieldId\"\n          :field-error-id=\"fieldErrorId\"\n          :has-error=\"hasError\"\n          :is-required=\"isRequired\"\n          :label-id=\"labelId\"\n          :show-optional-in-label=\"props.showOptionalInLabel\"\n        ></slot>\n      </div>\n    </template>\n    <template v-else>\n      <slot\n        :field-id=\"fieldId\"\n        :field-error-id=\"fieldErrorId\"\n        :has-error=\"hasError\"\n        :is-required=\"isRequired\"\n        :label-id=\"labelId\"\n        :show-optional-in-label=\"props.showOptionalInLabel\"\n      ></slot>\n    </template>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"fieldErrorId\"\n      class=\"stash-field-error tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500\"\n      data-test=\"stash-field-error\"\n    >\n      {{ props.errorText }}\n    </span>\n\n    <span\n      v-else-if=\"props.hintText && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      {{ props.hintText }}\n    </span>\n\n    <div\n      v-else-if=\"slots.hint && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      <!-- @slot for displaying hint text below the field -->\n      <slot name=\"hint\"></slot>\n    </div>\n  </component>\n</template>\n"],"names":["attrs","useAttrs","slots","useSlots","fieldId","computed","props","uniqueId","fieldErrorId","labelId","hasError","wrapperElement","rootAttrs","placeholder","otherAttrs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyEQA,IAAQC,KACRC,IAAQC,KACRC,IAAUC,EAAS,MAAMC,EAAM,MAAMC,EAAS,cAAc,CAAC,GAC7DC,IAAeH,EAAS,MAAMC,EAAM,WAAWC,EAAS,oBAAoB,CAAC,GAC7EE,IAAUJ,EAAS,MAAME,EAAS,oBAAoB,CAAC,GACvDG,IAAWL,EAAS,MAAM,CAAC,CAACC,EAAM,SAAS,GAC3CK,IAAiBN,EAAS,MAAOC,EAAM,WAAW,aAAa,KAAM,GAIrEM,IAAYP,EAAS,MAAM;AAE/B,YAAM,EAAE,aAAAQ,GAAa,GAAGC,EAAA,IAAed;AAEhC,aAAAc;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterSelect.js

@@ -1,6 +1,6 @@
 import { defineComponent as S, computed as p, openBlock as r, createBlock as $, withCtx as u, createElementVNode as s, createElementBlock as d, withDirectives as f, vModelCheckbox as v, createVNode as _, withKeys as h, createTextVNode as b, toDisplayString as x, unref as C, createCommentVNode as K, Fragment as A, renderList as B } from "vue";
 import { t as E } from "./locale.js";
-import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
+import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
 import y from "./FilterChip.js";
 import "lodash-es/get";
 import "lodash-es/uniqueId";

package/dist/Filters.js

@@ -38,7 +38,7 @@ import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "lodash-es/isNil";
 import "./utils/i18n.js";
-import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "lodash-es/isEmpty";
 import "lodash-es/isEqual";

package/dist/InlineEdit.js

@@ -5,7 +5,7 @@ import "./constants.js";
 import "./locale.js";
 import "lodash-es/get";
 import "lodash-es/isNil";
-import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
 import "lodash-es/uniqueId";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./Icon.js";

package/dist/Input.js

@@ -1,7 +1,7 @@
 import { defineComponent as P, useSlots as U, useCssModule as G, useAttrs as L, ref as f, computed as v, watchEffect as O, onMounted as W, openBlock as m, createBlock as g, mergeProps as V, unref as o, createSlots as j, withCtx as k, createElementVNode as N, withDirectives as q, vModelDynamic as H, createElementBlock as x, normalizeClass as C, renderSlot as y, createCommentVNode as I } from "vue";
 import $ from "lodash-es/isNil";
 import { convertDecimal as B, sanitizeDecimal as J, decimalSeparator as _ } from "./utils/i18n.js";
-import { _ as K } from "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
+import { _ as K } from "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
 import Q from "./Icon.js";
 import { _ as R } from "./_plugin-vue_export-helper-dad06003.js";
 import "./constants.js";

package/dist/InputOptions.js

@@ -1,5 +1,5 @@
 import { defineComponent as B, useAttrs as S, useSlots as k, useCssModule as T, ref as d, computed as c, watchEffect as $, watch as v, openBlock as b, createBlock as E, mergeProps as m, createSlots as A, withCtx as f, createElementVNode as M, normalizeClass as O, unref as u, createVNode as h, renderSlot as z } from "vue";
-import { _ as F } from "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
+import { _ as F } from "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
 import N from "./Input.js";
 import U from "./Select.js";
 import { _ as P } from "./_plugin-vue_export-helper-dad06003.js";

package/dist/ListView.js

@@ -46,7 +46,7 @@ import "./utils/formatDateTime.js";
 import "./utils/normalizeDate.js";
 import "./toTimeZone-e6e9ab75.js";
 import "./InputOptions.js";
-import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./Select.js";
 import "lodash-es/isEmpty";

package/dist/RadioGroup.js

@@ -1,24 +1,24 @@
-import { defineComponent as $, inject as x, useCssModule as k, openBlock as l, createElementBlock as n, normalizeClass as _, unref as e, Fragment as V, renderList as B, createElementVNode as r, toDisplayString as h, provide as g, computed as v, createBlock as C, withCtx as M, renderSlot as T, resolveDynamicComponent as E } from "vue";
-import G from "lodash-es/uniqueId";
-import { _ as O } from "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
+import { defineComponent as $, inject as k, useCssModule as V, openBlock as s, createElementBlock as d, normalizeClass as _, unref as e, Fragment as B, renderList as R, createElementVNode as r, toDisplayString as h, provide as C, computed as v, createBlock as I, withCtx as M, renderSlot as T, resolveDynamicComponent as G } from "vue";
+import E from "lodash-es/uniqueId";
+import { _ as O } from "./Field.vue_vue_type_script_setup_true_lang-e1e4ff03.js";
 import { R as y } from "./RadioGroup.keys-974818d6.js";
-import { _ as R } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as x } from "./_plugin-vue_export-helper-dad06003.js";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./locale.js";
 import "lodash-es/get";
 const W = ["id", "name", "value", "checked", "disabled"], j = ["for"], q = /* @__PURE__ */ $({
   __name: "VariantButton",
   setup(u) {
-    const o = x(y.key);
+    const o = k(y.key);
     if (!o)
       throw new Error("VariantButton must be used with a RadioGroup instance.");
-    const { name: t, disabled: f, fullWidth: w, modelValue: s, options: i, update: d } = o, p = k();
-    return (I, c) => (l(), n("div", {
+    const { name: t, disabled: m, fullWidth: f, modelValue: l, options: i, update: n } = o, p = V();
+    return (g, c) => (s(), d("div", {
       class: _(["tw-flex", e(p).root])
     }, [
-      (l(!0), n(V, null, B(e(i), (a) => (l(), n("div", {
+      (s(!0), d(B, null, R(e(i), (a) => (s(), d("div", {
         key: `${e(t)}-${a.id}`,
-        class: _([{ "tw-w-full": e(w) }])
+        class: _([{ "tw-w-full": e(f) }])
       }, [
         r("input", {
           id: `${e(t)}-${a.id}`,
@@ -26,10 +26,10 @@ const W = ["id", "name", "value", "checked", "disabled"], j = ["for"], q = /* @_
           type: "radio",
           name: e(t),
           value: a.value,
-          checked: e(s) === a.value,
-          disabled: e(f) || a.disabled,
+          checked: e(l) === a.value,
+          disabled: e(m) || a.disabled,
           onInput: c[0] || (c[0] = //@ts-ignore
-          (...b) => e(d) && e(d)(...b))
+          (...b) => e(n) && e(n)(...b))
         }, null, 40, W),
         r("label", {
           for: `${e(t)}-${a.id}`
@@ -41,19 +41,19 @@ const W = ["id", "name", "value", "checked", "disabled"], j = ["for"], q = /* @_
   root: S
 }, L = {
   $style: D
-}, N = /* @__PURE__ */ R(q, [["__cssModules", L]]), z = ["id", "name", "value", "checked", "disabled"], A = ["for"], F = /* @__PURE__ */ $({
+}, N = /* @__PURE__ */ x(q, [["__cssModules", L]]), z = ["id", "name", "value", "checked", "disabled"], A = ["for"], F = /* @__PURE__ */ $({
   __name: "VariantChip",
   setup(u) {
-    const o = x(y.key);
+    const o = k(y.key);
     if (!o)
       throw new Error("VariantChip must be used with a RadioGroup instance.");
-    const { name: t, disabled: f, fullWidth: w, modelValue: s, options: i, update: d } = o, p = k();
-    return (I, c) => (l(), n("div", {
+    const { name: t, disabled: m, fullWidth: f, modelValue: l, options: i, update: n } = o, p = V();
+    return (g, c) => (s(), d("div", {
       class: _(["tw-my-1.5 tw-flex tw-flex-wrap", e(p).root])
     }, [
-      (l(!0), n(V, null, B(e(i), (a) => (l(), n("div", {
+      (s(!0), d(B, null, R(e(i), (a) => (s(), d("div", {
         key: `${e(t)}-${a.id}`,
-        class: _([{ "tw-w-full": e(w) }])
+        class: _([{ "tw-w-full": e(f) }])
       }, [
         r("input", {
           id: `${e(t)}-${a.id}`,
@@ -61,10 +61,10 @@ const W = ["id", "name", "value", "checked", "disabled"], j = ["for"], q = /* @_
           type: "radio",
           name: e(t),
           value: a.value,
-          checked: e(s) === a.value,
-          disabled: e(f) || a.disabled,
+          checked: e(l) === a.value,
+          disabled: e(m) || a.disabled,
           onInput: c[0] || (c[0] = //@ts-ignore
-          (...b) => e(d) && e(d)(...b))
+          (...b) => e(n) && e(n)(...b))
         }, null, 40, z),
         r("label", {
           for: `${e(t)}-${a.id}`
@@ -76,29 +76,29 @@ const W = ["id", "name", "value", "checked", "disabled"], j = ["for"], q = /* @_
   root: J
 }, U = {
   $style: P
-}, H = /* @__PURE__ */ R(F, [["__cssModules", U]]), K = ["id", "name", "value", "checked", "disabled"], Q = ["for"], X = /* @__PURE__ */ $({
+}, H = /* @__PURE__ */ x(F, [["__cssModules", U]]), K = ["id", "name", "value", "checked", "disabled"], Q = ["for"], X = /* @__PURE__ */ $({
   __name: "VariantRadio",
   setup(u) {
-    const o = x(y.key);
+    const o = k(y.key);
     if (!o)
       throw new Error("VariantRadio must be used with a RadioGroup instance.");
-    const { name: t, disabled: f, fullWidth: w, modelValue: s, options: i, update: d } = o, p = k();
-    return (I, c) => (l(), n("div", {
+    const { name: t, disabled: m, fullWidth: f, modelValue: l, options: i, update: n } = o, p = V();
+    return (g, c) => (s(), d("div", {
       class: _(["tw-flex tw-flex-wrap", e(p).root])
     }, [
-      (l(!0), n(V, null, B(e(i), (a) => (l(), n("div", {
+      (s(!0), d(B, null, R(e(i), (a) => (s(), d("div", {
         key: `${e(t)}-${a.id}`,
-        class: _([{ "tw-w-full": e(w) }])
+        class: _([{ "tw-w-full": e(f) }])
       }, [
         r("input", {
           id: `${e(t)}-${a.id}`,
           type: "radio",
           name: e(t),
           value: a.value,
-          checked: e(s) === a.value,
-          disabled: e(f) || a.disabled,
+          checked: e(l) === a.value,
+          disabled: e(m) || a.disabled,
           onInput: c[0] || (c[0] = //@ts-ignore
-          (...b) => e(d) && e(d)(...b))
+          (...b) => e(n) && e(n)(...b))
         }, null, 40, K),
         r("label", {
           for: `${e(t)}-${a.id}`
@@ -110,27 +110,27 @@ const W = ["id", "name", "value", "checked", "disabled"], j = ["for"], q = /* @_
   root: Y
 }, ee = {
   $style: Z
-}, te = /* @__PURE__ */ R(X, [["__cssModules", ee]]), ae = ["for"], se = ["id", "name", "value", "checked", "disabled"], le = { class: "tw-m-0 tw-text-ice-900" }, oe = { class: "tw-m-0 tw-text-ice-700" }, re = /* @__PURE__ */ $({
+}, te = /* @__PURE__ */ x(X, [["__cssModules", ee]]), ae = ["for"], se = ["id", "name", "value", "checked", "disabled"], le = { class: "tw-m-0 tw-text-ice-900" }, oe = { class: "tw-m-0 tw-text-ice-700" }, re = /* @__PURE__ */ $({
   __name: "VariantTile",
   setup(u) {
-    const o = x(y.key);
+    const o = k(y.key);
     if (!o)
       throw new Error("VariantTile must be used with a RadioGroup instance.");
-    const { name: t, disabled: f, fullWidth: w, modelValue: s, options: i, update: d } = o, p = k();
-    return (I, c) => (l(), n("div", {
+    const { name: t, disabled: m, fullWidth: f, modelValue: l, options: i, update: n } = o, p = V();
+    return (g, c) => (s(), d("div", {
       class: _(["tw-flex tw-flex-wrap", e(p).root])
     }, [
-      (l(!0), n(V, null, B(e(i), (a) => (l(), n("label", {
+      (s(!0), d(B, null, R(e(i), (a) => (s(), d("label", {
         key: `${e(t)}-${a.id}`,
-        class: _([e(p)["tile-container"], { "tw-w-full": e(w) }]),
+        class: _([e(p)["tile-container"], { "tw-w-full": e(f) }]),
         for: `${e(t)}-${a.id}`
       }, [
         r("div", {
           class: _(["tw-flex tw-border", [
             e(p)["tile-header"],
             {
-              "tw-border-blue-500 tw-bg-blue-100 tw-text-ice-900": e(s) === a.value,
-              "tw-border-ice-500 tw-bg-ice-100 tw-text-ice-700": e(s) !== a.value
+              "tw-border-blue-500 tw-bg-blue-100 tw-text-ice-900": e(l) === a.value,
+              "tw-border-ice-500 tw-bg-ice-100 tw-text-ice-700": e(l) !== a.value
             }
           ]])
         }, [
@@ -140,10 +140,10 @@ const W = ["id", "name", "value", "checked", "disabled"], j = ["for"], q = /* @_
             type: "radio",
             name: e(t),
             value: a.value,
-            checked: e(s) === a.value,
-            disabled: e(f) || a.disabled,
+            checked: e(l) === a.value,
+            disabled: e(m) || a.disabled,
             onInput: c[0] || (c[0] = //@ts-ignore
-            (...b) => e(d) && e(d)(...b))
+            (...b) => e(n) && e(n)(...b))
           }, null, 40, se),
           r("div", null, [
             r("span", null, h(a.text), 1)
@@ -153,8 +153,8 @@ const W = ["id", "name", "value", "checked", "disabled"], j = ["for"], q = /* @_
           class: _(["tw-border-x tw-border-b", [
             e(p)["tile-body"],
             {
-              "tw-border-ice-500": e(s) !== a.value,
-              "tw-border-blue-500": e(s) === a.value
+              "tw-border-ice-500": e(l) !== a.value,
+              "tw-border-blue-500": e(l) === a.value
             }
           ]])
         }, [
@@ -164,16 +164,16 @@ const W = ["id", "name", "value", "checked", "disabled"], j = ["for"], q = /* @_
       ], 10, ae))), 128))
     ], 2));
   }
-}), ie = "_root_1sppn_2", de = {
-  root: ie,
+}), de = "_root_1sppn_2", ie = {
+  root: de,
   "tile-container": "_tile-container_1sppn_23",
   "tile-header": "_tile-header_1sppn_30",
   "tile-body": "_tile-body_1sppn_31"
 }, ne = {
-  $style: de
-}, ue = /* @__PURE__ */ R(re, [["__cssModules", ne]]);
-var m = /* @__PURE__ */ ((u) => (u.Radio = "radio", u.Button = "button", u.Chip = "chip", u.Tile = "tile", u))(m || {});
-const he = /* @__PURE__ */ $({
+  $style: ie
+}, ue = /* @__PURE__ */ x(re, [["__cssModules", ne]]);
+var w = /* @__PURE__ */ ((u) => (u.Radio = "radio", u.Button = "button", u.Chip = "chip", u.Tile = "tile", u))(w || {});
+const ce = /* @__PURE__ */ $({
   __name: "RadioGroup",
   props: {
     name: { default: void 0 },
@@ -192,40 +192,34 @@ const he = /* @__PURE__ */ $({
   },
   emits: ["update:modelValue"],
   setup(u, { emit: o }) {
-    const t = u, f = {
-      [m.Button]: N,
-      [m.Chip]: H,
-      [m.Radio]: te,
-      [m.Tile]: ue
+    const t = u, m = {
+      [w.Button]: N,
+      [w.Chip]: H,
+      [w.Radio]: te,
+      [w.Tile]: ue
     };
-    function w(i) {
+    function f(i) {
       o("update:modelValue", i.target.value);
     }
-    const s = G("radio-group-field-error-");
-    return g(y.key, {
+    const l = E("radio-group-field-error-");
+    return C(y.key, {
       name: v(() => t.name),
       disabled: v(() => t.disabled),
       fullWidth: v(() => t.fullWidth),
       modelValue: v(() => t.modelValue),
       options: v(() => t.options),
       variant: v(() => t.variant),
-      update: w
-    }), (i, d) => (l(), C(O, {
-      class: _([
-        {
-          "tw-flex": !t.options,
-          "tw-flex-wrap": !t.options && (t.variant === e(m).Chip || t.variant === e(m).Radio),
-          "tw-gap-x-1.5 tw-gap-y-3": !t.options && t.variant === e(m).Chip,
-          "tw-gap-6": !t.options && (t.variant === e(m).Radio || t.variant === e(m).Tile)
-        }
-      ]),
-      "aria-errormessage": e(s),
+      update: f
+    }), (i, n) => (s(), I(O, {
+      class: "stash-radio-group",
+      "data-test": "stash-radio-group",
+      "aria-errormessage": e(l),
       "aria-invalid": !!t.errorText,
       role: "radiogroup",
       fieldset: "",
       label: t.label,
       "add-bottom-space": t.addBottomSpace,
-      "error-id": e(s),
+      "error-id": e(l),
       "error-text": t.errorText,
       "hint-text": t.hintText,
       "show-optional-in-label": t.showOptionalInLabel,
@@ -234,16 +228,26 @@ const he = /* @__PURE__ */ $({
     }, {
       default: M(() => [
         t.options ? T(i.$slots, "default", { key: 0 }, () => [
-          (l(), C(E(f[t.variant])))
-        ]) : T(i.$slots, "default", { key: 1 })
+          (s(), I(G(m[t.variant])))
+        ], !0) : (s(), d("div", {
+          key: 1,
+          class: _(["tw-flex", {
+            "tw-flex-wrap": t.variant !== e(w).Button,
+            "tw-gap-x-1.5 tw-gap-y-3": t.variant === e(w).Chip,
+            "tw-gap-6": t.variant === e(w).Radio || t.variant === e(w).Tile
+          }])
+        }, [
+          T(i.$slots, "default", {}, void 0, !0)
+        ], 2))
       ]),
       _: 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"]));
+    }, 8, ["aria-errormessage", "aria-invalid", "label", "add-bottom-space", "error-id", "error-text", "hint-text", "show-optional-in-label", "is-required", "is-read-only"]));
   }
 });
+const $e = /* @__PURE__ */ x(ce, [["__scopeId", "data-v-a6627a68"]]);
 export {
   y as RADIO_GROUP_INJECTION,
-  m as RadioGroupVariant,
-  he as default
+  w as RadioGroupVariant,
+  $e 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, useCssModule } 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  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"tw-flex\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'tw-w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"tw-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 module>\n  .root label {\n    padding: 8px 30px;\n    border: 1px solid var(--color-ice-500);\n    font-weight: theme('fontWeight.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: theme('borderRadius.DEFAULT');\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .root > div:last-child label {\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\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-500);\n    cursor: auto;\n  }\n\n  .root input:not(:checked, :disabled) ~ label:hover {\n    border-color: var(--color-blue-500);\n    color: var(--color-blue-500);\n    z-index: 1;\n    position: relative;\n  }\n\n  .root input:checked:not(:disabled) ~ label {\n    border-color: var(--color-blue-500);\n    color: var(--color-blue-500);\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, useCssModule } 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  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"tw-my-1.5 tw-flex tw-flex-wrap\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'tw-w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"tw-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 module>\n  .root {\n    gap: theme('spacing.6');\n  }\n\n  .root label {\n    padding: theme('spacing[1.5]') theme('spacing.3');\n    border: 1px solid var(--color-ice-500);\n    font-weight: theme('fontWeight.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-500);\n    cursor: auto;\n  }\n\n  .root input:checked:not(:disabled) ~ label {\n    border-color: var(--color-blue-500);\n    color: var(--color-white);\n    background-color: var(--color-blue-500);\n    font-weight: theme('fontWeight.bold');\n  }\n\n  .root input:not(:checked, :disabled) ~ label:hover {\n    border-color: var(--color-blue-500);\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { inject, useCssModule } 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  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"tw-flex tw-flex-wrap\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'tw-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 module>\n  .root {\n    gap: theme('spacing.6');\n  }\n\n  .root label {\n    font-weight: theme('fontWeight.medium');\n    user-select: none;\n    cursor: pointer;\n    padding: 0 theme('spacing.3');\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-500);\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-500) 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-500) 50%, transparent 54%);\n  }\n\n  .root input:hover:not(:disabled) {\n    border-color: var(--color-blue-500);\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, useCssModule } 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  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"tw-flex tw-flex-wrap\" :class=\"classes.root\">\n    <label\n      v-for=\"option in options\"\n      :key=\"`${name}-${option.id}`\"\n      :class=\"[classes['tile-container'], { 'tw-w-full': fullWidth }]\"\n      :for=\"`${name}-${option.id}`\"\n    >\n      <div\n        class=\"tw-flex tw-border\"\n        :class=\"[\n          classes['tile-header'],\n          {\n            'tw-border-blue-500 tw-bg-blue-100 tw-text-ice-900': modelValue === option.value,\n            'tw-border-ice-500 tw-bg-ice-100 tw-text-ice-700': modelValue !== option.value,\n          },\n        ]\"\n      >\n        <input\n          :id=\"`${name}-${option.id}`\"\n          class=\"tw-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=\"tw-border-x tw-border-b\"\n        :class=\"[\n          classes['tile-body'],\n          {\n            'tw-border-ice-500': modelValue !== option.value,\n            'tw-border-blue-500': modelValue === option.value,\n          },\n        ]\"\n      >\n        <p class=\"tw-m-0 tw-text-ice-900\">{{ option.subTitle }}</p>\n        <p class=\"tw-m-0 tw-text-ice-700\">{{ option.subText }}</p>\n      </div>\n    </label>\n  </div>\n</template>\n\n<style module>\n  .root {\n    gap: theme('spacing.6');\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: theme('borderRadius.DEFAULT');\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: theme('borderRadius.DEFAULT') theme('borderRadius.DEFAULT') 0 0;\n    padding: theme('spacing.3') 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-500) !important;\n    color: var(--color-ice-900) !important;\n    transition: all 0.2s;\n  }\n\n  .tile-body {\n    border-radius: 0 0 theme('borderRadius.DEFAULT') theme('borderRadius.DEFAULT');\n    background-color: var(--color-white);\n    padding: theme('spacing.6');\n    display: flex;\n    flex-direction: column;\n  }\n\n  .root label.tile-container:hover .tile-body {\n    border-color: var(--color-blue-500) !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-500);\n    transition: all 0.2s;\n    position: relative;\n    cursor: pointer;\n    top: 2px;\n  }\n\n  .root input ~ div {\n    font-weight: theme('fontWeight.medium');\n    user-select: none;\n    cursor: pointer;\n    padding: 0 theme('spacing.3');\n  }\n\n  .root input:disabled {\n    background: #eef2f4;\n  }\n\n  .root input:checked {\n    background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n  }\n\n  .root label.tile-container input {\n    margin-left: theme('spacing.3');\n  }\n\n  .root input:disabled:checked {\n    background-image: radial-gradient(var(--color-ice-500) 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    /**\n     * The value of the selected radio option. Use this prop with the `update:modelValue` event to create a controlled component.\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 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","classes","useCssModule","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,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPV,UAAAV,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,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPV,UAAAV,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,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPV,UAAAV,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,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACVN,IAAAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,OAAO,QAJGA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCoFJC,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,aAASR,EAAOS,GAAU;AACnB,MAAAC,EAAA,qBAAsBD,EAAE,OAA4B,KAAK;AAAA,IAChE;AAEM,UAAAE,IAAUC,EAAS,0BAA0B;AAEnD,WAAAC,EAAQnB,EAAsB,KAAK;AAAA,MACjC,MAAMoB,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,QAAAf;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, useCssModule } 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  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"tw-flex\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'tw-w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"tw-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 module>\n  .root label {\n    padding: 8px 30px;\n    border: 1px solid var(--color-ice-500);\n    font-weight: theme('fontWeight.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: theme('borderRadius.DEFAULT');\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .root > div:last-child label {\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\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-500);\n    cursor: auto;\n  }\n\n  .root input:not(:checked, :disabled) ~ label:hover {\n    border-color: var(--color-blue-500);\n    color: var(--color-blue-500);\n    z-index: 1;\n    position: relative;\n  }\n\n  .root input:checked:not(:disabled) ~ label {\n    border-color: var(--color-blue-500);\n    color: var(--color-blue-500);\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, useCssModule } 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  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"tw-my-1.5 tw-flex tw-flex-wrap\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'tw-w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"tw-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 module>\n  .root {\n    gap: theme('spacing.6');\n  }\n\n  .root label {\n    padding: theme('spacing[1.5]') theme('spacing.3');\n    border: 1px solid var(--color-ice-500);\n    font-weight: theme('fontWeight.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-500);\n    cursor: auto;\n  }\n\n  .root input:checked:not(:disabled) ~ label {\n    border-color: var(--color-blue-500);\n    color: var(--color-white);\n    background-color: var(--color-blue-500);\n    font-weight: theme('fontWeight.bold');\n  }\n\n  .root input:not(:checked, :disabled) ~ label:hover {\n    border-color: var(--color-blue-500);\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { inject, useCssModule } 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  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"tw-flex tw-flex-wrap\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'tw-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 module>\n  .root {\n    gap: theme('spacing.6');\n  }\n\n  .root label {\n    font-weight: theme('fontWeight.medium');\n    user-select: none;\n    cursor: pointer;\n    padding: 0 theme('spacing.3');\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-500);\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-500) 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-500) 50%, transparent 54%);\n  }\n\n  .root input:hover:not(:disabled) {\n    border-color: var(--color-blue-500);\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, useCssModule } 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  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"tw-flex tw-flex-wrap\" :class=\"classes.root\">\n    <label\n      v-for=\"option in options\"\n      :key=\"`${name}-${option.id}`\"\n      :class=\"[classes['tile-container'], { 'tw-w-full': fullWidth }]\"\n      :for=\"`${name}-${option.id}`\"\n    >\n      <div\n        class=\"tw-flex tw-border\"\n        :class=\"[\n          classes['tile-header'],\n          {\n            'tw-border-blue-500 tw-bg-blue-100 tw-text-ice-900': modelValue === option.value,\n            'tw-border-ice-500 tw-bg-ice-100 tw-text-ice-700': modelValue !== option.value,\n          },\n        ]\"\n      >\n        <input\n          :id=\"`${name}-${option.id}`\"\n          class=\"tw-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=\"tw-border-x tw-border-b\"\n        :class=\"[\n          classes['tile-body'],\n          {\n            'tw-border-ice-500': modelValue !== option.value,\n            'tw-border-blue-500': modelValue === option.value,\n          },\n        ]\"\n      >\n        <p class=\"tw-m-0 tw-text-ice-900\">{{ option.subTitle }}</p>\n        <p class=\"tw-m-0 tw-text-ice-700\">{{ option.subText }}</p>\n      </div>\n    </label>\n  </div>\n</template>\n\n<style module>\n  .root {\n    gap: theme('spacing.6');\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: theme('borderRadius.DEFAULT');\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: theme('borderRadius.DEFAULT') theme('borderRadius.DEFAULT') 0 0;\n    padding: theme('spacing.3') 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-500) !important;\n    color: var(--color-ice-900) !important;\n    transition: all 0.2s;\n  }\n\n  .tile-body {\n    border-radius: 0 0 theme('borderRadius.DEFAULT') theme('borderRadius.DEFAULT');\n    background-color: var(--color-white);\n    padding: theme('spacing.6');\n    display: flex;\n    flex-direction: column;\n  }\n\n  .root label.tile-container:hover .tile-body {\n    border-color: var(--color-blue-500) !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-500);\n    transition: all 0.2s;\n    position: relative;\n    cursor: pointer;\n    top: 2px;\n  }\n\n  .root input ~ div {\n    font-weight: theme('fontWeight.medium');\n    user-select: none;\n    cursor: pointer;\n    padding: 0 theme('spacing.3');\n  }\n\n  .root input:disabled {\n    background: #eef2f4;\n  }\n\n  .root input:checked {\n    background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n  }\n\n  .root label.tile-container input {\n    margin-left: theme('spacing.3');\n  }\n\n  .root input:disabled:checked {\n    background-image: radial-gradient(var(--color-ice-500) 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    /**\n     * The value of the selected radio option. Use this prop with the `update:modelValue` event to create a controlled component.\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 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=\"stash-radio-group\"\n    data-test=\"stash-radio-group\"\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    <div\n      v-else\n      class=\"tw-flex\"\n      :class=\"{\n        'tw-flex-wrap': props.variant !== RadioGroupVariant.Button,\n        'tw-gap-x-1.5 tw-gap-y-3': props.variant === RadioGroupVariant.Chip,\n        'tw-gap-6': props.variant === RadioGroupVariant.Radio || props.variant === RadioGroupVariant.Tile,\n      }\"\n    >\n      <slot></slot>\n    </div>\n  </Field>\n</template>\n\n<style scoped>\n  .stash-radio-group :global(.stash-field-hint),\n  .stash-radio-group :global(.stash-field-error) {\n    display: block;\n    width: 100%;\n  }\n\n  .stash-radio-group > :global(.stash-label) {\n    margin-bottom: 6px;\n  }\n</style>\n"],"names":["radioGroupInjection","inject","RADIO_GROUP_INJECTION","name","disabled","fullWidth","modelValue","options","update","classes","useCssModule","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,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPV,UAAAV,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,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPV,UAAAV,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,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPV,UAAAV,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,GAC7DS,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACVN,IAAAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,OAAO,QAJGA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCoFJC,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,aAASR,EAAOS,GAAU;AACnB,MAAAC,EAAA,qBAAsBD,EAAE,OAA4B,KAAK;AAAA,IAChE;AAEM,UAAAE,IAAUC,EAAS,0BAA0B;AAEnD,WAAAC,EAAQnB,EAAsB,KAAK;AAAA,MACjC,MAAMoB,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,QAAAf;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}