udp-react-enterprise-component-library 25.18.3 → 25.18.4-beta.2

package/dist/FluentDialog-COrrKCGR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentDialog-COrrKCGR.js","names":[],"sources":["../src/UI/feedback/FluentDialog.jsx"],"sourcesContent":["import {\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogContentText,\n  DialogTitle,\n  LinearProgress,\n  makeStyles\n} from '@material-ui/core';\nimport React from 'react';\nimport { PrimaryActionButton } from '../inputs/buttons/PrimaryActionButton';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  paper: {\n    borderRadius: 2,\n    borderTop: (props) =>\n      props.header && `4px solid ${theme.palette.secondary.main}`\n  },\n  title: {\n    color: (props) => props.header && theme.palette.secondary.main\n  },\n  actions: {\n    marginBottom: 0,\n    marginRight: 0,\n    padding: 0\n  },\n  button: {\n    borderRadius: 0,\n    padding: 'calc(.875rem - 3px) 23px calc(.875rem - 3px) 15px',\n    textTransform: 'none'\n  },\n  dialogContent: {\n    height: (props) => props.dialogContentHeight || 'auto',\n    width: (props) => props.dialogContentWidth || 'auto'\n  },\n  dialogLeftBorder: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    bottom: 0,\n    width: theme.spacing(1),\n    backgroundColor: (props) =>\n      props.dialogLeftBorderColor ?? theme.palette.primary.main\n  }\n}));\n\nexport const FluentDialog = (props) => {\n  const classes = useStyles(props);\n  const {\n    title,\n    message,\n    actionOne,\n    actionTwo,\n    actionThree,\n    labelOne,\n    labelTwo,\n    labelThree,\n    open,\n    handleClose,\n    ariaLabelledby,\n    ariaDescribedby,\n    titleId,\n    descriptionId,\n    children,\n    buttonOneHidden = false,\n    buttonTwoHidden = false,\n    buttonThreeHidden = true,\n    disableOne,\n    disableTwo,\n    disableThree,\n    progress,\n    enableLeftBorderStyling = false,\n    ...otherProps\n  } = props;\n\n  return (\n    <Dialog\n      open={open}\n      onClose={handleClose}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedby}\n      {...otherProps}\n      classes={{\n        paper: classes.paper\n      }}\n    >\n      <div\n        className={enableLeftBorderStyling ? classes.dialogLeftBorder : ''}\n      />\n      <DialogTitle className={classes.title} id={titleId}>\n        {title}\n      </DialogTitle>\n      <DialogContent className={classes.dialogContent}>\n        <DialogContentText id={descriptionId}>{message}</DialogContentText>\n        {children}\n      </DialogContent>\n\n      <DialogActions className={classes.actions} disableSpacing>\n        {!buttonThreeHidden && (\n          <Button\n            id='udpRecord-FluentDialog-Confirm'\n            udprecordid='udpRecord-FluentDialog-Confirm'\n            onClick={actionThree}\n            color='secondary'\n            disabled={disableThree}\n            className={classes.button}\n          >\n            {labelThree}\n          </Button>\n        )}\n        {!buttonTwoHidden && (\n          <Button\n            id='udpRecord-FluentDialog-Confirm'\n            udprecordid='udpRecord-FluentDialog-Confirm'\n            onClick={actionTwo}\n            color='secondary'\n            disabled={disableTwo}\n            className={classes.button}\n          >\n            {labelTwo}\n          </Button>\n        )}\n        {!buttonOneHidden && (\n          <PrimaryActionButton\n            id='udpRecord-FluentDialog-Cancel'\n            udprecordid='udpRecord-FluentDialog-Cancel'\n            disabled={disableOne}\n            onClick={actionOne}\n          >\n            {labelOne}\n          </PrimaryActionButton>\n        )}\n      </DialogActions>\n      {progress && (\n        <LinearProgress color='secondary' value={progress} {...otherProps} />\n      )}\n    </Dialog>\n  );\n};\n"],"mappings":";;;;;AAaA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,OAAO;EACL,cAAc;EACd,YAAY,UACV,MAAM,UAAU,aAAa,MAAM,QAAQ,UAAU;EACxD;CACD,OAAO,EACL,QAAQ,UAAU,MAAM,UAAU,MAAM,QAAQ,UAAU,MAC3D;CACD,SAAS;EACP,cAAc;EACd,aAAa;EACb,SAAS;EACV;CACD,QAAQ;EACN,cAAc;EACd,SAAS;EACT,eAAe;EAChB;CACD,eAAe;EACb,SAAS,UAAU,MAAM,uBAAuB;EAChD,QAAQ,UAAU,MAAM,sBAAsB;EAC/C;CACD,kBAAkB;EAChB,UAAU;EACV,MAAM;EACN,KAAK;EACL,QAAQ;EACR,OAAO,MAAM,QAAQ,EAAE;EACvB,kBAAkB,UAChB,MAAM,yBAAyB,MAAM,QAAQ,QAAQ;EACxD;CACF,EAAE;AAEH,MAAa,gBAAgB,UAAU;CACrC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EACJ,OACA,SACA,WACA,WACA,aACA,UACA,UACA,YACA,MACA,aACA,gBACA,iBACA,SACA,eACA,UACA,kBAAkB,OAClB,kBAAkB,OAClB,oBAAoB,MACpB,YACA,YACA,cACA,UACA,0BAA0B,OAC1B,GAAG,eACD;AAEJ,QACE,oCAAC;EACO;EACN,SAAS;EACT,mBAAiB;EACjB,oBAAkB;EAClB,GAAI;EACJ,SAAS,EACP,OAAO,QAAQ,OAChB;IAED,oCAAC,SACC,WAAW,0BAA0B,QAAQ,mBAAmB,KAChE,EACF,oCAAC;EAAY,WAAW,QAAQ;EAAO,IAAI;IACxC,MACW,EACd,oCAAC,iBAAc,WAAW,QAAQ,iBAChC,oCAAC,qBAAkB,IAAI,iBAAgB,QAA4B,EAClE,SACa,EAEhB,oCAAC;EAAc,WAAW,QAAQ;EAAS;IACxC,CAAC,qBACA,oCAAC;EACC,IAAG;EACH,aAAY;EACZ,SAAS;EACT,OAAM;EACN,UAAU;EACV,WAAW,QAAQ;IAElB,WACM,EAEV,CAAC,mBACA,oCAAC;EACC,IAAG;EACH,aAAY;EACZ,SAAS;EACT,OAAM;EACN,UAAU;EACV,WAAW,QAAQ;IAElB,SACM,EAEV,CAAC,mBACA,oCAAC;EACC,IAAG;EACH,aAAY;EACZ,UAAU;EACV,SAAS;IAER,SACmB,CAEV,EACf,YACC,oCAAC;EAAe,OAAM;EAAY,OAAO;EAAU,GAAI;GAAc,CAEhE"}

package/dist/FluentDisplayNumbers-SPFOLb3Y.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { Avatar, Typography, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+
+//#region src/UI/widgets/FluentComponents/atoms/FluentDisplayNumbers.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	regular: {},
+	small: {},
+	number: {
+		"$regular &": { fontSize: "4rem" },
+		"$small &": { fontSize: 30 }
+	},
+	unit: {
+		marginTop: theme.spacing(5),
+		width: 25,
+		height: 25,
+		"$small &": {
+			marginTop: "16px",
+			width: "16px",
+			height: "16px",
+			"& .MuiTypography-subtitle1": { fontSize: "0.7rem" }
+		}
+	},
+	unitValue: { marginTop: -1.75 }
+}), { name: "FluentDisplayNumbers" });
+const FluentDisplayNumbers = (props) => {
+	const classes = useStyles();
+	const { small, number: rawNumber } = props;
+	let no = [rawNumber, null];
+	if (rawNumber > 1e6) {
+		let newNumber = rawNumber / 1e6;
+		no = [Math.round(newNumber * 10) / 10, "M"];
+	} else if (rawNumber > 1e3) {
+		let newNumber = rawNumber / 1e3;
+		no = [Math.round(newNumber * 10) / 10, "k"];
+	}
+	const [number, unit] = no;
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, small ? classes.small : classes.regular) }, /* @__PURE__ */ React.createElement(Typography, { className: classes.number }, number), unit && /* @__PURE__ */ React.createElement(Avatar, { className: classes.unit }, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle1",
+		className: classes.unitValue
+	}, unit)));
+};
+
+//#endregion
+export { FluentDisplayNumbers as t };
+//# sourceMappingURL=FluentDisplayNumbers-SPFOLb3Y.js.map

package/dist/FluentDisplayNumbers-SPFOLb3Y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentDisplayNumbers-SPFOLb3Y.js","names":[],"sources":["../src/UI/widgets/FluentComponents/atoms/FluentDisplayNumbers.jsx"],"sourcesContent":["import React from 'react';\nimport { Avatar, Typography, makeStyles } from '@material-ui/core';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles(\n  theme => ({\n    root: {\n      display: 'flex',\n      flexDirection: 'row',\n    },\n    regular: {},\n    small: {},\n    number: {\n      '$regular &': {\n        fontSize: '4rem',\n      },\n      '$small &': {\n        fontSize: 30,\n      },\n    },\n    unit: {\n      marginTop: theme.spacing(5),\n      width: 25,\n      height: 25,\n      '$small &': {\n        marginTop: '16px',\n        width: '16px',\n        height: '16px',\n        '& .MuiTypography-subtitle1': {\n          fontSize: '0.7rem',\n        },\n      },\n    },\n    unitValue: {\n      marginTop: -1.75,\n    },\n  }),\n  { name: 'FluentDisplayNumbers' }\n);\n\nconst FluentDisplayNumbers = props => {\n  const classes = useStyles();\n  const { small, number: rawNumber } = props;\n\n  // TODO: Revisit below after Tampa Demo\n  let no = [rawNumber, null];\n  if (rawNumber > 1_000_000) {\n    //no = [Math.floor(rawNumber / 1_000_000), 'M'];\n    let newNumber = rawNumber / 1_000_000;\n    no = [Math.round(newNumber * 10) / 10, 'M'];\n  } else if (rawNumber > 1_000) {\n    //no = [Math.floor(rawNumber / 1_000), 'k'];\n    let newNumber = rawNumber / 1_000;\n    no = [Math.round(newNumber * 10) / 10, 'k'];\n  }\n  const [number, unit] = no;\n\n  return (\n    <div\n      className={clsx(classes.root, small ? classes.small : classes.regular)}\n    >\n      <Typography className={classes.number}>{number}</Typography>\n      {unit && (\n        <Avatar className={classes.unit}>\n          <Typography variant=\"subtitle1\" className={classes.unitValue}>\n            {unit}\n          </Typography>\n        </Avatar>\n      )}\n    </div>\n  );\n};\n\nexport default FluentDisplayNumbers;\n"],"mappings":";;;;;AAIA,MAAM,YAAY,YAChB,WAAU;CACR,MAAM;EACJ,SAAS;EACT,eAAe;EAChB;CACD,SAAS,EAAE;CACX,OAAO,EAAE;CACT,QAAQ;EACN,cAAc,EACZ,UAAU,QACX;EACD,YAAY,EACV,UAAU,IACX;EACF;CACD,MAAM;EACJ,WAAW,MAAM,QAAQ,EAAE;EAC3B,OAAO;EACP,QAAQ;EACR,YAAY;GACV,WAAW;GACX,OAAO;GACP,QAAQ;GACR,8BAA8B,EAC5B,UAAU,UACX;GACF;EACF;CACD,WAAW,EACT,WAAW,OACZ;CACF,GACD,EAAE,MAAM,wBAAwB,CACjC;AAED,MAAM,wBAAuB,UAAS;CACpC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,OAAO,QAAQ,cAAc;CAGrC,IAAI,KAAK,CAAC,WAAW,KAAK;AAC1B,KAAI,YAAY,KAAW;EAEzB,IAAI,YAAY,YAAY;AAC5B,OAAK,CAAC,KAAK,MAAM,YAAY,GAAG,GAAG,IAAI,IAAI;YAClC,YAAY,KAAO;EAE5B,IAAI,YAAY,YAAY;AAC5B,OAAK,CAAC,KAAK,MAAM,YAAY,GAAG,GAAG,IAAI,IAAI;;CAE7C,MAAM,CAAC,QAAQ,QAAQ;AAEvB,QACE,oCAAC,SACC,WAAW,KAAK,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ,IAEtE,oCAAC,cAAW,WAAW,QAAQ,UAAS,OAAoB,EAC3D,QACC,oCAAC,UAAO,WAAW,QAAQ,QACzB,oCAAC;EAAW,SAAQ;EAAY,WAAW,QAAQ;IAChD,KACU,CACN,CAEP"}

package/dist/FluentIcon-pwGrBtD8.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+
+//#region src/utilities/iconLibrary/FluentIcon.jsx
+const useStyles = makeStyles((props) => ({
+	root: {
+		display: "inline-block",
+		"& > svg": { display: "inherit" }
+	},
+	default: {
+		fontSize: 18,
+		width: 18,
+		height: 18
+	},
+	large: {
+		fontSize: 24,
+		width: 24,
+		height: 24
+	},
+	medium: {
+		fontSize: 16,
+		width: 16,
+		height: 16
+	},
+	small: {
+		fontSize: 14,
+		width: 14,
+		height: 14
+	},
+	xs: {
+		fontSize: 12,
+		width: 12,
+		height: 12
+	},
+	color: { color: (props) => props.color },
+	customSize: {
+		fontSize: (props) => props.size,
+		width: (props) => props.size,
+		height: (props) => props.size
+	}
+}), { name: "FluentIcon" });
+/**
+* Wrapper for @fluentui/react-icons to provide it with required size
+*/
+const FluentIcon = (props) => {
+	const classes = useStyles(props);
+	const { component: IconComponent, size = "default", className, color, customSize = false, ...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(IconComponent, {
+		...otherProps,
+		className: clsx(classes.root, className, customSize && typeof size === "number" && classes["customSize"] || classes[size], color && classes["color"])
+	});
+};
+
+//#endregion
+export { FluentIcon as t };
+//# sourceMappingURL=FluentIcon-pwGrBtD8.js.map

package/dist/FluentIcon-pwGrBtD8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentIcon-pwGrBtD8.js","names":[],"sources":["../src/utilities/iconLibrary/FluentIcon.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles(\n  (props) => ({\n    root: {\n      display: 'inline-block',\n      '& > svg': {\n        display: 'inherit'\n      }\n    },\n    default: {\n      fontSize: 18,\n      width: 18,\n      height: 18\n    },\n    large: {\n      fontSize: 24,\n      width: 24,\n      height: 24\n    },\n    medium: {\n      fontSize: 16,\n      width: 16,\n      height: 16\n    },\n    small: {\n      fontSize: 14,\n      width: 14,\n      height: 14\n    },\n    xs: {\n      fontSize: 12,\n      width: 12,\n      height: 12\n    },\n    color: {\n      color: (props) => props.color\n    },\n    customSize: {\n      fontSize: (props) => props.size,\n      width: (props) => props.size,\n      height: (props) => props.size\n    }\n  }),\n  { name: 'FluentIcon' }\n);\n\n/**\n * Wrapper for @fluentui/react-icons to provide it with required size\n */\nexport const FluentIcon = (props) => {\n  const classes = useStyles(props);\n  const {\n    component: IconComponent,\n    size = 'default',\n    className,\n    color,\n    customSize = false,\n    ...otherProps\n  } = props;\n\n  return (\n    <IconComponent\n      {...otherProps}\n      className={clsx(\n        classes.root,\n        className,\n        (customSize && typeof size === 'number' && classes['customSize']) ||\n          classes[size],\n        color && classes['color']\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;AAIA,MAAM,YAAY,YACf,WAAW;CACV,MAAM;EACJ,SAAS;EACT,WAAW,EACT,SAAS,WACV;EACF;CACD,SAAS;EACP,UAAU;EACV,OAAO;EACP,QAAQ;EACT;CACD,OAAO;EACL,UAAU;EACV,OAAO;EACP,QAAQ;EACT;CACD,QAAQ;EACN,UAAU;EACV,OAAO;EACP,QAAQ;EACT;CACD,OAAO;EACL,UAAU;EACV,OAAO;EACP,QAAQ;EACT;CACD,IAAI;EACF,UAAU;EACV,OAAO;EACP,QAAQ;EACT;CACD,OAAO,EACL,QAAQ,UAAU,MAAM,OACzB;CACD,YAAY;EACV,WAAW,UAAU,MAAM;EAC3B,QAAQ,UAAU,MAAM;EACxB,SAAS,UAAU,MAAM;EAC1B;CACF,GACD,EAAE,MAAM,cAAc,CACvB;;;;AAKD,MAAa,cAAc,UAAU;CACnC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EACJ,WAAW,eACX,OAAO,WACP,WACA,OACA,aAAa,OACb,GAAG,eACD;AAEJ,QACE,oCAAC;EACC,GAAI;EACJ,WAAW,KACT,QAAQ,MACR,WACC,cAAc,OAAO,SAAS,YAAY,QAAQ,iBACjD,QAAQ,OACV,SAAS,QAAQ,SAClB;GACD"}

package/dist/FluentIconButton-Av4urxc6.js

@@ -0,0 +1,29 @@
+import { t as FluentIcon } from "./FluentIcon-pwGrBtD8.js";
+import React from "react";
+import { IconButton, makeStyles } from "@material-ui/core";
+
+//#region src/UI/inputs/buttons/FluentIconButton.jsx
+const useStyles = makeStyles((theme) => ({ root: {
+	borderRadius: (props) => props.rounded ? 50 : 2,
+	width: (props) => props.rounded ? theme.spacing(4) : theme.spacing(1),
+	height: (props) => props.rounded ? theme.spacing(4) : theme.spacing(1),
+	border: (props) => props.rounded && `1px solid ${theme.palette.divider}`,
+	background: (props) => props.rounded && theme.palette.common.white
+} }));
+const FluentIconButton = (props) => {
+	const classes = useStyles(props);
+	const { icon, size = "medium", id, udprecordid, ...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(IconButton, {
+		...otherProps,
+		classes: { root: classes.root },
+		udprecordid
+	}, /* @__PURE__ */ React.createElement(FluentIcon, {
+		component: icon,
+		size,
+		id
+	}));
+};
+
+//#endregion
+export { FluentIconButton as t };
+//# sourceMappingURL=FluentIconButton-Av4urxc6.js.map

package/dist/FluentIconButton-Av4urxc6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentIconButton-Av4urxc6.js","names":[],"sources":["../src/UI/inputs/buttons/FluentIconButton.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, IconButton } from '@material-ui/core'\nimport { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    borderRadius: (props) => (props.rounded ? 50 : 2),\n    width: (props) => (props.rounded ? theme.spacing(4) : theme.spacing(1)),\n    height: (props) => (props.rounded ? theme.spacing(4) : theme.spacing(1)),\n    border: (props) => props.rounded && `1px solid ${theme.palette.divider}`,\n    background: (props) => props.rounded && theme.palette.common.white\n  }\n}))\n\nexport const FluentIconButton = (props) => {\n  const classes = useStyles(props)\n  const { icon, size = 'medium', id, udprecordid, ...otherProps } = props\n  return (\n    <IconButton\n      {...otherProps}\n      classes={{\n        root: classes.root\n      }}\n      udprecordid={udprecordid}\n    >\n      <FluentIcon component={icon} size={size} id={id} />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;AAIA,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM;CACJ,eAAe,UAAW,MAAM,UAAU,KAAK;CAC/C,QAAQ,UAAW,MAAM,UAAU,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,EAAE;CACtE,SAAS,UAAW,MAAM,UAAU,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,EAAE;CACvE,SAAS,UAAU,MAAM,WAAW,aAAa,MAAM,QAAQ;CAC/D,aAAa,UAAU,MAAM,WAAW,MAAM,QAAQ,OAAO;CAC9D,EACF,EAAE;AAEH,MAAa,oBAAoB,UAAU;CACzC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,MAAM,OAAO,UAAU,IAAI,aAAa,GAAG,eAAe;AAClE,QACE,oCAAC;EACC,GAAI;EACJ,SAAS,EACP,MAAM,QAAQ,MACf;EACY;IAEb,oCAAC;EAAW,WAAW;EAAY;EAAU;GAAM,CACxC"}

package/dist/FluentIconKey-BMx7hYa-.js

@@ -0,0 +1,41 @@
+import { t as FluentIcon } from "./FluentIcon-pwGrBtD8.js";
+import { t as UnityFluentIcon } from "./UnityFluentIcon-CZlFXb6G.js";
+import React, { memo } from "react";
+import { ButtonBase, Paper, Tooltip, makeStyles } from "@material-ui/core";
+
+//#region src/UI/dataDisplay/map/FluentIconKey.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		width: 10,
+		height: 10,
+		paddingTop: theme.spacing(2.5),
+		paddingBottom: theme.spacing(5.5),
+		paddingLeft: theme.spacing(3.5),
+		paddingRight: theme.spacing(5.5),
+		margin: theme.spacing(.25),
+		cursor: "pointer",
+		"&:hover": { boxShadow: theme.shadows[1] }
+	},
+	images: {
+		height: theme.spacing(2.25),
+		width: theme.spacing(2.25)
+	}
+}));
+const IconKey = (props) => {
+	const classes = useStyles();
+	const { icon, select, tooltip, iconType } = props;
+	return /* @__PURE__ */ React.createElement(ButtonBase, { onClick: select }, /* @__PURE__ */ React.createElement(Tooltip, {
+		title: tooltip,
+		placement: "top"
+	}, /* @__PURE__ */ React.createElement(Paper, {
+		elevation: 0,
+		square: true,
+		className: classes.root,
+		variant: "outlined"
+	}, /* @__PURE__ */ React.createElement("div", null, iconType === "unity" ? /* @__PURE__ */ React.createElement(UnityFluentIcon, { component: icon }) : /* @__PURE__ */ React.createElement(FluentIcon, { component: icon })))));
+};
+var FluentIconKey_default = memo(IconKey);
+
+//#endregion
+export { FluentIconKey_default as t };
+//# sourceMappingURL=FluentIconKey-BMx7hYa-.js.map

package/dist/FluentIconKey-BMx7hYa-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentIconKey-BMx7hYa-.js","names":[],"sources":["../src/UI/dataDisplay/map/FluentIconKey.jsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { ButtonBase, makeStyles, Paper, Tooltip } from '@material-ui/core';\nimport {FluentIcon} from '../../../utilities/iconLibrary/FluentIcon';\nimport { UnityFluentIcon } from '../../../utilities/iconLibrary/UnityFluentIcon';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    width: 10,\n    height: 10,\n    paddingTop: theme.spacing(2.5),\n    paddingBottom: theme.spacing(5.5),\n    paddingLeft: theme.spacing(3.5),\n    paddingRight: theme.spacing(5.5),\n    margin: theme.spacing(0.25),\n    cursor: 'pointer',\n\n    '&:hover': {\n      boxShadow: theme.shadows[1],\n    },\n  },\n  images: {\n    height: theme.spacing(2.25),\n    width: theme.spacing(2.25),\n  },\n}));\n\nconst IconKey = props => {\n  const classes = useStyles();\n  const { icon, select, tooltip, iconType } = props;\n\n  return (\n    <ButtonBase onClick={select}>\n      <Tooltip title={tooltip} placement=\"top\">\n        <Paper elevation={0} square className={classes.root} variant=\"outlined\">\n          <div>\n            {iconType === 'unity' ? (\n              <UnityFluentIcon component={icon} />\n            ) : (\n              <FluentIcon component={icon} />\n            )}\n          </div>\n        </Paper>\n      </Tooltip>\n    </ButtonBase>\n  );\n};\nexport default memo(IconKey);\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,YAAW,WAAU;CACrC,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,YAAY,MAAM,QAAQ,IAAI;EAC9B,eAAe,MAAM,QAAQ,IAAI;EACjC,aAAa,MAAM,QAAQ,IAAI;EAC/B,cAAc,MAAM,QAAQ,IAAI;EAChC,QAAQ,MAAM,QAAQ,IAAK;EAC3B,QAAQ;EAER,WAAW,EACT,WAAW,MAAM,QAAQ,IAC1B;EACF;CACD,QAAQ;EACN,QAAQ,MAAM,QAAQ,KAAK;EAC3B,OAAO,MAAM,QAAQ,KAAK;EAC3B;CACF,EAAE;AAEH,MAAM,WAAU,UAAS;CACvB,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,MAAM,QAAQ,SAAS,aAAa;AAE5C,QACE,oCAAC,cAAW,SAAS,UACnB,oCAAC;EAAQ,OAAO;EAAS,WAAU;IACjC,oCAAC;EAAM,WAAW;EAAG;EAAO,WAAW,QAAQ;EAAM,SAAQ;IAC3D,oCAAC,aACE,aAAa,UACZ,oCAAC,mBAAgB,WAAW,OAAQ,GAEpC,oCAAC,cAAW,WAAW,OAAQ,CAE7B,CACA,CACA,CACC;;AAGjB,4BAAe,KAAK,QAAQ"}

package/dist/FluentInputSlider-iUdAzMFS.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { ZoomIcon } from "@fluentui/react-icons";
+import { makeStyles } from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import Slider from "@material-ui/core/Slider";
+import Input from "@material-ui/core/Input";
+
+//#region src/UI/inputs/sliders/FluentInputSlider.jsx
+const useStyles = makeStyles({
+	root: { width: 250 },
+	input: { width: 42 }
+});
+const FluentInputSlider = (props) => {
+	const { value, handleSliderChange, handleInputChange, handleBlur } = props;
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Grid, {
+		container: true,
+		spacing: 2,
+		alignItems: "center"
+	}, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(ZoomIcon, null)), /* @__PURE__ */ React.createElement(Grid, {
+		item: true,
+		xs: true
+	}, /* @__PURE__ */ React.createElement(Slider, {
+		value: typeof value === "number" ? value : 0,
+		onChange: handleSliderChange,
+		"aria-labelledby": "input-slider",
+		step: 1,
+		marks: true,
+		min: 0,
+		max: 20
+	})), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Input, {
+		className: classes.input,
+		value,
+		margin: "dense",
+		onChange: handleInputChange,
+		onBlur: handleBlur,
+		inputProps: {
+			step: 1,
+			min: 0,
+			max: 20,
+			type: "number",
+			"aria-labelledby": "input-slider"
+		}
+	}))));
+};
+
+//#endregion
+export { FluentInputSlider as t };
+//# sourceMappingURL=FluentInputSlider-iUdAzMFS.js.map

package/dist/FluentInputSlider-iUdAzMFS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentInputSlider-iUdAzMFS.js","names":[],"sources":["../src/UI/inputs/sliders/FluentInputSlider.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles } from '@material-ui/core/styles'\nimport Grid from '@material-ui/core/Grid'\nimport Slider from '@material-ui/core/Slider'\nimport Input from '@material-ui/core/Input'\nimport { ZoomIcon } from '@fluentui/react-icons'\n\nconst useStyles = makeStyles({\n  root: {\n    width: 250\n  },\n  input: {\n    width: 42\n  }\n})\n// @todo: make icon a props, updated to fluent design specs\nconst FluentInputSlider = (props) => {\n  const { value, handleSliderChange, handleInputChange, handleBlur } = props\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <Grid container spacing={2} alignItems='center'>\n        <Grid item>\n          <ZoomIcon />\n        </Grid>\n        <Grid item xs>\n          <Slider\n            value={typeof value === 'number' ? value : 0}\n            onChange={handleSliderChange}\n            aria-labelledby='input-slider'\n            step={1}\n            marks\n            min={0}\n            max={20}\n          />\n        </Grid>\n        <Grid item>\n          <Input\n            className={classes.input}\n            value={value}\n            margin='dense'\n            onChange={handleInputChange}\n            onBlur={handleBlur}\n            inputProps={{\n              step: 1,\n              min: 0,\n              max: 20,\n              type: 'number',\n              'aria-labelledby': 'input-slider'\n            }}\n          />\n        </Grid>\n      </Grid>\n    </div>\n  )\n}\nexport default FluentInputSlider\n"],"mappings":";;;;;;;;AAOA,MAAM,YAAY,WAAW;CAC3B,MAAM,EACJ,OAAO,KACR;CACD,OAAO,EACL,OAAO,IACR;CACF,CAAC;AAEF,MAAM,qBAAqB,UAAU;CACnC,MAAM,EAAE,OAAO,oBAAoB,mBAAmB,eAAe;CACrE,MAAM,UAAU,WAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EAAK;EAAU,SAAS;EAAG,YAAW;IACrC,oCAAC,QAAK,cACJ,oCAAC,eAAW,CACP,EACP,oCAAC;EAAK;EAAK;IACT,oCAAC;EACC,OAAO,OAAO,UAAU,WAAW,QAAQ;EAC3C,UAAU;EACV,mBAAgB;EAChB,MAAM;EACN;EACA,KAAK;EACL,KAAK;GACL,CACG,EACP,oCAAC,QAAK,cACJ,oCAAC;EACC,WAAW,QAAQ;EACZ;EACP,QAAO;EACP,UAAU;EACV,QAAQ;EACR,YAAY;GACV,MAAM;GACN,KAAK;GACL,KAAK;GACL,MAAM;GACN,mBAAmB;GACpB;GACD,CACG,CACF,CACH"}

package/dist/FluentLink-DZndJvST.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Link, Typography, makeStyles, useTheme } from "@material-ui/core";
+import { Link as Link$1 } from "react-router-dom";
+
+//#region src/UI/inputs/link/FluentLink.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		textDecoration: "none",
+		"& > * + *": { marginLeft: theme.spacing(2) }
+	},
+	link: {
+		textDecoration: "none",
+		fontWeight: 700
+	}
+}));
+const FluentLink = (props) => {
+	const { icon, alt, label, children, activeClassName, to, linkColor, ...otherProps } = props;
+	const theme = useTheme();
+	const classes = useStyles();
+	return to && to.substring(0, 4) !== "http" ? /* @__PURE__ */ React.createElement(Link$1, {
+		to,
+		activeClassName,
+		className: classes.link,
+		style: { color: linkColor === "primary" ? theme.palette.primary.main : theme.palette.secondary.main }
+	}, children) : /* @__PURE__ */ React.createElement(Typography, {
+		component: "div",
+		className: classes.root
+	}, /* @__PURE__ */ React.createElement(Link, {
+		...otherProps,
+		href: to,
+		color: linkColor,
+		variant: "body1",
+		style: { textDecoration: "none" }
+	}, children));
+};
+
+//#endregion
+export { FluentLink as t };
+//# sourceMappingURL=FluentLink-DZndJvST.js.map

package/dist/FluentLink-DZndJvST.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentLink-DZndJvST.js","names":["Link","MuiLink"],"sources":["../src/UI/inputs/link/FluentLink.jsx"],"sourcesContent":["import React from 'react'\nimport { Link } from 'react-router-dom'\nimport {\n  Typography,\n  Link as MuiLink,\n  makeStyles,\n  useTheme\n} from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    textDecoration: 'none',\n    '& > * + *': {\n      marginLeft: theme.spacing(2)\n    }\n  },\n  link: {\n    textDecoration: 'none',\n    fontWeight: 700\n  }\n}))\n\nexport const FluentLink = (props) => {\n  const {\n    icon,\n    alt,\n    label,\n    children,\n    activeClassName,\n    to,\n    linkColor,\n    ...otherProps\n  } = props\n  const theme = useTheme()\n  const classes = useStyles()\n\n  return to && to.substring(0, 4) !== 'http' ? (\n    <Link\n      to={to}\n      activeClassName={activeClassName}\n      className={classes.link}\n      style={{\n        color:\n          linkColor === 'primary'\n            ? theme.palette.primary.main\n            : theme.palette.secondary.main\n      }}\n    >\n      {children}\n    </Link>\n  ) : (\n    <Typography component='div' className={classes.root}>\n      <MuiLink\n        {...otherProps}\n        href={to}\n        color={linkColor}\n        variant='body1'\n        style={{ textDecoration: 'none' }}\n      >\n        {children}\n      </MuiLink>\n    </Typography>\n  )\n}\n"],"mappings":";;;;;AASA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,gBAAgB;EAChB,aAAa,EACX,YAAY,MAAM,QAAQ,EAAE,EAC7B;EACF;CACD,MAAM;EACJ,gBAAgB;EAChB,YAAY;EACb;CACF,EAAE;AAEH,MAAa,cAAc,UAAU;CACnC,MAAM,EACJ,MACA,KACA,OACA,UACA,iBACA,IACA,WACA,GAAG,eACD;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,UAAU,WAAW;AAE3B,QAAO,MAAM,GAAG,UAAU,GAAG,EAAE,KAAK,SAClC,oCAACA;EACK;EACa;EACjB,WAAW,QAAQ;EACnB,OAAO,EACL,OACE,cAAc,YACV,MAAM,QAAQ,QAAQ,OACtB,MAAM,QAAQ,UAAU,MAC/B;IAEA,SACI,GAEP,oCAAC;EAAW,WAAU;EAAM,WAAW,QAAQ;IAC7C,oCAACC;EACC,GAAI;EACJ,MAAM;EACN,OAAO;EACP,SAAQ;EACR,OAAO,EAAE,gBAAgB,QAAQ;IAEhC,SACO,CACC"}

package/dist/FluentListElement-x4t_kFgR.js

@@ -0,0 +1,180 @@
+import { t as FluentIcon } from "./FluentIcon-pwGrBtD8.js";
+import { t as LayoutUnit } from "./LayoutUnit-xKXf06lQ.js";
+import { t as StatusChip } from "./StatusChip-DZAN88VU.js";
+import { t as EmptyStateDisplay } from "./EmptyStateDisplay-CPCd-JUL.js";
+import React, { useState } from "react";
+import { Avatar, Box, Divider, Link, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText, Typography, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { ErrorIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { makeStyles as makeStyles$1, useTheme as useTheme$1 } from "@material-ui/core/styles";
+
+//#region src/UI/dataDisplay/HintPanel.jsx
+const useStyles$2 = makeStyles$1((theme) => ({
+	hintContainer: { borderLeft: `3px solid ${theme.palette.primary.main}` },
+	hintContent: {
+		backgroundColor: "#F3F9FE",
+		padding: `1rem`
+	},
+	hideHintButton: {
+		border: "none",
+		background: "none",
+		cursor: "pointer",
+		color: "#0B79D0",
+		textDecoration: "none"
+	},
+	hidehelp: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "flex-end",
+		width: "100%"
+	}
+}));
+const HintPanel = ({ hint, hideHintText }) => {
+	const classes = useStyles$2(useTheme$1());
+	const [showHint, setShowHint] = useState(true);
+	const handleHideHint = () => {
+		setShowHint(false);
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.hintContainer }, showHint && /* @__PURE__ */ React.createElement("div", { className: classes.hintContent }, /* @__PURE__ */ React.createElement("div", null, hint), /* @__PURE__ */ React.createElement("div", { className: classes.hidehelp }, /* @__PURE__ */ React.createElement("button", {
+		className: classes.hideHintButton,
+		onClick: handleHideHint
+	}, hideHintText))));
+};
+HintPanel.propTypes = {
+	hint: PropTypes.string.isRequired,
+	hideHintText: PropTypes.string.isRequired
+};
+
+//#endregion
+//#region src/UI/dataDisplay/AmbientList.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	avatar: {
+		backgroundColor: theme.palette.secondary.light,
+		color: theme.palette.getContrastText(theme.palette.secondary.light)
+	},
+	denseAvatar: {
+		width: theme.spacing(3.75),
+		height: theme.spacing(3.75),
+		margin: "4px 0px"
+	},
+	list: {
+		width: "100%",
+		backgroundColor: theme.palette.background.paper,
+		padding: "0px",
+		maxHeight: (props) => props?.maxHeight || 343,
+		overflow: "auto",
+		height: (props) => props?.listHeight
+	},
+	listItem: { padding: "0px 15px" },
+	status: { marginLeft: theme.spacing(1) },
+	noDataMessage: {
+		height: (props) => props?.noDataHeight,
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "10px"
+	}
+}));
+const DefaultFieldConfig = {
+	primaryText: "primaryText",
+	secondaryText: "secondaryText"
+};
+const AmbientList = (props) => {
+	const theme = useTheme();
+	const classes = useStyles$1(props);
+	const { data, useAvatar = true, getItemIcon = () => {}, getItemStatus = () => {}, onItemClick = () => {}, fieldConfig = DefaultFieldConfig, noDataMessage = "No data available" } = props;
+	if (!data || data.length === 0) return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), /* @__PURE__ */ React.createElement(EmptyStateDisplay, {
+		icon: ErrorIcon,
+		primaryText: noDataMessage
+	}), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }));
+	return /* @__PURE__ */ React.createElement(List, { className: classes?.list }, data?.map((item, index) => {
+		const status = getItemStatus(item);
+		const icon = getItemIcon(item);
+		return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ListItem, {
+			button: true,
+			className: classes.listItem,
+			onClick: () => onItemClick(item)
+		}, useAvatar && icon ? /* @__PURE__ */ React.createElement(ListItemAvatar, null, /* @__PURE__ */ React.createElement(Avatar, {
+			className: clsx(classes.avatar, { [classes.denseAvatar]: !item?.[fieldConfig?.primaryText] || !item?.[fieldConfig?.secondaryText] }),
+			sizes: "large"
+		}, /* @__PURE__ */ React.createElement(FluentIcon, {
+			component: icon,
+			size: "small"
+		}))) : /* @__PURE__ */ React.createElement("div", null, icon && /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(FluentIcon, {
+			component: icon,
+			size: !item?.[fieldConfig?.primaryText] || !item?.[fieldConfig?.secondaryText] ? "medium" : "large",
+			color: theme.palette.secondary.main
+		}))), /* @__PURE__ */ React.createElement(ListItemText, {
+			primary: item?.[fieldConfig?.primaryText],
+			secondary: item?.[fieldConfig?.secondaryText],
+			primaryTypographyProps: {
+				variant: "body2",
+				color: "textPrimary"
+			},
+			secondaryTypographyProps: {
+				variant: "body1",
+				color: "textSecondary"
+			}
+		}), /* @__PURE__ */ React.createElement(ListItemText, { disableTypography: true }, /* @__PURE__ */ React.createElement(Typography, { align: "right" }, item?.[fieldConfig?.subText])), status?.label && /* @__PURE__ */ React.createElement(Box, {
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+			alignItems: "flex-end",
+			className: classes.status
+		}, /* @__PURE__ */ React.createElement(StatusChip, {
+			status: status?.status ?? "info",
+			label: status?.label
+		}))), /* @__PURE__ */ React.createElement(Divider, null));
+	}));
+};
+AmbientList.propTypes = {
+	data: PropTypes.arrayOf(PropTypes.object),
+	useAvatar: PropTypes.bool,
+	getItemIcon: PropTypes.func,
+	getItemStatus: PropTypes.func,
+	onItemClick: PropTypes.func,
+	fieldConfig: PropTypes.shape({
+		primaryText: PropTypes.string,
+		secondaryText: PropTypes.string,
+		subText: PropTypes.string
+	}),
+	noDataMessage: PropTypes.string,
+	maxHeight: PropTypes.number,
+	listHeight: PropTypes.string,
+	noDataHeight: PropTypes.string
+};
+
+//#endregion
+//#region src/UI/dataDisplay/FluentListElement.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	wrapper: {
+		display: "flex",
+		flexDirection: "row",
+		padding: theme.spacing(1),
+		lineHeight: 2
+	},
+	value: { flex: 1 }
+}));
+const FluentListElement = ({ subject, value, className, status, anchor = false, href }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, className) }, /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.value,
+		variant: "body2"
+	}, subject, " ", subject && ":"), status && /* @__PURE__ */ React.createElement(StatusChip, {
+		status,
+		label: value
+	}), anchor && href ? /* @__PURE__ */ React.createElement(Link, {
+		href,
+		variant: "body2",
+		underline: "hover",
+		target: "_blank",
+		rel: "noopener noreferrer"
+	}, /* @__PURE__ */ React.createElement("strong", null, value)) : !status ? /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, /* @__PURE__ */ React.createElement("strong", null, value)) : null), /* @__PURE__ */ React.createElement(Divider, null));
+};
+
+//#endregion
+export { AmbientList as n, HintPanel as r, FluentListElement as t };
+//# sourceMappingURL=FluentListElement-x4t_kFgR.js.map

package/dist/FluentListElement-x4t_kFgR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentListElement-x4t_kFgR.js","names":["useStyles","makeStyles","useTheme","useStyles","MuiList"],"sources":["../src/UI/dataDisplay/HintPanel.jsx","../src/UI/dataDisplay/AmbientList.jsx","../src/UI/dataDisplay/FluentListElement.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  hintContainer: {\n    borderLeft: `3px solid ${theme.palette.primary.main}`\n  },\n  hintContent: {\n    backgroundColor: '#F3F9FE',\n    padding: `1rem`\n  },\n  hideHintButton: {\n    border: 'none',\n    background: 'none',\n    cursor: 'pointer',\n    color: '#0B79D0',\n    textDecoration: 'none'\n  },\n  hidehelp: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-end',\n    width: '100%'\n  }\n}));\n\nexport const HintPanel = ({ hint, hideHintText }) => {\n  const theme = useTheme();\n  const classes = useStyles(theme);\n  const [showHint, setShowHint] = useState(true);\n\n  const handleHideHint = () => {\n    setShowHint(false);\n  };\n\n  return (\n    <div className={classes.hintContainer}>\n      {showHint && (\n        <div className={classes.hintContent}>\n          <div>{hint}</div>\n          <div className={classes.hidehelp}>\n            <button className={classes.hideHintButton} onClick={handleHideHint}>\n              {hideHintText}\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nHintPanel.propTypes = {\n  hint: PropTypes.string.isRequired, // Hint content to be displayed\n  hideHintText: PropTypes.string.isRequired // Text for the hide hint button\n};\n","import React from 'react';\nimport {\n  makeStyles,\n  useTheme,\n  Typography,\n  Box,\n  List as MuiList,\n  ListItem,\n  ListItemText,\n  Divider,\n  ListItemAvatar,\n  Avatar,\n  ListItemIcon\n} from '@material-ui/core';\nimport { ErrorIcon } from '@fluentui/react-icons';\nimport { StatusChip } from './status/StatusChip';\nimport { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';\nimport { LayoutUnit } from '../../layout/LayoutUnit';\nimport clsx from 'clsx';\nimport { EmptyStateDisplay } from './EmptyStateDisplay';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  avatar: {\n    backgroundColor: theme.palette.secondary.light,\n    color: theme.palette.getContrastText(theme.palette.secondary.light)\n  },\n  denseAvatar: {\n    width: theme.spacing(3.75),\n    height: theme.spacing(3.75),\n    margin: '4px 0px'\n  },\n  list: {\n    width: '100%',\n    backgroundColor: theme.palette.background.paper,\n    padding: '0px',\n    maxHeight: (props) => props?.maxHeight || 343,\n    overflow: 'auto',\n    height: (props) => props?.listHeight\n  },\n  listItem: {\n    padding: '0px 15px'\n  },\n  status: {\n    marginLeft: theme.spacing(1)\n  },\n  noDataMessage: {\n    height: (props) => props?.noDataHeight,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '10px'\n  }\n}));\n\nconst DefaultFieldConfig = {\n  primaryText: 'primaryText',\n  secondaryText: 'secondaryText'\n};\n\nexport const AmbientList = (props) => {\n  const theme = useTheme();\n  const classes = useStyles(props);\n\n  const {\n    data,\n    useAvatar = true,\n    getItemIcon = () => {},\n    getItemStatus = () => {},\n    onItemClick = () => {},\n    fieldConfig = DefaultFieldConfig,\n    noDataMessage = 'No data available'\n  } = props;\n\n  if (!data || data.length === 0) {\n    return (\n      <>\n        <LayoutUnit unit='xxs' />\n        <EmptyStateDisplay icon={ErrorIcon} primaryText={noDataMessage} />\n        <LayoutUnit unit='xxs' />\n      </>\n    );\n  }\n\n  return (\n    <MuiList className={classes?.list}>\n      {data?.map((item, index) => {\n        const status = getItemStatus(item);\n        const icon = getItemIcon(item);\n\n        return (\n          <>\n            <ListItem\n              button\n              className={classes.listItem}\n              onClick={() => onItemClick(item)}\n            >\n              {useAvatar && icon ? (\n                <ListItemAvatar>\n                  <Avatar\n                    className={clsx(classes.avatar, {\n                      [classes.denseAvatar]:\n                        !item?.[fieldConfig?.primaryText] ||\n                        !item?.[fieldConfig?.secondaryText]\n                    })}\n                    sizes='large'\n                  >\n                    <FluentIcon component={icon} size='small' />\n                  </Avatar>\n                </ListItemAvatar>\n              ) : (\n                <div>\n                  {icon && (\n                    <ListItemIcon>\n                      <FluentIcon\n                        component={icon}\n                        size={\n                          !item?.[fieldConfig?.primaryText] ||\n                          !item?.[fieldConfig?.secondaryText]\n                            ? 'medium'\n                            : 'large'\n                        }\n                        color={theme.palette.secondary.main}\n                      />\n                    </ListItemIcon>\n                  )}\n                </div>\n              )}\n              {/*\n              Note: The primary and secondary typography variant is flipped because\n              it is in incorrect in our theme. Temporary fix until we fix the theme.\n              */}\n              <ListItemText\n                primary={item?.[fieldConfig?.primaryText]}\n                secondary={item?.[fieldConfig?.secondaryText]}\n                primaryTypographyProps={{\n                  variant: 'body2',\n                  color: 'textPrimary'\n                }}\n                secondaryTypographyProps={{\n                  variant: 'body1',\n                  color: 'textSecondary'\n                }}\n              />\n              <ListItemText disableTypography>\n                <Typography align='right'>\n                  {item?.[fieldConfig?.subText]}\n                </Typography>\n              </ListItemText>\n\n              {status?.label && (\n                <Box\n                  display='flex'\n                  flexDirection='column'\n                  justifyContent='center'\n                  alignItems='flex-end'\n                  className={classes.status}\n                >\n                  <StatusChip\n                    status={status?.status ?? 'info'}\n                    label={status?.label}\n                  />\n                </Box>\n              )}\n            </ListItem>\n            <Divider />\n          </>\n        );\n      })}\n    </MuiList>\n  );\n};\n\nAmbientList.propTypes = {\n  data: PropTypes.arrayOf(PropTypes.object),\n  useAvatar: PropTypes.bool,\n  getItemIcon: PropTypes.func,\n  getItemStatus: PropTypes.func,\n  onItemClick: PropTypes.func,\n  fieldConfig: PropTypes.shape({\n    primaryText: PropTypes.string,\n    secondaryText: PropTypes.string,\n    subText: PropTypes.string\n  }),\n  noDataMessage: PropTypes.string,\n  maxHeight: PropTypes.number,\n  listHeight: PropTypes.string,\n  noDataHeight: PropTypes.string\n};\n","import React from 'react'\nimport { makeStyles, Typography, Divider, Link } from '@material-ui/core'\nimport { StatusChip } from './status/StatusChip'\nimport clsx from 'clsx'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  wrapper: {\n    display: 'flex',\n    flexDirection: 'row',\n    padding: theme.spacing(1),\n    lineHeight: 2\n  },\n  value: {\n    flex: 1\n  }\n}))\n\nexport const FluentListElement = ({ subject, value, className, status, anchor = false, href }) => {\n  const classes = useStyles()\n\n  return (\n    <div className={clsx(classes.root, className)}>\n      <div className={classes.wrapper}>\n        <Typography className={classes.value} variant='body2'>\n          {subject} {subject && ':'}\n        </Typography>\n        {status && <StatusChip status={status} label={value} />}\n        {anchor && href ?\n          <Link href={href} variant='body2' underline=\"hover\" target=\"_blank\" rel=\"noopener noreferrer\">\n            <strong>{value}</strong>\n          </Link>\n          :\n          !status ?\n            <Typography variant='body2'>\n              <strong>{value}</strong>\n            </Typography>\n          :\n          null\n        }\n      </div>\n\n      <Divider />\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/FluentListItem-BtUqcjod.js

@@ -0,0 +1,99 @@
+import { t as FluentIcon } from "./FluentIcon-pwGrBtD8.js";
+import { t as Typography$1 } from "./Typography-CuvZNahz.js";
+import { t as LayoutUnit } from "./LayoutUnit-xKXf06lQ.js";
+import { t as FluentCheckbox } from "./FluentCheckbox-CX7XgoFz.js";
+import React, { useState } from "react";
+import { Collapse, Divider, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { ChevronDownIcon } from "@fluentui/react-icons";
+
+//#region src/UI/dataDisplay/FluentListItem.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { height: theme.spacing(5) },
+	wrapper: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	titleWrapper: {
+		display: "flex",
+		width: "100%",
+		textAlign: "left",
+		alignItems: "center"
+	},
+	title: { flex: 1 },
+	progress: {
+		height: 2,
+		"&::after": {
+			content: `''`,
+			display: "block",
+			background: theme.palette.secondary.main,
+			width: (props) => props.progress / props.total * 425,
+			height: "100%"
+		}
+	},
+	iconStart: { marginRight: theme.spacing(1) },
+	iconEnd: { marginLeft: theme.spacing(1) },
+	expand: {
+		transform: "rotate(0deg)",
+		transition: theme.transitions.create("transform", { duration: theme.transitions.duration.shortest })
+	},
+	expandOpen: { transform: "rotate(180deg)" },
+	iconSpace: { width: theme.spacing(2.75) },
+	valueWrapper: {
+		display: "flex",
+		alignItems: "center"
+	},
+	valueIcon: { marginRight: theme.spacing(1) },
+	checkbox: {
+		marginRight: theme.spacing(1),
+		padding: "0px"
+	}
+}), { name: "FluentListItem" });
+const FluentListItem = (props) => {
+	const classes = useStyles(props);
+	const { subject, value, visualization, boldSubject = true, expandable = false, valueTextColor, icon, iconColor, iconEnd = true, valueIcon, valueIconColor, hideDivider = false, children, expandedDefaultValue = false, keepIconLeftSpace = false, keepIconRightSpace = false, defaultChecked = false, onCheckEvent } = props;
+	const [expandItem, setExpandItem] = useState(expandedDefaultValue);
+	const handleOnClick = () => {
+		setExpandItem(!expandItem);
+	};
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
+		className: classes.root,
+		onClick: expandable ? handleOnClick : null
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.titleWrapper }, keepIconLeftSpace && (!expandable || iconEnd) && /* @__PURE__ */ React.createElement("div", { className: classes.iconSpace }), onCheckEvent && /* @__PURE__ */ React.createElement(FluentCheckbox, {
+		defaultChecked,
+		onChange: onCheckEvent,
+		className: classes.checkbox
+	}), (icon || expandable) && !iconEnd && /* @__PURE__ */ React.createElement(FluentIcon, {
+		component: expandable ? ChevronDownIcon : icon,
+		color: iconColor,
+		className: clsx(classes.iconStart, {
+			[classes.expand]: expandable,
+			[classes.expandOpen]: expandable && expandItem
+		}),
+		size: "small"
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.title }, /* @__PURE__ */ React.createElement(Typography$1, { variant: "body1" }, boldSubject ? /* @__PURE__ */ React.createElement("strong", null, subject) : subject)), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement("div", { className: classes.valueWrapper }, valueIcon && /* @__PURE__ */ React.createElement(FluentIcon, {
+		component: valueIcon,
+		color: valueIconColor,
+		className: classes.valueIcon,
+		size: "small"
+	}), /* @__PURE__ */ React.createElement(Typography$1, {
+		variant: "body1",
+		color: valueTextColor
+	}, value)), (icon || expandable) && iconEnd && /* @__PURE__ */ React.createElement(FluentIcon, {
+		component: expandable ? ChevronDownIcon : icon,
+		color: iconColor,
+		className: clsx(classes.iconEnd, {
+			[classes.expand]: expandable,
+			[classes.expandOpen]: expandable && expandItem
+		}),
+		size: "small"
+	}), keepIconRightSpace && (!expandable || !iconEnd) && /* @__PURE__ */ React.createElement("div", { className: classes.iconSpace }))), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), !hideDivider && /* @__PURE__ */ React.createElement(Divider, { className: visualization && classes.progress })), /* @__PURE__ */ React.createElement(Collapse, {
+		in: expandItem,
+		timeout: "auto",
+		unmountOnExit: true
+	}, /* @__PURE__ */ React.createElement("div", null, children)));
+};
+
+//#endregion
+export { FluentListItem as t };
+//# sourceMappingURL=FluentListItem-BtUqcjod.js.map