@zeniai/web-components 3.17.10 → 3.17.11

package/dist/TopExCard-BSAezMA5.js

@@ -1,569 +0,0 @@
-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-DcL7gbcq.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-CYKfxP6l.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-B6XEY9p8.cjs

@@ -1,132 +0,0 @@
-"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-oQR57CDD.cjs"),j=require("./TopExCard-3l0FRlw4.cjs"),R=require("./TimeframeSwitcher-CX1iPOpe.cjs"),$=require("./NoDataTable-Bk83v6gQ.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;