@adyen/bento-vue2 1.6.0 → 1.6.1

package/dist/filter-bar.js

@@ -3,37 +3,37 @@ import { defineComponent as x, useSlots as qe, useAttrs as je, computed as r, re
 import { BentoPopover as de } from "./popover.js";
 import { u as G } from "./chunks/i18n.155748d6.js";
 import { g as ie } from "./chunks/unique-id.a2a2b458.js";
-import { B as ae, d as Ge } from "./chunks/index.74da0d41.js";
+import { B as ae, d as Ge } from "./chunks/index.2fce7703.js";
 import { u as he } from "./chunks/aria-label.ac9651a5.js";
-import { B as Ce, a as fe } from "./chunks/base-button.431fb8cf.js";
+import { B as Ce, a as fe } from "./chunks/base-button.d1ba66cd.js";
 import { g as ge } from "./chunks/get-slot-text.c1114034.js";
 import { u as Se } from "./chunks/use-has-slot.6052d56a.js";
 import { a as Be, C as Ae } from "./chunks/chevron-up.674ec2e5.js";
-import { B as Ze } from "./chunks/tooltip.ca9673ee.js";
+import { B as Ze } from "./chunks/tooltip.68e81e9c.js";
 import { B as We } from "./chunks/directive.0408e565.js";
 import { BentoRadioGroup as Qe } from "./radio-group.js";
 import { BentoInputField as De } from "./input-field.js";
 import { BentoSearchBar as le, BentoSearchBarEvent as W } from "./search-bar.js";
 import { u as Xe } from "./chunks/toastController.0e01443d.js";
 import { BentoModal as et } from "./modal.js";
-import { e as tt } from "./chunks/base-modal.f462dac0.js";
-import { a as lt } from "./chunks/button.38099670.js";
-import { B as at, u as Te } from "./chunks/dropdown.5d22958c.js";
-import { g as nt } from "./chunks/index.74258013.js";
+import { e as tt } from "./chunks/base-modal.ec74044e.js";
+import { a as lt } from "./chunks/button.eb60d460.js";
+import { B as at, u as Te } from "./chunks/dropdown.3f198167.js";
+import { g as nt } from "./chunks/index.c39c64c9.js";
 import { BentoDivider as Ee } from "./divider.js";
 import { BentoDatePicker as st } from "./date-picker.js";
-import { f as K } from "./chunks/index.fd557233.js";
+import { f as K } from "./chunks/index.a709a6b0.js";
 import { e as Y, d as Pe, f as $e } from "./chunks/index.f55fdc32.js";
-import { a as ot, i as rt } from "./chunks/calendar.371e5ae2.js";
-import { B as it, D as ut, i as _e } from "./chunks/index.5d058912.js";
+import { a as ot, i as rt } from "./chunks/calendar.b74f8a0f.js";
+import { B as it, D as ut, i as _e } from "./chunks/index.31949c1a.js";
 import { BentoButtonActions as ct } from "./button.js";
 import { D as be } from "./chunks/date-input.9186a0bf.js";
-import { b as dt } from "./chunks/listbox.cbb27077.js";
-import { B as ft, L as xe } from "./chunks/listbox-option-tag.a651fa46.js";
+import { b as dt } from "./chunks/listbox.e7bf46e4.js";
+import { B as ft, L as xe } from "./chunks/listbox-option-tag.1362a2d7.js";
 import { BentoCountry as _t } from "./country.js";
 import { u as bt } from "./chunks/useCountryItems.5d7b436e.js";
 import { BentoPaymentMethod as vt } from "./payment-method.js";
-import "./assets/index42.css";
+import "./assets/index41.css";
 const pt = {}, yt = /* @__PURE__ */ x({
   ...pt,
   __name: "filter-bar-button",

package/dist/focus-trap.js

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

package/dist/form-layout.js

@@ -1,12 +1,12 @@
-import { defineComponent as _, useSlots as p, computed as a, provide as v, toRef as f, onMounted as g, ref as h } from "vue";
+import { defineComponent as _, useSlots as p, computed as a, provide as g, toRef as f, onMounted as h, ref as L } from "vue";
 import { BentoAlert as d } from "./alert.js";
 import { u as m } from "./chunks/use-has-slot.6052d56a.js";
-import { F as L } from "./chunks/form-layout.types.a7a1438d.js";
+import { F as b } from "./chunks/form-layout.types.a7a1438d.js";
 import { n as l } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as u, c as b } from "./chunks/index.74da0d41.js";
-import "./assets/index40.css";
-const C = {}, $ = /* @__PURE__ */ _({
-  ...C,
+import { B as u, c as C } from "./chunks/index.2fce7703.js";
+import "./assets/index38.css";
+const B = {}, $ = /* @__PURE__ */ _({
+  ...B,
   __name: "form-layout",
   props: {
     /**
@@ -20,27 +20,27 @@ const C = {}, $ = /* @__PURE__ */ _({
     loading: { type: Boolean, default: !1 }
   },
   setup(o) {
-    const t = o, s = p(), e = m(s), r = a(() => t.form ? "form" : "div"), n = a(() => e("actions-left") || e("actions-right"));
-    return v(L, f(t, "loading")), { __sfc: !0, slots: s, hasSlot: e, props: t, formLayoutElement: r, hasActions: n, BentoAlert: d };
+    const t = o, e = p(), s = m(e), n = a(() => t.form ? "form" : "div"), r = a(() => s("actions-left") || s("actions-right"));
+    return g(b, f(t, "loading")), { __sfc: !0, slots: e, hasSlot: s, props: t, formLayoutElement: n, hasActions: r, BentoAlert: d };
   }
 });
-var B = function() {
-  var t = this, s = t._self._c, e = t._self._setupProxy;
-  return s(e.formLayoutElement, { tag: "component", staticClass: "b-form-layout", attrs: { role: "form" } }, [e.hasSlot("error-message") ? s(e.BentoAlert, { staticClass: "b-form-layout__error-message", attrs: { type: "critical" }, scopedSlots: t._u([{ key: "description", fn: function() {
+var F = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e(s.formLayoutElement, { tag: "component", staticClass: "b-form-layout", attrs: { role: "form" } }, [s.hasSlot("error-message") ? e(s.BentoAlert, { staticClass: "b-form-layout__error-message", attrs: { type: "critical" }, scopedSlots: t._u([{ key: "description", fn: function() {
     return [t._t("error-message")];
-  }, proxy: !0 }], null, !0) }) : t._e(), t._t("default"), e.hasActions ? s("div", { staticClass: "b-form-layout__actions-container" }, [s("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-left")], 2), s("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-right")], 2)]) : t._e()], 2);
-}, F = [], T = /* @__PURE__ */ l(
+  }, proxy: !0 }], null, !0) }) : t._e(), t._t("default"), s.hasActions ? e("div", { staticClass: "b-form-layout__actions-container" }, [e("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-left")], 2), e("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-right")], 2)]) : t._e()], 2);
+}, T = [], x = /* @__PURE__ */ l(
   $,
-  B,
   F,
+  T,
   !1,
   null,
   "178aebc7",
   null,
   null
 );
-const W = T.exports, x = ["warning", "critical", "highlight", "success"], S = {}, A = /* @__PURE__ */ _({
-  ...S,
+const Z = x.exports, S = ["warning", "critical", "highlight", "success"], A = {}, O = /* @__PURE__ */ _({
+  ...A,
   __name: "form-layout-field-tip",
   props: {
     /**
@@ -50,29 +50,29 @@ const W = T.exports, x = ["warning", "critical", "highlight", "success"], S = {}
     type: {
       type: String,
       default: "highlight",
-      validator: (o) => x.includes(o)
+      validator: (o) => S.includes(o)
     }
   },
   setup(o) {
     return { __sfc: !0, BentoAlert: d };
   }
 });
-var O = function() {
-  var t = this, s = t._self._c, e = t._self._setupProxy;
-  return s("div", { staticClass: "b-form-layout-field-tip" }, [t._t("default"), s(e.BentoAlert, { attrs: { variant: "tip", type: t.type }, scopedSlots: t._u([{ key: "description", fn: function() {
+var E = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e("div", { staticClass: "b-form-layout-field-tip" }, [t._t("default"), e(s.BentoAlert, { attrs: { variant: "tip", type: t.type }, scopedSlots: t._u([{ key: "description", fn: function() {
     return [t._t("message")];
   }, proxy: !0 }], null, !0) })], 2);
-}, E = [], G = /* @__PURE__ */ l(
-  A,
+}, G = [], P = /* @__PURE__ */ l(
   O,
   E,
+  G,
   !1,
   null,
   "52686d0f",
   null,
   null
 );
-const X = G.exports, i = [
+const tt = P.exports, i = [
   "100",
   "50",
   "33",
@@ -83,21 +83,26 @@ const X = G.exports, i = [
   "25-75",
   "50-50",
   "33-33-33"
-], P = 100, R = (o, t) => {
-  const s = (r) => {
-    var n;
-    return (n = r.split) == null ? void 0 : n.call(r, "-").map((c) => parseInt(c, 10));
-  }, e = a(
-    () => i.includes(o.value) ? s(o.value) : P
+], R = 100;
+function I(o, t, e) {
+  o.parentNode.insertBefore(t, o), t.appendChild(o), t.classList.add(e);
+}
+const N = (o, t) => {
+  const e = (n) => {
+    var r;
+    return (r = n.split) == null ? void 0 : r.call(n, "-").map((c) => parseInt(c, 10));
+  }, s = a(
+    () => i.includes(o.value) ? e(o.value) : R
   );
-  g(() => {
-    const r = t.value.classList[0];
-    t.value.querySelectorAll(`.${r} > *`).forEach((c, y) => {
-      c.classList.add(`${r}--${e.value[y] || "100"}`);
+  h(() => {
+    const n = t.value.classList[0];
+    t.value.querySelectorAll(`.${n} > *`).forEach((c, y) => {
+      const v = `${n}--${s.value[y] || "100"}`;
+      I(c, document.createElement("div"), v);
     });
   });
-}, I = {}, N = /* @__PURE__ */ _({
-  ...I,
+}, w = {}, k = /* @__PURE__ */ _({
+  ...w,
   __name: "form-layout-group",
   props: {
     /**
@@ -130,31 +135,31 @@ const X = G.exports, i = [
     }
   },
   setup(o) {
-    const t = o, s = h(null);
-    R(f(t, "layout"), s);
-    const e = a(() => ({
+    const t = o, e = L(null);
+    N(f(t, "layout"), e);
+    const s = a(() => ({
       // Transform into column if the layout is unsopprted
       // "form-layout.scss" depends on this class
       "b-form-layout-group--column": !i.includes(t.layout)
     }));
-    return { __sfc: !0, props: t, formLayoutGroup: s, conditionalClasses: e };
+    return { __sfc: !0, props: t, formLayoutGroup: e, conditionalClasses: s };
   }
 });
-var k = function() {
-  var t = this, s = t._self._c, e = t._self._setupProxy;
-  return s("div", { ref: "formLayoutGroup", staticClass: "b-form-layout-group", class: e.conditionalClasses }, [t._t("default")], 2);
-}, q = [], w = /* @__PURE__ */ l(
-  N,
+var q = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e("div", { ref: "formLayoutGroup", staticClass: "b-form-layout-group", class: s.conditionalClasses }, [t._t("default")], 2);
+}, D = [], M = /* @__PURE__ */ l(
   k,
   q,
+  D,
   !1,
   null,
   "ccb524d7",
   null,
   null
 );
-const Z = w.exports, D = {}, M = /* @__PURE__ */ _({
-  ...D,
+const et = M.exports, U = {}, Y = /* @__PURE__ */ _({
+  ...U,
   __name: "form-layout-title",
   props: {
     /**
@@ -173,34 +178,34 @@ const Z = w.exports, D = {}, M = /* @__PURE__ */ _({
     el: {
       type: u.props.el.type,
       required: !0,
-      validator: (o) => Object.values(b).includes(o)
+      validator: (o) => Object.values(C).includes(o)
     }
   },
   setup(o) {
-    const t = o, s = p(), e = a(() => !t.subsection), r = m(s), n = a(() => ({
+    const t = o, e = p(), s = a(() => !t.subsection), n = m(e), r = a(() => ({
       "b-form-layout-title--subsection": t.subsection
     }));
-    return { __sfc: !0, slots: s, props: t, isSection: e, hasSlot: r, conditionalClasses: n, BentoTypography: u };
+    return { __sfc: !0, slots: e, props: t, isSection: s, hasSlot: n, conditionalClasses: r, BentoTypography: u };
   }
 });
-var U = function() {
-  var t = this, s = t._self._c, e = t._self._setupProxy;
-  return s("div", { staticClass: "b-form-layout-title", class: e.conditionalClasses }, [s(e.BentoTypography, { attrs: { el: t.el, variant: "title", medium: e.isSection } }, [t._t("default")], 2), e.hasSlot("description") ? s(e.BentoTypography, { staticClass: "b-form-layout-title__description", attrs: { el: "span", wide: "" } }, [t._t("description")], 2) : t._e()], 1);
-}, Y = [], j = /* @__PURE__ */ l(
-  M,
-  U,
+var j = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e("div", { staticClass: "b-form-layout-title", class: s.conditionalClasses }, [e(s.BentoTypography, { attrs: { el: t.el, variant: "title", medium: s.isSection } }, [t._t("default")], 2), s.hasSlot("description") ? e(s.BentoTypography, { staticClass: "b-form-layout-title__description", attrs: { el: "span", wide: "" } }, [t._t("description")], 2) : t._e()], 1);
+}, z = [], H = /* @__PURE__ */ l(
   Y,
+  j,
+  z,
   !1,
   null,
   "03648a9d",
   null,
   null
 );
-const tt = j.exports;
+const st = H.exports;
 export {
-  W as BentoFormLayout,
-  X as BentoFormLayoutFieldTip,
-  Z as BentoFormLayoutGroup,
-  tt as BentoFormLayoutTitle
+  Z as BentoFormLayout,
+  tt as BentoFormLayoutFieldTip,
+  et as BentoFormLayoutGroup,
+  st as BentoFormLayoutTitle
 };
 //# sourceMappingURL=form-layout.js.map

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/composable/use-form-layout-group-percentage.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","import { computed, onMounted, Ref } from 'vue';\nimport { BentoLayoutGroupProportions } from '../form-layout-group.types';\n\nconst DEFAULT_PROPORTION = 100;\n\n/**\n * Calculates the CSS classes based on the percentage\n * for each one of the layouts in format `##-##` or `##`.\n *\n * It receives a layout of type @see BentoLayoutGroupProportions to\n * generate the class and apply it to the children of the @see BentoFormLayoutGroup component\n *\n * @param {Ref<BentoLayoutGroupProportions>} layoutProp Layout string in the format `##` or `##-##`\n * @param {Ref<HTMLElement>} formLayoutGroupRef Reference to an HTML element of type BentoFormLayoutGroup\n */\nexport const useFormLayoutGroupPercentage = (\n    layoutProp: Ref<BentoLayoutGroupProportions>,\n    formLayoutGroupRef: Ref<HTMLElement>\n) => {\n    // Split the `##-##` format into individual values [##, ##]\n    const getLayoutValues = layout => layout.split?.('-').map(value => parseInt(value, 10));\n    // Split the values only if the are in BentoLayoutGroupProportions, otherwise return 100%\n    const layout = computed(() =>\n        BentoLayoutGroupProportions.includes(layoutProp.value) ? getLayoutValues(layoutProp.value) : DEFAULT_PROPORTION\n    );\n\n    onMounted(() => {\n        // Apply class to every immediate child\n        const layoutClassName = formLayoutGroupRef.value.classList[0];\n        const immediateChildren = formLayoutGroupRef.value.querySelectorAll(`.${layoutClassName} > *`); // Get immediate children\n        immediateChildren.forEach((child, index) => {\n            child.classList.add(`${layoutClassName}--${layout.value[index] || '100'}`); // 100% default\n        });\n    });\n};\n","<template>\n    <div ref=\"formLayoutGroup\" class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n        <slot></slot>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, ref, toRef } from 'vue';\n    import { useFormLayoutGroupPercentage } from './composable/use-form-layout-group-percentage';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\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    const formLayoutGroup = ref(null);\n    useFormLayoutGroupPercentage(toRef(props, 'layout'), formLayoutGroup);\n\n    const conditionalClasses = computed(() => ({\n        // Transform into column if the layout is unsopprted\n        // \"form-layout.scss\" depends on this class\n        'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\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_PROPORTION","useFormLayoutGroupPercentage","layoutProp","formLayoutGroupRef","getLayoutValues","layout2","_a","value","layout","onMounted","layoutClassName","child","index","__default__$1","formLayoutGroup","ref","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,GCpBAC,IAAA,KAYaC,IAAA,CAAAC,GAAAC,MAAA;AAKT,QAAAC,IAAA,CAAAC,MAAA;;AAAA,YAAAC,IAAAD,EAAA,UAAA,gBAAAC,EAAA,KAAAD,GAAA,KAAA,IAAA,CAAAE,MAAA,SAAAA,GAAA,EAAA;AAAA,KAEAC,IAAAjB;AAAA,IAAe,MAAAQ,EAAA,SAAAG,EAAA,KAAA,IAAAE,EAAAF,EAAA,KAAA,IAAAF;AAAA,EACkF;AAGjG,EAAAS,EAAA,MAAA;AAEI,UAAAC,IAAAP,EAAA,MAAA,UAAA,CAAA;AAEA,IADAA,EAAA,MAAA,iBAAA,IAAAO,OAAA,EACA,QAAA,CAAAC,GAAAC,MAAA;AACI,MAAAD,EAAA,UAAA,IAAA,GAAAD,MAAAF,EAAA,MAAAI,CAAA,KAAA,OAAA;AAAA,IAAyE,CAAA;AAAA,EAC5E,CAAA;AAET,GCuCIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/BAC,IAAAC,EAAA,IAAA;AACA,IAAAd,EAAAL,EAAAJ,GAAA,QAAA,GAAAsB,CAAA;AAEA,UAAAE,IAAAzB,EAAA,OAAA;AAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAQ,EAAA,SAAAP,EAAA,MAAA;AAAA,IAG0C,EAAA;;;;;;;;;;;;;;;;;qBCwBrFyB,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;iBAvDA/B,IAAAC,EAAA,GAyBA+B,IAAA3B,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACA8B,IAAAzB,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/composable/use-form-layout-group-percentage.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","import { computed, onMounted, Ref } from 'vue';\nimport { BentoLayoutGroupProportions } from '../form-layout-group.types';\n\nconst DEFAULT_PROPORTION = 100;\n\n/**\n * Wraps a FormLayoutGroup child inside a \"div\" container.\n * This helps preventing the components from re-writing the classes or styles.\n * @param {Element} child - Child element to be wrapped\n * @param {HTMLDivElement} container - Container in which the child will be wrapped into\n * @param {string} containerClass - FormLayoutGroup layout percentage class\n */\nfunction wrapInsideContainer(child: Element, container: HTMLDivElement, containerClass: string) {\n    // Insert container above the child\n    child.parentNode.insertBefore(container, child);\n    // Move child to the container\n    container.appendChild(child);\n    // Apply layout class\n    container.classList.add(containerClass);\n}\n\n/**\n * Calculates the CSS classes based on the percentage\n * for each one of the layouts in format `##-##` or `##`.\n *\n * It receives a layout of type @see BentoLayoutGroupProportions to\n * generate the class and apply it to the children of the @see BentoFormLayoutGroup component\n *\n * @param {Ref<BentoLayoutGroupProportions>} layoutProp Layout string in the format `##` or `##-##`\n * @param {Ref<HTMLElement>} formLayoutGroupRef Reference to an HTML element of type BentoFormLayoutGroup\n */\nexport const useFormLayoutGroupPercentage = (\n    layoutProp: Ref<BentoLayoutGroupProportions>,\n    formLayoutGroupRef: Ref<HTMLElement>\n) => {\n    // Split the `##-##` format into individual values [##, ##]\n    const getLayoutValues = layout => layout.split?.('-').map(value => parseInt(value, 10));\n    // Split the values only if the are in BentoLayoutGroupProportions, otherwise return 100%\n    const layout = computed(() =>\n        BentoLayoutGroupProportions.includes(layoutProp.value) ? getLayoutValues(layoutProp.value) : DEFAULT_PROPORTION\n    );\n\n    onMounted(() => {\n        // Apply class to every immediate child\n        const layoutClassName = formLayoutGroupRef.value.classList[0];\n        const immediateChildren = formLayoutGroupRef.value.querySelectorAll(`.${layoutClassName} > *`); // Get immediate children\n\n        immediateChildren.forEach((child, index) => {\n            const containerClass = `${layoutClassName}--${layout.value[index] || '100'}`; // 100% default\n            wrapInsideContainer(child, document.createElement('div'), containerClass);\n        });\n    });\n};\n","<template>\n    <div ref=\"formLayoutGroup\" class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n        <slot></slot>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, ref, toRef } from 'vue';\n    import { useFormLayoutGroupPercentage } from './composable/use-form-layout-group-percentage';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\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    const formLayoutGroup = ref(null);\n    useFormLayoutGroupPercentage(toRef(props, 'layout'), formLayoutGroup);\n\n    const conditionalClasses = computed(() => ({\n        // Transform into column if the layout is unsopprted\n        // \"form-layout.scss\" depends on this class\n        'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\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_PROPORTION","wrapInsideContainer","child","container","containerClass","useFormLayoutGroupPercentage","layoutProp","formLayoutGroupRef","getLayoutValues","layout2","_a","value","layout","onMounted","layoutClassName","index","__default__$1","formLayoutGroup","ref","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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBCxCGC,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCpBAC,IAAA;AASA,SAAAC,EAAAC,GAAAC,GAAAC,GAAA;AAEI,EAAAF,EAAA,WAAA,aAAAC,GAAAD,CAAA,GAEAC,EAAA,YAAAD,CAAA,GAEAC,EAAA,UAAA,IAAAC,CAAA;AACJ;AAYa,MAAAC,IAAA,CAAAC,GAAAC,MAAA;AAKT,QAAAC,IAAA,CAAAC,MAAA;;AAAA,YAAAC,IAAAD,EAAA,UAAA,gBAAAC,EAAA,KAAAD,GAAA,KAAA,IAAA,CAAAE,MAAA,SAAAA,GAAA,EAAA;AAAA,KAEAC,IAAArB;AAAA,IAAe,MAAAQ,EAAA,SAAAO,EAAA,KAAA,IAAAE,EAAAF,EAAA,KAAA,IAAAN;AAAA,EACkF;AAGjG,EAAAa,EAAA,MAAA;AAEI,UAAAC,IAAAP,EAAA,MAAA,UAAA,CAAA;AAGA,IAFAA,EAAA,MAAA,iBAAA,IAAAO,OAAA,EAEA,QAAA,CAAAZ,GAAAa,MAAA;AACI,YAAAX,IAAA,GAAAU,MAAAF,EAAA,MAAAG,CAAA,KAAA;AACA,MAAAd,EAAAC,GAAA,SAAA,cAAA,KAAA,GAAAE,CAAA;AAAA,IAAwE,CAAA;AAAA,EAC3E,CAAA;AAET,GCqBIY,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/BAC,IAAAC,EAAA,IAAA;AACA,IAAAb,EAAAT,EAAAJ,GAAA,QAAA,GAAAyB,CAAA;AAEA,UAAAE,IAAA5B,EAAA,OAAA;AAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAQ,EAAA,SAAAP,EAAA,MAAA;AAAA,IAG0C,EAAA;;;;;;;;;;;;;;;;;sBCwBrF4B,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;iBAvDAlC,IAAAC,EAAA,GAyBAkC,IAAA9B,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAiC,IAAA5B,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/header.js

@@ -4,12 +4,12 @@ import { BentoButtonActions as E } from "./button.js";
 import { n as I } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { BentoInfoIcon as w } from "./info-icon.js";
 import { u as U } from "./chunks/use-has-slot.6052d56a.js";
-import { B, c as b, a as X } from "./chunks/index.74da0d41.js";
+import { B, c as b, a as X } from "./chunks/index.2fce7703.js";
 import { u as P } from "./chunks/i18n.155748d6.js";
 import { c as p, a as R } from "./chunks/index.86453263.js";
 import { r as l, t as i, e as g, g as y, d as H, f as Y } from "./chunks/index.f55fdc32.js";
 import { e as F } from "./chunks/index.fdf12170.js";
-import "./assets/index36.css";
+import "./assets/index6.css";
 function G(e, t) {
   l(2, arguments);
   var n = i(e), a = i(t), s = n.getFullYear() - a.getFullYear(), r = n.getMonth() - a.getMonth();

package/dist/index.js

@@ -6,19 +6,19 @@ import { reactive as m } from "vue";
 import { g as p } from "./chunks/unique-id.a2a2b458.js";
 import { BentoAccordion as C, BentoAccordionItem as T } from "./accordion.js";
 import { BentoAlert as D, BentoAlertEvent as v, BentoAlertTypeOption as I, BentoAlertVariant as E } from "./alert.js";
-import { a as L, b as P, B as F } from "./chunks/button.38099670.js";
+import { a as L, b as P, B as F } from "./chunks/button.eb60d460.js";
 import { BentoColumnOverflow as k, BentoDataGrid as G, BentoDatagridAriaSortValue as w, BentoDatagridEvent as A, BentoDatagridSortDirection as M, BentoDatagridStyleState as O } from "./data-grid.js";
 import { BentoCard as _, BentoCardBackground as N, BentoCardTitleSize as q } from "./card.js";
 import { BentoDatePicker as U, BentoDatePickerEvent as K } from "./date-picker.js";
-import { B as Y, a as j } from "./chunks/index.5d058912.js";
-import { B as $, u as J } from "./chunks/dropdown.5d22958c.js";
+import { B as Y, a as j } from "./chunks/index.31949c1a.js";
+import { B as $, u as J } from "./chunks/dropdown.3f198167.js";
 import { BentoDropdownAvatar as X, BentoDropdownCountry as Z, BentoDropdownCurrency as ee, BentoDropdownPaymentMethod as te, BentoDropdownTag as oe } from "./dropdown.js";
-import { B as re, b as ae, a as Be } from "./chunks/checkbox.b8c2e583.js";
+import { B as re, b as ae, a as Be } from "./chunks/checkbox.96ee3f71.js";
 import { BentoClickOutside as me } from "./click-outside.js";
 import { BentoCodeSnippet as se, BentoCodeSnippetEvent as de, BentoCodeSnippetSupportedLanguage as ue, BentoCodeSnippetVariant as le } from "./code-snippet.js";
 import { BentoCountry as xe, BentoCountryCode as ye, BentoCountryVariant as ce, useCountryCapital as ge, useCountryName as Se, useCountryPhoneCode as Ce } from "./country.js";
 import { BentoCurrency as he, BentoCurrencyISOCode as De } from "./currency.js";
-import { B as Ie, a as Ee } from "./chunks/index.fd557233.js";
+import { B as Ie, a as Ee } from "./chunks/index.a709a6b0.js";
 import { BentoDivider as Le } from "./divider.js";
 import { BentoEmptyState as Fe, BentoEmptyStateImage as Ve, BentoEmptyStateImageVariant as ke, BentoEmptyStateVariant as Ge } from "./empty-state.js";
 import { BentoFilterBar as Ae, BentoFilterBarEvent as Me, BentoFilterEvent as Oe, BentoFilterItemType as Re } from "./filter-bar.js";
@@ -30,7 +30,7 @@ import { BentoLoadingIndicator as rt, BentoLoadingIndicatorEvent as at } from ".
 import { BentoLink as it, BentoLinkVariant as mt } from "./link.js";
 import { BentoMenu as st, BentoMenuEvent as dt } from "./menu.js";
 import { BentoModal as lt } from "./modal.js";
-import { b as xt, d as yt, e as ct, c as gt, a as St, B as Ct } from "./chunks/base-modal.f462dac0.js";
+import { b as xt, d as yt, e as ct, c as gt, a as St, B as Ct } from "./chunks/base-modal.ec74044e.js";
 import { BentoHeader as ht } from "./header.js";
 import { BentoPagination as vt } from "./pagination.js";
 import { BentoPaymentMethod as Et, BentoPaymentMethodType as bt } from "./payment-method.js";
@@ -41,7 +41,7 @@ import { BentoSegmentedControl as _t, BentoSegmentedControlEvent as Nt } from ".
 import { BentoSidepanel as zt, BentoSidepanelAnimation as Ut, BentoSidepanelEvent as Kt, BentoSidepanelPage as Wt } from "./sidepanel.js";
 import { BentoStatus as jt, BentoStatusVariant as Ht } from "./status.js";
 import { BentoStep as Jt, BentoStepper as Qt, BentoStepperTypeOption as Xt, BentoStepperVariantOption as Zt } from "./stepper.js";
-import { B as to, a as oo } from "./chunks/index.64cce50b.js";
+import { B as to, a as oo } from "./chunks/index.298f5eed.js";
 import { BentoSummaryGrid as ro, BentoSummaryGridItemAmount as ao, BentoSummaryGridItemCustom as Bo, BentoSummaryGridItemNumeric as io, BentoSummaryGridItemPercentage as mo, BentoSummaryGridItemSize as po, BentoSummaryGridItemText as so, BentoSummaryGridItemTrendDirection as uo } from "./summary-grid.js";
 import { BentoTab as fo, BentoTabs as xo } from "./tabs.js";
 import { BentoTag as co, BentoTagVariant as go } from "./tag.js";
@@ -50,16 +50,16 @@ import { BentoTimeline as ho, BentoTimelineGapUnit as Do, BentoTimelineItem as v
 import { BentoToast as Lo } from "./toast.js";
 import { u as Fo } from "./chunks/toastController.0e01443d.js";
 import { BentoToggle as ko, BentoToggleLabelPosition as Go, BentoTogglePropClass as wo } from "./toggle.js";
-import { B as Mo, c as Oo, b as Ro, a as _o } from "./chunks/index.74da0d41.js";
+import { B as Mo, c as Oo, b as Ro, a as _o } from "./chunks/index.2fce7703.js";
 import { BentoButtonActions as qo, BentoButtonActionsLayout as zo, BentoButtonActionsLayoutBasic as Uo, BentoButtonActionsLayoutExtended as Ko } from "./button.js";
-import { B as Yo, a as jo } from "./chunks/loading-button.21c48d50.js";
-import { C as $o, C as Jo } from "./chunks/calendar.371e5ae2.js";
+import { B as Yo, a as jo } from "./chunks/loading-button.0ad06c99.js";
+import { C as $o, C as Jo } from "./chunks/calendar.b74f8a0f.js";
 import { BentoCheckboxGroup as Xo, BentoCheckboxGroupVariant as Zo } from "./checkbox.js";
 import { D as tn } from "./chunks/date-input.9186a0bf.js";
 import { a as nn, B as rn } from "./chunks/keyboard-navigation.ca47dfa8.js";
-import { B as Bn, a as mn } from "./chunks/listbox.cbb27077.js";
+import { B as Bn, a as mn } from "./chunks/listbox.e7bf46e4.js";
 import { B as sn } from "./chunks/directive.0408e565.js";
-import { b as un, B as ln, a as fn } from "./chunks/tooltip.ca9673ee.js";
+import { b as un, B as ln, a as fn } from "./chunks/tooltip.68e81e9c.js";
 class s {
   constructor() {
     r(this, "_state");

package/dist/info-icon.js

@@ -1,8 +1,8 @@
 import { defineComponent as r } from "vue";
 import { PopperContainerPosition as i } from "./popper-container.js";
 import { n as s } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { b as a } from "./chunks/tooltip.ca9673ee.js";
-import "./assets/index34.css";
+import { b as a } from "./chunks/tooltip.68e81e9c.js";
+import "./assets/index4.css";
 let n = 0;
 const l = {
   beforeCreate() {

package/dist/input-field.js

@@ -1,15 +1,15 @@
 import { defineComponent as H, useAttrs as q, useSlots as G, ref as R, toRef as z, computed as i, toRefs as j } from "vue";
-import { d as F, B as W } from "./chunks/index.74da0d41.js";
+import { d as F, B as W } from "./chunks/index.2fce7703.js";
 import { u as Y } from "./chunks/use-has-slot.6052d56a.js";
 import { u as X } from "./chunks/use-form-layout-loading.d03e5d48.js";
 import { g as p } from "./chunks/unique-id.a2a2b458.js";
 import { u as K } from "./chunks/i18n.155748d6.js";
-import { a as J, B as Q } from "./chunks/dropdown.5d22958c.js";
+import { a as J, B as Q } from "./chunks/dropdown.3f198167.js";
 import { g as Z } from "./chunks/get-slot-text.c1114034.js";
 import { u as tt } from "./chunks/aria-label.ac9651a5.js";
-import { E as et } from "./chunks/error-message.a04e8f9a.js";
+import { E as et } from "./chunks/error-message.f5454f19.js";
 import { n as at } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index31.css";
+import "./assets/index24.css";
 var s = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.PAYMENT_METHOD = "payment-method", a.STATIC_VALUE = "static-value", a.DROPDOWN = "dropdown", a))(s || {}), n = /* @__PURE__ */ ((a) => (a.START = "start", a.END = "end", a))(n || {}), d = /* @__PURE__ */ ((a) => (a.CONDENSED = "condensed", a.DISABLED = "disabled", a.READONLY = "readonly", a.ERROR = "error", a.SMALL_PADDING_LEFT = "small-padding-left", a.SMALL_PADDING_RIGHT = "small-padding-right", a))(d || {}), D = /* @__PURE__ */ ((a) => (a.SEARCH = "search", a.TEXT = "text", a.NUMBER = "number", a))(D || {}), ot = /* @__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))(ot || {});
 const rt = {
   "en-US": {

package/dist/internal.js

@@ -1,16 +1,16 @@
-import { B as X, L as $ } from "./chunks/listbox-option-tag.a651fa46.js";
-import { a as q, b as H, C as J } from "./chunks/calendar.371e5ae2.js";
-import { C as N } from "./chunks/copy.8e44a660.js";
-import { C as Y } from "./chunks/controls-group.d75f1d37.js";
-import { E as tt } from "./chunks/error-message.a04e8f9a.js";
+import { B as X, L as $ } from "./chunks/listbox-option-tag.1362a2d7.js";
+import { a as q, b as H, C as J } from "./chunks/calendar.b74f8a0f.js";
+import { C as N } from "./chunks/copy.2ff56819.js";
+import { C as Y } from "./chunks/controls-group.e9537e45.js";
+import { E as tt } from "./chunks/error-message.f5454f19.js";
 import { ref as i, computed as a, defineComponent as g } from "vue";
-import { a as C } from "./chunks/button.38099670.js";
+import { a as C } from "./chunks/button.eb60d460.js";
 import { u as B } from "./chunks/i18n.155748d6.js";
 import { C as R, a as L } from "./chunks/chevron-right.3b826337.js";
 import { n as S } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { G as ot, a as rt } from "./chunks/grid-layout.b7e0d964.js";
-import { b as st } from "./chunks/listbox.cbb27077.js";
-import "./assets/index12.css";
+import { b as st } from "./chunks/listbox.e7bf46e4.js";
+import "./assets/index3.css";
 const y = ({
   contentRef: v,
   containerRef: r,

package/dist/link.js

@@ -1,8 +1,8 @@
 import { defineComponent as c, computed as p, useAttrs as _ } from "vue";
 import { RouterLink as u } from "vue-router";
-import { B as f } from "./chunks/index.74da0d41.js";
+import { B as f } from "./chunks/index.2fce7703.js";
 import { n as d } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index18.css";
+import "./assets/index5.css";
 var a = /* @__PURE__ */ ((s) => (s.DEFAULT = "default", s.QUIET = "quiet", s))(a || {});
 const k = {
   name: "bento-link",

package/dist/loading-indicator.js

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

package/dist/menu.js

@@ -1,13 +1,13 @@
 import { defineComponent as k, computed as b, ref as c, onMounted as U } from "vue";
 import { n as C } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { g as w } from "./chunks/unique-id.a2a2b458.js";
-import { a as H } from "./chunks/button.38099670.js";
+import { a as H } from "./chunks/button.eb60d460.js";
 import { BentoPopover as N, BentoPopoverPositions as B } from "./popover.js";
 import { a as q, C as I } from "./chunks/chevron-right.3b826337.js";
-import { B as W, a as L } from "./chunks/base-button.431fb8cf.js";
-import { B as j } from "./chunks/index.74da0d41.js";
+import { B as W, a as L } from "./chunks/base-button.d1ba66cd.js";
+import { B as j } from "./chunks/index.2fce7703.js";
 import { B as Z } from "./chunks/directive.0408e565.js";
-import "./assets/index39.css";
+import "./assets/index8.css";
 let O = 0;
 const $ = {
   beforeCreate() {

package/dist/modal.js

@@ -1,9 +1,9 @@
 import { defineComponent as _, onMounted as C, toRefs as M, computed as f, useAttrs as h, watch as E } from "vue";
-import { f as A, b as p, e as r, d as u, c as w, B as y, a as B } from "./chunks/base-modal.f462dac0.js";
+import { f as A, b as p, e as r, d as u, c as w, B as y, a as B } from "./chunks/base-modal.ec74044e.js";
 import { u as v } from "./chunks/use-has-slot.6052d56a.js";
-import { F as x } from "./chunks/footer-actions.ee645663.js";
+import { F as x } from "./chunks/footer-actions.00d20947.js";
 import { n as b } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as S } from "./chunks/button.38099670.js";
+import { B as S } from "./chunks/button.eb60d460.js";
 import { u as T } from "./chunks/i18n.155748d6.js";
 import { BentoButtonActions as k } from "./button.js";
 const N = _({

package/dist/pagination.js

@@ -1,12 +1,12 @@
 import { defineComponent as _, ref as C, computed as i, toRefs as w } from "vue";
 import { u as N } from "./chunks/aria-label.ac9651a5.js";
-import { B as P } from "./chunks/index.74da0d41.js";
-import { B as b } from "./chunks/dropdown.5d22958c.js";
+import { B as P } from "./chunks/index.2fce7703.js";
+import { B as b } from "./chunks/dropdown.3f198167.js";
 import { g as T } from "./chunks/unique-id.a2a2b458.js";
 import { g as y, a as x } from "./chunks/i18n.155748d6.js";
 import { n as r } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { a as S } from "./chunks/button.38099670.js";
-import "./assets/index37.css";
+import { a as S } from "./chunks/button.eb60d460.js";
+import "./assets/index10.css";
 const L = {
   "en-US": {
     showingItems: "Showing {itemCount} items",