udp-react-enterprise-component-library 25.18.0 → 25.18.1-beta.1

package/dist/FileViewer-Cqrlt60_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileViewer-Cqrlt60_.js","names":["useStyles","Typography","useStyles","defaultFieldMapping"],"sources":["../src/UI/fileViewer/utils/fileTypes.js","../src/UI/fileViewer/utils/fileUtils.js","../src/UI/fileViewer/imageSlider/ImageFooter.jsx","../src/UI/fileViewer/imageSlider/Image.jsx","../src/UI/fileViewer/imageSlider/ImageViewerSideSheet.jsx","../src/UI/fileViewer/imageSlider/ImageSlider.jsx","../src/UI/fileViewer/FileViewer.jsx"],"sourcesContent":["export const imageExtension = [\n  'png',\n  'jpeg',\n  'jpg',\n  'jpe',\n  'jif',\n  'jfif',\n  'jfi',\n  'gif',\n  'raw',\n  'svg',\n  'ttif',\n  'tif',\n  'webp',\n  'arw',\n  'sr2',\n  'nrw',\n  'k25',\n  'bmp',\n  'dib',\n  'heif',\n  'heic',\n  'ind',\n  'indd',\n  'indt',\n  'jp2',\n  'j2k',\n  'jpf',\n  'jpm',\n  'mj2',\n  'svgz',\n  'ai',\n  'eps',\n];\n","import { imageExtension } from './fileTypes';\n\nexport const handleDownloadFile = (fileUrl, fileName) => {\n  const a = document.createElement('a');\n  a.style.display = 'none';\n  a.href = fileUrl;\n  a.download = fileName;\n  document.body.appendChild(a);\n  a.click();\n  window.URL.revokeObjectURL(fileUrl);\n};\n\nexport const validateFilesImageType = (files = [], fileExtensionField) => {\n  let type = \"image\";\n  files.forEach(file => {\n    if (!imageExtension.includes(file?.[fileExtensionField])) {\n      type = 'invalid';\n      return;\n    }\n  });\n  return type;\n};\n","/* eslint-disable react/jsx-no-useless-fragment */\nimport { makeStyles } from '@material-ui/core';\nimport React, { useMemo } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Typography } from '../../dataDisplay/typography/Typography';\nimport { IconButtonWithTooltip } from '../../inputs/buttons/IconButtonWithToolTip';\nimport { getIconFromName } from '../../../utilities/tree/TreeUtilities';\n\nconst useStyles = makeStyles(theme => ({\n  secondaryText: {\n    color: theme.palette.text.secondary,\n  },\n  description: {\n    margin: theme.spacing(2),\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1),\n  },\n  pageAction: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n  },\n}));\n\nexport const ImageFooter = props => {\n  const {\n    images,\n    currentImageObj,\n    hidePrimaryText,\n    hideSecondaryText,\n    handleViewImage,\n    currentImageIndex,\n  } = props;\n  const classes = useStyles();\n  const { t } = useTranslation();\n\n  const showItem = useMemo(() => {\n    const showPrimaryText = !hidePrimaryText && currentImageObj?.primaryText;\n    const showSecondaryText =\n      !hideSecondaryText && currentImageObj?.secondaryText;\n    const showPageAction = images?.length > 1;\n    return {\n      footer: showPageAction || showPrimaryText || showSecondaryText,\n      primaryText: showPrimaryText,\n      secondaryText: showSecondaryText,\n      pageAction: showPageAction,\n    };\n  }, [currentImageObj, hidePrimaryText, hideSecondaryText, images]);\n\n  return (\n    <>\n      {showItem?.footer && (\n        <div className={classes.description}>\n          {showItem?.primaryText && (\n            <Typography variant=\"h6\">{currentImageObj?.primaryText}</Typography>\n          )}\n\n          {showItem?.secondaryText && (\n            <Typography variant=\"subtitle1\" className={classes.secondaryText}>\n              {currentImageObj?.secondaryText}\n            </Typography>\n          )}\n          {showItem?.pageAction && (\n            <div className={classes.pageAction}>\n              <IconButtonWithTooltip\n                icon={getIconFromName('ChevronLeft')}\n                title={t('Previous')}\n                disabled={currentImageIndex == 0}\n                onClick={() => {\n                  handleViewImage(true);\n                }}\n                id=\"udpRecord-ImageSlider-PreviousBtn\"\n                udprecordid=\"udpRecord-ImageSlider-PreviousBtn\"\n              />\n\n              <div>\n                <Typography>\n                  {currentImageIndex + 1} {t('of')} {images?.length ?? 0}\n                </Typography>\n              </div>\n              <IconButtonWithTooltip\n                icon={getIconFromName('ChevronRight')}\n                title={t('Next')}\n                disabled={currentImageIndex === images?.length - 1}\n                onClick={() => {\n                  handleViewImage();\n                }}\n                id=\"udpRecord-ImageSlider-NextBtn\"\n                udprecordid=\"udpRecord-ImageSlider-NextBtn\"\n              />\n            </div>\n          )}\n        </div>\n      )}\n    </>\n  );\n};\n","import { makeStyles } from '@material-ui/core';\nimport React from 'react';\nimport { ImageFooter } from './ImageFooter';\n\nconst useStyles = makeStyles(theme => ({\n  imageWrapper: {\n    flex: '1 1 auto',\n    overflow: 'hidden',\n    position: 'relative',\n    margin: theme.spacing(2)\n  },\n  image: {\n    objectFit: 'contain',\n    width: '100%',\n    height: '100%',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n  },\n  cardContent: {\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    height: '100%',\n    background: theme.palette.background.paper,\n  },\n}));\n\nexport const Image = props => {\n  const { imageObj, hidePrimaryText, hideSecondaryText } = props;\n  const classes = useStyles();\n\n  return (\n    <div className={classes.cardContent}>\n      <div className={classes.imageWrapper}>\n        <img\n          src={imageObj?.filePath}\n          loading=\"lazy\"\n          alt={`${imageObj?.fileName}`}\n          className={classes.image}\n        />\n      </div>\n      <ImageFooter\n        currentImageObj={imageObj}\n        hidePrimaryText={hidePrimaryText}\n        hideSecondaryText={hideSecondaryText}\n      />\n    </div>\n  );\n};\n","import React, { useCallback } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { handleDownloadFile } from '../utils/fileUtils';\nimport { Image } from './Image';\nimport { SideSheet } from '../../surfaces/SideSheet';\n\nexport const ImageViewerSideSheet = (props) => {\n  const {\n    title,\n    width,\n    imageObj,\n    open,\n    onClose,\n    hideDownload,\n    hidePrimaryText,\n    hideSecondaryText\n  } = props;\n  const { t } = useTranslation();\n\n  const handleDownloadImage = useCallback(() => {\n    handleDownloadFile(imageObj?.filePath, imageObj?.fileName);\n  }, [imageObj]);\n\n  return (\n    <SideSheet\n      title={title ?? t('Image Viewer')}\n      buttonLabel={hideDownload ? null : t('Download')}\n      width={width ?? '90vw'}\n      onSubmit={handleDownloadImage}\n      open={open}\n      onClose={onClose}\n      contentHeight='100%'\n    >\n      <Image\n        imageObj={imageObj}\n        hidePrimaryText={hidePrimaryText}\n        hideSecondaryText={hideSecondaryText}\n      />\n    </SideSheet>\n  );\n};\n","import { Dialog, makeStyles } from '@material-ui/core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { ImageViewerSideSheet } from './ImageViewerSideSheet';\nimport { Image } from './Image';\nimport { ImageFooter } from './ImageFooter';\nimport { AmbientCard } from '../../surfaces/cards/AmbientCard';\nimport { IconButtonWithTooltip } from '../../inputs/buttons/IconButtonWithToolTip';\nimport { getIconFromName } from '../../../utilities/tree/TreeUtilities';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    backgroundColor: theme.palette.background.paper,\n  },\n  imagesWrapper: {\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    overflow: 'hidden',\n    alignItems: 'center',\n  },\n  imageSection: {\n    width: '100%',\n    height: '100%',\n  },\n  image: {\n    objectFit: 'contain',\n    display: 'block',\n    flexShrink: 0,\n    flexGrow: 0,\n    transition: 'translate 300ms ease-in-out',\n  },\n  openSideSheetIcon: {\n    display: 'block',\n    position: 'absolute',\n    top: props => (props?.title ? 64 : 8),\n    right: 8,\n    zIndex: 3,\n    backgroundColor: theme.palette.background.paper,\n  },\n  dialogContent: {\n    overflow: 'hidden',\n    width: '100vw',\n    height: '100vh',\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  closeDialog: {\n    margin: theme.spacing(1),\n  },\n  dialogImageSection: {\n    flex: 2,\n    height: '100%',\n  },\n}));\n\nconst defaultFieldMapping = {\n  filePath: 'filePath',\n  fileName: 'fileName',\n  primaryText: 'primaryText',\n  secondaryText: 'secondaryText',\n};\n\nexport const ImageSlider = props => {\n  const {\n    title,\n    images,\n    fieldMapping = defaultFieldMapping,\n    sideSheetTitle,\n    sideSheetWidth,\n    hideDownload,\n    hidePrimaryText,\n    hideSecondaryText,\n    hidePrimaryTextInExpandMode,\n    hideSecondaryTextInExpandMode,\n    expandInSideSheet = true,\n  } = props;\n  const classes = useStyles(props);\n  const { t } = useTranslation();\n  const [currentImageIndex, setCurrentImageIndex] = useState(0);\n  const [openSideSheet, setOpenSideSheet] = useState(false);\n\n  const handleViewImage = useCallback((previous = false) => {\n    if (previous) {\n      setCurrentImageIndex(prev => prev - 1);\n    } else {\n      setCurrentImageIndex(prev => prev + 1);\n    }\n  }, []);\n\n  const handleExpandImage = useCallback(() => {\n    setOpenSideSheet(true);\n  }, []);\n\n  const currentImageObj = useMemo(() => {\n    const imgObj = images?.[currentImageIndex];\n    if (!imgObj) return {};\n\n    return {\n      filePath: imgObj[fieldMapping?.filePath],\n      fileName: imgObj[fieldMapping?.fileName],\n      primaryText: imgObj[fieldMapping?.primaryText],\n      secondaryText: imgObj[fieldMapping?.secondaryText],\n    };\n  }, [currentImageIndex, fieldMapping, images]);\n\n  return (\n    <AmbientCard\n      fullWidth\n      title={title}\n      removePadding\n      lastChildBottomPadding=\"0px\"\n      removeTopLayoutUnit\n    >\n      <div className={classes.imagesWrapper}>\n        {images?.map(image => (\n          <img\n            src={image?.[fieldMapping?.filePath]}\n            alt={`${image?.[fieldMapping?.fileName]}`}\n            loading=\"lazy\"\n            width=\"100%\"\n            height=\"auto\"\n            className={classes.image}\n            style={{ translate: `${-100 * currentImageIndex}%` }}\n          />\n        ))}\n      </div>\n      <IconButtonWithTooltip\n        icon={getIconFromName('MiniExpand')}\n        title={t('Expand Image')}\n        onClick={handleExpandImage}\n        id=\"udpRecord-ImageSlider-ExpandBtn\"\n        udprecordid=\"udpRecord-ImageSlider-ExpandBtn\"\n        className={classes.openSideSheetIcon}\n      />\n      <ImageFooter\n        images={images}\n        currentImageObj={currentImageObj}\n        hidePrimaryText={hidePrimaryText}\n        hideSecondaryText={hideSecondaryText}\n        handleViewImage={handleViewImage}\n        currentImageIndex={currentImageIndex}\n      />\n\n      {expandInSideSheet ? (\n        <ImageViewerSideSheet\n          title={sideSheetTitle}\n          open={openSideSheet}\n          onClose={() => {\n            setOpenSideSheet(false);\n          }}\n          imageObj={currentImageObj}\n          width={sideSheetWidth}\n          hideDownload={hideDownload}\n          hidePrimaryText={hidePrimaryTextInExpandMode}\n          hideSecondaryText={hideSecondaryTextInExpandMode}\n        />\n      ) : (\n        <Dialog\n          onClose={() => {\n            setOpenSideSheet(false);\n          }}\n          open={openSideSheet}\n          fullScreen\n        >\n          <div className={classes.dialogContent}>\n            <div className={classes.closeDialog}>\n              <IconButtonWithTooltip\n                icon={getIconFromName('Cancel')}\n                title={t('Close')}\n                onClick={() => {\n                  setOpenSideSheet(false);\n                }}\n                id=\"udpRecord-ImageSlider-PreviousBtn\"\n                udprecordid=\"udpRecord-ImageSlider-PreviousBtn\"\n              />\n            </div>\n            <div className={classes.dialogImageSection}>\n              <Image\n                imageObj={currentImageObj}\n                hidePrimaryText={hidePrimaryTextInExpandMode}\n                hideSecondaryText={hideSecondaryTextInExpandMode}\n              />\n            </div>\n          </div>\n        </Dialog>\n      )}\n    </AmbientCard>\n  );\n};\n","/* eslint-disable react/jsx-no-useless-fragment */\nimport React, { useMemo } from 'react';\nimport { PDFViewer } from './pdfViewer/PDFViewer';\nimport { ImageSlider } from './imageSlider/ImageSlider';\nimport { validateFilesImageType } from './utils/fileUtils';\nimport { useTranslation } from 'react-i18next';\nimport { AmbientAlert } from '../feedback/AmbientAlert';\n\nconst defaultFieldMapping = {\n  filePath: 'filePath',\n  blobFile: 'blobFile',\n  fileName: 'fileName',\n  fileExtension: 'fileExtension',\n  primaryText: 'primaryText',\n  secondaryText: 'secondaryText',\n};\n\nexport const FileViewer = props => {\n  const {\n    data,\n    fieldMapping = defaultFieldMapping,\n    acceptedFileExtensions,\n    ...otherProps\n  } = props;\n  const { t } = useTranslation();\n\n  //filter data\n  const filteredData = useMemo(() => {\n    if (!acceptedFileExtensions || acceptedFileExtensions?.length === 0)\n      return data;\n    if (data instanceof Array && data?.length > 0) {\n      return data?.filter(item =>\n        acceptedFileExtensions?.includes(item?.[fieldMapping?.fileExtension])\n      );\n    } else {\n      return acceptedFileExtensions?.includes(\n        data?.[fieldMapping?.fileExtension]\n      )\n        ? data\n        : null;\n    }\n  }, [acceptedFileExtensions, data, fieldMapping]);\n\n  // check if the data is an array. If yes, currently only image viewer accept this list,\n  // we need to validate if all the file in the list is image\n  const fileType = useMemo(() => {\n    if (filteredData instanceof Array) {\n      const type = validateFilesImageType(\n        filteredData,\n        fieldMapping?.fileExtension\n      );\n      return type;\n    }\n    return filteredData?.[fieldMapping?.fileExtension];\n  }, [fieldMapping, filteredData]);\n\n  const viewer = useMemo(() => {\n    switch (fileType) {\n      case 'pdf':\n        return (\n          <PDFViewer\n            fileUrl={filteredData?.[fieldMapping?.filePath]}\n            blobPDF={filteredData?.[fieldMapping?.blobFile]}\n            {...otherProps}\n          />\n        );\n      case 'image':\n        return (\n          <ImageSlider\n            images={filteredData}\n            fieldMapping={fieldMapping}\n            {...otherProps}\n          />\n        );\n      default:\n        return (\n          <AmbientAlert\n            alertMessage={t('Unable to view file')}\n            showAlert\n            alertSeverity=\"error\"\n          />\n        );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [fileType, data, fieldMapping, otherProps]);\n\n  return <>{viewer}</>;\n};\n"],"mappings":"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"}

package/dist/FluentActivityRow-5pKaah6s.js

@@ -0,0 +1,69 @@
+import { t as FluentIcon } from "./FluentIcon-DjE8A5DC.js";
+import { t as AvatarAlphabet } from "./AvatarAlphabet-CX-usWH_.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=FluentActivityRow-5pKaah6s.js.map

package/dist/FluentActivityRow-5pKaah6s.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentActivityRow-5pKaah6s.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-BObfuo5B.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-BObfuo5B.js.map

package/dist/FluentBody-BObfuo5B.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentBody-BObfuo5B.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/FluentCard-DyXAmC_f.js

@@ -0,0 +1,23 @@
+import React, { forwardRef } from "react";
+import { Card, makeStyles } from "@material-ui/core";
+
+//#region src/UI/surfaces/cards/fluentCards/FluentCard.jsx
+const useStyles = makeStyles({ root: {} }, { name: "FluentCard" });
+/**
+* A variant of <Card> that uses a square Fluent UI card style
+*/
+const FluentCard = forwardRef((props, ref) => {
+	const classes = useStyles(props);
+	const { children,...other } = props;
+	return /* @__PURE__ */ React.createElement(Card, {
+		ref,
+		square: true,
+		...other,
+		classes
+	}, children);
+});
+FluentCard.displayName = "FluentCard";
+
+//#endregion
+export { FluentCard as t };
+//# sourceMappingURL=FluentCard-DyXAmC_f.js.map

package/dist/FluentCard-DyXAmC_f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentCard-DyXAmC_f.js","names":[],"sources":["../src/UI/surfaces/cards/fluentCards/FluentCard.jsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { makeStyles, Card } from '@material-ui/core'\n\nconst useStyles = makeStyles(\n  {\n    root: {}\n  },\n  { name: 'FluentCard' }\n)\n\n/**\n * A variant of <Card> that uses a square Fluent UI card style\n */\nexport const FluentCard = forwardRef((props, ref) => {\n  const classes = useStyles(props)\n  const { children, ...other } = props\n\n  return (\n    <Card ref={ref} square {...other} classes={classes}>\n      {children}\n    </Card>\n  )\n})\nFluentCard.displayName = 'FluentCard'\n"],"mappings":";;;;AAIA,MAAM,YAAY,WAChB,EACE,MAAM,EAAE,EACT,EACD,EAAE,MAAM,cAAc,CACvB;;;;AAKD,MAAa,aAAa,YAAY,OAAO,QAAQ;CACnD,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,SAAU,GAAG,UAAU;AAE/B,QACE,oCAAC;EAAU;EAAK;EAAO,GAAI;EAAgB;IACxC,SACI;EAET;AACF,WAAW,cAAc"}

package/dist/FluentCardHeader-bhs87eKk.js

@@ -0,0 +1,29 @@
+import React, { forwardRef } from "react";
+import { CardHeader, makeStyles } from "@material-ui/core";
+
+//#region src/UI/surfaces/cards/fluentCards/FluentCardHeader.jsx
+const useStyles = makeStyles({
+	root: {},
+	avatar: {},
+	action: {},
+	content: {},
+	title: {},
+	subheader: {}
+}, { name: "FluentCardHeader" });
+/**
+* A variant of <CardHeader> that uses a Fluent UI card style
+*/
+const FluentCardHeader = forwardRef((props, ref) => {
+	const classes = useStyles(props);
+	const { children,...other } = props;
+	return /* @__PURE__ */ React.createElement(CardHeader, {
+		ref,
+		...other,
+		classes
+	}, children);
+});
+FluentCardHeader.displayName = "FluentCardHeader";
+
+//#endregion
+export { FluentCardHeader as t };
+//# sourceMappingURL=FluentCardHeader-bhs87eKk.js.map

package/dist/FluentCardHeader-bhs87eKk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentCardHeader-bhs87eKk.js","names":[],"sources":["../src/UI/surfaces/cards/fluentCards/FluentCardHeader.jsx"],"sourcesContent":["import React from 'react';\nimport { forwardRef } from 'react';\nimport { makeStyles, CardHeader } from '@material-ui/core';\n\nconst useStyles = makeStyles(\n  {\n    root: {},\n    avatar: {},\n    action: {},\n    content: {},\n    title: {},\n    subheader: {},\n  },\n  { name: 'FluentCardHeader' }\n);\n\n/**\n * A variant of <CardHeader> that uses a Fluent UI card style\n */\nexport const FluentCardHeader = forwardRef((props, ref) => {\n  const classes = useStyles(props);\n  const { children, ...other } = props;\n\n  return (\n    <CardHeader ref={ref} {...other} classes={classes}>\n      {children}\n    </CardHeader>\n  );\n});\nFluentCardHeader.displayName = 'FluentCardHeader';\n"],"mappings":";;;;AAIA,MAAM,YAAY,WAChB;CACE,MAAM,EAAE;CACR,QAAQ,EAAE;CACV,QAAQ,EAAE;CACV,SAAS,EAAE;CACX,OAAO,EAAE;CACT,WAAW,EAAE;CACd,EACD,EAAE,MAAM,oBAAoB,CAC7B;;;;AAKD,MAAa,mBAAmB,YAAY,OAAO,QAAQ;CACzD,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,SAAU,GAAG,UAAU;AAE/B,QACE,oCAAC;EAAgB;EAAK,GAAI;EAAgB;IACvC,SACU;EAEf;AACF,iBAAiB,cAAc"}

package/dist/FluentCardText-xjUpNmY9.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-xjUpNmY9.js.map

package/dist/FluentCardText-xjUpNmY9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentCardText-xjUpNmY9.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-C2Qfg1ve.js

@@ -0,0 +1,81 @@
+import { t as UnityFluentIcon } from "./UnityFluentIcon-DkZ-zXku.js";
+import { S as getIconFromName } from "./TreeUtilities-BnHT4nq0.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-C2Qfg1ve.js.map

package/dist/FluentCell-C2Qfg1ve.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentCell-C2Qfg1ve.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/FluentCheckbox-0r5fG2yi.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Checkbox, makeStyles } from "@material-ui/core";
+import { CheckboxCompositeReversedIcon, CheckboxIcon } from "@fluentui/react-icons";
+
+//#region src/UI/inputs/checkbox/FluentCheckbox.jsx
+const useStyles = makeStyles((theme) => ({ box: { fontSize: 18 } }));
+const FluentCheckbox = (props) => {
+	const classes = useStyles(props);
+	const { name, checked, onChange, aria,...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(Checkbox, {
+		...otherProps,
+		name,
+		icon: /* @__PURE__ */ React.createElement(CheckboxIcon, { className: classes.box }),
+		checkedIcon: /* @__PURE__ */ React.createElement(CheckboxCompositeReversedIcon, { className: classes.box }),
+		checked,
+		inputProps: { "aria-label": { aria } },
+		onChange
+	});
+};
+
+//#endregion
+export { FluentCheckbox as t };
+//# sourceMappingURL=FluentCheckbox-0r5fG2yi.js.map

package/dist/FluentCheckbox-0r5fG2yi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentCheckbox-0r5fG2yi.js","names":[],"sources":["../src/UI/inputs/checkbox/FluentCheckbox.jsx"],"sourcesContent":["import React from 'react'\nimport { Checkbox, makeStyles } from '@material-ui/core'\nimport {\n  CheckboxIcon,\n  CheckboxCompositeReversedIcon\n} from '@fluentui/react-icons'\n\nconst useStyles = makeStyles((theme) => ({\n  box: {\n    fontSize: 18\n  }\n}))\n\nexport const FluentCheckbox = (props) => {\n  const classes = useStyles(props)\n  const { name, checked, onChange, aria, ...otherProps } = props\n  return (\n    <Checkbox\n      {...otherProps}\n      name={name}\n      icon={<CheckboxIcon className={classes.box} />}\n      checkedIcon={<CheckboxCompositeReversedIcon className={classes.box} />}\n      checked={checked}\n      inputProps={{ 'aria-label': { aria } }}\n      onChange={onChange}\n    />\n  )\n}\n"],"mappings":";;;;;AAOA,MAAM,YAAY,YAAY,WAAW,EACvC,KAAK,EACH,UAAU,IACX,EACF,EAAE;AAEH,MAAa,kBAAkB,UAAU;CACvC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,MAAM,SAAS,UAAU,KAAM,GAAG,eAAe;AACzD,QACE,oCAAC;EACC,GAAI;EACE;EACN,MAAM,oCAAC,gBAAa,WAAW,QAAQ,MAAO;EAC9C,aAAa,oCAAC,iCAA8B,WAAW,QAAQ,MAAO;EAC7D;EACT,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE;EAC5B;GACV"}

package/dist/FluentColorPicker-8XGyMfwI.js

@@ -0,0 +1,77 @@
+import { t as FluentIconButton } from "./FluentIconButton-CtN4xdO_.js";
+import React, { useCallback, useState } from "react";
+import { makeStyles } from "@material-ui/core";
+import { SketchPicker } from "react-color";
+import { EyedropperIcon } from "@fluentui/react-icons";
+
+//#region src/UI/inputs/pickers/FluentColorPicker.jsx
+const useStyles = makeStyles((theme) => ({
+	buttonContainer: {
+		display: "flex",
+		alignItems: "center"
+	},
+	color: {
+		width: theme.spacing(3),
+		height: theme.spacing(2),
+		borderRadius: theme.spacing(.25),
+		background: (props) => props.currentColor?.hex ? props.currentColor.hex : props.currentColor
+	},
+	swatch: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-around",
+		background: "#fff",
+		width: theme.spacing(3.5),
+		height: theme.spacing(2.5),
+		borderRadius: theme.spacing(.25),
+		boxShadow: "0 0 0 1px rgba(0,0,0,.1)",
+		marginLeft: theme.spacing(.5)
+	},
+	popover: {
+		position: "absolute",
+		zIndex: "2"
+	},
+	cover: {
+		position: "fixed",
+		top: "0px",
+		right: "0px",
+		bottom: "0px",
+		left: "0px"
+	}
+}));
+const FluentColorPicker = (props) => {
+	const { handleColorChange, onChange, value } = props;
+	const [displayColorPicker, setDisplayColorPicker] = useState(false);
+	const [currentColor, setCurrentColor] = useState(`${value ? value?.hex ? value.hex : value : ""}`);
+	const classes = useStyles({
+		currentColor,
+		...props
+	});
+	const handleOpen = () => {
+		setDisplayColorPicker(true);
+	};
+	const handleClose = () => {
+		setDisplayColorPicker(false);
+	};
+	const handleChange = useCallback((newColor) => {
+		if (handleColorChange) handleColorChange(newColor);
+		else if (onChange) onChange(newColor.hex);
+		setCurrentColor(newColor.hex);
+	}, [handleColorChange, onChange]);
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: classes.buttonContainer }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		onClick: handleOpen,
+		color: "primary",
+		icon: EyedropperIcon
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.swatch }, /* @__PURE__ */ React.createElement("div", { className: classes.color }))), displayColorPicker ? /* @__PURE__ */ React.createElement("div", { className: classes.popover }, /* @__PURE__ */ React.createElement("div", {
+		className: classes.cover,
+		onClick: handleClose
+	}), /* @__PURE__ */ React.createElement(SketchPicker, {
+		color: currentColor,
+		onChange: handleChange,
+		disableAlpha: true
+	})) : null);
+};
+
+//#endregion
+export { FluentColorPicker as t };
+//# sourceMappingURL=FluentColorPicker-8XGyMfwI.js.map

package/dist/FluentColorPicker-8XGyMfwI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentColorPicker-8XGyMfwI.js","names":[],"sources":["../src/UI/inputs/pickers/FluentColorPicker.jsx"],"sourcesContent":["//JIRA: UNT-3388, Author: Mithara Silva, Date: 06/09/2023=====\nimport React, { useState, useCallback } from 'react';\nimport { SketchPicker } from 'react-color';\nimport { makeStyles } from '@material-ui/core';\nimport { FluentIconButton } from '../buttons/FluentIconButton';\nimport { EyedropperIcon } from '@fluentui/react-icons';\n\nconst useStyles = makeStyles((theme) => ({\n  buttonContainer: {\n    display: 'flex',\n    alignItems: 'center'\n  },\n  color: {\n    width: theme.spacing(3),\n    height: theme.spacing(2),\n    borderRadius: theme.spacing(0.25),\n    background: (props) => props.currentColor?.hex ? props.currentColor.hex : props.currentColor\n  },\n  swatch: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-around',\n    background: '#fff',\n    width: theme.spacing(3.5),\n    height: theme.spacing(2.5),\n    borderRadius: theme.spacing(0.25),\n    boxShadow: '0 0 0 1px rgba(0,0,0,.1)',\n    marginLeft: theme.spacing(0.5)\n  },\n  popover: {\n    position: 'absolute',\n    zIndex: '2'\n  },\n  cover: {\n    position: 'fixed',\n    top: '0px',\n    right: '0px',\n    bottom: '0px',\n    left: '0px'\n  }\n}));\n\nexport const FluentColorPicker = (props) => {\n  const { handleColorChange, onChange, value } = props;\n  const [displayColorPicker, setDisplayColorPicker] = useState(false);\n  const [currentColor, setCurrentColor] = useState(`${value ? ( value?.hex ? value.hex : value ) : ''}`);\n  const classes = useStyles({ currentColor: currentColor, ...props });\n\n\n  const handleOpen = () => {\n    setDisplayColorPicker(true);\n  };\n\n  const handleClose = () => {\n    setDisplayColorPicker(false);\n  };\n\n  const handleChange = useCallback(\n    (newColor) => {\n      if (handleColorChange) {\n        handleColorChange(newColor);\n      }\n      else if (onChange) {\n        onChange(newColor.hex);\n      }\n      setCurrentColor(newColor.hex);\n    },\n    [handleColorChange, onChange]\n  );\n\n  return (\n    <div>\n      <div className={classes.buttonContainer}>\n        <div>\n          <FluentIconButton\n            onClick={handleOpen}\n            color='primary'\n            icon={EyedropperIcon}\n          />\n        </div>\n        <div className={classes.swatch}>\n          <div className={classes.color} />\n        </div>\n      </div>\n      {displayColorPicker ? (\n        <div className={classes.popover}>\n          <div className={classes.cover} onClick={handleClose} />\n          <SketchPicker\n            color={currentColor}\n            onChange={handleChange}\n            disableAlpha={true}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAOA,MAAM,YAAY,YAAY,WAAW;CACvC,iBAAiB;EACf,SAAS;EACT,YAAY;EACb;CACD,OAAO;EACL,OAAO,MAAM,QAAQ,EAAE;EACvB,QAAQ,MAAM,QAAQ,EAAE;EACxB,cAAc,MAAM,QAAQ,IAAK;EACjC,aAAa,UAAU,MAAM,cAAc,MAAM,MAAM,aAAa,MAAM,MAAM;EACjF;CACD,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,OAAO,MAAM,QAAQ,IAAI;EACzB,QAAQ,MAAM,QAAQ,IAAI;EAC1B,cAAc,MAAM,QAAQ,IAAK;EACjC,WAAW;EACX,YAAY,MAAM,QAAQ,GAAI;EAC/B;CACD,SAAS;EACP,UAAU;EACV,QAAQ;EACT;CACD,OAAO;EACL,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP;CACF,EAAE;AAEH,MAAa,qBAAqB,UAAU;CAC1C,MAAM,EAAE,mBAAmB,UAAU,UAAU;CAC/C,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,MAAM;CACnE,MAAM,CAAC,cAAc,mBAAmB,SAAS,GAAG,QAAU,OAAO,MAAM,MAAM,MAAM,QAAU,KAAK;CACtG,MAAM,UAAU,UAAU;EAAgB;EAAc,GAAG;EAAO,CAAC;CAGnE,MAAM,mBAAmB;AACvB,wBAAsB,KAAK;;CAG7B,MAAM,oBAAoB;AACxB,wBAAsB,MAAM;;CAG9B,MAAM,eAAe,aAClB,aAAa;AACZ,MAAI,kBACF,mBAAkB,SAAS;WAEpB,SACP,UAAS,SAAS,IAAI;AAExB,kBAAgB,SAAS,IAAI;IAE/B,CAAC,mBAAmB,SAAS,CAC9B;AAED,QACE,oCAAC,aACC,oCAAC,SAAI,WAAW,QAAQ,mBACtB,oCAAC,aACC,oCAAC;EACC,SAAS;EACT,OAAM;EACN,MAAM;GACN,CACE,EACN,oCAAC,SAAI,WAAW,QAAQ,UACtB,oCAAC,SAAI,WAAW,QAAQ,QAAS,CAC7B,CACF,EACL,qBACC,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC;EAAI,WAAW,QAAQ;EAAO,SAAS;GAAe,EACvD,oCAAC;EACC,OAAO;EACP,UAAU;EACV,cAAc;GACd,CACE,GACJ,KACA"}

package/dist/FluentDataTable-DuDb9VVl.js

@@ -0,0 +1,30 @@
+import { t as FluentBody_default } from "./FluentBody-BObfuo5B.js";
+import { t as FluentCell_default } from "./FluentCell-C2Qfg1ve.js";
+import { t as FluentHead_default } from "./FluentHead-B9Abo5q9.js";
+import { t as FluentRow_default } from "./FluentRow-BvNBfdSg.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-DuDb9VVl.js.map

package/dist/FluentDataTable-DuDb9VVl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentDataTable-DuDb9VVl.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"}