@adyen/bento-vue2 1.94.0 → 1.95.0

package/dist/chunks/{footer-actions.BE_hrleY.js → footer-actions.CZE9dcmA.js}

@@ -1,7 +1,7 @@
 import { defineComponent as i, toRefs as r, computed as l, onMounted as c } from "vue";
 import { B as u } from "./typography.C8lPlsbD.js";
-import { b as _ } from "./button.C9b2AC9w.js";
-import { B as d } from "./button-actions.CyMKvVwN.js";
+import { b as _ } from "./button.DITA6YtS.js";
+import { B as d } from "./button-actions.D1jRC1fs.js";
 import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/footer-actions.css";
 const p = {}, g = /* @__PURE__ */ i({
@@ -93,4 +93,4 @@ const w = b.exports;
 export {
   w as F
 };
-//# sourceMappingURL=footer-actions.BE_hrleY.js.map
+//# sourceMappingURL=footer-actions.CZE9dcmA.js.map

package/dist/chunks/{footer-actions.BE_hrleY.js.map → footer-actions.CZE9dcmA.js.map}

@@ -1 +1 @@
-{"version":3,"file":"footer-actions.BE_hrleY.js","sources":["../../src/components/internal/footer-actions/footer-actions.vue"],"sourcesContent":["<template>\n    <div class=\"b-footer-actions\">\n        <div class=\"b-footer-actions__wrapper\">\n            <bento-typography v-if=\"actionsLabel\" class=\"b-footer-actions__label\" el=\"span\" variant=\"body\" stronger>\n                {{ actionsLabel }}\n            </bento-typography>\n\n            <bento-button-actions\n                v-if=\"alignedActions.leftAligned\"\n                class=\"b-footer-actions__left-group\"\n                :actions=\"alignedActions.leftAligned\"\n                layout=\"buttons-start\"\n            ></bento-button-actions>\n\n            <bento-button-actions\n                class=\"b-footer-actions__right-group\"\n                :actions=\"alignedActions.rightAligned\"\n                layout=\"buttons-end\"\n            ></bento-button-actions>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { computed, onMounted, type PropType, toRefs } from 'vue';\n    import { BentoButtonActions, type BentoButtonActionsList, BentoButtonVariant } from '@/components/button';\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const { actions, destructiveActions } = toRefs(props);\n\n    const alignedActions = computed(() => {\n        const rightAlignedButtons =\n            actions.value.length < 3 ? actions.value : actions.value.slice(0, actions.value.length - 1);\n\n        // Add red color to the 1-st Action button\n        rightAlignedButtons[0].critical = destructiveActions.value || rightAlignedButtons[0].critical;\n\n        return {\n            leftAligned:\n                actions.value.length === 3\n                    ? [\n                          {\n                              ...actions.value[actions.value.length - 1],\n                              variant: BentoButtonVariant.SECONDARY,\n                          },\n                      ]\n                    : null,\n            rightAligned: [...rightAlignedButtons],\n        };\n    });\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 3) {\n            throw new Error('Not more than 3 action buttons may be provided to Bento Modal default variant');\n        }\n\n        if (props.actionsLabel && props.actions && props.actions.length > 2) {\n            throw new Error(\n                'Not more than 2 action buttons may be provided with actions label to Bento Modal default variant'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the logic of displaying actions in default Modal and Sidepanel\n\n    * @example\n    * import { FooterActions } from '@/components/internal/footer-actions';\n    *\n    * export default {\n    *     components: { FooterActions },\n    *     template: `\n    *          <footer-actions :actions=\"BentoButtonActionsList\" actions-label=\"Label\" :destructive-actions=\"true\" />\n    *     `\n    * }\n    */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./footer-actions.scss\" />\n"],"names":["__default__","actions","destructiveActions","toRefs","props","alignedActions","computed","rightAlignedButtons","BentoButtonVariant","onMounted"],"mappings":";;;;;;AA+HI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlDA,EAAA,SAAAC,GAAA,oBAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAN,EAAA,MAAA,SAAA,IAAAA,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAA,EAAA,MAAA,SAAA,CAAA;AAIA,aAAAM,EAAA,CAAA,EAAA,WAAAL,EAAA,SAAAK,EAAA,CAAA,EAAA,UAEA;AAAA,QAAO,aAAAN,EAAA,MAAA,WAAA,IAAA;AAAA,UAGO;AAAA,YACI,GAAAA,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,YAC6C,SAAAO,EAAA;AAAA,UACb;AAAA,QAChC,IAAA;AAAA,QAEJ,cAAA,CAAA,GAAAD,CAAA;AAAA,MAC2B;AAAA,IACzC,CAAA;AAGJ,WAAAE,EAAA,MAAA;AACI,UAAAL,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,+EAAA;AAGJ,UAAAA,EAAA,gBAAAA,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"footer-actions.CZE9dcmA.js","sources":["../../src/components/internal/footer-actions/footer-actions.vue"],"sourcesContent":["<template>\n    <div class=\"b-footer-actions\">\n        <div class=\"b-footer-actions__wrapper\">\n            <bento-typography v-if=\"actionsLabel\" class=\"b-footer-actions__label\" el=\"span\" variant=\"body\" stronger>\n                {{ actionsLabel }}\n            </bento-typography>\n\n            <bento-button-actions\n                v-if=\"alignedActions.leftAligned\"\n                class=\"b-footer-actions__left-group\"\n                :actions=\"alignedActions.leftAligned\"\n                layout=\"buttons-start\"\n            ></bento-button-actions>\n\n            <bento-button-actions\n                class=\"b-footer-actions__right-group\"\n                :actions=\"alignedActions.rightAligned\"\n                layout=\"buttons-end\"\n            ></bento-button-actions>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { computed, onMounted, type PropType, toRefs } from 'vue';\n    import { BentoButtonActions, type BentoButtonActionsList, BentoButtonVariant } from '@/components/button';\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const { actions, destructiveActions } = toRefs(props);\n\n    const alignedActions = computed(() => {\n        const rightAlignedButtons =\n            actions.value.length < 3 ? actions.value : actions.value.slice(0, actions.value.length - 1);\n\n        // Add red color to the 1-st Action button\n        rightAlignedButtons[0].critical = destructiveActions.value || rightAlignedButtons[0].critical;\n\n        return {\n            leftAligned:\n                actions.value.length === 3\n                    ? [\n                          {\n                              ...actions.value[actions.value.length - 1],\n                              variant: BentoButtonVariant.SECONDARY,\n                          },\n                      ]\n                    : null,\n            rightAligned: [...rightAlignedButtons],\n        };\n    });\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 3) {\n            throw new Error('Not more than 3 action buttons may be provided to Bento Modal default variant');\n        }\n\n        if (props.actionsLabel && props.actions && props.actions.length > 2) {\n            throw new Error(\n                'Not more than 2 action buttons may be provided with actions label to Bento Modal default variant'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the logic of displaying actions in default Modal and Sidepanel\n\n    * @example\n    * import { FooterActions } from '@/components/internal/footer-actions';\n    *\n    * export default {\n    *     components: { FooterActions },\n    *     template: `\n    *          <footer-actions :actions=\"BentoButtonActionsList\" actions-label=\"Label\" :destructive-actions=\"true\" />\n    *     `\n    * }\n    */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./footer-actions.scss\" />\n"],"names":["__default__","actions","destructiveActions","toRefs","props","alignedActions","computed","rightAlignedButtons","BentoButtonVariant","onMounted"],"mappings":";;;;;;AA+HI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlDA,EAAA,SAAAC,GAAA,oBAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAN,EAAA,MAAA,SAAA,IAAAA,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAA,EAAA,MAAA,SAAA,CAAA;AAIA,aAAAM,EAAA,CAAA,EAAA,WAAAL,EAAA,SAAAK,EAAA,CAAA,EAAA,UAEA;AAAA,QAAO,aAAAN,EAAA,MAAA,WAAA,IAAA;AAAA,UAGO;AAAA,YACI,GAAAA,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,YAC6C,SAAAO,EAAA;AAAA,UACb;AAAA,QAChC,IAAA;AAAA,QAEJ,cAAA,CAAA,GAAAD,CAAA;AAAA,MAC2B;AAAA,IACzC,CAAA;AAGJ,WAAAE,EAAA,MAAA;AACI,UAAAL,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,+EAAA;AAGJ,UAAAA,EAAA,gBAAAA,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/form-layout-group.zE6TNlzD.js

@@ -0,0 +1,84 @@
+import { defineComponent as n, computed as a } from "vue";
+import { E as l } from "./error-message.CyERcfdt.js";
+import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/form-layout-group.css";
+const t = [
+  "100",
+  "50",
+  "33",
+  "25",
+  "66-33",
+  "33-66",
+  "75-25",
+  "25-75",
+  "50-50",
+  "33-33-33"
+], _ = {}, c = /* @__PURE__ */ n({
+  ..._,
+  __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 columns 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
+     * '33-33-33'
+     * '50-50'
+     * '25-75'
+     * '75-25'
+     * '33-66'
+     * '66-33'
+     * '25'
+     * '33'
+     * '50'
+     * '100'
+     */
+    layout: {
+      type: String,
+      default: "100",
+      validator: (s) => t.includes(s)
+    },
+    /**
+     * The error message to be displayed for the whole group.
+     *
+     * If set, individual error messages for all components within this group will be hidden.
+     * This is particularly useful for field pairs where a single group error is displayed.
+     */
+    errorMessage: { type: String, default: null }
+  },
+  setup(s) {
+    const o = s, r = 100, e = a(
+      () => t.includes(o.layout) ? o.layout : r
+    ), u = a(() => ({
+      // Transform into column if the layout is unsupported
+      "b-form-layout-group--column": !t.includes(o.layout),
+      // Assings the correct layout class
+      [`b-form-layout-group--${e.value}`]: !0,
+      "b-form-layout-group--group-error-messages": !!o.errorMessage
+    }));
+    return { __sfc: !0, DEFAULT_PROPORTION: r, props: o, computedLayout: e, conditionalClasses: u, ErrorMessage: l };
+  }
+});
+var m = function() {
+  var o = this, r = o._self._c, e = o._self._setupProxy;
+  return r("div", { staticClass: "b-form-layout-group", class: e.conditionalClasses }, [o._t("default"), o.errorMessage ? r(e.ErrorMessage, { staticClass: "b-form-layout-group__error-message", attrs: { "error-message": o.errorMessage } }) : o._e()], 2);
+}, i = [], f = /* @__PURE__ */ p(
+  c,
+  m,
+  i,
+  !1,
+  null,
+  "6fb88d9e"
+);
+const v = f.exports;
+export {
+  v as B
+};
+//# sourceMappingURL=form-layout-group.zE6TNlzD.js.map

package/dist/chunks/form-layout-group.zE6TNlzD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-layout-group.zE6TNlzD.js","sources":["../../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"],"sourcesContent":["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        <error-message v-if=\"!!errorMessage\" :error-message=\"errorMessage\" class=\"b-form-layout-group__error-message\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType } from 'vue';\n    import { ErrorMessage } from '@/internal';\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 columns 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         * The error message to be displayed for the whole group.\n         *\n         * If set, individual error messages for all components within this group will be hidden.\n         * This is particularly useful for field pairs where a single group error is displayed.\n         */\n        errorMessage: { type: String, default: null },\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        'b-form-layout-group--group-error-messages': !!props.errorMessage,\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"],"names":["BentoLayoutGroupProportions","__default__","DEFAULT_PROPORTION","computedLayout","computed","props","conditionalClasses"],"mappings":";;;;AAYO,MAAAA,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCkEIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5EAC,IAAA,KA0CAC,IAAAC;AAAA,MAAuB,MAAAJ,EAAA,SAAAK,EAAA,MAAA,IAAAA,EAAA,SAAAH;AAAA,IACiD,GAGxEI,IAAAF,EAAA,OAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAJ,EAAA,SAAAK,EAAA,MAAA;AAAA;AAAA,MAE0C,CAAA,wBAAAF,EAAA,KAAA,EAAA,GAAA;AAAA,MAE/B,6CAAA,CAAA,CAAAE,EAAA;AAAA,IACG,EAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/form-layout-title.CXXdsiK5.js

@@ -0,0 +1,171 @@
+import { defineComponent as n, useSlots as c, computed as i, provide as f, toRef as m } from "vue";
+import { B as p } from "./alert.B4bHCE8V.js";
+import { u } from "./use-has-slot.C9lQZ6nz.js";
+import { F as y } from "./form-layout.types.bZW9iR6_.js";
+import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as d, a as v } from "./typography.C8lPlsbD.js";
+import { u as g } from "./index.B6WW_F-J.js";
+import "../assets/form-layout-title.css";
+const h = {}, b = /* @__PURE__ */ n({
+  ...h,
+  __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 }
+  },
+  emits: ["submit"],
+  setup(o, { emit: t }) {
+    const s = o, e = c(), r = u(e), a = i(() => s.form ? "form" : "div"), l = i(() => r("actions-left") || r("actions-right"));
+    return f(y, m(s, "loading")), { __sfc: !0, slots: e, hasSlot: r, emit: t, props: s, formLayoutElement: a, hasActions: l, BentoAlert: p };
+  }
+});
+var F = function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return s(e.formLayoutElement, { tag: "component", staticClass: "b-form-layout", attrs: { role: "form" }, on: { submit: function(r) {
+    return e.emit("submit", r);
+  } } }, [e.hasSlot("error-message") ? s(e.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"), e.hasActions ? s("div", { staticClass: "b-form-layout__actions-container" }, [s("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-left")], 2), s("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-right")], 2)]) : t._e()], 2);
+}, q = [], S = /* @__PURE__ */ _(
+  b,
+  F,
+  q,
+  !1,
+  null,
+  "b895dc37"
+);
+const J = S.exports, B = ["warning", "critical", "highlight", "success"], T = {}, C = /* @__PURE__ */ n({
+  ...T,
+  __name: "form-layout-field-tip",
+  props: {
+    /**
+     * Type of a alert; set a distinctive icon and color. Defaults to highlight.
+     * @values highlight, success, critical, warning
+     */
+    type: {
+      type: String,
+      default: "highlight",
+      validator: (o) => B.includes(o)
+    },
+    /**
+     * Unique identifier to the form field. Used for accessibility.
+     */
+    id: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(o) {
+    const t = c(), s = u(t);
+    return { __sfc: !0, slots: t, hasSlot: s, BentoAlert: p };
+  }
+});
+var $ = function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return s("div", { staticClass: "b-form-layout-field-tip" }, [t._t("default"), e.hasSlot("message") ? s(e.BentoAlert, { attrs: { id: t.id, variant: "tip", type: t.type }, scopedSlots: t._u([{ key: "description", fn: function() {
+    return [t._t("message")];
+  }, proxy: !0 }], null, !0) }) : t._e()], 2);
+}, A = [], R = /* @__PURE__ */ _(
+  C,
+  $,
+  A,
+  !1,
+  null,
+  "47d36a49"
+);
+const M = R.exports, x = {
+  "de-DE": {
+    requiredFields: "Alle Felder sind erforderlich."
+  },
+  "en-GB": {
+    requiredFields: "All fields are required."
+  },
+  "en-US": {
+    requiredFields: "All fields are required."
+  },
+  "es-ES": {
+    requiredFields: "Todos los campos son obligatorios."
+  },
+  "es-MX": {
+    requiredFields: "Todos los campos son obligatorios."
+  },
+  "fr-FR": {
+    requiredFields: "Tous les champs sont obligatoires."
+  },
+  "it-IT": {
+    requiredFields: "Tutti i campi sono obbligatori."
+  },
+  "ja-JP": {
+    requiredFields: "すべてのフィールドは必須です。"
+  },
+  "pt-BR": {
+    requiredFields: "Todos os campos são obrigatórios."
+  },
+  "zh-CN": {
+    requiredFields: "所有字段均为必填项。"
+  }
+}, L = {
+  name: "bento-form-layout-title",
+  i18n: { messages: x }
+}, E = /* @__PURE__ */ n({
+  ...L,
+  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: d.props.el.type,
+      required: !0,
+      validator: (o) => Object.values(v).includes(o)
+    },
+    /**
+     * Defines if the Form Layout title displays
+     * a message indicating that all fields are required.
+     */
+    allFieldsRequired: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(o) {
+    const t = o, s = c(), { t: e } = g(), r = i(() => !t.subsection), a = u(s), l = i(() => ({
+      "b-form-layout-title--subsection": t.subsection
+    }));
+    return { __sfc: !0, slots: s, t: e, props: t, isSection: r, hasSlot: a, conditionalClasses: l, BentoTypography: d };
+  }
+});
+var O = function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return s("div", { staticClass: "b-form-layout-title", class: e.conditionalClasses }, [s(e.BentoTypography, { attrs: { el: t.el, variant: "title", medium: e.isSection } }, [t._t("default")], 2), e.hasSlot("description") || t.allFieldsRequired ? s(e.BentoTypography, { staticClass: "b-form-layout-title__description", attrs: { el: "span", wide: "" } }, [t._t("description"), t.allFieldsRequired ? [t._v(" " + t._s(e.hasSlot("description") ? ` ${e.t("requiredFields")}` : e.t("requiredFields")) + " ")] : t._e()], 2) : t._e()], 1);
+}, I = [], N = /* @__PURE__ */ _(
+  E,
+  O,
+  I,
+  !1,
+  null,
+  "8ee24e3a"
+);
+const U = N.exports;
+export {
+  M as a,
+  U as b,
+  J as f
+};
+//# sourceMappingURL=form-layout-title.CXXdsiK5.js.map

package/dist/chunks/form-layout-title.CXXdsiK5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-layout-title.CXXdsiK5.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-title/form-layout-title.vue"],"sourcesContent":["<template>\n    <component :is=\"formLayoutElement\" class=\"b-form-layout\" role=\"form\" @submit=\"emit('submit', $event)\">\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 emit = defineEmits([\"submit\"]);\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 { type 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')\" :id=\"id\" 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 { type PropType, useSlots } from 'vue';\n    import {\n        type BentoFormLayoutFieldTipTypeOption,\n        BentoFormLayoutFieldTipTypeOptions,\n    } 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         * Unique identifier to the form field. Used for accessibility.\n         */\n        id: {\n            type: String,\n            default: undefined,\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","<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\n            v-if=\"hasSlot('description') || allFieldsRequired\"\n            class=\"b-form-layout-title__description\"\n            el=\"span\"\n            wide\n        >\n            <slot name=\"description\" />\n            <template v-if=\"allFieldsRequired\">\n                {{ hasSlot('description') ? ` ${t('requiredFields')}` : t('requiredFields') }}\n            </template>\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    import { useI18n } from '@/utils/ts/i18n';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\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         * Defines if the Form Layout title displays\n         * a message indicating that all fields are required.\n         */\n        allFieldsRequired: {\n            type: Boolean,\n            default: false,\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, organize 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        name: 'bento-form-layout-title',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$2","slots","useSlots","hasSlot","useHasSlot","formLayoutElement","computed","props","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","BentoFormLayoutFieldTipTypeOptions","__default__$1","__default__","messages","t","useI18n","isSection","conditionalClasses"],"mappings":";;;;;;;;AAwFI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;iBA5DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAiBAI,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;;;;;;;;;;;;;;;;;;qBC9CGK,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,GC+DHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;AA3BA,UAAAZ,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCsDAa,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBApEAd,IAAAC,EAAA,GACA,EAAA,GAAAc,EAAA,IAAAC,EAAA,GAkCAC,IAAAZ,EAAA,MAAA,CAAAC,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAkB,IAAAb,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/header-meta.6rZdOgXD.js

@@ -0,0 +1,239 @@
+import { shallowRef as b, watch as x, defineComponent as M, ref as j, computed as h, useSlots as T } from "vue";
+import { h as R, a as P } from "./button-actions.D1jRC1fs.js";
+import { B as X } from "./popover.types.B9TXaqAt.js";
+import "./index.Cl4_42j5.js";
+import { p as z, B as y } from "./typography.C8lPlsbD.js";
+import { g as C } from "./generate-uid.NJ8tVoha.js";
+import { u as B } from "./index.B6WW_F-J.js";
+import { I as E } from "./info.CcMZ4aGg.js";
+import { u as O } from "./use-bento-delayed-hover.D4rfUUOr.js";
+import { n as S } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { u as w } from "./use-has-slot.C9lQZ6nz.js";
+import { c as F } from "./constructNow.CK0ryPil.js";
+import { t as I, d as L, n as $, k as g, j as N, o as D, p as u, g as H } from "./en-US.BK5uiAND.js";
+import { d as k } from "./differenceInMonths.CpwVtHZX.js";
+import { g as A } from "./getRoundingMethod.C3eaeGLR.js";
+import { R as Y } from "./refresh.arF7jP-l.js";
+import "../assets/header-meta.css";
+const p = /* @__PURE__ */ Object.assign({
+  "../../../node_modules/date-fns/locale/de.js": () => import("./de.pvjpUJ1o.js"),
+  "../../../node_modules/date-fns/locale/en-GB.js": () => import("./en-GB.-Q7Oq-nY.js"),
+  "../../../node_modules/date-fns/locale/en-US.js": () => import("./en-US.BK5uiAND.js").then((n) => n.x),
+  "../../../node_modules/date-fns/locale/es.js": () => import("./es.2H4LvTyV.js"),
+  "../../../node_modules/date-fns/locale/fr.js": () => import("./fr.Cu0IIfBP.js"),
+  "../../../node_modules/date-fns/locale/it.js": () => import("./it.B65snrJA.js"),
+  "../../../node_modules/date-fns/locale/ja.js": () => import("./ja.xGVfFSzL.js"),
+  "../../../node_modules/date-fns/locale/pt-BR.js": () => import("./pt-BR.D9FuAQZm.js"),
+  "../../../node_modules/date-fns/locale/zh-CN.js": () => import("./zh-CN.Be4pa3-g.js")
+});
+function G(n) {
+  const e = b(void 0);
+  return x(
+    n,
+    async (t) => {
+      if (!t) {
+        e.value = void 0;
+        return;
+      }
+      const a = (i) => `../../../node_modules/date-fns/locale/${i}.js`;
+      let o = a(t);
+      if (p[o] || (o = a(t.substring(0, 2))), p[o] || (o = a("en-US")), p[o])
+        try {
+          const i = await p[o]();
+          e.value = i.default;
+        } catch (i) {
+          z(`Failed to load date-fns locale: ${t}`, i);
+        }
+    },
+    { immediate: !0 }
+  ), e;
+}
+function W(n, e) {
+  return +I(n) - +I(e);
+}
+function J(n, e, t) {
+  const a = W(n, e) / 1e3;
+  return A(t == null ? void 0 : t.roundingMethod)(a);
+}
+function q(n, e, t) {
+  const a = H(), o = (t == null ? void 0 : t.locale) ?? a.locale ?? N, i = 2520, f = L(n, e);
+  if (isNaN(f)) throw new RangeError("Invalid time value");
+  const s = Object.assign({}, t, {
+    addSuffix: t == null ? void 0 : t.addSuffix,
+    comparison: f
+  }), [m, _] = $(
+    t == null ? void 0 : t.in,
+    ...f > 0 ? [e, n] : [n, e]
+  ), l = J(_, m), U = (g(_) - g(m)) / 1e3, r = Math.round((l - U) / 60);
+  let c;
+  if (r < 2)
+    return t != null && t.includeSeconds ? l < 5 ? o.formatDistance("lessThanXSeconds", 5, s) : l < 10 ? o.formatDistance("lessThanXSeconds", 10, s) : l < 20 ? o.formatDistance("lessThanXSeconds", 20, s) : l < 40 ? o.formatDistance("halfAMinute", 0, s) : l < 60 ? o.formatDistance("lessThanXMinutes", 1, s) : o.formatDistance("xMinutes", 1, s) : r === 0 ? o.formatDistance("lessThanXMinutes", 1, s) : o.formatDistance("xMinutes", r, s);
+  if (r < 45)
+    return o.formatDistance("xMinutes", r, s);
+  if (r < 90)
+    return o.formatDistance("aboutXHours", 1, s);
+  if (r < D) {
+    const d = Math.round(r / 60);
+    return o.formatDistance("aboutXHours", d, s);
+  } else {
+    if (r < i)
+      return o.formatDistance("xDays", 1, s);
+    if (r < u) {
+      const d = Math.round(r / D);
+      return o.formatDistance("xDays", d, s);
+    } else if (r < u * 2)
+      return c = Math.round(r / u), o.formatDistance("aboutXMonths", c, s);
+  }
+  if (c = k(_, m), c < 12) {
+    const d = Math.round(r / u);
+    return o.formatDistance("xMonths", d, s);
+  } else {
+    const d = c % 12, v = Math.trunc(c / 12);
+    return d < 3 ? o.formatDistance("aboutXYears", v, s) : d < 9 ? o.formatDistance("overXYears", v, s) : o.formatDistance("almostXYears", v + 1, s);
+  }
+}
+function K(n, e) {
+  return q(n, F(n), e);
+}
+const Q = {
+  "de-DE": {
+    moreInformation: "Weitere Informationen"
+  },
+  "en-GB": {
+    moreInformation: "More information"
+  },
+  "en-US": {
+    moreInformation: "More information"
+  },
+  "es-ES": {
+    moreInformation: "Más información"
+  },
+  "es-MX": {
+    moreInformation: "Más información"
+  },
+  "fr-FR": {
+    moreInformation: "Plus d'informations"
+  },
+  "it-IT": {
+    moreInformation: "Ulteriori informazioni"
+  },
+  "ja-JP": {
+    moreInformation: "詳細情報"
+  },
+  "pt-BR": {
+    moreInformation: "Mais informações"
+  },
+  "zh-CN": {
+    moreInformation: "更多信息"
+  }
+}, V = {
+  i18n: { messages: Q }
+}, Z = /* @__PURE__ */ M({
+  ...V,
+  __name: "info-icon-with-popover",
+  props: {
+    /**
+     * Text showed in the popover on hover
+     */
+    popoverText: { type: String, default: null },
+    /**
+     * Position the popover should take if space is available
+     */
+    popoverPosition: {
+      type: String,
+      default: "bottom-start",
+      validator: (n) => Object.values(X).includes(n)
+    }
+  },
+  setup(n) {
+    const { t: e } = B(), t = j(null), a = C("bento-info-icon-with-popover"), { isOpen: o, hoverEvents: i } = O();
+    return { __sfc: !0, t: e, targetElement: t, popoverId: a, isOpen: o, hoverEvents: i, BentoPopover: R, BentoTypography: y, InfoIcon: E };
+  }
+});
+var ee = function() {
+  var e = this, t = e._self._c, a = e._self._setupProxy;
+  return t("div", e._g({ staticClass: "b-info-icon-with-popover", attrs: { tabindex: "0", "data-testid": "info-icon-with-popover" } }, a.hoverEvents), [t(a.InfoIcon, { ref: "targetElement", staticClass: "b-info-icon-with-popover__svg", attrs: { "aria-expanded": a.isOpen, "aria-describedby": a.popoverId, "svg-title": a.t("moreInformation") } }), a.targetElement ? t(a.BentoPopover, { attrs: { open: a.isOpen, "target-element": a.targetElement, position: e.popoverPosition, role: "tooltip", "fit-content": "", "disable-focus-trap": "" } }, [t(a.BentoTypography, [e._t("default", function() {
+    return [e.popoverText ? t("div", [e._v(" " + e._s(e.popoverText) + " ")]) : e._e()];
+  })], 2)], 1) : e._e()], 1);
+}, te = [], ae = /* @__PURE__ */ S(
+  Z,
+  ee,
+  te,
+  !1,
+  null,
+  "4cb2adfc"
+);
+const Ue = ae.exports, oe = {
+  "de-DE": {
+    lastUpdated: "Letzte Aktualisierung: {date}"
+  },
+  "en-GB": {
+    lastUpdated: "Last updated: {date}"
+  },
+  "en-US": {
+    lastUpdated: "Last updated: {date}"
+  },
+  "es-ES": {
+    lastUpdated: "Última actualización: {date}"
+  },
+  "es-MX": {
+    lastUpdated: "Última actualización: {date}"
+  },
+  "fr-FR": {
+    lastUpdated: "Dernière mise à jour : le {date}"
+  },
+  "it-IT": {
+    lastUpdated: "Ultimo aggiornamento: {date}"
+  },
+  "ja-JP": {
+    lastUpdated: "最終更新日: {date}"
+  },
+  "pt-BR": {
+    lastUpdated: "Última atualização: {date}"
+  },
+  "zh-CN": {
+    lastUpdated: "最后更新时间：{date}"
+  }
+}, ne = {
+  i18n: { messages: oe }
+}, se = /* @__PURE__ */ M({
+  ...ne,
+  __name: "header-meta",
+  props: {
+    description: { default: null },
+    lastUpdated: { default: null },
+    reloadButton: { default: null }
+  },
+  setup(n) {
+    const e = n, { t, locale: a } = B(), o = h(() => e.lastUpdated ? a.value : ""), i = G(o), f = h(
+      () => e.lastUpdated ? t("lastUpdated", {
+        date: K(e.lastUpdated, {
+          locale: i.value,
+          addSuffix: !0
+        })
+      }) : null
+    ), s = T(), m = w(s);
+    return { __sfc: !0, t, locale: a, props: e, activeLocale: o, dateLocale: i, timestamp: f, slots: s, hasSlot: m, BentoTypography: y, BentoLoadingButton: P, ReloadIcon: Y };
+  }
+});
+var re = function() {
+  var e = this, t = e._self._c, a = e._self._setupProxy;
+  return t("div", { staticClass: "b-header-meta__container" }, [e.description || a.hasSlot("description") ? t(a.BentoTypography, { staticClass: "b-header-meta__description", attrs: { el: "div" } }, [e._t("description", function() {
+    return [e._v(e._s(e.description))];
+  })], 2) : e._e(), e.lastUpdated ? t("div", { staticClass: "b-header-meta__timestamp-section" }, [t(a.BentoTypography, { staticClass: "b-header-meta__timestamp", attrs: { el: "div" } }, [e._v(" " + e._s(a.timestamp) + " ")]), e.reloadButton ? t(a.BentoLoadingButton, { attrs: { variant: "tertiary", state: e.reloadButton.state }, on: { click: e.reloadButton.event }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [t(a.ReloadIcon, { attrs: { "aria-hidden": "true" } })];
+  }, proxy: !0 }], null, !1, 750518660) }, [e._v(e._s(e.reloadButton.title))]) : e._e()], 1) : e._e()], 1);
+}, ie = [], de = /* @__PURE__ */ S(
+  se,
+  re,
+  ie,
+  !1,
+  null,
+  "0b8d63cc"
+);
+const be = de.exports;
+export {
+  be as H,
+  Ue as I
+};
+//# sourceMappingURL=header-meta.6rZdOgXD.js.map