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

package/dist/common/components/charts/stackedlinechart/CustomPointTooltip.es.js

@@ -0,0 +1,51 @@
+import { DATE_FORMATS_INTL as s, formatDate as c } from "../../../../core/constants/DateFormats.es.js";
+import { CurrencyText as u } from "../../CurrencyText.es.js";
+import { CategoryIconLabel as x } from "./CategoryIconLabel.es.js";
+import "react";
+import { Text as T } from "@mxenabled/mxui";
+import { jsx as t, jsxs as y } from "react/jsx-runtime";
+import { useTheme as g } from "@mui/material/styles";
+import C from "@mui/material/Box";
+import h from "@mui/material/Card";
+import I from "@mui/material/CardContent";
+import { useItemTooltip as v } from "@mui/x-charts/ChartsTooltip";
+var M = ({ categoryGuids: { guid: a, topLevelGuid: m }, series: l, xData: d }) => {
+  const o = v(), f = g();
+  if (!o?.identifier) return null;
+  const { dataIndex: r, seriesId: e } = o.identifier;
+  if (r == null || !e) return null;
+  const i = l.find((p) => p.id === e)?.data?.[r], n = d?.[r];
+  return i === void 0 || !n ? null : /* @__PURE__ */ t(h, {
+    sx: {
+      pt: 4,
+      px: 8
+    },
+    children: /* @__PURE__ */ t(I, { children: /* @__PURE__ */ y(C, {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      children: [
+        /* @__PURE__ */ t(x, {
+          categoryGuid: a,
+          topLevelCategoryGuid: m
+        }),
+        /* @__PURE__ */ t(T, {
+          color: f.palette.text.secondary,
+          variant: "body2",
+          children: c(n, s.MONTH_SHORT_YEAR)
+        }),
+        /* @__PURE__ */ t(u, {
+          amount: String(i),
+          bold: !0,
+          formatString: "0,0",
+          variant: "body1"
+        })
+      ]
+    }) })
+  });
+};
+export {
+  M as CustomPointTooltip
+};
+
+//# sourceMappingURL=CustomPointTooltip.es.js.map

package/dist/common/components/charts/stackedlinechart/CustomPointTooltip.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomPointTooltip.es.js","names":[],"sources":["../../../../../src/common/components/charts/stackedlinechart/CustomPointTooltip.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport { useTheme } from '@mui/material/styles'\n\nimport { useItemTooltip } from '@mui/x-charts/ChartsTooltip'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { CategoryIconLabel } from './CategoryIconLabel'\nimport { CurrencyText } from '../../CurrencyText'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\n\ninterface CustomPointTooltipProps {\n  categoryGuids: { guid: string; topLevelGuid: string }\n  series: Array<{ id: string; data: number[] }>\n  xData: Date[]\n}\n\n// Custom tooltip for hovering on line points\nexport const CustomPointTooltip: React.FC<CustomPointTooltipProps> = ({\n  categoryGuids: { guid, topLevelGuid },\n  series: allSeries,\n  xData,\n}) => {\n  const tooltip = useItemTooltip()\n  const theme = useTheme()\n\n  if (!tooltip?.identifier) return null\n\n  const { dataIndex, seriesId } = tooltip.identifier\n  if (dataIndex == null || !seriesId) return null\n\n  const seriesData = allSeries.find((s) => s.id === seriesId)\n  const dataValue = seriesData?.data?.[dataIndex]\n  const dataDate = xData?.[dataIndex]\n\n  if (dataValue === undefined || !dataDate) return null\n\n  return (\n    <Card sx={{ pt: 4, px: 8 }}>\n      <CardContent>\n        <Box alignItems=\"center\" display=\"flex\" flexDirection=\"column\">\n          <CategoryIconLabel categoryGuid={guid} topLevelCategoryGuid={topLevelGuid} />\n          <Text color={theme.palette.text.secondary} variant=\"body2\">\n            {formatDate(dataDate, DATE_FORMATS_INTL.MONTH_SHORT_YEAR)}\n          </Text>\n          <CurrencyText amount={String(dataValue)} bold={true} formatString=\"0,0\" variant=\"body1\" />\n        </Box>\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,IAAA,CAAyD,EACpE,eAAe,EAAE,MAAA,GAAM,cAAA,EAAA,GACvB,QAAQ,GACR,OAAA,EAAA,MACI;AACJ,QAAM,IAAU,EAAe,GACzB,IAAQ,EAAS;AAEvB,MAAI,CAAC,GAAS,WAAY,QAAO;AAEjC,QAAM,EAAE,WAAA,GAAW,UAAA,EAAA,IAAa,EAAQ;AACxC,MAAI,KAAa,QAAQ,CAAC,EAAU,QAAO;AAG3C,QAAM,IADa,EAAU,KAAA,CAAM,MAAM,EAAE,OAAO,CAChC,GAAY,OAAO,CAAA,GAC/B,IAAW,IAAQ,CAAA;AAEzB,SAAI,MAAc,UAAa,CAAC,IAAiB,OAG/C,gBAAA,EAAC,GAAD;AAAA,IAAM,IAAI;AAAA,MAAE,IAAI;AAAA,MAAG,IAAI;AAAA,IAAE;AAAA,cACvB,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,MAAK,YAAW;AAAA,MAAS,SAAQ;AAAA,MAAO,eAAc;AAAA,gBAAtD;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAmB,cAAc;AAAA,UAAM,sBAAsB;AAAA,QAAe,CAAA;AAAA,QAC5E,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAO,EAAM,QAAQ,KAAK;AAAA,UAAW,SAAQ;AAAA,oBAChD,EAAW,GAAU,EAAkB,gBAAgB;AAAA,QACpD,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAc,QAAQ,OAAO,CAAS;AAAA,UAAG,MAAM;AAAA,UAAM,cAAa;AAAA,UAAM,SAAQ;AAAA,QAAS,CAAA;AAAA,MACtF;AAAA,OACM,CAAA;AAAA,EACT,CAAA;AAEV"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeSelector.es.js","names":[],"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 { endOfDay } from 'date-fns/endOfDay'\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'\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 '../../../core/constants'\nimport { useScreenSize } from '../../hooks'\nimport { useAriaLive } from '../../hooks/useAriaLive'\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   * Fires only when the user actively selects a timeframe button/tab (3M/6M/9M/1Y).\n   * Unlike onRangeChanged, this does NOT fire on mount, so it's safe for click analytics.\n   */\n  onTimeframeClick?: (timeframe: number) => 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  ariaLabel?: string\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  const { announce, ariaLive } = useAriaLive()\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      { ariaLabel: '3 Months', label: '3M', value: 3 },\n      { ariaLabel: '6 Months', label: '6M', value: 6 },\n      { ariaLabel: '9 Months', label: '9M', value: 9 },\n      { ariaLabel: '1 Year', 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    setDateRange(range)\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 [beginDate, endDate] = dateRange as [Date, Date]\n    const isPrev = direction === 'previous'\n\n    let newRange: DateRange<Date>\n\n    // Month-based shortcuts\n    if (\n      shortcut === copy.dateRangePickerCopy.dateRangeThisMonth ||\n      shortcut === copy.dateRangePickerCopy.dateRangeLastMonth\n    ) {\n      newRange = [\n        isPrev ? subMonths(beginDate, 1) : addMonths(beginDate, 1),\n        endOfMonth(isPrev ? subMonths(endDate, 1) : addMonths(endDate, 1)),\n      ]\n    }\n    // Year-based shortcuts\n    else if (\n      shortcut === copy.dateRangePickerCopy.dateRangeYTD ||\n      shortcut === copy.dateRangePickerCopy.dateRangeLastYear\n    ) {\n      const startYear = startOfYear(beginDate)\n      const endYear = endOfYear(beginDate)\n      newRange = [\n        isPrev ? subYears(startYear, 1) : addYears(startYear, 1),\n        isPrev ? subYears(endYear, 1) : addYears(endYear, 1),\n      ]\n    }\n    // Custom date range - shift by the current range duration\n    else {\n      const dayOffset = differenceInCalendarDays(endDate, beginDate)\n      const dateModifier = isPrev ? subDays : addDays\n      newRange = [dateModifier(beginDate, dayOffset), dateModifier(endDate, dayOffset)]\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 handleDataRangePickerChange = (range: DateRange<Date>, shortcut: string) => {\n    range[1] = range[1] ?? range[0]\n\n    const adjustedRange: DateRange<Date> = [range[0], range[1] ? endOfDay(range[1]) : range[1]]\n    const startFormatted = formatDate(adjustedRange[0] as Date, DATE_FORMATS_INTL.MONTH_DAY_YEAR)\n    const endFormatted = formatDate(adjustedRange[1] as Date, DATE_FORMATS_INTL.MONTH_DAY_YEAR)\n\n    setPickerDateRange(adjustedRange)\n    setShortcut(shortcut)\n    announce(`${copy.dateRangeEditTitle}: ${startFormatted} - ${endFormatted}`)\n  }\n\n  const handleTimeframeChanged = (timeframe: number) => {\n    setTimeframe(timeframe)\n    calendarActions.onTimeframeClick?.(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            aria-label={copy.dateRangeEditTitle}\n            color={color}\n            exclusive={true}\n            orientation=\"horizontal\"\n            value={timeframe}\n          >\n            {timeframes.buttons.map((timeframe: Timeframe) => (\n              <ToggleButton\n                aria-label={timeframe.ariaLabel}\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=\"body1\">\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          {ariaLive}\n          <DateRangePicker\n            copy={copy.dateRangePickerCopy}\n            dateRange={pickerDateRange}\n            onRangeChanged={handleDataRangePickerChange}\n            selectedShortcut={shortcut}\n            sx={{ p: 0 }}\n          />\n        </Drawer>\n      )}\n\n      {isPickerOpen && !isMobile && (\n        <Dialog\n          copy={{ title: copy.dateRangeEditTitle }}\n          isOpen={true}\n          maxWidth=\"sm\"\n          onClose={() => setIsPickerOpen(false)}\n          onPrimaryAction={() => handleRangeChanged()}\n          primaryText={copy.dateRangeEditApply}\n          sx={{\n            '& .MuiDialogContent-root': {\n              padding: 0,\n            },\n            '& .MuiDialog-paper': {\n              minWidth: 'max-content',\n            },\n          }}\n        >\n          {ariaLive}\n          <DateRangePicker\n            copy={copy.dateRangePickerCopy}\n            dateRange={pickerDateRange}\n            onRangeChanged={handleDataRangePickerChange}\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"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.es.js","names":[],"sources":["../../../../src/common/components/dialog/Dialog.tsx"],"sourcesContent":["import React from 'react'\n\nimport MuiDialog from '@mui/material/Dialog'\nimport { DialogProps as MuiDialogProps } from '@mui/material/Dialog'\nimport DialogContent from '@mui/material/DialogContent'\n\nimport { DialogFooter, DialogHeader } from '@mxenabled/mxui'\nimport { useScreenSize } from '../../hooks'\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  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 title = copy?.title ?? ''\n  const closeAria = copy?.close_aria ?? 'Close'\n\n  const { isSmallMobile } = useScreenSize()\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        aria-label={title}\n        aria-labelledby={undefined}\n        maxWidth=\"xs\"\n        onClose={onClose}\n        open={isOpen}\n        slotProps={{\n          paper: { 'aria-label': title },\n        }}\n        sx={{\n          '& .MuiDialog-paperScrollPaper': {\n            backgroundColor: 'background.default',\n          },\n          ...(isSmallMobile && { '& .MuiDialog-paper': { minWidth: '100%' } }),\n          height: '100%',\n        }}\n        {...rest}\n      >\n        <DialogHeader copy={{ title, close_aria: closeAria }} onClose={onClose} truncate={true} />\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"],"mappings":";;;;;;AA4BA,IAAM,IAAA,CAA0D,EAC9D,WAAA,GACA,MAAA,GACA,sBAAA,IAAuB,IACvB,QAAA,IAAS,IACT,SAAA,GACA,iBAAA,GACA,cAAA,IAAe,WACf,aAAA,IAAc,WACd,mBAAA,GACA,gBAAA,IAAiB,WACjB,eAAA,IAAgB,UAChB,UAAA,GACA,GAAG,EAAA,MACC;AACJ,QAAM,IAAQ,GAAM,SAAS,IACvB,IAAY,GAAM,cAAc,SAEhC,EAAE,eAAA,EAAA,IAAkB,EAAc,GAElC,IAAA,MAA4B;AAChC,IAAA,IAAkB,GAClB,EAAQ;AAAA,EACV,GAEM,IAAA,MAA8B;AAClC,IAAI,KACF,EAAkB,GAEpB,EAAQ;AAAA,EACV;AAEA,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,iBAAiB,CAAA;AAAA,cAC/B,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,UAAS;AAAA,MACA,SAAA;AAAA,MACT,MAAM;AAAA,MACN,WAAW,EACT,OAAO,EAAE,cAAc,EAAM,EAC/B;AAAA,MACA,IAAI;AAAA,QACF,iCAAiC,EAC/B,iBAAiB,qBACnB;AAAA,QACA,GAAI,KAAiB,EAAE,sBAAsB,EAAE,UAAU,OAAO,EAAE;AAAA,QAClE,QAAQ;AAAA,MACV;AAAA,MACA,GAAI;AAAA,gBAhBN;AAAA,QAkBE,gBAAA,EAAC,GAAD;AAAA,UAAc,MAAM;AAAA,YAAE,OAAA;AAAA,YAAO,YAAY;AAAA,UAAU;AAAA,UAAY,SAAA;AAAA,UAAS,UAAU;AAAA,QAAO,CAAA;AAAA,QAEzF,gBAAA,EAAC,GAAD;AAAA,UAAe,IAAI,EAAE,YAAY,IAAI;AAAA,UAAI,UAAA;AAAA,QAAwB,CAAA;AAAA,QAEjE,gBAAA,EAAC,GAAD;AAAA,UACE,mBAAmB;AAAA,UACnB,iBAAiB;AAAA,UACjB,mBAAmB;AAAA,UACL,cAAA;AAAA,UACD,aAAA;AAAA,UACG,gBAAA;AAAA,UACD,eAAA;AAAA,QAChB,CAAA;AAAA,MACQ;AAAA;EACR,CAAA;AAET"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSegmentDonut.es.js","names":[],"sources":["../../../../src/common/components/donuts/MultiSegmentDonut.tsx"],"sourcesContent":["import React from 'react'\nimport { css } from '@mxenabled/cssinjs'\n\nimport { DEFAULT_DONUT_SIZE, DEFAULT_STROKE_WIDTH } from '../../constants'\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 styles = getStyles(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=\"#E4E8EE\"\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 = (size: number) =>\n  css({\n    height: size,\n    marginTop: `-8px`,\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"],"mappings":";;;;AAkBA,IAAM,IAAA,CAAuD,EAC3D,QAAA,IAAS,IACT,UAAA,GACA,MAAA,IAAA,IACA,aAAA,IAAA,GACA,UAAA,EAAA,MACI;AACJ,QAAM,IAAS,EAAU,CAAI,GAEvB,KAAU,IAAO,KAAe,GAChC,IAAW,IAAO;AAExB,MAAI,IAAS,OAAO,IAAS,IAAI,IAE7B,IAAS;AAEb,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,8BAA8B,CAAA;AAAA,cAA9C,CACE,gBAAA,EAAC,OAAD;AAAA,MAAK,QAAQ;AAAA,MAAM,OAAO;AAAA,gBAA1B,CACE,gBAAA,EAAC,UAAD;AAAA,QACE,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAK;AAAA,QACL,GAAG;AAAA,QACH,QAAO;AAAA,QACM,aAAA;AAAA,MACd,CAAA,GACA,EAAS,IAAA,CAAK,GAAS,OACtB,KAAU,MAAM,KAAU,IAAS,IAAI,IACvC,KAAU,EAAQ,WAAW,IAAS,MAAM,MAAM,KAGhD,gBAAA,EAAC,UAAD;AAAA,QACE,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAK;AAAA,QAEL,GAAG;AAAA,QACH,QAAQ,EAAQ;AAAA,QAChB,iBAAiB,IAAI,KAAK,KAAK;AAAA,QAC/B,kBAAkB,IAAI,KAAK,KAAK,KAAU,IAAI;AAAA,QACjC,aAAA;AAAA,QACb,WAAW,UAAU,CAAA,KAAW,CAAA,KAAa,CAAA;AAAA,MAC9C,GAPM,CAON,EAEJ,CACE;AAAA,QACL,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAU;AAAA,MAAuC,UAAA;AAAA,IAAc,CAAA,CACjE;AAAA;AAET,GAEM,IAAA,CAAa,MACjB,EAAI;AAAA,EACF,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,UAAU;AAAA,EACV,OAAO;AAAA,EACP,0CAA0C;AAAA,IACxC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,WAAW;AAAA,IACX,KAAK;AAAA,IACL,WAAW;AAAA,EACb;AACF,CAAC"}

package/dist/common/components/donuts/SingleSegmentDonut.es.js

@@ -0,0 +1,50 @@
+import "../../constants/Donut.es.js";
+import "react";
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { useTheme as p } from "@mui/material/styles";
+import l from "@mui/material/Box";
+var _ = ({ color: c = "", percent: s = 0, size: t = 48, strokeWidth: o = 4, children: i, backgroundStrokeColor: m }) => {
+  const f = p(), n = (t - o) / 2, h = -90, g = s > 100 ? 100 : s, x = 2 * Math.PI * n * (1 - g / 100), e = t / 2;
+  return /* @__PURE__ */ a(l, {
+    className: "mx-cmn-single-segment-donut",
+    height: t,
+    mt: -8,
+    position: "relative",
+    width: t,
+    children: [/* @__PURE__ */ a("svg", {
+      height: t,
+      width: t,
+      children: [/* @__PURE__ */ r("circle", {
+        cx: e,
+        cy: e,
+        fill: "none",
+        r: n,
+        stroke: m || f.palette.grey[300],
+        strokeWidth: o
+      }), /* @__PURE__ */ r("circle", {
+        cx: e,
+        cy: e,
+        fill: "none",
+        r: n,
+        stroke: c,
+        strokeDasharray: 2 * Math.PI * n,
+        strokeDashoffset: x,
+        strokeWidth: o,
+        transform: `rotate(${h}, ${e}, ${e})`
+      })]
+    }), /* @__PURE__ */ r(l, {
+      className: "mx-cmn-single-segment-donut-children",
+      left: "50%",
+      position: "absolute",
+      sx: { transform: "translate(-50%, -50%)" },
+      textAlign: "center",
+      top: "50%",
+      children: i
+    })]
+  });
+};
+export {
+  _ as default
+};
+
+//# sourceMappingURL=SingleSegmentDonut.es.js.map

package/dist/common/components/donuts/SingleSegmentDonut.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSegmentDonut.es.js","names":[],"sources":["../../../../src/common/components/donuts/SingleSegmentDonut.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport { useTheme } from '@mui/material/styles'\n\nimport { DEFAULT_DONUT_SIZE, DEFAULT_STROKE_WIDTH } from '../../constants'\n\nexport interface SingleSegmentDonutProps {\n  children: React.ReactNode\n  color: string\n  percent: number\n  size?: number\n  strokeWidth?: number\n  backgroundStrokeColor?: string\n}\n\nconst SingleSegmentDonut: React.FC<SingleSegmentDonutProps> = ({\n  color = '',\n  percent = 0,\n  size = DEFAULT_DONUT_SIZE,\n  strokeWidth = DEFAULT_STROKE_WIDTH,\n  children,\n  backgroundStrokeColor,\n}) => {\n  const theme = useTheme()\n\n  const radius = (size - strokeWidth) / 2\n  const offset = -90\n  const limitedPercent = percent > 100 ? 100 : percent\n  const length = 2 * Math.PI * radius * (1 - limitedPercent / 100)\n  const halfSize = size / 2\n\n  return (\n    <Box\n      className=\"mx-cmn-single-segment-donut\"\n      height={size}\n      mt={-8}\n      position=\"relative\"\n      width={size}\n    >\n      <svg height={size} width={size}>\n        <circle\n          cx={halfSize}\n          cy={halfSize}\n          fill=\"none\"\n          r={radius}\n          stroke={backgroundStrokeColor ? backgroundStrokeColor : theme.palette.grey[300]}\n          strokeWidth={strokeWidth}\n        />\n\n        <circle\n          cx={halfSize}\n          cy={halfSize}\n          fill=\"none\"\n          r={radius}\n          stroke={color}\n          strokeDasharray={2 * Math.PI * radius}\n          strokeDashoffset={length}\n          strokeWidth={strokeWidth}\n          transform={`rotate(${offset}, ${halfSize}, ${halfSize})`}\n        />\n      </svg>\n      <Box\n        className=\"mx-cmn-single-segment-donut-children\"\n        left=\"50%\"\n        position=\"absolute\"\n        sx={{ transform: 'translate(-50%, -50%)' }}\n        textAlign=\"center\"\n        top=\"50%\"\n      >\n        {children}\n      </Box>\n    </Box>\n  )\n}\n\nexport default SingleSegmentDonut\n"],"mappings":";;;;;AAgBA,IAAM,IAAA,CAAyD,EAC7D,OAAA,IAAQ,IACR,SAAA,IAAU,GACV,MAAA,IAAA,IACA,aAAA,IAAA,GACA,UAAA,GACA,uBAAA,EAAA,MACI;AACJ,QAAM,IAAQ,EAAS,GAEjB,KAAU,IAAO,KAAe,GAChC,IAAS,KACT,IAAiB,IAAU,MAAM,MAAM,GACvC,IAAS,IAAI,KAAK,KAAK,KAAU,IAAI,IAAiB,MACtD,IAAW,IAAO;AAExB,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,UAAS;AAAA,IACT,OAAO;AAAA,cALT,CAOE,gBAAA,EAAC,OAAD;AAAA,MAAK,QAAQ;AAAA,MAAM,OAAO;AAAA,gBAA1B,CACE,gBAAA,EAAC,UAAD;AAAA,QACE,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAK;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,KAAgD,EAAM,QAAQ,KAAK,GAAA;AAAA,QAC9D,aAAA;AAAA,MACd,CAAA,GAED,gBAAA,EAAC,UAAD;AAAA,QACE,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAK;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,QACR,iBAAiB,IAAI,KAAK,KAAK;AAAA,QAC/B,kBAAkB;AAAA,QACL,aAAA;AAAA,QACb,WAAW,UAAU,CAAA,KAAW,CAAA,KAAa,CAAA;AAAA,MAC9C,CAAA,CACE;AAAA,QACL,gBAAA,EAAC,GAAD;AAAA,MACE,WAAU;AAAA,MACV,MAAK;AAAA,MACL,UAAS;AAAA,MACT,IAAI,EAAE,WAAW,wBAAwB;AAAA,MACzC,WAAU;AAAA,MACV,KAAI;AAAA,MAEH,UAAA;AAAA,IACE,CAAA,CACF;AAAA;AAET"}

package/dist/common/components/drawer/Drawer.es.js

@@ -0,0 +1,57 @@
+import x from "./Footer.es.js";
+import S from "./Header.es.js";
+import "react";
+import y from "@mui/material/Stack";
+import { Drawer as D } from "@mxenabled/mxui";
+import { jsx as r, jsxs as j } from "react/jsx-runtime";
+import C from "@mui/material/Box";
+var T = ({ ariaLabelClose: t = "Close", children: d, footerStyles: p = {}, hasSecondaryAction: i = !0, id: s, isOpen: u, isPrimaryDisabled: l, onClose: o, onPrimaryAction: e, onSecondaryAction: h, primaryButtonProps: m, primaryColor: c = "primary", primaryText: f, secondaryColor: n = "secondary", secondaryText: w, shouldShowHeaderBorders: b = !0, shouldShowHeaderShadow: g = !1, title: a, ...k }) => /* @__PURE__ */ r(D, {
+  id: s,
+  isOpen: u,
+  onClose: o,
+  slotProps: { paper: { "aria-labelledby": `${a?.replace(/\s+/g, "-").toLowerCase()}-header-title` } },
+  sx: {
+    "& .MuiDrawer-paper": {
+      backgroundColor: "background.default",
+      borderRadius: 0
+    },
+    height: "100%",
+    "& .MuiToolbar-root": { backgroundColor: "background.paper" }
+  },
+  ...k,
+  children: /* @__PURE__ */ j(y, {
+    height: "100%",
+    justifyContent: "space-between",
+    children: [
+      /* @__PURE__ */ r(S, {
+        ariaLabelClose: t,
+        onClose: o,
+        shouldShowBorders: b,
+        shouldShowShadow: g,
+        title: a
+      }),
+      /* @__PURE__ */ r(C, {
+        height: "100%",
+        overflow: "auto",
+        children: d
+      }),
+      e && /* @__PURE__ */ r(x, {
+        footerStyles: p,
+        hasSecondaryAction: i,
+        isPrimaryDisabled: l,
+        onPrimaryAction: e,
+        onSecondaryAction: h ?? o,
+        primaryButtonProps: m,
+        primaryColor: c,
+        primaryText: f,
+        secondaryColor: n,
+        secondaryText: w
+      })
+    ]
+  })
+});
+export {
+  T as default
+};
+
+//# sourceMappingURL=Drawer.es.js.map

package/dist/common/components/drawer/Drawer.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.es.js","names":[],"sources":["../../../../src/common/components/drawer/Drawer.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Drawer as KMuiDrawer } from '@mxenabled/mxui'\n\nimport Footer from './Footer'\nimport Header from './Header'\n\nexport type CopyObject = {\n  close_drawer_aria: string\n}\n\ninterface DrawerProps {\n  ariaLabelClose?: string\n  className?: string\n  footerStyles?: SxProps\n  hasSecondaryAction?: boolean\n  id?: string\n  isOpen: boolean\n  isPrimaryDisabled?: boolean\n  onClose: () => void\n  onPrimaryAction?: () => void\n  onSecondaryAction?: () => void\n  primaryButtonProps?: React.ComponentProps<typeof Button>\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  shouldShowHeaderBorders?: boolean\n  shouldShowHeaderShadow?: boolean\n  sx?: SxProps\n  title: string\n}\n\nconst Drawer: React.FC<React.PropsWithChildren<DrawerProps>> = ({\n  ariaLabelClose = 'Close',\n  children,\n  footerStyles = {},\n  hasSecondaryAction = true,\n  id,\n  isOpen,\n  isPrimaryDisabled,\n  onClose,\n  onPrimaryAction,\n  onSecondaryAction,\n  primaryButtonProps,\n  primaryColor = 'primary',\n  primaryText,\n  secondaryColor = 'secondary',\n  secondaryText,\n  shouldShowHeaderBorders = true,\n  shouldShowHeaderShadow = false,\n  title,\n  ...rest\n}) => {\n  return (\n    <KMuiDrawer\n      id={id}\n      isOpen={isOpen}\n      onClose={onClose}\n      slotProps={{\n        paper: {\n          'aria-labelledby': `${title?.replace(/\\s+/g, '-').toLowerCase()}-header-title`,\n        },\n      }}\n      sx={{\n        '& .MuiDrawer-paper': {\n          backgroundColor: 'background.default',\n          borderRadius: 0,\n        },\n        height: '100%',\n        '& .MuiToolbar-root': {\n          backgroundColor: 'background.paper',\n        },\n      }}\n      {...rest}\n    >\n      <Stack height=\"100%\" justifyContent=\"space-between\">\n        <Header\n          ariaLabelClose={ariaLabelClose}\n          onClose={onClose}\n          shouldShowBorders={shouldShowHeaderBorders}\n          shouldShowShadow={shouldShowHeaderShadow}\n          title={title}\n        />\n\n        <Box height=\"100%\" overflow=\"auto\">\n          {children}\n        </Box>\n\n        {onPrimaryAction && (\n          <Footer\n            footerStyles={footerStyles}\n            hasSecondaryAction={hasSecondaryAction}\n            isPrimaryDisabled={isPrimaryDisabled}\n            onPrimaryAction={onPrimaryAction}\n            onSecondaryAction={onSecondaryAction ?? onClose}\n            primaryButtonProps={primaryButtonProps}\n            primaryColor={primaryColor}\n            primaryText={primaryText}\n            secondaryColor={secondaryColor}\n            secondaryText={secondaryText}\n          />\n        )}\n      </Stack>\n    </KMuiDrawer>\n  )\n}\n\nexport default Drawer\n"],"mappings":";;;;;;;AAsCA,IAAM,IAAA,CAA0D,EAC9D,gBAAA,IAAiB,SACjB,UAAA,GACA,cAAA,IAAe,CAAC,GAChB,oBAAA,IAAqB,IACrB,IAAA,GACA,QAAA,GACA,mBAAA,GACA,SAAA,GACA,iBAAA,GACA,mBAAA,GACA,oBAAA,GACA,cAAA,IAAe,WACf,aAAA,GACA,gBAAA,IAAiB,aACjB,eAAA,GACA,yBAAA,IAA0B,IAC1B,wBAAA,IAAyB,IACzB,OAAA,GACA,GAAG,EAAA,MAGD,gBAAA,EAAC,GAAD;AAAA,EACM,IAAA;AAAA,EACI,QAAA;AAAA,EACC,SAAA;AAAA,EACT,WAAW,EACT,OAAO,EACL,mBAAmB,GAAG,GAAO,QAAQ,QAAQ,GAAG,EAAE,YAAY,CAAA,gBAChE,EACF;AAAA,EACA,IAAI;AAAA,IACF,sBAAsB;AAAA,MACpB,iBAAiB;AAAA,MACjB,cAAc;AAAA,IAChB;AAAA,IACA,QAAQ;AAAA,IACR,sBAAsB,EACpB,iBAAiB,mBACnB;AAAA,EACF;AAAA,EACA,GAAI;AAAA,YAEJ,gBAAA,EAAC,GAAD;AAAA,IAAO,QAAO;AAAA,IAAO,gBAAe;AAAA,cAApC;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QACkB,gBAAA;AAAA,QACP,SAAA;AAAA,QACT,mBAAmB;AAAA,QACnB,kBAAkB;AAAA,QACX,OAAA;AAAA,MACR,CAAA;AAAA,MAED,gBAAA,EAAC,GAAD;AAAA,QAAK,QAAO;AAAA,QAAO,UAAS;AAAA,QACzB,UAAA;AAAA,MACE,CAAA;AAAA,MAEJ,KACC,gBAAA,EAAC,GAAD;AAAA,QACgB,cAAA;AAAA,QACM,oBAAA;AAAA,QACD,mBAAA;AAAA,QACF,iBAAA;AAAA,QACjB,mBAAmB,KAAqB;AAAA,QACpB,oBAAA;AAAA,QACN,cAAA;AAAA,QACD,aAAA;AAAA,QACG,gBAAA;AAAA,QACD,eAAA;AAAA,MAChB,CAAA;AAAA,IAEE;AAAA;AACG,CAAA"}