@adyen/bento-vue2 1.2.0 → 1.3.0

package/dist/focus-trap.js

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

package/dist/form-layout.js

@@ -0,0 +1,174 @@
+import { defineComponent as _, useSlots as f, computed as a, provide as g, toRef as p, onMounted as B, ref as L } from "vue";
+import { BentoAlert as m, BentoAlertTypeOption as y, BentoAlertVariant as h } from "./alert.js";
+import { u as d } from "./chunks/use-has-slot.068222e6.js";
+import { F as T } from "./chunks/form-layout.types.a7a1438d.js";
+import { n as l } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as u, a as i, b } from "./chunks/index.56858f4e.js";
+import "./assets/index12.css";
+const C = {}, $ = /* @__PURE__ */ _({
+  ...C,
+  __name: "form-layout",
+  props: {
+    /**
+     * Renders the form layout as an HTML `form`
+     */
+    form: { type: Boolean, default: !1 },
+    /**
+     * Sets the state of the form and its fields to
+     * a read only status.
+     */
+    loading: { type: Boolean, default: !1 }
+  },
+  setup(s) {
+    const t = s, e = f(), o = d(e), r = a(() => t.form ? "form" : "div"), n = a(() => o("actions-left") || o("actions-right"));
+    return g(T, p(t, "loading")), { __sfc: !0, slots: e, hasSlot: o, props: t, formLayoutElement: r, hasActions: n, BentoAlert: m, BentoAlertTypeOption: y };
+  }
+});
+var A = function() {
+  var t = this, e = t._self._c, o = t._self._setupProxy;
+  return e(o.formLayoutElement, { tag: "component", staticClass: "b-form-layout", attrs: { role: "form" } }, [o.hasSlot("error-message") ? e(o.BentoAlert, { staticClass: "b-form-layout__error-message", attrs: { type: o.BentoAlertTypeOption.CRITICAL }, scopedSlots: t._u([{ key: "description", fn: function() {
+    return [t._t("error-message")];
+  }, proxy: !0 }], null, !0) }) : t._e(), t._t("default"), o.hasActions ? e("div", { staticClass: "b-form-layout__actions-container" }, [e("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-left")], 2), e("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-right")], 2)]) : t._e()], 2);
+}, x = [], F = /* @__PURE__ */ l(
+  $,
+  A,
+  x,
+  !1,
+  null,
+  "27615954",
+  null,
+  null
+);
+const Q = F.exports, S = {}, I = /* @__PURE__ */ _({
+  ...S,
+  __name: "form-layout-field-tip",
+  setup(s) {
+    return { __sfc: !0, BentoAlert: m, BentoAlertTypeOption: y, BentoAlertVariant: h };
+  }
+});
+var E = function() {
+  var t = this, e = t._self._c, o = t._self._setupProxy;
+  return e("div", { staticClass: "b-form-layout-field-tip" }, [t._t("default"), e(o.BentoAlert, { attrs: { variant: o.BentoAlertVariant.TIP, type: o.BentoAlertTypeOption.WARNING }, scopedSlots: t._u([{ key: "description", fn: function() {
+    return [t._t("message")];
+  }, proxy: !0 }], null, !0) })], 2);
+}, O = [], G = /* @__PURE__ */ l(
+  I,
+  E,
+  O,
+  !1,
+  null,
+  "4e29ff60",
+  null,
+  null
+);
+const X = G.exports, N = (s, t) => {
+  const e = (r) => {
+    var n;
+    return (n = r.split) == null ? void 0 : n.call(r, "-").map((c) => parseInt(c, 10));
+  }, o = a(() => e(s.value));
+  B(() => {
+    const r = t.value.classList[0];
+    t.value.querySelectorAll(`.${r} > *`).forEach((c, v) => {
+      c.classList.add(`${r}--${o.value[v] || "100"}`);
+    });
+  });
+}, P = {}, R = /* @__PURE__ */ _({
+  ...P,
+  __name: "form-layout-group",
+  props: {
+    /**
+     * The layout of the pair group of components.
+     * This will render the components within the width of the proportions.
+     * Only two colums are available.
+     *
+     * If only one value is entered, then it will assume there's only one child in the group.
+     * If two values are entered, the first value will be use for the first child and the second
+     * value for the second child.
+     *
+     * If the value entered is not listed in the example
+     * list below it will use 100% by default.
+     * @example
+     * '50-50'
+     * '25-75'
+     * '75-25'
+     * '33-66'
+     * '66-33'
+     * '25'
+     * '33'
+     * '50'
+     * '100'
+     */
+    layout: {
+      type: String,
+      default: "100"
+    }
+  },
+  setup(s) {
+    const t = s, e = L(null);
+    return N(p(t, "layout"), e), { __sfc: !0, props: t, formLayoutGroup: e };
+  }
+});
+var V = function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { ref: "formLayoutGroup", staticClass: "b-form-layout-group" }, [t._t("default")], 2);
+}, k = [], q = /* @__PURE__ */ l(
+  R,
+  V,
+  k,
+  !1,
+  null,
+  "4153ff3c",
+  null,
+  null
+);
+const Z = q.exports, M = {}, Y = /* @__PURE__ */ _({
+  ...M,
+  __name: "form-layout-title",
+  props: {
+    /**
+     * Defines if the Form Layout title is
+     * a "section" or a "subsection".
+     * Default is "section" (false). Turn into "true" for "subsection"
+     */
+    subsection: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets the HTML DOM element.
+     * @values h1, h2, h3, h4, h5, h6, div, p, span
+     */
+    el: {
+      type: u.props.el.type,
+      required: !0,
+      validator: (s) => Object.values(i).includes(s)
+    }
+  },
+  setup(s) {
+    const t = s, e = f(), o = a(() => !t.subsection), r = d(e), n = a(() => ({
+      "b-form-layout-title--subsection": t.subsection
+    }));
+    return { __sfc: !0, slots: e, props: t, isSection: o, hasSlot: r, conditionalClasses: n, BentoTypography: u, BentoTypographyElement: i, BentoTypographyVariant: b };
+  }
+});
+var j = function() {
+  var t = this, e = t._self._c, o = t._self._setupProxy;
+  return e("div", { staticClass: "b-form-layout-title", class: o.conditionalClasses }, [e(o.BentoTypography, { attrs: { el: t.el, variant: o.BentoTypographyVariant.TITLE, medium: o.isSection } }, [t._t("default")], 2), o.hasSlot("description") ? e(o.BentoTypography, { staticClass: "b-form-layout-title__description", attrs: { el: o.BentoTypographyElement.SPAN, wide: "" } }, [t._t("description")], 2) : t._e()], 1);
+}, w = [], z = /* @__PURE__ */ l(
+  Y,
+  j,
+  w,
+  !1,
+  null,
+  "3a056bf8",
+  null,
+  null
+);
+const tt = z.exports;
+export {
+  Q as BentoFormLayout,
+  X as BentoFormLayoutFieldTip,
+  Z as BentoFormLayoutGroup,
+  tt as BentoFormLayoutTitle
+};
+//# sourceMappingURL=form-layout.js.map

package/dist/form-layout.js.map

@@ -0,0 +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-field-tip.vue","../src/components/form-layout/components/form-layout-group/composable/use-form-layout-group-percentage.ts","../src/components/form-layout/components/form-layout-group/form-layout-group.vue","../src/components/form-layout/components/form-layout-title/form-layout-title.vue"],"sourcesContent":["<template>\n    <component :is=\"formLayoutElement\" class=\"b-form-layout\" role=\"form\">\n        <bento-alert\n            v-if=\"hasSlot('error-message')\"\n            class=\"b-form-layout__error-message\"\n            :type=\"BentoAlertTypeOption.CRITICAL\"\n        >\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, BentoAlertTypeOption } 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","<template>\n    <div class=\"b-form-layout-field-tip\">\n        <slot />\n        <bento-alert :variant=\"BentoAlertVariant.TIP\" :type=\"BentoAlertTypeOption.WARNING\">\n            <template #description>\n                <slot name=\"message\" />\n            </template>\n        </bento-alert>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoAlert, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert';\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","import { computed, onMounted, Ref } from 'vue';\nimport { BentoLayoutGroupProportions } from '../form-layout-group.types';\n\n/**\n * Calculates the CSS classes based on the percentage\n * for each one of the layouts in format `##-##` or `##`.\n *\n * It receives a layout of type @see BentoLayoutGroupProportions to\n * generate the class and apply it to the children of the @see BentoFormLayoutGroup component\n *\n * @param {Ref<BentoLayoutGroupProportions>} layoutProp Layout string in the format `##` or `##-##`\n * @param {Ref<HTMLElement>} formLayoutGroupRef Reference to an HTML element of type BentoFormLayoutGroup\n */\nexport const useFormLayoutGroupPercentage = (\n    layoutProp: Ref<BentoLayoutGroupProportions>,\n    formLayoutGroupRef: Ref<HTMLElement>\n) => {\n    // Split the `##-##` format into individual values [##, ##]\n    const getLayoutValues = layout => layout.split?.('-').map(value => parseInt(value, 10));\n    const layout = computed(() => getLayoutValues(layoutProp.value));\n\n    onMounted(() => {\n        // Apply class to every immediate child\n        const layoutClassName = formLayoutGroupRef.value.classList[0];\n        const immediateChildren = formLayoutGroupRef.value.querySelectorAll(`.${layoutClassName} > *`); // Get immediate children\n        immediateChildren.forEach((child, index) => {\n            child.classList.add(`${layoutClassName}--${layout.value[index] || '100'}`); // 100% default\n        });\n    });\n};\n","<template>\n    <div ref=\"formLayoutGroup\" class=\"b-form-layout-group\">\n        <slot></slot>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { defineProps, PropType, ref, toRef } from 'vue';\n    import { useFormLayoutGroupPercentage } from './composable/use-form-layout-group-percentage';\n    import { BentoLayoutGroupProportions } from './form-layout-group.types';\n\n    const props = defineProps({\n        /**\n         * The layout of the pair group of components.\n         * This will render the components within the width of the proportions.\n         * Only two colums are available.\n         *\n         * If only one value is entered, then it will assume there's only one child in the group.\n         * If two values are entered, the first value will be use for the first child and the second\n         * value for the second child.\n         *\n         * If the value entered is not listed in the example\n         * list below it will use 100% by default.\n         * @example\n         * '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        },\n    });\n\n    const formLayoutGroup = ref(null);\n    useFormLayoutGroupPercentage(toRef(props, 'layout'), formLayoutGroup);\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=\"BentoTypographyVariant.TITLE\" :medium=\"isSection\">\n            <slot />\n        </bento-typography>\n\n        <bento-typography\n            v-if=\"hasSlot('description')\"\n            class=\"b-form-layout-title__description\"\n            :el=\"BentoTypographyElement.SPAN\"\n            wide\n        >\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, BentoTypographyVariant } 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     * An element of type @see BentoTypographyElement must always be provided\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=\"BentoTypographyElement.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","__default__$2","useFormLayoutGroupPercentage","layoutProp","formLayoutGroupRef","getLayoutValues","layout2","_a","value","layout","onMounted","layoutClassName","child","index","__default__$1","formLayoutGroup","ref","__default__","isSection","conditionalClasses"],"mappings":";;;;;;;AA0FI,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;;;;;;;;;;;;;;;;;;qBCbAK,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;qBCzBSC,IAAA,CAAAC,GAAAC,MAAA;AAKT,QAAAC,IAAA,CAAAC,MAAA;;AAAA,YAAAC,IAAAD,EAAA,UAAA,gBAAAC,EAAA,KAAAD,GAAA,KAAA,IAAA,CAAAE,MAAA,SAAAA,GAAA,EAAA;AAAA,KACAC,IAAAd,EAAA,MAAAU,EAAAF,EAAA,KAAA,CAAA;AAEA,EAAAO,EAAA,MAAA;AAEI,UAAAC,IAAAP,EAAA,MAAA,UAAA,CAAA;AAEA,IADAA,EAAA,MAAA,iBAAA,IAAAO,OAAA,EACA,QAAA,CAAAC,GAAAC,MAAA;AACI,MAAAD,EAAA,UAAA,IAAA,GAAAD,MAAAF,EAAA,MAAAI,CAAA,KAAA,OAAA;AAAA,IAAyE,CAAA;AAAA,EAC5E,CAAA;AAET,GCoCIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAzBAC,IAAAC,EAAA,IAAA;AACA,WAAAd,EAAAF,EAAAJ,GAAA,QAAA,GAAAmB,CAAA;;;;;;;;;;;;;;;;qBCoCAE,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;iBAvDA3B,IAAAC,EAAA,GAyBA2B,IAAAvB,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACA6B,IAAAxB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/header.js

@@ -1,14 +1,14 @@
 import { defineComponent as E, computed as T } from "vue";
 import { BentoInfoIcon as A } from "./info-icon.js";
 import { u as C } from "./chunks/use-has-slot.068222e6.js";
-import { B as U, a as v, b as D } from "./chunks/index.175f9e2d.js";
+import { B as U, a as v, b as D } from "./chunks/index.56858f4e.js";
 import { u as X } from "./chunks/i18n.155748d6.js";
 import { c as p, a as B } from "./chunks/index.86453263.js";
 import { r as u, t as s, e as _, g as b, d as H, f as P } from "./chunks/index.f55fdc32.js";
 import { e as R } from "./chunks/index.fdf12170.js";
-import { B as Y } from "./chunks/button-actions.cf73ed47.js";
+import { B as Y } from "./chunks/button-actions.bd397c79.js";
 import { n as w } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index30.css";
+import "./assets/index16.css";
 function F(t, e) {
   u(2, arguments);
   var a = s(t), n = s(e), f = a.getFullYear() - n.getFullYear(), r = a.getMonth() - n.getMonth();

package/dist/index.js

@@ -1,61 +1,63 @@
 var B = Object.defineProperty;
 var i = (t, e, o) => e in t ? B(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
-var n = (t, e, o) => (i(t, typeof e != "symbol" ? e + "" : e, o), o);
+var r = (t, e, o) => (i(t, typeof e != "symbol" ? e + "" : e, o), o);
 import "./chunks/index.af05ced4.js";
 import { reactive as m } from "vue";
 import { g as s } from "./chunks/unique-id.a2a2b458.js";
-import { BentoAlert as T, BentoAlertEvent as S, BentoAlertTypeOption as h, BentoAlertVariant as D } from "./alert.js";
-import { B as b, b as E, a as I } from "./chunks/button.c27a7ce2.js";
-import { BentoColumnOverflow as P, BentoDataGrid as k, BentoDatagridAriaSortValue as w, BentoDatagridEvent as F, BentoDatagridSortDirection as G, BentoDatagridStyleState as V } from "./data-grid.js";
+import { BentoAlert as C, BentoAlertEvent as S, BentoAlertTypeOption as h, BentoAlertVariant as D } from "./alert.js";
+import { B as b, b as E, a as L } from "./chunks/button.d0c9527d.js";
+import { BentoColumnOverflow as P, BentoDataGrid as F, BentoDatagridAriaSortValue as k, BentoDatagridEvent as G, BentoDatagridSortDirection as w, BentoDatagridStyleState as V } from "./data-grid.js";
 import { BentoCard as A, BentoCardBackground as O, BentoCardTitleSize as R } from "./card.js";
 import { BentoDatePicker as N, BentoDatePickerEvent as q } from "./date-picker.js";
-import { B as U, a as K } from "./chunks/index.f0d99471.js";
-import { B as Y, u as H } from "./chunks/dropdown.368486b1.js";
+import { B as U, a as K } from "./chunks/index.10aaf539.js";
+import { B as Y, u as H } from "./chunks/dropdown.c05678d0.js";
 import { BentoDropdownAvatar as j, BentoDropdownCountry as J, BentoDropdownCurrency as Q, BentoDropdownPaymentMethod as X, BentoDropdownTag as Z } from "./dropdown.js";
-import { B as te, b as oe, a as re } from "./chunks/checkbox.c06daf12.js";
+import { B as te, b as oe, a as ne } from "./chunks/checkbox.f8457c93.js";
 import { BentoClickOutside as ae } from "./click-outside.js";
 import { BentoCodeSnippet as ie, BentoCodeSnippetEvent as me, BentoCodeSnippetSupportedLanguage as se, BentoCodeSnippetVariant as pe } from "./code-snippet.js";
-import { BentoCountry as de, BentoCountryCode as le, BentoCountryVariant as fe, useCountryCapital as xe, useCountryFlag as ce, useCountryName as ye, useCountryPhoneCode as ge } from "./country.js";
-import { BentoCurrency as Te, BentoCurrencyISOCode as Se } from "./currency.js";
-import { B as De, a as ve } from "./chunks/index.d07f9800.js";
-import { BentoDivider as Ee } from "./divider.js";
-import { BentoFilterBar as Le, BentoFilterBarEvent as Pe, BentoFilterEvent as ke, BentoFilterItemType as we } from "./filter-bar.js";
-import { BentoInfoIcon as Ge } from "./info-icon.js";
-import { BentoInputField as Me, BentoInputFieldElementPosition as Ae, BentoInputFieldEvent as Oe, BentoInputFieldStateClass as Re, BentoInputFieldType as _e, BentoInputFieldVariant as Ne } from "./input-field.js";
-import { BentoLoadingIndicator as ze, BentoLoadingIndicatorEvent as Ue } from "./loading-indicator.js";
-import { BentoLink as We, BentoLinkVariant as Ye } from "./link.js";
-import { BentoMenu as $e, BentoMenuEvent as je } from "./menu.js";
-import { BentoModal as Qe, BentoModalColumnLayoutVariant as Xe, BentoModalDialogType as Ze, BentoModalEvent as et, BentoModalRole as tt, BentoModalSize as ot, BentoModalVariant as rt } from "./modal.js";
-import { BentoHeader as at } from "./header.js";
-import { BentoPagination as it } from "./pagination.js";
-import { BentoPaymentMethod as st, BentoPaymentMethodType as pt } from "./payment-method.js";
-import { BentoPopover as dt, BentoPopoverPositions as lt } from "./popover.js";
-import { BentoRadioGroup as xt, BentoRadioGroupVariant as ct } from "./radio-group.js";
-import { BentoSearchBar as gt, BentoSearchBarEvent as Ct, BentoSearchBarInternalEvent as Tt } from "./search-bar.js";
-import { BentoSegmentedControl as ht, BentoSegmentedControlEvent as Dt } from "./segmented-control.js";
-import { BentoStatus as bt, BentoStatusVariant as Et } from "./status.js";
-import { B as Lt, a as Pt } from "./chunks/index.3b6fc08a.js";
-import { BentoSummaryGrid as wt, BentoSummaryGridItemAmount as Ft, BentoSummaryGridItemCustom as Gt, BentoSummaryGridItemNumeric as Vt, BentoSummaryGridItemPercentage as Mt, BentoSummaryGridItemSize as At, BentoSummaryGridItemText as Ot, BentoSummaryGridItemTrendDirection as Rt } from "./summary-grid.js";
-import { BentoTab as Nt, BentoTabs as qt } from "./tabs.js";
-import { BentoTag as Ut, BentoTagVariant as Kt } from "./tag.js";
-import { BentoTextarea as Yt } from "./textarea.js";
-import { BentoTimeline as $t, BentoTimelineGapUnit as jt, BentoTimelineItem as Jt, BentoTimelineItemVariant as Qt, BentoTimelineShowMorePlacement as Xt } from "./timeline.js";
-import { BentoToast as eo } from "./toast.js";
-import { u as oo } from "./chunks/toastController.0e01443d.js";
-import { BentoToggle as no, BentoToggleLabelPosition as ao, BentoTogglePropClass as Bo } from "./toggle.js";
-import { B as mo, a as so, c as po, b as uo } from "./chunks/index.175f9e2d.js";
-import { B as fo, c as xo, a as co, b as yo } from "./chunks/button-actions.cf73ed47.js";
-import { B as Co, a as To } from "./chunks/loading-button.6d34f66f.js";
-import { b as ho, b as Do } from "./chunks/calendar.8f50a65a.js";
-import { BentoCheckboxGroup as bo, BentoCheckboxGroupVariant as Eo } from "./checkbox.js";
-import { D as Lo } from "./chunks/date-input.9186a0bf.js";
-import { a as ko, B as wo } from "./chunks/debounce.f8d92e44.js";
-import { a as Go, b as Vo } from "./chunks/listbox.f51e92cd.js";
-import { B as Ao } from "./chunks/directive.0408e565.js";
-import { b as Ro, B as _o, a as No } from "./chunks/tooltip.9af34fba.js";
+import { BentoCountry as ue, BentoCountryCode as le, BentoCountryVariant as fe, useCountryCapital as xe, useCountryName as ye, useCountryPhoneCode as ce } from "./country.js";
+import { BentoCurrency as Te, BentoCurrencyISOCode as Ce } from "./currency.js";
+import { B as he, a as De } from "./chunks/index.73d50fa6.js";
+import { BentoDivider as be } from "./divider.js";
+import { BentoFilterBar as Le, BentoFilterBarEvent as Ie, BentoFilterEvent as Pe, BentoFilterItemType as Fe } from "./filter-bar.js";
+import { BentoFormLayout as Ge, BentoFormLayoutFieldTip as we, BentoFormLayoutGroup as Ve, BentoFormLayoutTitle as Me } from "./form-layout.js";
+import { BentoInfoIcon as Oe } from "./info-icon.js";
+import { BentoInputField as _e, BentoInputFieldElementPosition as Ne, BentoInputFieldEvent as qe, BentoInputFieldStateClass as ze, BentoInputFieldType as Ue, BentoInputFieldVariant as Ke } from "./input-field.js";
+import { BentoLoadingIndicator as Ye, BentoLoadingIndicatorEvent as He } from "./loading-indicator.js";
+import { BentoLink as je, BentoLinkVariant as Je } from "./link.js";
+import { BentoMenu as Xe, BentoMenuEvent as Ze } from "./menu.js";
+import { BentoModal as tt, BentoModalColumnLayoutVariant as ot, BentoModalDialogType as nt, BentoModalEvent as rt, BentoModalRole as at, BentoModalSize as Bt, BentoModalVariant as it } from "./modal.js";
+import { BentoHeader as st } from "./header.js";
+import { BentoPagination as dt } from "./pagination.js";
+import { BentoPaymentMethod as lt, BentoPaymentMethodType as ft } from "./payment-method.js";
+import { BentoPopover as yt, BentoPopoverPositions as ct } from "./popover.js";
+import { BentoRadioGroup as Tt, BentoRadioGroupVariant as Ct } from "./radio-group.js";
+import { BentoSearchBar as ht, BentoSearchBarEvent as Dt, BentoSearchBarInternalEvent as vt } from "./search-bar.js";
+import { BentoSegmentedControl as Et, BentoSegmentedControlEvent as Lt } from "./segmented-control.js";
+import { BentoSidepanel as Pt, BentoSidepanelAnimation as Ft, BentoSidepanelEvent as kt, BentoSidepanelPage as Gt } from "./sidepanel.js";
+import { BentoStatus as Vt, BentoStatusVariant as Mt } from "./status.js";
+import { B as Ot, a as Rt } from "./chunks/index.0cf00b47.js";
+import { BentoSummaryGrid as Nt, BentoSummaryGridItemAmount as qt, BentoSummaryGridItemCustom as zt, BentoSummaryGridItemNumeric as Ut, BentoSummaryGridItemPercentage as Kt, BentoSummaryGridItemSize as Wt, BentoSummaryGridItemText as Yt, BentoSummaryGridItemTrendDirection as Ht } from "./summary-grid.js";
+import { BentoTab as jt, BentoTabs as Jt } from "./tabs.js";
+import { BentoTag as Xt, BentoTagVariant as Zt } from "./tag.js";
+import { BentoTextarea as to } from "./textarea.js";
+import { BentoTimeline as no, BentoTimelineGapUnit as ro, BentoTimelineItem as ao, BentoTimelineItemVariant as Bo, BentoTimelineShowMorePlacement as io } from "./timeline.js";
+import { BentoToast as so } from "./toast.js";
+import { u as uo } from "./chunks/toastController.0e01443d.js";
+import { BentoToggle as fo, BentoToggleLabelPosition as xo, BentoTogglePropClass as yo } from "./toggle.js";
+import { B as go, a as To, c as Co, b as So } from "./chunks/index.56858f4e.js";
+import { B as Do, c as vo, a as bo, b as Eo } from "./chunks/button-actions.bd397c79.js";
+import { B as Io, a as Po } from "./chunks/loading-button.1c201f87.js";
+import { b as ko, b as Go } from "./chunks/calendar.0ae43a96.js";
+import { BentoCheckboxGroup as Vo, BentoCheckboxGroupVariant as Mo } from "./checkbox.js";
+import { D as Oo } from "./chunks/date-input.9186a0bf.js";
+import { a as _o, B as No } from "./chunks/debounce.f8d92e44.js";
+import { a as zo, b as Uo } from "./chunks/listbox.116ed0c1.js";
+import { B as Wo } from "./chunks/directive.0408e565.js";
+import { b as Ho, B as $o, a as jo } from "./chunks/tooltip.2aff4fa6.js";
 class p {
   constructor() {
-    n(this, "_state");
+    r(this, "_state");
     this._state = m({ queue: [] });
   }
   get state() {
@@ -65,20 +67,20 @@ class p {
     this._state.queue.splice(this._state.queue.indexOf(e), 1);
   }
   addToast(e) {
-    const o = s("toast"), r = {
+    const o = s("toast"), n = {
       ...e,
       id: o,
-      dismiss: () => this.dismissToast(r)
+      dismiss: () => this.dismissToast(n)
     };
-    return this._state.queue.push(r), {
-      dismiss: () => this.dismissToast(r)
+    return this._state.queue.push(n), {
+      dismiss: () => this.dismissToast(n)
     };
   }
 }
-var u = /* @__PURE__ */ ((t) => (t.LEGACY = "b-legacy-theme", t.STYLEGUIDE = "b-styleguide-theme", t.BENTO = "", t))(u || {});
+var d = /* @__PURE__ */ ((t) => (t.LEGACY = "b-legacy-theme", t.STYLEGUIDE = "b-styleguide-theme", t.BENTO = "", t))(d || {});
 const a = (t) => {
   document.body.classList.add(t);
-}, d = {
+}, u = {
   install: async (t, e) => {
     e != null && e.withToast && (t.prototype.$bentoToastController = new p()), (e == null ? void 0 : e.theme) === "b-legacy-theme" ? (a(
       "b-legacy-theme"
@@ -88,53 +90,53 @@ const a = (t) => {
       /* 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"), e != null && e.withUtilityClasses && await import("@adyen/bento-design-tokens/dist/css/bento/utility.css?used");
   }
-}, y = d;
+}, c = u;
 export {
-  T as BentoAlert,
+  C as BentoAlert,
   S as BentoAlertEvent,
   h as BentoAlertTypeOption,
   D as BentoAlertVariant,
   b as BentoButton,
-  fo as BentoButtonActions,
-  xo as BentoButtonActionsLayout,
-  co as BentoButtonActionsLayoutBasic,
-  yo as BentoButtonActionsLayoutExtended,
+  Do as BentoButtonActions,
+  vo as BentoButtonActionsLayout,
+  bo as BentoButtonActionsLayoutBasic,
+  Eo as BentoButtonActionsLayoutExtended,
   E as BentoButtonPropClass,
-  I as BentoButtonVariant,
+  L as BentoButtonVariant,
   A as BentoCard,
   O as BentoCardBackground,
   R as BentoCardTitleSize,
   te as BentoCheckbox,
   oe as BentoCheckboxEvent,
-  bo as BentoCheckboxGroup,
-  Eo as BentoCheckboxGroupVariant,
-  re as BentoCheckboxState,
+  Vo as BentoCheckboxGroup,
+  Mo as BentoCheckboxGroupVariant,
+  ne as BentoCheckboxState,
   ae as BentoClickOutside,
-  Ao as BentoClickOutsideDirective,
+  Wo as BentoClickOutsideDirective,
   ie as BentoCodeSnippet,
   me as BentoCodeSnippetEvent,
   se as BentoCodeSnippetSupportedLanguage,
   pe as BentoCodeSnippetVariant,
   P as BentoColumnOverflow,
-  de as BentoCountry,
+  ue as BentoCountry,
   le as BentoCountryCode,
   fe as BentoCountryVariant,
   Te as BentoCurrency,
-  Se as BentoCurrencyISOCode,
-  k as BentoDataGrid,
-  w as BentoDatagridAriaSortValue,
-  F as BentoDatagridEvent,
-  G as BentoDatagridSortDirection,
+  Ce as BentoCurrencyISOCode,
+  F as BentoDataGrid,
+  k as BentoDatagridAriaSortValue,
+  G as BentoDatagridEvent,
+  w as BentoDatagridSortDirection,
   V as BentoDatagridStyleState,
-  De as BentoDate,
-  ve as BentoDateFormat,
+  he as BentoDate,
+  De as BentoDateFormat,
   N as BentoDatePicker,
   q as BentoDatePickerEvent,
-  ho as BentoDatePickerFirstDayOfWeek,
+  ko as BentoDatePickerFirstDayOfWeek,
   U as BentoDateRangePicker,
   K as BentoDateRangePickerEvent,
-  Do as BentoDateRangePickerFirstDayOfWeek,
-  Ee as BentoDivider,
+  Go as BentoDateRangePickerFirstDayOfWeek,
+  be as BentoDivider,
   Y as BentoDropdown,
   j as BentoDropdownAvatar,
   J as BentoDropdownCountry,
@@ -142,89 +144,96 @@ export {
   X as BentoDropdownPaymentMethod,
   Z as BentoDropdownTag,
   Le as BentoFilterBar,
-  Pe as BentoFilterBarEvent,
-  ke as BentoFilterEvent,
-  we as BentoFilterItemType,
-  at as BentoHeader,
-  Ge as BentoInfoIcon,
-  Me as BentoInputField,
-  Ae as BentoInputFieldElementPosition,
-  Oe as BentoInputFieldEvent,
-  Re as BentoInputFieldStateClass,
-  _e as BentoInputFieldType,
-  Ne as BentoInputFieldVariant,
-  ko as BentoKeyboardNavigationDirective,
-  wo as BentoKeyboardNavigationKeyDownEvent,
-  We as BentoLink,
-  Ye as BentoLinkVariant,
-  Go as BentoListboxEvent,
-  Vo as BentoListboxLazyLoadType,
-  Co as BentoLoadingButton,
-  To as BentoLoadingButtonState,
-  ze as BentoLoadingIndicator,
-  Ue as BentoLoadingIndicatorEvent,
-  $e as BentoMenu,
-  je as BentoMenuEvent,
-  Qe as BentoModal,
-  Xe as BentoModalColumnLayoutVariant,
-  Ze as BentoModalDialogType,
-  et as BentoModalEvent,
-  tt as BentoModalRole,
-  ot as BentoModalSize,
-  rt as BentoModalVariant,
-  it as BentoPagination,
-  st as BentoPaymentMethod,
-  pt as BentoPaymentMethodType,
-  dt as BentoPopover,
-  lt as BentoPopoverPositions,
-  xt as BentoRadioGroup,
-  ct as BentoRadioGroupVariant,
-  gt as BentoSearchBar,
-  Ct as BentoSearchBarEvent,
-  Tt as BentoSearchBarInternalEvent,
-  ht as BentoSegmentedControl,
-  Dt as BentoSegmentedControlEvent,
-  bt as BentoStatus,
-  Et as BentoStatusVariant,
-  Lt as BentoStructuredList,
-  Pt as BentoStructuredListItem,
-  wt as BentoSummaryGrid,
-  Ft as BentoSummaryGridItemAmount,
-  Gt as BentoSummaryGridItemCustom,
-  Vt as BentoSummaryGridItemNumeric,
-  Mt as BentoSummaryGridItemPercentage,
-  At as BentoSummaryGridItemSize,
-  Ot as BentoSummaryGridItemText,
-  Rt as BentoSummaryGridItemTrendDirection,
-  Nt as BentoTab,
-  qt as BentoTabs,
-  Ut as BentoTag,
-  Kt as BentoTagVariant,
-  Yt as BentoTextarea,
-  u as BentoTheme,
-  $t as BentoTimeline,
-  jt as BentoTimelineGapUnit,
-  Jt as BentoTimelineItem,
-  Qt as BentoTimelineItemVariant,
-  Xt as BentoTimelineShowMorePlacement,
-  eo as BentoToast,
-  no as BentoToggle,
-  ao as BentoToggleLabelPosition,
-  Bo as BentoTogglePropClass,
-  Ro as BentoTooltipDirective,
-  _o as BentoTooltipPosition,
-  No as BentoTooltipState,
-  mo as BentoTypography,
-  so as BentoTypographyElement,
-  po as BentoTypographyModifier,
-  uo as BentoTypographyVariant,
-  Lo as DateFormat,
-  y as default,
-  oo as useBentoToastController,
+  Ie as BentoFilterBarEvent,
+  Pe as BentoFilterEvent,
+  Fe as BentoFilterItemType,
+  Ge as BentoFormLayout,
+  we as BentoFormLayoutFieldTip,
+  Ve as BentoFormLayoutGroup,
+  Me as BentoFormLayoutTitle,
+  st as BentoHeader,
+  Oe as BentoInfoIcon,
+  _e as BentoInputField,
+  Ne as BentoInputFieldElementPosition,
+  qe as BentoInputFieldEvent,
+  ze as BentoInputFieldStateClass,
+  Ue as BentoInputFieldType,
+  Ke as BentoInputFieldVariant,
+  _o as BentoKeyboardNavigationDirective,
+  No as BentoKeyboardNavigationKeyDownEvent,
+  je as BentoLink,
+  Je as BentoLinkVariant,
+  zo as BentoListboxEvent,
+  Uo as BentoListboxLazyLoadType,
+  Io as BentoLoadingButton,
+  Po as BentoLoadingButtonState,
+  Ye as BentoLoadingIndicator,
+  He as BentoLoadingIndicatorEvent,
+  Xe as BentoMenu,
+  Ze as BentoMenuEvent,
+  tt as BentoModal,
+  ot as BentoModalColumnLayoutVariant,
+  nt as BentoModalDialogType,
+  rt as BentoModalEvent,
+  at as BentoModalRole,
+  Bt as BentoModalSize,
+  it as BentoModalVariant,
+  dt as BentoPagination,
+  lt as BentoPaymentMethod,
+  ft as BentoPaymentMethodType,
+  yt as BentoPopover,
+  ct as BentoPopoverPositions,
+  Tt as BentoRadioGroup,
+  Ct as BentoRadioGroupVariant,
+  ht as BentoSearchBar,
+  Dt as BentoSearchBarEvent,
+  vt as BentoSearchBarInternalEvent,
+  Et as BentoSegmentedControl,
+  Lt as BentoSegmentedControlEvent,
+  Pt as BentoSidepanel,
+  Ft as BentoSidepanelAnimation,
+  kt as BentoSidepanelEvent,
+  Gt as BentoSidepanelPage,
+  Vt as BentoStatus,
+  Mt as BentoStatusVariant,
+  Ot as BentoStructuredList,
+  Rt as BentoStructuredListItem,
+  Nt as BentoSummaryGrid,
+  qt as BentoSummaryGridItemAmount,
+  zt as BentoSummaryGridItemCustom,
+  Ut as BentoSummaryGridItemNumeric,
+  Kt as BentoSummaryGridItemPercentage,
+  Wt as BentoSummaryGridItemSize,
+  Yt as BentoSummaryGridItemText,
+  Ht as BentoSummaryGridItemTrendDirection,
+  jt as BentoTab,
+  Jt as BentoTabs,
+  Xt as BentoTag,
+  Zt as BentoTagVariant,
+  to as BentoTextarea,
+  d as BentoTheme,
+  no as BentoTimeline,
+  ro as BentoTimelineGapUnit,
+  ao as BentoTimelineItem,
+  Bo as BentoTimelineItemVariant,
+  io as BentoTimelineShowMorePlacement,
+  so as BentoToast,
+  fo as BentoToggle,
+  xo as BentoToggleLabelPosition,
+  yo as BentoTogglePropClass,
+  Ho as BentoTooltipDirective,
+  $o as BentoTooltipPosition,
+  jo as BentoTooltipState,
+  go as BentoTypography,
+  To as BentoTypographyElement,
+  Co as BentoTypographyModifier,
+  So as BentoTypographyVariant,
+  Oo as DateFormat,
+  c as default,
+  uo as useBentoToastController,
   xe as useCountryCapital,
-  ce as useCountryFlag,
   ye as useCountryName,
-  ge as useCountryPhoneCode,
+  ce as useCountryPhoneCode,
   H as useSearchBarFilter
 };
 //# sourceMappingURL=index.js.map