@adyen/bento-vue3 1.6.0 → 1.6.1

package/dist/filter-bar.js

@@ -2,12 +2,12 @@ import { defineComponent as q, useSlots as Ct, useAttrs as gt, computed as b, re
 import { _ as L } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 import { BentoPopover as Le } from "./popover.js";
 import { B as It } from "./chunks/directive.0408e565.js";
-import { B as Tt } from "./chunks/tooltip.6af06509.js";
+import { B as Tt } from "./chunks/tooltip.b5391514.js";
 import { u as re } from "./chunks/i18n.6c402773.js";
 import { g as Ee } from "./chunks/unique-id.a2a2b458.js";
-import { B as ce, d as Et } from "./chunks/index.9fc54b60.js";
+import { B as ce, d as Et } from "./chunks/index.7f24db66.js";
 import { u as Qe } from "./chunks/aria-label.ac9651a5.js";
-import { B as Xe, a as Oe } from "./chunks/base-button.90687c75.js";
+import { B as Xe, a as Oe } from "./chunks/base-button.4b5ab17e.js";
 import { g as xe } from "./chunks/get-slot-text.bead058f.js";
 import { u as et } from "./chunks/use-has-slot.4d98bf29.js";
 import { a as tt, C as lt } from "./chunks/chevron-up.9bf21068.js";
@@ -16,24 +16,24 @@ import { BentoInputField as nt } from "./input-field.js";
 import { BentoSearchBar as he, BentoSearchBarEvent as de } from "./search-bar.js";
 import { u as Pt } from "./chunks/toastController.0b01d2e8.js";
 import { BentoModal as kt } from "./modal.js";
-import { e as Vt } from "./chunks/base-modal.c956b084.js";
-import { a as Rt } from "./chunks/button.9d72e2d7.js";
-import { B as Lt, u as at } from "./chunks/dropdown.6a484461.js";
-import { g as Ot } from "./chunks/index.bc9e0cde.js";
+import { e as Vt } from "./chunks/base-modal.53a229ac.js";
+import { a as Rt } from "./chunks/button.975d0bb8.js";
+import { B as Lt, u as at } from "./chunks/dropdown.7a104ce3.js";
+import { g as Ot } from "./chunks/index.6700224a.js";
 import { BentoDivider as ot } from "./divider.js";
 import { BentoDatePicker as Nt } from "./date-picker.js";
-import { f as se } from "./chunks/index.754349ff.js";
+import { f as se } from "./chunks/index.d68847b0.js";
 import { e as ae, d as st, f as it } from "./chunks/index.f55fdc32.js";
-import { C as wt, i as Mt } from "./chunks/calendar.e7db78d0.js";
-import { B as Ht, D as qt, i as Ne } from "./chunks/index.84f6360f.js";
+import { C as wt, i as Mt } from "./chunks/calendar.cc37ac1f.js";
+import { B as Ht, D as qt, i as Ne } from "./chunks/index.1dc4ebae.js";
 import { D as we } from "./chunks/date-input.9186a0bf.js";
 import { BentoButtonActions as Kt } from "./button.js";
-import { B as jt } from "./chunks/listbox.a7255ce1.js";
-import { B as Yt, L as rt } from "./chunks/listbox-option-tag.ea9f377f.js";
+import { B as jt } from "./chunks/listbox.0f25778d.js";
+import { B as Yt, L as rt } from "./chunks/listbox-option-tag.0f31ecb2.js";
 import { BentoCountry as zt } from "./country.js";
 import { u as Jt } from "./chunks/useCountryItems.e83ef8f0.js";
 import { BentoPaymentMethod as Gt } from "./payment-method.js";
-import "./assets/index13.css";
+import "./assets/index42.css";
 const Zt = { class: "b-filter-bar-button__container" }, Wt = { class: "b-filter-bar-button__label-container" }, Qt = {
   key: 1,
   class: "b-filter-bar-button__chevron"

package/dist/focus-trap.js

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

package/dist/form-layout.js

@@ -1,15 +1,15 @@
-import { defineComponent as d, useSlots as b, computed as u, provide as I, toRef as $, openBlock as i, createBlock as v, resolveDynamicComponent as O, unref as a, withCtx as _, renderSlot as n, createCommentVNode as g, createElementBlock as p, createElementVNode as L, createVNode as B, onMounted as S, ref as E, normalizeClass as T } from "vue";
-import { BentoAlert as F } from "./alert.js";
-import { u as C } from "./chunks/use-has-slot.4d98bf29.js";
-import { F as N } from "./chunks/form-layout.types.a7a1438d.js";
+import { defineComponent as d, useSlots as b, computed as u, provide as E, toRef as $, openBlock as i, createBlock as v, resolveDynamicComponent as N, unref as r, withCtx as _, renderSlot as l, createCommentVNode as g, createElementBlock as p, createElementVNode as L, createVNode as B, onMounted as O, ref as S, normalizeClass as C } from "vue";
+import { BentoAlert as T } from "./alert.js";
+import { u as F } from "./chunks/use-has-slot.4d98bf29.js";
+import { F as k } from "./chunks/form-layout.types.a7a1438d.js";
 import { _ as m } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as y, c as k } from "./chunks/index.9fc54b60.js";
-import "./assets/index6.css";
-const G = {
+import { B as y, c as G } from "./chunks/index.7f24db66.js";
+import "./assets/index19.css";
+const A = {
   key: 1,
   class: "b-form-layout__actions-container"
-}, A = { class: "b-form-layout__actions" }, V = { class: "b-form-layout__actions" }, w = {}, D = /* @__PURE__ */ d({
-  ...w,
+}, w = { class: "b-form-layout__actions" }, V = { class: "b-form-layout__actions" }, D = {}, P = /* @__PURE__ */ d({
+  ...D,
   __name: "form-layout",
   props: {
     /**
@@ -23,29 +23,29 @@ const G = {
     loading: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const o = t, r = b(), l = C(r), e = u(() => o.form ? "form" : "div"), c = u(() => l("actions-left") || l("actions-right"));
-    return I(N, $(o, "loading")), (s, f) => (i(), v(O(a(e)), {
+    const e = t, s = b(), n = F(s), o = u(() => e.form ? "form" : "div"), c = u(() => n("actions-left") || n("actions-right"));
+    return E(k, $(e, "loading")), (a, f) => (i(), v(N(r(o)), {
       class: "b-form-layout",
       role: "form"
     }, {
       default: _(() => [
-        a(l)("error-message") ? (i(), v(a(F), {
+        r(n)("error-message") ? (i(), v(r(T), {
           key: 0,
           class: "b-form-layout__error-message",
           type: "critical"
         }, {
           description: _(() => [
-            n(s.$slots, "error-message", {}, void 0, !0)
+            l(a.$slots, "error-message", {}, void 0, !0)
           ]),
           _: 3
         })) : g("", !0),
-        n(s.$slots, "default", {}, void 0, !0),
-        a(c) ? (i(), p("div", G, [
-          L("div", A, [
-            n(s.$slots, "actions-left", {}, void 0, !0)
+        l(a.$slots, "default", {}, void 0, !0),
+        r(c) ? (i(), p("div", A, [
+          L("div", w, [
+            l(a.$slots, "actions-left", {}, void 0, !0)
           ]),
           L("div", V, [
-            n(s.$slots, "actions-right", {}, void 0, !0)
+            l(a.$slots, "actions-right", {}, void 0, !0)
           ])
         ])) : g("", !0)
       ]),
@@ -53,8 +53,8 @@ const G = {
     }));
   }
 });
-const tt = /* @__PURE__ */ m(D, [["__scopeId", "data-v-f0c8b741"]]), P = ["warning", "critical", "highlight", "success"], R = { class: "b-form-layout-field-tip" }, q = {}, x = /* @__PURE__ */ d({
-  ...q,
+const ot = /* @__PURE__ */ m(P, [["__scopeId", "data-v-f0c8b741"]]), R = ["warning", "critical", "highlight", "success"], q = { class: "b-form-layout-field-tip" }, x = {}, M = /* @__PURE__ */ d({
+  ...x,
   __name: "form-layout-field-tip",
   props: {
     /**
@@ -64,25 +64,25 @@ const tt = /* @__PURE__ */ m(D, [["__scopeId", "data-v-f0c8b741"]]), P = ["warni
     type: {
       type: String,
       default: "highlight",
-      validator: (t) => P.includes(t)
+      validator: (t) => R.includes(t)
     }
   },
   setup(t) {
-    return (o, r) => (i(), p("div", R, [
-      n(o.$slots, "default", {}, void 0, !0),
-      B(a(F), {
+    return (e, s) => (i(), p("div", q, [
+      l(e.$slots, "default", {}, void 0, !0),
+      B(r(T), {
         variant: "tip",
         type: t.type
       }, {
         description: _(() => [
-          n(o.$slots, "message", {}, void 0, !0)
+          l(e.$slots, "message", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["type"])
     ]));
   }
 });
-const ot = /* @__PURE__ */ m(x, [["__scopeId", "data-v-16c7e9c2"]]), h = [
+const st = /* @__PURE__ */ m(M, [["__scopeId", "data-v-16c7e9c2"]]), h = [
   "100",
   "50",
   "33",
@@ -93,21 +93,26 @@ const ot = /* @__PURE__ */ m(x, [["__scopeId", "data-v-16c7e9c2"]]), h = [
   "25-75",
   "50-50",
   "33-33-33"
-], M = 100, U = (t, o) => {
-  const r = (e) => {
+], U = 100;
+function Y(t, e, s) {
+  t.parentNode.insertBefore(e, t), e.appendChild(t), e.classList.add(s);
+}
+const j = (t, e) => {
+  const s = (o) => {
     var c;
-    return (c = e.split) == null ? void 0 : c.call(e, "-").map((s) => parseInt(s, 10));
-  }, l = u(
-    () => h.includes(t.value) ? r(t.value) : M
+    return (c = o.split) == null ? void 0 : c.call(o, "-").map((a) => parseInt(a, 10));
+  }, n = u(
+    () => h.includes(t.value) ? s(t.value) : U
   );
-  S(() => {
-    const e = o.value.classList[0];
-    o.value.querySelectorAll(`.${e} > *`).forEach((s, f) => {
-      s.classList.add(`${e}--${l.value[f] || "100"}`);
+  O(() => {
+    const o = e.value.classList[0];
+    e.value.querySelectorAll(`.${o} > *`).forEach((a, f) => {
+      const I = `${o}--${n.value[f] || "100"}`;
+      Y(a, document.createElement("div"), I);
     });
   });
-}, Y = {}, j = /* @__PURE__ */ d({
-  ...Y,
+}, z = {}, H = /* @__PURE__ */ d({
+  ...z,
   __name: "form-layout-group",
   props: {
     /**
@@ -140,24 +145,24 @@ const ot = /* @__PURE__ */ m(x, [["__scopeId", "data-v-16c7e9c2"]]), h = [
     }
   },
   setup(t) {
-    const o = t, r = E(null);
-    U($(o, "layout"), r);
-    const l = u(() => ({
+    const e = t, s = S(null);
+    j($(e, "layout"), s);
+    const n = u(() => ({
       // Transform into column if the layout is unsopprted
       // "form-layout.scss" depends on this class
-      "b-form-layout-group--column": !h.includes(o.layout)
+      "b-form-layout-group--column": !h.includes(e.layout)
     }));
-    return (e, c) => (i(), p("div", {
+    return (o, c) => (i(), p("div", {
       ref_key: "formLayoutGroup",
-      ref: r,
-      class: T(["b-form-layout-group", a(l)])
+      ref: s,
+      class: C(["b-form-layout-group", r(n)])
     }, [
-      n(e.$slots, "default", {}, void 0, !0)
+      l(o.$slots, "default", {}, void 0, !0)
     ], 2));
   }
 });
-const et = /* @__PURE__ */ m(j, [["__scopeId", "data-v-f602fe24"]]), z = {}, H = /* @__PURE__ */ d({
-  ...z,
+const at = /* @__PURE__ */ m(H, [["__scopeId", "data-v-f602fe24"]]), J = {}, K = /* @__PURE__ */ d({
+  ...J,
   __name: "form-layout-title",
   props: {
     /**
@@ -176,45 +181,45 @@ const et = /* @__PURE__ */ m(j, [["__scopeId", "data-v-f602fe24"]]), z = {}, H =
     el: {
       type: y.props.el.type,
       required: !0,
-      validator: (t) => Object.values(k).includes(t)
+      validator: (t) => Object.values(G).includes(t)
     }
   },
   setup(t) {
-    const o = t, r = b(), l = u(() => !o.subsection), e = C(r), c = u(() => ({
-      "b-form-layout-title--subsection": o.subsection
+    const e = t, s = b(), n = u(() => !e.subsection), o = F(s), c = u(() => ({
+      "b-form-layout-title--subsection": e.subsection
     }));
-    return (s, f) => (i(), p("div", {
-      class: T(["b-form-layout-title", a(c)])
+    return (a, f) => (i(), p("div", {
+      class: C(["b-form-layout-title", r(c)])
     }, [
-      B(a(y), {
+      B(r(y), {
         el: t.el,
         variant: "title",
-        medium: a(l)
+        medium: r(n)
       }, {
         default: _(() => [
-          n(s.$slots, "default", {}, void 0, !0)
+          l(a.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["el", "medium"]),
-      a(e)("description") ? (i(), v(a(y), {
+      r(o)("description") ? (i(), v(r(y), {
         key: 0,
         class: "b-form-layout-title__description",
         el: "span",
         wide: ""
       }, {
         default: _(() => [
-          n(s.$slots, "description", {}, void 0, !0)
+          l(a.$slots, "description", {}, void 0, !0)
         ]),
         _: 3
       })) : g("", !0)
     ], 2));
   }
 });
-const st = /* @__PURE__ */ m(H, [["__scopeId", "data-v-fbc939de"]]);
+const rt = /* @__PURE__ */ m(K, [["__scopeId", "data-v-fbc939de"]]);
 export {
-  tt as BentoFormLayout,
-  ot as BentoFormLayoutFieldTip,
-  et as BentoFormLayoutGroup,
-  st as BentoFormLayoutTitle
+  ot as BentoFormLayout,
+  st as BentoFormLayoutFieldTip,
+  at as BentoFormLayoutGroup,
+  rt as BentoFormLayoutTitle
 };
 //# sourceMappingURL=form-layout.js.map

package/dist/form-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-layout.js","sources":["../../vue2/src/components/form-layout/form-layout.vue","../../vue2/src/components/form-layout/components/form-layout-field-tip/form-layout-tip.types.ts","../../vue2/src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue","../../vue2/src/components/form-layout/components/form-layout-group/form-layout-group.types.ts","../../vue2/src/components/form-layout/components/form-layout-group/composable/use-form-layout-group-percentage.ts","../../vue2/src/components/form-layout/components/form-layout-group/form-layout-group.vue","../../vue2/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":";;;;;;;;;;qFAsFIA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qEC5CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,6CCiDHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qECxCGC,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;;;;;;;;;;qECwBrFyB,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":["../../vue2/src/components/form-layout/form-layout.vue","../../vue2/src/components/form-layout/components/form-layout-field-tip/form-layout-tip.types.ts","../../vue2/src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue","../../vue2/src/components/form-layout/components/form-layout-group/form-layout-group.types.ts","../../vue2/src/components/form-layout/components/form-layout-group/composable/use-form-layout-group-percentage.ts","../../vue2/src/components/form-layout/components/form-layout-group/form-layout-group.vue","../../vue2/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":";;;;;;;;;;qFAsFIA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qEC5CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,6CCiDHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qECxCGC,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;;;;;;;;;;qECwBrF4B,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 W } from "./button.js";
 import { _ as P } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 import { BentoInfoIcon as q } from "./info-icon.js";
 import { u as z } from "./chunks/use-has-slot.4d98bf29.js";
-import { B as F, c as O, a as j } from "./chunks/index.9fc54b60.js";
+import { B as F, c as O, a as j } from "./chunks/index.7f24db66.js";
 import { u as J } from "./chunks/i18n.6c402773.js";
 import { c as b, a as K } from "./chunks/index.86453263.js";
 import { r as d, t as c, e as N, g as w, d as Q, f as Z } from "./chunks/index.f55fdc32.js";
 import { e as ee } from "./chunks/index.fdf12170.js";
-import "./assets/index7.css";
+import "./assets/index20.css";
 function te(e, n) {
   d(2, arguments);
   var o = c(e), t = c(n), r = o.getFullYear() - t.getFullYear(), a = o.getMonth() - t.getMonth();

package/dist/index.js

@@ -5,20 +5,20 @@ import { reactive as C, defineComponent as b, computed as k, openBlock as a, cre
 import { g as E } from "./chunks/unique-id.a2a2b458.js";
 import { BentoAccordion as K, BentoAccordionItem as Q } from "./accordion.js";
 import { BentoAlert as H, BentoAlertEvent as j, BentoAlertTypeOption as J, BentoAlertVariant as X } from "./alert.js";
-import { a as Z, b as ee, B as te } from "./chunks/button.9d72e2d7.js";
+import { a as Z, b as ee, B as te } from "./chunks/button.975d0bb8.js";
 import { BentoCard as ne, BentoCardBackground as re, BentoCardTitleSize as ae } from "./card.js";
 import { BentoColumnOverflow as Be, BentoDataGrid as se, BentoDatagridAriaSortValue as me, BentoDatagridEvent as pe, BentoDatagridSortDirection as le, BentoDatagridStyleState as de } from "./data-grid.js";
 import { BentoDatePicker as fe, BentoDatePickerEvent as ce } from "./date-picker.js";
-import { B as xe, a as ge } from "./chunks/index.84f6360f.js";
-import { B as Se, u as he } from "./chunks/dropdown.6a484461.js";
+import { B as xe, a as ge } from "./chunks/index.1dc4ebae.js";
+import { B as Se, u as he } from "./chunks/dropdown.7a104ce3.js";
 import { BentoDropdownAvatar as be, BentoDropdownCountry as ke, BentoDropdownCurrency as ve, BentoDropdownPaymentMethod as De, BentoDropdownTag as Ee } from "./dropdown.js";
 import { BentoDivider as Le } from "./divider.js";
-import { B as _e, b as Fe, a as Ve } from "./chunks/checkbox.ecbb4f0c.js";
+import { B as _e, b as Fe, a as Ve } from "./chunks/checkbox.67ceb148.js";
 import { BentoClickOutside as Ge } from "./click-outside.js";
 import { BentoCodeSnippet as Me, BentoCodeSnippetEvent as Oe, BentoCodeSnippetSupportedLanguage as $e, BentoCodeSnippetVariant as Re } from "./code-snippet.js";
 import { BentoCountry as Ne, BentoCountryCode as qe, BentoCountryVariant as ze, useCountryCapital as Ke, useCountryName as Qe, useCountryPhoneCode as We } from "./country.js";
 import { BentoCurrency as je, BentoCurrencyISOCode as Je } from "./currency.js";
-import { B as Ye, a as Ze } from "./chunks/index.754349ff.js";
+import { B as Ye, a as Ze } from "./chunks/index.d68847b0.js";
 import { BentoEmptyState as tt, BentoEmptyStateImage as ot, BentoEmptyStateImageVariant as nt, BentoEmptyStateVariant as rt } from "./empty-state.js";
 import { BentoFilterBar as it, BentoFilterBarEvent as Bt, BentoFilterEvent as st, BentoFilterItemType as mt } from "./filter-bar.js";
 import { BentoFormLayout as lt, BentoFormLayoutFieldTip as dt, BentoFormLayoutGroup as ut, BentoFormLayoutTitle as ft } from "./form-layout.js";
@@ -27,7 +27,7 @@ import { BentoInputField as gt, BentoInputFieldElementPosition as Tt, BentoInput
 import { BentoLoadingIndicator as vt, BentoLoadingIndicatorEvent as Dt } from "./loading-indicator.js";
 import { BentoMenu as It, BentoMenuEvent as Lt } from "./menu.js";
 import { BentoModal as _t } from "./modal.js";
-import { b as Vt, d as wt, e as Gt, c as At, a as Mt, B as Ot } from "./chunks/base-modal.c956b084.js";
+import { b as Vt, d as wt, e as Gt, c as At, a as Mt, B as Ot } from "./chunks/base-modal.53a229ac.js";
 import { BentoHeader as Rt } from "./header.js";
 import { BentoPagination as Nt } from "./pagination.js";
 import { BentoPaymentMethod as zt, BentoPaymentMethodType as Kt } from "./payment-method.js";
@@ -37,7 +37,7 @@ import { BentoSearchBar as Zt, BentoSearchBarEvent as eo, BentoSearchBarInternal
 import { BentoSegmentedControl as no, BentoSegmentedControlEvent as ro } from "./segmented-control.js";
 import { BentoStatus as io, BentoStatusVariant as Bo } from "./status.js";
 import { BentoStep as mo, BentoStepper as po, BentoStepperTypeOption as lo, BentoStepperVariantOption as uo } from "./stepper.js";
-import { B as co, a as yo } from "./chunks/index.424e2ea4.js";
+import { B as co, a as yo } from "./chunks/index.4c951e0d.js";
 import { BentoSummaryGrid as go, BentoSummaryGridItemAmount as To, BentoSummaryGridItemCustom as So, BentoSummaryGridItemNumeric as ho, BentoSummaryGridItemPercentage as Co, BentoSummaryGridItemSize as bo, BentoSummaryGridItemText as ko, BentoSummaryGridItemTrendDirection as vo } from "./summary-grid.js";
 import { BentoTab as Eo, BentoTabs as Io } from "./tabs.js";
 import { BentoTag as Po, BentoTagVariant as _o } from "./tag.js";
@@ -46,21 +46,21 @@ import { BentoTimeline as Go, BentoTimelineGapUnit as Ao, BentoTimelineItem as M
 import { BentoToast as Uo } from "./toast.js";
 import { u as qo } from "./chunks/toastController.0b01d2e8.js";
 import { BentoToggle as Ko, BentoToggleLabelPosition as Qo, BentoTogglePropClass as Wo } from "./toggle.js";
-import { B as c } from "./chunks/index.9fc54b60.js";
-import { c as jo, b as Jo, a as Xo } from "./chunks/index.9fc54b60.js";
+import { B as c } from "./chunks/index.7f24db66.js";
+import { c as jo, b as Jo, a as Xo } from "./chunks/index.7f24db66.js";
 import { D as Zo } from "./chunks/date-input.9186a0bf.js";
 import { a as tn, B as on } from "./chunks/keyboard-navigation.ca47dfa8.js";
-import { a as rn, b as an } from "./chunks/listbox.a7255ce1.js";
+import { a as rn, b as an } from "./chunks/listbox.0f25778d.js";
 import { B as sn } from "./chunks/directive.0408e565.js";
-import { b as pn, B as ln, a as dn } from "./chunks/tooltip.6af06509.js";
+import { b as pn, B as ln, a as dn } from "./chunks/tooltip.b5391514.js";
 import { BentoButtonActions as fn, BentoButtonActionsLayout as cn, BentoButtonActionsLayoutBasic as yn, BentoButtonActionsLayoutExtended as xn } from "./button.js";
-import { B as Tn, a as Sn } from "./chunks/loading-button.fb1f20a3.js";
-import { b as Cn, b as bn } from "./chunks/calendar.e7db78d0.js";
+import { B as Tn, a as Sn } from "./chunks/loading-button.6523a015.js";
+import { b as Cn, b as bn } from "./chunks/calendar.cc37ac1f.js";
 import { BentoCheckboxGroup as vn, BentoCheckboxGroupVariant as Dn } from "./checkbox.js";
 import { BentoLinkVariant as d } from "./link.js";
 import { RouterLink as y } from "vue-router";
 import { _ as I } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index4.css";
+import "./assets/index14.css";
 class L {
   constructor() {
     f(this, "_state");

package/dist/info-icon.js

@@ -1,8 +1,8 @@
 import { openBlock as i, createElementBlock as n, mergeProps as f, toDisplayString as h, createCommentVNode as v, createElementVNode as e, pushScopeId as m, popScopeId as g, defineComponent as b, resolveComponent as $, resolveDirective as I, withDirectives as w, createVNode as y } from "vue";
 import { PopperContainerPosition as s } from "./popper-container.js";
-import { b as S } from "./chunks/tooltip.6af06509.js";
+import { b as S } from "./chunks/tooltip.b5391514.js";
 import { _ as c } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index8.css";
+import "./assets/index21.css";
 let r = 0;
 const P = {
   beforeCreate() {

package/dist/input-field.js

@@ -1,15 +1,15 @@
 import { defineComponent as re, useAttrs as ne, useSlots as le, ref as I, toRef as se, computed as n, toRefs as ue, openBlock as d, createBlock as u, unref as t, normalizeClass as pe, withCtx as c, createElementBlock as f, createVNode as B, renderSlot as b, createTextVNode as q, toDisplayString as G, createCommentVNode as o, createElementVNode as x, withModifiers as z, mergeProps as N, withKeys as ce } from "vue";
-import { d as fe, B as y } from "./chunks/index.9fc54b60.js";
+import { d as fe, B as y } from "./chunks/index.7f24db66.js";
 import { u as be } from "./chunks/use-has-slot.4d98bf29.js";
 import { u as ye } from "./chunks/use-form-layout-loading.d03e5d48.js";
 import { g as A } from "./chunks/unique-id.a2a2b458.js";
 import { u as ve } from "./chunks/i18n.6c402773.js";
-import { B as j, a as W } from "./chunks/dropdown.6a484461.js";
+import { B as j, a as W } from "./chunks/dropdown.7a104ce3.js";
 import { g as me } from "./chunks/get-slot-text.bead058f.js";
 import { u as De } from "./chunks/aria-label.ac9651a5.js";
-import { E as _e } from "./chunks/error-message.11e1fa1f.js";
+import { E as _e } from "./chunks/error-message.b91afffc.js";
 import { _ as we } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index44.css";
+import "./assets/index39.css";
 var v = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.PAYMENT_METHOD = "payment-method", e.STATIC_VALUE = "static-value", e.DROPDOWN = "dropdown", e))(v || {}), l = /* @__PURE__ */ ((e) => (e.START = "start", e.END = "end", e))(l || {}), m = /* @__PURE__ */ ((e) => (e.CONDENSED = "condensed", e.DISABLED = "disabled", e.READONLY = "readonly", e.ERROR = "error", e.SMALL_PADDING_LEFT = "small-padding-left", e.SMALL_PADDING_RIGHT = "small-padding-right", e))(m || {}), R = /* @__PURE__ */ ((e) => (e.SEARCH = "search", e.TEXT = "text", e.NUMBER = "number", e))(R || {}), Ae = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.ESCAPE_PRESSED = "escape-pressed", e.UPDATE_DROPDOWN = "update:dropdown", e.DROPDOWN_INPUT = "dropdown-input", e.FOCUS = "focus", e.CHANGE = "change", e.BLUR = "blur", e.KEYDOWN = "keydown", e))(Ae || {});
 const Y = {
   "en-US": {

package/dist/internal.js

@@ -1,16 +1,16 @@
-import { B as P, L as Q } from "./chunks/listbox-option-tag.ea9f377f.js";
-import { C as Z, a as ee, b as te } from "./chunks/calendar.e7db78d0.js";
-import { C as re } from "./chunks/copy.aaec57b6.js";
-import { C as ae } from "./chunks/controls-group.34f1f82a.js";
-import { E as ne } from "./chunks/error-message.11e1fa1f.js";
+import { B as P, L as Q } from "./chunks/listbox-option-tag.0f31ecb2.js";
+import { C as Z, a as ee, b as te } from "./chunks/calendar.cc37ac1f.js";
+import { C as re } from "./chunks/copy.7a73d1fd.js";
+import { C as ae } from "./chunks/controls-group.7214dc7f.js";
+import { E as ne } from "./chunks/error-message.b91afffc.js";
 import { ref as n, computed as a, defineComponent as W, openBlock as x, createElementBlock as g, createElementVNode as B, normalizeStyle as w, unref as t, renderSlot as E, createVNode as h, withCtx as R, createCommentVNode as L } from "vue";
-import { a as S } from "./chunks/button.9d72e2d7.js";
+import { a as S } from "./chunks/button.975d0bb8.js";
 import { u as V } from "./chunks/i18n.6c402773.js";
 import { C as G, a as I } from "./chunks/chevron-right.aef416c6.js";
 import { _ as O } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 import { G as ie, a as fe } from "./chunks/grid-layout.7c919507.js";
-import { B as de } from "./chunks/listbox.a7255ce1.js";
-import "./assets/index.css";
+import { B as de } from "./chunks/listbox.0f25778d.js";
+import "./assets/index13.css";
 const A = ({
   contentRef: C,
   containerRef: f,

package/dist/link.js

@@ -1,8 +1,8 @@
 import { defineComponent as g, computed as b, useAttrs as h, openBlock as a, createElementBlock as v, mergeProps as y, unref as e, createBlock as n, withCtx as i, renderSlot as r } from "vue";
 import { RouterLink as T } from "vue-router";
-import { B as k } from "./chunks/index.9fc54b60.js";
+import { B as k } from "./chunks/index.7f24db66.js";
 import { _ as B } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index9.css";
+import "./assets/index22.css";
 var l = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.QUIET = "quiet", t))(l || {});
 const E = ["href", "title", "target"], U = {
   name: "bento-link",

package/dist/loading-indicator.js

@@ -1,6 +1,6 @@
 import { defineComponent as t, onMounted as i, onUnmounted as l, computed as s, openBlock as d, createElementBlock as r, normalizeClass as c } from "vue";
 import { _ } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index11.css";
+import "./assets/index35.css";
 var e = /* @__PURE__ */ ((a) => (a.START = "loading-start", a.END = "loading-end", a))(e || {});
 const p = t({
   name: "bento-loading-indicator",

package/dist/menu.js

@@ -2,12 +2,12 @@ import { openBlock as m, createElementBlock as k, mergeProps as V, toDisplayStri
 import { _ as S } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 import { g as F } from "./chunks/unique-id.a2a2b458.js";
 import { B as me } from "./chunks/directive.0408e565.js";
-import { a as pe } from "./chunks/button.9d72e2d7.js";
+import { a as pe } from "./chunks/button.975d0bb8.js";
 import { BentoPopover as fe, BentoPopoverPositions as H } from "./popover.js";
 import { a as ve, C as A } from "./chunks/chevron-right.aef416c6.js";
-import { B as _e, a as q } from "./chunks/base-button.90687c75.js";
-import { B as be } from "./chunks/index.9fc54b60.js";
-import "./assets/index10.css";
+import { B as _e, a as q } from "./chunks/base-button.4b5ab17e.js";
+import { B as be } from "./chunks/index.7f24db66.js";
+import "./assets/index36.css";
 let U = 0;
 const ye = {
   beforeCreate() {

package/dist/modal.js

@@ -1,9 +1,9 @@
 import { defineComponent as S, onMounted as E, resolveComponent as v, openBlock as m, createBlock as p, mergeProps as M, createSlots as $, withCtx as l, renderSlot as a, createVNode as z, toRefs as R, computed as b, createTextVNode as q, toDisplayString as P, useAttrs as I, watch as F, resolveDynamicComponent as j } from "vue";
-import { f as T, b as B, e as f, d as c, c as G, B as C, a as L } from "./chunks/base-modal.c956b084.js";
+import { f as T, b as B, e as f, d as c, c as G, B as C, a as L } from "./chunks/base-modal.53a229ac.js";
 import { u as A } from "./chunks/use-has-slot.4d98bf29.js";
-import { F as U } from "./chunks/footer-actions.a65cb2e3.js";
+import { F as U } from "./chunks/footer-actions.13f19a22.js";
 import { _ as O } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as h } from "./chunks/button.9d72e2d7.js";
+import { B as h } from "./chunks/button.975d0bb8.js";
 import { u as K } from "./chunks/i18n.6c402773.js";
 import { BentoButtonActions as W } from "./button.js";
 const Y = S({

package/dist/pagination.js

@@ -1,12 +1,12 @@
 import { defineComponent as y, ref as A, computed as m, resolveComponent as u, openBlock as o, createElementBlock as _, createVNode as p, withCtx as c, createBlock as P, resolveDynamicComponent as E, mergeProps as C, createSlots as U, createTextVNode as N, toDisplayString as h, createCommentVNode as $, pushScopeId as T, popScopeId as w, createElementVNode as d, toRefs as V, normalizeClass as j } from "vue";
 import { u as J } from "./chunks/aria-label.ac9651a5.js";
-import { B as R } from "./chunks/index.9fc54b60.js";
-import { B as F } from "./chunks/dropdown.6a484461.js";
+import { B as R } from "./chunks/index.7f24db66.js";
+import { B as F } from "./chunks/dropdown.7a104ce3.js";
 import { g as M } from "./chunks/unique-id.a2a2b458.js";
 import { g as D, a as Z } from "./chunks/i18n.6c402773.js";
 import { _ as f } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { a as K } from "./chunks/button.9d72e2d7.js";
-import "./assets/index26.css";
+import { a as K } from "./chunks/button.975d0bb8.js";
+import "./assets/index44.css";
 const q = {
   "en-US": {
     showingItems: "Showing {itemCount} items",