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

package/dist/common/components/TinyBarChart/index.es.js

@@ -0,0 +1,80 @@
+import "react";
+import h from "@mui/material/Stack";
+import { jsx as a } from "react/jsx-runtime";
+import { useTheme as f } from "@mui/material/styles";
+import { BarChart as $ } from "@mui/x-charts";
+var A = ({ data: r, color: n, width: o = 85, height: s = 65 }) => {
+  const l = f(), x = {
+    series: [{
+      data: r.map(({ value: t }) => t),
+      type: "bar"
+    }],
+    xAxis: [{
+      data: r.map(({ label: t }) => t),
+      scaleType: "band",
+      categoryGapRatio: 0.3
+    }]
+  }, c = r.map((t, e) => e === r.length - 1 ? n(l) : `${n(l)}80`), m = (t, e) => {
+    if (t <= 0 || e <= 0) return "";
+    const i = Math.min(6, t / 2, e / 2);
+    return `M${i},0 L${t - i},0 Q${t},0 ${t},${i} L${t},${e} L0,${e} L0,${i} Q0,0 ${i},0 Z`;
+  };
+  return /* @__PURE__ */ a(h, {
+    sx: {
+      width: o,
+      height: s
+    },
+    children: /* @__PURE__ */ a($, {
+      axisHighlight: {
+        x: "none",
+        y: "none"
+      },
+      height: s,
+      margin: {
+        bottom: -10,
+        left: 0,
+        right: 0,
+        top: 10
+      },
+      series: x.series,
+      slots: {
+        bar: ({ ownerState: t, ...e }) => {
+          const { ariaLabel: i } = r[t.dataIndex];
+          return /* @__PURE__ */ a("g", {
+            "aria-label": i,
+            children: /* @__PURE__ */ a("path", {
+              d: m(e.width, e.height),
+              fill: c[t.dataIndex],
+              transform: `translate(${e.x}, ${e.y})`
+            })
+          });
+        },
+        axisTickLabel: ({ text: t, ...e }) => {
+          const i = r[r.length - 1]?.label;
+          return /* @__PURE__ */ a("text", {
+            ...e,
+            style: {
+              ...e.style,
+              fontSize: 6.75,
+              lineHeight: "9px",
+              fontWeight: i === t ? "bold" : 400
+            },
+            children: t
+          });
+        }
+      },
+      sx: { "& .MuiChartsAxis-bottom .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick": { display: "none" } },
+      width: o,
+      xAxis: x.xAxis,
+      yAxis: [{
+        width: 0,
+        position: "none"
+      }]
+    })
+  });
+};
+export {
+  A as TinyBarChart
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/TinyBarChart/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/common/components/TinyBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { useTheme } from '@mui/material/styles'\nimport type { Theme } from '@mui/material/styles'\n\nimport { type BarSeriesType, BarChart } from '@mui/x-charts'\n\nimport type { BarDataProps } from '../types/Charts'\n\nexport interface TinyBarChartProps {\n  data: BarDataProps[]\n  color: (theme: Theme) => string | undefined\n  width?: number\n  height?: number\n}\n\nexport const TinyBarChart: React.FC<TinyBarChartProps> = ({\n  data,\n  color,\n  width = 85,\n  height = 65,\n}) => {\n  const theme = useTheme()\n\n  const chartData = {\n    series: [\n      {\n        data: data.map(({ value }) => value),\n        type: 'bar',\n      },\n    ] as BarSeriesType[],\n    xAxis: [\n      {\n        data: data.map(({ label }) => label),\n        scaleType: 'band' as const,\n        categoryGapRatio: 0.3,\n      },\n    ],\n  }\n\n  const colorRange = data.map((_, index) =>\n    index === data.length - 1 ? color(theme) : `${color(theme)}80`,\n  )\n\n  const createRoundedRectPath = (w: number, h: number) => {\n    if (w <= 0 || h <= 0) return ''\n    const r = Math.min(6, w / 2, h / 2)\n    return `M${r},0 L${w - r},0 Q${w},0 ${w},${r} L${w},${h} L0,${h} L0,${r} Q0,0 ${r},0 Z`\n  }\n\n  return (\n    <Stack\n      sx={{\n        width,\n        height,\n      }}\n    >\n      <BarChart\n        axisHighlight={{\n          x: 'none',\n          y: 'none',\n        }}\n        height={height}\n        margin={{\n          bottom: -10,\n          left: 0,\n          right: 0,\n          top: 10,\n        }}\n        series={chartData.series}\n        slots={{\n          bar: ({ ownerState, ...props }) => {\n            const { ariaLabel } = data[ownerState.dataIndex]\n            return (\n              <g aria-label={ariaLabel}>\n                <path\n                  d={createRoundedRectPath(props.width, props.height)}\n                  fill={colorRange[ownerState.dataIndex]}\n                  transform={`translate(${props.x}, ${props.y})`}\n                />\n              </g>\n            )\n          },\n          axisTickLabel: ({ text, ...restProps }) => {\n            const label = data[data.length - 1]?.label\n            return (\n              <text\n                {...restProps}\n                style={\n                  {\n                    ...restProps.style,\n                    fontSize: 6.75,\n                    lineHeight: '9px',\n                    fontWeight: label === text ? 'bold' : 400,\n                  } as React.CSSProperties\n                }\n              >\n                {text}\n              </text>\n            )\n          },\n        }}\n        sx={{\n          '& .MuiChartsAxis-bottom .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick':\n            {\n              display: 'none',\n            },\n        }}\n        width={width}\n        xAxis={chartData.xAxis}\n        yAxis={[{ width: 0, position: 'none' }]}\n      />\n    </Stack>\n  )\n}\n"],"mappings":";;;;;AAkBA,IAAa,IAAA,CAA6C,EACxD,MAAA,GACA,OAAA,GACA,OAAA,IAAQ,IACR,QAAA,IAAS,GAAA,MACL;AACJ,QAAM,IAAQ,EAAS,GAEjB,IAAY;AAAA,IAChB,QAAQ,CACN;AAAA,MACE,MAAM,EAAK,IAAA,CAAK,EAAE,OAAA,EAAA,MAAY,CAAK;AAAA,MACnC,MAAM;AAAA,IACR,CACF;AAAA,IACA,OAAO,CACL;AAAA,MACE,MAAM,EAAK,IAAA,CAAK,EAAE,OAAA,EAAA,MAAY,CAAK;AAAA,MACnC,WAAW;AAAA,MACX,kBAAkB;AAAA,IACpB,CACF;AAAA,EACF,GAEM,IAAa,EAAK,IAAA,CAAK,GAAG,MAC9B,MAAU,EAAK,SAAS,IAAI,EAAM,CAAK,IAAI,GAAG,EAAM,CAAK,CAAA,IAC3D,GAEM,IAAA,CAAyB,GAAW,MAAc;AACtD,QAAI,KAAK,KAAK,KAAK,EAAG,QAAO;AAC7B,UAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAClC,WAAO,IAAI,CAAA,OAAQ,IAAI,CAAA,OAAQ,CAAA,MAAO,CAAA,IAAK,CAAA,KAAM,CAAA,IAAK,CAAA,OAAQ,CAAA,OAAQ,CAAA,SAAU,CAAA;AAAA,EAClF;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,OAAA;AAAA,MACA,QAAA;AAAA,IACF;AAAA,cAEA,gBAAA,EAAC,GAAD;AAAA,MACE,eAAe;AAAA,QACb,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACQ,QAAA;AAAA,MACR,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MACP;AAAA,MACA,QAAQ,EAAU;AAAA,MAClB,OAAO;AAAA,QACL,KAAA,CAAM,EAAE,YAAA,GAAY,GAAG,EAAA,MAAY;AACjC,gBAAM,EAAE,WAAA,EAAA,IAAc,EAAK,EAAW,SAAA;AACtC,iBACE,gBAAA,EAAC,KAAD;AAAA,YAAG,cAAY;AAAA,sBACb,gBAAA,EAAC,QAAD;AAAA,cACE,GAAG,EAAsB,EAAM,OAAO,EAAM,MAAM;AAAA,cAClD,MAAM,EAAW,EAAW,SAAA;AAAA,cAC5B,WAAW,aAAa,EAAM,CAAA,KAAM,EAAM,CAAA;AAAA,YAC3C,CAAA;AAAA,UACA,CAAA;AAAA,QAEP;AAAA,QACA,eAAA,CAAgB,EAAE,MAAA,GAAM,GAAG,EAAA,MAAgB;AACzC,gBAAM,IAAQ,EAAK,EAAK,SAAS,CAAA,GAAI;AACrC,iBACE,gBAAA,EAAC,QAAD;AAAA,YACE,GAAI;AAAA,YACJ,OACE;AAAA,cACE,GAAG,EAAU;AAAA,cACb,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,YAAY,MAAU,IAAO,SAAS;AAAA,YACxC;AAAA,sBAGD;AAAA,UACG,CAAA;AAAA,QAEV;AAAA,MACF;AAAA,MACA,IAAI,EACF,0FACE,EACE,SAAS,OACX,EACJ;AAAA,MACO,OAAA;AAAA,MACP,OAAO,EAAU;AAAA,MACjB,OAAO,CAAC;AAAA,QAAE,OAAO;AAAA,QAAG,UAAU;AAAA,MAAO,CAAC;AAAA,IACvC,CAAA;AAAA,EACI,CAAA;AAEX"}

package/dist/common/components/TinyBarChart.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { Theme } from '@mui/material/styles';
-import { BarDataProps } from '../../insights/types/Charts/BarChart';
+import { BarDataProps } from '../types/Charts';
 export interface TinyBarChartProps {
     data: BarDataProps[];
     color: (theme: Theme) => string | undefined;

package/dist/common/components/WidgetContainer/index.es.js

@@ -0,0 +1,146 @@
+import { WidgetContainerProvider as Q } from "../../context/WidgetContainerProvider/index.es.js";
+import { useAppConfig as $, useEvent as M, useGlobalCopyStore as ee, useGlobalUiStore as te } from "../../context/hooks/index.es.js";
+import { useWidgetHeaderStyles as re } from "../../hooks/useWidgetHeaderStyles/index.es.js";
+import { ANALYTICS_EVENTS as w } from "../../constants/Analytics/index.es.js";
+import { useDimensions as I } from "../../hooks/useDimensions/index.es.js";
+import { GlobalAccountFilter as oe } from "../GlobalAccountFilter/index.es.js";
+import { WidgetDateRangeSelector as ie } from "../WidgetDateRangeSelector/index.es.js";
+import ne from "../Loader/index.es.js";
+import l from "react";
+import { observer as ae } from "mobx-react-lite";
+import i from "@mui/material/Stack";
+import { Icon as d, Text as me } from "@mxenabled/mxui";
+import se from "@mui/material/Button";
+import le from "@mui/material/Paper";
+import { ChevronLeft as de } from "@mxenabled/mx-icons";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import f from "@mui/material/IconButton";
+import ce from "@mui/material/Card";
+import fe from "@mui/material/CardContent";
+import pe from "@mui/material/Divider";
+var Ge = ae(({ actions: E, allowedAccountTypes: y, calendarActions: p, children: _, className: W = "mx-cmn-widget", dateRange: A, dateRangeVariant: D, hasDivider: L = !1, onAccountsFilterClick: R, onBackClick: n, onMenuClick: h, showAccountFilter: T = !0, slotComponent: t, sx: B = {}, title: G = "" }) => {
+  const [k, { height: z, width: u }] = I(), [H, { height: g, width: x }] = I(), { onEvent: C } = M(), { actionsFlex: N, containerSquareCorners: P, headerHeadingLevel: j, headerPaddingBottom: F, headerPaddingTop: V, headerPaddingX: q, iconSize: a, isCompact: r, isDesktop: m, isViewportAbove900: K, slotSx: Y } = re(u), { isCopyLoaded: U } = te(), { common: X } = ee(), { config: { display_widget_headings: Z } } = $(), J = () => {
+    n && (n(), C(w.WIDGET_BACK_CLICK));
+  };
+  if (l.useEffect(() => {
+    C(w.WIDGET_SIZE_CHANGED, {
+      height: g,
+      width: x
+    });
+  }, [g, x]), !U) return /* @__PURE__ */ e(ne, {});
+  const O = () => h && r && !K ? /* @__PURE__ */ e(f, {
+    color: "primary",
+    onClick: h,
+    sx: { p: 10 },
+    children: /* @__PURE__ */ e(d, {
+      name: "menu_open",
+      size: a,
+      sx: { transform: "rotate(180deg)" }
+    })
+  }) : n ? /* @__PURE__ */ e(f, {
+    "aria-label": X.back_to_dashboard,
+    color: "primary",
+    onClick: J,
+    sx: { p: 10 },
+    children: /* @__PURE__ */ e(de, { size: 24 })
+  }) : null, b = p && /* @__PURE__ */ e(i, {
+    alignItems: "center",
+    sx: Y,
+    children: /* @__PURE__ */ e(ie, {
+      calendarActions: p,
+      dateRange: A,
+      dateRangeVariant: D
+    })
+  });
+  return /* @__PURE__ */ e(le, {
+    className: W,
+    elevation: 1,
+    ref: k,
+    square: P,
+    sx: {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      margin: 0,
+      overflowY: "auto",
+      height: "100%",
+      ...B
+    },
+    children: /* @__PURE__ */ c(ce, { children: [
+      /* @__PURE__ */ c(i, {
+        alignItems: "center",
+        alignSelf: "stretch",
+        direction: "row",
+        justifyContent: "space-between",
+        sx: {
+          pb: F,
+          pt: V,
+          px: q
+        },
+        children: [
+          O(),
+          /* @__PURE__ */ e(i, {
+            alignItems: "flex-start",
+            minWidth: 0,
+            sx: { flex: 1 },
+            children: Z && /* @__PURE__ */ e(me, {
+              sx: { width: "100%" },
+              truncate: !0,
+              variant: j,
+              children: G
+            })
+          }),
+          !r && (t || b),
+          /* @__PURE__ */ c(i, {
+            alignItems: "center",
+            direction: "row",
+            justifyContent: "flex-end",
+            sx: {
+              flex: N,
+              flexShrink: 0
+            },
+            children: [T && /* @__PURE__ */ e(oe, {
+              allowedAccountTypes: y,
+              isDesktop: m,
+              onAccountFilterClick: R
+            }), E?.map((s) => {
+              if (l.isValidElement(s)) return l.cloneElement(s, { isDesktop: m });
+              const { iconName: o, onClick: v, label: S } = s;
+              return m ? /* @__PURE__ */ e(se, {
+                onClick: v,
+                startIcon: /* @__PURE__ */ e(d, {
+                  name: o,
+                  size: a
+                }),
+                children: S
+              }, o) : /* @__PURE__ */ e(f, {
+                "aria-label": S,
+                color: "primary",
+                onClick: v,
+                children: /* @__PURE__ */ e(d, {
+                  name: o,
+                  size: a
+                })
+              }, o);
+            })]
+          })
+        ]
+      }),
+      r && (t || b),
+      r && L && /* @__PURE__ */ e(pe, {}),
+      /* @__PURE__ */ e(fe, {
+        ref: H,
+        sx: { p: 0 },
+        children: /* @__PURE__ */ e(Q, {
+          availableHeight: z,
+          availableWidth: u,
+          children: _
+        })
+      })
+    ] })
+  });
+});
+export {
+  Ge as WidgetContainer
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/WidgetContainer/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/common/components/WidgetContainer.tsx"],"sourcesContent":["import React, { PropsWithChildren } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport Divider from '@mui/material/Divider'\nimport IconButton from '@mui/material/IconButton'\nimport Paper from '@mui/material/Paper'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { ChevronLeft } from '@mxenabled/mx-icons'\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport { ANALYTICS_EVENTS, useEvent } from '../../common'\nimport { AccountType } from '../../core'\nimport {\n  useAppConfig,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  WidgetContainerProvider,\n} from '../context'\nimport { useWidgetHeaderStyles } from '../hooks'\nimport { useDimensions } from '../hooks/useDimensions'\n\nimport { CalendarActions } from './daterangeselector/DateRangeSelector'\nimport { GlobalAccountFilter } from './GlobalAccountFilter'\nimport { WidgetDateRangeSelector } from './WidgetDateRangeSelector'\nimport Loader from './Loader'\n\ntype Action = {\n  label: string\n  iconName: string\n  onClick: () => void\n}\n\ninterface WidgetContainerProps {\n  allowedAccountTypes?: AccountType[] | undefined\n  actions?: (Action | React.JSX.Element)[]\n  calendarActions?: CalendarActions\n  className?: string\n  dateRange?: { start: Date; end: Date }\n  dateRangeVariant?: 'outlined' | 'text' | 'readonly' | 'timeframebuttons' | 'timeframetabs'\n  hasDivider?: boolean\n  onBackClick?: () => void\n  onMenuClick?: () => void\n  onAccountsFilterClick?: () => void\n  showAccountFilter?: boolean\n  slotComponent?: React.ReactElement\n  sx?: SxProps\n  title?: string\n}\n\nexport const WidgetContainer: React.FC<PropsWithChildren<WidgetContainerProps>> = observer(\n  ({\n    actions,\n    allowedAccountTypes,\n    calendarActions,\n    children,\n    className = 'mx-cmn-widget',\n    dateRange,\n    dateRangeVariant,\n    hasDivider = false,\n    onAccountsFilterClick,\n    onBackClick,\n    onMenuClick,\n    showAccountFilter = true,\n    slotComponent,\n    sx = {},\n    title = '',\n  }) => {\n    const [containerRef, { height, width }] = useDimensions()\n    const [contentRef, { height: contentHeight, width: contentWidth }] = useDimensions()\n    const { onEvent } = useEvent()\n\n    const {\n      actionsFlex,\n      containerSquareCorners,\n      headerHeadingLevel,\n      headerPaddingBottom,\n      headerPaddingTop,\n      headerPaddingX,\n      iconSize,\n      isCompact,\n      isDesktop,\n      isViewportAbove900,\n      slotSx,\n    } = useWidgetHeaderStyles(width)\n    const { isCopyLoaded } = useGlobalUiStore()\n    const { common: commonCopy } = useGlobalCopyStore()\n    const {\n      config: { display_widget_headings: showTitle },\n    } = useAppConfig()\n\n    const handleBackClick = () => {\n      if (onBackClick) {\n        onBackClick()\n        onEvent(ANALYTICS_EVENTS.WIDGET_BACK_CLICK)\n      }\n    }\n\n    React.useEffect(() => {\n      onEvent(ANALYTICS_EVENTS.WIDGET_SIZE_CHANGED, {\n        height: contentHeight,\n        width: contentWidth,\n      })\n    }, [contentHeight, contentWidth])\n\n    if (!isCopyLoaded) {\n      return <Loader />\n    }\n\n    const getNavButton = () => {\n      if (onMenuClick && isCompact && !isViewportAbove900) {\n        return (\n          <IconButton color=\"primary\" onClick={onMenuClick} sx={{ p: 10 }}>\n            <Icon name=\"menu_open\" size={iconSize} sx={{ transform: 'rotate(180deg)' }} />\n          </IconButton>\n        )\n      }\n\n      if (onBackClick) {\n        return (\n          <IconButton\n            aria-label={commonCopy.back_to_dashboard}\n            color=\"primary\"\n            onClick={handleBackClick}\n            sx={{ p: 10 }}\n          >\n            <ChevronLeft size={24} />\n          </IconButton>\n        )\n      }\n\n      return null\n    }\n\n    const defaultSlotComponent = calendarActions && (\n      <Stack alignItems=\"center\" sx={slotSx}>\n        <WidgetDateRangeSelector\n          calendarActions={calendarActions}\n          dateRange={dateRange}\n          dateRangeVariant={dateRangeVariant}\n        />\n      </Stack>\n    )\n\n    return (\n      <Paper\n        className={className}\n        elevation={1}\n        ref={containerRef}\n        square={containerSquareCorners}\n        sx={{\n          borderBottomLeftRadius: 0,\n          borderBottomRightRadius: 0,\n          margin: 0,\n          overflowY: 'auto',\n          height: '100%',\n          ...sx,\n        }}\n      >\n        <Card>\n          <Stack\n            alignItems=\"center\"\n            alignSelf=\"stretch\"\n            direction=\"row\"\n            justifyContent=\"space-between\"\n            sx={{\n              pb: headerPaddingBottom,\n              pt: headerPaddingTop,\n              px: headerPaddingX,\n            }}\n          >\n            {getNavButton()}\n            <Stack alignItems=\"flex-start\" minWidth={0} sx={{ flex: 1 }}>\n              {showTitle && (\n                <Text sx={{ width: '100%' }} truncate={true} variant={headerHeadingLevel}>\n                  {title}\n                </Text>\n              )}\n            </Stack>\n            {!isCompact && (slotComponent ? slotComponent : defaultSlotComponent)}\n            <Stack\n              alignItems=\"center\"\n              direction=\"row\"\n              justifyContent=\"flex-end\"\n              sx={{ flex: actionsFlex, flexShrink: 0 }}\n            >\n              {showAccountFilter && (\n                <GlobalAccountFilter\n                  allowedAccountTypes={allowedAccountTypes}\n                  isDesktop={isDesktop}\n                  onAccountFilterClick={onAccountsFilterClick}\n                />\n              )}\n              {actions?.map((action) => {\n                if (React.isValidElement(action))\n                  return React.cloneElement(action, { isDesktop } as Partial<unknown>)\n                const { iconName, onClick, label } = action as Action\n                return isDesktop ? (\n                  <Button\n                    key={iconName}\n                    onClick={onClick}\n                    startIcon={<Icon name={iconName} size={iconSize} />}\n                  >\n                    {label}\n                  </Button>\n                ) : (\n                  <IconButton aria-label={label} color=\"primary\" key={iconName} onClick={onClick}>\n                    <Icon name={iconName} size={iconSize} />\n                  </IconButton>\n                )\n              })}\n            </Stack>\n          </Stack>\n          {isCompact && (slotComponent ? slotComponent : defaultSlotComponent)}\n          {isCompact && hasDivider && <Divider />}\n          <CardContent ref={contentRef} sx={{ p: 0 }}>\n            <WidgetContainerProvider availableHeight={height} availableWidth={width}>\n              {children}\n            </WidgetContainerProvider>\n          </CardContent>\n        </Card>\n      </Paper>\n    )\n  },\n)\n"],"mappings":"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"}

package/dist/common/components/WidgetDateRangeSelector/index.es.js

@@ -0,0 +1,38 @@
+import { useGlobalCopyStore as o, useGlobalUiStore as _ } from "../../context/hooks/index.es.js";
+import d from "../daterangeselector/DateRangeSelector/index.es.js";
+import "react";
+import { observer as i } from "mobx-react-lite";
+import { jsx as g } from "react/jsx-runtime";
+var k = i(({ calendarActions: r, dateRange: a, dateRangeVariant: n }) => {
+  const { displayedDateRange: t } = _(), { common: e } = o();
+  return /* @__PURE__ */ g(d, {
+    calendarActions: r,
+    copy: {
+      dateRangePickerCopy: {
+        dateRangeFrom: e.date_range_picker.from,
+        dateRangeTo: e.date_range_picker.to,
+        dateRangeCustom: e.date_range_picker.custom,
+        dateRangeSelectARange: e.date_range_picker.select_range,
+        dateRangeThisMonth: e.date_range_picker.this_month,
+        dateRangeLastMonth: e.date_range_picker.last_month,
+        dateRangeLast30Days: e.date_range_picker.last_30_days,
+        dateRangeLast90Days: e.date_range_picker.last_90_days,
+        dateRangeYTD: e.date_range_picker.ytd,
+        dateRangeLastYear: e.date_range_picker.last_year,
+        dateRangeSelect: e.date_range_picker.select
+      },
+      dateRangeEditApply: e.date_range_picker.edit_apply,
+      dateRangeEditTitle: e.date_range_picker.edit_title,
+      dateRangeNextAria: e.date_range_picker.next_aria,
+      dateRangePreviousAria: e.date_range_picker.previous_aria
+    },
+    range: [a ? a.start : t.start, a ? a.end : t.end],
+    shouldShrinkToIcon: !1,
+    variant: n
+  });
+});
+export {
+  k as WidgetDateRangeSelector
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/WidgetDateRangeSelector/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/common/components/WidgetDateRangeSelector.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { useGlobalCopyStore, useGlobalUiStore } from '../context'\n\nimport { DateRangeSelector } from './daterangeselector'\nimport { CalendarActions, DateRangeSelectorCopy } from './daterangeselector/DateRangeSelector'\n\ninterface WidgetDateRangeSelectorProps {\n  calendarActions: CalendarActions\n  dateRange?: { start: Date; end: Date }\n  dateRangeVariant?: 'outlined' | 'text' | 'readonly' | 'timeframebuttons' | 'timeframetabs'\n}\n\nexport const WidgetDateRangeSelector: React.FC<WidgetDateRangeSelectorProps> = observer(\n  ({ calendarActions, dateRange, dateRangeVariant }) => {\n    const { displayedDateRange } = useGlobalUiStore()\n    const { common: commonCopy } = useGlobalCopyStore()\n\n    const dateRangeSelectorCopy = {\n      dateRangePickerCopy: {\n        dateRangeFrom: commonCopy.date_range_picker.from,\n        dateRangeTo: commonCopy.date_range_picker.to,\n        dateRangeCustom: commonCopy.date_range_picker.custom,\n        dateRangeSelectARange: commonCopy.date_range_picker.select_range,\n        dateRangeThisMonth: commonCopy.date_range_picker.this_month,\n        dateRangeLastMonth: commonCopy.date_range_picker.last_month,\n        dateRangeLast30Days: commonCopy.date_range_picker.last_30_days,\n        dateRangeLast90Days: commonCopy.date_range_picker.last_90_days,\n        dateRangeYTD: commonCopy.date_range_picker.ytd,\n        dateRangeLastYear: commonCopy.date_range_picker.last_year,\n        dateRangeSelect: commonCopy.date_range_picker.select,\n      },\n      dateRangeEditApply: commonCopy.date_range_picker.edit_apply,\n      dateRangeEditTitle: commonCopy.date_range_picker.edit_title,\n      dateRangeNextAria: commonCopy.date_range_picker.next_aria,\n      dateRangePreviousAria: commonCopy.date_range_picker.previous_aria,\n    } as DateRangeSelectorCopy\n\n    const startDate = dateRange ? dateRange.start : displayedDateRange.start\n    const endDate = dateRange ? dateRange.end : displayedDateRange.end\n\n    return (\n      <DateRangeSelector\n        calendarActions={calendarActions}\n        copy={dateRangeSelectorCopy}\n        range={[startDate, endDate]}\n        shouldShrinkToIcon={false}\n        variant={dateRangeVariant}\n      />\n    )\n  },\n)\n"],"mappings":";;;;;AAcA,IAAa,IAAkE,EAAA,CAC5E,EAAE,iBAAA,GAAiB,WAAA,GAAW,kBAAA,EAAA,MAAuB;AACpD,QAAM,EAAE,oBAAA,EAAA,IAAuB,EAAiB,GAC1C,EAAE,QAAQ,EAAA,IAAe,EAAmB;AAyBlD,SACE,gBAAA,EAAC,GAAD;AAAA,IACmB,iBAAA;AAAA,IACjB,MAAM;AAAA,MAzBR,qBAAqB;AAAA,QACnB,eAAe,EAAW,kBAAkB;AAAA,QAC5C,aAAa,EAAW,kBAAkB;AAAA,QAC1C,iBAAiB,EAAW,kBAAkB;AAAA,QAC9C,uBAAuB,EAAW,kBAAkB;AAAA,QACpD,oBAAoB,EAAW,kBAAkB;AAAA,QACjD,oBAAoB,EAAW,kBAAkB;AAAA,QACjD,qBAAqB,EAAW,kBAAkB;AAAA,QAClD,qBAAqB,EAAW,kBAAkB;AAAA,QAClD,cAAc,EAAW,kBAAkB;AAAA,QAC3C,mBAAmB,EAAW,kBAAkB;AAAA,QAChD,iBAAiB,EAAW,kBAAkB;AAAA,MAChD;AAAA,MACA,oBAAoB,EAAW,kBAAkB;AAAA,MACjD,oBAAoB,EAAW,kBAAkB;AAAA,MACjD,mBAAmB,EAAW,kBAAkB;AAAA,MAChD,uBAAuB,EAAW,kBAAkB;AAAA,IAS5C;AAAA,IACN,OAAO,CAPO,IAAY,EAAU,QAAQ,EAAmB,OACnD,IAAY,EAAU,MAAM,EAAmB,GAMjC;AAAA,IAC1B,oBAAoB;AAAA,IACpB,SAAS;AAAA,EACV,CAAA;AAEL,CACF"}

package/dist/common/components/addaccounts/AddAccounts/index.es.js

@@ -0,0 +1,50 @@
+import { useGlobalCopyStore as c } from "../../../context/hooks/index.es.js";
+import { observer as d } from "mobx-react-lite";
+import { Icon as t } from "@mxenabled/mxui";
+import i from "@mui/material/Button";
+import { jsx as o } from "react/jsx-runtime";
+import n from "@mui/material/Box";
+import e from "@mui/material/useMediaQuery";
+import m from "@mui/material/IconButton";
+import p from "@mui/material/Tooltip";
+var s = ({ handleConnectClick: r }) => {
+  const { common: a } = c();
+  return /* @__PURE__ */ o(n, { children: e("(max-width: 700px)") ? /* @__PURE__ */ o(p, {
+    id: "add-accounts",
+    placement: "bottom",
+    title: a.add_accounts,
+    children: /* @__PURE__ */ o(m, {
+      "aria-controls": "add_accounts",
+      "aria-describedby": "add-accounts",
+      "aria-haspopup": !0,
+      "aria-label": a.add_accounts,
+      color: "primary",
+      onClick: r,
+      children: /* @__PURE__ */ o(t, {
+        name: "add",
+        size: 24
+      })
+    })
+  }) : /* @__PURE__ */ o(i, {
+    "aria-controls": "add_accounts",
+    "aria-haspopup": !0,
+    "aria-label": a.add_accounts,
+    onClick: r,
+    startIcon: /* @__PURE__ */ o(t, {
+      name: "add",
+      size: 24
+    }),
+    sx: {
+      p: 12,
+      whiteSpace: "nowrap",
+      minWidth: "max-content"
+    },
+    variant: "text",
+    children: a.add_accounts
+  }) });
+}, A = d(s);
+export {
+  A as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/addaccounts/AddAccounts/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/common/components/addaccounts/AddAccounts.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport IconButton from '@mui/material/IconButton'\nimport Tooltip from '@mui/material/Tooltip'\nimport useMediaQuery from '@mui/material/useMediaQuery'\n\nimport { Icon } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../../common'\n\ninterface AddAccountsProps {\n  handleConnectClick: () => void\n}\n\nconst AddAccounts = ({ handleConnectClick }: AddAccountsProps) => {\n  const { common: copy } = useGlobalCopyStore()\n  const isSmallerThan700 = useMediaQuery('(max-width: 700px)')\n\n  return (\n    <Box>\n      {isSmallerThan700 ? (\n        <Tooltip id=\"add-accounts\" placement=\"bottom\" title={copy.add_accounts}>\n          <IconButton\n            aria-controls=\"add_accounts\"\n            aria-describedby=\"add-accounts\"\n            aria-haspopup={true}\n            aria-label={copy.add_accounts}\n            color=\"primary\"\n            onClick={handleConnectClick}\n          >\n            <Icon name=\"add\" size={24} />\n          </IconButton>\n        </Tooltip>\n      ) : (\n        <Button\n          aria-controls=\"add_accounts\"\n          aria-haspopup={true}\n          aria-label={copy.add_accounts}\n          onClick={handleConnectClick}\n          startIcon={<Icon name=\"add\" size={24} />}\n          sx={{\n            p: 12,\n            whiteSpace: 'nowrap',\n            minWidth: 'max-content',\n          }}\n          variant=\"text\"\n        >\n          {copy.add_accounts}\n        </Button>\n      )}\n    </Box>\n  )\n}\n\nexport default observer(AddAccounts)\n"],"mappings":";;;;;;;;;AAgBA,IAAM,IAAA,CAAe,EAAE,oBAAA,EAAA,MAA2C;AAChE,QAAM,EAAE,QAAQ,EAAA,IAAS,EAAmB;AAG5C,SACE,gBAAA,EAAC,GAAD,EAAA,UAHuB,EAAc,oBAIlC,IACC,gBAAA,EAAC,GAAD;AAAA,IAAS,IAAG;AAAA,IAAe,WAAU;AAAA,IAAS,OAAO,EAAK;AAAA,cACxD,gBAAA,EAAC,GAAD;AAAA,MACE,iBAAc;AAAA,MACd,oBAAiB;AAAA,MACjB,iBAAe;AAAA,MACf,cAAY,EAAK;AAAA,MACjB,OAAM;AAAA,MACN,SAAS;AAAA,gBAET,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAK;AAAA,QAAM,MAAM;AAAA,MAAK,CAAA;AAAA,IAClB,CAAA;AAAA,EACL,CAAA,IAET,gBAAA,EAAC,GAAD;AAAA,IACE,iBAAc;AAAA,IACd,iBAAe;AAAA,IACf,cAAY,EAAK;AAAA,IACjB,SAAS;AAAA,IACT,WAAW,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAK;AAAA,MAAM,MAAM;AAAA,IAAK,CAAA;AAAA,IACvC,IAAI;AAAA,MACF,GAAG;AAAA,MACH,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,IACA,SAAQ;AAAA,cAEP,EAAK;AAAA,EACA,CAAA,EAEP,CAAA;AAET,GAEA,IAAe,EAAS,CAAW"}

package/dist/common/components/calendar/Calendar/index.es.js

@@ -0,0 +1,148 @@
+import j from "../Header/index.es.js";
+import A from "../Day/index.es.js";
+import c from "react";
+import { Text as D } from "@mxenabled/mxui";
+import { css as B } from "@mxenabled/cssinjs";
+import { addDays as O } from "date-fns/addDays";
+import { addMonths as b } from "date-fns/addMonths";
+import { eachDayOfInterval as R } from "date-fns/eachDayOfInterval";
+import { eachWeekOfInterval as L } from "date-fns/eachWeekOfInterval";
+import { endOfMonth as W } from "date-fns/endOfMonth";
+import { format as H } from "date-fns/format";
+import { isBefore as T } from "date-fns/isBefore";
+import { isSameMonth as _ } from "date-fns/isSameMonth";
+import { startOfMonth as $ } from "date-fns/startOfMonth";
+import { startOfToday as N } from "date-fns/startOfToday";
+import { subMonths as z } from "date-fns/subMonths";
+import Z from "@mui/material/Button";
+import q from "@mui/material/Paper";
+import { jsx as e, jsxs as F } from "react/jsx-runtime";
+var dt = /* @__PURE__ */ (function(n) {
+  return n.None = "None", n.Single = "Single", n.Range = "Range", n;
+})({}), ft = ({ copy: n, beginDate: m = void 0, endDate: u = void 0, onDateSelected: g, onRangeSelected: p, selectionType: d = "Single" }) => {
+  const M = G(), [r, f] = c.useState(N), [o, s] = c.useState(m), [v, l] = c.useState(u);
+  c.useEffect(() => {
+    s(m), l(u), m && f(m);
+  }, [m, u]);
+  const k = c.useMemo(() => {
+    const t = L({
+      start: $(r),
+      end: W(r)
+    }), i = [];
+    for (let a = 0; a < t.length; a++) {
+      const h = t[a], w = R({
+        start: h,
+        end: O(h, 6)
+      }), y = [];
+      for (let x = 0; x < w.length; x++) y.push(w[x]);
+      i.push(y);
+    }
+    return i;
+  }, [r]), C = (t) => {
+    if (d !== "None") {
+      if (d === "Single") {
+        s(t), g?.(t);
+        return;
+      }
+      !o || v ? (s(t), l(void 0)) : T(t, o) ? (l(o), s(t), p?.(t, o)) : (l(t), p?.(o, t));
+    }
+  }, E = () => {
+    const t = N();
+    f(t), d !== "None" && (s(t), d === "Single" ? g?.(t) : (l(t), p?.(t, t)));
+  }, S = () => {
+    f(b(r, 1));
+  }, I = () => {
+    f(z(r, 1));
+  };
+  return /* @__PURE__ */ e("div", {
+    className: `mx-cmn-calendar ${M}`,
+    children: /* @__PURE__ */ F(q, {
+      sx: { boxShadow: "none" },
+      children: [
+        /* @__PURE__ */ e(j, {
+          copy: n,
+          date: r,
+          onNextClick: S,
+          onPreviousClick: I
+        }),
+        /* @__PURE__ */ e("div", {
+          className: "mx-cmn-calendar-header-row",
+          children: k[0].map((t, i) => /* @__PURE__ */ e("div", {
+            className: "mx-cmn-calendar-header-cell",
+            children: /* @__PURE__ */ e(D, {
+              bold: !0,
+              variant: "body2",
+              children: H(t, "EEEEE")
+            })
+          }, i))
+        }),
+        k.map((t, i) => /* @__PURE__ */ e("div", {
+          className: "mx-cmn-calendar-week",
+          children: t.map((a, h) => /* @__PURE__ */ e(A, {
+            beginDate: o,
+            date: a,
+            endDate: v,
+            isInMonth: _(a, r),
+            onClick: C
+          }, h))
+        }, `w-${i}`)),
+        /* @__PURE__ */ e("div", {
+          className: "mx-cmn-calendar-today-container",
+          children: /* @__PURE__ */ e(Z, {
+            onClick: E,
+            size: "small",
+            variant: "text",
+            children: n.today
+          })
+        })
+      ]
+    })
+  });
+}, G = () => B({
+  width: 340,
+  "& .MuiPaper-root": {
+    paddingLeft: 24,
+    paddingRight: 24,
+    paddingTop: 4,
+    paddingBottom: 4
+  },
+  "& .mx-cmn-calendar-header-row": {
+    display: "flex",
+    justifyContent: "center",
+    textAlign: "center",
+    "& .mx-cmn-calendar-header-cell": {
+      height: 44,
+      width: 44,
+      minWidth: 44,
+      "& .kmui-text": {
+        alignItems: "center",
+        display: "flex",
+        height: "100%",
+        justifyContent: "center",
+        width: "100%"
+      }
+    }
+  },
+  "& .mx-cmn-calendar-week": {
+    display: "flex",
+    justifyContent: "center",
+    textAlign: "center"
+  },
+  "& .mx-cmn-calendar-today-container": {
+    display: "block",
+    marginTop: 16,
+    textAlign: "center",
+    width: "100%",
+    "& > .MuiButton-root": {
+      display: "inline-block",
+      marginLeft: "auto",
+      marginRight: "auto"
+    }
+  }
+});
+export {
+  dt as CalendarSelectionTypes,
+  ft as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/calendar/Calendar/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/common/components/calendar/Calendar.tsx"],"sourcesContent":["import React from 'react'\nimport { css } from '@mxenabled/cssinjs'\nimport { addDays } from 'date-fns/addDays'\nimport { addMonths } from 'date-fns/addMonths'\nimport { eachDayOfInterval } from 'date-fns/eachDayOfInterval'\nimport { eachWeekOfInterval } from 'date-fns/eachWeekOfInterval'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { format } from 'date-fns/format'\nimport { isBefore } from 'date-fns/isBefore'\nimport { isSameMonth } from 'date-fns/isSameMonth'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { startOfToday } from 'date-fns/startOfToday'\nimport { subMonths } from 'date-fns/subMonths'\n\nimport Button from '@mui/material/Button'\nimport Paper from '@mui/material/Paper'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport Header from './Header'\nimport Day from './Day'\n\nexport const CALENDAR_WIDTH = 340\nexport const DATE_SIZE = 44\nexport const enum CalendarSelectionTypes {\n  None = 'None',\n  Single = 'Single',\n  Range = 'Range',\n}\n\nexport type CalendarCopy = {\n  nextAria: string\n  prevAria: string\n  today: string\n}\n\nexport interface CalendarProps {\n  copy: CalendarCopy\n  beginDate?: Date\n  endDate?: Date\n  onDateSelected?: (date: Date) => void\n  onRangeSelected?: (beginDate: Date, endDate: Date) => void\n  selectionType?: CalendarSelectionTypes\n}\n\nconst Calendar: React.FC<CalendarProps> = ({\n  copy,\n  beginDate: beginDateProp = undefined,\n  endDate: endDateProp = undefined,\n  onDateSelected,\n  onRangeSelected,\n  selectionType = CalendarSelectionTypes.Single,\n}) => {\n  const styles = getStyles()\n\n  const [date, setDate] = React.useState(startOfToday)\n\n  const [beginDate, setBeginDate] = React.useState<Date | undefined>(beginDateProp)\n  const [endDate, setEndDate] = React.useState<Date | undefined>(endDateProp)\n\n  React.useEffect(() => {\n    setBeginDate(beginDateProp)\n    setEndDate(endDateProp)\n    if (beginDateProp) {\n      setDate(beginDateProp)\n    }\n  }, [beginDateProp, endDateProp])\n\n  const weeks = React.useMemo(() => {\n    const weeksInInterval = eachWeekOfInterval({ start: startOfMonth(date), end: endOfMonth(date) })\n\n    const weeks = [] as Date[][]\n    for (let i = 0; i < weeksInInterval.length; i++) {\n      const weekStart = weeksInInterval[i]\n      const days = eachDayOfInterval({ start: weekStart, end: addDays(weekStart, 6) })\n\n      const week = [] as Date[]\n      for (let j = 0; j < days.length; j++) {\n        week.push(days[j])\n      }\n      weeks.push(week)\n    }\n\n    return weeks\n  }, [date])\n\n  const handleSelection = (date: Date) => {\n    if (selectionType === CalendarSelectionTypes.None) return\n\n    if (selectionType === CalendarSelectionTypes.Single) {\n      setBeginDate(date)\n      onDateSelected?.(date)\n      return\n    }\n\n    if (!beginDate || endDate) {\n      setBeginDate(date)\n      setEndDate(undefined)\n    } else if (isBefore(date, beginDate)) {\n      setEndDate(beginDate)\n      setBeginDate(date)\n      onRangeSelected?.(date, beginDate)\n    } else {\n      setEndDate(date)\n      onRangeSelected?.(beginDate, date)\n    }\n  }\n\n  const handleTodayClick = () => {\n    const today = startOfToday()\n    setDate(today)\n\n    if (selectionType === CalendarSelectionTypes.None) return\n\n    setBeginDate(today)\n\n    if (selectionType === CalendarSelectionTypes.Single) {\n      onDateSelected?.(today)\n    } else {\n      setEndDate(today)\n      onRangeSelected?.(today, today)\n    }\n  }\n\n  const handleNextMonthClick = () => {\n    setDate(addMonths(date, 1))\n  }\n\n  const handlePreviousMonthClick = () => {\n    setDate(subMonths(date, 1))\n  }\n\n  return (\n    <div className={`mx-cmn-calendar ${styles}`}>\n      <Paper sx={{ boxShadow: 'none' }}>\n        <Header\n          copy={copy}\n          date={date}\n          onNextClick={handleNextMonthClick}\n          onPreviousClick={handlePreviousMonthClick}\n        />\n\n        <div className=\"mx-cmn-calendar-header-row\">\n          {weeks[0].map((day, index) => (\n            <div className=\"mx-cmn-calendar-header-cell\" key={index}>\n              <Text bold={true} variant=\"body2\">\n                {format(day, 'EEEEE')}\n              </Text>\n            </div>\n          ))}\n        </div>\n\n        {weeks.map((week, index) => (\n          <div className=\"mx-cmn-calendar-week\" key={`w-${index}`}>\n            {week.map((day, index) => (\n              <Day\n                beginDate={beginDate}\n                date={day}\n                endDate={endDate}\n                isInMonth={isSameMonth(day, date)}\n                key={index}\n                onClick={handleSelection}\n              />\n            ))}\n          </div>\n        ))}\n\n        <div className=\"mx-cmn-calendar-today-container\">\n          <Button onClick={handleTodayClick} size=\"small\" variant=\"text\">\n            {copy.today}\n          </Button>\n        </div>\n      </Paper>\n    </div>\n  )\n}\n\nconst getStyles = () =>\n  css({\n    width: CALENDAR_WIDTH,\n    '& .MuiPaper-root': {\n      paddingLeft: 24,\n      paddingRight: 24,\n      paddingTop: 4,\n      paddingBottom: 4,\n    },\n    '& .mx-cmn-calendar-header-row': {\n      display: 'flex',\n      justifyContent: 'center',\n      textAlign: 'center',\n      '& .mx-cmn-calendar-header-cell': {\n        height: DATE_SIZE,\n        width: DATE_SIZE,\n        minWidth: DATE_SIZE,\n        '& .kmui-text': {\n          alignItems: 'center',\n          display: 'flex',\n          height: '100%',\n          justifyContent: 'center',\n          width: '100%',\n        },\n      },\n    },\n    '& .mx-cmn-calendar-week': {\n      display: 'flex',\n      justifyContent: 'center',\n      textAlign: 'center',\n    },\n    '& .mx-cmn-calendar-today-container': {\n      display: 'block',\n      marginTop: 16,\n      textAlign: 'center',\n      width: '100%',\n      '& > .MuiButton-root': {\n        display: 'inline-block',\n        marginLeft: 'auto',\n        marginRight: 'auto',\n      },\n    },\n  })\n\nexport default Calendar\n"],"mappings":"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"}

package/dist/common/components/calendar/Day/index.es.js

@@ -0,0 +1,82 @@
+import "react";
+import { Text as y } from "@mxenabled/mxui";
+import { css as f } from "@mxenabled/cssinjs";
+import { format as u } from "date-fns/format";
+import { startOfToday as h } from "date-fns/startOfToday";
+import g from "@mui/material/Button";
+import { jsx as a } from "react/jsx-runtime";
+import { isSameDay as m } from "date-fns/isSameDay";
+import { isWithinInterval as R } from "date-fns/isWithinInterval";
+import { useTheme as v } from "@mui/material/styles";
+var L = ({ beginDate: o, date: r, endDate: t, isInMonth: c, onClick: i }) => {
+  const s = v(), d = $(s), l = o && t && R(r, {
+    start: o,
+    end: t
+  }) && !m(r, o) && !m(r, t), e = o && t && m(o, r) && !m(o, t), x = t && o && m(t, r) && !m(o, t), n = o && m(o, r) || t && m(t, r), p = m(r, h());
+  return /* @__PURE__ */ a("div", {
+    className: `
+        mx-cmn-calendar-day
+        ${d}
+        ${c ? "" : "mx-cmn-out-of-month"}
+        ${l ? "mx-cmn-date-interval" : ""}
+      `,
+    children: /* @__PURE__ */ a(g, {
+      className: `
+          mx-cmn-calendar-day-button
+          ${e ? "mx-cmn-range-start" : ""}
+          ${x ? "mx-cmn-range-end" : ""}
+        `,
+      color: n ? "primary" : "secondary",
+      onClick: () => i(r),
+      variant: n ? "contained" : "text",
+      children: /* @__PURE__ */ a(y, {
+        className: `
+            mx-cmn-calendar-day-text
+            ${n ? "mx-cmn-day-selected" : ""}
+            ${p ? "mx-cmn-today" : ""}`,
+        variant: "body2",
+        children: u(r, "d")
+      })
+    })
+  });
+}, $ = (o) => f({
+  height: 44,
+  width: 44,
+  display: "flex",
+  justifyContent: "center",
+  "&.mx-cmn-out-of-month": { backgroundColor: o.palette.background.default },
+  "&.mx-cmn-date-interval": { backgroundColor: o.palette.secondary.light },
+  "& .MuiButton-root": {
+    maxWidth: 44,
+    minWidth: 44,
+    height: 44,
+    padding: 0,
+    width: 44,
+    "&.mx-cmn-range-start": {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+      "&:focus": { boxShadow: "none" }
+    },
+    "&.mx-cmn-range-end": {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      "&:focus": { boxShadow: "none" }
+    }
+  },
+  "& .mx-cmn-calendar-day-text": {
+    "&.mx-cmn-day-selected": {
+      color: o.palette.primary,
+      "&.mx-cmn-day-selected": { borderColor: o.palette.common.white }
+    },
+    "&.mx-cmn-today": {
+      borderBottom: `solid 2px ${o.palette.primary.main}`,
+      marginBottom: -6,
+      paddingBottom: 5
+    }
+  }
+});
+export {
+  L as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/calendar/Day/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/common/components/calendar/Day.tsx"],"sourcesContent":["import React from 'react'\nimport { css } from '@mxenabled/cssinjs'\nimport { format } from 'date-fns/format'\nimport { isSameDay } from 'date-fns/isSameDay'\nimport { isWithinInterval } from 'date-fns/isWithinInterval'\nimport { startOfToday } from 'date-fns/startOfToday'\n\nimport Button from '@mui/material/Button'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { DATE_SIZE } from './Calendar'\n\ninterface DayProps {\n  beginDate: Date | undefined\n  date: Date\n  endDate: Date | undefined\n  isInMonth: boolean\n  onClick: (date: Date) => void\n}\n\nconst Day: React.FC<DayProps> = ({ beginDate, date, endDate, isInMonth, onClick }) => {\n  const theme = useTheme()\n  const styles = getStyles(theme)\n\n  const isInRange =\n    beginDate &&\n    endDate &&\n    isWithinInterval(date, { start: beginDate, end: endDate }) &&\n    !isSameDay(date, beginDate) &&\n    !isSameDay(date, endDate)\n\n  const isRangeStart =\n    beginDate && endDate && isSameDay(beginDate, date) && !isSameDay(beginDate, endDate)\n\n  const isRangeEnd =\n    endDate && beginDate && isSameDay(endDate, date) && !isSameDay(beginDate, endDate)\n\n  const isSelected =\n    (beginDate && isSameDay(beginDate, date)) || (endDate && isSameDay(endDate, date))\n\n  const isToday = isSameDay(date, startOfToday())\n\n  return (\n    <div\n      className={`\n        mx-cmn-calendar-day\n        ${styles}\n        ${!isInMonth ? 'mx-cmn-out-of-month' : ''}\n        ${isInRange ? 'mx-cmn-date-interval' : ''}\n      `}\n    >\n      <Button\n        className={`\n          mx-cmn-calendar-day-button\n          ${isRangeStart ? 'mx-cmn-range-start' : ''}\n          ${isRangeEnd ? 'mx-cmn-range-end' : ''}\n        `}\n        color={isSelected ? 'primary' : 'secondary'}\n        onClick={() => onClick(date)}\n        variant={isSelected ? 'contained' : 'text'}\n      >\n        <Text\n          className={`\n            mx-cmn-calendar-day-text\n            ${isSelected ? 'mx-cmn-day-selected' : ''}\n            ${isToday ? 'mx-cmn-today' : ''}`}\n          variant=\"body2\"\n        >\n          {format(date, 'd')}\n        </Text>\n      </Button>\n    </div>\n  )\n}\n\nconst getStyles = (theme: any) =>\n  css({\n    height: DATE_SIZE,\n    width: DATE_SIZE,\n    display: 'flex',\n    justifyContent: 'center',\n    '&.mx-cmn-out-of-month': {\n      backgroundColor: theme.palette.background.default,\n    },\n    '&.mx-cmn-date-interval': {\n      backgroundColor: theme.palette.secondary.light,\n    },\n    '& .MuiButton-root': {\n      maxWidth: 44,\n      minWidth: 44,\n      height: 44,\n      padding: 0,\n      width: 44,\n      '&.mx-cmn-range-start': {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n        '&:focus': {\n          boxShadow: 'none',\n        },\n      },\n      '&.mx-cmn-range-end': {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n        '&:focus': {\n          boxShadow: 'none',\n        },\n      },\n    },\n    '& .mx-cmn-calendar-day-text': {\n      '&.mx-cmn-day-selected': {\n        color: theme.palette.primary,\n        '&.mx-cmn-day-selected': {\n          borderColor: theme.palette.common.white,\n        },\n      },\n      '&.mx-cmn-today': {\n        borderBottom: `solid 2px ${theme.palette.primary.main}`,\n        marginBottom: -6,\n        paddingBottom: 5,\n      },\n    },\n  })\n\nexport default Day\n"],"mappings":";;;;;;;;;;AAsBA,IAAM,IAAA,CAA2B,EAAE,WAAA,GAAW,MAAA,GAAM,SAAA,GAAS,WAAA,GAAW,SAAA,EAAA,MAAc;AACpF,QAAM,IAAQ,EAAS,GACjB,IAAS,EAAU,CAAK,GAExB,IACJ,KACA,KACA,EAAiB,GAAM;AAAA,IAAE,OAAO;AAAA,IAAW,KAAK;AAAA,EAAQ,CAAC,KACzD,CAAC,EAAU,GAAM,CAAS,KAC1B,CAAC,EAAU,GAAM,CAAO,GAEpB,IACJ,KAAa,KAAW,EAAU,GAAW,CAAI,KAAK,CAAC,EAAU,GAAW,CAAO,GAE/E,IACJ,KAAW,KAAa,EAAU,GAAS,CAAI,KAAK,CAAC,EAAU,GAAW,CAAO,GAE7E,IACH,KAAa,EAAU,GAAW,CAAI,KAAO,KAAW,EAAU,GAAS,CAAI,GAE5E,IAAU,EAAU,GAAM,EAAa,CAAC;AAE9C,SACE,gBAAA,EAAC,OAAD;AAAA,IACE,WAAW;AAAA;AAAA,UAEP,CAAA;AAAA,UACC,IAAoC,KAAxB,qBAAwB;AAAA,UACrC,IAAY,yBAAyB,EAAA;AAAA;AAAA,cAGzC,gBAAA,EAAC,GAAD;AAAA,MACE,WAAW;AAAA;AAAA,YAEP,IAAe,uBAAuB,EAAA;AAAA,YACtC,IAAa,qBAAqB,EAAA;AAAA;AAAA,MAEtC,OAAO,IAAa,YAAY;AAAA,MAChC,SAAA,MAAe,EAAQ,CAAI;AAAA,MAC3B,SAAS,IAAa,cAAc;AAAA,gBAEpC,gBAAA,EAAC,GAAD;AAAA,QACE,WAAW;AAAA;AAAA,cAEP,IAAa,wBAAwB,EAAA;AAAA,cACrC,IAAU,iBAAiB,EAAA;AAAA,QAC/B,SAAQ;AAAA,kBAEP,EAAO,GAAM,GAAG;AAAA,MACb,CAAA;AAAA,IACA,CAAA;AAAA,EACL,CAAA;AAET,GAEM,IAAA,CAAa,MACjB,EAAI;AAAA,EACF,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,yBAAyB,EACvB,iBAAiB,EAAM,QAAQ,WAAW,QAC5C;AAAA,EACA,0BAA0B,EACxB,iBAAiB,EAAM,QAAQ,UAAU,MAC3C;AAAA,EACA,qBAAqB;AAAA,IACnB,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,IACP,wBAAwB;AAAA,MACtB,sBAAsB;AAAA,MACtB,yBAAyB;AAAA,MACzB,WAAW,EACT,WAAW,OACb;AAAA,IACF;AAAA,IACA,sBAAsB;AAAA,MACpB,qBAAqB;AAAA,MACrB,wBAAwB;AAAA,MACxB,WAAW,EACT,WAAW,OACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,+BAA+B;AAAA,IAC7B,yBAAyB;AAAA,MACvB,OAAO,EAAM,QAAQ;AAAA,MACrB,yBAAyB,EACvB,aAAa,EAAM,QAAQ,OAAO,MACpC;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,cAAc,aAAa,EAAM,QAAQ,QAAQ,IAAA;AAAA,MACjD,cAAc;AAAA,MACd,eAAe;AAAA,IACjB;AAAA,EACF;AACF,CAAC"}