@zeniai/web-components 3.17.12 → 3.17.14

package/dist/TopExCard-JXq6eMME.js

@@ -0,0 +1,569 @@
+import { u as f, j as e, A as K, k as G } from "./vendor-.pnpm-B2klaOGU.js";
+import b, { useState as P } from "react";
+import { TOP_EX_TIME_PERIODS as N } from "@zeniai/client-epic-state";
+import { S as g, ev as T, F as I, eX as V, a as E, eu as X, e as Y, D as p, ew as q, P as H, a2 as W, w as F, o as J, t as L, dM as Q, u as U, et as Z } from "./index-De4lhuEW.js";
+import x from "@emotion/styled";
+import { Bar as k, Cell as B, BarChart as $, XAxis as A, YAxis as R, LabelList as tt, Text as et } from "recharts";
+import { C as nt, R as ot } from "./ReloadCard-BJcjCLHT.js";
+import { S as at, a as rt } from "./graphic-no-data-l-DU4J8fDt.js";
+const st = x(T)`
+  justify-content: space-between;
+  margin: 0;
+  height: ${(t) => t.height != null ? t.height + "px" : "auto"};
+  width: ${(t) => t.width != null ? t.width + "px" : "auto"};
+`, it = x.div``, lt = x(I)`
+  color: ${(t) => t.theme.colors.hero};
+  margin: ${g.sp2} ${g.sp0} ${g.sp2} ${g.sp0};
+`, ct = ({
+  width: t,
+  height: s,
+  label: o
+}) => {
+  const l = f();
+  return /* @__PURE__ */ e.jsxs(st, { height: s, width: t, children: [
+    /* @__PURE__ */ e.jsx(it, {}),
+    l.mode === "light" ? /* @__PURE__ */ e.jsx(at, { style: { marginBottom: g.sp4 } }) : /* @__PURE__ */ e.jsx(rt, { style: { marginBottom: g.sp4 } }),
+    /* @__PURE__ */ e.jsx(lt, { children: o })
+  ] });
+}, mt = x.div``;
+function ut({
+  allowedValues: t,
+  timeframeSelected: s,
+  onTimeframeChanged: o,
+  textStyle: l
+}) {
+  const r = (a) => E.getLocalizedStrings().timeframe[a];
+  return /* @__PURE__ */ e.jsx(
+    mt,
+    {
+      onClick: (a) => a.stopPropagation(),
+      children: /* @__PURE__ */ e.jsx(
+        V,
+        {
+          pickerValues: t,
+          valueToLabel: r,
+          selectedValue: s,
+          onPickerSelectionChanged: o,
+          optionTextStyle: l
+        }
+      )
+    }
+  );
+}
+const dt = x(H)`
+  color: ${(t) => t.theme.colors.champion};
+`, S = x.div`
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  align-items: center;
+`;
+function ht({
+  dimension: t,
+  reportTitle: s,
+  cardType: o,
+  cardIndex: l,
+  onCardClick: r,
+  timeframe: a,
+  allowedValues: m,
+  chartElement: i,
+  onTimeframeChange: u
+}) {
+  const c = m.length > 0 ? " - " : "";
+  return /* @__PURE__ */ e.jsx(
+    X,
+    {
+      "data-testid": Y(
+        "dashboard",
+        `${o}-timeframe-${a}`
+      ),
+      style: { cursor: "pointer" },
+      dimension: t,
+      onClick: () => r(l, o),
+      children: /* @__PURE__ */ e.jsxs(T, { children: [
+        /* @__PURE__ */ e.jsxs(S, { style: { marginBottom: p[3] }, children: [
+          /* @__PURE__ */ e.jsx(dt, { children: s != null ? s + c : q(o) + c }),
+          " ",
+          m.length > 0 ? /* @__PURE__ */ e.jsx(
+            ut,
+            {
+              timeframeSelected: a,
+              onTimeframeChanged: (n) => u?.(n ?? "month"),
+              allowedValues: m
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ e.jsx(S, { style: { width: "100%", height: "100%", cursor: "pointer" }, children: /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: "100%"
+            },
+            children: /* @__PURE__ */ e.jsx(K, { children: ({ height: n, width: d }) => i(d, n) })
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function O({
+  card: t,
+  reportTitle: s,
+  actions: o,
+  timeframe: l,
+  allowedValues: r,
+  chartElement: a,
+  onTimeframeChange: m
+}) {
+  return t.fetchState === "In-Progress" || t.fetchState === "Not-Started" ? /* @__PURE__ */ e.jsx(
+    nt,
+    {
+      dimension: t.dimension,
+      animated: !t.disableAnimations
+    }
+  ) : t.fetchState === "Error" ? /* @__PURE__ */ e.jsx(
+    ot,
+    {
+      dimension: t.dimension,
+      cardType: t.cardType,
+      cardIndex: t.cardIndex,
+      onReloadData: o.onReloadData,
+      reportTitle: s
+    }
+  ) : /* @__PURE__ */ e.jsx(
+    ht,
+    {
+      dimension: t.dimension,
+      reportTitle: s,
+      cardType: t.cardType,
+      cardIndex: t.cardIndex,
+      onCardClick: o.onCardClick,
+      timeframe: l,
+      allowedValues: r ?? ["month", "quarter", "year"],
+      chartElement: a,
+      onTimeframeChange: (i) => {
+        o.onTimeframeChange?.(t.cardType, i), m?.(t.cardType, i);
+      }
+    }
+  );
+}
+b.memo(O);
+const w = (t, s, o) => {
+  const l = s.map(
+    (n) => ({
+      label: n.timePeriod,
+      startDate: n.startDate,
+      endDate: n.endDate
+    })
+  ), r = o.total, a = o.accountsOrdered.map((n) => ({
+    accountId: n.accountId,
+    accountDescription: n.accountDescription,
+    balance: n.balance,
+    logo: n.logo
+  })) ?? [], m = Math.min(
+    t,
+    a.length
+  ), i = a.length ? t - a.length : 0, u = r?.amount;
+  if (a.length > 0 && i > 0 && u != null && u !== 0) {
+    const n = a[m - 1].balance, d = n?.available?.amount != null ? Math.min(
+      30,
+      n?.available?.amount / u * 100
+    ) : 30;
+    for (let h = 0; h < i; h += 1) {
+      const y = d * (i - h) / (i + 1);
+      a.push({
+        accountId: h.toString(),
+        accountDescription: "",
+        balance: {
+          available: {
+            amount: u * y / 100,
+            currencySymbol: n.available.currencySymbol,
+            currencyCode: n.available.currencyCode
+          }
+        }
+      });
+    }
+  }
+  const c = a.map((n) => {
+    const d = "top_expenses", h = {
+      accountId: n.accountId,
+      accountDescription: n.accountDescription,
+      total: r ?? void 0,
+      logo: n.logo ?? "",
+      barKey: d
+    };
+    return h[d] = n.balance.available, h;
+  });
+  return { timeframeLabelsInOrder: l, chartItems: c };
+}, C = 37, j = 2, xt = x.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  color: ${(t) => t.theme.colors.hero};
+`, gt = x.div`
+  display: flex;
+  align-items: center;
+  flex: 4 1 0;
+`, pt = x.img`
+  height: ${g.sp4};
+`, ft = x(I)`
+  margin-left: ${g.sp2};
+`, yt = x(F)`
+  flex: 1 1 0;
+  color: ${(t) => t.theme.colors.primary};
+`, Ct = x(J)`
+  flex: 1 1 0;
+  margin-right: ${g.sp2};
+`;
+function jt({
+  report: t,
+  width: s,
+  height: o,
+  showBarHoverBackground: l
+}) {
+  const r = f(), a = w(
+    t.topExpenses.accountsOrdered.length,
+    t.allTimePeriods,
+    t.topExpenses
+  ), m = (i, u) => /* @__PURE__ */ e.jsx(
+    k,
+    {
+      dataKey: (c) => {
+        const n = c[u] != null ? c[u] : void 0;
+        return n != null && n.amount > 0 ? n.amount : 0;
+      },
+      isAnimationActive: !0,
+      animationDuration: 800,
+      background: {
+        fill: r.colors.background
+      },
+      children: i.map((c) => /* @__PURE__ */ e.jsx(B, { fill: r.colors.topExCustomColor }, u))
+    },
+    Math.random()
+  );
+  return a.chartItems.length === 0 ? null : /* @__PURE__ */ e.jsx(
+    St,
+    {
+      chartItemArray: a.chartItems,
+      showBarHoverBackground: l,
+      barElement: m(
+        a.chartItems,
+        a.chartItems[0].barKey
+      ),
+      width: s,
+      height: o
+    }
+  );
+}
+const bt = (t) => {
+  const { barKey: s, payload: o, chartItems: l, width: r, y: a } = t, m = o.value, i = l.find(
+    (u) => u.accountId == m
+  );
+  return i == null || i.accountDescription == null ? null : /* @__PURE__ */ e.jsx(
+    "foreignObject",
+    {
+      y: a - o.offset + j,
+      width: r,
+      height: C,
+      children: /* @__PURE__ */ e.jsxs(xt, { children: [
+        /* @__PURE__ */ e.jsxs(gt, { children: [
+          /* @__PURE__ */ e.jsx(
+            pt,
+            {
+              src: i.logo,
+              alt: i.accountDescription,
+              loading: "lazy"
+            }
+          ),
+          /* @__PURE__ */ e.jsx(ft, { children: i.accountDescription })
+        ] }),
+        /* @__PURE__ */ e.jsx(yt, { children: "⟶" }),
+        /* @__PURE__ */ e.jsx(Ct, { children: W("0,0", i[s]) })
+      ] })
+    }
+  );
+}, St = ({
+  chartItemArray: t,
+  barElement: s,
+  width: o,
+  height: l
+}) => {
+  const r = t[0], a = r.total, m = r.barKey;
+  return /* @__PURE__ */ e.jsxs(
+    $,
+    {
+      data: t,
+      layout: "vertical",
+      width: o,
+      barCategoryGap: j,
+      height: t.length ? (C + 2 * j) * t.length : l,
+      barSize: C,
+      margin: {
+        top: 0,
+        right: 0,
+        left: 0,
+        bottom: 0
+      },
+      style: {
+        display: "flex",
+        flex: "1 1 auto",
+        cursor: "default"
+      },
+      children: [
+        /* @__PURE__ */ e.jsx(
+          A,
+          {
+            hide: !0,
+            axisLine: !1,
+            type: "number",
+            domain: [
+              (i) => Math.min(0, i),
+              a?.amount ?? 0
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          R,
+          {
+            orientation: "left",
+            yAxisId: 0,
+            dataKey: (i) => i.accountId,
+            type: "category",
+            axisLine: !1,
+            tickLine: !1,
+            width: o / 2,
+            mirror: !1,
+            tick: /* @__PURE__ */ e.jsx(
+              bt,
+              {
+                width: o / 2,
+                chartItems: t,
+                barKey: m
+              }
+            )
+          }
+        ),
+        s
+      ]
+    }
+  );
+}, v = 41, D = 4;
+function vt({
+  report: t,
+  width: s,
+  height: o,
+  showBarHoverBackground: l,
+  isDetailPage: r
+}) {
+  const a = f(), m = w(
+    r === !0 ? t.topExpenses.accountsOrdered.length : 6,
+    t.allTimePeriods,
+    t.topExpenses
+  ), i = (u, c, n) => /* @__PURE__ */ e.jsxs(
+    k,
+    {
+      dataKey: (d) => {
+        const h = d[c] != null ? d[c] : void 0;
+        return h != null && h.amount > 0 ? h.amount : 0;
+      },
+      isAnimationActive: !0,
+      animationDuration: r === !0 ? 800 : void 0,
+      background: void 0,
+      children: [
+        /* @__PURE__ */ e.jsx(
+          tt,
+          {
+            dataKey: "accountDescription",
+            position: "insideLeft",
+            offset: 8,
+            content: (d) => {
+              const { x: h, y, value: z, height: M, offset: _ } = d;
+              return /* @__PURE__ */ e.jsx(
+                et,
+                {
+                  x: h + _,
+                  y: y + M / 2,
+                  fill: a.colors.hero,
+                  fontSize: L.smallRegular.fontSize,
+                  verticalAnchor: "middle",
+                  width: n - 110,
+                  maxLines: 1,
+                  children: z
+                }
+              );
+            }
+          }
+        ),
+        u.map((d) => /* @__PURE__ */ e.jsx(
+          B,
+          {
+            fill: d.accountDescription !== "" ? a.colors.graphColor29 : a.colors.grey3,
+            fillOpacity: d.accountDescription !== "" ? 0.32 : 1
+          },
+          c
+        ))
+      ]
+    },
+    Math.random()
+  );
+  return m.chartItems.length === 0 ? null : /* @__PURE__ */ e.jsx(
+    Dt,
+    {
+      chartItemArray: m.chartItems,
+      showBarHoverBackground: l,
+      barElement: i(
+        m.chartItems,
+        m.chartItems[0].barKey,
+        s
+      ),
+      width: s,
+      height: o,
+      isDetailPage: r === !0
+    }
+  );
+}
+const Dt = ({
+  chartItemArray: t,
+  barElement: s,
+  width: o,
+  height: l,
+  isDetailPage: r
+}) => {
+  const a = f(), m = t[0], i = m.total, u = m.barKey, c = i?.currencySymbol ?? "";
+  return /* @__PURE__ */ e.jsxs(
+    $,
+    {
+      data: t,
+      layout: "vertical",
+      width: o,
+      barCategoryGap: r ? D : 2,
+      height: r ? t.length ? (v + 2 * D) * t.length : l : l + 5,
+      barSize: r ? v : 38,
+      margin: {
+        top: 0,
+        right: r ? p[0] : p[3],
+        left: r ? p[0] : p[3],
+        bottom: 0
+      },
+      style: {
+        display: "flex",
+        flex: "1 1 auto",
+        cursor: r ? "default" : "pointer"
+      },
+      children: [
+        /* @__PURE__ */ e.jsx(
+          A,
+          {
+            hide: !0,
+            axisLine: !1,
+            type: "number",
+            domain: [
+              (n) => Math.min(0, n),
+              i?.amount ?? 0
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          R,
+          {
+            orientation: "right",
+            yAxisId: 0,
+            dataKey: (n) => {
+              const d = n[u] != null ? n[u] : void 0, { accountDescription: h } = n;
+              return h !== "" && d != null ? d.amount : 0;
+            },
+            type: "category",
+            axisLine: !1,
+            tickLine: !1,
+            width: o,
+            mirror: !0,
+            tick: {
+              fill: a.colors.hero,
+              ...L.smallRegular.cssObject
+            },
+            tickFormatter: (n) => n !== 0 ? Q("0,0.[00]a", n, c) : ""
+          }
+        ),
+        s
+      ]
+    }
+  );
+};
+function Tt(t) {
+  const s = U();
+  return s !== "small" && s !== "medium-compact" && t.isDetailPage === !0 ? /* @__PURE__ */ e.jsx(jt, { ...t }) : /* @__PURE__ */ e.jsx(vt, { ...t });
+}
+const It = b.memo(Tt, G);
+function Et(t) {
+  if (t == null || t.length === 0)
+    return !0;
+  let s = !0;
+  for (const o of t)
+    if (o.balance.available.amount !== 0) {
+      s = !1;
+      break;
+    }
+  return s;
+}
+function Lt({
+  card: t,
+  actions: s,
+  data: o,
+  dndProps: l
+}) {
+  const [r, a] = P(
+    o?.topExTimePeriod ?? "last_month"
+  ), m = [...N], i = t.fetchState === "Completed" ? Et(o?.topExpenses.accountsOrdered) : !1, u = (c, n) => i === !1 ? /* @__PURE__ */ e.jsx(
+    It,
+    {
+      report: o,
+      width: c,
+      height: n,
+      timeframe: r
+    }
+  ) : /* @__PURE__ */ e.jsx(
+    ct,
+    {
+      width: c,
+      height: n,
+      label: E.getLocalizedStrings().chartCard.no_data.top_expenses[r]
+    }
+  );
+  return /* @__PURE__ */ e.jsx(
+    Z,
+    {
+      isDragging: l?.draggedCardType != null,
+      isDragOver: l?.dragOverCard === t.cardType,
+      draggable: !0,
+      onDragStart: (c) => l?.onDragStart(t.cardType, c),
+      onDragOver: (c) => l?.onDragOver(c, t.cardType),
+      onDragLeave: (c) => l?.onDragLeave(c),
+      onDrop: (c) => l?.onDrop(c, t.cardType),
+      dimension: t.dimension,
+      children: /* @__PURE__ */ e.jsx(
+        O,
+        {
+          card: t,
+          actions: s,
+          timeframe: r,
+          chartElement: u,
+          allowedValues: m,
+          onTimeframeChange: (c, n) => a(n)
+        }
+      )
+    },
+    t.cardIndex
+  );
+}
+b.memo(Lt);
+export {
+  O as C,
+  ct as E,
+  It as M,
+  Lt as T,
+  Et as i
+};

package/dist/TopExDetailPage-6kQkW-pJ.cjs

@@ -0,0 +1,132 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./vendor-.pnpm-D0ILHvHB.cjs"),i=require("@emotion/styled"),y=require("@zeniai/client-analytics"),v=require("@zeniai/client-epic-state"),t=require("./index-DHSetD4K.cjs"),j=require("./TopExCard-CctAg_lJ.cjs"),R=require("./TimeframeSwitcher-OIL8AXGh.cjs"),$=require("./NoDataTable-QllsQCqp.cjs"),w=require("react");function b(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const r=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(o,s,r.get?r:{enumerable:!0,get:()=>e[s]})}}return o.default=e,Object.freeze(o)}const a=b(w),C="141px",T=t.Space.sp4;t.sp[4];const A="123px",k=i(t.SvgArrowRight)`
+  color: inherit;
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  &:hover {
+    color: inherit;
+  }
+`,P=i.div`
+  user-select: none;
+  display: flex;
+  width: 100%;
+  flex-flow: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: ${t.Space.sp3};
+  margin-bottom: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.isClickable?e.theme.colors.primary:e.theme.colors.hero};
+  }
+`,D=i.div`
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-direction: row;
+  justify-content: flex-end;
+`,H=i(t.StandardRegular)`
+  user-select: none;
+  width: ${C};
+  min-width: ${C};
+  text-align: right;
+  margin-left: ${T};
+`,B=i.div`
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 2;
+  flex-grow: 1;
+  align-items: center;
+`,L=i(t.StandardRegular)`
+  user-select: none;
+  display: flex;
+  min-width: ${A};
+  text-align: left;
+  margin-left: ${t.Space.sp4};
+`;function M({leftChevron:e,account:o,onAccountBalanceClick:s}){const r=o!=null&&o.balance!=null,l=e==="hidden",h=r?"pointer":"default",c=l===!1&&r,g=c?"pointer":"default",d=l?t.sp[6]:t.sp[4],x=k,{common:{strings:{empty:f}}}=t.appLocale.getLocalizedStrings(),E=o?.accountDescription?o.accountDescription:f,m=o?.accountName?o.accountName:E;return n.jsxRuntimeExports.jsxs(P,{isClickable:c,children:[n.jsxRuntimeExports.jsxs(B,{style:{cursor:g},isClickable:c,children:[l===!1?n.jsxRuntimeExports.jsx(x,{style:{minWidth:t.sp[3],minHeight:t.sp[3]}}):null,n.jsxRuntimeExports.jsx(L,{"data-testid":t.generateDataTestId("top-ex-account-name",m),style:{marginLeft:d},title:m,onClick:()=>{c&&o!=null&&o.balance!=null&&s?.(o)},children:m})]}),n.jsxRuntimeExports.jsx(D,{style:{cursor:h},children:n.jsxRuntimeExports.jsx(H,{isClickable:r,onClick:()=>{o?.balance!=null&&s?.(o)},children:t.amountToString("0,0",o?.balance.available)})})]})}const z=i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`,N=i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`,F=i.div`
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 1px;
+  background-color: ${e=>e.theme.colors.grey3};
+`;function V({accounts:e,onAccountBalanceClick:o}){const s=(r,l)=>r.length>1&&l<r.length-1;return n.jsxRuntimeExports.jsx(z,{children:e?.map((r,l)=>n.jsxRuntimeExports.jsxs(N,{children:[n.jsxRuntimeExports.jsx(M,{leftChevron:"collapsed",account:r,onAccountBalanceClick:o}),s(e,l)===!0?n.jsxRuntimeExports.jsx(F,{}):null]},l))})}const _=w.memo(V),O=i.div`
+  margin: ${t.Space.sp0} ${t.Space.sp0} ${t.Space.sp6} ${t.Space.sp0};
+  background-color: inherit;
+  width: 100%;
+`;function q({report:e,onAccountBalanceClick:o}){const s=l=>{l!=null&&e.topExpenses!=null&&o?.(l,e.topExpenses)},r=e.topExpenses.accountsOrdered;return n.jsxRuntimeExports.jsx(O,{children:n.jsxRuntimeExports.jsx(_,{accounts:r,onAccountBalanceClick:s})})}const I=e=>a.createElement("svg",{viewBox:"0 0 1089 119",height:119,role:"img",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},a.createElement("path",{d:"M563 0H1085C1087.21 0 1089 1.79086 1089 4V33C1089 35.2091 1087.21 37 1085 37H563V0Z",fill:"#202122"}),a.createElement("rect",{y:18,width:523,height:1,fill:"#3E4043"}),a.createElement("path",{d:"M563 41H1085C1087.21 41 1089 42.7909 1089 45V74C1089 76.2091 1087.21 78 1085 78H563V41Z",fill:"#202122"}),a.createElement("rect",{y:59,width:523,height:1,fill:"#3E4043"}),a.createElement("path",{d:"M563 82H1085C1087.21 82 1089 83.7909 1089 86V115C1089 117.209 1087.21 119 1085 119H563V82Z",fill:"#202122"}),a.createElement("rect",{y:100,width:523,height:1,fill:"#3E4043"})),W=e=>a.createElement("svg",{viewBox:"0 0 1089 119",height:119,role:"img",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},a.createElement("path",{d:"M563 0H1085C1087.21 0 1089 1.79086 1089 4V33C1089 35.2091 1087.21 37 1085 37H563V0Z",fill:"#FAFBFC"}),a.createElement("rect",{y:18,width:523,height:1,fill:"#E9ECF0"}),a.createElement("path",{d:"M563 41H1085C1087.21 41 1089 42.7909 1089 45V74C1089 76.2091 1087.21 78 1085 78H563V41Z",fill:"#FAFBFC"}),a.createElement("rect",{y:59,width:523,height:1,fill:"#E9ECF0"}),a.createElement("path",{d:"M563 82H1085C1087.21 82 1089 83.7909 1089 86V115C1089 117.209 1087.21 119 1085 119H563V82Z",fill:"#FAFBFC"}),a.createElement("rect",{y:100,width:523,height:1,fill:"#E9ECF0"})),Z=i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`,X=i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`,G=i.div`
+  display: flex;
+  width: 100%;
+  height: 20vh;
+  min-height: 150px;
+  flex-grow: 0;
+  max-width: 100%;
+  flex-basis: 100%;
+  flex-direction: column;
+`,J=i(t.StandardRegular)`
+  color: ${t.Colors.alert};
+  margin: ${t.Space.sp3} ${t.Space.sp0} ${t.Space.sp5} ${t.Space.sp0};
+`;function K(){switch(n.useTheme().mode){case"light":return n.jsxRuntimeExports.jsx(W,{width:"100%",preserveAspectRatio:"none"});case"dark":default:return n.jsxRuntimeExports.jsx(I,{width:"100%",preserveAspectRatio:"none"})}}function Q({title:e}){return n.jsxRuntimeExports.jsxs(Z,{children:[e!=null?n.jsxRuntimeExports.jsx(J,{children:e}):null,n.jsxRuntimeExports.jsx(X,{children:n.jsxRuntimeExports.jsx(G,{children:n.jsxRuntimeExports.jsx(K,{})})})]})}const u={wrapperPadding:new t.ResponsiveSized(t.sp[3],t.sp[3],t.sp[8]),chartContainerMinHeight:new t.ResponsiveSized(t.sp[12],t.sp[11])},U=i.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey4};
+`,Y=i.div`
+  position: relative;
+  box-shadow: ${e=>`2px 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  background-color: ${e=>e.theme.colors.grey5};
+  padding-top: ${t.Space.sp0};
+  padding-bottom: ${t.Space.sp0};
+  padding-left: ${e=>u.wrapperPadding.valuePx(e.windowSize)};
+  padding-right: ${e=>u.wrapperPadding.valuePx(e.windowSize)};
+`,ee=i.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  justify-content: center;
+  max-width: 100%;
+`,te=i.div`
+  display: flex;
+  padding: ${t.Space.sp2} ${t.Space.sp0} ${t.Space.sp4} ${t.Space.sp0};
+`,ne=i.div`
+  display: flex;
+  justify-content: center;
+  padding-top: ${t.Space.sp4};
+  padding-bottom: ${t.Space.sp4};
+  padding-left: ${e=>u.wrapperPadding.valuePx(e.windowSize)};
+  padding-right: ${e=>u.wrapperPadding.valuePx(e.windowSize)};
+  background-color: ${e=>e.theme.colors.grey4};
+`,ie=i.div`
+  height: ${t.Space.sp9};
+  color: ${e=>e.theme.colors.primary};
+`,oe=i(t.H5RegularSp)``,se=i(t.LargeMediumSp)`
+  padding-left: ${t.Space.sp3};
+`,re=i.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: ${e=>u.chartContainerMinHeight.valuePx(e.windowSize)};
+  margin-bottom: ${t.Space.sp5};
+`,ae=i.div`
+  display: flex;
+`;function le(e){const o=n.useTheme(),{report:s,onTimeframeSelectionChanged:r,onAccountBalanceClick:l,onBackClick:h}=e,c=t.useWindowSizeContext(),g=[...v.TOP_EX_TIME_PERIODS],d=j.isEmptyBalances(s.topExpenses.accountsOrdered),{topExTimePeriod:x,topExpenses:f}=s,E=f.total,m=p=>{e.autoCompleteData.autoCompleteText!=null&&e.analytics?.trackSearch(y.Event.search,"Top Expenses",p.type,p.name,e.autoCompleteData.autoCompleteText),e.autoCompleteActions.onAutoCompleteEntity?.(p)};return n.jsxRuntimeExports.jsxs(U,{children:[n.jsxRuntimeExports.jsx(t.NavBar,{source:"TopExDetailPage",title:t.appLocale.getLocalizedStrings().reportTitleById.top_expenses,backgroundColor:o.colors.grey5,onBackClick:h,searchAutoComplete:{autoCompleteData:e.autoCompleteData,autoCompleteActions:{...e.autoCompleteActions,onAutoCompleteEntity:m}}}),n.jsxRuntimeExports.jsxs(Y,{windowSize:c,children:[n.jsxRuntimeExports.jsx(te,{children:n.jsxRuntimeExports.jsx(ee,{children:n.jsxRuntimeExports.jsx(R.TimeframeSwitcher,{timeframes:g,selectedTimeframe:x,onTimeframeSelectionChanged:p=>{r?.(p)}})})}),d?null:n.jsxRuntimeExports.jsxs(ie,{children:[n.jsxRuntimeExports.jsx(oe,{children:t.amountToString("0,0",E)}),n.jsxRuntimeExports.jsx(se,{children:t.appLocale.getLocalizedStrings().reports.detail.topEx.insightLabel})]}),d?n.jsxRuntimeExports.jsx(ae,{children:n.jsxRuntimeExports.jsx(Q,{title:`${t.appLocale.getLocalizedStrings().chartCard.no_data_available_for} ${t.appLocale.getLocalizedStrings().timeframe[x]}`})}):n.jsxRuntimeExports.jsx(re,{windowSize:c,children:n.jsxRuntimeExports.jsx(n.AutoSizer,{style:{height:"fit-content"},children:({height:p,width:S})=>n.jsxRuntimeExports.jsx(j.MemoTopExChart,{report:s,timeframe:x,showBarHoverBackground:!1,width:S,height:p,isDetailPage:!0})})})]}),n.jsxRuntimeExports.jsx(ne,{windowSize:c,children:d?n.jsxRuntimeExports.jsx($.NoDataTable,{}):n.jsxRuntimeExports.jsx(q,{report:s,onAccountBalanceClick:l})})]})}exports.default=le;