@mx-cartographer/experiences 9.3.0-alpha.bb2 → 9.3.0

package/dist/budgets/components/addbudget/UnbudgetedRow.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnbudgetedRow.es.js","names":[],"sources":["../../../../src/budgets/components/addbudget/UnbudgetedRow.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'\nimport ListItemText from '@mui/material/ListItemText'\n\nimport { CategoryIcon, Icon } from '@mxenabled/mxui'\n\nimport { Dialog, useGlobalCopyStore } from '../../../common'\nimport { type DetailedCategory } from '../../../core'\n\nimport { BudgetAmount } from '../shared/BudgetAmount'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface UnbudgetedRowProps {\n  category: DetailedCategory\n  onAddBudget: (category: DetailedCategory, amount: number) => void\n}\n\nexport const UnbudgetedRow: React.FC<UnbudgetedRowProps> = observer(({ category, onAddBudget }) => {\n  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n\n  const [isAddBudgetOpen, setIsAddBudgetOpen] = React.useState(false)\n  const [amount, setAmount] = React.useState(\n    `${category.totalAmount === 0 ? '' : category.totalAmount}`,\n  )\n\n  return (\n    <React.Fragment>\n      <ListItem key={category.guid}>\n        <ListItemButton onClick={() => setIsAddBudgetOpen(true)}>\n          <ListItemAvatar>\n            <CategoryIcon categoryGuid={category.guid} />\n          </ListItemAvatar>\n          <ListItemText\n            primary={category.name}\n            secondary={formatCurrency(category.totalAmount, '0,0')}\n          />\n          <ListItemSecondaryAction>\n            <Icon name=\"add\" size={20} />\n          </ListItemSecondaryAction>\n        </ListItemButton>\n      </ListItem>\n      <Dialog\n        copy={{ close_aria: commonCopy.close_aria, title: copy.add_title }}\n        disablePrimaryButton={Number(amount) <= 0}\n        isOpen={isAddBudgetOpen}\n        onClose={() => setIsAddBudgetOpen(false)}\n        onPrimaryAction={() => onAddBudget(category, Number(amount))}\n        primaryText={copy.add_save_button}\n      >\n        <BudgetAmount amount={amount} categoryName={category.name} onAmountChanged={setAmount} />\n      </Dialog>\n    </React.Fragment>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;AAsBA,IAAa,IAA8C,EAAA,CAAU,EAAE,UAAA,GAAU,aAAA,EAAA,MAAkB;AACjG,QAAM,EAAE,SAAS,GAAM,QAAQ,EAAA,IAAe,EAAmB,GAE3D,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAS,EAAK,GAC5D,CAAC,GAAQ,CAAA,IAAa,EAAM,SAChC,GAAG,EAAS,gBAAgB,IAAI,KAAK,EAAS,WAAA,EAChD;AAEA,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IAAgB,SAAA,MAAe,EAAmB,EAAI;AAAA,cAAtD;AAAA,MACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD,EAAc,cAAc,EAAS,KAAO,CAAA,EAC9B,CAAA;AAAA,MAChB,gBAAA,EAAC,GAAD;AAAA,QACE,SAAS,EAAS;AAAA,QAClB,WAAW,EAAe,EAAS,aAAa,KAAK;AAAA,MACtD,CAAA;AAAA,MACD,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAK;AAAA,QAAM,MAAM;AAAA,MAAK,CAAA,EACL,CAAA;AAAA,IACX;AAAA,KACR,GAbK,EAAS,IAad,GACV,gBAAA,EAAC,GAAD;AAAA,IACE,MAAM;AAAA,MAAE,YAAY,EAAW;AAAA,MAAY,OAAO,EAAK;AAAA,IAAU;AAAA,IACjE,sBAAsB,OAAO,CAAM,KAAK;AAAA,IACxC,QAAQ;AAAA,IACR,SAAA,MAAe,EAAmB,EAAK;AAAA,IACvC,iBAAA,MAAuB,EAAY,GAAU,OAAO,CAAM,CAAC;AAAA,IAC3D,aAAa,EAAK;AAAA,cAElB,gBAAA,EAAC,GAAD;AAAA,MAAsB,QAAA;AAAA,MAAQ,cAAc,EAAS;AAAA,MAAM,iBAAiB;AAAA,IAAY,CAAA;AAAA,EAClF,CAAA,CACM,EAAA,CAAA;AAEpB,CAAC"}
+{"version":3,"file":"UnbudgetedRow.es.js","names":[],"sources":["../../../../src/budgets/components/addbudget/UnbudgetedRow.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'\nimport ListItemText from '@mui/material/ListItemText'\n\nimport { CategoryIcon, Icon } from '@mxenabled/mxui'\n\nimport { Dialog, useGlobalCopyStore } from '../../../common'\nimport { type DetailedCategory } from '../../../core'\n\nimport { BudgetAmount } from '../shared/BudgetAmount'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface UnbudgetedRowProps {\n  category: DetailedCategory\n  onAddBudget: (category: DetailedCategory, amount: number) => void\n}\n\nexport const UnbudgetedRow: React.FC<UnbudgetedRowProps> = observer(({ category, onAddBudget }) => {\n  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n\n  const [isAddBudgetOpen, setIsAddBudgetOpen] = React.useState(false)\n  const [amount, setAmount] = React.useState(\n    `${category.totalAmount === 0 ? '' : category.totalAmount}`,\n  )\n\n  return (\n    <React.Fragment>\n      <ListItem key={category.guid}>\n        <ListItemButton onClick={() => setIsAddBudgetOpen(true)}>\n          <ListItemAvatar>\n            <CategoryIcon categoryGuid={category.guid} />\n          </ListItemAvatar>\n          <ListItemText\n            primary={category.name}\n            secondary={formatCurrency(category.totalAmount, '0,0')}\n          />\n          <ListItemSecondaryAction>\n            <Icon name=\"add\" size={20} />\n          </ListItemSecondaryAction>\n        </ListItemButton>\n      </ListItem>\n      <Dialog\n        copy={{ close_aria: commonCopy.close_aria, title: copy.add_title }}\n        disablePrimaryButton={Number(amount) <= 0}\n        isOpen={isAddBudgetOpen}\n        onClose={() => setIsAddBudgetOpen(false)}\n        onPrimaryAction={() => onAddBudget(category, Number(amount))}\n        primaryText={copy.add_save_button}\n      >\n        <BudgetAmount amount={amount} categoryName={category.name} onAmountChanged={setAmount} />\n      </Dialog>\n    </React.Fragment>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;AAsBA,IAAa,IAA8C,EAAA,CAAU,EAAE,UAAA,GAAU,aAAA,EAAA,MAAkB;AACjG,QAAM,EAAE,SAAS,GAAM,QAAQ,EAAA,IAAe,EAAmB,GAE3D,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAS,EAAK,GAC5D,CAAC,GAAQ,CAAA,IAAa,EAAM,SAChC,GAAG,EAAS,gBAAgB,IAAI,KAAK,EAAS,WAAA,EAChD;AAEA,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IAAgB,SAAA,MAAe,EAAmB,EAAI;AAAA,IAAtD,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD,EAAc,cAAc,EAAS,KAAO,CAAA,EAC9B,CAAA;AAAA,MAChB,gBAAA,EAAC,GAAD;AAAA,QACE,SAAS,EAAS;AAAA,QAClB,WAAW,EAAe,EAAS,aAAa,KAAK;AAAA,MACtD,CAAA;AAAA,MACD,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAK;AAAA,QAAM,MAAM;AAAA,MAAK,CAAA,EACL,CAAA;AAAA,IACX;AAAA,EACR,CAAA,EAAA,GAbK,EAAS,IAad,GACV,gBAAA,EAAC,GAAD;AAAA,IACE,MAAM;AAAA,MAAE,YAAY,EAAW;AAAA,MAAY,OAAO,EAAK;AAAA,IAAU;AAAA,IACjE,sBAAsB,OAAO,CAAM,KAAK;AAAA,IACxC,QAAQ;AAAA,IACR,SAAA,MAAe,EAAmB,EAAK;AAAA,IACvC,iBAAA,MAAuB,EAAY,GAAU,OAAO,CAAM,CAAC;AAAA,IAC3D,aAAa,EAAK;AAAA,IAElB,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAsB,QAAA;AAAA,MAAQ,cAAc,EAAS;AAAA,MAAM,iBAAiB;AAAA,IAAY,CAAA;AAAA,EAClF,CAAA,CACM,EAAA,CAAA;AAEpB,CAAC"}

package/dist/budgets/components/bubblechart/Bubble.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.es.js","names":[],"sources":["../../../../src/budgets/components/bubblechart/Bubble.tsx"],"sourcesContent":["import React from 'react'\n\nimport Tooltip from '@mui/material/Tooltip'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport Mercury from './Mercury'\n\nimport { useWidgetContainerProvider } from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport type { BubbleData } from '../BubbleChart'\n\nconst LARGE_THRESHOLD = 75\nconst MEDIUM_THRESHOLD = 50\n\ninterface BubbleProps {\n  bubble: BubbleData\n  isDraggable: boolean\n  onClick?: (budget: DetailedBudget) => void\n}\n\nexport function Bubble({ bubble, isDraggable, onClick = () => {} }: BubbleProps) {\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const theme = useTheme()\n\n  const { availableWidth } = useWidgetContainerProvider()\n\n  const budgetBubble = React.useMemo(() => {\n    if (!bubble) return undefined\n    return {\n      amount: bubble.amount,\n      budgetColors: bubble.budgetColors,\n      guid: bubble.guid,\n      radius: bubble.radius,\n      transaction_total: bubble.transaction_total,\n    }\n  }, [bubble.amount, bubble.budgetColors, bubble.guid, bubble.radius, bubble.transaction_total])\n\n  if (!bubble) return undefined\n\n  const {\n    budgetColors: { background, text: textColor },\n    category: { icon, name },\n    guid,\n    description,\n    radius,\n    x,\n    y,\n  } = bubble\n\n  const defaultSvgOffset = availableWidth < 400 ? -8 : -12\n\n  let iconX = defaultSvgOffset\n  let iconY = defaultSvgOffset\n\n  if (radius > LARGE_THRESHOLD) {\n    iconX = -14\n    iconY = -45\n  } else if (radius > MEDIUM_THRESHOLD) {\n    iconY = -32\n  }\n\n  let iconDimension = 32\n\n  if (radius <= LARGE_THRESHOLD) {\n    iconDimension = availableWidth < 400 ? 16 : 24\n  }\n\n  const tooltipText = `${bubble.category.name}: ${description}`\n  const tooltipPopperSlot = {\n    modifiers: [\n      {\n        name: 'offset',\n        options: { offset: [0, 15] },\n      },\n    ],\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onClick(bubble)\n    }\n  }\n\n  const handleFocus = () => {\n    setShowTooltip(true)\n  }\n\n  const handleBlur = () => {\n    setShowTooltip(false)\n  }\n\n  return (\n    <g\n      aria-label={`${name} - ${description}`}\n      className=\"bubble\"\n      id={`bubble-${guid}`}\n      key={guid}\n      onBlur={handleBlur}\n      onClick={() => onClick(bubble)}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onMouseEnter={() => setShowTooltip(true)}\n      onMouseLeave={() => setShowTooltip(false)}\n      role=\"button\"\n      style={{ cursor: isDraggable ? 'pointer' : 'default', touchAction: 'manipulation' }}\n      tabIndex={0}\n      textAnchor=\"middle\"\n      x={x}\n      y={y}\n    >\n      <style>\n        {`\n          .bubble:focus,\n          .bubble:focus-visible {\n            outline: none;\n          }\n          .bubble:focus circle,\n          .bubble:focus-visible circle {\n            stroke: ${theme.palette.primary.main};\n            stroke-width: 3;\n            stroke-opacity: 0.8;\n          }\n        `}\n      </style>\n      <Tooltip open={showTooltip} slotProps={{ popper: tooltipPopperSlot }} title={tooltipText}>\n        <circle fill={background} id={`circle-${guid}`} r={radius} />\n      </Tooltip>\n\n      <svg x={iconX} y={iconY}>\n        <Icon name={icon} size={iconDimension} sx={{ fill: textColor }} />\n      </svg>\n\n      {radius > LARGE_THRESHOLD && (\n        <Text\n          bold={true}\n          component=\"text\"\n          id={`budget-category-${guid}`}\n          sx={{ fill: textColor }}\n          variant=\"body2\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={4}\n        >\n          {name}\n        </Text>\n      )}\n\n      {radius > MEDIUM_THRESHOLD && (\n        <Text\n          bold={true}\n          component=\"text\"\n          id={`budget-description-${guid}-1`}\n          sx={{ fill: textColor }}\n          variant=\"body1\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={radius <= LARGE_THRESHOLD ? 12 : 24}\n        >\n          {radius <= LARGE_THRESHOLD ? description.split(' ')[0] : description}\n        </Text>\n      )}\n\n      {radius <= LARGE_THRESHOLD && radius > MEDIUM_THRESHOLD && (\n        <Text\n          component=\"text\"\n          id={`budget-description-${guid}-2`}\n          sx={{ fill: textColor }}\n          variant=\"caption\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={28}\n        >\n          {description.split(' ')[1]}\n        </Text>\n      )}\n\n      <Mercury bubble={budgetBubble as BubbleData} />\n    </g>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Bubble.es.js","names":[],"sources":["../../../../src/budgets/components/bubblechart/Bubble.tsx"],"sourcesContent":["import React from 'react'\n\nimport Tooltip from '@mui/material/Tooltip'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport Mercury from './Mercury'\n\nimport { useWidgetContainerProvider } from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport type { BubbleData } from '../BubbleChart'\n\nconst LARGE_THRESHOLD = 75\nconst MEDIUM_THRESHOLD = 50\n\ninterface BubbleProps {\n  bubble: BubbleData\n  isDraggable: boolean\n  onClick?: (budget: DetailedBudget) => void\n}\n\nexport function Bubble({ bubble, isDraggable, onClick = () => {} }: BubbleProps) {\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const theme = useTheme()\n\n  const { availableWidth } = useWidgetContainerProvider()\n\n  const budgetBubble = React.useMemo(() => {\n    if (!bubble) return undefined\n    return {\n      amount: bubble.amount,\n      budgetColors: bubble.budgetColors,\n      guid: bubble.guid,\n      radius: bubble.radius,\n      transaction_total: bubble.transaction_total,\n    }\n  }, [bubble.amount, bubble.budgetColors, bubble.guid, bubble.radius, bubble.transaction_total])\n\n  if (!bubble) return undefined\n\n  const {\n    budgetColors: { background, text: textColor },\n    category: { icon, name },\n    guid,\n    description,\n    radius,\n    x,\n    y,\n  } = bubble\n\n  const defaultSvgOffset = availableWidth < 400 ? -8 : -12\n\n  let iconX = defaultSvgOffset\n  let iconY = defaultSvgOffset\n\n  if (radius > LARGE_THRESHOLD) {\n    iconX = -14\n    iconY = -45\n  } else if (radius > MEDIUM_THRESHOLD) {\n    iconY = -32\n  }\n\n  let iconDimension = 32\n\n  if (radius <= LARGE_THRESHOLD) {\n    iconDimension = availableWidth < 400 ? 16 : 24\n  }\n\n  const tooltipText = `${bubble.category.name}: ${description}`\n  const tooltipPopperSlot = {\n    modifiers: [\n      {\n        name: 'offset',\n        options: { offset: [0, 15] },\n      },\n    ],\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onClick(bubble)\n    }\n  }\n\n  const handleFocus = () => {\n    setShowTooltip(true)\n  }\n\n  const handleBlur = () => {\n    setShowTooltip(false)\n  }\n\n  return (\n    <g\n      aria-label={`${name} - ${description}`}\n      className=\"bubble\"\n      id={`bubble-${guid}`}\n      key={guid}\n      onBlur={handleBlur}\n      onClick={() => onClick(bubble)}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onMouseEnter={() => setShowTooltip(true)}\n      onMouseLeave={() => setShowTooltip(false)}\n      role=\"button\"\n      style={{ cursor: isDraggable ? 'pointer' : 'default', touchAction: 'manipulation' }}\n      tabIndex={0}\n      textAnchor=\"middle\"\n      x={x}\n      y={y}\n    >\n      <style>\n        {`\n          .bubble:focus,\n          .bubble:focus-visible {\n            outline: none;\n          }\n          .bubble:focus circle,\n          .bubble:focus-visible circle {\n            stroke: ${theme.palette.primary.main};\n            stroke-width: 3;\n            stroke-opacity: 0.8;\n          }\n        `}\n      </style>\n      <Tooltip open={showTooltip} slotProps={{ popper: tooltipPopperSlot }} title={tooltipText}>\n        <circle fill={background} id={`circle-${guid}`} r={radius} />\n      </Tooltip>\n\n      <svg x={iconX} y={iconY}>\n        <Icon name={icon} size={iconDimension} sx={{ fill: textColor }} />\n      </svg>\n\n      {radius > LARGE_THRESHOLD && (\n        <Text\n          bold={true}\n          component=\"text\"\n          id={`budget-category-${guid}`}\n          sx={{ fill: textColor }}\n          variant=\"body2\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={4}\n        >\n          {name}\n        </Text>\n      )}\n\n      {radius > MEDIUM_THRESHOLD && (\n        <Text\n          bold={true}\n          component=\"text\"\n          id={`budget-description-${guid}-1`}\n          sx={{ fill: textColor }}\n          variant=\"body1\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={radius <= LARGE_THRESHOLD ? 12 : 24}\n        >\n          {radius <= LARGE_THRESHOLD ? description.split(' ')[0] : description}\n        </Text>\n      )}\n\n      {radius <= LARGE_THRESHOLD && radius > MEDIUM_THRESHOLD && (\n        <Text\n          component=\"text\"\n          id={`budget-description-${guid}-2`}\n          sx={{ fill: textColor }}\n          variant=\"caption\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={28}\n        >\n          {description.split(' ')[1]}\n        </Text>\n      )}\n\n      <Mercury bubble={budgetBubble as BubbleData} />\n    </g>\n  )\n}\n"],"mappings":"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"}

package/dist/budgets/components/bubblechart/Mercury.es.js

@@ -1,29 +1,31 @@
 import { arcTween as f } from "../../utils/BubblesSVG.es.js";
-import i from "react";
+import l from "react";
 import { jsx as o } from "react/jsx-runtime";
 import { useTheme as p } from "@mui/material/styles";
 import * as r from "d3";
-var l = 5, y = 2e3, R = ({ bubble: a }) => {
-  const c = p(), { amount: m, guid: n, budgetColors: { mercury: u }, radius: s, transaction_total: d } = a, t = `mercury-${n}`;
-  return i.useEffect(() => {
-    r.select(`.${t}`).selectAll(".status").remove(), r.select(`.${t}`).append("path").transition().duration(y).delay(0).attr("class", "status").attr("style", `fill: ${u}; fill-opacity: 1;`).attrTween("d", () => f(a));
+var y = 5, R = 2e3, h = ({ bubble: a }) => {
+  const c = p(), { amount: i, guid: m, budgetColors: { mercury: n }, radius: s, transaction_total: u } = a, t = `mercury-${m}`;
+  l.useEffect(() => {
+    r.select(`.${t}`).selectAll(".status").remove(), r.select(`.${t}`).append("path").transition().duration(R).delay(0).attr("class", "status").attr("style", `fill: ${n}; fill-opacity: 1;`).attrTween("d", () => f(a));
   }, [
-    m,
+    i,
     s,
-    d
-  ]), /* @__PURE__ */ o("g", {
+    u
+  ]);
+  const d = r.arc().innerRadius((e) => e - 10).outerRadius((e) => e - y).startAngle(0).endAngle(2 * Math.PI);
+  return /* @__PURE__ */ o("g", {
     className: t,
     children: /* @__PURE__ */ o("path", {
-      d: r.arc().innerRadius((e) => e - 2 * l).outerRadius((e) => e - l).startAngle(0).endAngle(2 * Math.PI)(s) || "",
+      d: d(s) || "",
       style: {
         fill: c.palette.common.white,
         fillOpacity: 0.35
       }
     })
   });
-}, A = i.memo(R);
+}, O = l.memo(h);
 export {
-  A as default
+  O as default
 };
 
 //# sourceMappingURL=Mercury.es.js.map

package/dist/budgets/components/bubblechart/Mercury.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Mercury.es.js","names":[],"sources":["../../../../src/budgets/components/bubblechart/Mercury.tsx"],"sourcesContent":["import React from 'react'\nimport * as d3 from 'd3'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport { arcTween } from '../../utils/BubblesSVG'\n\nimport type { BubbleData } from '../BubbleChart'\n\nconst PROGRESS_INDICATOR_SIZE = 5\nconst PROGRESS_DURATION = 2000\n\ninterface MercuryProps {\n  bubble: BubbleData\n}\n\nconst Mercury = ({ bubble }: MercuryProps) => {\n  const theme = useTheme()\n  const {\n    amount,\n    guid,\n    budgetColors: { mercury },\n    radius,\n    transaction_total,\n  } = bubble\n\n  const bubbleId = `mercury-${guid}`\n\n  React.useEffect(() => {\n    // Remove previous status arc\n    d3.select(`.${bubbleId}`).selectAll('.status').remove()\n\n    // Append updated status arc\n    d3.select(`.${bubbleId}`)\n      .append('path')\n      .transition()\n      .duration(PROGRESS_DURATION)\n      .delay(0)\n      .attr('class', 'status')\n      .attr('style', `fill: ${mercury}; fill-opacity: 1;`)\n      .attrTween('d', () => arcTween(bubble))\n  }, [amount, radius, transaction_total])\n\n  const trackArc = d3\n    .arc<number>()\n    .innerRadius((radius: number) => radius - 2 * PROGRESS_INDICATOR_SIZE)\n    .outerRadius((radius: number) => radius - PROGRESS_INDICATOR_SIZE)\n    .startAngle(0)\n    .endAngle(2 * Math.PI)\n\n  return (\n    <g className={bubbleId}>\n      <path\n        d={trackArc(radius) || ''}\n        style={{ fill: theme.palette.common.white, fillOpacity: 0.35 }}\n      />\n    </g>\n  )\n}\n\nexport default React.memo(Mercury)\n"],"mappings":";;;;;AASA,IAAM,IAA0B,GAC1B,IAAoB,KAMpB,IAAA,CAAW,EAAE,QAAA,EAAA,MAA2B;AAC5C,QAAM,IAAQ,EAAS,GACjB,EACJ,QAAA,GACA,MAAA,GACA,cAAc,EAAE,SAAA,EAAA,GAChB,QAAA,GACA,mBAAA,EAAA,IACE,GAEE,IAAW,WAAW,CAAA;AAE5B,SAAA,EAAM,UAAA,MAAgB;AAEpB,IAAA,EAAG,OAAO,IAAI,CAAA,EAAU,EAAE,UAAU,SAAS,EAAE,OAAO,GAGtD,EAAG,OAAO,IAAI,CAAA,EAAU,EACrB,OAAO,MAAM,EACb,WAAW,EACX,SAAS,CAAiB,EAC1B,MAAM,CAAC,EACP,KAAK,SAAS,QAAQ,EACtB,KAAK,SAAS,SAAS,CAAA,oBAA2B,EAClD,UAAU,KAAA,MAAW,EAAS,CAAM,CAAC;AAAA,EAC1C,GAAG;AAAA,IAAC;AAAA,IAAQ;AAAA,IAAQ;AAAA,EAAiB,CAAC,GAUpC,gBAAA,EAAC,KAAD;AAAA,IAAG,WAAW;AAAA,cACZ,gBAAA,EAAC,QAAD;AAAA,MACE,GAVW,EACd,IAAY,EACZ,YAAA,CAAa,MAAmB,IAAS,IAAI,CAAuB,EACpE,YAAA,CAAa,MAAmB,IAAS,CAAuB,EAChE,WAAW,CAAC,EACZ,SAAS,IAAI,KAAK,EAKZ,EAAS,CAAM,KAAK;AAAA,MACvB,OAAO;AAAA,QAAE,MAAM,EAAM,QAAQ,OAAO;AAAA,QAAO,aAAa;AAAA,MAAK;AAAA,IAC9D,CAAA;AAAA,EACA,CAAA;AAEP,GAEA,IAAe,EAAM,KAAK,CAAO"}
+{"version":3,"file":"Mercury.es.js","names":[],"sources":["../../../../src/budgets/components/bubblechart/Mercury.tsx"],"sourcesContent":["import React from 'react'\nimport * as d3 from 'd3'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport { arcTween } from '../../utils/BubblesSVG'\n\nimport type { BubbleData } from '../BubbleChart'\n\nconst PROGRESS_INDICATOR_SIZE = 5\nconst PROGRESS_DURATION = 2000\n\ninterface MercuryProps {\n  bubble: BubbleData\n}\n\nconst Mercury = ({ bubble }: MercuryProps) => {\n  const theme = useTheme()\n  const {\n    amount,\n    guid,\n    budgetColors: { mercury },\n    radius,\n    transaction_total,\n  } = bubble\n\n  const bubbleId = `mercury-${guid}`\n\n  React.useEffect(() => {\n    // Remove previous status arc\n    d3.select(`.${bubbleId}`).selectAll('.status').remove()\n\n    // Append updated status arc\n    d3.select(`.${bubbleId}`)\n      .append('path')\n      .transition()\n      .duration(PROGRESS_DURATION)\n      .delay(0)\n      .attr('class', 'status')\n      .attr('style', `fill: ${mercury}; fill-opacity: 1;`)\n      .attrTween('d', () => arcTween(bubble))\n  }, [amount, radius, transaction_total])\n\n  const trackArc = d3\n    .arc<number>()\n    .innerRadius((radius: number) => radius - 2 * PROGRESS_INDICATOR_SIZE)\n    .outerRadius((radius: number) => radius - PROGRESS_INDICATOR_SIZE)\n    .startAngle(0)\n    .endAngle(2 * Math.PI)\n\n  return (\n    <g className={bubbleId}>\n      <path\n        d={trackArc(radius) || ''}\n        style={{ fill: theme.palette.common.white, fillOpacity: 0.35 }}\n      />\n    </g>\n  )\n}\n\nexport default React.memo(Mercury)\n"],"mappings":";;;;;AASA,IAAM,IAA0B,GAC1B,IAAoB,KAMpB,IAAA,CAAW,EAAE,QAAA,EAAA,MAA2B;AAC5C,QAAM,IAAQ,EAAS,GACjB,EACJ,QAAA,GACA,MAAA,GACA,cAAc,EAAE,SAAA,EAAA,GAChB,QAAA,GACA,mBAAA,EAAA,IACE,GAEE,IAAW,WAAW,CAAA;AAE5B,EAAA,EAAM,UAAA,MAAgB;AAEpB,IAAA,EAAG,OAAO,IAAI,CAAA,EAAU,EAAE,UAAU,SAAS,EAAE,OAAO,GAGtD,EAAG,OAAO,IAAI,CAAA,EAAU,EACrB,OAAO,MAAM,EACb,WAAW,EACX,SAAS,CAAiB,EAC1B,MAAM,CAAC,EACP,KAAK,SAAS,QAAQ,EACtB,KAAK,SAAS,SAAS,CAAA,oBAA2B,EAClD,UAAU,KAAA,MAAW,EAAS,CAAM,CAAC;AAAA,EAC1C,GAAG;AAAA,IAAC;AAAA,IAAQ;AAAA,IAAQ;AAAA,EAAiB,CAAC;AAEtC,QAAM,IAAW,EACd,IAAY,EACZ,YAAA,CAAa,MAAmB,IAAS,EAA2B,EACpE,YAAA,CAAa,MAAmB,IAAS,CAAuB,EAChE,WAAW,CAAC,EACZ,SAAS,IAAI,KAAK,EAAE;AAEvB,SACE,gBAAA,EAAC,KAAD;AAAA,IAAG,WAAW;AAAA,IACZ,UAAA,gBAAA,EAAC,QAAD;AAAA,MACE,GAAG,EAAS,CAAM,KAAK;AAAA,MACvB,OAAO;AAAA,QAAE,MAAM,EAAM,QAAQ,OAAO;AAAA,QAAO,aAAa;AAAA,MAAK;AAAA,IAC9D,CAAA;AAAA,EACA,CAAA;AAEP,GAEA,IAAe,EAAM,KAAK,CAAO"}

package/dist/budgets/components/budgetdetails/AddSubBudget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddSubBudget.es.js","names":[],"sources":["../../../../src/budgets/components/budgetdetails/AddSubBudget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport { Dialog, Drawer, useBudgetsStore, useGlobalCopyStore } from '../../../common'\nimport { type DetailedBudget, type DetailedCategory } from '../../../core'\nimport { CategoryRow, useCategoryUiStore } from '../../../categories'\nimport { BudgetAmount } from '../shared/BudgetAmount'\n\ninterface AddSubBudgetProps {\n  category: DetailedCategory\n  parentBudget: DetailedBudget\n}\n\nexport const AddSubBudget: React.FC<AddSubBudgetProps> = observer(({ category, parentBudget }) => {\n  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n  const { setExpandedGuid, setOnSelect } = useCategoryUiStore()\n  const { addBudget } = useBudgetsStore()\n\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [isAddBudgetOpen, setIsAddBudgetOpen] = React.useState(false)\n  const [amount, setAmount] = React.useState('')\n  const [subCategory, setSubCategory] = React.useState<DetailedCategory | undefined>(undefined)\n\n  React.useEffect(() => {\n    setOnSelect((guid: string) => {\n      const subCategory = category.subCategories.find((sc) => sc.guid === guid)\n      if (subCategory) {\n        setSubCategory(subCategory)\n        setAmount(`${subCategory.currentAmount === 0 ? '' : subCategory.currentAmount}`)\n        setIsAddBudgetOpen(true)\n      }\n    })\n  }, [])\n\n  const handleOpen = () => {\n    setExpandedGuid(category.guid)\n    setIsOpen(true)\n  }\n\n  const handleAddSubBudget = async () => {\n    if (subCategory && Number(amount) > 0) {\n      await addBudget(subCategory, Number(amount), parentBudget.guid)\n      setIsAddBudgetOpen(false)\n      setIsOpen(false)\n      setSubCategory(undefined)\n    }\n  }\n\n  return (\n    <Box>\n      <ListItem disableGutters={true} disablePadding={true} sx={{ bgcolor: 'background.paper' }}>\n        <ListItemButton onClick={handleOpen}>\n          <ListItemText>\n            <Stack alignItems=\"center\" direction=\"row\" justifyContent=\"space-between\">\n              <Stack alignItems=\"center\" direction=\"row\" gap={8}>\n                <Icon fill={true} name=\"add_box\" size={24} sx={{ color: 'primary.light' }} />\n                <Text bold={true} sx={{ color: 'primary.light' }} variant=\"body1\">\n                  {copy.add_sub_budget_button}\n                </Text>\n              </Stack>\n              <Icon name=\"chevron_right\" size={24} sx={{ color: 'primary.light' }} />\n            </Stack>\n          </ListItemText>\n        </ListItemButton>\n      </ListItem>\n      <Divider />\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        title={copy.add_sub_budget_title}\n      >\n        <List>\n          <CategoryRow category={category} subCategories={category.subCategories} />\n        </List>\n      </Drawer>\n\n      <Dialog\n        copy={{ close_aria: commonCopy.close_aria, title: copy.add_title }}\n        disablePrimaryButton={Number(amount) <= 0}\n        isOpen={isAddBudgetOpen}\n        onClose={() => setIsAddBudgetOpen(false)}\n        onPrimaryAction={handleAddSubBudget}\n        primaryText={copy.add_save_button}\n      >\n        <BudgetAmount\n          amount={amount}\n          categoryName={subCategory?.name || ''}\n          onAmountChanged={setAmount}\n        />\n      </Dialog>\n    </Box>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"AddSubBudget.es.js","names":[],"sources":["../../../../src/budgets/components/budgetdetails/AddSubBudget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport { Dialog, Drawer, useBudgetsStore, useGlobalCopyStore } from '../../../common'\nimport { type DetailedBudget, type DetailedCategory } from '../../../core'\nimport { CategoryRow, useCategoryUiStore } from '../../../categories'\nimport { BudgetAmount } from '../shared/BudgetAmount'\n\ninterface AddSubBudgetProps {\n  category: DetailedCategory\n  parentBudget: DetailedBudget\n}\n\nexport const AddSubBudget: React.FC<AddSubBudgetProps> = observer(({ category, parentBudget }) => {\n  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n  const { setExpandedGuid, setOnSelect } = useCategoryUiStore()\n  const { addBudget } = useBudgetsStore()\n\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [isAddBudgetOpen, setIsAddBudgetOpen] = React.useState(false)\n  const [amount, setAmount] = React.useState('')\n  const [subCategory, setSubCategory] = React.useState<DetailedCategory | undefined>(undefined)\n\n  React.useEffect(() => {\n    setOnSelect((guid: string) => {\n      const subCategory = category.subCategories.find((sc) => sc.guid === guid)\n      if (subCategory) {\n        setSubCategory(subCategory)\n        setAmount(`${subCategory.currentAmount === 0 ? '' : subCategory.currentAmount}`)\n        setIsAddBudgetOpen(true)\n      }\n    })\n  }, [])\n\n  const handleOpen = () => {\n    setExpandedGuid(category.guid)\n    setIsOpen(true)\n  }\n\n  const handleAddSubBudget = async () => {\n    if (subCategory && Number(amount) > 0) {\n      await addBudget(subCategory, Number(amount), parentBudget.guid)\n      setIsAddBudgetOpen(false)\n      setIsOpen(false)\n      setSubCategory(undefined)\n    }\n  }\n\n  return (\n    <Box>\n      <ListItem disableGutters={true} disablePadding={true} sx={{ bgcolor: 'background.paper' }}>\n        <ListItemButton onClick={handleOpen}>\n          <ListItemText>\n            <Stack alignItems=\"center\" direction=\"row\" justifyContent=\"space-between\">\n              <Stack alignItems=\"center\" direction=\"row\" gap={8}>\n                <Icon fill={true} name=\"add_box\" size={24} sx={{ color: 'primary.light' }} />\n                <Text bold={true} sx={{ color: 'primary.light' }} variant=\"body1\">\n                  {copy.add_sub_budget_button}\n                </Text>\n              </Stack>\n              <Icon name=\"chevron_right\" size={24} sx={{ color: 'primary.light' }} />\n            </Stack>\n          </ListItemText>\n        </ListItemButton>\n      </ListItem>\n      <Divider />\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        title={copy.add_sub_budget_title}\n      >\n        <List>\n          <CategoryRow category={category} subCategories={category.subCategories} />\n        </List>\n      </Drawer>\n\n      <Dialog\n        copy={{ close_aria: commonCopy.close_aria, title: copy.add_title }}\n        disablePrimaryButton={Number(amount) <= 0}\n        isOpen={isAddBudgetOpen}\n        onClose={() => setIsAddBudgetOpen(false)}\n        onPrimaryAction={handleAddSubBudget}\n        primaryText={copy.add_save_button}\n      >\n        <BudgetAmount\n          amount={amount}\n          categoryName={subCategory?.name || ''}\n          onAmountChanged={setAmount}\n        />\n      </Dialog>\n    </Box>\n  )\n})\n"],"mappings":"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"}

package/dist/budgets/components/budgetdetails/BudgetDetails.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BudgetDetails.es.js","names":[],"sources":["../../../../src/budgets/components/budgetdetails/BudgetDetails.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\n\nimport { Icon } from '@mxenabled/mxui'\n\nimport {\n  Drawer,\n  useAppConfig,\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useScreenSize,\n  useTransactionStore,\n} from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport { exportTransactionsToCSV } from '../../../core/utils/TransactionUtils'\n\nimport { TransactionDetails, TransactionList } from '../../../transactions'\n\nimport { Header } from './Header'\nimport { SubBudgetList } from './SubBudgetList'\n\ninterface BudgetDetailsProps {\n  budget: DetailedBudget\n}\n\nexport const BudgetDetails: React.FC<BudgetDetailsProps> = observer(({ budget }) => {\n  const { is_mobile_webview } = useAppConfig()\n  const { setAlert } = useBudgetsStore()\n  const { budgets: copy, common: commonCopy, transactions: transactionCopy } = useGlobalCopyStore()\n  const { isDesktop, isSmallTablet, isTablet } = useScreenSize()\n  const {\n    sortedTransactions: transactions,\n    sortedTransactionsWithSplits,\n    tags,\n  } = useTransactionStore()\n\n  const [selectedTab, setSelectedTab] = React.useState(0)\n  const [transactionGuid, setTransactionGuid] = React.useState('')\n\n  const transaction = React.useMemo(\n    () => transactions.find((t) => t.guid === transactionGuid),\n    [transactionGuid, transactions],\n  )\n\n  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {\n    setSelectedTab(newValue)\n  }\n\n  const handleExportToCsv = () => {\n    exportTransactionsToCSV(sortedTransactionsWithSplits, tags)\n    setAlert(copy.alert_csv_downloaded)\n  }\n\n  const shouldShowExportButton =\n    transactions.length > 0 && !is_mobile_webview && (isDesktop || (isTablet && !isSmallTablet))\n\n  return (\n    <Stack gap={24}>\n      <Header budget={budget} />\n\n      <Stack>\n        <Tabs\n          onChange={handleTabChange}\n          sx={{ width: '100%' }}\n          textColor=\"primary\"\n          value={selectedTab}\n          variant=\"fullWidth\"\n        >\n          <Tab label={copy.details_transactions_tab} />\n          <Tab label={copy.details_subbudgets_tab} />\n        </Tabs>\n        {selectedTab === 0 && (\n          <Stack>\n            {shouldShowExportButton && (\n              <Stack direction=\"row\" justifyContent=\"right\" mb={-24} mr={8} mt={8} zIndex={1}>\n                <Button\n                  onClick={handleExportToCsv}\n                  startIcon={<Icon name=\"ios_share\" />}\n                  variant=\"text\"\n                >\n                  {transactionCopy.export_csv_btn}\n                </Button>\n              </Stack>\n            )}\n            <TransactionList height=\"100%\" onClick={setTransactionGuid} />\n          </Stack>\n        )}\n        {selectedTab === 1 && <SubBudgetList budget={budget} />}\n\n        <Drawer\n          ariaLabelClose={commonCopy.close_aria}\n          isOpen={Boolean(transaction)}\n          onClose={() => setTransactionGuid('')}\n          title={copy.details_transaction_drawer}\n        >\n          {transaction && <TransactionDetails transaction={transaction} />}\n        </Drawer>\n      </Stack>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;AA8BA,IAAa,KAA8C,EAAA,CAAU,EAAE,QAAA,EAAA,MAAa;AAClF,QAAM,EAAE,mBAAA,EAAA,IAAsB,EAAa,GACrC,EAAE,UAAA,EAAA,IAAa,EAAgB,GAC/B,EAAE,SAAS,GAAM,QAAQ,GAAY,cAAc,EAAA,IAAoB,EAAmB,GAC1F,EAAE,WAAA,GAAW,eAAA,GAAe,UAAA,EAAA,IAAa,EAAc,GACvD,EACJ,oBAAoB,GACpB,8BAAA,GACA,MAAA,EAAA,IACE,EAAoB,GAElB,CAAC,GAAa,CAAA,IAAkB,EAAM,SAAS,CAAC,GAChD,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAS,EAAE,GAEzD,IAAc,EAAM,QAAA,MAClB,EAAa,KAAA,CAAM,MAAM,EAAE,SAAS,CAAe,GACzD,CAAC,GAAiB,CAAY,CAChC,GAEM,IAAA,CAAmB,GAA8B,MAAqB;AAC1E,IAAA,EAAe,CAAQ;AAAA,EACzB,GAEM,IAAA,MAA0B;AAC9B,IAAA,EAAwB,GAA8B,CAAI,GAC1D,EAAS,EAAK,oBAAoB;AAAA,EACpC,GAEM,IACJ,EAAa,SAAS,KAAK,CAAC,MAAsB,KAAc,KAAY,CAAC;AAE/E,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,KAAK;AAAA,cAAZ,CACE,gBAAA,EAAC,GAAD,EAAgB,QAAA,EAAS,CAAA,GAEzB,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QACE,UAAU;AAAA,QACV,IAAI,EAAE,OAAO,OAAO;AAAA,QACpB,WAAU;AAAA,QACV,OAAO;AAAA,QACP,SAAQ;AAAA,kBALV,CAOE,gBAAA,EAAC,GAAD,EAAK,OAAO,EAAK,yBAA2B,CAAA,GAC5C,gBAAA,EAAC,GAAD,EAAK,OAAO,EAAK,uBAAyB,CAAA,CACtC;AAAA;MACL,MAAgB,KACf,gBAAA,EAAC,GAAD,EAAA,UAAA,CACG,KACC,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,QAAQ,IAAI;AAAA,QAAK,IAAI;AAAA,QAAG,IAAI;AAAA,QAAG,QAAQ;AAAA,kBAC3E,gBAAA,EAAC,GAAD;AAAA,UACE,SAAS;AAAA,UACT,WAAW,gBAAA,EAAC,GAAD,EAAM,MAAK,YAAa,CAAA;AAAA,UACnC,SAAQ;AAAA,oBAEP,EAAgB;AAAA,QACX,CAAA;AAAA,MACH,CAAA,GAET,gBAAA,EAAC,GAAD;AAAA,QAAiB,QAAO;AAAA,QAAO,SAAS;AAAA,MAAqB,CAAA,CACxD,EAAA,CAAA;AAAA,MAER,MAAgB,KAAK,gBAAA,EAAC,GAAD,EAAuB,QAAA,EAAS,CAAA;AAAA,MAEtD,gBAAA,EAAC,GAAD;AAAA,QACE,gBAAgB,EAAW;AAAA,QAC3B,QAAQ,EAAQ;AAAA,QAChB,SAAA,MAAe,EAAmB,EAAE;AAAA,QACpC,OAAO,EAAK;AAAA,kBAEX,KAAe,gBAAA,EAAC,GAAD,EAAiC,aAAA,EAAc,CAAA;AAAA,MACzD,CAAA;AAAA,IACH,EAAA,CAAA,CACF;AAAA;AAEX,CAAC"}
+{"version":3,"file":"BudgetDetails.es.js","names":[],"sources":["../../../../src/budgets/components/budgetdetails/BudgetDetails.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\n\nimport { Icon } from '@mxenabled/mxui'\n\nimport {\n  Drawer,\n  useAppConfig,\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useScreenSize,\n  useTransactionStore,\n} from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport { exportTransactionsToCSV } from '../../../core/utils/TransactionUtils'\n\nimport { TransactionDetails, TransactionList } from '../../../transactions'\n\nimport { Header } from './Header'\nimport { SubBudgetList } from './SubBudgetList'\n\ninterface BudgetDetailsProps {\n  budget: DetailedBudget\n}\n\nexport const BudgetDetails: React.FC<BudgetDetailsProps> = observer(({ budget }) => {\n  const { is_mobile_webview } = useAppConfig()\n  const { setAlert } = useBudgetsStore()\n  const { budgets: copy, common: commonCopy, transactions: transactionCopy } = useGlobalCopyStore()\n  const { isDesktop, isSmallTablet, isTablet } = useScreenSize()\n  const {\n    sortedTransactions: transactions,\n    sortedTransactionsWithSplits,\n    tags,\n  } = useTransactionStore()\n\n  const [selectedTab, setSelectedTab] = React.useState(0)\n  const [transactionGuid, setTransactionGuid] = React.useState('')\n\n  const transaction = React.useMemo(\n    () => transactions.find((t) => t.guid === transactionGuid),\n    [transactionGuid, transactions],\n  )\n\n  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {\n    setSelectedTab(newValue)\n  }\n\n  const handleExportToCsv = () => {\n    exportTransactionsToCSV(sortedTransactionsWithSplits, tags)\n    setAlert(copy.alert_csv_downloaded)\n  }\n\n  const shouldShowExportButton =\n    transactions.length > 0 && !is_mobile_webview && (isDesktop || (isTablet && !isSmallTablet))\n\n  return (\n    <Stack gap={24}>\n      <Header budget={budget} />\n\n      <Stack>\n        <Tabs\n          onChange={handleTabChange}\n          sx={{ width: '100%' }}\n          textColor=\"primary\"\n          value={selectedTab}\n          variant=\"fullWidth\"\n        >\n          <Tab label={copy.details_transactions_tab} />\n          <Tab label={copy.details_subbudgets_tab} />\n        </Tabs>\n        {selectedTab === 0 && (\n          <Stack>\n            {shouldShowExportButton && (\n              <Stack direction=\"row\" justifyContent=\"right\" mb={-24} mr={8} mt={8} zIndex={1}>\n                <Button\n                  onClick={handleExportToCsv}\n                  startIcon={<Icon name=\"ios_share\" />}\n                  variant=\"text\"\n                >\n                  {transactionCopy.export_csv_btn}\n                </Button>\n              </Stack>\n            )}\n            <TransactionList height=\"100%\" onClick={setTransactionGuid} />\n          </Stack>\n        )}\n        {selectedTab === 1 && <SubBudgetList budget={budget} />}\n\n        <Drawer\n          ariaLabelClose={commonCopy.close_aria}\n          isOpen={Boolean(transaction)}\n          onClose={() => setTransactionGuid('')}\n          title={copy.details_transaction_drawer}\n        >\n          {transaction && <TransactionDetails transaction={transaction} />}\n        </Drawer>\n      </Stack>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;AA8BA,IAAa,KAA8C,EAAA,CAAU,EAAE,QAAA,EAAA,MAAa;AAClF,QAAM,EAAE,mBAAA,EAAA,IAAsB,EAAa,GACrC,EAAE,UAAA,EAAA,IAAa,EAAgB,GAC/B,EAAE,SAAS,GAAM,QAAQ,GAAY,cAAc,EAAA,IAAoB,EAAmB,GAC1F,EAAE,WAAA,GAAW,eAAA,GAAe,UAAA,EAAA,IAAa,EAAc,GACvD,EACJ,oBAAoB,GACpB,8BAAA,GACA,MAAA,EAAA,IACE,EAAoB,GAElB,CAAC,GAAa,CAAA,IAAkB,EAAM,SAAS,CAAC,GAChD,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAS,EAAE,GAEzD,IAAc,EAAM,QAAA,MAClB,EAAa,KAAA,CAAM,MAAM,EAAE,SAAS,CAAe,GACzD,CAAC,GAAiB,CAAY,CAChC,GAEM,IAAA,CAAmB,GAA8B,MAAqB;AAC1E,IAAA,EAAe,CAAQ;AAAA,EACzB,GAEM,IAAA,MAA0B;AAC9B,IAAA,EAAwB,GAA8B,CAAI,GAC1D,EAAS,EAAK,oBAAoB;AAAA,EACpC,GAEM,IACJ,EAAa,SAAS,KAAK,CAAC,MAAsB,KAAc,KAAY,CAAC;AAE/E,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,KAAK;AAAA,IAAZ,UAAA,CACE,gBAAA,EAAC,GAAD,EAAgB,QAAA,EAAS,CAAA,GAEzB,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QACE,UAAU;AAAA,QACV,IAAI,EAAE,OAAO,OAAO;AAAA,QACpB,WAAU;AAAA,QACV,OAAO;AAAA,QACP,SAAQ;AAAA,QALV,UAAA,CAOE,gBAAA,EAAC,GAAD,EAAK,OAAO,EAAK,yBAA2B,CAAA,GAC5C,gBAAA,EAAC,GAAD,EAAK,OAAO,EAAK,uBAAyB,CAAA,CACtC;AAAA;MACL,MAAgB,KACf,gBAAA,EAAC,GAAD,EAAA,UAAA,CACG,KACC,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,QAAQ,IAAI;AAAA,QAAK,IAAI;AAAA,QAAG,IAAI;AAAA,QAAG,QAAQ;AAAA,QAC3E,UAAA,gBAAA,EAAC,GAAD;AAAA,UACE,SAAS;AAAA,UACT,WAAW,gBAAA,EAAC,GAAD,EAAM,MAAK,YAAa,CAAA;AAAA,UACnC,SAAQ;AAAA,UAEP,UAAA,EAAgB;AAAA,QACX,CAAA;AAAA,MACH,CAAA,GAET,gBAAA,EAAC,GAAD;AAAA,QAAiB,QAAO;AAAA,QAAO,SAAS;AAAA,MAAqB,CAAA,CACxD,EAAA,CAAA;AAAA,MAER,MAAgB,KAAK,gBAAA,EAAC,GAAD,EAAuB,QAAA,EAAS,CAAA;AAAA,MAEtD,gBAAA,EAAC,GAAD;AAAA,QACE,gBAAgB,EAAW;AAAA,QAC3B,QAAQ,EAAQ;AAAA,QAChB,SAAA,MAAe,EAAmB,EAAE;AAAA,QACpC,OAAO,EAAK;AAAA,QAEX,UAAA,KAAe,gBAAA,EAAC,GAAD,EAAiC,aAAA,EAAc,CAAA;AAAA,MACzD,CAAA;AAAA,IACH,EAAA,CAAA,CACF;AAAA;AAEX,CAAC"}

package/dist/budgets/components/budgetdetails/Header.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.es.js","names":[],"sources":["../../../../src/budgets/components/budgetdetails/Header.tsx"],"sourcesContent":["import React from 'react'\n\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { StatusBar } from '../../../common'\nimport { DetailedBudget } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface HeaderProps {\n  budget: DetailedBudget\n}\n\nexport const Header: React.FC<HeaderProps> = ({ budget }) => {\n  const {\n    amount,\n    budgetColors: { background },\n    category: { name: categoryName },\n    category_guid,\n    percentage,\n    transaction_total,\n  } = budget\n\n  const status = [\n    {\n      color: background,\n      percentage: `${percentage}%`,\n    },\n  ]\n\n  return (\n    <Card sx={{ mt: 24, mx: 24 }}>\n      <CardContent>\n        <Stack alignItems=\"center\" gap={16}>\n          <CategoryIcon categoryGuid={category_guid} size={56} />\n          <Text variant=\"h1\">\n            {`${formatCurrency(transaction_total, '0,0')} / ${formatCurrency(amount, '0,0')}`}\n          </Text>\n          <Text bold={true} variant=\"caption\">\n            {categoryName}\n          </Text>\n          <StatusBar data={status} height={10} />\n        </Stack>\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;AAgBA,IAAa,IAAA,CAAiC,EAAE,QAAA,EAAA,MAAa;AAC3D,QAAM,EACJ,QAAA,GACA,cAAc,EAAE,YAAA,EAAA,GAChB,UAAU,EAAE,MAAM,EAAA,GAClB,eAAA,GACA,YAAA,GACA,mBAAA,EAAA,IACE,GAEE,IAAS,CACb;AAAA,IACE,OAAO;AAAA,IACP,YAAY,GAAG,CAAA;AAAA,EACjB,CACF;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAM,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,cACzB,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,MAAO,YAAW;AAAA,MAAS,KAAK;AAAA,gBAAhC;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc;AAAA,UAAe,MAAM;AAAA,QAAK,CAAA;AAAA,QACtD,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,oBACX,GAAG,EAAe,GAAmB,KAAK,CAAA,MAAO,EAAe,GAAQ,KAAK,CAAA;AAAA,QAC1E,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB;AAAA,QACG,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAW,MAAM;AAAA,UAAQ,QAAQ;AAAA,QAAK,CAAA;AAAA,MACjC;AAAA,OACI,CAAA;AAAA,EACT,CAAA;AAEV"}
+{"version":3,"file":"Header.es.js","names":[],"sources":["../../../../src/budgets/components/budgetdetails/Header.tsx"],"sourcesContent":["import React from 'react'\n\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { StatusBar } from '../../../common'\nimport { DetailedBudget } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface HeaderProps {\n  budget: DetailedBudget\n}\n\nexport const Header: React.FC<HeaderProps> = ({ budget }) => {\n  const {\n    amount,\n    budgetColors: { background },\n    category: { name: categoryName },\n    category_guid,\n    percentage,\n    transaction_total,\n  } = budget\n\n  const status = [\n    {\n      color: background,\n      percentage: `${percentage}%`,\n    },\n  ]\n\n  return (\n    <Card sx={{ mt: 24, mx: 24 }}>\n      <CardContent>\n        <Stack alignItems=\"center\" gap={16}>\n          <CategoryIcon categoryGuid={category_guid} size={56} />\n          <Text variant=\"h1\">\n            {`${formatCurrency(transaction_total, '0,0')} / ${formatCurrency(amount, '0,0')}`}\n          </Text>\n          <Text bold={true} variant=\"caption\">\n            {categoryName}\n          </Text>\n          <StatusBar data={status} height={10} />\n        </Stack>\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;AAgBA,IAAa,IAAA,CAAiC,EAAE,QAAA,EAAA,MAAa;AAC3D,QAAM,EACJ,QAAA,GACA,cAAc,EAAE,YAAA,EAAA,GAChB,UAAU,EAAE,MAAM,EAAA,GAClB,eAAA,GACA,YAAA,GACA,mBAAA,EAAA,IACE,GAEE,IAAS,CACb;AAAA,IACE,OAAO;AAAA,IACP,YAAY,GAAG,CAAA;AAAA,EACjB,CACF;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAM,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IACzB,UAAA,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,MAAO,YAAW;AAAA,MAAS,KAAK;AAAA,MAAhC,UAAA;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc;AAAA,UAAe,MAAM;AAAA,QAAK,CAAA;AAAA,QACtD,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,UACX,UAAA,GAAG,EAAe,GAAmB,KAAK,CAAA,MAAO,EAAe,GAAQ,KAAK,CAAA;AAAA,QAC1E,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,UACvB,UAAA;AAAA,QACG,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAW,MAAM;AAAA,UAAQ,QAAQ;AAAA,QAAK,CAAA;AAAA,MACjC;AAAA,IACI,CAAA,EAAA,CAAA;AAAA,EACT,CAAA;AAEV"}

package/dist/budgets/components/budgetdetails/SubBudgetList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubBudgetList.es.js","names":[],"sources":["../../../../src/budgets/components/budgetdetails/SubBudgetList.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport {\n  Dialog,\n  Drawer,\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useTransactionStore,\n} from '../../../common'\nimport { type Budget, type DetailedBudget, type Transaction } from '../../../core'\n\nimport { TransactionList } from '../../../transactions'\n\nimport { SubBudgetZeroState } from '../budgetlist/SubBudgetZeroState'\nimport { SubBudgetRow } from '../budgetlist/SubBudgetRow'\nimport { BudgetAmount } from '../shared/BudgetAmount'\nimport { AddSubBudget } from './AddSubBudget'\nimport { Header } from './Header'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface SubBudgetListProps {\n  budget: DetailedBudget\n}\n\nexport const SubBudgetList: React.FC<SubBudgetListProps> = observer(({ budget }) => {\n  const { category, subBudgets } = budget\n  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n  const { deleteBudget, selectedSubBudget, setSelectedSubBudget, updateBudget } = useBudgetsStore()\n  const { filter, setFilter } = useTransactionStore()\n\n  const [isEditOpen, setIsEditOpen] = React.useState(false)\n  const [isDeleteOpen, setIsDeleteOpen] = React.useState(false)\n  const [amount, setAmount] = React.useState(``)\n\n  React.useEffect(() => {\n    if (selectedSubBudget) {\n      setAmount(`${selectedSubBudget.amount}`)\n      setFilter({\n        ...filter,\n        custom: (t: Transaction) => t.category_guid === selectedSubBudget.category_guid,\n      })\n    }\n  }, [selectedSubBudget])\n\n  const handleUpdateBudget = async () => {\n    if (selectedSubBudget) {\n      await updateBudget({\n        ...selectedSubBudget,\n        amount: Number(amount),\n      } as Budget)\n    }\n  }\n\n  const handleDeleteBudget = async () => {\n    if (selectedSubBudget) {\n      await deleteBudget(selectedSubBudget.guid)\n    }\n    setIsDeleteOpen(false)\n    handleClose()\n  }\n\n  const handleClose = () => {\n    setFilter({\n      ...filter,\n      custom: (t: Transaction) =>\n        t.category_guid === budget.category_guid ||\n        t.top_level_category_guid === budget.category_guid,\n    })\n    setSelectedSubBudget(undefined)\n  }\n\n  return (\n    <React.Fragment>\n      <List sx={{ bgcolor: 'background.paper' }}>\n        {subBudgets.length === 0 ? (\n          <SubBudgetZeroState />\n        ) : (\n          subBudgets.map((subBudget) => (\n            <React.Fragment key={subBudget.guid}>\n              <SubBudgetRow budget={subBudget} />\n              <Divider />\n            </React.Fragment>\n          ))\n        )}\n        <AddSubBudget category={category} parentBudget={budget} />\n      </List>\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={Boolean(selectedSubBudget)}\n        onClose={handleClose}\n        onPrimaryAction={() => setIsEditOpen(true)}\n        onSecondaryAction={() => setIsDeleteOpen(true)}\n        primaryText={copy.details_edit_button}\n        secondaryText={copy.details_delete_button}\n        title={copy.details_title}\n      >\n        {selectedSubBudget && (\n          <Stack gap={24}>\n            <Header budget={selectedSubBudget} />\n            <TransactionList height=\"100%\" />\n          </Stack>\n        )}\n      </Drawer>\n\n      {selectedSubBudget && (\n        <React.Fragment>\n          <Dialog\n            copy={{ close_aria: commonCopy.close_aria, title: copy.details_edit_title }}\n            disablePrimaryButton={Number(amount) <= 0}\n            isOpen={isEditOpen}\n            onClose={() => setIsEditOpen(false)}\n            onPrimaryAction={handleUpdateBudget}\n            primaryText={copy.edit_save_button}\n          >\n            <BudgetAmount\n              amount={amount}\n              categoryName={selectedSubBudget.category.name}\n              onAmountChanged={setAmount}\n            />\n          </Dialog>\n\n          <Dialog\n            copy={{ close_aria: commonCopy.close_aria, title: copy.delete_title }}\n            isOpen={isDeleteOpen}\n            onClose={() => setIsDeleteOpen(false)}\n            onPrimaryAction={handleDeleteBudget}\n            primaryColor=\"error\"\n            primaryText=\"Delete\"\n            secondaryColor=\"secondary\"\n          >\n            <Text variant=\"subtitle1\">\n              {buildDynamicCopy(copy.delete_description, selectedSubBudget.category.name) as string}\n            </Text>\n          </Dialog>\n        </React.Fragment>\n      )}\n    </React.Fragment>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"SubBudgetList.es.js","names":[],"sources":["../../../../src/budgets/components/budgetdetails/SubBudgetList.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport {\n  Dialog,\n  Drawer,\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useTransactionStore,\n} from '../../../common'\nimport { type Budget, type DetailedBudget, type Transaction } from '../../../core'\n\nimport { TransactionList } from '../../../transactions'\n\nimport { SubBudgetZeroState } from '../budgetlist/SubBudgetZeroState'\nimport { SubBudgetRow } from '../budgetlist/SubBudgetRow'\nimport { BudgetAmount } from '../shared/BudgetAmount'\nimport { AddSubBudget } from './AddSubBudget'\nimport { Header } from './Header'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface SubBudgetListProps {\n  budget: DetailedBudget\n}\n\nexport const SubBudgetList: React.FC<SubBudgetListProps> = observer(({ budget }) => {\n  const { category, subBudgets } = budget\n  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n  const { deleteBudget, selectedSubBudget, setSelectedSubBudget, updateBudget } = useBudgetsStore()\n  const { filter, setFilter } = useTransactionStore()\n\n  const [isEditOpen, setIsEditOpen] = React.useState(false)\n  const [isDeleteOpen, setIsDeleteOpen] = React.useState(false)\n  const [amount, setAmount] = React.useState(``)\n\n  React.useEffect(() => {\n    if (selectedSubBudget) {\n      setAmount(`${selectedSubBudget.amount}`)\n      setFilter({\n        ...filter,\n        custom: (t: Transaction) => t.category_guid === selectedSubBudget.category_guid,\n      })\n    }\n  }, [selectedSubBudget])\n\n  const handleUpdateBudget = async () => {\n    if (selectedSubBudget) {\n      await updateBudget({\n        ...selectedSubBudget,\n        amount: Number(amount),\n      } as Budget)\n    }\n  }\n\n  const handleDeleteBudget = async () => {\n    if (selectedSubBudget) {\n      await deleteBudget(selectedSubBudget.guid)\n    }\n    setIsDeleteOpen(false)\n    handleClose()\n  }\n\n  const handleClose = () => {\n    setFilter({\n      ...filter,\n      custom: (t: Transaction) =>\n        t.category_guid === budget.category_guid ||\n        t.top_level_category_guid === budget.category_guid,\n    })\n    setSelectedSubBudget(undefined)\n  }\n\n  return (\n    <React.Fragment>\n      <List sx={{ bgcolor: 'background.paper' }}>\n        {subBudgets.length === 0 ? (\n          <SubBudgetZeroState />\n        ) : (\n          subBudgets.map((subBudget) => (\n            <React.Fragment key={subBudget.guid}>\n              <SubBudgetRow budget={subBudget} />\n              <Divider />\n            </React.Fragment>\n          ))\n        )}\n        <AddSubBudget category={category} parentBudget={budget} />\n      </List>\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={Boolean(selectedSubBudget)}\n        onClose={handleClose}\n        onPrimaryAction={() => setIsEditOpen(true)}\n        onSecondaryAction={() => setIsDeleteOpen(true)}\n        primaryText={copy.details_edit_button}\n        secondaryText={copy.details_delete_button}\n        title={copy.details_title}\n      >\n        {selectedSubBudget && (\n          <Stack gap={24}>\n            <Header budget={selectedSubBudget} />\n            <TransactionList height=\"100%\" />\n          </Stack>\n        )}\n      </Drawer>\n\n      {selectedSubBudget && (\n        <React.Fragment>\n          <Dialog\n            copy={{ close_aria: commonCopy.close_aria, title: copy.details_edit_title }}\n            disablePrimaryButton={Number(amount) <= 0}\n            isOpen={isEditOpen}\n            onClose={() => setIsEditOpen(false)}\n            onPrimaryAction={handleUpdateBudget}\n            primaryText={copy.edit_save_button}\n          >\n            <BudgetAmount\n              amount={amount}\n              categoryName={selectedSubBudget.category.name}\n              onAmountChanged={setAmount}\n            />\n          </Dialog>\n\n          <Dialog\n            copy={{ close_aria: commonCopy.close_aria, title: copy.delete_title }}\n            isOpen={isDeleteOpen}\n            onClose={() => setIsDeleteOpen(false)}\n            onPrimaryAction={handleDeleteBudget}\n            primaryColor=\"error\"\n            primaryText=\"Delete\"\n            secondaryColor=\"secondary\"\n          >\n            <Text variant=\"subtitle1\">\n              {buildDynamicCopy(copy.delete_description, selectedSubBudget.category.name) as string}\n            </Text>\n          </Dialog>\n        </React.Fragment>\n      )}\n    </React.Fragment>\n  )\n})\n"],"mappings":"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"}

package/dist/budgets/components/budgetlist/BudgetRow.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BudgetRow.es.js","names":[],"sources":["../../../../src/budgets/components/budgetlist/BudgetRow.tsx"],"sourcesContent":["import React from 'react'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { SingleSegmentDonut } from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface BudgetRowProps {\n  budget: DetailedBudget\n  onClick?: (budget: DetailedBudget) => void\n}\n\nexport const BudgetRow: React.FC<BudgetRowProps> = ({ budget, onClick }) => {\n  const {\n    amount,\n    budgetColors: { background, description: descriptionColor },\n    category_guid,\n    description,\n    percentage,\n    subBudgets,\n    transaction_total,\n  } = budget\n\n  const overBudget = percentage > 100\n\n  return (\n    <ListItem>\n      <ListItemButton onClick={() => onClick?.(budget)}>\n        <ListItemAvatar sx={{ mb: -8, mr: 16 }}>\n          <SingleSegmentDonut color={background} percent={percentage} size={40}>\n            <CategoryIcon categoryGuid={category_guid} variant=\"basic\" />\n          </SingleSegmentDonut>\n        </ListItemAvatar>\n        <ListItemText\n          primary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text bold={true} variant=\"body1\">\n                {budget.category.name}\n              </Text>\n              <Text fontWeight={400} variant=\"body1\">\n                {`\n                  ${formatCurrency(transaction_total, '0,0')} /\n                  ${formatCurrency(amount, '0,0')}\n                `}\n              </Text>\n            </Stack>\n          }\n          secondary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text variant=\"caption\">{`${subBudgets.length} Sub-budgets`}</Text>\n              <Text\n                bold={overBudget}\n                sx={{\n                  color: descriptionColor,\n                  ...(overBudget && {\n                    '.MuiListItemButton-root:hover &, .MuiListItemButton-root:active &': {\n                      color: 'error.dark',\n                    },\n                  }),\n                }}\n                variant=\"caption\"\n              >\n                {description}\n              </Text>\n            </Stack>\n          }\n        />\n      </ListItemButton>\n    </ListItem>\n  )\n}\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,IAAA,CAAuC,EAAE,QAAA,GAAQ,SAAA,EAAA,MAAc;AAC1E,QAAM,EACJ,QAAA,GACA,cAAc,EAAE,YAAA,GAAY,aAAa,EAAA,GACzC,eAAA,GACA,aAAA,GACA,YAAA,GACA,YAAA,GACA,mBAAA,EAAA,IACE,GAEE,IAAa,IAAa;AAEhC,SACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IAAgB,SAAA,MAAe,IAAU,CAAM;AAAA,cAA/C,CACE,gBAAA,EAAC,GAAD;AAAA,MAAgB,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,gBACnC,gBAAA,EAAC,GAAD;AAAA,QAAoB,OAAO;AAAA,QAAY,SAAS;AAAA,QAAY,MAAM;AAAA,kBAChE,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc;AAAA,UAAe,SAAQ;AAAA,QAAS,CAAA;AAAA,MAC1C,CAAA;AAAA,IACN,CAAA,GAChB,gBAAA,EAAC,GAAD;AAAA,MACE,SACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,kBAAvD,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB,EAAO,SAAS;AAAA,QACb,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAM,YAAY;AAAA,UAAK,SAAQ;AAAA,oBAC5B;AAAA,oBACG,EAAe,GAAmB,KAAK,CAAA;AAAA,oBACvC,EAAe,GAAQ,KAAK,CAAA;AAAA;AAAA,QAE5B,CAAA,CACD;AAAA;MAET,WACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,kBAAvD,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,oBAAW,GAAG,EAAW,MAAA;AAAA,QAA2B,CAAA,GAClE,gBAAA,EAAC,GAAD;AAAA,UACE,MAAM;AAAA,UACN,IAAI;AAAA,YACF,OAAO;AAAA,YACP,GAAI,KAAc,EAChB,qEAAqE,EACnE,OAAO,aACT,EACF;AAAA,UACF;AAAA,UACA,SAAQ;AAAA,oBAEP;AAAA,QACG,CAAA,CACD;AAAA;IAEV,CAAA,CACa;AAAA,KACR,CAAA;AAEd"}
+{"version":3,"file":"BudgetRow.es.js","names":[],"sources":["../../../../src/budgets/components/budgetlist/BudgetRow.tsx"],"sourcesContent":["import React from 'react'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { SingleSegmentDonut } from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface BudgetRowProps {\n  budget: DetailedBudget\n  onClick?: (budget: DetailedBudget) => void\n}\n\nexport const BudgetRow: React.FC<BudgetRowProps> = ({ budget, onClick }) => {\n  const {\n    amount,\n    budgetColors: { background, description: descriptionColor },\n    category_guid,\n    description,\n    percentage,\n    subBudgets,\n    transaction_total,\n  } = budget\n\n  const overBudget = percentage > 100\n\n  return (\n    <ListItem>\n      <ListItemButton onClick={() => onClick?.(budget)}>\n        <ListItemAvatar sx={{ mb: -8, mr: 16 }}>\n          <SingleSegmentDonut color={background} percent={percentage} size={40}>\n            <CategoryIcon categoryGuid={category_guid} variant=\"basic\" />\n          </SingleSegmentDonut>\n        </ListItemAvatar>\n        <ListItemText\n          primary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text bold={true} variant=\"body1\">\n                {budget.category.name}\n              </Text>\n              <Text fontWeight={400} variant=\"body1\">\n                {`\n                  ${formatCurrency(transaction_total, '0,0')} /\n                  ${formatCurrency(amount, '0,0')}\n                `}\n              </Text>\n            </Stack>\n          }\n          secondary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text variant=\"caption\">{`${subBudgets.length} Sub-budgets`}</Text>\n              <Text\n                bold={overBudget}\n                sx={{\n                  color: descriptionColor,\n                  ...(overBudget && {\n                    '.MuiListItemButton-root:hover &, .MuiListItemButton-root:active &': {\n                      color: 'error.dark',\n                    },\n                  }),\n                }}\n                variant=\"caption\"\n              >\n                {description}\n              </Text>\n            </Stack>\n          }\n        />\n      </ListItemButton>\n    </ListItem>\n  )\n}\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,IAAA,CAAuC,EAAE,QAAA,GAAQ,SAAA,EAAA,MAAc;AAC1E,QAAM,EACJ,QAAA,GACA,cAAc,EAAE,YAAA,GAAY,aAAa,EAAA,GACzC,eAAA,GACA,aAAA,GACA,YAAA,GACA,YAAA,GACA,mBAAA,EAAA,IACE,GAEE,IAAa,IAAa;AAEhC,SACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IAAgB,SAAA,MAAe,IAAU,CAAM;AAAA,IAA/C,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAgB,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,MACnC,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAoB,OAAO;AAAA,QAAY,SAAS;AAAA,QAAY,MAAM;AAAA,QAChE,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc;AAAA,UAAe,SAAQ;AAAA,QAAS,CAAA;AAAA,MAC1C,CAAA;AAAA,IACN,CAAA,GAChB,gBAAA,EAAC,GAAD;AAAA,MACE,SACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,QAAvD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,UACvB,UAAA,EAAO,SAAS;AAAA,QACb,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAM,YAAY;AAAA,UAAK,SAAQ;AAAA,UAC5B,UAAA;AAAA,oBACG,EAAe,GAAmB,KAAK,CAAA;AAAA,oBACvC,EAAe,GAAQ,KAAK,CAAA;AAAA;AAAA,QAE5B,CAAA,CACD;AAAA;MAET,WACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,QAAvD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,UAAW,UAAA,GAAG,EAAW,MAAA;AAAA,QAA2B,CAAA,GAClE,gBAAA,EAAC,GAAD;AAAA,UACE,MAAM;AAAA,UACN,IAAI;AAAA,YACF,OAAO;AAAA,YACP,GAAI,KAAc,EAChB,qEAAqE,EACnE,OAAO,aACT,EACF;AAAA,UACF;AAAA,UACA,SAAQ;AAAA,UAEP,UAAA;AAAA,QACG,CAAA,CACD;AAAA;IAEV,CAAA,CACa;AAAA,EACR,CAAA,EAAA,CAAA;AAEd"}

package/dist/budgets/components/budgetlist/SubBudgetRow.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubBudgetRow.es.js","names":[],"sources":["../../../../src/budgets/components/budgetlist/SubBudgetRow.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { SingleSegmentDonut, useBudgetsStore } from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface SubBudgetRowProps {\n  budget: DetailedBudget\n}\n\nexport const SubBudgetRow: React.FC<SubBudgetRowProps> = observer(({ budget }) => {\n  const {\n    amount,\n    budgetColors: { background },\n    category,\n    percentage,\n    transaction_total,\n  } = budget\n\n  const { setSelectedSubBudget } = useBudgetsStore()\n\n  return (\n    <ListItem>\n      <ListItemButton onClick={() => setSelectedSubBudget(budget)}>\n        <ListItemAvatar sx={{ mb: -8, mr: 16 }}>\n          <SingleSegmentDonut color={background} percent={percentage} size={40}>\n            <CategoryIcon categoryGuid={category.parent_guid} variant=\"basic\" />\n          </SingleSegmentDonut>\n        </ListItemAvatar>\n        <ListItemText\n          primary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text bold={true} variant=\"body1\">\n                {budget.category.name}\n              </Text>\n            </Stack>\n          }\n          secondary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text fontWeight={400} variant=\"body1\">\n                {`\n                  ${formatCurrency(transaction_total, '0,0')} / \n                  ${formatCurrency(amount, '0,0')}\n                `}\n              </Text>\n            </Stack>\n          }\n        />\n      </ListItemButton>\n    </ListItem>\n  )\n})\n"],"mappings":";;;;;;;;;;;;AAmBA,IAAa,IAA4C,EAAA,CAAU,EAAE,QAAA,EAAA,MAAa;AAChF,QAAM,EACJ,QAAA,GACA,cAAc,EAAE,YAAA,EAAA,GAChB,UAAA,GACA,YAAA,GACA,mBAAA,EAAA,IACE,GAEE,EAAE,sBAAA,EAAA,IAAyB,EAAgB;AAEjD,SACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IAAgB,SAAA,MAAe,EAAqB,CAAM;AAAA,cAA1D,CACE,gBAAA,EAAC,GAAD;AAAA,MAAgB,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,gBACnC,gBAAA,EAAC,GAAD;AAAA,QAAoB,OAAO;AAAA,QAAY,SAAS;AAAA,QAAY,MAAM;AAAA,kBAChE,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc,EAAS;AAAA,UAAa,SAAQ;AAAA,QAAS,CAAA;AAAA,MACjD,CAAA;AAAA,IACN,CAAA,GAChB,gBAAA,EAAC,GAAD;AAAA,MACE,SACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,kBACrD,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB,EAAO,SAAS;AAAA,QACb,CAAA;AAAA,MACD,CAAA;AAAA,MAET,WACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,kBACrD,gBAAA,EAAC,GAAD;AAAA,UAAM,YAAY;AAAA,UAAK,SAAQ;AAAA,oBAC5B;AAAA,oBACG,EAAe,GAAmB,KAAK,CAAA;AAAA,oBACvC,EAAe,GAAQ,KAAK,CAAA;AAAA;AAAA,QAE5B,CAAA;AAAA,MACD,CAAA;AAAA,IAEV,CAAA,CACa;AAAA,KACR,CAAA;AAEd,CAAC"}
+{"version":3,"file":"SubBudgetRow.es.js","names":[],"sources":["../../../../src/budgets/components/budgetlist/SubBudgetRow.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { SingleSegmentDonut, useBudgetsStore } from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface SubBudgetRowProps {\n  budget: DetailedBudget\n}\n\nexport const SubBudgetRow: React.FC<SubBudgetRowProps> = observer(({ budget }) => {\n  const {\n    amount,\n    budgetColors: { background },\n    category,\n    percentage,\n    transaction_total,\n  } = budget\n\n  const { setSelectedSubBudget } = useBudgetsStore()\n\n  return (\n    <ListItem>\n      <ListItemButton onClick={() => setSelectedSubBudget(budget)}>\n        <ListItemAvatar sx={{ mb: -8, mr: 16 }}>\n          <SingleSegmentDonut color={background} percent={percentage} size={40}>\n            <CategoryIcon categoryGuid={category.parent_guid} variant=\"basic\" />\n          </SingleSegmentDonut>\n        </ListItemAvatar>\n        <ListItemText\n          primary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text bold={true} variant=\"body1\">\n                {budget.category.name}\n              </Text>\n            </Stack>\n          }\n          secondary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text fontWeight={400} variant=\"body1\">\n                {`\n                  ${formatCurrency(transaction_total, '0,0')} / \n                  ${formatCurrency(amount, '0,0')}\n                `}\n              </Text>\n            </Stack>\n          }\n        />\n      </ListItemButton>\n    </ListItem>\n  )\n})\n"],"mappings":";;;;;;;;;;;;AAmBA,IAAa,IAA4C,EAAA,CAAU,EAAE,QAAA,EAAA,MAAa;AAChF,QAAM,EACJ,QAAA,GACA,cAAc,EAAE,YAAA,EAAA,GAChB,UAAA,GACA,YAAA,GACA,mBAAA,EAAA,IACE,GAEE,EAAE,sBAAA,EAAA,IAAyB,EAAgB;AAEjD,SACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IAAgB,SAAA,MAAe,EAAqB,CAAM;AAAA,IAA1D,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAgB,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,MACnC,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAoB,OAAO;AAAA,QAAY,SAAS;AAAA,QAAY,MAAM;AAAA,QAChE,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc,EAAS;AAAA,UAAa,SAAQ;AAAA,QAAS,CAAA;AAAA,MACjD,CAAA;AAAA,IACN,CAAA,GAChB,gBAAA,EAAC,GAAD;AAAA,MACE,SACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,QACrD,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,UACvB,UAAA,EAAO,SAAS;AAAA,QACb,CAAA;AAAA,MACD,CAAA;AAAA,MAET,WACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,QACrD,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAM,YAAY;AAAA,UAAK,SAAQ;AAAA,UAC5B,UAAA;AAAA,oBACG,EAAe,GAAmB,KAAK,CAAA;AAAA,oBACvC,EAAe,GAAQ,KAAK,CAAA;AAAA;AAAA,QAE5B,CAAA;AAAA,MACD,CAAA;AAAA,IAEV,CAAA,CACa;AAAA,EACR,CAAA,EAAA,CAAA;AAEd,CAAC"}

package/dist/budgets/components/budgetlist/SubBudgetZeroState.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubBudgetZeroState.es.js","names":[],"sources":["../../../../src/budgets/components/budgetlist/SubBudgetZeroState.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\nimport { observer } from 'mobx-react-lite'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../../common'\n\nexport const SubBudgetZeroState = observer(() => {\n  const { budgets: copy } = useGlobalCopyStore()\n\n  return (\n    <Stack alignItems=\"center\" gap={12} height=\"auto\" mb={24} mt={24}>\n      <Icon color=\"action\" name=\"bubble_chart\" sx={{ fontSize: 32 }} />\n      <Text bold={true} color=\"text.secondary\" variant=\"body2\">\n        {copy.zero_state_no_sub_budgets}\n      </Text>\n      <Text color=\"text.secondary\" variant=\"caption\">\n        {copy.zero_state_no_sub_budgets_description}\n      </Text>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;AAOA,IAAa,IAAqB,EAAA,MAAe;AAC/C,QAAM,EAAE,SAAS,EAAA,IAAS,EAAmB;AAE7C,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,KAAK;AAAA,IAAI,QAAO;AAAA,IAAO,IAAI;AAAA,IAAI,IAAI;AAAA,cAA9D;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAS,MAAK;AAAA,QAAe,IAAI,EAAE,UAAU,GAAG;AAAA,MAAI,CAAA;AAAA,MAChE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,OAAM;AAAA,QAAiB,SAAQ;AAAA,kBAC9C,EAAK;AAAA,MACF,CAAA;AAAA,MACN,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAiB,SAAQ;AAAA,kBAClC,EAAK;AAAA,MACF,CAAA;AAAA,IACD;AAAA;AAEX,CAAC"}
+{"version":3,"file":"SubBudgetZeroState.es.js","names":[],"sources":["../../../../src/budgets/components/budgetlist/SubBudgetZeroState.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\nimport { observer } from 'mobx-react-lite'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../../common'\n\nexport const SubBudgetZeroState = observer(() => {\n  const { budgets: copy } = useGlobalCopyStore()\n\n  return (\n    <Stack alignItems=\"center\" gap={12} height=\"auto\" mb={24} mt={24}>\n      <Icon color=\"action\" name=\"bubble_chart\" sx={{ fontSize: 32 }} />\n      <Text bold={true} color=\"text.secondary\" variant=\"body2\">\n        {copy.zero_state_no_sub_budgets}\n      </Text>\n      <Text color=\"text.secondary\" variant=\"caption\">\n        {copy.zero_state_no_sub_budgets_description}\n      </Text>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;AAOA,IAAa,IAAqB,EAAA,MAAe;AAC/C,QAAM,EAAE,SAAS,EAAA,IAAS,EAAmB;AAE7C,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,KAAK;AAAA,IAAI,QAAO;AAAA,IAAO,IAAI;AAAA,IAAI,IAAI;AAAA,IAA9D,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAS,MAAK;AAAA,QAAe,IAAI,EAAE,UAAU,GAAG;AAAA,MAAI,CAAA;AAAA,MAChE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,OAAM;AAAA,QAAiB,SAAQ;AAAA,QAC9C,UAAA,EAAK;AAAA,MACF,CAAA;AAAA,MACN,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAiB,SAAQ;AAAA,QAClC,UAAA,EAAK;AAAA,MACF,CAAA;AAAA,IACD;AAAA;AAEX,CAAC"}

package/dist/budgets/components/shared/BudgetAmount.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BudgetAmount.es.js","names":[],"sources":["../../../../src/budgets/components/shared/BudgetAmount.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport { Text } from '@mxenabled/mxui'\nimport {\n  CurrencyInput,\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useRecurringTransactionsStore,\n} from '../../../common'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface BudgetAmountProps {\n  amount: string\n  categoryName: string\n  onAmountChanged: (amount: string) => void\n}\n\nexport const BudgetAmount: React.FC<BudgetAmountProps> = ({\n  amount,\n  categoryName,\n  onAmountChanged,\n}) => {\n  const { budgets: copy } = useGlobalCopyStore()\n  const { totalBudgeted } = useBudgetsStore()\n  const { incomeTotal } = useRecurringTransactionsStore()\n\n  const unbudgetedIncome = incomeTotal - totalBudgeted\n\n  return (\n    <Stack gap={16}>\n      <Stack>\n        <Text>\n          {\n            buildDynamicCopy(\n              copy.add_description_top,\n              formatCurrency(unbudgetedIncome, '0,0'),\n            ) as string\n          }\n        </Text>\n        <Text>{buildDynamicCopy(copy.add_description_bottom, categoryName) as string}</Text>\n      </Stack>\n      <CurrencyInput\n        amount={amount}\n        autoFocus={true}\n        label={copy.add_label}\n        minAmount={0}\n        setAmount={onAmountChanged}\n        sx={{ '.MuiTypography-body1': { p: 0 } }}\n      />\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;AAmBA,IAAa,IAAA,CAA6C,EACxD,QAAA,GACA,cAAA,GACA,iBAAA,EAAA,MACI;AACJ,QAAM,EAAE,SAAS,EAAA,IAAS,EAAmB,GACvC,EAAE,eAAA,EAAA,IAAkB,EAAgB,GACpC,EAAE,aAAA,EAAA,IAAgB,EAA8B,GAEhD,IAAmB,IAAc;AAEvC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,KAAK;AAAA,cAAZ,CACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UAEI,EACE,EAAK,qBACL,EAAe,GAAkB,KAAK,CACxC,EAEE,CAAA,GACN,gBAAA,EAAC,GAAD,EAAA,UAAO,EAAiB,EAAK,wBAAwB,CAAY,EAAkB,CAAA,CAC9E,EAAA,CAAA,GACP,gBAAA,EAAC,GAAD;AAAA,MACU,QAAA;AAAA,MACR,WAAW;AAAA,MACX,OAAO,EAAK;AAAA,MACZ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,IAAI,EAAE,wBAAwB,EAAE,GAAG,EAAE,EAAE;AAAA,IACxC,CAAA,CACI;AAAA;AAEX"}
+{"version":3,"file":"BudgetAmount.es.js","names":[],"sources":["../../../../src/budgets/components/shared/BudgetAmount.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport { Text } from '@mxenabled/mxui'\nimport {\n  CurrencyInput,\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useRecurringTransactionsStore,\n} from '../../../common'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface BudgetAmountProps {\n  amount: string\n  categoryName: string\n  onAmountChanged: (amount: string) => void\n}\n\nexport const BudgetAmount: React.FC<BudgetAmountProps> = ({\n  amount,\n  categoryName,\n  onAmountChanged,\n}) => {\n  const { budgets: copy } = useGlobalCopyStore()\n  const { totalBudgeted } = useBudgetsStore()\n  const { incomeTotal } = useRecurringTransactionsStore()\n\n  const unbudgetedIncome = incomeTotal - totalBudgeted\n\n  return (\n    <Stack gap={16}>\n      <Stack>\n        <Text>\n          {\n            buildDynamicCopy(\n              copy.add_description_top,\n              formatCurrency(unbudgetedIncome, '0,0'),\n            ) as string\n          }\n        </Text>\n        <Text>{buildDynamicCopy(copy.add_description_bottom, categoryName) as string}</Text>\n      </Stack>\n      <CurrencyInput\n        amount={amount}\n        autoFocus={true}\n        label={copy.add_label}\n        minAmount={0}\n        setAmount={onAmountChanged}\n        sx={{ '.MuiTypography-body1': { p: 0 } }}\n      />\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;AAmBA,IAAa,IAAA,CAA6C,EACxD,QAAA,GACA,cAAA,GACA,iBAAA,EAAA,MACI;AACJ,QAAM,EAAE,SAAS,EAAA,IAAS,EAAmB,GACvC,EAAE,eAAA,EAAA,IAAkB,EAAgB,GACpC,EAAE,aAAA,EAAA,IAAgB,EAA8B,GAEhD,IAAmB,IAAc;AAEvC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,KAAK;AAAA,IAAZ,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UAEI,EACE,EAAK,qBACL,EAAe,GAAkB,KAAK,CACxC,EAEE,CAAA,GACN,gBAAA,EAAC,GAAD,EAAA,UAAO,EAAiB,EAAK,wBAAwB,CAAY,EAAkB,CAAA,CAC9E,EAAA,CAAA,GACP,gBAAA,EAAC,GAAD;AAAA,MACU,QAAA;AAAA,MACR,WAAW;AAAA,MACX,OAAO,EAAK;AAAA,MACZ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,IAAI,EAAE,wBAAwB,EAAE,GAAG,EAAE,EAAE;AAAA,IACxC,CAAA,CACI;AAAA;AAEX"}

package/dist/budgets/components/shared/BudgetDetailsTopSection.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BudgetDetailsTopSection.es.js","names":[],"sources":["../../../../src/budgets/components/shared/BudgetDetailsTopSection.tsx"],"sourcesContent":["import React from 'react'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\n\nimport { H2, P, Text } from '@mxenabled/mxui'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { useGlobalCopyStore } from '../../../common'\nimport { StatusIndicator } from '../../../insights'\nimport { fromTimestampToMonthYear } from '../../../core/utils/DateUtil'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface BudgetDetailsTopAndMiddleSectionProps {\n  startDate: number\n  onViewHistory?: () => void\n  totalTransaction: number\n  amount: number\n  spentPercentage: number\n  remainingAmount: number\n  iconColor?: string\n  icon: React.ReactNode\n}\n\nexport const BudgetDetailsTopSection = ({\n  startDate,\n  onViewHistory,\n  totalTransaction,\n  amount,\n  spentPercentage,\n  remainingAmount,\n  iconColor,\n  icon,\n}: BudgetDetailsTopAndMiddleSectionProps) => {\n  const { budgets: budgetsCopy } = useGlobalCopyStore()\n\n  return (\n    <React.Fragment>\n      <Box\n        sx={{\n          bgcolor: 'background.paper',\n          borderBottomColor: 'divider',\n          borderBottomStyle: 'solid',\n          borderBottomWidth: 1,\n        }}\n      >\n        <Stack\n          sx={{\n            alignItems: 'center',\n            flexDirection: 'row',\n            gap: 12,\n            justifyContent: 'space-between',\n            pt: 16,\n            px: 24,\n          }}\n        >\n          <P bold={true} variant=\"subtitle1\">\n            {fromTimestampToMonthYear(startDate)}\n          </P>\n          {onViewHistory && (\n            <Button endIcon={<ChevronRight />} onClick={onViewHistory} sx={{ height: 28 }}>\n              <Text bold={true} variant=\"body2\">\n                {budgetsCopy.spending_history}\n              </Text>\n            </Button>\n          )}\n        </Stack>\n        <StatusIndicator\n          amount={\n            <Stack sx={{ alignItems: 'baseline', flexDirection: 'row', gap: 4 }}>\n              <H2>{formatCurrency(totalTransaction, '0,0.00')}</H2>\n              <P color=\"text.secondary\" variant=\"body2\">\n                /\n              </P>\n              <P color=\"text.secondary\" variant=\"body2\">\n                {formatCurrency(amount, '0,0.00')}\n              </P>\n            </Stack>\n          }\n          completeColor={`${iconColor}.main`}\n          icon={icon}\n          label={budgetsCopy.spent_label}\n          leftLabel={\n            buildDynamicCopy(budgetsCopy.percent_spent, spentPercentage.toFixed()) as string\n          }\n          percentComplete={spentPercentage}\n          rightLabel={\n            buildDynamicCopy(\n              budgetsCopy.balance_left,\n              formatCurrency(remainingAmount, '0,0.00'),\n            ) as string\n          }\n          sx={{\n            pb: 24,\n            pt: 16,\n            px: 24,\n          }}\n        />\n      </Box>\n    </React.Fragment>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAyBA,IAAa,IAAA,CAA2B,EACtC,WAAA,GACA,eAAA,GACA,kBAAA,GACA,QAAA,GACA,iBAAA,GACA,iBAAA,GACA,WAAA,GACA,MAAA,EAAA,MAC2C;AAC3C,QAAM,EAAE,SAAS,EAAA,IAAgB,EAAmB;AAEpD,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,SAAS;AAAA,MACT,mBAAmB;AAAA,MACnB,mBAAmB;AAAA,MACnB,mBAAmB;AAAA,IACrB;AAAA,cANF,CAQE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,KAAK;AAAA,QACL,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,gBARF,CAUE,gBAAA,EAAC,GAAD;AAAA,QAAG,MAAM;AAAA,QAAM,SAAQ;AAAA,kBACpB,EAAyB,CAAS;AAAA,MAClC,CAAA,GACF,KACC,gBAAA,EAAC,GAAD;AAAA,QAAQ,SAAS,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,QAAG,SAAS;AAAA,QAAe,IAAI,EAAE,QAAQ,GAAG;AAAA,kBAC1E,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB,EAAY;AAAA,QACT,CAAA;AAAA,MACA,CAAA,CAEL;AAAA,QACP,gBAAA,EAAC,GAAD;AAAA,MACE,QACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAY,eAAe;AAAA,UAAO,KAAK;AAAA,QAAE;AAAA,kBAAlE;AAAA,UACE,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAe,GAAkB,QAAQ,EAAM,CAAA;AAAA,UACpD,gBAAA,EAAC,GAAD;AAAA,YAAG,OAAM;AAAA,YAAiB,SAAQ;AAAA,sBAAQ;AAAA,UAEvC,CAAA;AAAA,UACH,gBAAA,EAAC,GAAD;AAAA,YAAG,OAAM;AAAA,YAAiB,SAAQ;AAAA,sBAC/B,EAAe,GAAQ,QAAQ;AAAA,UAC/B,CAAA;AAAA,QACE;AAAA;MAET,eAAe,GAAG,CAAA;AAAA,MACZ,MAAA;AAAA,MACN,OAAO,EAAY;AAAA,MACnB,WACE,EAAiB,EAAY,eAAe,EAAgB,QAAQ,CAAC;AAAA,MAEvE,iBAAiB;AAAA,MACjB,YACE,EACE,EAAY,cACZ,EAAe,GAAiB,QAAQ,CAC1C;AAAA,MAEF,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACD,CAAA,CACE;AAAA,KACS,CAAA;AAEpB"}
+{"version":3,"file":"BudgetDetailsTopSection.es.js","names":[],"sources":["../../../../src/budgets/components/shared/BudgetDetailsTopSection.tsx"],"sourcesContent":["import React from 'react'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\n\nimport { H2, P, Text } from '@mxenabled/mxui'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { useGlobalCopyStore } from '../../../common'\nimport { StatusIndicator } from '../../../insights'\nimport { fromTimestampToMonthYear } from '../../../core/utils/DateUtil'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface BudgetDetailsTopAndMiddleSectionProps {\n  startDate: number\n  onViewHistory?: () => void\n  totalTransaction: number\n  amount: number\n  spentPercentage: number\n  remainingAmount: number\n  iconColor?: string\n  icon: React.ReactNode\n}\n\nexport const BudgetDetailsTopSection = ({\n  startDate,\n  onViewHistory,\n  totalTransaction,\n  amount,\n  spentPercentage,\n  remainingAmount,\n  iconColor,\n  icon,\n}: BudgetDetailsTopAndMiddleSectionProps) => {\n  const { budgets: budgetsCopy } = useGlobalCopyStore()\n\n  return (\n    <React.Fragment>\n      <Box\n        sx={{\n          bgcolor: 'background.paper',\n          borderBottomColor: 'divider',\n          borderBottomStyle: 'solid',\n          borderBottomWidth: 1,\n        }}\n      >\n        <Stack\n          sx={{\n            alignItems: 'center',\n            flexDirection: 'row',\n            gap: 12,\n            justifyContent: 'space-between',\n            pt: 16,\n            px: 24,\n          }}\n        >\n          <P bold={true} variant=\"subtitle1\">\n            {fromTimestampToMonthYear(startDate)}\n          </P>\n          {onViewHistory && (\n            <Button endIcon={<ChevronRight />} onClick={onViewHistory} sx={{ height: 28 }}>\n              <Text bold={true} variant=\"body2\">\n                {budgetsCopy.spending_history}\n              </Text>\n            </Button>\n          )}\n        </Stack>\n        <StatusIndicator\n          amount={\n            <Stack sx={{ alignItems: 'baseline', flexDirection: 'row', gap: 4 }}>\n              <H2>{formatCurrency(totalTransaction, '0,0.00')}</H2>\n              <P color=\"text.secondary\" variant=\"body2\">\n                /\n              </P>\n              <P color=\"text.secondary\" variant=\"body2\">\n                {formatCurrency(amount, '0,0.00')}\n              </P>\n            </Stack>\n          }\n          completeColor={`${iconColor}.main`}\n          icon={icon}\n          label={budgetsCopy.spent_label}\n          leftLabel={\n            buildDynamicCopy(budgetsCopy.percent_spent, spentPercentage.toFixed()) as string\n          }\n          percentComplete={spentPercentage}\n          rightLabel={\n            buildDynamicCopy(\n              budgetsCopy.balance_left,\n              formatCurrency(remainingAmount, '0,0.00'),\n            ) as string\n          }\n          sx={{\n            pb: 24,\n            pt: 16,\n            px: 24,\n          }}\n        />\n      </Box>\n    </React.Fragment>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAyBA,IAAa,IAAA,CAA2B,EACtC,WAAA,GACA,eAAA,GACA,kBAAA,GACA,QAAA,GACA,iBAAA,GACA,iBAAA,GACA,WAAA,GACA,MAAA,EAAA,MAC2C;AAC3C,QAAM,EAAE,SAAS,EAAA,IAAgB,EAAmB;AAEpD,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,SAAS;AAAA,MACT,mBAAmB;AAAA,MACnB,mBAAmB;AAAA,MACnB,mBAAmB;AAAA,IACrB;AAAA,IANF,UAAA,CAQE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,KAAK;AAAA,QACL,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MARF,UAAA,CAUE,gBAAA,EAAC,GAAD;AAAA,QAAG,MAAM;AAAA,QAAM,SAAQ;AAAA,QACpB,UAAA,EAAyB,CAAS;AAAA,MAClC,CAAA,GACF,KACC,gBAAA,EAAC,GAAD;AAAA,QAAQ,SAAS,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,QAAG,SAAS;AAAA,QAAe,IAAI,EAAE,QAAQ,GAAG;AAAA,QAC1E,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,UACvB,UAAA,EAAY;AAAA,QACT,CAAA;AAAA,MACA,CAAA,CAEL;AAAA,IACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,MACE,QACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAY,eAAe;AAAA,UAAO,KAAK;AAAA,QAAE;AAAA,QAAlE,UAAA;AAAA,UACE,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAe,GAAkB,QAAQ,EAAM,CAAA;AAAA,UACpD,gBAAA,EAAC,GAAD;AAAA,YAAG,OAAM;AAAA,YAAiB,SAAQ;AAAA,YAAQ,UAAA;AAAA,UAEvC,CAAA;AAAA,UACH,gBAAA,EAAC,GAAD;AAAA,YAAG,OAAM;AAAA,YAAiB,SAAQ;AAAA,YAC/B,UAAA,EAAe,GAAQ,QAAQ;AAAA,UAC/B,CAAA;AAAA,QACE;AAAA;MAET,eAAe,GAAG,CAAA;AAAA,MACZ,MAAA;AAAA,MACN,OAAO,EAAY;AAAA,MACnB,WACE,EAAiB,EAAY,eAAe,EAAgB,QAAQ,CAAC;AAAA,MAEvE,iBAAiB;AAAA,MACjB,YACE,EACE,EAAY,cACZ,EAAe,GAAiB,QAAQ,CAC1C;AAAA,MAEF,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACD,CAAA,CACE;AAAA,EACS,CAAA,EAAA,CAAA;AAEpB"}

package/dist/budgets/utils/BubblesSVG.es.js

@@ -1,5 +1,5 @@
 import * as l from "d3";
-var d = 5, h = 100, u = 25, p = (t) => {
+var g = 5, x = 100, u = 25, p = (t) => {
   const s = (a) => {
     a.active || t.alphaTarget(0.3).restart(), a.subject.fx = a.subject.x, a.subject.fy = a.subject.y;
   }, n = (a) => {
@@ -11,26 +11,26 @@ var d = 5, h = 100, u = 25, p = (t) => {
 }, A = (t) => {
   let s = t.transaction_total / t.amount;
   s < 0 ? s = 0 : s > 1 && (s = 1);
-  const n = s * 2 * Math.PI, c = l.interpolate(0, n), a = l.arc().cornerRadius(5).innerRadius(t.radius - d * 2).outerRadius(t.radius - d).startAngle(0).endAngle(0);
+  const n = s * 2 * Math.PI, c = l.interpolate(0, n), a = l.arc().cornerRadius(5).innerRadius(t.radius - 10).outerRadius(t.radius - g).startAngle(0).endAngle(0);
   return (r) => (a.endAngle(c(r)), a(t) || "");
 }, S = (t) => {
   l.selectAll(".bubble").call(p(t));
-}, x = (t, s, n) => Math.min(Math.max(t, s), n), _ = (t, s, n) => {
+}, d = (t, s, n) => Math.min(Math.max(t, s), n), _ = (t, s, n) => {
   t.alpha(1).restart().force("x", l.forceX().x(n / 2).strength(0.01)).force("y", l.forceY().y(s / 2).strength(0.02)).on("tick", () => {
     const c = t.nodes();
     c.forEach((a) => {
       const r = a.radius ?? u;
-      a.x = x(a.x ?? 0, r, n - r), a.y = x(a.y ?? 0, r, s - r);
+      a.x = d(a.x ?? 0, r, n - r), a.y = d(a.y ?? 0, r, s - r);
     }), l.selectAll(".bubble").data(c).attr("transform", (a) => `translate(${a.x},${a.y})`);
   });
-}, f = (t, s) => l.scaleLinear().domain([t, s]).range([u, h]), I = (t) => {
+}, h = (t, s) => l.scaleLinear().domain([t, s]).range([u, x]), I = (t) => {
   const s = t.reduce((r, e) => {
     const i = Math.max(e.transaction_total, e.amount);
     return i > r ? i : r;
   }, 0), n = t.reduce((r, e) => {
     const i = Math.max(e.transaction_total, e.amount);
     return i < r ? i : r;
-  }, s), c = f(n, s), a = t.map((r) => {
+  }, s), c = h(n, s), a = t.map((r) => {
     const e = c(Math.max(r.transaction_total, r.amount)) || 25;
     return {
       ...r,
@@ -42,8 +42,8 @@ var d = 5, h = 100, u = 25, p = (t) => {
   const c = Math.PI * u ** 2 * t, a = n < 400 || s < 300, r = a ? 40 : 20, e = Math.max(100, n - r), i = Math.max(100, s - r), m = e * i;
   let o = u;
   if (c < m) {
-    const M = Math.sqrt(m / (t * Math.PI)), g = Math.min(e, i) / 4;
-    o = Math.min(h, M, g);
+    const f = Math.sqrt(m / (t * Math.PI)), M = Math.min(e, i) / 4;
+    o = Math.min(x, f, M);
   }
   return a && t <= 3 && (o = Math.min(o, 45)), {
     minRadius: Math.max(20, o * 0.6),
@@ -53,7 +53,7 @@ var d = 5, h = 100, u = 25, p = (t) => {
   const { maxRadius: r, minRadius: e } = R(t, s, a);
   return l.scaleLinear().domain([c, n]).range([e, r]);
 }, j = (t, s, n = !1, c, a) => {
-  const r = s.map((o) => Math.max(o.transaction_total, o.amount)), e = Math.min(...r), i = Math.max(...r), m = n ? y(t.length, c, i, e, a) : f(e, i);
+  const r = s.map((o) => Math.max(o.transaction_total, o.amount)), e = Math.min(...r), i = Math.max(...r), m = n ? y(t.length, c, i, e, a) : h(e, i);
   return t.map((o) => ({
     ...o,
     radius: m(Math.max(o.transaction_total, o.amount))
@@ -64,7 +64,7 @@ export {
   j as computeScaledNodes,
   p as drag,
   S as enableDrag,
-  f as getScale,
+  h as getScale,
   y as getSmartScale,
   _ as resize,
   I as simulate

package/dist/budgets/utils/BubblesSVG.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BubblesSVG.es.js","names":[],"sources":["../../../src/budgets/utils/BubblesSVG.ts"],"sourcesContent":["import * as d3 from 'd3'\n\nimport type { Simulation } from 'd3'\n\nimport { type BubbleData } from '../components/BubbleChart'\nimport { DetailedBudget } from '../../core'\n\n// D3 SVG Types\nexport type SimulationType = Simulation<BubbleData, undefined>\n\nconst PROGRESS_INDICATOR_SIZE = 5\nconst MAX_BUBBLE_RADIUS = 100\nconst MIN_BUBBLE_RADIUS = 25\n\n/**\n * Enables dragging of bubbles\n * @param simulation D3 Simulation\n */\nexport const drag = (simulation: SimulationType) => {\n  const dragStarted = (event: any) => {\n    if (!event.active) simulation.alphaTarget(0.3).restart()\n    event.subject.fx = event.subject.x\n    event.subject.fy = event.subject.y\n  }\n\n  const dragged = (event: any) => {\n    event.subject.fx = event.x\n    event.subject.fy = event.y\n  }\n\n  const dragEnded = (event: any) => {\n    if (!event.active) simulation.alphaTarget(0)\n    event.subject.fx = null\n    event.subject.fy = null\n  }\n  return d3.drag().on('start', dragStarted).on('drag', dragged).on('end', dragEnded)\n}\n\n/**\n * Provide d values for the arc between the start and end radius based on time\n * @param bubble Bubble data\n */\nexport const arcTween = (bubble: BubbleData) => {\n  // Percentage of the budget\n  let p = bubble.transaction_total / bubble.amount\n  if (p < 0) p = 0\n  else if (p > 1) p = 1\n\n  // End angle for the progress status\n  const angle = p * 2 * Math.PI\n  // Interpolate values between 0 and the end angle\n  const interpolate = d3.interpolate(0, angle)\n  // Progress arc starting at 0\n  const arc = d3\n    .arc<BubbleData>()\n    .cornerRadius(5)\n    .innerRadius(bubble.radius - PROGRESS_INDICATOR_SIZE * 2)\n    .outerRadius(bubble.radius - PROGRESS_INDICATOR_SIZE)\n    .startAngle(0)\n    .endAngle(0)\n\n  return (t: number) => {\n    // assign end angle to interpolated value for t\n    arc.endAngle(interpolate(t))\n    // call arc and return intermediate `d` value\n    return arc(bubble) || ''\n  }\n}\n\n/**\n * Enable drag\n * @param simulation D3 Simulation\n */\nexport const enableDrag = (simulation: SimulationType) => {\n  d3.selectAll('.bubble').call(drag(simulation) as any)\n}\n\n/**\n * Clamps a number between a minimum and maximum value.\n *\n * @param value - The number to be clamped.\n * @param min - The minimum allowable value.\n * @param max - The maximum allowable value.\n * @returns The clamped value within the range [min, max].\n */\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)\n\n/**\n * Update location after a resize\n * @param simulation D3 Simulation\n * @param height New height\n * @param width New width\n */\nexport const resize = (simulation: SimulationType, height: number, width: number) => {\n  simulation\n    .alpha(1)\n    .restart()\n    .force(\n      'x',\n      d3\n        .forceX()\n        .x(width / 2)\n        .strength(0.01),\n    )\n    .force(\n      'y',\n      d3\n        .forceY()\n        .y(height / 2)\n        .strength(0.02),\n    )\n    .on('tick', () => {\n      const nodes = simulation.nodes()\n\n      nodes.forEach((node: BubbleData) => {\n        const radius = node.radius ?? MIN_BUBBLE_RADIUS\n\n        node.x = clamp(node.x ?? 0, radius, width - radius)\n        node.y = clamp(node.y ?? 0, radius, height - radius)\n      })\n\n      d3.selectAll('.bubble')\n        .data(nodes)\n        .attr('transform', (d: BubbleData) => `translate(${d.x},${d.y})`)\n    })\n}\n\nexport const getScale = (min: number, max: number) => {\n  return d3.scaleLinear().domain([min, max]).range([MIN_BUBBLE_RADIUS, MAX_BUBBLE_RADIUS])\n}\n\n/**\n * Simulates the chart\n * @param budgets Budget data\n */\nexport const simulate = (budgets: DetailedBudget[]) => {\n  const maxValue = budgets.reduce((acc, budget) => {\n    const max = Math.max(budget.transaction_total, budget.amount)\n    return max > acc ? max : acc\n  }, 0)\n\n  const minValue = budgets.reduce((acc, budget) => {\n    const max = Math.max(budget.transaction_total, budget.amount)\n    return max < acc ? max : acc\n  }, maxValue)\n\n  const scale = getScale(minValue, maxValue)\n\n  const bubbles = budgets.map((budget) => {\n    const radius = scale(Math.max(budget.transaction_total, budget.amount)) || 25\n\n    return {\n      ...budget,\n      radius,\n    } as BubbleData\n  })\n\n  return d3\n    .forceSimulation<BubbleData>(bubbles)\n    .velocityDecay(0.05)\n    .force('collide', d3.forceCollide<BubbleData>((d) => d.radius + 2).strength(0.7))\n}\n\n/**\n * Calculate the target radius based on the number of bubbles and container size\n * @param count Number of bubbles\n * @param height Height of the container\n * @param width Width of the container\n * @returns An object containing the target minimum and maximum radius\n */\nconst getTargetRadius = (bubbleCount: number, containerHeight: number, containerWidth: number) => {\n  const minBubbleArea = Math.PI * MIN_BUBBLE_RADIUS ** 2\n  const totalMinBubbleArea = minBubbleArea * bubbleCount\n\n  const isSmallContainer = containerWidth < 400 || containerHeight < 300\n  const padding = isSmallContainer ? 40 : 20\n  const usableWidth = Math.max(100, containerWidth - padding)\n  const usableHeight = Math.max(100, containerHeight - padding)\n  const usableArea = usableWidth * usableHeight\n\n  let maxRadius = MIN_BUBBLE_RADIUS\n\n  if (totalMinBubbleArea < usableArea) {\n    const radiusFromArea = Math.sqrt(usableArea / (bubbleCount * Math.PI))\n    const radiusFromDimensions = Math.min(usableWidth, usableHeight) / 4\n\n    maxRadius = Math.min(MAX_BUBBLE_RADIUS, radiusFromArea, radiusFromDimensions)\n  }\n\n  if (isSmallContainer && bubbleCount <= 3) {\n    maxRadius = Math.min(maxRadius, 45)\n  }\n\n  const minRadius = Math.max(20, maxRadius * 0.6)\n\n  return { minRadius, maxRadius }\n}\n\n/* @param count Number of bubbles\n * @param height Height of the container\n * @param maxValue Maximum value for the scale\n * @param minValue Minimum value for the scale\n * @param width Width of the container\n * @returns A D3 linear scale for bubble radius\n */\nexport const getSmartScale = (\n  count: number,\n  height: number,\n  maxValue: number,\n  minValue: number,\n  width: number,\n) => {\n  const { maxRadius, minRadius } = getTargetRadius(count, height, width)\n\n  return d3.scaleLinear().domain([minValue, maxValue]).range([minRadius, maxRadius])\n}\n\nexport const computeScaledNodes = (\n  nodes: BubbleData[],\n  budgets: DetailedBudget[],\n  isCompact: boolean = false,\n  height: number,\n  width: number,\n) => {\n  const values = budgets.map((b) => Math.max(b.transaction_total, b.amount))\n  const min = Math.min(...values)\n  const max = Math.max(...values)\n\n  const scale = isCompact\n    ? getSmartScale(nodes.length, height, max, min, width)\n    : getScale(min, max)\n\n  return nodes.map((node) => ({\n    ...node,\n    radius: scale(Math.max(node.transaction_total, node.amount)),\n  }))\n}\n"],"mappings":"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"}
+{"version":3,"file":"BubblesSVG.es.js","names":[],"sources":["../../../src/budgets/utils/BubblesSVG.ts"],"sourcesContent":["import * as d3 from 'd3'\n\nimport type { Simulation } from 'd3'\n\nimport { type BubbleData } from '../components/BubbleChart'\nimport { DetailedBudget } from '../../core'\n\n// D3 SVG Types\nexport type SimulationType = Simulation<BubbleData, undefined>\n\nconst PROGRESS_INDICATOR_SIZE = 5\nconst MAX_BUBBLE_RADIUS = 100\nconst MIN_BUBBLE_RADIUS = 25\n\n/**\n * Enables dragging of bubbles\n * @param simulation D3 Simulation\n */\nexport const drag = (simulation: SimulationType) => {\n  const dragStarted = (event: any) => {\n    if (!event.active) simulation.alphaTarget(0.3).restart()\n    event.subject.fx = event.subject.x\n    event.subject.fy = event.subject.y\n  }\n\n  const dragged = (event: any) => {\n    event.subject.fx = event.x\n    event.subject.fy = event.y\n  }\n\n  const dragEnded = (event: any) => {\n    if (!event.active) simulation.alphaTarget(0)\n    event.subject.fx = null\n    event.subject.fy = null\n  }\n  return d3.drag().on('start', dragStarted).on('drag', dragged).on('end', dragEnded)\n}\n\n/**\n * Provide d values for the arc between the start and end radius based on time\n * @param bubble Bubble data\n */\nexport const arcTween = (bubble: BubbleData) => {\n  // Percentage of the budget\n  let p = bubble.transaction_total / bubble.amount\n  if (p < 0) p = 0\n  else if (p > 1) p = 1\n\n  // End angle for the progress status\n  const angle = p * 2 * Math.PI\n  // Interpolate values between 0 and the end angle\n  const interpolate = d3.interpolate(0, angle)\n  // Progress arc starting at 0\n  const arc = d3\n    .arc<BubbleData>()\n    .cornerRadius(5)\n    .innerRadius(bubble.radius - PROGRESS_INDICATOR_SIZE * 2)\n    .outerRadius(bubble.radius - PROGRESS_INDICATOR_SIZE)\n    .startAngle(0)\n    .endAngle(0)\n\n  return (t: number) => {\n    // assign end angle to interpolated value for t\n    arc.endAngle(interpolate(t))\n    // call arc and return intermediate `d` value\n    return arc(bubble) || ''\n  }\n}\n\n/**\n * Enable drag\n * @param simulation D3 Simulation\n */\nexport const enableDrag = (simulation: SimulationType) => {\n  d3.selectAll('.bubble').call(drag(simulation) as any)\n}\n\n/**\n * Clamps a number between a minimum and maximum value.\n *\n * @param value - The number to be clamped.\n * @param min - The minimum allowable value.\n * @param max - The maximum allowable value.\n * @returns The clamped value within the range [min, max].\n */\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)\n\n/**\n * Update location after a resize\n * @param simulation D3 Simulation\n * @param height New height\n * @param width New width\n */\nexport const resize = (simulation: SimulationType, height: number, width: number) => {\n  simulation\n    .alpha(1)\n    .restart()\n    .force(\n      'x',\n      d3\n        .forceX()\n        .x(width / 2)\n        .strength(0.01),\n    )\n    .force(\n      'y',\n      d3\n        .forceY()\n        .y(height / 2)\n        .strength(0.02),\n    )\n    .on('tick', () => {\n      const nodes = simulation.nodes()\n\n      nodes.forEach((node: BubbleData) => {\n        const radius = node.radius ?? MIN_BUBBLE_RADIUS\n\n        node.x = clamp(node.x ?? 0, radius, width - radius)\n        node.y = clamp(node.y ?? 0, radius, height - radius)\n      })\n\n      d3.selectAll('.bubble')\n        .data(nodes)\n        .attr('transform', (d: BubbleData) => `translate(${d.x},${d.y})`)\n    })\n}\n\nexport const getScale = (min: number, max: number) => {\n  return d3.scaleLinear().domain([min, max]).range([MIN_BUBBLE_RADIUS, MAX_BUBBLE_RADIUS])\n}\n\n/**\n * Simulates the chart\n * @param budgets Budget data\n */\nexport const simulate = (budgets: DetailedBudget[]) => {\n  const maxValue = budgets.reduce((acc, budget) => {\n    const max = Math.max(budget.transaction_total, budget.amount)\n    return max > acc ? max : acc\n  }, 0)\n\n  const minValue = budgets.reduce((acc, budget) => {\n    const max = Math.max(budget.transaction_total, budget.amount)\n    return max < acc ? max : acc\n  }, maxValue)\n\n  const scale = getScale(minValue, maxValue)\n\n  const bubbles = budgets.map((budget) => {\n    const radius = scale(Math.max(budget.transaction_total, budget.amount)) || 25\n\n    return {\n      ...budget,\n      radius,\n    } as BubbleData\n  })\n\n  return d3\n    .forceSimulation<BubbleData>(bubbles)\n    .velocityDecay(0.05)\n    .force('collide', d3.forceCollide<BubbleData>((d) => d.radius + 2).strength(0.7))\n}\n\n/**\n * Calculate the target radius based on the number of bubbles and container size\n * @param count Number of bubbles\n * @param height Height of the container\n * @param width Width of the container\n * @returns An object containing the target minimum and maximum radius\n */\nconst getTargetRadius = (bubbleCount: number, containerHeight: number, containerWidth: number) => {\n  const minBubbleArea = Math.PI * MIN_BUBBLE_RADIUS ** 2\n  const totalMinBubbleArea = minBubbleArea * bubbleCount\n\n  const isSmallContainer = containerWidth < 400 || containerHeight < 300\n  const padding = isSmallContainer ? 40 : 20\n  const usableWidth = Math.max(100, containerWidth - padding)\n  const usableHeight = Math.max(100, containerHeight - padding)\n  const usableArea = usableWidth * usableHeight\n\n  let maxRadius = MIN_BUBBLE_RADIUS\n\n  if (totalMinBubbleArea < usableArea) {\n    const radiusFromArea = Math.sqrt(usableArea / (bubbleCount * Math.PI))\n    const radiusFromDimensions = Math.min(usableWidth, usableHeight) / 4\n\n    maxRadius = Math.min(MAX_BUBBLE_RADIUS, radiusFromArea, radiusFromDimensions)\n  }\n\n  if (isSmallContainer && bubbleCount <= 3) {\n    maxRadius = Math.min(maxRadius, 45)\n  }\n\n  const minRadius = Math.max(20, maxRadius * 0.6)\n\n  return { minRadius, maxRadius }\n}\n\n/* @param count Number of bubbles\n * @param height Height of the container\n * @param maxValue Maximum value for the scale\n * @param minValue Minimum value for the scale\n * @param width Width of the container\n * @returns A D3 linear scale for bubble radius\n */\nexport const getSmartScale = (\n  count: number,\n  height: number,\n  maxValue: number,\n  minValue: number,\n  width: number,\n) => {\n  const { maxRadius, minRadius } = getTargetRadius(count, height, width)\n\n  return d3.scaleLinear().domain([minValue, maxValue]).range([minRadius, maxRadius])\n}\n\nexport const computeScaledNodes = (\n  nodes: BubbleData[],\n  budgets: DetailedBudget[],\n  isCompact: boolean = false,\n  height: number,\n  width: number,\n) => {\n  const values = budgets.map((b) => Math.max(b.transaction_total, b.amount))\n  const min = Math.min(...values)\n  const max = Math.max(...values)\n\n  const scale = isCompact\n    ? getSmartScale(nodes.length, height, max, min, width)\n    : getScale(min, max)\n\n  return nodes.map((node) => ({\n    ...node,\n    radius: scale(Math.max(node.transaction_total, node.amount)),\n  }))\n}\n"],"mappings":"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"}

package/dist/cashflow/CashflowMiniWidget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CashflowMiniWidget.es.js","names":[],"sources":["../../src/cashflow/CashflowMiniWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  EmptyState,\n  Loader,\n  MiniWidgetContainer,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useWidgetLoadTimer,\n} from '../common'\nimport { MiniWidgetProps } from '../core'\n\nimport CashflowWidgetContent from './components/CashflowWidgetContent'\nimport { useCashflowUiStore } from './context/hooks'\n\nconst CashflowMiniWidget: React.FC<MiniWidgetProps> = ({\n  onPrimaryCtaClick,\n  onSecondaryCtaClick,\n  sx = {},\n}) => {\n  const { cashflow: copy } = useGlobalCopyStore()\n  const { isInitialized } = useGlobalUiStore()\n  const { income } = useCashflowUiStore()\n  const { loadRepeatingTransactionData, isDataLoaded } = useRecurringTransactionsStore()\n\n  React.useEffect(() => {\n    if (!isDataLoaded) {\n      loadRepeatingTransactionData().finally()\n    }\n  }, [])\n\n  useWidgetLoadTimer({\n    widgetName: 'CashflowMiniWidget',\n    isLoaded: isDataLoaded,\n  })\n\n  const showEmptyState = isDataLoaded && !income.length\n\n  if (!isInitialized) return <Loader />\n\n  return (\n    <MiniWidgetContainer\n      className=\"mx-exp-cashflow-miniwidget\"\n      onPrimaryCtaClick={onPrimaryCtaClick}\n      primaryCtaLabel={copy.primary_cta}\n      primaryCtaLabelAria={copy.primary_cta_aria}\n      subTitle={showEmptyState || !isDataLoaded ? undefined : copy.sub_title}\n      sx={{ height: '100%', ...sx }}\n      title={copy.title}\n    >\n      {!isDataLoaded && <Loader />}\n      {isDataLoaded &&\n        (showEmptyState ? (\n          <EmptyState\n            header={copy.create}\n            icon=\"local_atm\"\n            onClick={onSecondaryCtaClick}\n            primaryButton={copy.add_income}\n            primaryButtonStartIcon=\"add\"\n            subText={copy.create_description}\n          />\n        ) : (\n          <CashflowWidgetContent />\n        ))}\n    </MiniWidgetContainer>\n  )\n}\n\nexport default observer(CashflowMiniWidget)\n"],"mappings":";;;;;;;;;;AAiBA,IAAM,IAAA,CAAiD,EACrD,mBAAA,GACA,qBAAA,GACA,IAAA,IAAK,CAAC,EAAA,MACF;AACJ,QAAM,EAAE,UAAU,EAAA,IAAS,EAAmB,GACxC,EAAE,eAAA,EAAA,IAAkB,EAAiB,GACrC,EAAE,QAAA,EAAA,IAAW,EAAmB,GAChC,EAAE,8BAAA,GAA8B,cAAA,EAAA,IAAiB,EAA8B;AAErF,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAA6B,EAAE,QAAQ;AAAA,EAE3C,GAAG,CAAC,CAAC,GAEL,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,IAAiB,KAAgB,CAAC,EAAO;AAE/C,SAAK,IAGH,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACS,mBAAA;AAAA,IACnB,iBAAiB,EAAK;AAAA,IACtB,qBAAqB,EAAK;AAAA,IAC1B,UAAU,KAAkB,CAAC,IAAe,SAAY,EAAK;AAAA,IAC7D,IAAI;AAAA,MAAE,QAAQ;AAAA,MAAQ,GAAG;AAAA,IAAG;AAAA,IAC5B,OAAO,EAAK;AAAA,cAPd,CASG,CAAC,KAAgB,gBAAA,EAAC,GAAD,CAAS,CAAA,GAC1B,MACE,IACC,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ,EAAK;AAAA,MACb,MAAK;AAAA,MACL,SAAS;AAAA,MACT,eAAe,EAAK;AAAA,MACpB,wBAAuB;AAAA,MACvB,SAAS,EAAK;AAAA,IACf,CAAA,IAED,gBAAA,EAAC,GAAD,CAAwB,CAAA,EAET;AAAA,OA1BI,gBAAA,EAAC,GAAD,CAAS,CAAA;AA4BtC,GAEA,IAAe,EAAS,CAAkB"}
+{"version":3,"file":"CashflowMiniWidget.es.js","names":[],"sources":["../../src/cashflow/CashflowMiniWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  EmptyState,\n  Loader,\n  MiniWidgetContainer,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useWidgetLoadTimer,\n} from '../common'\nimport { MiniWidgetProps } from '../core'\n\nimport CashflowWidgetContent from './components/CashflowWidgetContent'\nimport { useCashflowUiStore } from './context/hooks'\n\nconst CashflowMiniWidget: React.FC<MiniWidgetProps> = ({\n  onPrimaryCtaClick,\n  onSecondaryCtaClick,\n  sx = {},\n}) => {\n  const { cashflow: copy } = useGlobalCopyStore()\n  const { isInitialized } = useGlobalUiStore()\n  const { income } = useCashflowUiStore()\n  const { loadRepeatingTransactionData, isDataLoaded } = useRecurringTransactionsStore()\n\n  React.useEffect(() => {\n    if (!isDataLoaded) {\n      loadRepeatingTransactionData().finally()\n    }\n  }, [])\n\n  useWidgetLoadTimer({\n    widgetName: 'CashflowMiniWidget',\n    isLoaded: isDataLoaded,\n  })\n\n  const showEmptyState = isDataLoaded && !income.length\n\n  if (!isInitialized) return <Loader />\n\n  return (\n    <MiniWidgetContainer\n      className=\"mx-exp-cashflow-miniwidget\"\n      onPrimaryCtaClick={onPrimaryCtaClick}\n      primaryCtaLabel={copy.primary_cta}\n      primaryCtaLabelAria={copy.primary_cta_aria}\n      subTitle={showEmptyState || !isDataLoaded ? undefined : copy.sub_title}\n      sx={{ height: '100%', ...sx }}\n      title={copy.title}\n    >\n      {!isDataLoaded && <Loader />}\n      {isDataLoaded &&\n        (showEmptyState ? (\n          <EmptyState\n            header={copy.create}\n            icon=\"local_atm\"\n            onClick={onSecondaryCtaClick}\n            primaryButton={copy.add_income}\n            primaryButtonStartIcon=\"add\"\n            subText={copy.create_description}\n          />\n        ) : (\n          <CashflowWidgetContent />\n        ))}\n    </MiniWidgetContainer>\n  )\n}\n\nexport default observer(CashflowMiniWidget)\n"],"mappings":";;;;;;;;;;AAiBA,IAAM,IAAA,CAAiD,EACrD,mBAAA,GACA,qBAAA,GACA,IAAA,IAAK,CAAC,EAAA,MACF;AACJ,QAAM,EAAE,UAAU,EAAA,IAAS,EAAmB,GACxC,EAAE,eAAA,EAAA,IAAkB,EAAiB,GACrC,EAAE,QAAA,EAAA,IAAW,EAAmB,GAChC,EAAE,8BAAA,GAA8B,cAAA,EAAA,IAAiB,EAA8B;AAErF,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAA6B,EAAE,QAAQ;AAAA,EAE3C,GAAG,CAAC,CAAC,GAEL,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,IAAiB,KAAgB,CAAC,EAAO;AAE/C,SAAK,IAGH,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACS,mBAAA;AAAA,IACnB,iBAAiB,EAAK;AAAA,IACtB,qBAAqB,EAAK;AAAA,IAC1B,UAAU,KAAkB,CAAC,IAAe,SAAY,EAAK;AAAA,IAC7D,IAAI;AAAA,MAAE,QAAQ;AAAA,MAAQ,GAAG;AAAA,IAAG;AAAA,IAC5B,OAAO,EAAK;AAAA,IAPd,UAAA,CASG,CAAC,KAAgB,gBAAA,EAAC,GAAD,CAAS,CAAA,GAC1B,MACE,IACC,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ,EAAK;AAAA,MACb,MAAK;AAAA,MACL,SAAS;AAAA,MACT,eAAe,EAAK;AAAA,MACpB,wBAAuB;AAAA,MACvB,SAAS,EAAK;AAAA,IACf,CAAA,IAED,gBAAA,EAAC,GAAD,CAAwB,CAAA,EAET;AAAA,OA1BI,gBAAA,EAAC,GAAD,CAAS,CAAA;AA4BtC,GAEA,IAAe,EAAS,CAAkB"}

package/dist/cashflow/CashflowOnboarding.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CashflowOnboarding.es.js","names":[],"sources":["../../src/cashflow/CashflowOnboarding.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { formatISO } from 'date-fns/formatISO'\nimport { fromUnixTime } from 'date-fns/fromUnixTime'\nimport { getUnixTime } from 'date-fns/getUnixTime'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { startOfToday } from 'date-fns/startOfToday'\nimport { subDays } from 'date-fns/subDays'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport Stack from '@mui/material/Stack'\nimport { keyframes } from '@mui/material/styles'\nimport { useTheme } from '@mui/material/styles'\n\nimport { H2, Icon, P } from '@mxenabled/mxui'\n\nimport StepOne from './components/onboarding/StepOne'\nimport StepTwo from './components/onboarding/StepTwo'\n\nimport {\n  Loader,\n  useCashflowStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useScreenSize,\n  useTransactionStore,\n  useUserStore,\n} from '../common'\nimport { type RepeatingTransaction, type Transaction, RepeatingType, Frequency } from '../core'\nimport SubheaderRow from '../common/components/SubheaderRow'\n\nimport { useCashflowUiStore } from './context/hooks'\n\nimport { TransactionRow } from '../transactions'\nimport { incomeFilter, incomeFilterSearch } from '../transactions/utils/Filters'\n\nimport { AddRecurringTransactionDetails } from '../recurringtransactions'\nimport { SelectTransaction } from '../recurringtransactions'\nimport { getNextPaymentDate } from '../core/utils/RecurringTransactionsUtil'\n\nimport { fromUnixToDayOfWeekAndDate } from '../core/utils/DateUtil'\nimport { CASHFLOW_IMAGES } from './constants/CashflowImages'\n\ninterface UpcomingTransactions extends Transaction {\n  nextDate: Date | null\n  frequency: Frequency\n}\n\nconst spin = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`\n\nconst CashflowOnboarding: React.FC = () => {\n  const { addRepeatingTransaction, repeatingTransactions } = useRecurringTransactionsStore()\n  const { cashflow: customCopy, common: commonCopy } = useGlobalCopyStore()\n  const { user } = useUserStore()\n  const { completeOnboarding } = useCashflowStore()\n  const { isDirty } = useCashflowUiStore()\n  const { isMobile } = useScreenSize()\n  const { isCopyLoaded, setDisplayedDate } = useGlobalUiStore()\n  const { filter, setFilter, transactions } = useTransactionStore()\n  const theme = useTheme()\n\n  const [addIncome, setAddIncome] = useState(true)\n  const [frequency, setFrequency] = React.useState(Frequency.EveryMonth)\n  const [firstDay, setFirstDay] = React.useState(1)\n  const [secondDay, setSecondDay] = React.useState(15)\n  const [isSubmitting, setIsSubmitting] = useState(false)\n  // const [nextDate, setNextDate] = React.useState<Date | null>(null)\n  const [step, setStep] = useState(1)\n  const [selectedTransactions, setSelectedTransactions] = useState<UpcomingTransactions[] | []>([])\n  const [transactionGuid, setTransactionGuid] = useState('')\n\n  const transaction = React.useMemo(\n    () => transactions.find((t) => t.guid === transactionGuid),\n    [transactionGuid, transactions],\n  )\n\n  const canSubmit = !!repeatingTransactions.filter(\n    (r) => r.repeating_transaction_type === RepeatingType.Income,\n  ).length\n\n  const handleGetTransactions = async () => {\n    setStep(2)\n    // set transaction date range and filter by income\n    setDisplayedDate(\n      //  Beginning of the month, 90 days before today\n      startOfMonth(subDays(startOfToday(), 90)),\n      startOfToday(),\n    )\n\n    setFilter({ ...filter, custom: incomeFilter })\n\n    setStep(3)\n  }\n\n  const handleAddIncome = async () => {\n    if (selectedTransactions.length < 1) {\n      return\n    }\n    setIsSubmitting(true)\n\n    // Create Repeating Transactions\n    for (let i = 0; i < selectedTransactions.length; i++) {\n      const upcomingTransaction = selectedTransactions[i]\n\n      const nextDate = getNextPaymentDate(frequency, fromUnixTime(upcomingTransaction.date))\n\n      const repeatingTransaction = {\n        account_guid: upcomingTransaction.account_guid,\n        amount: upcomingTransaction.amount,\n        created_by: 0, //user\n        merchant_guid: upcomingTransaction.merchant_guid,\n        description: upcomingTransaction.feed_description || upcomingTransaction.description,\n        predicted_occurs_on: formatISO(nextDate, { representation: 'date' }),\n        recurrence_day: nextDate.getDay(),\n        recurrence_type: frequency,\n        repeating_transaction_type: RepeatingType.Income,\n        second_recurrence_day: secondDay,\n        transaction_type: upcomingTransaction.transaction_type,\n        user_guid: user.guid,\n      } as RepeatingTransaction\n\n      await addRepeatingTransaction(repeatingTransaction, upcomingTransaction)\n    }\n    await completeOnboarding()\n  }\n\n  const showSelectIncome =\n    (!transaction && addIncome) || (!transaction && selectedTransactions.length < 1)\n\n  if (!isCopyLoaded) {\n    return <Loader />\n  }\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: !isMobile ? 'center' : 'flex-start',\n        backgroundColor: theme.palette.background.paper,\n        backgroundImage: !isMobile ? `url(${CASHFLOW_IMAGES.CASHFLOW_ONBOARDING})` : null,\n        backgroundRepeat: 'no-repeat',\n        backgroundPosition: 'left 100px',\n        backgroundSize: '35%',\n        py: 24,\n      }}\n    >\n      {step === 1 && (\n        <Box\n          sx={{\n            ...(isMobile\n              ? { display: 'flex', flexDirection: 'column', maxWidth: '100%', padding: '0 16px' }\n              : { maxWidth: 590, ml: '40%', mr: 90 }),\n          }}\n        >\n          <StepOne handleNextStep={handleGetTransactions} />\n        </Box>\n      )}\n      {step === 2 && (\n        <Box\n          sx={{\n            ...(isMobile\n              ? { display: 'flex', flexDirection: 'column', maxWidth: '100%', padding: '0 16px' }\n              : { maxWidth: 590, ml: '40%', mr: 90 }),\n          }}\n        >\n          <StepTwo />\n        </Box>\n      )}\n      {step === 3 && (\n        <Box\n          sx={{\n            ...(isMobile\n              ? { display: 'flex', flexDirection: 'column', maxWidth: '100%', padding: '0 16px' }\n              : { maxWidth: 590, ml: '40%', mr: 90 }),\n          }}\n        >\n          <H2 pb={12} variant=\"h1\">\n            {customCopy.add_income_title}\n          </H2>\n          <P mb={24}>{customCopy.add_income_description}</P>\n\n          {selectedTransactions.length > 0 && !transaction && (\n            <>\n              <List>\n                {selectedTransactions.map((transaction, index) => {\n                  return (\n                    <React.Fragment key={transaction.guid}>\n                      <SubheaderRow bgcolor=\"background.paper\">\n                        {fromUnixToDayOfWeekAndDate(\n                          getUnixTime(transaction.nextDate || transaction.date),\n                        )}\n                      </SubheaderRow>\n                      <TransactionRow transaction={transaction} />\n                      {index !== selectedTransactions.length - 1 && <Divider />}\n                    </React.Fragment>\n                  )\n                })}\n              </List>\n              <Stack alignItems=\"center\" direction=\"row\">\n                <Divider sx={{ flexGrow: 1 }} />\n                <Button\n                  onClick={() => setAddIncome(true)}\n                  startIcon={<Icon name=\"add\" size={20} />}\n                >\n                  {customCopy.add_income}\n                </Button>\n              </Stack>\n            </>\n          )}\n\n          {showSelectIncome && (\n            <SelectTransaction\n              bgcolor=\"background.paper\"\n              onSearch={(searchValue) =>\n                setFilter({\n                  ...filter,\n                  custom: (transaction: Transaction) =>\n                    searchValue\n                      ? incomeFilterSearch(transaction, searchValue)\n                      : incomeFilter(transaction),\n                })\n              }\n              onSelected={(guid) => {\n                setTransactionGuid(guid)\n                setAddIncome(false)\n              }}\n            />\n          )}\n\n          {!canSubmit && isDirty && (\n            <P color=\"error\" mt={16}>\n              {customCopy.confirm_error}\n            </P>\n          )}\n\n          {transaction && (\n            <>\n              <AddRecurringTransactionDetails\n                bgcolor=\"background.paper\"\n                firstDay={firstDay}\n                frequency={frequency}\n                onFirstDayChange={setFirstDay}\n                onFrequencyChange={setFrequency}\n                onSecondDayChange={setSecondDay}\n                secondDay={secondDay}\n                transaction={transaction}\n              />\n              <Stack direction=\"row\" gap={16} ml={24} mt={32}>\n                <Button\n                  aria-disabled={!transaction}\n                  onClick={() => {\n                    const updatedTransactions = [...selectedTransactions]\n                    updatedTransactions.push({\n                      ...transaction,\n                      nextDate: getNextPaymentDate(frequency, fromUnixTime(transaction.date)),\n                      frequency,\n                    })\n\n                    setSelectedTransactions(updatedTransactions)\n                    setTransactionGuid('')\n                  }}\n                  variant=\"contained\"\n                >\n                  {commonCopy.confirm_button}\n                </Button>\n                <Button\n                  onClick={() => {\n                    setTransactionGuid('')\n                    setAddIncome(true)\n                    handleGetTransactions().finally()\n                  }}\n                  variant=\"outlined\"\n                >\n                  {commonCopy.cancel_button}\n                </Button>\n              </Stack>\n            </>\n          )}\n\n          {selectedTransactions.length > 0 && !transaction && (\n            <Stack direction=\"row\" gap={16} ml={24} mt={32}>\n              <Button\n                aria-disabled={selectedTransactions.length < 1 || isSubmitting}\n                onClick={handleAddIncome}\n                startIcon={\n                  isSubmitting ? (\n                    <Icon\n                      name=\"progress_activity\"\n                      sx={{\n                        animation: `${spin} 2s linear infinite`,\n                      }}\n                    />\n                  ) : null\n                }\n                variant=\"contained\"\n              >\n                {customCopy.confirm_income_button}\n              </Button>\n              <Button onClick={completeOnboarding} variant=\"outlined\">\n                {customCopy.skip_button}\n              </Button>\n            </Stack>\n          )}\n        </Box>\n      )}\n    </Box>\n  )\n}\n\nexport default observer(CashflowOnboarding)\n"],"mappings":"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"}
+{"version":3,"file":"CashflowOnboarding.es.js","names":[],"sources":["../../src/cashflow/CashflowOnboarding.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { formatISO } from 'date-fns/formatISO'\nimport { fromUnixTime } from 'date-fns/fromUnixTime'\nimport { getUnixTime } from 'date-fns/getUnixTime'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { startOfToday } from 'date-fns/startOfToday'\nimport { subDays } from 'date-fns/subDays'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport Stack from '@mui/material/Stack'\nimport { keyframes } from '@mui/material/styles'\nimport { useTheme } from '@mui/material/styles'\n\nimport { H2, Icon, P } from '@mxenabled/mxui'\n\nimport StepOne from './components/onboarding/StepOne'\nimport StepTwo from './components/onboarding/StepTwo'\n\nimport {\n  Loader,\n  useCashflowStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useScreenSize,\n  useTransactionStore,\n  useUserStore,\n} from '../common'\nimport { type RepeatingTransaction, type Transaction, RepeatingType, Frequency } from '../core'\nimport SubheaderRow from '../common/components/SubheaderRow'\n\nimport { useCashflowUiStore } from './context/hooks'\n\nimport { TransactionRow } from '../transactions'\nimport { incomeFilter, incomeFilterSearch } from '../transactions/utils/Filters'\n\nimport { AddRecurringTransactionDetails } from '../recurringtransactions'\nimport { SelectTransaction } from '../recurringtransactions'\nimport { getNextPaymentDate } from '../core/utils/RecurringTransactionsUtil'\n\nimport { fromUnixToDayOfWeekAndDate } from '../core/utils/DateUtil'\nimport { CASHFLOW_IMAGES } from './constants/CashflowImages'\n\ninterface UpcomingTransactions extends Transaction {\n  nextDate: Date | null\n  frequency: Frequency\n}\n\nconst spin = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`\n\nconst CashflowOnboarding: React.FC = () => {\n  const { addRepeatingTransaction, repeatingTransactions } = useRecurringTransactionsStore()\n  const { cashflow: customCopy, common: commonCopy } = useGlobalCopyStore()\n  const { user } = useUserStore()\n  const { completeOnboarding } = useCashflowStore()\n  const { isDirty } = useCashflowUiStore()\n  const { isMobile } = useScreenSize()\n  const { isCopyLoaded, setDisplayedDate } = useGlobalUiStore()\n  const { filter, setFilter, transactions } = useTransactionStore()\n  const theme = useTheme()\n\n  const [addIncome, setAddIncome] = useState(true)\n  const [frequency, setFrequency] = React.useState(Frequency.EveryMonth)\n  const [firstDay, setFirstDay] = React.useState(1)\n  const [secondDay, setSecondDay] = React.useState(15)\n  const [isSubmitting, setIsSubmitting] = useState(false)\n  // const [nextDate, setNextDate] = React.useState<Date | null>(null)\n  const [step, setStep] = useState(1)\n  const [selectedTransactions, setSelectedTransactions] = useState<UpcomingTransactions[] | []>([])\n  const [transactionGuid, setTransactionGuid] = useState('')\n\n  const transaction = React.useMemo(\n    () => transactions.find((t) => t.guid === transactionGuid),\n    [transactionGuid, transactions],\n  )\n\n  const canSubmit = !!repeatingTransactions.filter(\n    (r) => r.repeating_transaction_type === RepeatingType.Income,\n  ).length\n\n  const handleGetTransactions = async () => {\n    setStep(2)\n    // set transaction date range and filter by income\n    setDisplayedDate(\n      //  Beginning of the month, 90 days before today\n      startOfMonth(subDays(startOfToday(), 90)),\n      startOfToday(),\n    )\n\n    setFilter({ ...filter, custom: incomeFilter })\n\n    setStep(3)\n  }\n\n  const handleAddIncome = async () => {\n    if (selectedTransactions.length < 1) {\n      return\n    }\n    setIsSubmitting(true)\n\n    // Create Repeating Transactions\n    for (let i = 0; i < selectedTransactions.length; i++) {\n      const upcomingTransaction = selectedTransactions[i]\n\n      const nextDate = getNextPaymentDate(frequency, fromUnixTime(upcomingTransaction.date))\n\n      const repeatingTransaction = {\n        account_guid: upcomingTransaction.account_guid,\n        amount: upcomingTransaction.amount,\n        created_by: 0, //user\n        merchant_guid: upcomingTransaction.merchant_guid,\n        description: upcomingTransaction.feed_description || upcomingTransaction.description,\n        predicted_occurs_on: formatISO(nextDate, { representation: 'date' }),\n        recurrence_day: nextDate.getDay(),\n        recurrence_type: frequency,\n        repeating_transaction_type: RepeatingType.Income,\n        second_recurrence_day: secondDay,\n        transaction_type: upcomingTransaction.transaction_type,\n        user_guid: user.guid,\n      } as RepeatingTransaction\n\n      await addRepeatingTransaction(repeatingTransaction, upcomingTransaction)\n    }\n    await completeOnboarding()\n  }\n\n  const showSelectIncome =\n    (!transaction && addIncome) || (!transaction && selectedTransactions.length < 1)\n\n  if (!isCopyLoaded) {\n    return <Loader />\n  }\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: !isMobile ? 'center' : 'flex-start',\n        backgroundColor: theme.palette.background.paper,\n        backgroundImage: !isMobile ? `url(${CASHFLOW_IMAGES.CASHFLOW_ONBOARDING})` : null,\n        backgroundRepeat: 'no-repeat',\n        backgroundPosition: 'left 100px',\n        backgroundSize: '35%',\n        py: 24,\n      }}\n    >\n      {step === 1 && (\n        <Box\n          sx={{\n            ...(isMobile\n              ? { display: 'flex', flexDirection: 'column', maxWidth: '100%', padding: '0 16px' }\n              : { maxWidth: 590, ml: '40%', mr: 90 }),\n          }}\n        >\n          <StepOne handleNextStep={handleGetTransactions} />\n        </Box>\n      )}\n      {step === 2 && (\n        <Box\n          sx={{\n            ...(isMobile\n              ? { display: 'flex', flexDirection: 'column', maxWidth: '100%', padding: '0 16px' }\n              : { maxWidth: 590, ml: '40%', mr: 90 }),\n          }}\n        >\n          <StepTwo />\n        </Box>\n      )}\n      {step === 3 && (\n        <Box\n          sx={{\n            ...(isMobile\n              ? { display: 'flex', flexDirection: 'column', maxWidth: '100%', padding: '0 16px' }\n              : { maxWidth: 590, ml: '40%', mr: 90 }),\n          }}\n        >\n          <H2 pb={12} variant=\"h1\">\n            {customCopy.add_income_title}\n          </H2>\n          <P mb={24}>{customCopy.add_income_description}</P>\n\n          {selectedTransactions.length > 0 && !transaction && (\n            <>\n              <List>\n                {selectedTransactions.map((transaction, index) => {\n                  return (\n                    <React.Fragment key={transaction.guid}>\n                      <SubheaderRow bgcolor=\"background.paper\">\n                        {fromUnixToDayOfWeekAndDate(\n                          getUnixTime(transaction.nextDate || transaction.date),\n                        )}\n                      </SubheaderRow>\n                      <TransactionRow transaction={transaction} />\n                      {index !== selectedTransactions.length - 1 && <Divider />}\n                    </React.Fragment>\n                  )\n                })}\n              </List>\n              <Stack alignItems=\"center\" direction=\"row\">\n                <Divider sx={{ flexGrow: 1 }} />\n                <Button\n                  onClick={() => setAddIncome(true)}\n                  startIcon={<Icon name=\"add\" size={20} />}\n                >\n                  {customCopy.add_income}\n                </Button>\n              </Stack>\n            </>\n          )}\n\n          {showSelectIncome && (\n            <SelectTransaction\n              bgcolor=\"background.paper\"\n              onSearch={(searchValue) =>\n                setFilter({\n                  ...filter,\n                  custom: (transaction: Transaction) =>\n                    searchValue\n                      ? incomeFilterSearch(transaction, searchValue)\n                      : incomeFilter(transaction),\n                })\n              }\n              onSelected={(guid) => {\n                setTransactionGuid(guid)\n                setAddIncome(false)\n              }}\n            />\n          )}\n\n          {!canSubmit && isDirty && (\n            <P color=\"error\" mt={16}>\n              {customCopy.confirm_error}\n            </P>\n          )}\n\n          {transaction && (\n            <>\n              <AddRecurringTransactionDetails\n                bgcolor=\"background.paper\"\n                firstDay={firstDay}\n                frequency={frequency}\n                onFirstDayChange={setFirstDay}\n                onFrequencyChange={setFrequency}\n                onSecondDayChange={setSecondDay}\n                secondDay={secondDay}\n                transaction={transaction}\n              />\n              <Stack direction=\"row\" gap={16} ml={24} mt={32}>\n                <Button\n                  aria-disabled={!transaction}\n                  onClick={() => {\n                    const updatedTransactions = [...selectedTransactions]\n                    updatedTransactions.push({\n                      ...transaction,\n                      nextDate: getNextPaymentDate(frequency, fromUnixTime(transaction.date)),\n                      frequency,\n                    })\n\n                    setSelectedTransactions(updatedTransactions)\n                    setTransactionGuid('')\n                  }}\n                  variant=\"contained\"\n                >\n                  {commonCopy.confirm_button}\n                </Button>\n                <Button\n                  onClick={() => {\n                    setTransactionGuid('')\n                    setAddIncome(true)\n                    handleGetTransactions().finally()\n                  }}\n                  variant=\"outlined\"\n                >\n                  {commonCopy.cancel_button}\n                </Button>\n              </Stack>\n            </>\n          )}\n\n          {selectedTransactions.length > 0 && !transaction && (\n            <Stack direction=\"row\" gap={16} ml={24} mt={32}>\n              <Button\n                aria-disabled={selectedTransactions.length < 1 || isSubmitting}\n                onClick={handleAddIncome}\n                startIcon={\n                  isSubmitting ? (\n                    <Icon\n                      name=\"progress_activity\"\n                      sx={{\n                        animation: `${spin} 2s linear infinite`,\n                      }}\n                    />\n                  ) : null\n                }\n                variant=\"contained\"\n              >\n                {customCopy.confirm_income_button}\n              </Button>\n              <Button onClick={completeOnboarding} variant=\"outlined\">\n                {customCopy.skip_button}\n              </Button>\n            </Stack>\n          )}\n        </Box>\n      )}\n    </Box>\n  )\n}\n\nexport default observer(CashflowOnboarding)\n"],"mappings":"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"}