udp-react-enterprise-component-library 25.18.1-beta.32 → 25.18.1-beta.33

package/dist/FileUpload-CHoEtVre.js

@@ -0,0 +1,241 @@
+import { t as FluentButton } from "./FluentButton-BexKrnAp.js";
+import React, { Fragment, useEffect, useRef, useState } from "react";
+import { Card, CardContent, Divider, Typography, makeStyles } from "@material-ui/core";
+
+//#region src/utilities/uploader/FileProfile.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	prefix: { fontWeight: 600 },
+	title: { flex: 1 },
+	detail: { marginLeft: theme.spacing(2) }
+}));
+const FileProfile = (props) => {
+	const classes = useStyles$2();
+	const { children, fileName, fileType, size, lastModifiedDate } = props;
+	return /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body1",
+		className: classes.title
+	}, /* @__PURE__ */ React.createElement("strong", null, fileName)), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		className: classes.detail
+	}, /* @__PURE__ */ React.createElement("span", { className: classes.prefix }, "Type:"), " ", fileType), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		className: classes.detail
+	}, /* @__PURE__ */ React.createElement("span", { className: classes.prefix }, "Size:"), " ", size)), children, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, /* @__PURE__ */ React.createElement("span", { className: classes.prefix }, "Last Modified:"), " ", lastModifiedDate));
+};
+var FileProfile_default = FileProfile;
+
+//#endregion
+//#region src/utilities/uploader/ImagePreview.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		justifyContent: "center"
+	},
+	image: { maxWidth: 465 }
+}));
+const ImagePreview = (props) => {
+	const { image } = props;
+	const classes = useStyles$1();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("img", {
+		className: classes.image,
+		src: image,
+		alt: "upload preview"
+	}));
+};
+var ImagePreview_default = ImagePreview;
+
+//#endregion
+//#region src/utilities/uploader/FileType.jsx
+const FileType = (props) => {
+	let type = "";
+	const { fileType, image, fileName, size, lastModifiedDate } = props;
+	switch (fileType) {
+		case "pdf":
+			type = /* @__PURE__ */ React.createElement(FileProfile_default, {
+				fileType,
+				fileName,
+				size,
+				lastModifiedDate
+			});
+			break;
+		case "doc":
+			type = /* @__PURE__ */ React.createElement(FileProfile_default, {
+				fileType,
+				fileName,
+				size,
+				lastModifiedDate
+			});
+			break;
+		case "png":
+			type = /* @__PURE__ */ React.createElement(FileProfile_default, {
+				fileType,
+				fileName,
+				size,
+				lastModifiedDate
+			}, /* @__PURE__ */ React.createElement(ImagePreview_default, { image }));
+			break;
+		case "jpg":
+			type = /* @__PURE__ */ React.createElement(FileProfile_default, {
+				fileType,
+				fileName,
+				size,
+				lastModifiedDate
+			}, /* @__PURE__ */ React.createElement(ImagePreview_default, { image }));
+			break;
+		case "jpeg":
+			type = /* @__PURE__ */ React.createElement(FileProfile_default, {
+				fileType,
+				fileName,
+				size,
+				lastModifiedDate
+			}, /* @__PURE__ */ React.createElement(ImagePreview_default, { image }));
+			break;
+		default:
+	}
+	return type;
+};
+
+//#endregion
+//#region src/utilities/uploader/FileUpload.jsx
+const useStyles = makeStyles((theme) => ({
+	avatarImage: {
+		width: 200,
+		height: 200,
+		borderRadius: 100,
+		border: "3px solid",
+		borderColor: theme.palette.primary.main,
+		marginTop: -3,
+		marginLeft: -3
+	},
+	image: {
+		width: 300,
+		height: "100%",
+		border: "2px solid",
+		borderColor: theme.palette.primary.main,
+		marginTop: -3,
+		marginLeft: -3
+	},
+	instruction: {
+		display: "flex",
+		alignContent: "center",
+		justifyContent: "center"
+	},
+	icon: {
+		display: "flex",
+		justifyContent: "center"
+	},
+	avatarIcon: {
+		display: "flex",
+		justifyContent: "center",
+		marginTop: "35%"
+	},
+	previewCard: { maxWidth: 500 },
+	action: {
+		marginTop: theme.spacing(1),
+		marginBottom: theme.spacing(1),
+		display: "flex",
+		flexDirection: "row"
+	},
+	divider: { marginTop: theme.spacing(1) },
+	initialInstruction: {
+		marginLeft: theme.spacing(2),
+		marginTop: theme.spacing(.5)
+	}
+}));
+const FileUpload = (props) => {
+	const [file, setFile] = useState();
+	const [previewUrl, setPreviewUrl] = useState();
+	const [isValid, setIsValid] = useState(false);
+	const [fileType, setFileType] = useState();
+	const [fileName, setFileName] = useState();
+	const [fileSize, setFileSize] = useState();
+	const [fileDate, setFileDate] = useState();
+	const { id, onInput, accept, errorText } = props;
+	const classes = useStyles();
+	const filePickerRef = useRef();
+	useEffect(() => {
+		if (!file) return;
+		const fileReader = new window.FileReader();
+		fileReader.onload = () => {
+			setPreviewUrl(fileReader.result);
+		};
+		fileReader.readAsDataURL(file);
+	}, [file]);
+	const pickedHandler = (event) => {
+		const pickedFile = event.target.files[0];
+		let fileIsValid = isValid;
+		setFileName(event.target.files[0].name);
+		setFileSize(event.target.files[0].size);
+		setFileDate(event.target.files[0].lastModifiedDate.toString());
+		const str = event.target.files[0].name.split(".")[1];
+		setFileType(str);
+		if (event.target.files && event.target.files.length === 1) {
+			const pickedFile$1 = event.target.files[0];
+			setFile(pickedFile$1);
+			setIsValid(true);
+		} else {
+			setIsValid(false);
+			fileIsValid = false;
+		}
+		onInput(id, pickedFile, fileIsValid);
+	};
+	const pickFileHandler = () => {
+		filePickerRef.current.click();
+		if (file && file !== previewUrl) reset();
+	};
+	const formatBytes = (bytes, decimals = 2) => {
+		if (bytes === 0) return "0 Bytes";
+		const k = 1024;
+		const dm = decimals < 0 ? 0 : decimals;
+		const sizes = [
+			"Bytes",
+			"KB",
+			"MB",
+			"GB",
+			"TB",
+			"PB",
+			"EB",
+			"ZB",
+			"YB"
+		];
+		const i = Math.floor(Math.log(bytes) / Math.log(k));
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+	};
+	const reset = () => {
+		const fileReader = new window.FileReader();
+		fileReader.onload = () => {
+			setPreviewUrl(fileReader.result);
+		};
+		fileReader.readAsDataURL(file);
+	};
+	return /* @__PURE__ */ React.createElement(Card, {
+		className: classes.previewCard,
+		variant: "outlined"
+	}, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement("div", { className: classes.formControl }, /* @__PURE__ */ React.createElement("input", {
+		id,
+		ref: filePickerRef,
+		style: { display: "none" },
+		type: "file",
+		accept,
+		onChange: pickedHandler
+	}), /* @__PURE__ */ React.createElement("div", { className: classes.imageUpload }, !previewUrl && /* @__PURE__ */ React.createElement("div", { className: classes.action }, /* @__PURE__ */ React.createElement("div", { className: classes.action }, /* @__PURE__ */ React.createElement(FluentButton, {
+		type: "button",
+		variant: "contained",
+		color: "secondary",
+		onClick: pickFileHandler
+	}, "Select File"), /* @__PURE__ */ React.createElement("div", { className: classes.initialInstruction }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, "Click 'Select File' to upload a file from your computer")))), previewUrl && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.imagePreview }, /* @__PURE__ */ React.createElement(FileType, {
+		fileType,
+		image: previewUrl,
+		fileName,
+		size: formatBytes(fileSize),
+		lastModifiedDate: fileDate
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.divider }, /* @__PURE__ */ React.createElement(Divider, null)))), !isValid && /* @__PURE__ */ React.createElement(Typography, null, errorText, " "))));
+};
+
+//#endregion
+export { FileType as n, FileUpload as t };
+//# sourceMappingURL=FileUpload-CHoEtVre.js.map

package/dist/FileUpload-CHoEtVre.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload-CHoEtVre.js","names":["useStyles","useStyles","FileProfile","ImagePreview","pickedFile"],"sources":["../src/utilities/uploader/FileProfile.jsx","../src/utilities/uploader/ImagePreview.jsx","../src/utilities/uploader/FileType.jsx","../src/utilities/uploader/FileUpload.jsx"],"sourcesContent":["import React, { Fragment } from 'react'\nimport { Typography, makeStyles } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  prefix: {\n    fontWeight: 600\n  },\n  title: {\n    flex: 1\n  },\n  detail: {\n    marginLeft: theme.spacing(2)\n  }\n}))\n\nconst FileProfile = (props) => {\n  const classes = useStyles()\n  const { children, fileName, fileType, size, lastModifiedDate } = props\n  return (\n    <Fragment>\n      <div className={classes.root}>\n        <Typography variant='body1' className={classes.title}>\n          <strong>{fileName}</strong>\n        </Typography>\n        <Typography variant='caption' className={classes.detail}>\n          <span className={classes.prefix}>Type:</span> {fileType}\n        </Typography>\n        <Typography variant='caption' className={classes.detail}>\n          <span className={classes.prefix}>Size:</span> {size}\n        </Typography>\n      </div>\n      {children}\n      <Typography variant='caption'>\n        <span className={classes.prefix}>Last Modified:</span>{' '}\n        {lastModifiedDate}\n      </Typography>\n    </Fragment>\n  )\n}\nexport default FileProfile\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  image: {\n    maxWidth: 465,\n  },\n}));\n\nconst ImagePreview = props => {\n  const { image } = props;\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      <img className={classes.image} src={image} alt=\"upload preview\" />\n    </div>\n  );\n};\nexport default ImagePreview;\n","import React from 'react';\nimport FileProfile from './FileProfile';\nimport ImagePreview from './ImagePreview';\n\nexport const FileType = props => {\n  let type = '';\n  const { fileType, image, fileName, size, lastModifiedDate } = props;\n\n  switch (fileType) {\n    case 'pdf':\n      type = (\n        <FileProfile\n          fileType={fileType}\n          fileName={fileName}\n          size={size}\n          lastModifiedDate={lastModifiedDate}\n        />\n      );\n      break;\n    case 'doc':\n      type = (\n        <FileProfile\n          fileType={fileType}\n          fileName={fileName}\n          size={size}\n          lastModifiedDate={lastModifiedDate}\n        />\n      );\n      break;\n    case 'png':\n      type = (\n        <FileProfile\n          fileType={fileType}\n          fileName={fileName}\n          size={size}\n          lastModifiedDate={lastModifiedDate}\n        >\n          <ImagePreview image={image} />\n        </FileProfile>\n      );\n      break;\n    case 'jpg':\n      type = (\n        <FileProfile\n          fileType={fileType}\n          fileName={fileName}\n          size={size}\n          lastModifiedDate={lastModifiedDate}\n        >\n          <ImagePreview image={image} />\n        </FileProfile>\n      );\n      break;\n    case 'jpeg':\n      type = (\n        <FileProfile\n          fileType={fileType}\n          fileName={fileName}\n          size={size}\n          lastModifiedDate={lastModifiedDate}\n        >\n          <ImagePreview image={image} />\n        </FileProfile>\n      );\n      break;\n\n    default:\n  }\n\n  return type;\n};\n","import React, { useRef, useState, useEffect, Fragment } from 'react'\nimport {\n  makeStyles,\n  Typography,\n  Card,\n  CardContent,\n  Divider\n} from '@material-ui/core'\nimport { FileType } from './FileType'\nimport { FluentButton } from '../../UI/inputs/buttons/FluentButton'\n\nconst useStyles = makeStyles((theme) => ({\n  avatarImage: {\n    width: 200,\n    height: 200,\n    borderRadius: 100,\n    border: '3px solid',\n    borderColor: theme.palette.primary.main,\n    marginTop: -3,\n    marginLeft: -3\n  },\n  image: {\n    width: 300,\n    height: '100%',\n    border: '2px solid',\n    borderColor: theme.palette.primary.main,\n    marginTop: -3,\n    marginLeft: -3\n  },\n  instruction: {\n    display: 'flex',\n    alignContent: 'center',\n    justifyContent: 'center'\n  },\n  icon: {\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  avatarIcon: {\n    display: 'flex',\n    justifyContent: 'center',\n    marginTop: '35%'\n  },\n  previewCard: {\n    maxWidth: 500\n  },\n  action: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  divider: {\n    marginTop: theme.spacing(1)\n  },\n  initialInstruction: {\n    marginLeft: theme.spacing(2),\n    marginTop: theme.spacing(0.5)\n  }\n}))\n\nexport const FileUpload = (props) => {\n  const [file, setFile] = useState()\n  const [previewUrl, setPreviewUrl] = useState()\n  const [isValid, setIsValid] = useState(false)\n  const [fileType, setFileType] = useState()\n  const [fileName, setFileName] = useState()\n  const [fileSize, setFileSize] = useState()\n  const [fileDate, setFileDate] = useState()\n  const { id, onInput, accept, errorText } = props\n  const classes = useStyles()\n\n  const filePickerRef = useRef()\n  useEffect(() => {\n    if (!file) {\n      return\n    }\n    const fileReader = new window.FileReader()\n    fileReader.onload = () => {\n      setPreviewUrl(fileReader.result)\n    }\n    fileReader.readAsDataURL(file)\n  }, [file])\n\n  const pickedHandler = (event) => {\n    const pickedFile = event.target.files[0]\n    let fileIsValid = isValid\n    // console.log('ETF', event.target.files[0].name);\n    setFileName(event.target.files[0].name)\n    setFileSize(event.target.files[0].size)\n    setFileDate(event.target.files[0].lastModifiedDate.toString())\n    const str = event.target.files[0].name.split('.')[1]\n    // console.log('STR', str);\n    setFileType(str)\n    if (event.target.files && event.target.files.length === 1) {\n      const pickedFile = event.target.files[0]\n      setFile(pickedFile)\n      setIsValid(true)\n    } else {\n      setIsValid(false)\n      fileIsValid = false\n    }\n    onInput(id, pickedFile, fileIsValid)\n  }\n\n  const pickFileHandler = () => {\n    filePickerRef.current.click()\n    if (file && file !== previewUrl) {\n      reset()\n    }\n  }\n\n  const formatBytes = (bytes, decimals = 2) => {\n    if (bytes === 0) return '0 Bytes'\n\n    const k = 1024\n    const dm = decimals < 0 ? 0 : decimals\n    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n\n    const i = Math.floor(Math.log(bytes) / Math.log(k))\n\n    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]\n  }\n\n  const reset = () => {\n    const fileReader = new window.FileReader()\n    fileReader.onload = () => {\n      setPreviewUrl(fileReader.result)\n    }\n    fileReader.readAsDataURL(file)\n  }\n\n  return (\n    <Card className={classes.previewCard} variant='outlined'>\n      <CardContent>\n        <div className={classes.formControl}>\n          <input\n            id={id}\n            ref={filePickerRef}\n            style={{ display: 'none' }}\n            type='file'\n            accept={accept}\n            onChange={pickedHandler}\n          />\n\n          <div className={classes.imageUpload}>\n            {!previewUrl && (\n              <div className={classes.action}>\n                <div className={classes.action}>\n                  <FluentButton\n                    type='button'\n                    variant='contained'\n                    color='secondary'\n                    onClick={pickFileHandler}\n                  >\n                    Select File\n                  </FluentButton>\n\n                  <div className={classes.initialInstruction}>\n                    <Typography variant='caption'>\n                      Click 'Select File' to upload a file from your computer\n                    </Typography>\n                  </div>\n                </div>\n              </div>\n            )}\n\n            {previewUrl && (\n              <Fragment>\n                <div className={classes.imagePreview}>\n                  {/* {console.log('PREVIEW URL:', previewUrl)} */}\n                  <FileType\n                    fileType={fileType}\n                    image={previewUrl}\n                    fileName={fileName}\n                    size={formatBytes(fileSize)}\n                    lastModifiedDate={fileDate}\n                  />\n                </div>\n                <div className={classes.divider}>\n                  <Divider />\n                </div>\n              </Fragment>\n            )}\n          </div>\n          {!isValid && <Typography>{errorText} </Typography>}\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":";;;;;AAGA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS;EACT,eAAe;EAChB;CACD,QAAQ,EACN,YAAY,KACb;CACD,OAAO,EACL,MAAM,GACP;CACD,QAAQ,EACN,YAAY,MAAM,QAAQ,EAAE,EAC7B;CACF,EAAE;AAEH,MAAM,eAAe,UAAU;CAC7B,MAAM,UAAUA,aAAW;CAC3B,MAAM,EAAE,UAAU,UAAU,UAAU,MAAM,qBAAqB;AACjE,QACE,oCAAC,gBACC,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EAAW,SAAQ;EAAQ,WAAW,QAAQ;IAC7C,oCAAC,gBAAQ,SAAkB,CAChB,EACb,oCAAC;EAAW,SAAQ;EAAU,WAAW,QAAQ;IAC/C,oCAAC,UAAK,WAAW,QAAQ,UAAQ,QAAY,OAAE,SACpC,EACb,oCAAC;EAAW,SAAQ;EAAU,WAAW,QAAQ;IAC/C,oCAAC,UAAK,WAAW,QAAQ,UAAQ,QAAY,OAAE,KACpC,CACT,EACL,UACD,oCAAC,cAAW,SAAQ,aAClB,oCAAC,UAAK,WAAW,QAAQ,UAAQ,iBAAqB,EAAC,KACtD,iBACU,CACJ;;AAGf,0BAAe;;;;ACxCf,MAAMC,cAAY,YAAW,WAAU;CACrC,MAAM;EACJ,SAAS;EACT,gBAAgB;EACjB;CACD,OAAO,EACL,UAAU,KACX;CACF,EAAE;AAEH,MAAM,gBAAe,UAAS;CAC5B,MAAM,EAAE,UAAU;CAClB,MAAM,UAAUA,aAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EAAI,WAAW,QAAQ;EAAO,KAAK;EAAO,KAAI;GAAmB,CAC9D;;AAGV,2BAAe;;;;ACnBf,MAAa,YAAW,UAAS;CAC/B,IAAI,OAAO;CACX,MAAM,EAAE,UAAU,OAAO,UAAU,MAAM,qBAAqB;AAE9D,SAAQ,UAAR;EACE,KAAK;AACH,UACE,oCAACC;IACW;IACA;IACJ;IACY;KAClB;AAEJ;EACF,KAAK;AACH,UACE,oCAACA;IACW;IACA;IACJ;IACY;KAClB;AAEJ;EACF,KAAK;AACH,UACE,oCAACA;IACW;IACA;IACJ;IACY;MAElB,oCAACC,wBAAoB,QAAS,CAClB;AAEhB;EACF,KAAK;AACH,UACE,oCAACD;IACW;IACA;IACJ;IACY;MAElB,oCAACC,wBAAoB,QAAS,CAClB;AAEhB;EACF,KAAK;AACH,UACE,oCAACD;IACW;IACA;IACJ;IACY;MAElB,oCAACC,wBAAoB,QAAS,CAClB;AAEhB;EAEF;;AAGF,QAAO;;;;;AC1DT,MAAM,YAAY,YAAY,WAAW;CACvC,aAAa;EACX,OAAO;EACP,QAAQ;EACR,cAAc;EACd,QAAQ;EACR,aAAa,MAAM,QAAQ,QAAQ;EACnC,WAAW;EACX,YAAY;EACb;CACD,OAAO;EACL,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,aAAa,MAAM,QAAQ,QAAQ;EACnC,WAAW;EACX,YAAY;EACb;CACD,aAAa;EACX,SAAS;EACT,cAAc;EACd,gBAAgB;EACjB;CACD,MAAM;EACJ,SAAS;EACT,gBAAgB;EACjB;CACD,YAAY;EACV,SAAS;EACT,gBAAgB;EAChB,WAAW;EACZ;CACD,aAAa,EACX,UAAU,KACX;CACD,QAAQ;EACN,WAAW,MAAM,QAAQ,EAAE;EAC3B,cAAc,MAAM,QAAQ,EAAE;EAC9B,SAAS;EACT,eAAe;EAChB;CACD,SAAS,EACP,WAAW,MAAM,QAAQ,EAAE,EAC5B;CACD,oBAAoB;EAClB,YAAY,MAAM,QAAQ,EAAE;EAC5B,WAAW,MAAM,QAAQ,GAAI;EAC9B;CACF,EAAE;AAEH,MAAa,cAAc,UAAU;CACnC,MAAM,CAAC,MAAM,WAAW,UAAU;CAClC,MAAM,CAAC,YAAY,iBAAiB,UAAU;CAC9C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,CAAC,UAAU,eAAe,UAAU;CAC1C,MAAM,CAAC,UAAU,eAAe,UAAU;CAC1C,MAAM,CAAC,UAAU,eAAe,UAAU;CAC1C,MAAM,CAAC,UAAU,eAAe,UAAU;CAC1C,MAAM,EAAE,IAAI,SAAS,QAAQ,cAAc;CAC3C,MAAM,UAAU,WAAW;CAE3B,MAAM,gBAAgB,QAAQ;AAC9B,iBAAgB;AACd,MAAI,CAAC,KACH;EAEF,MAAM,aAAa,IAAI,OAAO,YAAY;AAC1C,aAAW,eAAe;AACxB,iBAAc,WAAW,OAAO;;AAElC,aAAW,cAAc,KAAK;IAC7B,CAAC,KAAK,CAAC;CAEV,MAAM,iBAAiB,UAAU;EAC/B,MAAM,aAAa,MAAM,OAAO,MAAM;EACtC,IAAI,cAAc;AAElB,cAAY,MAAM,OAAO,MAAM,GAAG,KAAK;AACvC,cAAY,MAAM,OAAO,MAAM,GAAG,KAAK;AACvC,cAAY,MAAM,OAAO,MAAM,GAAG,iBAAiB,UAAU,CAAC;EAC9D,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,KAAK,MAAM,IAAI,CAAC;AAElD,cAAY,IAAI;AAChB,MAAI,MAAM,OAAO,SAAS,MAAM,OAAO,MAAM,WAAW,GAAG;GACzD,MAAMC,eAAa,MAAM,OAAO,MAAM;AACtC,WAAQA,aAAW;AACnB,cAAW,KAAK;SACX;AACL,cAAW,MAAM;AACjB,iBAAc;;AAEhB,UAAQ,IAAI,YAAY,YAAY;;CAGtC,MAAM,wBAAwB;AAC5B,gBAAc,QAAQ,OAAO;AAC7B,MAAI,QAAQ,SAAS,WACnB,QAAO;;CAIX,MAAM,eAAe,OAAO,WAAW,MAAM;AAC3C,MAAI,UAAU,EAAG,QAAO;EAExB,MAAM,IAAI;EACV,MAAM,KAAK,WAAW,IAAI,IAAI;EAC9B,MAAM,QAAQ;GAAC;GAAS;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAAM;GAAK;EAEvE,MAAM,IAAI,KAAK,MAAM,KAAK,IAAI,MAAM,GAAG,KAAK,IAAI,EAAE,CAAC;AAEnD,SAAO,YAAY,QAAQ,KAAK,IAAI,GAAG,EAAE,EAAE,QAAQ,GAAG,CAAC,GAAG,MAAM,MAAM;;CAGxE,MAAM,cAAc;EAClB,MAAM,aAAa,IAAI,OAAO,YAAY;AAC1C,aAAW,eAAe;AACxB,iBAAc,WAAW,OAAO;;AAElC,aAAW,cAAc,KAAK;;AAGhC,QACE,oCAAC;EAAK,WAAW,QAAQ;EAAa,SAAQ;IAC5C,oCAAC,mBACC,oCAAC,SAAI,WAAW,QAAQ,eACtB,oCAAC;EACK;EACJ,KAAK;EACL,OAAO,EAAE,SAAS,QAAQ;EAC1B,MAAK;EACG;EACR,UAAU;GACV,EAEF,oCAAC,SAAI,WAAW,QAAQ,eACrB,CAAC,cACA,oCAAC,SAAI,WAAW,QAAQ,UACtB,oCAAC,SAAI,WAAW,QAAQ,UACtB,oCAAC;EACC,MAAK;EACL,SAAQ;EACR,OAAM;EACN,SAAS;IACV,cAEc,EAEf,oCAAC,SAAI,WAAW,QAAQ,sBACtB,oCAAC,cAAW,SAAQ,aAAU,0DAEjB,CACT,CACF,CACF,EAGP,cACC,oCAAC,gBACC,oCAAC,SAAI,WAAW,QAAQ,gBAEtB,oCAAC;EACW;EACV,OAAO;EACG;EACV,MAAM,YAAY,SAAS;EAC3B,kBAAkB;GAClB,CACE,EACN,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,cAAU,CACP,CACG,CAET,EACL,CAAC,WAAW,oCAAC,kBAAY,WAAU,IAAc,CAC9C,CACM,CACT"}

package/dist/FluentActivity-BEIse8lD.js

@@ -0,0 +1,69 @@
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { t as AvatarAlphabet } from "./AvatarAlphabet-CioYcfoJ.js";
+import React from "react";
+import { Avatar, Tooltip, Typography, lighten, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import TimeAgo from "timeago-react";
+
+//#region src/UI/dataDisplay/FluentActivity/FluentActivity.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { marginBottom: theme.spacing(2) },
+	topRow: { display: "flex" },
+	desc: { marginLeft: theme.spacing(.5) },
+	indent: { marginLeft: (props) => props.avatarDisplay ? theme.spacing(6) : theme.spacing(4) },
+	indentChildren: {
+		marginLeft: (props) => props.avatarDisplay ? theme.spacing(2) : 0,
+		marginTop: (props) => props.avatarDisplay ? theme.spacing(-1.5) : 0
+	},
+	timestamp: {
+		color: lighten(theme.palette.common.black, .5),
+		marginTop: theme.spacing(-3)
+	},
+	actionUser: {
+		marginRight: 10,
+		marginLeft: 11
+	},
+	activityIcon: { marginTop: 2 },
+	action: {
+		verticalAlign: "text-bottom",
+		lineHeight: 1.8
+	},
+	avatar: {
+		width: 35,
+		height: 35,
+		textTransform: "uppercase"
+	}
+}));
+const FluentActivity = (props) => {
+	const classes = useStyles(props);
+	const { activityIcon, avatar, avatarAlt, timeStamp, children, action, actionUser, avatarDisplay } = props;
+	const getUser = (userEmail) => {
+		return />(.*)</g.exec(userEmail)[1].trim()?.charAt(0) || "?";
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.topRow }, activityIcon && /* @__PURE__ */ React.createElement("div", { className: classes.activityIcon }, /* @__PURE__ */ React.createElement(FluentIcon, { component: activityIcon })), avatarDisplay && avatar && /* @__PURE__ */ React.createElement("div", { className: classes.avatarContainer }, /* @__PURE__ */ React.createElement(Avatar, {
+		alt: avatarAlt,
+		className: classes.avatar,
+		src: avatar
+	})), avatarDisplay && !avatar && /* @__PURE__ */ React.createElement("div", { className: classes.avatarContainer }, /* @__PURE__ */ React.createElement(AvatarAlphabet, {
+		alt: avatarAlt,
+		className: classes.avatar,
+		avatarCharacter: getUser(actionUser.props.children[0].props.jsx).toUpperCase()
+	}, getUser(actionUser.props.children[0].props.jsx))), /* @__PURE__ */ React.createElement("div", { className: classes.actionUser }, actionUser), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		className: classes.action
+	}, action)), /* @__PURE__ */ React.createElement("div", { className: classes.indentChildren }, children), /* @__PURE__ */ React.createElement("div", { className: classes.time }, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		className: clsx(classes.indent, classes.timestamp)
+	}, /* @__PURE__ */ React.createElement(Tooltip, { title: timeStamp }, /* @__PURE__ */ React.createElement(TimeAgo, { datetime: timeStamp })))));
+};
+
+//#endregion
+//#region src/UI/dataDisplay/FluentActivity/FluentActivityRow.jsx
+const FluentActivityRow = (props) => {
+	const { children } = props;
+	return /* @__PURE__ */ React.createElement("div", { style: { marginLeft: 30 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, children));
+};
+
+//#endregion
+export { FluentActivity as n, FluentActivityRow as t };
+//# sourceMappingURL=FluentActivity-BEIse8lD.js.map

package/dist/FluentActivity-BEIse8lD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentActivity-BEIse8lD.js","names":[],"sources":["../src/UI/dataDisplay/FluentActivity/FluentActivity.jsx","../src/UI/dataDisplay/FluentActivity/FluentActivityRow.jsx"],"sourcesContent":["import React from 'react'\nimport {\n  Avatar,\n  lighten,\n  makeStyles,\n  Typography,\n  Tooltip\n} from '@material-ui/core'\nimport { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon'\nimport clsx from 'clsx'\nimport TimeAgo from 'timeago-react'\nimport { AvatarAlphabet } from '../../dataDisplay/AvatarAlphabet'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    marginBottom: theme.spacing(2)\n  },\n  topRow: {\n    display: 'flex'\n  },\n  desc: {\n    marginLeft: theme.spacing(0.5)\n  },\n  indent: {\n    marginLeft: (props) =>\n      props.avatarDisplay ? theme.spacing(6) : theme.spacing(4)\n  },\n  indentChildren: {\n    marginLeft: (props) => (props.avatarDisplay ? theme.spacing(2) : 0),\n    marginTop: (props) => (props.avatarDisplay ? theme.spacing(-1.5) : 0)\n  },\n  timestamp: {\n    color: lighten(theme.palette.common.black, 0.5),\n    marginTop: theme.spacing(-3)\n  },\n  actionUser: {\n    marginRight: 10,\n    marginLeft: 11\n  },\n  activityIcon: {\n    marginTop: 2\n  },\n  action: {\n    verticalAlign: 'text-bottom',\n    lineHeight: 1.8\n  },\n  avatar: {\n    width: 35,\n    height: 35,\n    textTransform: 'uppercase'\n  }\n}))\n\nexport const FluentActivity = (props) => {\n  const classes = useStyles(props)\n  const {\n    activityIcon,\n    avatar,\n    avatarAlt,\n    timeStamp,\n    children,\n    action,\n    actionUser,\n    avatarDisplay\n  } = props\n\n  const getUser = (userEmail) => {\n    const regex = />(.*)</g\n    const matches = regex.exec(userEmail)\n    return matches[1].trim()?.charAt(0) || '?'\n  }\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.topRow}>\n        {activityIcon && (\n          <div className={classes.activityIcon}>\n            <FluentIcon component={activityIcon} />\n          </div>\n        )}\n        {avatarDisplay && avatar && (\n          <div className={classes.avatarContainer}>\n            <Avatar alt={avatarAlt} className={classes.avatar} src={avatar} />\n          </div>\n        )}\n        {avatarDisplay && !avatar && (\n          <div className={classes.avatarContainer}>\n            <AvatarAlphabet\n              alt={avatarAlt}\n              className={classes.avatar}\n              avatarCharacter={getUser(\n                actionUser.props.children[0].props.jsx\n              ).toUpperCase()}\n            >\n              {getUser(actionUser.props.children[0].props.jsx)}\n            </AvatarAlphabet>\n          </div>\n        )}\n\n        <div className={classes.actionUser}>{actionUser}</div>\n\n        <Typography variant='caption' className={classes.action}>\n          {action}\n        </Typography>\n      </div>\n      <div className={classes.indentChildren}>{children}</div>\n      <div className={classes.time}>\n        <Typography\n          variant='caption'\n          className={clsx(classes.indent, classes.timestamp)}\n        >\n          <Tooltip title={timeStamp}>\n            <TimeAgo datetime={timeStamp} />\n          </Tooltip>\n        </Typography>\n      </div>\n    </div>\n  )\n}\n","import React from 'react'\nimport { Typography } from '@material-ui/core'\n\nexport const FluentActivityRow = (props) => {\n  const { children } = props\n  return (\n    <div style={{ marginLeft: 30 }}>\n      <Typography variant='caption'>{children}</Typography>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAaA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,cAAc,MAAM,QAAQ,EAAE,EAC/B;CACD,QAAQ,EACN,SAAS,QACV;CACD,MAAM,EACJ,YAAY,MAAM,QAAQ,GAAI,EAC/B;CACD,QAAQ,EACN,aAAa,UACX,MAAM,gBAAgB,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,EAAE,EAC5D;CACD,gBAAgB;EACd,aAAa,UAAW,MAAM,gBAAgB,MAAM,QAAQ,EAAE,GAAG;EACjE,YAAY,UAAW,MAAM,gBAAgB,MAAM,QAAQ,KAAK,GAAG;EACpE;CACD,WAAW;EACT,OAAO,QAAQ,MAAM,QAAQ,OAAO,OAAO,GAAI;EAC/C,WAAW,MAAM,QAAQ,GAAG;EAC7B;CACD,YAAY;EACV,aAAa;EACb,YAAY;EACb;CACD,cAAc,EACZ,WAAW,GACZ;CACD,QAAQ;EACN,eAAe;EACf,YAAY;EACb;CACD,QAAQ;EACN,OAAO;EACP,QAAQ;EACR,eAAe;EAChB;CACF,EAAE;AAEH,MAAa,kBAAkB,UAAU;CACvC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EACJ,cACA,QACA,WACA,WACA,UACA,QACA,YACA,kBACE;CAEJ,MAAM,WAAW,cAAc;AAG7B,SAFc,UACQ,KAAK,UAAU,CACtB,GAAG,MAAM,EAAE,OAAO,EAAE,IAAI;;AAGzC,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,SAAI,WAAW,QAAQ,UACrB,gBACC,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC,cAAW,WAAW,eAAgB,CACnC,EAEP,iBAAiB,UAChB,oCAAC,SAAI,WAAW,QAAQ,mBACtB,oCAAC;EAAO,KAAK;EAAW,WAAW,QAAQ;EAAQ,KAAK;GAAU,CAC9D,EAEP,iBAAiB,CAAC,UACjB,oCAAC,SAAI,WAAW,QAAQ,mBACtB,oCAAC;EACC,KAAK;EACL,WAAW,QAAQ;EACnB,iBAAiB,QACf,WAAW,MAAM,SAAS,GAAG,MAAM,IACpC,CAAC,aAAa;IAEd,QAAQ,WAAW,MAAM,SAAS,GAAG,MAAM,IAAI,CACjC,CACb,EAGR,oCAAC,SAAI,WAAW,QAAQ,cAAa,WAAiB,EAEtD,oCAAC;EAAW,SAAQ;EAAU,WAAW,QAAQ;IAC9C,OACU,CACT,EACN,oCAAC,SAAI,WAAW,QAAQ,kBAAiB,SAAe,EACxD,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EACC,SAAQ;EACR,WAAW,KAAK,QAAQ,QAAQ,QAAQ,UAAU;IAElD,oCAAC,WAAQ,OAAO,aACd,oCAAC,WAAQ,UAAU,YAAa,CACxB,CACC,CACT,CACF;;;;;ACjHV,MAAa,qBAAqB,UAAU;CAC1C,MAAM,EAAE,aAAa;AACrB,QACE,oCAAC,SAAI,OAAO,EAAE,YAAY,IAAI,IAC5B,oCAAC,cAAW,SAAQ,aAAW,SAAsB,CACjD"}

package/dist/FluentBody-nnTQ0YIG.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { TableBody, useTheme } from "@material-ui/core";
+
+//#region src/UI/dataDisplay/FluentDataTable/FluentBody/index.tsx
+const FluentBody = (props) => {
+	const theme = useTheme();
+	return /* @__PURE__ */ React.createElement(TableBody, { style: {
+		background: props?.background || theme.palette.background.paper,
+		...props?.style
+	} }, props?.children);
+};
+var FluentBody_default = FluentBody;
+
+//#endregion
+export { FluentBody_default as t };
+//# sourceMappingURL=FluentBody-nnTQ0YIG.js.map

package/dist/FluentBody-nnTQ0YIG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentBody-nnTQ0YIG.js","names":[],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentBody/index.tsx"],"sourcesContent":["import { TableBody, useTheme } from '@material-ui/core';\nimport React, { ReactNode } from 'react';\n\ninterface FluentBodyProps {\n  background?: string;\n  style?: object;\n  children: ReactNode;\n};\n\nconst FluentBody = (props: FluentBodyProps) => {\n\n  const theme = useTheme();\n\n  return (\n    <TableBody style={{ background: props?.background || theme.palette.background.paper, ...props?.style }}>\n      {props?.children}\n    </TableBody>\n  )\n};\n\nexport default FluentBody;"],"mappings":";;;;AASA,MAAM,cAAc,UAA2B;CAE7C,MAAM,QAAQ,UAAU;AAExB,QACE,oCAAC,aAAU,OAAO;EAAE,YAAY,OAAO,cAAc,MAAM,QAAQ,WAAW;EAAO,GAAG,OAAO;EAAO,IACnG,OAAO,SACE;;AAIhB,yBAAe"}

package/dist/FluentCardText-Bwua6lWy.js

@@ -0,0 +1,89 @@
+import React from "react";
+import { Box, Typography, makeStyles, styled } from "@material-ui/core";
+
+//#region src/UI/surfaces/cards/fluentCards/FluentCardText.jsx
+const useStyles = makeStyles((theme) => ({
+	rootContainer: {
+		backgroundColor: theme.palette.background.paper,
+		padding: "10px",
+		width: "100%",
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "space-evenly",
+		gap: "10px",
+		[theme.breakpoints.down("sm")]: {
+			flexDirection: "row",
+			alignItems: "center",
+			justifyContent: "space-between"
+		}
+	},
+	title: {
+		textAlign: "center",
+		fontWeight: 500,
+		letterSpacing: "0.15px",
+		[theme.breakpoints.down("sm")]: { textAlign: "left" }
+	},
+	description: {
+		fontSize: "1.5rem",
+		fontWeight: 300,
+		letterSpacing: "0.15px",
+		[theme.breakpoints.down("sm")]: {
+			fontSize: "1rem",
+			textAlign: "left"
+		}
+	},
+	descriptionColor: { color: (props) => props.textColor || theme.palette.text.primary }
+}));
+const Title = styled(Typography)(({ theme }) => ({
+	textAlign: "center",
+	fontWeight: 500,
+	letterSpacing: "0.15px",
+	[theme.breakpoints.down("sm")]: { textAlign: "left" }
+}));
+const Description = styled(Typography)(({ theme, color }) => ({
+	fontSize: "1.5rem",
+	fontWeight: 300,
+	letterSpacing: "0.15px",
+	color: color || theme.palette.text.primary,
+	[theme.breakpoints.down("sm")]: {
+		fontSize: "1rem",
+		textAlign: "left"
+	}
+}));
+const FluentCardText = (props) => {
+	const classes = useStyles(props);
+	const { title, description, sx, titleStyle, descriptionStyle, titleVariant = "body2", loading = false, errorMessage = "" } = props;
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: classes.rootContainer,
+		style: sx
+	}, /* @__PURE__ */ React.createElement(Title, {
+		variant: titleVariant,
+		align: "center",
+		style: titleStyle
+	}, title), loading ? /* @__PURE__ */ React.createElement(Box, { style: {
+		width: "100%",
+		height: "100%",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	} }, /* @__PURE__ */ React.createElement(Typography, {
+		align: "center",
+		className: classes.title,
+		style: titleStyle
+	}, "Loading...")) : errorMessage ? /* @__PURE__ */ React.createElement(Description, {
+		variant: "body2",
+		align: "center",
+		style: descriptionStyle,
+		color: "error"
+	}, errorMessage) : /* @__PURE__ */ React.createElement(Description, {
+		variant: "body2",
+		align: "center",
+		style: descriptionStyle
+	}, description));
+};
+
+//#endregion
+export { FluentCardText as t };
+//# sourceMappingURL=FluentCardText-Bwua6lWy.js.map

package/dist/FluentCardText-Bwua6lWy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentCardText-Bwua6lWy.js","names":[],"sources":["../src/UI/surfaces/cards/fluentCards/FluentCardText.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, styled, Typography, Box } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  rootContainer: {\n    backgroundColor: theme.palette.background.paper,\n    padding: '10px',\n    width: '100%',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'space-evenly',\n    gap: '10px',\n    [theme.breakpoints.down('sm')]: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'space-between'\n    }\n  },\n  title: {\n    textAlign: 'center',\n    fontWeight: 500,\n    letterSpacing: '0.15px',\n    [theme.breakpoints.down('sm')]: {\n      textAlign: 'left'\n    }\n  },\n  description: {\n    fontSize: '1.5rem',\n    fontWeight: 300,\n    letterSpacing: '0.15px',\n    [theme.breakpoints.down('sm')]: {\n      fontSize: '1rem',\n      textAlign: 'left'\n    }\n  },\n  descriptionColor: {\n    color: (props) => props.textColor || theme.palette.text.primary\n  }\n}));\n\nconst Title = styled(Typography)(({ theme }) => ({\n  textAlign: 'center',\n  fontWeight: 500,\n  letterSpacing: '0.15px',\n  [theme.breakpoints.down('sm')]: {\n    textAlign: 'left'\n  }\n}));\n\nconst Description = styled(Typography)(({ theme, color }) => ({\n  fontSize: '1.5rem',\n  fontWeight: 300,\n  letterSpacing: '0.15px',\n  color: color || theme.palette.text.primary,\n  [theme.breakpoints.down('sm')]: {\n    fontSize: '1rem',\n    textAlign: 'left'\n  }\n}));\n\nexport const FluentCardText = (props) => {\n  const classes = useStyles(props);\n  const {\n    title,\n    description,\n    sx,\n    titleStyle,\n    descriptionStyle,\n    titleVariant = 'body2',\n    loading = false,\n    errorMessage = ''\n  } = props;\n\n  return (\n    <Box className={classes.rootContainer} style={sx}>\n      <Title variant={titleVariant} align='center' style={titleStyle}>\n        {title}\n      </Title>\n      {loading ? (\n        <Box\n          style={{\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center'\n          }}\n        >\n          <Typography\n            align='center'\n            className={classes.title}\n            style={titleStyle}\n          >\n            Loading...\n          </Typography>\n        </Box>\n      ) : errorMessage ? (\n        <Description\n          variant='body2'\n          align='center'\n          style={descriptionStyle}\n          color='error'\n        >\n          {errorMessage}\n        </Description>\n      ) : (\n        <Description variant='body2' align='center' style={descriptionStyle}>\n          {description}\n        </Description>\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;;AAGA,MAAM,YAAY,YAAY,WAAW;CACvC,eAAe;EACb,iBAAiB,MAAM,QAAQ,WAAW;EAC1C,SAAS;EACT,OAAO;EACP,WAAW;EACX,SAAS;EACT,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,KAAK;GACJ,MAAM,YAAY,KAAK,KAAK,GAAG;GAC9B,eAAe;GACf,YAAY;GACZ,gBAAgB;GACjB;EACF;CACD,OAAO;EACL,WAAW;EACX,YAAY;EACZ,eAAe;GACd,MAAM,YAAY,KAAK,KAAK,GAAG,EAC9B,WAAW,QACZ;EACF;CACD,aAAa;EACX,UAAU;EACV,YAAY;EACZ,eAAe;GACd,MAAM,YAAY,KAAK,KAAK,GAAG;GAC9B,UAAU;GACV,WAAW;GACZ;EACF;CACD,kBAAkB,EAChB,QAAQ,UAAU,MAAM,aAAa,MAAM,QAAQ,KAAK,SACzD;CACF,EAAE;AAEH,MAAM,QAAQ,OAAO,WAAW,EAAE,EAAE,aAAa;CAC/C,WAAW;CACX,YAAY;CACZ,eAAe;EACd,MAAM,YAAY,KAAK,KAAK,GAAG,EAC9B,WAAW,QACZ;CACF,EAAE;AAEH,MAAM,cAAc,OAAO,WAAW,EAAE,EAAE,OAAO,aAAa;CAC5D,UAAU;CACV,YAAY;CACZ,eAAe;CACf,OAAO,SAAS,MAAM,QAAQ,KAAK;EAClC,MAAM,YAAY,KAAK,KAAK,GAAG;EAC9B,UAAU;EACV,WAAW;EACZ;CACF,EAAE;AAEH,MAAa,kBAAkB,UAAU;CACvC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EACJ,OACA,aACA,IACA,YACA,kBACA,eAAe,SACf,UAAU,OACV,eAAe,OACb;AAEJ,QACE,oCAAC;EAAI,WAAW,QAAQ;EAAe,OAAO;IAC5C,oCAAC;EAAM,SAAS;EAAc,OAAM;EAAS,OAAO;IACjD,MACK,EACP,UACC,oCAAC,OACC,OAAO;EACL,OAAO;EACP,QAAQ;EACR,SAAS;EACT,YAAY;EACZ,gBAAgB;EACjB,IAED,oCAAC;EACC,OAAM;EACN,WAAW,QAAQ;EACnB,OAAO;IACR,aAEY,CACT,GACJ,eACF,oCAAC;EACC,SAAQ;EACR,OAAM;EACN,OAAO;EACP,OAAM;IAEL,aACW,GAEd,oCAAC;EAAY,SAAQ;EAAQ,OAAM;EAAS,OAAO;IAChD,YACW,CAEZ"}

package/dist/FluentCell-Dm8aaWes.js

@@ -0,0 +1,81 @@
+import { t as UnityFluentIcon } from "./UnityFluentIcon-DrASIcTF.js";
+import { S as getIconFromName } from "./TreeUtilities-CujOFOPm.js";
+import { t as StatusChip } from "./StatusChip-DZAN88VU.js";
+import React from "react";
+import { Box, TableCell, Tooltip, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { format } from "date-fns";
+
+//#region src/UI/dataDisplay/FluentDataTable/FluentCell/index.tsx
+const useStyles = makeStyles((theme) => ({
+	labelText: {
+		color: theme.palette.text.primary,
+		fontSize: "12px"
+	},
+	tableCell: {
+		fontSize: "12px",
+		letterSpacing: "0.4px",
+		fontWeight: (props) => props?.bold ? 500 : 400
+	},
+	unityIconWrapper: { gap: theme.spacing(1) }
+}));
+const CellUnityIcon = (props) => {
+	const theme = useTheme();
+	const { icon = "", size = "large", color = theme.palette.primary.main, children } = props;
+	const classes = useStyles(props);
+	return /* @__PURE__ */ React.createElement(FluentCell, props, /* @__PURE__ */ React.createElement(Box, {
+		display: "flex",
+		alignItems: "center",
+		className: classes.unityIconWrapper
+	}, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		size,
+		color,
+		icon: getIconFromName(icon)
+	}), children && children));
+};
+const CellImage = (props) => /* @__PURE__ */ React.createElement(FluentCell, props, /* @__PURE__ */ React.createElement("img", {
+	src: props?.src,
+	alt: props?.alt,
+	style: props?.style
+}), props?.title);
+const CellIcon = (props) => /* @__PURE__ */ React.createElement(FluentCell, props, /* @__PURE__ */ React.createElement(React.Fragment, null, props?.label ? /* @__PURE__ */ React.createElement(Box, {
+	display: "flex",
+	alignItems: "center",
+	style: { gap: "8px" }
+}, /* @__PURE__ */ React.createElement(Box, null, props?.icon), props?.label) : props?.icon, props?.children));
+const CellNumber = (props) => /* @__PURE__ */ React.createElement(FluentCell, props, Number(props?.children).toFixed(Number(props?.decimals ?? 2)));
+const CellDate = (props) => /* @__PURE__ */ React.createElement(FluentCell, props, format(new Date(props?.children), props?.format || "MM/dd/yyyy"));
+const CellCurrency = (props) => /* @__PURE__ */ React.createElement(FluentCell, props, props?.currencySymbol || "$", props?.children);
+const CellText = (props) => /* @__PURE__ */ React.createElement(FluentCell, props, props.children);
+const CellChip = (props) => /* @__PURE__ */ React.createElement(FluentCell, props, /* @__PURE__ */ React.createElement(StatusChip, {
+	status: props?.status || "success",
+	label: props?.children
+}));
+const FluentCell = (props) => {
+	const classes = useStyles(props);
+	const { scope = "row", style, align, colSpan, className, tooltip, children } = props;
+	const cellContent = children;
+	return /* @__PURE__ */ React.createElement(TableCell, {
+		scope,
+		className: clsx(classes.tableCell, className),
+		style,
+		align,
+		colSpan
+	}, tooltip ? /* @__PURE__ */ React.createElement(Tooltip, {
+		title: tooltip || "",
+		children: /* @__PURE__ */ React.createElement("span", null, cellContent || "")
+	}) : cellContent);
+};
+FluentCell.UnityIcon = CellUnityIcon;
+FluentCell.Icon = CellIcon;
+FluentCell.Number = CellNumber;
+FluentCell.Text = CellText;
+FluentCell.Currency = CellCurrency;
+FluentCell.Date = CellDate;
+FluentCell.Chip = CellChip;
+FluentCell.Image = CellImage;
+var FluentCell_default = FluentCell;
+
+//#endregion
+export { FluentCell_default as t };
+//# sourceMappingURL=FluentCell-Dm8aaWes.js.map

package/dist/FluentCell-Dm8aaWes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentCell-Dm8aaWes.js","names":[],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentCell/index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Box, makeStyles, TableCell, Theme, useTheme, Tooltip } from '@material-ui/core';\nimport { format } from 'date-fns';\nimport { UnityFluentIcon } from '../../../../utilities/iconLibrary/UnityFluentIcon';\nimport { getIconFromName } from '../../../../utilities/tree/TreeUtilities';\nimport { StatusChip } from '../../status/StatusChip';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles<Theme, FluentCellProps>((theme) => ({\n  labelText: {\n    color: theme.palette.text.primary,\n    fontSize: '12px'\n  },\n  tableCell: {\n    fontSize: '12px',\n    letterSpacing: '0.4px',\n    fontWeight: (props) => (props?.bold ? 500 : 400)\n  },\n  unityIconWrapper: {\n    gap: theme.spacing(1)\n  }\n}));\n\n/* #region  CellUnityIcon */\n\ninterface CellUnityIconProps extends FluentCellProps {\n  icon: string;\n  size: string;\n  color: string;\n  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';\n  className?: string;\n}\n\nconst CellUnityIcon = (props: Partial<CellUnityIconProps>) => {\n  const theme = useTheme();\n  const {\n    icon = '',\n    size = 'large',\n    color = theme.palette.primary.main,\n    children\n  } = props;\n  const classes = useStyles(props as FluentCellProps);\n\n  return (\n    <FluentCell {...props}>\n      { /* @ts-ignore */ }\n      <Box display='flex' alignItems='center' className={classes.unityIconWrapper}>\n        <UnityFluentIcon\n          size={size}\n          color={color}\n          icon={getIconFromName(icon)}\n        />\n        {children && children}\n      </Box>\n    </FluentCell>\n  );\n};\n\n/* #endregion */\n\n/* #region  CellIcon */\n\ninterface CellImageProps extends FluentCellProps {\n  src: string;\n  alt: string;\n  title: string;\n  style?: object;\n  children: any;\n}\n\nconst CellImage = (props: CellImageProps) => (\n  <FluentCell {...props}>\n    <img src={props?.src} alt={props?.alt} style={props?.style} />\n    {props?.title}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellIcon */\n\ninterface CellIconProps extends FluentCellProps {\n  icon: any;\n  label: string;\n  style?: object;\n}\n\nconst CellIcon = (props: Partial<CellIconProps>) => (\n  <FluentCell {...props}>\n    <>\n      {props?.label ? (\n      // @ts-ignore\n        <Box display='flex' alignItems='center' style={{ gap: '8px' }}>\n      { /* @ts-ignore */ }\n          <Box>{props?.icon}</Box>\n          {props?.label}\n        </Box>\n      ) : (\n        props?.icon\n      )}\n      {props?.children}\n    </>\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellNumber */\n\ninterface CellNumberProps extends FluentCellProps {\n  decimals?: number | string;\n  children: any;\n}\n\nconst CellNumber = (props: CellNumberProps) => (\n  <FluentCell {...props}>\n    {Number(props?.children).toFixed(Number(props?.decimals ?? 2))}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellDate */\n\ninterface CellDateProps extends FluentCellProps {\n  format?: string;\n  children: any;\n}\n\nconst CellDate = (props: CellDateProps) => (\n  <FluentCell {...props}>\n    {format(new Date(props?.children), props?.format || 'MM/dd/yyyy')}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellCurrency */\n\ninterface CellCurrencyProps extends FluentCellProps {\n  currencySymbol?: string;\n  children: any;\n}\n\nconst CellCurrency = (props: CellCurrencyProps) => (\n  <FluentCell {...props}>\n    {props?.currencySymbol || '$'}\n    {props?.children}\n  </FluentCell>\n);\n\n/* #endregion */\n\n/* #region  CellText */\n\ninterface CellTextProps extends FluentCellProps {\n  children: any;\n}\n\nconst CellText = (props: CellTextProps) => (\n  <FluentCell {...props}>{props.children}</FluentCell>\n);\n\n/* #endregion */\n\n/* #region  Chip */\n\ninterface CellChipProps extends FluentCellProps {\n  status?: string;\n  size?: string;\n  children: any;\n}\n\nconst CellChip = (props: CellChipProps) => (\n  <FluentCell {...props}>\n    {/* @ts-ignore */}\n    <StatusChip\n      status={props?.status || 'success'}\n      label={props?.children}\n    />\n  </FluentCell>\n);\n/* #endregion */\n\ninterface FluentCellProps {\n  scope?: string;\n  bold?: boolean;\n  style?: object;\n  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';\n  children?: ReactNode;\n  className?: string;\n  colSpan?: number;\n  tooltip?: string;\n}\n\nconst FluentCell = (props: FluentCellProps) => {\n  const classes = useStyles(props);\n  const { scope = 'row', style, align, colSpan, className, tooltip, children } = props;\n\n  const cellContent = children;\n\n  return (\n    <TableCell\n      scope={scope}\n      className={clsx(classes.tableCell, className)}\n      style={style}\n      align={align}\n      colSpan={colSpan}\n    >\n      {tooltip ? (\n        <Tooltip title={tooltip || ''} children={<span>{cellContent || ''}</span>} />\n      ) : (\n        cellContent\n      )}\n    </TableCell>\n  );\n};\n\nFluentCell.UnityIcon = CellUnityIcon;\nFluentCell.Icon = CellIcon;\nFluentCell.Number = CellNumber;\nFluentCell.Text = CellText;\nFluentCell.Currency = CellCurrency;\nFluentCell.Date = CellDate;\nFluentCell.Chip = CellChip;\nFluentCell.Image = CellImage;\n\nexport default FluentCell;\n"],"mappings":";;;;;;;;;AAQA,MAAM,YAAY,YAAoC,WAAW;CAC/D,WAAW;EACT,OAAO,MAAM,QAAQ,KAAK;EAC1B,UAAU;EACX;CACD,WAAW;EACT,UAAU;EACV,eAAe;EACf,aAAa,UAAW,OAAO,OAAO,MAAM;EAC7C;CACD,kBAAkB,EAChB,KAAK,MAAM,QAAQ,EAAE,EACtB;CACF,EAAE;AAYH,MAAM,iBAAiB,UAAuC;CAC5D,MAAM,QAAQ,UAAU;CACxB,MAAM,EACJ,OAAO,IACP,OAAO,SACP,QAAQ,MAAM,QAAQ,QAAQ,MAC9B,aACE;CACJ,MAAM,UAAU,UAAU,MAAyB;AAEnD,QACE,oCAAC,YAAe,OAEd,oCAAC;EAAI,SAAQ;EAAO,YAAW;EAAS,WAAW,QAAQ;IACzD,oCAAC;EACO;EACC;EACP,MAAM,gBAAgB,KAAK;GAC3B,EACD,YAAY,SACT,CACK;;AAgBjB,MAAM,aAAa,UACjB,oCAAC,YAAe,OACd,oCAAC;CAAI,KAAK,OAAO;CAAK,KAAK,OAAO;CAAK,OAAO,OAAO;EAAS,EAC7D,OAAO,MACG;AAaf,MAAM,YAAY,UAChB,oCAAC,YAAe,OACd,0DACG,OAAO,QAEN,oCAAC;CAAI,SAAQ;CAAO,YAAW;CAAS,OAAO,EAAE,KAAK,OAAO;GAE3D,oCAAC,WAAK,OAAO,KAAW,EACvB,OAAO,MACJ,GAEN,OAAO,MAER,OAAO,SACP,CACQ;AAYf,MAAM,cAAc,UAClB,oCAAC,YAAe,OACb,OAAO,OAAO,SAAS,CAAC,QAAQ,OAAO,OAAO,YAAY,EAAE,CAAC,CACnD;AAYf,MAAM,YAAY,UAChB,oCAAC,YAAe,OACb,OAAO,IAAI,KAAK,OAAO,SAAS,EAAE,OAAO,UAAU,aAAa,CACtD;AAYf,MAAM,gBAAgB,UACpB,oCAAC,YAAe,OACb,OAAO,kBAAkB,KACzB,OAAO,SACG;AAWf,MAAM,YAAY,UAChB,oCAAC,YAAe,OAAQ,MAAM,SAAsB;AAatD,MAAM,YAAY,UAChB,oCAAC,YAAe,OAEd,oCAAC;CACC,QAAQ,OAAO,UAAU;CACzB,OAAO,OAAO;EACd,CACS;AAef,MAAM,cAAc,UAA2B;CAC7C,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,QAAQ,OAAO,OAAO,OAAO,SAAS,WAAW,SAAS,aAAa;CAE/E,MAAM,cAAc;AAEpB,QACE,oCAAC;EACQ;EACP,WAAW,KAAK,QAAQ,WAAW,UAAU;EACtC;EACA;EACE;IAER,UACC,oCAAC;EAAQ,OAAO,WAAW;EAAI,UAAU,oCAAC,cAAM,eAAe,GAAU;GAAI,GAE7E,YAEQ;;AAIhB,WAAW,YAAY;AACvB,WAAW,OAAO;AAClB,WAAW,SAAS;AACpB,WAAW,OAAO;AAClB,WAAW,WAAW;AACtB,WAAW,OAAO;AAClB,WAAW,OAAO;AAClB,WAAW,QAAQ;AAEnB,yBAAe"}

package/dist/FluentDataTable-n4F_YwWi.js

@@ -0,0 +1,30 @@
+import { t as FluentBody_default } from "./FluentBody-nnTQ0YIG.js";
+import { t as FluentCell_default } from "./FluentCell-Dm8aaWes.js";
+import { t as FluentHead_default } from "./FluentHead-CmKLJxqA.js";
+import { t as FluentRow_default } from "./FluentRow-CKCAnP8J.js";
+import React from "react";
+import { Table, TableContainer, makeStyles } from "@material-ui/core";
+
+//#region src/UI/dataDisplay/FluentDataTable/FluentDataTable.tsx
+const useStyles = makeStyles((theme) => ({ root: { maxHeight: (props) => props?.containerMaxHeight } }));
+const FluentDataTable = ((props) => {
+	const { size = "small", style, stickyHeader = false, containerMaxHeight } = props;
+	useStyles({ containerMaxHeight });
+	return /* @__PURE__ */ React.createElement(TableContainer, { style: {
+		maxHeight: containerMaxHeight,
+		height: "100%"
+	} }, /* @__PURE__ */ React.createElement(Table, {
+		"aria-label": "simple table",
+		size,
+		style,
+		stickyHeader
+	}, props?.children));
+});
+FluentDataTable.FluentHead = FluentHead_default;
+FluentDataTable.FluentBody = FluentBody_default;
+FluentDataTable.FluentCell = FluentCell_default;
+FluentDataTable.FluentRow = FluentRow_default;
+
+//#endregion
+export { FluentDataTable as t };
+//# sourceMappingURL=FluentDataTable-n4F_YwWi.js.map

package/dist/FluentDataTable-n4F_YwWi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentDataTable-n4F_YwWi.js","names":["FluentHead","FluentBody","FluentCell","FluentRow"],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentDataTable.tsx"],"sourcesContent":["import { Size, Table, TableContainer, makeStyles } from '@material-ui/core';\nimport React, { ReactElement, ReactNode } from 'react';\nimport FluentBody from './FluentBody';\nimport FluentCell from './FluentCell';\nimport FluentHead from './FluentHead';\nimport FluentRow from './FluentRow';\n\ninterface FluentDataTableProps {\n  style?: object;\n  size?: Size | undefined;\n  children: ReactNode;\n  stickyHeader?: boolean;\n  containerMaxHeight?: string | number;\n}\n\ntype FluentDataTableComponent = React.FC<FluentDataTableProps> & {\n  FluentHead: typeof FluentHead;\n  FluentBody: typeof FluentBody;\n  FluentCell: typeof FluentCell;\n  FluentRow: typeof FluentRow;\n};\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    maxHeight: (props: any) => props?.containerMaxHeight\n  }\n}));\n\nexport const FluentDataTable = ((props: FluentDataTableProps): ReactElement => {\n  const { size = 'small', style, stickyHeader = false, containerMaxHeight } = props;\n  const classes = useStyles({ containerMaxHeight });\n  return (\n    <TableContainer\n      style={{ maxHeight: containerMaxHeight, height: '100%'}}\n    >\n      <Table\n        aria-label='simple table'\n        size={size}\n        style={style}\n        stickyHeader={stickyHeader}\n      >\n        {props?.children}\n      </Table>\n    </TableContainer>\n  );\n}) as FluentDataTableComponent;\n\nFluentDataTable.FluentHead = FluentHead;\nFluentDataTable.FluentBody = FluentBody;\nFluentDataTable.FluentCell = FluentCell;\nFluentDataTable.FluentRow = FluentRow;\n"],"mappings":";;;;;;;;AAsBA,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM,EACJ,YAAY,UAAe,OAAO,oBACnC,EACF,EAAE;AAEH,MAAa,oBAAoB,UAA8C;CAC7E,MAAM,EAAE,OAAO,SAAS,OAAO,eAAe,OAAO,uBAAuB;AAC5D,WAAU,EAAE,oBAAoB,CAAC;AACjD,QACE,oCAAC,kBACC,OAAO;EAAE,WAAW;EAAoB,QAAQ;EAAO,IAEvD,oCAAC;EACC,cAAW;EACL;EACC;EACO;IAEb,OAAO,SACF,CACO;;AAIrB,gBAAgB,aAAaA;AAC7B,gBAAgB,aAAaC;AAC7B,gBAAgB,aAAaC;AAC7B,gBAAgB,YAAYC"}

package/dist/FluentHead-CmKLJxqA.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { TableHead, TableRow, makeStyles } from "@material-ui/core";
+
+//#region src/UI/dataDisplay/FluentDataTable/FluentHead/index.tsx
+const useStyles = makeStyles((theme) => ({
+	root: (props) => ({ maxHeight: props?.containerMaxHeight }),
+	row: (props) => ({
+		backgroundColor: props?.background || theme.palette.secondary.light,
+		"& .MuiTableCell-stickyHeader": { backgroundColor: props?.background || theme.palette.secondary.light }
+	})
+}));
+const FluentHead = (props) => {
+	const classes = useStyles(props);
+	return /* @__PURE__ */ React.createElement(TableHead, { style: { ...props?.style } }, /* @__PURE__ */ React.createElement(TableRow, { className: classes.row }, props?.children));
+};
+var FluentHead_default = FluentHead;
+
+//#endregion
+export { FluentHead_default as t };
+//# sourceMappingURL=FluentHead-CmKLJxqA.js.map

package/dist/FluentHead-CmKLJxqA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentHead-CmKLJxqA.js","names":[],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentHead/index.tsx"],"sourcesContent":["import { TableHead, TableRow, makeStyles } from '@material-ui/core';\nimport React, { ReactNode } from 'react';\n\ninterface FluentHeadProps {\n  background?: string;\n  containerMaxHeight?: string | number;\n  style?: object;\n  children: ReactNode;\n};\n\nconst useStyles = makeStyles((theme) => ({\n  root: (props: FluentHeadProps) => ({\n    maxHeight: props?.containerMaxHeight\n  }),\n  row: (props: FluentHeadProps) => ({\n    backgroundColor: props?.background || theme.palette.secondary.light,\n    '& .MuiTableCell-stickyHeader': {\n      backgroundColor: props?.background || theme.palette.secondary.light\n    }\n  })\n}));\n\nconst FluentHead = (props: FluentHeadProps) => {\n  const classes = useStyles(props);\n\n  return (\n  <TableHead style={{ ...props?.style,  }}>\n    <TableRow className={classes.row}>\n      {props?.children}\n    </TableRow>\n  </TableHead >\n)};\n\nexport default FluentHead;"],"mappings":";;;;AAUA,MAAM,YAAY,YAAY,WAAW;CACvC,OAAO,WAA4B,EACjC,WAAW,OAAO,oBACnB;CACD,MAAM,WAA4B;EAChC,iBAAiB,OAAO,cAAc,MAAM,QAAQ,UAAU;EAC9D,gCAAgC,EAC9B,iBAAiB,OAAO,cAAc,MAAM,QAAQ,UAAU,OAC/D;EACF;CACF,EAAE;AAEH,MAAM,cAAc,UAA2B;CAC7C,MAAM,UAAU,UAAU,MAAM;AAEhC,QACA,oCAAC,aAAU,OAAO,EAAE,GAAG,OAAO,OAAS,IACrC,oCAAC,YAAS,WAAW,QAAQ,OAC1B,OAAO,SACC,CACA;;AAGf,yBAAe"}