@ironsource/shared-ui 2.1.12-rc.5 → 2.1.12-rc.51

package/components/chart/ChartPlane.vue2.js

@@ -1,34 +1,47 @@
- import "../../ChartPlane.vue_vue_type_style_index_0_scoped_4396faf6_lang.css"; import { defineComponent as j, useCssVars as q, unref as s, computed as a, ref as C, onMounted as J, watch as g, nextTick as Q, openBlock as f, createElementBlock as X, createElementVNode as h, createVNode as ee, isRef as te, createSlots as ae, withCtx as oe, renderSlot as re, normalizeStyle as le, createBlock as b, createCommentVNode as I } from "vue";
-import { Chart as H, ArcElement as ie, LineElement as ne, BarElement as se, PointElement as ce, LineController as de, BarController as ue, PieController as pe, ScatterController as fe, CategoryScale as he, LinearScale as me, Filler as ve, Tooltip as ye } from "chart.js";
-import { HoverVerticalLine as Ce } from "./plugins/HoverVerticalLine.js";
-import { formatValue as O, calcStepSize as ge } from "./utils/utils.js";
-import { DEFAULT_TICK_COUNT as be, TOTALS_HELPER_KEY as P, POINT_BORDER_COLOR as Te, TICK_LABEL_COLOR as F, TICK_LABEL_FONT as N, GRID_LINE_COLOR as M, HEADER_HEIGHT as ke, COMPACT_HEADER_HEIGHT as xe } from "./consts.js";
-import { ChartType as i } from "./types.js";
-import { useTooltipPosition as Se } from "./composables/useTooltipPosition.js";
-import Le from "./ChartTooltip.vue.js";
-import { hexColorToRgba as Ee } from "../../utils/color.js";
-import { useChartValues as Be } from "./composables/useChartValues.js";
-import Ae from "./ChartHeader.vue.js";
-import { useVModel as Re } from "@vueuse/core";
-import we from "../emptyState/v4/EmptyStateV4.vue.js";
-import Ve from "./ChartLoader.vue.js";
-import { useColorsMap as De } from "./composables/useColorsMap.js";
-const Ie = {
+ import "../../ChartPlane.vue_vue_type_style_index_0_scoped_a685cf5e_lang.css"; import { defineComponent as ne, useCssVars as se, unref as n, computed as i, ref as E, onMounted as de, watch as v, nextTick as ce, openBlock as p, createElementBlock as S, createVNode as ue, isRef as fe, createSlots as pe, withCtx as he, renderSlot as me, createCommentVNode as L, createElementVNode as R, normalizeStyle as Te, createBlock as I, mergeProps as ve } from "vue";
+import { Chart as V, ArcElement as ye, LineElement as Ce, BarElement as ge, PointElement as be, LineController as xe, BarController as Ae, PieController as ke, ScatterController as Ee, CategoryScale as Se, LinearScale as Le, Filler as Re, Tooltip as Ie } from "chart.js";
+import { HoverVerticalLine as De } from "./plugins/HoverVerticalLine.js";
+import { prepareTickLabel as Be, formatValue as Oe } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as Pe, TOTALS_HELPER_KEY as F, LINE_DASH_STYLE as Ne, BASE_COLOR_KEY as M, CHART_PADDING as He, POINT_BORDER_COLOR as we, TICK_LABEL_COLOR as Y, TICK_LABEL_FONT as K, TICKS_EXTRA_PADDING as Ve, GRID_LINE_COLOR as U, HEADER_HEIGHT as Fe, COMPACT_HEADER_HEIGHT as Me, HOVER_AREA_TRANSPARENCY as Ye, HOVER_TRANSPARENCY as y, CHART_ITEM_TRANSPARENCY as Ke, INCOMPLETE_DATA_BAR_TRANSPARENCY as Ue, STACKED_LINE_TRANSPARENCY as _e } from "./consts.js";
+import { ChartType as d, DateInterval as Ge, TooltipOrder as _, TrendDirection as $e } from "./types.js";
+import { useTooltipPosition as ze } from "./composables/useTooltipPosition.js";
+import We from "./ChartTooltip.vue.js";
+import { hexColorToRgba as h } from "../../utils/color.js";
+import Ze from "./ChartHeader.vue.js";
+import { useMemoize as Xe, useVModel as je } from "@vueuse/core";
+import qe from "../emptyState/v4/EmptyStateV4.vue.js";
+import Je from "./ChartLoader.vue.js";
+import { DEFAULT_CHART_COLOR as Qe } from "./colorPalette.js";
+import { TotalType as G, calculateTotal as et } from "../../utils/totals.js";
+import { isNullOrUndefined as tt } from "../../utils/utils.js";
+import { storeOriginalDatasetColors as at, restoreOriginalDatasetColors as ot } from "./utils/highlightUtils.js";
+import { useTestIdAttrs as lt } from "../../utils/testIds.js";
+import { ChartTestIdModifiers as $ } from "../../testids/index.js";
+const rt = { class: "chart-plane-container" }, it = {
   key: 0,
+  class: "header-wrapper"
+}, nt = {
+  key: 1,
   class: "chart-plane"
-}, He = { class: "header-wrapper" }, Oe = { class: "chart" }, Je = /* @__PURE__ */ j({
+}, st = { class: "chart" }, Rt = /* @__PURE__ */ ne({
   __name: "ChartPlane",
   props: {
     dataSets: { default: () => [] },
     visibleIds: { default: () => [] },
-    chartType: { default: i.Line },
+    highlightedId: { default: null },
+    chartType: { default: d.Line },
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    tickCount: { default: be },
+    xAxisDateInterval: { default: Ge.DAILY },
+    tickCount: { default: Pe },
+    truncateTickLabels: { type: Boolean, default: !1 },
     header: { default: "" },
     subheader: { default: "" },
+    subheaderTooltip: { default: null },
+    keepSubheaderVisible: { type: Boolean, default: !1 },
     loading: { type: Boolean, default: !1 },
+    empty: { type: Boolean, default: !1 },
     noDataIcon: { default: "file-search" },
     noDataTitle: { default: "No data to display" },
     noDataSubtitle: { default: "Search again with different filters" },
@@ -36,271 +49,339 @@ const Ie = {
     typeSwitcher: { type: Boolean, default: !0 },
     height: { default: "100%" },
     compactHeader: { type: Boolean, default: !1 },
+    noteText: { default: "" },
     tooltipRespectsTopEdge: { type: Boolean, default: !0 },
+    tooltipTotalType: { default: G.Total },
+    tooltipTotalCalcFn: { type: Function, default: et },
+    tooltipOrder: { default: _.Legend },
     trendValue: { default: null },
-    trendDirection: { default: "up" },
-    totalsChart: { type: Boolean, default: !1 }
+    trendDirection: { default: $e.UP },
+    trendTooltip: { default: null },
+    totalsChart: { type: Boolean, default: !1 },
+    colorsMap: { default: () => ({}) },
+    valueSuffix: { default: "" },
+    valuePrefix: { default: "" },
+    indicateIncompleteData: { type: Boolean, default: !1 },
+    tooltipExcludeTotalItem: { type: Boolean, default: !1 },
+    testId: { default: "" }
   },
   emits: ["update:chartType"],
   setup(o, { emit: z }) {
     const e = o;
-    q((t) => ({
-      "86c5ce4e": s(Z),
-      "27543fc4": o.height
-    })), H.register(
-      ie,
-      ne,
-      se,
-      ce,
-      de,
-      ue,
-      pe,
-      fe,
-      he,
-      me,
-      ve,
+    se((t) => ({
+      "6a964917": n(oe),
+      "322ee3fc": o.height
+    }));
+    const W = Xe(Be);
+    V.register(
       ye,
-      Ce
+      Ce,
+      ge,
+      be,
+      xe,
+      Ae,
+      ke,
+      Ee,
+      Se,
+      Le,
+      Re,
+      Ie,
+      De
     );
-    const m = Re(e, "chartType", z), K = a(
+    const C = je(e, "chartType", z), Z = i(
       () => e.withAnimation ? "" : "none"
-    ), c = C(null);
-    let n = null;
-    const T = a(() => e.dataSets.length === 0), k = a(() => !e.loading && !T.value), v = () => {
-      c.value && (n && n.destroy(), n = new H(c.value, A.value));
-    }, _ = () => {
-      n && (n.data.datasets = E.value, n.options = A.value.options, n.update(K.value));
+    ), T = E(null);
+    let s = null;
+    const D = i(() => e.empty || e.dataSets.length === 0), u = i(() => !e.loading && !D.value), g = () => {
+      T.value && (s && s.destroy(), s = new V(T.value, P.value));
+    }, X = () => {
+      s && (s.data.datasets = O.value, s.options = P.value.options, s.update(Z.value));
     };
-    J(v), g(() => e.chartType, v), g(k, async (t) => {
-      t && (await Q(), v());
-    }), g([() => e.visibleIds, () => e.dataSets], _);
-    const d = a(() => e.totalsChart), u = a(
-      () => e.chartType === i.StackedLine || e.chartType === i.StackedBar || d.value
-    ), x = a(
-      () => e.chartType === i.Line || e.chartType === i.StackedLine
-    ), S = a(() => d.value ? { ...e.parsing, xAxisKey: P } : e.parsing), L = a(() => d.value ? e.dataSets.map((t) => ({
+    de(g), v(() => e.chartType, g), v(u, async (t) => {
+      t && (await ce(), g());
+    }), v(
+      [
+        () => e.visibleIds,
+        () => e.dataSets,
+        () => e.valuePrefix,
+        () => e.valueSuffix
+      ],
+      X
+    );
+    const f = i(() => e.totalsChart), b = i(
+      () => e.chartType === d.StackedLine || e.chartType === d.StackedBar || f.value
+    ), x = i(
+      () => e.chartType === d.Line || e.chartType === d.StackedLine
+    ), j = i(() => f.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: F } : e.parsing), q = i(() => f.value ? e.dataSets.map((t) => ({
       ...t,
       data: t.data.map((r) => ({
         ...r,
-        [P]: t.label
+        [F]: t.label
       }))
-    })) : e.dataSets), U = a(() => e.visibleIds || []), p = a(
-      () => L.value.filter((t) => e.visibleIds.includes(t.id))
-    ), { colorsMap: $ } = De({ dataSets: L, visibleIds: U }), E = a(() => p.value.map((t) => {
-      const r = $.value[t.id];
+    })) : e.dataSets), A = i(
+      () => q.value.filter((t) => e.visibleIds.includes(t.id))
+    ), J = (t) => e.colorsMap[t] || Qe, B = i(
+      () => A.value.length && A.value.every(
+        (t) => t.data.length === 1
+      )
+    ), Q = (t) => (r) => {
+      const a = r.chart.data.labels.length - 1;
+      let l = Ke;
+      return e.chartType === d.Bar && e.indicateIncompleteData && r.index === a ? l = Ue : e.chartType === d.StackedLine && (l = _e), h(t, l);
+    }, O = i(() => A.value.map((t, r) => {
+      const a = J(t.id), l = b.value ? r !== 0 ? "-1" : "start" : void 0, m = e.indicateIncompleteData ? {
+        borderDash: (w) => {
+          if (w.p1DataIndex === w.chart.data.labels.length - 1)
+            return Ne;
+        }
+      } : void 0, k = Q(a);
       return {
         ...t,
-        fill: u.value ? "start" : void 0,
-        backgroundColor: Ee(
-          r,
-          e.chartType === i.StackedLine ? 10 : 70
-        ),
-        borderColor: r,
-        pointBackgroundColor: r,
-        pointHoverBorderColor: r,
+        fill: l,
+        segment: m,
+        backgroundColor: k,
+        borderColor: a,
+        pointBackgroundColor: a,
+        pointHoverBorderColor: a,
         maxBarThickness: 50,
         clip: 5,
         // draw a bit outside the chart area
         icon: t.icon || null,
-        iconType: t.iconType || "branded"
+        iconType: t.iconType || "branded",
+        [M]: a
+        // store base color for later use
       };
-    })), B = a(
-      () => p.value.length && p.value.every(
-        (t) => t.data.length === 1
-      )
-    ), A = a(
-      () => ({
-        type: e.chartType == i.Bar || e.chartType === i.StackedBar ? "bar" : "line",
-        // Chart Data
-        data: {
-          datasets: E.value
+    })), ee = i(
+      () => e.tooltipTotalType === G.Total ? "Total" : "Mean"
+    ), te = (t) => t.filter(
+      (r) => !r.dataset.isTotal
+    ), P = i(() => ({
+      type: e.chartType == d.Bar || e.chartType === d.StackedBar ? "bar" : "line",
+      // Chart Data
+      data: {
+        datasets: O.value
+      },
+      // Chart Options
+      options: {
+        parsing: j.value,
+        interaction: {
+          intersect: !1,
+          mode: f.value ? "point" : "index",
+          axis: "x"
         },
-        // Chart Options
-        options: {
-          parsing: S.value,
-          interaction: {
-            intersect: !1,
-            mode: d.value ? "point" : "index",
-            axis: "x"
-          },
-          // plugins
-          plugins: {
-            legend: { display: !1 },
-            title: { display: !1 },
-            hoverVerticalLine: x.value,
-            // tooltip
-            tooltip: {
-              enabled: !1,
-              position: "average",
-              external: ({ tooltip: t }) => {
-                l.value = { ...t };
-              },
-              callbacks: {
-                footer: (t) => {
-                  const r = t.reduce((y, Y) => y + (Y.parsed.y || 0), 0);
-                  return ["Total", String(r)];
-                }
+        // plugins
+        plugins: {
+          legend: { display: !1 },
+          title: { display: !1 },
+          hoverVerticalLine: x.value,
+          // tooltip
+          tooltip: {
+            enabled: !1,
+            position: "average",
+            external: ({ tooltip: t }) => {
+              c.value = { ...t };
+            },
+            callbacks: {
+              footer: (t) => {
+                const a = (e.tooltipExcludeTotalItem && t.length > 1 ? te(t) : t).map((m) => m.parsed.y || 0), l = e.tooltipTotalCalcFn(
+                  a,
+                  e.tooltipTotalType
+                );
+                return [ee.value, String(l)];
               }
+            },
+            itemSort: (t, r) => {
+              if (e.tooltipOrder === _.YAxis) {
+                const a = t.parsed.y || 0, l = r.parsed.y || 0;
+                return a === l ? 0 : a > l ? -1 : 1;
+              }
+              return 0;
             }
+          }
+        },
+        // chart layout
+        responsive: !0,
+        maintainAspectRatio: !1,
+        layout: {
+          padding: He
+        },
+        // basic styles
+        elements: {
+          line: {
+            borderWidth: 2,
+            tension: 0
           },
-          // chart layout
-          responsive: !0,
-          maintainAspectRatio: !1,
-          layout: {
-            padding: {
-              left: 18,
-              top: 18,
-              bottom: 11
-            }
+          point: {
+            radius: B.value ? 3 : 1,
+            hitRadius: 8,
+            borderWidth: 0,
+            hoverRadius: 4,
+            hoverBorderWidth: 2,
+            pointHoverBackgroundColor: we
           },
-          // basic styles
-          elements: {
-            line: {
-              borderWidth: 2,
-              tension: 0.3
-            },
-            point: {
-              radius: B.value ? 3 : 1,
-              hitRadius: 8,
-              borderWidth: 0,
-              hoverRadius: 4,
-              hoverBorderWidth: 2,
-              pointHoverBackgroundColor: Te
+          bar: {
+            borderRadius: 4
+          }
+        },
+        scales: {
+          // Horizontal Axis (X)
+          x: {
+            beginAtZero: !0,
+            offset: !x.value || B.value,
+            border: { display: !1 },
+            stacked: b.value,
+            // stack on top of each other
+            // ticks
+            ticks: {
+              color: Y,
+              font: K,
+              padding: 4,
+              maxRotation: 0,
+              autoSkip: !e.truncateTickLabels,
+              autoSkipPadding: 8,
+              callback: function(t, r, a) {
+                const l = this.getLabelForValue(t), m = x.value && !f.value ? a.length - 1 : a.length, k = this.chart.scales?.x?.width / m - Ve;
+                return W({
+                  label: l,
+                  format: e.xAxisFormat,
+                  availableSpace: k,
+                  truncate: e.truncateTickLabels
+                });
+              }
             },
-            bar: {
-              borderRadius: 4
+            // grid lines
+            grid: {
+              color: U,
+              drawOnChartArea: !1,
+              drawTicks: !0,
+              drawBorder: !1,
+              tickLength: 7
             }
           },
-          scales: {
-            // Horizontal Axis (X)
-            x: {
-              beginAtZero: !0,
-              offset: !x.value || B.value,
-              border: { display: !1 },
-              stacked: u.value,
-              // stack on top of each other
-              // ticks
-              ticks: {
-                color: F,
-                font: N,
-                padding: 4,
-                callback: function(t) {
-                  return O(
-                    this.getLabelForValue(t),
-                    e.xAxisFormat
-                  );
-                }
-              },
-              // grid lines
-              grid: {
-                color: M,
-                drawOnChartArea: !1,
-                drawTicks: !0,
-                drawBorder: !1,
-                tickLength: 7
-              }
+          // Vertical Axis (Y)
+          y: {
+            beginAtZero: !0,
+            border: { display: !1 },
+            // hide left borderline
+            stacked: b.value,
+            // stack on top of each other
+            // ticks
+            ticks: {
+              color: Y,
+              font: K,
+              count: e.tickCount + 1,
+              padding: 8,
+              min: 0,
+              callback: (t) => e.valuePrefix + Oe(t, e.yAxisFormat, !0) + e.valueSuffix
             },
-            // Vertical Axis (Y)
-            y: {
-              beginAtZero: !0,
-              border: { display: !1 },
-              // hide left borderline
-              stacked: u.value,
-              // stack on top of each other
-              // ticks
-              ticks: {
-                color: F,
-                font: N,
-                padding: 8,
-                stepSize: D.value,
-                min: V.value,
-                max: D.value * e.tickCount,
-                callback: (t) => O(t, e.yAxisFormat)
-              },
-              // grid lines
-              grid: {
-                color: M,
-                drawOnChartArea: !0,
-                drawTicks: !1
-              }
+            // grid lines
+            grid: {
+              color: U,
+              drawOnChartArea: !0,
+              drawTicks: !1
             }
           }
         }
-      })
-    ), R = C(null), l = C(null), { position: w } = Se(
+      }
+    })), N = E(null), c = E(null), { position: H } = ze(
+      T,
+      N,
       c,
-      R,
-      l,
       e.tooltipRespectsTopEdge
-    ), G = a(() => ({
-      left: `${w.value.left}px`,
-      top: `${w.value.top}px`,
-      opacity: l.value?.opacity || 0
-    })), { minValue: V, maxValue: W } = Be({
-      parsingConfig: S.value,
-      dataSets: p,
-      isStacked: u
-    }), D = a(
-      () => ge(V.value, W.value, e.tickCount)
-    ), Z = a(
-      () => (e.compactHeader ? xe : ke) + "px"
+    ), ae = i(() => ({
+      left: `${H.value.left}px`,
+      top: `${H.value.top}px`,
+      opacity: c.value?.opacity || 0
+    })), oe = i(
+      () => (e.compactHeader ? Me : Fe) + "px"
+    );
+    v(
+      () => e.highlightedId,
+      (t) => {
+        s && (tt(t) ? re() : le(t), s.update());
+      }
     );
-    return (t, r) => s(k) ? (f(), X("section", Ie, [
-      h("div", He, [
-        ee(Ae, {
-          "chart-type": s(m),
-          "onUpdate:chart-type": r[0] || (r[0] = (y) => te(m) ? m.value = y : null),
-          "type-switcher": o.typeSwitcher,
-          header: o.header,
+    const le = (t) => {
+      (s?.data.datasets || []).forEach((a) => {
+        at(a);
+        const l = a[M];
+        a.id === t ? e.chartType === d.StackedLine && (a.backgroundColor = h(
+          l,
+          Ye
+        )) : (a.backgroundColor = h(l, y), a.borderColor = h(l, y), a.pointBackgroundColor = h(l, y), a.pointHoverBorderColor = h(l, y));
+      });
+    }, re = () => {
+      (s?.data.datasets || []).forEach(ot);
+    }, ie = lt(e.testId, $);
+    return (t, r) => (p(), S("div", rt, [
+      n(u) || o.keepSubheaderVisible ? (p(), S("div", it, [
+        ue(Ze, {
+          "chart-type": n(C),
+          "onUpdate:chart-type": r[0] || (r[0] = (a) => fe(C) ? C.value = a : null),
+          "type-switcher": n(u) ? o.typeSwitcher : !1,
+          header: n(u) ? o.header : null,
           subheader: o.subheader,
+          "subheader-tooltip": o.subheaderTooltip,
+          "trend-tooltip": o.trendTooltip,
           compact: o.compactHeader,
-          "trend-value": o.trendValue,
-          "trend-direction": o.trendDirection
-        }, ae({ _: 2 }, [
+          "trend-value": n(u) ? o.trendValue : null,
+          "trend-direction": o.trendDirection,
+          "note-text": o.noteText,
+          "test-id": o.testId
+        }, pe({ _: 2 }, [
           t.$slots["subheader-tooltip"] ? {
             name: "subheader-tooltip",
-            fn: oe(() => [
-              re(t.$slots, "subheader-tooltip", {}, void 0, !0)
+            fn: he(() => [
+              me(t.$slots, "subheader-tooltip", {}, void 0, !0)
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["chart-type", "type-switcher", "header", "subheader", "compact", "trend-value", "trend-direction"])
-      ]),
-      h("div", Oe, [
-        h("canvas", {
-          ref_key: "chartRef",
-          ref: c,
-          class: "chart__canvas"
-        }, null, 512),
-        h("div", {
-          ref_key: "tooltipRef",
-          ref: R,
-          class: "chart__tooltip",
-          style: le(s(G))
-        }, [
-          l.value ? (f(), b(Le, {
-            key: 0,
-            title: String(l.value.title),
-            "data-points": l.value.dataPoints,
-            "x-axis-format": o.xAxisFormat,
-            "y-axis-format": o.yAxisFormat,
-            "total-label": l.value.footer[0],
-            "total-value": Number(l.value.footer[1])
-          }, null, 8, ["title", "data-points", "x-axis-format", "y-axis-format", "total-label", "total-value"])) : I("", !0)
-        ], 4)
-      ])
-    ])) : o.loading ? (f(), b(Ve, {
-      key: 1,
-      class: "chart-loading"
-    })) : s(T) ? (f(), b(s(we), {
-      key: 2,
-      class: "chart-empty",
-      title: o.noDataTitle,
-      subtitle: o.noDataSubtitle,
-      "icon-name": o.noDataIcon
-    }, null, 8, ["title", "subtitle", "icon-name"])) : I("", !0);
+        ]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction", "note-text", "test-id"])
+      ])) : L("", !0),
+      n(u) ? (p(), S("section", nt, [
+        R("div", st, [
+          R("canvas", {
+            ref_key: "chartRef",
+            ref: T,
+            class: "chart__canvas"
+          }, null, 512),
+          R("div", {
+            ref_key: "tooltipRef",
+            ref: N,
+            class: "chart__tooltip",
+            style: Te(n(ae))
+          }, [
+            c.value ? (p(), I(We, {
+              key: 0,
+              "totals-chart": n(f),
+              title: String(c.value.title),
+              "data-points": c.value.dataPoints,
+              "x-axis-format": o.xAxisFormat,
+              "y-axis-format": o.yAxisFormat,
+              "x-axis-date-interval": o.xAxisDateInterval,
+              "total-label": c.value.footer?.[0],
+              "total-value": Number(c.value.footer?.[1]),
+              "value-suffix": o.valueSuffix,
+              "value-prefix": o.valuePrefix,
+              "test-id": o.testId
+            }, null, 8, ["totals-chart", "title", "data-points", "x-axis-format", "y-axis-format", "x-axis-date-interval", "total-label", "total-value", "value-suffix", "value-prefix", "test-id"])) : L("", !0)
+          ], 4)
+        ])
+      ])) : o.loading ? (p(), I(Je, ve({
+        key: 2,
+        class: "chart-loading"
+      }, n(ie)[n($).LOADER]), null, 16)) : n(D) ? (p(), I(n(qe), {
+        key: 3,
+        class: "chart-empty",
+        variant: null,
+        title: o.noDataTitle,
+        subtitle: o.noDataSubtitle,
+        "icon-name": o.noDataIcon,
+        "test-id": o.testId
+      }, null, 8, ["title", "subtitle", "icon-name", "test-id"])) : L("", !0)
+    ]));
   }
 });
 export {
-  Je as default
+  Rt as default
 };