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

package/dist/FileViewer-D1yaA_06.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileViewer-D1yaA_06.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-CpAEktQk.js

@@ -0,0 +1,69 @@
+import { t as FluentIcon } from "./FluentIcon-pwGrBtD8.js";
+import { t as AvatarAlphabet } from "./AvatarAlphabet-r0KzzYa6.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-CpAEktQk.js.map

package/dist/FluentActivityRow-CpAEktQk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentActivityRow-CpAEktQk.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/FluentCard-Dsd3Pkux.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-Dsd3Pkux.js.map

package/dist/FluentCard-Dsd3Pkux.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentCard-Dsd3Pkux.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,UAAU,GAAG,UAAU;AAE/B,QACE,oCAAC;EAAU;EAAK;EAAO,GAAI;EAAgB;IACxC,SACI;EAET;AACF,WAAW,cAAc"}

package/dist/FluentCardHeader-3vPpjp7D.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-3vPpjp7D.js.map

package/dist/FluentCardHeader-3vPpjp7D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentCardHeader-3vPpjp7D.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,UAAU,GAAG,UAAU;AAE/B,QACE,oCAAC;EAAgB;EAAK,GAAI;EAAgB;IACvC,SACU;EAEf;AACF,iBAAiB,cAAc"}

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

package/dist/FluentCardText-BbDL3Uo_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentCardText-BbDL3Uo_.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/FluentCheckbox-CX7XgoFz.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-CX7XgoFz.js.map

package/dist/FluentCheckbox-CX7XgoFz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentCheckbox-CX7XgoFz.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,MAAM,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-7Wb1Ud8l.js

@@ -0,0 +1,77 @@
+import { t as FluentIconButton } from "./FluentIconButton-Av4urxc6.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-7Wb1Ud8l.js.map

package/dist/FluentColorPicker-7Wb1Ud8l.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentColorPicker-7Wb1Ud8l.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-D8DX3FBt.js

@@ -0,0 +1,30 @@
+import FluentBody from "./UI/dataDisplay/FluentDataTable/FluentBody/index.js";
+import FluentCell from "./UI/dataDisplay/FluentDataTable/FluentCell/index.js";
+import FluentHead from "./UI/dataDisplay/FluentDataTable/FluentHead/index.js";
+import FluentRow from "./UI/dataDisplay/FluentDataTable/FluentRow/index.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;
+FluentDataTable.FluentBody = FluentBody;
+FluentDataTable.FluentCell = FluentCell;
+FluentDataTable.FluentRow = FluentRow;
+
+//#endregion
+export { FluentDataTable as t };
+//# sourceMappingURL=FluentDataTable-D8DX3FBt.js.map

package/dist/FluentDataTable-D8DX3FBt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentDataTable-D8DX3FBt.js","names":[],"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,aAAa;AAC7B,gBAAgB,aAAa;AAC7B,gBAAgB,aAAa;AAC7B,gBAAgB,YAAY"}

package/dist/FluentDatePicker-C6WEywwM.js

@@ -0,0 +1,75 @@
+import React, { useCallback } from "react";
+import { InputAdornment, makeStyles } from "@material-ui/core";
+import { KeyboardDatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
+import DateFnsUtils from "@date-io/date-fns";
+import { EventDateIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/inputs/pickers/FluentDatePicker.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	inputRoot: { fontSize: 12 },
+	input: {
+		borderRadius: 2,
+		height: 32,
+		padding: 0,
+		paddingLeft: theme.spacing(1)
+	},
+	formTextInput: { fontSize: 14 },
+	labelRoot: { fontSize: 14 },
+	FormControl: {
+		display: "none",
+		marginTop: 0
+	}
+}));
+const FluentDatePicker = (props) => {
+	const classes = useStyles();
+	const { id, udprecordid, label, startAdornment, endAdornment, handleDateChange: onChangeProp, selectedDate, ...otherProps } = props;
+	const onChange = useCallback((e, value) => {
+		return onChangeProp?.(e, value);
+	}, [onChangeProp]);
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(MuiPickersUtilsProvider, { utils: DateFnsUtils }, /* @__PURE__ */ React.createElement(KeyboardDatePicker, {
+		disableToolbar: true,
+		variant: "inline",
+		format: "MM/dd/yyyy",
+		margin: "normal",
+		id,
+		udprecordid,
+		inputVariant: "outlined",
+		value: selectedDate,
+		onChange,
+		...otherProps,
+		KeyboardButtonProps: {
+			"aria-label": "change date",
+			udprecordid: udprecordid + "-button"
+		},
+		keyboardIcon: /* @__PURE__ */ React.createElement(EventDateIcon, { style: { fontSize: 16 } }),
+		InputProps: {
+			classes: {
+				root: classes.input,
+				input: classes.formTextInput,
+				...props.InputProps?.classes
+			},
+			...props.InputProps,
+			...startAdornment,
+			...endAdornment,
+			startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, {
+				classes: { root: classes.inputRoot },
+				className: classes.inputRoot,
+				position: "start"
+			}, label)
+		},
+		InputLabelProps: {
+			shrink: false,
+			classes: {
+				root: classes.labelRoot,
+				focused: classes.labelFocused
+			}
+		}
+	})));
+};
+FluentDatePicker.propTypes = { label: PropTypes.string.isRequired };
+
+//#endregion
+export { FluentDatePicker as t };
+//# sourceMappingURL=FluentDatePicker-C6WEywwM.js.map

package/dist/FluentDatePicker-C6WEywwM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentDatePicker-C6WEywwM.js","names":[],"sources":["../src/UI/inputs/pickers/FluentDatePicker.jsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { makeStyles, InputAdornment } from '@material-ui/core';\nimport { EventDateIcon } from '@fluentui/react-icons';\nimport {\n  MuiPickersUtilsProvider,\n  KeyboardDatePicker\n} from '@material-ui/pickers';\nimport DateFnsUtils from '@date-io/date-fns';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  inputRoot: {\n    fontSize: 12\n  },\n  input: {\n    borderRadius: 2,\n    height: 32,\n    padding: 0,\n    paddingLeft: theme.spacing(1)\n  },\n  formTextInput: {\n    fontSize: 14\n  },\n  labelRoot: {\n    fontSize: 14\n  },\n  FormControl: {\n    display: 'none',\n    marginTop: 0\n  }\n}));\n\nexport const FluentDatePicker = (props) => {\n  const classes = useStyles();\n  const {\n    id,\n    udprecordid,\n    label,\n    startAdornment,\n    endAdornment,\n    handleDateChange: onChangeProp,\n    selectedDate,\n    ...otherProps\n  } = props;\n\n  const onChange = useCallback(\n    (e, value) => {\n      return onChangeProp?.(e, value);\n    },\n    [onChangeProp]\n  );\n\n  return (\n    <div>\n      <MuiPickersUtilsProvider utils={DateFnsUtils}>\n        <KeyboardDatePicker\n          disableToolbar\n          variant='inline'\n          format='MM/dd/yyyy'\n          margin='normal'\n          id={id}\n          udprecordid={udprecordid}\n          inputVariant='outlined'\n          value={selectedDate}\n          onChange={onChange}\n          {...otherProps}\n          KeyboardButtonProps={{\n            'aria-label': 'change date',\n            udprecordid: udprecordid + '-button'\n          }}\n          keyboardIcon={<EventDateIcon style={{ fontSize: 16 }} />}\n          InputProps={{\n            classes: {\n              root: classes.input,\n              input: classes.formTextInput,\n              ...props.InputProps?.classes\n            },\n            ...props.InputProps,\n            ...startAdornment,\n            ...endAdornment,\n            startAdornment: (\n              <InputAdornment\n                classes={{ root: classes.inputRoot }}\n                className={classes.inputRoot}\n                position='start'\n              >\n                {label}\n              </InputAdornment>\n            )\n          }}\n          InputLabelProps={{\n            shrink: false,\n            classes: {\n              root: classes.labelRoot,\n              focused: classes.labelFocused\n            }\n          }}\n        />\n      </MuiPickersUtilsProvider>\n    </div>\n  );\n};\n\nFluentDatePicker.propTypes = {\n  /**\n   * Adornment label (eg, From: )\n   */\n  label: PropTypes.string.isRequired\n  /**\n   * Id\n   */\n};\n"],"mappings":";;;;;;;;AAUA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,WAAW,EACT,UAAU,IACX;CACD,OAAO;EACL,cAAc;EACd,QAAQ;EACR,SAAS;EACT,aAAa,MAAM,QAAQ,EAAE;EAC9B;CACD,eAAe,EACb,UAAU,IACX;CACD,WAAW,EACT,UAAU,IACX;CACD,aAAa;EACX,SAAS;EACT,WAAW;EACZ;CACF,EAAE;AAEH,MAAa,oBAAoB,UAAU;CACzC,MAAM,UAAU,WAAW;CAC3B,MAAM,EACJ,IACA,aACA,OACA,gBACA,cACA,kBAAkB,cAClB,cACA,GAAG,eACD;CAEJ,MAAM,WAAW,aACd,GAAG,UAAU;AACZ,SAAO,eAAe,GAAG,MAAM;IAEjC,CAAC,aAAa,CACf;AAED,QACE,oCAAC,aACC,oCAAC,2BAAwB,OAAO,gBAC9B,oCAAC;EACC;EACA,SAAQ;EACR,QAAO;EACP,QAAO;EACH;EACS;EACb,cAAa;EACb,OAAO;EACG;EACV,GAAI;EACJ,qBAAqB;GACnB,cAAc;GACd,aAAa,cAAc;GAC5B;EACD,cAAc,oCAAC,iBAAc,OAAO,EAAE,UAAU,IAAI,GAAI;EACxD,YAAY;GACV,SAAS;IACP,MAAM,QAAQ;IACd,OAAO,QAAQ;IACf,GAAG,MAAM,YAAY;IACtB;GACD,GAAG,MAAM;GACT,GAAG;GACH,GAAG;GACH,gBACE,oCAAC;IACC,SAAS,EAAE,MAAM,QAAQ,WAAW;IACpC,WAAW,QAAQ;IACnB,UAAS;MAER,MACc;GAEpB;EACD,iBAAiB;GACf,QAAQ;GACR,SAAS;IACP,MAAM,QAAQ;IACd,SAAS,QAAQ;IAClB;GACF;GACD,CACsB,CACtB;;AAIV,iBAAiB,YAAY,EAI3B,OAAO,UAAU,OAAO,YAIzB"}

package/dist/FluentDialog-COrrKCGR.js

@@ -0,0 +1,80 @@
+import { t as PrimaryActionButton } from "./PrimaryActionButton-C_9XH4Yr.js";
+import React from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, LinearProgress, makeStyles } from "@material-ui/core";
+
+//#region src/UI/feedback/FluentDialog.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	paper: {
+		borderRadius: 2,
+		borderTop: (props) => props.header && `4px solid ${theme.palette.secondary.main}`
+	},
+	title: { color: (props) => props.header && theme.palette.secondary.main },
+	actions: {
+		marginBottom: 0,
+		marginRight: 0,
+		padding: 0
+	},
+	button: {
+		borderRadius: 0,
+		padding: "calc(.875rem - 3px) 23px calc(.875rem - 3px) 15px",
+		textTransform: "none"
+	},
+	dialogContent: {
+		height: (props) => props.dialogContentHeight || "auto",
+		width: (props) => props.dialogContentWidth || "auto"
+	},
+	dialogLeftBorder: {
+		position: "absolute",
+		left: 0,
+		top: 0,
+		bottom: 0,
+		width: theme.spacing(1),
+		backgroundColor: (props) => props.dialogLeftBorderColor ?? theme.palette.primary.main
+	}
+}));
+const FluentDialog = (props) => {
+	const classes = useStyles(props);
+	const { title, message, actionOne, actionTwo, actionThree, labelOne, labelTwo, labelThree, open, handleClose, ariaLabelledby, ariaDescribedby, titleId, descriptionId, children, buttonOneHidden = false, buttonTwoHidden = false, buttonThreeHidden = true, disableOne, disableTwo, disableThree, progress, enableLeftBorderStyling = false, ...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(Dialog, {
+		open,
+		onClose: handleClose,
+		"aria-labelledby": ariaLabelledby,
+		"aria-describedby": ariaDescribedby,
+		...otherProps,
+		classes: { paper: classes.paper }
+	}, /* @__PURE__ */ React.createElement("div", { className: enableLeftBorderStyling ? classes.dialogLeftBorder : "" }), /* @__PURE__ */ React.createElement(DialogTitle, {
+		className: classes.title,
+		id: titleId
+	}, title), /* @__PURE__ */ React.createElement(DialogContent, { className: classes.dialogContent }, /* @__PURE__ */ React.createElement(DialogContentText, { id: descriptionId }, message), children), /* @__PURE__ */ React.createElement(DialogActions, {
+		className: classes.actions,
+		disableSpacing: true
+	}, !buttonThreeHidden && /* @__PURE__ */ React.createElement(Button, {
+		id: "udpRecord-FluentDialog-Confirm",
+		udprecordid: "udpRecord-FluentDialog-Confirm",
+		onClick: actionThree,
+		color: "secondary",
+		disabled: disableThree,
+		className: classes.button
+	}, labelThree), !buttonTwoHidden && /* @__PURE__ */ React.createElement(Button, {
+		id: "udpRecord-FluentDialog-Confirm",
+		udprecordid: "udpRecord-FluentDialog-Confirm",
+		onClick: actionTwo,
+		color: "secondary",
+		disabled: disableTwo,
+		className: classes.button
+	}, labelTwo), !buttonOneHidden && /* @__PURE__ */ React.createElement(PrimaryActionButton, {
+		id: "udpRecord-FluentDialog-Cancel",
+		udprecordid: "udpRecord-FluentDialog-Cancel",
+		disabled: disableOne,
+		onClick: actionOne
+	}, labelOne)), progress && /* @__PURE__ */ React.createElement(LinearProgress, {
+		color: "secondary",
+		value: progress,
+		...otherProps
+	}));
+};
+
+//#endregion
+export { FluentDialog as t };
+//# sourceMappingURL=FluentDialog-COrrKCGR.js.map