@mx-cartographer/experiences 9.2.4-alpha.al5 → 9.3.0-alph.bb2

package/dist/common/components/MiniWidgetContainer.es.js

@@ -0,0 +1,77 @@
+import { WidgetContainerProvider as g } from "../context/WidgetContainerProvider.es.js";
+import { useDimensions as u } from "../hooks/useDimensions.es.js";
+import "react";
+import { H3 as b, P as v, Text as C } from "@mxenabled/mxui";
+import I from "@mui/material/Button";
+import { ChevronRight as z, Icon as H } from "@mxenabled/mx-icons";
+import { Fragment as y, jsx as r, jsxs as i } from "react/jsx-runtime";
+import B from "@mui/material/Box";
+import R from "@mui/material/IconButton";
+import W from "@mui/material/Card";
+import j from "@mui/material/CardContent";
+import w from "@mui/material/CardHeader";
+var K = ({ children: a, className: m = "mx-cmn-mini-widget", closeLabel: l, contentStyles: d, onClose: o, onPrimaryCtaClick: e, primaryCtaLabel: c = "", primaryCtaLabelAria: s = "", subTitle: t = "", sx: p = {}, title: n = "" }) => {
+  const [h, { height: f, width: x }] = u();
+  return /* @__PURE__ */ i(W, {
+    className: m,
+    sx: {
+      touchAction: "manipulation",
+      ...p
+    },
+    children: [/* @__PURE__ */ r(w, {
+      sx: { pb: 8 },
+      title: /* @__PURE__ */ i(y, { children: [/* @__PURE__ */ i(B, {
+        sx: {
+          alignItems: "center",
+          display: "grid",
+          gap: 2,
+          gridTemplateColumns: "1fr auto",
+          pb: 4
+        },
+        children: [n && /* @__PURE__ */ r(b, { children: n }), o ? /* @__PURE__ */ r(R, {
+          "aria-label": l,
+          onClick: o,
+          size: "small",
+          children: /* @__PURE__ */ r(H, {
+            name: "close",
+            size: 24
+          })
+        }) : e && /* @__PURE__ */ r(I, {
+          "aria-label": s,
+          endIcon: /* @__PURE__ */ r(z, {}),
+          onClick: e,
+          size: "small",
+          children: /* @__PURE__ */ r(C, {
+            bold: !0,
+            variant: "body2",
+            children: c
+          })
+        })]
+      }), t && /* @__PURE__ */ r(v, {
+        color: "text.secondary",
+        sx: {
+          fontSize: 15,
+          lineHeight: "20px"
+        },
+        variant: "body2",
+        children: t
+      })] })
+    }), /* @__PURE__ */ r(j, {
+      ref: h,
+      sx: {
+        p: 0,
+        ...d
+      },
+      children: /* @__PURE__ */ r(g, {
+        availableHeight: f,
+        availableWidth: x,
+        children: a
+      })
+    })]
+  });
+};
+export {
+  K as default
+};
+
+//# sourceMappingURL=MiniWidgetContainer.es.js.map

package/dist/common/components/MiniWidgetContainer.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniWidgetContainer.es.js","names":[],"sources":["../../../src/common/components/MiniWidgetContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport CardHeader from '@mui/material/CardHeader'\nimport CardContent from '@mui/material/CardContent'\nimport IconButton from '@mui/material/IconButton'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { H3, P, Text } from '@mxenabled/mxui'\n\nimport { WidgetContainerProvider } from '../context'\nimport { useDimensions } from '../hooks/useDimensions'\n\ninterface CardContainerProps {\n  className?: string\n  closeLabel?: string\n  contentStyles?: SxProps\n  onClose?: () => void\n  onPrimaryCtaClick?: () => void\n  primaryCtaLabel?: string\n  primaryCtaLabelAria?: string\n  subTitle?: string\n  sx?: SxProps\n  title?: string\n}\n\nconst MiniWidgetContainer: React.FC<React.PropsWithChildren<CardContainerProps>> = ({\n  children,\n  className = 'mx-cmn-mini-widget',\n  closeLabel,\n  contentStyles,\n  onClose,\n  onPrimaryCtaClick,\n  primaryCtaLabel = '',\n  primaryCtaLabelAria = '',\n  subTitle = '',\n  sx = {},\n  title = '',\n}) => {\n  const [containerRef, { height, width }] = useDimensions()\n\n  return (\n    <Card className={className} sx={{ touchAction: 'manipulation', ...sx }}>\n      <CardHeader\n        sx={{ pb: 8 }}\n        title={\n          <>\n            <Box\n              sx={{\n                alignItems: 'center',\n                display: 'grid',\n                gap: 2,\n                gridTemplateColumns: '1fr auto',\n                pb: 4,\n              }}\n            >\n              {title && <H3>{title}</H3>}\n\n              {onClose ? (\n                <IconButton aria-label={closeLabel} onClick={onClose} size=\"small\">\n                  <Icon name=\"close\" size={24} />\n                </IconButton>\n              ) : (\n                onPrimaryCtaClick && (\n                  <Button\n                    aria-label={primaryCtaLabelAria}\n                    endIcon={<ChevronRight />}\n                    onClick={onPrimaryCtaClick}\n                    size=\"small\"\n                  >\n                    <Text bold={true} variant=\"body2\">\n                      {primaryCtaLabel}\n                    </Text>\n                  </Button>\n                )\n              )}\n            </Box>\n\n            {subTitle && (\n              <P color=\"text.secondary\" sx={{ fontSize: 15, lineHeight: '20px' }} variant=\"body2\">\n                {subTitle}\n              </P>\n            )}\n          </>\n        }\n      />\n\n      <CardContent ref={containerRef} sx={{ p: 0, ...contentStyles }}>\n        <WidgetContainerProvider availableHeight={height} availableWidth={width}>\n          {children}\n        </WidgetContainerProvider>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport default MiniWidgetContainer\n"],"mappings":";;;;;;;;;;;;AA+BA,IAAM,IAAA,CAA8E,EAClF,UAAA,GACA,WAAA,IAAY,sBACZ,YAAA,GACA,eAAA,GACA,SAAA,GACA,mBAAA,GACA,iBAAA,IAAkB,IAClB,qBAAA,IAAsB,IACtB,UAAA,IAAW,IACX,IAAA,IAAK,CAAC,GACN,OAAA,IAAQ,GAAA,MACJ;AACJ,QAAM,CAAC,GAAc,EAAE,QAAA,GAAQ,OAAA,EAAA,CAAA,IAAW,EAAc;AAExD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAiB,WAAA;AAAA,IAAW,IAAI;AAAA,MAAE,aAAa;AAAA,MAAgB,GAAG;AAAA,IAAG;AAAA,cAArE,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI,EAAE,IAAI,EAAE;AAAA,MACZ,OACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,KAAK;AAAA,UACL,qBAAqB;AAAA,UACrB,IAAI;AAAA,QACN;AAAA,kBAPF,CASG,KAAS,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAU,CAAA,GAExB,IACC,gBAAA,EAAC,GAAD;AAAA,UAAY,cAAY;AAAA,UAAY,SAAS;AAAA,UAAS,MAAK;AAAA,oBACzD,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAK;AAAA,YAAQ,MAAM;AAAA,UAAK,CAAA;AAAA,QACpB,CAAA,IAEZ,KACE,gBAAA,EAAC,GAAD;AAAA,UACE,cAAY;AAAA,UACZ,SAAS,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,UACxB,SAAS;AAAA,UACT,MAAK;AAAA,oBAEL,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,SAAQ;AAAA,sBACvB;AAAA,UACG,CAAA;AAAA,QACA,CAAA,CAGT;AAAA,UAEJ,KACC,gBAAA,EAAC,GAAD;AAAA,QAAG,OAAM;AAAA,QAAiB,IAAI;AAAA,UAAE,UAAU;AAAA,UAAI,YAAY;AAAA,QAAO;AAAA,QAAG,SAAQ;AAAA,kBACzE;AAAA,MACA,CAAA,CAEL,EAAA,CAAA;AAAA,IAEL,CAAA,GAED,gBAAA,EAAC,GAAD;AAAA,MAAa,KAAK;AAAA,MAAc,IAAI;AAAA,QAAE,GAAG;AAAA,QAAG,GAAG;AAAA,MAAc;AAAA,gBAC3D,gBAAA,EAAC,GAAD;AAAA,QAAyB,iBAAiB;AAAA,QAAQ,gBAAgB;AAAA,QAC/D,UAAA;AAAA,MACsB,CAAA;AAAA,IACd,CAAA,CACT;AAAA;AAEV"}

package/dist/common/components/ResponsiveButton.es.js

@@ -0,0 +1,37 @@
+import m from "react";
+import p from "@mui/material/Button";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { useTheme as d } from "@mui/material/styles";
+import f from "@mui/material/IconButton";
+import u from "@mui/material/Tooltip";
+var B = ({ icon: e, label: n, onClick: r, placement: s = "bottom", tooltipText: o, variant: l = "text" }) => {
+  const i = d();
+  return /* @__PURE__ */ a(m.Fragment, { children: [/* @__PURE__ */ t(p, {
+    onClick: r,
+    startIcon: e,
+    sx: {
+      [i.breakpoints.down("lg")]: { display: "none" },
+      [i.breakpoints.up("lg")]: { display: "inline-flex" }
+    },
+    title: o,
+    variant: l,
+    children: n
+  }), /* @__PURE__ */ t(u, {
+    describeChild: !0,
+    placement: s,
+    sx: { display: {
+      xs: "inline-flex",
+      lg: "none"
+    } },
+    title: o,
+    children: /* @__PURE__ */ t(f, {
+      onClick: r,
+      children: e
+    })
+  })] });
+};
+export {
+  B as default
+};
+
+//# sourceMappingURL=ResponsiveButton.es.js.map

package/dist/common/components/ResponsiveButton.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveButton.es.js","names":[],"sources":["../../../src/common/components/ResponsiveButton.tsx"],"sourcesContent":["import React from 'react'\n\nimport Button from '@mui/material/Button'\nimport IconButton from '@mui/material/IconButton'\nimport Tooltip from '@mui/material/Tooltip'\nimport { useTheme } from '@mui/material/styles'\n\ninterface ResponsiveButtonProps {\n  icon: React.ReactElement\n  label: string\n  onClick?: () => void\n  placement?:\n    | 'bottom-end'\n    | 'bottom-start'\n    | 'bottom'\n    | 'left-end'\n    | 'left-start'\n    | 'left'\n    | 'right-end'\n    | 'right-start'\n    | 'right'\n    | 'top-end'\n    | 'top-start'\n    | 'top'\n  tooltipText: string\n  variant?: 'contained' | 'outlined' | 'text'\n}\n\nconst ResponsiveButton: React.FC<ResponsiveButtonProps> = ({\n  icon,\n  label,\n  onClick,\n  placement = 'bottom',\n  tooltipText,\n  variant = 'text',\n}) => {\n  const theme = useTheme()\n\n  return (\n    <React.Fragment>\n      <Button\n        onClick={onClick}\n        startIcon={icon}\n        sx={{\n          [theme.breakpoints.down('lg')]: { display: 'none' },\n          [theme.breakpoints.up('lg')]: { display: 'inline-flex' },\n        }}\n        title={tooltipText}\n        variant={variant}\n      >\n        {label}\n      </Button>\n      <Tooltip\n        describeChild={true}\n        placement={placement}\n        sx={{ display: { xs: 'inline-flex', lg: 'none' } }}\n        title={tooltipText}\n      >\n        <IconButton onClick={onClick}>{icon}</IconButton>\n      </Tooltip>\n    </React.Fragment>\n  )\n}\n\nexport default ResponsiveButton\n"],"mappings":";;;;;;AA4BA,IAAM,IAAA,CAAqD,EACzD,MAAA,GACA,OAAA,GACA,SAAA,GACA,WAAA,IAAY,UACZ,aAAA,GACA,SAAA,IAAU,OAAA,MACN;AACJ,QAAM,IAAQ,EAAS;AAEvB,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACW,SAAA;AAAA,IACT,WAAW;AAAA,IACX,IAAI;AAAA,OACD,EAAM,YAAY,KAAK,IAAI,CAAA,GAAI,EAAE,SAAS,OAAO;AAAA,OACjD,EAAM,YAAY,GAAG,IAAI,CAAA,GAAI,EAAE,SAAS,cAAc;AAAA,IACzD;AAAA,IACA,OAAO;AAAA,IACE,SAAA;AAAA,cAER;AAAA,EACK,CAAA,GACR,gBAAA,EAAC,GAAD;AAAA,IACE,eAAe;AAAA,IACJ,WAAA;AAAA,IACX,IAAI,EAAE,SAAS;AAAA,MAAE,IAAI;AAAA,MAAe,IAAI;AAAA,IAAO,EAAE;AAAA,IACjD,OAAO;AAAA,cAEP,gBAAA,EAAC,GAAD;AAAA,MAAqB,SAAA;AAAA,gBAAU;AAAA,IAAiB,CAAA;AAAA,EACzC,CAAA,CACK,EAAA,CAAA;AAEpB"}

package/dist/common/components/SearchBox.es.js

@@ -0,0 +1,59 @@
+import "react";
+import { observer as m } from "mobx-react-lite";
+import { Icon as t, TextField as s } from "@mxenabled/mxui";
+import { jsx as r } from "react/jsx-runtime";
+import p from "@mui/material/Box";
+import d from "@mui/material/IconButton";
+import a from "@mui/material/InputAdornment";
+var x = ({ ariaLabel: n = "Search", cancelAriaLabel: c = "Cancel Search", onChange: e, placeholder: i = "Search", searchValue: o }) => /* @__PURE__ */ r(p, {
+  className: "mx-cmn-search-box",
+  px: 24,
+  py: 16,
+  children: /* @__PURE__ */ r(s, {
+    "aria-label": n,
+    name: "search",
+    onChange: (l) => e(l.target.value),
+    placeholder: i,
+    slotProps: { input: {
+      startAdornment: /* @__PURE__ */ r(a, {
+        position: "start",
+        children: /* @__PURE__ */ r(t, {
+          name: "search",
+          size: 26,
+          sx: { color: "action.active" }
+        })
+      }),
+      endAdornment: /* @__PURE__ */ r(a, {
+        position: "end",
+        sx: { p: 0 },
+        children: o ? /* @__PURE__ */ r(d, {
+          "aria-label": c,
+          className: "mx-cat-cancel-search-button",
+          color: "primary",
+          onClick: () => e(""),
+          children: /* @__PURE__ */ r(t, {
+            name: "cancel",
+            size: 24
+          })
+        }) : null
+      }),
+      sx: {
+        "& .MuiOutlinedInput-notchedOutline": {
+          borderColor: "text.secondary",
+          opacity: 0.5
+        },
+        "& input::placeholder": {
+          color: "text.secondary",
+          opacity: 1
+        }
+      }
+    } },
+    sx: { width: "100%" },
+    value: o
+  })
+}), I = m(x);
+export {
+  I as default
+};
+
+//# sourceMappingURL=SearchBox.es.js.map

package/dist/common/components/SearchBox.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.es.js","names":[],"sources":["../../../src/common/components/SearchBox.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport IconButton from '@mui/material/IconButton'\nimport InputAdornment from '@mui/material/InputAdornment'\n\nimport { Icon, TextField } from '@mxenabled/mxui'\n\nexport interface SearchBoxProps {\n  ariaLabel?: string\n  cancelAriaLabel?: string\n  onChange: (value: string) => void\n  placeholder?: string\n  searchValue: string\n}\n\nconst SearchBox: React.FC<SearchBoxProps> = ({\n  ariaLabel = 'Search',\n  cancelAriaLabel = 'Cancel Search',\n  onChange,\n  placeholder = 'Search',\n  searchValue,\n}) => {\n  const cancelButton = (\n    <IconButton\n      aria-label={cancelAriaLabel}\n      className=\"mx-cat-cancel-search-button\"\n      color=\"primary\"\n      onClick={() => onChange('')}\n    >\n      <Icon name=\"cancel\" size={24} />\n    </IconButton>\n  )\n\n  return (\n    <Box className=\"mx-cmn-search-box\" px={24} py={16}>\n      <TextField\n        aria-label={ariaLabel}\n        name=\"search\"\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}\n        placeholder={placeholder}\n        slotProps={{\n          input: {\n            startAdornment: (\n              <InputAdornment position=\"start\">\n                <Icon name=\"search\" size={26} sx={{ color: 'action.active' }} />\n              </InputAdornment>\n            ),\n            endAdornment: (\n              <InputAdornment position=\"end\" sx={{ p: 0 }}>\n                {searchValue ? cancelButton : null}\n              </InputAdornment>\n            ),\n            sx: {\n              '& .MuiOutlinedInput-notchedOutline': {\n                borderColor: 'text.secondary',\n                opacity: 0.5,\n              },\n              '& input::placeholder': { color: 'text.secondary', opacity: 1 },\n            },\n          },\n        }}\n        sx={{\n          width: '100%',\n        }}\n        value={searchValue}\n      />\n    </Box>\n  )\n}\n\nexport default observer(SearchBox)\n"],"mappings":";;;;;;;AAiBA,IAAM,IAAA,CAAuC,EAC3C,WAAA,IAAY,UACZ,iBAAA,IAAkB,iBAClB,UAAA,GACA,aAAA,IAAc,UACd,aAAA,EAAA,MAcE,gBAAA,EAAC,GAAD;AAAA,EAAK,WAAU;AAAA,EAAoB,IAAI;AAAA,EAAI,IAAI;AAAA,YAC7C,gBAAA,EAAC,GAAD;AAAA,IACE,cAAY;AAAA,IACZ,MAAK;AAAA,IACL,UAAA,CAAW,MAA2C,EAAS,EAAE,OAAO,KAAK;AAAA,IAChE,aAAA;AAAA,IACb,WAAW,EACT,OAAO;AAAA,MACL,gBACE,gBAAA,EAAC,GAAD;AAAA,QAAgB,UAAS;AAAA,kBACvB,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAK;AAAA,UAAS,MAAM;AAAA,UAAI,IAAI,EAAE,OAAO,gBAAgB;AAAA,QAAI,CAAA;AAAA,MACjD,CAAA;AAAA,MAElB,cACE,gBAAA,EAAC,GAAD;AAAA,QAAgB,UAAS;AAAA,QAAM,IAAI,EAAE,GAAG,EAAE;AAAA,kBACvC,IA1Bb,gBAAA,EAAC,GAAD;AAAA,UACE,cAAY;AAAA,UACZ,WAAU;AAAA,UACV,OAAM;AAAA,UACN,SAAA,MAAe,EAAS,EAAE;AAAA,oBAE1B,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAK;AAAA,YAAS,MAAM;AAAA,UAAK,CAAA;AAAA,QACrB,CAmBe,IAAe;AAAA,MAChB,CAAA;AAAA,MAElB,IAAI;AAAA,QACF,sCAAsC;AAAA,UACpC,aAAa;AAAA,UACb,SAAS;AAAA,QACX;AAAA,QACA,wBAAwB;AAAA,UAAE,OAAO;AAAA,UAAkB,SAAS;AAAA,QAAE;AAAA,MAChE;AAAA,IACF,EACF;AAAA,IACA,IAAI,EACF,OAAO,OACT;AAAA,IACA,OAAO;AAAA,EACR,CAAA;AACE,CAAA,GAIT,IAAe,EAAS,CAAS"}

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

@@ -8,7 +8,7 @@ interface SelectProps extends Omit<React.ComponentProps<typeof TextField>, 'onCh
     label: string;
     onChange: (value: number) => void;
     options: SelectOption[];
-    value: number;
+    value: number | '';
 }
 export declare const Select: ({ label, onChange, options, value, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/common/components/Select.es.js

@@ -0,0 +1,33 @@
+import "react";
+import { ExpandMore as m } from "@mxenabled/mx-icons";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@mui/material/TextField";
+import u from "@mui/material/MenuItem";
+var g = ({ label: t, onChange: a, options: l, value: n, ...o }) => /* @__PURE__ */ r(i, {
+  defaultValue: "",
+  label: t,
+  onChange: (e) => {
+    a(Number(e.target.value));
+  },
+  select: !0,
+  slotProps: {
+    inputLabel: { shrink: !0 },
+    select: { IconComponent: (e) => /* @__PURE__ */ r(m, {
+      size: 20,
+      sx: { mr: 4 },
+      ...e
+    }) }
+  },
+  value: n,
+  variant: "outlined",
+  ...o,
+  children: l.map((e) => /* @__PURE__ */ r(u, {
+    value: e.id,
+    children: e.label
+  }, e.id))
+});
+export {
+  g as Select
+};
+
+//# sourceMappingURL=Select.es.js.map

package/dist/common/components/Select.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.es.js","names":[],"sources":["../../../src/common/components/Select.tsx"],"sourcesContent":["import React from 'react'\n\nimport MenuItem from '@mui/material/MenuItem'\nimport TextField from '@mui/material/TextField'\n\nimport { ExpandMore } from '@mxenabled/mx-icons'\n\nexport type SelectOption = {\n  id: number\n  label: string\n}\n\ninterface SelectProps extends Omit<React.ComponentProps<typeof TextField>, 'onChange'> {\n  label: string\n  onChange: (value: number) => void\n  options: SelectOption[]\n  // Allow '' for the no-selection state. MUI Select warns \"out-of-range value\"\n  // when a numeric sentinel (e.g. 0) isn't among the options; '' is MUI's\n  // canonical empty value.\n  value: number | ''\n}\n\nexport const Select = ({ label, onChange, options, value, ...props }: SelectProps) => {\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    onChange(Number(event.target.value))\n  }\n\n  return (\n    <TextField\n      defaultValue=\"\"\n      label={label}\n      onChange={handleChange}\n      select={true}\n      slotProps={{\n        inputLabel: { shrink: true },\n        select: {\n          IconComponent: (props: React.ComponentProps<typeof ExpandMore>) => (\n            <ExpandMore size={20} sx={{ mr: 4 }} {...props} />\n          ),\n        },\n      }}\n      value={value}\n      variant=\"outlined\"\n      {...props}\n    >\n      {options.map((option) => (\n        <MenuItem key={option.id} value={option.id}>\n          {option.label}\n        </MenuItem>\n      ))}\n    </TextField>\n  )\n}\n"],"mappings":";;;;;AAsBA,IAAa,IAAA,CAAU,EAAE,OAAA,GAAO,UAAA,GAAU,SAAA,GAAS,OAAA,GAAO,GAAG,EAAA,MAMzD,gBAAA,EAAC,GAAD;AAAA,EACE,cAAa;AAAA,EACN,OAAA;AAAA,EACP,UARE,CAAgB,MAAkD;AACtE,IAAA,EAAS,OAAO,EAAM,OAAO,KAAK,CAAC;AAAA,EACrC;AAAA,EAOI,QAAQ;AAAA,EACR,WAAW;AAAA,IACT,YAAY,EAAE,QAAQ,GAAK;AAAA,IAC3B,QAAQ,EACN,eAAA,CAAgB,MACd,gBAAA,EAAC,GAAD;AAAA,MAAY,MAAM;AAAA,MAAI,IAAI,EAAE,IAAI,EAAE;AAAA,MAAG,GAAI;AAAA,IAAQ,CAAA,EAErD;AAAA,EACF;AAAA,EACO,OAAA;AAAA,EACP,SAAQ;AAAA,EACR,GAAI;AAAA,YAEH,EAAQ,IAAA,CAAK,MACZ,gBAAA,EAAC,GAAD;AAAA,IAA0B,OAAO,EAAO;AAAA,cACrC,EAAO;AAAA,EACA,GAFK,EAAO,EAEZ,CACX;AACQ,CAAA"}

package/dist/common/components/SelectionBox.es.js

@@ -0,0 +1,45 @@
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+import { useTheme as c } from "@mui/material/styles";
+import n from "@mui/material/Box";
+import s from "@mui/material/Tooltip";
+import d from "@mui/material/FormControlLabel";
+import b from "@mui/material/Radio";
+var R = ({ checked: r = !1, label: t, sx: l = {}, tooltip: a = "", value: i }) => {
+  const o = c(), p = o.palette.mode === "light" ? o.palette.grey[400] : o.palette.grey[700], m = r ? o.palette.action.active : p;
+  return /* @__PURE__ */ e(n, {
+    bgcolor: "background.paper",
+    border: `${r ? 3 : 1}px solid`,
+    borderColor: m,
+    borderRadius: 2,
+    mt: -2,
+    mx: 8,
+    pr: 8,
+    py: 4,
+    sx: {
+      "&:hover": { borderColor: o.palette.action.active },
+      ...l
+    },
+    children: /* @__PURE__ */ e(s, {
+      title: a,
+      children: /* @__PURE__ */ e(d, {
+        control: /* @__PURE__ */ e(b, {
+          disableRipple: !0,
+          sx: { "&.Mui-checked": { color: o.palette.action.active } }
+        }),
+        label: t,
+        labelPlacement: "start",
+        sx: {
+          ml: 0,
+          pl: 8
+        },
+        value: i
+      })
+    })
+  });
+};
+export {
+  R as default
+};
+
+//# sourceMappingURL=SelectionBox.es.js.map

package/dist/common/components/SelectionBox.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionBox.es.js","names":[],"sources":["../../../src/common/components/SelectionBox.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport FormControlLabel from '@mui/material/FormControlLabel'\nimport Radio from '@mui/material/Radio'\nimport type { SxProps } from '@mui/material/styles'\nimport { useTheme } from '@mui/material/styles'\nimport Tooltip from '@mui/material/Tooltip'\n\ninterface SelectionBoxProps {\n  checked?: boolean\n  label: string\n  sx?: SxProps\n  tooltip?: string\n  value: string | number\n}\n\n/** TODO: Move this component to KyperMUI **/\nconst SelectionBox: React.FC<SelectionBoxProps> = ({\n  checked = false,\n  label,\n  sx = {},\n  tooltip = '',\n  value,\n}) => {\n  const theme = useTheme()\n\n  /** TODO: Add new theme color to handle this color and remove the mode check **/\n  const greyColor =\n    theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]\n  const borderColor = checked ? theme.palette.action.active : greyColor\n  const borderSize = checked ? 3 : 1\n\n  return (\n    <Box\n      bgcolor=\"background.paper\"\n      border={`${borderSize}px solid`}\n      borderColor={borderColor}\n      borderRadius={2}\n      mt={-2}\n      mx={8}\n      pr={8}\n      py={4}\n      sx={{ '&:hover': { borderColor: theme.palette.action.active }, ...sx }}\n    >\n      <Tooltip title={tooltip}>\n        <FormControlLabel\n          control={\n            <Radio\n              disableRipple={true}\n              sx={{ '&.Mui-checked': { color: theme.palette.action.active } }}\n            />\n          }\n          label={label}\n          labelPlacement=\"start\"\n          sx={{ ml: 0, pl: 8 }}\n          value={value}\n        />\n      </Tooltip>\n    </Box>\n  )\n}\n\nexport default SelectionBox\n"],"mappings":";;;;;;;AAkBA,IAAM,IAAA,CAA6C,EACjD,SAAA,IAAU,IACV,OAAA,GACA,IAAA,IAAK,CAAC,GACN,SAAA,IAAU,IACV,OAAA,EAAA,MACI;AACJ,QAAM,IAAQ,EAAS,GAGjB,IACJ,EAAM,QAAQ,SAAS,UAAU,EAAM,QAAQ,KAAK,GAAA,IAAO,EAAM,QAAQ,KAAK,GAAA,GAC1E,IAAc,IAAU,EAAM,QAAQ,OAAO,SAAS;AAG5D,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,SAAQ;AAAA,IACR,QAAQ,GALO,IAAU,IAAI,CAAA;AAAA,IAMhB,aAAA;AAAA,IACb,cAAc;AAAA,IACd,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,MAAE,WAAW,EAAE,aAAa,EAAM,QAAQ,OAAO,OAAO;AAAA,MAAG,GAAG;AAAA,IAAG;AAAA,cAErE,gBAAA,EAAC,GAAD;AAAA,MAAS,OAAO;AAAA,gBACd,gBAAA,EAAC,GAAD;AAAA,QACE,SACE,gBAAA,EAAC,GAAD;AAAA,UACE,eAAe;AAAA,UACf,IAAI,EAAE,iBAAiB,EAAE,OAAO,EAAM,QAAQ,OAAO,OAAO,EAAE;AAAA,QAC/D,CAAA;AAAA,QAEI,OAAA;AAAA,QACP,gBAAe;AAAA,QACf,IAAI;AAAA,UAAE,IAAI;AAAA,UAAG,IAAI;AAAA,QAAE;AAAA,QACZ,OAAA;AAAA,MACR,CAAA;AAAA,IACM,CAAA;AAAA,EACN,CAAA;AAET"}

package/dist/common/components/SkeletonLoader.es.js

@@ -0,0 +1,104 @@
+import d from "@mui/material/Stack";
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import i from "@mui/material/Skeleton";
+var g = ({ sx: e = {}, variant: h = "list" }) => /* @__PURE__ */ t(d, {
+  sx: [...Array.isArray(e) ? e : [e]],
+  children: [
+    h === "list" && /* @__PURE__ */ t(d, {
+      gap: 24,
+      children: [
+        /* @__PURE__ */ r(i, {
+          height: 25,
+          variant: "rounded",
+          width: 150
+        }),
+        /* @__PURE__ */ r(i, {
+          height: 50,
+          variant: "rounded"
+        }),
+        /* @__PURE__ */ r(i, {
+          height: 50,
+          variant: "rounded"
+        }),
+        /* @__PURE__ */ r(i, {
+          height: 50,
+          variant: "rounded"
+        })
+      ]
+    }),
+    h === "card" && /* @__PURE__ */ t(d, {
+      gap: 24,
+      children: [/* @__PURE__ */ r(i, {
+        height: 50,
+        variant: "rounded"
+      }), /* @__PURE__ */ t(d, {
+        direction: "row",
+        gap: 24,
+        children: [/* @__PURE__ */ r(i, {
+          height: 300,
+          variant: "rounded",
+          width: "20%"
+        }), /* @__PURE__ */ r(i, {
+          height: 300,
+          variant: "rounded",
+          width: "80%"
+        })]
+      })]
+    }),
+    h === "dashboard" && /* @__PURE__ */ t(d, {
+      gap: 24,
+      children: [/* @__PURE__ */ r(i, {
+        height: 75,
+        variant: "rounded"
+      }), /* @__PURE__ */ t(d, {
+        gap: 24,
+        children: [
+          /* @__PURE__ */ t(d, {
+            direction: "row",
+            gap: 24,
+            children: [/* @__PURE__ */ r(i, {
+              height: 250,
+              variant: "rounded",
+              width: "75%"
+            }), /* @__PURE__ */ r(i, {
+              height: 250,
+              variant: "rounded",
+              width: "25%"
+            })]
+          }),
+          /* @__PURE__ */ t(d, {
+            direction: "row",
+            gap: 24,
+            children: [/* @__PURE__ */ r(i, {
+              height: 250,
+              variant: "rounded",
+              width: "75%"
+            }), /* @__PURE__ */ r(i, {
+              height: 250,
+              variant: "rounded",
+              width: "25%"
+            })]
+          }),
+          /* @__PURE__ */ t(d, {
+            direction: "row",
+            gap: 24,
+            children: [/* @__PURE__ */ r(i, {
+              height: 250,
+              variant: "rounded",
+              width: "75%"
+            }), /* @__PURE__ */ r(i, {
+              height: 250,
+              variant: "rounded",
+              width: "25%"
+            })]
+          })
+        ]
+      })]
+    })
+  ]
+});
+export {
+  g as SkeletonLoader
+};
+
+//# sourceMappingURL=SkeletonLoader.es.js.map

package/dist/common/components/SkeletonLoader.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonLoader.es.js","names":[],"sources":["../../../src/common/components/SkeletonLoader.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\nimport Skeleton from '@mui/material/Skeleton'\nimport { SxProps } from '@mui/material/styles'\n\ninterface SkeletonLoaderProps {\n  sx?: SxProps\n  variant?: 'card' | 'list' | 'dashboard'\n}\n\nexport const SkeletonLoader = ({ sx = {}, variant = 'list' }: SkeletonLoaderProps) => {\n  return (\n    <Stack sx={[...(Array.isArray(sx) ? sx : [sx])]}>\n      {variant === 'list' && (\n        <Stack gap={24}>\n          <Skeleton height={25} variant=\"rounded\" width={150} />\n          <Skeleton height={50} variant=\"rounded\" />\n          <Skeleton height={50} variant=\"rounded\" />\n          <Skeleton height={50} variant=\"rounded\" />\n        </Stack>\n      )}\n\n      {variant === 'card' && (\n        <Stack gap={24}>\n          <Skeleton height={50} variant=\"rounded\" />\n          <Stack direction=\"row\" gap={24}>\n            <Skeleton height={300} variant=\"rounded\" width=\"20%\" />\n            <Skeleton height={300} variant=\"rounded\" width=\"80%\" />\n          </Stack>\n        </Stack>\n      )}\n\n      {variant === 'dashboard' && (\n        <Stack gap={24}>\n          <Skeleton height={75} variant=\"rounded\" />\n          <Stack gap={24}>\n            <Stack direction=\"row\" gap={24}>\n              <Skeleton height={250} variant=\"rounded\" width=\"75%\" />\n              <Skeleton height={250} variant=\"rounded\" width=\"25%\" />\n            </Stack>\n            <Stack direction=\"row\" gap={24}>\n              <Skeleton height={250} variant=\"rounded\" width=\"75%\" />\n              <Skeleton height={250} variant=\"rounded\" width=\"25%\" />\n            </Stack>\n            <Stack direction=\"row\" gap={24}>\n              <Skeleton height={250} variant=\"rounded\" width=\"75%\" />\n              <Skeleton height={250} variant=\"rounded\" width=\"25%\" />\n            </Stack>\n          </Stack>\n        </Stack>\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;AASA,IAAa,IAAA,CAAkB,EAAE,IAAA,IAAK,CAAC,GAAG,SAAA,IAAU,OAAA,MAEhD,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI,CAAC,GAAI,MAAM,QAAQ,CAAE,IAAI,IAAK,CAAC,CAAE,CAAE;AAAA,YAA9C;AAAA,IACG,MAAY,UACX,gBAAA,EAAC,GAAD;AAAA,MAAO,KAAK;AAAA,gBAAZ;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAU,QAAQ;AAAA,UAAI,SAAQ;AAAA,UAAU,OAAO;AAAA,QAAM,CAAA;AAAA,QACrD,gBAAA,EAAC,GAAD;AAAA,UAAU,QAAQ;AAAA,UAAI,SAAQ;AAAA,QAAW,CAAA;AAAA,QACzC,gBAAA,EAAC,GAAD;AAAA,UAAU,QAAQ;AAAA,UAAI,SAAQ;AAAA,QAAW,CAAA;AAAA,QACzC,gBAAA,EAAC,GAAD;AAAA,UAAU,QAAQ;AAAA,UAAI,SAAQ;AAAA,QAAW,CAAA;AAAA,MACpC;AAAA;IAGR,MAAY,UACX,gBAAA,EAAC,GAAD;AAAA,MAAO,KAAK;AAAA,gBAAZ,CACE,gBAAA,EAAC,GAAD;AAAA,QAAU,QAAQ;AAAA,QAAI,SAAQ;AAAA,MAAW,CAAA,GACzC,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAM,KAAK;AAAA,kBAA5B,CACE,gBAAA,EAAC,GAAD;AAAA,UAAU,QAAQ;AAAA,UAAK,SAAQ;AAAA,UAAU,OAAM;AAAA,QAAO,CAAA,GACtD,gBAAA,EAAC,GAAD;AAAA,UAAU,QAAQ;AAAA,UAAK,SAAQ;AAAA,UAAU,OAAM;AAAA,QAAO,CAAA,CACjD;AAAA,QACF;AAAA;IAGR,MAAY,eACX,gBAAA,EAAC,GAAD;AAAA,MAAO,KAAK;AAAA,gBAAZ,CACE,gBAAA,EAAC,GAAD;AAAA,QAAU,QAAQ;AAAA,QAAI,SAAQ;AAAA,MAAW,CAAA,GACzC,gBAAA,EAAC,GAAD;AAAA,QAAO,KAAK;AAAA,kBAAZ;AAAA,UACE,gBAAA,EAAC,GAAD;AAAA,YAAO,WAAU;AAAA,YAAM,KAAK;AAAA,sBAA5B,CACE,gBAAA,EAAC,GAAD;AAAA,cAAU,QAAQ;AAAA,cAAK,SAAQ;AAAA,cAAU,OAAM;AAAA,YAAO,CAAA,GACtD,gBAAA,EAAC,GAAD;AAAA,cAAU,QAAQ;AAAA,cAAK,SAAQ;AAAA,cAAU,OAAM;AAAA,YAAO,CAAA,CACjD;AAAA;UACP,gBAAA,EAAC,GAAD;AAAA,YAAO,WAAU;AAAA,YAAM,KAAK;AAAA,sBAA5B,CACE,gBAAA,EAAC,GAAD;AAAA,cAAU,QAAQ;AAAA,cAAK,SAAQ;AAAA,cAAU,OAAM;AAAA,YAAO,CAAA,GACtD,gBAAA,EAAC,GAAD;AAAA,cAAU,QAAQ;AAAA,cAAK,SAAQ;AAAA,cAAU,OAAM;AAAA,YAAO,CAAA,CACjD;AAAA;UACP,gBAAA,EAAC,GAAD;AAAA,YAAO,WAAU;AAAA,YAAM,KAAK;AAAA,sBAA5B,CACE,gBAAA,EAAC,GAAD;AAAA,cAAU,QAAQ;AAAA,cAAK,SAAQ;AAAA,cAAU,OAAM;AAAA,YAAO,CAAA,GACtD,gBAAA,EAAC,GAAD;AAAA,cAAU,QAAQ;AAAA,cAAK,SAAQ;AAAA,cAAU,OAAM;AAAA,YAAO,CAAA,CACjD;AAAA;QACF;AAAA,QACF;AAAA;EAEJ"}

package/dist/common/components/SubheaderRow.es.js

@@ -0,0 +1,23 @@
+import "react";
+import { Text as a } from "@mxenabled/mxui";
+import { jsx as o } from "react/jsx-runtime";
+import i from "@mui/material/Box";
+var f = ({ bgcolor: r = "background.default", children: t }) => /* @__PURE__ */ o(i, {
+  display: "inline-block",
+  sx: {
+    bgcolor: r,
+    py: 6,
+    width: "100%"
+  },
+  children: /* @__PURE__ */ o(a, {
+    bold: !0,
+    sx: { pl: 24 },
+    variant: "caption",
+    children: t
+  })
+});
+export {
+  f as default
+};
+
+//# sourceMappingURL=SubheaderRow.es.js.map

package/dist/common/components/SubheaderRow.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubheaderRow.es.js","names":[],"sources":["../../../src/common/components/SubheaderRow.tsx"],"sourcesContent":["import React, { PropsWithChildren } from 'react'\n\nimport Box from '@mui/material/Box'\n\nimport { Text } from '@mxenabled/mxui'\n\ninterface SubheaderRowProps {\n  bgcolor?: string\n}\n\nconst SubheaderRow: React.FC<PropsWithChildren<SubheaderRowProps>> = ({\n  bgcolor = 'background.default',\n  children,\n}) => (\n  <Box display=\"inline-block\" sx={{ bgcolor, py: 6, width: '100%' }}>\n    <Text bold={true} sx={{ pl: 24 }} variant=\"caption\">\n      {children}\n    </Text>\n  </Box>\n)\n\nexport default SubheaderRow\n"],"mappings":";;;;AAUA,IAAM,IAAA,CAAgE,EACpE,SAAA,IAAU,sBACV,UAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EAAK,SAAQ;AAAA,EAAe,IAAI;AAAA,IAAE,SAAA;AAAA,IAAS,IAAI;AAAA,IAAG,OAAO;AAAA,EAAO;AAAA,YAC9D,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAM,IAAI,EAAE,IAAI,GAAG;AAAA,IAAG,SAAQ;AAAA,IACvC,UAAA;AAAA,EACG,CAAA;AACH,CAAA"}

package/dist/common/components/TabContentContainer.es.js

@@ -0,0 +1,14 @@
+import { jsx as b } from "react/jsx-runtime";
+var n = ({ children: e, index: a, name: r, value: t, ...l }) => /* @__PURE__ */ b("div", {
+  "aria-labelledby": `${r}-tab-${a}`,
+  hidden: t !== a,
+  id: `${r}-tabpanel-${a}`,
+  role: "tabpanel",
+  ...l,
+  children: t === a && e
+});
+export {
+  n as default
+};
+
+//# sourceMappingURL=TabContentContainer.es.js.map

package/dist/common/components/TabContentContainer.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabContentContainer.es.js","names":[],"sources":["../../../src/common/components/TabContentContainer.tsx"],"sourcesContent":["interface TabContentProps {\n  children?: React.ReactNode\n  index: number\n  name: string\n  value: number\n}\n\nconst TabContentContainer: React.FC<TabContentProps> = ({\n  children,\n  index,\n  name,\n  value,\n  ...rest\n}) => {\n  return (\n    <div\n      aria-labelledby={`${name}-tab-${index}`}\n      hidden={value !== index}\n      id={`${name}-tabpanel-${index}`}\n      role=\"tabpanel\"\n      {...rest}\n    >\n      {value === index && children}\n    </div>\n  )\n}\n\nexport default TabContentContainer\n"],"mappings":";AAOA,IAAM,IAAA,CAAkD,EACtD,UAAA,GACA,OAAA,GACA,MAAA,GACA,OAAA,GACA,GAAG,EAAA,MAGD,gBAAA,EAAC,OAAD;AAAA,EACE,mBAAiB,GAAG,CAAA,QAAY,CAAA;AAAA,EAChC,QAAQ,MAAU;AAAA,EAClB,IAAI,GAAG,CAAA,aAAiB,CAAA;AAAA,EACxB,MAAK;AAAA,EACL,GAAI;AAAA,YAEH,MAAU,KAAS;AACjB,CAAA"}

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/TinyBarChart.es.js

@@ -0,0 +1,81 @@
+import { stripChartSlotProps as h } from "./charts/chartSlotProps.es.js";
+import "react";
+import f from "@mui/material/Stack";
+import { jsx as a } from "react/jsx-runtime";
+import { useTheme as p } from "@mui/material/styles";
+import { BarChart as $ } from "@mui/x-charts";
+var L = ({ data: r, color: n, width: o = 85, height: s = 65 }) => {
+  const l = p(), m = {
+    series: [{
+      data: r.map(({ value: t }) => t),
+      type: "bar"
+    }],
+    xAxis: [{
+      data: r.map(({ label: t }) => t),
+      scaleType: "band",
+      categoryGapRatio: 0.3
+    }]
+  }, x = r.map((t, e) => e === r.length - 1 ? n(l) : `${n(l)}80`), c = (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(f, {
+    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: m.series,
+      slots: {
+        bar: ({ ownerState: t, ...e }) => {
+          const { ariaLabel: i } = r[t.dataIndex];
+          return /* @__PURE__ */ a("g", {
+            "aria-label": i,
+            children: /* @__PURE__ */ a("path", {
+              d: c(e.width, e.height),
+              fill: x[t.dataIndex],
+              transform: `translate(${e.x}, ${e.y})`
+            })
+          });
+        },
+        axisTickLabel: ({ text: t, ...e }) => {
+          const i = r[r.length - 1]?.label;
+          return /* @__PURE__ */ a("text", {
+            ...h(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: m.xAxis,
+      yAxis: [{
+        width: 0,
+        position: "none"
+      }]
+    })
+  });
+};
+export {
+  L as TinyBarChart
+};
+
+//# sourceMappingURL=TinyBarChart.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TinyBarChart.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'\nimport { stripChartSlotProps } from './charts/chartSlotProps'\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                {...stripChartSlotProps(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":";;;;;;AAmBA,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,EAAoB,CAAS;AAAA,YACjC,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"}