@adyen/bento-vue3 1.3.0 → 1.4.0

package/dist/input-field.js

@@ -1,33 +1,43 @@
-import { defineComponent as j, ref as K, toRef as X, computed as r, resolveComponent as O, openBlock as o, createBlock as s, normalizeClass as J, withCtx as u, createElementBlock as p, createVNode as L, renderSlot as f, createTextVNode as $, toDisplayString as V, createCommentVNode as n, createElementVNode as U, mergeProps as M, withKeys as Q } from "vue";
-import { B as Z, d as x, b as ee, a as ae } from "./chunks/index.222d29b0.js";
-import { u as oe } from "./chunks/use-has-slot.068222e6.js";
-import { u as te } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { g as S } from "./chunks/unique-id.a2a2b458.js";
-import { u as ne } from "./chunks/i18n.6c402773.js";
-import { B as ie, a as re } from "./chunks/dropdown.8b415aac.js";
-import { g as de } from "./chunks/get-slot-text.2db867f8.js";
-import { E as le } from "./chunks/error-message.ddfe8ea5.js";
-import { _ as se } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index42.css";
-var v = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.PAYMENT_METHOD = "payment-method", e.STATIC_VALUE = "static-value", e.DROPDOWN = "dropdown", e))(v || {}), l = /* @__PURE__ */ ((e) => (e.START = "start", e.END = "end", e))(l || {}), m = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.READONLY = "readonly", e.ERROR = "error", e.SMALL_PADDING_LEFT = "small-padding-left", e.SMALL_PADDING_RIGHT = "small-padding-right", e))(m || {}), N = /* @__PURE__ */ ((e) => (e.SEARCH = "search", e.TEXT = "text", e.NUMBER = "number", e))(N || {}), i = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.ESCAPE_PRESSED = "escape-pressed", e.UPDATE_DROPDOWN = "update:dropdown", e.DROPDOWN_INPUT = "dropdown-input", e.FOCUS = "focus", e.CHANGE = "change", e.BLUR = "blur", e.KEYDOWN = "keydown", e))(i || {});
-const k = {
+import { defineComponent as re, useAttrs as oe, useSlots as ne, ref as C, toRef as le, computed as o, toRefs as se, openBlock as d, createBlock as u, unref as t, normalizeClass as ue, withCtx as c, createElementBlock as f, createVNode as H, renderSlot as b, createTextVNode as I, toDisplayString as B, createCommentVNode as i, createElementVNode as q, mergeProps as G, withKeys as pe } from "vue";
+import { d as ce, B as y } from "./chunks/index.89b00b94.js";
+import { u as fe } from "./chunks/use-has-slot.9fac7123.js";
+import { u as be } from "./chunks/use-form-layout-loading.d03e5d48.js";
+import { g as w } from "./chunks/unique-id.a2a2b458.js";
+import { u as ye } from "./chunks/i18n.6c402773.js";
+import { B as z, a as j } from "./chunks/dropdown.b798a82e.js";
+import { g as ve } from "./chunks/get-slot-text.bead058f.js";
+import { u as me } from "./chunks/aria-label.ac9651a5.js";
+import { E as _e } from "./chunks/error-message.9acead25.js";
+import { _ as De } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import "./assets/index38.css";
+var v = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.PAYMENT_METHOD = "payment-method", e.STATIC_VALUE = "static-value", e.DROPDOWN = "dropdown", e))(v || {}), l = /* @__PURE__ */ ((e) => (e.START = "start", e.END = "end", e))(l || {}), m = /* @__PURE__ */ ((e) => (e.CONDENSED = "condensed", e.DISABLED = "disabled", e.READONLY = "readonly", e.ERROR = "error", e.SMALL_PADDING_LEFT = "small-padding-left", e.SMALL_PADDING_RIGHT = "small-padding-right", e))(m || {}), k = /* @__PURE__ */ ((e) => (e.SEARCH = "search", e.TEXT = "text", e.NUMBER = "number", e))(k || {}), Ae = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.ESCAPE_PRESSED = "escape-pressed", e.UPDATE_DROPDOWN = "update:dropdown", e.DROPDOWN_INPUT = "dropdown-input", e.FOCUS = "focus", e.CHANGE = "change", e.BLUR = "blur", e.KEYDOWN = "keydown", e))(Ae || {});
+const x = {
   "en-US": {
     optional: "optional",
-    required: "required"
+    required: "required",
+    ariaLabelFallback: "Input field"
   }
-}, ue = j({
-  i18n: { messages: k },
-  name: "bento-input-field",
-  components: { BentoDropdown: ie, BentoTypography: Z, ErrorMessage: le },
+}, we = ["for"], Se = ["aria-disabled"], ge = ["aria-hidden"], he = ["aria-hidden"], Ee = ["id"], Le = ["id", "aria-label", "aria-describedby", "aria-owns", "aria-invalid", "placeholder", "type", "value", "disabled", "readonly"], Te = ["aria-hidden"], Ne = ["id"], ke = ["id"], Re = {
+  i18n: { messages: x }
+}, Oe = /* @__PURE__ */ re({
+  ...Re,
+  __name: "input-field",
   props: {
     /**
      * Indicates whether the element is exposed to an accessibility API.
      */
     ariaHidden: { type: Boolean, default: !0 },
+    /**
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+     */
     /**
      * Text that labels an the input element
      */
     ariaLabel: { type: String, default: void 0 },
+    /**
+     * Reduces height of the input
+     */
+    condensed: { type: Boolean, default: !1 },
     /**
      * Disables the possibility of changing value in the input-field
      */
@@ -92,8 +102,8 @@ const k = {
      */
     type: {
       type: String,
-      default: N.TEXT,
-      validator: (e) => Object.values(N).includes(e)
+      default: k.TEXT,
+      validator: (e) => Object.values(k).includes(e)
     },
     /**
      * Text displayed as the value of the input-field
@@ -108,267 +118,229 @@ const k = {
       validator: (e) => Object.values(v).includes(e)
     }
   },
-  emits: [
-    i.INPUT,
-    i.ESCAPE_PRESSED,
-    i.DROPDOWN_INPUT,
-    i.UPDATE_DROPDOWN,
-    i.CHANGE,
-    i.FOCUS,
-    i.BLUR,
-    i.KEYDOWN
-  ],
-  setup(e, { slots: a, emit: E }) {
-    const { t: P } = ne({ messages: k }), h = oe(a), w = K(null), d = S("input"), y = S("input-dropdown"), b = S("input-static-value"), t = S("input-description"), B = S("input-error"), { isReadOnly: A } = te(X(e, "readonly")), g = r(
-      () => e.variant === v.STATIC_VALUE && !!a.staticValue
-    ), C = r(
-      () => g.value && e.staticValuePosition === l.START
-    ), H = r(
-      () => g.value && e.staticValuePosition === l.END
-    ), D = r(
-      () => e.variant === v.DROPDOWN && !!e.dropdown
-    ), c = r(
-      () => D.value && e.dropdownPosition === l.START
-    ), R = r(
-      () => D.value && e.dropdownPosition === l.END
-    ), I = r(
-      () => !e.disabled && !A.value && (!!e.errorMessage || e.error)
-    ), F = r(() => D.value === !0 && g.value === !0 ? `${b} ${y}` : D.value === !0 ? `${y}` : g.value === !0 ? `${b}` : null), Y = r(() => e.ariaLabel ? e.ariaLabel : h("default") ? de(a)("default") : "input field"), W = r(
-      () => `${h("description") ? t : ""} ${I.value && e.errorMessage ? B : ""}`
-    ), G = r(() => ({
-      [`b-input-field--${m.DISABLED}`]: e.disabled,
-      [`b-input-field--${m.READONLY}`]: A.value,
-      [`b-input-field--${m.ERROR}`]: I.value,
-      [`b-input-field--${m.SMALL_PADDING_LEFT}`]: c.value,
-      [`b-input-field--${m.SMALL_PADDING_RIGHT}`]: R.value
-    })), _ = (T) => {
-      !e.disabled && !A.value && E(i.INPUT, T.target.value);
-    }, z = (T) => {
-      E(i.DROPDOWN_INPUT, T), E(i.UPDATE_DROPDOWN, { ...e == null ? void 0 : e.dropdown, value: T });
-    }, q = () => {
-      w.value.focus();
+  emits: ["update:dropdown", "blur", "change", "dropdown-input", "escape-pressed", "focus", "keydown", "input"],
+  setup(e, { expose: W, emit: s }) {
+    const a = e, Y = oe(), L = ne(), { t: T } = ye({ messages: x }), p = fe(L), R = C(null), O = w("input"), D = w("input-dropdown"), S = w("input-static-value"), $ = w("input-description"), M = w("input-error"), { isReadOnly: _ } = be(le(a, "readonly")), g = o(
+      () => a.variant === v.STATIC_VALUE && !!L.staticValue
+    ), K = o(() => a.variant === v.DEFAULT), F = o(() => a.variant === v.PAYMENT_METHOD), X = o(
+      () => g.value && a.staticValuePosition === l.START
+    ), J = o(
+      () => g.value && a.staticValuePosition === l.END
+    ), h = o(() => a.variant === v.DROPDOWN && !!a.dropdown), P = o(
+      () => h.value && a.dropdownPosition === l.START
+    ), V = o(
+      () => h.value && a.dropdownPosition === l.END
+    ), E = o(
+      () => !a.disabled && !_.value && (!!a.errorMessage || a.error)
+    ), Q = o(() => h.value === !0 && g.value === !0 ? `${S} ${D}` : h.value === !0 ? `${D}` : g.value === !0 ? `${S}` : null), Z = C(Y["aria-label"]), { ariaLabel: ee } = se(a), te = me({
+      ariaLabel: Z.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: ee,
+      defaultFallback: p("default") ? ve(L)("default") : T("ariaLabelFallback")
+    }), ae = o(
+      () => `${p("description") ? $ : ""} ${E.value && a.errorMessage ? M : ""}`
+    ), de = o(() => ({
+      [`b-input-field--${m.CONDENSED}`]: a.condensed,
+      [`b-input-field--${m.DISABLED}`]: a.disabled,
+      [`b-input-field--${m.READONLY}`]: _.value,
+      [`b-input-field--${m.ERROR}`]: E.value,
+      [`b-input-field--${m.SMALL_PADDING_LEFT}`]: P.value,
+      [`b-input-field--${m.SMALL_PADDING_RIGHT}`]: V.value
+    })), ie = (r) => {
+      !a.disabled && !_.value && s("input", r.target.value);
+    }, U = (r) => {
+      s("dropdown-input", r), s("update:dropdown", { ...a == null ? void 0 : a.dropdown, value: r });
+    }, N = () => {
+      R.value.focus();
     };
-    return e.error && x(
+    return W({
+      focusInput: N
+    }), a.error && ce(
       'BentoInputField "error" property',
       `Use the BentoInputField "errorMessage" property instead to indicate that there is a modifier error.
-                    Having the field as "undefined" will hide/remove the error.
-                    <bento-dropdown errorMessage="Error message text" />`,
+            Having the field as "undefined" will hide/remove the error.
+            <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
-    ), {
-      // Enums
-      BentoTypographyVariant: ee,
-      BentoTypographyElement: ae,
-      BentoInputFieldVariant: v,
-      BentoDropdownSize: re,
-      BentoInputFieldEvent: i,
-      // Functions
-      t: P,
-      onDropdownInput: z,
-      onInput: _,
-      focusInput: q,
-      hasSlot: h,
-      // Values
-      inputFieldConditionalClasses: G,
-      inputFieldElement: w,
-      inputFieldId: d,
-      dropdownId: y,
-      staticValueId: b,
-      descriptionId: t,
-      errorId: B,
-      isReadOnly: A,
-      shouldDisplayStaticValueAtStart: C,
-      shouldDisplayStaticValueAtEnd: H,
-      shouldShowDropdown: D,
-      shouldDisplayDropdownAtStart: c,
-      shouldDisplayDropdownAtEnd: R,
-      shouldShowError: I,
-      computedAriaOwns: F,
-      computedAriaLabel: Y,
-      computedAriaDescribedBy: W
-    };
-  }
-});
-const pe = ["for"], fe = ["aria-disabled"], ye = ["aria-hidden"], ve = ["aria-hidden"], me = ["id"], be = ["id", "aria-label", "aria-describedby", "aria-owns", "aria-invalid", "placeholder", "type", "value", "disabled", "readonly"], De = ["aria-hidden"], Se = ["id"], Ee = ["id"];
-function he(e, a, E, P, h, w) {
-  const d = O("bento-typography"), y = O("bento-dropdown"), b = O("error-message");
-  return o(), s(d, {
-    class: J(["b-input-field", e.inputFieldConditionalClasses]),
-    "data-testid": "input-text-container",
-    el: e.BentoTypographyElement.DIV,
-    variant: e.BentoTypographyVariant.BODY
-  }, {
-    default: u(() => [
-      e.hasSlot("default") ? (o(), p("label", {
-        key: 0,
-        for: e.inputFieldId,
-        class: "b-input-field__label",
-        "data-testid": "input-field-label",
-        onClick: a[0] || (a[0] = (...t) => e.focusInput && e.focusInput(...t))
-      }, [
-        L(d, {
-          el: e.BentoTypographyElement.SPAN,
-          variant: e.BentoTypographyVariant.BODY,
-          stronger: ""
-        }, {
-          default: u(() => [
-            f(e.$slots, "default", {}, void 0, !0)
-          ]),
-          _: 3
-        }, 8, ["el", "variant"]),
-        e.optional ? (o(), s(d, {
-          key: 0,
-          class: "b-input-field__label-requirement",
-          el: e.BentoTypographyElement.SPAN
-        }, {
-          default: u(() => [
-            $(" (" + V(e.t("optional")) + ") ", 1)
-          ]),
-          _: 1
-        }, 8, ["el"])) : n("", !0),
-        e.required ? (o(), s(d, {
-          key: 1,
-          class: "b-input-field__label-requirement",
-          el: e.BentoTypographyElement.SPAN
-        }, {
-          default: u(() => [
-            $(" (" + V(e.t("required")) + ") ", 1)
-          ]),
-          _: 1
-        }, 8, ["el"])) : n("", !0)
-      ], 8, pe)) : n("", !0),
-      U("div", {
-        class: "b-input-field__input-box",
-        "aria-disabled": e.disabled
-      }, [
-        e.variant === e.BentoInputFieldVariant.DEFAULT && e.hasSlot("defaultIconBefore") ? (o(), p("span", {
+    ), (r, n) => (d(), u(t(y), {
+      class: ue(["b-input-field", t(de)]),
+      "data-testid": "input-text-container",
+      el: "div",
+      variant: "body"
+    }, {
+      default: c(() => [
+        t(p)("default") ? (d(), f("label", {
           key: 0,
-          "aria-hidden": e.ariaHidden ? "true" : void 0,
-          class: "b-input-field__default-icon-before"
-        }, [
-          f(e.$slots, "defaultIconBefore", {}, void 0, !0)
-        ], 8, ye)) : n("", !0),
-        e.variant === e.BentoInputFieldVariant.PAYMENT_METHOD && e.hasSlot("paymentMethod") ? (o(), p("span", {
-          key: 1,
-          "aria-hidden": e.ariaHidden ? "true" : void 0,
-          class: "b-input-field__payment-method"
+          for: t(O),
+          class: "b-input-field__label",
+          "data-testid": "input-field-label",
+          onClick: N
         }, [
-          f(e.$slots, "paymentMethod", {}, void 0, !0)
-        ], 8, ve)) : n("", !0),
-        e.shouldDisplayDropdownAtStart ? (o(), p("div", {
-          key: 2,
-          id: e.dropdownId,
-          class: "b-input-field__dropdown b-input-field__dropdown--start"
-        }, [
-          e.dropdown ? (o(), s(y, M({ key: 0 }, e.dropdown, {
-            size: e.BentoDropdownSize.SMALL,
-            disabled: e.disabled,
-            readonly: e.isReadOnly,
-            onInput: e.onDropdownInput
-          }), null, 16, ["size", "disabled", "readonly", "onInput"])) : n("", !0)
-        ], 8, me)) : n("", !0),
-        e.shouldDisplayStaticValueAtStart ? (o(), s(d, {
-          key: 3,
-          id: e.staticValueId,
-          class: "b-input-field__static-value b-input-field__static-value--start",
-          el: e.BentoTypographyElement.SPAN,
-          variant: e.BentoTypographyVariant.BODY
-        }, {
-          default: u(() => [
-            f(e.$slots, "staticValue", {}, void 0, !0)
-          ]),
-          _: 3
-        }, 8, ["id", "el", "variant"])) : n("", !0),
-        U("input", {
-          id: e.inputFieldId,
-          ref: "inputFieldElement",
-          class: "b-input-field__input",
-          "aria-label": e.computedAriaLabel,
-          "aria-describedby": e.computedAriaDescribedBy,
-          "aria-owns": e.computedAriaOwns,
-          "aria-invalid": e.shouldShowError,
-          placeholder: e.placeholder,
-          type: e.type,
-          value: e.value,
-          disabled: e.disabled,
-          readonly: e.isReadOnly,
-          onInput: a[1] || (a[1] = (...t) => e.onInput && e.onInput(...t)),
-          onChange: a[2] || (a[2] = (t) => e.$emit(e.BentoInputFieldEvent.CHANGE)),
-          onFocus: a[3] || (a[3] = (t) => e.$emit(e.BentoInputFieldEvent.FOCUS)),
-          onBlur: a[4] || (a[4] = (t) => e.$emit(e.BentoInputFieldEvent.BLUR)),
-          onKeydown: [
-            a[5] || (a[5] = (t) => e.$emit(e.BentoInputFieldEvent.KEYDOWN, t)),
-            a[6] || (a[6] = Q((t) => e.$emit(e.BentoInputFieldEvent.ESCAPE_PRESSED), ["esc"]))
-          ]
-        }, null, 40, be),
-        e.hasSlot("iconAfter") ? (o(), p("span", {
-          key: 4,
-          "aria-hidden": e.ariaHidden ? "true" : void 0,
-          class: "b-input-field__icon-after",
-          "data-testid": "input-text__icon-after"
-        }, [
-          f(e.$slots, "iconAfter", {}, void 0, !0)
-        ], 8, De)) : n("", !0),
-        e.shouldDisplayStaticValueAtEnd ? (o(), s(d, {
-          key: 5,
-          id: e.staticValueId,
-          class: "b-input-field__static-value b-input-field__static-value--end",
-          el: e.BentoTypographyElement.SPAN,
-          variant: e.BentoTypographyVariant.BODY
-        }, {
-          default: u(() => [
-            f(e.$slots, "staticValue", {}, void 0, !0)
-          ]),
-          _: 3
-        }, 8, ["id", "el", "variant"])) : n("", !0),
-        e.shouldDisplayDropdownAtEnd ? (o(), p("div", {
-          key: 6,
-          id: e.dropdownId,
-          class: "b-input-field__dropdown b-input-field__dropdown--end"
+          H(t(y), {
+            el: "span",
+            variant: "body",
+            stronger: ""
+          }, {
+            default: c(() => [
+              b(r.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+          }),
+          e.optional ? (d(), u(t(y), {
+            key: 0,
+            class: "b-input-field__label-requirement",
+            el: "span"
+          }, {
+            default: c(() => [
+              I(" (" + B(t(T)("optional")) + ") ", 1)
+            ]),
+            _: 1
+          })) : i("", !0),
+          e.required ? (d(), u(t(y), {
+            key: 1,
+            class: "b-input-field__label-requirement",
+            el: "span"
+          }, {
+            default: c(() => [
+              I(" (" + B(t(T)("required")) + ") ", 1)
+            ]),
+            _: 1
+          })) : i("", !0)
+        ], 8, we)) : i("", !0),
+        q("div", {
+          class: "b-input-field__input-box",
+          "aria-disabled": e.disabled
         }, [
-          e.dropdown ? (o(), s(y, M({
+          t(K) && t(p)("defaultIconBefore") ? (d(), f("span", {
             key: 0,
-            id: e.dropdownId
-          }, e.dropdown, {
-            size: e.BentoDropdownSize.SMALL,
+            "aria-hidden": e.ariaHidden ? "true" : void 0,
+            class: "b-input-field__default-icon-before"
+          }, [
+            b(r.$slots, "defaultIconBefore", {}, void 0, !0)
+          ], 8, ge)) : i("", !0),
+          t(F) && t(p)("paymentMethod") ? (d(), f("span", {
+            key: 1,
+            "aria-hidden": e.ariaHidden ? "true" : void 0,
+            class: "b-input-field__payment-method"
+          }, [
+            b(r.$slots, "paymentMethod", {}, void 0, !0)
+          ], 8, he)) : i("", !0),
+          t(P) ? (d(), f("div", {
+            key: 2,
+            id: t(D),
+            class: "b-input-field__dropdown b-input-field__dropdown--start"
+          }, [
+            e.dropdown ? (d(), u(t(z), G({ key: 0 }, e.dropdown, {
+              size: t(j).SMALL,
+              disabled: e.disabled,
+              readonly: t(_),
+              onInput: U
+            }), null, 16, ["size", "disabled", "readonly"])) : i("", !0)
+          ], 8, Ee)) : i("", !0),
+          t(X) ? (d(), u(t(y), {
+            key: 3,
+            id: t(S),
+            class: "b-input-field__static-value b-input-field__static-value--start",
+            el: "span",
+            variant: "body"
+          }, {
+            default: c(() => [
+              b(r.$slots, "staticValue", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["id"])) : i("", !0),
+          q("input", {
+            id: t(O),
+            ref_key: "inputFieldElement",
+            ref: R,
+            class: "b-input-field__input",
+            "aria-label": t(te),
+            "aria-describedby": t(ae),
+            "aria-owns": t(Q),
+            "aria-invalid": t(E),
+            placeholder: e.placeholder,
+            type: e.type,
+            value: e.value,
             disabled: e.disabled,
-            readonly: e.isReadOnly,
-            onInput: e.onDropdownInput
-          }), null, 16, ["id", "size", "disabled", "readonly", "onInput"])) : n("", !0)
-        ], 8, Se)) : n("", !0)
-      ], 8, fe),
-      e.shouldShowError && e.errorMessage ? (o(), s(b, {
-        key: 1,
-        id: e.errorId,
-        "error-message": e.errorMessage,
-        class: "b-input-field__error-message"
-      }, null, 8, ["id", "error-message"])) : n("", !0),
-      e.hasSlot("description") ? (o(), p("span", {
-        key: 2,
-        id: e.descriptionId,
-        class: "b-input-field__description",
-        onClick: a[7] || (a[7] = (...t) => e.focusInput && e.focusInput(...t))
-      }, [
-        L(d, {
-          el: e.BentoTypographyElement.SPAN,
-          variant: e.BentoTypographyVariant.BODY
-        }, {
-          default: u(() => [
-            f(e.$slots, "description", { id: "description" }, void 0, !0)
-          ]),
-          _: 3
-        }, 8, ["el", "variant"])
-      ], 8, Ee)) : n("", !0)
-    ]),
-    _: 3
-  }, 8, ["class", "el", "variant"]);
-}
-const Re = /* @__PURE__ */ se(ue, [["render", he], ["__scopeId", "data-v-601cd93a"]]);
+            readonly: t(_),
+            onInput: ie,
+            onChange: n[0] || (n[0] = (A) => s("change")),
+            onFocus: n[1] || (n[1] = (A) => s("focus")),
+            onBlur: n[2] || (n[2] = (A) => s("blur")),
+            onKeydown: [
+              n[3] || (n[3] = (A) => s("keydown", A)),
+              n[4] || (n[4] = pe((A) => s("escape-pressed"), ["esc"]))
+            ]
+          }, null, 40, Le),
+          t(p)("iconAfter") ? (d(), f("span", {
+            key: 4,
+            "aria-hidden": e.ariaHidden ? "true" : void 0,
+            class: "b-input-field__icon-after",
+            "data-testid": "input-text__icon-after"
+          }, [
+            b(r.$slots, "iconAfter", {}, void 0, !0)
+          ], 8, Te)) : i("", !0),
+          t(J) ? (d(), u(t(y), {
+            key: 5,
+            id: t(S),
+            class: "b-input-field__static-value b-input-field__static-value--end",
+            el: "span",
+            variant: "body"
+          }, {
+            default: c(() => [
+              b(r.$slots, "staticValue", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["id"])) : i("", !0),
+          t(V) ? (d(), f("div", {
+            key: 6,
+            id: t(D),
+            class: "b-input-field__dropdown b-input-field__dropdown--end"
+          }, [
+            e.dropdown ? (d(), u(t(z), G({
+              key: 0,
+              id: t(D)
+            }, e.dropdown, {
+              size: t(j).SMALL,
+              disabled: e.disabled,
+              readonly: t(_),
+              onInput: U
+            }), null, 16, ["id", "size", "disabled", "readonly"])) : i("", !0)
+          ], 8, Ne)) : i("", !0)
+        ], 8, Se),
+        t(E) && e.errorMessage ? (d(), u(t(_e), {
+          key: 1,
+          id: t(M),
+          "error-message": e.errorMessage,
+          class: "b-input-field__error-message"
+        }, null, 8, ["id", "error-message"])) : i("", !0),
+        t(p)("description") ? (d(), f("span", {
+          key: 2,
+          id: t($),
+          class: "b-input-field__description",
+          onClick: N
+        }, [
+          H(t(y), {
+            el: "span",
+            variant: "body"
+          }, {
+            default: c(() => [
+              b(r.$slots, "description", { id: "description" }, void 0, !0)
+            ]),
+            _: 3
+          })
+        ], 8, ke)) : i("", !0)
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+});
+const ze = /* @__PURE__ */ De(Oe, [["__scopeId", "data-v-d88e1850"]]);
 export {
-  Re as BentoInputField,
+  ze as BentoInputField,
   l as BentoInputFieldElementPosition,
-  i as BentoInputFieldEvent,
+  Ae as BentoInputFieldEvent,
   m as BentoInputFieldStateClass,
-  N as BentoInputFieldType,
+  k as BentoInputFieldType,
   v as BentoInputFieldVariant
 };
 //# sourceMappingURL=input-field.js.map