@adyen/bento-vue2 1.7.1 → 1.8.0

package/dist/timeline.js

@@ -1,33 +1,35 @@
-import { defineComponent as $, ref as O, computed as c, toRefs as P, provide as M, inject as R, onUnmounted as J } from "vue";
-import { n as L } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { a as K } from "./chunks/button.1dfed6fa.js";
-import { B as V } from "./chunks/index.c2dde601.js";
-import { BentoLink as Z } from "./link.js";
-import { BentoTag as Q } from "./tag.js";
-import { B as W } from "./chunks/index.4de86bd4.js";
-import { B as X, a as G, S as tt } from "./chunks/index.f649c9af.js";
-import { C as et } from "./chunks/checkmark-circle-fill.2cfbb81b.js";
-import { C as it } from "./chunks/cross-circle-fill.d5e9ae44.js";
-import { r as st, e as at, t as C, g as A } from "./chunks/index.f55fdc32.js";
-import { c as nt, a as rt } from "./chunks/index.86453263.js";
-import { g as lt } from "./chunks/unique-id.a2a2b458.js";
-import { u as ot } from "./chunks/i18n.155748d6.js";
-import { u as mt } from "./chunks/use-has-slot.6052d56a.js";
-import "./assets/index42.css";
-var D = 1e3 * 60, y = 60 * 24, F = y * 30, k = y * 365;
-function U(e, t) {
+import { defineComponent as Y, computed as o, ref as E, toRefs as Q, provide as L, inject as D, onUnmounted as W } from "vue";
+import { a as z } from "./chunks/button.e09d5980.js";
+import { BentoTextarea as X } from "./textarea.js";
+import { u as H } from "./chunks/i18n.155748d6.js";
+import { BentoButtonActions as G } from "./button.js";
+import { n as x } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as ee } from "./chunks/index.b83f8b7e.js";
+import { BentoLink as te } from "./link.js";
+import { BentoTag as ie } from "./tag.js";
+import { B as ae } from "./chunks/index.965ac1af.js";
+import { B as ne, a as se, S as oe } from "./chunks/index.a5de5242.js";
+import { C as le } from "./chunks/checkmark-circle-fill.2cfbb81b.js";
+import { C as re } from "./chunks/cross-circle-fill.d5e9ae44.js";
+import { r as me, e as ce, t as N, g as F } from "./chunks/index.f55fdc32.js";
+import { c as de, a as ue } from "./chunks/index.86453263.js";
+import { g as _e } from "./chunks/unique-id.a2a2b458.js";
+import { u as ve } from "./chunks/use-has-slot.6052d56a.js";
+import "./assets/index27.css";
+var k = 1e3 * 60, M = 60 * 24, U = M * 30, B = M * 365;
+function j(t, e) {
   var i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-  st(2, arguments);
-  var s = i.locale || at;
-  if (!s.formatDistance)
+  me(2, arguments);
+  var a = i.locale || ce;
+  if (!a.formatDistance)
     throw new RangeError("locale must contain localize.formatDistance property");
-  var f = nt(e, t);
-  if (isNaN(f))
+  var b = de(t, e);
+  if (isNaN(b))
     throw new RangeError("Invalid time value");
-  var l = rt(i);
-  l.addSuffix = !!i.addSuffix, l.comparison = f;
-  var u, o;
-  f > 0 ? (u = C(t), o = C(e)) : (u = C(e), o = C(t));
+  var m = ue(i);
+  m.addSuffix = !!i.addSuffix, m.comparison = b;
+  var _, c;
+  b > 0 ? (_ = N(e), c = N(t)) : (_ = N(t), c = N(e));
   var v = i.roundingMethod == null ? "round" : String(i.roundingMethod), r;
   if (v === "floor")
     r = Math.floor;
@@ -37,32 +39,46 @@ function U(e, t) {
     r = Math.round;
   else
     throw new RangeError("roundingMethod must be 'floor', 'ceil' or 'round'");
-  var a = o.getTime() - u.getTime(), m = a / D, d = A(o) - A(u), _ = (a - d) / D, n;
-  if (i.unit == null ? m < 1 ? n = "second" : m < 60 ? n = "minute" : m < y ? n = "hour" : _ < F ? n = "day" : _ < k ? n = "month" : n = "year" : n = String(i.unit), n === "second") {
-    var I = r(a / 1e3);
-    return s.formatDistance("xSeconds", I, l);
-  } else if (n === "minute") {
-    var E = r(m);
-    return s.formatDistance("xMinutes", E, l);
-  } else if (n === "hour") {
-    var S = r(m / 60);
-    return s.formatDistance("xHours", S, l);
-  } else if (n === "day") {
-    var g = r(_ / y);
-    return s.formatDistance("xDays", g, l);
-  } else if (n === "month") {
-    var b = r(_ / F);
-    return b === 12 && i.unit !== "month" ? s.formatDistance("xYears", 1, l) : s.formatDistance("xMonths", b, l);
-  } else if (n === "year") {
-    var T = r(_ / k);
-    return s.formatDistance("xYears", T, l);
+  var n = c.getTime() - _.getTime(), d = n / k, y = F(c) - F(_), u = (n - y) / k, s;
+  if (i.unit == null ? d < 1 ? s = "second" : d < 60 ? s = "minute" : d < M ? s = "hour" : u < U ? s = "day" : u < B ? s = "month" : s = "year" : s = String(i.unit), s === "second") {
+    var g = r(n / 1e3);
+    return a.formatDistance("xSeconds", g, m);
+  } else if (s === "minute") {
+    var h = r(d);
+    return a.formatDistance("xMinutes", h, m);
+  } else if (s === "hour") {
+    var C = r(d / 60);
+    return a.formatDistance("xHours", C, m);
+  } else if (s === "day") {
+    var w = r(u / M);
+    return a.formatDistance("xDays", w, m);
+  } else if (s === "month") {
+    var l = r(u / U);
+    return l === 12 && i.unit !== "month" ? a.formatDistance("xYears", 1, m) : a.formatDistance("xMonths", l, m);
+  } else if (s === "year") {
+    var f = r(u / B);
+    return a.formatDistance("xYears", f, m);
   }
   throw new RangeError("unit must be 'second', 'minute', 'hour', 'day', 'month' or 'year'");
 }
-var p = /* @__PURE__ */ ((e) => (e.BOTTOM = "bottom", e.AFTER_FIRST = "after-first", e.BEFORE_LAST = "before-last", e))(p || {}), ct = /* @__PURE__ */ ((e) => (e.SECOND = "second", e.MINUTE = "minute", e.HOUR = "hour", e.DAY = "day", e.MONTH = "month", e.YEAR = "year", e))(ct || {}), h = /* @__PURE__ */ ((e) => (e.DEFAULT = "SquareSmallIcon", e.SUCCESS = "CheckedCircleIcon", e.CRITICAL = "CrossCircleIcon", e))(h || {});
-const B = Symbol("timeline register entry injection key"), Y = Symbol("timeline config obj injection key"), _t = $({
+var S = /* @__PURE__ */ ((t) => (t.BOTTOM = "bottom", t.AFTER_FIRST = "after-first", t.BEFORE_LAST = "before-last", t))(S || {}), fe = /* @__PURE__ */ ((t) => (t.SECOND = "second", t.MINUTE = "minute", t.HOUR = "hour", t.DAY = "day", t.MONTH = "month", t.YEAR = "year", t))(fe || {}), p = /* @__PURE__ */ ((t) => (t.DEFAULT = "SquareSmallIcon", t.SUCCESS = "CheckedCircleIcon", t.CRITICAL = "CrossCircleIcon", t))(p || {});
+const P = Symbol("timeline register entry injection key"), q = Symbol("timeline config obj injection key"), pe = {
+  "en-US": {
+    addNote: "Add note",
+    cancel: "Cancel"
+  }
+}, be = Y({
+  i18n: { messages: pe },
   name: "bento-timeline",
+  components: { BentoButton: z, BentoButtonActions: G, BentoTextarea: X },
   props: {
+    /**
+     * If set to true, gives the possibility to manually add notes to the timeline via a textarea
+     */
+    addNote: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * Object that determines the max number of items to show without clicking the show more button
      * and where in the timeline is the show more button placed
@@ -81,99 +97,120 @@ const B = Symbol("timeline register entry injection key"), Y = Symbol("timeline
       default: null
     }
   },
-  setup(e) {
-    const t = O([]), i = c(
-      () => e.showMore && t.value.length > e.showMore.limit ? t.value.length - e.showMore.limit : null
-    ), s = O(!1), { timegapLimit: f } = P(e), l = c(() => {
-      if (!e.showMore)
+  emits: ["add-timeline-note"],
+  setup(t, { emit: e }) {
+    const { t: i } = H(), a = o(() => i("addNote")), b = o(() => i("cancel")), m = E(), _ = (l) => {
+      m.value = l;
+    }, c = E(!1), v = () => {
+      c.value = !c.value;
+    }, r = () => {
+      e("add-timeline-note", {
+        description: m.value,
+        timestamp: { date: /* @__PURE__ */ new Date() },
+        type: "note"
+      }), v();
+    }, n = E([]), d = o(
+      () => t.showMore && n.value.length > t.showMore.limit ? n.value.length - t.showMore.limit : null
+    ), y = E(!1), { timegapLimit: u } = Q(t), s = o(() => {
+      if (!t.showMore)
         return null;
-      const a = Array.from(t.value.keys());
-      return e.showMore.placement === p.BEFORE_LAST ? [
-        ...a.slice(0, e.showMore.limit - 1),
-        a[a.length - 1]
-      ] : e.showMore.placement === p.AFTER_FIRST ? [a[0], ...a.slice(-(e.showMore.limit - 1))] : a.slice(0, e.showMore.limit);
-    }), u = c(() => {
-      if (!e.showMore)
+      const l = Array.from(n.value.keys());
+      return t.showMore.placement === S.BEFORE_LAST ? [
+        ...l.slice(0, t.showMore.limit - 1),
+        l[l.length - 1]
+      ] : t.showMore.placement === S.AFTER_FIRST ? [l[0], ...l.slice(-(t.showMore.limit - 1))] : l.slice(0, t.showMore.limit);
+    }), g = o(() => {
+      if (!t.showMore)
         return null;
-      switch (e.showMore.placement) {
-        case p.BEFORE_LAST:
-          return e.showMore.limit - 2;
-        case p.AFTER_FIRST:
+      switch (t.showMore.placement) {
+        case S.BEFORE_LAST:
+          return t.showMore.limit - 2;
+        case S.AFTER_FIRST:
           return 0;
-        case p.BOTTOM:
+        case S.BOTTOM:
         default:
-          return e.showMore.limit - 1;
+          return t.showMore.limit - 1;
       }
-    }), o = (a) => () => {
-      var m;
-      t.value = (m = t.value) == null ? void 0 : m.filter((d, _) => _ !== a);
-    }, v = ({ title: a, date: m }) => {
-      const d = t.value.length;
-      return t.value.push({ title: a, date: m }), { timelineEntries: t, index: d, unregisterTimelineEntry: o(d) };
-    }, r = {
-      showAll: s,
-      showMoreIndex: u,
-      hiddenItems: i,
-      visibleIndexes: l,
-      timegapLimit: f
+    }), h = (l) => () => {
+      var f;
+      n.value = (f = n.value) == null ? void 0 : f.filter((T, I) => I !== l);
+    }, C = ({ title: l, description: f, date: T }) => {
+      const I = n.value.length;
+      return n.value.push({ title: l, description: f, date: T }), { timelineEntries: n, index: I, unregisterTimelineEntry: h(I) };
+    }, w = {
+      showAll: y,
+      showMoreIndex: g,
+      hiddenItems: d,
+      visibleIndexes: s,
+      timegapLimit: u
+    };
+    return L(P, C), L(q, w), {
+      addNoteLabel: a,
+      cancelLabel: b,
+      toggleAddNote: v,
+      updateNoteContent: _,
+      addNoteToTimeline: r,
+      showAddNoteTextArea: c
     };
-    M(B, v), M(Y, r);
   }
 });
-var ut = function() {
-  var t = this, i = t._self._c;
-  return t._self._setupProxy, i("ol", { staticClass: "b-timeline" }, [t._t("default")], 2);
-}, dt = [], ft = /* @__PURE__ */ L(
-  _t,
-  ut,
-  dt,
+var ge = function() {
+  var e = this, i = e._self._c;
+  return e._self._setupProxy, i("div", { staticClass: "b-timeline" }, [e.addNote ? i("div", { staticClass: "b-timeline__add-note-section" }, [e.showAddNoteTextArea ? e._e() : i("bento-button", { attrs: { variant: "tertiary" }, on: { click: e.toggleAddNote } }, [e._v(e._s(e.addNoteLabel))]), e.showAddNoteTextArea ? i("div", [i("bento-textarea", { attrs: { label: e.addNoteLabel, "character-limit": 150, resizable: "vertical" }, on: { input: e.updateNoteContent } }), i("bento-button-actions", { attrs: { actions: [
+    { title: e.addNoteLabel, event: e.addNoteToTimeline },
+    { title: e.cancelLabel, event: e.toggleAddNote }
+  ] } })], 1) : e._e()], 1) : e._e(), i("ol", { staticClass: "b-timeline__items" }, [e._t("default")], 2)]);
+}, he = [], ye = /* @__PURE__ */ x(
+  be,
+  ge,
+  he,
   !1,
   null,
-  "cc50a8c5",
+  "5d7abc30",
   null,
   null
 );
-const Bt = ft.exports;
-let j = 0;
-const vt = {
+const Ke = ye.exports;
+let $ = 0;
+const Ce = {
   beforeCreate() {
-    this.uuid = j.toString(), j += 1;
+    this.uuid = $.toString(), $ += 1;
   }
 };
-var ht = function() {
-  var t = this, i = t._self._c;
-  return i("svg", t._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? i("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), i("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V10.5C3.25 11.7426 4.25736 12.75 5.5 12.75H10.5C11.7426 12.75 12.75 11.7426 12.75 10.5V5.5C12.75 4.25736 11.7426 3.25 10.5 3.25H5.5Z", "clip-rule": "evenodd" } })]);
-}, pt = [], gt = /* @__PURE__ */ L(
-  vt,
-  ht,
-  pt,
+var Te = function() {
+  var e = this, i = e._self._c;
+  return i("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? i("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), i("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V10.5C3.25 11.7426 4.25736 12.75 5.5 12.75H10.5C11.7426 12.75 12.75 11.7426 12.75 10.5V5.5C12.75 4.25736 11.7426 3.25 10.5 3.25H5.5Z", "clip-rule": "evenodd" } })]);
+}, Ie = [], Se = /* @__PURE__ */ x(
+  Ce,
+  Te,
+  Ie,
   !1,
   null,
   "f702de38",
   null,
   null
 );
-const bt = gt.exports, Ct = {
+const we = Se.exports, Ee = {
   "en-US": {
     timegap: "{timegap} passed between the timeline events",
     showMore: "Show {items} more",
     showLess: "Show less"
   }
-}, yt = $({
+}, Ne = Y({
   name: "bento-timeline-item",
   components: {
-    BentoButton: K,
-    BentoDate: V,
-    BentoLink: Z,
-    BentoTag: Q,
-    BentoTypography: W,
-    BentoStructuredList: X,
-    BentoStructuredListItem: G,
-    CrossCircleIcon: it,
-    CheckedCircleIcon: et,
-    SquareSmallIcon: bt
+    BentoButton: z,
+    BentoDate: ee,
+    BentoLink: te,
+    BentoTag: ie,
+    BentoTypography: ae,
+    BentoStructuredList: ne,
+    BentoStructuredListItem: se,
+    CrossCircleIcon: re,
+    CheckedCircleIcon: le,
+    SquareSmallIcon: we
   },
-  i18n: { messages: Ct },
+  i18n: { messages: Ee },
   props: {
     /**
      * Additional timestamp of the event
@@ -215,7 +252,16 @@ const bt = gt.exports, Ct = {
      */
     title: {
       type: [Object, String],
-      required: !0
+      default: null
+    },
+    /**
+     * Type of the timeline item. If set to 'note', it renders a note item in the timeline. Defaults to 'milestone'.
+     * @values milestone, note
+     */
+    type: {
+      type: String,
+      default: "milestone",
+      validator: (t) => ["milestone", "note"].includes(t)
     },
     /**
      * Variant for the timeline item
@@ -223,88 +269,95 @@ const bt = gt.exports, Ct = {
      */
     variant: {
       type: String,
-      default: h.DEFAULT,
-      validator: (e) => Object.values(h).includes(e)
+      default: p.DEFAULT,
+      validator: (t) => Object.values(p).includes(t)
     }
   },
-  setup(e, { slots: t }) {
-    const { t: i } = ot(), s = c(() => ({
-      "b-timeline-item__icon--default": e.variant === h.DEFAULT,
-      "b-timeline-item__icon--success": e.variant === h.SUCCESS,
-      "b-timeline-item__icon--critical": e.variant === h.CRITICAL
-    })), f = c(() => ({
-      "b-timeline-item__title--default": e.variant === h.DEFAULT
+  setup(t, { slots: e }) {
+    const { t: i } = H(), a = o(() => t.type === "note"), b = o(
+      () => a.value ? p.DEFAULT : t.variant
+    ), m = o(() => ({
+      "b-timeline-item__icon--default": t.variant === p.DEFAULT || a.value,
+      "b-timeline-item__icon--success": t.variant === p.SUCCESS && !a.value,
+      "b-timeline-item__icon--critical": t.variant === p.CRITICAL && !a.value
+    })), _ = o(() => ({
+      "b-timeline-item__title--default": t.variant === p.DEFAULT
+    })), c = o(() => ({
+      "b-timeline-item--note": a.value
     }));
-    M(tt, !0);
-    const l = R(B), { timelineEntries: u, index: o, unregisterTimelineEntry: v } = l({
-      title: e.title,
-      date: e.timestamp.date
+    L(oe, !0);
+    const v = D(P), { timelineEntries: r, index: n, unregisterTimelineEntry: d } = v({
+      title: t.title,
+      date: t.timestamp.date
     });
-    J(() => v());
-    const { showAll: r, showMoreIndex: a, hiddenItems: m, visibleIndexes: d, timegapLimit: _ } = R(Y), n = c(() => r.value || !d.value), I = c(() => n.value ? !0 : d.value.includes(o)), E = c(() => typeof e.title == "object"), S = c(() => e.title), g = c(() => {
-      var N;
-      if (!_.value)
+    W(() => d());
+    const { showAll: y, showMoreIndex: u, hiddenItems: s, visibleIndexes: g, timegapLimit: h } = D(q), C = o(() => y.value || !g.value), w = o(() => C.value ? !0 : g.value.includes(n)), l = o(() => typeof t.title == "object"), f = o(() => t.title), T = o(() => {
+      var R;
+      if (!h.value)
         return null;
-      const w = (N = u.value[o - 1]) == null ? void 0 : N.date, q = n.value || d.value.includes(o - 1);
-      if (!w || !q)
+      const A = (R = r.value[n - 1]) == null ? void 0 : R.date, K = C.value || g.value.includes(n - 1);
+      if (!A || !K)
         return null;
-      const { date: x } = u.value[o], z = parseInt(
-        U(w, x, { unit: _.value.unit }),
+      const { date: O } = r.value[n], Z = parseInt(
+        j(A, O, { unit: h.value.unit }),
         10
       );
-      return _.value.amount < z ? U(w, x, { roundingMethod: "floor" }) : null;
-    }), b = c(() => g.value ? i("timegap", { timegap: g.value }) : ""), T = c(() => m.value && a.value === o), H = c(() => o === u.value.length - 1);
+      return h.value.amount < Z ? j(A, O, { roundingMethod: "floor" }) : null;
+    }), I = o(() => T.value ? i("timegap", { timegap: T.value }) : ""), V = o(() => s.value && u.value === n), J = o(() => n === r.value.length - 1);
     return {
       // Values
-      iconConditionalClasses: s,
-      titleConditionalClasses: f,
-      displayShowMoreButton: T,
-      showAll: r,
-      hiddenItems: m,
-      isVisible: I,
-      isLinkTitle: E,
-      linkTitleProps: S,
-      timegap: g,
-      timegapAriaLabel: b,
-      isLastItem: H,
+      isNoteType: a,
+      iconConditionalClasses: m,
+      titleConditionalClasses: _,
+      conditionalClasses: c,
+      displayShowMoreButton: V,
+      showAll: y,
+      hiddenItems: s,
+      isVisible: w,
+      isLinkTitle: l,
+      linkTitleProps: f,
+      timegap: T,
+      timegapAriaLabel: I,
+      isLastItem: J,
+      computedIconVariant: b,
       // Methods
-      generateUid: lt,
-      hasSlot: mt(t),
+      generateUid: _e,
+      hasSlot: ve(e),
       t: i
     };
   }
 });
-var It = function() {
-  var t = this, i = t._self._c;
-  return t._self._setupProxy, t.isVisible ? i("li", { staticClass: "b-timeline-item" }, [t.timegap ? i("div", { staticClass: "b-timeline-item__row" }, [t._m(0), i("div", { staticClass: "b-timeline-item__content" }, [i("bento-typography", { staticClass: "b-timeline-item__timegap", attrs: { "aria-label": t.timegapAriaLabel } }, [t._v(" " + t._s(t.timegap) + " ")])], 1)]) : t._e(), i("div", { staticClass: "b-timeline-item__row" }, [i("div", { staticClass: "b-timeline-item__marker", attrs: { "aria-hidden": "true" } }, [i(t.variant, { tag: "component", staticClass: "b-timeline-item__icon", class: t.iconConditionalClasses }), t.isLastItem ? t._e() : i("div", { staticClass: "b-timeline-item__separator", attrs: { "data-testid": "last-timeline-item-separator" } })], 1), i("div", { staticClass: "b-timeline-item__content" }, [i("bento-typography", { staticClass: "b-timeline-item__title", class: t.titleConditionalClasses, attrs: { el: "div", variant: "body", strongest: "", role: "heading" } }, [t.isLinkTitle ? i("bento-link", t._b({ attrs: { "disable-typography": "" } }, "bento-link", t.linkTitleProps, !1), [t._v(t._s(t.linkTitleProps.title))]) : i("span", [t._v(t._s(t.title))])], 1), t.timestamp ? i("bento-typography", { staticClass: "b-timeline-item__timestamp", attrs: { el: "div", variant: "caption" } }, [i("bento-date", { attrs: { date: t.timestamp.date, format: t.timestamp.format, "disable-typography": "" } }), t._v(" " + t._s(t.timestamp.value) + " ")], 1) : t._e(), t.additionalTimestamp ? i("bento-typography", { staticClass: "b-timeline-item__timestamp", attrs: { el: "div", variant: "caption" } }, [i("bento-date", { attrs: { date: t.additionalTimestamp.date, format: t.additionalTimestamp.format, "disable-typography": "" } }), t._v(" " + t._s(t.additionalTimestamp.value) + " ")], 1) : t._e(), t.description || t.hasSlot("default") ? i("bento-typography", { staticClass: "b-timeline-item__description", attrs: { el: "div", variant: "body" } }, [t._t("default", function() {
-    return [t._v(t._s(t.description))];
-  })], 2) : t._e(), t.dataList ? i("div", { staticClass: "b-timeline-item__data-list" }, [i("bento-structured-list", t._l(t.dataList, function(s) {
-    return i("bento-structured-list-item", { key: t.generateUid(s.label), attrs: { label: s.label } }, [i("bento-typography", { attrs: { variant: "caption" } }, [t._v(t._s(s.value))])], 1);
-  }), 1)], 1) : t._e(), t.tag ? i("bento-tag", t._b({ staticClass: "b-timeline-item__tag" }, "bento-tag", t.tag, !1)) : t._e()], 1)]), t.displayShowMoreButton ? i("div", { staticClass: "b-timeline-item__row" }, [t._m(1), i("div", { staticClass: "b-timeline-item__content" }, [i("bento-button", { staticClass: "b-timeline__show-more", attrs: { variant: "tertiary" }, on: { click: function(s) {
-    t.showAll = !t.showAll;
-  } } }, [t.showAll ? [t._v(t._s(t.t("showLess")))] : [t._v(t._s(t.t("showMore", { items: t.hiddenItems })))]], 2)], 1)]) : t._e()]) : t._e();
-}, Et = [function() {
-  var e = this, t = e._self._c;
-  return e._self._setupProxy, t("div", { staticClass: "b-timeline-item__marker", attrs: { "aria-hidden": "true" } }, [t("div", { staticClass: "b-timeline-item__icon b-timeline-item__icon--timegap" }), t("div", { staticClass: "b-timeline-item__separator" })]);
+var Me = function() {
+  var e = this, i = e._self._c;
+  return e._self._setupProxy, e.isVisible ? i("li", { staticClass: "b-timeline-item", class: e.conditionalClasses }, [e.timegap ? i("div", { staticClass: "b-timeline-item__row" }, [e._m(0), i("div", { staticClass: "b-timeline-item__content" }, [i("bento-typography", { staticClass: "b-timeline-item__timegap", attrs: { "aria-label": e.timegapAriaLabel } }, [e._v(" " + e._s(e.timegap) + " ")])], 1)]) : e._e(), i("div", { staticClass: "b-timeline-item__row" }, [i("div", { staticClass: "b-timeline-item__marker", attrs: { "aria-hidden": "true" } }, [i(e.computedIconVariant, { tag: "component", staticClass: "b-timeline-item__icon", class: e.iconConditionalClasses }), e.isLastItem ? e._e() : i("div", { staticClass: "b-timeline-item__separator", attrs: { "data-testid": "last-timeline-item-separator" } })], 1), i("div", { staticClass: "b-timeline-item__content" }, [e.isNoteType ? e._e() : i("bento-typography", { staticClass: "b-timeline-item__title", class: e.titleConditionalClasses, attrs: { el: "div", variant: "body", strongest: "", role: "heading" } }, [e.isLinkTitle ? i("bento-link", e._b({ attrs: { "disable-typography": "" } }, "bento-link", e.linkTitleProps, !1), [e._v(e._s(e.linkTitleProps.title))]) : i("span", [e._v(e._s(e.title))])], 1), e.timestamp ? i("bento-typography", { staticClass: "b-timeline-item__timestamp", attrs: { el: "div", variant: "caption" } }, [i("bento-date", { attrs: { date: e.timestamp.date, format: e.timestamp.format, "disable-typography": "" } }), e._v(" " + e._s(e.timestamp.value) + " ")], 1) : e._e(), !e.isNoteType && e.additionalTimestamp ? i("bento-typography", { staticClass: "b-timeline-item__timestamp", attrs: { el: "div", variant: "caption" } }, [i("bento-date", { attrs: { date: e.additionalTimestamp.date, format: e.additionalTimestamp.format, "disable-typography": "" } }), e._v(" " + e._s(e.additionalTimestamp.value) + " ")], 1) : e._e(), e.description || e.hasSlot("default") ? i("bento-typography", { staticClass: "b-timeline-item__description", attrs: { el: "div", variant: "body" } }, [e._t("default", function() {
+    return [e._v(e._s(e.description))];
+  })], 2) : e._e(), !e.isNoteType && e.dataList ? i("div", { staticClass: "b-timeline-item__data-list" }, [i("bento-structured-list", e._l(e.dataList, function(a) {
+    return i("bento-structured-list-item", { key: e.generateUid(a.label), attrs: { label: a.label } }, [i("bento-typography", { attrs: { variant: "caption" } }, [e._v(e._s(a.value))])], 1);
+  }), 1)], 1) : e._e(), !e.isNoteType && e.tag ? i("bento-tag", e._b({ staticClass: "b-timeline-item__tag" }, "bento-tag", e.tag, !1)) : e._e()], 1)]), e.displayShowMoreButton ? i("div", { staticClass: "b-timeline-item__row" }, [e._m(1), i("div", { staticClass: "b-timeline-item__content" }, [i("bento-button", { staticClass: "b-timeline__show-more", attrs: { variant: "tertiary" }, on: { click: function(a) {
+    e.showAll = !e.showAll;
+  } } }, [e.showAll ? [e._v(e._s(e.t("showLess")))] : [e._v(e._s(e.t("showMore", { items: e.hiddenItems })))]], 2)], 1)]) : e._e()]) : e._e();
+}, Ae = [function() {
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { staticClass: "b-timeline-item__marker", attrs: { "aria-hidden": "true" } }, [e("div", { staticClass: "b-timeline-item__icon b-timeline-item__icon--timegap" }), e("div", { staticClass: "b-timeline-item__separator" })]);
 }, function() {
-  var e = this, t = e._self._c;
-  return e._self._setupProxy, t("div", { staticClass: "b-timeline-item__marker", attrs: { "aria-hidden": "true" } }, [t("div", { staticClass: "b-timeline-item__separator" })]);
-}], St = /* @__PURE__ */ L(
-  yt,
-  It,
-  Et,
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { staticClass: "b-timeline-item__marker", attrs: { "aria-hidden": "true" } }, [e("div", { staticClass: "b-timeline-item__separator" })]);
+}], Le = /* @__PURE__ */ x(
+  Ne,
+  Me,
+  Ae,
   !1,
   null,
-  "e138721f",
+  "7f5f4898",
   null,
   null
 );
-const Yt = St.exports;
+const Ze = Le.exports;
 export {
-  Bt as BentoTimeline,
-  ct as BentoTimelineGapUnit,
-  Yt as BentoTimelineItem,
-  h as BentoTimelineItemVariant,
-  p as BentoTimelineShowMorePlacement
+  Ke as BentoTimeline,
+  fe as BentoTimelineGapUnit,
+  Ze as BentoTimelineItem,
+  p as BentoTimelineItemVariant,
+  S as BentoTimelineShowMorePlacement
 };
 //# sourceMappingURL=timeline.js.map