@adyen/bento-vue2 1.9.0 → 1.10.0

package/dist/timeline.js

@@ -1,76 +1,74 @@
-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.7dd8d4de.js";
-import { BentoTextarea as X } from "./textarea.js";
+import { defineComponent as Y, computed as r, ref as N, toRefs as Z, provide as A, inject as D, onUnmounted as G } from "vue";
+import { a as z } from "./chunks/button.f3f05408.js";
+import { BentoTextarea as Q } from "./textarea.js";
 import { u as H } from "./chunks/i18n.eb5b985b.js";
-import { BentoButtonActions as G } from "./button.js";
+import { BentoButtonActions as X } from "./button.js";
 import { n as x } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as tt } from "./chunks/index.322692c8.js";
-import { BentoLink as et } from "./link.js";
-import { BentoTag as it } from "./tag.js";
-import { B as at } from "./chunks/index.b201e81d.js";
-import { B as nt, a as st, S as ot } from "./chunks/index.0890dc99.js";
-import { C as lt } from "./chunks/checkmark-circle-fill.345311d2.js";
-import { C as rt } from "./chunks/cross-circle-fill.7c07d16a.js";
-import { r as mt, e as ct, t as N, g as F } from "./chunks/index.f55fdc32.js";
-import { c as dt, a as ut } from "./chunks/index.86453263.js";
-import { g as _t } from "./chunks/unique-id.a2a2b458.js";
-import { u as vt } from "./chunks/use-has-slot.fbeb19ec.js";
-import "./assets/index22.css";
-var k = 1e3 * 60, M = 60 * 24, U = M * 30, B = M * 365;
-function j(e, t) {
+import { B as ee } from "./chunks/index.158c522b.js";
+import { BentoLink as te } from "./link.js";
+import { BentoTag as ie } from "./tag.js";
+import { B as ae, d as se } from "./chunks/index.858b0720.js";
+import { B as ne, a as oe, S as re } from "./chunks/index.9bdf4d78.js";
+import { g as le } from "./chunks/unique-id.a2a2b458.js";
+import { u as me } from "./chunks/use-has-slot.fbeb19ec.js";
+import { r as ce, e as de, t as w, g as k } from "./chunks/index.f55fdc32.js";
+import { c as ue, a as _e } from "./chunks/index.86453263.js";
+import "./assets/index37.css";
+var F = 1e3 * 60, M = 60 * 24, U = M * 30, j = M * 365;
+function $(t, e) {
   var i = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-  mt(2, arguments);
-  var a = i.locale || ct;
+  ce(2, arguments);
+  var a = i.locale || de;
   if (!a.formatDistance)
     throw new RangeError("locale must contain localize.formatDistance property");
-  var b = dt(e, t);
-  if (isNaN(b))
+  var f = ue(t, e);
+  if (isNaN(f))
     throw new RangeError("Invalid time value");
-  var m = ut(i);
-  m.addSuffix = !!i.addSuffix, m.comparison = b;
-  var _, c;
-  b > 0 ? (_ = N(t), c = N(e)) : (_ = N(e), c = N(t));
-  var v = i.roundingMethod == null ? "round" : String(i.roundingMethod), r;
-  if (v === "floor")
-    r = Math.floor;
-  else if (v === "ceil")
-    r = Math.ceil;
-  else if (v === "round")
-    r = Math.round;
+  var l = _e(i);
+  l.addSuffix = !!i.addSuffix, l.comparison = f;
+  var p, c;
+  f > 0 ? (p = w(e), c = w(t)) : (p = w(t), c = w(e));
+  var d = i.roundingMethod == null ? "round" : String(i.roundingMethod), n;
+  if (d === "floor")
+    n = Math.floor;
+  else if (d === "ceil")
+    n = Math.ceil;
+  else if (d === "round")
+    n = Math.round;
   else
     throw new RangeError("roundingMethod must be 'floor', 'ceil' or 'round'");
-  var n = c.getTime() - _.getTime(), d = n / k, C = F(c) - F(_), u = (n - C) / 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);
+  var m = c.getTime() - p.getTime(), u = m / F, C = k(c) - k(p), _ = (m - C) / F, s;
+  if (i.unit == null ? u < 1 ? s = "second" : u < 60 ? s = "minute" : u < M ? s = "hour" : _ < U ? s = "day" : _ < j ? s = "month" : s = "year" : s = String(i.unit), s === "second") {
+    var b = n(m / 1e3);
+    return a.formatDistance("xSeconds", b, l);
   } else if (s === "minute") {
-    var h = r(d);
-    return a.formatDistance("xMinutes", h, m);
+    var g = n(u);
+    return a.formatDistance("xMinutes", g, l);
   } else if (s === "hour") {
-    var y = r(d / 60);
-    return a.formatDistance("xHours", y, m);
+    var I = n(u / 60);
+    return a.formatDistance("xHours", I, l);
   } else if (s === "day") {
-    var w = r(u / M);
-    return a.formatDistance("xDays", w, m);
+    var E = n(_ / M);
+    return a.formatDistance("xDays", E, l);
   } 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);
+    var o = n(_ / U);
+    return o === 12 && i.unit !== "month" ? a.formatDistance("xYears", 1, l) : a.formatDistance("xMonths", o, l);
   } else if (s === "year") {
-    var f = r(u / B);
-    return a.formatDistance("xYears", f, m);
+    var v = n(_ / j);
+    return a.formatDistance("xYears", v, l);
   }
   throw new RangeError("unit must be 'second', 'minute', 'hour', 'day', 'month' or 'year'");
 }
-var S = /* @__PURE__ */ ((e) => (e.BOTTOM = "bottom", e.AFTER_FIRST = "after-first", e.BEFORE_LAST = "before-last", e))(S || {}), ft = /* @__PURE__ */ ((e) => (e.SECOND = "second", e.MINUTE = "minute", e.HOUR = "hour", e.DAY = "day", e.MONTH = "month", e.YEAR = "year", e))(ft || {}), p = /* @__PURE__ */ ((e) => (e.DEFAULT = "SquareSmallIcon", e.SUCCESS = "CheckedCircleIcon", e.CRITICAL = "CrossCircleIcon", e))(p || {});
-const P = Symbol("timeline register entry injection key"), q = Symbol("timeline config obj injection key"), pt = {
+var y = /* @__PURE__ */ ((t) => (t.BOTTOM = "bottom", t.AFTER_FIRST = "after-first", t.BEFORE_LAST = "before-last", t))(y || {}), ve = /* @__PURE__ */ ((t) => (t.SECOND = "second", t.MINUTE = "minute", t.HOUR = "hour", t.DAY = "day", t.MONTH = "month", t.YEAR = "year", t))(ve || {}), S = /* @__PURE__ */ ((t) => (t.DEFAULT = "SquareSmallIcon", t.SUCCESS = "CheckedCircleIcon", t.CRITICAL = "CrossCircleIcon", t))(S || {}), q = /* @__PURE__ */ ((t) => (t.BLACK = "black", t.BLUE = "blue", t.GREEN = "green", t.GREY = "grey", t.ORANGE = "orange", t.RED = "red", t.YELLOW = "yellow", t))(q || {});
+const P = Symbol("timeline register entry injection key"), K = Symbol("timeline config obj injection key"), fe = {
   "en-US": {
     addNote: "Add note",
     cancel: "Cancel"
   }
-}, bt = Y({
-  i18n: { messages: pt },
+}, pe = Y({
+  i18n: { messages: fe },
   name: "bento-timeline",
-  components: { BentoButton: z, BentoButtonActions: G, BentoTextarea: X },
+  components: { BentoButton: z, BentoButtonActions: X, BentoTextarea: Q },
   props: {
     /**
      * If set to true, gives the possibility to manually add notes to the timeline via a textarea
@@ -98,119 +96,117 @@ const P = Symbol("timeline register entry injection key"), q = Symbol("timeline
     }
   },
   emits: ["add-timeline-note"],
-  setup(e, { emit: t }) {
-    const { t: i } = H(), a = o(() => i("addNote")), b = o(() => i("cancel")), m = E(), _ = (l) => {
-      m.value = l;
-    }, c = E(!1), v = () => {
+  setup(t, { emit: e }) {
+    const { t: i } = H(), a = r(() => i("addNote")), f = r(() => i("cancel")), l = N(), p = (o) => {
+      l.value = o;
+    }, c = N(!1), d = () => {
       c.value = !c.value;
-    }, r = () => {
-      t("add-timeline-note", {
-        description: m.value,
+    }, n = () => {
+      e("add-timeline-note", {
+        description: l.value,
         timestamp: { date: /* @__PURE__ */ new Date() },
         type: "note"
-      }), v();
-    }, n = E([]), d = o(
-      () => e.showMore && n.value.length > e.showMore.limit ? n.value.length - e.showMore.limit : null
-    ), C = E(!1), { timegapLimit: u } = Q(e), s = o(() => {
-      if (!e.showMore)
+      }), d();
+    }, m = N([]), u = r(
+      () => t.showMore && m.value.length > t.showMore.limit ? m.value.length - t.showMore.limit : null
+    ), C = N(!1), { timegapLimit: _ } = Z(t), s = r(() => {
+      if (!t.showMore)
         return null;
-      const l = Array.from(n.value.keys());
-      return e.showMore.placement === S.BEFORE_LAST ? [
-        ...l.slice(0, e.showMore.limit - 1),
-        l[l.length - 1]
-      ] : e.showMore.placement === S.AFTER_FIRST ? [l[0], ...l.slice(-(e.showMore.limit - 1))] : l.slice(0, e.showMore.limit);
-    }), g = o(() => {
-      if (!e.showMore)
+      const o = Array.from(m.value.keys());
+      return t.showMore.placement === y.BEFORE_LAST ? [
+        ...o.slice(0, t.showMore.limit - 1),
+        o[o.length - 1]
+      ] : t.showMore.placement === y.AFTER_FIRST ? [o[0], ...o.slice(-(t.showMore.limit - 1))] : o.slice(0, t.showMore.limit);
+    }), b = r(() => {
+      if (!t.showMore)
         return null;
-      switch (e.showMore.placement) {
-        case S.BEFORE_LAST:
-          return e.showMore.limit - 2;
-        case S.AFTER_FIRST:
+      switch (t.showMore.placement) {
+        case y.BEFORE_LAST:
+          return t.showMore.limit - 2;
+        case y.AFTER_FIRST:
           return 0;
-        case S.BOTTOM:
+        case y.BOTTOM:
         default:
-          return e.showMore.limit - 1;
+          return t.showMore.limit - 1;
       }
-    }), h = (l) => () => {
-      var f;
-      n.value = (f = n.value) == null ? void 0 : f.filter((T, I) => I !== l);
-    }, y = ({ 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 = {
+    }), g = (o) => () => {
+      var v;
+      m.value = (v = m.value) == null ? void 0 : v.filter((T, h) => h !== o);
+    }, I = ({ title: o, description: v, date: T }) => {
+      const h = m.value.length;
+      return m.value.push({ title: o, description: v, date: T }), { timelineEntries: m, index: h, unregisterTimelineEntry: g(h) };
+    }, E = {
       showAll: C,
-      showMoreIndex: g,
-      hiddenItems: d,
+      showMoreIndex: b,
+      hiddenItems: u,
       visibleIndexes: s,
-      timegapLimit: u
+      timegapLimit: _
     };
-    return L(P, y), L(q, w), {
+    return A(P, I), A(K, E), {
       addNoteLabel: a,
-      cancelLabel: b,
-      toggleAddNote: v,
-      updateNoteContent: _,
-      addNoteToTimeline: r,
+      cancelLabel: f,
+      toggleAddNote: d,
+      updateNoteContent: p,
+      addNoteToTimeline: n,
       showAddNoteTextArea: c
     };
   }
 });
-var gt = function() {
-  var t = this, i = t._self._c;
-  return t._self._setupProxy, i("div", { staticClass: "b-timeline" }, [t.addNote ? i("div", { staticClass: "b-timeline__add-note-section" }, [t.showAddNoteTextArea ? t._e() : i("bento-button", { attrs: { variant: "tertiary" }, on: { click: t.toggleAddNote } }, [t._v(t._s(t.addNoteLabel))]), t.showAddNoteTextArea ? i("div", [i("bento-textarea", { attrs: { label: t.addNoteLabel, "character-limit": 150, resizable: "vertical" }, on: { input: t.updateNoteContent } }), i("bento-button-actions", { attrs: { actions: [
-    { title: t.addNoteLabel, event: t.addNoteToTimeline },
-    { title: t.cancelLabel, event: t.toggleAddNote }
-  ] } })], 1) : t._e()], 1) : t._e(), i("ol", { staticClass: "b-timeline__items" }, [t._t("default")], 2)]);
-}, ht = [], Ct = /* @__PURE__ */ x(
-  bt,
-  gt,
-  ht,
+var be = 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)]);
+}, ge = [], he = /* @__PURE__ */ x(
+  pe,
+  be,
+  ge,
   !1,
   null,
   "5d7abc30",
   null,
   null
 );
-const Kt = Ct.exports;
-let $ = 0;
-const yt = {
+const Pe = he.exports;
+let B = 0;
+const ye = {
   beforeCreate() {
-    this.uuid = $.toString(), $ += 1;
+    this.uuid = B.toString(), B += 1;
   }
 };
-var Tt = function() {
-  var t = this, i = t._self._c;
-  return i("svg", t._b({ staticClass: "ui-assets-icons-16", 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", 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" } })]);
-}, It = [], St = /* @__PURE__ */ x(
-  yt,
-  Tt,
-  It,
+var Ce = function() {
+  var e = this, i = e._self._c;
+  return i("svg", e._b({ staticClass: "ui-assets-icons-16", 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", 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" } })]);
+}, Ie = [], Ee = /* @__PURE__ */ x(
+  ye,
+  Ce,
+  Ie,
   !1,
   null,
   null,
   null,
   null
 );
-const wt = St.exports, Et = {
+const Te = Ee.exports, Ne = {
   "en-US": {
     timegap: "{timegap} passed between the timeline events",
     showMore: "Show {items} more",
     showLess: "Show less"
   }
-}, Nt = Y({
+}, we = Y({
   name: "bento-timeline-item",
   components: {
     BentoButton: z,
-    BentoDate: tt,
-    BentoLink: et,
-    BentoTag: it,
-    BentoTypography: at,
-    BentoStructuredList: nt,
-    BentoStructuredListItem: st,
-    CrossCircleIcon: rt,
-    CheckedCircleIcon: lt,
-    SquareSmallIcon: wt
+    BentoDate: ee,
+    BentoLink: te,
+    BentoTag: ie,
+    BentoTypography: ae,
+    BentoStructuredList: ne,
+    BentoStructuredListItem: oe,
+    SquareSmallIcon: Te
   },
-  i18n: { messages: Et },
+  i18n: { messages: Ne },
   props: {
     /**
      * Additional timestamp of the event
@@ -233,6 +229,15 @@ const wt = St.exports, Et = {
       type: String,
       default: null
     },
+    /**
+     * Modifier that changes the color of the timeline icon
+     * @values blue, black, green, grey, orange, red, yellow
+     */
+    status: {
+      type: String,
+      default: "black",
+      validator: (t) => Object.values(q).includes(t)
+    },
     /**
      * Tag props that will be passed down to inner tag component
      */
@@ -261,103 +266,105 @@ const wt = St.exports, Et = {
     type: {
       type: String,
       default: "milestone",
-      validator: (e) => ["milestone", "note"].includes(e)
+      validator: (t) => ["milestone", "note"].includes(t)
     },
     /**
      * Variant for the timeline item
      * @values DEFAULT, SUCCESS, CRITICAL
+     *
+     * @deprecated Use "status" prop instead
      */
     variant: {
       type: String,
-      default: p.DEFAULT,
-      validator: (e) => Object.values(p).includes(e)
+      default: null,
+      validator: (t) => Object.values(S).includes(t)
     }
   },
-  setup(e, { slots: t }) {
-    const { t: i } = H(), a = o(() => e.type === "note"), b = o(
-      () => a.value ? p.DEFAULT : e.variant
-    ), m = o(() => ({
-      "b-timeline-item__icon--default": e.variant === p.DEFAULT || a.value,
-      "b-timeline-item__icon--success": e.variant === p.SUCCESS && !a.value,
-      "b-timeline-item__icon--critical": e.variant === p.CRITICAL && !a.value
-    })), _ = o(() => ({
-      "b-timeline-item__title--default": e.variant === p.DEFAULT
-    })), c = o(() => ({
+  setup(t, { slots: e }) {
+    const { t: i } = H(), a = r(() => t.type === "note"), f = r(() => t.variant === S.CRITICAL ? "red" : t.variant === S.SUCCESS ? "green" : t.status);
+    t.variant && se(
+      'BentoTimelineItem "variant" property',
+      `Use the BentoTimelineItem "status" modifier instead to modify the color of the timeline icon.
+                    <bento-timeline-item status="red" />`,
+      "2.0.0"
+    );
+    const l = r(() => ({
+      [`b-timeline-item__icon--${f.value}`]: f.value && !a.value
+    })), p = r(() => ({
       "b-timeline-item--note": a.value
     }));
-    L(ot, !0);
-    const v = D(P), { timelineEntries: r, index: n, unregisterTimelineEntry: d } = v({
-      title: e.title,
-      date: e.timestamp.date
+    A(re, !0);
+    const c = D(P), { timelineEntries: d, index: n, unregisterTimelineEntry: m } = c({
+      title: t.title,
+      date: t.timestamp.date
     });
-    W(() => d());
-    const { showAll: C, showMoreIndex: u, hiddenItems: s, visibleIndexes: g, timegapLimit: h } = D(q), y = o(() => C.value || !g.value), w = o(() => y.value ? !0 : g.value.includes(n)), l = o(() => typeof e.title == "object"), f = o(() => e.title), T = o(() => {
-      var R;
-      if (!h.value)
+    G(() => m());
+    const { showAll: u, showMoreIndex: C, hiddenItems: _, visibleIndexes: s, timegapLimit: b } = D(K), g = r(() => u.value || !s.value), I = r(() => g.value ? !0 : s.value.includes(n)), E = r(() => typeof t.title == "object"), o = r(() => t.title), v = r(() => {
+      var O;
+      if (!b.value)
         return null;
-      const A = (R = r.value[n - 1]) == null ? void 0 : R.date, K = y.value || g.value.includes(n - 1);
-      if (!A || !K)
+      const L = (O = d.value[n - 1]) == null ? void 0 : O.date, V = g.value || s.value.includes(n - 1);
+      if (!L || !V)
         return null;
-      const { date: O } = r.value[n], Z = parseInt(
-        j(A, O, { unit: h.value.unit }),
+      const { date: R } = d.value[n], W = parseInt(
+        $(L, R, { unit: b.value.unit }),
         10
       );
-      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 b.value.amount < W ? $(L, R, { roundingMethod: "floor" }) : null;
+    }), T = r(() => v.value ? i("timegap", { timegap: v.value }) : ""), h = r(() => _.value && C.value === n), J = r(() => n === d.value.length - 1);
     return {
       // Values
       isNoteType: a,
-      iconConditionalClasses: m,
-      titleConditionalClasses: _,
-      conditionalClasses: c,
-      displayShowMoreButton: V,
-      showAll: C,
-      hiddenItems: s,
-      isVisible: w,
-      isLinkTitle: l,
-      linkTitleProps: f,
-      timegap: T,
-      timegapAriaLabel: I,
+      iconConditionalClasses: l,
+      conditionalClasses: p,
+      displayShowMoreButton: h,
+      showAll: u,
+      hiddenItems: _,
+      isVisible: I,
+      isLinkTitle: E,
+      linkTitleProps: o,
+      timegap: v,
+      timegapAriaLabel: T,
       isLastItem: J,
-      computedIconVariant: b,
       // Methods
-      generateUid: _t,
-      hasSlot: vt(t),
+      generateUid: le,
+      hasSlot: me(e),
       t: i
     };
   }
 });
-var Mt = function() {
-  var t = this, i = t._self._c;
-  return t._self._setupProxy, t.isVisible ? i("li", { staticClass: "b-timeline-item", class: t.conditionalClasses }, [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.computedIconVariant, { 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" }, [t.isNoteType ? t._e() : 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.isNoteType && 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.isNoteType && t.dataList ? i("div", { staticClass: "b-timeline-item__data-list" }, [i("bento-structured-list", t._l(t.dataList, function(a) {
-    return i("bento-structured-list-item", { key: t.generateUid(a.label), attrs: { label: a.label } }, [i("bento-typography", { attrs: { variant: "caption" } }, [t._v(t._s(a.value))])], 1);
-  }), 1)], 1) : t._e(), !t.isNoteType && 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(a) {
-    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();
-}, At = [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 Se = 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("square-small-icon", { 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", 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();
+}, Me = [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" })]);
-}], Lt = /* @__PURE__ */ x(
-  Nt,
-  Mt,
-  At,
+  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(
+  we,
+  Se,
+  Me,
   !1,
   null,
-  "7f5f4898",
+  "4353df93",
   null,
   null
 );
-const Zt = Lt.exports;
+const Ke = Le.exports;
 export {
-  Kt as BentoTimeline,
-  ft as BentoTimelineGapUnit,
-  Zt as BentoTimelineItem,
-  p as BentoTimelineItemVariant,
-  S as BentoTimelineShowMorePlacement
+  Pe as BentoTimeline,
+  ve as BentoTimelineGapUnit,
+  Ke as BentoTimelineItem,
+  S as BentoTimelineItemVariant,
+  y as BentoTimelineShowMorePlacement,
+  q as BentoTimelineStatus
 };
 //# sourceMappingURL=timeline.js.map