@mx-cartographer/experiences 9.2.4-alpha.al2 → 9.3.0-alpha.bb1

package/dist/debts/components/SnowballDrawer/index.es.js

@@ -0,0 +1,457 @@
+import { buildDynamicCopy as i } from "../../../core/utils/Localization/index.es.js";
+import { useGlobalCopyStore as p } from "../../../common/context/hooks/index.es.js";
+import h from "../../../common/components/drawer/Drawer/index.es.js";
+import w from "react";
+import { observer as _ } from "mobx-react-lite";
+import { P as x, Text as r } from "@mxenabled/mxui";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Box as o, Card as m, Stack as a, useTheme as u } from "@mui/material";
+var y = ({ isOpen: c, onClose: s }) => {
+  const n = u(), { debts: l } = p(), [d, b] = w.useState(!1);
+  return /* @__PURE__ */ e(h, {
+    ariaLabelClose: "",
+    isOpen: c,
+    onClose: s,
+    title: l.snowball_drawer_title,
+    children: /* @__PURE__ */ t(a, {
+      bgcolor: n.palette.background.default,
+      height: "100%",
+      children: [/* @__PURE__ */ t(a, {
+        alignItems: "center",
+        px: 24,
+        py: 24,
+        children: [/* @__PURE__ */ t(a, {
+          alignItems: "center",
+          pb: 24,
+          children: [
+            /* @__PURE__ */ e(r, {
+              mb: 12,
+              truncate: !0,
+              variant: "h3",
+              children: l.snowball_drawer_subtitle
+            }),
+            /* @__PURE__ */ e(r, {
+              color: n.palette.secondary.main,
+              variant: "body2",
+              children: l.snowball_drawer_amount_description
+            }),
+            /* @__PURE__ */ e(x, {
+              variant: "h1",
+              children: l.snowball_drawer_savings
+            }),
+            /* @__PURE__ */ e(r, {
+              color: n.palette.secondary.main,
+              variant: "body2",
+              children: l.snowball_drawer_duration_description
+            })
+          ]
+        }), /* @__PURE__ */ t(m, {
+          sx: {
+            display: "grid",
+            py: 16,
+            px: 24
+          },
+          children: [
+            /* @__PURE__ */ e(r, {
+              mb: 4,
+              truncate: !0,
+              variant: "h3",
+              children: l.snowball_drawer_question
+            }),
+            /* @__PURE__ */ e(r, {
+              color: n.palette.secondary.main,
+              mb: 8,
+              truncate: !d,
+              variant: "subtitle2",
+              children: l.snowball_drawer_answer
+            }),
+            /* @__PURE__ */ e(r, {
+              bold: !0,
+              color: n.palette.primary.main,
+              onClick: () => b(!d),
+              sx: { cursor: "pointer" },
+              variant: "body2",
+              children: d ? l.snowball_drawer_less : l.snowball_drawer_more
+            })
+          ]
+        })]
+      }), /* @__PURE__ */ t(a, { children: [
+        /* @__PURE__ */ e(r, {
+          color: n.palette.secondary.main,
+          px: 24,
+          sx: { textAlign: "center" },
+          variant: "body2",
+          children: l.snowball_drawer_disclaimer
+        }),
+        /* @__PURE__ */ t(a, {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          sx: {
+            pt: 12,
+            px: 24,
+            pb: 8
+          },
+          children: [/* @__PURE__ */ e(r, {
+            bold: !0,
+            variant: "caption",
+            children: i(l.snowball_drawer_month_header, 1)
+          }), /* @__PURE__ */ e(r, {
+            bold: !0,
+            variant: "caption",
+            children: l.snowball_drawer_payment_header
+          })]
+        }),
+        /* @__PURE__ */ t(a, {
+          bgcolor: n.palette.background.paper,
+          mb: 24,
+          children: [
+            /* @__PURE__ */ t(a, {
+              alignItems: "center",
+              flexDirection: "row",
+              pl: 24,
+              children: [/* @__PURE__ */ e(o, {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 20,
+                  height: 20,
+                  borderRadius: "50%",
+                  backgroundColor: n.palette.success.main,
+                  marginRight: 12
+                },
+                children: /* @__PURE__ */ e(r, {
+                  color: "white",
+                  fontWeight: 700,
+                  variant: "body2",
+                  children: "✓"
+                })
+              }), /* @__PURE__ */ t(a, {
+                sx: {
+                  borderBottom: `1px solid ${n.palette.neutral.light}`,
+                  flexDirection: "row",
+                  flexGrow: 1,
+                  py: 14,
+                  pr: 24
+                },
+                children: [/* @__PURE__ */ t(a, {
+                  flexGrow: 1,
+                  children: [/* @__PURE__ */ e(r, {
+                    variant: "body1",
+                    children: i(l.snowball_drawer_debt_label, "A")
+                  }), /* @__PURE__ */ t(r, {
+                    color: n.palette.secondary.main,
+                    variant: "caption",
+                    children: [
+                      i(l.snowball_drawer_rollover_explainer_pt1, "$100"),
+                      /* @__PURE__ */ e("strong", { children: i(l.snowball_drawer_debt_label, "B") }),
+                      l.snowball_drawer_rollover_explainer_pt2
+                    ]
+                  })]
+                }), /* @__PURE__ */ t(a, { children: [/* @__PURE__ */ e(r, {
+                  variant: "body1",
+                  children: "$100.00"
+                }), /* @__PURE__ */ e(r, {
+                  bold: !0,
+                  color: n.palette.success.main,
+                  textAlign: "end",
+                  variant: "tiny",
+                  children: l.snowball_drawer_paid_label
+                })] })]
+              })]
+            }),
+            /* @__PURE__ */ t(a, {
+              alignItems: "center",
+              flexDirection: "row",
+              pl: 24,
+              children: [/* @__PURE__ */ e(o, { sx: {
+                width: 20,
+                height: 20,
+                marginRight: 12,
+                borderRadius: "50%",
+                border: `3px solid ${n.palette.neutral.main}`
+              } }), /* @__PURE__ */ t(a, {
+                sx: {
+                  borderBottom: `1px solid ${n.palette.neutral.light}`,
+                  flexDirection: "row",
+                  flexGrow: 1,
+                  py: 14,
+                  pr: 24
+                },
+                children: [/* @__PURE__ */ e(r, {
+                  flexGrow: 1,
+                  variant: "body1",
+                  children: i(l.snowball_drawer_debt_label, "B")
+                }), /* @__PURE__ */ e(r, {
+                  variant: "body1",
+                  children: "$400.00"
+                })]
+              })]
+            }),
+            /* @__PURE__ */ t(a, {
+              alignItems: "center",
+              flexDirection: "row",
+              pl: 24,
+              py: 14,
+              children: [/* @__PURE__ */ e(o, { sx: {
+                width: 20,
+                height: 20,
+                marginRight: 12,
+                borderRadius: "50%",
+                border: `3px solid ${n.palette.neutral.main}`
+              } }), /* @__PURE__ */ t(a, {
+                flexDirection: "row",
+                flexGrow: 1,
+                pr: 24,
+                children: [/* @__PURE__ */ e(r, {
+                  flexGrow: 1,
+                  variant: "body1",
+                  children: i(l.snowball_drawer_debt_label, "C")
+                }), /* @__PURE__ */ e(r, {
+                  variant: "body1",
+                  children: "$1,000.00"
+                })]
+              })]
+            }),
+            /* @__PURE__ */ t(a, {
+              sx: {
+                py: 8,
+                px: 24,
+                flexDirection: "row",
+                justifyContent: "space-between",
+                borderTop: `1px solid ${n.palette.neutral.light}`,
+                borderBottom: `1px solid ${n.palette.neutral.light}`
+              },
+              children: [/* @__PURE__ */ e(r, {
+                bold: !0,
+                variant: "body1",
+                children: l.snowball_drawer_total_label
+              }), /* @__PURE__ */ e(r, {
+                bold: !0,
+                variant: "body1",
+                children: "$1,500.00"
+              })]
+            })
+          ]
+        }),
+        /* @__PURE__ */ t(a, {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          sx: {
+            pt: 12,
+            px: 24,
+            pb: 8
+          },
+          children: [/* @__PURE__ */ e(r, {
+            bold: !0,
+            variant: "caption",
+            children: i(l.snowball_drawer_month_header, 2)
+          }), /* @__PURE__ */ e(r, {
+            bold: !0,
+            variant: "caption",
+            children: l.snowball_drawer_payment_header
+          })]
+        }),
+        /* @__PURE__ */ t(a, {
+          bgcolor: n.palette.background.paper,
+          mb: 24,
+          children: [
+            /* @__PURE__ */ t(a, {
+              alignItems: "center",
+              flexDirection: "row",
+              pl: 24,
+              children: [/* @__PURE__ */ e(o, {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 20,
+                  height: 20,
+                  borderRadius: "50%",
+                  backgroundColor: n.palette.success.main,
+                  marginRight: 12
+                },
+                children: /* @__PURE__ */ e(r, {
+                  color: "white",
+                  fontWeight: 700,
+                  variant: "body2",
+                  children: "✓"
+                })
+              }), /* @__PURE__ */ t(a, {
+                sx: {
+                  borderBottom: `1px solid ${n.palette.neutral.light}`,
+                  flexDirection: "row",
+                  flexGrow: 1,
+                  py: 14,
+                  pr: 24
+                },
+                children: [/* @__PURE__ */ t(a, {
+                  flexGrow: 1,
+                  children: [/* @__PURE__ */ e(r, {
+                    variant: "body1",
+                    children: i(l.snowball_drawer_debt_label, "B")
+                  }), /* @__PURE__ */ t(r, {
+                    color: n.palette.secondary.main,
+                    variant: "caption",
+                    children: [
+                      i(l.snowball_drawer_rollover_explainer_pt1, "$500"),
+                      /* @__PURE__ */ e("strong", { children: i(l.snowball_drawer_debt_label, "C") }),
+                      l.snowball_drawer_rollover_explainer_pt2
+                    ]
+                  })]
+                }), /* @__PURE__ */ t(a, { children: [/* @__PURE__ */ e(r, {
+                  variant: "body1",
+                  children: "$500.00"
+                }), /* @__PURE__ */ e(r, {
+                  bold: !0,
+                  color: n.palette.success.main,
+                  textAlign: "end",
+                  variant: "tiny",
+                  children: l.snowball_drawer_paid_label
+                })] })]
+              })]
+            }),
+            /* @__PURE__ */ t(a, {
+              alignItems: "center",
+              flexDirection: "row",
+              pl: 24,
+              children: [/* @__PURE__ */ e(o, { sx: {
+                width: 20,
+                height: 20,
+                marginRight: 12,
+                borderRadius: "50%",
+                border: `3px solid ${n.palette.neutral.main}`
+              } }), /* @__PURE__ */ t(a, {
+                sx: {
+                  flexDirection: "row",
+                  flexGrow: 1,
+                  py: 14,
+                  pr: 24
+                },
+                children: [/* @__PURE__ */ e(r, {
+                  flexGrow: 1,
+                  variant: "body1",
+                  children: i(l.snowball_drawer_debt_label, "C")
+                }), /* @__PURE__ */ e(r, {
+                  variant: "body1",
+                  children: "$1,000.00"
+                })]
+              })]
+            }),
+            /* @__PURE__ */ t(a, {
+              sx: {
+                py: 8,
+                px: 24,
+                flexDirection: "row",
+                justifyContent: "space-between",
+                borderTop: `1px solid ${n.palette.neutral.light}`,
+                borderBottom: `1px solid ${n.palette.neutral.light}`
+              },
+              children: [/* @__PURE__ */ e(r, {
+                bold: !0,
+                variant: "body1",
+                children: l.snowball_drawer_total_label
+              }), /* @__PURE__ */ e(r, {
+                bold: !0,
+                variant: "body1",
+                children: "$1,500.00"
+              })]
+            })
+          ]
+        }),
+        /* @__PURE__ */ t(a, {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          sx: {
+            pt: 12,
+            px: 24,
+            pb: 8
+          },
+          children: [/* @__PURE__ */ e(r, {
+            bold: !0,
+            variant: "caption",
+            children: i(l.snowball_drawer_month_header, 3)
+          }), /* @__PURE__ */ e(r, {
+            bold: !0,
+            variant: "caption",
+            children: l.snowball_drawer_payment_header
+          })]
+        }),
+        /* @__PURE__ */ t(a, {
+          bgcolor: n.palette.background.paper,
+          mb: 24,
+          children: [/* @__PURE__ */ t(a, {
+            alignItems: "center",
+            flexDirection: "row",
+            pl: 24,
+            children: [/* @__PURE__ */ e(o, {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 20,
+                height: 20,
+                borderRadius: "50%",
+                backgroundColor: n.palette.success.main,
+                marginRight: 12
+              },
+              children: /* @__PURE__ */ e(r, {
+                color: "white",
+                fontWeight: 700,
+                variant: "body2",
+                children: "✓"
+              })
+            }), /* @__PURE__ */ t(a, {
+              sx: {
+                alignItems: "center",
+                flexDirection: "row",
+                flexGrow: 1,
+                py: 14,
+                pr: 24
+              },
+              children: [/* @__PURE__ */ e(a, {
+                flexGrow: 1,
+                children: /* @__PURE__ */ e(r, {
+                  variant: "body1",
+                  children: i(l.snowball_drawer_debt_label, "C")
+                })
+              }), /* @__PURE__ */ t(a, { children: [/* @__PURE__ */ e(r, {
+                variant: "body1",
+                children: "$1,500.00"
+              }), /* @__PURE__ */ e(r, {
+                bold: !0,
+                color: n.palette.success.main,
+                textAlign: "end",
+                variant: "tiny",
+                children: l.snowball_drawer_paid_label
+              })] })]
+            })]
+          }), /* @__PURE__ */ t(a, {
+            sx: {
+              py: 8,
+              px: 24,
+              flexDirection: "row",
+              justifyContent: "space-between",
+              borderTop: `1px solid ${n.palette.neutral.light}`,
+              borderBottom: `1px solid ${n.palette.neutral.light}`
+            },
+            children: [/* @__PURE__ */ e(r, {
+              bold: !0,
+              variant: "body1",
+              children: l.snowball_drawer_total_label
+            }), /* @__PURE__ */ e(r, {
+              bold: !0,
+              variant: "body1",
+              children: "$1,500.00"
+            })]
+          })]
+        })
+      ] })]
+    })
+  });
+}, I = _(y);
+export {
+  I as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/debts/components/SnowballDrawer/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/debts/components/SnowballDrawer.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { Box, Card, Stack, useTheme } from '@mui/material'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport { Drawer, useGlobalCopyStore } from '../../common'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\ninterface SnowballDrawerProps {\n  isOpen: boolean\n  onClose: () => void\n}\n\nconst SnowballDrawer = ({ isOpen, onClose }: SnowballDrawerProps) => {\n  const theme = useTheme()\n  const { debts: copy } = useGlobalCopyStore()\n  const [readMore, setReadMore] = React.useState(false)\n\n  return (\n    <Drawer\n      ariaLabelClose={''}\n      isOpen={isOpen}\n      onClose={onClose}\n      title={copy.snowball_drawer_title}\n    >\n      <Stack bgcolor={theme.palette.background.default} height=\"100%\">\n        {/* Drawer Header */}\n        <Stack alignItems={'center'} px={24} py={24}>\n          <Stack alignItems={'center'} pb={24}>\n            <Text mb={12} truncate={true} variant=\"h3\">\n              {copy.snowball_drawer_subtitle}\n            </Text>\n            <Text color={theme.palette.secondary.main} variant=\"body2\">\n              {copy.snowball_drawer_amount_description}\n            </Text>\n            <P variant=\"h1\">{copy.snowball_drawer_savings}</P>\n            <Text color={theme.palette.secondary.main} variant=\"body2\">\n              {copy.snowball_drawer_duration_description}\n            </Text>\n          </Stack>\n          {/* Drawer Info Card */}\n          <Card sx={{ display: 'grid', py: 16, px: 24 }}>\n            <Text mb={4} truncate={true} variant=\"h3\">\n              {copy.snowball_drawer_question}\n            </Text>\n            <Text\n              color={theme.palette.secondary.main}\n              mb={8}\n              truncate={!readMore}\n              variant=\"subtitle2\"\n            >\n              {copy.snowball_drawer_answer}\n            </Text>\n            <Text\n              bold={true}\n              color={theme.palette.primary.main}\n              onClick={() => setReadMore(!readMore)}\n              sx={{ cursor: 'pointer' }}\n              variant=\"body2\"\n            >\n              {!readMore ? copy.snowball_drawer_more : copy.snowball_drawer_less}\n            </Text>\n          </Card>\n        </Stack>\n        {/* Drawer Payoff Table */}\n        <Stack>\n          {/* Drawer Disclaimer */}\n          <Text\n            color={theme.palette.secondary.main}\n            px={24}\n            sx={{ textAlign: 'center' }}\n            variant=\"body2\"\n          >\n            {copy.snowball_drawer_disclaimer}\n          </Text>\n\n          <Stack flexDirection=\"row\" justifyContent=\"space-between\" sx={{ pt: 12, px: 24, pb: 8 }}>\n            <Text bold={true} variant=\"caption\">\n              {buildDynamicCopy(copy.snowball_drawer_month_header, 1) as string}\n            </Text>\n            <Text bold={true} variant=\"caption\">\n              {copy.snowball_drawer_payment_header}\n            </Text>\n          </Stack>\n          <Stack bgcolor={theme.palette.background.paper} mb={24}>\n            <Stack alignItems=\"center\" flexDirection=\"row\" pl={24}>\n              <Box\n                sx={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  width: 20,\n                  height: 20,\n                  borderRadius: '50%',\n                  backgroundColor: theme.palette.success.main,\n                  marginRight: 12,\n                }}\n              >\n                <Text color=\"white\" fontWeight={700} variant=\"body2\">\n                  ✓\n                </Text>\n              </Box>\n              <Stack\n                sx={{\n                  borderBottom: `1px solid ${theme.palette.neutral.light}`,\n                  flexDirection: 'row',\n                  flexGrow: 1,\n                  py: 14,\n                  pr: 24,\n                }}\n              >\n                <Stack flexGrow={1}>\n                  <Text variant=\"body1\">\n                    {buildDynamicCopy(copy.snowball_drawer_debt_label, 'A') as string}\n                  </Text>\n                  <Text color={theme.palette.secondary.main} variant=\"caption\">\n                    {\n                      buildDynamicCopy(\n                        copy.snowball_drawer_rollover_explainer_pt1,\n                        '$100',\n                      ) as string\n                    }\n                    <strong>\n                      {buildDynamicCopy(copy.snowball_drawer_debt_label, 'B') as string}\n                    </strong>\n                    {copy.snowball_drawer_rollover_explainer_pt2}\n                  </Text>\n                </Stack>\n                <Stack>\n                  <Text variant=\"body1\">$100.00</Text>\n                  <Text\n                    bold={true}\n                    color={theme.palette.success.main}\n                    textAlign=\"end\"\n                    variant=\"tiny\"\n                  >\n                    {copy.snowball_drawer_paid_label}\n                  </Text>\n                </Stack>\n              </Stack>\n            </Stack>\n            <Stack alignItems=\"center\" flexDirection=\"row\" pl={24}>\n              <Box\n                sx={{\n                  width: 20,\n                  height: 20,\n                  marginRight: 12,\n                  borderRadius: '50%',\n                  border: `3px solid ${theme.palette.neutral.main}`,\n                }}\n              />\n              <Stack\n                sx={{\n                  borderBottom: `1px solid ${theme.palette.neutral.light}`,\n                  flexDirection: 'row',\n                  flexGrow: 1,\n                  py: 14,\n                  pr: 24,\n                }}\n              >\n                <Text flexGrow={1} variant=\"body1\">\n                  {buildDynamicCopy(copy.snowball_drawer_debt_label, 'B') as string}\n                </Text>\n                <Text variant=\"body1\">$400.00</Text>\n              </Stack>\n            </Stack>\n            <Stack alignItems=\"center\" flexDirection=\"row\" pl={24} py={14}>\n              <Box\n                sx={{\n                  width: 20,\n                  height: 20,\n                  marginRight: 12,\n                  borderRadius: '50%',\n                  border: `3px solid ${theme.palette.neutral.main}`,\n                }}\n              />\n              <Stack flexDirection=\"row\" flexGrow={1} pr={24}>\n                <Text flexGrow={1} variant=\"body1\">\n                  {buildDynamicCopy(copy.snowball_drawer_debt_label, 'C') as string}\n                </Text>\n                <Text variant=\"body1\">$1,000.00</Text>\n              </Stack>\n            </Stack>\n            <Stack\n              sx={{\n                py: 8,\n                px: 24,\n                flexDirection: 'row',\n                justifyContent: 'space-between',\n                borderTop: `1px solid ${theme.palette.neutral.light}`,\n                borderBottom: `1px solid ${theme.palette.neutral.light}`,\n              }}\n            >\n              <Text bold={true} variant=\"body1\">\n                {copy.snowball_drawer_total_label}\n              </Text>\n              <Text bold={true} variant=\"body1\">\n                $1,500.00\n              </Text>\n            </Stack>\n          </Stack>\n\n          <Stack flexDirection=\"row\" justifyContent=\"space-between\" sx={{ pt: 12, px: 24, pb: 8 }}>\n            <Text bold={true} variant=\"caption\">\n              {buildDynamicCopy(copy.snowball_drawer_month_header, 2) as string}\n            </Text>\n            <Text bold={true} variant=\"caption\">\n              {copy.snowball_drawer_payment_header}\n            </Text>\n          </Stack>\n          <Stack bgcolor={theme.palette.background.paper} mb={24}>\n            <Stack alignItems=\"center\" flexDirection=\"row\" pl={24}>\n              <Box\n                sx={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  width: 20,\n                  height: 20,\n                  borderRadius: '50%',\n                  backgroundColor: theme.palette.success.main,\n                  marginRight: 12,\n                }}\n              >\n                <Text color=\"white\" fontWeight={700} variant=\"body2\">\n                  ✓\n                </Text>\n              </Box>\n              <Stack\n                sx={{\n                  borderBottom: `1px solid ${theme.palette.neutral.light}`,\n                  flexDirection: 'row',\n                  flexGrow: 1,\n                  py: 14,\n                  pr: 24,\n                }}\n              >\n                <Stack flexGrow={1}>\n                  <Text variant=\"body1\">\n                    {buildDynamicCopy(copy.snowball_drawer_debt_label, 'B') as string}\n                  </Text>\n                  <Text color={theme.palette.secondary.main} variant=\"caption\">\n                    {\n                      buildDynamicCopy(\n                        copy.snowball_drawer_rollover_explainer_pt1,\n                        '$500',\n                      ) as string\n                    }\n                    <strong>\n                      {buildDynamicCopy(copy.snowball_drawer_debt_label, 'C') as string}\n                    </strong>\n                    {copy.snowball_drawer_rollover_explainer_pt2}\n                  </Text>\n                </Stack>\n                <Stack>\n                  <Text variant=\"body1\">$500.00</Text>\n                  <Text\n                    bold={true}\n                    color={theme.palette.success.main}\n                    textAlign=\"end\"\n                    variant=\"tiny\"\n                  >\n                    {copy.snowball_drawer_paid_label}\n                  </Text>\n                </Stack>\n              </Stack>\n            </Stack>\n            <Stack alignItems=\"center\" flexDirection=\"row\" pl={24}>\n              <Box\n                sx={{\n                  width: 20,\n                  height: 20,\n                  marginRight: 12,\n                  borderRadius: '50%',\n                  border: `3px solid ${theme.palette.neutral.main}`,\n                }}\n              />\n              <Stack\n                sx={{\n                  flexDirection: 'row',\n                  flexGrow: 1,\n                  py: 14,\n                  pr: 24,\n                }}\n              >\n                <Text flexGrow={1} variant=\"body1\">\n                  {buildDynamicCopy(copy.snowball_drawer_debt_label, 'C') as string}\n                </Text>\n                <Text variant=\"body1\">$1,000.00</Text>\n              </Stack>\n            </Stack>\n            <Stack\n              sx={{\n                py: 8,\n                px: 24,\n                flexDirection: 'row',\n                justifyContent: 'space-between',\n                borderTop: `1px solid ${theme.palette.neutral.light}`,\n                borderBottom: `1px solid ${theme.palette.neutral.light}`,\n              }}\n            >\n              <Text bold={true} variant=\"body1\">\n                {copy.snowball_drawer_total_label}\n              </Text>\n              <Text bold={true} variant=\"body1\">\n                $1,500.00\n              </Text>\n            </Stack>\n          </Stack>\n\n          <Stack flexDirection=\"row\" justifyContent=\"space-between\" sx={{ pt: 12, px: 24, pb: 8 }}>\n            <Text bold={true} variant=\"caption\">\n              {buildDynamicCopy(copy.snowball_drawer_month_header, 3) as string}\n            </Text>\n            <Text bold={true} variant=\"caption\">\n              {copy.snowball_drawer_payment_header}\n            </Text>\n          </Stack>\n          <Stack bgcolor={theme.palette.background.paper} mb={24}>\n            <Stack alignItems=\"center\" flexDirection=\"row\" pl={24}>\n              <Box\n                sx={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  width: 20,\n                  height: 20,\n                  borderRadius: '50%',\n                  backgroundColor: theme.palette.success.main,\n                  marginRight: 12,\n                }}\n              >\n                <Text color=\"white\" fontWeight={700} variant=\"body2\">\n                  ✓\n                </Text>\n              </Box>\n              <Stack\n                sx={{\n                  alignItems: 'center',\n                  flexDirection: 'row',\n                  flexGrow: 1,\n                  py: 14,\n                  pr: 24,\n                }}\n              >\n                <Stack flexGrow={1}>\n                  <Text variant=\"body1\">\n                    {buildDynamicCopy(copy.snowball_drawer_debt_label, 'C') as string}\n                  </Text>\n                </Stack>\n                <Stack>\n                  <Text variant=\"body1\">$1,500.00</Text>\n                  <Text\n                    bold={true}\n                    color={theme.palette.success.main}\n                    textAlign=\"end\"\n                    variant=\"tiny\"\n                  >\n                    {copy.snowball_drawer_paid_label}\n                  </Text>\n                </Stack>\n              </Stack>\n            </Stack>\n            <Stack\n              sx={{\n                py: 8,\n                px: 24,\n                flexDirection: 'row',\n                justifyContent: 'space-between',\n                borderTop: `1px solid ${theme.palette.neutral.light}`,\n                borderBottom: `1px solid ${theme.palette.neutral.light}`,\n              }}\n            >\n              <Text bold={true} variant=\"body1\">\n                {copy.snowball_drawer_total_label}\n              </Text>\n              <Text bold={true} variant=\"body1\">\n                $1,500.00\n              </Text>\n            </Stack>\n          </Stack>\n        </Stack>\n      </Stack>\n    </Drawer>\n  )\n}\n\nexport default observer(SnowballDrawer)\n"],"mappings":"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"}

package/dist/debts/components/actions/DebtsPriorityAction/index.es.js

@@ -0,0 +1,37 @@
+import { useEvent as b, useGlobalCopyStore as u } from "../../../../common/context/hooks/index.es.js";
+import { ANALYTICS_EVENTS as S } from "../../../../common/constants/Analytics/index.es.js";
+import { DebtPriority as o } from "../../../../core/constants/Debts/index.es.js";
+import { useDebtsUiStore as T } from "../../../hooks/useDebtsUiStore/index.es.js";
+import { DebtsPriorityButton as f } from "../../debtspriority/DebtsPriorityButton/index.es.js";
+import { DebtsPriorityPopover as y } from "../../debtspriority/DebtsPrioriyPopover/index.es.js";
+import s from "react";
+import { observer as A } from "mobx-react-lite";
+import { jsx as n, jsxs as C } from "react/jsx-runtime";
+import { Stack as I } from "@mui/material";
+var x = A(({ disabled: _, isDesktop: p }) => {
+  const { onEvent: l } = b(), { debts: t } = u(), { selectedDebtPriority: r } = T(), [e, i] = s.useState(null), m = (E) => {
+    i(E.currentTarget), l(S.DEBTS_CLICK_PRIORITIZE);
+  }, c = () => {
+    i(null);
+  }, a = !!e;
+  return /* @__PURE__ */ C(I, { children: [/* @__PURE__ */ n(f, {
+    buttonText: s.useMemo(() => ({
+      [o.FASTEST_PAYOFF_FIRST]: t.priority_sort_fastest_payoff,
+      [o.HIGHEST_INTEREST]: t.priority_sort_highest_interest,
+      [o.HIGHEST_BALANCE]: t.priority_sort_highest_balance,
+      [o.LOWEST_BALANCE]: t.priority_sort_lowest_balance
+    })[r] ?? t.priority_sort_lowest_balance, [r]),
+    disabled: _,
+    isDesktop: p,
+    isOpen: a,
+    onClick: m
+  }), /* @__PURE__ */ n(y, {
+    buttonEl: e,
+    onClose: c
+  })] });
+});
+export {
+  x as DebtsPriorityAction
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/debts/components/actions/DebtsPriorityAction/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/debts/components/actions/DebtsPriorityAction.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { Stack } from '@mui/material'\n\nimport { DebtsPriorityButton } from '../debtspriority/DebtsPriorityButton'\nimport { DebtsPriorityPopover } from '../debtspriority/DebtsPrioriyPopover'\n\nimport { useGlobalCopyStore, useEvent, ANALYTICS_EVENTS } from '../../../common'\nimport { useDebtsUiStore } from '../../hooks/useDebtsUiStore'\nimport { DebtPriority } from '../../../core/constants/Debts'\n\ninterface DebtsPriorityActionProps {\n  disabled?: boolean\n  isDesktop?: boolean\n}\n\nexport const DebtsPriorityAction = observer(({ disabled, isDesktop }: DebtsPriorityActionProps) => {\n  const { onEvent } = useEvent()\n  const { debts: copy } = useGlobalCopyStore()\n  const { selectedDebtPriority } = useDebtsUiStore()\n\n  const [buttonEl, setButtonEl] = React.useState<HTMLButtonElement | null>(null)\n\n  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setButtonEl(event.currentTarget)\n    onEvent(ANALYTICS_EVENTS.DEBTS_CLICK_PRIORITIZE)\n  }\n\n  const handleClose = () => {\n    setButtonEl(null)\n  }\n\n  const isOpen = Boolean(buttonEl)\n\n  const buttonText = React.useMemo(() => {\n    const priorityMap = {\n      [DebtPriority.FASTEST_PAYOFF_FIRST]: copy.priority_sort_fastest_payoff,\n      [DebtPriority.HIGHEST_INTEREST]: copy.priority_sort_highest_interest,\n      [DebtPriority.HIGHEST_BALANCE]: copy.priority_sort_highest_balance,\n      [DebtPriority.LOWEST_BALANCE]: copy.priority_sort_lowest_balance,\n    }\n    return priorityMap[selectedDebtPriority] ?? copy.priority_sort_lowest_balance\n  }, [selectedDebtPriority])\n\n  return (\n    <Stack>\n      <DebtsPriorityButton\n        buttonText={buttonText}\n        disabled={disabled}\n        isDesktop={isDesktop}\n        isOpen={isOpen}\n        onClick={handleOpen}\n      />\n      <DebtsPriorityPopover buttonEl={buttonEl} onClose={handleClose} />\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;;;;;AAiBA,IAAa,IAAsB,EAAA,CAAU,EAAE,UAAA,GAAU,WAAA,EAAA,MAA0C;AACjG,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,OAAO,EAAA,IAAS,EAAmB,GACrC,EAAE,sBAAA,EAAA,IAAyB,EAAgB,GAE3C,CAAC,GAAU,CAAA,IAAe,EAAM,SAAmC,IAAI,GAEvE,IAAA,CAAc,MAA+C;AACjE,IAAA,EAAY,EAAM,aAAa,GAC/B,EAAQ,EAAiB,sBAAsB;AAAA,EACjD,GAEM,IAAA,MAAoB;AACxB,IAAA,EAAY,IAAI;AAAA,EAClB,GAEM,IAAS,EAAQ;AAYvB,SACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACc,YAbC,EAAM,QAAA,OAOhB;AAAA,OALJ,EAAa,oBAAA,GAAuB,EAAK;AAAA,OACzC,EAAa,gBAAA,GAAmB,EAAK;AAAA,OACrC,EAAa,eAAA,GAAkB,EAAK;AAAA,OACpC,EAAa,cAAA,GAAiB,EAAK;AAAA,IAE/B,GAAY,CAAA,KAAyB,EAAK,8BAChD,CAAC,CAAoB,CAKN;AAAA,IACF,UAAA;AAAA,IACC,WAAA;AAAA,IACH,QAAA;AAAA,IACR,SAAS;AAAA,EACV,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,IAAgC,UAAA;AAAA,IAAU,SAAS;AAAA,EAAc,CAAA,CAC5D,EAAA,CAAA;AAEX,CAAC"}

package/dist/debts/components/actions/ExtraPaymentAction/index.es.js

@@ -0,0 +1,43 @@
+import { useEvent as u, useGlobalCopyStore as l, useGoalStore as _ } from "../../../../common/context/hooks/index.es.js";
+import { ANALYTICS_EVENTS as c } from "../../../../common/constants/Analytics/index.es.js";
+import { formatCurrency as d } from "../../../../core/utils/NumberFormatting/index.es.js";
+import x from "../../../../common/components/CurrencyInput/index.es.js";
+import { ListItemAction as f } from "../../../../common/components/ListItemAction/index.es.js";
+import S from "react";
+import { observer as h } from "mobx-react-lite";
+import { jsx as m } from "react/jsx-runtime";
+var I = h(() => {
+  const { debts: r } = l(), { monthlyCashFlowProfile: t, updateMonthlyCashFlowProfile: s } = _(), { onEvent: i } = u(), [e, o] = S.useState(t?.extra_payment ?? 0), a = e < 0 || e > 9999999999e-2, p = async () => {
+    t && (await s({
+      ...t,
+      extra_payment: e
+    }), t.extra_payment = e, i(c.DEBTS_SAVE_PAYDOWN_ACTION, { user_guid: t?.user_guid }));
+  }, y = () => {
+    setTimeout(() => {
+      o(t?.extra_payment ?? 0);
+    }, 250);
+  };
+  return /* @__PURE__ */ m(f, {
+    isSaveDisabled: a,
+    label: r.paydown_drawer_extra_payment,
+    onCancel: y,
+    onSave: p,
+    primaryText: r.paydown_drawer_extra_payment,
+    secondaryText: d(t?.extra_payment, "0,0"),
+    zeroStateText: t?.extra_payment ? void 0 : r.add_extra_payment,
+    children: /* @__PURE__ */ m(x, {
+      amount: e,
+      autoFocus: !0,
+      error: a,
+      fullWidth: !0,
+      minAmount: 0,
+      setAmount: (n) => o(isNaN(Number(n)) ? e : Number(n)),
+      sx: { ".MuiTypography-body1": { p: 0 } }
+    })
+  });
+});
+export {
+  I as ExtraPaymentAction
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/debts/components/actions/ExtraPaymentAction/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/debts/components/actions/ExtraPaymentAction.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  CurrencyInput,\n  ListItemAction,\n  useGlobalCopyStore,\n  useEvent,\n  ANALYTICS_EVENTS,\n  useGoalStore,\n} from '../../../common'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\nexport const ExtraPaymentAction = observer(() => {\n  const { debts: copy } = useGlobalCopyStore()\n  const { monthlyCashFlowProfile, updateMonthlyCashFlowProfile } = useGoalStore()\n  const { onEvent } = useEvent()\n\n  const [payment, setPayment] = React.useState<number>(monthlyCashFlowProfile?.extra_payment ?? 0)\n  const isInvalid = payment < 0 || payment > 99999999.99\n\n  const handleSave = async () => {\n    if (monthlyCashFlowProfile) {\n      await updateMonthlyCashFlowProfile({ ...monthlyCashFlowProfile, extra_payment: payment })\n      monthlyCashFlowProfile.extra_payment = payment\n      onEvent(ANALYTICS_EVENTS.DEBTS_SAVE_PAYDOWN_ACTION, {\n        user_guid: monthlyCashFlowProfile?.user_guid,\n      })\n    }\n  }\n\n  const handleCancel = () => {\n    setTimeout(() => {\n      setPayment(monthlyCashFlowProfile?.extra_payment ?? 0)\n    }, 250)\n  }\n\n  return (\n    <ListItemAction\n      isSaveDisabled={isInvalid}\n      label={copy.paydown_drawer_extra_payment}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      primaryText={copy.paydown_drawer_extra_payment}\n      secondaryText={formatCurrency(monthlyCashFlowProfile?.extra_payment, '0,0')}\n      zeroStateText={!monthlyCashFlowProfile?.extra_payment ? copy.add_extra_payment : undefined}\n    >\n      <CurrencyInput\n        amount={payment}\n        autoFocus={true}\n        error={isInvalid}\n        fullWidth={true}\n        minAmount={0}\n        setAmount={(v) => setPayment(!isNaN(Number(v)) ? Number(v) : payment)}\n        sx={{ '.MuiTypography-body1': { p: 0 } }}\n      />\n    </ListItemAction>\n  )\n})\n"],"mappings":";;;;;;;;AAaA,IAAa,IAAqB,EAAA,MAAe;AAC/C,QAAM,EAAE,OAAO,EAAA,IAAS,EAAmB,GACrC,EAAE,wBAAA,GAAwB,8BAAA,EAAA,IAAiC,EAAa,GACxE,EAAE,SAAA,EAAA,IAAY,EAAS,GAEvB,CAAC,GAAS,CAAA,IAAc,EAAM,SAAiB,GAAwB,iBAAiB,CAAC,GACzF,IAAY,IAAU,KAAK,IAAU,eAErC,IAAa,YAAY;AAC7B,IAAI,MACF,MAAM,EAA6B;AAAA,MAAE,GAAG;AAAA,MAAwB,eAAe;AAAA,IAAQ,CAAC,GACxF,EAAuB,gBAAgB,GACvC,EAAQ,EAAiB,2BAA2B,EAClD,WAAW,GAAwB,UACrC,CAAC;AAAA,EAEL,GAEM,IAAA,MAAqB;AACzB,eAAA,MAAiB;AACf,MAAA,EAAW,GAAwB,iBAAiB,CAAC;AAAA,IACvD,GAAG,GAAG;AAAA,EACR;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB;AAAA,IAChB,OAAO,EAAK;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,aAAa,EAAK;AAAA,IAClB,eAAe,EAAe,GAAwB,eAAe,KAAK;AAAA,IAC1E,eAAgB,GAAwB,gBAAyC,SAAzB,EAAK;AAAA,cAE7D,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,OAAO;AAAA,MACP,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAA,CAAY,MAAM,EAAY,MAAM,OAAO,CAAC,CAAC,IAAgB,IAAZ,OAAO,CAAC,CAAW;AAAA,MACpE,IAAI,EAAE,wBAAwB,EAAE,GAAG,EAAE,EAAE;AAAA,IACxC,CAAA;AAAA,EACa,CAAA;AAEpB,CAAC"}

package/dist/debts/components/actions/InterestRateAction/index.es.js

@@ -0,0 +1,41 @@
+import { useAccountStore as u, useEvent as _, useGlobalCopyStore as p } from "../../../../common/context/hooks/index.es.js";
+import { ANALYTICS_EVENTS as v } from "../../../../common/constants/Analytics/index.es.js";
+import { formatPercentage as d } from "../../../../core/utils/NumberFormatting/index.es.js";
+import { ListItemAction as S } from "../../../../common/components/ListItemAction/index.es.js";
+import f from "react";
+import { observer as T } from "mobx-react-lite";
+import { jsx as s } from "react/jsx-runtime";
+import A from "@mui/material/TextField";
+var R = T(({ debt: t }) => {
+  const { debts: r } = p(), { updateAccount: i } = u(), { onEvent: c } = _(), [e, a] = f.useState(t.interest_rate ?? 0), o = e < 0, m = async () => {
+    await i({
+      ...t.account,
+      interest_rate: e
+    }), t.interest_rate = e, c(v.DEBTS_SAVE_RATE_ACTION, { account_guid: t.guid });
+  }, l = () => {
+    setTimeout(() => {
+      a(t.interest_rate ?? 0);
+    }, 250);
+  };
+  return /* @__PURE__ */ s(S, {
+    isSaveDisabled: o,
+    label: `${r.details_interest_rate} (%)`,
+    onCancel: l,
+    onSave: m,
+    primaryText: r.details_interest_rate,
+    secondaryText: d(Number(t.interest_rate) / 100),
+    zeroStateText: t.interest_rate ? void 0 : r.add_interest_rate,
+    children: /* @__PURE__ */ s(A, {
+      error: o,
+      fullWidth: !0,
+      onChange: (n) => a(isNaN(parseFloat(n.target.value)) ? 0 : parseFloat(n.target.value)),
+      type: "number",
+      value: e
+    })
+  });
+});
+export {
+  R as InterestRateAction
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/debts/components/actions/InterestRateAction/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/debts/components/actions/InterestRateAction.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport TextField from '@mui/material/TextField'\n\nimport {\n  ListItemAction,\n  useAccountStore,\n  useGlobalCopyStore,\n  useEvent,\n  ANALYTICS_EVENTS,\n} from '../../../common'\nimport { DebtChartData } from '../../../core/utils/DebtUtils'\nimport { formatPercentage } from '../../../core/utils/NumberFormatting'\n\ninterface InterestRateActionProps {\n  debt: DebtChartData\n}\n\nexport const InterestRateAction = observer(({ debt }: InterestRateActionProps) => {\n  const { debts: copy } = useGlobalCopyStore()\n  const { updateAccount } = useAccountStore()\n  const { onEvent } = useEvent()\n\n  const [rate, setRate] = React.useState<number>(debt.interest_rate ?? 0)\n  const isInvalid = rate < 0\n\n  const handleSave = async () => {\n    await updateAccount({ ...debt.account, interest_rate: rate })\n    debt.interest_rate = rate\n    onEvent(ANALYTICS_EVENTS.DEBTS_SAVE_RATE_ACTION, { account_guid: debt.guid })\n  }\n\n  const handleCancel = () => {\n    setTimeout(() => {\n      setRate(debt.interest_rate ?? 0)\n    }, 250)\n  }\n\n  return (\n    <ListItemAction\n      isSaveDisabled={isInvalid}\n      label={`${copy.details_interest_rate} (%)`}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      primaryText={copy.details_interest_rate}\n      secondaryText={formatPercentage(Number(debt.interest_rate) / 100) as string}\n      zeroStateText={!debt.interest_rate ? copy.add_interest_rate : undefined}\n    >\n      <TextField\n        error={isInvalid}\n        fullWidth={true}\n        onChange={(e) =>\n          setRate(!isNaN(parseFloat(e.target.value)) ? parseFloat(e.target.value) : 0)\n        }\n        type=\"number\"\n        value={rate}\n      />\n    </ListItemAction>\n  )\n})\n"],"mappings":";;;;;;;;AAmBA,IAAa,IAAqB,EAAA,CAAU,EAAE,MAAA,EAAA,MAAoC;AAChF,QAAM,EAAE,OAAO,EAAA,IAAS,EAAmB,GACrC,EAAE,eAAA,EAAA,IAAkB,EAAgB,GACpC,EAAE,SAAA,EAAA,IAAY,EAAS,GAEvB,CAAC,GAAM,CAAA,IAAW,EAAM,SAAiB,EAAK,iBAAiB,CAAC,GAChE,IAAY,IAAO,GAEnB,IAAa,YAAY;AAC7B,UAAM,EAAc;AAAA,MAAE,GAAG,EAAK;AAAA,MAAS,eAAe;AAAA,IAAK,CAAC,GAC5D,EAAK,gBAAgB,GACrB,EAAQ,EAAiB,wBAAwB,EAAE,cAAc,EAAK,KAAK,CAAC;AAAA,EAC9E,GAEM,IAAA,MAAqB;AACzB,eAAA,MAAiB;AACf,MAAA,EAAQ,EAAK,iBAAiB,CAAC;AAAA,IACjC,GAAG,GAAG;AAAA,EACR;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB;AAAA,IAChB,OAAO,GAAG,EAAK,qBAAA;AAAA,IACf,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,aAAa,EAAK;AAAA,IAClB,eAAe,EAAiB,OAAO,EAAK,aAAa,IAAI,GAAG;AAAA,IAChE,eAAgB,EAAK,gBAAyC,SAAzB,EAAK;AAAA,cAE1C,gBAAA,EAAC,GAAD;AAAA,MACE,OAAO;AAAA,MACP,WAAW;AAAA,MACX,UAAA,CAAW,MACT,EAAS,MAAM,WAAW,EAAE,OAAO,KAAK,CAAC,IAAiC,IAA7B,WAAW,EAAE,OAAO,KAAK,CAAK;AAAA,MAE7E,MAAK;AAAA,MACL,OAAO;AAAA,IACR,CAAA;AAAA,EACa,CAAA;AAEpB,CAAC"}