@adyen/bento-vue2 1.25.0 → 1.26.0

package/dist/date-picker.js

@@ -1,23 +1,23 @@
 import { ref as f, computed as D, defineComponent as Y, toRef as E, watch as W, nextTick as T } from "vue";
-import { a as q } from "./chunks/index.ec632d95.js";
-import { B as K } from "./chunks/index.d97166c6.js";
-import { d as j } from "./chunks/debounce.b5ef6acf.js";
-import { D as O, v as z, f as $ } from "./chunks/date-input.9186a0bf.js";
+import { a as q } from "./chunks/index.15b088b9.js";
+import { B as K } from "./chunks/index.dd30e538.js";
+import { c as j, B as z } from "./chunks/dropdown-default-textbox.54ca1b18.js";
+import { d as $ } from "./chunks/debounce.b5ef6acf.js";
+import { D as O, v as G, f as H } from "./chunks/date-input.9186a0bf.js";
 import { g as u } from "./chunks/unique-id.a2a2b458.js";
 import { u as B } from "./chunks/i18n.eb5b985b.js";
-import { f as S } from "./chunks/index.9e40ffeb.js";
-import { e as I, d as G, f as H } from "./chunks/index.f55fdc32.js";
-import { u as J } from "./chunks/use-form-layout-loading.d03e5d48.js";
+import { f as S } from "./chunks/index.b21197ca.js";
+import { e as I, d as J, f as Q } from "./chunks/index.f55fdc32.js";
+import { u as X } from "./chunks/use-form-layout-loading.d03e5d48.js";
 import "./chunks/index.4c062058.js";
-import { C as p } from "./chunks/calendar.7d3e2db0.js";
-import { b as we } from "./chunks/calendar.7d3e2db0.js";
-import { c as Q, B as X } from "./chunks/dropdown-default-textbox.a1c0c0fb.js";
-import { E as Z, F as ee } from "./chunks/error-message.db315e68.js";
+import { C as p } from "./chunks/calendar.640b8d25.js";
+import { b as we } from "./chunks/calendar.640b8d25.js";
+import { E as Z, F as ee } from "./chunks/error-message.31ec12b7.js";
 import { n as ae } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index42.css";
+import "./assets/index12.css";
 const te = ({ datePickerValue: a, isDateIncorrect: e }) => {
   var v;
-  const { locale: r, t: n } = B(), m = { de: G, enUS: I, fr: H }, s = f((v = a.value) == null ? void 0 : v.toDateString());
+  const { locale: r, t: n } = B(), m = { de: J, enUS: I, fr: Q }, s = f((v = a.value) == null ? void 0 : v.toDateString());
   return {
     // Values
     dateDisplayValue: D(() => e.value ? s.value : a.value ? S(a.value, O.FULL_DATE, {
@@ -49,10 +49,10 @@ const re = {
     BentoPopover: q,
     Calendar: p,
     ErrorMessage: Z,
-    DropdownInputDefault: Q,
+    DropdownInputDefault: j,
     FieldLabel: ee
   },
-  directives: { BentoClickOutsideDirective: X },
+  directives: { BentoClickOutsideDirective: z },
   props: {
     /**
      * Descriptive supporting text visbile underneath the dropdown.
@@ -109,7 +109,7 @@ const re = {
   },
   emits: [o.INPUT],
   setup(a, { emit: e }) {
-    const { t: r } = B(), n = u("bento-date-picker-container"), m = u("bento-date-picker-label"), s = u("bento-date-picker-description"), b = u("bento-date-picker-error"), y = u("bento-date-picker-date-error"), v = D(() => a.label || r("datePicker", { name: n })), c = f(null), w = f(null), l = f(!1), i = f(!1), { isReadOnly: R } = J(E(a, "readonly"));
+    const { t: r } = B(), n = u("bento-date-picker-container"), m = u("bento-date-picker-label"), s = u("bento-date-picker-description"), b = u("bento-date-picker-error"), y = u("bento-date-picker-date-error"), v = D(() => a.label || r("datePicker", { name: n })), c = f(null), w = f(null), l = f(!1), i = f(!1), { isReadOnly: R } = X(E(a, "readonly"));
     W(
       () => a.disabled,
       (t) => {
@@ -132,12 +132,12 @@ const re = {
     }, h = async () => {
       l.value && (l.value = !1, d.value = null), e(o.INPUT, null);
     }, A = (t) => {
-      z(t);
+      G(t);
     }, P = (t) => {
       if (t.length < 10)
         return;
       /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(t) && M(new Date(t)) ? (l.value = !1, e(o.INPUT, new Date(t))) : t && (l.value = !0, e(o.INPUT, null));
-    }, L = j(P, ne);
+    }, L = $(P, ne);
     return {
       // Refs
       inputContainerRef: w,
@@ -164,7 +164,7 @@ const re = {
       openDatePicker: C,
       onDateKeyDown: A,
       onDateInputChange: (t) => {
-        d.value = $(t), i.value ? L(d.value) : P(d.value);
+        d.value = H(t), i.value ? L(d.value) : P(d.value);
       },
       // Keyboard navigation
       onSpaceBarOrEnter: async (t) => {

package/dist/date-range-picker.js

@@ -1,5 +1,5 @@
-import { B as t, a as r } from "./chunks/index.4b6211c7.js";
-import { b as o } from "./chunks/calendar.7d3e2db0.js";
+import { B as t, a as r } from "./chunks/index.8b8c3b16.js";
+import { b as o } from "./chunks/calendar.640b8d25.js";
 export {
   t as BentoDateRangePicker,
   r as BentoDateRangePickerEvent,

package/dist/date.js

@@ -1,4 +1,4 @@
-import { B as e, a as o } from "./chunks/index.9e40ffeb.js";
+import { B as e, a as o } from "./chunks/index.b21197ca.js";
 export {
   e as BentoDate,
   o as BentoDateFormat

package/dist/divider.js

@@ -1,4 +1,4 @@
-import { B as r } from "./chunks/index.939dd5cf.js";
+import { B as r } from "./chunks/index.885d05a9.js";
 export {
   r as BentoDivider
 };

package/dist/dropdown.js

@@ -1,14 +1,14 @@
-import { B as p } from "./chunks/dropdown.7d4a8dfc.js";
-import { a as _t } from "./chunks/dropdown.7d4a8dfc.js";
-import { c as dt, b as ct } from "./chunks/use-cached-selected-values.3772a679.js";
+import { B as p } from "./chunks/dropdown.10c034aa.js";
+import { a as _t } from "./chunks/dropdown.10c034aa.js";
+import { c as dt, b as ct } from "./chunks/use-cached-selected-values.69297473.js";
 import { defineComponent as a, computed as l, toRefs as m } from "vue";
-import { B as y, L as i } from "./chunks/listbox-option-tag.95a65534.js";
+import { B as y, L as i } from "./chunks/listbox-option-tag.6bbb6bbe.js";
 import { n as d } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { d as v, B as w } from "./chunks/index.d97166c6.js";
+import { d as v, B as w } from "./chunks/index.dd30e538.js";
 import { u as b } from "./chunks/use-country-items.6b7985bf.js";
 import { B as c } from "./chunks/country.types.002caff2.js";
-import { B } from "./chunks/payment-method.564ed43a.js";
-import "./assets/index.css";
+import { B } from "./chunks/payment-method.6c1ce07c.js";
+import "./assets/index16.css";
 const $ = a({
   name: "bento-dropdown-avatar"
 }), I = /* @__PURE__ */ a({

package/dist/empty-state.js

@@ -1,9 +1,9 @@
 import { defineComponent as D, ref as v, computed as l, watch as d } from "vue";
-import { a as L } from "./chunks/button.e5f5638f.js";
-import { c as y, B as C } from "./chunks/index.d97166c6.js";
+import { a as L } from "./chunks/button.9d6435ae.js";
+import { c as y, B as C } from "./chunks/index.dd30e538.js";
 import { o as A } from "./chunks/resize.a041304d.js";
 import { n as O } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index4.css";
+import "./assets/index17.css";
 const _ = (s, e) => {
   const t = s[e];
   return t ? typeof t == "function" ? t() : Promise.resolve(t) : new Promise((r, n) => {

package/dist/filter-bar.js

@@ -1,43 +1,43 @@
 import { n as I } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { defineComponent as U, useSlots as ie, useAttrs as Ye, computed as r, ref as P, watch as ee, toRef as w, onBeforeUpdate as fe, provide as Je, reactive as Be, nextTick as ze, onMounted as Ge } from "vue";
-import { a as pe, I as We } from "./chunks/index.ec632d95.js";
+import { a as pe, I as We } from "./chunks/index.15b088b9.js";
 import { u as Z } from "./chunks/i18n.eb5b985b.js";
 import { g as _e } from "./chunks/unique-id.a2a2b458.js";
 import { u as Ze } from "./chunks/use-click-outside.941d1600.js";
 import "./chunks/index.4c062058.js";
-import { B as oe, d as Qe } from "./chunks/index.d97166c6.js";
+import { B as oe, d as Qe } from "./chunks/index.dd30e538.js";
 import { u as Ae } from "./chunks/aria-label.ac9651a5.js";
-import { B as De, a as ye } from "./chunks/base-button.773343f6.js";
+import { B as De, a as ye } from "./chunks/base-button.ad74b6f8.js";
 import { g as Te } from "./chunks/get-slot-text.99c3d860.js";
 import { u as Pe } from "./chunks/use-has-slot.fbeb19ec.js";
 import { a as Ee, C as xe } from "./chunks/chevron-up.81185563.js";
-import { B as Xe } from "./chunks/tooltip.e5deb137.js";
+import { B as Xe } from "./chunks/tooltip.58ef3f4a.js";
 import { B as et } from "./chunks/teleport.84b0f20b.js";
-import { B as tt } from "./chunks/dropdown-default-textbox.a1c0c0fb.js";
+import { B as tt } from "./chunks/dropdown-default-textbox.54ca1b18.js";
 import { BentoRadioGroup as lt } from "./radio-group.js";
 import { BentoInputField as Ie } from "./input-field.js";
 import { BentoSearchBar as re, BentoSearchBarEvent as le } from "./search-bar.js";
 import { BentoModal as at } from "./modal.js";
-import { g as nt } from "./chunks/base-modal.2d596e6f.js";
-import { a as st } from "./chunks/button.e5f5638f.js";
-import { u as $e, B as ot } from "./chunks/dropdown.7d4a8dfc.js";
-import { g as rt } from "./chunks/index.596c4d0a.js";
-import { B as ve } from "./chunks/index.939dd5cf.js";
+import { g as nt } from "./chunks/base-modal.1fff7abe.js";
+import { a as st } from "./chunks/button.9d6435ae.js";
+import { u as $e, B as ot } from "./chunks/dropdown.10c034aa.js";
+import { g as rt } from "./chunks/index.d553d3d1.js";
+import { B as ve } from "./chunks/index.885d05a9.js";
 import { BentoDatePicker as it } from "./date-picker.js";
-import { f as X } from "./chunks/index.9e40ffeb.js";
+import { f as X } from "./chunks/index.b21197ca.js";
 import { e as J, d as Ue, f as Re } from "./chunks/index.f55fdc32.js";
-import { C as ut, i as ct } from "./chunks/calendar.7d3e2db0.js";
-import { B as dt, D as ft, i as me } from "./chunks/index.4b6211c7.js";
-import { B as _t } from "./chunks/button-actions.a03a672f.js";
+import { C as ut, i as ct } from "./chunks/calendar.640b8d25.js";
+import { B as dt, D as ft, i as me } from "./chunks/index.8b8c3b16.js";
+import { B as _t } from "./chunks/button-actions.81db18e8.js";
 import { D as Fe } from "./chunks/date-input.9186a0bf.js";
-import { a as he, B as vt } from "./chunks/use-cached-selected-values.3772a679.js";
-import { B as bt, L as Ve } from "./chunks/listbox-option-tag.95a65534.js";
+import { a as he, B as vt } from "./chunks/use-cached-selected-values.69297473.js";
+import { B as bt, L as Ve } from "./chunks/listbox-option-tag.6bbb6bbe.js";
 import { u as pt } from "./chunks/use-country-items.6b7985bf.js";
-import { B as yt } from "./chunks/payment-method.564ed43a.js";
+import { B as yt } from "./chunks/payment-method.6c1ce07c.js";
 import { R as mt } from "./chunks/refresh.71a03998.js";
-import { F as Ft } from "./chunks/fixed-scroller.3135f86c.js";
-import { u as ht } from "./chunks/use-bento-toast-controller.8414d283.js";
-import "./assets/index10.css";
+import { F as Ft } from "./chunks/fixed-scroller.4eb9a9ac.js";
+import { u as ht } from "./chunks/use-bento-toast-controller.c3277f73.js";
+import "./assets/index18.css";
 const gt = {}, St = /* @__PURE__ */ U({
   ...gt,
   __name: "filter-bar-button",

package/dist/focus-trap.js

@@ -1,4 +1,4 @@
-import { B as a } from "./chunks/index.596c4d0a.js";
+import { B as a } from "./chunks/index.d553d3d1.js";
 export {
   a as BentoFocusTrap
 };

package/dist/form-layout.js

@@ -1,10 +1,10 @@
-import { defineComponent as a, useSlots as i, computed as r, provide as d, toRef as m } from "vue";
-import { BentoAlert as p } from "./alert.js";
+import { defineComponent as a, useSlots as u, computed as r, provide as m, toRef as d } from "vue";
+import { BentoAlert as f } from "./alert.js";
 import { F as y } from "./chunks/form-layout.types.a7a1438d.js";
-import { u as f } from "./chunks/use-has-slot.fbeb19ec.js";
+import { u as i } from "./chunks/use-has-slot.fbeb19ec.js";
 import { n as _ } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as u, c as v } from "./chunks/index.d97166c6.js";
-import "./assets/index5.css";
+import { B as p, c as v } from "./chunks/index.dd30e538.js";
+import "./assets/index15.css";
 const g = {}, h = /* @__PURE__ */ a({
   ...g,
   __name: "form-layout",
@@ -20,8 +20,8 @@ const g = {}, h = /* @__PURE__ */ a({
     loading: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, o = i(), s = f(o), n = r(() => t.form ? "form" : "div"), l = r(() => s("actions-left") || s("actions-right"));
-    return d(y, m(t, "loading")), { __sfc: !0, slots: o, hasSlot: s, props: t, formLayoutElement: n, hasActions: l, BentoAlert: p };
+    const t = e, o = u(), s = i(o), n = r(() => t.form ? "form" : "div"), l = r(() => s("actions-left") || s("actions-right"));
+    return m(y, d(t, "loading")), { __sfc: !0, slots: o, hasSlot: s, props: t, formLayoutElement: n, hasActions: l, BentoAlert: f };
   }
 });
 var b = function() {
@@ -54,21 +54,22 @@ const H = B.exports, C = ["warning", "critical", "highlight", "success"], F = {}
     }
   },
   setup(e) {
-    return { __sfc: !0, BentoAlert: p };
+    const t = u(), o = i(t);
+    return { __sfc: !0, slots: t, hasSlot: o, BentoAlert: f };
   }
 });
 var $ = function() {
   var t = this, o = t._self._c, s = t._self._setupProxy;
-  return o("div", { staticClass: "b-form-layout-field-tip" }, [t._t("default"), o(s.BentoAlert, { attrs: { variant: "tip", type: t.type }, scopedSlots: t._u([{ key: "description", fn: function() {
+  return o("div", { staticClass: "b-form-layout-field-tip" }, [t._t("default"), s.hasSlot("message") ? o(s.BentoAlert, { attrs: { variant: "tip", type: t.type }, scopedSlots: t._u([{ key: "description", fn: function() {
     return [t._t("message")];
-  }, proxy: !0 }], null, !0) })], 2);
+  }, proxy: !0 }], null, !0) }) : t._e()], 2);
 }, x = [], S = /* @__PURE__ */ _(
   T,
   $,
   x,
   !1,
   null,
-  "52686d0f",
+  "21e4c0c4",
   null,
   null
 );
@@ -159,16 +160,16 @@ const K = E.exports, G = {}, I = /* @__PURE__ */ a({
      * @values h1, h2, h3, h4, h5, h6, div, p, span
      */
     el: {
-      type: u.props.el.type,
+      type: p.props.el.type,
       required: !0,
       validator: (e) => Object.values(v).includes(e)
     }
   },
   setup(e) {
-    const t = e, o = i(), s = r(() => !t.subsection), n = f(o), l = r(() => ({
+    const t = e, o = u(), s = r(() => !t.subsection), n = i(o), l = r(() => ({
       "b-form-layout-title--subsection": t.subsection
     }));
-    return { __sfc: !0, slots: o, props: t, isSection: s, hasSlot: n, conditionalClasses: l, BentoTypography: u };
+    return { __sfc: !0, slots: o, props: t, isSection: s, hasSlot: n, conditionalClasses: l, BentoTypography: p };
   }
 });
 var N = function() {

package/dist/form-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-layout.js","sources":["../src/components/form-layout/form-layout.vue","../src/components/form-layout/components/form-layout-field-tip/form-layout-tip.types.ts","../src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue","../src/components/form-layout/components/form-layout-group/form-layout-group.types.ts","../src/components/form-layout/components/form-layout-group/form-layout-group.vue","../src/components/form-layout/components/form-layout-title/form-layout-title.vue"],"sourcesContent":["<template>\n    <component :is=\"formLayoutElement\" class=\"b-form-layout\" role=\"form\">\n        <bento-alert v-if=\"hasSlot('error-message')\" class=\"b-form-layout__error-message\" type=\"critical\">\n            <template #description>\n                <slot name=\"error-message\" />\n            </template>\n        </bento-alert>\n\n        <slot />\n\n        <div v-if=\"hasActions\" class=\"b-form-layout__actions-container\">\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-left\" />\n            </div>\n\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-right\" />\n            </div>\n        </div>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, toRef, useSlots } from 'vue';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables';\n    import { FORM_LAYOUT_LOADING_INJECTION_KEY } from './form-layout.types';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n        /**\n         * Renders the form layout as an HTML `form`\n         */\n        form: { type: Boolean, default: false },\n\n        /**\n         * Sets the state of the form and its fields to\n         * a read only status.\n         */\n        loading: { type: Boolean, default: false },\n    });\n\n    const formLayoutElement = computed(() => (props.form ? 'form' : 'div'));\n    const hasActions = computed(() => hasSlot('actions-left') || hasSlot('actions-right'));\n\n    provide(FORM_LAYOUT_LOADING_INJECTION_KEY, toRef(props, 'loading'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Form layout component is a pre-designed layout that serves\n     * as a starting point for creating a form.\n     *\n     * It can include various common form components:\n     * input field, dropdown, date picker, checkbox group, radio group,\n     * textarea, etc.\n     *\n     * Form layout is context agnostic and can be dropped in different\n     * places, for example in modals, side panels or pages.\n     *\n     * @example\n     * import { BentoFormLayout, BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayout, BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout>\n     *              <template #error-message>There is an error. Correct the highlighted field.</template>\n     *\n     *              <bento-input-field>Input field</bento-input-field>\n     *\n     *              <bento-form-layout-field-tip>\n     *                  <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *                  <template #message>This is a small tip that can be used in small spaces</template>\n     *              </bento-form-layout-field-tip>\n     *\n     *              <bento-form-layout-title subsection>\n     *                  Section title\n     *                  <template #description>Optional section description</template>\n     *              </bento-form-layout-title>\n     *          </bento-form-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout.scss\" />\n","import { BentoAlertTypeOption } from '@/components/alert/alert.types';\n\nexport type BentoFormLayoutFieldTipTypeOption = `${BentoAlertTypeOption}`;\nexport const BentoFormLayoutFieldTipTypeOptions = ['warning', 'critical', 'highlight', 'success'];\n","<template>\n    <div class=\"b-form-layout-field-tip\">\n        <slot />\n        <bento-alert variant=\"tip\" :type=\"type\">\n            <template #description>\n                <slot name=\"message\" />\n            </template>\n        </bento-alert>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType } from 'vue';\n    import { BentoFormLayoutFieldTipTypeOption, BentoFormLayoutFieldTipTypeOptions } from './form-layout-tip.types';\n    import { BentoAlert } from '@/components/alert';\n\n    defineProps({\n        /**\n         * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n         * @values highlight, success, critical, warning\n         */\n        type: {\n            type: String as PropType<BentoFormLayoutFieldTipTypeOption>,\n            default: 'highlight',\n            validator: (value: BentoFormLayoutFieldTipTypeOption) => BentoFormLayoutFieldTipTypeOptions.includes(value),\n        },\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * You can help users provide accurate and well formatted information\n     * by using various elements that come with an input field.\n     *\n     * Use description/supporting text to add additional context to the\n     * field or guidance how to format the input correctly.\n     * Because description is always visible it should be the first\n     * choice in providing guidance.\n     *\n     * @example\n     * import { BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout-field-tip>\n     *              <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *\n     *              <template #message>This is a small tip that can be used in small spaces</template>\n     *          </bento-form-layout-field-tip>\n     *     `\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-field-tip.scss\" />\n","export type BentoLayoutGroupProportions =\n    | '33-33-33'\n    | '50-50'\n    | '25-75'\n    | '75-25'\n    | '33-66'\n    | '66-33'\n    | '25'\n    | '33'\n    | '50'\n    | '100';\n\nexport const BentoLayoutGroupProportions = [\n    '100',\n    '50',\n    '33',\n    '25',\n    '66-33',\n    '33-66',\n    '75-25',\n    '25-75',\n    '50-50',\n    '33-33-33',\n];\n","<template>\n    <div class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n        <slot></slot>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType } from 'vue';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\n\n    // Default proportion\n    const DEFAULT_PROPORTION = 100;\n\n    const props = defineProps({\n        /**\n         * The layout of the pair group of components.\n         * This will render the components within the width of the proportions.\n         * Only two colums are available.\n         *\n         * If only one value is entered, then it will assume there's only one child in the group.\n         * If two values are entered, the first value will be use for the first child and the second\n         * value for the second child.\n         *\n         * If the value entered is not listed in the example\n         * list below it will use 100% by default.\n         * @example\n         * '33-33-33'\n         * '50-50'\n         * '25-75'\n         * '75-25'\n         * '33-66'\n         * '66-33'\n         * '25'\n         * '33'\n         * '50'\n         * '100'\n         */\n        layout: {\n            type: String as PropType<BentoLayoutGroupProportions>,\n            default: '100',\n            validator: (value: BentoLayoutGroupProportions) => BentoLayoutGroupProportions.includes(value),\n        },\n    });\n\n    // Sets DEFAULT_PROPORTION by default if `layout` is not in the list\n    const computedLayout = computed(() =>\n        BentoLayoutGroupProportions.includes(props.layout) ? props.layout : DEFAULT_PROPORTION\n    );\n\n    const conditionalClasses = computed(() => ({\n        // Transform into column if the layout is unsupported\n        'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\n        // Assings the correct layout class\n        [`b-form-layout-group--${computedLayout.value}`]: true,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Use to provide horizontal layouts to build forms\n     * with two fields per line.\n     *\n     * These can be used for field combinations,\n     * such as post code and city or title and first name.\n     *\n     * @example\n     * import { BentoFormLayoutGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutGroup },\n     *     template: `\n     *          <bento-form-layout-group>\n     *              <first-element />\n     *              <second-element />\n     *          </bento-form-layout-group>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-group.scss\" />\n","<template>\n    <div class=\"b-form-layout-title\" :class=\"conditionalClasses\">\n        <bento-typography :el=\"el\" variant=\"title\" :medium=\"isSection\">\n            <slot />\n        </bento-typography>\n\n        <bento-typography v-if=\"hasSlot('description')\" class=\"b-form-layout-title__description\" el=\"span\" wide>\n            <slot name=\"description\" />\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * Defines if the Form Layout title is\n         * a \"section\" or a \"subsection\".\n         * Default is \"section\" (false). Turn into \"true\" for \"subsection\"\n         */\n        subsection: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Sets the HTML DOM element.\n         * @values h1, h2, h3, h4, h5, h6, div, p, span\n         */\n        el: {\n            type: BentoTypography.props.el.type,\n            required: true,\n            validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n        },\n    });\n\n    // Uses \"medium\" typography if it is a section title\n    const isSection = computed(() => !props.subsection);\n    const hasSlot = useHasSlot(slots);\n    const conditionalClasses = computed(() => ({\n        'b-form-layout-title--subsection': props.subsection,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * If you’re building a lengthy form, organise related\n     * fields into sections and, if needed, subsections.\n     *\n     * A form can have a \"Section Title\" and multiple \"Subsection titles\".\n     *\n     * One of the values provided in @see BentoTypographyElement must always be provided as a string\n     * to define correct HTML sementic from the application's context\n     *\n     * @example\n     * import { BentoFormLayoutTitle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutTitle },\n     *     template: `\n     *          <bento-form-layout-title subsection el=\"h2\">\n     *              Title\n     *              <template #description>Description text</template>\n     *          </bento-form-layout-title>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$3","slots","useSlots","hasSlot","useHasSlot","formLayoutElement","computed","props","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","BentoFormLayoutFieldTipTypeOptions","__default__$2","BentoLayoutGroupProportions","__default__$1","DEFAULT_PROPORTION","computedLayout","conditionalClasses","__default__","isSection"],"mappings":";;;;;;;AAsFI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;iBA1DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAeAI,IAAAC,EAAA,MAAAC,EAAA,OAAA,SAAA,KAAA,GACAC,IAAAF,EAAA,MAAAH,EAAA,cAAA,KAAAA,EAAA,eAAA,CAAA;AAEA,WAAAM,EAAAC,GAAAC,EAAAJ,GAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;qBC5CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,GCiDHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBCxCGC,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCuDIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAnEAC,IAAA,KAkCAC,IAAAX;AAAA,MAAuB,MAAAQ,EAAA,SAAAP,EAAA,MAAA,IAAAA,EAAA,SAAAS;AAAA,IACiD,GAGxEE,IAAAZ,EAAA,OAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAQ,EAAA,SAAAP,EAAA,MAAA;AAAA;AAAA,MAE0C,CAAA,wBAAAU,EAAA,OAAA,GAAA;AAAA,IAE/B,EAAA;;;;;;;;;;;;;;;;;qBCmBtDE,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;iBAvDAlB,IAAAC,EAAA,GAyBAkB,IAAAd,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAiB,IAAAZ,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"form-layout.js","sources":["../src/components/form-layout/form-layout.vue","../src/components/form-layout/components/form-layout-field-tip/form-layout-tip.types.ts","../src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue","../src/components/form-layout/components/form-layout-group/form-layout-group.types.ts","../src/components/form-layout/components/form-layout-group/form-layout-group.vue","../src/components/form-layout/components/form-layout-title/form-layout-title.vue"],"sourcesContent":["<template>\n    <component :is=\"formLayoutElement\" class=\"b-form-layout\" role=\"form\">\n        <bento-alert v-if=\"hasSlot('error-message')\" class=\"b-form-layout__error-message\" type=\"critical\">\n            <template #description>\n                <slot name=\"error-message\" />\n            </template>\n        </bento-alert>\n\n        <slot />\n\n        <div v-if=\"hasActions\" class=\"b-form-layout__actions-container\">\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-left\" />\n            </div>\n\n            <div class=\"b-form-layout__actions\">\n                <slot name=\"actions-right\" />\n            </div>\n        </div>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, toRef, useSlots } from 'vue';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables';\n    import { FORM_LAYOUT_LOADING_INJECTION_KEY } from './form-layout.types';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n        /**\n         * Renders the form layout as an HTML `form`\n         */\n        form: { type: Boolean, default: false },\n\n        /**\n         * Sets the state of the form and its fields to\n         * a read only status.\n         */\n        loading: { type: Boolean, default: false },\n    });\n\n    const formLayoutElement = computed(() => (props.form ? 'form' : 'div'));\n    const hasActions = computed(() => hasSlot('actions-left') || hasSlot('actions-right'));\n\n    provide(FORM_LAYOUT_LOADING_INJECTION_KEY, toRef(props, 'loading'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Form layout component is a pre-designed layout that serves\n     * as a starting point for creating a form.\n     *\n     * It can include various common form components:\n     * input field, dropdown, date picker, checkbox group, radio group,\n     * textarea, etc.\n     *\n     * Form layout is context agnostic and can be dropped in different\n     * places, for example in modals, side panels or pages.\n     *\n     * @example\n     * import { BentoFormLayout, BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayout, BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout>\n     *              <template #error-message>There is an error. Correct the highlighted field.</template>\n     *\n     *              <bento-input-field>Input field</bento-input-field>\n     *\n     *              <bento-form-layout-field-tip>\n     *                  <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *                  <template #message>This is a small tip that can be used in small spaces</template>\n     *              </bento-form-layout-field-tip>\n     *\n     *              <bento-form-layout-title subsection>\n     *                  Section title\n     *                  <template #description>Optional section description</template>\n     *              </bento-form-layout-title>\n     *          </bento-form-layout>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout.scss\" />\n","import { BentoAlertTypeOption } from '@/components/alert/alert.types';\n\nexport type BentoFormLayoutFieldTipTypeOption = `${BentoAlertTypeOption}`;\nexport const BentoFormLayoutFieldTipTypeOptions = ['warning', 'critical', 'highlight', 'success'];\n","<template>\n    <div class=\"b-form-layout-field-tip\">\n        <slot />\n        <bento-alert v-if=\"hasSlot('message')\" variant=\"tip\" :type=\"type\">\n            <template #description>\n                <slot name=\"message\" />\n            </template>\n        </bento-alert>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType, useSlots } from 'vue';\n    import { BentoFormLayoutFieldTipTypeOption, BentoFormLayoutFieldTipTypeOptions } from './form-layout-tip.types';\n    import { BentoAlert } from '@/components/alert';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n\n    defineProps({\n        /**\n         * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n         * @values highlight, success, critical, warning\n         */\n        type: {\n            type: String as PropType<BentoFormLayoutFieldTipTypeOption>,\n            default: 'highlight',\n            validator: (value: BentoFormLayoutFieldTipTypeOption) => BentoFormLayoutFieldTipTypeOptions.includes(value),\n        },\n    });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * You can help users provide accurate and well formatted information\n     * by using various elements that come with an input field.\n     *\n     * Use description/supporting text to add additional context to the\n     * field or guidance how to format the input correctly.\n     * Because description is always visible it should be the first\n     * choice in providing guidance.\n     *\n     * @example\n     * import { BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutFieldTip },\n     *     template: `\n     *          <bento-form-layout-field-tip>\n     *              <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n     *\n     *              <template #message>This is a small tip that can be used in small spaces</template>\n     *          </bento-form-layout-field-tip>\n     *     `\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-field-tip.scss\" />\n","export type BentoLayoutGroupProportions =\n    | '33-33-33'\n    | '50-50'\n    | '25-75'\n    | '75-25'\n    | '33-66'\n    | '66-33'\n    | '25'\n    | '33'\n    | '50'\n    | '100';\n\nexport const BentoLayoutGroupProportions = [\n    '100',\n    '50',\n    '33',\n    '25',\n    '66-33',\n    '33-66',\n    '75-25',\n    '25-75',\n    '50-50',\n    '33-33-33',\n];\n","<template>\n    <div class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n        <slot></slot>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType } from 'vue';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\n\n    // Default proportion\n    const DEFAULT_PROPORTION = 100;\n\n    const props = defineProps({\n        /**\n         * The layout of the pair group of components.\n         * This will render the components within the width of the proportions.\n         * Only two colums are available.\n         *\n         * If only one value is entered, then it will assume there's only one child in the group.\n         * If two values are entered, the first value will be use for the first child and the second\n         * value for the second child.\n         *\n         * If the value entered is not listed in the example\n         * list below it will use 100% by default.\n         * @example\n         * '33-33-33'\n         * '50-50'\n         * '25-75'\n         * '75-25'\n         * '33-66'\n         * '66-33'\n         * '25'\n         * '33'\n         * '50'\n         * '100'\n         */\n        layout: {\n            type: String as PropType<BentoLayoutGroupProportions>,\n            default: '100',\n            validator: (value: BentoLayoutGroupProportions) => BentoLayoutGroupProportions.includes(value),\n        },\n    });\n\n    // Sets DEFAULT_PROPORTION by default if `layout` is not in the list\n    const computedLayout = computed(() =>\n        BentoLayoutGroupProportions.includes(props.layout) ? props.layout : DEFAULT_PROPORTION\n    );\n\n    const conditionalClasses = computed(() => ({\n        // Transform into column if the layout is unsupported\n        'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\n        // Assings the correct layout class\n        [`b-form-layout-group--${computedLayout.value}`]: true,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Use to provide horizontal layouts to build forms\n     * with two fields per line.\n     *\n     * These can be used for field combinations,\n     * such as post code and city or title and first name.\n     *\n     * @example\n     * import { BentoFormLayoutGroup } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutGroup },\n     *     template: `\n     *          <bento-form-layout-group>\n     *              <first-element />\n     *              <second-element />\n     *          </bento-form-layout-group>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-group.scss\" />\n","<template>\n    <div class=\"b-form-layout-title\" :class=\"conditionalClasses\">\n        <bento-typography :el=\"el\" variant=\"title\" :medium=\"isSection\">\n            <slot />\n        </bento-typography>\n\n        <bento-typography v-if=\"hasSlot('description')\" class=\"b-form-layout-title__description\" el=\"span\" wide>\n            <slot name=\"description\" />\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * Defines if the Form Layout title is\n         * a \"section\" or a \"subsection\".\n         * Default is \"section\" (false). Turn into \"true\" for \"subsection\"\n         */\n        subsection: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Sets the HTML DOM element.\n         * @values h1, h2, h3, h4, h5, h6, div, p, span\n         */\n        el: {\n            type: BentoTypography.props.el.type,\n            required: true,\n            validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n        },\n    });\n\n    // Uses \"medium\" typography if it is a section title\n    const isSection = computed(() => !props.subsection);\n    const hasSlot = useHasSlot(slots);\n    const conditionalClasses = computed(() => ({\n        'b-form-layout-title--subsection': props.subsection,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * If you’re building a lengthy form, organise related\n     * fields into sections and, if needed, subsections.\n     *\n     * A form can have a \"Section Title\" and multiple \"Subsection titles\".\n     *\n     * One of the values provided in @see BentoTypographyElement must always be provided as a string\n     * to define correct HTML sementic from the application's context\n     *\n     * @example\n     * import { BentoFormLayoutTitle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoFormLayoutTitle },\n     *     template: `\n     *          <bento-form-layout-title subsection el=\"h2\">\n     *              Title\n     *              <template #description>Description text</template>\n     *          </bento-form-layout-title>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$3","slots","useSlots","hasSlot","useHasSlot","formLayoutElement","computed","props","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","BentoFormLayoutFieldTipTypeOptions","__default__$2","BentoLayoutGroupProportions","__default__$1","DEFAULT_PROPORTION","computedLayout","conditionalClasses","__default__","isSection"],"mappings":";;;;;;;AAsFI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;iBA1DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAeAI,IAAAC,EAAA,MAAAC,EAAA,OAAA,SAAA,KAAA,GACAC,IAAAF,EAAA,MAAAH,EAAA,cAAA,KAAAA,EAAA,eAAA,CAAA;AAEA,WAAAM,EAAAC,GAAAC,EAAAJ,GAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;qBC5CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,GCqDHC,IAAA,CAAA;;;;;;;;;;;;;;;AA3BA,UAAAZ,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;qBClBGa,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCuDIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAnEAC,IAAA,KAkCAC,IAAAX;AAAA,MAAuB,MAAAQ,EAAA,SAAAP,EAAA,MAAA,IAAAA,EAAA,SAAAS;AAAA,IACiD,GAGxEE,IAAAZ,EAAA,OAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAQ,EAAA,SAAAP,EAAA,MAAA;AAAA;AAAA,MAE0C,CAAA,wBAAAU,EAAA,OAAA,GAAA;AAAA,IAE/B,EAAA;;;;;;;;;;;;;;;;;qBCmBtDE,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;iBAvDAlB,IAAAC,EAAA,GAyBAkB,IAAAd,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAiB,IAAAZ,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/header.js

@@ -1,17 +1,17 @@
 import { defineComponent as E, ref as h, computed as T } from "vue";
 import { u as U } from "./chunks/use-has-slot.fbeb19ec.js";
-import { B as C, c as D, a as L } from "./chunks/index.d97166c6.js";
+import { B as C, c as D, a as L } from "./chunks/index.dd30e538.js";
 import { u as N } from "./chunks/i18n.eb5b985b.js";
-import { B as X } from "./chunks/button-actions-with-menu.d08d2c51.js";
+import { B as X } from "./chunks/button-actions-with-menu.e845d77a.js";
 import { c as I, a as F } from "./chunks/index.86453263.js";
 import { r as m, t as l, e as O, g as P, d as Y, f as B } from "./chunks/index.f55fdc32.js";
 import { e as G } from "./chunks/index.fdf12170.js";
 import { e as H } from "./chunks/index.d80206ed.js";
-import { a as g } from "./chunks/index.ec632d95.js";
+import { a as g } from "./chunks/index.15b088b9.js";
 import { g as W } from "./chunks/unique-id.a2a2b458.js";
 import { I as $ } from "./chunks/info.8b6328aa.js";
 import { n as A } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index7.css";
+import "./assets/index21.css";
 function z(o, e) {
   m(2, arguments);
   var n = l(o), t = l(e), c = n.getFullYear() - t.getFullYear(), a = n.getMonth() - t.getMonth();

package/dist/index.js

@@ -1,23 +1,23 @@
 import "./chunks/index.4c062058.js";
-import { t as f, c } from "./chunks/use-bento-toast-controller.8414d283.js";
-import { u as P } from "./chunks/use-bento-toast-controller.8414d283.js";
+import { t as f, c } from "./chunks/use-bento-toast-controller.c3277f73.js";
+import { u as P } from "./chunks/use-bento-toast-controller.c3277f73.js";
 import { BentoAccordion as k, BentoAccordionItem as w } from "./accordion.js";
 import { BentoActionBar as M } from "./action-bar.js";
 import { BentoAlert as O, BentoAlertEvent as R, BentoAlertTypeOption as z, BentoAlertVariant as j } from "./alert.js";
-import { a as K, b as U, B as Z } from "./chunks/button.e5f5638f.js";
+import { a as K, b as U, B as Z } from "./chunks/button.9d6435ae.js";
 import { BentoColumnOverflow as Y, BentoDataGrid as H, BentoDatagridAriaSortValue as _, BentoDatagridEvent as q, BentoDatagridSortDirection as J, BentoDatagridStyleState as Q } from "./data-grid.js";
 import { BentoCard as $, BentoCardBackground as ee, BentoCardTitleSize as te } from "./card.js";
 import { BentoDatePicker as ne, BentoDatePickerEvent as re } from "./date-picker.js";
-import { B as Be, a as ie } from "./chunks/index.4b6211c7.js";
-import { B as se, a as pe, u as ue } from "./chunks/dropdown.7d4a8dfc.js";
-import { B as de, a as fe } from "./chunks/checkbox.28578383.js";
+import { B as Be, a as ie } from "./chunks/index.8b8c3b16.js";
+import { B as se, a as pe, u as ue } from "./chunks/dropdown.10c034aa.js";
+import { B as de, a as fe } from "./chunks/checkbox.bfed007c.js";
 import { BentoClickOutside as xe } from "./click-outside.js";
 import { BentoCodeSnippet as ge, BentoCodeSnippetEvent as Se, BentoCodeSnippetSupportedLanguage as Ce, BentoCodeSnippetVariant as Te } from "./code-snippet.js";
 import { BentoCountry as De } from "./country.js";
 import { c as he, B as Ee, a as Ie, u as Fe, b as Le } from "./chunks/country.types.002caff2.js";
 import { BentoCurrency as Ve, BentoCurrencyISOCode as ke } from "./currency.js";
-import { B as Ge, a as Me } from "./chunks/index.9e40ffeb.js";
-import { B as Oe } from "./chunks/index.939dd5cf.js";
+import { B as Ge, a as Me } from "./chunks/index.b21197ca.js";
+import { B as Oe } from "./chunks/index.885d05a9.js";
 import { BentoEmptyState as ze, BentoEmptyStateImage as je, BentoEmptyStateImageVariant as Ne, BentoEmptyStateVariant as Ke } from "./empty-state.js";
 import { BentoFilterBar as Ze, BentoFilterBarEvent as We, BentoFilterEvent as Ye, BentoFilterItemType as He } from "./filter-bar.js";
 import { BentoFormLayout as qe, BentoFormLayoutFieldTip as Je, BentoFormLayoutGroup as Qe, BentoFormLayoutTitle as Xe } from "./form-layout.js";
@@ -25,16 +25,16 @@ import { BentoImage as et, BentoImageAspectRatio as tt, BentoImageObjectFit as o
 import { BentoInfoIcon as rt } from "./info-icon.js";
 import { BentoInputField as Bt, BentoInputFieldElementPosition as it, BentoInputFieldEvent as mt, BentoInputFieldStateClass as st, BentoInputFieldType as pt, BentoInputFieldVariant as ut } from "./input-field.js";
 import { BentoLoadingIndicator as dt, BentoLoadingIndicatorEvent as ft } from "./loading-indicator.js";
-import { B as xt, a as yt } from "./chunks/index.444d221f.js";
-import { B as St, a as Ct } from "./chunks/index.30948302.js";
-import { d as vt, f as Dt, g as bt, B as ht, e as Et, c as It, a as Ft, b as Lt } from "./chunks/base-modal.2d596e6f.js";
+import { B as xt, a as yt } from "./chunks/index.317fca12.js";
+import { B as St, a as Ct } from "./chunks/index.1ea85d4a.js";
+import { d as vt, f as Dt, g as bt, B as ht, e as Et, c as It, a as Ft, b as Lt } from "./chunks/base-modal.1fff7abe.js";
 import { BentoModal as Vt } from "./modal.js";
 import { BentoModalFullscreen as wt, BentoModalFullscreenPage as Gt } from "./modal-fullscreen.js";
 import { BentoHeader as At } from "./header.js";
 import { BentoPagination as Rt } from "./pagination.js";
-import { B as jt } from "./chunks/payment-method.564ed43a.js";
+import { B as jt } from "./chunks/payment-method.6c1ce07c.js";
 import { BentoPaymentMethodType as Kt } from "./payment-method.js";
-import { a as Zt, B as Wt } from "./chunks/index.ec632d95.js";
+import { a as Zt, B as Wt } from "./chunks/index.15b088b9.js";
 import { BentoRadioButton as Ht, BentoRadioGroup as _t, BentoRadioGroupVariant as qt } from "./radio-group.js";
 import { BentoSearchBar as Qt, BentoSearchBarEvent as Xt, BentoSearchBarInternalEvent as $t } from "./search-bar.js";
 import { BentoSecondaryNav as to } from "./secondary-nav.js";
@@ -43,7 +43,7 @@ import { BentoSegmentedControl as io, BentoSegmentedControlEvent as mo } from ".
 import { BentoSidepanel as po, BentoSidepanelEvent as uo, BentoSidepanelPage as lo } from "./sidepanel.js";
 import { BentoStatus as co, BentoStatusVariant as xo } from "./status.js";
 import { BentoStep as go, BentoStepper as So, BentoStepperTypeOption as Co, BentoStepperVariantOption as To } from "./stepper.js";
-import { B as Do, a as bo } from "./chunks/index.81e509f3.js";
+import { B as Do, a as bo } from "./chunks/index.aaf965f8.js";
 import { BentoSummaryGrid as Eo, BentoSummaryGridItemAmount as Io, BentoSummaryGridItemCustom as Fo, BentoSummaryGridItemNumeric as Lo, BentoSummaryGridItemPercentage as Po, BentoSummaryGridItemSize as Vo, BentoSummaryGridItemText as ko, BentoSummaryGridItemTrendDirection as wo } from "./summary-grid.js";
 import { BentoTab as Mo, BentoTabs as Ao } from "./tabs.js";
 import { BentoTag as Ro, BentoTagVariant as zo } from "./tag.js";
@@ -52,13 +52,13 @@ import { BentoTimeline as Uo, BentoTimelineGapUnit as Zo, BentoTimelineItem as W
 import { BentoToast as Jo } from "./toast.js";
 import { BentoToggle as Xo, BentoToggleLabelPosition as $o, BentoTogglePropClass as en } from "./toggle.js";
 import { BentoTutorial as on } from "./tutorial.js";
-import { B as rn, c as an, b as Bn, a as mn } from "./chunks/index.d97166c6.js";
+import { B as rn, c as an, b as Bn, a as mn } from "./chunks/index.dd30e538.js";
 import { BentoDataGridTemplate as pn } from "./data-grid-template.js";
-import { B as ln, c as dn, a as fn, b as cn } from "./chunks/button-actions.a03a672f.js";
-import { B as yn, a as gn } from "./chunks/loading-button.e8060c04.js";
+import { B as ln, c as dn, a as fn, b as cn } from "./chunks/button-actions.81db18e8.js";
+import { B as yn, a as gn } from "./chunks/loading-button.eafc9e1b.js";
 import { BentoToggleButton as Cn } from "./button.js";
-import { b as vn, b as Dn } from "./chunks/calendar.7d3e2db0.js";
-import { c as hn, b as En, c as In, b as Fn } from "./chunks/use-cached-selected-values.3772a679.js";
+import { b as vn, b as Dn } from "./chunks/calendar.640b8d25.js";
+import { c as hn, b as En, c as In, b as Fn } from "./chunks/use-cached-selected-values.69297473.js";
 import { BentoDropdownAvatar as Pn, BentoDropdownCountry as Vn, BentoDropdownCurrency as kn, BentoDropdownPaymentMethod as wn, BentoDropdownTag as Gn } from "./dropdown.js";
 import { C as An } from "./chunks/checkbox-input.1c3cc8ed.js";
 import { BentoCheckboxGroup as Rn, BentoCheckboxGroupVariant as zn } from "./checkbox.js";
@@ -68,8 +68,8 @@ import * as n from "zod";
 import { u as Un } from "./chunks/use-click-outside.941d1600.js";
 import { D as Wn } from "./chunks/date-input.9186a0bf.js";
 import { a as Hn, B as _n } from "./chunks/keyboard-navigation.ca47dfa8.js";
-import { B as Jn } from "./chunks/dropdown-default-textbox.a1c0c0fb.js";
-import { b as Xn, B as $n, a as er } from "./chunks/tooltip.e5deb137.js";
+import { B as Jn } from "./chunks/dropdown-default-textbox.54ca1b18.js";
+import { b as Xn, B as $n, a as er } from "./chunks/tooltip.58ef3f4a.js";
 function h(e) {
   return e;
 }

package/dist/info-icon.js

@@ -1,9 +1,9 @@
 import { defineComponent as n } from "vue";
-import { c as i } from "./chunks/index.94acf214.js";
+import { c as i } from "./chunks/index.671768a1.js";
 import { I as r } from "./chunks/info.8b6328aa.js";
-import { b as s } from "./chunks/tooltip.e5deb137.js";
+import { b as s } from "./chunks/tooltip.58ef3f4a.js";
 import { n as a } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index8.css";
+import "./assets/index27.css";
 const p = n({
   name: "bento-info-icon",
   components: { InfoIcon: r },

package/dist/input-field.js

@@ -1,15 +1,15 @@
 import { defineComponent as W, useAttrs as Y, useSlots as j, ref as O, provide as q, toRef as K, computed as i, toRefs as X } from "vue";
-import { I as z, B as G } from "./chunks/dropdown.7d4a8dfc.js";
-import { p as I, d as R, B as J } from "./chunks/index.d97166c6.js";
+import { I as z, B as G } from "./chunks/dropdown.10c034aa.js";
+import { p as I, d as R, B as J } from "./chunks/index.dd30e538.js";
 import { g as u } from "./chunks/unique-id.a2a2b458.js";
 import { g as Q } from "./chunks/get-slot-text.99c3d860.js";
 import { u as Z } from "./chunks/aria-label.ac9651a5.js";
 import { u as ee } from "./chunks/i18n.eb5b985b.js";
 import { u as te } from "./chunks/use-form-layout-loading.d03e5d48.js";
 import { u as ae } from "./chunks/use-has-slot.fbeb19ec.js";
-import { E as oe, F as re } from "./chunks/error-message.db315e68.js";
+import { E as oe, F as re } from "./chunks/error-message.31ec12b7.js";
 import { n as ie } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index39.css";
+import "./assets/index25.css";
 var d = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.PAYMENT_METHOD = "payment-method", a.STATIC_VALUE = "static-value", a.DROPDOWN = "dropdown", a))(d || {}), n = /* @__PURE__ */ ((a) => (a.START = "start", a.END = "end", a))(n || {}), p = /* @__PURE__ */ ((a) => (a.CONDENSED = "condensed", a.DISABLED = "disabled", a.READONLY = "readonly", a.ERROR = "error", a))(p || {}), v = /* @__PURE__ */ ((a) => (a.SEARCH = "search", a.TEXT = "text", a.NUMBER = "number", a))(v || {}), ne = /* @__PURE__ */ ((a) => (a.INPUT = "input", a.ESCAPE_PRESSED = "escape-pressed", a.UPDATE_DROPDOWN = "update:dropdown", a.DROPDOWN_INPUT = "dropdown-input", a.FOCUS = "focus", a.CHANGE = "change", a.BLUR = "blur", a.KEYDOWN = "keydown", a))(ne || {});
 const de = {
   "en-US": {

package/dist/internal.js

@@ -1,12 +1,12 @@
-import { B as o, L as r } from "./chunks/listbox-option-tag.95a65534.js";
-import { C as s, a as p, b as l } from "./chunks/calendar.7d3e2db0.js";
-import { C as n, a as C } from "./chunks/copy.3c50b447.js";
-import { C as m } from "./chunks/controls-group.faa482b2.js";
-import { B as f, b as G, a as d, D as I } from "./chunks/dialog-page.286ead53.js";
-import { E as _, F as u } from "./chunks/error-message.db315e68.js";
-import { F as A } from "./chunks/fixed-scroller.3135f86c.js";
+import { B as o, L as r } from "./chunks/listbox-option-tag.6bbb6bbe.js";
+import { C as s, a as p, b as l } from "./chunks/calendar.640b8d25.js";
+import { C as n, a as C } from "./chunks/copy.f85700c6.js";
+import { C as m } from "./chunks/controls-group.4fb50009.js";
+import { B as f, b as G, a as d, D as I } from "./chunks/dialog-page.73da22cf.js";
+import { E as _, F as u } from "./chunks/error-message.31ec12b7.js";
+import { F as A } from "./chunks/fixed-scroller.4eb9a9ac.js";
 import { G as T, a as g } from "./chunks/grid-layout.e0025286.js";
-import { B as D, a as F, u as b } from "./chunks/use-cached-selected-values.3772a679.js";
+import { B as D, a as F, u as b } from "./chunks/use-cached-selected-values.69297473.js";
 import { B as P } from "./chunks/teleport.84b0f20b.js";
 export {
   o as BentoAvatar,

package/dist/link.js

@@ -1,4 +1,4 @@
-import { B as o, a as t } from "./chunks/index.444d221f.js";
+import { B as o, a as t } from "./chunks/index.317fca12.js";
 export {
   o as BentoLink,
   t as BentoLinkVariant

package/dist/loading-indicator.js

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

package/dist/menu.js

@@ -1,4 +1,4 @@
-import { B as o, a as t } from "./chunks/index.30948302.js";
+import { B as o, a as t } from "./chunks/index.1ea85d4a.js";
 export {
   o as BentoMenu,
   t as BentoMenuEvent

package/dist/modal-fullscreen.js

@@ -1,16 +1,16 @@
 import { defineComponent as C, useSlots as B, onMounted as L, toRefs as O, ref as r, computed as M, watch as k, nextTick as T, provide as d } from "vue";
-import { a as D } from "./chunks/button.e5f5638f.js";
-import { B as N } from "./chunks/index.596c4d0a.js";
-import { B as w } from "./chunks/index.d97166c6.js";
+import { a as D } from "./chunks/button.9d6435ae.js";
+import { B as N } from "./chunks/index.d553d3d1.js";
+import { B as w } from "./chunks/index.dd30e538.js";
 import { u as x } from "./chunks/use-has-slot.fbeb19ec.js";
-import { D as G, B as R, b as J, a as K } from "./chunks/dialog-page.286ead53.js";
-import { B as U } from "./chunks/button-actions.a03a672f.js";
+import { D as G, B as R, b as J, a as K } from "./chunks/dialog-page.73da22cf.js";
+import { B as U } from "./chunks/button-actions.81db18e8.js";
 import { n as P } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { C as Y } from "./chunks/cross.04678d81.js";
 import { u as $ } from "./chunks/i18n.eb5b985b.js";
 import { g as z } from "./chunks/unique-id.a2a2b458.js";
 import { M as H } from "./chunks/modal-fullscreen.keys.b9f31632.js";
-import "./assets/index30.css";
+import "./assets/index22.css";
 const V = {}, j = /* @__PURE__ */ C({
   ...V,
   __name: "modal-fullscreen-page",