udp-react-enterprise-component-library 25.16.2-beta.1 → 25.16.2-beta.3

package/dist/FluentCell-DK50vrkm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentCell-DK50vrkm.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 '../../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-BOUbx-K4.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-BOUbx-K4.js.map

package/dist/FluentCheckbox-BOUbx-K4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentCheckbox-BOUbx-K4.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-Df_P882h.js

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

package/dist/FluentColorPicker-Df_P882h.js.map

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

@@ -0,0 +1,30 @@
+import { t as FluentBody_default } from "./FluentBody-DKNRUZhu.js";
+import { t as FluentCell_default } from "./FluentCell-DK50vrkm.js";
+import { t as FluentHead_default } from "./FluentHead-CekbF2Ur.js";
+import { t as FluentRow_default } from "./FluentRow-CAEFiCQ6.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-Db9mP456.js.map

package/dist/FluentDataTable-Db9mP456.js.map

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

package/dist/FluentDatePicker-DPhZX5WK.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-DPhZX5WK.js.map

package/dist/FluentDatePicker-DPhZX5WK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentDatePicker-DPhZX5WK.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,aACA,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-CXnECDfH.js

@@ -0,0 +1,80 @@
+import { t as PrimaryActionButton } from "./PrimaryActionButton-Dp7s1CMW.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-CXnECDfH.js.map

package/dist/FluentDialog-CXnECDfH.js.map

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

package/dist/FluentHead-CekbF2Ur.js

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

package/dist/FluentHead-CekbF2Ur.js.map

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

package/dist/FluentIcon-iRSVzrph.js

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

package/dist/FluentIcon-iRSVzrph.js.map

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

package/dist/FluentIconButton-AN9tZKVl.js

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

package/dist/FluentIconButton-AN9tZKVl.js.map

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

package/dist/FluentIconKey-BsYZuTFE.js

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

package/dist/FluentIconKey-BsYZuTFE.js.map

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

package/dist/FluentInputSlider-BqI2PdVF.js

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

package/dist/FluentInputSlider-BqI2PdVF.js.map

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

package/dist/FluentLink-gRMNxD82.js

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

package/dist/FluentLink-gRMNxD82.js.map

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