@leaflink/stash 44.9.0 → 45.0.0

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-42ba3c5a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.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-42ba3c5a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.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-42ba3c5a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.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-42ba3c5a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.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-42ba3c5a.js";
+import { _ as o } from "./Field.vue_vue_type_script_setup_true_lang-224ab33a.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-42ba3c5a.js → Field.vue_vue_type_script_setup_true_lang-224ab33a.js}

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

package/dist/Field.vue_vue_type_script_setup_true_lang-224ab33a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-224ab33a.js","sources":["../src/components/Field/Field.vue"],"sourcesContent":["<script lang=\"ts\">\n  export default {\n    inheritAttrs: false,\n  };\n</script>\n\n<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  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    const { placeholder, ...otherAttrs } = attrs;\n\n    return otherAttrs;\n  });\n</script>\n\n<template>\n  <component\n    v-bind=\"rootAttrs\"\n    :is=\"wrapperElement\"\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  >\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=\"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\"\n      class=\"tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      <span v-if=\"!props.isReadOnly\">{{ props.hintText }}</span>\n    </span>\n\n    <div v-else-if=\"slots.hint\" class=\"tw-mt-1 tw-whitespace-pre-line tw-text-xs\" data-test=\"stash-field-hint\">\n      <!-- @slot for displaying hint text below the field -->\n      <slot v-if=\"!props.isReadOnly\" 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":";;;;;;;;;;;OACiB;AAAA,EACb,cAAc;AAChB;;;;;;;;;;;;;;;;iBAwEMA,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;AAC/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-42ba3c5a.js";
+import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-224ab33a.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-42ba3c5a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.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-42ba3c5a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.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-42ba3c5a.js";
+import { _ as K } from "./Field.vue_vue_type_script_setup_true_lang-224ab33a.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-42ba3c5a.js";
+import { _ as F } from "./Field.vue_vue_type_script_setup_true_lang-224ab33a.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-42ba3c5a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./Select.js";
 import "lodash-es/isEmpty";

package/dist/RadioGroup.js

@@ -1,6 +1,6 @@
 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-42ba3c5a.js";
+import { _ as O } from "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
 import { R as y } from "./RadioGroup.keys-974818d6.js";
 import { _ as R } from "./_plugin-vue_export-helper-dad06003.js";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";

package/dist/SearchBar.js

@@ -12,7 +12,7 @@ import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "lodash-es/isNil";
 import "./utils/i18n.js";
 import "./constants.js";
-import "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 const M = /* @__PURE__ */ C({
   name: "ll-search-bar",

package/dist/Select.js

@@ -10,7 +10,7 @@ import { DEBOUNCE as Ht, KEY_CODES as ie } from "./constants.js";
 import zt from "./clickoutside.js";
 import { D as Wt } from "./MenusPlugin-5e93f0a5.js";
 import Xe from "./Chip.js";
-import { _ as Kt } from "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
+import { _ as Kt } from "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
 import ve from "./Icon.js";
 import { _ as Ut } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";

package/dist/SelectStatus.js

@@ -22,7 +22,7 @@ import "./clickoutside.js";
 import "./MenusPlugin-5e93f0a5.js";
 import "./Chip.js";
 import "./utils/colorScheme.js";
-import "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
+import "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./locale.js";
 const j = { class: "tw-mr-6 tw-truncate" }, E = {

package/dist/Textarea.js

@@ -1,6 +1,6 @@
 import { defineComponent as R, useAttrs as M, useSlots as S, useCssModule as k, ref as x, computed as H, watch as O, onMounted as A, nextTick as I, onBeforeUnmount as P, openBlock as V, createBlock as $, mergeProps as _, unref as c, createSlots as q, withCtx as g, createElementVNode as j, renderSlot as D } from "vue";
 import F from "lodash-es/uniqueId";
-import { _ as L } from "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
+import { _ as L } from "./Field.vue_vue_type_script_setup_true_lang-224ab33a.js";
 import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
 import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./locale.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "44.9.0",
+  "version": "45.0.0",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",

package/dist/Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js","sources":["../src/components/Field/Field.vue"],"sourcesContent":["<script lang=\"ts\">\n  export default {\n    inheritAttrs: false,\n  };\n</script>\n\n<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  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('field-'));\n  const fieldErrorId = computed(() => props.errorId || uniqueId('field-error-'));\n  const labelId = computed(() => uniqueId('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    const { placeholder, ...otherAttrs } = attrs;\n\n    return otherAttrs;\n  });\n</script>\n\n<template>\n  <component\n    v-bind=\"rootAttrs\"\n    :is=\"wrapperElement\"\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  >\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=\"tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500\"\n      data-test=\"field-error\"\n    >\n      {{ props.errorText }}\n    </span>\n\n    <span v-else-if=\"props.hintText\" class=\"tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs\" data-test=\"field-hint\">\n      <span v-if=\"!props.isReadOnly\">{{ props.hintText }}</span>\n    </span>\n\n    <div v-else-if=\"slots.hint\" class=\"tw-mt-1 tw-whitespace-pre-line tw-text-xs\" data-test=\"field-hint\">\n      <!-- @slot for displaying hint text below the field -->\n      <slot v-if=\"!props.isReadOnly\" 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":";;;;;;;;;;;OACiB;AAAA,EACb,cAAc;AAChB;;;;;;;;;;;;;;;;iBAwEMA,IAAQC,KACRC,IAAQC,KACRC,IAAUC,EAAS,MAAMC,EAAM,MAAMC,EAAS,QAAQ,CAAC,GACvDC,IAAeH,EAAS,MAAMC,EAAM,WAAWC,EAAS,cAAc,CAAC,GACvEE,IAAUJ,EAAS,MAAME,EAAS,cAAc,CAAC,GACjDG,IAAWL,EAAS,MAAM,CAAC,CAACC,EAAM,SAAS,GAC3CK,IAAiBN,EAAS,MAAOC,EAAM,WAAW,aAAa,KAAM,GAIrEM,IAAYP,EAAS,MAAM;AAC/B,YAAM,EAAE,aAAAQ,GAAa,GAAGC,EAAA,IAAed;AAEhC,aAAAc;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}