@mx-cartographer/experiences 6.25.3-alpha.al2 → 6.25.3-alpha.mega2

package/dist/common/components/daterangeselector/DateRangeSelector.js

@@ -0,0 +1,259 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import s from "react";
+import { addMonths as I } from "date-fns/addMonths";
+import { addDays as z } from "date-fns/addDays";
+import { addYears as w } from "date-fns/addYears";
+import { differenceInCalendarDays as X } from "date-fns/differenceInCalendarDays";
+import { endOfMonth as x } from "date-fns/endOfMonth";
+import { endOfToday as H } from "date-fns/endOfToday";
+import { endOfYear as L } from "date-fns/endOfYear";
+import { startOfMonth as Z } from "date-fns/startOfMonth";
+import { startOfToday as $ } from "date-fns/startOfToday";
+import { startOfYear as F } from "date-fns/startOfYear";
+import { subMonths as y } from "date-fns/subMonths";
+import { subDays as G } from "date-fns/subDays";
+import { subYears as j } from "date-fns/subYears";
+import W from "@mui/material/Box";
+import P from "@mui/material/Button";
+import ee from "@mui/material/ButtonGroup";
+import te from "@mui/material/Stack";
+import ae from "@mui/material/Tab";
+import oe from "@mui/material/Tabs";
+import re from "@mui/material/ToggleButton";
+import ne from "@mui/material/ToggleButtonGroup";
+import ie from "@mui/material/styles/useTheme";
+import { Icon as h, Text as O, DateRangePicker as q } from "@mxenabled/mxui";
+import { formatDate as f, DATE_FORMATS_INTL as g } from "../../constants/DateFormats.js";
+import "../../constants/Account.js";
+import "../../constants/Category.js";
+import "../../context/GlobalDataProvider.js";
+import "../../context/WidgetContainerProvider.js";
+import { useScreenSize as se } from "../../hooks/useScreenSize.js";
+import le from "../dialog/Dialog.js";
+import me from "../drawer/Drawer.js";
+const je = ({
+  calendarActions: r,
+  color: M = "primary",
+  copy: a,
+  range: T = [Z($()), x(H())],
+  shouldShrinkToIcon: J = !0,
+  variant: n = "outlined"
+}) => {
+  const Y = ie(), { isMobile: c } = se(), [l, _] = s.useState(T), [m, S] = s.useState(a.dateRangePickerCopy.dateRangeThisMonth), [d, k] = s.useState(l), [v, b] = s.useState(!1), [K, Q] = s.useState(!0), [R, U] = s.useState(6), E = {
+    buttons: [
+      { label: "3M", value: 3 },
+      { label: "6M", value: 6 },
+      { label: "9M", value: 9 },
+      { label: "1Y", value: 12 }
+    ],
+    tabs: [
+      { label: "3 Months", value: 3 },
+      { label: "6 Months", value: 6 },
+      { label: "9 Months", value: 9 },
+      { label: "1 Year", value: 12 }
+    ]
+  };
+  s.useEffect(() => {
+    k(T);
+  }, [T]), s.useEffect(() => {
+    (n === "timeframebuttons" || n === "timeframetabs") && r.onRangeChanged(V());
+  }, [R]);
+  const V = () => {
+    const e = x(H());
+    return [x(y(e, R)), e];
+  }, N = (e) => {
+    const o = [...l], i = l[0], u = l[1], D = e === "previous";
+    if (m === a.dateRangePickerCopy.dateRangeThisMonth)
+      o[0] = D ? y(i, 1) : I(i, 1), o[1] = x(D ? y(u, 1) : I(u, 1));
+    else if (m === a.dateRangePickerCopy.dateRangeYTD || m === a.dateRangePickerCopy.dateRangeLastYear)
+      o[0] = D ? j(F(i), 1) : w(F(i), 1), o[1] = D ? j(L(i), 1) : w(L(i), 1);
+    else {
+      const C = X(u, i);
+      o[0] = e === "previous" ? G(i, C) : z(i, C), o[1] = e === "previous" ? G(u, C) : z(u, C);
+    }
+    _(o), r.onRangeChanged(o);
+  }, B = () => {
+    _(d), Q(
+      m === a.dateRangePickerCopy.dateRangeThisMonth || m === a.dateRangePickerCopy.dateRangeLastMonth
+    ), r.onRangeChanged(d);
+  }, A = (e) => {
+    U(e);
+  };
+  return /* @__PURE__ */ p(W, { className: "mx-cmn-date-range-selector", m: 4, children: [
+    /* @__PURE__ */ p(
+      W,
+      {
+        sx: {
+          [Y.breakpoints.down("sm")]: {
+            display: J ? "none" : "flex",
+            justifyContent: "center"
+          },
+          [Y.breakpoints.up("sm")]: { display: "inline-flex" }
+        },
+        children: [
+          n === "readonly" && /* @__PURE__ */ p(te, { alignItems: "center", direction: "row", gap: 8, children: [
+            /* @__PURE__ */ t(h, { name: "calendar_month", size: 24 }),
+            /* @__PURE__ */ t(O, { bold: !0, children: f(d[0], g.MONTH_DAY) }),
+            /* @__PURE__ */ t(h, { name: "remove" }),
+            /* @__PURE__ */ t(O, { bold: !0, children: f(d[1], g.MONTH_DAY_YEAR) })
+          ] }),
+          n !== "readonly" && n !== "timeframebuttons" && n !== "timeframetabs" && /* @__PURE__ */ p(
+            ee,
+            {
+              color: M,
+              sx: {
+                "& .MuiButtonGroup-grouped": {
+                  padding: c ? 0 : 12
+                },
+                "& .MuiButtonGroup-middleButton": {
+                  px: 24
+                },
+                height: 44
+              },
+              variant: n,
+              children: [
+                /* @__PURE__ */ t(
+                  P,
+                  {
+                    "aria-disabled": r.shouldDisablePrevious,
+                    "aria-label": a.dateRangePreviousAria,
+                    color: r.shouldDisablePrevious ? "secondary" : "primary",
+                    onClick: () => r.shouldDisablePrevious ? null : N("previous"),
+                    children: /* @__PURE__ */ t(h, { name: "chevron_left", size: 20 })
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  P,
+                  {
+                    "aria-disabled": r.shouldDisablePicker,
+                    color: M,
+                    onClick: () => r.shouldDisablePicker ? null : b(!0),
+                    startIcon: /* @__PURE__ */ t(h, { name: "calendar_month", size: 20 }),
+                    sx: {
+                      p: c ? 0 : 8
+                    },
+                    children: K ? f(l[0], g.MONTH_YEAR) : /* @__PURE__ */ p("span", { children: [
+                      f(l[0], g.MONTH_DAY_YEAR),
+                      " -",
+                      " ",
+                      f(l[1], g.MONTH_DAY_YEAR)
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  P,
+                  {
+                    "aria-disabled": r.shouldDisableNext,
+                    "aria-label": a.dateRangeNextAria,
+                    color: r.shouldDisableNext ? "secondary" : "primary",
+                    onClick: () => r.shouldDisableNext ? null : N("next"),
+                    children: /* @__PURE__ */ t(h, { name: "chevron_right", size: 20 })
+                  }
+                )
+              ]
+            }
+          ),
+          n === "timeframebuttons" && /* @__PURE__ */ t(
+            ne,
+            {
+              color: M,
+              exclusive: !0,
+              orientation: "horizontal",
+              value: R,
+              children: E.buttons.map((e) => /* @__PURE__ */ t(
+                re,
+                {
+                  onClick: () => A(e.value),
+                  sx: { width: 56 },
+                  value: e.value,
+                  children: e.label
+                },
+                e.label
+              ))
+            }
+          ),
+          n === "timeframetabs" && /* @__PURE__ */ t(
+            oe,
+            {
+              indicatorColor: "primary",
+              onChange: (e, o) => A(o),
+              textColor: "primary",
+              value: R,
+              variant: "fullWidth",
+              children: E.tabs.map((e) => /* @__PURE__ */ t(
+                ae,
+                {
+                  label: /* @__PURE__ */ t(O, { bold: !0, variant: "Body", children: e.label }),
+                  sx: { minWidth: 80 },
+                  value: e.value
+                },
+                e.label
+              ))
+            }
+          )
+        ]
+      }
+    ),
+    v && c && /* @__PURE__ */ t(
+      me,
+      {
+        ariaLabelClose: a.dateRangeCloseAria,
+        isOpen: v,
+        onClose: () => b(!1),
+        onPrimaryAction: () => {
+          B(), b(!1);
+        },
+        primaryText: a.dateRangeEditApply,
+        title: a.dateRangeEditTitle,
+        children: /* @__PURE__ */ t(
+          q,
+          {
+            copy: a.dateRangePickerCopy,
+            dateRange: d,
+            onRangeChanged: (e, o) => {
+              k(e), S(o);
+            },
+            selectedShortcut: m,
+            sx: { p: 16 }
+          }
+        )
+      }
+    ),
+    v && !c && /* @__PURE__ */ t(
+      le,
+      {
+        copy: { title: a.dateRangeEditTitle },
+        isOpen: !0,
+        onClose: () => b(!1),
+        onPrimaryAction: () => B(),
+        primaryText: a.dateRangeEditApply,
+        sx: {
+          "& .MuiDialogContent-root": {
+            padding: 0
+          }
+        },
+        children: /* @__PURE__ */ t(
+          q,
+          {
+            copy: a.dateRangePickerCopy,
+            dateRange: d,
+            onRangeChanged: (e, o) => {
+              k(e), S(o);
+            },
+            selectedShortcut: m,
+            sx: {
+              pt: 0,
+              "& .MuiPickersLayout-toolbar": {
+                gridColumn: "1/4"
+              }
+            }
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  je as default
+};
+//# sourceMappingURL=DateRangeSelector.js.map

package/dist/common/components/daterangeselector/DateRangeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeSelector.js","sources":["../../../../src/common/components/daterangeselector/DateRangeSelector.tsx"],"sourcesContent":["import React from 'react'\nimport { addMonths } from 'date-fns/addMonths'\nimport { addDays } from 'date-fns/addDays'\nimport { addYears } from 'date-fns/addYears'\nimport { differenceInCalendarDays } from 'date-fns/differenceInCalendarDays'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { endOfToday } from 'date-fns/endOfToday'\nimport { endOfYear } from 'date-fns/endOfYear'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { startOfToday } from 'date-fns/startOfToday'\nimport { startOfYear } from 'date-fns/startOfYear'\nimport { subMonths } from 'date-fns/subMonths'\nimport { subDays } from 'date-fns/subDays'\nimport { subYears } from 'date-fns/subYears'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport ButtonGroup from '@mui/material/ButtonGroup'\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\nimport ToggleButton from '@mui/material/ToggleButton'\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup'\nimport useTheme from '@mui/material/styles/useTheme'\n\nimport { DateRange } from '@mui/x-date-pickers-pro'\n\nimport { DateRangePicker, DateRangePickerCopy, Icon, Text } from '@mxenabled/mxui'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../constants'\nimport { useScreenSize } from '../../hooks'\nimport Dialog from '../dialog/Dialog'\nimport Drawer from '../drawer/Drawer'\n\nexport type DateRangeSelectorCopy = {\n  dateRangePickerCopy: DateRangePickerCopy\n  dateRangeEditApply: string\n  dateRangeEditTitle: string\n  dateRangeNextAria: string\n  dateRangePreviousAria: string\n  dateRangeCloseAria: string\n}\n\nexport type CalendarActions = {\n  shouldDisableNext?: boolean\n  shouldDisablePrevious?: boolean\n  shouldDisablePicker?: boolean\n  onRangeChanged: (dateRange: DateRange<Date>) => void\n}\n\nexport interface DateRangeSelectorProps {\n  calendarActions: CalendarActions\n  color?: 'primary' | 'secondary'\n  copy: DateRangeSelectorCopy\n  range?: DateRange<Date>\n  shouldShrinkToIcon?: boolean\n  variant?: 'outlined' | 'text' | 'readonly' | 'timeframebuttons' | 'timeframetabs'\n}\n\nexport type Timeframe = {\n  label: string\n  value: number\n}\n\nconst DateRangeSelector: React.FC<DateRangeSelectorProps> = ({\n  calendarActions,\n  color = 'primary',\n  copy,\n  range = [startOfMonth(startOfToday()), endOfMonth(endOfToday())],\n  shouldShrinkToIcon = true,\n  variant = 'outlined',\n}) => {\n  const theme = useTheme()\n  const { isMobile } = useScreenSize()\n\n  const [dateRange, setDateRange] = React.useState<DateRange<Date>>(range)\n  const [shortcut, setShortcut] = React.useState(copy.dateRangePickerCopy.dateRangeThisMonth)\n  const [pickerDateRange, setPickerDateRange] = React.useState(dateRange)\n  const [isPickerOpen, setIsPickerOpen] = React.useState(false)\n  const [isMonthFormat, setIsMonthFormat] = React.useState(true)\n  const [timeframe, setTimeframe] = React.useState(6)\n\n  // TODO: put labels in mrs content and use as copy\n  const timeframes = {\n    buttons: [\n      { label: '3M', value: 3 },\n      { label: '6M', value: 6 },\n      { label: '9M', value: 9 },\n      { label: '1Y', value: 12 },\n    ],\n    tabs: [\n      { label: '3 Months', value: 3 },\n      { label: '6 Months', value: 6 },\n      { label: '9 Months', value: 9 },\n      { label: '1 Year', value: 12 },\n    ],\n  }\n\n  React.useEffect(() => {\n    setPickerDateRange(range)\n  }, [range])\n\n  // dates for timeframe buttons\n  // using today's date as the end date, looks back 3, 6, 9, or 12 months\n  React.useEffect(() => {\n    if (variant === 'timeframebuttons' || variant === 'timeframetabs') {\n      calendarActions.onRangeChanged(getTimeFrameDates())\n    }\n  }, [timeframe])\n\n  const getTimeFrameDates = () => {\n    const timeframeEndDate = endOfMonth(endOfToday()) as Date\n    const timeframeBeginDate = endOfMonth(subMonths(timeframeEndDate, timeframe))\n    return [timeframeBeginDate, timeframeEndDate] as DateRange<Date>\n  }\n\n  const handlePrevNextClick = (direction: 'previous' | 'next') => {\n    const newRange = [...dateRange] as DateRange<Date>\n    const beginDate = dateRange[0] as Date\n    const endDate = dateRange[1] as Date\n    const isPrev = direction === 'previous'\n\n    if (shortcut === copy.dateRangePickerCopy.dateRangeThisMonth) {\n      newRange[0] = isPrev ? subMonths(beginDate, 1) : addMonths(beginDate, 1)\n      newRange[1] = endOfMonth(isPrev ? subMonths(endDate, 1) : addMonths(endDate, 1))\n    } else if (\n      shortcut === copy.dateRangePickerCopy.dateRangeYTD ||\n      shortcut === copy.dateRangePickerCopy.dateRangeLastYear\n    ) {\n      newRange[0] = isPrev\n        ? subYears(startOfYear(beginDate), 1)\n        : addYears(startOfYear(beginDate), 1)\n      newRange[1] = isPrev ? subYears(endOfYear(beginDate), 1) : addYears(endOfYear(beginDate), 1)\n    } else {\n      const numDays = differenceInCalendarDays(endDate, beginDate)\n      newRange[0] =\n        direction === 'previous' ? subDays(beginDate, numDays) : addDays(beginDate, numDays)\n      newRange[1] = direction === 'previous' ? subDays(endDate, numDays) : addDays(endDate, numDays)\n    }\n\n    setDateRange(newRange)\n    calendarActions.onRangeChanged(newRange)\n  }\n\n  const handleRangeChanged = () => {\n    setDateRange(pickerDateRange)\n    setIsMonthFormat(\n      shortcut === copy.dateRangePickerCopy.dateRangeThisMonth ||\n        shortcut === copy.dateRangePickerCopy.dateRangeLastMonth,\n    )\n    calendarActions.onRangeChanged(pickerDateRange)\n  }\n\n  const handleTimeframeChanged = (timeframe: number) => {\n    setTimeframe(timeframe)\n  }\n\n  return (\n    <Box className=\"mx-cmn-date-range-selector\" m={4}>\n      <Box\n        sx={{\n          [theme.breakpoints.down('sm')]: {\n            display: shouldShrinkToIcon ? 'none' : 'flex',\n            justifyContent: 'center',\n          },\n          [theme.breakpoints.up('sm')]: { display: 'inline-flex' },\n        }}\n      >\n        {variant === 'readonly' && (\n          <Stack alignItems=\"center\" direction=\"row\" gap={8}>\n            <Icon name=\"calendar_month\" size={24} />\n            <Text bold={true}>\n              {formatDate(pickerDateRange[0] as Date, DATE_FORMATS_INTL.MONTH_DAY)}\n            </Text>\n            <Icon name=\"remove\" />\n            <Text bold={true}>\n              {formatDate(pickerDateRange[1] as Date, DATE_FORMATS_INTL.MONTH_DAY_YEAR)}\n            </Text>\n          </Stack>\n        )}\n\n        {variant !== 'readonly' &&\n          variant !== 'timeframebuttons' &&\n          variant !== 'timeframetabs' && (\n            <ButtonGroup\n              color={color}\n              sx={{\n                '& .MuiButtonGroup-grouped': {\n                  padding: isMobile ? 0 : 12,\n                },\n                '& .MuiButtonGroup-middleButton': {\n                  px: 24,\n                },\n                height: 44,\n              }}\n              variant={variant}\n            >\n              <Button\n                aria-disabled={calendarActions.shouldDisablePrevious}\n                aria-label={copy.dateRangePreviousAria}\n                color={calendarActions.shouldDisablePrevious ? 'secondary' : 'primary'}\n                onClick={() =>\n                  calendarActions.shouldDisablePrevious ? null : handlePrevNextClick('previous')\n                }\n              >\n                <Icon name=\"chevron_left\" size={20} />\n              </Button>\n              <Button\n                aria-disabled={calendarActions.shouldDisablePicker}\n                color={color}\n                onClick={() => (calendarActions.shouldDisablePicker ? null : setIsPickerOpen(true))}\n                startIcon={<Icon name=\"calendar_month\" size={20} />}\n                sx={{\n                  p: isMobile ? 0 : 8,\n                }}\n              >\n                {isMonthFormat ? (\n                  formatDate(dateRange[0] as Date, DATE_FORMATS_INTL.MONTH_YEAR)\n                ) : (\n                  <span>\n                    {formatDate(dateRange[0] as Date, DATE_FORMATS_INTL.MONTH_DAY_YEAR)} -{' '}\n                    {formatDate(dateRange[1] as Date, DATE_FORMATS_INTL.MONTH_DAY_YEAR)}\n                  </span>\n                )}\n              </Button>\n              <Button\n                aria-disabled={calendarActions.shouldDisableNext}\n                aria-label={copy.dateRangeNextAria}\n                color={calendarActions.shouldDisableNext ? 'secondary' : 'primary'}\n                onClick={() =>\n                  calendarActions.shouldDisableNext ? null : handlePrevNextClick('next')\n                }\n              >\n                <Icon name=\"chevron_right\" size={20} />\n              </Button>\n            </ButtonGroup>\n          )}\n\n        {variant === 'timeframebuttons' && (\n          <ToggleButtonGroup\n            color={color}\n            exclusive={true}\n            orientation=\"horizontal\"\n            value={timeframe}\n          >\n            {timeframes.buttons.map((timeframe: Timeframe) => (\n              <ToggleButton\n                key={timeframe.label}\n                onClick={() => handleTimeframeChanged(timeframe.value)}\n                sx={{ width: 56 }}\n                value={timeframe.value}\n              >\n                {timeframe.label}\n              </ToggleButton>\n            ))}\n          </ToggleButtonGroup>\n        )}\n\n        {variant === 'timeframetabs' && (\n          <Tabs\n            indicatorColor=\"primary\"\n            onChange={(_, newValue) => handleTimeframeChanged(newValue)}\n            textColor=\"primary\"\n            value={timeframe}\n            variant=\"fullWidth\"\n          >\n            {timeframes.tabs.map((timeframe: Timeframe) => (\n              <Tab\n                key={timeframe.label}\n                label={\n                  <Text bold={true} variant=\"Body\">\n                    {timeframe.label}\n                  </Text>\n                }\n                sx={{ minWidth: 80 }}\n                value={timeframe.value}\n              />\n            ))}\n          </Tabs>\n        )}\n      </Box>\n\n      {isPickerOpen && isMobile && (\n        <Drawer\n          ariaLabelClose={copy.dateRangeCloseAria}\n          isOpen={isPickerOpen}\n          onClose={() => setIsPickerOpen(false)}\n          onPrimaryAction={() => {\n            handleRangeChanged()\n            setIsPickerOpen(false)\n          }}\n          primaryText={copy.dateRangeEditApply}\n          title={copy.dateRangeEditTitle}\n        >\n          <DateRangePicker\n            copy={copy.dateRangePickerCopy}\n            dateRange={pickerDateRange}\n            onRangeChanged={(range, shortcut) => {\n              setPickerDateRange(range)\n              setShortcut(shortcut)\n            }}\n            selectedShortcut={shortcut}\n            sx={{ p: 16 }}\n          />\n        </Drawer>\n      )}\n\n      {isPickerOpen && !isMobile && (\n        <Dialog\n          copy={{ title: copy.dateRangeEditTitle }}\n          isOpen={true}\n          onClose={() => setIsPickerOpen(false)}\n          onPrimaryAction={() => handleRangeChanged()}\n          primaryText={copy.dateRangeEditApply}\n          sx={{\n            '& .MuiDialogContent-root': {\n              padding: 0,\n            },\n          }}\n        >\n          <DateRangePicker\n            copy={copy.dateRangePickerCopy}\n            dateRange={pickerDateRange}\n            onRangeChanged={(range, shortcut) => {\n              setPickerDateRange(range)\n              setShortcut(shortcut)\n            }}\n            selectedShortcut={shortcut}\n            sx={{\n              pt: 0,\n              '& .MuiPickersLayout-toolbar': {\n                gridColumn: '1/4',\n              },\n            }}\n          />\n        </Dialog>\n      )}\n    </Box>\n  )\n}\n\nexport default DateRangeSelector\n"],"names":["DateRangeSelector","calendarActions","color","copy","range","startOfMonth","startOfToday","endOfMonth","endOfToday","shouldShrinkToIcon","variant","theme","useTheme","isMobile","useScreenSize","dateRange","setDateRange","React","shortcut","setShortcut","pickerDateRange","setPickerDateRange","isPickerOpen","setIsPickerOpen","isMonthFormat","setIsMonthFormat","timeframe","setTimeframe","timeframes","getTimeFrameDates","timeframeEndDate","subMonths","handlePrevNextClick","direction","newRange","beginDate","endDate","isPrev","addMonths","subYears","startOfYear","addYears","endOfYear","numDays","differenceInCalendarDays","subDays","addDays","handleRangeChanged","handleTimeframeChanged","jsxs","Box","Stack","jsx","Icon","Text","formatDate","DATE_FORMATS_INTL","ButtonGroup","Button","ToggleButtonGroup","ToggleButton","Tabs","_","newValue","Tab","Drawer","DateRangePicker","Dialog"],"mappings":"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"}

package/dist/common/components/dialog/Dialog.js

@@ -0,0 +1,62 @@
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import D from "@mui/material/Dialog";
+import x from "@mui/material/DialogContent";
+import { DialogHeader as y, DialogFooter as P } from "@mxenabled/mxui";
+const k = ({
+  className: e,
+  copy: a = {
+    title: "",
+    close_aria: "Close"
+  },
+  disablePrimaryButton: l = !1,
+  isOpen: t = !1,
+  onClose: i,
+  onPrimaryAction: n,
+  primaryColor: c = "primary",
+  primaryText: m = "Confirm",
+  onSecondaryAction: o,
+  secondaryColor: s = "primary",
+  secondaryText: d = "Cancel",
+  children: g,
+  ...p
+}) => {
+  const f = () => {
+    n?.(), i();
+  }, h = () => {
+    o && o(), i();
+  };
+  return /* @__PURE__ */ r("div", { className: `mx-cmn-dialog ${e}`, children: /* @__PURE__ */ u(
+    D,
+    {
+      onClose: i,
+      open: t,
+      sx: {
+        "& .MuiDialog-paperScrollPaper": {
+          backgroundColor: "background.default"
+        },
+        height: "100%"
+      },
+      ...p,
+      children: [
+        /* @__PURE__ */ r(y, { copy: { title: a.title, close_aria: a.close_aria }, onClose: i }),
+        /* @__PURE__ */ r(x, { sx: { lineHeight: 1.5 }, children: g }),
+        /* @__PURE__ */ r(
+          P,
+          {
+            isPrimaryDisabled: l,
+            onPrimaryAction: f,
+            onSecondaryAction: h,
+            primaryColor: c,
+            primaryText: m,
+            secondaryColor: s,
+            secondaryText: d
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  k as default
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/common/components/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../../src/common/components/dialog/Dialog.tsx"],"sourcesContent":["import React from 'react'\nimport MuiDialog from '@mui/material/Dialog'\nimport DialogContent from '@mui/material/DialogContent'\nimport { DialogFooter, DialogHeader } from '@mxenabled/mxui'\nimport { DialogProps as MuiDialogProps } from '@mui/material/Dialog'\n\nexport type CopyObject = {\n  close_aria?: string\n  title: string\n}\n\nexport interface DialogProps extends Omit<MuiDialogProps, 'open'> {\n  className?: string\n  copy: CopyObject\n  disablePrimaryButton?: boolean\n  isOpen: boolean\n  onClose: () => void\n  onPrimaryAction?: () => void\n  onSecondaryAction?: () => void\n  primaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'\n  primaryText?: string\n  secondaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'\n  secondaryText?: string\n}\n\nconst Dialog: React.FC<React.PropsWithChildren<DialogProps>> = ({\n  className,\n  copy = {\n    title: '',\n    close_aria: 'Close',\n  },\n  disablePrimaryButton = false,\n  isOpen = false,\n  onClose,\n  onPrimaryAction,\n  primaryColor = 'primary',\n  primaryText = 'Confirm',\n  onSecondaryAction,\n  secondaryColor = 'primary',\n  secondaryText = 'Cancel',\n  children,\n  ...rest\n}) => {\n  const handlePrimaryAction = () => {\n    onPrimaryAction?.()\n    onClose()\n  }\n\n  const handleSecondaryAction = () => {\n    if (onSecondaryAction) {\n      onSecondaryAction()\n    }\n    onClose()\n  }\n\n  return (\n    <div className={`mx-cmn-dialog ${className}`}>\n      <MuiDialog\n        onClose={onClose}\n        open={isOpen}\n        sx={{\n          '& .MuiDialog-paperScrollPaper': {\n            backgroundColor: 'background.default',\n          },\n          height: '100%',\n        }}\n        {...rest}\n      >\n        <DialogHeader copy={{ title: copy.title, close_aria: copy.close_aria }} onClose={onClose} />\n\n        <DialogContent sx={{ lineHeight: 1.5 }}>{children}</DialogContent>\n\n        <DialogFooter\n          isPrimaryDisabled={disablePrimaryButton}\n          onPrimaryAction={handlePrimaryAction}\n          onSecondaryAction={handleSecondaryAction}\n          primaryColor={primaryColor}\n          primaryText={primaryText}\n          secondaryColor={secondaryColor}\n          secondaryText={secondaryText}\n        />\n      </MuiDialog>\n    </div>\n  )\n}\n\nexport default Dialog\n"],"names":["Dialog","className","copy","disablePrimaryButton","isOpen","onClose","onPrimaryAction","primaryColor","primaryText","onSecondaryAction","secondaryColor","secondaryText","children","rest","handlePrimaryAction","handleSecondaryAction","jsx","jsxs","MuiDialog","DialogHeader","DialogContent","DialogFooter"],"mappings":";;;;AAyBA,MAAMA,IAAyD,CAAC;AAAA,EAC9D,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,IACL,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AAAA,EACA,sBAAAC,IAAuB;AAAA,EACvB,QAAAC,IAAS;AAAA,EACT,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,mBAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,eAAAC,IAAgB;AAAA,EAChB,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAsB,MAAM;AACd,IAAAR,OACVD;EAAA,GAGJU,IAAwB,MAAM;AAClC,IAAIN,KACgBA,KAEZJ;EAAA;AAGV,SACG,gBAAAW,EAAA,OAAA,EAAI,WAAW,iBAAiBf,CAAS,IACxC,UAAA,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAb;AAAA,MACA,MAAMD;AAAA,MACN,IAAI;AAAA,QACF,iCAAiC;AAAA,UAC/B,iBAAiB;AAAA,QACnB;AAAA,QACA,QAAQ;AAAA,MACV;AAAA,MACC,GAAGS;AAAA,MAEJ,UAAA;AAAA,QAAC,gBAAAG,EAAAG,GAAA,EAAa,MAAM,EAAE,OAAOjB,EAAK,OAAO,YAAYA,EAAK,WAAW,GAAG,SAAAG,EAAkB,CAAA;AAAA,0BAEzFe,GAAc,EAAA,IAAI,EAAE,YAAY,IAAA,GAAQ,UAAAR,GAAS;AAAA,QAElD,gBAAAI;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,mBAAmBlB;AAAA,YACnB,iBAAiBW;AAAA,YACjB,mBAAmBC;AAAA,YACnB,cAAAR;AAAA,YACA,aAAAC;AAAA,YACA,gBAAAE;AAAA,YACA,eAAAC;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/common/components/donuts/MultiSegmentDonut.js

@@ -0,0 +1,61 @@
+import { jsxs as f, jsx as c } from "react/jsx-runtime";
+import { css as g } from "@mxenabled/cssinjs";
+import { useTokens as p } from "@mxenabled/mxui";
+import { DEFAULT_DONUT_SIZE as x, DEFAULT_STROKE_WIDTH as D } from "../../constants/Donut.js";
+const v = ({
+  hasGap: e = !1,
+  segments: n,
+  size: o = x,
+  strokeWidth: l = D,
+  children: u
+}) => {
+  const m = p(), h = S(m, o), r = (o - l) / 2, t = o / 2;
+  let i = -90 - (e ? 1 : 0), s = 0;
+  return /* @__PURE__ */ f("div", { className: `mx-cmn-multi-segment-donut ${h}`, children: [
+    /* @__PURE__ */ f("svg", { height: o, width: o, children: [
+      /* @__PURE__ */ c(
+        "circle",
+        {
+          cx: t,
+          cy: t,
+          fill: "none",
+          r,
+          stroke: m.Color.Neutral300,
+          strokeWidth: l
+        }
+      ),
+      n.map((a, d) => (i += 360 * s + (e ? 1 : 0), s = (a.percent - (e ? 0.3 : 0)) / 100, /* @__PURE__ */ c(
+        "circle",
+        {
+          cx: t,
+          cy: t,
+          fill: "none",
+          r,
+          stroke: a.color,
+          strokeDasharray: 2 * Math.PI * r,
+          strokeDashoffset: 2 * Math.PI * r * (1 - s),
+          strokeWidth: l,
+          transform: `rotate(${i}, ${t}, ${t})`
+        },
+        d
+      )))
+    ] }),
+    /* @__PURE__ */ c("div", { className: "mx-cmn-multi-segment-donut-children", children: u })
+  ] });
+}, S = (e, n) => g({
+  height: n,
+  marginTop: `-${e.Spacing.XSmall}px`,
+  position: "relative",
+  width: n,
+  "& .mx-cmn-multi-segment-donut-children": {
+    left: "50%",
+    position: "absolute",
+    textAlign: "center",
+    top: "50%",
+    transform: "translate(-50%, -50%)"
+  }
+});
+export {
+  v as default
+};
+//# sourceMappingURL=MultiSegmentDonut.js.map

package/dist/common/components/donuts/MultiSegmentDonut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSegmentDonut.js","sources":["../../../../src/common/components/donuts/MultiSegmentDonut.tsx"],"sourcesContent":["import React from 'react'\nimport { css } from '@mxenabled/cssinjs'\n\nimport { useTokens } from '@mxenabled/mxui'\n\nimport { DEFAULT_DONUT_SIZE, DEFAULT_STROKE_WIDTH } from '../../constants/Donut'\n\nexport interface Segment {\n  percent: number\n  color: string\n}\n\nexport interface MultiSegmentDonutProps {\n  children: React.ReactNode\n  hasGap?: boolean\n  segments: Segment[]\n  size?: number\n  strokeWidth?: number\n}\n\nconst MultiSegmentDonut: React.FC<MultiSegmentDonutProps> = ({\n  hasGap = false,\n  segments,\n  size = DEFAULT_DONUT_SIZE,\n  strokeWidth = DEFAULT_STROKE_WIDTH,\n  children,\n}) => {\n  const tokens = useTokens()\n  const styles = getStyles(tokens, size)\n\n  const radius = (size - strokeWidth) / 2\n  const halfSize = size / 2\n\n  let offset = -90 - (hasGap ? 1 : 0)\n\n  let length = 0\n\n  return (\n    <div className={`mx-cmn-multi-segment-donut ${styles}`}>\n      <svg height={size} width={size}>\n        <circle\n          cx={halfSize}\n          cy={halfSize}\n          fill=\"none\"\n          r={radius}\n          stroke={tokens.Color.Neutral300}\n          strokeWidth={strokeWidth}\n        />\n        {segments.map((segment, index) => {\n          offset += 360 * length + (hasGap ? 1 : 0)\n          length = (segment.percent - (hasGap ? 0.3 : 0)) / 100\n\n          return (\n            <circle\n              cx={halfSize}\n              cy={halfSize}\n              fill=\"none\"\n              key={index}\n              r={radius}\n              stroke={segment.color}\n              strokeDasharray={2 * Math.PI * radius}\n              strokeDashoffset={2 * Math.PI * radius * (1 - length)}\n              strokeWidth={strokeWidth}\n              transform={`rotate(${offset}, ${halfSize}, ${halfSize})`}\n            />\n          )\n        })}\n      </svg>\n      <div className=\"mx-cmn-multi-segment-donut-children\">{children}</div>\n    </div>\n  )\n}\n\nconst getStyles = (tokens: any, size: number) =>\n  css({\n    height: size,\n    marginTop: `-${tokens.Spacing.XSmall}px`,\n    position: 'relative',\n    width: size,\n    '& .mx-cmn-multi-segment-donut-children': {\n      left: '50%',\n      position: 'absolute',\n      textAlign: 'center',\n      top: '50%',\n      transform: 'translate(-50%, -50%)',\n    },\n  })\n\nexport default MultiSegmentDonut\n"],"names":["MultiSegmentDonut","hasGap","segments","size","DEFAULT_DONUT_SIZE","strokeWidth","DEFAULT_STROKE_WIDTH","children","tokens","useTokens","styles","getStyles","radius","halfSize","offset","length","jsxs","jsx","segment","index","css"],"mappings":";;;;AAoBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,MAAAC,IAAOC;AAAA,EACP,aAAAC,IAAcC;AAAA,EACd,UAAAC;AACF,MAAM;AACJ,QAAMC,IAASC,KACTC,IAASC,EAAUH,GAAQL,CAAI,GAE/BS,KAAUT,IAAOE,KAAe,GAChCQ,IAAWV,IAAO;AAEpB,MAAAW,IAAS,OAAOb,IAAS,IAAI,IAE7Bc,IAAS;AAEb,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAW,8BAA8BN,CAAM,IAClD,UAAA;AAAA,IAAA,gBAAAM,EAAC,OAAI,EAAA,QAAQb,GAAM,OAAOA,GACxB,UAAA;AAAA,MAAA,gBAAAc;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIJ;AAAA,UACJ,IAAIA;AAAA,UACJ,MAAK;AAAA,UACLD;AAAA,UACA,QAAQJ,EAAO,MAAM;AAAA,UACrB,aAAAH;AAAA,QAAA;AAAA,MACF;AAAA,MACCH,EAAS,IAAI,CAACgB,GAASC,OACZL,KAAA,MAAMC,KAAUd,IAAS,IAAI,IACvCc,KAAUG,EAAQ,WAAWjB,IAAS,MAAM,MAAM,KAGhD,gBAAAgB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIJ;AAAA,UACJ,IAAIA;AAAA,UACJ,MAAK;AAAA,UAELD;AAAA,UACA,QAAQM,EAAQ;AAAA,UAChB,iBAAiB,IAAI,KAAK,KAAKN;AAAA,UAC/B,kBAAkB,IAAI,KAAK,KAAKA,KAAU,IAAIG;AAAA,UAC9C,aAAAV;AAAA,UACA,WAAW,UAAUS,CAAM,KAAKD,CAAQ,KAAKA,CAAQ;AAAA,QAAA;AAAA,QANhDM;AAAA,MAAA,EASV;AAAA,IAAA,GACH;AAAA,IACC,gBAAAF,EAAA,OAAA,EAAI,WAAU,uCAAuC,UAAAV,EAAS,CAAA;AAAA,EACjE,EAAA,CAAA;AAEJ,GAEMI,IAAY,CAACH,GAAaL,MAC9BiB,EAAI;AAAA,EACF,QAAQjB;AAAA,EACR,WAAW,IAAIK,EAAO,QAAQ,MAAM;AAAA,EACpC,UAAU;AAAA,EACV,OAAOL;AAAA,EACP,0CAA0C;AAAA,IACxC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,WAAW;AAAA,IACX,KAAK;AAAA,IACL,WAAW;AAAA,EACb;AACF,CAAC;"}