@adyen/bento-vue3 1.7.0 → 1.8.0

package/dist/timeline.js

@@ -1,68 +1,84 @@
-import { defineComponent as x, ref as q, computed as _, toRefs as me, provide as j, openBlock as i, createElementBlock as f, renderSlot as ee, mergeProps as B, toDisplayString as y, createCommentVNode as I, pushScopeId as te, popScopeId as ie, createElementVNode as p, inject as z, onUnmounted as de, resolveComponent as E, createVNode as w, withCtx as b, createTextVNode as S, createBlock as T, resolveDynamicComponent as ue, normalizeClass as J, Fragment as U, renderList as ce } from "vue";
-import { _ as Y } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { a as _e } from "./chunks/button.e5177388.js";
-import { B as fe } from "./chunks/index.fa7b44f1.js";
-import { BentoLink as ve } from "./link.js";
-import { BentoTag as pe } from "./tag.js";
-import { B as he } from "./chunks/index.2bd3812b.js";
-import { B as ge, a as be, S as ye } from "./chunks/index.77f35162.js";
-import { C as Ie } from "./chunks/checkmark-circle-fill.e6b84561.js";
-import { C as Se } from "./chunks/cross-circle-fill.0feb37b3.js";
-import { r as Ee, e as we, t as N, g as K } from "./chunks/index.f55fdc32.js";
-import { c as Te, a as Ce } from "./chunks/index.86453263.js";
-import { g as Me } from "./chunks/unique-id.a2a2b458.js";
-import { u as ke } from "./chunks/i18n.6c402773.js";
-import { u as Le } from "./chunks/use-has-slot.4d98bf29.js";
-import "./assets/index41.css";
-var P = 1e3 * 60, O = 60 * 24, Z = O * 30, Q = O * 365;
-function W(e, t) {
+import { defineComponent as ie, computed as a, ref as F, toRefs as ve, provide as z, resolveComponent as T, openBlock as t, createElementBlock as f, createBlock as S, withCtx as g, createTextVNode as N, toDisplayString as y, createCommentVNode as _, createVNode as M, createElementVNode as h, renderSlot as ne, mergeProps as H, pushScopeId as oe, popScopeId as ae, inject as P, onUnmounted as pe, normalizeClass as Y, resolveDynamicComponent as he, Fragment as V, renderList as be } from "vue";
+import { a as se } from "./chunks/button.82ed953e.js";
+import { BentoTextarea as ge } from "./textarea.js";
+import { u as le } from "./chunks/i18n.6c402773.js";
+import { BentoButtonActions as ye } from "./button.js";
+import { _ as q } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { B as Ie } from "./chunks/index.0ee895e0.js";
+import { BentoLink as Te } from "./link.js";
+import { BentoTag as Se } from "./tag.js";
+import { B as Ne } from "./chunks/index.75f3672e.js";
+import { B as we, a as Ce, S as Ee } from "./chunks/index.b043371e.js";
+import { C as Me } from "./chunks/checkmark-circle-fill.e6b84561.js";
+import { C as ke } from "./chunks/cross-circle-fill.0feb37b3.js";
+import { r as Le, e as Ae, t as B, g as Z } from "./chunks/index.f55fdc32.js";
+import { c as $e, a as Oe } from "./chunks/index.86453263.js";
+import { g as De } from "./chunks/unique-id.a2a2b458.js";
+import { u as Re } from "./chunks/use-has-slot.4d98bf29.js";
+import "./assets/index44.css";
+var Q = 1e3 * 60, U = 60 * 24, W = U * 30, X = U * 365;
+function G(e, p) {
   var s = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-  Ee(2, arguments);
-  var d = s.locale || we;
-  if (!d.formatDistance)
+  Le(2, arguments);
+  var n = s.locale || Ae;
+  if (!n.formatDistance)
     throw new RangeError("locale must contain localize.formatDistance property");
-  var h = Te(e, t);
-  if (isNaN(h))
+  var I = $e(e, p);
+  if (isNaN(I))
     throw new RangeError("Invalid time value");
-  var a = Ce(s);
-  a.addSuffix = !!s.addSuffix, a.comparison = h;
-  var o, u;
-  h > 0 ? (o = N(t), u = N(e)) : (o = N(e), u = N(t));
-  var g = s.roundingMethod == null ? "round" : String(s.roundingMethod), r;
-  if (g === "floor")
-    r = Math.floor;
-  else if (g === "ceil")
-    r = Math.ceil;
-  else if (g === "round")
-    r = Math.round;
+  var l = Oe(s);
+  l.addSuffix = !!s.addSuffix, l.comparison = I;
+  var r, u;
+  I > 0 ? (r = B(p), u = B(e)) : (r = B(e), u = B(p));
+  var v = s.roundingMethod == null ? "round" : String(s.roundingMethod), d;
+  if (v === "floor")
+    d = Math.floor;
+  else if (v === "ceil")
+    d = Math.ceil;
+  else if (v === "round")
+    d = Math.round;
   else
     throw new RangeError("roundingMethod must be 'floor', 'ceil' or 'round'");
-  var n = u.getTime() - o.getTime(), c = n / P, v = K(u) - K(o), l = (n - v) / P, m;
-  if (s.unit == null ? c < 1 ? m = "second" : c < 60 ? m = "minute" : c < O ? m = "hour" : l < Z ? m = "day" : l < Q ? m = "month" : m = "year" : m = String(s.unit), m === "second") {
-    var A = r(n / 1e3);
-    return d.formatDistance("xSeconds", A, a);
-  } else if (m === "minute") {
-    var $ = r(c);
-    return d.formatDistance("xMinutes", $, a);
-  } else if (m === "hour") {
-    var R = r(c / 60);
-    return d.formatDistance("xHours", R, a);
-  } else if (m === "day") {
-    var k = r(l / O);
-    return d.formatDistance("xDays", k, a);
-  } else if (m === "month") {
-    var L = r(l / Z);
-    return L === 12 && s.unit !== "month" ? d.formatDistance("xYears", 1, a) : d.formatDistance("xMonths", L, a);
-  } else if (m === "year") {
-    var D = r(l / Q);
-    return d.formatDistance("xYears", D, a);
+  var i = u.getTime() - r.getTime(), b = i / Q, w = Z(u) - Z(r), c = (i - w) / Q, o;
+  if (s.unit == null ? b < 1 ? o = "second" : b < 60 ? o = "minute" : b < U ? o = "hour" : c < W ? o = "day" : c < X ? o = "month" : o = "year" : o = String(s.unit), o === "second") {
+    var k = d(i / 1e3);
+    return n.formatDistance("xSeconds", k, l);
+  } else if (o === "minute") {
+    var L = d(b);
+    return n.formatDistance("xMinutes", L, l);
+  } else if (o === "hour") {
+    var A = d(b / 60);
+    return n.formatDistance("xHours", A, l);
+  } else if (o === "day") {
+    var R = d(c / U);
+    return n.formatDistance("xDays", R, l);
+  } else if (o === "month") {
+    var m = d(c / W);
+    return m === 12 && s.unit !== "month" ? n.formatDistance("xYears", 1, l) : n.formatDistance("xMonths", m, l);
+  } else if (o === "year") {
+    var C = d(c / X);
+    return n.formatDistance("xYears", C, l);
   }
   throw new RangeError("unit must be 'second', 'minute', 'hour', 'day', 'month' or 'year'");
 }
-var M = /* @__PURE__ */ ((e) => (e.BOTTOM = "bottom", e.AFTER_FIRST = "after-first", e.BEFORE_LAST = "before-last", e))(M || {}), Ne = /* @__PURE__ */ ((e) => (e.SECOND = "second", e.MINUTE = "minute", e.HOUR = "hour", e.DAY = "day", e.MONTH = "month", e.YEAR = "year", e))(Ne || {}), C = /* @__PURE__ */ ((e) => (e.DEFAULT = "SquareSmallIcon", e.SUCCESS = "CheckedCircleIcon", e.CRITICAL = "CrossCircleIcon", e))(C || {});
-const ne = Symbol("timeline register entry injection key"), oe = Symbol("timeline config obj injection key"), Oe = x({
+var D = /* @__PURE__ */ ((e) => (e.BOTTOM = "bottom", e.AFTER_FIRST = "after-first", e.BEFORE_LAST = "before-last", e))(D || {}), Fe = /* @__PURE__ */ ((e) => (e.SECOND = "second", e.MINUTE = "minute", e.HOUR = "hour", e.DAY = "day", e.MONTH = "month", e.YEAR = "year", e))(Fe || {}), E = /* @__PURE__ */ ((e) => (e.DEFAULT = "SquareSmallIcon", e.SUCCESS = "CheckedCircleIcon", e.CRITICAL = "CrossCircleIcon", e))(E || {});
+const re = Symbol("timeline register entry injection key"), de = Symbol("timeline config obj injection key"), x = {
+  "en-US": {
+    addNote: "Add note",
+    cancel: "Cancel"
+  }
+}, Be = ie({
+  i18n: { messages: x },
   name: "bento-timeline",
+  components: { BentoButton: se, BentoButtonActions: ye, BentoTextarea: ge },
   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,95 +97,145 @@ const ne = Symbol("timeline register entry injection key"), oe = Symbol("timelin
       default: null
     }
   },
-  setup(e) {
-    const t = q([]), s = _(
-      () => e.showMore && t.value.length > e.showMore.limit ? t.value.length - e.showMore.limit : null
-    ), d = q(!1), { timegapLimit: h } = me(e), a = _(() => {
+  emits: ["add-timeline-note"],
+  setup(e, { emit: p }) {
+    const { t: s } = le({ messages: x }), n = a(() => s("addNote")), I = a(() => s("cancel")), l = F(), r = (m) => {
+      l.value = m;
+    }, u = F(!1), v = () => {
+      u.value = !u.value;
+    }, d = () => {
+      p("add-timeline-note", {
+        description: l.value,
+        timestamp: { date: /* @__PURE__ */ new Date() },
+        type: "note"
+      }), v();
+    }, i = F([]), b = a(
+      () => e.showMore && i.value.length > e.showMore.limit ? i.value.length - e.showMore.limit : null
+    ), w = F(!1), { timegapLimit: c } = ve(e), o = a(() => {
       if (!e.showMore)
         return null;
-      const n = Array.from(t.value.keys());
-      return e.showMore.placement === M.BEFORE_LAST ? [
-        ...n.slice(0, e.showMore.limit - 1),
-        n[n.length - 1]
-      ] : e.showMore.placement === M.AFTER_FIRST ? [n[0], ...n.slice(-(e.showMore.limit - 1))] : n.slice(0, e.showMore.limit);
-    }), o = _(() => {
+      const m = Array.from(i.value.keys());
+      return e.showMore.placement === D.BEFORE_LAST ? [
+        ...m.slice(0, e.showMore.limit - 1),
+        m[m.length - 1]
+      ] : e.showMore.placement === D.AFTER_FIRST ? [m[0], ...m.slice(-(e.showMore.limit - 1))] : m.slice(0, e.showMore.limit);
+    }), k = a(() => {
       if (!e.showMore)
         return null;
       switch (e.showMore.placement) {
-        case M.BEFORE_LAST:
+        case D.BEFORE_LAST:
           return e.showMore.limit - 2;
-        case M.AFTER_FIRST:
+        case D.AFTER_FIRST:
           return 0;
-        case M.BOTTOM:
+        case D.BOTTOM:
         default:
           return e.showMore.limit - 1;
       }
-    }), u = (n) => () => {
-      var c;
-      t.value = (c = t.value) == null ? void 0 : c.filter((v, l) => l !== n);
-    }, g = ({ title: n, date: c }) => {
-      const v = t.value.length;
-      return t.value.push({ title: n, date: c }), { timelineEntries: t, index: v, unregisterTimelineEntry: u(v) };
-    }, r = {
-      showAll: d,
-      showMoreIndex: o,
-      hiddenItems: s,
-      visibleIndexes: a,
-      timegapLimit: h
+    }), L = (m) => () => {
+      var C;
+      i.value = (C = i.value) == null ? void 0 : C.filter(($, O) => O !== m);
+    }, A = ({ title: m, description: C, date: $ }) => {
+      const O = i.value.length;
+      return i.value.push({ title: m, description: C, date: $ }), { timelineEntries: i, index: O, unregisterTimelineEntry: L(O) };
+    }, R = {
+      showAll: w,
+      showMoreIndex: k,
+      hiddenItems: b,
+      visibleIndexes: o,
+      timegapLimit: c
+    };
+    return z(re, A), z(de, R), {
+      addNoteLabel: n,
+      cancelLabel: I,
+      toggleAddNote: v,
+      updateNoteContent: r,
+      addNoteToTimeline: d,
+      showAddNoteTextArea: u
     };
-    j(ne, g), j(oe, r);
   }
 });
-const Ae = { class: "b-timeline" };
-function $e(e, t, s, d, h, a) {
-  return i(), f("ol", Ae, [
-    ee(e.$slots, "default", {}, void 0, !0)
+const Ue = { class: "b-timeline" }, je = {
+  key: 0,
+  class: "b-timeline__add-note-section"
+}, Ye = { key: 1 }, Ve = { class: "b-timeline__items" };
+function ze(e, p, s, n, I, l) {
+  const r = T("bento-button"), u = T("bento-textarea"), v = T("bento-button-actions");
+  return t(), f("div", Ue, [
+    e.addNote ? (t(), f("div", je, [
+      e.showAddNoteTextArea ? _("", !0) : (t(), S(r, {
+        key: 0,
+        variant: "tertiary",
+        onClick: e.toggleAddNote
+      }, {
+        default: g(() => [
+          N(y(e.addNoteLabel), 1)
+        ]),
+        _: 1
+      }, 8, ["onClick"])),
+      e.showAddNoteTextArea ? (t(), f("div", Ye, [
+        M(u, {
+          label: e.addNoteLabel,
+          "character-limit": 150,
+          resizable: "vertical",
+          onInput: e.updateNoteContent
+        }, null, 8, ["label", "onInput"]),
+        M(v, {
+          actions: [
+            { title: e.addNoteLabel, event: e.addNoteToTimeline },
+            { title: e.cancelLabel, event: e.toggleAddNote }
+          ]
+        }, null, 8, ["actions"])
+      ])) : _("", !0)
+    ])) : _("", !0),
+    h("ol", Ve, [
+      ne(e.$slots, "default", {}, void 0, !0)
+    ])
   ]);
 }
-const pt = /* @__PURE__ */ Y(Oe, [["render", $e], ["__scopeId", "data-v-2dc17695"]]);
-let X = 0;
-const Re = {
+const Ct = /* @__PURE__ */ q(Be, [["render", ze], ["__scopeId", "data-v-f844f908"]]);
+let ee = 0;
+const He = {
   beforeCreate() {
-    this.uuid = X.toString(), X += 1;
+    this.uuid = ee.toString(), ee += 1;
   }
-}, De = (e) => (te("data-v-f702de38"), e = e(), ie(), e), Fe = { key: 0 }, Ue = /* @__PURE__ */ De(() => /* @__PURE__ */ p("path", {
+}, qe = (e) => (oe("data-v-f702de38"), e = e(), ae(), e), Je = { key: 0 }, Ke = /* @__PURE__ */ qe(() => /* @__PURE__ */ h("path", {
   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"
 }, null, -1));
-function je(e, t, s, d, h, a) {
-  return i(), f("svg", B({ role: "img" }, e.$attrs, {
+function Pe(e, p, s, n, I, l) {
+  return t(), f("svg", H({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (i(), f("title", Fe, y(e.$attrs["svg-title"]), 1)) : I("", !0),
-    Ue
+    e.$attrs["svg-title"] ? (t(), f("title", Je, y(e.$attrs["svg-title"]), 1)) : _("", !0),
+    Ke
   ], 16);
 }
-const Be = /* @__PURE__ */ Y(Re, [["render", je], ["__scopeId", "data-v-f702de38"]]), G = {
+const Ze = /* @__PURE__ */ q(He, [["render", Pe], ["__scopeId", "data-v-f702de38"]]), te = {
   "en-US": {
     timegap: "{timegap} passed between the timeline events",
     showMore: "Show {items} more",
     showLess: "Show less"
   }
-}, Ye = x({
+}, Qe = ie({
   name: "bento-timeline-item",
   components: {
-    BentoButton: _e,
-    BentoDate: fe,
-    BentoLink: ve,
-    BentoTag: pe,
-    BentoTypography: he,
-    BentoStructuredList: ge,
-    BentoStructuredListItem: be,
-    CrossCircleIcon: Se,
-    CheckedCircleIcon: Ie,
-    SquareSmallIcon: Be
+    BentoButton: se,
+    BentoDate: Ie,
+    BentoLink: Te,
+    BentoTag: Se,
+    BentoTypography: Ne,
+    BentoStructuredList: we,
+    BentoStructuredListItem: Ce,
+    CrossCircleIcon: ke,
+    CheckedCircleIcon: Me,
+    SquareSmallIcon: Ze
   },
-  i18n: { messages: G },
+  i18n: { messages: te },
   props: {
     /**
      * Additional timestamp of the event
@@ -211,7 +277,16 @@ const Be = /* @__PURE__ */ Y(Re, [["render", je], ["__scopeId", "data-v-f702de38
      */
     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: (e) => ["milestone", "note"].includes(e)
     },
     /**
      * Variant for the timeline item
@@ -219,186 +294,194 @@ const Be = /* @__PURE__ */ Y(Re, [["render", je], ["__scopeId", "data-v-f702de38
      */
     variant: {
       type: String,
-      default: C.DEFAULT,
-      validator: (e) => Object.values(C).includes(e)
+      default: E.DEFAULT,
+      validator: (e) => Object.values(E).includes(e)
     }
   },
-  setup(e, { slots: t }) {
-    const { t: s } = ke({ messages: G }), d = _(() => ({
-      "b-timeline-item__icon--default": e.variant === C.DEFAULT,
-      "b-timeline-item__icon--success": e.variant === C.SUCCESS,
-      "b-timeline-item__icon--critical": e.variant === C.CRITICAL
-    })), h = _(() => ({
-      "b-timeline-item__title--default": e.variant === C.DEFAULT
+  setup(e, { slots: p }) {
+    const { t: s } = le({ messages: te }), n = a(() => e.type === "note"), I = a(
+      () => n.value ? E.DEFAULT : e.variant
+    ), l = a(() => ({
+      "b-timeline-item__icon--default": e.variant === E.DEFAULT || n.value,
+      "b-timeline-item__icon--success": e.variant === E.SUCCESS && !n.value,
+      "b-timeline-item__icon--critical": e.variant === E.CRITICAL && !n.value
+    })), r = a(() => ({
+      "b-timeline-item__title--default": e.variant === E.DEFAULT
+    })), u = a(() => ({
+      "b-timeline-item--note": n.value
     }));
-    j(ye, !0);
-    const a = z(ne), { timelineEntries: o, index: u, unregisterTimelineEntry: g } = a({
+    z(Ee, !0);
+    const v = P(re), { timelineEntries: d, index: i, unregisterTimelineEntry: b } = v({
       title: e.title,
       date: e.timestamp.date
     });
-    de(() => g());
-    const { showAll: r, showMoreIndex: n, hiddenItems: c, visibleIndexes: v, timegapLimit: l } = z(oe), m = _(() => r.value || !v.value), A = _(() => m.value ? !0 : v.value.includes(u)), $ = _(() => typeof e.title == "object"), R = _(() => e.title), k = _(() => {
-      var V;
-      if (!l.value)
+    pe(() => b());
+    const { showAll: w, showMoreIndex: c, hiddenItems: o, visibleIndexes: k, timegapLimit: L } = P(de), A = a(() => w.value || !k.value), R = a(() => A.value ? !0 : k.value.includes(i)), m = a(() => typeof e.title == "object"), C = a(() => e.title), $ = a(() => {
+      var K;
+      if (!L.value)
         return null;
-      const F = (V = o.value[u - 1]) == null ? void 0 : V.date, re = m.value || v.value.includes(u - 1);
-      if (!F || !re)
+      const j = (K = d.value[i - 1]) == null ? void 0 : K.date, _e = A.value || k.value.includes(i - 1);
+      if (!j || !_e)
         return null;
-      const { date: H } = o.value[u], le = parseInt(
-        W(F, H, { unit: l.value.unit }),
+      const { date: J } = d.value[i], fe = parseInt(
+        G(j, J, { unit: L.value.unit }),
         10
       );
-      return l.value.amount < le ? W(F, H, { roundingMethod: "floor" }) : null;
-    }), L = _(() => k.value ? s("timegap", { timegap: k.value }) : ""), D = _(() => c.value && n.value === u), ae = _(() => u === o.value.length - 1);
+      return L.value.amount < fe ? G(j, J, { roundingMethod: "floor" }) : null;
+    }), O = a(() => $.value ? s("timegap", { timegap: $.value }) : ""), ue = a(() => o.value && c.value === i), ce = a(() => i === d.value.length - 1);
     return {
       // Values
-      iconConditionalClasses: d,
-      titleConditionalClasses: h,
-      displayShowMoreButton: D,
-      showAll: r,
-      hiddenItems: c,
-      isVisible: A,
-      isLinkTitle: $,
-      linkTitleProps: R,
-      timegap: k,
-      timegapAriaLabel: L,
-      isLastItem: ae,
+      isNoteType: n,
+      iconConditionalClasses: l,
+      titleConditionalClasses: r,
+      conditionalClasses: u,
+      displayShowMoreButton: ue,
+      showAll: w,
+      hiddenItems: o,
+      isVisible: R,
+      isLinkTitle: m,
+      linkTitleProps: C,
+      timegap: $,
+      timegapAriaLabel: O,
+      isLastItem: ce,
+      computedIconVariant: I,
       // Methods
-      generateUid: Me,
-      hasSlot: Le(t),
+      generateUid: De,
+      hasSlot: Re(p),
       t: s
     };
   }
 });
-const se = (e) => (te("data-v-5ee3448b"), e = e(), ie(), e), He = {
-  key: 0,
-  class: "b-timeline-item"
-}, Ve = {
+const me = (e) => (oe("data-v-a49f9329"), e = e(), ae(), e), We = {
   key: 0,
   class: "b-timeline-item__row"
-}, qe = /* @__PURE__ */ se(() => /* @__PURE__ */ p("div", {
+}, Xe = /* @__PURE__ */ me(() => /* @__PURE__ */ h("div", {
   class: "b-timeline-item__marker",
   "aria-hidden": "true"
 }, [
-  /* @__PURE__ */ p("div", { class: "b-timeline-item__icon b-timeline-item__icon--timegap" }),
-  /* @__PURE__ */ p("div", { class: "b-timeline-item__separator" })
-], -1)), ze = { class: "b-timeline-item__content" }, Je = { class: "b-timeline-item__row" }, Ke = {
+  /* @__PURE__ */ h("div", { class: "b-timeline-item__icon b-timeline-item__icon--timegap" }),
+  /* @__PURE__ */ h("div", { class: "b-timeline-item__separator" })
+], -1)), Ge = { class: "b-timeline-item__content" }, xe = { class: "b-timeline-item__row" }, et = {
   class: "b-timeline-item__marker",
   "aria-hidden": "true"
-}, Pe = {
+}, tt = {
   key: 0,
   class: "b-timeline-item__separator",
   "data-testid": "last-timeline-item-separator"
-}, Ze = { class: "b-timeline-item__content" }, Qe = { key: 1 }, We = {
-  key: 3,
+}, it = { class: "b-timeline-item__content" }, nt = { key: 1 }, ot = {
+  key: 4,
   class: "b-timeline-item__data-list"
-}, Xe = {
+}, at = {
   key: 1,
   class: "b-timeline-item__row"
-}, Ge = /* @__PURE__ */ se(() => /* @__PURE__ */ p("div", {
+}, st = /* @__PURE__ */ me(() => /* @__PURE__ */ h("div", {
   class: "b-timeline-item__marker",
   "aria-hidden": "true"
 }, [
-  /* @__PURE__ */ p("div", { class: "b-timeline-item__separator" })
-], -1)), xe = { class: "b-timeline-item__content" };
-function et(e, t, s, d, h, a) {
-  const o = E("bento-typography"), u = E("bento-link"), g = E("bento-date"), r = E("bento-structured-list-item"), n = E("bento-structured-list"), c = E("bento-tag"), v = E("bento-button");
-  return e.isVisible ? (i(), f("li", He, [
-    e.timegap ? (i(), f("div", Ve, [
-      qe,
-      p("div", ze, [
-        w(o, {
+  /* @__PURE__ */ h("div", { class: "b-timeline-item__separator" })
+], -1)), lt = { class: "b-timeline-item__content" };
+function rt(e, p, s, n, I, l) {
+  const r = T("bento-typography"), u = T("bento-link"), v = T("bento-date"), d = T("bento-structured-list-item"), i = T("bento-structured-list"), b = T("bento-tag"), w = T("bento-button");
+  return e.isVisible ? (t(), f("li", {
+    key: 0,
+    class: Y(["b-timeline-item", e.conditionalClasses])
+  }, [
+    e.timegap ? (t(), f("div", We, [
+      Xe,
+      h("div", Ge, [
+        M(r, {
           class: "b-timeline-item__timegap",
           "aria-label": e.timegapAriaLabel
         }, {
-          default: b(() => [
-            S(y(e.timegap), 1)
+          default: g(() => [
+            N(y(e.timegap), 1)
           ]),
           _: 1
         }, 8, ["aria-label"])
       ])
-    ])) : I("", !0),
-    p("div", Je, [
-      p("div", Ke, [
-        (i(), T(ue(e.variant), {
-          class: J(["b-timeline-item__icon", e.iconConditionalClasses])
+    ])) : _("", !0),
+    h("div", xe, [
+      h("div", et, [
+        (t(), S(he(e.computedIconVariant), {
+          class: Y(["b-timeline-item__icon", e.iconConditionalClasses])
         }, null, 8, ["class"])),
-        e.isLastItem ? I("", !0) : (i(), f("div", Pe))
+        e.isLastItem ? _("", !0) : (t(), f("div", tt))
       ]),
-      p("div", Ze, [
-        w(o, {
+      h("div", it, [
+        e.isNoteType ? _("", !0) : (t(), S(r, {
+          key: 0,
           el: "div",
           variant: "body",
           strongest: "",
-          class: J(["b-timeline-item__title", e.titleConditionalClasses]),
+          class: Y(["b-timeline-item__title", e.titleConditionalClasses]),
           role: "heading"
         }, {
-          default: b(() => [
-            e.isLinkTitle ? (i(), T(u, B({ key: 0 }, e.linkTitleProps, { "disable-typography": "" }), {
-              default: b(() => [
-                S(y(e.linkTitleProps.title), 1)
+          default: g(() => [
+            e.isLinkTitle ? (t(), S(u, H({ key: 0 }, e.linkTitleProps, { "disable-typography": "" }), {
+              default: g(() => [
+                N(y(e.linkTitleProps.title), 1)
               ]),
               _: 1
-            }, 16)) : (i(), f("span", Qe, y(e.title), 1))
+            }, 16)) : (t(), f("span", nt, y(e.title), 1))
           ]),
           _: 1
-        }, 8, ["class"]),
-        e.timestamp ? (i(), T(o, {
-          key: 0,
+        }, 8, ["class"])),
+        e.timestamp ? (t(), S(r, {
+          key: 1,
           class: "b-timeline-item__timestamp",
           el: "div",
           variant: "caption"
         }, {
-          default: b(() => [
-            w(g, {
+          default: g(() => [
+            M(v, {
               date: e.timestamp.date,
               format: e.timestamp.format,
               "disable-typography": ""
             }, null, 8, ["date", "format"]),
-            S(" " + y(e.timestamp.value), 1)
+            N(" " + y(e.timestamp.value), 1)
           ]),
           _: 1
-        })) : I("", !0),
-        e.additionalTimestamp ? (i(), T(o, {
-          key: 1,
+        })) : _("", !0),
+        !e.isNoteType && e.additionalTimestamp ? (t(), S(r, {
+          key: 2,
           class: "b-timeline-item__timestamp",
           el: "div",
           variant: "caption"
         }, {
-          default: b(() => [
-            w(g, {
+          default: g(() => [
+            M(v, {
               date: e.additionalTimestamp.date,
               format: e.additionalTimestamp.format,
               "disable-typography": ""
             }, null, 8, ["date", "format"]),
-            S(" " + y(e.additionalTimestamp.value), 1)
+            N(" " + y(e.additionalTimestamp.value), 1)
           ]),
           _: 1
-        })) : I("", !0),
-        e.description || e.hasSlot("default") ? (i(), T(o, {
-          key: 2,
+        })) : _("", !0),
+        e.description || e.hasSlot("default") ? (t(), S(r, {
+          key: 3,
           el: "div",
           variant: "body",
           class: "b-timeline-item__description"
         }, {
-          default: b(() => [
-            ee(e.$slots, "default", {}, () => [
-              S(y(e.description), 1)
+          default: g(() => [
+            ne(e.$slots, "default", {}, () => [
+              N(y(e.description), 1)
             ], !0)
           ]),
           _: 3
-        })) : I("", !0),
-        e.dataList ? (i(), f("div", We, [
-          w(n, null, {
-            default: b(() => [
-              (i(!0), f(U, null, ce(e.dataList, (l) => (i(), T(r, {
-                key: e.generateUid(l.label),
-                label: l.label
+        })) : _("", !0),
+        !e.isNoteType && e.dataList ? (t(), f("div", ot, [
+          M(i, null, {
+            default: g(() => [
+              (t(!0), f(V, null, be(e.dataList, (c) => (t(), S(d, {
+                key: e.generateUid(c.label),
+                label: c.label
               }, {
-                default: b(() => [
-                  w(o, { variant: "caption" }, {
-                    default: b(() => [
-                      S(y(l.value), 1)
+                default: g(() => [
+                  M(r, { variant: "caption" }, {
+                    default: g(() => [
+                      N(y(c.value), 1)
                     ]),
                     _: 2
                   }, 1024)
@@ -408,37 +491,37 @@ function et(e, t, s, d, h, a) {
             ]),
             _: 1
           })
-        ])) : I("", !0),
-        e.tag ? (i(), T(c, B({ key: 4 }, e.tag, { class: "b-timeline-item__tag" }), null, 16)) : I("", !0)
+        ])) : _("", !0),
+        !e.isNoteType && e.tag ? (t(), S(b, H({ key: 5 }, e.tag, { class: "b-timeline-item__tag" }), null, 16)) : _("", !0)
       ])
     ]),
-    e.displayShowMoreButton ? (i(), f("div", Xe, [
-      Ge,
-      p("div", xe, [
-        w(v, {
+    e.displayShowMoreButton ? (t(), f("div", at, [
+      st,
+      h("div", lt, [
+        M(w, {
           class: "b-timeline__show-more",
           variant: "tertiary",
-          onClick: t[0] || (t[0] = (l) => e.showAll = !e.showAll)
+          onClick: p[0] || (p[0] = (c) => e.showAll = !e.showAll)
         }, {
-          default: b(() => [
-            e.showAll ? (i(), f(U, { key: 1 }, [
-              S(y(e.t("showLess")), 1)
-            ], 64)) : (i(), f(U, { key: 0 }, [
-              S(y(e.t("showMore", { items: e.hiddenItems })), 1)
+          default: g(() => [
+            e.showAll ? (t(), f(V, { key: 1 }, [
+              N(y(e.t("showLess")), 1)
+            ], 64)) : (t(), f(V, { key: 0 }, [
+              N(y(e.t("showMore", { items: e.hiddenItems })), 1)
             ], 64))
           ]),
           _: 1
         })
       ])
-    ])) : I("", !0)
-  ])) : I("", !0);
+    ])) : _("", !0)
+  ], 2)) : _("", !0);
 }
-const ht = /* @__PURE__ */ Y(Ye, [["render", et], ["__scopeId", "data-v-5ee3448b"]]);
+const Et = /* @__PURE__ */ q(Qe, [["render", rt], ["__scopeId", "data-v-a49f9329"]]);
 export {
-  pt as BentoTimeline,
-  Ne as BentoTimelineGapUnit,
-  ht as BentoTimelineItem,
-  C as BentoTimelineItemVariant,
-  M as BentoTimelineShowMorePlacement
+  Ct as BentoTimeline,
+  Fe as BentoTimelineGapUnit,
+  Et as BentoTimelineItem,
+  E as BentoTimelineItemVariant,
+  D as BentoTimelineShowMorePlacement
 };
 //# sourceMappingURL=timeline.js.map