@zeniai/web-components 3.17.12 → 3.17.13

package/dist/TopExDetailPage-BNkhedqt.js

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

package/dist/TopExDetailPage-Bu3RGUh9.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-CDBWihyC.cjs"),j=require("./TopExCard-BcR8o3D6.cjs"),R=require("./TimeframeSwitcher-Cvbhu9uo.cjs"),$=require("./NoDataTable-BpBCZD2g.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;