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

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

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

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

@@ -1 +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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"}
+{"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 { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'\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\nexport const DEFAULT_TIMEFRAME = 6\nconst SUPPORTED_TIMEFRAMES = [3, 6, 9, 12]\n\n/**\n * Derive the timeframe button/tab that matches a caller-supplied range.\n *\n * The timeframe variants own a `timeframe` state that drives the mount effect.\n * Seeding it from the incoming range keeps the control in sync with the\n * caller's stored selection, so remounting doesn't reset it to the default\n * and clobber that selection via onRangeChanged. (MEW-3911)\n *\n * Returns DEFAULT_TIMEFRAME when the range doesn't correspond to a button\n * (e.g. NetWorth, which renders the timeframe variants without passing a\n * range and relies on the mount emit to seed its own 6M default).\n */\nexport const getTimeframeFromRange = (range: DateRange<Date>): number => {\n  const [start, end] = range\n  if (!start || !end) return DEFAULT_TIMEFRAME\n\n  const months = differenceInCalendarMonths(end, start)\n  // onRangeChanged consumers add a second to the start date, which drops the\n  // calendar-month difference by one, so accept both N and N-1.\n  return SUPPORTED_TIMEFRAMES.find((tf) => months === tf || months === tf - 1) ?? DEFAULT_TIMEFRAME\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(() => getTimeframeFromRange(range))\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  // Depends on the range timestamps rather than the array identity: callers such\n  // as WidgetDateRangeSelector pass an inline `[start, end]` literal, so keying\n  // on identity re-runs this on every parent render. (MEW-3910, MEW-3911)\n  React.useEffect(() => {\n    setDateRange(range)\n    setPickerDateRange(range)\n    // Keep the highlighted timeframe in sync when the range changes without a\n    // remount, otherwise the control keeps highlighting the previous timeframe\n    // and clicking it is a no-op (React bails out of identical state). (MEW-3911)\n    setTimeframe(getTimeframeFromRange(range))\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [range[0]?.getTime(), range[1]?.getTime()])\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,IAAM,KAAuB;AAAA,EAAC;AAAA,EAAG;AAAA,EAAG;AAAA,EAAG;AAAE,GAc5B,IAAA,CAAyB,MAAmC;AACvE,QAAM,CAAC,GAAO,CAAA,IAAO;AACrB,MAAI,CAAC,KAAS,CAAC,EAAK,QAAA;AAEpB,QAAM,IAAS,GAA2B,GAAK,CAAK;AAGpD,SAAO,GAAqB,KAAA,CAAM,MAAO,MAAW,KAAM,MAAW,IAAK,CAAC,KAAA;AAC7E,GAEM,KAAA,CAAuD,EAC3D,iBAAA,GACA,OAAA,IAAQ,WACR,MAAA,GACA,OAAA,IAAQ,CAAC,GAAa,GAAa,CAAC,GAAG,EAAW,EAAW,CAAC,CAAC,GAC/D,oBAAA,IAAqB,IACrB,SAAA,IAAU,WAAA,MACN;AACJ,QAAM,IAAQ,GAAS,GACjB,EAAE,UAAA,EAAA,IAAa,EAAc,GAC7B,EAAE,UAAA,GAAU,UAAA,EAAA,IAAa,EAAY,GAErC,CAAC,GAAW,CAAA,IAAgB,EAAM,SAA0B,CAAK,GACjE,CAAC,GAAU,CAAA,IAAe,EAAM,SAAS,EAAK,oBAAoB,kBAAkB,GACpF,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAS,CAAS,GAChE,CAAC,GAAc,CAAA,IAAmB,EAAM,SAAS,EAAK,GACtD,CAAC,GAAe,CAAA,IAAoB,EAAM,SAAS,EAAI,GACvD,CAAC,GAAW,CAAA,IAAgB,EAAM,SAAA,MAAe,EAAsB,CAAK,CAAC,GAG7E,IAAa;AAAA,IACjB,SAAS;AAAA,MACP;AAAA,QAAE,WAAW;AAAA,QAAY,OAAO;AAAA,QAAM,OAAO;AAAA,MAAE;AAAA,MAC/C;AAAA,QAAE,WAAW;AAAA,QAAY,OAAO;AAAA,QAAM,OAAO;AAAA,MAAE;AAAA,MAC/C;AAAA,QAAE,WAAW;AAAA,QAAY,OAAO;AAAA,QAAM,OAAO;AAAA,MAAE;AAAA,MAC/C;AAAA,QAAE,WAAW;AAAA,QAAU,OAAO;AAAA,QAAM,OAAO;AAAA,MAAG;AAAA,IAChD;AAAA,IACA,MAAM;AAAA,MACJ;AAAA,QAAE,OAAO;AAAA,QAAY,OAAO;AAAA,MAAE;AAAA,MAC9B;AAAA,QAAE,OAAO;AAAA,QAAY,OAAO;AAAA,MAAE;AAAA,MAC9B;AAAA,QAAE,OAAO;AAAA,QAAY,OAAO;AAAA,MAAE;AAAA,MAC9B;AAAA,QAAE,OAAO;AAAA,QAAU,OAAO;AAAA,MAAG;AAAA,IAC/B;AAAA,EACF;AAKA,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAa,CAAK,GAClB,EAAmB,CAAK,GAIxB,EAAa,EAAsB,CAAK,CAAC;AAAA,EAE3C,GAAG,CAAC,EAAM,CAAA,GAAI,QAAQ,GAAG,EAAM,CAAA,GAAI,QAAQ,CAAC,CAAC,GAI7C,EAAM,UAAA,MAAgB;AACpB,KAAI,MAAY,sBAAsB,MAAY,oBAChD,EAAgB,eAAe,EAAkB,CAAC;AAAA,EAEtD,GAAG,CAAC,CAAS,CAAC;AAEd,QAAM,IAAA,MAA0B;AAC9B,UAAM,IAAmB,EAAW,EAAW,CAAC;AAEhD,WAAO,CADoB,EAAW,EAAU,GAAkB,CAAS,CACnE,GAAoB,CAAgB;AAAA,EAC9C,GAEM,IAAA,CAAuB,MAAmC;AAC9D,UAAM,CAAC,GAAW,CAAA,IAAW,GACvB,IAAS,MAAc;AAE7B,QAAI;AAGJ,QACE,MAAa,EAAK,oBAAoB,sBACtC,MAAa,EAAK,oBAAoB,mBAEtC,CAAA,IAAW,CACT,IAAS,EAAU,GAAW,CAAC,IAAI,EAAU,GAAW,CAAC,GACzD,EAAW,IAAS,EAAU,GAAS,CAAC,IAAI,EAAU,GAAS,CAAC,CAAC,CACnE;AAAA,aAIA,MAAa,EAAK,oBAAoB,gBACtC,MAAa,EAAK,oBAAoB,mBACtC;AACA,YAAM,IAAY,GAAY,CAAS,GACjC,IAAU,GAAU,CAAS;AACnC,MAAA,IAAW,CACT,IAAS,EAAS,GAAW,CAAC,IAAI,EAAS,GAAW,CAAC,GACvD,IAAS,EAAS,GAAS,CAAC,IAAI,EAAS,GAAS,CAAC,CACrD;AAAA,IACF,OAEK;AACH,YAAM,IAAY,GAAyB,GAAS,CAAS,GACvD,IAAe,IAAS,KAAU;AACxC,MAAA,IAAW,CAAC,EAAa,GAAW,CAAS,GAAG,EAAa,GAAS,CAAS,CAAC;AAAA,IAClF;AAEA,IAAA,EAAa,CAAQ,GACrB,EAAgB,eAAe,CAAQ;AAAA,EACzC,GAEM,IAAA,MAA2B;AAC/B,IAAA,EAAa,CAAe,GAC5B,EACE,MAAa,EAAK,oBAAoB,sBACpC,MAAa,EAAK,oBAAoB,kBAC1C,GACA,EAAgB,eAAe,CAAe;AAAA,EAChD,GAEM,IAAA,CAA+B,GAAwB,MAAqB;AAChF,IAAA,EAAM,CAAA,IAAK,EAAM,CAAA,KAAM,EAAM,CAAA;AAE7B,UAAM,IAAiC,CAAC,EAAM,CAAA,GAAI,EAAM,CAAA,IAAK,GAAS,EAAM,CAAA,CAAE,IAAI,EAAM,CAAA,CAAE,GACpF,IAAiB,EAAW,EAAc,CAAA,GAAY,EAAkB,cAAc,GACtF,IAAe,EAAW,EAAc,CAAA,GAAY,EAAkB,cAAc;AAE1F,IAAA,EAAmB,CAAa,GAChC,EAAY,CAAQ,GACpB,EAAS,GAAG,EAAK,kBAAA,KAAuB,CAAA,MAAoB,CAAA,EAAc;AAAA,EAC5E,GAEM,IAAA,CAA0B,MAAsB;AACpD,IAAA,EAAa,CAAS,GACtB,EAAgB,mBAAmB,CAAS;AAAA,EAC9C;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAK,WAAU;AAAA,IAA6B,GAAG;AAAA,IAA/C,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACD,CAAA,EAAM,YAAY,KAAK,IAAI,CAAA,GAAI;AAAA,YAC9B,SAAS,IAAqB,SAAS;AAAA,YACvC,gBAAgB;AAAA,UAClB;AAAA,UACC,CAAA,EAAM,YAAY,GAAG,IAAI,CAAA,GAAI,EAAE,SAAS,cAAc;AAAA,QACzD;AAAA,QAPF,UAAA;AAAA,UASG,MAAY,cACX,gBAAA,EAAC,IAAD;AAAA,YAAO,YAAW;AAAA,YAAS,WAAU;AAAA,YAAM,KAAK;AAAA,YAAhD,UAAA;AAAA,cACE,gBAAA,EAAC,GAAD;AAAA,gBAAM,MAAK;AAAA,gBAAiB,MAAM;AAAA,cAAK,CAAA;AAAA,cACvC,gBAAA,EAAC,GAAD;AAAA,gBAAM,MAAM;AAAA,gBACT,UAAA,EAAW,EAAgB,CAAA,GAAY,EAAkB,SAAS;AAAA,cAC/D,CAAA;AAAA,cACN,gBAAA,EAAC,GAAD,EAAM,MAAK,SAAU,CAAA;AAAA,cACrB,gBAAA,EAAC,GAAD;AAAA,gBAAM,MAAM;AAAA,gBACT,UAAA,EAAW,EAAgB,CAAA,GAAY,EAAkB,cAAc;AAAA,cACpE,CAAA;AAAA,YACD;AAAA;UAGR,MAAY,cACX,MAAY,sBACZ,MAAY,mBACV,gBAAA,EAAC,IAAD;AAAA,YACS,OAAA;AAAA,YACP,IAAI;AAAA,cACF,6BAA6B,EAC3B,SAAS,IAAW,IAAI,GAC1B;AAAA,cACA,kCAAkC,EAChC,IAAI,GACN;AAAA,cACA,QAAQ;AAAA,YACV;AAAA,YACS,SAAA;AAAA,YAXX,UAAA;AAAA,cAaE,gBAAA,EAAC,GAAD;AAAA,gBACE,iBAAe,EAAgB;AAAA,gBAC/B,cAAY,EAAK;AAAA,gBACjB,OAAO,EAAgB,wBAAwB,cAAc;AAAA,gBAC7D,SAAA,MACE,EAAgB,wBAAwB,OAAO,EAAoB,UAAU;AAAA,gBAG/E,UAAA,gBAAA,EAAC,GAAD;AAAA,kBAAM,MAAK;AAAA,kBAAe,MAAM;AAAA,gBAAK,CAAA;AAAA,cAC/B,CAAA;AAAA,cACR,gBAAA,EAAC,GAAD;AAAA,gBACE,iBAAe,EAAgB;AAAA,gBACxB,OAAA;AAAA,gBACP,SAAA,MAAgB,EAAgB,sBAAsB,OAAO,EAAgB,EAAI;AAAA,gBACjF,WAAW,gBAAA,EAAC,GAAD;AAAA,kBAAM,MAAK;AAAA,kBAAiB,MAAM;AAAA,gBAAK,CAAA;AAAA,gBAClD,IAAI,EACF,GAAG,IAAW,IAAI,EACpB;AAAA,gBAEC,UAAA,IACC,EAAW,EAAU,CAAA,GAAY,EAAkB,UAAU,IAE7D,gBAAA,EAAC,QAAD,EAAA,UAAA;AAAA,kBACG,EAAW,EAAU,CAAA,GAAY,EAAkB,cAAc;AAAA,kBAAE;AAAA,kBAAG;AAAA,kBACtE,EAAW,EAAU,CAAA,GAAY,EAAkB,cAAc;AAAA,gBAC9D,EAAA,CAAA;AAAA,cAEF,CAAA;AAAA,cACR,gBAAA,EAAC,GAAD;AAAA,gBACE,iBAAe,EAAgB;AAAA,gBAC/B,cAAY,EAAK;AAAA,gBACjB,OAAO,EAAgB,oBAAoB,cAAc;AAAA,gBACzD,SAAA,MACE,EAAgB,oBAAoB,OAAO,EAAoB,MAAM;AAAA,gBAGvE,UAAA,gBAAA,EAAC,GAAD;AAAA,kBAAM,MAAK;AAAA,kBAAgB,MAAM;AAAA,gBAAK,CAAA;AAAA,cAChC,CAAA;AAAA,YACG;AAAA;UAGhB,MAAY,sBACX,gBAAA,EAAC,IAAD;AAAA,YACE,cAAY,EAAK;AAAA,YACV,OAAA;AAAA,YACP,WAAW;AAAA,YACX,aAAY;AAAA,YACZ,OAAO;AAAA,YAEN,UAAA,EAAW,QAAQ,IAAA,CAAK,MACvB,gBAAA,EAAC,IAAD;AAAA,cACE,cAAY,EAAU;AAAA,cAEtB,SAAA,MAAe,EAAuB,EAAU,KAAK;AAAA,cACrD,IAAI,EAAE,OAAO,GAAG;AAAA,cAChB,OAAO,EAAU;AAAA,cAEhB,UAAA,EAAU;AAAA,YACC,GANP,EAAU,KAMH,CACf;AAAA,UACgB,CAAA;AAAA,UAGpB,MAAY,mBACX,gBAAA,EAAC,IAAD;AAAA,YACE,gBAAe;AAAA,YACf,UAAA,CAAW,GAAG,MAAa,EAAuB,CAAQ;AAAA,YAC1D,WAAU;AAAA,YACV,OAAO;AAAA,YACP,SAAQ;AAAA,YAEP,UAAA,EAAW,KAAK,IAAA,CAAK,MACpB,gBAAA,EAAC,IAAD;AAAA,cAEE,OACE,gBAAA,EAAC,GAAD;AAAA,gBAAM,MAAM;AAAA,gBAAM,SAAQ;AAAA,gBACvB,UAAA,EAAU;AAAA,cACP,CAAA;AAAA,cAER,IAAI,EAAE,UAAU,GAAG;AAAA,cACnB,OAAO,EAAU;AAAA,YAClB,GARM,EAAU,KAQhB,CACF;AAAA,UACG,CAAA;AAAA,QAEL;AAAA;MAEJ,KAAgB,KACf,gBAAA,EAAC,IAAD;AAAA,QACE,gBAAgB,EAAK;AAAA,QACrB,QAAQ;AAAA,QACR,SAAA,MAAe,EAAgB,EAAK;AAAA,QACpC,iBAAA,MAAuB;AACrB,UAAA,EAAmB,GACnB,EAAgB,EAAK;AAAA,QACvB;AAAA,QACA,aAAa,EAAK;AAAA,QAClB,OAAO,EAAK;AAAA,QATd,UAAA,CAWG,GACD,gBAAA,EAAC,GAAD;AAAA,UACE,MAAM,EAAK;AAAA,UACX,WAAW;AAAA,UACX,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,UAClB,IAAI,EAAE,GAAG,EAAE;AAAA,QACZ,CAAA,CACK;AAAA;MAGT,KAAgB,CAAC,KAChB,gBAAA,EAAC,IAAD;AAAA,QACE,MAAM,EAAE,OAAO,EAAK,mBAAmB;AAAA,QACvC,QAAQ;AAAA,QACR,UAAS;AAAA,QACT,SAAA,MAAe,EAAgB,EAAK;AAAA,QACpC,iBAAA,MAAuB,EAAmB;AAAA,QAC1C,aAAa,EAAK;AAAA,QAClB,IAAI;AAAA,UACF,4BAA4B,EAC1B,SAAS,EACX;AAAA,UACA,sBAAsB,EACpB,UAAU,cACZ;AAAA,QACF;AAAA,QAdF,UAAA,CAgBG,GACD,gBAAA,EAAC,GAAD;AAAA,UACE,MAAM,EAAK;AAAA,UACX,WAAW;AAAA,UACX,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,UAClB,IAAI;AAAA,YACF,IAAI;AAAA,YACJ,+BAA+B,EAC7B,YAAY,MACd;AAAA,UACF;AAAA,QACD,CAAA,CACK;AAAA;IAEP;AAAA;AAET"}

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

@@ -1 +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"}
+{"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,IAC/B,UAAA,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,MAhBN,UAAA;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.map

@@ -1 +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"}
+{"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,IAA9C,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,MAAK,QAAQ;AAAA,MAAM,OAAO;AAAA,MAA1B,UAAA,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,IACL,CAAA,GAAA,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.map

@@ -1 +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"}
+{"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,IALT,UAAA,CAOE,gBAAA,EAAC,OAAD;AAAA,MAAK,QAAQ;AAAA,MAAM,OAAO;AAAA,MAA1B,UAAA,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,IACL,CAAA,GAAA,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.map

@@ -1 +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"}
+{"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,EAEJ,UAAA,gBAAA,EAAC,GAAD;AAAA,IAAO,QAAO;AAAA,IAAO,gBAAe;AAAA,IAApC,UAAA;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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Footer.es.js","names":[],"sources":["../../../../src/common/components/drawer/Footer.tsx"],"sourcesContent":["import Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\n\ntype Color = 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'\n\ntype FooterProps = {\n  footerStyles?: SxProps\n  hasSecondaryAction?: boolean\n  isPrimaryDisabled?: boolean\n  onPrimaryAction?: () => void\n  onSecondaryAction?: () => void\n  primaryButtonProps?: React.ComponentProps<typeof Button>\n  primaryColor?: Color\n  primaryText?: string\n  secondaryColor?: Color\n  secondaryText?: string\n}\n\nconst Footer = ({\n  footerStyles = {},\n  hasSecondaryAction = true,\n  isPrimaryDisabled,\n  onPrimaryAction,\n  onSecondaryAction,\n  primaryButtonProps = {},\n  primaryColor = 'primary',\n  primaryText = 'Save',\n  secondaryColor = 'primary',\n  secondaryText = 'Cancel',\n}: FooterProps) => {\n  return (\n    <Stack\n      sx={{\n        bgcolor: 'background.paper',\n        flexDirection: 'row',\n        gap: 16,\n        justifyContent: 'flex-end',\n        p: 24,\n        ...footerStyles,\n      }}\n    >\n      {hasSecondaryAction && (\n        <Button\n          color={secondaryColor}\n          onClick={onSecondaryAction}\n          variant={onPrimaryAction ? 'outlined' : 'contained'}\n        >\n          {secondaryText}\n        </Button>\n      )}\n\n      {onPrimaryAction && (\n        <Button\n          {...primaryButtonProps}\n          color={primaryColor}\n          disabled={isPrimaryDisabled}\n          onClick={onPrimaryAction}\n          variant=\"contained\"\n        >\n          {primaryText}\n        </Button>\n      )}\n    </Stack>\n  )\n}\n\nexport default Footer\n"],"mappings":";;;AAmBA,IAAM,IAAA,CAAU,EACd,cAAA,IAAe,CAAC,GAChB,oBAAA,IAAqB,IACrB,mBAAA,GACA,iBAAA,GACA,mBAAA,GACA,oBAAA,IAAqB,CAAC,GACtB,cAAA,IAAe,WACf,aAAA,IAAc,QACd,gBAAA,IAAiB,WACjB,eAAA,IAAgB,SAAA,MAGd,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA,YARF,CAUG,KACC,gBAAA,EAAC,GAAD;AAAA,IACE,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS,IAAkB,aAAa;AAAA,cAEvC;AAAA,EACK,CAAA,GAGT,KACC,gBAAA,EAAC,GAAD;AAAA,IACE,GAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAQ;AAAA,cAEP;AAAA,EACK,CAAA,CAEL"}
+{"version":3,"file":"Footer.es.js","names":[],"sources":["../../../../src/common/components/drawer/Footer.tsx"],"sourcesContent":["import Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\n\ntype Color = 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'\n\ntype FooterProps = {\n  footerStyles?: SxProps\n  hasSecondaryAction?: boolean\n  isPrimaryDisabled?: boolean\n  onPrimaryAction?: () => void\n  onSecondaryAction?: () => void\n  primaryButtonProps?: React.ComponentProps<typeof Button>\n  primaryColor?: Color\n  primaryText?: string\n  secondaryColor?: Color\n  secondaryText?: string\n}\n\nconst Footer = ({\n  footerStyles = {},\n  hasSecondaryAction = true,\n  isPrimaryDisabled,\n  onPrimaryAction,\n  onSecondaryAction,\n  primaryButtonProps = {},\n  primaryColor = 'primary',\n  primaryText = 'Save',\n  secondaryColor = 'primary',\n  secondaryText = 'Cancel',\n}: FooterProps) => {\n  return (\n    <Stack\n      sx={{\n        bgcolor: 'background.paper',\n        flexDirection: 'row',\n        gap: 16,\n        justifyContent: 'flex-end',\n        p: 24,\n        ...footerStyles,\n      }}\n    >\n      {hasSecondaryAction && (\n        <Button\n          color={secondaryColor}\n          onClick={onSecondaryAction}\n          variant={onPrimaryAction ? 'outlined' : 'contained'}\n        >\n          {secondaryText}\n        </Button>\n      )}\n\n      {onPrimaryAction && (\n        <Button\n          {...primaryButtonProps}\n          color={primaryColor}\n          disabled={isPrimaryDisabled}\n          onClick={onPrimaryAction}\n          variant=\"contained\"\n        >\n          {primaryText}\n        </Button>\n      )}\n    </Stack>\n  )\n}\n\nexport default Footer\n"],"mappings":";;;AAmBA,IAAM,IAAA,CAAU,EACd,cAAA,IAAe,CAAC,GAChB,oBAAA,IAAqB,IACrB,mBAAA,GACA,iBAAA,GACA,mBAAA,GACA,oBAAA,IAAqB,CAAC,GACtB,cAAA,IAAe,WACf,aAAA,IAAc,QACd,gBAAA,IAAiB,WACjB,eAAA,IAAgB,SAAA,MAGd,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA,EARF,UAAA,CAUG,KACC,gBAAA,EAAC,GAAD;AAAA,IACE,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS,IAAkB,aAAa;AAAA,IAEvC,UAAA;AAAA,EACK,CAAA,GAGT,KACC,gBAAA,EAAC,GAAD;AAAA,IACE,GAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,SAAQ;AAAA,IAEP,UAAA;AAAA,EACK,CAAA,CAEL"}

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

@@ -1 +1 @@
-{"version":3,"file":"Header.es.js","names":[],"sources":["../../../../src/common/components/drawer/Header.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport IconButton from '@mui/material/IconButton'\n\nimport { ArrowBack } from '@mxenabled/mx-icons'\n\nimport { H2 } from '@mxenabled/mxui'\n\ninterface DrawerHeaderProps {\n  ariaLabelClose: string\n  onClose: () => void\n  shouldShowBorders: boolean\n  shouldShowShadow?: boolean\n  title: string\n}\n\nconst DrawerHeader: React.FC<DrawerHeaderProps> = ({\n  ariaLabelClose,\n  onClose,\n  shouldShowBorders,\n  shouldShowShadow,\n  title,\n}) => {\n  return (\n    <Stack\n      aria-labelledby={`${title?.replace(/\\s+/g, '-').toLowerCase()}-header-title`}\n      direction=\"row\"\n      sx={{\n        alignItems: 'center',\n        backgroundColor: 'background.paper',\n        ...(shouldShowBorders && {\n          borderBottom: 1,\n          borderColor: 'divider',\n        }),\n        ...(shouldShowShadow && {\n          boxShadow: '0px 2px 8px 0px #6A73811F',\n        }),\n        padding: '8px 8px 8px 8px',\n      }}\n    >\n      <IconButton aria-label={ariaLabelClose} autoFocus={true} color=\"primary\" onClick={onClose}>\n        <ArrowBack color=\"primary\" sx={{ fontSize: 22 }} />\n      </IconButton>\n      <Box\n        sx={{\n          flexGrow: 1,\n          margin: 'auto',\n          textAlign: 'center',\n        }}\n      >\n        <H2\n          bold={true}\n          id={`${title?.replace(/\\s+/g, '-').toLowerCase()}-header-title`}\n          variant=\"body1\"\n        >\n          {title}\n        </H2>\n      </Box>\n      {/* placeholder for when we add a button here, this also ensures the title text is centered */}\n      <Box width=\"44px\" />\n    </Stack>\n  )\n}\n\nexport default DrawerHeader\n"],"mappings":";;;;;;;AAkBA,IAAM,IAAA,CAA6C,EACjD,gBAAA,GACA,SAAA,GACA,mBAAA,GACA,kBAAA,GACA,OAAA,EAAA,MAGE,gBAAA,EAAC,GAAD;AAAA,EACE,mBAAiB,GAAG,GAAO,QAAQ,QAAQ,GAAG,EAAE,YAAY,CAAA;AAAA,EAC5D,WAAU;AAAA,EACV,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,GAAI,KAAqB;AAAA,MACvB,cAAc;AAAA,MACd,aAAa;AAAA,IACf;AAAA,IACA,GAAI,KAAoB,EACtB,WAAW,4BACb;AAAA,IACA,SAAS;AAAA,EACX;AAAA,YAdF;AAAA,IAgBE,gBAAA,EAAC,GAAD;AAAA,MAAY,cAAY;AAAA,MAAgB,WAAW;AAAA,MAAM,OAAM;AAAA,MAAU,SAAS;AAAA,gBAChF,gBAAA,EAAC,GAAD;AAAA,QAAW,OAAM;AAAA,QAAU,IAAI,EAAE,UAAU,GAAG;AAAA,MAAI,CAAA;AAAA,IACxC,CAAA;AAAA,IACZ,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,WAAW;AAAA,MACb;AAAA,gBAEA,gBAAA,EAAC,GAAD;AAAA,QACE,MAAM;AAAA,QACN,IAAI,GAAG,GAAO,QAAQ,QAAQ,GAAG,EAAE,YAAY,CAAA;AAAA,QAC/C,SAAQ;AAAA,kBAEP;AAAA,MACC,CAAA;AAAA,IACD,CAAA;AAAA,IAEL,gBAAA,EAAC,GAAD,EAAK,OAAM,OAAQ,CAAA;AAAA,EACd"}
+{"version":3,"file":"Header.es.js","names":[],"sources":["../../../../src/common/components/drawer/Header.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport IconButton from '@mui/material/IconButton'\n\nimport { ArrowBack } from '@mxenabled/mx-icons'\n\nimport { H2 } from '@mxenabled/mxui'\n\ninterface DrawerHeaderProps {\n  ariaLabelClose: string\n  onClose: () => void\n  shouldShowBorders: boolean\n  shouldShowShadow?: boolean\n  title: string\n}\n\nconst DrawerHeader: React.FC<DrawerHeaderProps> = ({\n  ariaLabelClose,\n  onClose,\n  shouldShowBorders,\n  shouldShowShadow,\n  title,\n}) => {\n  return (\n    <Stack\n      aria-labelledby={`${title?.replace(/\\s+/g, '-').toLowerCase()}-header-title`}\n      direction=\"row\"\n      sx={{\n        alignItems: 'center',\n        backgroundColor: 'background.paper',\n        ...(shouldShowBorders && {\n          borderBottom: 1,\n          borderColor: 'divider',\n        }),\n        ...(shouldShowShadow && {\n          boxShadow: '0px 2px 8px 0px #6A73811F',\n        }),\n        padding: '8px 8px 8px 8px',\n      }}\n    >\n      <IconButton aria-label={ariaLabelClose} autoFocus={true} color=\"primary\" onClick={onClose}>\n        <ArrowBack color=\"primary\" sx={{ fontSize: 22 }} />\n      </IconButton>\n      <Box\n        sx={{\n          flexGrow: 1,\n          margin: 'auto',\n          textAlign: 'center',\n        }}\n      >\n        <H2\n          bold={true}\n          id={`${title?.replace(/\\s+/g, '-').toLowerCase()}-header-title`}\n          variant=\"body1\"\n        >\n          {title}\n        </H2>\n      </Box>\n      {/* placeholder for when we add a button here, this also ensures the title text is centered */}\n      <Box width=\"44px\" />\n    </Stack>\n  )\n}\n\nexport default DrawerHeader\n"],"mappings":";;;;;;;AAkBA,IAAM,IAAA,CAA6C,EACjD,gBAAA,GACA,SAAA,GACA,mBAAA,GACA,kBAAA,GACA,OAAA,EAAA,MAGE,gBAAA,EAAC,GAAD;AAAA,EACE,mBAAiB,GAAG,GAAO,QAAQ,QAAQ,GAAG,EAAE,YAAY,CAAA;AAAA,EAC5D,WAAU;AAAA,EACV,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,GAAI,KAAqB;AAAA,MACvB,cAAc;AAAA,MACd,aAAa;AAAA,IACf;AAAA,IACA,GAAI,KAAoB,EACtB,WAAW,4BACb;AAAA,IACA,SAAS;AAAA,EACX;AAAA,EAdF,UAAA;AAAA,IAgBE,gBAAA,EAAC,GAAD;AAAA,MAAY,cAAY;AAAA,MAAgB,WAAW;AAAA,MAAM,OAAM;AAAA,MAAU,SAAS;AAAA,MAChF,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAW,OAAM;AAAA,QAAU,IAAI,EAAE,UAAU,GAAG;AAAA,MAAI,CAAA;AAAA,IACxC,CAAA;AAAA,IACZ,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,WAAW;AAAA,MACb;AAAA,MAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,MAAM;AAAA,QACN,IAAI,GAAG,GAAO,QAAQ,QAAQ,GAAG,EAAE,YAAY,CAAA;AAAA,QAC/C,SAAQ;AAAA,QAEP,UAAA;AAAA,MACC,CAAA;AAAA,IACD,CAAA;AAAA,IAEL,gBAAA,EAAC,GAAD,EAAK,OAAM,OAAQ,CAAA;AAAA,EACd"}