@adyen/bento-vue2 1.5.0 → 1.6.0

package/dist/tabs.js

@@ -1,10 +1,10 @@
-import { defineComponent as p, ref as _, provide as u, computed as x, inject as f, onUnmounted as C, watch as A, nextTick as w } from "vue";
-import { E as N, T as m, a as I } from "./chunks/tabs.keys.358742f2.js";
+import { defineComponent as p, toRefs as x, ref as _, provide as u, computed as C, inject as f, onUnmounted as A, watch as w, nextTick as N } from "vue";
+import { E as k, T as m, a as I } from "./chunks/tabs.keys.358742f2.js";
 import { n as g } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as k } from "./chunks/index.1645ffcb.js";
-import { g as B } from "./chunks/unique-id.a2a2b458.js";
-import "./assets/index27.css";
-const R = p({
+import { B } from "./chunks/index.74da0d41.js";
+import { g as R } from "./chunks/unique-id.a2a2b458.js";
+import "./assets/index43.css";
+const S = p({
   props: {
     /**
      * Title of the tab
@@ -22,28 +22,28 @@ const R = p({
     }
   },
   setup(s) {
-    const e = _();
-    u(N, (T) => {
-      e.value = T;
+    const { disabled: e } = x(s), t = _();
+    u(k, (r) => {
+      t.value = r;
     });
-    const i = x(() => e.value ?? s.title), n = f(m), c = f(I), { id: l, unregisterTab: b } = n({ disabled: s.disabled, title: i });
-    return C(() => b()), { activeTabId: c, id: l, computedTitle: i };
+    const a = C(() => t.value ?? s.title), c = f(m), i = f(I), { id: b, unregisterTab: T } = c({ disabled: e, title: a });
+    return A(() => T()), { activeTabId: i, id: b, computedTitle: a };
   }
 });
-var S = function() {
+var K = function() {
   var e = this, t = e._self._c;
   return e._self._setupProxy, t("div", { directives: [{ name: "show", rawName: "v-show", value: e.activeTabId === e.id, expression: "activeTabId === id" }], attrs: { id: `${e.id}-tabpanel`, role: "tabpanel", "aria-labelledby": e.id } }, [e._t("default")], 2);
-}, K = [], D = /* @__PURE__ */ g(
-  R,
+}, D = [], L = /* @__PURE__ */ g(
   S,
   K,
+  D,
   !1,
   null,
   null,
   null,
   null
 );
-const U = D.exports, y = (s, e) => {
+const j = L.exports, y = (s, e) => {
   const t = s === 0 ? e.length - 1 : s - 1;
   return e[t].disabled ? y(t, e) : t;
 }, h = (s, e) => {
@@ -51,9 +51,9 @@ const U = D.exports, y = (s, e) => {
   return e[t].disabled ? h(t, e) : t;
 };
 var v = /* @__PURE__ */ ((s) => (s.ACTIVE_TAB_INDEX = "update:active-tab-index", s))(v || {});
-const L = p({
+const O = p({
   components: {
-    BentoTypography: k
+    BentoTypography: B
   },
   props: {
     /**
@@ -63,71 +63,71 @@ const L = p({
   },
   emits: [v.ACTIVE_TAB_INDEX],
   setup(s, { emit: e }) {
-    const t = _([]), i = _(null), n = _("");
-    u(I, n);
+    const t = _([]), l = _(null), a = _("");
+    u(I, a);
     const c = (r) => () => {
       var o;
-      t.value = (o = t.value) == null ? void 0 : o.filter(({ id: a }) => a !== r);
+      t.value = (o = t.value) == null ? void 0 : o.filter(({ id: n }) => n !== r);
     };
     u(m, ({ title: r, disabled: o }) => {
-      const a = B("b-tab");
-      return t.value.push({ disabled: o, id: a, title: r }), { id: a, unregisterTab: c(a) };
+      const n = R("b-tab");
+      return t.value.push({ disabled: o, id: n, title: r }), { id: n, unregisterTab: c(n) };
     });
     const b = (r) => {
       if (r.code === "ArrowLeft" || r.code === "ArrowRight") {
         const o = t.value.find((d) => document.activeElement.id === d.id);
-        let a = t.value.indexOf(o);
-        r.code === "ArrowLeft" ? a = y(a, t.value) : r.code === "ArrowRight" && (a = h(a, t.value)), i.value.children[a].focus();
+        let n = t.value.indexOf(o);
+        r.code === "ArrowLeft" ? n = y(n, t.value) : r.code === "ArrowRight" && (n = h(n, t.value)), l.value.children[n].focus();
       }
     };
-    return A(
+    return w(
       [() => s.activeTabIndex, t],
       ([r, o]) => {
-        w(() => {
+        N(() => {
           var d;
-          const a = o[r];
-          n.value = a && !a.disabled ? a.id : (d = t.value.find(({ disabled: E }) => !E)) == null ? void 0 : d.id;
+          const n = o[r];
+          a.value = n && !n.disabled ? n.id : (d = t.value.find(({ disabled: E }) => !E)) == null ? void 0 : d.id;
         });
       },
       { immediate: !0 }
     ), {
       tabs: t,
-      tablist: i,
-      activeTabId: n,
+      tablist: l,
+      activeTabId: a,
       onKeydownTabsNavigation: b,
       handleTabChange: (r) => {
-        n.value = r;
-        const o = t.value.findIndex(({ id: a }) => a === n.value);
+        a.value = r;
+        const o = t.value.findIndex(({ id: n }) => n === a.value);
         e(v.ACTIVE_TAB_INDEX, o);
       }
     };
   }
 });
-var O = function() {
+var X = function() {
   var e = this, t = e._self._c;
-  return e._self._setupProxy, t("div", { staticClass: "b-tabs" }, [t("div", { ref: "tablist", staticClass: "b-tabs__tab-list", attrs: { role: "tablist" }, on: { keydown: e.onKeydownTabsNavigation } }, e._l(e.tabs, function({ disabled: i, id: n, title: c }) {
-    return t("button", { key: n, staticClass: "b-tabs__tab", class: {
-      "b-tabs__tab--active": e.activeTabId === n,
-      "b-tabs__tab--disabled": i
-    }, attrs: { id: n, role: "tab", type: "button", "aria-controls": `${n}-tabpanel`, "aria-selected": e.activeTabId === n ? "true" : "false", tabindex: e.activeTabId === n && !i ? null : -1, disabled: i }, on: { click: function(l) {
-      return e.handleTabChange(n);
-    }, keydown: function(l) {
-      return !l.type.indexOf("key") && e._k(l.keyCode, "enter", 13, l.key, "Enter") && e._k(l.keyCode, "space", 32, l.key, [" ", "Spacebar"]) ? null : e.handleTabChange(n);
-    } } }, [t("bento-typography", { staticClass: "b-tabs__tab-title", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(c) + " ")]), t("span", { directives: [{ name: "show", rawName: "v-show", value: !i, expression: "!disabled" }], staticClass: "b-tabs__tab-underline" })], 1);
+  return e._self._setupProxy, t("div", { staticClass: "b-tabs" }, [t("div", { ref: "tablist", staticClass: "b-tabs__tab-list", attrs: { role: "tablist" }, on: { keydown: e.onKeydownTabsNavigation } }, e._l(e.tabs, function({ disabled: l, id: a, title: c }) {
+    return t("button", { key: a, staticClass: "b-tabs__tab", class: {
+      "b-tabs__tab--active": e.activeTabId === a,
+      "b-tabs__tab--disabled": l
+    }, attrs: { id: a, role: "tab", type: "button", "aria-controls": `${a}-tabpanel`, "aria-selected": e.activeTabId === a ? "true" : "false", tabindex: e.activeTabId === a && !l ? null : -1, disabled: l.value }, on: { click: function(i) {
+      return e.handleTabChange(a);
+    }, keydown: function(i) {
+      return !i.type.indexOf("key") && e._k(i.keyCode, "enter", 13, i.key, "Enter") && e._k(i.keyCode, "space", 32, i.key, [" ", "Spacebar"]) ? null : e.handleTabChange(a);
+    } } }, [t("bento-typography", { staticClass: "b-tabs__tab-title", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(c) + " ")]), t("span", { directives: [{ name: "show", rawName: "v-show", value: !l, expression: "!disabled" }], staticClass: "b-tabs__tab-underline" })], 1);
   }), 0), e._t("default")], 2);
-}, X = [], Y = /* @__PURE__ */ g(
-  L,
+}, Y = [], P = /* @__PURE__ */ g(
   O,
   X,
+  Y,
   !1,
   null,
-  "6340bec3",
+  "f622e487",
   null,
   null
 );
-const j = Y.exports;
+const q = P.exports;
 export {
-  U as BentoTab,
-  j as BentoTabs
+  j as BentoTab,
+  q as BentoTabs
 };
 //# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../src/components/tabs/components/tab.vue","../src/components/tabs/tabs.utils.ts","../src/components/tabs/tabs.types.ts","../src/components/tabs/tabs.vue"],"sourcesContent":["<template>\n    <div v-show=\"activeTabId === id\" :id=\"`${id}-tabpanel`\" role=\"tabpanel\" :aria-labelledby=\"id\">\n        <slot></slot>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, onUnmounted, provide, ref } from 'vue';\n    import {\n        EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY,\n        TABS_ACTIVE_TAB_ID_KEY,\n        TABS_REGISTER_TAB_INJECTION_KEY,\n    } from '../tabs.keys';\n    import { BentoTabsRegisterTab } from '../tabs.types';\n    import { BentoTabProvidedTitle } from './tab.types';\n\n    export default defineComponent({\n        props: {\n            /**\n             * Title of the tab\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Determines whether the tab is disabled\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            // External title injection\n            const componentTitle = ref();\n            const setTitle: BentoTabProvidedTitle = (value: string) => {\n                componentTitle.value = value;\n            };\n            provide(EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, setTitle);\n\n            const computedTitle = computed(() => (componentTitle.value ?? props.title) as string);\n\n            const registerTab: BentoTabsRegisterTab = inject(TABS_REGISTER_TAB_INJECTION_KEY);\n            const activeTabId = inject(TABS_ACTIVE_TAB_ID_KEY);\n\n            const { id, unregisterTab } = registerTab({ disabled: props.disabled, title: computedTitle });\n\n            onUnmounted(() => unregisterTab());\n\n            return { activeTabId, id, computedTitle };\n        },\n    });\n</script>\n","import { BentoTab } from './components/tab.types';\n\nexport const getPreviousTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === 0 ? tabsValue.length - 1 : activeTabIndex - 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getPreviousTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n\nexport const getNextTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === tabsValue.length - 1 ? 0 : activeTabIndex + 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getNextTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n","import type { Ref } from 'vue';\n\nexport type BentoTabsRegisterTab = (props: {\n    disabled: boolean;\n    title: Ref<string>;\n}) => { id: string; unregisterTab: () => void };\n\nexport enum BentoTabsEvent {\n    ACTIVE_TAB_INDEX = 'update:active-tab-index',\n}\n","<template>\n    <div class=\"b-tabs\">\n        <div ref=\"tablist\" class=\"b-tabs__tab-list\" role=\"tablist\" @keydown=\"onKeydownTabsNavigation\">\n            <button\n                v-for=\"{ disabled, id, title } in tabs\"\n                :id=\"id\"\n                :key=\"id\"\n                class=\"b-tabs__tab\"\n                :class=\"{\n                    'b-tabs__tab--active': activeTabId === id,\n                    'b-tabs__tab--disabled': disabled,\n                }\"\n                role=\"tab\"\n                type=\"button\"\n                :aria-controls=\"`${id}-tabpanel`\"\n                :aria-selected=\"activeTabId === id ? 'true' : 'false'\"\n                :tabindex=\"activeTabId === id && !disabled ? null : -1\"\n                :disabled=\"disabled\"\n                @click=\"handleTabChange(id)\"\n                @keydown.enter.space=\"handleTabChange(id)\"\n            >\n                <bento-typography class=\"b-tabs__tab-title\" el=\"span\" variant=\"body\" stronger>\n                    {{ title }}\n                </bento-typography>\n                <span v-show=\"!disabled\" class=\"b-tabs__tab-underline\"></span>\n            </button>\n        </div>\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, nextTick, provide, ref, Ref, watch } from 'vue';\n\n    // components\n    import { BentoTypography } from '@/components/typography';\n\n    // utils\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { getNextTabIndex, getPreviousTabIndex } from './tabs.utils';\n\n    // types\n    import { BentoTab } from './components/tab.types';\n    import { BentoTabsEvent, BentoTabsRegisterTab } from './tabs.types';\n\n    // keys\n    import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys';\n\n    /**\n     * Tabs are used to navigate between different, but related content views within a page.\n     * This component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n     *\n     * @example\n     * import { BentoTabs, BentoTab } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTabs, BentoTab },\n     *     template: `\n     *         <bento-tabs v-bind=\"$props\">\n     *             <bento-tab title=\"Maria Ahlefeldt\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *             <bento-tab title=\"Carl Andersen\">\n     *                 (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen.\n     *             </bento-tab>\n     *             <bento-tab title=\"Karl Truffel\">\n     *                 (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel.\n     *             </bento-tab>\n     *             <bento-tab title=\"Maria Ahlefeldt\" :disabled=\"true\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *         </bento-tabs>\n     *     `\n     * };\n     */\n\n    // component\n    export default defineComponent({\n        components: {\n            BentoTypography,\n        },\n        props: {\n            /**\n             * Sets the active tab by its index (0 being the first tab item).\n             */\n            activeTabIndex: { type: Number, default: 0 },\n        },\n        emits: [BentoTabsEvent.ACTIVE_TAB_INDEX],\n        setup(props, { emit }) {\n            const tabs: Ref<BentoTab[]> = ref([]);\n            const tablist = ref(null);\n            const activeTabId = ref('');\n\n            provide(TABS_ACTIVE_TAB_ID_KEY, activeTabId);\n\n            // unregister tab if removed / destroyed\n            const unregisterTab = (tabIdToRemove: string) => () => {\n                tabs.value = tabs.value?.filter(({ id }) => id !== tabIdToRemove);\n            };\n\n            // register tab\n            const registerTab: BentoTabsRegisterTab = ({ title, disabled }) => {\n                const id = generateUid('b-tab');\n\n                // add tab to tabs\n                tabs.value.push({ disabled, id, title });\n\n                // return values to the Tab component\n                return { id, unregisterTab: unregisterTab(id) };\n            };\n\n            // provide activeTab and registerTab to tab items\n            provide(TABS_REGISTER_TAB_INJECTION_KEY, registerTab);\n\n            // keyboard navigation\n            const onKeydownTabsNavigation = (e: KeyboardEvent) => {\n                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n                    // find tab that is focussed\n                    const activeTab = tabs.value.find(tab => document.activeElement.id === tab.id);\n                    let activeTabIndex = tabs.value.indexOf(activeTab);\n\n                    // conditionally increase or decrease the\n                    if (e.code === 'ArrowLeft') {\n                        activeTabIndex = getPreviousTabIndex(activeTabIndex, tabs.value);\n                    } else if (e.code === 'ArrowRight') {\n                        activeTabIndex = getNextTabIndex(activeTabIndex, tabs.value);\n                    }\n\n                    // focus new active tab\n                    tablist.value.children[activeTabIndex].focus();\n                }\n            };\n\n            watch(\n                [() => props.activeTabIndex, tabs],\n                ([index, currentTabs]) => {\n                    nextTick(() => {\n                        const tab = currentTabs[index];\n                        activeTabId.value =\n                            tab && !tab.disabled ? tab.id : tabs.value.find(({ disabled }) => !disabled)?.id;\n                    });\n                },\n                { immediate: true }\n            );\n\n            const handleTabChange = (tabId: string) => {\n                activeTabId.value = tabId;\n                const activeIndex = tabs.value.findIndex(({ id }) => id === activeTabId.value);\n                emit(BentoTabsEvent.ACTIVE_TAB_INDEX, activeIndex);\n            };\n\n            return {\n                tabs,\n                tablist,\n                activeTabId,\n                onKeydownTabsNavigation,\n                handleTabChange,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tabs.scss\" />\n"],"names":["_sfc_main$1","defineComponent","props","componentTitle","ref","provide","EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY","value","computedTitle","computed","registerTab","inject","TABS_REGISTER_TAB_INJECTION_KEY","activeTabId","TABS_ACTIVE_TAB_ID_KEY","id","unregisterTab","onUnmounted","getPreviousTabIndex","activeTabIndex","tabsValue","newActiveTabIndex","getNextTabIndex","BentoTabsEvent","BentoTabsEvent2","_sfc_main","BentoTypography","emit","tabs","tablist","tabIdToRemove","_a","title","disabled","generateUid","onKeydownTabsNavigation","e","activeTab","tab","watch","index","currentTabs","nextTick","tabId","activeIndex"],"mappings":";;;;;;AAgBA,MAAAA,IAAAC,EAAA;AAAA,EAAA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAGA,UAAAC,IAAAC,EAAA;AAIA,IAAAC,EAAAC,GAHA,CAAAC,MAAA;AACA,MAAAJ,EAAA,QAAAI;AAAA,IAAA,CAEA;AAEA,UAAAC,IAAAC,EAAA,MAAAN,EAAA,SAAAD,EAAA,KAAA,GAEAQ,IAAAC,EAAAC,CAAA,GACAC,IAAAF,EAAAG,CAAA,GAEA,EAAA,IAAAC,GAAA,eAAAC,EAAA,IAAAN,EAAA,EAAA,UAAAR,EAAA,UAAA,OAAAM,EAAA,CAAA;AAEA,WAAAS,EAAA,MAAAD,EAAA,CAAA,GAEA,EAAA,aAAAH,GAAA,IAAAE,GAAA,eAAAP,EAAA;AAAA,EAAA;AAEA,CAAA;;;;;;;;;;;;;;qBClDaU,IAAA,CAAAC,GAAAC,MAAA;AACT,QAAAC,IAAAF,MAAA,IAAAC,EAAA,SAAA,IAAAD,IAAA;AACA,SAAAC,EAAAC,CAAA,EAAA,WACIH,EAAAG,GAAAD,CAAA,IAEJC;AACJ,GAEaC,IAAA,CAAAH,GAAAC,MAAA;AACT,QAAAC,IAAAF,MAAAC,EAAA,SAAA,IAAA,IAAAD,IAAA;AACA,SAAAC,EAAAC,CAAA,EAAA,WACIC,EAAAD,GAAAD,CAAA,IAEJC;AACJ;ACTY,IAAAE,IAAA,kBAAAC,OACRA,EAAA,mBAAA,2BADQA,IAAAD,KAAA,CAAA,CAAA;ACsEZ,MAAAE,IAAAxB,EAAA;AAAA,EAAA,YAAA;AAAA,IACA,iBAAAyB;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,gBAAA,EAAA,MAAA,QAAA,SAAA,EAAA;AAAA,EAIA;AAAA,EACA,OAAA,CAAAH,EAAA,gBAAA;AAAA,EACA,MAAArB,GAAA,EAAA,MAAAyB,EAAA,GAAA;AAEA,UAAAC,IAAAxB,EAAA,CAAA,CAAA,GACAyB,IAAAzB,EAAA,IAAA,GACAS,IAAAT,EAAA,EAAA;AAEA,IAAAC,EAAAS,GAAAD,CAAA;AAGA,UAAAG,IAAA,CAAAc,MAAA,MAAA;;AACA,MAAAF,EAAA,SAAAG,IAAAH,EAAA,UAAA,gBAAAG,EAAA,OAAA,CAAA,EAAA,IAAAhB,EAAA,MAAAA,MAAAe;AAAA,IAAA;AAeA,IAAAzB,EAAAO,GAXA,CAAA,EAAA,OAAAoB,GAAA,UAAAC,EAAA,MAAA;AACA,YAAAlB,IAAAmB,EAAA,OAAA;AAGA,aAAAN,EAAA,MAAA,KAAA,EAAA,UAAAK,GAAA,IAAAlB,GAAA,OAAAiB,EAAA,CAAA,GAGA,EAAA,IAAAjB,GAAA,eAAAC,EAAAD,CAAA,EAAA;AAAA,IAAA,CAIA;AAGA,UAAAoB,IAAA,CAAAC,MAAA;AACA,UAAAA,EAAA,SAAA,eAAAA,EAAA,SAAA,cAAA;AAEA,cAAAC,IAAAT,EAAA,MAAA,KAAA,CAAAU,MAAA,SAAA,cAAA,OAAAA,EAAA,EAAA;AACA,YAAAnB,IAAAS,EAAA,MAAA,QAAAS,CAAA;AAGA,QAAAD,EAAA,SAAA,cACAjB,IAAAD,EAAAC,GAAAS,EAAA,KAAA,IAAAQ,EAAA,SAAA,iBAEAjB,IAAAG,EAAAH,GAAAS,EAAA,KAAA,IAIAC,EAAA,MAAA,SAAAV,CAAA,EAAA,MAAA;AAAA;AAAA,IACA;AAGA,WAAAoB;AAAA,MAAA,CAAA,MAAArC,EAAA,gBAAA0B,CAAA;AAAA,MACA,CAAA,CAAAY,GAAAC,CAAA,MAAA;AAEA,QAAAC,EAAA,MAAA;;AACA,gBAAAJ,IAAAG,EAAAD,CAAA;AACA,UAAA3B,EAAA,QAAAyB,KAAA,CAAAA,EAAA,WAAAA,EAAA,MAAAP,IAAAH,EAAA,MAAA,KAAA,CAAA,EAAA,UAAAK,EAAA,MAAA,CAAAA,CAAA,MAAA,gBAAAF,EAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,MACA,EAAA,WAAA,GAAA;AAAA,IACA,GASA;AAAA,MAAA,MAAAH;AAAA,MACA,SAAAC;AAAA,MACA,aAAAhB;AAAA,MACA,yBAAAsB;AAAA,MACA,iBAVA,CAAAQ,MAAA;AACA,QAAA9B,EAAA,QAAA8B;AACA,cAAAC,IAAAhB,EAAA,MAAA,UAAA,CAAA,EAAA,IAAAb,EAAA,MAAAA,MAAAF,EAAA,KAAA;AACA,QAAAc,EAAAJ,EAAA,kBAAAqB,CAAA;AAAA,MAAA;AAAA,IAQA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tabs.js","sources":["../src/components/tabs/components/tab.vue","../src/components/tabs/tabs.utils.ts","../src/components/tabs/tabs.types.ts","../src/components/tabs/tabs.vue"],"sourcesContent":["<template>\n    <div v-show=\"activeTabId === id\" :id=\"`${id}-tabpanel`\" role=\"tabpanel\" :aria-labelledby=\"id\">\n        <slot></slot>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, onUnmounted, provide, ref, toRefs } from 'vue';\n    import {\n        EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY,\n        TABS_ACTIVE_TAB_ID_KEY,\n        TABS_REGISTER_TAB_INJECTION_KEY,\n    } from '../tabs.keys';\n    import { BentoTabsRegisterTab } from '../tabs.types';\n    import { BentoTabProvidedTitle } from './tab.types';\n\n    export default defineComponent({\n        props: {\n            /**\n             * Title of the tab\n             */\n            title: {\n                type: String,\n                required: true,\n            },\n            /**\n             * Determines whether the tab is disabled\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            // External title injection\n            const { disabled } = toRefs(props);\n            const componentTitle = ref();\n            const setTitle: BentoTabProvidedTitle = (value: string) => {\n                componentTitle.value = value;\n            };\n            provide(EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, setTitle);\n\n            const computedTitle = computed(() => (componentTitle.value ?? props.title) as string);\n\n            const registerTab: BentoTabsRegisterTab = inject(TABS_REGISTER_TAB_INJECTION_KEY);\n            const activeTabId = inject(TABS_ACTIVE_TAB_ID_KEY);\n\n            const { id, unregisterTab } = registerTab({ disabled, title: computedTitle });\n\n            onUnmounted(() => unregisterTab());\n\n            return { activeTabId, id, computedTitle };\n        },\n    });\n</script>\n","import { BentoTab } from './components/tab.types';\n\nexport const getPreviousTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === 0 ? tabsValue.length - 1 : activeTabIndex - 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getPreviousTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n\nexport const getNextTabIndex = (activeTabIndex: number, tabsValue: BentoTab[]) => {\n    const newActiveTabIndex = activeTabIndex === tabsValue.length - 1 ? 0 : activeTabIndex + 1;\n    if (tabsValue[newActiveTabIndex].disabled) {\n        return getNextTabIndex(newActiveTabIndex, tabsValue);\n    }\n    return newActiveTabIndex;\n};\n","import type { Ref } from 'vue';\n\nexport type BentoTabsRegisterTab = (props: {\n    disabled: Ref<boolean>;\n    title: Ref<string>;\n}) => { id: string; unregisterTab: () => void };\n\nexport enum BentoTabsEvent {\n    ACTIVE_TAB_INDEX = 'update:active-tab-index',\n}\n","<template>\n    <div class=\"b-tabs\">\n        <div ref=\"tablist\" class=\"b-tabs__tab-list\" role=\"tablist\" @keydown=\"onKeydownTabsNavigation\">\n            <button\n                v-for=\"{ disabled, id, title } in tabs\"\n                :id=\"id\"\n                :key=\"id\"\n                class=\"b-tabs__tab\"\n                :class=\"{\n                    'b-tabs__tab--active': activeTabId === id,\n                    'b-tabs__tab--disabled': disabled,\n                }\"\n                role=\"tab\"\n                type=\"button\"\n                :aria-controls=\"`${id}-tabpanel`\"\n                :aria-selected=\"activeTabId === id ? 'true' : 'false'\"\n                :tabindex=\"activeTabId === id && !disabled ? null : -1\"\n                :disabled=\"disabled.value\"\n                @click=\"handleTabChange(id)\"\n                @keydown.enter.space=\"handleTabChange(id)\"\n            >\n                <bento-typography class=\"b-tabs__tab-title\" el=\"span\" variant=\"body\" stronger>\n                    {{ title }}\n                </bento-typography>\n                <span v-show=\"!disabled\" class=\"b-tabs__tab-underline\"></span>\n            </button>\n        </div>\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, nextTick, provide, ref, Ref, watch } from 'vue';\n\n    // components\n    import { BentoTypography } from '@/components/typography';\n\n    // utils\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { getNextTabIndex, getPreviousTabIndex } from './tabs.utils';\n\n    // types\n    import { BentoTab } from './components/tab.types';\n    import { BentoTabsEvent, BentoTabsRegisterTab } from './tabs.types';\n\n    // keys\n    import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys';\n\n    /**\n     * Tabs are used to navigate between different, but related content views within a page.\n     * This component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n     *\n     * @example\n     * import { BentoTabs, BentoTab } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTabs, BentoTab },\n     *     template: `\n     *         <bento-tabs v-bind=\"$props\">\n     *             <bento-tab title=\"Maria Ahlefeldt\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *             <bento-tab title=\"Carl Andersen\">\n     *                 (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen.\n     *             </bento-tab>\n     *             <bento-tab title=\"Karl Truffel\">\n     *                 (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel.\n     *             </bento-tab>\n     *             <bento-tab title=\"Maria Ahlefeldt\" :disabled=\"true\">\n     *                 (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark.\n     *             </bento-tab>\n     *         </bento-tabs>\n     *     `\n     * };\n     */\n\n    // component\n    export default defineComponent({\n        components: {\n            BentoTypography,\n        },\n        props: {\n            /**\n             * Sets the active tab by its index (0 being the first tab item).\n             */\n            activeTabIndex: { type: Number, default: 0 },\n        },\n        emits: [BentoTabsEvent.ACTIVE_TAB_INDEX],\n        setup(props, { emit }) {\n            const tabs: Ref<BentoTab[]> = ref([]);\n            const tablist = ref(null);\n            const activeTabId = ref('');\n\n            provide(TABS_ACTIVE_TAB_ID_KEY, activeTabId);\n\n            // unregister tab if removed / destroyed\n            const unregisterTab = (tabIdToRemove: string) => () => {\n                tabs.value = tabs.value?.filter(({ id }) => id !== tabIdToRemove);\n            };\n\n            // register tab\n            const registerTab: BentoTabsRegisterTab = ({ title, disabled }) => {\n                const id = generateUid('b-tab');\n\n                // add tab to tabs\n                tabs.value.push({ disabled, id, title });\n\n                // return values to the Tab component\n                return { id, unregisterTab: unregisterTab(id) };\n            };\n\n            // provide activeTab and registerTab to tab items\n            provide(TABS_REGISTER_TAB_INJECTION_KEY, registerTab);\n\n            // keyboard navigation\n            const onKeydownTabsNavigation = (e: KeyboardEvent) => {\n                if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n                    // find tab that is focussed\n                    const activeTab = tabs.value.find(tab => document.activeElement.id === tab.id);\n                    let activeTabIndex = tabs.value.indexOf(activeTab);\n\n                    // conditionally increase or decrease the\n                    if (e.code === 'ArrowLeft') {\n                        activeTabIndex = getPreviousTabIndex(activeTabIndex, tabs.value);\n                    } else if (e.code === 'ArrowRight') {\n                        activeTabIndex = getNextTabIndex(activeTabIndex, tabs.value);\n                    }\n\n                    // focus new active tab\n                    tablist.value.children[activeTabIndex].focus();\n                }\n            };\n\n            watch(\n                [() => props.activeTabIndex, tabs],\n                ([index, currentTabs]) => {\n                    nextTick(() => {\n                        const tab = currentTabs[index];\n                        activeTabId.value =\n                            tab && !tab.disabled ? tab.id : tabs.value.find(({ disabled }) => !disabled)?.id;\n                    });\n                },\n                { immediate: true }\n            );\n\n            const handleTabChange = (tabId: string) => {\n                activeTabId.value = tabId;\n                const activeIndex = tabs.value.findIndex(({ id }) => id === activeTabId.value);\n                emit(BentoTabsEvent.ACTIVE_TAB_INDEX, activeIndex);\n            };\n\n            return {\n                tabs,\n                tablist,\n                activeTabId,\n                onKeydownTabsNavigation,\n                handleTabChange,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./tabs.scss\" />\n"],"names":["_sfc_main$1","defineComponent","props","disabled","toRefs","componentTitle","ref","provide","EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY","value","computedTitle","computed","registerTab","inject","TABS_REGISTER_TAB_INJECTION_KEY","activeTabId","TABS_ACTIVE_TAB_ID_KEY","id","unregisterTab","onUnmounted","getPreviousTabIndex","activeTabIndex","tabsValue","newActiveTabIndex","getNextTabIndex","BentoTabsEvent","BentoTabsEvent2","_sfc_main","BentoTypography","emit","tabs","tablist","tabIdToRemove","_a","title","generateUid","onKeydownTabsNavigation","e","activeTab","tab","watch","index","currentTabs","nextTick","tabId","activeIndex"],"mappings":"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"}

package/dist/tag.js

@@ -1,10 +1,10 @@
 import { defineComponent as c, computed as o } from "vue";
-import { B as d } from "./chunks/index.1645ffcb.js";
+import { B as d } from "./chunks/index.74da0d41.js";
 import { u as m } from "./chunks/aria-label.ac9651a5.js";
 import { g as s } from "./chunks/get-slot-text.c1114034.js";
-import { b as _ } from "./chunks/tooltip.f89cb0cd.js";
+import { b as _ } from "./chunks/tooltip.ca9673ee.js";
 import { n as v } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index28.css";
+import "./assets/index24.css";
 var r = /* @__PURE__ */ ((t) => (t.GREY = "grey", t.BLUE = "blue", t.GREEN = "green", t.ORANGE = "orange", t.RED = "red", t.WHITE = "white", t))(r || {});
 const p = c({
   name: "bento-tag",

package/dist/textarea.js

@@ -1,35 +1,35 @@
-import { defineComponent as W, toRefs as x, ref as u, toRef as z, computed as o, watch as v, nextTick as G, onMounted as V } from "vue";
-import { B as Y } from "./chunks/index.1645ffcb.js";
-import { a as Z } from "./chunks/button.66df5734.js";
-import { n as E } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { g as j } from "./chunks/unique-id.a2a2b458.js";
-import { o as J } from "./chunks/resize.a041304d.js";
-import { u as K } from "./chunks/i18n.155748d6.js";
-import { u as Q } from "./chunks/aria-label.ac9651a5.js";
-import { u as X } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { E as ee } from "./chunks/error-message.7a5db7f6.js";
-import "./assets/index29.css";
-var m = /* @__PURE__ */ ((t) => (t.HORIZONTAL = "horizontal", t.VERTICAL = "vertical", t.BOTH = "both", t.NONE = "none", t))(m || {}), i = /* @__PURE__ */ ((t) => (t.CLEARABLE = "clearable", t.DISABLED = "disabled", t.ERROR = "error", t.READONLY = "readonly", t))(i || {}), r = /* @__PURE__ */ ((t) => (t.BLUR = "blur", t.CHANGE = "change", t.CLEAR = "clear", t.ESCAPE_PRESSED = "escape-pressed", t.FOCUS = "focus", t.INPUT = "input", t))(r || {});
-let L = 0;
-const te = {
+import { defineComponent as z, useAttrs as V, toRefs as A, ref as d, toRef as Y, computed as n, watch as y, nextTick as Z, onMounted as G } from "vue";
+import { B as j } from "./chunks/index.74da0d41.js";
+import { a as J } from "./chunks/button.38099670.js";
+import { g as K } from "./chunks/unique-id.a2a2b458.js";
+import { o as Q } from "./chunks/resize.a041304d.js";
+import { u as X } from "./chunks/i18n.155748d6.js";
+import { u as ee } from "./chunks/aria-label.ac9651a5.js";
+import { u as te } from "./chunks/use-form-layout-loading.d03e5d48.js";
+import { n as S } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { E as ae } from "./chunks/error-message.a04e8f9a.js";
+import "./assets/index25.css";
+var m = /* @__PURE__ */ ((r) => (r.HORIZONTAL = "horizontal", r.VERTICAL = "vertical", r.BOTH = "both", r.NONE = "none", r))(m || {}), u = /* @__PURE__ */ ((r) => (r.CLEARABLE = "clearable", r.DISABLED = "disabled", r.ERROR = "error", r.READONLY = "readonly", r))(u || {}), i = /* @__PURE__ */ ((r) => (r.BLUR = "blur", r.CHANGE = "change", r.CLEAR = "clear", r.ESCAPE_PRESSED = "escape-pressed", r.FOCUS = "focus", r.INPUT = "input", r))(i || {});
+let B = 0;
+const re = {
   beforeCreate() {
-    this.uuid = L.toString(), L += 1;
+    this.uuid = B.toString(), B += 1;
   }
 };
-var ae = function() {
+var le = function() {
   var e = this, a = e._self._c;
   return a("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? a("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), a("path", { attrs: { 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" } })]);
-}, le = [], re = /* @__PURE__ */ E(
-  te,
-  ae,
+}, se = [], oe = /* @__PURE__ */ S(
+  re,
   le,
+  se,
   !1,
   null,
   "3c9e4cfb",
   null,
   null
 );
-const se = re.exports, ne = {
+const ne = oe.exports, ie = {
   "en-US": {
     clearText: "Clear text",
     optional: "optional",
@@ -37,10 +37,11 @@ const se = re.exports, ne = {
     textarea: "textarea",
     yourTextCanBenAtMost: "Your text can be at most {characterLimit} characters"
   }
-}, oe = W({
-  i18n: { messages: ne },
-  name: "bento-textarea",
-  components: { BentoButton: Z, BentoTypography: Y, ErrorMessage: ee, CrossCircleFillSmallIcon: se },
+}, ce = {
+  i18n: { messages: ie },
+  name: "bento-textarea"
+}, ue = /* @__PURE__ */ z({
+  ...ce,
   props: {
     /**
      * Text that labels an the input element
@@ -92,7 +93,7 @@ const se = re.exports, ne = {
     resizable: {
       type: String,
       default: m.BOTH,
-      validator: (t) => Object.values(m).includes(t)
+      validator: (r) => Object.values(m).includes(r)
     },
     /**
      * Highlights the textarea is required.
@@ -103,132 +104,94 @@ const se = re.exports, ne = {
      */
     value: { type: String, default: "" }
   },
-  emits: [
-    r.BLUR,
-    r.CHANGE,
-    r.CLEAR,
-    r.ESCAPE_PRESSED,
-    r.FOCUS,
-    r.INPUT
-  ],
-  setup(t, { attrs: e, emit: a }) {
-    const { height: l } = x(t), R = j("textarea"), s = u(null), n = u(t.value), b = 44, d = u(t.height || `${b}px`), y = u("100%"), { t: C } = K(), { isReadOnly: _ } = X(z(t, "readonly")), S = o(() => `${n.value.length} / ${t.characterLimit}`), f = o(
-      () => t.characterLimit && n.value.length > t.characterLimit
-    ), p = () => {
-      s.value && s.value.scrollHeight > b && (d.value = `${s.value.scrollHeight + 3}px`);
+  setup(r, { emit: e }) {
+    const a = r, t = V(), { height: l } = A(a), I = K("textarea"), s = d(null), o = d(a.value), p = 44, _ = d(a.height || `${p}px`), g = d("100%"), { t: h } = X(), { isReadOnly: b } = te(Y(a, "readonly")), k = n(() => `${o.value.length} / ${a.characterLimit}`), v = n(
+      () => a.characterLimit && o.value.length > a.characterLimit
+    ), f = () => {
+      s.value && s.value.scrollHeight > p && (_.value = `${s.value.scrollHeight + 3}px`);
     };
-    v(l, () => {
-      l.value ? d.value = l.value : p();
-    }), v(
-      () => t.value,
+    y(l, () => {
+      l.value ? _.value = l.value : f();
+    }), y(
+      () => a.value,
       () => {
-        n.value = t.value;
+        o.value = a.value;
       },
       { immediate: !0 }
-    ), v(
-      () => n.value,
+    ), y(
+      () => o.value,
       async () => {
         if (!l.value) {
-          if (d.value = `${b}px`, !n.value)
+          if (_.value = `${p}px`, !o.value)
             return;
-          await G(), p();
+          await Z(), f();
         }
       },
       { immediate: !0 }
     );
-    const h = o(() => !!t.errorMessage || f.value), A = o(() => ({
-      [`b-textarea--${i.DISABLED}`]: t.disabled
-    })), I = o(() => ({
-      [`b-textarea__input--${i.CLEARABLE}`]: t.clearable,
-      [`b-textarea__input--${i.READONLY}`]: _.value,
-      [`b-textarea__input--${i.ERROR}`]: h.value,
+    const C = n(() => !!a.errorMessage || v.value), O = n(() => ({
+      [`b-textarea--${u.DISABLED}`]: a.disabled
+    })), T = n(() => ({
+      [`b-textarea__input--${u.CLEARABLE}`]: a.clearable,
+      [`b-textarea__input--${u.READONLY}`]: b.value,
+      [`b-textarea__input--${u.ERROR}`]: C.value,
       ["b-textarea__input--dynamic-height"]: !l.value
-    })), k = o(() => ({
-      ["b-textarea__label-box--no-label"]: !t.label
-    })), O = o(() => ({
-      [`b-textarea__label-item--${i.ERROR}`]: f.value
-    })), B = o(
-      () => C("yourTextCanBenAtMost", { characterLimit: t.characterLimit })
-    ), P = u(e["aria-label"]), { ariaLabel: N, label: F } = x(t), H = Q({
-      ariaLabel: P.value,
+    })), F = n(() => ({
+      ["b-textarea__label-box--no-label"]: !a.label
+    })), M = n(() => ({
+      [`b-textarea__label-item--${u.ERROR}`]: v.value
+    })), P = n(() => h("yourTextCanBenAtMost", { characterLimit: a.characterLimit })), x = d(t["aria-label"]), { ariaLabel: L, label: E } = A(a), $ = ee({
+      ariaLabel: x.value,
       // TODO: take this line away when the aria-label props is removed
-      label: N,
-      defaultFallback: F
-    }), U = o(
-      () => t.clearable && n.value && !t.disabled && !_.value
-    ), $ = () => {
-      n.value = "", a(r.CLEAR), a(r.INPUT, "");
-    }, w = (c) => {
-      !t.disabled && !_.value && (n.value = c.target.value, a(r.INPUT, n.value));
-    }, M = () => {
-      s.value.scrollTop = 0, a(r.BLUR);
+      label: L,
+      defaultFallback: E
+    }), w = n(
+      () => a.clearable && o.value && !a.disabled && !b.value
+    ), H = () => {
+      o.value = "", e(i.CLEAR), e(i.INPUT, "");
+    }, N = (c) => {
+      c.stopImmediatePropagation(), !a.disabled && !b.value && (o.value = c.target.value, e(i.INPUT, o.value));
+    }, U = () => {
+      s.value.scrollTop = 0, e(i.BLUR);
     }, D = () => {
-      s.value.focus(), a(r.FOCUS);
-    }, T = () => {
-      a(r.CHANGE);
+      s.value.focus(), e(i.FOCUS);
     }, q = () => {
-      a(r.ESCAPE_PRESSED);
-    };
-    return V(() => {
-      J(s.value, () => {
-        var g;
-        const c = (g = s == null ? void 0 : s.value) == null ? void 0 : g.offsetWidth;
-        y.value = c ? `${c}px` : "100%";
-      }), l.value || p();
-    }), {
-      // Enums
-      BentoTextareaEvent: r,
-      // Methods
-      onBlur: M,
-      onChange: T,
-      onClear: $,
-      onFocus: D,
-      onInput: w,
-      onPressEscape: q,
-      t: C,
-      // Values
-      computedAriaLabel: H,
-      conditionalClasses: A,
-      conditionalClassesLabelItem: O,
-      conditionalClassesLabelBox: k,
-      counter: S,
-      counterErrorText: B,
-      conditionalClassesInput: I,
-      invalidInput: h,
-      isOverCharacterLimit: f,
-      isReadOnly: _,
-      showClearButton: U,
-      textareaElement: s,
-      textareaHeight: d,
-      textareaId: R,
-      textareaValue: n,
-      textareaWidth: y
+      e(i.CHANGE);
+    }, W = () => {
+      e(i.ESCAPE_PRESSED);
     };
+    return G(() => {
+      Q(s.value, () => {
+        var R;
+        const c = (R = s == null ? void 0 : s.value) == null ? void 0 : R.offsetWidth;
+        g.value = c ? `${c}px` : "100%";
+      }), l.value || f();
+    }), { __sfc: !0, attrs: t, props: a, emit: e, height: l, textareaId: I, textareaElement: s, textareaValue: o, defaultTextareaHeight: p, textareaHeight: _, textareaWidth: g, t: h, isReadOnly: b, counter: k, isOverCharacterLimit: v, calculateHeight: f, invalidInput: C, conditionalClasses: O, conditionalClassesInput: T, conditionalClassesLabelBox: F, conditionalClassesLabelItem: M, counterErrorText: P, ariaLabelAttribute: x, ariaLabel: L, label: E, computedAriaLabel: $, showClearButton: w, onClear: H, onInput: N, onBlur: U, onFocus: D, onChange: q, onPressEscape: W, BentoTypography: j, BentoButton: J, ErrorMessage: ae, CrossCircleFillSmallIcon: ne };
   }
 });
-var ie = function() {
-  var e = this, a = e._self._c;
-  return e._self._setupProxy, a("div", { staticClass: "b-textarea", class: e.conditionalClasses, style: { width: e.textareaWidth } }, [a("div", { staticClass: "b-textarea__label-box", class: e.conditionalClassesLabelBox }, [e.label ? a("label", { staticClass: "b-textarea__label", attrs: { for: e.textareaId } }, [a("bento-typography", { attrs: { el: "span", stronger: "" } }, [e._v(e._s(e.label))]), e.optional && !e.required ? a("bento-typography", { staticClass: "b-textarea__label-item", attrs: { el: "span" } }, [e._v(" (" + e._s(e.t("optional")) + ") ")]) : e._e(), e.required ? a("bento-typography", { staticClass: "b-textarea__label-item", attrs: { el: "span" } }, [e._v(" (" + e._s(e.t("required")) + ") ")]) : e._e()], 1) : e._e(), e.characterLimit ? a("bento-typography", { staticClass: "b-textarea__label-item", class: e.conditionalClassesLabelItem, attrs: { el: "span" } }, [e._v(" " + e._s(e.counter) + " ")]) : e._e()], 1), a("bento-typography", { staticClass: "b-textarea__input-box", attrs: { el: "div", "aria-disabled": e.disabled } }, [a("textarea", { ref: "textareaElement", staticClass: "b-textarea__input", class: e.conditionalClassesInput, style: { resize: e.resizable, height: e.textareaHeight }, attrs: { id: e.textareaId, "aria-label": e.computedAriaLabel, "aria-invalid": e.invalidInput, readonly: e.isReadOnly, disabled: e.disabled, placeholder: e.placeholder }, domProps: { value: e.textareaValue }, on: { blur: e.onBlur, change: e.onChange, focus: e.onFocus, input: e.onInput, keydown: function(l) {
-    return !l.type.indexOf("key") && e._k(l.keyCode, "esc", 27, l.key, ["Esc", "Escape"]) ? null : e.onPressEscape.apply(null, arguments);
-  } } }), e.showClearButton ? a("div", { staticClass: "b-textarea__clear-button" }, [a("bento-button", { attrs: { variant: "tertiary", disabled: e.disabled }, on: { click: e.onClear, keypress: function(l) {
-    return !l.type.indexOf("key") && e._k(l.keyCode, "enter", 13, l.key, "Enter") ? null : e.onClear.apply(null, arguments);
+var de = function() {
+  var e = this, a = e._self._c, t = e._self._setupProxy;
+  return a("div", { staticClass: "b-textarea", class: t.conditionalClasses, style: { width: t.textareaWidth } }, [a("div", { staticClass: "b-textarea__label-box", class: t.conditionalClassesLabelBox }, [t.label ? a("label", { staticClass: "b-textarea__label", attrs: { for: t.textareaId } }, [a(t.BentoTypography, { attrs: { el: "span", stronger: "" } }, [e._v(e._s(t.label))]), e.optional && !e.required ? a(t.BentoTypography, { staticClass: "b-textarea__label-item", attrs: { el: "span" } }, [e._v(" (" + e._s(t.t("optional")) + ") ")]) : e._e(), e.required ? a(t.BentoTypography, { staticClass: "b-textarea__label-item", attrs: { el: "span" } }, [e._v(" (" + e._s(t.t("required")) + ") ")]) : e._e()], 1) : e._e(), e.characterLimit ? a(t.BentoTypography, { staticClass: "b-textarea__label-item", class: t.conditionalClassesLabelItem, attrs: { el: "span" } }, [e._v(" " + e._s(t.counter) + " ")]) : e._e()], 1), a(t.BentoTypography, { staticClass: "b-textarea__input-box", attrs: { el: "div", "aria-disabled": e.disabled } }, [a("textarea", { ref: "textareaElement", staticClass: "b-textarea__input", class: t.conditionalClassesInput, style: { resize: e.resizable, height: t.textareaHeight }, attrs: { id: t.textareaId, "aria-label": t.computedAriaLabel, "aria-invalid": t.invalidInput, readonly: t.isReadOnly, disabled: e.disabled, placeholder: e.placeholder }, domProps: { value: t.textareaValue }, on: { blur: t.onBlur, change: t.onChange, focus: t.onFocus, input: t.onInput, keydown: function(l) {
+    return !l.type.indexOf("key") && e._k(l.keyCode, "esc", 27, l.key, ["Esc", "Escape"]) ? null : t.onPressEscape.apply(null, arguments);
+  } } }), t.showClearButton ? a("div", { staticClass: "b-textarea__clear-button" }, [a(t.BentoButton, { attrs: { variant: "tertiary", disabled: e.disabled }, on: { click: t.onClear, keypress: function(l) {
+    return !l.type.indexOf("key") && e._k(l.keyCode, "enter", 13, l.key, "Enter") ? null : t.onClear.apply(null, arguments);
   }, keyup: function(l) {
-    return !l.type.indexOf("key") && e._k(l.keyCode, "space", 32, l.key, [" ", "Spacebar"]) ? null : e.onClear.apply(null, arguments);
+    return !l.type.indexOf("key") && e._k(l.keyCode, "space", 32, l.key, [" ", "Spacebar"]) ? null : t.onClear.apply(null, arguments);
   } }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
-    return [a("cross-circle-fill-small-icon", { attrs: { "svg-title": e.t("clearText") } })];
-  }, proxy: !0 }], null, !1, 1092214813) })], 1) : e._e()]), e.isOverCharacterLimit ? a("error-message", { attrs: { "error-message": e.counterErrorText } }) : e._e(), e.errorMessage ? a("error-message", { attrs: { "error-message": e.errorMessage } }) : e._e(), e.description ? a("bento-typography", { staticClass: "b-textarea__description", attrs: { el: "span" } }, [e._v(" " + e._s(e.description) + " ")]) : e._e()], 1);
-}, ce = [], ue = /* @__PURE__ */ E(
-  oe,
-  ie,
-  ce,
+    return [a(t.CrossCircleFillSmallIcon, { attrs: { "svg-title": t.t("clearText") } })];
+  }, proxy: !0 }], null, !1, 3119266621) })], 1) : e._e()]), t.isOverCharacterLimit ? a(t.ErrorMessage, { attrs: { "error-message": t.counterErrorText } }) : e._e(), e.errorMessage ? a(t.ErrorMessage, { attrs: { "error-message": e.errorMessage } }) : e._e(), e.description ? a(t.BentoTypography, { staticClass: "b-textarea__description", attrs: { el: "span" } }, [e._v(" " + e._s(e.description) + " ")]) : e._e()], 1);
+}, pe = [], _e = /* @__PURE__ */ S(
+  ue,
+  de,
+  pe,
   !1,
   null,
-  "7ac5f986",
+  "2d3b7b89",
   null,
   null
 );
-const ge = ue.exports;
+const Ee = _e.exports;
 export {
-  ge as BentoTextarea
+  Ee as BentoTextarea
 };
 //# sourceMappingURL=textarea.js.map