@adyen/bento-vue3 1.3.0 → 1.4.0

package/dist/tag.js

@@ -1,15 +1,15 @@
-import { defineComponent as u, computed as a, resolveComponent as p, resolveDirective as m, withDirectives as _, openBlock as b, createElementBlock as f, normalizeClass as v, createVNode as g, withCtx as y, createTextVNode as h, toDisplayString as E } from "vue";
-import { B as T, b as C, a as S } from "./chunks/index.222d29b0.js";
-import { b as N } from "./chunks/tooltip.835d9b52.js";
-import { u as A } from "./chunks/aria-label.ac9651a5.js";
-import { g as c } from "./chunks/get-slot-text.2db867f8.js";
-import { _ as B } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index33.css";
+import { defineComponent as d, computed as o, resolveComponent as p, resolveDirective as m, withDirectives as _, openBlock as b, createElementBlock as v, normalizeClass as f, createVNode as g, withCtx as h, createTextVNode as y, toDisplayString as E } from "vue";
+import { B as C } from "./chunks/index.89b00b94.js";
+import { b as S } from "./chunks/tooltip.e4e34b86.js";
+import { u as x } from "./chunks/aria-label.ac9651a5.js";
+import { g as c } from "./chunks/get-slot-text.bead058f.js";
+import { _ as $ } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import "./assets/index31.css";
 var n = /* @__PURE__ */ ((e) => (e.GREY = "grey", e.BLUE = "blue", e.GREEN = "green", e.ORANGE = "orange", e.RED = "red", e.WHITE = "white", e))(n || {});
-const $ = u({
+const w = d({
   name: "bento-tag",
-  components: { BentoTypography: T },
-  directives: { BentoTooltipDirective: N },
+  components: { BentoTypography: C },
+  directives: { BentoTooltipDirective: S },
   props: {
     /**
      * The label text content of the Tag.
@@ -28,52 +28,49 @@ const $ = u({
      */
     truncate: { type: Number, default: null }
   },
-  setup(e, { slots: o }) {
-    const i = A({
-      label: e.label || c(o)("default"),
+  setup(e, { slots: a }) {
+    const i = x({
+      label: e.label || c(a)("default"),
       defaultFallback: "tag"
-    }), s = a(() => ({
+    }), s = o(() => ({
       [`b-tag--${e.variant}`]: e.variant
-    })), t = a(() => e.label || c(o)("default") || "tag"), r = a(() => e.truncate && t.value.length > e.truncate), l = a(() => e.truncate && r.value ? `${t.value.slice(0, e.truncate)}...` : t.value);
+    })), t = o(() => e.label || c(a)("default") || "tag"), l = o(() => e.truncate && t.value.length > e.truncate), r = o(() => e.truncate && l.value ? `${t.value.slice(0, e.truncate)}...` : t.value);
     return {
       // Values
       computedAriaLabel: i,
       textFromSlot: t,
-      formattedText: l,
+      formattedText: r,
       tagConditionalClasses: s,
-      shouldShowTooltip: r,
-      // Enums
-      BentoTypographyVariant: C,
-      BentoTypographyElement: S
+      shouldShowTooltip: l
     };
   }
 });
-const w = ["aria-label"];
-function D(e, o, i, s, t, r) {
-  const l = p("bento-typography"), d = m("bento-tooltip-directive");
-  return _((b(), f("span", {
-    class: v(["b-tag", e.tagConditionalClasses]),
+const D = ["aria-label"];
+function N(e, a, i, s, t, l) {
+  const r = p("bento-typography"), u = m("bento-tooltip-directive");
+  return _((b(), v("span", {
+    class: f(["b-tag", e.tagConditionalClasses]),
     "aria-label": e.computedAriaLabel,
     role: "mark"
   }, [
-    g(l, {
+    g(r, {
       class: "b-tag__label",
-      el: e.BentoTypographyElement.SPAN,
-      variant: e.BentoTypographyVariant.CAPTION,
+      el: "span",
+      variant: "caption",
       stronger: ""
     }, {
-      default: y(() => [
-        h(E(e.formattedText), 1)
+      default: h(() => [
+        y(E(e.formattedText), 1)
       ]),
       _: 1
-    }, 8, ["el", "variant"])
-  ], 10, w)), [
-    [d, e.shouldShowTooltip ? e.textFromSlot : null]
+    })
+  ], 10, D)), [
+    [u, e.shouldShowTooltip ? e.textFromSlot : null]
   ]);
 }
-const I = /* @__PURE__ */ B($, [["render", D], ["__scopeId", "data-v-aaf7d37d"]]);
+const F = /* @__PURE__ */ $(w, [["render", N], ["__scopeId", "data-v-4550ca54"]]);
 export {
-  I as BentoTag,
+  F as BentoTag,
   n as BentoTagVariant
 };
 //# sourceMappingURL=tag.js.map

package/dist/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sources":["../../vue2/src/components/tag/tag.types.ts","../../vue2/src/components/tag/tag.vue"],"sourcesContent":["export enum BentoTagVariant {\n    GREY = 'grey',\n    BLUE = 'blue',\n    GREEN = 'green',\n    ORANGE = 'orange',\n    RED = 'red',\n    WHITE = 'white',\n}\n","<template>\n    <span\n        v-bento-tooltip-directive=\"shouldShowTooltip ? textFromSlot : null\"\n        class=\"b-tag\"\n        :class=\"tagConditionalClasses\"\n        :aria-label=\"computedAriaLabel\"\n        role=\"mark\"\n    >\n        <bento-typography\n            class=\"b-tag__label\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.CAPTION\"\n            stronger\n        >\n            {{ formattedText }}\n        </bento-typography>\n    </span>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoTagVariant } from './tag.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoTooltipDirective } from '@/directives';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    export default defineComponent({\n        name: 'bento-tag',\n        components: { BentoTypography },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * The label text content of the Tag.\n             */\n            label: { type: String, default: null },\n\n            /**\n             * The variant variant of tag\n             */\n            variant: {\n                type: String as PropType<BentoTagVariant | `${BentoTagVariant}`>,\n                default: BentoTagVariant.GREY,\n                validator: (value: BentoTagVariant) => Object.values(BentoTagVariant).includes(value),\n            },\n\n            /**\n             * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".\n             */\n            truncate: { type: Number, default: null },\n        },\n        setup(props, { slots }) {\n            const computedAriaLabel = useAriaLabel({\n                label: props.label || getSlotText(slots)('default'),\n                defaultFallback: 'tag',\n            });\n\n            const tagConditionalClasses = computed(() => ({\n                [`b-tag--${props.variant}`]: props.variant,\n            }));\n\n            const textFromSlot = computed(() => props.label || getSlotText(slots)('default') || 'tag');\n            const shouldShowTooltip = computed(() => props.truncate && textFromSlot.value.length > props.truncate);\n\n            const formattedText = computed(() => {\n                if (!props.truncate) {\n                    return textFromSlot.value;\n                }\n\n                return shouldShowTooltip.value\n                    ? `${textFromSlot.value.slice(0, props.truncate)}...`\n                    : textFromSlot.value;\n            });\n\n            return {\n                // Values\n                computedAriaLabel,\n                textFromSlot,\n                formattedText,\n                tagConditionalClasses,\n                shouldShowTooltip,\n\n                // Enums\n                BentoTypographyVariant,\n                BentoTypographyElement,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tag.scss\" />\n"],"names":["BentoTagVariant","BentoTagVariant2","_sfc_main","defineComponent","BentoTypography","BentoTooltipDirective","value","props","slots","computedAriaLabel","useAriaLabel","getSlotText","tagConditionalClasses","computed","textFromSlot","shouldShowTooltip","formattedText","BentoTypographyVariant","BentoTypographyElement","withDirectives","openBlock","createElementBlock","normalizeClass","_ctx"],"mappings":";;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OACAA,EAAA,QAAA,SANQA,IAAAD,KAAA,CAAA,CAAA;AC2BR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACwB,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACM,OAAA;AAAA;AAAA;AAAA;AAAA,IAC7B,OAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAIkC,SAAA;AAAA,MAK5B,MAAA;AAAA,MACC,SAAAL,EAAA;AAAA,MACmB,WAAA,CAAAM,MAAA,OAAA,OAAAN,CAAA,EAAA,SAAAM,CAAA;AAAA,IAC2D;AAAA;AAAA;AAAA;AAAA,IACxF,UAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA,EAKwC;AAAA,EAC5C,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEI,UAAAC,IAAAC,EAAA;AAAA,MAAuC,OAAAH,EAAA,SAAAI,EAAAH,CAAA,EAAA,SAAA;AAAA,MACe,iBAAA;AAAA,IACjC,CAAA,GAGrBI,IAAAC,EAAA,OAAA;AAAA,MAA8C,CAAA,UAAAN,EAAA,SAAA,GAAAA,EAAA;AAAA,IACP,EAAA,GAGvCO,IAAAD,EAAA,MAAAN,EAAA,SAAAI,EAAAH,CAAA,EAAA,SAAA,KAAA,KAAA,GACAO,IAAAF,EAAA,MAAAN,EAAA,YAAAO,EAAA,MAAA,SAAAP,EAAA,QAAA,GAEAS,IAAAH,EAAA,MACIN,EAAA,YAIAQ,EAAA,QAAA,GAAAD,EAAA,MAAA,MAAA,GAAAP,EAAA,QAAA,SAHIO,EAAA,KAKe;AAGvB,WAAA;AAAA;AAAA,MAAO,mBAAAL;AAAA,MAEH,cAAAK;AAAA,MACA,eAAAE;AAAA,MACA,uBAAAJ;AAAA,MACA,mBAAAG;AAAA;AAAA,MACA,wBAAAE;AAAA,MAGA,wBAAAC;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;;AAlFK,SAAAC,GAAAC,EAAA,GAAAC,EAAA,QAAA;AAAA,IAA6B,OAAAC,EAAA,CAAA,SAAAC,EAAA,qBAAA,CAAA;AAAA,IACnB,cAAAA,EAAA;AAAA,IAEX,MAAA;AAAA,EAAA,GAAA;AAAA;MAEoC,OAAA;AAAA,MACxB,IAAAA,EAAA,uBAAA;AAAA,MACA,SAAAA,EAAA,uBAAA;AAAA;;;;;;;;;;;;"}
+{"version":3,"file":"tag.js","sources":["../../vue2/src/components/tag/tag.types.ts","../../vue2/src/components/tag/tag.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTagVariant {\n    GREY = 'grey',\n    BLUE = 'blue',\n    GREEN = 'green',\n    ORANGE = 'orange',\n    RED = 'red',\n    WHITE = 'white',\n}\n","<template>\n    <span\n        v-bento-tooltip-directive=\"shouldShowTooltip ? textFromSlot : null\"\n        class=\"b-tag\"\n        :class=\"tagConditionalClasses\"\n        :aria-label=\"computedAriaLabel\"\n        role=\"mark\"\n    >\n        <bento-typography class=\"b-tag__label\" el=\"span\" variant=\"caption\" stronger>\n            {{ formattedText }}\n        </bento-typography>\n    </span>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoTagVariant } from './tag.types';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTooltipDirective } from '@/directives';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    export default defineComponent({\n        name: 'bento-tag',\n        components: { BentoTypography },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * The label text content of the Tag.\n             */\n            label: { type: String, default: null },\n\n            /**\n             * The variant variant of tag\n             */\n            variant: {\n                type: String as PropType<BentoTagVariant | `${BentoTagVariant}`>,\n                default: BentoTagVariant.GREY,\n                validator: (value: BentoTagVariant) => Object.values(BentoTagVariant).includes(value),\n            },\n\n            /**\n             * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".\n             */\n            truncate: { type: Number, default: null },\n        },\n        setup(props, { slots }) {\n            const computedAriaLabel = useAriaLabel({\n                label: props.label || getSlotText(slots)('default'),\n                defaultFallback: 'tag',\n            });\n\n            const tagConditionalClasses = computed(() => ({\n                [`b-tag--${props.variant}`]: props.variant,\n            }));\n\n            const textFromSlot = computed(() => props.label || getSlotText(slots)('default') || 'tag');\n            const shouldShowTooltip = computed(() => props.truncate && textFromSlot.value.length > props.truncate);\n\n            const formattedText = computed(() => {\n                if (!props.truncate) {\n                    return textFromSlot.value;\n                }\n\n                return shouldShowTooltip.value\n                    ? `${textFromSlot.value.slice(0, props.truncate)}...`\n                    : textFromSlot.value;\n            });\n\n            return {\n                // Values\n                computedAriaLabel,\n                textFromSlot,\n                formattedText,\n                tagConditionalClasses,\n                shouldShowTooltip,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tag.scss\" />\n"],"names":["BentoTagVariant","BentoTagVariant2","_sfc_main","defineComponent","BentoTypography","BentoTooltipDirective","value","props","slots","computedAriaLabel","useAriaLabel","getSlotText","tagConditionalClasses","computed","textFromSlot","shouldShowTooltip","formattedText","withDirectives","openBlock","createElementBlock","normalizeClass","_ctx","createVNode","_component_bento_typography"],"mappings":";;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OACAA,EAAA,QAAA,SANQA,IAAAD,KAAA,CAAA,CAAA;ACmBR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACwB,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACM,OAAA;AAAA;AAAA;AAAA;AAAA,IAC7B,OAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAIkC,SAAA;AAAA,MAK5B,MAAA;AAAA,MACC,SAAAL,EAAA;AAAA,MACmB,WAAA,CAAAM,MAAA,OAAA,OAAAN,CAAA,EAAA,SAAAM,CAAA;AAAA,IAC2D;AAAA;AAAA;AAAA;AAAA,IACxF,UAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA,EAKwC;AAAA,EAC5C,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEI,UAAAC,IAAAC,EAAA;AAAA,MAAuC,OAAAH,EAAA,SAAAI,EAAAH,CAAA,EAAA,SAAA;AAAA,MACe,iBAAA;AAAA,IACjC,CAAA,GAGrBI,IAAAC,EAAA,OAAA;AAAA,MAA8C,CAAA,UAAAN,EAAA,SAAA,GAAAA,EAAA;AAAA,IACP,EAAA,GAGvCO,IAAAD,EAAA,MAAAN,EAAA,SAAAI,EAAAH,CAAA,EAAA,SAAA,KAAA,KAAA,GACAO,IAAAF,EAAA,MAAAN,EAAA,YAAAO,EAAA,MAAA,SAAAP,EAAA,QAAA,GAEAS,IAAAH,EAAA,MACIN,EAAA,YAIAQ,EAAA,QAAA,GAAAD,EAAA,MAAA,MAAA,GAAAP,EAAA,QAAA,SAHIO,EAAA,KAKe;AAGvB,WAAA;AAAA;AAAA,MAAO,mBAAAL;AAAA,MAEH,cAAAK;AAAA,MACA,eAAAE;AAAA,MACA,uBAAAJ;AAAA,MACA,mBAAAG;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;;AAzEK,SAAAE,GAAAC,EAAA,GAAAC,EAAA,QAAA;AAAA,IAA6B,OAAAC,EAAA,CAAA,SAAAC,EAAA,qBAAA,CAAA;AAAA,IACnB,cAAAA,EAAA;AAAA,IAEX,MAAA;AAAA,EAAA,GAAA;AAAA,IAAgDC,EAAAC,GAAA;AAAA,MAAA,OAAA;AAAA,MAAQ,IAAA;AAAA,MAAW,SAAA;AAAA;;;;;;;;;;;;"}

package/dist/textarea.js

@@ -1,38 +1,38 @@
-import { openBlock as n, createElementBlock as v, mergeProps as x, toDisplayString as b, createCommentVNode as i, pushScopeId as ee, popScopeId as ae, createElementVNode as P, defineComponent as te, toRefs as le, ref as h, toRef as re, computed as s, watch as $, nextTick as oe, onMounted as ne, resolveComponent as C, normalizeClass as E, normalizeStyle as w, createVNode as L, withCtx as c, createTextVNode as y, createBlock as p, withKeys as N } from "vue";
-import { B as se, a as ie } from "./chunks/index.222d29b0.js";
-import { B as ue, a as de } from "./chunks/button.e1c39f66.js";
-import { _ as U } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { g as ce } from "./chunks/unique-id.a2a2b458.js";
+import { openBlock as s, createElementBlock as L, mergeProps as le, toDisplayString as f, createCommentVNode as u, pushScopeId as re, popScopeId as oe, createElementVNode as k, defineComponent as se, toRefs as F, ref as C, toRef as ne, computed as i, watch as B, nextTick as ie, onMounted as ue, resolveComponent as E, normalizeClass as S, normalizeStyle as H, createVNode as I, withCtx as c, createTextVNode as y, createBlock as p, withKeys as N } from "vue";
+import { B as de } from "./chunks/index.89b00b94.js";
+import { a as ce } from "./chunks/button.a8462029.js";
+import { _ as M } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { g as be } from "./chunks/unique-id.a2a2b458.js";
 import { o as pe } from "./chunks/resize.a041304d.js";
-import { u as be } from "./chunks/i18n.6c402773.js";
+import { u as fe } from "./chunks/i18n.6c402773.js";
 import { u as me } from "./chunks/aria-label.ac9651a5.js";
-import { u as fe } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { E as ye } from "./chunks/error-message.ddfe8ea5.js";
-import "./assets/index34.css";
-var T = /* @__PURE__ */ ((e) => (e.HORIZONTAL = "horizontal", e.VERTICAL = "vertical", e.BOTH = "both", e.NONE = "none", e))(T || {}), m = /* @__PURE__ */ ((e) => (e.CLEARABLE = "clearable", e.DISABLED = "disabled", e.ERROR = "error", e.READONLY = "readonly", e))(m || {}), l = /* @__PURE__ */ ((e) => (e.BLUR = "blur", e.CHANGE = "change", e.CLEAR = "clear", e.ESCAPE_PRESSED = "escape-pressed", e.FOCUS = "focus", e.INPUT = "input", e))(l || {});
-let F = 0;
-const ve = {
+import { u as ve } from "./chunks/use-form-layout-loading.d03e5d48.js";
+import { E as ge } from "./chunks/error-message.9acead25.js";
+import "./assets/index39.css";
+var O = /* @__PURE__ */ ((e) => (e.HORIZONTAL = "horizontal", e.VERTICAL = "vertical", e.BOTH = "both", e.NONE = "none", e))(O || {}), m = /* @__PURE__ */ ((e) => (e.CLEARABLE = "clearable", e.DISABLED = "disabled", e.ERROR = "error", e.READONLY = "readonly", e))(m || {}), t = /* @__PURE__ */ ((e) => (e.BLUR = "blur", e.CHANGE = "change", e.CLEAR = "clear", e.ESCAPE_PRESSED = "escape-pressed", e.FOCUS = "focus", e.INPUT = "input", e))(t || {});
+let U = 0;
+const he = {
   beforeCreate() {
-    this.uuid = F.toString(), F += 1;
+    this.uuid = U.toString(), U += 1;
   }
-}, ge = (e) => (ee("data-v-3c9e4cfb"), e = e(), ae(), e), he = { key: 0 }, Ce = /* @__PURE__ */ ge(() => /* @__PURE__ */ P("path", {
+}, Ce = (e) => (re("data-v-3c9e4cfb"), e = e(), oe(), e), ye = { key: 0 }, Le = /* @__PURE__ */ Ce(() => /* @__PURE__ */ k("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M2.25 8C2.25 4.82436 4.82436 2.25 8 2.25C11.1756 2.25 13.75 4.82436 13.75 8C13.75 11.1756 11.1756 13.75 8 13.75C4.82436 13.75 2.25 11.1756 2.25 8ZM5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L6.93934 8L5.46967 9.46967C5.17678 9.76256 5.17678 10.2374 5.46967 10.5303C5.76256 10.8232 6.23744 10.8232 6.53033 10.5303L8 9.06066L9.46967 10.5303C9.76256 10.8232 10.2374 10.8232 10.5303 10.5303C10.8232 10.2374 10.8232 9.76256 10.5303 9.46967L9.06066 8L10.5303 6.53033C10.8232 6.23744 10.8232 5.76256 10.5303 5.46967C10.2374 5.17678 9.76256 5.17678 9.46967 5.46967L8 6.93934L6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function Ee(e, a, _, u, S, B) {
-  return n(), v("svg", x({ role: "img" }, e.$attrs, {
+function _e(e, l, n, d, $, r) {
+  return s(), L("svg", le({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (n(), v("title", he, b(e.$attrs["svg-title"]), 1)) : i("", !0),
-    Ce
+    e.$attrs["svg-title"] ? (s(), L("title", ye, f(e.$attrs["svg-title"]), 1)) : u("", !0),
+    Le
   ], 16);
 }
-const Le = /* @__PURE__ */ U(ve, [["render", Ee], ["__scopeId", "data-v-3c9e4cfb"]]), H = {
+const Ee = /* @__PURE__ */ M(he, [["render", _e], ["__scopeId", "data-v-3c9e4cfb"]]), D = {
   "en-US": {
     clearText: "Clear text",
     optional: "optional",
@@ -40,10 +40,10 @@ const Le = /* @__PURE__ */ U(ve, [["render", Ee], ["__scopeId", "data-v-3c9e4cfb
     textarea: "textarea",
     yourTextCanBenAtMost: "Your text can be at most {characterLimit} characters"
   }
-}, _e = te({
-  i18n: { messages: H },
+}, Se = se({
+  i18n: { messages: D },
   name: "bento-textarea",
-  components: { BentoButton: ue, BentoTypography: se, ErrorMessage: ye, CrossCircleFillSmallIcon: Le },
+  components: { BentoButton: ce, BentoTypography: de, ErrorMessage: ge, CrossCircleFillSmallIcon: Ee },
   props: {
     /**
      * Text that labels an the input element
@@ -94,8 +94,8 @@ const Le = /* @__PURE__ */ U(ve, [["render", Ee], ["__scopeId", "data-v-3c9e4cfb
      */
     resizable: {
       type: String,
-      default: T.BOTH,
-      validator: (e) => Object.values(T).includes(e)
+      default: O.BOTH,
+      validator: (e) => Object.values(O).includes(e)
     },
     /**
      * Highlights the textarea is required.
@@ -107,231 +107,232 @@ const Le = /* @__PURE__ */ U(ve, [["render", Ee], ["__scopeId", "data-v-3c9e4cfb
     value: { type: String, default: "" }
   },
   emits: [
-    l.BLUR,
-    l.CHANGE,
-    l.CLEAR,
-    l.ESCAPE_PRESSED,
-    l.FOCUS,
-    l.INPUT
+    t.BLUR,
+    t.CHANGE,
+    t.CLEAR,
+    t.ESCAPE_PRESSED,
+    t.FOCUS,
+    t.INPUT
   ],
-  setup(e, { emit: a }) {
-    const { ariaLabel: _, height: u, label: S } = le(e), B = ce("textarea"), t = h(null), r = h(e.value), f = 44, d = h(e.height || `${f}px`), o = h("100%"), { t: A } = be({ messages: H }), { isReadOnly: g } = fe(re(e, "readonly")), D = s(() => `${r.value.length} / ${e.characterLimit}`), I = s(
-      () => e.characterLimit && r.value.length > e.characterLimit
+  setup(e, { attrs: l, emit: n }) {
+    const { height: d } = F(e), $ = be("textarea"), r = C(null), a = C(e.value), v = 44, b = C(e.height || `${v}px`), g = C("100%"), { t: o } = fe({ messages: D }), { isReadOnly: _ } = ve(ne(e, "readonly")), T = i(() => `${a.value.length} / ${e.characterLimit}`), A = i(
+      () => e.characterLimit && a.value.length > e.characterLimit
     ), R = () => {
-      t.value && t.value.scrollHeight > f && (d.value = `${t.value.scrollHeight + 3}px`);
+      r.value && r.value.scrollHeight > v && (b.value = `${r.value.scrollHeight + 3}px`);
     };
-    $(u, () => {
-      u.value ? d.value = u.value : R();
-    }), $(
+    B(d, () => {
+      d.value ? b.value = d.value : R();
+    }), B(
       () => e.value,
       () => {
-        r.value = e.value;
+        a.value = e.value;
       },
       { immediate: !0 }
-    ), $(
-      () => r.value,
+    ), B(
+      () => a.value,
       async () => {
-        if (!u.value) {
-          if (d.value = `${f}px`, !r.value)
+        if (!d.value) {
+          if (b.value = `${v}px`, !a.value)
             return;
-          await oe(), R();
+          await ie(), R();
         }
       },
       { immediate: !0 }
     );
-    const k = s(() => !!e.errorMessage || I.value), M = s(() => ({
+    const w = i(() => !!e.errorMessage || A.value), V = i(() => ({
       [`b-textarea--${m.DISABLED}`]: e.disabled
-    })), V = s(() => ({
+    })), q = i(() => ({
       [`b-textarea__input--${m.CLEARABLE}`]: e.clearable,
-      [`b-textarea__input--${m.READONLY}`]: g.value,
-      [`b-textarea__input--${m.ERROR}`]: k.value,
-      ["b-textarea__input--dynamic-height"]: !u.value
-    })), q = s(() => ({
+      [`b-textarea__input--${m.READONLY}`]: _.value,
+      [`b-textarea__input--${m.ERROR}`]: w.value,
+      ["b-textarea__input--dynamic-height"]: !d.value
+    })), K = i(() => ({
       ["b-textarea__label-box--no-label"]: !e.label
-    })), K = s(() => ({
-      [`b-textarea__label-item--${m.ERROR}`]: I.value
-    })), W = s(
-      () => A("yourTextCanBenAtMost", { characterLimit: e.characterLimit })
-    ), z = me({
-      ariaLabel: _,
-      label: S,
-      defaultFallback: A("textarea")
-    }), Y = s(
-      () => e.clearable && r.value && !e.disabled && !g.value
-    ), G = () => {
-      r.value = "", a(l.CLEAR), a(l.INPUT, "");
-    }, Z = (O) => {
-      !e.disabled && !g.value && (r.value = O.target.value, a(l.INPUT, r.value));
-    }, j = () => {
-      t.value.scrollTop = 0, a(l.BLUR);
-    }, J = () => {
-      t.value.focus(), a(l.FOCUS);
-    }, Q = () => {
-      a(l.CHANGE);
+    })), W = i(() => ({
+      [`b-textarea__label-item--${m.ERROR}`]: A.value
+    })), z = i(
+      () => o("yourTextCanBenAtMost", { characterLimit: e.characterLimit })
+    ), G = C(l["aria-label"]), { ariaLabel: Y, label: Z } = F(e), j = me({
+      ariaLabel: G.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: Y,
+      defaultFallback: Z
+    }), x = i(
+      () => e.clearable && a.value && !e.disabled && !_.value
+    ), J = () => {
+      a.value = "", n(t.CLEAR), n(t.INPUT, "");
+    }, Q = (h) => {
+      !e.disabled && !_.value && (a.value = h.target.value, n(t.INPUT, a.value));
     }, X = () => {
-      a(l.ESCAPE_PRESSED);
+      r.value.scrollTop = 0, n(t.BLUR);
+    }, ee = () => {
+      r.value.focus(), n(t.FOCUS);
+    }, ae = () => {
+      n(t.CHANGE);
+    }, te = () => {
+      n(t.ESCAPE_PRESSED);
     };
-    return ne(() => {
-      pe(t.value, () => {
-        o.value = `${t.value.offsetWidth}px`;
-      }), u.value || R();
+    return ue(() => {
+      pe(r.value, () => {
+        var P;
+        const h = (P = r == null ? void 0 : r.value) == null ? void 0 : P.offsetWidth;
+        g.value = h ? `${h}px` : "100%";
+      }), d.value || R();
     }), {
       // Enums
-      BentoButtonVariant: de,
-      BentoTextareaEvent: l,
-      BentoTypographyElement: ie,
+      BentoTextareaEvent: t,
       // Methods
-      onBlur: j,
-      onChange: Q,
-      onClear: G,
-      onFocus: J,
-      onInput: Z,
-      onPressEscape: X,
-      t: A,
+      onBlur: X,
+      onChange: ae,
+      onClear: J,
+      onFocus: ee,
+      onInput: Q,
+      onPressEscape: te,
+      t: o,
       // Values
-      computedAriaLabel: z,
-      conditionalClasses: M,
-      conditionalClassesLabelItem: K,
-      conditionalClassesLabelBox: q,
-      counter: D,
-      counterErrorText: W,
-      conditionalClassesInput: V,
-      invalidInput: k,
-      isOverCharacterLimit: I,
-      isReadOnly: g,
-      showClearButton: Y,
-      textareaElement: t,
-      textareaHeight: d,
-      textareaId: B,
-      textareaValue: r,
-      textareaWidth: o
+      computedAriaLabel: j,
+      conditionalClasses: V,
+      conditionalClassesLabelItem: W,
+      conditionalClassesLabelBox: K,
+      counter: T,
+      counterErrorText: z,
+      conditionalClassesInput: q,
+      invalidInput: w,
+      isOverCharacterLimit: A,
+      isReadOnly: _,
+      showClearButton: x,
+      textareaElement: r,
+      textareaHeight: b,
+      textareaId: $,
+      textareaValue: a,
+      textareaWidth: g
     };
   }
 });
-const Se = ["for"], Be = ["id", "value", "aria-label", "aria-invalid", "readonly", "disabled", "placeholder"], Ae = {
+const Ie = ["for"], $e = ["id", "value", "aria-label", "aria-invalid", "readonly", "disabled", "placeholder"], Ae = {
   key: 0,
   class: "b-textarea__clear-button"
 };
-function Ie(e, a, _, u, S, B) {
-  const t = C("bento-typography"), r = C("cross-circle-fill-small-icon"), f = C("bento-button"), d = C("error-message");
-  return n(), v("div", {
-    class: E(["b-textarea", e.conditionalClasses]),
-    style: w({ width: e.textareaWidth })
+function Re(e, l, n, d, $, r) {
+  const a = E("bento-typography"), v = E("cross-circle-fill-small-icon"), b = E("bento-button"), g = E("error-message");
+  return s(), L("div", {
+    class: S(["b-textarea", e.conditionalClasses]),
+    style: H({ width: e.textareaWidth })
   }, [
-    P("div", {
-      class: E(["b-textarea__label-box", e.conditionalClassesLabelBox])
+    k("div", {
+      class: S(["b-textarea__label-box", e.conditionalClassesLabelBox])
     }, [
-      e.label ? (n(), v("label", {
+      e.label ? (s(), L("label", {
         key: 0,
         for: e.textareaId,
         class: "b-textarea__label"
       }, [
-        L(t, {
-          el: e.BentoTypographyElement.SPAN,
+        I(a, {
+          el: "span",
           stronger: ""
         }, {
           default: c(() => [
-            y(b(e.label), 1)
+            y(f(e.label), 1)
           ]),
           _: 1
-        }, 8, ["el"]),
-        e.optional && !e.required ? (n(), p(t, {
+        }),
+        e.optional && !e.required ? (s(), p(a, {
           key: 0,
-          el: e.BentoTypographyElement.SPAN,
+          el: "span",
           class: "b-textarea__label-item"
         }, {
           default: c(() => [
-            y(" (" + b(e.t("optional")) + ") ", 1)
+            y(" (" + f(e.t("optional")) + ") ", 1)
           ]),
           _: 1
-        }, 8, ["el"])) : i("", !0),
-        e.required ? (n(), p(t, {
+        })) : u("", !0),
+        e.required ? (s(), p(a, {
           key: 1,
-          el: e.BentoTypographyElement.SPAN,
+          el: "span",
           class: "b-textarea__label-item"
         }, {
           default: c(() => [
-            y(" (" + b(e.t("required")) + ") ", 1)
+            y(" (" + f(e.t("required")) + ") ", 1)
           ]),
           _: 1
-        }, 8, ["el"])) : i("", !0)
-      ], 8, Se)) : i("", !0),
-      e.characterLimit ? (n(), p(t, {
+        })) : u("", !0)
+      ], 8, Ie)) : u("", !0),
+      e.characterLimit ? (s(), p(a, {
         key: 1,
-        el: e.BentoTypographyElement.SPAN,
-        class: E(["b-textarea__label-item", e.conditionalClassesLabelItem])
+        el: "span",
+        class: S(["b-textarea__label-item", e.conditionalClassesLabelItem])
       }, {
         default: c(() => [
-          y(b(e.counter), 1)
+          y(f(e.counter), 1)
         ]),
         _: 1
-      }, 8, ["el", "class"])) : i("", !0)
+      }, 8, ["class"])) : u("", !0)
     ], 2),
-    L(t, {
-      el: e.BentoTypographyElement.DIV,
+    I(a, {
+      el: "div",
       class: "b-textarea__input-box",
       "aria-disabled": e.disabled
     }, {
       default: c(() => [
-        P("textarea", {
+        k("textarea", {
           id: e.textareaId,
           ref: "textareaElement",
           value: e.textareaValue,
-          class: E(["b-textarea__input", e.conditionalClassesInput]),
+          class: S(["b-textarea__input", e.conditionalClassesInput]),
           "aria-label": e.computedAriaLabel,
           "aria-invalid": e.invalidInput,
           readonly: e.isReadOnly,
           disabled: e.disabled,
           placeholder: e.placeholder,
-          style: w({ resize: e.resizable, height: e.textareaHeight }),
-          onBlur: a[0] || (a[0] = (...o) => e.onBlur && e.onBlur(...o)),
-          onChange: a[1] || (a[1] = (...o) => e.onChange && e.onChange(...o)),
-          onFocus: a[2] || (a[2] = (...o) => e.onFocus && e.onFocus(...o)),
-          onInput: a[3] || (a[3] = (...o) => e.onInput && e.onInput(...o)),
-          onKeydown: a[4] || (a[4] = N((...o) => e.onPressEscape && e.onPressEscape(...o), ["esc"]))
+          style: H({ resize: e.resizable, height: e.textareaHeight }),
+          onBlur: l[0] || (l[0] = (...o) => e.onBlur && e.onBlur(...o)),
+          onChange: l[1] || (l[1] = (...o) => e.onChange && e.onChange(...o)),
+          onFocus: l[2] || (l[2] = (...o) => e.onFocus && e.onFocus(...o)),
+          onInput: l[3] || (l[3] = (...o) => e.onInput && e.onInput(...o)),
+          onKeydown: l[4] || (l[4] = N((...o) => e.onPressEscape && e.onPressEscape(...o), ["esc"]))
         }, `
-            `, 46, Be),
-        e.showClearButton ? (n(), v("div", Ae, [
-          L(f, {
-            variant: e.BentoButtonVariant.TERTIARY,
+            `, 46, $e),
+        e.showClearButton ? (s(), L("div", Ae, [
+          I(b, {
+            variant: "tertiary",
             disabled: e.disabled,
             onClick: e.onClear,
             onKeypress: N(e.onClear, ["enter"]),
             onKeyup: N(e.onClear, ["space"])
           }, {
             iconLeft: c(() => [
-              L(r, {
+              I(v, {
                 "svg-title": e.t("clearText")
               }, null, 8, ["svg-title"])
             ]),
             _: 1
-          }, 8, ["variant", "disabled", "onClick", "onKeypress", "onKeyup"])
-        ])) : i("", !0)
+          }, 8, ["disabled", "onClick", "onKeypress", "onKeyup"])
+        ])) : u("", !0)
       ]),
       _: 1
-    }, 8, ["el", "aria-disabled"]),
-    e.isOverCharacterLimit ? (n(), p(d, {
+    }, 8, ["aria-disabled"]),
+    e.isOverCharacterLimit ? (s(), p(g, {
       key: 0,
       "error-message": e.counterErrorText
-    }, null, 8, ["error-message"])) : i("", !0),
-    e.errorMessage ? (n(), p(d, {
+    }, null, 8, ["error-message"])) : u("", !0),
+    e.errorMessage ? (s(), p(g, {
       key: 1,
       "error-message": e.errorMessage
-    }, null, 8, ["error-message"])) : i("", !0),
-    e.description ? (n(), p(t, {
+    }, null, 8, ["error-message"])) : u("", !0),
+    e.description ? (s(), p(a, {
       key: 2,
       class: "b-textarea__description",
-      el: e.BentoTypographyElement.SPAN
+      el: "span"
     }, {
       default: c(() => [
-        y(b(e.description), 1)
+        y(f(e.description), 1)
       ]),
       _: 1
-    }, 8, ["el"])) : i("", !0)
+    })) : u("", !0)
   ], 6);
 }
-const Ue = /* @__PURE__ */ U(_e, [["render", Ie], ["__scopeId", "data-v-c644bdce"]]);
+const Me = /* @__PURE__ */ M(Se, [["render", Re], ["__scopeId", "data-v-12df95db"]]);
 export {
-  Ue as BentoTextarea
+  Me as BentoTextarea
 };
 //# sourceMappingURL=textarea.js.map