udp-react-enterprise-component-library 25.18.1-beta.6 → 25.18.1-beta.60

package/dist/FluentIconKey-BWCFV9Qs.js

@@ -0,0 +1,41 @@
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { t as UnityFluentIcon } from "./UnityFluentIcon-DrASIcTF.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-BWCFV9Qs.js.map

package/dist/FluentIconKey-BWCFV9Qs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentIconKey-BWCFV9Qs.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-CV8qzGtH.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-CV8qzGtH.js.map

package/dist/FluentInputSlider-CV8qzGtH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentInputSlider-CV8qzGtH.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-CkA7BUEB.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-CkA7BUEB.js.map

package/dist/FluentLink-CkA7BUEB.js.map

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

package/dist/FluentListItem-_Nq3fhEY.js

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

package/dist/FluentListItem-_Nq3fhEY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentListItem-_Nq3fhEY.js","names":["Typography"],"sources":["../src/UI/dataDisplay/FluentListItem.jsx"],"sourcesContent":["/* eslint-disable react/self-closing-comp */\nimport React, { useState } from 'react';\nimport { makeStyles, Divider, Collapse } from '@material-ui/core';\nimport clsx from 'clsx';\nimport { LayoutUnit } from '../../layout/LayoutUnit';\nimport { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';\nimport { ChevronDownIcon } from '@fluentui/react-icons';\nimport { Typography } from './typography/Typography';\nimport { FluentCheckbox } from '../inputs/checkbox/FluentCheckbox';\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {\n      height: theme.spacing(5)\n    },\n    wrapper: {\n      display: 'flex',\n      flexDirection: 'row'\n    },\n    titleWrapper: {\n      display: 'flex',\n      width: '100%',\n      textAlign: 'left',\n      alignItems: 'center'\n    },\n    title: {\n      flex: 1\n    },\n    progress: {\n      height: 2,\n      '&::after': {\n        content: `''`,\n        display: 'block',\n        background: theme.palette.secondary.main,\n        width: (props) => (props.progress / props.total) * 425,\n        height: '100%'\n      }\n    },\n    iconStart: {\n      marginRight: theme.spacing(1)\n    },\n    iconEnd: {\n      marginLeft: theme.spacing(1)\n    },\n    expand: {\n      transform: 'rotate(0deg)',\n      transition: theme.transitions.create('transform', {\n        duration: theme.transitions.duration.shortest\n      })\n    },\n    expandOpen: {\n      transform: 'rotate(180deg)'\n    },\n    iconSpace: {\n      width: theme.spacing(2.75)\n    },\n    valueWrapper: {\n      display: 'flex',\n      alignItems: 'center'\n    },\n    valueIcon: {\n      marginRight: theme.spacing(1)\n    },\n    checkbox: {\n      marginRight: theme.spacing(1),\n      padding: '0px'\n    }\n  }),\n  { name: 'FluentListItem' }\n);\n\nexport const FluentListItem = (props) => {\n  const classes = useStyles(props);\n  const {\n    subject,\n    value,\n    visualization,\n    boldSubject = true,\n    expandable = false,\n    valueTextColor,\n    icon,\n    iconColor,\n    iconEnd = true,\n    valueIcon,\n    valueIconColor,\n    hideDivider = false,\n    children,\n    expandedDefaultValue = false,\n    keepIconLeftSpace = false,\n    keepIconRightSpace = false,\n    defaultChecked = false,\n    onCheckEvent\n  } = props;\n  const [expandItem, setExpandItem] = useState(expandedDefaultValue);\n\n  const handleOnClick = () => {\n    setExpandItem(!expandItem);\n  };\n\n  return (\n    <div>\n      <div className={classes.root} onClick={expandable ? handleOnClick : null}>\n        <div className={classes.wrapper}>\n          <div className={classes.titleWrapper}>\n            {keepIconLeftSpace && (!expandable || iconEnd) && (\n              <div className={classes.iconSpace}></div>\n            )}\n            {onCheckEvent && (\n              <FluentCheckbox\n                defaultChecked={defaultChecked}\n                onChange={onCheckEvent}\n                className={classes.checkbox}\n              />\n            )}\n            {(icon || expandable) && !iconEnd && (\n              <FluentIcon\n                component={expandable ? ChevronDownIcon : icon}\n                color={iconColor}\n                className={clsx(classes.iconStart, {\n                  [classes.expand]: expandable,\n                  [classes.expandOpen]: expandable && expandItem\n                })}\n                size='small'\n              />\n            )}\n\n            <div className={classes.title}>\n              <Typography variant='body1'>\n                {boldSubject ? <strong>{subject}</strong> : subject}\n              </Typography>\n            </div>\n            <LayoutUnit unit='nudge' />\n            <div className={classes.valueWrapper}>\n              {valueIcon && (\n                <FluentIcon\n                  component={valueIcon}\n                  color={valueIconColor}\n                  className={classes.valueIcon}\n                  size='small'\n                />\n              )}\n              <Typography variant='body1' color={valueTextColor}>\n                {value}\n              </Typography>\n            </div>\n\n            {(icon || expandable) && iconEnd && (\n              <FluentIcon\n                component={expandable ? ChevronDownIcon : icon}\n                color={iconColor}\n                className={clsx(classes.iconEnd, {\n                  [classes.expand]: expandable,\n                  [classes.expandOpen]: expandable && expandItem\n                })}\n                size='small'\n              />\n            )}\n            {keepIconRightSpace && (!expandable || !iconEnd) && (\n              <div className={classes.iconSpace}></div>\n            )}\n          </div>\n        </div>\n        <LayoutUnit unit='nudge' />\n        {!hideDivider && (\n          <Divider className={visualization && classes.progress} />\n        )}\n      </div>\n      <Collapse in={expandItem} timeout='auto' unmountOnExit>\n        <div>{children}</div>\n      </Collapse>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/FluentMap-UViNB36I.js

@@ -0,0 +1,72 @@
+import { t as MapContent } from "./MapContent-DsYLcJVe.js";
+import React from "react";
+import { ImageOverlay, MapContainer, TileLayer } from "react-leaflet";
+import L from "leaflet";
+import Marker$1 from "react-leaflet-enhanced-marker";
+import "leaflet/dist/leaflet.css";
+import "react-leaflet-markercluster/dist/styles.min.css";
+
+//#region src/maps/leafletMaps/FluentImageMap.jsx
+const FluentImageMap = ({ onClick, coordinates, bounds, style, dragging = false, doubleClickZoom = false, scrollWheelZoom = false, attributionControl = false, zoomControl = false, IconComponent, MapTile }) => {
+	return /* @__PURE__ */ React.createElement(MapContainer, {
+		crs: L.CRS.Simple,
+		bounds,
+		style,
+		dragging,
+		doubleClickZoom,
+		scrollWheelZoom,
+		attributionControl,
+		zoomControl
+	}, /* @__PURE__ */ React.createElement(ImageOverlay, {
+		bounds,
+		url: MapTile
+	}), coordinates && coordinates.map((item) => {
+		return /* @__PURE__ */ React.createElement(Marker$1, {
+			icon: /* @__PURE__ */ React.createElement(IconComponent, { available: item.status }),
+			position: [item.long, item.lat],
+			eventHandlers: { click: () => onClick(item.title) }
+		});
+	}));
+};
+
+//#endregion
+//#region src/maps/leafletMaps/FluentMap.jsx
+const defaultCenter = [49.280806, -122.828007];
+const defaultZoom = 13;
+const defaultStyle = {
+	height: "100%",
+	width: "100%"
+};
+const FluentMap = ({ onClick, onMouseOver, onMouseOut, data, IconComponent, bounds, style = defaultStyle, centerCoordinates = defaultCenter, zoom = defaultZoom, dragging = true, doubleClickZoom = true, scrollWheelZoom = true, attributionControl = true, zoomControl = true, highlightMarkersOnClick = true, PopupComponent, children, useDefaultMarker = true, useMarkerClustering = false }) => {
+	return /* @__PURE__ */ React.createElement(MapContainer, {
+		bounds,
+		style,
+		center: centerCoordinates,
+		zoom,
+		dragging,
+		doubleClickZoom,
+		scrollWheelZoom,
+		attributionControl,
+		zoomControl,
+		preferCanvas: true,
+		renderer: L.canvas({})
+	}, /* @__PURE__ */ React.createElement(TileLayer, {
+		attribution: "© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
+		url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+	}), /* @__PURE__ */ React.createElement(MapContent, {
+		data,
+		IconComponent,
+		onClick,
+		onMouseOver,
+		onMouseOut,
+		highlightMarkersOnClick,
+		PopupComponent,
+		children,
+		useDefaultMarker,
+		useMarkerClustering
+	}));
+};
+
+//#endregion
+export { FluentImageMap as n, FluentMap as t };
+//# sourceMappingURL=FluentMap-UViNB36I.js.map

package/dist/FluentMap-UViNB36I.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentMap-UViNB36I.js","names":["Marker"],"sources":["../src/maps/leafletMaps/FluentImageMap.jsx","../src/maps/leafletMaps/FluentMap.jsx"],"sourcesContent":["import React from 'react'\nimport { MapContainer, ImageOverlay } from 'react-leaflet'\nimport L from 'leaflet'\nimport Marker from \"react-leaflet-enhanced-marker\";\n\nexport const FluentImageMap = (\n        { onClick,\n         coordinates, \n         bounds, \n         style,\n         dragging=false,\n         doubleClickZoom=false,\n         scrollWheelZoom=false,\n         attributionControl=false,\n         zoomControl=false,\n         IconComponent,\n         MapTile\n        }) => {\n\n    return (\n      <MapContainer  \n        crs={L.CRS.Simple} \n        bounds={bounds} \n        style={style}\n        dragging={dragging}\n        doubleClickZoom={doubleClickZoom}\n        scrollWheelZoom={scrollWheelZoom}\n        attributionControl={attributionControl}\n        zoomControl={zoomControl}\n      >\n        <ImageOverlay\n            bounds={bounds}\n            url={MapTile}\n        />\n          {coordinates && coordinates.map((item) => {\n            return (\n              <Marker\n                icon={<IconComponent available={item.status}/>}\n                position={[item.long, item.lat]}\n                eventHandlers={{ click: ()=>onClick(item.title) }}\n             \n              />\n            );\n          })}\n      \n      </MapContainer>\n    )\n\n}\n","import React from 'react';\nimport { MapContainer, TileLayer } from 'react-leaflet';\nimport 'leaflet/dist/leaflet.css';\nimport { MapContent } from './ui/MapContent';\nimport \"react-leaflet-markercluster/dist/styles.min.css\";\nimport L from \"leaflet\";\n\nconst defaultCenter = [49.280806, -122.828007]; // Univerus Vancouver Office \nconst defaultZoom = 13; // Ranges from 0 to 18\nconst defaultStyle = { height: '100%', width: '100%' };\n\nexport const FluentMap = ({\n    onClick,\n    onMouseOver,\n    onMouseOut,\n    data, // {ex. long, lat, title, iconProps (component, color) }\n    IconComponent,\n    bounds,\n    style = defaultStyle,\n    centerCoordinates = defaultCenter,\n    zoom = defaultZoom,\n    dragging = true,\n    doubleClickZoom = true,\n    scrollWheelZoom = true,\n    attributionControl = true,\n    zoomControl = true,\n    highlightMarkersOnClick = true,\n    PopupComponent,\n    children,\n    useDefaultMarker = true,\n    useMarkerClustering = false\n}) => {\n\n    return (\n        <MapContainer\n            bounds={bounds}\n            style={style}\n            center={centerCoordinates}\n            zoom={zoom}\n            dragging={dragging}\n            doubleClickZoom={doubleClickZoom}\n            scrollWheelZoom={scrollWheelZoom}\n            attributionControl={attributionControl}\n            zoomControl={zoomControl}\n            preferCanvas={true}\n            renderer={L.canvas({})}\n        >\n            <TileLayer\n                attribution='&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'\n                url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n            />\n            <MapContent \n                data={data}\n                IconComponent={IconComponent}\n                onClick={onClick}\n                onMouseOver={onMouseOver}\n                onMouseOut={onMouseOut}\n                highlightMarkersOnClick={highlightMarkersOnClick}\n                PopupComponent={PopupComponent}\n                children={children}\n                useDefaultMarker={useDefaultMarker}\n                useMarkerClustering={useMarkerClustering}\n            />\n        </MapContainer>\n    )\n}"],"mappings":";;;;;;;;;AAKA,MAAa,kBACL,EAAE,SACD,aACA,QACA,OACA,WAAS,OACT,kBAAgB,OAChB,kBAAgB,OAChB,qBAAmB,OACnB,cAAY,OACZ,eACA,cACK;AAEV,QACE,oCAAC;EACC,KAAK,EAAE,IAAI;EACH;EACD;EACG;EACO;EACA;EACG;EACP;IAEb,oCAAC;EACW;EACR,KAAK;GACP,EACC,eAAe,YAAY,KAAK,SAAS;AACxC,SACE,oCAACA;GACC,MAAM,oCAAC,iBAAc,WAAW,KAAK,SAAS;GAC9C,UAAU,CAAC,KAAK,MAAM,KAAK,IAAI;GAC/B,eAAe,EAAE,aAAW,QAAQ,KAAK,MAAM,EAAE;IAEjD;GAEJ,CAES;;;;;ACtCrB,MAAM,gBAAgB,CAAC,WAAW,YAAY;AAC9C,MAAM,cAAc;AACpB,MAAM,eAAe;CAAE,QAAQ;CAAQ,OAAO;CAAQ;AAEtD,MAAa,aAAa,EACtB,SACA,aACA,YACA,MACA,eACA,QACA,QAAQ,cACR,oBAAoB,eACpB,OAAO,aACP,WAAW,MACX,kBAAkB,MAClB,kBAAkB,MAClB,qBAAqB,MACrB,cAAc,MACd,0BAA0B,MAC1B,gBACA,UACA,mBAAmB,MACnB,sBAAsB,YACpB;AAEF,QACI,oCAAC;EACW;EACD;EACP,QAAQ;EACF;EACI;EACO;EACA;EACG;EACP;EACb,cAAc;EACd,UAAU,EAAE,OAAO,EAAE,CAAC;IAEtB,oCAAC;EACG,aAAY;EACZ,KAAI;GACN,EACF,oCAAC;EACS;EACS;EACN;EACI;EACD;EACa;EACT;EACN;EACQ;EACG;GACvB,CACS"}

package/dist/FluentMenuListItem-CvEx0IXI.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Button, Divider, makeStyles } from "@material-ui/core";
+
+//#region src/UI/navigation/menus/FluentMenuListItem.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		padding: 0,
+		justifyContent: "left"
+	},
+	wrapper: {
+		minWidth: 200,
+		width: "100%"
+	},
+	item: { height: theme.spacing(1) },
+	label: { textTransform: "none" }
+}));
+const FluentMenuListItem = ({ label, onClick, ...props }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement("div", { className: classes.item }), /* @__PURE__ */ React.createElement(Button, {
+		...props,
+		fullWidth: true,
+		classes: {
+			root: classes.root,
+			label: classes.label
+		},
+		onClick
+	}, label), /* @__PURE__ */ React.createElement("div", { className: classes.item }), /* @__PURE__ */ React.createElement(Divider, null));
+};
+
+//#endregion
+export { FluentMenuListItem as t };
+//# sourceMappingURL=FluentMenuListItem-CvEx0IXI.js.map

package/dist/FluentMenuListItem-CvEx0IXI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentMenuListItem-CvEx0IXI.js","names":[],"sources":["../src/UI/navigation/menus/FluentMenuListItem.jsx"],"sourcesContent":["import React from 'react'\nimport { Button, makeStyles, Divider } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    padding: 0,\n    justifyContent: 'left'\n  },\n  wrapper: {\n    minWidth: 200,\n    width: '100%'\n  },\n  item: {\n    height: theme.spacing(1)\n  },\n  label: {\n    textTransform: 'none'\n  }\n}))\n\nexport const FluentMenuListItem = ({ label, onClick, ...props }) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.wrapper}>\n      <div className={classes.item} />\n      <Button\n        {...props}\n        fullWidth\n        classes={{ root: classes.root, label: classes.label }}\n        onClick={onClick}\n      >\n        {label}\n      </Button>\n      <div className={classes.item} />\n      <Divider />\n    </div>\n  )\n}\n"],"mappings":";;;;AAGA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS;EACT,gBAAgB;EACjB;CACD,SAAS;EACP,UAAU;EACV,OAAO;EACR;CACD,MAAM,EACJ,QAAQ,MAAM,QAAQ,EAAE,EACzB;CACD,OAAO,EACL,eAAe,QAChB;CACF,EAAE;AAEH,MAAa,sBAAsB,EAAE,OAAO,SAAS,GAAG,YAAY;CAClE,MAAM,UAAU,WAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,SAAI,WAAW,QAAQ,OAAQ,EAChC,oCAAC;EACC,GAAI;EACJ;EACA,SAAS;GAAE,MAAM,QAAQ;GAAM,OAAO,QAAQ;GAAO;EAC5C;IAER,MACM,EACT,oCAAC,SAAI,WAAW,QAAQ,OAAQ,EAChC,oCAAC,cAAU,CACP"}

package/dist/FluentRadioGroup-DWOMSBGp.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { Radio, RadioGroup } from "@material-ui/core";
+
+//#region src/UI/inputs/radio/FluentRadio.jsx
+const FluentRadio = (props) => {
+	const { label, value, variant = "outlined", color = "secondary", ...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(Radio, {
+		id: "udpRecord-radio-" + value,
+		updrecordid: "udpRecord-radio-" + value,
+		label,
+		value,
+		variant,
+		color,
+		...otherProps
+	});
+};
+
+//#endregion
+//#region src/UI/inputs/radio/FluentRadioGroup.jsx
+const FluentRadioGroup = (props) => {
+	const { name, value, ...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(RadioGroup, {
+		name,
+		value,
+		...otherProps
+	});
+};
+
+//#endregion
+export { FluentRadio as n, FluentRadioGroup as t };
+//# sourceMappingURL=FluentRadioGroup-DWOMSBGp.js.map

package/dist/FluentRadioGroup-DWOMSBGp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentRadioGroup-DWOMSBGp.js","names":[],"sources":["../src/UI/inputs/radio/FluentRadio.jsx","../src/UI/inputs/radio/FluentRadioGroup.jsx"],"sourcesContent":["import React from 'react';\nimport { Radio } from '@material-ui/core';\n\nexport const FluentRadio = props => {\n  const {\n    label,\n    value,\n    variant = 'outlined',\n    color = 'secondary',\n    ...otherProps\n  } = props;\n\n  return (\n    <Radio\n      id={'udpRecord-radio-' + value}\n      updrecordid={'udpRecord-radio-' + value}\n      label={label}\n      value={value}\n      variant={variant}\n      color={color}\n      {...otherProps}\n    />\n  );\n};\n","import React from 'react';\nimport { RadioGroup } from '@material-ui/core';\n\nexport const FluentRadioGroup = props => {\n  const {\n    name,\n    value,\n    ...otherProps\n  } = props;\n\n  return (\n    <RadioGroup\n      name={name}\n      value={value}\n      {...otherProps}\n    />\n  );\n};\n"],"mappings":";;;;AAGA,MAAa,eAAc,UAAS;CAClC,MAAM,EACJ,OACA,OACA,UAAU,YACV,QAAQ,aACR,GAAG,eACD;AAEJ,QACE,oCAAC;EACC,IAAI,qBAAqB;EACzB,aAAa,qBAAqB;EAC3B;EACA;EACE;EACF;EACP,GAAI;GACJ;;;;;AClBN,MAAa,oBAAmB,UAAS;CACvC,MAAM,EACJ,MACA,OACA,GAAG,eACD;AAEJ,QACE,oCAAC;EACO;EACC;EACP,GAAI;GACJ"}

package/dist/FluentRow-C_YJYbQ5.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { TableRow } from "@material-ui/core";
+
+//#region src/UI/dataDisplay/FluentDataTable/FluentRow/index.tsx
+const FluentRow = (props) => {
+	const { className, children, onClick, ...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(TableRow, {
+		className,
+		onClick: onClick || void 0,
+		...otherProps,
+		style: onClick ? { cursor: "pointer" } : void 0
+	}, children);
+};
+var FluentRow_default = FluentRow;
+
+//#endregion
+export { FluentRow_default as t };
+//# sourceMappingURL=FluentRow-C_YJYbQ5.js.map

package/dist/FluentRow-C_YJYbQ5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentRow-C_YJYbQ5.js","names":[],"sources":["../src/UI/dataDisplay/FluentDataTable/FluentRow/index.tsx"],"sourcesContent":["import { TableRow } from '@material-ui/core';\nimport React, { ReactNode } from 'react';\n\ninterface FluentRowProps {\n  className?: string;\n  children: ReactNode;\n  onClick?: () => void;\n}\n\nconst FluentRow = (props: FluentRowProps) => {\n  const { className, children, onClick, ...otherProps } = props;\n\n  return (\n    <TableRow\n      className={className}\n      onClick={onClick || undefined}\n      {...otherProps}\n      style={onClick ? { cursor:  'pointer'} : undefined}\n    >\n      {children}\n    </TableRow>\n  );\n};\n\nexport default FluentRow;\n"],"mappings":";;;;AASA,MAAM,aAAa,UAA0B;CAC3C,MAAM,EAAE,WAAW,UAAU,SAAS,GAAG,eAAe;AAExD,QACE,oCAAC;EACY;EACX,SAAS,WAAW;EACpB,GAAI;EACJ,OAAO,UAAU,EAAE,QAAS,WAAU,GAAG;IAExC,SACQ;;AAIf,wBAAe"}

package/dist/FluentSearchField-DebM7Nzf.js

@@ -0,0 +1,135 @@
+import { t as FluentButton } from "./FluentButton-BexKrnAp.js";
+import React from "react";
+import { InputAdornment, TextField, makeStyles } from "@material-ui/core";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+import { SearchIcon } from "@fluentui/react-icons";
+
+//#region src/UI/inputs/textField/FluentSearchField.jsx
+const useStyles = makeStyles((theme) => ({
+	input: {
+		borderRadius: 2,
+		height: (props) => !props.multiline && 32,
+		padding: (props) => !props.multiline && 0,
+		marginTop: 3,
+		"& .MuiInputAdornment-positionStart": { marginLeft: theme.spacing(1) },
+		"& .MuiInputAdornment-positionEnd": { marginRight: 0 },
+		"& .MuiInputAdornment-filled.MuiInputAdornment-positionStart:not(.MuiInputAdornment-hiddenLabel)": { marginTop: 2 },
+		"& .MuiFilledInput-input": { paddingTop: theme.spacing(2) }
+	},
+	formTextInput: { fontSize: 14 },
+	labelRoot: {
+		fontSize: 14,
+		marginTop: -8,
+		position: "absolute !important",
+		height: 1,
+		width: 1,
+		overflow: "hidden",
+		clip: "rect(1px 1px 1px 1px)"
+	},
+	FormControl: {
+		display: "none",
+		marginTop: 0,
+		"& .MuiAutocomplete-inputRoot[class*=\"MuiOutlinedInput-root\"]": { padding: 0 }
+	},
+	root: {
+		marginTop: 5,
+		"& .MuiFormLabel-root": {
+			marginTop: -27,
+			marginLeft: -15
+		},
+		"& .MuiInputAdornment-root": { paddingLeft: theme.spacing(1) }
+	},
+	formControl: {
+		"& .MuiFormControl-marginNormal": {
+			marginTop: 4,
+			marginBottom: 4
+		},
+		marginTop: 4,
+		marginBottom: 4
+	},
+	elementInvisible: {
+		position: "absolute !important",
+		height: 1,
+		width: 1,
+		overflow: "hidden",
+		clip: "rect(1px 1px 1px 1px)"
+	},
+	MuiAutocomplete: { inputRoot: { "&&[class*=\"MuiOutlinedInput-root\"] $input": { padding: 1 } } }
+}));
+const FluentSearchField = (props) => {
+	const classes = useStyles(props);
+	const { autoComplete, searchData, autoId, toggleOptions, handleKeyDown, advancedSearch, udprecordid, id, ...otherProps } = props;
+	return /* @__PURE__ */ React.createElement("div", null, autoComplete && /* @__PURE__ */ React.createElement(Autocomplete, {
+		freeSolo: true,
+		id: autoId,
+		disableClearable: true,
+		options: searchData && searchData.map((option) => option.title),
+		classes: {
+			root: classes.formControl,
+			input: classes.MuiAutocomplete
+		},
+		renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
+			...params,
+			...otherProps,
+			label: "Search input",
+			margin: "normal",
+			variant: "outlined",
+			InputProps: {
+				...params.InputProps,
+				type: "search",
+				classes: {
+					root: classes.input,
+					input: classes.formTextInput,
+					...props.InputProps?.classes
+				}
+			},
+			InputLabelProps: {
+				shrink: false,
+				classes: {
+					root: classes.labelRoot,
+					focused: classes.labelFocused
+				}
+			}
+		}),
+		renderOption: (props$1, option) => /* @__PURE__ */ React.createElement("li", {
+			udprecordid: `'udpRecord-FluentSearchField'+${option.title}`,
+			...props$1
+		}, option.title)
+	}), !autoComplete && /* @__PURE__ */ React.createElement(TextField, {
+		label: "Search input",
+		margin: "normal",
+		variant: "outlined",
+		onKeyDown: handleKeyDown,
+		fullWidth: true,
+		...otherProps,
+		classes: { root: classes.formControl },
+		InputProps: {
+			type: "search",
+			startAdornment: /* @__PURE__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, null)),
+			endAdornment: advancedSearch && /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(FluentButton, {
+				variant: "contained",
+				color: "primary",
+				onMouseEnter: () => toggleOptions(true)
+			}, "Advanced Search")),
+			classes: {
+				root: classes.input,
+				input: classes.formTextInput
+			}
+		},
+		InputLabelProps: {
+			shrink: false,
+			classes: {
+				root: classes.labelRoot,
+				focused: classes.labelFocused
+			}
+		},
+		inputProps: {
+			id,
+			udprecordid
+		}
+	}));
+};
+
+//#endregion
+export { FluentSearchField as t };
+//# sourceMappingURL=FluentSearchField-DebM7Nzf.js.map

package/dist/FluentSearchField-DebM7Nzf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentSearchField-DebM7Nzf.js","names":["props"],"sources":["../src/UI/inputs/textField/FluentSearchField.jsx"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport React from 'react'\nimport { makeStyles, TextField, InputAdornment } from '@material-ui/core'\nimport Autocomplete from '@material-ui/lab/Autocomplete'\nimport { SearchIcon } from '@fluentui/react-icons'\nimport { FluentButton } from '../buttons/FluentButton'\n\nconst useStyles = makeStyles((theme) => ({\n  input: {\n    borderRadius: 2,\n    height: (props) => !props.multiline && 32,\n    padding: (props) => !props.multiline && 0,\n    marginTop: 3,\n    '& .MuiInputAdornment-positionStart': {\n      marginLeft: theme.spacing(1)\n    },\n    '& .MuiInputAdornment-positionEnd': {\n      marginRight: 0\n    },\n    '& .MuiInputAdornment-filled.MuiInputAdornment-positionStart:not(.MuiInputAdornment-hiddenLabel)' : {\n      marginTop: 2\n    }, \n    '& .MuiFilledInput-input' : {\n      paddingTop: theme.spacing(2)\n    }\n  },\n  formTextInput: {\n    fontSize: 14\n  },\n  labelRoot: {\n    fontSize: 14,\n    marginTop: -8,\n    position: 'absolute !important',\n    height: 1,\n    width: 1,\n    overflow: 'hidden',\n    clip: 'rect(1px 1px 1px 1px)' /* IE6, IE7 */\n  },\n  FormControl: {\n    display: 'none',\n    marginTop: 0,\n    '& .MuiAutocomplete-inputRoot[class*=\"MuiOutlinedInput-root\"]': {\n      padding: 0\n    }\n  },\n\n  root: {\n    marginTop: 5,\n    '& .MuiFormLabel-root': {\n      marginTop: -27,\n      marginLeft: -15\n    },\n    '& .MuiInputAdornment-root': {\n      paddingLeft: theme.spacing(1)\n    }\n  },\n  formControl: {\n    '& .MuiFormControl-marginNormal': {\n      marginTop: 4,\n      marginBottom: 4\n    },\n    marginTop: 4,\n    marginBottom: 4\n  },\n\n  elementInvisible: {\n    position: 'absolute !important',\n    height: 1,\n    width: 1,\n    overflow: 'hidden',\n    clip: 'rect(1px 1px 1px 1px)' /* IE6, IE7 */\n  },\n\n  MuiAutocomplete: {\n    inputRoot: {\n      '&&[class*=\"MuiOutlinedInput-root\"] $input': {\n        padding: 1\n      }\n    }\n  }\n}))\n\nexport const FluentSearchField = (props) => {\n  const classes = useStyles(props)\n  const {\n    autoComplete,\n    searchData,\n    autoId,\n    toggleOptions,\n    handleKeyDown,\n    advancedSearch,\n    udprecordid,\n    id,\n    ...otherProps\n  } = props\n\n  return (\n    <div>\n      {autoComplete && (\n        <Autocomplete\n          freeSolo\n          id={autoId}\n          disableClearable\n          options={searchData && searchData.map((option) => option.title)}\n          classes={{\n            root: classes.formControl,\n            input: classes.MuiAutocomplete\n          }}\n          renderInput={(params) => (\n            <TextField\n              {...params}\n              {...otherProps}\n              label='Search input'\n              margin='normal'\n              variant='outlined'\n              InputProps={{\n                ...params.InputProps,\n                type: 'search',\n                classes: {\n                  root: classes.input,\n                  input: classes.formTextInput,\n                  ...props.InputProps?.classes\n                }\n              }}\n              InputLabelProps={{\n                shrink: false,\n                classes: {\n                  root: classes.labelRoot,\n                  focused: classes.labelFocused\n                }\n              }}\n            />\n          )}\n          renderOption={(props, option) => \n            (<li \n              udprecordid={`'udpRecord-FluentSearchField'+${option.title}`} \n              {...props}\n            >\n              {option.title}\n            </li>)\n          }\n        />\n      )}\n      {!autoComplete && (\n        <TextField\n          label='Search input'\n          margin='normal'\n          variant='outlined'\n          onKeyDown={handleKeyDown}\n          fullWidth\n          {...otherProps}\n          classes={{\n            root: classes.formControl\n          }}\n          InputProps={{\n            type: 'search',\n            startAdornment: (\n              <InputAdornment position='start'>\n                <SearchIcon />\n              </InputAdornment>\n            ),\n            endAdornment: advancedSearch && (\n              <InputAdornment position='end'>\n                <FluentButton\n                  variant='contained'\n                  color='primary'\n                  onMouseEnter={() => toggleOptions(true)}\n                >\n                  Advanced Search\n                </FluentButton>\n              </InputAdornment>\n            ),\n            classes: {\n              root: classes.input,\n              input: classes.formTextInput\n            }\n          }}\n          InputLabelProps={{\n            shrink: false,\n            classes: {\n              root: classes.labelRoot,\n              focused: classes.labelFocused\n            }\n          }}\n          inputProps={{\n            id:id, \n            udprecordid:udprecordid,\n          }}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,YAAY,YAAY,WAAW;CACvC,OAAO;EACL,cAAc;EACd,SAAS,UAAU,CAAC,MAAM,aAAa;EACvC,UAAU,UAAU,CAAC,MAAM,aAAa;EACxC,WAAW;EACX,sCAAsC,EACpC,YAAY,MAAM,QAAQ,EAAE,EAC7B;EACD,oCAAoC,EAClC,aAAa,GACd;EACD,mGAAoG,EAClG,WAAW,GACZ;EACD,2BAA4B,EAC1B,YAAY,MAAM,QAAQ,EAAE,EAC7B;EACF;CACD,eAAe,EACb,UAAU,IACX;CACD,WAAW;EACT,UAAU;EACV,WAAW;EACX,UAAU;EACV,QAAQ;EACR,OAAO;EACP,UAAU;EACV,MAAM;EACP;CACD,aAAa;EACX,SAAS;EACT,WAAW;EACX,kEAAgE,EAC9D,SAAS,GACV;EACF;CAED,MAAM;EACJ,WAAW;EACX,wBAAwB;GACtB,WAAW;GACX,YAAY;GACb;EACD,6BAA6B,EAC3B,aAAa,MAAM,QAAQ,EAAE,EAC9B;EACF;CACD,aAAa;EACX,kCAAkC;GAChC,WAAW;GACX,cAAc;GACf;EACD,WAAW;EACX,cAAc;EACf;CAED,kBAAkB;EAChB,UAAU;EACV,QAAQ;EACR,OAAO;EACP,UAAU;EACV,MAAM;EACP;CAED,iBAAiB,EACf,WAAW,EACT,+CAA6C,EAC3C,SAAS,GACV,EACF,EACF;CACF,EAAE;AAEH,MAAa,qBAAqB,UAAU;CAC1C,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EACJ,cACA,YACA,QACA,eACA,eACA,gBACA,aACA,IACA,GAAG,eACD;AAEJ,QACE,oCAAC,aACE,gBACC,oCAAC;EACC;EACA,IAAI;EACJ;EACA,SAAS,cAAc,WAAW,KAAK,WAAW,OAAO,MAAM;EAC/D,SAAS;GACP,MAAM,QAAQ;GACd,OAAO,QAAQ;GAChB;EACD,cAAc,WACZ,oCAAC;GACC,GAAI;GACJ,GAAI;GACJ,OAAM;GACN,QAAO;GACP,SAAQ;GACR,YAAY;IACV,GAAG,OAAO;IACV,MAAM;IACN,SAAS;KACP,MAAM,QAAQ;KACd,OAAO,QAAQ;KACf,GAAG,MAAM,YAAY;KACtB;IACF;GACD,iBAAiB;IACf,QAAQ;IACR,SAAS;KACP,MAAM,QAAQ;KACd,SAAS,QAAQ;KAClB;IACF;IACD;EAEJ,eAAe,SAAO,WACnB,oCAAC;GACA,aAAa,iCAAiC,OAAO;GACrD,GAAIA;KAEH,OAAO,MACL;GAEP,EAEH,CAAC,gBACA,oCAAC;EACC,OAAM;EACN,QAAO;EACP,SAAQ;EACR,WAAW;EACX;EACA,GAAI;EACJ,SAAS,EACP,MAAM,QAAQ,aACf;EACD,YAAY;GACV,MAAM;GACN,gBACE,oCAAC,kBAAe,UAAS,WACvB,oCAAC,iBAAa,CACC;GAEnB,cAAc,kBACZ,oCAAC,kBAAe,UAAS,SACvB,oCAAC;IACC,SAAQ;IACR,OAAM;IACN,oBAAoB,cAAc,KAAK;MACxC,kBAEc,CACA;GAEnB,SAAS;IACP,MAAM,QAAQ;IACd,OAAO,QAAQ;IAChB;GACF;EACD,iBAAiB;GACf,QAAQ;GACR,SAAS;IACP,MAAM,QAAQ;IACd,SAAS,QAAQ;IAClB;GACF;EACD,YAAY;GACP;GACS;GACb;GACD,CAEA"}