@adyen/bento-vue2 1.26.0 → 1.28.0

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

@@ -0,0 +1,187 @@
+import { defineComponent as n, useSlots as i, computed as r, provide as m, toRef as d } from "vue";
+import { B as f } from "./alert.CJyTM4Az.js";
+import { F as y } from "./form-layout.types.D3EKzbE7.js";
+import { u } from "./use-has-slot.C9lQZ6nz.js";
+import { n as l } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as p, c as v } from "./typography.Bjtu3Gca.js";
+import "../assets/form-layout-title.css";
+const g = {}, h = /* @__PURE__ */ n({
+  ...g,
+  __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(e) {
+    const t = e, o = i(), s = u(o), a = r(() => t.form ? "form" : "div"), _ = r(() => s("actions-left") || s("actions-right"));
+    return m(y, d(t, "loading")), { __sfc: !0, slots: o, hasSlot: s, props: t, formLayoutElement: a, hasActions: _, BentoAlert: f };
+  }
+});
+var b = function() {
+  var t = this, o = t._self._c, s = t._self._setupProxy;
+  return o(s.formLayoutElement, { tag: "component", staticClass: "b-form-layout", attrs: { role: "form" } }, [s.hasSlot("error-message") ? o(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"), s.hasActions ? o("div", { staticClass: "b-form-layout__actions-container" }, [o("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-left")], 2), o("div", { staticClass: "b-form-layout__actions" }, [t._t("actions-right")], 2)]) : t._e()], 2);
+}, C = [], $ = /* @__PURE__ */ l(
+  h,
+  b,
+  C,
+  !1,
+  null,
+  "178aebc7"
+);
+const H = $.exports, B = ["warning", "critical", "highlight", "success"], S = {}, L = /* @__PURE__ */ n({
+  ...S,
+  __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: (e) => B.includes(e)
+    }
+  },
+  setup(e) {
+    const t = i(), o = u(t);
+    return { __sfc: !0, slots: t, hasSlot: o, BentoAlert: f };
+  }
+});
+var T = function() {
+  var t = this, o = t._self._c, s = t._self._setupProxy;
+  return o("div", { staticClass: "b-form-layout-field-tip" }, [t._t("default"), s.hasSlot("message") ? o(s.BentoAlert, { attrs: { variant: "tip", type: t.type }, scopedSlots: t._u([{ key: "description", fn: function() {
+    return [t._t("message")];
+  }, proxy: !0 }], null, !0) }) : t._e()], 2);
+}, x = [], F = /* @__PURE__ */ l(
+  L,
+  T,
+  x,
+  !1,
+  null,
+  "21e4c0c4"
+);
+const J = F.exports, c = [
+  "100",
+  "50",
+  "33",
+  "25",
+  "66-33",
+  "33-66",
+  "75-25",
+  "25-75",
+  "50-50",
+  "33-33-33"
+], O = {}, A = /* @__PURE__ */ n({
+  ...O,
+  __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
+     * '33-33-33'
+     * '50-50'
+     * '25-75'
+     * '75-25'
+     * '33-66'
+     * '66-33'
+     * '25'
+     * '33'
+     * '50'
+     * '100'
+     */
+    layout: {
+      type: String,
+      default: "100",
+      validator: (e) => c.includes(e)
+    }
+  },
+  setup(e) {
+    const t = e, o = 100, s = r(
+      () => c.includes(t.layout) ? t.layout : o
+    ), a = r(() => ({
+      // Transform into column if the layout is unsupported
+      "b-form-layout-group--column": !c.includes(t.layout),
+      // Assings the correct layout class
+      [`b-form-layout-group--${s.value}`]: !0
+    }));
+    return { __sfc: !0, DEFAULT_PROPORTION: o, props: t, computedLayout: s, conditionalClasses: a };
+  }
+});
+var R = function() {
+  var t = this, o = t._self._c, s = t._self._setupProxy;
+  return o("div", { staticClass: "b-form-layout-group", class: s.conditionalClasses }, [t._t("default")], 2);
+}, P = [], E = /* @__PURE__ */ l(
+  A,
+  R,
+  P,
+  !1,
+  null,
+  "f4f09170"
+);
+const K = E.exports, I = {}, N = /* @__PURE__ */ n({
+  ...I,
+  __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: p.props.el.type,
+      required: !0,
+      validator: (e) => Object.values(v).includes(e)
+    }
+  },
+  setup(e) {
+    const t = e, o = i(), s = r(() => !t.subsection), a = u(o), _ = r(() => ({
+      "b-form-layout-title--subsection": t.subsection
+    }));
+    return { __sfc: !0, slots: o, props: t, isSection: s, hasSlot: a, conditionalClasses: _, BentoTypography: p };
+  }
+});
+var G = function() {
+  var t = this, o = t._self._c, s = t._self._setupProxy;
+  return o("div", { staticClass: "b-form-layout-title", class: s.conditionalClasses }, [o(s.BentoTypography, { attrs: { el: t.el, variant: "title", medium: s.isSection } }, [t._t("default")], 2), s.hasSlot("description") ? o(s.BentoTypography, { staticClass: "b-form-layout-title__description", attrs: { el: "span", wide: "" } }, [t._t("description")], 2) : t._e()], 1);
+}, k = [], w = /* @__PURE__ */ l(
+  N,
+  G,
+  k,
+  !1,
+  null,
+  "03648a9d"
+);
+const M = w.exports;
+export {
+  J as a,
+  M as b,
+  K as c,
+  H as f
+};
+//# sourceMappingURL=form-layout-title.BzNU0B72.js.map

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

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

package/dist/chunks/{form-layout.types.a7a1438d.js → form-layout.types.D3EKzbE7.js}

@@ -2,4 +2,4 @@ const o = Symbol("form layout loading injection key");
 export {
   o as F
 };
-//# sourceMappingURL=form-layout.types.a7a1438d.js.map
+//# sourceMappingURL=form-layout.types.D3EKzbE7.js.map

package/dist/chunks/{form-layout.types.a7a1438d.js.map → form-layout.types.D3EKzbE7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"form-layout.types.a7a1438d.js","sources":["../../src/components/form-layout/form-layout.types.ts"],"sourcesContent":["export const FORM_LAYOUT_LOADING_INJECTION_KEY = Symbol('form layout loading injection key');\n"],"names":["FORM_LAYOUT_LOADING_INJECTION_KEY"],"mappings":"AAAa,MAAAA,IAAoC,OAAO,mCAAmC;"}
+{"version":3,"file":"form-layout.types.D3EKzbE7.js","sources":["../../src/components/form-layout/form-layout.types.ts"],"sourcesContent":["export const FORM_LAYOUT_LOADING_INJECTION_KEY = Symbol('form layout loading injection key');\n"],"names":["FORM_LAYOUT_LOADING_INJECTION_KEY"],"mappings":"AAAa,MAAAA,IAAoC,OAAO,mCAAmC;"}

package/dist/chunks/{get-slot-text.99c3d860.js → get-slot-text.Cgn-E48s.js}

@@ -1,4 +1,4 @@
-import "./index.4c062058.js";
+import "./index.Cl4_42j5.js";
 const n = (r, t) => t > 5 ? "" : Array.isArray(r) ? r != null && r[0].text ? r == null ? void 0 : r[0].text : n(r == null ? void 0 : r[0].children, t + 1) : r == null ? void 0 : r.text, u = (r) => (t) => {
   var i;
   return n((i = r[t]) == null ? void 0 : i.call(r), 1);
@@ -6,4 +6,4 @@ const n = (r, t) => t > 5 ? "" : Array.isArray(r) ? r != null && r[0].text ? r =
 export {
   u as g
 };
-//# sourceMappingURL=get-slot-text.99c3d860.js.map
+//# sourceMappingURL=get-slot-text.Cgn-E48s.js.map

package/dist/chunks/{get-slot-text.99c3d860.js.map → get-slot-text.Cgn-E48s.js.map}

@@ -1 +1 @@
-{"version":3,"file":"get-slot-text.99c3d860.js","sources":["../../src/utils/ts/get-slot-text/get-slot-text.ts"],"sourcesContent":["import { isVue2 } from 'vue-demi';\nimport type { Slots } from 'vue/types/v3-setup-context';\n\n// TODO: remove these types when vue 2 support has been removed\ntype vue2VNode = { text?: string; children?: vue2VNode };\n\nconst getTextFromChildren = (vNode: vue2VNode[] | vue2VNode, nestedLevel: number): string => {\n    // We should not be checking for slot text more than 5 layers. If we are end the recursion.\n    if (nestedLevel > 5) {\n        return '';\n    }\n    if (Array.isArray(vNode)) {\n        if (isVue2 && (vNode as Array<vue2VNode>)?.[0].text) {\n            return vNode?.[0].text;\n        }\n        return getTextFromChildren(vNode?.[0].children, nestedLevel + 1);\n    }\n    return isVue2 ? (vNode as vue2VNode)?.text : vNode?.toString();\n};\n\n/**\n * Get text recursively from slot by giving slot name.\n * This recursion will only occur 5 times before the method gives up and returns an empty string.\n * @param slots - the slots provided the the component's setup function\n * @returns A function who's first parameter is the name of the slot.\n */\nexport const getSlotText = (slots: Slots) => (name: string) =>\n    getTextFromChildren(slots[name]?.() as vue2VNode[] | vue2VNode, 1);\n\nexport default getSlotText;\n"],"names":["getTextFromChildren","vNode","nestedLevel","getSlotText","slots","name","_a"],"mappings":";AAMA,MAAMA,IAAsB,CAACC,GAAgCC,MAErDA,IAAc,IACP,KAEP,MAAM,QAAQD,CAAK,IACJA,KAAA,QAAAA,EAA6B,GAAG,OACpCA,KAAA,gBAAAA,EAAQ,GAAG,OAEfD,EAAoBC,KAAA,gBAAAA,EAAQ,GAAG,UAAUC,IAAc,CAAC,IAElDD,KAAA,gBAAAA,EAAqB,MAS7BE,IAAc,CAACC,MAAiB,CAACC,MAAA;;AAC1C,SAAAL,GAAoBM,IAAAF,EAAMC,OAAN,gBAAAC,EAAA,KAAAF,IAA4C,CAAC;AAAA;"}
+{"version":3,"file":"get-slot-text.Cgn-E48s.js","sources":["../../src/utils/ts/get-slot-text/get-slot-text.ts"],"sourcesContent":["import { isVue2 } from 'vue-demi';\nimport type { Slots } from 'vue/types/v3-setup-context';\n\n// TODO: remove these types when vue 2 support has been removed\ntype vue2VNode = { text?: string; children?: vue2VNode };\n\nconst getTextFromChildren = (vNode: vue2VNode[] | vue2VNode, nestedLevel: number): string => {\n    // We should not be checking for slot text more than 5 layers. If we are end the recursion.\n    if (nestedLevel > 5) {\n        return '';\n    }\n    if (Array.isArray(vNode)) {\n        if (isVue2 && (vNode as Array<vue2VNode>)?.[0].text) {\n            return vNode?.[0].text;\n        }\n        return getTextFromChildren(vNode?.[0].children, nestedLevel + 1);\n    }\n    return isVue2 ? (vNode as vue2VNode)?.text : vNode?.toString();\n};\n\n/**\n * Get text recursively from slot by giving slot name.\n * This recursion will only occur 5 times before the method gives up and returns an empty string.\n * @param slots - the slots provided the the component's setup function\n * @returns A function who's first parameter is the name of the slot.\n */\nexport const getSlotText = (slots: Slots) => (name: string) =>\n    getTextFromChildren(slots[name]?.() as vue2VNode[] | vue2VNode, 1);\n\nexport default getSlotText;\n"],"names":["getTextFromChildren","vNode","nestedLevel","getSlotText","slots","name","_a"],"mappings":";AAMA,MAAMA,IAAsB,CAACC,GAAgCC,MAErDA,IAAc,IACP,KAEP,MAAM,QAAQD,CAAK,IACJA,KAAA,QAAAA,EAA6B,GAAG,OACpCA,KAAA,gBAAAA,EAAQ,GAAG,OAEfD,EAAoBC,KAAA,gBAAAA,EAAQ,GAAG,UAAUC,IAAc,CAAC,IAElDD,KAAA,gBAAAA,EAAqB,MAS7BE,IAAc,CAACC,MAAiB,CAACC,MAAA;;AAC1C,SAAAL,GAAoBM,IAAAF,EAAMC,OAAN,gBAAAC,EAAA,KAAAF,IAA4C,CAAC;AAAA;"}

package/dist/chunks/{grid-layout.e0025286.js → grid-layout.HvTAa4to.js}

@@ -1,6 +1,6 @@
 import { defineComponent as r, computed as d } from "vue";
-import { u as _ } from "./use-has-slot.fbeb19ec.js";
-import { n as m } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { u as m } from "./use-has-slot.C9lQZ6nz.js";
+import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/grid-layout.css";
 var s = /* @__PURE__ */ ((l) => (l.INLINE = "inline-size", l.SIZE = "size", l.NORMAL = "normal", l))(s || {});
 const y = r({
@@ -31,9 +31,9 @@ const y = r({
     }
   },
   setup(l, { slots: t }) {
-    const o = _(t), i = (a) => {
-      var c, u;
-      if ((c = l.columnWidth) != null && c[a] && ((u = l.columnWidth) == null ? void 0 : u[a]) !== "auto") {
+    const o = m(t), u = (a) => {
+      var c, i;
+      if ((c = l.columnWidth) != null && c[a] && ((i = l.columnWidth) == null ? void 0 : i[a]) !== "auto") {
         const e = l.columnWidth[a];
         return [
           `b-grid-layout__column--${e.small}`,
@@ -50,7 +50,7 @@ const y = r({
     }));
     return {
       // Values
-      computeColumnSize: i,
+      computeColumnSize: u,
       computedClasses: n,
       // Methods
       hasSlot: o
@@ -60,19 +60,17 @@ const y = r({
 var g = function() {
   var t = this, o = t._self._c;
   return t._self._setupProxy, o("div", { staticClass: "b-grid-layout", class: t.computedClasses, attrs: { "data-testid": "grid-layout" } }, [t.hasSlot("col-1") ? o("div", { staticClass: "b-grid-layout__column", class: t.computeColumnSize(0), attrs: { "data-testid": "grid-layout-col-1" } }, [t._t("col-1")], 2) : t._e(), t.hasSlot("col-2") ? o("div", { staticClass: "b-grid-layout__column", class: t.computeColumnSize(1), attrs: { "data-testid": "grid-layout-col-2" } }, [t._t("col-2")], 2) : t._e(), t.hasSlot("col-3") ? o("div", { staticClass: "b-grid-layout__column", class: t.computeColumnSize(2), attrs: { "data-testid": "grid-layout-col-3" } }, [t._t("col-3")], 2) : t._e(), t.hasSlot("col-4") ? o("div", { staticClass: "b-grid-layout__column", class: t.computeColumnSize(3), attrs: { "data-testid": "grid-layout-col-4" } }, [t._t("col-4")], 2) : t._e(), t.hasSlot("col-5") ? o("div", { staticClass: "b-grid-layout__column", class: t.computeColumnSize(4), attrs: { "data-testid": "grid-layout-col-5" } }, [t._t("col-5")], 2) : t._e(), t.hasSlot("col-6") ? o("div", { staticClass: "b-grid-layout__column", class: t.computeColumnSize(5), attrs: { "data-testid": "grid-layout-col-6" } }, [t._t("col-6")], 2) : t._e()]);
-}, p = [], f = /* @__PURE__ */ m(
+}, p = [], S = /* @__PURE__ */ _(
   y,
   g,
   p,
   !1,
   null,
-  "9e65023f",
-  null,
-  null
+  "9e65023f"
 );
-const C = f.exports;
+const v = S.exports;
 export {
-  C as G,
+  v as G,
   s as a
 };
-//# sourceMappingURL=grid-layout.e0025286.js.map
+//# sourceMappingURL=grid-layout.HvTAa4to.js.map

package/dist/chunks/{grid-layout.e0025286.js.map → grid-layout.HvTAa4to.js.map}

@@ -1 +1 @@
-{"version":3,"file":"grid-layout.e0025286.js","sources":["../../src/components/internal/grid-layout/grid-layout.types.ts","../../src/components/internal/grid-layout/grid-layout.vue"],"sourcesContent":["export enum GridLayoutContainerType {\n    INLINE = 'inline-size',\n    SIZE = 'size',\n    NORMAL = 'normal',\n}\n\nexport interface GridLayoutColumnWidth {\n    small: number | string;\n    medium: number | string;\n    large: number | string;\n}\n\nexport type GridLayoutColumnWidths = Array<'auto' | GridLayoutColumnWidth>;\n","<template>\n    <div class=\"b-grid-layout\" :class=\"computedClasses\" data-testid=\"grid-layout\">\n        <div\n            v-if=\"hasSlot('col-1')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(0)\"\n            data-testid=\"grid-layout-col-1\"\n        >\n            <slot name=\"col-1\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-2')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(1)\"\n            data-testid=\"grid-layout-col-2\"\n        >\n            <slot name=\"col-2\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-3')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(2)\"\n            data-testid=\"grid-layout-col-3\"\n        >\n            <slot name=\"col-3\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-4')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(3)\"\n            data-testid=\"grid-layout-col-4\"\n        >\n            <slot name=\"col-4\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-5')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(4)\"\n            data-testid=\"grid-layout-col-5\"\n        >\n            <slot name=\"col-5\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-6')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(5)\"\n            data-testid=\"grid-layout-col-6\"\n        >\n            <slot name=\"col-6\"></slot>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import { GridLayoutColumnWidth, GridLayoutColumnWidths, GridLayoutContainerType } from './grid-layout.types';\n\n    /**\n     * Component used to render the grid layout in the bento-summary-grid. For internal use only\n     */\n    export default defineComponent({\n        name: 'grid-layout',\n        props: {\n            /**\n             * Sets the responsive columns widths for the grid.\n             */\n            columnWidth: {\n                type: Array as PropType<GridLayoutColumnWidths>,\n                default: null,\n                validator: (array: GridLayoutColumnWidths) => array && array.length <= 6,\n            },\n\n            /**\n             * Set the type of CSS container the grid layout has\n             * @values inline-size, size, normal\n             */\n            containerType: {\n                type: String as PropType<GridLayoutContainerType>,\n                default: GridLayoutContainerType.INLINE,\n            },\n\n            /**\n             * Sets the gap in the grid to 0.\n             */\n            noGap: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props, { slots }) {\n            const hasSlot = useHasSlot(slots);\n\n            // TODO: add a computedItems computed here that only returns the slots that are presents so as to be able to render the divs in the template via a v-for\n            const computeColumnSize = index => {\n                if (props.columnWidth?.[index] && props.columnWidth?.[index] !== 'auto') {\n                    const columnWidth = props.columnWidth[index] as GridLayoutColumnWidth;\n                    return [\n                        `b-grid-layout__column--${columnWidth.small}`,\n                        `b-grid-layout-m__column--${columnWidth.medium}`,\n                        `b-grid-layout-l__column--${columnWidth.large}`,\n                    ];\n                }\n                return null;\n            };\n\n            const computedClasses = computed(() => ({\n                'b-grid-layout--container-type-normal': props.containerType === GridLayoutContainerType.NORMAL,\n                'b-grid-layout--container-type-size': props.containerType === GridLayoutContainerType.SIZE,\n                'b-grid-layout--all-auto':\n                    props.columnWidth === null || props.columnWidth.every(width => width === 'auto'),\n                'b-grid-layout--no-gap': props.noGap,\n            }));\n\n            return {\n                // Values\n                computeColumnSize,\n                computedClasses,\n\n                // Methods\n                hasSlot,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./grid-layout.scss\" />\n"],"names":["GridLayoutContainerType","GridLayoutContainerType2","_sfc_main","defineComponent","array","props","slots","hasSlot","useHasSlot","computeColumnSize","index","_a","_b","columnWidth","computedClasses","computed","width"],"mappings":";;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,SAAA,eACAA,EAAA,OAAA,QACAA,EAAA,SAAA,UAHQA,IAAAD,KAAA,CAAA,CAAA;AC6DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,aAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAAA,KAAAA,EAAA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAAJ,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAAF,CAAA,GAGAG,IAAA,CAAAC,MAAA;;AACA,WAAAC,IAAAN,EAAA,gBAAA,QAAAM,EAAAD,QAAAE,IAAAP,EAAA,gBAAA,gBAAAO,EAAAF,QAAA,QAAA;AACA,cAAAG,IAAAR,EAAA,YAAAK,CAAA;AACA,eAAA;AAAA,UAAA,0BAAAG,EAAA;AAAA,UACA,4BAAAA,EAAA;AAAA,UACA,4BAAAA,EAAA;AAAA,QACA;AAAA;AAGA,aAAA;AAAA,IAAA,GAGAC,IAAAC,EAAA,OAAA;AAAA,MAAA,wCAAAV,EAAA,kBAAAL,EAAA;AAAA,MACA,sCAAAK,EAAA,kBAAAL,EAAA;AAAA,MACA,2BAAAK,EAAA,gBAAA,QAAAA,EAAA,YAAA,MAAA,CAAAW,MAAAA,MAAA,MAAA;AAAA,MAEA,yBAAAX,EAAA;AAAA,IACA,EAAA;AAGA,WAAA;AAAA;AAAA,MAAA,mBAAAI;AAAA,MAEA,iBAAAK;AAAA;AAAA,MACA,SAAAP;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"grid-layout.HvTAa4to.js","sources":["../../src/components/internal/grid-layout/grid-layout.types.ts","../../src/components/internal/grid-layout/grid-layout.vue"],"sourcesContent":["export enum GridLayoutContainerType {\n    INLINE = 'inline-size',\n    SIZE = 'size',\n    NORMAL = 'normal',\n}\n\nexport interface GridLayoutColumnWidth {\n    small: number | string;\n    medium: number | string;\n    large: number | string;\n}\n\nexport type GridLayoutColumnWidths = Array<'auto' | GridLayoutColumnWidth>;\n","<template>\n    <div class=\"b-grid-layout\" :class=\"computedClasses\" data-testid=\"grid-layout\">\n        <div\n            v-if=\"hasSlot('col-1')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(0)\"\n            data-testid=\"grid-layout-col-1\"\n        >\n            <slot name=\"col-1\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-2')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(1)\"\n            data-testid=\"grid-layout-col-2\"\n        >\n            <slot name=\"col-2\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-3')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(2)\"\n            data-testid=\"grid-layout-col-3\"\n        >\n            <slot name=\"col-3\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-4')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(3)\"\n            data-testid=\"grid-layout-col-4\"\n        >\n            <slot name=\"col-4\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-5')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(4)\"\n            data-testid=\"grid-layout-col-5\"\n        >\n            <slot name=\"col-5\"></slot>\n        </div>\n        <div\n            v-if=\"hasSlot('col-6')\"\n            class=\"b-grid-layout__column\"\n            :class=\"computeColumnSize(5)\"\n            data-testid=\"grid-layout-col-6\"\n        >\n            <slot name=\"col-6\"></slot>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { useHasSlot } from '@/composables';\n    import { GridLayoutColumnWidth, GridLayoutColumnWidths, GridLayoutContainerType } from './grid-layout.types';\n\n    /**\n     * Component used to render the grid layout in the bento-summary-grid. For internal use only\n     */\n    export default defineComponent({\n        name: 'grid-layout',\n        props: {\n            /**\n             * Sets the responsive columns widths for the grid.\n             */\n            columnWidth: {\n                type: Array as PropType<GridLayoutColumnWidths>,\n                default: null,\n                validator: (array: GridLayoutColumnWidths) => array && array.length <= 6,\n            },\n\n            /**\n             * Set the type of CSS container the grid layout has\n             * @values inline-size, size, normal\n             */\n            containerType: {\n                type: String as PropType<GridLayoutContainerType>,\n                default: GridLayoutContainerType.INLINE,\n            },\n\n            /**\n             * Sets the gap in the grid to 0.\n             */\n            noGap: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props, { slots }) {\n            const hasSlot = useHasSlot(slots);\n\n            // TODO: add a computedItems computed here that only returns the slots that are presents so as to be able to render the divs in the template via a v-for\n            const computeColumnSize = index => {\n                if (props.columnWidth?.[index] && props.columnWidth?.[index] !== 'auto') {\n                    const columnWidth = props.columnWidth[index] as GridLayoutColumnWidth;\n                    return [\n                        `b-grid-layout__column--${columnWidth.small}`,\n                        `b-grid-layout-m__column--${columnWidth.medium}`,\n                        `b-grid-layout-l__column--${columnWidth.large}`,\n                    ];\n                }\n                return null;\n            };\n\n            const computedClasses = computed(() => ({\n                'b-grid-layout--container-type-normal': props.containerType === GridLayoutContainerType.NORMAL,\n                'b-grid-layout--container-type-size': props.containerType === GridLayoutContainerType.SIZE,\n                'b-grid-layout--all-auto':\n                    props.columnWidth === null || props.columnWidth.every(width => width === 'auto'),\n                'b-grid-layout--no-gap': props.noGap,\n            }));\n\n            return {\n                // Values\n                computeColumnSize,\n                computedClasses,\n\n                // Methods\n                hasSlot,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./grid-layout.scss\" />\n"],"names":["GridLayoutContainerType","GridLayoutContainerType2","_sfc_main","defineComponent","array","props","slots","hasSlot","useHasSlot","computeColumnSize","index","_a","_b","columnWidth","computedClasses","computed","width"],"mappings":";;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,SAAA,eACAA,EAAA,OAAA,QACAA,EAAA,SAAA,UAHQA,IAAAD,KAAA,CAAA,CAAA;AC6DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,aAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAAA,KAAAA,EAAA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAAJ,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAAF,CAAA,GAGAG,IAAA,CAAAC,MAAA;;AACA,WAAAC,IAAAN,EAAA,gBAAA,QAAAM,EAAAD,QAAAE,IAAAP,EAAA,gBAAA,gBAAAO,EAAAF,QAAA,QAAA;AACA,cAAAG,IAAAR,EAAA,YAAAK,CAAA;AACA,eAAA;AAAA,UAAA,0BAAAG,EAAA,KAAA;AAAA,UACA,4BAAAA,EAAA,MAAA;AAAA,UACA,4BAAAA,EAAA,KAAA;AAAA,QACA;AAAA,MACA;AAEA,aAAA;AAAA,IAAA,GAGAC,IAAAC,EAAA,OAAA;AAAA,MAAA,wCAAAV,EAAA,kBAAAL,EAAA;AAAA,MACA,sCAAAK,EAAA,kBAAAL,EAAA;AAAA,MACA,2BAAAK,EAAA,gBAAA,QAAAA,EAAA,YAAA,MAAA,CAAAW,MAAAA,MAAA,MAAA;AAAA,MAEA,yBAAAX,EAAA;AAAA,IACA,EAAA;AAGA,WAAA;AAAA;AAAA,MAAA,mBAAAI;AAAA,MAEA,iBAAAK;AAAA;AAAA,MACA,SAAAP;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}

package/dist/chunks/header.DmKHCmXh.js

@@ -0,0 +1,245 @@
+import { defineComponent as x, ref as h, computed as T } from "vue";
+import { u as U } from "./use-has-slot.C9lQZ6nz.js";
+import { B as C, c as D, a as L } from "./typography.Bjtu3Gca.js";
+import { u as N } from "./i18n.BQkEbtPM.js";
+import { B as X } from "./button-actions-with-menu.f3yuLK-L.js";
+import { c as I, a as B } from "./index.xqFSZOAb.js";
+import { r as m, t as c, l as b, g as S, a as F, b as Y } from "./index.B_UZQ6qF.js";
+import { e as $ } from "./index.B_EJflcs.js";
+import { e as G } from "./index.Z84QE0E2.js";
+import { B as g } from "./popover.B8YH92W8.js";
+import { g as H } from "./unique-id.XFfoKuc2.js";
+import { I as W } from "./info.CyeBsLgt.js";
+import { n as A } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/header.css";
+function z(o, t) {
+  m(2, arguments);
+  var n = c(o), e = c(t), l = n.getFullYear() - e.getFullYear(), a = n.getMonth() - e.getMonth();
+  return l * 12 + a;
+}
+function V(o, t) {
+  return m(2, arguments), c(o).getTime() - c(t).getTime();
+}
+var P = {
+  ceil: Math.ceil,
+  round: Math.round,
+  floor: Math.floor,
+  trunc: function(o) {
+    return o < 0 ? Math.ceil(o) : Math.floor(o);
+  }
+  // Math.trunc is not supported by IE
+}, j = "trunc";
+function q(o) {
+  return o ? P[o] : P[j];
+}
+function k(o) {
+  m(1, arguments);
+  var t = c(o);
+  return $(t).getTime() === G(t).getTime();
+}
+function J(o, t) {
+  m(2, arguments);
+  var n = c(o), e = c(t), l = I(n, e), a = Math.abs(z(n, e)), r;
+  if (a < 1)
+    r = 0;
+  else {
+    n.getMonth() === 1 && n.getDate() > 27 && n.setDate(30), n.setMonth(n.getMonth() - l * a);
+    var s = I(n, e) === -l;
+    k(c(o)) && a === 1 && I(o, e) === 1 && (s = !1), r = l * (a - Number(s));
+  }
+  return r === 0 ? 0 : r;
+}
+function K(o, t, n) {
+  m(2, arguments);
+  var e = V(o, t) / 1e3;
+  return q(void 0)(e);
+}
+var E = 1440, Q = 2520, O = 43200, Z = 86400;
+function tt(o, t) {
+  var n = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  m(2, arguments);
+  var e = n.locale || b;
+  if (!e.formatDistance)
+    throw new RangeError("locale must contain formatDistance property");
+  var l = I(o, t);
+  if (isNaN(l))
+    throw new RangeError("Invalid time value");
+  var a = B(n);
+  a.addSuffix = !!n.addSuffix, a.comparison = l;
+  var r, s;
+  l > 0 ? (r = c(t), s = c(o)) : (r = c(o), s = c(t));
+  var f = K(s, r), _ = (S(s) - S(r)) / 1e3, i = Math.round((f - _) / 60), p;
+  if (i < 2)
+    return n.includeSeconds ? f < 5 ? e.formatDistance("lessThanXSeconds", 5, a) : f < 10 ? e.formatDistance("lessThanXSeconds", 10, a) : f < 20 ? e.formatDistance("lessThanXSeconds", 20, a) : f < 40 ? e.formatDistance("halfAMinute", null, a) : f < 60 ? e.formatDistance("lessThanXMinutes", 1, a) : e.formatDistance("xMinutes", 1, a) : i === 0 ? e.formatDistance("lessThanXMinutes", 1, a) : e.formatDistance("xMinutes", i, a);
+  if (i < 45)
+    return e.formatDistance("xMinutes", i, a);
+  if (i < 90)
+    return e.formatDistance("aboutXHours", 1, a);
+  if (i < E) {
+    var u = Math.round(i / 60);
+    return e.formatDistance("aboutXHours", u, a);
+  } else {
+    if (i < Q)
+      return e.formatDistance("xDays", 1, a);
+    if (i < O) {
+      var w = Math.round(i / E);
+      return e.formatDistance("xDays", w, a);
+    } else if (i < Z)
+      return p = Math.round(i / O), e.formatDistance("aboutXMonths", p, a);
+  }
+  if (p = J(s, r), p < 12) {
+    var R = Math.round(i / O);
+    return e.formatDistance("xMonths", R, a);
+  } else {
+    var y = p % 12, M = Math.floor(p / 12);
+    return y < 3 ? e.formatDistance("aboutXYears", M, a) : y < 9 ? e.formatDistance("overXYears", M, a) : e.formatDistance("almostXYears", M + 1, a);
+  }
+}
+function et(o, t) {
+  return m(1, arguments), tt(o, Date.now(), t);
+}
+const ot = {
+  "en-US": {
+    infoIconAriaLabel: "More information"
+  }
+}, nt = {
+  i18n: { messages: ot }
+}, at = /* @__PURE__ */ x({
+  ...nt,
+  __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: g.props.position.type,
+      default: g.props.position.default,
+      validator: g.props.position.validator
+    }
+  },
+  setup(o) {
+    const { t: n } = N(), e = h(), l = h(null), a = H("bento-info-icon-with-popover"), r = h(), s = h(), f = () => {
+      r.value = !0, s.value && clearTimeout(s.value);
+    }, _ = () => {
+      const u = setTimeout(() => {
+        r.value = !1;
+      }, 200);
+      s.value = u;
+    };
+    return { __sfc: !0, CLOSING_POPOVER_DELAY_MS: 200, t: n, infoIconRef: e, targetElement: l, popoverId: a, isOpen: r, closingTimeOutId: s, openPopover: f, closePopover: _, infoIconOnFocus: () => {
+      f();
+    }, infoIconOnFocusOut: (u) => {
+      (!e.value || !((u == null ? void 0 : u.relatedTarget) instanceof Element) || !e.value.contains(u.relatedTarget)) && _();
+    }, BentoPopover: g, BentoTypography: C, InfoIcon: W };
+  }
+});
+var rt = function() {
+  var t = this, n = t._self._c, e = t._self._setupProxy;
+  return n("div", { ref: "infoIconRef", staticClass: "b-info-icon-with-popover", attrs: { tabindex: "0", "data-testid": "info-icon-with-popover" }, on: { mouseenter: e.openPopover, mouseleave: e.closePopover, focus: e.infoIconOnFocus, focusout: e.infoIconOnFocusOut } }, [n(e.InfoIcon, { ref: "targetElement", staticClass: "b-info-icon-with-popover__svg", attrs: { "aria-expanded": e.isOpen, "aria-describedby": e.popoverId, "svg-title": e.t("infoIconAriaLabel") } }), e.targetElement ? n(e.BentoPopover, { attrs: { open: e.isOpen, "target-element": e.targetElement, position: t.popoverPosition, role: "tooltip", "fit-content": "", "disable-focus-trap": "" } }, [n(e.BentoTypography, [t._t("default", function() {
+    return [t.popoverText ? n("div", [t._v(" " + t._s(t.popoverText) + " ")]) : t._e()];
+  })], 2)], 1) : t._e()], 1);
+}, st = [], it = /* @__PURE__ */ A(
+  at,
+  rt,
+  st,
+  !1,
+  null,
+  "8baceb76"
+);
+const v = it.exports;
+var d = /* @__PURE__ */ ((o) => (o.PAGE = "page", o.COMPONENT = "component", o))(d || {});
+const lt = {
+  "en-US": {
+    lastUpdated: "Last updated: {date} ago"
+  }
+}, ct = x({
+  i18n: { messages: lt },
+  name: "bento-header",
+  components: {
+    BentoTypography: C,
+    ButtonActionsWithMenu: X,
+    InfoIconWithPopover: v
+  },
+  props: {
+    /**
+     * Array of BentoButtonActionsList to show to the right of the title
+     */
+    actions: {
+      type: Array,
+      default: null
+    },
+    /**
+     * Text showed in the info-icon tooltip on hover
+     */
+    infoIconTooltipText: { type: v.props.popoverText.type, default: null },
+    /**
+     * Popover position of the info icon text.
+     */
+    infoIconPopoverPosition: {
+      type: v.props.popoverPosition.type,
+      default: v.props.popoverPosition.default,
+      validator: v.props.popoverPosition.validator
+    },
+    /**
+     * JavaScript "Date" object for when the content was last updated
+     */
+    lastUpdated: { type: [Date, Number], default: null },
+    /**
+     * Variant represents type of Header
+     * @values page, component
+     */
+    variant: {
+      type: String,
+      default: d.PAGE,
+      validator: (o) => Object.values(d).includes(o)
+    },
+    /**
+     * Text used as a title
+     */
+    title: { type: String, required: !0 }
+  },
+  setup(o, { slots: t }) {
+    const { t: n, locale: e } = N(), l = { de: F, enUS: b, fr: Y }, a = T(() => ({
+      "b-header--component": o.variant === d.COMPONENT
+    })), r = T(() => ({
+      el: o.variant === d.PAGE ? D.H1 : D.H2,
+      variant: L.TITLE,
+      medium: o.variant === d.COMPONENT,
+      large: o.variant === d.PAGE
+    })), s = T(
+      () => o.lastUpdated ? n("lastUpdated", {
+        date: et(o.lastUpdated, {
+          locale: l[e.value.substring(0, 2)] || b
+        })
+      }) : null
+    );
+    return {
+      hasSlot: U(t),
+      conditionalClasses: a,
+      timestamp: s,
+      typography: r
+    };
+  }
+});
+var ft = function() {
+  var t = this, n = t._self._c;
+  return t._self._setupProxy, n("div", { staticClass: "b-header", class: t.conditionalClasses }, [n("div", { staticClass: "b-header__wrapper" }, [n("div", { staticClass: "b-header__title" }, [n("div", [n("bento-typography", t._b({ staticClass: "b-header__text" }, "bento-typography", t.typography, !1), [t._v(t._s(t.title))]), t.infoIconTooltipText || t.hasSlot("infoIconTooltipContent") ? n("info-icon-with-popover", { staticClass: "b-header__tooltip", attrs: { "popover-text": t.infoIconTooltipText }, scopedSlots: t._u([t.hasSlot("infoIconTooltipContent") ? { key: "default", fn: function() {
+    return [t._t("infoIconTooltipContent")];
+  }, proxy: !0 } : null], null, !0) }) : t._e()], 1), t.lastUpdated ? n("bento-typography", { staticClass: "b-header__timestamp", attrs: { el: "div", variant: "caption" } }, [t._v(" " + t._s(t.timestamp) + " ")]) : t._e()], 1), t.actions ? n("button-actions-with-menu", { staticClass: "b-header__actions", attrs: { actions: t.actions, "displayed-actions": 2 } }) : t._e()], 1)]);
+}, ut = [], pt = /* @__PURE__ */ A(
+  ct,
+  ft,
+  ut,
+  !1,
+  null,
+  "07700b06"
+);
+const St = pt.exports;
+export {
+  St as B
+};
+//# sourceMappingURL=header.DmKHCmXh.js.map