@adyen/bento-vue2 1.25.0 → 1.27.0

package/dist/focus-trap.js

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

package/dist/form-layout.js

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

package/dist/form-layout.js.map

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

package/dist/header.js

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

package/dist/index.js

@@ -1,22 +1,22 @@
 import "./chunks/index.4c062058.js";
-import { t as f, c } from "./chunks/use-bento-toast-controller.8414d283.js";
-import { u as P } from "./chunks/use-bento-toast-controller.8414d283.js";
+import { t as f, c } from "./chunks/use-bento-toast-controller.5dac1f3c.js";
+import { u as P } from "./chunks/use-bento-toast-controller.5dac1f3c.js";
 import { BentoAccordion as k, BentoAccordionItem as w } from "./accordion.js";
 import { BentoActionBar as M } from "./action-bar.js";
 import { BentoAlert as O, BentoAlertEvent as R, BentoAlertTypeOption as z, BentoAlertVariant as j } from "./alert.js";
-import { a as K, b as U, B as Z } from "./chunks/button.e5f5638f.js";
+import { a as K, b as U, B as Z } from "./chunks/button.cb90b55c.js";
 import { BentoColumnOverflow as Y, BentoDataGrid as H, BentoDatagridAriaSortValue as _, BentoDatagridEvent as q, BentoDatagridSortDirection as J, BentoDatagridStyleState as Q } from "./data-grid.js";
 import { BentoCard as $, BentoCardBackground as ee, BentoCardTitleSize as te } from "./card.js";
 import { BentoDatePicker as ne, BentoDatePickerEvent as re } from "./date-picker.js";
-import { B as Be, a as ie } from "./chunks/index.4b6211c7.js";
-import { B as se, a as pe, u as ue } from "./chunks/dropdown.7d4a8dfc.js";
-import { B as de, a as fe } from "./chunks/checkbox.28578383.js";
+import { B as Be, a as ie } from "./chunks/index.854d6498.js";
+import { B as se, a as pe, u as ue } from "./chunks/dropdown.a8037bca.js";
+import { B as de, a as fe } from "./chunks/checkbox.9f9c978a.js";
 import { BentoClickOutside as xe } from "./click-outside.js";
-import { BentoCodeSnippet as ge, BentoCodeSnippetEvent as Se, BentoCodeSnippetSupportedLanguage as Ce, BentoCodeSnippetVariant as Te } from "./code-snippet.js";
+import { BentoCodeSnippet as Se, BentoCodeSnippetEvent as ge, BentoCodeSnippetSupportedLanguage as Te, BentoCodeSnippetVariant as Ce } from "./code-snippet.js";
 import { BentoCountry as De } from "./country.js";
 import { c as he, B as Ee, a as Ie, u as Fe, b as Le } from "./chunks/country.types.002caff2.js";
 import { BentoCurrency as Ve, BentoCurrencyISOCode as ke } from "./currency.js";
-import { B as Ge, a as Me } from "./chunks/index.9e40ffeb.js";
+import { B as Ge, a as Me } from "./chunks/index.614a5138.js";
 import { B as Oe } from "./chunks/index.939dd5cf.js";
 import { BentoEmptyState as ze, BentoEmptyStateImage as je, BentoEmptyStateImageVariant as Ne, BentoEmptyStateVariant as Ke } from "./empty-state.js";
 import { BentoFilterBar as Ze, BentoFilterBarEvent as We, BentoFilterEvent as Ye, BentoFilterItemType as He } from "./filter-bar.js";
@@ -25,16 +25,16 @@ import { BentoImage as et, BentoImageAspectRatio as tt, BentoImageObjectFit as o
 import { BentoInfoIcon as rt } from "./info-icon.js";
 import { BentoInputField as Bt, BentoInputFieldElementPosition as it, BentoInputFieldEvent as mt, BentoInputFieldStateClass as st, BentoInputFieldType as pt, BentoInputFieldVariant as ut } from "./input-field.js";
 import { BentoLoadingIndicator as dt, BentoLoadingIndicatorEvent as ft } from "./loading-indicator.js";
-import { B as xt, a as yt } from "./chunks/index.444d221f.js";
-import { B as St, a as Ct } from "./chunks/index.30948302.js";
-import { d as vt, f as Dt, g as bt, B as ht, e as Et, c as It, a as Ft, b as Lt } from "./chunks/base-modal.2d596e6f.js";
+import { B as xt, a as yt } from "./chunks/index.bd1d28d0.js";
+import { B as gt, a as Tt } from "./chunks/index.a48e7f99.js";
+import { d as vt, f as Dt, g as bt, B as ht, e as Et, c as It, a as Ft, b as Lt } from "./chunks/base-modal.4fb7528b.js";
 import { BentoModal as Vt } from "./modal.js";
 import { BentoModalFullscreen as wt, BentoModalFullscreenPage as Gt } from "./modal-fullscreen.js";
 import { BentoHeader as At } from "./header.js";
 import { BentoPagination as Rt } from "./pagination.js";
-import { B as jt } from "./chunks/payment-method.564ed43a.js";
+import { B as jt } from "./chunks/payment-method.c55dd352.js";
 import { BentoPaymentMethodType as Kt } from "./payment-method.js";
-import { a as Zt, B as Wt } from "./chunks/index.ec632d95.js";
+import { a as Zt, B as Wt } from "./chunks/index.0a30d358.js";
 import { BentoRadioButton as Ht, BentoRadioGroup as _t, BentoRadioGroupVariant as qt } from "./radio-group.js";
 import { BentoSearchBar as Qt, BentoSearchBarEvent as Xt, BentoSearchBarInternalEvent as $t } from "./search-bar.js";
 import { BentoSecondaryNav as to } from "./secondary-nav.js";
@@ -42,8 +42,8 @@ import { BentoSelectionCard as no, BentoSelectionCardGroup as ro, BentoSelection
 import { BentoSegmentedControl as io, BentoSegmentedControlEvent as mo } from "./segmented-control.js";
 import { BentoSidepanel as po, BentoSidepanelEvent as uo, BentoSidepanelPage as lo } from "./sidepanel.js";
 import { BentoStatus as co, BentoStatusVariant as xo } from "./status.js";
-import { BentoStep as go, BentoStepper as So, BentoStepperTypeOption as Co, BentoStepperVariantOption as To } from "./stepper.js";
-import { B as Do, a as bo } from "./chunks/index.81e509f3.js";
+import { BentoStep as So, BentoStepper as go, BentoStepperTypeOption as To, BentoStepperVariantOption as Co } from "./stepper.js";
+import { B as Do, a as bo } from "./chunks/index.3c69be27.js";
 import { BentoSummaryGrid as Eo, BentoSummaryGridItemAmount as Io, BentoSummaryGridItemCustom as Fo, BentoSummaryGridItemNumeric as Lo, BentoSummaryGridItemPercentage as Po, BentoSummaryGridItemSize as Vo, BentoSummaryGridItemText as ko, BentoSummaryGridItemTrendDirection as wo } from "./summary-grid.js";
 import { BentoTab as Mo, BentoTabs as Ao } from "./tabs.js";
 import { BentoTag as Ro, BentoTagVariant as zo } from "./tag.js";
@@ -52,24 +52,25 @@ import { BentoTimeline as Uo, BentoTimelineGapUnit as Zo, BentoTimelineItem as W
 import { BentoToast as Jo } from "./toast.js";
 import { BentoToggle as Xo, BentoToggleLabelPosition as $o, BentoTogglePropClass as en } from "./toggle.js";
 import { BentoTutorial as on } from "./tutorial.js";
-import { B as rn, c as an, b as Bn, a as mn } from "./chunks/index.d97166c6.js";
-import { BentoDataGridTemplate as pn } from "./data-grid-template.js";
-import { B as ln, c as dn, a as fn, b as cn } from "./chunks/button-actions.a03a672f.js";
-import { B as yn, a as gn } from "./chunks/loading-button.e8060c04.js";
-import { BentoToggleButton as Cn } from "./button.js";
-import { b as vn, b as Dn } from "./chunks/calendar.7d3e2db0.js";
-import { c as hn, b as En, c as In, b as Fn } from "./chunks/use-cached-selected-values.3772a679.js";
-import { BentoDropdownAvatar as Pn, BentoDropdownCountry as Vn, BentoDropdownCurrency as kn, BentoDropdownPaymentMethod as wn, BentoDropdownTag as Gn } from "./dropdown.js";
-import { C as An } from "./chunks/checkbox-input.1c3cc8ed.js";
-import { BentoCheckboxGroup as Rn, BentoCheckboxGroupVariant as zn } from "./checkbox.js";
-import { R as Nn } from "./chunks/radio-input.c6550a9c.js";
+import { B as rn, c as an, b as Bn, a as mn } from "./chunks/index.e29a6907.js";
+import { BentoDashboardSection as pn, BentoDashboardTemplate as un } from "./dashboard-template.js";
+import { BentoDataGridTemplate as dn } from "./data-grid-template.js";
+import { B as cn, c as xn, a as yn, b as Sn } from "./chunks/button-actions.87e589e3.js";
+import { B as Tn, a as Cn } from "./chunks/loading-button.692dbdc8.js";
+import { BentoToggleButton as Dn } from "./button.js";
+import { b as hn, b as En } from "./chunks/calendar.f02e0a5a.js";
+import { c as Fn, b as Ln, c as Pn, b as Vn } from "./chunks/use-cached-selected-values.98a9ed01.js";
+import { BentoDropdownAvatar as wn, BentoDropdownCountry as Gn, BentoDropdownCurrency as Mn, BentoDropdownPaymentMethod as An, BentoDropdownTag as On } from "./dropdown.js";
+import { C as zn } from "./chunks/checkbox-input.1c3cc8ed.js";
+import { BentoCheckboxGroup as Nn, BentoCheckboxGroupVariant as Kn } from "./checkbox.js";
+import { R as Zn } from "./chunks/radio-input.c6550a9c.js";
 import { shallowRef as x, ref as p } from "vue";
 import * as n from "zod";
-import { u as Un } from "./chunks/use-click-outside.941d1600.js";
-import { D as Wn } from "./chunks/date-input.9186a0bf.js";
-import { a as Hn, B as _n } from "./chunks/keyboard-navigation.ca47dfa8.js";
-import { B as Jn } from "./chunks/dropdown-default-textbox.a1c0c0fb.js";
-import { b as Xn, B as $n, a as er } from "./chunks/tooltip.e5deb137.js";
+import { u as Yn } from "./chunks/use-click-outside.941d1600.js";
+import { D as _n } from "./chunks/date-input.9186a0bf.js";
+import { a as Jn, B as Qn } from "./chunks/keyboard-navigation.bbc3d15c.js";
+import { B as $n } from "./chunks/dropdown-default-textbox.d0f17d96.js";
+import { b as tr, B as or, a as nr } from "./chunks/tooltip.efddb5f3.js";
 function h(e) {
   return e;
 }
@@ -105,15 +106,15 @@ function E({ validationSchema: e }) {
     }
   };
 }
-const g = (e) => {
+const S = (e) => {
   e.prototype[f] = c();
 };
-var S = /* @__PURE__ */ ((e) => (e.LEGACY = "b-legacy-theme", e.STYLEGUIDE = "b-styleguide-theme", e.BENTO = "", e))(S || {});
+var g = /* @__PURE__ */ ((e) => (e.LEGACY = "b-legacy-theme", e.STYLEGUIDE = "b-styleguide-theme", e.BENTO = "", e))(g || {});
 const u = (e) => {
   document.body.classList.add(e);
-}, C = {
+}, T = {
   install: async (e, t) => {
-    t != null && t.withToast && g(e), (t == null ? void 0 : t.theme) === "b-legacy-theme" ? (u(
+    t != null && t.withToast && S(e), (t == null ? void 0 : t.theme) === "b-legacy-theme" ? (u(
       "b-legacy-theme"
       /* LEGACY */
     ), await import("@adyen/bento-design-tokens/dist/css/bento/variables-legacy.css?used")) : (t == null ? void 0 : t.theme) === "b-styleguide-theme" ? (u(
@@ -121,7 +122,7 @@ const u = (e) => {
       /* STYLEGUIDE */
     ), await import("@adyen/bento-design-tokens/dist/css/bento/variables-styleguide.css?used")) : await import("@adyen/bento-design-tokens/dist/css/bento/variables.css?used"), t != null && t.withUtilityClasses && await import("@adyen/bento-design-tokens/dist/css/bento/utility.css?used");
   }
-}, I = C;
+}, I = T;
 export {
   k as BentoAccordion,
   w as BentoAccordionItem,
@@ -131,10 +132,10 @@ export {
   z as BentoAlertTypeOption,
   j as BentoAlertVariant,
   K as BentoButton,
-  ln as BentoButtonActions,
-  dn as BentoButtonActionsLayout,
-  fn as BentoButtonActionsLayoutBasic,
-  cn as BentoButtonActionsLayoutExtended,
+  cn as BentoButtonActions,
+  xn as BentoButtonActionsLayout,
+  yn as BentoButtonActionsLayoutBasic,
+  Sn as BentoButtonActionsLayoutExtended,
   U as BentoButtonPropClass,
   Z as BentoButtonVariant,
   $ as BentoCard,
@@ -142,23 +143,25 @@ export {
   te as BentoCardTitleSize,
   de as BentoCheckbox,
   fe as BentoCheckboxEvent,
-  Rn as BentoCheckboxGroup,
-  zn as BentoCheckboxGroupVariant,
-  An as BentoCheckboxState,
+  Nn as BentoCheckboxGroup,
+  Kn as BentoCheckboxGroupVariant,
+  zn as BentoCheckboxState,
   xe as BentoClickOutside,
-  Jn as BentoClickOutsideDirective,
-  ge as BentoCodeSnippet,
-  Se as BentoCodeSnippetEvent,
-  Ce as BentoCodeSnippetSupportedLanguage,
-  Te as BentoCodeSnippetVariant,
+  $n as BentoClickOutsideDirective,
+  Se as BentoCodeSnippet,
+  ge as BentoCodeSnippetEvent,
+  Te as BentoCodeSnippetSupportedLanguage,
+  Ce as BentoCodeSnippetVariant,
   Y as BentoColumnOverflow,
   De as BentoCountry,
   he as BentoCountryCode,
   Ee as BentoCountryVariant,
   Ve as BentoCurrency,
   ke as BentoCurrencyISOCode,
+  pn as BentoDashboardSection,
+  un as BentoDashboardTemplate,
   H as BentoDataGrid,
-  pn as BentoDataGridTemplate,
+  dn as BentoDataGridTemplate,
   _ as BentoDatagridAriaSortValue,
   q as BentoDatagridEvent,
   J as BentoDatagridSortDirection,
@@ -167,20 +170,20 @@ export {
   Me as BentoDateFormat,
   ne as BentoDatePicker,
   re as BentoDatePickerEvent,
-  vn as BentoDatePickerFirstDayOfWeek,
+  hn as BentoDatePickerFirstDayOfWeek,
   Be as BentoDateRangePicker,
   ie as BentoDateRangePickerEvent,
-  Dn as BentoDateRangePickerFirstDayOfWeek,
+  En as BentoDateRangePickerFirstDayOfWeek,
   Oe as BentoDivider,
   se as BentoDropdown,
-  Pn as BentoDropdownAvatar,
-  Vn as BentoDropdownCountry,
-  kn as BentoDropdownCurrency,
-  hn as BentoDropdownEvent,
-  En as BentoDropdownLazyLoadType,
-  wn as BentoDropdownPaymentMethod,
+  wn as BentoDropdownAvatar,
+  Gn as BentoDropdownCountry,
+  Mn as BentoDropdownCurrency,
+  Fn as BentoDropdownEvent,
+  Ln as BentoDropdownLazyLoadType,
+  An as BentoDropdownPaymentMethod,
   pe as BentoDropdownSize,
-  Gn as BentoDropdownTag,
+  On as BentoDropdownTag,
   ze as BentoEmptyState,
   je as BentoEmptyStateImage,
   Ne as BentoEmptyStateImageVariant,
@@ -204,18 +207,18 @@ export {
   st as BentoInputFieldStateClass,
   pt as BentoInputFieldType,
   ut as BentoInputFieldVariant,
-  Hn as BentoKeyboardNavigationDirective,
-  _n as BentoKeyboardNavigationKeyDownEvent,
+  Jn as BentoKeyboardNavigationDirective,
+  Qn as BentoKeyboardNavigationKeyDownEvent,
   xt as BentoLink,
   yt as BentoLinkVariant,
-  In as BentoListboxEvent,
-  Fn as BentoListboxLazyLoadType,
-  yn as BentoLoadingButton,
-  gn as BentoLoadingButtonState,
+  Pn as BentoListboxEvent,
+  Vn as BentoListboxLazyLoadType,
+  Tn as BentoLoadingButton,
+  Cn as BentoLoadingButtonState,
   dt as BentoLoadingIndicator,
   ft as BentoLoadingIndicatorEvent,
-  St as BentoMenu,
-  Ct as BentoMenuEvent,
+  gt as BentoMenu,
+  Tt as BentoMenuEvent,
   Vt as BentoModal,
   vt as BentoModalColumnLayoutVariant,
   Dt as BentoModalDialogType,
@@ -233,7 +236,7 @@ export {
   Zt as BentoPopover,
   Wt as BentoPopoverPositions,
   Ht as BentoRadioButton,
-  Nn as BentoRadioButtonStateClass,
+  Zn as BentoRadioButtonStateClass,
   _t as BentoRadioGroup,
   qt as BentoRadioGroupVariant,
   Qt as BentoSearchBar,
@@ -250,10 +253,10 @@ export {
   lo as BentoSidepanelPage,
   co as BentoStatus,
   xo as BentoStatusVariant,
-  go as BentoStep,
-  So as BentoStepper,
-  Co as BentoStepperTypeOption,
-  To as BentoStepperVariantOption,
+  So as BentoStep,
+  go as BentoStepper,
+  To as BentoStepperTypeOption,
+  Co as BentoStepperVariantOption,
   Do as BentoStructuredList,
   bo as BentoStructuredListItem,
   Eo as BentoSummaryGrid,
@@ -269,7 +272,7 @@ export {
   Ro as BentoTag,
   zo as BentoTagVariant,
   No as BentoTextarea,
-  S as BentoTheme,
+  g as BentoTheme,
   Uo as BentoTimeline,
   Zo as BentoTimelineGapUnit,
   Wo as BentoTimelineItem,
@@ -278,22 +281,22 @@ export {
   _o as BentoTimelineStatus,
   Jo as BentoToast,
   Xo as BentoToggle,
-  Cn as BentoToggleButton,
+  Dn as BentoToggleButton,
   $o as BentoToggleLabelPosition,
   en as BentoTogglePropClass,
-  Xn as BentoTooltipDirective,
-  $n as BentoTooltipPosition,
-  er as BentoTooltipState,
+  tr as BentoTooltipDirective,
+  or as BentoTooltipPosition,
+  nr as BentoTooltipState,
   on as BentoTutorial,
   rn as BentoTypography,
   an as BentoTypographyElement,
   Bn as BentoTypographyModifier,
   mn as BentoTypographyVariant,
-  Wn as DateFormat,
+  _n as DateFormat,
   I as default,
   h as toTypedSchema,
   P as useBentoToastController,
-  Un as useClickOutside,
+  Yn as useClickOutside,
   Ie as useCountryCapital,
   Fe as useCountryName,
   Le as useCountryPhoneCode,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/composables/use-form-validate/use-form.ts","../src/composables/use-bento-toast-controller/install.ts","../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","BentoTheme","setTheme","theme","plugin","options","BentoVue"],"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;AAIb,EAAAA,EAAoB,UAAUC,CAAsB,IAAIC,EAAiB;AAIlF;ACZY,IAAAC,sBAAAA,OACRA,EAAA,SAAS,kBACTA,EAAA,aAAa,sBACbA,EAAA,QAAQ,IAHAA,IAAAA,KAAA,CAAA,CAAA;AAWZ,MAAMC,IAAW,CAACC,MAAsB;AAC3B,WAAA,KAAK,UAAU,IAAIA,CAAK;AACrC,GAEMC,IAAuC;AAAA,EACzC,SAAS,OAAON,GAAKO,MAAoF;AACrG,IAAIA,KAAA,QAAAA,EAAS,aACTR,EAAaC,CAAG,IAGhBO,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,GAEAC,IAAeF;"}
+{"version":3,"file":"index.js","sources":["../src/composables/use-form-validate/use-form.ts","../src/composables/use-bento-toast-controller/install.ts","../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","BentoTheme","setTheme","theme","plugin","options","BentoVue"],"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;AAIb,EAAAA,EAAoB,UAAUC,CAAsB,IAAIC,EAAiB;AAIlF;ACZY,IAAAC,sBAAAA,OACRA,EAAA,SAAS,kBACTA,EAAA,aAAa,sBACbA,EAAA,QAAQ,IAHAA,IAAAA,KAAA,CAAA,CAAA;AAWZ,MAAMC,IAAW,CAACC,MAAsB;AAC3B,WAAA,KAAK,UAAU,IAAIA,CAAK;AACrC,GAEMC,IAAuC;AAAA,EACzC,SAAS,OAAON,GAAKO,MAAoF;AACrG,IAAIA,KAAA,QAAAA,EAAS,aACTR,EAAaC,CAAG,IAGhBO,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,GAEAC,IAAeF;"}

package/dist/info-icon.js

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

package/dist/input-field.js

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

package/dist/internal.js

@@ -1,12 +1,12 @@
-import { B as o, L as r } from "./chunks/listbox-option-tag.95a65534.js";
-import { C as s, a as p, b as l } from "./chunks/calendar.7d3e2db0.js";
-import { C as n, a as C } from "./chunks/copy.3c50b447.js";
-import { C as m } from "./chunks/controls-group.faa482b2.js";
-import { B as f, b as G, a as d, D as I } from "./chunks/dialog-page.286ead53.js";
-import { E as _, F as u } from "./chunks/error-message.db315e68.js";
-import { F as A } from "./chunks/fixed-scroller.3135f86c.js";
+import { B as o, L as r } from "./chunks/listbox-option-tag.8708be60.js";
+import { C as s, a as p, b as l } from "./chunks/calendar.f02e0a5a.js";
+import { C as n, a as C } from "./chunks/copy.6808b2dc.js";
+import { C as m } from "./chunks/controls-group.121a307d.js";
+import { B as f, b as G, a as d, D as I } from "./chunks/dialog-page.7fd7d006.js";
+import { E as _, F as u } from "./chunks/error-message.bdcc1020.js";
+import { F as A } from "./chunks/fixed-scroller.82ef6187.js";
 import { G as T, a as g } from "./chunks/grid-layout.e0025286.js";
-import { B as D, a as F, u as b } from "./chunks/use-cached-selected-values.3772a679.js";
+import { B as D, a as F, u as b } from "./chunks/use-cached-selected-values.98a9ed01.js";
 import { B as P } from "./chunks/teleport.84b0f20b.js";
 export {
   o as BentoAvatar,

package/dist/link.js

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

package/dist/loading-indicator.js

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