@adyen/bento-vue3 1.9.0 → 1.10.0

package/dist/timeline.js

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