@adyen/bento-vue2 1.50.0 → 1.52.0

package/dist/chunks/{form-layout-title.CJbgfh3P.js → form-layout-title.DK1-01RH.js}

@@ -1,12 +1,12 @@
-import { defineComponent as n, useSlots as i, computed as r, provide as m, toRef as d } from "vue";
-import { B as f } from "./alert.hiTIDSeX.js";
-import { F as y } from "./form-layout.types.D3EKzbE7.js";
+import { defineComponent as n, useSlots as c, computed as a, provide as d, toRef as y } from "vue";
+import { B as f } from "./alert.BkMKX9wD.js";
+import { F as v } 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.J1v_SPG3.js";
+import { B as p, c as g } from "./typography.J1v_SPG3.js";
 import "../assets/form-layout-title.css";
-const g = {}, h = /* @__PURE__ */ n({
-  ...g,
+const h = {}, b = /* @__PURE__ */ n({
+  ...h,
   __name: "form-layout",
   props: {
     /**
@@ -19,26 +19,29 @@ const g = {}, h = /* @__PURE__ */ n({
      */
     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 };
+  emits: ["submit"],
+  setup(e, { emit: t }) {
+    const o = e, s = c(), r = u(s), _ = a(() => o.form ? "form" : "div"), m = a(() => r("actions-left") || r("actions-right"));
+    return d(v, y(o, "loading")), { __sfc: !0, slots: s, hasSlot: r, emit: t, props: o, formLayoutElement: _, hasActions: m, BentoAlert: f };
   }
 });
-var b = function() {
+var C = 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 o(s.formLayoutElement, { tag: "component", staticClass: "b-form-layout", attrs: { role: "form" }, on: { submit: function(r) {
+    return s.emit("submit", r);
+  } } }, [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 = /* @__PURE__ */ l(
   b,
   C,
+  $,
   !1,
   null,
-  "178aebc7"
+  "b895dc37"
 );
-const H = $.exports, B = ["warning", "critical", "highlight", "success"], S = {}, L = /* @__PURE__ */ n({
-  ...S,
+const J = B.exports, S = ["warning", "critical", "highlight", "success"], L = {}, T = /* @__PURE__ */ n({
+  ...L,
   __name: "form-layout-field-tip",
   props: {
     /**
@@ -48,28 +51,28 @@ const H = $.exports, B = ["warning", "critical", "highlight", "success"], S = {}
     type: {
       type: String,
       default: "highlight",
-      validator: (e) => B.includes(e)
+      validator: (e) => S.includes(e)
     }
   },
   setup(e) {
-    const t = i(), o = u(t);
+    const t = c(), o = u(t);
     return { __sfc: !0, slots: t, hasSlot: o, BentoAlert: f };
   }
 });
-var T = function() {
+var x = 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,
+}, F = [], O = /* @__PURE__ */ l(
   T,
   x,
+  F,
   !1,
   null,
   "21e4c0c4"
 );
-const J = F.exports, c = [
+const K = O.exports, i = [
   "100",
   "50",
   "33",
@@ -80,8 +83,8 @@ const J = F.exports, c = [
   "25-75",
   "50-50",
   "33-33-33"
-], O = {}, A = /* @__PURE__ */ n({
-  ...O,
+], A = {}, R = /* @__PURE__ */ n({
+  ...A,
   __name: "form-layout-group",
   props: {
     /**
@@ -110,34 +113,34 @@ const J = F.exports, c = [
     layout: {
       type: String,
       default: "100",
-      validator: (e) => c.includes(e)
+      validator: (e) => i.includes(e)
     }
   },
   setup(e) {
-    const t = e, o = 100, s = r(
-      () => c.includes(t.layout) ? t.layout : o
-    ), a = r(() => ({
+    const t = e, o = 100, s = a(
+      () => i.includes(t.layout) ? t.layout : o
+    ), r = a(() => ({
       // Transform into column if the layout is unsupported
-      "b-form-layout-group--column": !c.includes(t.layout),
+      "b-form-layout-group--column": !i.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 };
+    return { __sfc: !0, DEFAULT_PROPORTION: o, props: t, computedLayout: s, conditionalClasses: r };
   }
 });
-var R = function() {
+var P = 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,
+}, E = [], I = /* @__PURE__ */ l(
   R,
   P,
+  E,
   !1,
   null,
   "f4f09170"
 );
-const K = E.exports, I = {}, N = /* @__PURE__ */ n({
-  ...I,
+const M = I.exports, N = {}, G = /* @__PURE__ */ n({
+  ...N,
   __name: "form-layout-title",
   props: {
     /**
@@ -156,32 +159,32 @@ const K = E.exports, I = {}, N = /* @__PURE__ */ n({
     el: {
       type: p.props.el.type,
       required: !0,
-      validator: (e) => Object.values(v).includes(e)
+      validator: (e) => Object.values(g).includes(e)
     }
   },
   setup(e) {
-    const t = e, o = i(), s = r(() => !t.subsection), a = u(o), _ = r(() => ({
+    const t = e, o = c(), s = a(() => !t.subsection), r = u(o), _ = a(() => ({
       "b-form-layout-title--subsection": t.subsection
     }));
-    return { __sfc: !0, slots: o, props: t, isSection: s, hasSlot: a, conditionalClasses: _, BentoTypography: p };
+    return { __sfc: !0, slots: o, props: t, isSection: s, hasSlot: r, conditionalClasses: _, BentoTypography: p };
   }
 });
-var G = function() {
+var k = 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,
+}, w = [], D = /* @__PURE__ */ l(
   G,
   k,
+  w,
   !1,
   null,
   "03648a9d"
 );
-const M = w.exports;
+const Q = D.exports;
 export {
-  J as a,
-  M as b,
-  K as c,
-  H as f
+  K as a,
+  Q as b,
+  M as c,
+  J as f
 };
-//# sourceMappingURL=form-layout-title.CJbgfh3P.js.map
+//# sourceMappingURL=form-layout-title.DK1-01RH.js.map

package/dist/chunks/form-layout-title.DK1-01RH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-layout-title.DK1-01RH.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\" @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 { 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":";;;;;;;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,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/header.BAKjEGmH.js

@@ -0,0 +1,183 @@
+import { defineComponent as N, computed as h } from "vue";
+import { R as x } from "./refresh.Bc9FzGjJ.js";
+import { u as C } from "./use-has-slot.C9lQZ6nz.js";
+import { B as E, a as O, c as M } from "./typography.J1v_SPG3.js";
+import { u as P } from "./i18n.BQkEbtPM.js";
+import { r as m, t as d, l as B, a as T, g as A } from "./get-date-locale.BN8xEjY0.js";
+import { B as U } from "./button-actions-with-menu.B9oXYIgo.js";
+import { c as X } from "./index.DD7TppDb.js";
+import { d as w } from "./index.BDuTpjD8.js";
+import { c as R } from "./index.BxBB1rsx.js";
+import { I as p } from "./info-icon-with-popover.CxXWP4TR.js";
+import { d as H } from "./button-actions.DAvSJtOB.js";
+import { n as L } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/header.css";
+function G(e, t) {
+  return m(2, arguments), d(e).getTime() - d(t).getTime();
+}
+var W = {
+  ceil: Math.ceil,
+  round: Math.round,
+  floor: Math.floor,
+  trunc: function(e) {
+    return e < 0 ? Math.ceil(e) : Math.floor(e);
+  }
+  // Math.trunc is not supported by IE
+}, Y = "trunc";
+function j(e) {
+  return W[Y];
+}
+function k(e, t, n) {
+  m(2, arguments);
+  var o = G(e, t) / 1e3;
+  return j()(o);
+}
+var y = 1440, z = 2520, _ = 43200, q = 86400;
+function F(e, t) {
+  var n = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  m(2, arguments);
+  var o = n.locale || B;
+  if (!o.formatDistance)
+    throw new RangeError("locale must contain formatDistance property");
+  var c = X(e, t);
+  if (isNaN(c))
+    throw new RangeError("Invalid time value");
+  var a = R(n);
+  a.addSuffix = !!n.addSuffix, a.comparison = c;
+  var s, i;
+  c > 0 ? (s = d(t), i = d(e)) : (s = d(e), i = d(t));
+  var u = k(i, s), I = (T(i) - T(s)) / 1e3, r = Math.round((u - I) / 60), f;
+  if (r < 2)
+    return n.includeSeconds ? u < 5 ? o.formatDistance("lessThanXSeconds", 5, a) : u < 10 ? o.formatDistance("lessThanXSeconds", 10, a) : u < 20 ? o.formatDistance("lessThanXSeconds", 20, a) : u < 40 ? o.formatDistance("halfAMinute", null, a) : u < 60 ? o.formatDistance("lessThanXMinutes", 1, a) : o.formatDistance("xMinutes", 1, a) : r === 0 ? o.formatDistance("lessThanXMinutes", 1, a) : o.formatDistance("xMinutes", r, a);
+  if (r < 45)
+    return o.formatDistance("xMinutes", r, a);
+  if (r < 90)
+    return o.formatDistance("aboutXHours", 1, a);
+  if (r < y) {
+    var b = Math.round(r / 60);
+    return o.formatDistance("aboutXHours", b, a);
+  } else {
+    if (r < z)
+      return o.formatDistance("xDays", 1, a);
+    if (r < _) {
+      var D = Math.round(r / y);
+      return o.formatDistance("xDays", D, a);
+    } else if (r < q)
+      return f = Math.round(r / _), o.formatDistance("aboutXMonths", f, a);
+  }
+  if (f = w(i, s), f < 12) {
+    var S = Math.round(r / _);
+    return o.formatDistance("xMonths", S, a);
+  } else {
+    var g = f % 12, v = Math.floor(f / 12);
+    return g < 3 ? o.formatDistance("aboutXYears", v, a) : g < 9 ? o.formatDistance("overXYears", v, a) : o.formatDistance("almostXYears", v + 1, a);
+  }
+}
+function $(e, t) {
+  return m(1, arguments), F(e, Date.now(), t);
+}
+var l = /* @__PURE__ */ ((e) => (e.PAGE = "page", e.COMPONENT = "component", e))(l || {});
+const J = {
+  "en-US": {
+    lastUpdated: "Last updated: {date} ago"
+  }
+}, K = N({
+  i18n: { messages: J },
+  name: "bento-header",
+  components: {
+    BentoTypography: E,
+    ButtonActionsWithMenu: U,
+    BentoLoadingButton: H,
+    InfoIconWithPopover: p,
+    ReloadIcon: x
+  },
+  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: p.props.popoverText.type, default: null },
+    /**
+     * Popover position of the info icon text.
+     */
+    infoIconPopoverPosition: {
+      type: p.props.popoverPosition.type,
+      default: p.props.popoverPosition.default,
+      validator: p.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: l.PAGE,
+      validator: (e) => Object.values(l).includes(e)
+    },
+    /**
+     * Text used as a title
+     */
+    title: { type: String, required: !0 },
+    /**
+     * Reload button which shows next to the header's timestamp
+     * {@see BentoHeaderReloadButton}
+     */
+    reloadButton: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ["reload"],
+  setup(e, { slots: t }) {
+    const { t: n, locale: o } = P(), c = A(), a = h(() => ({
+      "b-header--component": e.variant === l.COMPONENT
+    })), s = h(() => ({
+      el: e.variant === l.PAGE ? M.H1 : M.H2,
+      variant: O.TITLE,
+      medium: e.variant === l.COMPONENT,
+      large: e.variant === l.PAGE
+    })), i = h(
+      () => e.lastUpdated ? n("lastUpdated", {
+        date: $(e.lastUpdated, {
+          locale: c[o.value.substring(0, 2)] || c.enUS
+        })
+      }) : null
+    );
+    return {
+      hasSlot: C(t),
+      conditionalClasses: a,
+      timestamp: i,
+      typography: s
+    };
+  }
+});
+var Q = function() {
+  var t = this, n = t._self._c;
+  return t._self._setupProxy, n("header", { 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("div", { staticClass: "b-header__timestamp-section" }, [n("bento-typography", { staticClass: "b-header__timestamp", attrs: { el: "div" } }, [t._v(" " + t._s(t.timestamp) + " ")]), t.reloadButton ? n("bento-loading-button", { attrs: { variant: "tertiary", state: t.reloadButton.state }, on: { click: t.reloadButton.event }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+    return [n("reload-icon", { attrs: { "aria-hidden": "true" } })];
+  }, proxy: !0 }], null, !1, 509029801) }, [t._v(t._s(t.reloadButton.title))]) : t._e()], 1) : t._e()]), t.actions ? n("button-actions-with-menu", { staticClass: "b-header__actions", attrs: { actions: t.actions, "displayed-actions": 2 } }) : t._e()], 1)]);
+}, V = [], Z = /* @__PURE__ */ L(
+  K,
+  Q,
+  V,
+  !1,
+  null,
+  "1bf83134"
+);
+const pt = Z.exports;
+export {
+  pt as B
+};
+//# sourceMappingURL=header.BAKjEGmH.js.map

package/dist/chunks/header.BAKjEGmH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.BAKjEGmH.js","sources":["../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/differenceInMilliseconds/index.js","../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/_lib/roundingMethods/index.js","../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/differenceInSeconds/index.js","../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/formatDistance/index.js","../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/formatDistanceToNow/index.js","../../src/components/header/header.types.ts","../../src/components/header/header.vue"],"sourcesContent":["import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name differenceInMilliseconds\n * @category Millisecond Helpers\n * @summary Get the number of milliseconds between the given dates.\n *\n * @description\n * Get the number of milliseconds between the given dates.\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * @param {Date|Number} dateLeft - the later date\n * @param {Date|Number} dateRight - the earlier date\n * @returns {Number} the number of milliseconds\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // How many milliseconds are between\n * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?\n * const result = differenceInMilliseconds(\n *   new Date(2014, 6, 2, 12, 30, 21, 700),\n *   new Date(2014, 6, 2, 12, 30, 20, 600)\n * )\n * //=> 1100\n */\n\nexport default function differenceInMilliseconds(dateLeft, dateRight) {\n  requiredArgs(2, arguments);\n  return toDate(dateLeft).getTime() - toDate(dateRight).getTime();\n}","var roundingMap = {\n  ceil: Math.ceil,\n  round: Math.round,\n  floor: Math.floor,\n  trunc: function (value) {\n    return value < 0 ? Math.ceil(value) : Math.floor(value);\n  } // Math.trunc is not supported by IE\n\n};\nvar defaultRoundingMethod = 'trunc';\nexport function getRoundingMethod(method) {\n  return method ? roundingMap[method] : roundingMap[defaultRoundingMethod];\n}","import differenceInMilliseconds from \"../differenceInMilliseconds/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\nimport { getRoundingMethod } from \"../_lib/roundingMethods/index.js\";\n/**\n * @name differenceInSeconds\n * @category Second Helpers\n * @summary Get the number of seconds between the given dates.\n *\n * @description\n * Get the number of seconds between the given dates.\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * @param {Date|Number} dateLeft - the later date\n * @param {Date|Number} dateRight - the earlier date\n * @param {Object} [options] - an object with options.\n * @param {String} [options.roundingMethod='trunc'] - a rounding method (`ceil`, `floor`, `round` or `trunc`)\n * @returns {Number} the number of seconds\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // How many seconds are between\n * // 2 July 2014 12:30:07.999 and 2 July 2014 12:30:20.000?\n * const result = differenceInSeconds(\n *   new Date(2014, 6, 2, 12, 30, 20, 0),\n *   new Date(2014, 6, 2, 12, 30, 7, 999)\n * )\n * //=> 12\n */\n\nexport default function differenceInSeconds(dateLeft, dateRight, options) {\n  requiredArgs(2, arguments);\n  var diff = differenceInMilliseconds(dateLeft, dateRight) / 1000;\n  return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);\n}","import compareAsc from \"../compareAsc/index.js\";\nimport differenceInMonths from \"../differenceInMonths/index.js\";\nimport differenceInSeconds from \"../differenceInSeconds/index.js\";\nimport defaultLocale from \"../locale/en-US/index.js\";\nimport toDate from \"../toDate/index.js\";\nimport cloneObject from \"../_lib/cloneObject/index.js\";\nimport getTimezoneOffsetInMilliseconds from \"../_lib/getTimezoneOffsetInMilliseconds/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\nvar MINUTES_IN_DAY = 1440;\nvar MINUTES_IN_ALMOST_TWO_DAYS = 2520;\nvar MINUTES_IN_MONTH = 43200;\nvar MINUTES_IN_TWO_MONTHS = 86400;\n/**\n * @name formatDistance\n * @category Common Helpers\n * @summary Return the distance between the given dates in words.\n *\n * @description\n * Return the distance between the given dates in words.\n *\n * | Distance between dates                                            | Result              |\n * |-------------------------------------------------------------------|---------------------|\n * | 0 ... 30 secs                                                     | less than a minute  |\n * | 30 secs ... 1 min 30 secs                                         | 1 minute            |\n * | 1 min 30 secs ... 44 mins 30 secs                                 | [2..44] minutes     |\n * | 44 mins ... 30 secs ... 89 mins 30 secs                           | about 1 hour        |\n * | 89 mins 30 secs ... 23 hrs 59 mins 30 secs                        | about [2..24] hours |\n * | 23 hrs 59 mins 30 secs ... 41 hrs 59 mins 30 secs                 | 1 day               |\n * | 41 hrs 59 mins 30 secs ... 29 days 23 hrs 59 mins 30 secs         | [2..30] days        |\n * | 29 days 23 hrs 59 mins 30 secs ... 44 days 23 hrs 59 mins 30 secs | about 1 month       |\n * | 44 days 23 hrs 59 mins 30 secs ... 59 days 23 hrs 59 mins 30 secs | about 2 months      |\n * | 59 days 23 hrs 59 mins 30 secs ... 1 yr                           | [2..12] months      |\n * | 1 yr ... 1 yr 3 months                                            | about 1 year        |\n * | 1 yr 3 months ... 1 yr 9 month s                                  | over 1 year         |\n * | 1 yr 9 months ... 2 yrs                                           | almost 2 years      |\n * | N yrs ... N yrs 3 months                                          | about N years       |\n * | N yrs 3 months ... N yrs 9 months                                 | over N years        |\n * | N yrs 9 months ... N+1 yrs                                        | almost N+1 years    |\n *\n * With `options.includeSeconds == true`:\n * | Distance between dates | Result               |\n * |------------------------|----------------------|\n * | 0 secs ... 5 secs      | less than 5 seconds  |\n * | 5 secs ... 10 secs     | less than 10 seconds |\n * | 10 secs ... 20 secs    | less than 20 seconds |\n * | 20 secs ... 40 secs    | half a minute        |\n * | 40 secs ... 60 secs    | less than a minute   |\n * | 60 secs ... 90 secs    | 1 minute             |\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * - The function was renamed from `distanceInWords ` to `formatDistance`\n *   to make its name consistent with `format` and `formatRelative`.\n *\n * - The order of arguments is swapped to make the function\n *   consistent with `differenceIn...` functions.\n *\n *   ```javascript\n *   // Before v2.0.0\n *\n *   distanceInWords(\n *     new Date(1986, 3, 4, 10, 32, 0),\n *     new Date(1986, 3, 4, 11, 32, 0),\n *     { addSuffix: true }\n *   ) //=> 'in about 1 hour'\n *\n *   // v2.0.0 onward\n *\n *   formatDistance(\n *     new Date(1986, 3, 4, 11, 32, 0),\n *     new Date(1986, 3, 4, 10, 32, 0),\n *     { addSuffix: true }\n *   ) //=> 'in about 1 hour'\n *   ```\n *\n * @param {Date|Number} date - the date\n * @param {Date|Number} baseDate - the date to compare with\n * @param {Object} [options] - an object with options.\n * @param {Boolean} [options.includeSeconds=false] - distances less than a minute are more detailed\n * @param {Boolean} [options.addSuffix=false] - result indicates if the second date is earlier or later than the first\n * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}\n * @returns {String} the distance in words\n * @throws {TypeError} 2 arguments required\n * @throws {RangeError} `date` must not be Invalid Date\n * @throws {RangeError} `baseDate` must not be Invalid Date\n * @throws {RangeError} `options.locale` must contain `formatDistance` property\n *\n * @example\n * // What is the distance between 2 July 2014 and 1 January 2015?\n * const result = formatDistance(new Date(2014, 6, 2), new Date(2015, 0, 1))\n * //=> '6 months'\n *\n * @example\n * // What is the distance between 1 January 2015 00:00:15\n * // and 1 January 2015 00:00:00, including seconds?\n * const result = formatDistance(\n *   new Date(2015, 0, 1, 0, 0, 15),\n *   new Date(2015, 0, 1, 0, 0, 0),\n *   { includeSeconds: true }\n * )\n * //=> 'less than 20 seconds'\n *\n * @example\n * // What is the distance from 1 January 2016\n * // to 1 January 2015, with a suffix?\n * const result = formatDistance(new Date(2015, 0, 1), new Date(2016, 0, 1), {\n *   addSuffix: true\n * })\n * //=> 'about 1 year ago'\n *\n * @example\n * // What is the distance between 1 August 2016 and 1 January 2015 in Esperanto?\n * import { eoLocale } from 'date-fns/locale/eo'\n * const result = formatDistance(new Date(2016, 7, 1), new Date(2015, 0, 1), {\n *   locale: eoLocale\n * })\n * //=> 'pli ol 1 jaro'\n */\n\nexport default function formatDistance(dirtyDate, dirtyBaseDate) {\n  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n  requiredArgs(2, arguments);\n  var locale = options.locale || defaultLocale;\n\n  if (!locale.formatDistance) {\n    throw new RangeError('locale must contain formatDistance property');\n  }\n\n  var comparison = compareAsc(dirtyDate, dirtyBaseDate);\n\n  if (isNaN(comparison)) {\n    throw new RangeError('Invalid time value');\n  }\n\n  var localizeOptions = cloneObject(options);\n  localizeOptions.addSuffix = Boolean(options.addSuffix);\n  localizeOptions.comparison = comparison;\n  var dateLeft;\n  var dateRight;\n\n  if (comparison > 0) {\n    dateLeft = toDate(dirtyBaseDate);\n    dateRight = toDate(dirtyDate);\n  } else {\n    dateLeft = toDate(dirtyDate);\n    dateRight = toDate(dirtyBaseDate);\n  }\n\n  var seconds = differenceInSeconds(dateRight, dateLeft);\n  var offsetInSeconds = (getTimezoneOffsetInMilliseconds(dateRight) - getTimezoneOffsetInMilliseconds(dateLeft)) / 1000;\n  var minutes = Math.round((seconds - offsetInSeconds) / 60);\n  var months; // 0 up to 2 mins\n\n  if (minutes < 2) {\n    if (options.includeSeconds) {\n      if (seconds < 5) {\n        return locale.formatDistance('lessThanXSeconds', 5, localizeOptions);\n      } else if (seconds < 10) {\n        return locale.formatDistance('lessThanXSeconds', 10, localizeOptions);\n      } else if (seconds < 20) {\n        return locale.formatDistance('lessThanXSeconds', 20, localizeOptions);\n      } else if (seconds < 40) {\n        return locale.formatDistance('halfAMinute', null, localizeOptions);\n      } else if (seconds < 60) {\n        return locale.formatDistance('lessThanXMinutes', 1, localizeOptions);\n      } else {\n        return locale.formatDistance('xMinutes', 1, localizeOptions);\n      }\n    } else {\n      if (minutes === 0) {\n        return locale.formatDistance('lessThanXMinutes', 1, localizeOptions);\n      } else {\n        return locale.formatDistance('xMinutes', minutes, localizeOptions);\n      }\n    } // 2 mins up to 0.75 hrs\n\n  } else if (minutes < 45) {\n    return locale.formatDistance('xMinutes', minutes, localizeOptions); // 0.75 hrs up to 1.5 hrs\n  } else if (minutes < 90) {\n    return locale.formatDistance('aboutXHours', 1, localizeOptions); // 1.5 hrs up to 24 hrs\n  } else if (minutes < MINUTES_IN_DAY) {\n    var hours = Math.round(minutes / 60);\n    return locale.formatDistance('aboutXHours', hours, localizeOptions); // 1 day up to 1.75 days\n  } else if (minutes < MINUTES_IN_ALMOST_TWO_DAYS) {\n    return locale.formatDistance('xDays', 1, localizeOptions); // 1.75 days up to 30 days\n  } else if (minutes < MINUTES_IN_MONTH) {\n    var days = Math.round(minutes / MINUTES_IN_DAY);\n    return locale.formatDistance('xDays', days, localizeOptions); // 1 month up to 2 months\n  } else if (minutes < MINUTES_IN_TWO_MONTHS) {\n    months = Math.round(minutes / MINUTES_IN_MONTH);\n    return locale.formatDistance('aboutXMonths', months, localizeOptions);\n  }\n\n  months = differenceInMonths(dateRight, dateLeft); // 2 months up to 12 months\n\n  if (months < 12) {\n    var nearestMonth = Math.round(minutes / MINUTES_IN_MONTH);\n    return locale.formatDistance('xMonths', nearestMonth, localizeOptions); // 1 year up to max Date\n  } else {\n    var monthsSinceStartOfYear = months % 12;\n    var years = Math.floor(months / 12); // N years up to 1 years 3 months\n\n    if (monthsSinceStartOfYear < 3) {\n      return locale.formatDistance('aboutXYears', years, localizeOptions); // N years 3 months up to N years 9 months\n    } else if (monthsSinceStartOfYear < 9) {\n      return locale.formatDistance('overXYears', years, localizeOptions); // N years 9 months up to N year 12 months\n    } else {\n      return locale.formatDistance('almostXYears', years + 1, localizeOptions);\n    }\n  }\n}","import distanceInWords from \"../formatDistance/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name formatDistanceToNow\n * @category Common Helpers\n * @summary Return the distance between the given date and now in words.\n * @pure false\n *\n * @description\n * Return the distance between the given date and now in words.\n *\n * | Distance to now                                                   | Result              |\n * |-------------------------------------------------------------------|---------------------|\n * | 0 ... 30 secs                                                     | less than a minute  |\n * | 30 secs ... 1 min 30 secs                                         | 1 minute            |\n * | 1 min 30 secs ... 44 mins 30 secs                                 | [2..44] minutes     |\n * | 44 mins ... 30 secs ... 89 mins 30 secs                           | about 1 hour        |\n * | 89 mins 30 secs ... 23 hrs 59 mins 30 secs                        | about [2..24] hours |\n * | 23 hrs 59 mins 30 secs ... 41 hrs 59 mins 30 secs                 | 1 day               |\n * | 41 hrs 59 mins 30 secs ... 29 days 23 hrs 59 mins 30 secs         | [2..30] days        |\n * | 29 days 23 hrs 59 mins 30 secs ... 44 days 23 hrs 59 mins 30 secs | about 1 month       |\n * | 44 days 23 hrs 59 mins 30 secs ... 59 days 23 hrs 59 mins 30 secs | about 2 months      |\n * | 59 days 23 hrs 59 mins 30 secs ... 1 yr                           | [2..12] months      |\n * | 1 yr ... 1 yr 3 months                                            | about 1 year        |\n * | 1 yr 3 months ... 1 yr 9 month s                                  | over 1 year         |\n * | 1 yr 9 months ... 2 yrs                                           | almost 2 years      |\n * | N yrs ... N yrs 3 months                                          | about N years       |\n * | N yrs 3 months ... N yrs 9 months                                 | over N years        |\n * | N yrs 9 months ... N+1 yrs                                        | almost N+1 years    |\n *\n * With `options.includeSeconds == true`:\n * | Distance to now     | Result               |\n * |---------------------|----------------------|\n * | 0 secs ... 5 secs   | less than 5 seconds  |\n * | 5 secs ... 10 secs  | less than 10 seconds |\n * | 10 secs ... 20 secs | less than 20 seconds |\n * | 20 secs ... 40 secs | half a minute        |\n * | 40 secs ... 60 secs | less than a minute   |\n * | 60 secs ... 90 secs | 1 minute             |\n *\n * > ⚠️ Please note that this function is not present in the FP submodule as\n * > it uses `Date.now()` internally hence impure and can't be safely curried.\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * - The function was renamed from `distanceInWordsToNow ` to `formatDistanceToNow`\n *   to make its name consistent with `format` and `formatRelative`.\n *\n *   ```javascript\n *   // Before v2.0.0\n *\n *   distanceInWordsToNow(new Date(2014, 6, 2), { addSuffix: true })\n *   //=> 'in 6 months'\n *\n *   // v2.0.0 onward\n *\n *   formatDistanceToNow(new Date(2014, 6, 2), { addSuffix: true })\n *   //=> 'in 6 months'\n *   ```\n *\n * @param {Date|Number} date - the given date\n * @param {Object} [options] - the object with options\n * @param {Boolean} [options.includeSeconds=false] - distances less than a minute are more detailed\n * @param {Boolean} [options.addSuffix=false] - result specifies if now is earlier or later than the passed date\n * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}\n * @returns {String} the distance in words\n * @throws {TypeError} 1 argument required\n * @throws {RangeError} `date` must not be Invalid Date\n * @throws {RangeError} `options.locale` must contain `formatDistance` property\n *\n * @example\n * // If today is 1 January 2015, what is the distance to 2 July 2014?\n * var result = formatDistanceToNow(\n *   new Date(2014, 6, 2)\n * )\n * //=> '6 months'\n *\n * @example\n * // If now is 1 January 2015 00:00:00,\n * // what is the distance to 1 January 2015 00:00:15, including seconds?\n * var result = formatDistanceToNow(\n *   new Date(2015, 0, 1, 0, 0, 15),\n *   {includeSeconds: true}\n * )\n * //=> 'less than 20 seconds'\n *\n * @example\n * // If today is 1 January 2015,\n * // what is the distance to 1 January 2016, with a suffix?\n * var result = formatDistanceToNow(\n *   new Date(2016, 0, 1),\n *   {addSuffix: true}\n * )\n * //=> 'in about 1 year'\n *\n * @example\n * // If today is 1 January 2015,\n * // what is the distance to 1 August 2016 in Esperanto?\n * var eoLocale = require('date-fns/locale/eo')\n * var result = formatDistanceToNow(\n *   new Date(2016, 7, 1),\n *   {locale: eoLocale}\n * )\n * //=> 'pli ol 1 jaro'\n */\n\nexport default function formatDistanceToNow(dirtyDate, dirtyOptions) {\n  requiredArgs(1, arguments);\n  return distanceInWords(dirtyDate, Date.now(), dirtyOptions);\n}","import { BentoLoadingButtonState } from '@/core/components/loading-button/loading-button.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoHeaderVariant {\n    PAGE = 'page',\n    COMPONENT = 'component',\n}\n\nexport interface BentoHeaderReloadButton {\n    title: string;\n    event?: (event: Event) => void;\n    state?: `${BentoLoadingButtonState}`;\n}\n","<template>\n    <header class=\"b-header\" :class=\"conditionalClasses\">\n        <div class=\"b-header__wrapper\">\n            <div class=\"b-header__title\">\n                <div>\n                    <bento-typography v-bind=\"typography\" class=\"b-header__text\">{{ title }}</bento-typography>\n                    <info-icon-with-popover\n                        v-if=\"infoIconTooltipText || hasSlot('infoIconTooltipContent')\"\n                        class=\"b-header__tooltip\"\n                        :popover-text=\"infoIconTooltipText\"\n                    >\n                        <template v-if=\"hasSlot('infoIconTooltipContent')\" #default\n                            ><slot name=\"infoIconTooltipContent\"\n                        /></template>\n                    </info-icon-with-popover>\n                </div>\n                <div v-if=\"lastUpdated\" class=\"b-header__timestamp-section\">\n                    <bento-typography class=\"b-header__timestamp\" el=\"div\">\n                        {{ timestamp }}\n                    </bento-typography>\n                    <bento-loading-button\n                        v-if=\"reloadButton\"\n                        variant=\"tertiary\"\n                        :state=\"reloadButton.state\"\n                        @click=\"reloadButton.event\"\n                        ><template #iconLeft><reload-icon aria-hidden=\"true\" /></template\n                        >{{ reloadButton.title }}</bento-loading-button\n                    >\n                </div>\n            </div>\n            <button-actions-with-menu\n                v-if=\"actions\"\n                :actions=\"actions\"\n                :displayed-actions=\"2\"\n                class=\"b-header__actions\"\n            />\n        </div>\n    </header>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import ReloadIcon from '@adyen/ui-assets-icons-16/vue/refresh';\n    import { InfoIconWithPopover } from '@/internal';\n    import { BentoButtonActionsList, BentoLoadingButton } from '@/components/button';\n    import { useHasSlot } from '@/composables';\n    import { BentoHeaderReloadButton, BentoHeaderVariant } from './header.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { getDateLocale } from '@/utils/ts/get-date-locale/get-date-locale';\n    import ButtonActionsWithMenu from '../internal/button-actions-with-menu/button-actions-with-menu.vue';\n\n    import formatDistanceToNow from 'date-fns/formatDistanceToNow';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-header',\n        components: {\n            BentoTypography,\n            ButtonActionsWithMenu,\n            BentoLoadingButton,\n            InfoIconWithPopover,\n            ReloadIcon,\n        },\n        props: {\n            /**\n             * Array of BentoButtonActionsList to show to the right of the title\n             */\n            actions: {\n                type: Array as PropType<BentoButtonActionsList>,\n                default: null,\n            },\n\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: { type: InfoIconWithPopover.props.popoverText.type, default: null },\n\n            /**\n             * Popover position of the info icon text.\n             */\n            infoIconPopoverPosition: {\n                type: InfoIconWithPopover.props.popoverPosition.type,\n                default: InfoIconWithPopover.props.popoverPosition.default,\n                validator: InfoIconWithPopover.props.popoverPosition.validator,\n            },\n\n            /**\n             * JavaScript \"Date\" object for when the content was last updated\n             */\n            lastUpdated: { type: [Date, Number], default: null },\n\n            /**\n             * Variant represents type of Header\n             * @values page, component\n             */\n            variant: {\n                type: String as PropType<BentoHeaderVariant | `${BentoHeaderVariant}`>,\n                default: BentoHeaderVariant.PAGE,\n                validator: (value: BentoHeaderVariant) => Object.values(BentoHeaderVariant).includes(value),\n            },\n\n            /**\n             * Text used as a title\n             */\n            title: { type: String, required: true },\n\n            /**\n             * Reload button which shows next to the header's timestamp\n             * {@see BentoHeaderReloadButton}\n             */\n            reloadButton: {\n                type: Object as PropType<BentoHeaderReloadButton>,\n                default: null,\n            },\n        },\n        emits: ['reload'],\n        setup(props, { slots }) {\n            const { t, locale } = useI18n<{ message: MessageSchema }>({ messages });\n            // TODO to replace with dynamic import\n            const locales = getDateLocale();\n\n            const conditionalClasses = computed(() => ({\n                'b-header--component': props.variant === BentoHeaderVariant.COMPONENT,\n            }));\n\n            const typography = computed(() => ({\n                el: props.variant === BentoHeaderVariant.PAGE ? BentoTypographyElement.H1 : BentoTypographyElement.H2,\n                variant: BentoTypographyVariant.TITLE,\n                medium: props.variant === BentoHeaderVariant.COMPONENT,\n                large: props.variant === BentoHeaderVariant.PAGE,\n            }));\n\n            const timestamp = computed(() =>\n                props.lastUpdated\n                    ? t('lastUpdated', {\n                          date: formatDistanceToNow(props.lastUpdated, {\n                              locale: locales[locale.value.substring(0, 2)] || locales.enUS,\n                          }),\n                      })\n                    : null\n            );\n            return {\n                hasSlot: useHasSlot(slots),\n                conditionalClasses,\n                timestamp,\n                typography,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./header.scss\" />\n"],"names":["differenceInMilliseconds","dateLeft","dateRight","requiredArgs","toDate","roundingMap","value","defaultRoundingMethod","getRoundingMethod","method","differenceInSeconds","options","diff","MINUTES_IN_DAY","MINUTES_IN_ALMOST_TWO_DAYS","MINUTES_IN_MONTH","MINUTES_IN_TWO_MONTHS","formatDistance","dirtyDate","dirtyBaseDate","locale$1","locale","comparison","compareAsc","localizeOptions","cloneObject","seconds","offsetInSeconds","getTimezoneOffsetInMilliseconds","minutes","months","hours","days","differenceInMonths","nearestMonth","monthsSinceStartOfYear","years","formatDistanceToNow","dirtyOptions","BentoHeaderVariant","BentoHeaderVariant2","_sfc_main","defineComponent","messages","BentoTypography","ButtonActionsWithMenu","BentoLoadingButton","InfoIconWithPopover","RefreshIcon","props","slots","t","useI18n","locales","getDateLocale","conditionalClasses","computed","typography","BentoTypographyElement","BentoTypographyVariant","timestamp","useHasSlot"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4]}

package/dist/chunks/{index.CU8GKq4C.js → index.-wO_BQCb.js}

@@ -363,7 +363,8 @@ export {
   y as e,
   ee as f,
   Y as g,
+  q as h,
   oe as u,
   Z as w
 };
-//# sourceMappingURL=index.CU8GKq4C.js.map
+//# sourceMappingURL=index.-wO_BQCb.js.map