@adyen/bento-vue3 1.5.0 → 1.6.0

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../vue2/src/components/tabs/components/tab.vue","../../vue2/src/components/tabs/tabs.utils.ts","../../vue2/src/components/tabs/tabs.types.ts","../../vue2/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","_ctx","renderSlot","_hoisted_1$1","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","createElementVNode","_cache","args","openBlock","createElementBlock","Fragment","renderList","normalizeClass","$event","createVNode","_component_bento_typography"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../vue2/src/components/tabs/components/tab.vue","../../vue2/src/components/tabs/tabs.utils.ts","../../vue2/src/components/tabs/tabs.types.ts","../../vue2/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","_ctx","renderSlot","_hoisted_1$1","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","createElementVNode","_cache","args","openBlock","createElementBlock","Fragment","renderList","normalizeClass","$event","createVNode","_component_bento_typography"],"mappings":"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"}

package/dist/tag.js

@@ -1,10 +1,10 @@
 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.32ed68b7.js";
-import { b as S } from "./chunks/tooltip.c8350cd0.js";
+import { B as C } from "./chunks/index.9fc54b60.js";
+import { b as S } from "./chunks/tooltip.6af06509.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/index36.css";
+import "./assets/index34.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 w = d({
   name: "bento-tag",

package/dist/textarea.js

@@ -1,38 +1,38 @@
-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.32ed68b7.js";
-import { a as ce } from "./chunks/button.7072457f.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 fe } from "./chunks/i18n.6c402773.js";
-import { u as me } from "./chunks/aria-label.ac9651a5.js";
-import { u as ve } from "./chunks/use-form-layout-loading.d03e5d48.js";
-import { E as ge } from "./chunks/error-message.37b6c7aa.js";
-import "./assets/index37.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 = {
+import { openBlock as l, createElementBlock as g, mergeProps as se, toDisplayString as v, createCommentVNode as i, pushScopeId as ie, popScopeId as ne, createElementVNode as O, defineComponent as ce, useAttrs as ue, toRefs as U, ref as m, toRef as de, computed as s, watch as N, nextTick as be, onMounted as fe, normalizeClass as C, unref as a, normalizeStyle as F, createVNode as E, withCtx as b, createTextVNode as h, createBlock as f, withKeys as w } from "vue";
+import { B as p } from "./chunks/index.9fc54b60.js";
+import { a as pe } from "./chunks/button.9d72e2d7.js";
+import { g as ve } from "./chunks/unique-id.a2a2b458.js";
+import { o as _e } from "./chunks/resize.a041304d.js";
+import { u as me } from "./chunks/i18n.6c402773.js";
+import { u as he } from "./chunks/aria-label.ac9651a5.js";
+import { u as ge } from "./chunks/use-form-layout-loading.d03e5d48.js";
+import { _ as q } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { E as K } from "./chunks/error-message.11e1fa1f.js";
+import "./assets/index41.css";
+var H = /* @__PURE__ */ ((e) => (e.HORIZONTAL = "horizontal", e.VERTICAL = "vertical", e.BOTH = "both", e.NONE = "none", e))(H || {}), _ = /* @__PURE__ */ ((e) => (e.CLEARABLE = "clearable", e.DISABLED = "disabled", e.ERROR = "error", e.READONLY = "readonly", e))(_ || {}), c = /* @__PURE__ */ ((e) => (e.BLUR = "blur", e.CHANGE = "change", e.CLEAR = "clear", e.ESCAPE_PRESSED = "escape-pressed", e.FOCUS = "focus", e.INPUT = "input", e))(c || {});
+let T = 0;
+const ye = {
   beforeCreate() {
-    this.uuid = U.toString(), U += 1;
+    this.uuid = T.toString(), T += 1;
   }
-}, Ce = (e) => (re("data-v-3c9e4cfb"), e = e(), oe(), e), ye = { key: 0 }, Le = /* @__PURE__ */ Ce(() => /* @__PURE__ */ k("path", {
+}, Le = (e) => (ie("data-v-3c9e4cfb"), e = e(), ne(), e), xe = { key: 0 }, Ce = /* @__PURE__ */ Le(() => /* @__PURE__ */ O("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 _e(e, l, n, d, $, r) {
-  return s(), L("svg", le({ role: "img" }, e.$attrs, {
+function Ee(e, n, t, M, u, S) {
+  return l(), g("svg", se({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (s(), L("title", ye, f(e.$attrs["svg-title"]), 1)) : u("", !0),
-    Le
+    e.$attrs["svg-title"] ? (l(), g("title", xe, v(e.$attrs["svg-title"]), 1)) : i("", !0),
+    Ce
   ], 16);
 }
-const Ee = /* @__PURE__ */ M(he, [["render", _e], ["__scopeId", "data-v-3c9e4cfb"]]), D = {
+const Se = /* @__PURE__ */ q(ye, [["render", Ee], ["__scopeId", "data-v-3c9e4cfb"]]), V = {
   "en-US": {
     clearText: "Clear text",
     optional: "optional",
@@ -40,10 +40,14 @@ const Ee = /* @__PURE__ */ M(he, [["render", _e], ["__scopeId", "data-v-3c9e4cfb
     textarea: "textarea",
     yourTextCanBenAtMost: "Your text can be at most {characterLimit} characters"
   }
-}, Se = se({
-  i18n: { messages: D },
-  name: "bento-textarea",
-  components: { BentoButton: ce, BentoTypography: de, ErrorMessage: ge, CrossCircleFillSmallIcon: Ee },
+}, Ae = ["for"], Re = ["id", "value", "aria-label", "aria-invalid", "readonly", "disabled", "placeholder", "onKeydown"], $e = {
+  key: 0,
+  class: "b-textarea__clear-button"
+}, Ie = {
+  i18n: { messages: V },
+  name: "bento-textarea"
+}, ke = /* @__PURE__ */ ce({
+  ...Ie,
   props: {
     /**
      * Text that labels an the input element
@@ -94,8 +98,8 @@ const Ee = /* @__PURE__ */ M(he, [["render", _e], ["__scopeId", "data-v-3c9e4cfb
      */
     resizable: {
       type: String,
-      default: O.BOTH,
-      validator: (e) => Object.values(O).includes(e)
+      default: H.BOTH,
+      validator: (e) => Object.values(H).includes(e)
     },
     /**
      * Highlights the textarea is required.
@@ -106,233 +110,188 @@ const Ee = /* @__PURE__ */ M(he, [["render", _e], ["__scopeId", "data-v-3c9e4cfb
      */
     value: { type: String, default: "" }
   },
-  emits: [
-    t.BLUR,
-    t.CHANGE,
-    t.CLEAR,
-    t.ESCAPE_PRESSED,
-    t.FOCUS,
-    t.INPUT
-  ],
-  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 = () => {
-      r.value && r.value.scrollHeight > v && (b.value = `${r.value.scrollHeight + 3}px`);
+  setup(e, { emit: n }) {
+    const t = e, M = ue(), { height: u } = U(t), S = ve("textarea"), r = m(null), o = m(t.value), A = 44, y = m(t.height || `${A}px`), P = m("100%"), { t: L } = me({ messages: V }), { isReadOnly: x } = ge(de(t, "readonly")), W = s(() => `${o.value.length} / ${t.characterLimit}`), R = s(
+      () => t.characterLimit && o.value.length > t.characterLimit
+    ), $ = () => {
+      r.value && r.value.scrollHeight > A && (y.value = `${r.value.scrollHeight + 3}px`);
     };
-    B(d, () => {
-      d.value ? b.value = d.value : R();
-    }), B(
-      () => e.value,
+    N(u, () => {
+      u.value ? y.value = u.value : $();
+    }), N(
+      () => t.value,
       () => {
-        a.value = e.value;
+        o.value = t.value;
       },
       { immediate: !0 }
-    ), B(
-      () => a.value,
+    ), N(
+      () => o.value,
       async () => {
-        if (!d.value) {
-          if (b.value = `${v}px`, !a.value)
+        if (!u.value) {
+          if (y.value = `${A}px`, !o.value)
             return;
-          await ie(), R();
+          await be(), $();
         }
       },
       { immediate: !0 }
     );
-    const w = i(() => !!e.errorMessage || A.value), V = i(() => ({
-      [`b-textarea--${m.DISABLED}`]: e.disabled
-    })), q = i(() => ({
-      [`b-textarea__input--${m.CLEARABLE}`]: e.clearable,
-      [`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
-    })), 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,
+    const D = s(() => !!t.errorMessage || R.value), z = s(() => ({
+      [`b-textarea--${_.DISABLED}`]: t.disabled
+    })), Y = s(() => ({
+      [`b-textarea__input--${_.CLEARABLE}`]: t.clearable,
+      [`b-textarea__input--${_.READONLY}`]: x.value,
+      [`b-textarea__input--${_.ERROR}`]: D.value,
+      ["b-textarea__input--dynamic-height"]: !u.value
+    })), Z = s(() => ({
+      ["b-textarea__label-box--no-label"]: !t.label
+    })), G = s(() => ({
+      [`b-textarea__label-item--${_.ERROR}`]: R.value
+    })), j = s(() => L("yourTextCanBenAtMost", { characterLimit: t.characterLimit })), J = m(M["aria-label"]), { ariaLabel: Q, label: I } = U(t), X = he({
+      ariaLabel: J.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 = () => {
-      r.value.scrollTop = 0, n(t.BLUR);
-    }, ee = () => {
-      r.value.focus(), n(t.FOCUS);
-    }, ae = () => {
-      n(t.CHANGE);
+      label: Q,
+      defaultFallback: I
+    }), ee = s(
+      () => t.clearable && o.value && !t.disabled && !x.value
+    ), k = () => {
+      o.value = "", n(c.CLEAR), n(c.INPUT, "");
+    }, ae = (d) => {
+      d.stopImmediatePropagation(), !t.disabled && !x.value && (o.value = d.target.value, n(c.INPUT, o.value));
     }, te = () => {
-      n(t.ESCAPE_PRESSED);
-    };
-    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
-      BentoTextareaEvent: t,
-      // Methods
-      onBlur: X,
-      onChange: ae,
-      onClear: J,
-      onFocus: ee,
-      onInput: Q,
-      onPressEscape: te,
-      t: o,
-      // Values
-      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
+      r.value.scrollTop = 0, n(c.BLUR);
+    }, le = () => {
+      r.value.focus(), n(c.FOCUS);
+    }, re = () => {
+      n(c.CHANGE);
+    }, oe = () => {
+      n(c.ESCAPE_PRESSED);
     };
-  }
-});
-const Ie = ["for"], $e = ["id", "value", "aria-label", "aria-invalid", "readonly", "disabled", "placeholder"], Ae = {
-  key: 0,
-  class: "b-textarea__clear-button"
-};
-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 })
-  }, [
-    k("div", {
-      class: S(["b-textarea__label-box", e.conditionalClassesLabelBox])
+    return fe(() => {
+      _e(r.value, () => {
+        var B;
+        const d = (B = r == null ? void 0 : r.value) == null ? void 0 : B.offsetWidth;
+        P.value = d ? `${d}px` : "100%";
+      }), u.value || $();
+    }), (d, B) => (l(), g("div", {
+      class: C(["b-textarea", a(z)]),
+      style: F({ width: P.value })
     }, [
-      e.label ? (s(), L("label", {
-        key: 0,
-        for: e.textareaId,
-        class: "b-textarea__label"
+      O("div", {
+        class: C(["b-textarea__label-box", a(Z)])
       }, [
-        I(a, {
-          el: "span",
-          stronger: ""
-        }, {
-          default: c(() => [
-            y(f(e.label), 1)
-          ]),
-          _: 1
-        }),
-        e.optional && !e.required ? (s(), p(a, {
+        a(I) ? (l(), g("label", {
           key: 0,
-          el: "span",
-          class: "b-textarea__label-item"
-        }, {
-          default: c(() => [
-            y(" (" + f(e.t("optional")) + ") ", 1)
-          ]),
-          _: 1
-        })) : u("", !0),
-        e.required ? (s(), p(a, {
+          for: a(S),
+          class: "b-textarea__label"
+        }, [
+          E(a(p), {
+            el: "span",
+            stronger: ""
+          }, {
+            default: b(() => [
+              h(v(a(I)), 1)
+            ]),
+            _: 1
+          }),
+          e.optional && !e.required ? (l(), f(a(p), {
+            key: 0,
+            el: "span",
+            class: "b-textarea__label-item"
+          }, {
+            default: b(() => [
+              h(" (" + v(a(L)("optional")) + ") ", 1)
+            ]),
+            _: 1
+          })) : i("", !0),
+          e.required ? (l(), f(a(p), {
+            key: 1,
+            el: "span",
+            class: "b-textarea__label-item"
+          }, {
+            default: b(() => [
+              h(" (" + v(a(L)("required")) + ") ", 1)
+            ]),
+            _: 1
+          })) : i("", !0)
+        ], 8, Ae)) : i("", !0),
+        e.characterLimit ? (l(), f(a(p), {
           key: 1,
           el: "span",
-          class: "b-textarea__label-item"
+          class: C(["b-textarea__label-item", a(G)])
         }, {
-          default: c(() => [
-            y(" (" + f(e.t("required")) + ") ", 1)
+          default: b(() => [
+            h(v(a(W)), 1)
           ]),
           _: 1
-        })) : u("", !0)
-      ], 8, Ie)) : u("", !0),
-      e.characterLimit ? (s(), p(a, {
+        }, 8, ["class"])) : i("", !0)
+      ], 2),
+      E(a(p), {
+        el: "div",
+        class: "b-textarea__input-box",
+        "aria-disabled": e.disabled
+      }, {
+        default: b(() => [
+          O("textarea", {
+            id: a(S),
+            ref_key: "textareaElement",
+            ref: r,
+            value: o.value,
+            class: C(["b-textarea__input", a(Y)]),
+            "aria-label": a(X),
+            "aria-invalid": a(D),
+            readonly: a(x),
+            disabled: e.disabled,
+            placeholder: e.placeholder,
+            style: F({ resize: e.resizable, height: y.value }),
+            onBlur: te,
+            onChange: re,
+            onFocus: le,
+            onInput: ae,
+            onKeydown: w(oe, ["esc"])
+          }, `
+            `, 46, Re),
+          a(ee) ? (l(), g("div", $e, [
+            E(a(pe), {
+              variant: "tertiary",
+              disabled: e.disabled,
+              onClick: k,
+              onKeypress: w(k, ["enter"]),
+              onKeyup: w(k, ["space"])
+            }, {
+              iconLeft: b(() => [
+                E(a(Se), {
+                  "svg-title": a(L)("clearText")
+                }, null, 8, ["svg-title"])
+              ]),
+              _: 1
+            }, 8, ["disabled", "onKeypress", "onKeyup"])
+          ])) : i("", !0)
+        ]),
+        _: 1
+      }, 8, ["aria-disabled"]),
+      a(R) ? (l(), f(a(K), {
+        key: 0,
+        "error-message": a(j)
+      }, null, 8, ["error-message"])) : i("", !0),
+      e.errorMessage ? (l(), f(a(K), {
         key: 1,
-        el: "span",
-        class: S(["b-textarea__label-item", e.conditionalClassesLabelItem])
+        "error-message": e.errorMessage
+      }, null, 8, ["error-message"])) : i("", !0),
+      e.description ? (l(), f(a(p), {
+        key: 2,
+        class: "b-textarea__description",
+        el: "span"
       }, {
-        default: c(() => [
-          y(f(e.counter), 1)
+        default: b(() => [
+          h(v(e.description), 1)
         ]),
         _: 1
-      }, 8, ["class"])) : u("", !0)
-    ], 2),
-    I(a, {
-      el: "div",
-      class: "b-textarea__input-box",
-      "aria-disabled": e.disabled
-    }, {
-      default: c(() => [
-        k("textarea", {
-          id: e.textareaId,
-          ref: "textareaElement",
-          value: e.textareaValue,
-          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: 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, $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(() => [
-              I(v, {
-                "svg-title": e.t("clearText")
-              }, null, 8, ["svg-title"])
-            ]),
-            _: 1
-          }, 8, ["disabled", "onClick", "onKeypress", "onKeyup"])
-        ])) : u("", !0)
-      ]),
-      _: 1
-    }, 8, ["aria-disabled"]),
-    e.isOverCharacterLimit ? (s(), p(g, {
-      key: 0,
-      "error-message": e.counterErrorText
-    }, null, 8, ["error-message"])) : u("", !0),
-    e.errorMessage ? (s(), p(g, {
-      key: 1,
-      "error-message": e.errorMessage
-    }, null, 8, ["error-message"])) : u("", !0),
-    e.description ? (s(), p(a, {
-      key: 2,
-      class: "b-textarea__description",
-      el: "span"
-    }, {
-      default: c(() => [
-        y(f(e.description), 1)
-      ]),
-      _: 1
-    })) : u("", !0)
-  ], 6);
-}
-const Me = /* @__PURE__ */ M(Se, [["render", Re], ["__scopeId", "data-v-12df95db"]]);
+      })) : i("", !0)
+    ], 6));
+  }
+});
+const Ke = /* @__PURE__ */ q(ke, [["__scopeId", "data-v-cb625981"]]);
 export {
-  Me as BentoTextarea
+  Ke as BentoTextarea
 };
 //# sourceMappingURL=textarea.js.map