@adyen/bento-vue2 1.2.0 → 1.3.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/plugins/toastController.ts","../src/install.ts"],"sourcesContent":["import { reactive } from 'vue';\nimport { generateUid } from '@/utils/ts/unique-id';\nimport { BentoToastItem } from '@/components/toast/components/toast-item';\n\n/* eslint-disable no-underscore-dangle */\nexport default class ToastController {\n    get state(): { queue: Array<BentoToastItem> } {\n        return this._state;\n    }\n\n    private _state: { queue: Array<BentoToastItem> };\n\n    constructor() {\n        this._state = reactive({ queue: [] });\n    }\n\n    private dismissToast(toast: BentoToastItem): void {\n        this._state.queue.splice(this._state.queue.indexOf(toast), 1);\n    }\n\n    public addToast(params: BentoToastItem) {\n        const id = generateUid('toast');\n        const toast = {\n            ...params,\n            id,\n            dismiss: () => this.dismissToast(toast),\n        };\n\n        // new messages always appear in front\n        this._state.queue.push(toast);\n\n        // return API to manipulate toast\n        return {\n            dismiss: () => this.dismissToast(toast),\n        };\n    }\n}\n/* eslint-enable no-underscore-dangle */\n","import type { PluginObject } from 'vue';\nimport { isVue2 } from 'vue-demi';\nimport ToastController from './plugins/toastController';\n\nexport enum BentoTheme {\n    LEGACY = 'b-legacy-theme',\n    STYLEGUIDE = 'b-styleguide-theme',\n    BENTO = '',\n}\n\ninterface BentoVuePlugin {\n    theme: BentoTheme;\n    withToast: boolean;\n}\n\nconst setTheme = (theme: BentoTheme) => {\n    document.body.classList.add(theme);\n};\n\nconst plugin: PluginObject<BentoVuePlugin> = {\n    install: async (Vue, options: { theme: BentoTheme; withToast: boolean; withUtilityClasses: boolean }) => {\n        if (options?.withToast) {\n            if (isVue2) {\n                // Adds a new property to the Vue instance\n                // eslint-disable-next-line no-param-reassign\n                (Vue as any).prototype.$bentoToastController = new ToastController();\n            } else {\n                // eslint-disable-next-line no-param-reassign\n                (Vue as any).config.globalProperties.$bentoToastController = new ToastController();\n            }\n        }\n        // Make sure to put all awaited CSS imports below this point and not above!\n        if (options?.theme === BentoTheme.LEGACY) {\n            setTheme(BentoTheme.LEGACY);\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables-legacy.css');\n        } else if (options?.theme === BentoTheme.STYLEGUIDE) {\n            setTheme(BentoTheme.STYLEGUIDE);\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css');\n        } else {\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables.css');\n        }\n\n        if (options?.withUtilityClasses) {\n            await import('@adyen/bento-design-tokens/dist/css/bento/utility.css');\n        }\n    },\n};\n\nexport default plugin;\n"],"names":["ToastController","__publicField","reactive","toast","params","id","generateUid","BentoTheme","setTheme","theme","plugin","Vue","options","BentoVue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAqBA,EAAgB;AAAA,EAOjC,cAAc;AAFN,IAAAC,EAAA;AAGJ,SAAK,SAASC,EAAS,EAAE,OAAO,CAAA,EAAI,CAAA;AAAA,EACxC;AAAA,EARA,IAAI,QAA0C;AAC1C,WAAO,KAAK;AAAA,EAChB;AAAA,EAQQ,aAAaC,GAA6B;AACzC,SAAA,OAAO,MAAM,OAAO,KAAK,OAAO,MAAM,QAAQA,CAAK,GAAG,CAAC;AAAA,EAChE;AAAA,EAEO,SAASC,GAAwB;AAC9B,UAAAC,IAAKC,EAAY,OAAO,GACxBH,IAAQ;AAAA,MACV,GAAGC;AAAA,MACH,IAAAC;AAAA,MACA,SAAS,MAAM,KAAK,aAAaF,CAAK;AAAA,IAAA;AAIrC,gBAAA,OAAO,MAAM,KAAKA,CAAK,GAGrB;AAAA,MACH,SAAS,MAAM,KAAK,aAAaA,CAAK;AAAA,IAAA;AAAA,EAE9C;AACJ;AChCY,IAAAI,sBAAAA,OACRA,EAAA,SAAS,kBACTA,EAAA,aAAa,sBACbA,EAAA,QAAQ,IAHAA,IAAAA,KAAA,CAAA,CAAA;AAWZ,MAAMC,IAAW,CAACC,MAAsB;AAC3B,WAAA,KAAK,UAAU,IAAIA,CAAK;AACrC,GAEMC,IAAuC;AAAA,EACzC,SAAS,OAAOC,GAAKC,MAAoF;AACrG,IAAIA,KAAA,QAAAA,EAAS,cAIJD,EAAY,UAAU,wBAAwB,IAAIX,EAAgB,KAOvEY,KAAA,gBAAAA,EAAS,WAAU,oBACnBJ;AAAA,MAAS;AAAA;AAAA,IAAiB,GAC1B,MAAM,OAAO,qEAAgE,MACtEI,KAAA,gBAAAA,EAAS,WAAU,wBAC1BJ;AAAA,MAAS;AAAA;AAAA,IAAqB,GAC9B,MAAM,OAAO,yEAAoE,KAEjF,MAAM,OAAO,8DAAyD,GAGtEI,KAAA,QAAAA,EAAS,sBACT,MAAM,OAAO,4DAAuD;AAAA,EAE5E;AACJ,GAEAC,IAAeH;"}
+{"version":3,"file":"index.js","sources":["../src/plugins/toastController.ts","../src/install.ts"],"sourcesContent":["import { reactive } from 'vue';\nimport { generateUid } from '@/utils/ts/unique-id';\nimport { BentoToastItem } from '@/components/toast/components/toast-item';\n\n/* eslint-disable no-underscore-dangle */\nexport default class ToastController {\n    get state(): { queue: Array<BentoToastItem> } {\n        return this._state;\n    }\n\n    private _state: { queue: Array<BentoToastItem> };\n\n    constructor() {\n        this._state = reactive({ queue: [] });\n    }\n\n    private dismissToast(toast: BentoToastItem): void {\n        this._state.queue.splice(this._state.queue.indexOf(toast), 1);\n    }\n\n    public addToast(params: BentoToastItem) {\n        const id = generateUid('toast');\n        const toast = {\n            ...params,\n            id,\n            dismiss: () => this.dismissToast(toast),\n        };\n\n        // new messages always appear in front\n        this._state.queue.push(toast);\n\n        // return API to manipulate toast\n        return {\n            dismiss: () => this.dismissToast(toast),\n        };\n    }\n}\n/* eslint-enable no-underscore-dangle */\n","import type { PluginObject } from 'vue';\nimport { isVue2 } from 'vue-demi';\nimport ToastController from './plugins/toastController';\n\nexport enum BentoTheme {\n    LEGACY = 'b-legacy-theme',\n    STYLEGUIDE = 'b-styleguide-theme',\n    BENTO = '',\n}\n\ninterface BentoVuePlugin {\n    theme: BentoTheme;\n    withToast: boolean;\n}\n\nconst setTheme = (theme: BentoTheme) => {\n    document.body.classList.add(theme);\n};\n\nconst plugin: PluginObject<BentoVuePlugin> = {\n    install: async (Vue, options: { theme: BentoTheme; withToast: boolean; withUtilityClasses: boolean }) => {\n        if (options?.withToast) {\n            if (isVue2) {\n                // Adds a new property to the Vue instance\n                // eslint-disable-next-line no-param-reassign\n                (Vue as any).prototype.$bentoToastController = new ToastController();\n            } else {\n                // eslint-disable-next-line no-param-reassign\n                (Vue as any).config.globalProperties.$bentoToastController = new ToastController();\n            }\n        }\n        // Make sure to put all awaited CSS imports below this point and not above!\n        if (options?.theme === BentoTheme.LEGACY) {\n            setTheme(BentoTheme.LEGACY);\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables-legacy.css');\n        } else if (options?.theme === BentoTheme.STYLEGUIDE) {\n            setTheme(BentoTheme.STYLEGUIDE);\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css');\n        } else {\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables.css');\n        }\n\n        if (options?.withUtilityClasses) {\n            await import('@adyen/bento-design-tokens/dist/css/bento/utility.css');\n        }\n    },\n};\n\nexport default plugin;\n"],"names":["ToastController","__publicField","reactive","toast","params","id","generateUid","BentoTheme","setTheme","theme","plugin","Vue","options","BentoVue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAqBA,EAAgB;AAAA,EAOjC,cAAc;AAFN,IAAAC,EAAA;AAGJ,SAAK,SAASC,EAAS,EAAE,OAAO,CAAA,EAAI,CAAA;AAAA,EACxC;AAAA,EARA,IAAI,QAA0C;AAC1C,WAAO,KAAK;AAAA,EAChB;AAAA,EAQQ,aAAaC,GAA6B;AACzC,SAAA,OAAO,MAAM,OAAO,KAAK,OAAO,MAAM,QAAQA,CAAK,GAAG,CAAC;AAAA,EAChE;AAAA,EAEO,SAASC,GAAwB;AAC9B,UAAAC,IAAKC,EAAY,OAAO,GACxBH,IAAQ;AAAA,MACV,GAAGC;AAAA,MACH,IAAAC;AAAA,MACA,SAAS,MAAM,KAAK,aAAaF,CAAK;AAAA,IAAA;AAIrC,gBAAA,OAAO,MAAM,KAAKA,CAAK,GAGrB;AAAA,MACH,SAAS,MAAM,KAAK,aAAaA,CAAK;AAAA,IAAA;AAAA,EAE9C;AACJ;AChCY,IAAAI,sBAAAA,OACRA,EAAA,SAAS,kBACTA,EAAA,aAAa,sBACbA,EAAA,QAAQ,IAHAA,IAAAA,KAAA,CAAA,CAAA;AAWZ,MAAMC,IAAW,CAACC,MAAsB;AAC3B,WAAA,KAAK,UAAU,IAAIA,CAAK;AACrC,GAEMC,IAAuC;AAAA,EACzC,SAAS,OAAOC,GAAKC,MAAoF;AACrG,IAAIA,KAAA,QAAAA,EAAS,cAIJD,EAAY,UAAU,wBAAwB,IAAIX,EAAgB,KAOvEY,KAAA,gBAAAA,EAAS,WAAU,oBACnBJ;AAAA,MAAS;AAAA;AAAA,IAAiB,GAC1B,MAAM,OAAO,qEAAgE,MACtEI,KAAA,gBAAAA,EAAS,WAAU,wBAC1BJ;AAAA,MAAS;AAAA;AAAA,IAAqB,GAC9B,MAAM,OAAO,yEAAoE,KAEjF,MAAM,OAAO,8DAAyD,GAGtEI,KAAA,QAAAA,EAAS,sBACT,MAAM,OAAO,4DAAuD;AAAA,EAE5E;AACJ,GAEAC,IAAeH;"}

package/dist/info-icon.js

@@ -1,8 +1,8 @@
 import { defineComponent as r } from "vue";
 import { PopperContainerPosition as i } from "./popper-container.js";
 import { n as s } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { b as a } from "./chunks/tooltip.9af34fba.js";
-import "./assets/index15.css";
+import { b as a } from "./chunks/tooltip.2aff4fa6.js";
+import "./assets/index14.css";
 let n = 0;
 const l = {
   beforeCreate() {

package/dist/input-field.js

@@ -1,23 +1,24 @@
-import { defineComponent as L, ref as C, computed as n } from "vue";
-import { B as U, d as V, b as M, a as $ } from "./chunks/index.175f9e2d.js";
-import { u as H } from "./chunks/use-has-slot.068222e6.js";
+import { defineComponent as C, ref as U, toRef as V, computed as n } from "vue";
+import { B as M, d as $, b as H, a as F } from "./chunks/index.56858f4e.js";
+import { u as Y } from "./chunks/use-has-slot.068222e6.js";
+import { u as x } from "./chunks/use-form-layout-loading.d03e5d48.js";
 import { g as u } from "./chunks/unique-id.a2a2b458.js";
-import { u as Y } from "./chunks/i18n.155748d6.js";
-import { B as x, a as W } from "./chunks/dropdown.368486b1.js";
-import { g as F } from "./chunks/get-slot-text.e5c766d0.js";
-import { E as G } from "./chunks/error-message.a581a172.js";
-import { n as k } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index39.css";
-var d = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.PAYMENT_METHOD = "payment-method", e.STATIC_VALUE = "static-value", e.DROPDOWN = "dropdown", e))(d || {}), i = /* @__PURE__ */ ((e) => (e.START = "start", e.END = "end", e))(i || {}), l = /* @__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))(l || {}), D = /* @__PURE__ */ ((e) => (e.SEARCH = "search", e.TEXT = "text", e.NUMBER = "number", e))(D || {}), r = /* @__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))(r || {});
-const q = {
+import { u as W } from "./chunks/i18n.155748d6.js";
+import { B as G, a as k } from "./chunks/dropdown.c05678d0.js";
+import { g as q } from "./chunks/get-slot-text.e5c766d0.js";
+import { E as z } from "./chunks/error-message.0433b539.js";
+import { n as j } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index40.css";
+var d = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.PAYMENT_METHOD = "payment-method", e.STATIC_VALUE = "static-value", e.DROPDOWN = "dropdown", e))(d || {}), i = /* @__PURE__ */ ((e) => (e.START = "start", e.END = "end", e))(i || {}), l = /* @__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))(l || {}), m = /* @__PURE__ */ ((e) => (e.SEARCH = "search", e.TEXT = "text", e.NUMBER = "number", e))(m || {}), r = /* @__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))(r || {});
+const K = {
   "en-US": {
     optional: "optional",
     required: "required"
   }
-}, z = L({
-  i18n: { messages: q },
+}, X = C({
+  i18n: { messages: K },
   name: "bento-input-field",
-  components: { BentoDropdown: x, BentoTypography: U, ErrorMessage: G },
+  components: { BentoDropdown: G, BentoTypography: M, ErrorMessage: z },
   props: {
     /**
      * Indicates whether the element is exposed to an accessibility API.
@@ -91,8 +92,8 @@ const q = {
      */
     type: {
       type: String,
-      default: D.TEXT,
-      validator: (e) => Object.values(D).includes(e)
+      default: m.TEXT,
+      validator: (e) => Object.values(m).includes(e)
     },
     /**
      * Text displayed as the value of the input-field
@@ -118,36 +119,36 @@ const q = {
     r.KEYDOWN
   ],
   setup(e, { slots: t, emit: a }) {
-    const { t: o } = Y(), _ = H(t), h = C(null), A = u("input"), f = u("input-dropdown"), y = u("input-static-value"), m = u("input-description"), v = u("input-error"), p = n(
+    const { t: o } = W(), _ = Y(t), v = U(null), g = u("input"), y = u("input-dropdown"), b = u("input-static-value"), h = u("input-description"), S = u("input-error"), { isReadOnly: p } = x(V(e, "readonly")), c = n(
       () => e.variant === d.STATIC_VALUE && !!t.staticValue
-    ), g = n(
-      () => p.value && e.staticValuePosition === i.START
     ), T = n(
-      () => p.value && e.staticValuePosition === i.END
+      () => c.value && e.staticValuePosition === i.START
+    ), w = n(
+      () => c.value && e.staticValuePosition === i.END
     ), s = n(
       () => e.variant === d.DROPDOWN && !!e.dropdown
-    ), S = n(
-      () => s.value && e.dropdownPosition === i.START
     ), E = n(
+      () => s.value && e.dropdownPosition === i.START
+    ), A = n(
       () => s.value && e.dropdownPosition === i.END
-    ), b = n(
-      () => !e.disabled && !e.readonly && (!!e.errorMessage || e.error)
-    ), w = n(() => s.value === !0 && p.value === !0 ? `${y} ${f}` : s.value === !0 ? `${f}` : p.value === !0 ? `${y}` : null), P = n(() => e.ariaLabel ? e.ariaLabel : _("default") ? F(t)("default") : "input field"), O = n(
-      () => `${_("description") ? m : ""} ${b.value && e.errorMessage ? v : ""}`
-    ), N = n(() => ({
+    ), D = n(
+      () => !e.disabled && !p.value && (!!e.errorMessage || e.error)
+    ), O = n(() => s.value === !0 && c.value === !0 ? `${b} ${y}` : s.value === !0 ? `${y}` : c.value === !0 ? `${b}` : null), P = n(() => e.ariaLabel ? e.ariaLabel : _("default") ? q(t)("default") : "input field"), N = n(
+      () => `${_("description") ? h : ""} ${D.value && e.errorMessage ? S : ""}`
+    ), R = n(() => ({
       [`b-input-field--${l.DISABLED}`]: e.disabled,
-      [`b-input-field--${l.READONLY}`]: e.readonly,
-      [`b-input-field--${l.ERROR}`]: b.value,
-      [`b-input-field--${l.SMALL_PADDING_LEFT}`]: S.value,
-      [`b-input-field--${l.SMALL_PADDING_RIGHT}`]: E.value
-    })), B = (c) => {
-      e.disabled || a(r.INPUT, c.target.value);
-    }, I = (c) => {
-      a(r.DROPDOWN_INPUT, c), a(r.UPDATE_DROPDOWN, { ...e == null ? void 0 : e.dropdown, value: c });
-    }, R = () => {
-      h.value.focus();
+      [`b-input-field--${l.READONLY}`]: p.value,
+      [`b-input-field--${l.ERROR}`]: D.value,
+      [`b-input-field--${l.SMALL_PADDING_LEFT}`]: E.value,
+      [`b-input-field--${l.SMALL_PADDING_RIGHT}`]: A.value
+    })), B = (f) => {
+      !e.disabled && !p.value && a(r.INPUT, f.target.value);
+    }, I = (f) => {
+      a(r.DROPDOWN_INPUT, f), a(r.UPDATE_DROPDOWN, { ...e == null ? void 0 : e.dropdown, value: f });
+    }, L = () => {
+      v.value.focus();
     };
-    return e.error && V(
+    return e.error && $(
       '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.
@@ -155,40 +156,41 @@ const q = {
       "2.0.0"
     ), {
       // Enums
-      BentoTypographyVariant: M,
-      BentoTypographyElement: $,
+      BentoTypographyVariant: H,
+      BentoTypographyElement: F,
       BentoInputFieldVariant: d,
-      BentoDropdownSize: W,
+      BentoDropdownSize: k,
       BentoInputFieldEvent: r,
       // Functions
       t: o,
       onDropdownInput: I,
       onInput: B,
-      focusInput: R,
+      focusInput: L,
       hasSlot: _,
       // Values
-      inputFieldConditionalClasses: N,
-      inputFieldElement: h,
-      inputFieldId: A,
-      dropdownId: f,
-      staticValueId: y,
-      descriptionId: m,
-      errorId: v,
-      shouldDisplayStaticValueAtStart: g,
-      shouldDisplayStaticValueAtEnd: T,
+      inputFieldConditionalClasses: R,
+      inputFieldElement: v,
+      inputFieldId: g,
+      dropdownId: y,
+      staticValueId: b,
+      descriptionId: h,
+      errorId: S,
+      isReadOnly: p,
+      shouldDisplayStaticValueAtStart: T,
+      shouldDisplayStaticValueAtEnd: w,
       shouldShowDropdown: s,
-      shouldDisplayDropdownAtStart: S,
-      shouldDisplayDropdownAtEnd: E,
-      shouldShowError: b,
-      computedAriaOwns: w,
+      shouldDisplayDropdownAtStart: E,
+      shouldDisplayDropdownAtEnd: A,
+      shouldShowError: D,
+      computedAriaOwns: O,
       computedAriaLabel: P,
-      computedAriaDescribedBy: O
+      computedAriaDescribedBy: N
     };
   }
 });
-var j = function() {
+var J = function() {
   var t = this, a = t._self._c;
-  return t._self._setupProxy, a("bento-typography", { staticClass: "b-input-field", class: t.inputFieldConditionalClasses, attrs: { "data-testid": "input-text-container", el: t.BentoTypographyElement.DIV, variant: t.BentoTypographyVariant.BODY } }, [t.hasSlot("default") ? a("label", { staticClass: "b-input-field__label", attrs: { for: t.inputFieldId, "data-testid": "input-field-label" }, on: { click: t.focusInput } }, [a("bento-typography", { attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY, stronger: "" } }, [t._t("default")], 2), t.optional ? a("bento-typography", { staticClass: "b-input-field__label-requirement", attrs: { el: t.BentoTypographyElement.SPAN } }, [t._v(" (" + t._s(t.t("optional")) + ") ")]) : t._e(), t.required ? a("bento-typography", { staticClass: "b-input-field__label-requirement", attrs: { el: t.BentoTypographyElement.SPAN } }, [t._v(" (" + t._s(t.t("required")) + ") ")]) : t._e()], 1) : t._e(), a("div", { staticClass: "b-input-field__input-box", attrs: { "aria-disabled": t.disabled } }, [t.variant === t.BentoInputFieldVariant.DEFAULT && t.hasSlot("defaultIconBefore") ? a("span", { staticClass: "b-input-field__default-icon-before", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0 } }, [t._t("defaultIconBefore")], 2) : t._e(), t.variant === t.BentoInputFieldVariant.PAYMENT_METHOD && t.hasSlot("paymentMethod") ? a("span", { staticClass: "b-input-field__payment-method", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0 } }, [t._t("paymentMethod")], 2) : t._e(), t.shouldDisplayDropdownAtStart ? a("div", { staticClass: "b-input-field__dropdown b-input-field__dropdown--start", attrs: { id: t.dropdownId } }, [t.dropdown ? a("bento-dropdown", t._b({ attrs: { size: t.BentoDropdownSize.SMALL, disabled: t.disabled, readonly: t.readonly }, on: { input: t.onDropdownInput } }, "bento-dropdown", t.dropdown, !1)) : t._e()], 1) : t._e(), t.shouldDisplayStaticValueAtStart ? a("bento-typography", { staticClass: "b-input-field__static-value b-input-field__static-value--start", attrs: { id: t.staticValueId, el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY } }, [t._t("staticValue")], 2) : t._e(), a("input", { ref: "inputFieldElement", staticClass: "b-input-field__input", attrs: { id: t.inputFieldId, "aria-label": t.computedAriaLabel, "aria-describedby": t.computedAriaDescribedBy, "aria-owns": t.computedAriaOwns, "aria-invalid": t.shouldShowError, placeholder: t.placeholder, type: t.type, disabled: t.disabled, readonly: t.readonly }, domProps: { value: t.value }, on: { input: t.onInput, change: function(o) {
+  return t._self._setupProxy, a("bento-typography", { staticClass: "b-input-field", class: t.inputFieldConditionalClasses, attrs: { "data-testid": "input-text-container", el: t.BentoTypographyElement.DIV, variant: t.BentoTypographyVariant.BODY } }, [t.hasSlot("default") ? a("label", { staticClass: "b-input-field__label", attrs: { for: t.inputFieldId, "data-testid": "input-field-label" }, on: { click: t.focusInput } }, [a("bento-typography", { attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY, stronger: "" } }, [t._t("default")], 2), t.optional ? a("bento-typography", { staticClass: "b-input-field__label-requirement", attrs: { el: t.BentoTypographyElement.SPAN } }, [t._v(" (" + t._s(t.t("optional")) + ") ")]) : t._e(), t.required ? a("bento-typography", { staticClass: "b-input-field__label-requirement", attrs: { el: t.BentoTypographyElement.SPAN } }, [t._v(" (" + t._s(t.t("required")) + ") ")]) : t._e()], 1) : t._e(), a("div", { staticClass: "b-input-field__input-box", attrs: { "aria-disabled": t.disabled } }, [t.variant === t.BentoInputFieldVariant.DEFAULT && t.hasSlot("defaultIconBefore") ? a("span", { staticClass: "b-input-field__default-icon-before", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0 } }, [t._t("defaultIconBefore")], 2) : t._e(), t.variant === t.BentoInputFieldVariant.PAYMENT_METHOD && t.hasSlot("paymentMethod") ? a("span", { staticClass: "b-input-field__payment-method", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0 } }, [t._t("paymentMethod")], 2) : t._e(), t.shouldDisplayDropdownAtStart ? a("div", { staticClass: "b-input-field__dropdown b-input-field__dropdown--start", attrs: { id: t.dropdownId } }, [t.dropdown ? a("bento-dropdown", t._b({ attrs: { size: t.BentoDropdownSize.SMALL, disabled: t.disabled, readonly: t.isReadOnly }, on: { input: t.onDropdownInput } }, "bento-dropdown", t.dropdown, !1)) : t._e()], 1) : t._e(), t.shouldDisplayStaticValueAtStart ? a("bento-typography", { staticClass: "b-input-field__static-value b-input-field__static-value--start", attrs: { id: t.staticValueId, el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY } }, [t._t("staticValue")], 2) : t._e(), a("input", { ref: "inputFieldElement", staticClass: "b-input-field__input", attrs: { id: t.inputFieldId, "aria-label": t.computedAriaLabel, "aria-describedby": t.computedAriaDescribedBy, "aria-owns": t.computedAriaOwns, "aria-invalid": t.shouldShowError, placeholder: t.placeholder, type: t.type, disabled: t.disabled, readonly: t.isReadOnly }, domProps: { value: t.value }, on: { input: t.onInput, change: function(o) {
     return t.$emit(t.BentoInputFieldEvent.CHANGE);
   }, focus: function(o) {
     return t.$emit(t.BentoInputFieldEvent.FOCUS);
@@ -198,24 +200,24 @@ var j = function() {
     return t.$emit(t.BentoInputFieldEvent.KEYDOWN, o);
   }, function(o) {
     return !o.type.indexOf("key") && t._k(o.keyCode, "esc", 27, o.key, ["Esc", "Escape"]) ? null : t.$emit(t.BentoInputFieldEvent.ESCAPE_PRESSED);
-  }] } }), t.hasSlot("iconAfter") ? a("span", { staticClass: "b-input-field__icon-after", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0, "data-testid": "input-text__icon-after" } }, [t._t("iconAfter")], 2) : t._e(), t.shouldDisplayStaticValueAtEnd ? a("bento-typography", { staticClass: "b-input-field__static-value b-input-field__static-value--end", attrs: { id: t.staticValueId, el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY } }, [t._t("staticValue")], 2) : t._e(), t.shouldDisplayDropdownAtEnd ? a("div", { staticClass: "b-input-field__dropdown b-input-field__dropdown--end", attrs: { id: t.dropdownId } }, [t.dropdown ? a("bento-dropdown", t._b({ attrs: { id: t.dropdownId, size: t.BentoDropdownSize.SMALL, disabled: t.disabled, readonly: t.readonly }, on: { input: t.onDropdownInput } }, "bento-dropdown", t.dropdown, !1)) : t._e()], 1) : t._e()], 1), t.shouldShowError && t.errorMessage ? a("error-message", { staticClass: "b-input-field__error-message", attrs: { id: t.errorId, "error-message": t.errorMessage } }) : t._e(), t.hasSlot("description") ? a("span", { staticClass: "b-input-field__description", attrs: { id: t.descriptionId }, on: { click: t.focusInput } }, [a("bento-typography", { attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY } }, [t._t("description", null, { id: "description" })], 2)], 1) : t._e()], 1);
-}, K = [], X = /* @__PURE__ */ k(
-  z,
-  j,
-  K,
+  }] } }), t.hasSlot("iconAfter") ? a("span", { staticClass: "b-input-field__icon-after", attrs: { "aria-hidden": t.ariaHidden ? "true" : void 0, "data-testid": "input-text__icon-after" } }, [t._t("iconAfter")], 2) : t._e(), t.shouldDisplayStaticValueAtEnd ? a("bento-typography", { staticClass: "b-input-field__static-value b-input-field__static-value--end", attrs: { id: t.staticValueId, el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY } }, [t._t("staticValue")], 2) : t._e(), t.shouldDisplayDropdownAtEnd ? a("div", { staticClass: "b-input-field__dropdown b-input-field__dropdown--end", attrs: { id: t.dropdownId } }, [t.dropdown ? a("bento-dropdown", t._b({ attrs: { id: t.dropdownId, size: t.BentoDropdownSize.SMALL, disabled: t.disabled, readonly: t.isReadOnly }, on: { input: t.onDropdownInput } }, "bento-dropdown", t.dropdown, !1)) : t._e()], 1) : t._e()], 1), t.shouldShowError && t.errorMessage ? a("error-message", { staticClass: "b-input-field__error-message", attrs: { id: t.errorId, "error-message": t.errorMessage } }) : t._e(), t.hasSlot("description") ? a("span", { staticClass: "b-input-field__description", attrs: { id: t.descriptionId }, on: { click: t.focusInput } }, [a("bento-typography", { attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY } }, [t._t("description", null, { id: "description" })], 2)], 1) : t._e()], 1);
+}, Q = [], Z = /* @__PURE__ */ j(
+  X,
+  J,
+  Q,
   !1,
   null,
-  "333272c4",
+  "60016fa4",
   null,
   null
 );
-const it = X.exports;
+const ut = Z.exports;
 export {
-  it as BentoInputField,
+  ut as BentoInputField,
   i as BentoInputFieldElementPosition,
   r as BentoInputFieldEvent,
   l as BentoInputFieldStateClass,
-  D as BentoInputFieldType,
+  m as BentoInputFieldType,
   d as BentoInputFieldVariant
 };
 //# sourceMappingURL=input-field.js.map

package/dist/input-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.js","sources":["../src/components/input-field/input-field.types.ts","../src/components/input-field/input-field.vue"],"sourcesContent":["import { BentoDropdown } from '@/components/dropdown/';\n\nexport enum BentoInputFieldVariant {\n    DEFAULT = 'default',\n    PAYMENT_METHOD = 'payment-method',\n    STATIC_VALUE = 'static-value',\n    DROPDOWN = 'dropdown',\n}\n\nexport enum BentoInputFieldElementPosition {\n    START = 'start',\n    END = 'end',\n}\n\nexport enum BentoInputFieldStateClass {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n    SMALL_PADDING_LEFT = 'small-padding-left',\n    SMALL_PADDING_RIGHT = 'small-padding-right',\n}\n\nexport enum BentoInputFieldType {\n    SEARCH = 'search',\n    TEXT = 'text',\n    NUMBER = 'number',\n}\n\nexport type BentoInputFieldValue = string | number;\n\ntype DropdownProps = InstanceType<typeof BentoDropdown>['$props'];\nexport type BentoInputDropdownProps = {\n    items: DropdownProps['items'];\n    value: DropdownProps['value'];\n};\n\nexport enum BentoInputFieldEvent {\n    INPUT = 'input',\n    ESCAPE_PRESSED = 'escape-pressed',\n    UPDATE_DROPDOWN = 'update:dropdown',\n    DROPDOWN_INPUT = 'dropdown-input',\n    FOCUS = 'focus',\n    CHANGE = 'change',\n    BLUR = 'blur',\n    KEYDOWN = 'keydown',\n}\n","<template>\n    <bento-typography\n        class=\"b-input-field\"\n        data-testid=\"input-text-container\"\n        :class=\"inputFieldConditionalClasses\"\n        :el=\"BentoTypographyElement.DIV\"\n        :variant=\"BentoTypographyVariant.BODY\"\n    >\n        <!-- Label -->\n        <label\n            v-if=\"hasSlot('default')\"\n            :for=\"inputFieldId\"\n            class=\"b-input-field__label\"\n            data-testid=\"input-field-label\"\n            @click=\"focusInput\"\n        >\n            <bento-typography :el=\"BentoTypographyElement.SPAN\" :variant=\"BentoTypographyVariant.BODY\" stronger>\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"optional\"\n                class=\"b-input-field__label-requirement\"\n                :el=\"BentoTypographyElement.SPAN\"\n            >\n                ({{ t('optional') }})\n            </bento-typography>\n            <bento-typography\n                v-if=\"required\"\n                class=\"b-input-field__label-requirement\"\n                :el=\"BentoTypographyElement.SPAN\"\n            >\n                ({{ t('required') }})\n            </bento-typography>\n        </label>\n\n        <div class=\"b-input-field__input-box\" :aria-disabled=\"disabled\">\n            <!-- Optional Icon for Default text variant -->\n            <span\n                v-if=\"variant === BentoInputFieldVariant.DEFAULT && hasSlot('defaultIconBefore')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__default-icon-before\"\n            >\n                <slot name=\"defaultIconBefore\" />\n            </span>\n\n            <!-- Mandatory Icon for Payment Method variant -->\n            <span\n                v-if=\"variant === BentoInputFieldVariant.PAYMENT_METHOD && hasSlot('paymentMethod')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__payment-method\"\n            >\n                <slot name=\"paymentMethod\" />\n            </span>\n\n            <!-- Dropdown at start -->\n            <div\n                v-if=\"shouldDisplayDropdownAtStart\"\n                :id=\"dropdownId\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--start\"\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    v-bind=\"dropdown\"\n                    :size=\"BentoDropdownSize.SMALL\"\n                    :disabled=\"disabled\"\n                    :readonly=\"readonly\"\n                    @input=\"onDropdownInput\"\n                />\n            </div>\n\n            <!-- Static Value at start -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtStart\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--start\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <input\n                :id=\"inputFieldId\"\n                ref=\"inputFieldElement\"\n                class=\"b-input-field__input\"\n                :aria-label=\"computedAriaLabel\"\n                :aria-describedby=\"computedAriaDescribedBy\"\n                :aria-owns=\"computedAriaOwns\"\n                :aria-invalid=\"shouldShowError\"\n                :placeholder=\"placeholder\"\n                :type=\"type\"\n                :value=\"value\"\n                :disabled=\"disabled\"\n                :readonly=\"readonly\"\n                @input=\"onInput\"\n                @change=\"$emit(BentoInputFieldEvent.CHANGE)\"\n                @focus=\"$emit(BentoInputFieldEvent.FOCUS)\"\n                @blur=\"$emit(BentoInputFieldEvent.BLUR)\"\n                @keydown=\"$emit(BentoInputFieldEvent.KEYDOWN, $event)\"\n                @keydown.esc=\"$emit(BentoInputFieldEvent.ESCAPE_PRESSED)\"\n            />\n            <span\n                v-if=\"hasSlot('iconAfter')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__icon-after\"\n                data-testid=\"input-text__icon-after\"\n            >\n                <slot name=\"iconAfter\" />\n            </span>\n\n            <!-- Static Value at the end -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtEnd\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--end\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <!-- Dropdown at end -->\n            <div\n                v-if=\"shouldDisplayDropdownAtEnd\"\n                :id=\"dropdownId\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--end\"\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    :id=\"dropdownId\"\n                    v-bind=\"dropdown\"\n                    :size=\"BentoDropdownSize.SMALL\"\n                    :disabled=\"disabled\"\n                    :readonly=\"readonly\"\n                    @input=\"onDropdownInput\"\n                />\n            </div>\n        </div>\n\n        <error-message\n            v-if=\"shouldShowError && !!errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-input-field__error-message\"\n        />\n\n        <span v-if=\"hasSlot('description')\" :id=\"descriptionId\" class=\"b-input-field__description\" @click=\"focusInput\">\n            <bento-typography :el=\"BentoTypographyElement.SPAN\" :variant=\"BentoTypographyVariant.BODY\">\n                <slot id=\"description\" name=\"description\" />\n            </bento-typography>\n        </span>\n    </bento-typography>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import {\n        BentoInputDropdownProps,\n        BentoInputFieldElementPosition,\n        BentoInputFieldEvent,\n        BentoInputFieldStateClass,\n        BentoInputFieldType,\n        BentoInputFieldValue,\n        BentoInputFieldVariant,\n    } from './input-field.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoDropdownSize } from '../dropdown/dropdown.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-input-field',\n        components: { BentoDropdown, BentoTypography, ErrorMessage },\n        props: {\n            /**\n             * Indicates whether the element is exposed to an accessibility API.\n             */\n            ariaHidden: { type: Boolean, default: true },\n\n            /**\n             * Text that labels an the input element\n             */\n            ariaLabel: { type: String, default: undefined },\n\n            /**\n             * Disables the possibility of changing value in the input-field\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Dropdown props for the small selectable dropdown menu.\n             * @see BentoDropdown\n             */\n            dropdown: {\n                type: Object as PropType<BentoInputDropdownProps>,\n                default: undefined,\n            },\n\n            /**\n             * Position of the dropdown before or after input value\n             */\n            dropdownPosition: {\n                type: String as PropType<BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`>,\n                default: BentoInputFieldElementPosition.START,\n                validator: (value: BentoInputFieldElementPosition) =>\n                    Object.values(BentoInputFieldElementPosition).includes(value),\n            },\n\n            /**\n             * Adds error validation class for outlining input-field.\n             *\n             * @deprecated Use \"errorMessage\" prop instead\n             */\n            error: { type: Boolean, default: false },\n\n            /**\n             * Renders input-field with an error state and the error message beneath the input box\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * Highlights the dropdown is optional.\n             */\n            optional: { type: Boolean, default: false },\n\n            /**\n             * Text displayed as the placeholder of the input-field\n             */\n            placeholder: { type: String, default: '' },\n\n            /**\n             * Highlights the dropdown is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Setting this property to true will set the input field to read only state.\n             */\n            readonly: { type: Boolean, default: false },\n\n            /**\n             * Static text that displayed before or after input value\n             * Applicable to the Static Value variant\n             */\n            staticValue: { type: String, default: '' },\n\n            /**\n             * Position of Static Value before or after input value\n             */\n            staticValuePosition: {\n                type: String as PropType<BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`>,\n                default: BentoInputFieldElementPosition.START,\n                validator: (value: BentoInputFieldElementPosition) =>\n                    Object.values(BentoInputFieldElementPosition).includes(value),\n            },\n\n            /**\n             * A string specifying the type of control to render.\n             */\n            type: {\n                type: String as PropType<BentoInputFieldType | `${BentoInputFieldType}`>,\n                default: BentoInputFieldType.TEXT,\n                validator: (value: BentoInputFieldType) => Object.values(BentoInputFieldType).includes(value),\n            },\n\n            /**\n             * Text displayed as the value of the input-field\n             */\n            value: { type: [String, Number] as PropType<BentoInputFieldValue>, default: undefined },\n\n            /**\n             * Describes the different variants for the input element\n             */\n            variant: {\n                type: String as PropType<BentoInputFieldVariant | `${BentoInputFieldVariant}`>,\n                default: BentoInputFieldVariant.DEFAULT,\n                validator: (value: BentoInputFieldVariant) => Object.values(BentoInputFieldVariant).includes(value),\n            },\n        },\n        emits: [\n            BentoInputFieldEvent.INPUT,\n            BentoInputFieldEvent.ESCAPE_PRESSED,\n            BentoInputFieldEvent.DROPDOWN_INPUT,\n            BentoInputFieldEvent.UPDATE_DROPDOWN,\n            BentoInputFieldEvent.CHANGE,\n            BentoInputFieldEvent.FOCUS,\n            BentoInputFieldEvent.BLUR,\n            BentoInputFieldEvent.KEYDOWN,\n        ],\n        setup(props, { slots, emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const hasSlot = useHasSlot(slots);\n            const inputFieldElement = ref(null);\n            const inputFieldId = generateUid('input');\n            const dropdownId = generateUid('input-dropdown');\n            const staticValueId = generateUid('input-static-value');\n            const descriptionId = generateUid('input-description');\n            const errorId = generateUid('input-error');\n\n            const shouldShowStaticValue = computed(\n                () => props.variant === BentoInputFieldVariant.STATIC_VALUE && !!slots.staticValue\n            );\n\n            const shouldDisplayStaticValueAtStart = computed(\n                () => shouldShowStaticValue.value && props.staticValuePosition === BentoInputFieldElementPosition.START\n            );\n            const shouldDisplayStaticValueAtEnd = computed(\n                () => shouldShowStaticValue.value && props.staticValuePosition === BentoInputFieldElementPosition.END\n            );\n\n            const shouldShowDropdown = computed(\n                () => props.variant === BentoInputFieldVariant.DROPDOWN && !!props.dropdown\n            );\n            const shouldDisplayDropdownAtStart = computed(\n                () => shouldShowDropdown.value && props.dropdownPosition === BentoInputFieldElementPosition.START\n            );\n            const shouldDisplayDropdownAtEnd = computed(\n                () => shouldShowDropdown.value && props.dropdownPosition === BentoInputFieldElementPosition.END\n            );\n\n            const shouldShowError = computed(\n                () => !props.disabled && !props.readonly && (!!props.errorMessage || props.error)\n            );\n\n            const computedAriaOwns = computed(() => {\n                if (shouldShowDropdown.value === true && shouldShowStaticValue.value === true) {\n                    return `${staticValueId} ${dropdownId}`;\n                }\n                if (shouldShowDropdown.value === true) {\n                    return `${dropdownId}`;\n                }\n                if (shouldShowStaticValue.value === true) {\n                    return `${staticValueId}`;\n                }\n                return null;\n            });\n\n            const computedAriaLabel = computed(() => {\n                if (props.ariaLabel) {\n                    return props.ariaLabel;\n                }\n                if (hasSlot('default')) {\n                    return getSlotText(slots)('default');\n                }\n                return 'input field';\n            });\n\n            const computedAriaDescribedBy = computed(\n                () =>\n                    `${hasSlot('description') ? descriptionId : ''} ${\n                        shouldShowError.value && !!props.errorMessage ? errorId : ''\n                    }`\n            );\n\n            const inputFieldConditionalClasses = computed(() => ({\n                [`b-input-field--${BentoInputFieldStateClass.DISABLED}`]: props.disabled,\n                [`b-input-field--${BentoInputFieldStateClass.READONLY}`]: props.readonly,\n                [`b-input-field--${BentoInputFieldStateClass.ERROR}`]: shouldShowError.value,\n                [`b-input-field--${BentoInputFieldStateClass.SMALL_PADDING_LEFT}`]: shouldDisplayDropdownAtStart.value,\n                [`b-input-field--${BentoInputFieldStateClass.SMALL_PADDING_RIGHT}`]: shouldDisplayDropdownAtEnd.value,\n            }));\n\n            const onInput = (event: Event) => {\n                if (!props.disabled) {\n                    /**\n                     * Triggered when input value is changed\n                     *\n                     * @event input\n                     * @property {String} inputValue - the updated input-field value\n                     */\n                    emit(BentoInputFieldEvent.INPUT, (event.target as HTMLInputElement).value);\n                }\n            };\n\n            const onDropdownInput = (selectedValue: BentoListboxSelectedValue) => {\n                emit(BentoInputFieldEvent.DROPDOWN_INPUT, selectedValue);\n                emit(BentoInputFieldEvent.UPDATE_DROPDOWN, { ...props?.dropdown, value: selectedValue });\n            };\n\n            const focusInput = () => {\n                inputFieldElement.value.focus();\n            };\n\n            if (props.error) {\n                deprecate(\n                    'BentoInputField \"error\" property',\n                    `Use the BentoInputField \"errorMessage\" property instead to indicate that there is a modifier error.\n                    Having the field as \"undefined\" will hide/remove the error.\n                    <bento-dropdown errorMessage=\"Error message text\" />`,\n                    '2.0.0'\n                );\n            }\n\n            return {\n                // Enums\n                BentoTypographyVariant,\n                BentoTypographyElement,\n                BentoInputFieldVariant,\n                BentoDropdownSize,\n                BentoInputFieldEvent,\n\n                // Functions\n                t,\n                onDropdownInput,\n                onInput,\n                focusInput,\n                hasSlot,\n\n                // Values\n                inputFieldConditionalClasses,\n                inputFieldElement,\n                inputFieldId,\n                dropdownId,\n                staticValueId,\n                descriptionId,\n                errorId,\n                shouldDisplayStaticValueAtStart,\n                shouldDisplayStaticValueAtEnd,\n                shouldShowDropdown,\n                shouldDisplayDropdownAtStart,\n                shouldDisplayDropdownAtEnd,\n                shouldShowError,\n                computedAriaOwns,\n                computedAriaLabel,\n                computedAriaDescribedBy,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-field.scss\" />\n"],"names":["BentoInputFieldVariant","BentoInputFieldVariant2","BentoInputFieldElementPosition","BentoInputFieldElementPosition2","BentoInputFieldStateClass","BentoInputFieldStateClass2","BentoInputFieldType","BentoInputFieldType2","BentoInputFieldEvent","BentoInputFieldEvent2","_sfc_main","defineComponent","messages","BentoDropdown","BentoTypography","ErrorMessage","value","props","slots","emit","t","useI18n","hasSlot","useHasSlot","inputFieldElement","ref","inputFieldId","generateUid","dropdownId","staticValueId","descriptionId","errorId","shouldShowStaticValue","computed","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedAriaOwns","computedAriaLabel","getSlotText","computedAriaDescribedBy","inputFieldConditionalClasses","onInput","event","onDropdownInput","selectedValue","focusInput","deprecate","BentoTypographyVariant","BentoTypographyElement","BentoDropdownSize"],"mappings":"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"}
+{"version":3,"file":"input-field.js","sources":["../src/components/input-field/input-field.types.ts","../src/components/input-field/input-field.vue"],"sourcesContent":["import { BentoDropdown } from '@/components/dropdown/';\n\nexport enum BentoInputFieldVariant {\n    DEFAULT = 'default',\n    PAYMENT_METHOD = 'payment-method',\n    STATIC_VALUE = 'static-value',\n    DROPDOWN = 'dropdown',\n}\n\nexport enum BentoInputFieldElementPosition {\n    START = 'start',\n    END = 'end',\n}\n\nexport enum BentoInputFieldStateClass {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n    SMALL_PADDING_LEFT = 'small-padding-left',\n    SMALL_PADDING_RIGHT = 'small-padding-right',\n}\n\nexport enum BentoInputFieldType {\n    SEARCH = 'search',\n    TEXT = 'text',\n    NUMBER = 'number',\n}\n\nexport type BentoInputFieldValue = string | number;\n\ntype DropdownProps = InstanceType<typeof BentoDropdown>['$props'];\nexport type BentoInputDropdownProps = {\n    items: DropdownProps['items'];\n    value: DropdownProps['value'];\n};\n\nexport enum BentoInputFieldEvent {\n    INPUT = 'input',\n    ESCAPE_PRESSED = 'escape-pressed',\n    UPDATE_DROPDOWN = 'update:dropdown',\n    DROPDOWN_INPUT = 'dropdown-input',\n    FOCUS = 'focus',\n    CHANGE = 'change',\n    BLUR = 'blur',\n    KEYDOWN = 'keydown',\n}\n","<template>\n    <bento-typography\n        class=\"b-input-field\"\n        data-testid=\"input-text-container\"\n        :class=\"inputFieldConditionalClasses\"\n        :el=\"BentoTypographyElement.DIV\"\n        :variant=\"BentoTypographyVariant.BODY\"\n    >\n        <!-- Label -->\n        <label\n            v-if=\"hasSlot('default')\"\n            :for=\"inputFieldId\"\n            class=\"b-input-field__label\"\n            data-testid=\"input-field-label\"\n            @click=\"focusInput\"\n        >\n            <bento-typography :el=\"BentoTypographyElement.SPAN\" :variant=\"BentoTypographyVariant.BODY\" stronger>\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"optional\"\n                class=\"b-input-field__label-requirement\"\n                :el=\"BentoTypographyElement.SPAN\"\n            >\n                ({{ t('optional') }})\n            </bento-typography>\n            <bento-typography\n                v-if=\"required\"\n                class=\"b-input-field__label-requirement\"\n                :el=\"BentoTypographyElement.SPAN\"\n            >\n                ({{ t('required') }})\n            </bento-typography>\n        </label>\n\n        <div class=\"b-input-field__input-box\" :aria-disabled=\"disabled\">\n            <!-- Optional Icon for Default text variant -->\n            <span\n                v-if=\"variant === BentoInputFieldVariant.DEFAULT && hasSlot('defaultIconBefore')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__default-icon-before\"\n            >\n                <slot name=\"defaultIconBefore\" />\n            </span>\n\n            <!-- Mandatory Icon for Payment Method variant -->\n            <span\n                v-if=\"variant === BentoInputFieldVariant.PAYMENT_METHOD && hasSlot('paymentMethod')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__payment-method\"\n            >\n                <slot name=\"paymentMethod\" />\n            </span>\n\n            <!-- Dropdown at start -->\n            <div\n                v-if=\"shouldDisplayDropdownAtStart\"\n                :id=\"dropdownId\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--start\"\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    v-bind=\"dropdown\"\n                    :size=\"BentoDropdownSize.SMALL\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onDropdownInput\"\n                />\n            </div>\n\n            <!-- Static Value at start -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtStart\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--start\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <input\n                :id=\"inputFieldId\"\n                ref=\"inputFieldElement\"\n                class=\"b-input-field__input\"\n                :aria-label=\"computedAriaLabel\"\n                :aria-describedby=\"computedAriaDescribedBy\"\n                :aria-owns=\"computedAriaOwns\"\n                :aria-invalid=\"shouldShowError\"\n                :placeholder=\"placeholder\"\n                :type=\"type\"\n                :value=\"value\"\n                :disabled=\"disabled\"\n                :readonly=\"isReadOnly\"\n                @input=\"onInput\"\n                @change=\"$emit(BentoInputFieldEvent.CHANGE)\"\n                @focus=\"$emit(BentoInputFieldEvent.FOCUS)\"\n                @blur=\"$emit(BentoInputFieldEvent.BLUR)\"\n                @keydown=\"$emit(BentoInputFieldEvent.KEYDOWN, $event)\"\n                @keydown.esc=\"$emit(BentoInputFieldEvent.ESCAPE_PRESSED)\"\n            />\n            <span\n                v-if=\"hasSlot('iconAfter')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__icon-after\"\n                data-testid=\"input-text__icon-after\"\n            >\n                <slot name=\"iconAfter\" />\n            </span>\n\n            <!-- Static Value at the end -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtEnd\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--end\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <!-- Dropdown at end -->\n            <div\n                v-if=\"shouldDisplayDropdownAtEnd\"\n                :id=\"dropdownId\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--end\"\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    :id=\"dropdownId\"\n                    v-bind=\"dropdown\"\n                    :size=\"BentoDropdownSize.SMALL\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onDropdownInput\"\n                />\n            </div>\n        </div>\n\n        <error-message\n            v-if=\"shouldShowError && !!errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-input-field__error-message\"\n        />\n\n        <span v-if=\"hasSlot('description')\" :id=\"descriptionId\" class=\"b-input-field__description\" @click=\"focusInput\">\n            <bento-typography :el=\"BentoTypographyElement.SPAN\" :variant=\"BentoTypographyVariant.BODY\">\n                <slot id=\"description\" name=\"description\" />\n            </bento-typography>\n        </span>\n    </bento-typography>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRef } from 'vue';\n    import {\n        BentoInputDropdownProps,\n        BentoInputFieldElementPosition,\n        BentoInputFieldEvent,\n        BentoInputFieldStateClass,\n        BentoInputFieldType,\n        BentoInputFieldValue,\n        BentoInputFieldVariant,\n    } from './input-field.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { ErrorMessage } from '@/components/internal/error-message';\n    import { useFormLayoutFieldLoading, useHasSlot } from '@/composables';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoDropdownSize } from '../dropdown/dropdown.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoListboxSelectedValue } from '@/types';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-input-field',\n        components: { BentoDropdown, BentoTypography, ErrorMessage },\n        props: {\n            /**\n             * Indicates whether the element is exposed to an accessibility API.\n             */\n            ariaHidden: { type: Boolean, default: true },\n\n            /**\n             * Text that labels an the input element\n             */\n            ariaLabel: { type: String, default: undefined },\n\n            /**\n             * Disables the possibility of changing value in the input-field\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Dropdown props for the small selectable dropdown menu.\n             * @see BentoDropdown\n             */\n            dropdown: {\n                type: Object as PropType<BentoInputDropdownProps>,\n                default: undefined,\n            },\n\n            /**\n             * Position of the dropdown before or after input value\n             */\n            dropdownPosition: {\n                type: String as PropType<BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`>,\n                default: BentoInputFieldElementPosition.START,\n                validator: (value: BentoInputFieldElementPosition) =>\n                    Object.values(BentoInputFieldElementPosition).includes(value),\n            },\n\n            /**\n             * Adds error validation class for outlining input-field.\n             *\n             * @deprecated Use \"errorMessage\" prop instead\n             */\n            error: { type: Boolean, default: false },\n\n            /**\n             * Renders input-field with an error state and the error message beneath the input box\n             */\n            errorMessage: { type: String, default: null },\n\n            /**\n             * Highlights the dropdown is optional.\n             */\n            optional: { type: Boolean, default: false },\n\n            /**\n             * Text displayed as the placeholder of the input-field\n             */\n            placeholder: { type: String, default: '' },\n\n            /**\n             * Highlights the dropdown is required.\n             */\n            required: { type: Boolean, default: false },\n\n            /**\n             * Setting this property to true will set the input field to read only state.\n             */\n            readonly: { type: Boolean, default: false },\n\n            /**\n             * Static text that displayed before or after input value\n             * Applicable to the Static Value variant\n             */\n            staticValue: { type: String, default: '' },\n\n            /**\n             * Position of Static Value before or after input value\n             */\n            staticValuePosition: {\n                type: String as PropType<BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`>,\n                default: BentoInputFieldElementPosition.START,\n                validator: (value: BentoInputFieldElementPosition) =>\n                    Object.values(BentoInputFieldElementPosition).includes(value),\n            },\n\n            /**\n             * A string specifying the type of control to render.\n             */\n            type: {\n                type: String as PropType<BentoInputFieldType | `${BentoInputFieldType}`>,\n                default: BentoInputFieldType.TEXT,\n                validator: (value: BentoInputFieldType) => Object.values(BentoInputFieldType).includes(value),\n            },\n\n            /**\n             * Text displayed as the value of the input-field\n             */\n            value: { type: [String, Number] as PropType<BentoInputFieldValue>, default: undefined },\n\n            /**\n             * Describes the different variants for the input element\n             */\n            variant: {\n                type: String as PropType<BentoInputFieldVariant | `${BentoInputFieldVariant}`>,\n                default: BentoInputFieldVariant.DEFAULT,\n                validator: (value: BentoInputFieldVariant) => Object.values(BentoInputFieldVariant).includes(value),\n            },\n        },\n        emits: [\n            BentoInputFieldEvent.INPUT,\n            BentoInputFieldEvent.ESCAPE_PRESSED,\n            BentoInputFieldEvent.DROPDOWN_INPUT,\n            BentoInputFieldEvent.UPDATE_DROPDOWN,\n            BentoInputFieldEvent.CHANGE,\n            BentoInputFieldEvent.FOCUS,\n            BentoInputFieldEvent.BLUR,\n            BentoInputFieldEvent.KEYDOWN,\n        ],\n        setup(props, { slots, emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const hasSlot = useHasSlot(slots);\n            const inputFieldElement = ref(null);\n            const inputFieldId = generateUid('input');\n            const dropdownId = generateUid('input-dropdown');\n            const staticValueId = generateUid('input-static-value');\n            const descriptionId = generateUid('input-description');\n            const errorId = generateUid('input-error');\n\n            const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n            const shouldShowStaticValue = computed(\n                () => props.variant === BentoInputFieldVariant.STATIC_VALUE && !!slots.staticValue\n            );\n\n            const shouldDisplayStaticValueAtStart = computed(\n                () => shouldShowStaticValue.value && props.staticValuePosition === BentoInputFieldElementPosition.START\n            );\n            const shouldDisplayStaticValueAtEnd = computed(\n                () => shouldShowStaticValue.value && props.staticValuePosition === BentoInputFieldElementPosition.END\n            );\n\n            const shouldShowDropdown = computed(\n                () => props.variant === BentoInputFieldVariant.DROPDOWN && !!props.dropdown\n            );\n            const shouldDisplayDropdownAtStart = computed(\n                () => shouldShowDropdown.value && props.dropdownPosition === BentoInputFieldElementPosition.START\n            );\n            const shouldDisplayDropdownAtEnd = computed(\n                () => shouldShowDropdown.value && props.dropdownPosition === BentoInputFieldElementPosition.END\n            );\n\n            const shouldShowError = computed(\n                () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.error)\n            );\n\n            const computedAriaOwns = computed(() => {\n                if (shouldShowDropdown.value === true && shouldShowStaticValue.value === true) {\n                    return `${staticValueId} ${dropdownId}`;\n                }\n                if (shouldShowDropdown.value === true) {\n                    return `${dropdownId}`;\n                }\n                if (shouldShowStaticValue.value === true) {\n                    return `${staticValueId}`;\n                }\n                return null;\n            });\n\n            const computedAriaLabel = computed(() => {\n                if (props.ariaLabel) {\n                    return props.ariaLabel;\n                }\n                if (hasSlot('default')) {\n                    return getSlotText(slots)('default');\n                }\n                return 'input field';\n            });\n\n            const computedAriaDescribedBy = computed(\n                () =>\n                    `${hasSlot('description') ? descriptionId : ''} ${\n                        shouldShowError.value && !!props.errorMessage ? errorId : ''\n                    }`\n            );\n\n            const inputFieldConditionalClasses = computed(() => ({\n                [`b-input-field--${BentoInputFieldStateClass.DISABLED}`]: props.disabled,\n                [`b-input-field--${BentoInputFieldStateClass.READONLY}`]: isReadOnly.value,\n                [`b-input-field--${BentoInputFieldStateClass.ERROR}`]: shouldShowError.value,\n                [`b-input-field--${BentoInputFieldStateClass.SMALL_PADDING_LEFT}`]: shouldDisplayDropdownAtStart.value,\n                [`b-input-field--${BentoInputFieldStateClass.SMALL_PADDING_RIGHT}`]: shouldDisplayDropdownAtEnd.value,\n            }));\n\n            const onInput = (event: Event) => {\n                if (!props.disabled && !isReadOnly.value) {\n                    /**\n                     * Triggered when input value is changed\n                     *\n                     * @event input\n                     * @property {String} inputValue - the updated input-field value\n                     */\n                    emit(BentoInputFieldEvent.INPUT, (event.target as HTMLInputElement).value);\n                }\n            };\n\n            const onDropdownInput = (selectedValue: BentoListboxSelectedValue) => {\n                emit(BentoInputFieldEvent.DROPDOWN_INPUT, selectedValue);\n                emit(BentoInputFieldEvent.UPDATE_DROPDOWN, { ...props?.dropdown, value: selectedValue });\n            };\n\n            const focusInput = () => {\n                inputFieldElement.value.focus();\n            };\n\n            if (props.error) {\n                deprecate(\n                    'BentoInputField \"error\" property',\n                    `Use the BentoInputField \"errorMessage\" property instead to indicate that there is a modifier error.\n                    Having the field as \"undefined\" will hide/remove the error.\n                    <bento-dropdown errorMessage=\"Error message text\" />`,\n                    '2.0.0'\n                );\n            }\n\n            return {\n                // Enums\n                BentoTypographyVariant,\n                BentoTypographyElement,\n                BentoInputFieldVariant,\n                BentoDropdownSize,\n                BentoInputFieldEvent,\n\n                // Functions\n                t,\n                onDropdownInput,\n                onInput,\n                focusInput,\n                hasSlot,\n\n                // Values\n                inputFieldConditionalClasses,\n                inputFieldElement,\n                inputFieldId,\n                dropdownId,\n                staticValueId,\n                descriptionId,\n                errorId,\n                isReadOnly,\n                shouldDisplayStaticValueAtStart,\n                shouldDisplayStaticValueAtEnd,\n                shouldShowDropdown,\n                shouldDisplayDropdownAtStart,\n                shouldDisplayDropdownAtEnd,\n                shouldShowError,\n                computedAriaOwns,\n                computedAriaLabel,\n                computedAriaDescribedBy,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-field.scss\" />\n"],"names":["BentoInputFieldVariant","BentoInputFieldVariant2","BentoInputFieldElementPosition","BentoInputFieldElementPosition2","BentoInputFieldStateClass","BentoInputFieldStateClass2","BentoInputFieldType","BentoInputFieldType2","BentoInputFieldEvent","BentoInputFieldEvent2","_sfc_main","defineComponent","messages","BentoDropdown","BentoTypography","ErrorMessage","value","props","slots","emit","t","useI18n","hasSlot","useHasSlot","inputFieldElement","ref","inputFieldId","generateUid","dropdownId","staticValueId","descriptionId","errorId","isReadOnly","useFormLayoutFieldLoading","toRef","shouldShowStaticValue","computed","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedAriaOwns","computedAriaLabel","getSlotText","computedAriaDescribedBy","inputFieldConditionalClasses","onInput","event","onDropdownInput","selectedValue","focusInput","deprecate","BentoTypographyVariant","BentoTypographyElement","BentoDropdownSize"],"mappings":"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"}

package/dist/internal.js

@@ -1,10 +1,10 @@
-import { B as r, L as e } from "./chunks/listbox-option-tag.c7e9a228.js";
-import { C as s, a as p, b as n } from "./chunks/calendar.8f50a65a.js";
-import { C } from "./chunks/copy.b62beae5.js";
-import { C as i } from "./chunks/controls-group.9d58a091.js";
-import { E as d } from "./chunks/error-message.a581a172.js";
+import { B as r, L as e } from "./chunks/listbox-option-tag.8d6cccac.js";
+import { C as s, a as p, b as n } from "./chunks/calendar.0ae43a96.js";
+import { C } from "./chunks/copy.5a4cbd4d.js";
+import { C as i } from "./chunks/controls-group.b827382b.js";
+import { E as d } from "./chunks/error-message.0433b539.js";
 import { G as L, a as l } from "./chunks/grid-layout.73f23b1b.js";
-import { B as G } from "./chunks/listbox.f51e92cd.js";
+import { B as G } from "./chunks/listbox.116ed0c1.js";
 export {
   r as BentoAvatar,
   G as BentoListbox,

package/dist/link.js

@@ -1,8 +1,8 @@
 import { defineComponent as i, computed as p, useAttrs as c } from "vue";
 import { RouterLink as _ } from "vue-router";
-import { B as u, a as y, b as d } from "./chunks/index.175f9e2d.js";
+import { B as u, a as y, b as d } from "./chunks/index.56858f4e.js";
 import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index29.css";
+import "./assets/index13.css";
 var a = /* @__PURE__ */ ((o) => (o.DEFAULT = "default", o.QUIET = "quiet", o))(a || {});
 const m = {
   name: "bento-link"

package/dist/loading-indicator.js

@@ -1,6 +1,6 @@
 import { defineComponent as t, onMounted as s, onUnmounted as l, computed as i } from "vue";
 import { n as r } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index18.css";
+import "./assets/index15.css";
 var a = /* @__PURE__ */ ((n) => (n.START = "loading-start", n.END = "loading-end", n))(a || {});
 const d = t({
   name: "bento-loading-indicator",

package/dist/menu.js

@@ -1,13 +1,13 @@
 import { defineComponent as k, computed as b, ref as c, onMounted as U } from "vue";
 import { n as h } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { g as w } from "./chunks/unique-id.a2a2b458.js";
-import { B as H, a as I } from "./chunks/button.c27a7ce2.js";
+import { B as H, a as I } from "./chunks/button.d0c9527d.js";
 import { BentoPopover as q, BentoPopoverPositions as B } from "./popover.js";
 import { a as V, C as O } from "./chunks/chevron-right.3b826337.js";
-import { B as W, a as L } from "./chunks/base-button.d4487ac9.js";
-import { B as j, a as Y, b as Z } from "./chunks/index.175f9e2d.js";
+import { B as W, a as L } from "./chunks/base-button.98379576.js";
+import { B as j, a as Y, b as Z } from "./chunks/index.56858f4e.js";
 import { B as $ } from "./chunks/directive.0408e565.js";
-import "./assets/index22.css";
+import "./assets/index27.css";
 let S = 0;
 const z = {
   beforeCreate() {