@adyen/bento-vue3 1.25.0 → 1.27.0

package/dist/focus-trap.js

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

package/dist/form-layout.js

@@ -1,14 +1,14 @@
-import { defineComponent as d, useSlots as h, computed as n, provide as O, toRef as C, openBlock as c, createBlock as v, resolveDynamicComponent as I, unref as e, withCtx as _, renderSlot as s, createCommentVNode as b, createElementBlock as p, createElementVNode as g, createVNode as L, normalizeClass as $ } from "vue";
+import { defineComponent as m, useSlots as g, computed as i, provide as F, toRef as O, openBlock as l, createBlock as d, resolveDynamicComponent as S, unref as t, withCtx as _, renderSlot as a, createCommentVNode as p, createElementBlock as f, createElementVNode as L, normalizeClass as $, createVNode as C } from "vue";
 import { BentoAlert as B } from "./alert.js";
-import { F as S } from "./chunks/form-layout.types.a7a1438d.js";
-import { u as T } from "./chunks/use-has-slot.4d98bf29.js";
-import { _ as m } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { B as f, c as E } from "./chunks/index.11b6dd35.js";
-import "./assets/index18.css";
-const N = {
+import { F as I } from "./chunks/form-layout.types.a7a1438d.js";
+import { u as h } from "./chunks/use-has-slot.4d98bf29.js";
+import { _ as y } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { B as v, c as k } from "./chunks/index.ee15db35.js";
+import "./assets/index45.css";
+const E = {
   key: 1,
   class: "b-form-layout__actions-container"
-}, k = { class: "b-form-layout__actions" }, A = { class: "b-form-layout__actions" }, G = {}, R = /* @__PURE__ */ d({
+}, N = { class: "b-form-layout__actions" }, A = { class: "b-form-layout__actions" }, G = {}, R = /* @__PURE__ */ m({
   ...G,
   __name: "form-layout",
   props: {
@@ -23,37 +23,37 @@ const N = {
     loading: { type: Boolean, default: !1 }
   },
   setup(o) {
-    const t = o, l = h(), r = T(l), i = n(() => t.form ? "form" : "div"), u = n(() => r("actions-left") || r("actions-right"));
-    return O(S, C(t, "loading")), (a, F) => (c(), v(I(e(i)), {
+    const e = o, n = g(), s = h(n), c = i(() => e.form ? "form" : "div"), u = i(() => s("actions-left") || s("actions-right"));
+    return F(I, O(e, "loading")), (r, T) => (l(), d(S(t(c)), {
       class: "b-form-layout",
       role: "form"
     }, {
       default: _(() => [
-        e(r)("error-message") ? (c(), v(e(B), {
+        t(s)("error-message") ? (l(), d(t(B), {
           key: 0,
           class: "b-form-layout__error-message",
           type: "critical"
         }, {
           description: _(() => [
-            s(a.$slots, "error-message", {}, void 0, !0)
+            a(r.$slots, "error-message", {}, void 0, !0)
           ]),
           _: 3
-        })) : b("", !0),
-        s(a.$slots, "default", {}, void 0, !0),
-        e(u) ? (c(), p("div", N, [
-          g("div", k, [
-            s(a.$slots, "actions-left", {}, void 0, !0)
+        })) : p("", !0),
+        a(r.$slots, "default", {}, void 0, !0),
+        t(u) ? (l(), f("div", E, [
+          L("div", N, [
+            a(r.$slots, "actions-left", {}, void 0, !0)
           ]),
-          g("div", A, [
-            s(a.$slots, "actions-right", {}, void 0, !0)
+          L("div", A, [
+            a(r.$slots, "actions-right", {}, void 0, !0)
           ])
-        ])) : b("", !0)
+        ])) : p("", !0)
       ]),
       _: 3
     }));
   }
 });
-const Q = /* @__PURE__ */ m(R, [["__scopeId", "data-v-f0c8b741"]]), w = ["warning", "critical", "highlight", "success"], D = { class: "b-form-layout-field-tip" }, P = {}, V = /* @__PURE__ */ d({
+const Q = /* @__PURE__ */ y(R, [["__scopeId", "data-v-f0c8b741"]]), w = ["warning", "critical", "highlight", "success"], D = { class: "b-form-layout-field-tip" }, P = {}, V = /* @__PURE__ */ m({
   ...P,
   __name: "form-layout-field-tip",
   props: {
@@ -68,21 +68,23 @@ const Q = /* @__PURE__ */ m(R, [["__scopeId", "data-v-f0c8b741"]]), w = ["warnin
     }
   },
   setup(o) {
-    return (t, l) => (c(), p("div", D, [
-      s(t.$slots, "default", {}, void 0, !0),
-      L(e(B), {
+    const e = g(), n = h(e);
+    return (s, c) => (l(), f("div", D, [
+      a(s.$slots, "default", {}, void 0, !0),
+      t(n)("message") ? (l(), d(t(B), {
+        key: 0,
         variant: "tip",
         type: o.type
       }, {
         description: _(() => [
-          s(t.$slots, "message", {}, void 0, !0)
+          a(s.$slots, "message", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["type"])
+      }, 8, ["type"])) : p("", !0)
     ]));
   }
 });
-const W = /* @__PURE__ */ m(V, [["__scopeId", "data-v-16c7e9c2"]]), y = [
+const W = /* @__PURE__ */ y(V, [["__scopeId", "data-v-84d68dd1"]]), b = [
   "100",
   "50",
   "33",
@@ -93,7 +95,7 @@ const W = /* @__PURE__ */ m(V, [["__scopeId", "data-v-16c7e9c2"]]), y = [
   "25-75",
   "50-50",
   "33-33-33"
-], x = {}, U = /* @__PURE__ */ d({
+], x = {}, U = /* @__PURE__ */ m({
   ...x,
   __name: "form-layout-group",
   props: {
@@ -123,26 +125,26 @@ const W = /* @__PURE__ */ m(V, [["__scopeId", "data-v-16c7e9c2"]]), y = [
     layout: {
       type: String,
       default: "100",
-      validator: (o) => y.includes(o)
+      validator: (o) => b.includes(o)
     }
   },
   setup(o) {
-    const t = o, l = 100, r = n(
-      () => y.includes(t.layout) ? t.layout : l
-    ), i = n(() => ({
+    const e = o, n = 100, s = i(
+      () => b.includes(e.layout) ? e.layout : n
+    ), c = i(() => ({
       // Transform into column if the layout is unsupported
-      "b-form-layout-group--column": !y.includes(t.layout),
+      "b-form-layout-group--column": !b.includes(e.layout),
       // Assings the correct layout class
-      [`b-form-layout-group--${r.value}`]: !0
+      [`b-form-layout-group--${s.value}`]: !0
     }));
-    return (u, a) => (c(), p("div", {
-      class: $(["b-form-layout-group", e(i)])
+    return (u, r) => (l(), f("div", {
+      class: $(["b-form-layout-group", t(c)])
     }, [
-      s(u.$slots, "default", {}, void 0, !0)
+      a(u.$slots, "default", {}, void 0, !0)
     ], 2));
   }
 });
-const X = /* @__PURE__ */ m(U, [["__scopeId", "data-v-0795cceb"]]), Y = {}, j = /* @__PURE__ */ d({
+const X = /* @__PURE__ */ y(U, [["__scopeId", "data-v-0795cceb"]]), Y = {}, j = /* @__PURE__ */ m({
   ...Y,
   __name: "form-layout-title",
   props: {
@@ -160,43 +162,43 @@ const X = /* @__PURE__ */ m(U, [["__scopeId", "data-v-0795cceb"]]), Y = {}, j =
      * @values h1, h2, h3, h4, h5, h6, div, p, span
      */
     el: {
-      type: f.props.el.type,
+      type: v.props.el.type,
       required: !0,
-      validator: (o) => Object.values(E).includes(o)
+      validator: (o) => Object.values(k).includes(o)
     }
   },
   setup(o) {
-    const t = o, l = h(), r = n(() => !t.subsection), i = T(l), u = n(() => ({
-      "b-form-layout-title--subsection": t.subsection
+    const e = o, n = g(), s = i(() => !e.subsection), c = h(n), u = i(() => ({
+      "b-form-layout-title--subsection": e.subsection
     }));
-    return (a, F) => (c(), p("div", {
-      class: $(["b-form-layout-title", e(u)])
+    return (r, T) => (l(), f("div", {
+      class: $(["b-form-layout-title", t(u)])
     }, [
-      L(e(f), {
+      C(t(v), {
         el: o.el,
         variant: "title",
-        medium: e(r)
+        medium: t(s)
       }, {
         default: _(() => [
-          s(a.$slots, "default", {}, void 0, !0)
+          a(r.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["el", "medium"]),
-      e(i)("description") ? (c(), v(e(f), {
+      t(c)("description") ? (l(), d(t(v), {
         key: 0,
         class: "b-form-layout-title__description",
         el: "span",
         wide: ""
       }, {
         default: _(() => [
-          s(a.$slots, "description", {}, void 0, !0)
+          a(r.$slots, "description", {}, void 0, !0)
         ]),
         _: 3
-      })) : b("", !0)
+      })) : p("", !0)
     ], 2));
   }
 });
-const Z = /* @__PURE__ */ m(j, [["__scopeId", "data-v-fbc939de"]]);
+const Z = /* @__PURE__ */ y(j, [["__scopeId", "data-v-fbc939de"]]);
 export {
   Q as BentoFormLayout,
   W as BentoFormLayoutFieldTip,

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

package/dist/header.js

@@ -1,17 +1,17 @@
 import { defineComponent as H, ref as I, openBlock as m, createElementBlock as w, createVNode as x, unref as _, createBlock as b, withCtx as g, renderSlot as G, toDisplayString as A, createCommentVNode as M, computed as O, resolveComponent as N, normalizeClass as q, createElementVNode as E, mergeProps as J, createTextVNode as R, createSlots as K } from "vue";
 import { u as Q } from "./chunks/use-has-slot.4d98bf29.js";
-import { B as V, c as X, a as Z } from "./chunks/index.11b6dd35.js";
+import { B as V, c as X, a as Z } from "./chunks/index.ee15db35.js";
 import { u as F } from "./chunks/i18n.f7e6533e.js";
-import { B as ee } from "./chunks/button-actions-with-menu.a007b034.js";
+import { B as ee } from "./chunks/button-actions-with-menu.4f311411.js";
 import { c as D, a as te } from "./chunks/index.86453263.js";
 import { r as v, t as c, e as C, g as L, d as oe, f as ne } from "./chunks/index.f55fdc32.js";
 import { e as ae } from "./chunks/index.fdf12170.js";
 import { e as re } from "./chunks/index.d80206ed.js";
-import { a as y } from "./chunks/index.bab8811d.js";
+import { a as y } from "./chunks/index.a001a0a8.js";
 import { g as se } from "./chunks/unique-id.a2a2b458.js";
 import { I as ie } from "./chunks/info.550f9511.js";
 import { _ as W } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index15.css";
+import "./assets/index20.css";
 function le(e, a) {
   v(2, arguments);
   var n = c(e), t = c(a), s = n.getFullYear() - t.getFullYear(), o = n.getMonth() - t.getMonth();

package/dist/index.js

@@ -1,23 +1,23 @@
 import { shallowRef as f, ref as p } from "vue";
-import { t as c, c as x } from "./chunks/use-bento-toast-controller.98ca249a.js";
-import { u as E } from "./chunks/use-bento-toast-controller.98ca249a.js";
+import { t as c, c as x } from "./chunks/use-bento-toast-controller.3dc4e113.js";
+import { u as E } from "./chunks/use-bento-toast-controller.3dc4e113.js";
 import { BentoActionBar as P } from "./action-bar.js";
 import { BentoAccordion as V, BentoAccordionItem as k } from "./accordion.js";
 import { BentoAlert as M, BentoAlertEvent as G, BentoAlertTypeOption as A, BentoAlertVariant as O } from "./alert.js";
-import { a as z, b as j, B as N } from "./chunks/button.de5589fa.js";
+import { a as z, b as j, B as N } from "./chunks/button.ae4760cd.js";
 import { BentoCard as Z, BentoCardBackground as U, BentoCardTitleSize as W } from "./card.js";
 import { BentoColumnOverflow as _, BentoDataGrid as q, BentoDatagridAriaSortValue as J, BentoDatagridEvent as Q, BentoDatagridSortDirection as X, BentoDatagridStyleState as Y } from "./data-grid.js";
 import { BentoDatePicker as ee, BentoDatePickerEvent as te } from "./date-picker.js";
-import { B as ne, a as re } from "./chunks/index.faec0854.js";
-import { B as Be, a as ie, u as me } from "./chunks/dropdown.57b2ea6f.js";
-import { B as pe } from "./chunks/index.98bbaed9.js";
-import { B as le, a as de } from "./chunks/checkbox.4c96cc23.js";
+import { B as ne, a as re } from "./chunks/index.2d7b4511.js";
+import { B as Be, a as ie, u as me } from "./chunks/dropdown.0ae3b842.js";
+import { B as pe } from "./chunks/index.b18c78d6.js";
+import { B as le, a as de } from "./chunks/checkbox.9c30c07b.js";
 import { BentoClickOutside as ce } from "./click-outside.js";
 import { BentoCodeSnippet as ye, BentoCodeSnippetEvent as Se, BentoCodeSnippetSupportedLanguage as ge, BentoCodeSnippetVariant as Te } from "./code-snippet.js";
 import { BentoCountry as ve } from "./country.js";
 import { c as be, B as he, a as Ie, u as Ee, b as Fe } from "./chunks/country.types.002caff2.js";
 import { BentoCurrency as Le, BentoCurrencyISOCode as Ve } from "./currency.js";
-import { B as we, a as Me } from "./chunks/index.8682bd04.js";
+import { B as we, a as Me } from "./chunks/index.f9d081d2.js";
 import { BentoEmptyState as Ae, BentoEmptyStateImage as Oe, BentoEmptyStateImageVariant as Re, BentoEmptyStateVariant as ze } from "./empty-state.js";
 import { BentoFilterBar as Ne, BentoFilterBarEvent as Ke, BentoFilterEvent as Ze, BentoFilterItemType as Ue } from "./filter-bar.js";
 import { BentoFormLayout as He, BentoFormLayoutFieldTip as _e, BentoFormLayoutGroup as qe, BentoFormLayoutTitle as Je } from "./form-layout.js";
@@ -25,15 +25,15 @@ import { BentoImage as Xe, BentoImageAspectRatio as Ye, BentoImageObjectFit as $
 import { BentoInfoIcon as tt } from "./info-icon.js";
 import { BentoInputField as nt, BentoInputFieldElementPosition as rt, BentoInputFieldEvent as at, BentoInputFieldStateClass as Bt, BentoInputFieldType as it, BentoInputFieldVariant as mt } from "./input-field.js";
 import { BentoLoadingIndicator as pt, BentoLoadingIndicatorEvent as ut } from "./loading-indicator.js";
-import { B as dt, a as ft } from "./chunks/index.aa83aa48.js";
-import { B as xt, a as yt } from "./chunks/index.8b10ee32.js";
-import { d as gt, f as Tt, g as Ct, B as vt, e as Dt, c as bt, a as ht, b as It } from "./chunks/base-modal.310c4790.js";
+import { B as dt, a as ft } from "./chunks/index.eb38a6c4.js";
+import { B as xt, a as yt } from "./chunks/index.6bb6f38c.js";
+import { d as gt, f as Tt, g as Ct, B as vt, e as Dt, c as bt, a as ht, b as It } from "./chunks/base-modal.4102f69d.js";
 import { BentoModalFullscreen as Ft, BentoModalFullscreenPage as Pt } from "./modal-fullscreen.js";
 import { BentoHeader as Vt } from "./header.js";
 import { BentoPagination as wt } from "./pagination.js";
-import { B as Gt } from "./chunks/payment-method.26fa5509.js";
+import { B as Gt } from "./chunks/payment-method.d5595a7c.js";
 import { BentoPaymentMethodType as Ot } from "./payment-method.js";
-import { a as zt, B as jt } from "./chunks/index.bab8811d.js";
+import { a as zt, B as jt } from "./chunks/index.a001a0a8.js";
 import { BentoRadioButton as Kt, BentoRadioGroup as Zt, BentoRadioGroupVariant as Ut } from "./radio-group.js";
 import { BentoSearchBar as Ht, BentoSearchBarEvent as _t, BentoSearchBarInternalEvent as qt } from "./search-bar.js";
 import { BentoSecondaryNav as Qt } from "./secondary-nav.js";
@@ -42,7 +42,7 @@ import { BentoSelectionCard as to, BentoSelectionCardGroup as oo, BentoSelection
 import { BentoSidepanel as ao, BentoSidepanelEvent as Bo, BentoSidepanelPage as io } from "./sidepanel.js";
 import { BentoStatus as so, BentoStatusVariant as po } from "./status.js";
 import { BentoStep as lo, BentoStepper as fo, BentoStepperTypeOption as co, BentoStepperVariantOption as xo } from "./stepper.js";
-import { B as So, a as go } from "./chunks/index.38752f78.js";
+import { B as So, a as go } from "./chunks/index.2fcd1233.js";
 import { BentoSummaryGrid as Co, BentoSummaryGridItemAmount as vo, BentoSummaryGridItemCustom as Do, BentoSummaryGridItemNumeric as bo, BentoSummaryGridItemPercentage as ho, BentoSummaryGridItemSize as Io, BentoSummaryGridItemText as Eo, BentoSummaryGridItemTrendDirection as Fo } from "./summary-grid.js";
 import { BentoTab as Lo, BentoTabs as Vo } from "./tabs.js";
 import { BentoTag as wo, BentoTagVariant as Mo } from "./tag.js";
@@ -50,25 +50,26 @@ import { BentoTextarea as Ao } from "./textarea.js";
 import { BentoTimeline as Ro, BentoTimelineGapUnit as zo, BentoTimelineItem as jo, BentoTimelineItemVariant as No, BentoTimelineShowMorePlacement as Ko, BentoTimelineStatus as Zo } from "./timeline.js";
 import { BentoToast as Wo } from "./toast.js";
 import { BentoToggle as _o, BentoToggleLabelPosition as qo, BentoTogglePropClass as Jo } from "./toggle.js";
-import { B as Xo, c as Yo, b as $o, a as en } from "./chunks/index.11b6dd35.js";
+import { B as Xo, c as Yo, b as $o, a as en } from "./chunks/index.ee15db35.js";
 import * as n from "zod";
 import { u as on } from "./chunks/use-click-outside.941d1600.js";
-import { BentoDataGridTemplate as rn } from "./data-grid-template.js";
-import { D as Bn } from "./chunks/date-input.9186a0bf.js";
-import { a as sn, B as pn } from "./chunks/keyboard-navigation.ca47dfa8.js";
-import { c as ln, b as dn, c as fn, b as cn } from "./chunks/use-cached-selected-values.a9b0fb3d.js";
-import { B as yn } from "./chunks/dropdown-default-textbox.424e0eb6.js";
-import { b as gn, B as Tn, a as Cn } from "./chunks/tooltip.e29f7d7e.js";
-import { B as Dn, c as bn, a as hn, b as In } from "./chunks/button-actions.adc0a2fe.js";
-import { B as Fn, a as Pn } from "./chunks/loading-button.2db95771.js";
-import { BentoToggleButton as Vn } from "./button.js";
-import { b as wn, b as Mn } from "./chunks/calendar.73f5b904.js";
-import { BentoDropdownAvatar as An, BentoDropdownCountry as On, BentoDropdownCurrency as Rn, BentoDropdownPaymentMethod as zn, BentoDropdownTag as jn } from "./dropdown.js";
-import { C as Kn } from "./chunks/checkbox-input.99336948.js";
-import { BentoCheckboxGroup as Un, BentoCheckboxGroupVariant as Wn } from "./checkbox.js";
-import { BentoModal as _n } from "./modal.js";
-import { R as Jn } from "./chunks/radio-input.1dd15424.js";
-import { BentoTutorial as Xn } from "./tutorial.js";
+import { BentoDashboardSection as rn, BentoDashboardTemplate as an } from "./dashboard-template.js";
+import { BentoDataGridTemplate as mn } from "./data-grid-template.js";
+import { D as pn } from "./chunks/date-input.9186a0bf.js";
+import { a as ln, B as dn } from "./chunks/keyboard-navigation.bbc3d15c.js";
+import { c as cn, b as xn, c as yn, b as Sn } from "./chunks/use-cached-selected-values.3c312296.js";
+import { B as Tn } from "./chunks/dropdown-default-textbox.cda0798f.js";
+import { b as vn, B as Dn, a as bn } from "./chunks/tooltip.36172265.js";
+import { B as In, c as En, a as Fn, b as Pn } from "./chunks/button-actions.82163994.js";
+import { B as Vn, a as kn } from "./chunks/loading-button.6b81b546.js";
+import { BentoToggleButton as Mn } from "./button.js";
+import { b as An, b as On } from "./chunks/calendar.a9c5a68c.js";
+import { BentoDropdownAvatar as zn, BentoDropdownCountry as jn, BentoDropdownCurrency as Nn, BentoDropdownPaymentMethod as Kn, BentoDropdownTag as Zn } from "./dropdown.js";
+import { C as Wn } from "./chunks/checkbox-input.99336948.js";
+import { BentoCheckboxGroup as _n, BentoCheckboxGroupVariant as qn } from "./checkbox.js";
+import { BentoModal as Qn } from "./modal.js";
+import { R as Yn } from "./chunks/radio-input.1dd15424.js";
+import { BentoTutorial as er } from "./tutorial.js";
 function v(t) {
   return t;
 }
@@ -128,10 +129,10 @@ export {
   A as BentoAlertTypeOption,
   O as BentoAlertVariant,
   z as BentoButton,
-  Dn as BentoButtonActions,
-  bn as BentoButtonActionsLayout,
-  hn as BentoButtonActionsLayoutBasic,
-  In as BentoButtonActionsLayoutExtended,
+  In as BentoButtonActions,
+  En as BentoButtonActionsLayout,
+  Fn as BentoButtonActionsLayoutBasic,
+  Pn as BentoButtonActionsLayoutExtended,
   j as BentoButtonPropClass,
   N as BentoButtonVariant,
   Z as BentoCard,
@@ -139,11 +140,11 @@ export {
   W as BentoCardTitleSize,
   le as BentoCheckbox,
   de as BentoCheckboxEvent,
-  Un as BentoCheckboxGroup,
-  Wn as BentoCheckboxGroupVariant,
-  Kn as BentoCheckboxState,
+  _n as BentoCheckboxGroup,
+  qn as BentoCheckboxGroupVariant,
+  Wn as BentoCheckboxState,
   ce as BentoClickOutside,
-  yn as BentoClickOutsideDirective,
+  Tn as BentoClickOutsideDirective,
   ye as BentoCodeSnippet,
   Se as BentoCodeSnippetEvent,
   ge as BentoCodeSnippetSupportedLanguage,
@@ -154,8 +155,10 @@ export {
   he as BentoCountryVariant,
   Le as BentoCurrency,
   Ve as BentoCurrencyISOCode,
+  rn as BentoDashboardSection,
+  an as BentoDashboardTemplate,
   q as BentoDataGrid,
-  rn as BentoDataGridTemplate,
+  mn as BentoDataGridTemplate,
   J as BentoDatagridAriaSortValue,
   Q as BentoDatagridEvent,
   X as BentoDatagridSortDirection,
@@ -164,20 +167,20 @@ export {
   Me as BentoDateFormat,
   ee as BentoDatePicker,
   te as BentoDatePickerEvent,
-  wn as BentoDatePickerFirstDayOfWeek,
+  An as BentoDatePickerFirstDayOfWeek,
   ne as BentoDateRangePicker,
   re as BentoDateRangePickerEvent,
-  Mn as BentoDateRangePickerFirstDayOfWeek,
+  On as BentoDateRangePickerFirstDayOfWeek,
   pe as BentoDivider,
   Be as BentoDropdown,
-  An as BentoDropdownAvatar,
-  On as BentoDropdownCountry,
-  Rn as BentoDropdownCurrency,
-  ln as BentoDropdownEvent,
-  dn as BentoDropdownLazyLoadType,
-  zn as BentoDropdownPaymentMethod,
+  zn as BentoDropdownAvatar,
+  jn as BentoDropdownCountry,
+  Nn as BentoDropdownCurrency,
+  cn as BentoDropdownEvent,
+  xn as BentoDropdownLazyLoadType,
+  Kn as BentoDropdownPaymentMethod,
   ie as BentoDropdownSize,
-  jn as BentoDropdownTag,
+  Zn as BentoDropdownTag,
   Ae as BentoEmptyState,
   Oe as BentoEmptyStateImage,
   Re as BentoEmptyStateImageVariant,
@@ -201,19 +204,19 @@ export {
   Bt as BentoInputFieldStateClass,
   it as BentoInputFieldType,
   mt as BentoInputFieldVariant,
-  sn as BentoKeyboardNavigationDirective,
-  pn as BentoKeyboardNavigationKeyDownEvent,
+  ln as BentoKeyboardNavigationDirective,
+  dn as BentoKeyboardNavigationKeyDownEvent,
   dt as BentoLink,
   ft as BentoLinkVariant,
-  fn as BentoListboxEvent,
-  cn as BentoListboxLazyLoadType,
-  Fn as BentoLoadingButton,
-  Pn as BentoLoadingButtonState,
+  yn as BentoListboxEvent,
+  Sn as BentoListboxLazyLoadType,
+  Vn as BentoLoadingButton,
+  kn as BentoLoadingButtonState,
   pt as BentoLoadingIndicator,
   ut as BentoLoadingIndicatorEvent,
   xt as BentoMenu,
   yt as BentoMenuEvent,
-  _n as BentoModal,
+  Qn as BentoModal,
   gt as BentoModalColumnLayoutVariant,
   Tt as BentoModalDialogType,
   Ct as BentoModalEvent,
@@ -230,7 +233,7 @@ export {
   zt as BentoPopover,
   jt as BentoPopoverPositions,
   Kt as BentoRadioButton,
-  Jn as BentoRadioButtonStateClass,
+  Yn as BentoRadioButtonStateClass,
   Zt as BentoRadioGroup,
   Ut as BentoRadioGroupVariant,
   Ht as BentoSearchBar,
@@ -274,18 +277,18 @@ export {
   Zo as BentoTimelineStatus,
   Wo as BentoToast,
   _o as BentoToggle,
-  Vn as BentoToggleButton,
+  Mn as BentoToggleButton,
   qo as BentoToggleLabelPosition,
   Jo as BentoTogglePropClass,
-  gn as BentoTooltipDirective,
-  Tn as BentoTooltipPosition,
-  Cn as BentoTooltipState,
-  Xn as BentoTutorial,
+  vn as BentoTooltipDirective,
+  Dn as BentoTooltipPosition,
+  bn as BentoTooltipState,
+  er as BentoTutorial,
   Xo as BentoTypography,
   Yo as BentoTypographyElement,
   $o as BentoTypographyModifier,
   en as BentoTypographyVariant,
-  Bn as DateFormat,
+  pn as DateFormat,
   b as default,
   v as toTypedSchema,
   E as useBentoToastController,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../vue2/src/composables/use-form-validate/use-form.ts","../../vue2/src/composables/use-bento-toast-controller/install.ts","../../vue2/src/install.ts"],"sourcesContent":["import { Ref, ref, shallowRef } from 'vue';\nimport * as z from 'zod';\nimport type { ZodSchema } from 'zod';\nimport { ErrorBag, UseForm } from './use-form.types';\n\n/**\n * Composable that tansforms a Zod schema into a Typed Schema that can be used alongside with {@see useForm}.\n *\n * This is meant to simulate the behavior of {@link @vee-validate/zod} {@see https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation}.\n * Function that transform Zod’s schemas into something that can be understood by vee-validate\n *\n * @param {T extends ZodSchema} formSchema Zod schema to be transformed into a `vee-validate` schema\n * @returns {UseForm<T>} schema Schema transformed\n */\nexport function toTypedSchema<T extends ZodSchema>(formSchema: T) {\n    return formSchema;\n}\n\n/**\n * Finds and returns the initial values of each of the values defined in the schema so that they\n * can be transformed into a reactive element.\n * @param {ZodSchema} schema Zod validation schema containing the definitions of each value to be used in the form\n * @returns Object with the items defined in the schema and their (default) values\n *\n * @example\n * const validationSchema = toTypedSchema(\n *      z.object({\n *          name: z\n *              .string()\n *              .min(3, { message: 'Name is required' })\n *              .startsWith('Jane')\n *              .max(4, { message: 'Name cannot be longer than 4 characters' })\n *              .default('Joe'),\n *      })\n * );\n * getInitialFormValues(validationSchema)\n *\n * Will return:\n *\n * {\n *      name: 'Joe'\n * }\n *\n */\nfunction getInitialFormValues<T extends ZodSchema>(schema: T): z.infer<typeof schema> {\n    if (!!z && schema instanceof z.ZodObject) {\n        return Object.fromEntries(\n            Object.entries(schema.shape).map(([key, value]) => {\n                if (!!z && value instanceof z.ZodDefault) {\n                    // eslint-disable-next-line no-underscore-dangle\n                    return [key, value._def.defaultValue()];\n                }\n\n                if (!!z && value instanceof z.ZodObject) {\n                    return [key, getInitialFormValues(value)];\n                }\n\n                return [key, undefined];\n            })\n        ) as z.infer<typeof schema>;\n    }\n\n    return undefined;\n}\n\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n * @param issue List of nested path elements\n * @returns Path with dots\n */\nfunction normalizeFormPath(issue: z.ZodIssue) {\n    return issue.path.join('.');\n}\n\n/**\n * Composable that facilitates validating form data for Vue2 & Vue3 implementations with FormLayout\n * to ease the migration to Vue3.\n *\n * For Vue3 implementations use Vee-Validate.\n *\n * This provides a simplified version of Vee-Validate v4 implemented with Zod to validate a form schema.\n * It returns reactive values that can be used directly in form input elements with 'v-model' alongside\n * with functions to \"reset\" the data (sets values to default value) and a function to execute the\n * successful form validation process (through a callback).\n *\n * @param {UseForm<T>} props Form configuration object\n * @param {T extends ZodSchema} props.validationSchema Zod typed validation schema\n * @returns {Object} response - Composable with reactive form values and errors, and functions to handle the reactive data\n * @returns {Ref<ErrorBag<T>>} response.errorBag Object with all the form values and an array of each one of the errors (if any) per value\n * @returns {Ref<T>} response.errors Object with all the form values and the first error found for that field (if any)\n * @returns {Ref<T>} response.values Object with all the form values and their current value\n * @returns {() => void} response.handleReset Resets the form values to default (initial values) when it gets called\n * @returns {(callback: (values: T) => void) => () => void} response.submitForm Validates the data set in {response.values} and sets errors (if found) inside {response.errors} and {response.errorBag}.\n *                                                                   When the validation is successful it calls the callback so the submit process can continue\n *\n * @example\n * const validationSchema = toTypedSchema(\n *      z.object({\n *          name: z\n *              .string()\n *              .min(3, { message: 'Name is required' })\n *              .startsWith('Jane')\n *              .max(4, { message: 'Name cannot be longer than 4 characters' })\n *              .default('Joe'),\n *      })\n * );\n *\n * const { values, errors, errorBag, submitForm, handleReset } = useForm({\n *     validationSchema\n * });\n * const handleSubmit = submitForm(() => {\n *     // Send data to API here\n * })\n *\n */\nexport function useForm<T extends ZodSchema>({ validationSchema }: UseForm<T>) {\n    // Errors per field\n    const errors = shallowRef<z.infer<typeof validationSchema>>({});\n    // All errors per field\n    const errorBag: Ref<ErrorBag<z.infer<typeof validationSchema>>> = ref({});\n    const values = ref(getInitialFormValues(validationSchema));\n\n    const cleanErrors = () => {\n        errors.value = {};\n        errorBag.value = {};\n    };\n\n    const resetForm = () => {\n        cleanErrors();\n        values.value = getInitialFormValues<T>(validationSchema);\n    };\n\n    const submitForm = submitted => () => {\n        cleanErrors();\n\n        // Run validations on the form data through the schema\n        const validSchema = validationSchema.safeParse(values.value);\n\n        // Update errors\n        if (!validSchema.success) {\n            (validSchema as z.SafeParseError<T>).error.issues.forEach(error => {\n                const path = normalizeFormPath(error);\n\n                // Add the first ocurrance of a fild error to the \"errors\" object\n                if (!errors.value[path]) {\n                    errors.value[path] = error.message;\n                }\n\n                // Add each error to the \"errorBag\" per field array\n                if (!errorBag.value[path]) {\n                    errorBag.value[path] = [error.message];\n                } else {\n                    errorBag.value[path].push(error.message);\n                }\n            });\n        } else {\n            submitted(values.value);\n        }\n    };\n\n    return {\n        // Values\n        errorBag,\n        errors,\n        values,\n\n        // Methods\n        handleReset: () => resetForm(),\n        submitForm,\n    };\n}\n","import { type App, isVue2, type Vue2 } from 'vue-demi';\nimport { createToastStack, toastStackInjectionKey } from './toast-stack';\n\n/**\n * This function is used to create and register global reactive state necessary fro the Toasts to operate.\n * @param {Vue} Vue A context application to register global state with.\n */\nexport default Vue => {\n    if (isVue2) {\n        // Add toast stack as a global property as there is no \"app.provide\" functionality in Vue2\n        // eslint-disable-next-line no-param-reassign -- this is an official way of setting up instance properties on Vue\n        (Vue as typeof Vue2).prototype[toastStackInjectionKey] = createToastStack();\n    } else {\n        (Vue as App).provide(toastStackInjectionKey, createToastStack());\n    }\n};\n","import type { PluginObject } from 'vue';\nimport installToast from './composables/use-bento-toast-controller/install';\n\nexport enum BentoTheme {\n    LEGACY = 'b-legacy-theme',\n    STYLEGUIDE = 'b-styleguide-theme',\n    BENTO = '',\n}\n\ninterface BentoVuePlugin {\n    theme: BentoTheme;\n    withToast: boolean;\n}\n\nconst setTheme = (theme: BentoTheme) => {\n    document.body.classList.add(theme);\n};\n\nconst plugin: PluginObject<BentoVuePlugin> = {\n    install: async (Vue, options: { theme: BentoTheme; withToast: boolean; withUtilityClasses: boolean }) => {\n        if (options?.withToast) {\n            installToast(Vue);\n        }\n        // Make sure to put all awaited CSS imports below this point and not above!\n        if (options?.theme === BentoTheme.LEGACY) {\n            setTheme(BentoTheme.LEGACY);\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables-legacy.css');\n        } else if (options?.theme === BentoTheme.STYLEGUIDE) {\n            setTheme(BentoTheme.STYLEGUIDE);\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css');\n        } else {\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables.css');\n        }\n\n        if (options?.withUtilityClasses) {\n            await import('@adyen/bento-design-tokens/dist/css/bento/utility.css');\n        }\n    },\n};\n\nexport default plugin;\n"],"names":["toTypedSchema","formSchema","getInitialFormValues","schema","z","key","value","normalizeFormPath","issue","useForm","validationSchema","errors","shallowRef","errorBag","ref","values","cleanErrors","resetForm","validSchema","submitted","error","path","installToast","Vue","toastStackInjectionKey","createToastStack","setTheme","theme","plugin","options"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,SAASA,EAAmCC,GAAe;AACvD,SAAAA;AACX;AA4BA,SAASC,EAA0CC,GAAmC;AAClF,MAAMC,KAAKD,aAAkBC,EAAE;AAC3B,WAAO,OAAO;AAAA,MACV,OAAO,QAAQD,EAAO,KAAK,EAAE,IAAI,CAAC,CAACE,GAAKC,CAAK,MACnCF,KAAKE,aAAiBF,EAAE,aAEnB,CAACC,GAAKC,EAAM,KAAK,aAAc,CAAA,IAGpCF,KAAKE,aAAiBF,EAAE,YACnB,CAACC,GAAKH,EAAqBI,CAAK,CAAC,IAGrC,CAACD,GAAK,MAAS,CACzB;AAAA,IAAA;AAKb;AAOA,SAASE,EAAkBC,GAAmB;AACnC,SAAAA,EAAM,KAAK,KAAK,GAAG;AAC9B;AA2CgB,SAAAC,EAA6B,EAAE,kBAAAC,KAAgC;AAErE,QAAAC,IAASC,EAA6C,CAAA,CAAE,GAExDC,IAA4DC,EAAI,CAAA,CAAE,GAClEC,IAASD,EAAIZ,EAAqBQ,CAAgB,CAAC,GAEnDM,IAAc,MAAM;AACtB,IAAAL,EAAO,QAAQ,IACfE,EAAS,QAAQ;EAAC,GAGhBI,IAAY,MAAM;AACR,IAAAD,KACLD,EAAA,QAAQb,EAAwBQ,CAAgB;AAAA,EAAA;AA+BpD,SAAA;AAAA;AAAA,IAEH,UAAAG;AAAA,IACA,QAAAF;AAAA,IACA,QAAAI;AAAA;AAAA,IAGA,aAAa,MAAME,EAAU;AAAA,IAC7B,YApCe,OAAa,MAAM;AACtB,MAAAD;AAGZ,YAAME,IAAcR,EAAiB,UAAUK,EAAO,KAAK;AAGvD,MAACG,EAAY,UAiBbC,EAAUJ,EAAO,KAAK,IAhBrBG,EAAoC,MAAM,OAAO,QAAQ,CAASE,MAAA;AACzD,cAAAC,IAAOd,EAAkBa,CAAK;AAGpC,QAAKT,EAAO,MAAMU,CAAI,MACXV,EAAA,MAAMU,CAAI,IAAID,EAAM,UAI1BP,EAAS,MAAMQ,CAAI,IAGpBR,EAAS,MAAMQ,CAAI,EAAE,KAAKD,EAAM,OAAO,IAFvCP,EAAS,MAAMQ,CAAI,IAAI,CAACD,EAAM,OAAO;AAAA,MAGzC,CACH;AAAA,IAGL;AAAA,EAWA;AAER;ACnKA,MAAeE,IAAA,CAAOC,MAAA;AAMb,EAAAA,EAAY,QAAQC,GAAwBC,EAAkB,CAAA;AAEvE,GCDMC,IAAW,CAACC,MAAsB;AAC3B,WAAA,KAAK,UAAU,IAAIA,CAAK;AACrC,GAEMC,IAAuC;AAAA,EACzC,SAAS,OAAOL,GAAKM,MAAoF;AACrG,IAAIA,KAAA,QAAAA,EAAS,aACTP,EAAaC,CAAG,IAGhBM,KAAA,gBAAAA,EAAS,WAAU,oBACnBH;AAAA,MAAS;AAAA;AAAA,IAAiB,GAC1B,MAAM,OAAO,qEAAgE,MACtEG,KAAA,gBAAAA,EAAS,WAAU,wBAC1BH;AAAA,MAAS;AAAA;AAAA,IAAqB,GAC9B,MAAM,OAAO,yEAAoE,KAEjF,MAAM,OAAO,8DAAyD,GAGtEG,KAAA,QAAAA,EAAS,sBACT,MAAM,OAAO,4DAAuD;AAAA,EAE5E;AACJ;"}
+{"version":3,"file":"index.js","sources":["../../vue2/src/composables/use-form-validate/use-form.ts","../../vue2/src/composables/use-bento-toast-controller/install.ts","../../vue2/src/install.ts"],"sourcesContent":["import { Ref, ref, shallowRef } from 'vue';\nimport * as z from 'zod';\nimport type { ZodSchema } from 'zod';\nimport { ErrorBag, UseForm } from './use-form.types';\n\n/**\n * Composable that tansforms a Zod schema into a Typed Schema that can be used alongside with {@see useForm}.\n *\n * This is meant to simulate the behavior of {@link @vee-validate/zod} {@see https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation}.\n * Function that transform Zod’s schemas into something that can be understood by vee-validate\n *\n * @param {T extends ZodSchema} formSchema Zod schema to be transformed into a `vee-validate` schema\n * @returns {UseForm<T>} schema Schema transformed\n */\nexport function toTypedSchema<T extends ZodSchema>(formSchema: T) {\n    return formSchema;\n}\n\n/**\n * Finds and returns the initial values of each of the values defined in the schema so that they\n * can be transformed into a reactive element.\n * @param {ZodSchema} schema Zod validation schema containing the definitions of each value to be used in the form\n * @returns Object with the items defined in the schema and their (default) values\n *\n * @example\n * const validationSchema = toTypedSchema(\n *      z.object({\n *          name: z\n *              .string()\n *              .min(3, { message: 'Name is required' })\n *              .startsWith('Jane')\n *              .max(4, { message: 'Name cannot be longer than 4 characters' })\n *              .default('Joe'),\n *      })\n * );\n * getInitialFormValues(validationSchema)\n *\n * Will return:\n *\n * {\n *      name: 'Joe'\n * }\n *\n */\nfunction getInitialFormValues<T extends ZodSchema>(schema: T): z.infer<typeof schema> {\n    if (!!z && schema instanceof z.ZodObject) {\n        return Object.fromEntries(\n            Object.entries(schema.shape).map(([key, value]) => {\n                if (!!z && value instanceof z.ZodDefault) {\n                    // eslint-disable-next-line no-underscore-dangle\n                    return [key, value._def.defaultValue()];\n                }\n\n                if (!!z && value instanceof z.ZodObject) {\n                    return [key, getInitialFormValues(value)];\n                }\n\n                return [key, undefined];\n            })\n        ) as z.infer<typeof schema>;\n    }\n\n    return undefined;\n}\n\n/**\n * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax\n * @param issue List of nested path elements\n * @returns Path with dots\n */\nfunction normalizeFormPath(issue: z.ZodIssue) {\n    return issue.path.join('.');\n}\n\n/**\n * Composable that facilitates validating form data for Vue2 & Vue3 implementations with FormLayout\n * to ease the migration to Vue3.\n *\n * For Vue3 implementations use Vee-Validate.\n *\n * This provides a simplified version of Vee-Validate v4 implemented with Zod to validate a form schema.\n * It returns reactive values that can be used directly in form input elements with 'v-model' alongside\n * with functions to \"reset\" the data (sets values to default value) and a function to execute the\n * successful form validation process (through a callback).\n *\n * @param {UseForm<T>} props Form configuration object\n * @param {T extends ZodSchema} props.validationSchema Zod typed validation schema\n * @returns {Object} response - Composable with reactive form values and errors, and functions to handle the reactive data\n * @returns {Ref<ErrorBag<T>>} response.errorBag Object with all the form values and an array of each one of the errors (if any) per value\n * @returns {Ref<T>} response.errors Object with all the form values and the first error found for that field (if any)\n * @returns {Ref<T>} response.values Object with all the form values and their current value\n * @returns {() => void} response.handleReset Resets the form values to default (initial values) when it gets called\n * @returns {(callback: (values: T) => void) => () => void} response.submitForm Validates the data set in {response.values} and sets errors (if found) inside {response.errors} and {response.errorBag}.\n *                                                                   When the validation is successful it calls the callback so the submit process can continue\n *\n * @example\n * const validationSchema = toTypedSchema(\n *      z.object({\n *          name: z\n *              .string()\n *              .min(3, { message: 'Name is required' })\n *              .startsWith('Jane')\n *              .max(4, { message: 'Name cannot be longer than 4 characters' })\n *              .default('Joe'),\n *      })\n * );\n *\n * const { values, errors, errorBag, submitForm, handleReset } = useForm({\n *     validationSchema\n * });\n * const handleSubmit = submitForm(() => {\n *     // Send data to API here\n * })\n *\n */\nexport function useForm<T extends ZodSchema>({ validationSchema }: UseForm<T>) {\n    // Errors per field\n    const errors = shallowRef<z.infer<typeof validationSchema>>({});\n    // All errors per field\n    const errorBag: Ref<ErrorBag<z.infer<typeof validationSchema>>> = ref({});\n    const values = ref(getInitialFormValues(validationSchema));\n\n    const cleanErrors = () => {\n        errors.value = {};\n        errorBag.value = {};\n    };\n\n    const resetForm = () => {\n        cleanErrors();\n        values.value = getInitialFormValues<T>(validationSchema);\n    };\n\n    const submitForm = submitted => () => {\n        cleanErrors();\n\n        // Run validations on the form data through the schema\n        const validSchema = validationSchema.safeParse(values.value);\n\n        // Update errors\n        if (!validSchema.success) {\n            (validSchema as z.SafeParseError<T>).error.issues.forEach(error => {\n                const path = normalizeFormPath(error);\n\n                // Add the first ocurrance of a fild error to the \"errors\" object\n                if (!errors.value[path]) {\n                    errors.value[path] = error.message;\n                }\n\n                // Add each error to the \"errorBag\" per field array\n                if (!errorBag.value[path]) {\n                    errorBag.value[path] = [error.message];\n                } else {\n                    errorBag.value[path].push(error.message);\n                }\n            });\n        } else {\n            submitted(values.value);\n        }\n    };\n\n    return {\n        // Values\n        errorBag,\n        errors,\n        values,\n\n        // Methods\n        handleReset: () => resetForm(),\n        submitForm,\n    };\n}\n","import { type App, isVue2, type Vue2 } from 'vue-demi';\nimport { createToastStack, toastStackInjectionKey } from './toast-stack';\n\n/**\n * This function is used to create and register global reactive state necessary fro the Toasts to operate.\n * @param {Vue} Vue A context application to register global state with.\n */\nexport default Vue => {\n    if (isVue2) {\n        // Add toast stack as a global property as there is no \"app.provide\" functionality in Vue2\n        // eslint-disable-next-line no-param-reassign -- this is an official way of setting up instance properties on Vue\n        (Vue as typeof Vue2).prototype[toastStackInjectionKey] = createToastStack();\n    } else {\n        (Vue as App).provide(toastStackInjectionKey, createToastStack());\n    }\n};\n","import type { PluginObject } from 'vue';\nimport installToast from './composables/use-bento-toast-controller/install';\n\nexport enum BentoTheme {\n    LEGACY = 'b-legacy-theme',\n    STYLEGUIDE = 'b-styleguide-theme',\n    BENTO = '',\n}\n\ninterface BentoVuePlugin {\n    theme: BentoTheme;\n    withToast: boolean;\n}\n\nconst setTheme = (theme: BentoTheme) => {\n    document.body.classList.add(theme);\n};\n\nconst plugin: PluginObject<BentoVuePlugin> = {\n    install: async (Vue, options: { theme: BentoTheme; withToast: boolean; withUtilityClasses: boolean }) => {\n        if (options?.withToast) {\n            installToast(Vue);\n        }\n        // Make sure to put all awaited CSS imports below this point and not above!\n        if (options?.theme === BentoTheme.LEGACY) {\n            setTheme(BentoTheme.LEGACY);\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables-legacy.css');\n        } else if (options?.theme === BentoTheme.STYLEGUIDE) {\n            setTheme(BentoTheme.STYLEGUIDE);\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css');\n        } else {\n            await import('@adyen/bento-design-tokens/dist/css/bento/variables.css');\n        }\n\n        if (options?.withUtilityClasses) {\n            await import('@adyen/bento-design-tokens/dist/css/bento/utility.css');\n        }\n    },\n};\n\nexport default plugin;\n"],"names":["toTypedSchema","formSchema","getInitialFormValues","schema","z","key","value","normalizeFormPath","issue","useForm","validationSchema","errors","shallowRef","errorBag","ref","values","cleanErrors","resetForm","validSchema","submitted","error","path","installToast","Vue","toastStackInjectionKey","createToastStack","setTheme","theme","plugin","options"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,SAASA,EAAmCC,GAAe;AACvD,SAAAA;AACX;AA4BA,SAASC,EAA0CC,GAAmC;AAClF,MAAMC,KAAKD,aAAkBC,EAAE;AAC3B,WAAO,OAAO;AAAA,MACV,OAAO,QAAQD,EAAO,KAAK,EAAE,IAAI,CAAC,CAACE,GAAKC,CAAK,MACnCF,KAAKE,aAAiBF,EAAE,aAEnB,CAACC,GAAKC,EAAM,KAAK,aAAc,CAAA,IAGpCF,KAAKE,aAAiBF,EAAE,YACnB,CAACC,GAAKH,EAAqBI,CAAK,CAAC,IAGrC,CAACD,GAAK,MAAS,CACzB;AAAA,IAAA;AAKb;AAOA,SAASE,EAAkBC,GAAmB;AACnC,SAAAA,EAAM,KAAK,KAAK,GAAG;AAC9B;AA2CgB,SAAAC,EAA6B,EAAE,kBAAAC,KAAgC;AAErE,QAAAC,IAASC,EAA6C,CAAA,CAAE,GAExDC,IAA4DC,EAAI,CAAA,CAAE,GAClEC,IAASD,EAAIZ,EAAqBQ,CAAgB,CAAC,GAEnDM,IAAc,MAAM;AACtB,IAAAL,EAAO,QAAQ,IACfE,EAAS,QAAQ;EAAC,GAGhBI,IAAY,MAAM;AACR,IAAAD,KACLD,EAAA,QAAQb,EAAwBQ,CAAgB;AAAA,EAAA;AA+BpD,SAAA;AAAA;AAAA,IAEH,UAAAG;AAAA,IACA,QAAAF;AAAA,IACA,QAAAI;AAAA;AAAA,IAGA,aAAa,MAAME,EAAU;AAAA,IAC7B,YApCe,OAAa,MAAM;AACtB,MAAAD;AAGZ,YAAME,IAAcR,EAAiB,UAAUK,EAAO,KAAK;AAGvD,MAACG,EAAY,UAiBbC,EAAUJ,EAAO,KAAK,IAhBrBG,EAAoC,MAAM,OAAO,QAAQ,CAASE,MAAA;AACzD,cAAAC,IAAOd,EAAkBa,CAAK;AAGpC,QAAKT,EAAO,MAAMU,CAAI,MACXV,EAAA,MAAMU,CAAI,IAAID,EAAM,UAI1BP,EAAS,MAAMQ,CAAI,IAGpBR,EAAS,MAAMQ,CAAI,EAAE,KAAKD,EAAM,OAAO,IAFvCP,EAAS,MAAMQ,CAAI,IAAI,CAACD,EAAM,OAAO;AAAA,MAGzC,CACH;AAAA,IAGL;AAAA,EAWA;AAER;ACnKA,MAAeE,IAAA,CAAOC,MAAA;AAMb,EAAAA,EAAY,QAAQC,GAAwBC,EAAkB,CAAA;AAEvE,GCDMC,IAAW,CAACC,MAAsB;AAC3B,WAAA,KAAK,UAAU,IAAIA,CAAK;AACrC,GAEMC,IAAuC;AAAA,EACzC,SAAS,OAAOL,GAAKM,MAAoF;AACrG,IAAIA,KAAA,QAAAA,EAAS,aACTP,EAAaC,CAAG,IAGhBM,KAAA,gBAAAA,EAAS,WAAU,oBACnBH;AAAA,MAAS;AAAA;AAAA,IAAiB,GAC1B,MAAM,OAAO,qEAAgE,MACtEG,KAAA,gBAAAA,EAAS,WAAU,wBAC1BH;AAAA,MAAS;AAAA;AAAA,IAAqB,GAC9B,MAAM,OAAO,yEAAoE,KAEjF,MAAM,OAAO,8DAAyD,GAGtEG,KAAA,QAAAA,EAAS,sBACT,MAAM,OAAO,4DAAuD;AAAA,EAE5E;AACJ;"}