@mx-cartographer/experiences 9.4.3 → 9.4.5

package/dist/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleBarChartBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles'\n\nimport { useInsightsV2Store } from '../../../../common'\nimport type { DataSeries } from '../../../../core'\nimport { DoubleBarChart } from '../../../components/chartblocks/DoubleBarChart'\n\nimport type { BlockProps } from '../../types'\n\nimport { buildComparisonSeries } from './comparisonUtils'\nimport { getLayoutConfig } from './layout'\n\n/**\n * Card block for the double-bar chart. Mirrors BarchartBlock: it builds the shaped series\n * (buildComparisonSeries) and resolves the card palette (getLayoutConfig), then renders the reusable\n * DoubleBarChart and injects the card click behavior \\u2014 open the shared drawer scoped to this beat\n * (chartBarIndex = clicked column, tabIndex = clicked sub-series).\n */\nexport const DoubleBarChartBlock = ({\n  payload: { instance_slot, instance_slot_data, widget_type },\n  beatGuid = '',\n}: BlockProps) => {\n  const theme = useTheme()\n  const { openChartDrilldown } = useInsightsV2Store()\n  const { variant } = instance_slot\n  const { ariaLabel = '', data_series, legends } = instance_slot_data\n  const bars = buildComparisonSeries(data_series as DataSeries, ariaLabel)\n  // getLayoutConfig returns undefined for an unknown/unsupported variant; fall back to an empty\n  // palette so an unregistered beat can't throw on mount.\n  const colors = getLayoutConfig(theme, variant)?.color ?? []\n\n  return (\n    <DoubleBarChart\n      bars={bars}\n      colors={colors}\n      isMini={widget_type === 'mini'}\n      legends={legends}\n      onBarClick={(columnIndex, subIndex) =>\n        openChartDrilldown(beatGuid, { chartBarIndex: columnIndex, tabIndex: subIndex })\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;AAiBA,IAAa,IAAA,CAAuB,EAClC,SAAS,EAAE,eAAA,GAAe,oBAAA,GAAoB,aAAA,EAAA,GAC9C,UAAA,IAAW,GAAA,MACK;AAChB,QAAM,IAAQ,EAAS,GACjB,EAAE,oBAAA,EAAA,IAAuB,EAAmB,GAC5C,EAAE,SAAA,EAAA,IAAY,GACd,EAAE,WAAA,IAAY,IAAI,aAAA,GAAa,SAAA,EAAA,IAAY,GAC3C,IAAO,EAAsB,GAA2B,CAAS,GAGjE,IAAS,EAAgB,GAAO,CAAO,GAAG,SAAS,CAAC;AAE1D,SACE,gBAAA,EAAC,GAAD;AAAA,IACQ,MAAA;AAAA,IACE,QAAA;AAAA,IACR,QAAQ,MAAgB;AAAA,IACf,SAAA;AAAA,IACT,YAAA,CAAa,GAAa,MACxB,EAAmB,GAAU;AAAA,MAAE,eAAe;AAAA,MAAa,UAAU;AAAA,IAAS,CAAC;AAAA,EAElF,CAAA;AAEL"}

package/dist/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/comparisonUtils.d.ts

@@ -0,0 +1,9 @@
+import { DataSeries } from '../../../../core';
+import { DataSet } from '../../../../core/types/InsightsInstanceSlotData';
+/**
+ * Reshapes a flat comparison data_series into one shaped bar per month, sorted ascending by date —
+ * the double-bar equivalent of buildChartData. Each month has exactly two contiguous rows; the
+ * Income row becomes the comparison series and the other becomes main, regardless of wire order.
+ * Months are then sorted ascending so the chart's bar index and the axis line up.
+ */
+export declare const buildComparisonSeries: (data: DataSeries | undefined, ariaLabel?: string) => DataSet[];

package/dist/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/comparisonUtils.es.js

@@ -0,0 +1,43 @@
+import { buildDynamicCopy as c } from "../../../../core/utils/Localization.es.js";
+import { DATE_FORMATS_INTL as p, formatDate as u } from "../../../../core/constants/DateFormats.es.js";
+import { formatCurrency as i } from "../../../../core/utils/NumberFormatting.es.js";
+import { buildDataSeries as h } from "../BarchartBlock/utils.es.js";
+import { parseISO as n } from "date-fns/parseISO";
+import { isValid as N } from "date-fns/isValid";
+var S = "income", T = (e) => String(e?.label ?? "").toLowerCase() === S, y = (e) => typeof e?.date == "string" && N(n(e.date)), b = (e) => String(e?.localized_label ?? e?.label ?? ""), g = (e) => {
+  const o = typeof e == "number" ? e : Number(e);
+  return Number.isFinite(o) ? o : 0;
+}, v = (e, o = "") => {
+  const l = h(e).filter(y);
+  if (l.length === 0) return [];
+  const m = /* @__PURE__ */ new Map();
+  for (const t of l) {
+    const r = String(t.date).slice(0, 7), a = m.get(r);
+    a ? a.push(t) : m.set(r, [t]);
+  }
+  const f = [...m.values()].filter((t) => t.length === 2);
+  return f.length === 0 ? [] : f.map((t) => {
+    const r = t.find(T) ?? t[t.length - 1];
+    return {
+      mainRow: t.find((a) => a !== r) ?? t[0],
+      comparisonRow: r
+    };
+  }).sort(({ mainRow: t }, { mainRow: r }) => n(t.date).getTime() - n(r.date).getTime()).map(({ mainRow: t, comparisonRow: r }) => {
+    const a = g(t.amount), s = g(r.amount), d = u(n(t.date), p.MONTH_LONG);
+    return {
+      ariaLabelMain: c(o, d, i(a, "0,0.00"), b(t)),
+      ariaLabelComparison: c(o, d, i(s, "0,0.00"), b(r)),
+      comparison: s,
+      date: t.date,
+      formattedComparison: i(s, "0,0"),
+      formattedMain: i(a, "0,0"),
+      label: u(n(t.date), p.MONTH_SHORT),
+      main: a
+    };
+  });
+};
+export {
+  v as buildComparisonSeries
+};
+
+//# sourceMappingURL=comparisonUtils.es.js.map

package/dist/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/comparisonUtils.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparisonUtils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/comparisonUtils.ts"],"sourcesContent":["import { isValid } from 'date-fns/isValid'\nimport { parseISO } from 'date-fns/parseISO'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DataSeries } from '../../../../core'\nimport type { DataSet } from '../../../../core/types/InsightsInstanceSlotData'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { buildDataSeries } from '../BarchartBlock/utils'\n\n// The comparison (second) series across every double-bar variant is Income (spend/savings/debt/\n// cost-of-living are all \"X to Income\"). `label` is the stable, non-localized category key, so we\n// key off it rather than row position — the wire lists income first within some months.\nconst INCOME_LABEL = 'income'\nconst isIncomeRow = (row: { label?: string }): boolean =>\n  String(row?.label ?? '').toLowerCase() === INCOME_LABEL\n\n// A date-only wire string ('2026-03-01') is a valid ISO date; anything the backend sends that\n// parseISO can't turn into a real Date is dropped before it can poison the ascending sort with a\n// NaN comparator (which would scramble column order — and the chartBarIndex the card forwards to the\n// drilldown on click).\nconst hasValidDate = (row: { date?: string }): boolean =>\n  typeof row?.date === 'string' && isValid(parseISO(row.date))\n\n// The series name shown to screen readers. `localized_label` should be coming from the backend's already-localized\n// display name; Document the backend contract inline so the fallback intent is explicit:\n// `localized_label` is expected on every beat whose ariaLabel template uses _3{}.\n// `label` ('income'/'spend') is an English-only fallback for dev/error scenarios.\nconst seriesName = (row: { localized_label?: string; label?: string }): string =>\n  String(row?.localized_label ?? row?.label ?? '')\n\n// `amount` is wire data and only loosely typed. `?? 0` guards a missing value but not a non-numeric\n// one (a stray string/null would render as NaN in the bar and the aria label), so coerce and fall\n// back to 0 unless the result is a finite number.\nconst toAmount = (value: unknown): number => {\n  const parsed = typeof value === 'number' ? value : Number(value)\n  return Number.isFinite(parsed) ? parsed : 0\n}\n\n/**\n * Reshapes a flat comparison data_series into one shaped bar per month, sorted ascending by date —\n * the double-bar equivalent of buildChartData. Each month has exactly two contiguous rows; the\n * Income row becomes the comparison series and the other becomes main, regardless of wire order.\n * Months are then sorted ascending so the chart's bar index and the axis line up.\n */\nexport const buildComparisonSeries = (data: DataSeries | undefined, ariaLabel = ''): DataSet[] => {\n  // Guard the wire data before shaping it: `data_series` is type-asserted upstream, not validated, so\n  // drop any row without a parseable date rather than let it flow into the sort/group logic.\n  const flat = buildDataSeries(data).filter(hasValidDate)\n  if (flat.length === 0) {\n    return []\n  }\n\n  // Bucket rows by calendar month (YYYY-MM), not the exact date string, so a month whose rows carry\n  // different day-of-month values (e.g. 2026-01-01 vs 2026-01-15) still groups into one bar rather\n  // than two size-1 groups that are then dropped as malformed. First-seen order is preserved so the\n  // ascending date sort below is stable.\n  const byDate = new Map<string, any[]>()\n  for (const row of flat) {\n    const monthKey = String(row.date).slice(0, 7)\n    const group = byDate.get(monthKey)\n    if (group) group.push(row)\n    else byDate.set(monthKey, [row])\n  }\n\n  // Keep only well-formed months (exactly one main + one comparison row). A month that lost a row to\n  // the date guard above, or arrived malformed, is dropped on its own instead of blanking the whole\n  // chart; return [] only when no valid month remains.\n  const groups = [...byDate.values()].filter((group) => group.length === 2)\n  if (groups.length === 0) {\n    return []\n  }\n\n  return groups\n    .map((group) => {\n      // Income is always the comparison series; the remaining row is the main category. Fall back to\n      // wire order (first = main, last = comparison) if no row is labeled income.\n      const comparisonRow = group.find(isIncomeRow) ?? group[group.length - 1]\n      const mainRow = group.find((row) => row !== comparisonRow) ?? group[0]\n      return { mainRow, comparisonRow }\n    })\n    .sort(\n      ({ mainRow: a }, { mainRow: b }) => parseISO(a.date).getTime() - parseISO(b.date).getTime(),\n    )\n    .map(({ mainRow, comparisonRow }) => {\n      const main = toAmount(mainRow.amount)\n      const comparison = toAmount(comparisonRow.amount)\n      const monthLong = formatDate(parseISO(mainRow.date), DATE_FORMATS_INTL.MONTH_LONG)\n\n      return {\n        // The series name is passed as a third copy slot (_3{}) so a screen-reader user can tell the\n        // main bar from the comparison bar. The backend template controls whether/where it renders;\n        // when the template only has _1{}/_2{} the extra arg is ignored (no invented text).\n        ariaLabelMain: buildDynamicCopy(\n          ariaLabel,\n          monthLong,\n          formatCurrency(main, '0,0.00'),\n          seriesName(mainRow),\n        ) as string,\n        ariaLabelComparison: buildDynamicCopy(\n          ariaLabel,\n          monthLong,\n          formatCurrency(comparison, '0,0.00'),\n          seriesName(comparisonRow),\n        ) as string,\n        comparison,\n        date: mainRow.date,\n        formattedComparison: formatCurrency(comparison, '0,0'),\n        formattedMain: formatCurrency(main, '0,0'),\n        label: formatDate(parseISO(mainRow.date), DATE_FORMATS_INTL.MONTH_SHORT),\n        main,\n      }\n    })\n}\n"],"mappings":";;;;;;AAaA,IAAM,IAAe,UACf,IAAA,CAAe,MACnB,OAAO,GAAK,SAAS,EAAE,EAAE,YAAY,MAAM,GAMvC,IAAA,CAAgB,MACpB,OAAO,GAAK,QAAS,YAAY,EAAQ,EAAS,EAAI,IAAI,CAAC,GAMvD,IAAA,CAAc,MAClB,OAAO,GAAK,mBAAmB,GAAK,SAAS,EAAE,GAK3C,IAAA,CAAY,MAA2B;AAC3C,QAAM,IAAS,OAAO,KAAU,WAAW,IAAQ,OAAO,CAAK;AAC/D,SAAO,OAAO,SAAS,CAAM,IAAI,IAAS;AAC5C,GAQa,IAAA,CAAyB,GAA8B,IAAY,OAAkB;AAGhG,QAAM,IAAO,EAAgB,CAAI,EAAE,OAAO,CAAY;AACtD,MAAI,EAAK,WAAW,EAClB,QAAO,CAAC;AAOV,QAAM,IAAS,oBAAI,IAAmB;AACtC,aAAW,KAAO,GAAM;AACtB,UAAM,IAAW,OAAO,EAAI,IAAI,EAAE,MAAM,GAAG,CAAC,GACtC,IAAQ,EAAO,IAAI,CAAQ;AACjC,IAAI,IAAO,EAAM,KAAK,CAAG,IACpB,EAAO,IAAI,GAAU,CAAC,CAAG,CAAC;AAAA,EACjC;AAKA,QAAM,IAAS,CAAC,GAAG,EAAO,OAAO,CAAC,EAAE,OAAA,CAAQ,MAAU,EAAM,WAAW,CAAC;AACxE,SAAI,EAAO,WAAW,IACb,CAAC,IAGH,EACJ,IAAA,CAAK,MAAU;AAGd,UAAM,IAAgB,EAAM,KAAK,CAAW,KAAK,EAAM,EAAM,SAAS,CAAA;AAEtE,WAAO;AAAA,MAAE,SADO,EAAM,KAAA,CAAM,MAAQ,MAAQ,CAAa,KAAK,EAAM,CAAA;AAAA,MAClD,eAAA;AAAA,IAAc;AAAA,EAClC,CAAC,EACA,KAAA,CACE,EAAE,SAAS,EAAA,GAAK,EAAE,SAAS,EAAA,MAAQ,EAAS,EAAE,IAAI,EAAE,QAAQ,IAAI,EAAS,EAAE,IAAI,EAAE,QAAQ,CAC5F,EACC,IAAA,CAAK,EAAE,SAAA,GAAS,eAAA,EAAA,MAAoB;AACnC,UAAM,IAAO,EAAS,EAAQ,MAAM,GAC9B,IAAa,EAAS,EAAc,MAAM,GAC1C,IAAY,EAAW,EAAS,EAAQ,IAAI,GAAG,EAAkB,UAAU;AAEjF,WAAO;AAAA,MAIL,eAAe,EACb,GACA,GACA,EAAe,GAAM,QAAQ,GAC7B,EAAW,CAAO,CACpB;AAAA,MACA,qBAAqB,EACnB,GACA,GACA,EAAe,GAAY,QAAQ,GACnC,EAAW,CAAa,CAC1B;AAAA,MACA,YAAA;AAAA,MACA,MAAM,EAAQ;AAAA,MACd,qBAAqB,EAAe,GAAY,KAAK;AAAA,MACrD,eAAe,EAAe,GAAM,KAAK;AAAA,MACzC,OAAO,EAAW,EAAS,EAAQ,IAAI,GAAG,EAAkB,WAAW;AAAA,MACvE,MAAA;AAAA,IACF;AAAA,EACF,CAAC;AACL"}

package/dist/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/index.d.ts

@@ -1 +1 @@
-export * from './DoubleBarChart';
+export * from './DoubleBarChartBlock';

package/dist/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/layout.es.js

@@ -1,6 +1,6 @@
 var a = (t, o) => ({
   SpendToIncome: { color: [t.palette.categories.billsUtilities, t.palette.chart.chart1] },
-  DebtToIncome: { color: [t.palette.chart.chart1, t.palette.chart.chart5] },
+  DebtToIncome: { color: [t.palette.chart.chart5, t.palette.chart.chart1] },
   SavingsToIncome: { color: [t.palette.chartMono.chartMono5, t.palette.chartMono.chartMono3] }
 })[o];
 export {

package/dist/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/layout.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nexport const getLayoutConfig = (theme: Theme, variant: string | null) => {\n  const config = {\n    SpendToIncome: {\n      color: [theme.palette.categories.billsUtilities, theme.palette.chart.chart1] as string[],\n    },\n    DebtToIncome: {\n      color: [theme.palette.chart.chart1, theme.palette.chart.chart5] as string[],\n    },\n    SavingsToIncome: {\n      color: [theme.palette.chartMono.chartMono5, theme.palette.chartMono.chartMono3] as string[],\n    },\n  }\n  return config[variant as keyof typeof config]\n}\n"],"mappings":"AAEA,IAAa,IAAA,CAAmB,GAAc,OAYrC;AAAA,EAVL,eAAe,EACb,OAAO,CAAC,EAAM,QAAQ,WAAW,gBAAgB,EAAM,QAAQ,MAAM,MAAM,EAC7E;AAAA,EACA,cAAc,EACZ,OAAO,CAAC,EAAM,QAAQ,MAAM,QAAQ,EAAM,QAAQ,MAAM,MAAM,EAChE;AAAA,EACA,iBAAiB,EACf,OAAO,CAAC,EAAM,QAAQ,UAAU,YAAY,EAAM,QAAQ,UAAU,UAAU,EAChF;AAEK,GAAO,CAAA"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/layout.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nexport const getLayoutConfig = (theme: Theme, variant: string | null) => {\n  const config = {\n    SpendToIncome: {\n      color: [theme.palette.categories.billsUtilities, theme.palette.chart.chart1] as string[],\n    },\n    DebtToIncome: {\n      color: [theme.palette.chart.chart5, theme.palette.chart.chart1] as string[],\n    },\n    SavingsToIncome: {\n      color: [theme.palette.chartMono.chartMono5, theme.palette.chartMono.chartMono3] as string[],\n    },\n  }\n  return config[variant as keyof typeof config]\n}\n"],"mappings":"AAEA,IAAa,IAAA,CAAmB,GAAc,OAYrC;AAAA,EAVL,eAAe,EACb,OAAO,CAAC,EAAM,QAAQ,WAAW,gBAAgB,EAAM,QAAQ,MAAM,MAAM,EAC7E;AAAA,EACA,cAAc,EACZ,OAAO,CAAC,EAAM,QAAQ,MAAM,QAAQ,EAAM,QAAQ,MAAM,MAAM,EAChE;AAAA,EACA,iBAAiB,EACf,OAAO,CAAC,EAAM,QAAQ,UAAU,YAAY,EAAM,QAAQ,UAAU,UAAU,EAChF;AAEK,GAAO,CAAA"}

package/dist/insights-v2/{blocks/ChartBlocks/DoubleBarChartBlock → components/chartblocks}/ChartLegend.d.ts

@@ -1,5 +1,5 @@
 import { SxProps } from '@mui/material/styles';
-import { LegendProps } from '../../../../core/types/InsightsInstanceSlotData';
+import { LegendProps } from '../../../core/types/InsightsInstanceSlotData';
 export interface LegendComponentProps {
     legendItems: LegendProps[];
     legendStyle?: SxProps;

package/dist/insights-v2/{blocks/ChartBlocks/DoubleBarChartBlock → components/chartblocks}/ChartLegend.es.js

@@ -1,7 +1,7 @@
-import a from "@mui/material/Stack";
-import { Text as c } from "@mxenabled/mxui";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-var f = ({ legendItems: h, legendStyle: l }) => /* @__PURE__ */ t(a, {
+import n from "@mui/material/Stack";
+import { Text as l } from "@mxenabled/mxui";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+var f = ({ legendItems: h, legendStyle: o }) => /* @__PURE__ */ t(n, {
   sx: {
     alignItems: "flex-start",
     flexDirection: "row",
@@ -9,9 +9,9 @@ var f = ({ legendItems: h, legendStyle: l }) => /* @__PURE__ */ t(a, {
     justifyContent: "flex-start",
     py: 4,
     width: "100%",
-    ...l
+    ...o
   },
-  children: h.map(({ color: o, label: e, formattedAmount: i }, r) => e && /* @__PURE__ */ n(a, {
+  children: h.map(({ color: c, label: r, formattedAmount: i }, e) => r && /* @__PURE__ */ a(n, {
     sx: {
       alignItems: "center",
       flexDirection: "row",
@@ -19,27 +19,27 @@ var f = ({ legendItems: h, legendStyle: l }) => /* @__PURE__ */ t(a, {
     },
     children: [/* @__PURE__ */ t("svg", {
       "aria-hidden": "true",
-      "aria-labelledby": r === 0 ? "chartLegendLabel" : e,
+      "aria-labelledby": e === 0 ? "chartLegendLabel" : r,
       fill: "none",
       height: "12",
       role: "figure",
       width: "12",
       children: /* @__PURE__ */ t("rect", {
-        fill: o,
+        fill: c,
         height: "12",
         rx: "2",
         width: "12"
       })
-    }), /* @__PURE__ */ n(c, {
-      id: r === 0 ? "chartLegendLabel" : e,
+    }), /* @__PURE__ */ a(l, {
+      id: e === 0 ? "chartLegendLabel" : r,
       variant: "caption",
       children: [
-        e,
+        r,
         " ",
         i ? `: ${i}` : ""
       ]
     })]
-  }, r))
+  }, r ?? e))
 });
 export {
   f as Legend

package/dist/insights-v2/components/chartblocks/ChartLegend.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.es.js","names":[],"sources":["../../../../src/insights-v2/components/chartblocks/ChartLegend.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Stack from '@mui/material/Stack'\n\nimport type { SxProps } from '@mui/material/styles'\nimport type { LegendProps } from '../../../core/types/InsightsInstanceSlotData'\n\nexport interface LegendComponentProps {\n  legendItems: LegendProps[]\n  legendStyle?: SxProps\n}\n\nexport const Legend = ({ legendItems, legendStyle }: LegendComponentProps) => {\n  return (\n    <Stack\n      sx={{\n        alignItems: 'flex-start',\n        flexDirection: 'row',\n        gap: 24,\n        justifyContent: 'flex-start',\n        py: 4,\n        width: '100%',\n        ...legendStyle,\n      }}\n    >\n      {legendItems.map(\n        ({ color, label, formattedAmount }, index) =>\n          label && (\n            <Stack key={label ?? index} sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n              <svg\n                aria-hidden=\"true\"\n                aria-labelledby={index === 0 ? 'chartLegendLabel' : label}\n                fill=\"none\"\n                height=\"12\"\n                role=\"figure\"\n                width=\"12\"\n              >\n                <rect fill={color} height=\"12\" rx=\"2\" width=\"12\" />\n              </svg>\n              <Text id={index === 0 ? 'chartLegendLabel' : label} variant=\"caption\">\n                {label} {formattedAmount ? `: ${formattedAmount}` : ''}\n              </Text>\n            </Stack>\n          ),\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;AAYA,IAAa,IAAA,CAAU,EAAE,aAAA,GAAa,aAAA,EAAA,MAElC,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA,EAEC,UAAA,EAAY,IAAA,CACV,EAAE,OAAA,GAAO,OAAA,GAAO,iBAAA,EAAA,GAAmB,MAClC,KACE,gBAAA,EAAC,GAAD;AAAA,IAA4B,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,KAAK;AAAA,IAAE;AAAA,IAArF,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,MACE,eAAY;AAAA,MACZ,mBAAiB,MAAU,IAAI,qBAAqB;AAAA,MACpD,MAAK;AAAA,MACL,QAAO;AAAA,MACP,MAAK;AAAA,MACL,OAAM;AAAA,MAEN,UAAA,gBAAA,EAAC,QAAD;AAAA,QAAM,MAAM;AAAA,QAAO,QAAO;AAAA,QAAK,IAAG;AAAA,QAAI,OAAM;AAAA,MAAM,CAAA;AAAA,IAC/C,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI,MAAU,IAAI,qBAAqB;AAAA,MAAO,SAAQ;AAAA,MAA5D,UAAA;AAAA,QACG;AAAA,QAAM;AAAA,QAAE,IAAkB,KAAK,CAAA,KAAoB;AAAA,MAChD;AAAA,IACD,CAAA,CAAA;AAAA,EAdK,GAAA,KAAS,CAcd,CAEb;AACK,CAAA"}

package/dist/insights-v2/{blocks/ChartBlocks/DoubleBarChartBlock → components/chartblocks}/CustomDoubleBar.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { DataSet } from '../../../../core/types/InsightsInstanceSlotData';
+import { DataSet } from '../../../core/types/InsightsInstanceSlotData';
 interface BarStyleProps extends React.CSSProperties {
     x?: number;
     y?: number;

package/dist/insights-v2/components/chartblocks/CustomDoubleBar.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomDoubleBar.es.js","names":[],"sources":["../../../../src/insights-v2/components/chartblocks/CustomDoubleBar.tsx"],"sourcesContent":["import React from 'react'\nimport type { DataSet } from '../../../core/types/InsightsInstanceSlotData'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n}\n\ninterface CustomDoubleBarPlotMXUIProps {\n  color: string\n  data: DataSet[]\n  series: Series\n  style: BarStyleProps\n}\n\ninterface Series {\n  index: number\n  type: number\n}\n\nexport const CustomDoubleBarPlotMXUI = ({\n  color,\n  data,\n  series,\n  style,\n  ...restProps\n}: CustomDoubleBarPlotMXUIProps) => {\n  const rectRef = React.useRef<SVGRectElement>(null)\n\n  React.useLayoutEffect(() => {\n    const resizeObserver = new ResizeObserver(() => {\n      window.requestAnimationFrame(() => {\n        if (rectRef.current) {\n          const { width } = rectRef.current.getBoundingClientRect()\n\n          const xValue = width / 2\n          const textElement = rectRef.current.querySelector('text')\n          if (textElement) {\n            textElement.setAttribute('transform', `translate(${xValue}, -8)`)\n          }\n        }\n      })\n    })\n\n    if (rectRef.current) resizeObserver.observe(rectRef.current)\n    return () => {\n      if (rectRef.current) resizeObserver.unobserve(rectRef.current)\n    }\n  }, [])\n\n  const { ariaLabelComparison, ariaLabelMain } = data[series.index]\n\n  const ariaLabel = series.type === 0 ? ariaLabelMain : ariaLabelComparison\n\n  const rectStyle = {\n    ...style,\n    transition: 'all 0.3s ease-in-out',\n  }\n\n  // Create path with rounded top corners (10px radius) and square bottom corners\n  const pathBarWidth = (style.width as number) || 0\n  const pathBarHeight = (style.height as number) || 0\n  const pathX = (style.x as number) || 0\n  const pathY = (style.y as number) || 0\n  const radius = 4\n\n  const pathData = `\n    M ${pathX + radius},${pathY}\n    L ${pathX + pathBarWidth - radius},${pathY}\n    Q ${pathX + pathBarWidth},${pathY} ${pathX + pathBarWidth},${pathY + radius}\n    L ${pathX + pathBarWidth},${pathY + pathBarHeight}\n    L ${pathX},${pathY + pathBarHeight}\n    L ${pathX},${pathY + radius}\n    Q ${pathX},${pathY} ${pathX + radius},${pathY}\n    Z\n  `.trim()\n\n  return (\n    <g aria-label={ariaLabel}>\n      <path {...restProps} d={pathData} fill={color} style={rectStyle} />\n    </g>\n  )\n}\n"],"mappings":";;AAoBA,IAAa,IAAA,CAA2B,EACtC,OAAA,GACA,MAAA,GACA,QAAA,GACA,OAAA,GACA,GAAG,EAAA,MAC+B;AAClC,QAAM,IAAU,EAAM,OAAuB,IAAI;AAEjD,EAAA,EAAM,gBAAA,MAAsB;AAC1B,UAAM,IAAiB,IAAI,eAAA,MAAqB;AAC9C,aAAO,sBAAA,MAA4B;AACjC,YAAI,EAAQ,SAAS;AACnB,gBAAM,EAAE,OAAA,EAAA,IAAU,EAAQ,QAAQ,sBAAsB,GAElD,IAAS,IAAQ,GACjB,IAAc,EAAQ,QAAQ,cAAc,MAAM;AACxD,UAAI,KACF,EAAY,aAAa,aAAa,aAAa,CAAA,OAAa;AAAA,QAEpE;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,WAAI,EAAQ,WAAS,EAAe,QAAQ,EAAQ,OAAO,GAC3D,MAAa;AACX,MAAI,EAAQ,WAAS,EAAe,UAAU,EAAQ,OAAO;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,qBAAA,GAAqB,eAAA,EAAA,IAAkB,EAAK,EAAO,KAAA,GAErD,IAAY,EAAO,SAAS,IAAI,IAAgB,GAEhD,IAAY;AAAA,IAChB,GAAG;AAAA,IACH,YAAY;AAAA,EACd,GAGM,IAAgB,EAAM,SAAoB,GAC1C,IAAiB,EAAM,UAAqB,GAC5C,IAAS,EAAM,KAAgB,GAC/B,IAAS,EAAM,KAAgB,GAC/B,IAAS,GAET,IAAW;AAAA,QACX,IAAQ,CAAA,IAAU,CAAA;AAAA,QAClB,IAAQ,IAAe,CAAA,IAAU,CAAA;AAAA,QACjC,IAAQ,CAAA,IAAgB,CAAA,IAAS,IAAQ,CAAA,IAAgB,IAAQ,CAAA;AAAA,QACjE,IAAQ,CAAA,IAAgB,IAAQ,CAAA;AAAA,QAChC,CAAA,IAAS,IAAQ,CAAA;AAAA,QACjB,CAAA,IAAS,IAAQ,CAAA;AAAA,QACjB,CAAA,IAAS,CAAA,IAAS,IAAQ,CAAA,IAAU,CAAA;AAAA;AAAA,IAExC,KAAK;AAEP,SACE,gBAAA,EAAC,KAAD;AAAA,IAAG,cAAY;AAAA,IACb,UAAA,gBAAA,EAAC,QAAD;AAAA,MAAM,GAAI;AAAA,MAAW,GAAG;AAAA,MAAU,MAAM;AAAA,MAAO,OAAO;AAAA,IAAY,CAAA;AAAA,EACjE,CAAA;AAEP"}

package/dist/insights-v2/components/chartblocks/DoubleBarChart.d.ts

@@ -0,0 +1,17 @@
+import { Legends } from '../../../core';
+import { DataSet, LegendProps } from '../../../core/types/InsightsInstanceSlotData';
+interface DoubleBarChartProps {
+    bars: DataSet[];
+    colors: string[];
+    legends?: (Legends | LegendProps)[];
+    isMini?: boolean;
+    onBarClick: (columnIndex: number, subIndex: number) => void;
+}
+/**
+ * Pure double-bar chart (month columns x main/comparison). Presentational and self-contained \u2014 it
+ * receives shaped data + palette as props and reports clicks via onBarClick, holding no store,
+ * selection, or data-shaping of its own. This mirrors BarChartV2; the DoubleBarChartBlock card
+ * wrapper builds the data and injects the store behavior, exactly as BarchartBlock wraps BarChartV2.
+ */
+export declare const DoubleBarChart: ({ bars, colors, legends, isMini, onBarClick, }: DoubleBarChartProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/insights-v2/components/chartblocks/DoubleBarChart.es.js

@@ -0,0 +1,118 @@
+import { EmptyBarChart as b } from "./EmptyBarChart.es.js";
+import { useContainerDimensions as C } from "../../hooks/useContainerDimensions.es.js";
+import { CustomDoubleBarPlotMXUI as k } from "./CustomDoubleBar.es.js";
+import { Legend as w } from "./ChartLegend.es.js";
+import S from "react";
+import A from "@mui/material/Stack";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import I from "@mui/material/Box";
+import { BarPlot as B } from "@mui/x-charts/BarChart";
+import { ChartContainer as R } from "@mui/x-charts/ChartContainer";
+import { ChartsXAxis as L } from "@mui/x-charts/ChartsXAxis";
+var E = ({ bars: r, colors: n, legends: d, isMini: l = !1, onBarClick: h }) => {
+  const s = r.length - 1, p = 5e-3, f = 0.16, c = S.useRef(null), { height: y, width: x } = C(c), g = ({ dataIndex: e, seriesId: t }) => {
+    h(e, Number(t.split("-").pop()));
+  }, i = d?.map((e, t) => ({
+    color: n[t] ?? "transparent",
+    ...e
+  }));
+  return r.length > 0 ? /* @__PURE__ */ m(A, {
+    sx: {
+      mb: 0,
+      width: "100%",
+      p: 0
+    },
+    children: [/* @__PURE__ */ o(I, {
+      ref: c,
+      sx: {
+        height: l ? 120 : 172,
+        touchAction: "pan-y",
+        width: "100%",
+        p: 0,
+        m: 0,
+        "& svg": {
+          touchAction: "pan-y",
+          userSelect: "none"
+        },
+        "& .recharts-wrapper": { touchAction: "pan-y" }
+      },
+      children: /* @__PURE__ */ m(R, {
+        colors: n,
+        dataset: r,
+        height: y,
+        margin: {
+          bottom: 16,
+          left: 24,
+          right: 24,
+          top: 0
+        },
+        series: [{
+          dataKey: "main",
+          type: "bar"
+        }, {
+          dataKey: "comparison",
+          type: "bar"
+        }],
+        width: x,
+        xAxis: [{
+          barGapRatio: p,
+          categoryGapRatio: f,
+          dataKey: "label",
+          scaleType: "band"
+        }],
+        yAxis: [{ width: 0 }],
+        children: [/* @__PURE__ */ o(L, {
+          disableTicks: !1,
+          slots: { axisTickLabel: ({ text: e, ...t }) => {
+            const a = r[s]?.label;
+            return /* @__PURE__ */ o("text", {
+              ...t,
+              style: {
+                ...t.style,
+                fontWeight: a === e ? 700 : 400
+              },
+              children: e
+            });
+          } },
+          sx: { ".MuiChartsAxis-line": { stroke: "border.darker" } },
+          tickLabelStyle: {
+            fontSize: 11,
+            fill: "text.secondary",
+            fontWeight: 400
+          }
+        }), /* @__PURE__ */ o(B, {
+          onItemClick: (e, { dataIndex: t, seriesId: a }) => g({
+            dataIndex: t,
+            seriesId: a.toString()
+          }),
+          slots: { bar: (e) => {
+            const { ownerState: t, ...a } = e, u = s === t.dataIndex ? t.color : `${t.color}50`;
+            return /* @__PURE__ */ o(k, {
+              ...a,
+              color: u,
+              data: r,
+              series: {
+                index: t.dataIndex,
+                type: Number(t.id?.toString().split("-").pop() ?? 0)
+              },
+              style: {
+                height: e.height,
+                x: e.x,
+                y: e.y,
+                width: e.width
+              }
+            });
+          } }
+        })]
+      })
+    }), i && !l && i.length > 0 && /* @__PURE__ */ o(w, {
+      legendItems: i,
+      legendStyle: { ml: 24 }
+    })]
+  }) : /* @__PURE__ */ o(b, {});
+};
+export {
+  E as DoubleBarChart
+};
+
+//# sourceMappingURL=DoubleBarChart.es.js.map

package/dist/insights-v2/components/chartblocks/DoubleBarChart.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleBarChart.es.js","names":[],"sources":["../../../../src/insights-v2/components/chartblocks/DoubleBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { BarPlot } from '@mui/x-charts/BarChart'\nimport { ChartContainer } from '@mui/x-charts/ChartContainer'\nimport { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'\n\nimport { useContainerDimensions } from '../../hooks/useContainerDimensions'\nimport type { Legends } from '../../../core'\nimport type { DataSet, LegendProps } from '../../../core/types/InsightsInstanceSlotData'\n\nimport { CustomDoubleBarPlotMXUI } from './CustomDoubleBar'\nimport { Legend } from './ChartLegend'\nimport { EmptyBarChart } from './EmptyBarChart'\n\ninterface DoubleBarChartProps {\n  // Shaped comparison series (one entry per month column), built by the caller (buildComparisonSeries)\n  // \\u2014 mirroring how BarchartBlock builds `data` for BarChartV2.\n  bars: DataSet[]\n  // Two-entry palette [main, comparison]. Resolved by the caller (the card via getLayoutConfig). This\n  // prop is the only color hook \\u2014 getLayoutConfig itself is never modified.\n  colors: string[]\n  // Same shape as instance_slot_data.legends; mapped onto the palette below.\n  legends?: (Legends | LegendProps)[]\n  isMini?: boolean\n  // Called on a bar click with the clicked column and its sub-series (0 = main, 1 = comparison); the\n  // caller decides what a click does (card opens the drawer, drill-down updates its selection).\n  onBarClick: (columnIndex: number, subIndex: number) => void\n}\n\n/**\n * Pure double-bar chart (month columns x main/comparison). Presentational and self-contained \\u2014 it\n * receives shaped data + palette as props and reports clicks via onBarClick, holding no store,\n * selection, or data-shaping of its own. This mirrors BarChartV2; the DoubleBarChartBlock card\n * wrapper builds the data and injects the store behavior, exactly as BarchartBlock wraps BarChartV2.\n */\nexport const DoubleBarChart = ({\n  bars,\n  colors,\n  legends,\n  isMini = false,\n  onBarClick,\n}: DoubleBarChartProps) => {\n  // The most recent (last) column is emphasized; the others are dimmed.\n  const selectedTabIndex = bars.length - 1\n  const barGapRatio = 0.005\n  const categoryGapRatio = 0.16\n\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n\n  const handleBarClick = ({ dataIndex, seriesId }: { dataIndex: number; seriesId: string }) => {\n    const seriesType = Number(seriesId.split('-').pop())\n    onBarClick(dataIndex, seriesType)\n  }\n\n  // colors can be empty for an unregistered variant (getLayoutConfig miss); fall back to transparent\n  // so a swatch never renders as default-black.\n  const legendItems = legends?.map((legend, index) => ({\n    color: colors[index] ?? 'transparent',\n    ...legend,\n  })) as LegendProps[]\n\n  return bars.length > 0 ? (\n    <Stack sx={{ mb: 0, width: '100%', p: 0 }}>\n      <Box\n        ref={containerRef}\n        sx={{\n          height: isMini ? 120 : 172,\n          touchAction: 'pan-y',\n          width: '100%',\n          p: 0,\n          m: 0,\n          '& svg': {\n            touchAction: 'pan-y',\n            userSelect: 'none',\n          },\n          '& .recharts-wrapper': {\n            touchAction: 'pan-y',\n          },\n        }}\n      >\n        <ChartContainer\n          colors={colors}\n          dataset={bars as any[]}\n          height={height}\n          margin={{\n            bottom: 16,\n            left: 24,\n            right: 24,\n            top: 0,\n          }}\n          series={[\n            { dataKey: 'main', type: 'bar' },\n            { dataKey: 'comparison', type: 'bar' },\n          ]}\n          width={width}\n          xAxis={[\n            {\n              barGapRatio,\n              categoryGapRatio,\n              dataKey: 'label',\n              scaleType: 'band',\n            },\n          ]}\n          yAxis={[{ width: 0 }]}\n        >\n          <ChartsXAxis\n            disableTicks={false}\n            slots={{\n              axisTickLabel: ({ text, ...restProps }) => {\n                const selectedLabel = bars[selectedTabIndex]?.label\n                return (\n                  <text\n                    {...restProps}\n                    style={\n                      {\n                        ...restProps.style,\n                        fontWeight: selectedLabel === text ? 700 : 400,\n                      } as React.CSSProperties\n                    }\n                  >\n                    {text}\n                  </text>\n                )\n              },\n            }}\n            sx={{\n              '.MuiChartsAxis-line': {\n                stroke: 'border.darker',\n              },\n            }}\n            tickLabelStyle={{\n              fontSize: 11,\n              fill: 'text.secondary',\n              fontWeight: 400,\n            }}\n          />\n          <BarPlot\n            onItemClick={(_, { dataIndex, seriesId }) =>\n              handleBarClick({ dataIndex, seriesId: seriesId.toString() })\n            }\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                const isSelected = selectedTabIndex === ownerState.dataIndex\n                const barColor = isSelected ? ownerState.color : `${ownerState.color}50`\n\n                return (\n                  <CustomDoubleBarPlotMXUI\n                    {...defaultProps}\n                    color={barColor}\n                    data={bars}\n                    series={{\n                      index: ownerState.dataIndex,\n                      type: Number(ownerState.id?.toString().split('-').pop() ?? 0),\n                    }}\n                    style={{\n                      height: props.height,\n                      x: props.x,\n                      y: props.y,\n                      width: props.width,\n                    }}\n                  />\n                )\n              },\n            }}\n          />\n        </ChartContainer>\n      </Box>\n\n      {legendItems && !isMini && legendItems.length > 0 && (\n        <Legend legendItems={legendItems} legendStyle={{ ml: 24 }} />\n      )}\n    </Stack>\n  ) : (\n    <EmptyBarChart />\n  )\n}\n"],"mappings":"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"}

package/dist/insights-v2/index.es.js

@@ -1,6 +1,6 @@
 import { BAR_CHART_VARIANTS as o, barChartVariant as t, buildChartData as m, buildDataSeries as i } from "./blocks/ChartBlocks/BarchartBlock/utils.es.js";
 import { BarchartBlock as p } from "./blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
-import { DoubleBarChartBlock as e } from "./blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChart.es.js";
+import { DoubleBarChartBlock as e } from "./blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
 import n from "./blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
 import s from "./blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
 import g from "./blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";

package/dist/insights-v2/mappings/blocks.es.js

@@ -1,5 +1,5 @@
 import { BarchartBlock as o } from "../blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
-import { DoubleBarChartBlock as r } from "../blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChart.es.js";
+import { DoubleBarChartBlock as r } from "../blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
 import t from "../blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
 import c from "../blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
 import l from "../blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";

package/dist/investments/InvestmentsWidget.es.js

@@ -1,72 +1,106 @@
-import { useAccountStore as W, useEvent as w, useGlobalCopyStore as x, useGlobalUiStore as D, useHoldingStore as f } from "../common/context/hooks.es.js";
-import { useScreenSize as M } from "../common/hooks/useScreenSize.es.js";
-import { useWidgetLoadTimer as G } from "../common/hooks/useWidgetLoadTimer.es.js";
-import { ANALYTICS_EVENTS as o } from "../common/constants/Analytics.es.js";
-import { AccountType as O } from "../core/types/Account.es.js";
-import k from "../common/components/Loader.es.js";
-import { WidgetContainer as F } from "../common/components/WidgetContainer.es.js";
-import { EmptyState as K } from "../common/components/EmptyState.es.js";
-import V from "../accounts/components/ConnectionsDrawer.es.js";
-import H from "./components/Allocation.es.js";
-import U from "./components/Analysis.es.js";
-import j from "./components/Overview.es.js";
-import { TabTitle as z } from "./components/TabTitle.es.js";
-import c from "react";
-import { observer as R } from "mobx-react-lite";
-import Y from "@mui/material/Stack";
-import { Fragment as B, jsx as t, jsxs as l } from "react/jsx-runtime";
-import $ from "@mui/material/Tab";
-import q from "@mui/material/Tabs";
-var ut = R(({ onBackClick: u, onMenuClick: T, sx: _ }) => {
-  const { onEvent: n } = w(), { isMobile: C } = M(), { isAccountDataLoaded: E, loadAccountData: b, visibleInvestmentAccounts: I } = W(), { visibleHoldings: S, setShowConnectionsWidget: m, showConnectionsWidget: g } = f(), { investments: e, accounts: v } = x(), { isInitialized: r } = D(), [i, h] = c.useState(0), { loadHoldings: A, holdingsLoaded: d } = f();
-  G({
+import { useAccountStore as O, useEvent as k, useGlobalCopyStore as F, useGlobalUiStore as K, useHoldingStore as y } from "../common/context/hooks.es.js";
+import { useScreenSize as V } from "../common/hooks/useScreenSize.es.js";
+import { useWidgetLoadTimer as H } from "../common/hooks/useWidgetLoadTimer.es.js";
+import { ANALYTICS_EVENTS as s } from "../common/constants/Analytics.es.js";
+import { AccountType as U } from "../core/types/Account.es.js";
+import j from "../common/components/Loader.es.js";
+import { WidgetContainer as z } from "../common/components/WidgetContainer.es.js";
+import { EmptyState as B } from "../common/components/EmptyState.es.js";
+import R from "../accounts/components/ConnectionsDrawer.es.js";
+import Y from "./components/Allocation.es.js";
+import $ from "./components/Analysis.es.js";
+import q from "./components/Overview.es.js";
+import { TabTitle as J } from "./components/TabTitle.es.js";
+import l from "react";
+import { observer as P } from "mobx-react-lite";
+import Q from "@mui/material/Stack";
+import { Fragment as X, jsx as t, jsxs as T } from "react/jsx-runtime";
+import Z from "@mui/material/Tab";
+import tt from "@mui/material/Tabs";
+import et from "@mui/material/Tooltip";
+var It = P(({ onBackClick: I, onMenuClick: S, sx: g }) => {
+  const { onEvent: c } = k(), { isMobile: v } = V(), { isAccountDataLoaded: A, loadAccountData: N, visibleInvestmentAccounts: L } = O(), { visibleHoldings: x, hasAllocationData: m, hasAnalysisData: d, setShowConnectionsWidget: _, showConnectionsWidget: D } = y(), { investments: e, accounts: W } = F(), { isInitialized: p } = K(), [o, f] = l.useState(0), { loadHoldings: w, holdingsLoaded: n } = y();
+  H({
     widgetName: "InvestmentsWidget",
-    isLoaded: d
-  }), c.useEffect(() => {
-    E || b().finally();
-  }, []), c.useEffect(() => {
-    r && A().finally();
-  }, [r]);
-  const N = () => {
-    n(o.INVESTMENT_WIDGET_ACCOUNT_FILTER_CLICK);
+    isLoaded: n
+  }), l.useEffect(() => {
+    A || N().finally();
+  }, []), l.useEffect(() => {
+    p && w().finally();
+  }, [p]), l.useEffect(() => {
+    n && (o === 1 && !m && f(0), o === 2 && !d && f(0));
+  }, [
+    o,
+    m,
+    d,
+    n
+  ]);
+  const M = () => {
+    c(s.INVESTMENT_WIDGET_ACCOUNT_FILTER_CLICK);
   };
-  if (!r || !d) return /* @__PURE__ */ t(k, {});
-  const y = [
-    o.INVESTMENT_WIDGET_DETAILS_CLICK,
-    o.INVESTMENT_WIDGET_ALLOCATION_CLICK,
-    o.INVESTMENT_WIDGET_ANALYSIS_CLICK
-  ], s = I.length === 0 && S.length === 0, L = [
-    e.tab_overview_title,
-    e.tab_allocation_title,
-    e.tab_analysis_title
+  if (!p || !n) return /* @__PURE__ */ t(j, {});
+  const G = [
+    s.INVESTMENT_WIDGET_DETAILS_CLICK,
+    s.INVESTMENT_WIDGET_ALLOCATION_CLICK,
+    s.INVESTMENT_WIDGET_ANALYSIS_CLICK
+  ], i = L.length === 0 && x.length === 0, b = [
+    {
+      title: e.tab_overview_title,
+      disabled: !1,
+      tooltip: ""
+    },
+    {
+      title: e.tab_allocation_title,
+      disabled: !m,
+      tooltip: e.allocation.empty_data
+    },
+    {
+      title: e.tab_analysis_title,
+      disabled: !d,
+      tooltip: e.analysis.empty_data
+    }
   ];
-  return /* @__PURE__ */ l(F, {
-    allowedAccountTypes: [O.INVESTMENT],
-    onAccountsFilterClick: N,
-    onBackClick: u,
-    onMenuClick: T,
-    sx: _,
+  return /* @__PURE__ */ T(z, {
+    allowedAccountTypes: [U.INVESTMENT],
+    onAccountsFilterClick: M,
+    onBackClick: I,
+    onMenuClick: S,
+    sx: g,
     title: e.title,
-    children: [/* @__PURE__ */ l(Y, {
-      mx: C ? 0 : 48,
+    children: [/* @__PURE__ */ T(Q, {
+      mx: v ? 0 : 48,
       my: 24,
-      children: [/* @__PURE__ */ t(q, {
-        onChange: (a, p) => {
-          h(p), n(y[p]);
+      children: [/* @__PURE__ */ t(tt, {
+        onChange: (r, a) => {
+          i || b[a]?.disabled || (f(a), c(G[a]));
         },
         sx: { bgcolor: "background.paper" },
         textColor: "primary",
-        value: s ? !1 : i,
+        value: i ? !1 : o,
         variant: "fullWidth",
-        children: L.map((a) => /* @__PURE__ */ t($, {
-          disabled: s,
-          label: /* @__PURE__ */ t(z, { title: a })
-        }, a))
-      }), s ? /* @__PURE__ */ t(K, {
+        children: b.map(({ title: r, disabled: a, tooltip: C }) => {
+          const u = i || a, E = u && !i && !!C, h = /* @__PURE__ */ t(Z, {
+            "aria-disabled": u || void 0,
+            label: /* @__PURE__ */ t(J, { title: r }),
+            sx: {
+              ...E && { flex: 1 },
+              ...u && {
+                opacity: 0.38,
+                cursor: "default"
+              }
+            }
+          }, r);
+          return E ? /* @__PURE__ */ t(et, {
+            describeChild: !0,
+            title: C,
+            children: h
+          }, r) : h;
+        })
+      }), i ? /* @__PURE__ */ t(B, {
         header: e.empty_state_header,
         icon: "bid_landscape",
         onClick: () => {
-          m(!0), n(o.ACCOUNTS_CLICK_CONNECT);
+          _(!0), c(s.ACCOUNTS_CLICK_CONNECT);
         },
         primaryButton: e.overview.connect_accounts,
         subText: e.empty_state_description,
@@ -79,20 +113,20 @@ var ut = R(({ onBackClick: u, onMenuClick: T, sx: _ }) => {
           },
           px: 16
         }
-      }) : /* @__PURE__ */ l(B, { children: [
-        i === 0 && /* @__PURE__ */ t(j, {}),
-        i === 1 && /* @__PURE__ */ t(H, {}),
-        i === 2 && /* @__PURE__ */ t(U, {})
+      }) : /* @__PURE__ */ T(X, { children: [
+        o === 0 && /* @__PURE__ */ t(q, {}),
+        o === 1 && /* @__PURE__ */ t(Y, {}),
+        o === 2 && /* @__PURE__ */ t($, {})
       ] })]
-    }), /* @__PURE__ */ t(V, {
-      onClose: () => m(!1),
-      showConnectionsWidget: g,
-      title: v.manage_connections
+    }), /* @__PURE__ */ t(R, {
+      onClose: () => _(!1),
+      showConnectionsWidget: D,
+      title: W.manage_connections
     })]
   });
 });
 export {
-  ut as InvestmentsWidget
+  It as InvestmentsWidget
 };
 
 //# sourceMappingURL=InvestmentsWidget.es.js.map

package/dist/investments/InvestmentsWidget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InvestmentsWidget.es.js","names":[],"sources":["../../src/investments/InvestmentsWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\n\nimport {\n  ANALYTICS_EVENTS,\n  EmptyState,\n  Loader,\n  useAccountStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useHoldingStore,\n  useScreenSize,\n  useWidgetLoadTimer,\n  WidgetContainer,\n} from '../common'\nimport { AccountType, WidgetProps } from '../core'\n\nimport ConnectionsDrawer from '../accounts/components/ConnectionsDrawer'\nimport Allocation from './components/Allocation'\nimport Analysis from './components/Analysis'\nimport Overview from './components/Overview'\nimport { TabTitle } from './components/TabTitle'\n\nexport const InvestmentsWidget = observer(({ onBackClick, onMenuClick, sx }: WidgetProps) => {\n  const { onEvent } = useEvent()\n  const { isMobile } = useScreenSize()\n  const {\n    isAccountDataLoaded,\n    loadAccountData,\n    visibleInvestmentAccounts: accounts,\n  } = useAccountStore()\n  const {\n    visibleHoldings: holdings,\n    setShowConnectionsWidget,\n    showConnectionsWidget,\n  } = useHoldingStore()\n  const { investments: copy, accounts: accountsCopy } = useGlobalCopyStore()\n\n  const { isInitialized } = useGlobalUiStore()\n\n  const [selectedTab, setSelectedTab] = React.useState(0)\n\n  const { loadHoldings, holdingsLoaded } = useHoldingStore()\n\n  useWidgetLoadTimer({\n    widgetName: 'InvestmentsWidget',\n    isLoaded: holdingsLoaded,\n  })\n\n  React.useEffect(() => {\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n  }, [])\n\n  React.useEffect(() => {\n    if (isInitialized) {\n      loadHoldings().finally()\n    }\n  }, [isInitialized])\n\n  const handleAccountFilterClick = () => {\n    onEvent(ANALYTICS_EVENTS.INVESTMENT_WIDGET_ACCOUNT_FILTER_CLICK)\n  }\n\n  if (!isInitialized || !holdingsLoaded) return <Loader />\n\n  const events = [\n    ANALYTICS_EVENTS.INVESTMENT_WIDGET_DETAILS_CLICK,\n    ANALYTICS_EVENTS.INVESTMENT_WIDGET_ALLOCATION_CLICK,\n    ANALYTICS_EVENTS.INVESTMENT_WIDGET_ANALYSIS_CLICK,\n  ]\n  const isEmptyState = accounts.length === 0 && holdings.length === 0\n  const investmentTabs = [\n    copy.tab_overview_title,\n    copy.tab_allocation_title,\n    copy.tab_analysis_title,\n  ]\n  return (\n    <WidgetContainer\n      allowedAccountTypes={[AccountType.INVESTMENT]}\n      onAccountsFilterClick={handleAccountFilterClick}\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      sx={sx}\n      title={copy.title}\n    >\n      <Stack mx={isMobile ? 0 : 48} my={24}>\n        <Tabs\n          onChange={(_, newValue) => {\n            setSelectedTab(newValue)\n            onEvent(events[newValue])\n          }}\n          sx={{ bgcolor: 'background.paper' }}\n          textColor=\"primary\"\n          value={!isEmptyState ? selectedTab : false}\n          variant=\"fullWidth\"\n        >\n          {investmentTabs.map((title) => (\n            <Tab disabled={isEmptyState} key={title} label={<TabTitle title={title} />} />\n          ))}\n        </Tabs>\n        {isEmptyState ? (\n          <EmptyState\n            header={copy.empty_state_header}\n            icon=\"bid_landscape\"\n            onClick={() => {\n              setShowConnectionsWidget(true)\n              onEvent(ANALYTICS_EVENTS.ACCOUNTS_CLICK_CONNECT)\n            }}\n            primaryButton={copy.overview.connect_accounts}\n            subText={copy.empty_state_description}\n            sx={{\n              width: { sm: 432 },\n              '.buttons-footer': {\n                width: 167,\n              },\n              '.MuiTypography-h2': {\n                mt: 20,\n                mb: 4,\n              },\n              px: 16,\n            }}\n          />\n        ) : (\n          <>\n            {selectedTab === 0 && <Overview />}\n            {selectedTab === 1 && <Allocation />}\n            {selectedTab === 2 && <Analysis />}\n          </>\n        )}\n      </Stack>\n      <ConnectionsDrawer\n        onClose={() => setShowConnectionsWidget(false)}\n        showConnectionsWidget={showConnectionsWidget}\n        title={accountsCopy.manage_connections}\n      />\n    </WidgetContainer>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"InvestmentsWidget.es.js","names":[],"sources":["../../src/investments/InvestmentsWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\nimport Tooltip from '@mui/material/Tooltip'\n\nimport {\n  ANALYTICS_EVENTS,\n  EmptyState,\n  Loader,\n  useAccountStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useHoldingStore,\n  useScreenSize,\n  useWidgetLoadTimer,\n  WidgetContainer,\n} from '../common'\nimport { AccountType, WidgetProps } from '../core'\n\nimport ConnectionsDrawer from '../accounts/components/ConnectionsDrawer'\nimport Allocation from './components/Allocation'\nimport Analysis from './components/Analysis'\nimport Overview from './components/Overview'\nimport { TabTitle } from './components/TabTitle'\n\nexport const InvestmentsWidget = observer(({ onBackClick, onMenuClick, sx }: WidgetProps) => {\n  const { onEvent } = useEvent()\n  const { isMobile } = useScreenSize()\n  const {\n    isAccountDataLoaded,\n    loadAccountData,\n    visibleInvestmentAccounts: accounts,\n  } = useAccountStore()\n  const {\n    visibleHoldings: holdings,\n    hasAllocationData,\n    hasAnalysisData,\n    setShowConnectionsWidget,\n    showConnectionsWidget,\n  } = useHoldingStore()\n  const { investments: copy, accounts: accountsCopy } = useGlobalCopyStore()\n\n  const { isInitialized } = useGlobalUiStore()\n\n  const [selectedTab, setSelectedTab] = React.useState(0)\n\n  const { loadHoldings, holdingsLoaded } = useHoldingStore()\n\n  useWidgetLoadTimer({\n    widgetName: 'InvestmentsWidget',\n    isLoaded: holdingsLoaded,\n  })\n\n  React.useEffect(() => {\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n  }, [])\n\n  React.useEffect(() => {\n    if (isInitialized) {\n      loadHoldings().finally()\n    }\n  }, [isInitialized])\n\n  // Reset to Overview if the active tab becomes disabled. Only act once holdings\n  // are loaded so a mid-refetch (getters briefly false) doesn't eject the user.\n  // Depend only on the boolean getters, never `visibleHoldings` (new array each\n  // access → render loop).\n  React.useEffect(() => {\n    if (!holdingsLoaded) return\n    if (selectedTab === 1 && !hasAllocationData) setSelectedTab(0)\n    if (selectedTab === 2 && !hasAnalysisData) setSelectedTab(0)\n  }, [selectedTab, hasAllocationData, hasAnalysisData, holdingsLoaded])\n\n  const handleAccountFilterClick = () => {\n    onEvent(ANALYTICS_EVENTS.INVESTMENT_WIDGET_ACCOUNT_FILTER_CLICK)\n  }\n\n  if (!isInitialized || !holdingsLoaded) return <Loader />\n\n  const events = [\n    ANALYTICS_EVENTS.INVESTMENT_WIDGET_DETAILS_CLICK,\n    ANALYTICS_EVENTS.INVESTMENT_WIDGET_ALLOCATION_CLICK,\n    ANALYTICS_EVENTS.INVESTMENT_WIDGET_ANALYSIS_CLICK,\n  ]\n  const isEmptyState = accounts.length === 0 && holdings.length === 0\n  const investmentTabs = [\n    { title: copy.tab_overview_title, disabled: false, tooltip: '' },\n    {\n      title: copy.tab_allocation_title,\n      disabled: !hasAllocationData,\n      tooltip: copy.allocation.empty_data,\n    },\n    {\n      title: copy.tab_analysis_title,\n      disabled: !hasAnalysisData,\n      tooltip: copy.analysis.empty_data,\n    },\n  ]\n  return (\n    <WidgetContainer\n      allowedAccountTypes={[AccountType.INVESTMENT]}\n      onAccountsFilterClick={handleAccountFilterClick}\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      sx={sx}\n      title={copy.title}\n    >\n      <Stack mx={isMobile ? 0 : 48} my={24}>\n        <Tabs\n          onChange={(_, newValue) => {\n            // aria-disabled tabs stay clickable; block their selection here.\n            if (isEmptyState || investmentTabs[newValue]?.disabled) return\n            setSelectedTab(newValue)\n            onEvent(events[newValue])\n          }}\n          sx={{ bgcolor: 'background.paper' }}\n          textColor=\"primary\"\n          value={!isEmptyState ? selectedTab : false}\n          variant=\"fullWidth\"\n        >\n          {investmentTabs.map(({ title, disabled, tooltip }) => {\n            const isDisabled = isEmptyState || disabled\n            const isTooltipTab = isDisabled && !isEmptyState && Boolean(tooltip)\n            // aria-disabled (not native disabled) keeps the Tab focusable and in\n            // the a11y tree; describeChild adds the reason without stealing the name.\n            const tab = (\n              <Tab\n                aria-disabled={isDisabled || undefined}\n                key={title}\n                label={<TabTitle title={title} />}\n                sx={{\n                  ...(isTooltipTab && { flex: 1 }),\n                  ...(isDisabled && {\n                    opacity: 0.38,\n                    cursor: 'default',\n                  }),\n                }}\n              />\n            )\n\n            return isTooltipTab ? (\n              <Tooltip describeChild key={title} title={tooltip}>\n                {tab}\n              </Tooltip>\n            ) : (\n              tab\n            )\n          })}\n        </Tabs>\n        {isEmptyState ? (\n          <EmptyState\n            header={copy.empty_state_header}\n            icon=\"bid_landscape\"\n            onClick={() => {\n              setShowConnectionsWidget(true)\n              onEvent(ANALYTICS_EVENTS.ACCOUNTS_CLICK_CONNECT)\n            }}\n            primaryButton={copy.overview.connect_accounts}\n            subText={copy.empty_state_description}\n            sx={{\n              width: { sm: 432 },\n              '.buttons-footer': {\n                width: 167,\n              },\n              '.MuiTypography-h2': {\n                mt: 20,\n                mb: 4,\n              },\n              px: 16,\n            }}\n          />\n        ) : (\n          <>\n            {selectedTab === 0 && <Overview />}\n            {selectedTab === 1 && <Allocation />}\n            {selectedTab === 2 && <Analysis />}\n          </>\n        )}\n      </Stack>\n      <ConnectionsDrawer\n        onClose={() => setShowConnectionsWidget(false)}\n        showConnectionsWidget={showConnectionsWidget}\n        title={accountsCopy.manage_connections}\n      />\n    </WidgetContainer>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,KAAoB,EAAA,CAAU,EAAE,aAAA,GAAa,aAAA,GAAa,IAAA,EAAA,MAAsB;AAC3F,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,UAAA,EAAA,IAAa,EAAc,GAC7B,EACJ,qBAAA,GACA,iBAAA,GACA,2BAA2B,EAAA,IACzB,EAAgB,GACd,EACJ,iBAAiB,GACjB,mBAAA,GACA,iBAAA,GACA,0BAAA,GACA,uBAAA,EAAA,IACE,EAAgB,GACd,EAAE,aAAa,GAAM,UAAU,EAAA,IAAiB,EAAmB,GAEnE,EAAE,eAAA,EAAA,IAAkB,EAAiB,GAErC,CAAC,GAAa,CAAA,IAAkB,EAAM,SAAS,CAAC,GAEhD,EAAE,cAAA,GAAc,gBAAA,EAAA,IAAmB,EAAgB;AAEzD,EAAA,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC,GAED,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAAgB,EAAE,QAAQ;AAAA,EAE9B,GAAG,CAAC,CAAC,GAEL,EAAM,UAAA,MAAgB;AACpB,IAAI,KACF,EAAa,EAAE,QAAQ;AAAA,EAE3B,GAAG,CAAC,CAAa,CAAC,GAMlB,EAAM,UAAA,MAAgB;AACpB,IAAK,MACD,MAAgB,KAAK,CAAC,KAAmB,EAAe,CAAC,GACzD,MAAgB,KAAK,CAAC,KAAiB,EAAe,CAAC;AAAA,EAC7D,GAAG;AAAA,IAAC;AAAA,IAAa;AAAA,IAAmB;AAAA,IAAiB;AAAA,EAAc,CAAC;AAEpE,QAAM,IAAA,MAAiC;AACrC,IAAA,EAAQ,EAAiB,sCAAsC;AAAA,EACjE;AAEA,MAAI,CAAC,KAAiB,CAAC,EAAgB,QAAO,gBAAA,EAAC,GAAD,CAAS,CAAA;AAEvD,QAAM,IAAS;AAAA,IACb,EAAiB;AAAA,IACjB,EAAiB;AAAA,IACjB,EAAiB;AAAA,EACnB,GACM,IAAe,EAAS,WAAW,KAAK,EAAS,WAAW,GAC5D,IAAiB;AAAA,IACrB;AAAA,MAAE,OAAO,EAAK;AAAA,MAAoB,UAAU;AAAA,MAAO,SAAS;AAAA,IAAG;AAAA,IAC/D;AAAA,MACE,OAAO,EAAK;AAAA,MACZ,UAAU,CAAC;AAAA,MACX,SAAS,EAAK,WAAW;AAAA,IAC3B;AAAA,IACA;AAAA,MACE,OAAO,EAAK;AAAA,MACZ,UAAU,CAAC;AAAA,MACX,SAAS,EAAK,SAAS;AAAA,IACzB;AAAA,EACF;AACA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,qBAAqB,CAAC,EAAY,UAAU;AAAA,IAC5C,uBAAuB;AAAA,IACV,aAAA;AAAA,IACA,aAAA;AAAA,IACT,IAAA;AAAA,IACJ,OAAO,EAAK;AAAA,IANd,UAAA,CAQE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,IAAW,IAAI;AAAA,MAAI,IAAI;AAAA,MAAlC,UAAA,CACE,gBAAA,EAAC,IAAD;AAAA,QACE,UAAA,CAAW,GAAG,MAAa;AAEzB,UAAI,KAAgB,EAAe,CAAA,GAAW,aAC9C,EAAe,CAAQ,GACvB,EAAQ,EAAO,CAAA,CAAS;AAAA,QAC1B;AAAA,QACA,IAAI,EAAE,SAAS,mBAAmB;AAAA,QAClC,WAAU;AAAA,QACV,OAAQ,IAA6B,KAAd;AAAA,QACvB,SAAQ;AAAA,QAEP,UAAA,EAAe,IAAA,CAAK,EAAE,OAAA,GAAO,UAAA,GAAU,SAAA,EAAA,MAAc;AACpD,gBAAM,IAAa,KAAgB,GAC7B,IAAe,KAAc,CAAC,KAAgB,EAAQ,GAGtD,IACJ,gBAAA,EAAC,GAAD;AAAA,YACE,iBAAe,KAAc;AAAA,YAE7B,OAAO,gBAAA,EAAC,GAAD,EAAiB,OAAA,EAAQ,CAAA;AAAA,YAChC,IAAI;AAAA,cACF,GAAI,KAAgB,EAAE,MAAM,EAAE;AAAA,cAC9B,GAAI,KAAc;AAAA,gBAChB,SAAS;AAAA,gBACT,QAAQ;AAAA,cACV;AAAA,YACF;AAAA,UACD,GATM,CASN;AAGH,iBAAO,IACL,gBAAA,EAAC,IAAD;AAAA,YAAS,eAAA;AAAA,YAA0B,OAAO;AAAA,YACvC,UAAA;AAAA,UACM,GAFmB,CAEnB,IAET;AAAA,QAEJ,CAAC;AAAA,MACG,CAAA,GACL,IACC,gBAAA,EAAC,GAAD;AAAA,QACE,QAAQ,EAAK;AAAA,QACb,MAAK;AAAA,QACL,SAAA,MAAe;AACb,UAAA,EAAyB,EAAI,GAC7B,EAAQ,EAAiB,sBAAsB;AAAA,QACjD;AAAA,QACA,eAAe,EAAK,SAAS;AAAA,QAC7B,SAAS,EAAK;AAAA,QACd,IAAI;AAAA,UACF,OAAO,EAAE,IAAI,IAAI;AAAA,UACjB,mBAAmB,EACjB,OAAO,IACT;AAAA,UACA,qBAAqB;AAAA,YACnB,IAAI;AAAA,YACJ,IAAI;AAAA,UACN;AAAA,UACA,IAAI;AAAA,QACN;AAAA,MACD,CAAA,IAED,gBAAA,EAAA,GAAA,EAAA,UAAA;AAAA,QACG,MAAgB,KAAK,gBAAA,EAAC,GAAD,CAAW,CAAA;AAAA,QAChC,MAAgB,KAAK,gBAAA,EAAC,GAAD,CAAa,CAAA;AAAA,QAClC,MAAgB,KAAK,gBAAA,EAAC,GAAD,CAAW,CAAA;AAAA,MACjC,EAAA,CAAA,CAEC;AAAA,IACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,MACE,SAAA,MAAe,EAAyB,EAAK;AAAA,MACtB,uBAAA;AAAA,MACvB,OAAO,EAAa;AAAA,IACrB,CAAA,CACc;AAAA;AAErB,CAAC"}