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

package/dist/common/components/barchart/Bar.js

@@ -0,0 +1,80 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { keyframes as y, css as b } from "@mxenabled/cssinjs";
+import { useTokens as g, Text as $ } from "@mxenabled/mxui";
+const w = ({
+  ariaLabel: a,
+  color: m,
+  height: i,
+  index: n,
+  label: e,
+  onClick: r,
+  selectedIndex: s,
+  value: o
+}) => {
+  const l = g(), x = h(l, m, i), u = (d) => {
+    r && (d.key === " " || d.key === "Enter") && r(n);
+  }, p = s === void 0 || s === n ? "primary" : "secondary", c = () => /* @__PURE__ */ t(
+    $,
+    {
+      "aria-hidden": !0,
+      bold: s === n,
+      className: "mx-cmn-bar-text",
+      color: p,
+      component: "div",
+      variant: "Small",
+      children: e
+    }
+  );
+  return /* @__PURE__ */ f("div", { className: `mx-cmn-bar-container ${x} ${o < 0 ? "mx-cmn-negative" : ""}`, children: [
+    o >= 0 && /* @__PURE__ */ t(c, {}),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        "aria-label": a,
+        className: `mx-cmn-bar ${r ? "mx-cmn-clickable" : ""} ${o < 0 ? "mx-cmn-bar-negative" : ""}`,
+        onClick: r ? () => r?.(n) : void 0,
+        onKeyDown: u,
+        role: a ? "button" : void 0,
+        tabIndex: a ? 0 : void 0
+      }
+    ),
+    o < 0 && /* @__PURE__ */ t(c, {})
+  ] });
+}, h = (a, m, i) => {
+  const n = `expandBar-${Math.round(i)}`, e = y(n, { from: { height: 0 }, to: { height: i } });
+  return b({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "flex-end",
+    height: "100%",
+    "&.mx-cmn-negative": {
+      justifyContent: "flex-start"
+    },
+    "& .mx-cmn-bar": {
+      animationDelay: ".5s",
+      animationDuration: "1s",
+      animationFillMode: "forwards",
+      animationName: e,
+      animationTimingFunction: a.Easing.Default,
+      backgroundColor: m,
+      borderRadius: `${a.BorderRadius.Medium}px ${a.BorderRadius.Medium}px 0 0`,
+      maxHeight: i
+    },
+    "& .mx-cmn-bar-negative": {
+      borderRadius: `0 0 ${a.BorderRadius.Medium}px ${a.BorderRadius.Medium}px`,
+      marginTop: -a.Spacing.XTiny
+    },
+    "& .mx-cmn-bar-text": {
+      display: "flex",
+      justifyContent: "center",
+      marginBottom: a.Spacing.Tiny,
+      marginTop: a.Spacing.Tiny,
+      whiteSpace: "nowrap",
+      width: "100%"
+    }
+  });
+};
+export {
+  w as default
+};
+//# sourceMappingURL=Bar.js.map

package/dist/common/components/barchart/Bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.js","sources":["../../../../src/common/components/barchart/Bar.tsx"],"sourcesContent":["import React from 'react'\nimport { css, keyframes } from '@mxenabled/cssinjs'\n\nimport { Text, useTokens } from '@mxenabled/mxui'\n\ninterface BarProps {\n  ariaLabel?: string\n  color: string\n  height: number\n  index: number\n  label: string\n  onClick?: (index: number) => void\n  selectedIndex?: number\n  value: number\n}\n\n/**\n * The Bar component is what displays the colored (optionally clickable) bar\n *\n * @param ariaLabel OPTIONAL aria label used on the bar\n * @param color The color of the bar\n * @param height The pixel height of the bar\n * @param index The index of the bar\n * @param label The label to use above (on positive bars) or below (on negative bars)\n * @param onClick OPTIONAL function to call if the bar is clicked\n * @param selectedIndex OPTIONAL indicates the selected bar\n * @param value Value representing the bar\n */\nconst Bar: React.FC<BarProps> = ({\n  ariaLabel,\n  color,\n  height,\n  index,\n  label,\n  onClick,\n  selectedIndex,\n  value,\n}) => {\n  const tokens = useTokens()\n  const styles = getStyles(tokens, color, height)\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (onClick && (event.key === ' ' || event.key === 'Enter')) {\n      onClick(index)\n    }\n  }\n\n  const labelColor =\n    selectedIndex === undefined || selectedIndex === index ? 'primary' : 'secondary'\n\n  const BarLabel = () => (\n    <Text\n      aria-hidden={true}\n      bold={selectedIndex === index}\n      className=\"mx-cmn-bar-text\"\n      color={labelColor}\n      component=\"div\"\n      variant=\"Small\"\n    >\n      {label}\n    </Text>\n  )\n\n  return (\n    <div className={`mx-cmn-bar-container ${styles} ${value < 0 ? 'mx-cmn-negative' : ''}`}>\n      {/* Display the value on top for positive values */}\n      {value >= 0 && <BarLabel />}\n\n      <div\n        aria-label={ariaLabel}\n        className={`mx-cmn-bar ${onClick ? 'mx-cmn-clickable' : ''} ${\n          value < 0 ? 'mx-cmn-bar-negative' : ''\n        }`}\n        onClick={onClick ? () => onClick?.(index) : undefined}\n        onKeyDown={handleKeyDown}\n        role={ariaLabel ? 'button' : undefined}\n        tabIndex={ariaLabel ? 0 : undefined}\n      />\n\n      {/* Display the value on bottom for negative values */}\n      {value < 0 && <BarLabel />}\n    </div>\n  )\n}\n\nconst getStyles = (tokens: any, color: string, height: number) => {\n  const frameName = `expandBar-${Math.round(height)}`\n  const expandAnimation = keyframes(frameName, { from: { height: 0 }, to: { height } })\n\n  return css({\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'flex-end',\n    height: '100%',\n    '&.mx-cmn-negative': {\n      justifyContent: 'flex-start',\n    },\n    '& .mx-cmn-bar': {\n      animationDelay: '.5s',\n      animationDuration: '1s',\n      animationFillMode: 'forwards',\n      animationName: expandAnimation,\n      animationTimingFunction: tokens.Easing.Default,\n      backgroundColor: color,\n      borderRadius: `${tokens.BorderRadius.Medium}px ${tokens.BorderRadius.Medium}px 0 0`,\n      maxHeight: height,\n    },\n    '& .mx-cmn-bar-negative': {\n      borderRadius: `0 0 ${tokens.BorderRadius.Medium}px ${tokens.BorderRadius.Medium}px`,\n      marginTop: -tokens.Spacing.XTiny,\n    },\n    '& .mx-cmn-bar-text': {\n      display: 'flex',\n      justifyContent: 'center',\n      marginBottom: tokens.Spacing.Tiny,\n      marginTop: tokens.Spacing.Tiny,\n      whiteSpace: 'nowrap',\n      width: '100%',\n    },\n  })\n}\n\nexport default Bar\n"],"names":["Bar","ariaLabel","color","height","index","label","onClick","selectedIndex","value","tokens","useTokens","styles","getStyles","handleKeyDown","event","labelColor","BarLabel","jsx","Text","jsxs","frameName","expandAnimation","keyframes","css"],"mappings":";;;AA4BA,MAAMA,IAA0B,CAAC;AAAA,EAC/B,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AACJ,QAAMC,IAASC,KACTC,IAASC,EAAUH,GAAQP,GAAOC,CAAM,GAExCU,IAAgB,CAACC,MAA+C;AACpE,IAAIR,MAAYQ,EAAM,QAAQ,OAAOA,EAAM,QAAQ,YACjDR,EAAQF,CAAK;AAAA,EACf,GAGIW,IACJR,MAAkB,UAAaA,MAAkBH,IAAQ,YAAY,aAEjEY,IAAW,MACf,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,MAAMX,MAAkBH;AAAA,MACxB,WAAU;AAAA,MACV,OAAOW;AAAA,MACP,WAAU;AAAA,MACV,SAAQ;AAAA,MAEP,UAAAV;AAAA,IAAA;AAAA,EAAA;AAKH,SAAA,gBAAAc,EAAC,OAAI,EAAA,WAAW,wBAAwBR,CAAM,IAAIH,IAAQ,IAAI,oBAAoB,EAAE,IAEjF,UAAA;AAAA,IAASA,KAAA,uBAAMQ,GAAS,CAAA,CAAA;AAAA,IAEzB,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAYhB;AAAA,QACZ,WAAW,cAAcK,IAAU,qBAAqB,EAAE,IACxDE,IAAQ,IAAI,wBAAwB,EACtC;AAAA,QACA,SAASF,IAAU,MAAMA,IAAUF,CAAK,IAAI;AAAA,QAC5C,WAAWS;AAAA,QACX,MAAMZ,IAAY,WAAW;AAAA,QAC7B,UAAUA,IAAY,IAAI;AAAA,MAAA;AAAA,IAC5B;AAAA,IAGCO,IAAQ,KAAK,gBAAAS,EAACD,GAAS,CAAA,CAAA;AAAA,EAC1B,EAAA,CAAA;AAEJ,GAEMJ,IAAY,CAACH,GAAaP,GAAeC,MAAmB;AAChE,QAAMiB,IAAY,aAAa,KAAK,MAAMjB,CAAM,CAAC,IAC3CkB,IAAkBC,EAAUF,GAAW,EAAE,MAAM,EAAE,QAAQ,EAAK,GAAA,IAAI,EAAE,QAAAjB,EAAA,EAAU,CAAA;AAEpF,SAAOoB,EAAI;AAAA,IACT,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,qBAAqB;AAAA,MACnB,gBAAgB;AAAA,IAClB;AAAA,IACA,iBAAiB;AAAA,MACf,gBAAgB;AAAA,MAChB,mBAAmB;AAAA,MACnB,mBAAmB;AAAA,MACnB,eAAeF;AAAA,MACf,yBAAyBZ,EAAO,OAAO;AAAA,MACvC,iBAAiBP;AAAA,MACjB,cAAc,GAAGO,EAAO,aAAa,MAAM,MAAMA,EAAO,aAAa,MAAM;AAAA,MAC3E,WAAWN;AAAA,IACb;AAAA,IACA,0BAA0B;AAAA,MACxB,cAAc,OAAOM,EAAO,aAAa,MAAM,MAAMA,EAAO,aAAa,MAAM;AAAA,MAC/E,WAAW,CAACA,EAAO,QAAQ;AAAA,IAC7B;AAAA,IACA,sBAAsB;AAAA,MACpB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,cAAcA,EAAO,QAAQ;AAAA,MAC7B,WAAWA,EAAO,QAAQ;AAAA,MAC1B,YAAY;AAAA,MACZ,OAAO;AAAA,IACT;AAAA,EAAA,CACD;AACH;"}

package/dist/common/components/barchart/BarChart.js

@@ -0,0 +1,71 @@
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import A from "react";
+import { css as T } from "@mxenabled/cssinjs";
+import { useTokens as k } from "@mxenabled/mxui";
+import w from "./Legend.js";
+import L from "./BarColumn.js";
+import { valueReducer as N, sumReducer as E, rangeReducer as F, getSectionHeight as y, getAverageLineHeight as q } from "./Util.js";
+const U = ({
+  average: t,
+  barWidth: C = "8%",
+  color: r,
+  data: u,
+  height: g,
+  legendLabelAverage: B,
+  legendLabelMain: H,
+  onBarClick: M,
+  selectedIndex: n,
+  valueFormatter: R = (c) => `${c}`
+}) => {
+  const c = k(), S = z(c), a = u.reduce(N, []), $ = t !== void 0 ? t : a.reduce(E, 0) / a.length, h = Math.max(...a), p = Math.min(...a), v = a.reduce(F, 0), f = h >= 0, d = p < 0, i = y(f, d, g), m = y(d, f, g), b = q($, h, p, i || m), j = (e) => n === void 0 || e === n ? r : `${r}80`, x = () => /* @__PURE__ */ o(
+    L,
+    {
+      averageLineHeight: b,
+      bottomHeight: m,
+      color: "",
+      range: v,
+      topHeight: i,
+      value: 0,
+      width: void 0
+    }
+  );
+  return /* @__PURE__ */ l("div", { className: `mx-cmn-bar-chart ${S}`, children: [
+    /* @__PURE__ */ l("div", { className: "mx-cmn-chart-container", children: [
+      /* @__PURE__ */ o(x, {}),
+      u.map((e, s) => /* @__PURE__ */ l(A.Fragment, { children: [
+        /* @__PURE__ */ o(
+          L,
+          {
+            ariaLabel: e.ariaLabel,
+            averageLineHeight: b,
+            bottomHeight: m,
+            color: j(s),
+            index: s,
+            onClick: M,
+            range: v,
+            selectedIndex: n,
+            topHeight: i,
+            value: e.value,
+            valueLabel: R(e.value),
+            width: C,
+            xAxisLabel: e.label
+          }
+        ),
+        /* @__PURE__ */ o(x, {})
+      ] }, `column-${s}`))
+    ] }),
+    /* @__PURE__ */ o(w, { color: r, labelAverage: B, labelMain: H })
+  ] });
+}, z = (t) => T({
+  "& .mx-cmn-chart-container": {
+    alignItems: "flex-end",
+    display: "flex",
+    justifyContent: "space-evenly",
+    marginTop: t.Spacing.Large,
+    marginBottom: t.Spacing.Medium
+  }
+});
+export {
+  U as default
+};
+//# sourceMappingURL=BarChart.js.map

package/dist/common/components/barchart/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.js","sources":["../../../../src/common/components/barchart/BarChart.tsx"],"sourcesContent":["import React from 'react'\nimport { css } from '@mxenabled/cssinjs'\n\nimport { useTokens } from '@mxenabled/mxui'\n\nimport Legend from './Legend'\nimport BarColumn from './BarColumn'\nimport {\n  getAverageLineHeight,\n  getSectionHeight,\n  rangeReducer,\n  sumReducer,\n  valueReducer,\n} from './Util'\n\nexport type BarChartData = {\n  ariaLabel: string\n  label: string\n  value: number\n}\n\nexport interface BarChartProps {\n  average?: number\n  barWidth?: number | string\n  color: string\n  data: BarChartData[]\n  height: number\n  legendLabelAverage: string\n  legendLabelMain: string\n  onBarClick?: (index: number) => void\n  selectedIndex?: number\n  valueFormatter?: (value: number) => string\n}\n\n/**\n * BarChart component to display a vertical bar chart given an array of data\n *\n * @param average OPTIONAL custom average not based on average or all value\n * @param barWidth OPTIONAL pixel or percentage width of bars\n * @param color Color of the bars\n * @param data An array of chart data. Chart data must contain and aria label, label and value.\n * @param height Height in pixels of the chart\n * @param legendLabelAverage Label to use on legend for the average value\n * @param legendLabelMain Label to use on the legend for the data\n * @param onBarClick OPTIONAL function to call if bar is clicked\n * @param selectedIndex OPTIONAL indicates the selected bar\n * @param valueFormatter OPTIONAL function to call to format the value displayed with the bars\n */\nconst BarChart: React.FC<BarChartProps> = ({\n  average,\n  barWidth = '8%',\n  color,\n  data,\n  height,\n  legendLabelAverage,\n  legendLabelMain,\n  onBarClick,\n  selectedIndex,\n  valueFormatter = (value: number) => `${value}`,\n}) => {\n  const tokens = useTokens()\n  const styles = getStyles(tokens)\n\n  const values = data.reduce(valueReducer, [])\n  const avg = average !== undefined ? average : values.reduce(sumReducer, 0) / values.length\n  const max = Math.max(...values)\n  const min = Math.min(...values)\n  const range = values.reduce(rangeReducer, 0)\n\n  const hasTop = max >= 0\n  const hasBottom = min < 0\n  const topHeight = getSectionHeight(hasTop, hasBottom, height)\n  const bottomHeight = getSectionHeight(hasBottom, hasTop, height)\n  const averageLineHeight = getAverageLineHeight(avg, max, min, topHeight || bottomHeight)\n\n  const getBarColor = (index: number) => {\n    if (selectedIndex === undefined || index === selectedIndex) {\n      return color\n    }\n    return `${color}80`\n  }\n\n  const EmptyColumn = () => (\n    <BarColumn\n      averageLineHeight={averageLineHeight}\n      bottomHeight={bottomHeight}\n      color={''}\n      range={range}\n      topHeight={topHeight}\n      value={0}\n      width={undefined}\n    />\n  )\n\n  return (\n    <div className={`mx-cmn-bar-chart ${styles}`}>\n      <div className=\"mx-cmn-chart-container\">\n        <EmptyColumn />\n        {data.map((d, index) => (\n          <React.Fragment key={`column-${index}`}>\n            <BarColumn\n              ariaLabel={d.ariaLabel}\n              averageLineHeight={averageLineHeight}\n              bottomHeight={bottomHeight}\n              color={getBarColor(index)}\n              index={index}\n              onClick={onBarClick}\n              range={range}\n              selectedIndex={selectedIndex}\n              topHeight={topHeight}\n              value={d.value}\n              valueLabel={valueFormatter(d.value)}\n              width={barWidth}\n              xAxisLabel={d.label}\n            />\n            <EmptyColumn />\n          </React.Fragment>\n        ))}\n      </div>\n      <Legend color={color} labelAverage={legendLabelAverage} labelMain={legendLabelMain} />\n    </div>\n  )\n}\n\nconst getStyles = (tokens: any) =>\n  css({\n    '& .mx-cmn-chart-container': {\n      alignItems: 'flex-end',\n      display: 'flex',\n      justifyContent: 'space-evenly',\n      marginTop: tokens.Spacing.Large,\n      marginBottom: tokens.Spacing.Medium,\n    },\n  })\n\nexport default BarChart\n"],"names":["BarChart","average","barWidth","color","data","height","legendLabelAverage","legendLabelMain","onBarClick","selectedIndex","valueFormatter","value","tokens","useTokens","styles","getStyles","values","valueReducer","avg","sumReducer","max","min","range","rangeReducer","hasTop","hasBottom","topHeight","getSectionHeight","bottomHeight","averageLineHeight","getAverageLineHeight","getBarColor","index","EmptyColumn","jsx","BarColumn","jsxs","d","React","Legend","css"],"mappings":";;;;;;;AAgDA,MAAMA,IAAoC,CAAC;AAAA,EACzC,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC,IAAiB,CAACC,MAAkB,GAAGA,CAAK;AAC9C,MAAM;AACJ,QAAMC,IAASC,KACTC,IAASC,EAAUH,CAAM,GAEzBI,IAASZ,EAAK,OAAOa,GAAc,CAAE,CAAA,GACrCC,IAAMjB,MAAY,SAAYA,IAAUe,EAAO,OAAOG,GAAY,CAAC,IAAIH,EAAO,QAC9EI,IAAM,KAAK,IAAI,GAAGJ,CAAM,GACxBK,IAAM,KAAK,IAAI,GAAGL,CAAM,GACxBM,IAAQN,EAAO,OAAOO,GAAc,CAAC,GAErCC,IAASJ,KAAO,GAChBK,IAAYJ,IAAM,GAClBK,IAAYC,EAAiBH,GAAQC,GAAWpB,CAAM,GACtDuB,IAAeD,EAAiBF,GAAWD,GAAQnB,CAAM,GACzDwB,IAAoBC,EAAqBZ,GAAKE,GAAKC,GAAKK,KAAaE,CAAY,GAEjFG,IAAc,CAACC,MACfvB,MAAkB,UAAauB,MAAUvB,IACpCN,IAEF,GAAGA,CAAK,MAGX8B,IAAc,MAClB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,mBAAAN;AAAA,MACA,cAAAD;AAAA,MACA,OAAO;AAAA,MACP,OAAAN;AAAA,MACA,WAAAI;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EAAA;AAIX,SACG,gBAAAU,EAAA,OAAA,EAAI,WAAW,oBAAoBtB,CAAM,IACxC,UAAA;AAAA,IAAC,gBAAAsB,EAAA,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,MAAA,gBAAAF,EAACD,GAAY,EAAA;AAAA,MACZ7B,EAAK,IAAI,CAACiC,GAAGL,MACX,gBAAAI,EAAAE,EAAM,UAAN,EACC,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWE,EAAE;AAAA,YACb,mBAAAR;AAAA,YACA,cAAAD;AAAA,YACA,OAAOG,EAAYC,CAAK;AAAA,YACxB,OAAAA;AAAA,YACA,SAASxB;AAAA,YACT,OAAAc;AAAA,YACA,eAAAb;AAAA,YACA,WAAAiB;AAAA,YACA,OAAOW,EAAE;AAAA,YACT,YAAY3B,EAAe2B,EAAE,KAAK;AAAA,YAClC,OAAOnC;AAAA,YACP,YAAYmC,EAAE;AAAA,UAAA;AAAA,QAChB;AAAA,0BACCJ,GAAY,EAAA;AAAA,MAhBM,EAAA,GAAA,UAAUD,CAAK,EAiBpC,CACD;AAAA,IAAA,GACH;AAAA,sBACCO,GAAO,EAAA,OAAApC,GAAc,cAAcG,GAAoB,WAAWC,GAAiB;AAAA,EACtF,EAAA,CAAA;AAEJ,GAEMQ,IAAY,CAACH,MACjB4B,EAAI;AAAA,EACF,6BAA6B;AAAA,IAC3B,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,WAAW5B,EAAO,QAAQ;AAAA,IAC1B,cAAcA,EAAO,QAAQ;AAAA,EAC/B;AACF,CAAC;"}

package/dist/common/components/barchart/BarColumn.js

@@ -0,0 +1,87 @@
+import { jsxs as v, jsx as m } from "react/jsx-runtime";
+import { css as B } from "@mxenabled/cssinjs";
+import { useTokens as T, Text as N } from "@mxenabled/mxui";
+import p from "./Bar.js";
+const w = ({
+  ariaLabel: r,
+  averageLineHeight: t,
+  bottomHeight: l,
+  color: n,
+  index: a = -1,
+  onClick: o,
+  range: s,
+  selectedIndex: c,
+  topHeight: e,
+  value: i,
+  valueLabel: h = "",
+  width: g,
+  xAxisLabel: d = ""
+}) => {
+  const x = T(), b = u(x, g), y = i / s * e, S = Math.abs(i) / s * l, f = c === void 0 || c === a ? "primary" : "secondary";
+  return /* @__PURE__ */ v("div", { className: `mx-cmn-barchart-bar-column ${b}`, children: [
+    /* @__PURE__ */ m("div", { style: { height: e }, children: i >= 0 && /* @__PURE__ */ m(
+      p,
+      {
+        ariaLabel: r,
+        color: n,
+        height: y,
+        index: a,
+        label: h,
+        onClick: o,
+        selectedIndex: c,
+        value: i
+      }
+    ) }),
+    /* @__PURE__ */ m("div", { className: "mx-cmn-zero-line" }),
+    t !== 0 && /* @__PURE__ */ m("div", { className: "mx-cmn-chart-average", style: { bottom: t } }),
+    /* @__PURE__ */ m("div", { style: { height: l }, children: i < 0 && /* @__PURE__ */ m(
+      p,
+      {
+        ariaLabel: r,
+        color: n,
+        height: S,
+        index: a,
+        label: h,
+        onClick: o,
+        value: i
+      }
+    ) }),
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: `mx-cmn-bar-label ${o ? "mx-cmn-clickable" : ""}`,
+        onClick: o ? () => o(a) : void 0,
+        children: /* @__PURE__ */ m(N, { bold: c === a, color: f, variant: "Small", children: d })
+      }
+    )
+  ] });
+}, u = (r, t) => B({
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: t === void 0 ? 1 : 0,
+  width: t,
+  "& .mx-cmn-chart-average": {
+    borderTop: `${r.Spacing.XTiny}px dotted ${r.Color.Neutral500}`,
+    position: "relative",
+    marginRight: r.Spacing.XTiny
+  },
+  "& .mx-cmn-zero-line": {
+    borderBottom: "1px solid text.primary",
+    width: "100%"
+  },
+  "& .mx-cmn-bar-label": {
+    minHeight: r.Spacing.Medium,
+    maxHeight: r.Spacing.Medium,
+    marginBottom: r.Spacing.XSmall,
+    marginTop: r.Spacing.XSmall,
+    textAlign: "center",
+    width: "100%"
+  },
+  "& .mx-cmn-clickable": {
+    cursor: "pointer"
+  }
+});
+export {
+  w as default
+};
+//# sourceMappingURL=BarColumn.js.map

package/dist/common/components/barchart/BarColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarColumn.js","sources":["../../../../src/common/components/barchart/BarColumn.tsx"],"sourcesContent":["import React from 'react'\nimport { css } from '@mxenabled/cssinjs'\n\nimport { Text, useTokens } from '@mxenabled/mxui'\n\nimport Bar from './Bar'\n\ninterface BarColumnProps {\n  ariaLabel?: string\n  averageLineHeight: number\n  bottomHeight: number\n  color: string\n  index?: number\n  onClick?: (index: number) => void\n  range: number\n  selectedIndex?: number\n  topHeight: number\n  value: number\n  valueLabel?: string\n  width?: number | string\n  xAxisLabel?: string\n}\n\n/**\n * The BarColumn component represents a single vertical slice of the bar chart.  It contains from top to bottom\n * the positive section, which will only display a bar if value > 0, the zero line, the average line, negative\n * section, which will only display a bar if value < 0 and the X-Axis label.\n *\n * @param ariaLabel OPTIONAL aria label used to label the bar\n * @param averageLineHeight the pixel height above/below the zero line for the dashed average line\n * @param bottomHeight the height of the bottom (negative) section\n * @param color the color of the bar\n * @param index OPTIONAL index of the bar (Only used when bar is clickable)\n * @param onClick OPTIONAL function to call if the bar is clicked\n * @param range\n * @param selectedIndex OPTIONAL indicates the selected bar\n * @param topHeight the pixel height of the top (positvie section)\n * @param value the value for the bar\n * @param valueLabel OPTIONAL string value to use for the bar\n * @param width OPTIONAL pixel or percentage width of the bar\n * @param xAxisLabel label for the X-Axis\n */\nconst BarColumn: React.FC<BarColumnProps> = ({\n  ariaLabel,\n  averageLineHeight,\n  bottomHeight,\n  color,\n  index = -1,\n  onClick,\n  range,\n  selectedIndex,\n  topHeight,\n  value,\n  valueLabel = '',\n  width,\n  xAxisLabel = '',\n}) => {\n  const tokens = useTokens()\n  const styles = getStyles(tokens, width)\n\n  const topBarHeight = (value / range) * topHeight\n  const bottomBarHeight = (Math.abs(value) / range) * bottomHeight\n  const xAxisColor =\n    selectedIndex === undefined || selectedIndex === index ? 'primary' : 'secondary'\n\n  return (\n    <div className={`mx-cmn-barchart-bar-column ${styles}`}>\n      {/* Top (Positive) Chart Area */}\n      <div style={{ height: topHeight }}>\n        {/* Only display the bar here if it has a positive value */}\n        {value >= 0 && (\n          <Bar\n            ariaLabel={ariaLabel}\n            color={color}\n            height={topBarHeight}\n            index={index}\n            label={valueLabel}\n            onClick={onClick}\n            selectedIndex={selectedIndex}\n            value={value}\n          />\n        )}\n      </div>\n\n      {/* Zero Line */}\n      <div className=\"mx-cmn-zero-line\" />\n\n      {/* Average Line - Only display if average is not 0 */}\n      {averageLineHeight !== 0 && (\n        <div className=\"mx-cmn-chart-average\" style={{ bottom: averageLineHeight }} />\n      )}\n\n      {/* Bottom (Negative) Chart Area */}\n      <div style={{ height: bottomHeight }}>\n        {/* Only display the bar here if it has a negative value */}\n        {value < 0 && (\n          <Bar\n            ariaLabel={ariaLabel}\n            color={color}\n            height={bottomBarHeight}\n            index={index}\n            label={valueLabel}\n            onClick={onClick}\n            value={value}\n          />\n        )}\n      </div>\n\n      {/* X-Axis label */}\n      <div\n        className={`mx-cmn-bar-label ${onClick ? 'mx-cmn-clickable' : ''}`}\n        onClick={onClick ? () => onClick(index) : undefined}\n      >\n        <Text bold={selectedIndex === index} color={xAxisColor} variant=\"Small\">\n          {xAxisLabel}\n        </Text>\n      </div>\n    </div>\n  )\n}\n\nconst getStyles = (tokens: any, width: number | string | undefined) =>\n  css({\n    display: 'flex',\n    flexDirection: 'column',\n    flexGrow: width === undefined ? 1 : 0,\n    width,\n    '& .mx-cmn-chart-average': {\n      borderTop: `${tokens.Spacing.XTiny}px dotted ${tokens.Color.Neutral500}`,\n      position: 'relative',\n      marginRight: tokens.Spacing.XTiny,\n    },\n    '& .mx-cmn-zero-line': {\n      borderBottom: '1px solid text.primary',\n      width: '100%',\n    },\n    '& .mx-cmn-bar-label': {\n      minHeight: tokens.Spacing.Medium,\n      maxHeight: tokens.Spacing.Medium,\n      marginBottom: tokens.Spacing.XSmall,\n      marginTop: tokens.Spacing.XSmall,\n      textAlign: 'center',\n      width: '100%',\n    },\n    '& .mx-cmn-clickable': {\n      cursor: 'pointer',\n    },\n  })\n\nexport default BarColumn\n"],"names":["BarColumn","ariaLabel","averageLineHeight","bottomHeight","color","index","onClick","range","selectedIndex","topHeight","value","valueLabel","width","xAxisLabel","tokens","useTokens","styles","getStyles","topBarHeight","bottomBarHeight","xAxisColor","jsxs","jsx","Bar","Text","css"],"mappings":";;;;AA0CA,MAAMA,IAAsC,CAAC;AAAA,EAC3C,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,OAAAC;AAAA,EACA,YAAAC,IAAa;AACf,MAAM;AACJ,QAAMC,IAASC,KACTC,IAASC,EAAUH,GAAQF,CAAK,GAEhCM,IAAgBR,IAAQH,IAASE,GACjCU,IAAmB,KAAK,IAAIT,CAAK,IAAIH,IAASJ,GAC9CiB,IACJZ,MAAkB,UAAaA,MAAkBH,IAAQ,YAAY;AAEvE,SACG,gBAAAgB,EAAA,OAAA,EAAI,WAAW,8BAA8BL,CAAM,IAElD,UAAA;AAAA,IAAA,gBAAAM,EAAC,SAAI,OAAO,EAAE,QAAQb,EAAU,GAE7B,eAAS,KACR,gBAAAa;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAAtB;AAAA,QACA,OAAAG;AAAA,QACA,QAAQc;AAAA,QACR,OAAAb;AAAA,QACA,OAAOM;AAAA,QACP,SAAAL;AAAA,QACA,eAAAE;AAAA,QACA,OAAAE;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,IAGA,gBAAAY,EAAC,OAAI,EAAA,WAAU,mBAAmB,CAAA;AAAA,IAGjCpB,MAAsB,KACrB,gBAAAoB,EAAC,OAAI,EAAA,WAAU,wBAAuB,OAAO,EAAE,QAAQpB,EAAqB,EAAA,CAAA;AAAA,IAI9E,gBAAAoB,EAAC,SAAI,OAAO,EAAE,QAAQnB,EAAa,GAEhC,cAAQ,KACP,gBAAAmB;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAAtB;AAAA,QACA,OAAAG;AAAA,QACA,QAAQe;AAAA,QACR,OAAAd;AAAA,QACA,OAAOM;AAAA,QACP,SAAAL;AAAA,QACA,OAAAI;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,IAGA,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,oBAAoBhB,IAAU,qBAAqB,EAAE;AAAA,QAChE,SAASA,IAAU,MAAMA,EAAQD,CAAK,IAAI;AAAA,QAE1C,UAAA,gBAAAiB,EAACE,KAAK,MAAMhB,MAAkBH,GAAO,OAAOe,GAAY,SAAQ,SAC7D,UACHP,EAAA,CAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ,GAEMI,IAAY,CAACH,GAAaF,MAC9Ba,EAAI;AAAA,EACF,SAAS;AAAA,EACT,eAAe;AAAA,EACf,UAAUb,MAAU,SAAY,IAAI;AAAA,EACpC,OAAAA;AAAA,EACA,2BAA2B;AAAA,IACzB,WAAW,GAAGE,EAAO,QAAQ,KAAK,aAAaA,EAAO,MAAM,UAAU;AAAA,IACtE,UAAU;AAAA,IACV,aAAaA,EAAO,QAAQ;AAAA,EAC9B;AAAA,EACA,uBAAuB;AAAA,IACrB,cAAc;AAAA,IACd,OAAO;AAAA,EACT;AAAA,EACA,uBAAuB;AAAA,IACrB,WAAWA,EAAO,QAAQ;AAAA,IAC1B,WAAWA,EAAO,QAAQ;AAAA,IAC1B,cAAcA,EAAO,QAAQ;AAAA,IAC7B,WAAWA,EAAO,QAAQ;AAAA,IAC1B,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,uBAAuB;AAAA,IACrB,QAAQ;AAAA,EACV;AACF,CAAC;"}

package/dist/common/components/barchart/Legend.js

@@ -0,0 +1,46 @@
+import { jsxs as i, jsx as m } from "react/jsx-runtime";
+import { css as n } from "@mxenabled/cssinjs";
+import { useTokens as o, Text as r } from "@mxenabled/mxui";
+const p = ({ color: a, labelAverage: l, labelMain: e }) => {
+  const t = o(), c = d(t, a);
+  return /* @__PURE__ */ i("div", { className: `mx-cmn-bar-chart-legend ${c}`, children: [
+    /* @__PURE__ */ m("div", { "aria-label": e, className: "mx-cmn-color-square", role: "img" }),
+    /* @__PURE__ */ m(r, { variant: "XSmall", children: e }),
+    /* @__PURE__ */ i("div", { "aria-label": l, className: "mx-cmn-triple-dot", role: "img", children: [
+      /* @__PURE__ */ m("div", { className: "mx-cmn-dot" }),
+      /* @__PURE__ */ m("div", { className: "mx-cmn-dot" }),
+      /* @__PURE__ */ m("div", { className: "mx-cmn-dot" })
+    ] }),
+    /* @__PURE__ */ m(r, { variant: "XSmall", children: l })
+  ] });
+}, d = (a, l) => n({
+  alignItems: "center",
+  display: "flex",
+  gap: a.Spacing.XSmall,
+  justifyContent: "flex-end",
+  marginRight: a.Spacing.XLarge,
+  paddingBottom: a.Spacing.XSmall,
+  width: "100%",
+  "& .mx-cmn-color-square": {
+    backgroundColor: l,
+    height: 6,
+    width: 6
+  },
+  "& .mx-cmn-triple-dot": {
+    display: "flex",
+    gap: 1
+  },
+  "& .mx-cmn-dot": {
+    backgroundColor: a.Color.Neutral500,
+    height: 3,
+    width: 3,
+    borderRadius: 1.5
+  },
+  "& > .kyper-text": {
+    marginRight: a.Spacing.XSmall
+  }
+});
+export {
+  p as default
+};
+//# sourceMappingURL=Legend.js.map

package/dist/common/components/barchart/Legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Legend.js","sources":["../../../../src/common/components/barchart/Legend.tsx"],"sourcesContent":["import React from 'react'\nimport { css } from '@mxenabled/cssinjs'\n\nimport { Text, useTokens } from '@mxenabled/mxui'\n\ninterface BarChartLegendProps {\n  color: string\n  labelAverage: string\n  labelMain: string\n}\n\nconst Legend: React.FC<BarChartLegendProps> = ({ color, labelAverage, labelMain }) => {\n  const tokens = useTokens()\n  const styles = getStyles(tokens, color)\n\n  return (\n    <div className={`mx-cmn-bar-chart-legend ${styles}`}>\n      <div aria-label={labelMain} className=\"mx-cmn-color-square\" role=\"img\" />\n      <Text variant=\"XSmall\">{labelMain}</Text>\n\n      <div aria-label={labelAverage} className=\"mx-cmn-triple-dot\" role=\"img\">\n        <div className=\"mx-cmn-dot\" />\n        <div className=\"mx-cmn-dot\" />\n        <div className=\"mx-cmn-dot\" />\n      </div>\n      <Text variant=\"XSmall\">{labelAverage}</Text>\n    </div>\n  )\n}\n\nconst getStyles = (tokens: any, color: string) =>\n  css({\n    alignItems: 'center',\n    display: 'flex',\n    gap: tokens.Spacing.XSmall,\n    justifyContent: 'flex-end',\n    marginRight: tokens.Spacing.XLarge,\n    paddingBottom: tokens.Spacing.XSmall,\n    width: '100%',\n    '& .mx-cmn-color-square': {\n      backgroundColor: color,\n      height: 6,\n      width: 6,\n    },\n    '& .mx-cmn-triple-dot': {\n      display: 'flex',\n      gap: 1,\n    },\n    '& .mx-cmn-dot': {\n      backgroundColor: tokens.Color.Neutral500,\n      height: 3,\n      width: 3,\n      borderRadius: 1.5,\n    },\n    '& > .kyper-text': {\n      marginRight: tokens.Spacing.XSmall,\n    },\n  })\n\nexport default Legend\n"],"names":["Legend","color","labelAverage","labelMain","tokens","useTokens","styles","getStyles","jsxs","jsx","Text","css"],"mappings":";;;AAWA,MAAMA,IAAwC,CAAC,EAAE,OAAAC,GAAO,cAAAC,GAAc,WAAAC,QAAgB;AACpF,QAAMC,IAASC,KACTC,IAASC,EAAUH,GAAQH,CAAK;AAEtC,SACG,gBAAAO,EAAA,OAAA,EAAI,WAAW,2BAA2BF,CAAM,IAC/C,UAAA;AAAA,IAAA,gBAAAG,EAAC,SAAI,cAAYN,GAAW,WAAU,uBAAsB,MAAK,OAAM;AAAA,IACtE,gBAAAM,EAAAC,GAAA,EAAK,SAAQ,UAAU,UAAUP,GAAA;AAAA,sBAEjC,OAAI,EAAA,cAAYD,GAAc,WAAU,qBAAoB,MAAK,OAChE,UAAA;AAAA,MAAC,gBAAAO,EAAA,OAAA,EAAI,WAAU,aAAa,CAAA;AAAA,MAC5B,gBAAAA,EAAC,OAAI,EAAA,WAAU,aAAa,CAAA;AAAA,MAC5B,gBAAAA,EAAC,OAAI,EAAA,WAAU,aAAa,CAAA;AAAA,IAAA,GAC9B;AAAA,IACC,gBAAAA,EAAAC,GAAA,EAAK,SAAQ,UAAU,UAAaR,GAAA;AAAA,EACvC,EAAA,CAAA;AAEJ,GAEMK,IAAY,CAACH,GAAaH,MAC9BU,EAAI;AAAA,EACF,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,KAAKP,EAAO,QAAQ;AAAA,EACpB,gBAAgB;AAAA,EAChB,aAAaA,EAAO,QAAQ;AAAA,EAC5B,eAAeA,EAAO,QAAQ;AAAA,EAC9B,OAAO;AAAA,EACP,0BAA0B;AAAA,IACxB,iBAAiBH;AAAA,IACjB,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA,wBAAwB;AAAA,IACtB,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiBG,EAAO,MAAM;AAAA,IAC9B,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,cAAc;AAAA,EAChB;AAAA,EACA,mBAAmB;AAAA,IACjB,aAAaA,EAAO,QAAQ;AAAA,EAC9B;AACF,CAAC;"}

package/dist/common/components/barchart/Util.js

@@ -0,0 +1,12 @@
+const s = (e, t) => e + t, c = (e, t) => Math.abs(t) > e ? Math.abs(t) : e, o = (e, t) => [...e, t.value], g = (e, t, n) => {
+  const r = e && t ? n / 2 : n;
+  return e ? r : 0;
+}, u = (e, t, n, r) => e / (t < 0 ? -n : t) * r || 0;
+export {
+  u as getAverageLineHeight,
+  g as getSectionHeight,
+  c as rangeReducer,
+  s as sumReducer,
+  o as valueReducer
+};
+//# sourceMappingURL=Util.js.map

package/dist/common/components/barchart/Util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Util.js","sources":["../../../../src/common/components/barchart/Util.ts"],"sourcesContent":["/**\n * Returns a sum\n *\n * @param acc accumulator\n * @param value current value\n */\nexport const sumReducer = (acc: number, value: number) => acc + value\n\n/**\n * Returns the max range\n *\n * @param acc accumulator\n * @param value current value\n */\nexport const rangeReducer = (acc: number, value: number) =>\n  Math.abs(value) > acc ? Math.abs(value) : acc\n\n/**\n * Returns an array with the value of an object added\n *\n * @param acc accumulator\n * @param value current value\n */\nexport const valueReducer = (acc: number[], value: { value: number }) => [...acc, value.value]\n\n/**\n * Returns full height if only the first section is visible, half height if both sections\n * are visible and 0 if the first section is not visible\n *\n * @param hasSection1 If the first section is visible\n * @param hasSection2 If the second section is visible\n * @param fullHeight The full height\n */\nexport const getSectionHeight = (\n  hasSection1: boolean,\n  hasSection2: boolean,\n  fullHeight: number,\n) => {\n  const height = hasSection1 && hasSection2 ? fullHeight / 2 : fullHeight\n  return !hasSection1 ? 0 : height\n}\n\n/**\n * Returns the +/- pixel height of the average line.  This is calcluated using the percentange of average\n * to max value multiplied by the height.  If the max value is less than 0, then we use negative min value.\n *\n * @param average The average value\n * @param max The maximum value\n * @param min The minimum value\n * @param height The height of the container the average line displays in.\n */\nexport const getAverageLineHeight = (average: number, max: number, min: number, height: number) => {\n  return (average / (max < 0 ? -min : max)) * height || 0\n}\n"],"names":["sumReducer","acc","value","rangeReducer","valueReducer","getSectionHeight","hasSection1","hasSection2","fullHeight","height","getAverageLineHeight","average","max","min"],"mappings":"AAMO,MAAMA,IAAa,CAACC,GAAaC,MAAkBD,IAAMC,GAQnDC,IAAe,CAACF,GAAaC,MACxC,KAAK,IAAIA,CAAK,IAAID,IAAM,KAAK,IAAIC,CAAK,IAAID,GAQ/BG,IAAe,CAACH,GAAeC,MAA6B,CAAC,GAAGD,GAAKC,EAAM,KAAK,GAUhFG,IAAmB,CAC9BC,GACAC,GACAC,MACG;AACH,QAAMC,IAASH,KAAeC,IAAcC,IAAa,IAAIA;AACtD,SAACF,IAAkBG,IAAJ;AACxB,GAWaC,IAAuB,CAACC,GAAiBC,GAAaC,GAAaJ,MACtEE,KAAWC,IAAM,IAAI,CAACC,IAAMD,KAAQH,KAAU;"}

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

@@ -0,0 +1,132 @@
+import { jsx as n, jsxs as D } from "react/jsx-runtime";
+import l from "react";
+import { css as B } from "@mxenabled/cssinjs";
+import { addDays as O } from "date-fns/addDays";
+import { addMonths as R } from "date-fns/addMonths";
+import { eachDayOfInterval as b } from "date-fns/eachDayOfInterval";
+import { eachWeekOfInterval as L } from "date-fns/eachWeekOfInterval";
+import { endOfMonth as T } from "date-fns/endOfMonth";
+import { format as W } from "date-fns/format";
+import { isBefore as H } 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 { useTokens as F, Text as G } from "@mxenabled/mxui";
+import J from "./Header.js";
+import K from "./Day.js";
+const Q = 340, g = 44;
+var U = /* @__PURE__ */ ((e) => (e.None = "None", e.Single = "Single", e.Range = "Range", e))(U || {});
+const xt = ({
+  copy: e,
+  beginDate: s = void 0,
+  endDate: u = void 0,
+  onDateSelected: k,
+  onRangeSelected: p,
+  selectionType: d = "Single"
+  /* Single */
+}) => {
+  const S = F(), C = V(S), [o, f] = l.useState(N), [r, m] = l.useState(s), [v, c] = l.useState(u);
+  l.useEffect(() => {
+    m(s), c(u), s && f(s);
+  }, [s, u]);
+  const w = l.useMemo(() => {
+    const t = L({ start: $(o), end: T(o) }), i = [];
+    for (let a = 0; a < t.length; a++) {
+      const h = t[a], y = b({ start: h, end: O(h, 6) }), M = [];
+      for (let x = 0; x < y.length; x++)
+        M.push(y[x]);
+      i.push(M);
+    }
+    return i;
+  }, [o]), E = (t) => {
+    if (d !== "None") {
+      if (d === "Single") {
+        m(t), k?.(t);
+        return;
+      }
+      !r || v ? (m(t), c(void 0)) : H(t, r) ? (c(r), m(t), p?.(t, r)) : (c(t), p?.(r, t));
+    }
+  }, I = () => {
+    const t = N();
+    f(t), d !== "None" && (m(t), d === "Single" ? k?.(t) : (c(t), p?.(t, t)));
+  }, j = () => {
+    f(R(o, 1));
+  }, A = () => {
+    f(z(o, 1));
+  };
+  return /* @__PURE__ */ n("div", { className: `mx-cmn-calendar ${C}`, children: /* @__PURE__ */ D(q, { sx: { boxShadow: "none" }, children: [
+    /* @__PURE__ */ n(
+      J,
+      {
+        copy: e,
+        date: o,
+        onNextClick: j,
+        onPreviousClick: A
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: "mx-cmn-calendar-header-row", children: w[0].map((t, i) => /* @__PURE__ */ n("div", { className: "mx-cmn-calendar-header-cell", children: /* @__PURE__ */ n(G, { bold: !0, variant: "Small", children: W(t, "EEEEE") }) }, i)) }),
+    w.map((t, i) => /* @__PURE__ */ n("div", { className: "mx-cmn-calendar-week", children: t.map((a, h) => /* @__PURE__ */ n(
+      K,
+      {
+        beginDate: r,
+        date: a,
+        endDate: v,
+        isInMonth: _(a, o),
+        onClick: E
+      },
+      h
+    )) }, `w-${i}`)),
+    /* @__PURE__ */ n("div", { className: "mx-cmn-calendar-today-container", children: /* @__PURE__ */ n(Z, { onClick: I, size: "small", variant: "text", children: e.today }) })
+  ] }) });
+}, V = (e) => B({
+  width: Q,
+  "& .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: g,
+      width: g,
+      minWidth: g,
+      "& .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: e.Spacing.Medium,
+    textAlign: "center",
+    width: "100%",
+    "& > .MuiButton-root": {
+      display: "inline-block",
+      marginLeft: "auto",
+      marginRight: "auto"
+    }
+  }
+});
+export {
+  Q as CALENDAR_WIDTH,
+  U as CalendarSelectionTypes,
+  g as DATE_SIZE,
+  xt as default
+};
+//# sourceMappingURL=Calendar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","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, useTokens } 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 tokens = useTokens()\n  const styles = getStyles(tokens)\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=\"Small\">\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 = (tokens: any) =>\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: tokens.Spacing.Medium,\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"],"names":["CALENDAR_WIDTH","DATE_SIZE","CalendarSelectionTypes","Calendar","copy","beginDateProp","endDateProp","onDateSelected","onRangeSelected","selectionType","tokens","useTokens","styles","getStyles","date","setDate","React","startOfToday","beginDate","setBeginDate","endDate","setEndDate","weeks","weeksInInterval","eachWeekOfInterval","startOfMonth","endOfMonth","i","weekStart","days","eachDayOfInterval","addDays","week","j","handleSelection","isBefore","handleTodayClick","today","handleNextMonthClick","addMonths","handlePreviousMonthClick","subMonths","jsx","jsxs","Paper","Header","day","index","Text","format","Day","isSameMonth","Button","css"],"mappings":"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"}

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

@@ -0,0 +1,97 @@
+import { jsx as c } from "react/jsx-runtime";
+import { css as y } from "@mxenabled/cssinjs";
+import { format as u } from "date-fns/format";
+import { isSameDay as m } from "date-fns/isSameDay";
+import { isWithinInterval as h } from "date-fns/isWithinInterval";
+import { startOfToday as g } from "date-fns/startOfToday";
+import R from "@mui/material/Button";
+import S from "@mui/material/styles/useTheme";
+import { Text as $ } from "@mxenabled/mxui";
+import { DATE_SIZE as a } from "./Calendar.js";
+const j = ({ beginDate: o, date: r, endDate: t, isInMonth: s, onClick: i }) => {
+  const d = S(), l = B(d), e = o && t && h(r, { start: o, end: t }) && !m(r, o) && !m(r, t), x = o && t && m(o, r) && !m(o, t), p = t && o && m(t, r) && !m(o, t), n = o && m(o, r) || t && m(t, r), f = m(r, g());
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: `
+        mx-cmn-calendar-day
+        ${l}
+        ${s ? "" : "mx-cmn-out-of-month"}
+        ${e ? "mx-cmn-date-interval" : ""}
+      `,
+      children: /* @__PURE__ */ c(
+        R,
+        {
+          className: `
+          mx-cmn-calendar-day-button
+          ${x ? "mx-cmn-range-start" : ""}
+          ${p ? "mx-cmn-range-end" : ""}
+        `,
+          color: n ? "primary" : "secondary",
+          onClick: () => i(r),
+          variant: n ? "contained" : "text",
+          children: /* @__PURE__ */ c(
+            $,
+            {
+              className: `
+            mx-cmn-calendar-day-text
+            ${n ? "mx-cmn-day-selected" : ""}
+            ${f ? "mx-cmn-today" : ""}`,
+              variant: "Small",
+              children: u(r, "d")
+            }
+          )
+        }
+      )
+    }
+  );
+}, B = (o) => y({
+  height: a,
+  width: a,
+  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 {
+  j as default
+};
+//# sourceMappingURL=Day.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Day.js","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/useTheme'\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=\"Small\"\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"],"names":["Day","beginDate","date","endDate","isInMonth","onClick","theme","useTheme","styles","getStyles","isInRange","isWithinInterval","isSameDay","isRangeStart","isRangeEnd","isSelected","isToday","startOfToday","jsx","Button","Text","format","css","DATE_SIZE"],"mappings":";;;;;;;;;;AAsBM,MAAAA,IAA0B,CAAC,EAAE,WAAAC,GAAW,MAAAC,GAAM,SAAAC,GAAS,WAAAC,GAAW,SAAAC,QAAc;AACpF,QAAMC,IAAQC,KACRC,IAASC,EAAUH,CAAK,GAExBI,IACJT,KACAE,KACAQ,EAAiBT,GAAM,EAAE,OAAOD,GAAW,KAAKE,EAAA,CAAS,KACzD,CAACS,EAAUV,GAAMD,CAAS,KAC1B,CAACW,EAAUV,GAAMC,CAAO,GAEpBU,IACJZ,KAAaE,KAAWS,EAAUX,GAAWC,CAAI,KAAK,CAACU,EAAUX,GAAWE,CAAO,GAE/EW,IACJX,KAAWF,KAAaW,EAAUT,GAASD,CAAI,KAAK,CAACU,EAAUX,GAAWE,CAAO,GAE7EY,IACHd,KAAaW,EAAUX,GAAWC,CAAI,KAAOC,KAAWS,EAAUT,GAASD,CAAI,GAE5Ec,IAAUJ,EAAUV,GAAMe,EAAc,CAAA;AAG5C,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA;AAAA,UAEPV,CAAM;AAAA,UACLJ,IAAoC,KAAxB,qBAA0B;AAAA,UACvCM,IAAY,yBAAyB,EAAE;AAAA;AAAA,MAG3C,UAAA,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA;AAAA,YAEPN,IAAe,uBAAuB,EAAE;AAAA,YACxCC,IAAa,qBAAqB,EAAE;AAAA;AAAA,UAExC,OAAOC,IAAa,YAAY;AAAA,UAChC,SAAS,MAAMV,EAAQH,CAAI;AAAA,UAC3B,SAASa,IAAa,cAAc;AAAA,UAEpC,UAAA,gBAAAG;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,WAAW;AAAA;AAAA,cAEPL,IAAa,wBAAwB,EAAE;AAAA,cACvCC,IAAU,iBAAiB,EAAE;AAAA,cACjC,SAAQ;AAAA,cAEP,UAAAK,EAAOnB,GAAM,GAAG;AAAA,YAAA;AAAA,UACnB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,GAEMO,IAAY,CAACH,MACjBgB,EAAI;AAAA,EACF,QAAQC;AAAA,EACR,OAAOA;AAAA,EACP,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,yBAAyB;AAAA,IACvB,iBAAiBjB,EAAM,QAAQ,WAAW;AAAA,EAC5C;AAAA,EACA,0BAA0B;AAAA,IACxB,iBAAiBA,EAAM,QAAQ,UAAU;AAAA,EAC3C;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;AAAA,QACT,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,sBAAsB;AAAA,MACpB,qBAAqB;AAAA,MACrB,wBAAwB;AAAA,MACxB,WAAW;AAAA,QACT,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,+BAA+B;AAAA,IAC7B,yBAAyB;AAAA,MACvB,OAAOA,EAAM,QAAQ;AAAA,MACrB,yBAAyB;AAAA,QACvB,aAAaA,EAAM,QAAQ,OAAO;AAAA,MACpC;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,cAAc,aAAaA,EAAM,QAAQ,QAAQ,IAAI;AAAA,MACrD,cAAc;AAAA,MACd,eAAe;AAAA,IACjB;AAAA,EACF;AACF,CAAC;"}