@adyen/bento-vue2 1.3.0 → 1.4.0

package/dist/focus-trap.js

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

package/dist/form-layout.js

@@ -1,12 +1,12 @@
-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 { defineComponent as _, useSlots as i, computed as n, provide as y, toRef as f, onMounted as v, ref as g } from "vue";
+import { BentoAlert as p } from "./alert.js";
+import { u as m } from "./chunks/use-has-slot.6052d56a.js";
+import { F as b } from "./chunks/form-layout.types.a7a1438d.js";
 import { n as l } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as u, a as i, b } from "./chunks/index.56858f4e.js";
-import "./assets/index12.css";
-const C = {}, $ = /* @__PURE__ */ _({
-  ...C,
+import { B as u, c as L } from "./chunks/index.45295dd3.js";
+import "./assets/index23.css";
+const h = {}, $ = /* @__PURE__ */ _({
+  ...h,
   __name: "form-layout",
   props: {
     /**
@@ -19,61 +19,61 @@ const C = {}, $ = /* @__PURE__ */ _({
      */
     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 };
+  setup(o) {
+    const t = o, e = i(), s = m(e), r = n(() => t.form ? "form" : "div"), a = n(() => s("actions-left") || s("actions-right"));
+    return y(b, f(t, "loading")), { __sfc: !0, slots: e, hasSlot: s, props: t, formLayoutElement: r, hasActions: a, BentoAlert: p };
   }
 });
-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() {
+var C = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e(s.formLayoutElement, { tag: "component", staticClass: "b-form-layout", attrs: { role: "form" } }, [s.hasSlot("error-message") ? e(s.BentoAlert, { staticClass: "b-form-layout__error-message", attrs: { type: "critical" }, scopedSlots: t._u([{ key: "description", fn: function() {
     return [t._t("error-message")];
-  }, proxy: !0 }], null, !0) }) : t._e(), t._t("default"), 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(
+  }, proxy: !0 }], null, !0) }) : t._e(), t._t("default"), s.hasActions ? e("div", { staticClass: "b-form-layout__actions-container" }, [e("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-left")], 2), e("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-right")], 2)]) : t._e()], 2);
+}, x = [], B = /* @__PURE__ */ l(
   $,
-  A,
+  C,
   x,
   !1,
   null,
-  "27615954",
+  "178aebc7",
   null,
   null
 );
-const Q = F.exports, S = {}, I = /* @__PURE__ */ _({
-  ...S,
+const U = B.exports, F = {}, S = /* @__PURE__ */ _({
+  ...F,
   __name: "form-layout-field-tip",
-  setup(s) {
-    return { __sfc: !0, BentoAlert: m, BentoAlertTypeOption: y, BentoAlertVariant: h };
+  setup(o) {
+    return { __sfc: !0, BentoAlert: p };
   }
 });
-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() {
+var T = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e("div", { staticClass: "b-form-layout-field-tip" }, [t._t("default"), e(s.BentoAlert, { attrs: { variant: "tip", type: "warning" }, scopedSlots: t._u([{ key: "description", fn: function() {
     return [t._t("message")];
   }, proxy: !0 }], null, !0) })], 2);
-}, O = [], G = /* @__PURE__ */ l(
-  I,
-  E,
-  O,
+}, A = [], E = /* @__PURE__ */ l(
+  S,
+  T,
+  A,
   !1,
   null,
-  "4e29ff60",
+  "f5604b8a",
   null,
   null
 );
-const X = G.exports, N = (s, t) => {
+const V = E.exports, G = (o, 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(() => {
+    var a;
+    return (a = r.split) == null ? void 0 : a.call(r, "-").map((c) => parseInt(c, 10));
+  }, s = n(() => e(o.value));
+  v(() => {
     const r = t.value.classList[0];
-    t.value.querySelectorAll(`.${r} > *`).forEach((c, v) => {
-      c.classList.add(`${r}--${o.value[v] || "100"}`);
+    t.value.querySelectorAll(`.${r} > *`).forEach((c, d) => {
+      c.classList.add(`${r}--${s.value[d] || "100"}`);
     });
   });
-}, P = {}, R = /* @__PURE__ */ _({
-  ...P,
+}, O = {}, P = /* @__PURE__ */ _({
+  ...O,
   __name: "form-layout-group",
   props: {
     /**
@@ -103,26 +103,26 @@ const X = G.exports, N = (s, t) => {
       default: "100"
     }
   },
-  setup(s) {
-    const t = s, e = L(null);
-    return N(p(t, "layout"), e), { __sfc: !0, props: t, formLayoutGroup: e };
+  setup(o) {
+    const t = o, e = g(null);
+    return G(f(t, "layout"), e), { __sfc: !0, props: t, formLayoutGroup: e };
   }
 });
-var V = function() {
+var R = 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(
+}, I = [], N = /* @__PURE__ */ l(
+  P,
   R,
-  V,
-  k,
+  I,
   !1,
   null,
   "4153ff3c",
   null,
   null
 );
-const Z = q.exports, M = {}, Y = /* @__PURE__ */ _({
-  ...M,
+const Q = N.exports, k = {}, q = /* @__PURE__ */ _({
+  ...k,
   __name: "form-layout-title",
   props: {
     /**
@@ -141,34 +141,34 @@ const Z = q.exports, M = {}, Y = /* @__PURE__ */ _({
     el: {
       type: u.props.el.type,
       required: !0,
-      validator: (s) => Object.values(i).includes(s)
+      validator: (o) => Object.values(L).includes(o)
     }
   },
-  setup(s) {
-    const t = s, e = f(), o = a(() => !t.subsection), r = d(e), n = a(() => ({
+  setup(o) {
+    const t = o, e = i(), s = n(() => !t.subsection), r = m(e), a = n(() => ({
       "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 };
+    return { __sfc: !0, slots: e, props: t, isSection: s, hasSlot: r, conditionalClasses: a, BentoTypography: u };
   }
 });
-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,
+var w = function() {
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e("div", { staticClass: "b-form-layout-title", class: s.conditionalClasses }, [e(s.BentoTypography, { attrs: { el: t.el, variant: "title", medium: s.isSection } }, [t._t("default")], 2), s.hasSlot("description") ? e(s.BentoTypography, { staticClass: "b-form-layout-title__description", attrs: { el: "span", wide: "" } }, [t._t("description")], 2) : t._e()], 1);
+}, M = [], Y = /* @__PURE__ */ l(
+  q,
   w,
+  M,
   !1,
   null,
-  "3a056bf8",
+  "03648a9d",
   null,
   null
 );
-const tt = z.exports;
+const W = Y.exports;
 export {
-  Q as BentoFormLayout,
-  X as BentoFormLayoutFieldTip,
-  Z as BentoFormLayoutGroup,
-  tt as BentoFormLayoutTitle
+  U as BentoFormLayout,
+  V as BentoFormLayoutFieldTip,
+  Q as BentoFormLayoutGroup,
+  W as BentoFormLayoutTitle
 };
 //# sourceMappingURL=form-layout.js.map

package/dist/form-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-layout.js","sources":["../src/components/form-layout/form-layout.vue","../src/components/form-layout/components/form-layout-field-tip/form-layout-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;;;;;;;;;;;;;;;;;;"}
+{"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 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","<template>\n    <div class=\"b-form-layout-field-tip\">\n        <slot />\n        <bento-alert variant=\"tip\" type=\"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 } 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=\"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","__default__$2","useFormLayoutGroupPercentage","layoutProp","formLayoutGroupRef","getLayoutValues","layout2","_a","value","layout","onMounted","layoutClassName","child","index","__default__$1","formLayoutGroup","ref","__default__","isSection","conditionalClasses"],"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;;;;;;;;;;;;;;;;;;qBCTAK,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;;;;;;;;;;;;;;;;qBC+BAE,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,23 +1,23 @@
-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.56858f4e.js";
+import { defineComponent as O, computed as M } from "vue";
+import { BentoInfoIcon as E } from "./info-icon.js";
+import { u as A } from "./chunks/use-has-slot.6052d56a.js";
+import { B as C, c as T, a as U } from "./chunks/index.45295dd3.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.bd397c79.js";
-import { n as w } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index16.css";
+import { c as p, a as H } from "./chunks/index.86453263.js";
+import { r as u, t as s, e as _, g as D, d as R, f as Y } from "./chunks/index.f55fdc32.js";
+import { e as w } from "./chunks/index.fdf12170.js";
+import { BentoButtonActions as P } from "./button.js";
+import { n as B } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index26.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();
-  return f * 12 + r;
+  var a = s(t), n = s(e), l = a.getFullYear() - n.getFullYear(), r = a.getMonth() - n.getMonth();
+  return l * 12 + r;
 }
 function G(t, e) {
   return u(2, arguments), s(t).getTime() - s(e).getTime();
 }
-var y = {
+var b = {
   ceil: Math.ceil,
   round: Math.round,
   floor: Math.floor,
@@ -27,7 +27,7 @@ var y = {
   // Math.trunc is not supported by IE
 }, L = "trunc";
 function z(t) {
-  return t ? y[t] : y[L];
+  return t ? b[t] : b[L];
 }
 function j(t) {
   u(1, arguments);
@@ -37,81 +37,81 @@ function j(t) {
 function q(t) {
   u(1, arguments);
   var e = s(t);
-  return R(e).getTime() === j(e).getTime();
+  return w(e).getTime() === j(e).getTime();
 }
-function V(t, e) {
+function W(t, e) {
   u(2, arguments);
-  var a = s(t), n = s(e), f = p(a, n), r = Math.abs(F(a, n)), i;
+  var a = s(t), n = s(e), l = p(a, n), r = Math.abs(F(a, n)), i;
   if (r < 1)
     i = 0;
   else {
-    a.getMonth() === 1 && a.getDate() > 27 && a.setDate(30), a.setMonth(a.getMonth() - f * r);
-    var l = p(a, n) === -f;
-    q(s(t)) && r === 1 && p(t, n) === 1 && (l = !1), i = f * (r - Number(l));
+    a.getMonth() === 1 && a.getDate() > 27 && a.setDate(30), a.setMonth(a.getMonth() - l * r);
+    var f = p(a, n) === -l;
+    q(s(t)) && r === 1 && p(t, n) === 1 && (f = !1), i = l * (r - Number(f));
   }
   return i === 0 ? 0 : i;
 }
-function W(t, e, a) {
+function k(t, e, a) {
   u(2, arguments);
   var n = G(t, e) / 1e3;
   return z(a == null ? void 0 : a.roundingMethod)(n);
 }
-var I = 1440, k = 2520, g = 43200, J = 86400;
-function K(t, e) {
+var y = 1440, J = 2520, h = 43200, K = 86400;
+function Q(t, e) {
   var a = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
   u(2, arguments);
   var n = a.locale || _;
   if (!n.formatDistance)
     throw new RangeError("locale must contain formatDistance property");
-  var f = p(t, e);
-  if (isNaN(f))
+  var l = p(t, e);
+  if (isNaN(l))
     throw new RangeError("Invalid time value");
-  var r = B(a);
-  r.addSuffix = !!a.addSuffix, r.comparison = f;
-  var i, l;
-  f > 0 ? (i = s(e), l = s(t)) : (i = s(t), l = s(e));
-  var c = W(l, i), S = (b(l) - b(i)) / 1e3, o = Math.round((c - S) / 60), d;
+  var r = H(a);
+  r.addSuffix = !!a.addSuffix, r.comparison = l;
+  var i, f;
+  l > 0 ? (i = s(e), f = s(t)) : (i = s(t), f = s(e));
+  var c = k(f, i), I = (D(f) - D(i)) / 1e3, o = Math.round((c - I) / 60), d;
   if (o < 2)
     return a.includeSeconds ? c < 5 ? n.formatDistance("lessThanXSeconds", 5, r) : c < 10 ? n.formatDistance("lessThanXSeconds", 10, r) : c < 20 ? n.formatDistance("lessThanXSeconds", 20, r) : c < 40 ? n.formatDistance("halfAMinute", null, r) : c < 60 ? n.formatDistance("lessThanXMinutes", 1, r) : n.formatDistance("xMinutes", 1, r) : o === 0 ? n.formatDistance("lessThanXMinutes", 1, r) : n.formatDistance("xMinutes", o, r);
   if (o < 45)
     return n.formatDistance("xMinutes", o, r);
   if (o < 90)
     return n.formatDistance("aboutXHours", 1, r);
-  if (o < I) {
-    var N = Math.round(o / 60);
-    return n.formatDistance("aboutXHours", N, r);
+  if (o < y) {
+    var S = Math.round(o / 60);
+    return n.formatDistance("aboutXHours", S, r);
   } else {
-    if (o < k)
+    if (o < J)
       return n.formatDistance("xDays", 1, r);
-    if (o < g) {
-      var x = Math.round(o / I);
-      return n.formatDistance("xDays", x, r);
-    } else if (o < J)
-      return d = Math.round(o / g), n.formatDistance("aboutXMonths", d, r);
+    if (o < h) {
+      var N = Math.round(o / y);
+      return n.formatDistance("xDays", N, r);
+    } else if (o < K)
+      return d = Math.round(o / h), n.formatDistance("aboutXMonths", d, r);
   }
-  if (d = V(l, i), d < 12) {
-    var O = Math.round(o / g);
-    return n.formatDistance("xMonths", O, r);
+  if (d = W(f, i), d < 12) {
+    var x = Math.round(o / h);
+    return n.formatDistance("xMonths", x, r);
   } else {
-    var M = d % 12, h = Math.floor(d / 12);
-    return M < 3 ? n.formatDistance("aboutXYears", h, r) : M < 9 ? n.formatDistance("overXYears", h, r) : n.formatDistance("almostXYears", h + 1, r);
+    var g = d % 12, v = Math.floor(d / 12);
+    return g < 3 ? n.formatDistance("aboutXYears", v, r) : g < 9 ? n.formatDistance("overXYears", v, r) : n.formatDistance("almostXYears", v + 1, r);
   }
 }
-function Q(t, e) {
-  return u(1, arguments), K(t, Date.now(), e);
+function V(t, e) {
+  return u(1, arguments), Q(t, Date.now(), e);
 }
 var m = /* @__PURE__ */ ((t) => (t.PAGE = "page", t.COMPONENT = "component", t))(m || {});
 const Z = {
   "en-US": {
     lastUpdated: "Last updated: {date} ago"
   }
-}, $ = E({
+}, $ = O({
   i18n: { messages: Z },
   name: "bento-header",
   components: {
-    BentoTypography: U,
-    BentoButtonActions: Y,
-    BentoInfoIcon: A
+    BentoTypography: C,
+    BentoButtonActions: P,
+    BentoInfoIcon: E
   },
   props: {
     /**
@@ -144,37 +144,35 @@ const Z = {
     lastUpdated: { type: [Date, Number], default: null }
   },
   setup(t, { slots: e }) {
-    const { t: a, locale: n } = X(), f = { de: H, enUS: _, fr: P }, r = T(() => ({
-      el: t.variant === m.PAGE ? v.H1 : v.H2,
-      variant: D.TITLE,
+    const { t: a, locale: n } = X(), l = { de: R, enUS: _, fr: Y }, r = M(() => ({
+      el: t.variant === m.PAGE ? T.H1 : T.H2,
+      variant: U.TITLE,
       medium: t.variant === m.COMPONENT,
       large: t.variant === m.PAGE
-    })), i = T(
+    })), i = M(
       () => t.lastUpdated ? a("lastUpdated", {
-        date: Q(t.lastUpdated, {
-          locale: f[n.value.substring(0, 2)] || _
+        date: V(t.lastUpdated, {
+          locale: l[n.value.substring(0, 2)] || _
         })
       }) : null
     );
     return {
-      hasSlot: C(e),
+      hasSlot: A(e),
       timestamp: i,
-      typography: r,
-      BentoTypographyElement: v,
-      BentoTypographyVariant: D
+      typography: r
     };
   }
 });
 var ee = function() {
   var e = this, a = e._self._c;
-  return e._self._setupProxy, a("div", { staticClass: "b-header" }, [a("div", { staticClass: "b-header__wrapper" }, [a("div", { staticClass: "b-header__title" }, [a("div", [a("bento-typography", e._b({ staticClass: "b-header__text" }, "bento-typography", e.typography, !1), [e._v(e._s(e.title))]), e.infoIconTooltipText ? a("bento-info-icon", { staticClass: "b-header__tooltip", attrs: { "tooltip-text": e.infoIconTooltipText } }) : e._e()], 1), e.lastUpdated ? a("bento-typography", { staticClass: "b-header__timestamp", attrs: { el: e.BentoTypographyElement.DIV, variant: e.BentoTypographyVariant.CAPTION } }, [e._v(" " + e._s(e.timestamp) + " ")]) : e._e()], 1), e.actions ? a("bento-button-actions", { staticClass: "b-header__actions", attrs: { actions: e.actions } }) : e._e()], 1)]);
-}, te = [], ae = /* @__PURE__ */ w(
+  return e._self._setupProxy, a("div", { staticClass: "b-header" }, [a("div", { staticClass: "b-header__wrapper" }, [a("div", { staticClass: "b-header__title" }, [a("div", [a("bento-typography", e._b({ staticClass: "b-header__text" }, "bento-typography", e.typography, !1), [e._v(e._s(e.title))]), e.infoIconTooltipText ? a("bento-info-icon", { staticClass: "b-header__tooltip", attrs: { "tooltip-text": e.infoIconTooltipText } }) : e._e()], 1), e.lastUpdated ? a("bento-typography", { staticClass: "b-header__timestamp", attrs: { el: "div", variant: "caption" } }, [e._v(" " + e._s(e.timestamp) + " ")]) : e._e()], 1), e.actions ? a("bento-button-actions", { staticClass: "b-header__actions", attrs: { actions: e.actions } }) : e._e()], 1)]);
+}, te = [], ae = /* @__PURE__ */ B(
   $,
   ee,
   te,
   !1,
   null,
-  "fcfb4c54",
+  "5fa92771",
   null,
   null
 );