udp-react-enterprise-component-library 25.18.1-beta.2 → 25.18.1-beta.21

package/dist/FluentTabUtility-BjySMPdy.js

@@ -0,0 +1,55 @@
+import { n as FluentSimpleTab, t as FluentSimpleTabs } from "./FluentSimpleTabs-DczLNWuA.js";
+import { t as FluentTabPanel } from "./FluentTabPanel-B1ag1UNP.js";
+import React, { useState } from "react";
+import { makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+
+//#region src/UI/navigation/tabs/defaultTabs/FluentTabUtility.jsx
+function a11yProps(index) {
+	return {
+		id: `simple-tab-${index}`,
+		"aria-controls": `simple-tabpanel-${index}`
+	};
+}
+const useStyles = makeStyles((theme) => ({ root: {
+	flexGrow: 1,
+	backgroundColor: theme.palette.background.paper
+} }));
+const FluentTabUtility = (props, ...otherProps) => {
+	const classes = useStyles();
+	const { TabList, block, className, variant, color, FluentSimpleTabsProps } = props;
+	const [value, setValue] = useState(0);
+	const handleChange = (event, newValue) => {
+		setValue(newValue);
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, className) }, /* @__PURE__ */ React.createElement(FluentSimpleTabs, {
+		value,
+		block,
+		onChange: handleChange,
+		...FluentSimpleTabsProps,
+		...otherProps
+	}, TabList.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(FluentSimpleTab, {
+			...otherProps,
+			key: index,
+			label: item.label,
+			icon: item.icon,
+			block,
+			badgeContent: item.badgeContent,
+			variant,
+			color,
+			...a11yProps(index)
+		});
+	})), TabList.map((item, index) => {
+		return /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			block,
+			value,
+			index,
+			key: index
+		}, item.child);
+	}));
+};
+
+//#endregion
+export { FluentTabUtility as t };
+//# sourceMappingURL=FluentTabUtility-BjySMPdy.js.map

package/dist/FluentTabUtility-BjySMPdy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentTabUtility-BjySMPdy.js","names":[],"sources":["../src/UI/navigation/tabs/defaultTabs/FluentTabUtility.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { FluentSimpleTabs } from '../defaultTabs/FluentSimpleTabs';\nimport { FluentSimpleTab } from '../defaultTabs/FluentSimpleTab';\nimport { FluentTabPanel } from '../defaultTabs/FluentTabPanel';\nimport clsx from 'clsx';\n\nfunction a11yProps(index) {\n  return {\n    id: `simple-tab-${index}`,\n    'aria-controls': `simple-tabpanel-${index}`\n  };\n}\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    flexGrow: 1,\n    backgroundColor: theme.palette.background.paper\n  }\n}));\n\nexport const FluentTabUtility = (props, ...otherProps) => {\n  const classes = useStyles();\n  const { TabList, block, className, variant, color, FluentSimpleTabsProps } =\n    props;\n\n  const [value, setValue] = useState(0);\n\n  const handleChange = (event, newValue) => {\n    setValue(newValue);\n  };\n\n  return (\n    <div className={clsx(classes.root, className)}>\n      <FluentSimpleTabs\n        value={value}\n        block={block}\n        onChange={handleChange}\n        {...FluentSimpleTabsProps}\n        {...otherProps}\n      >\n        {TabList.map((item, index) => {\n          return (\n            <FluentSimpleTab\n              {...otherProps}\n              key={index}\n              label={item.label}\n              icon={item.icon}\n              block={block}\n              badgeContent={item.badgeContent}\n              variant={variant}\n              color={color}\n              {...a11yProps(index)}\n            />\n          );\n        })}\n      </FluentSimpleTabs>\n\n      {TabList.map((item, index) => {\n        return (\n          <FluentTabPanel block={block} value={value} index={index} key={index}>\n            {item.child}\n          </FluentTabPanel>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAOA,SAAS,UAAU,OAAO;AACxB,QAAO;EACL,IAAI,cAAc;EAClB,iBAAiB,mBAAmB;EACrC;;AAGH,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM;CACJ,UAAU;CACV,iBAAiB,MAAM,QAAQ,WAAW;CAC3C,EACF,EAAE;AAEH,MAAa,oBAAoB,OAAO,GAAG,eAAe;CACxD,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,SAAS,OAAO,WAAW,SAAS,OAAO,0BACjD;CAEF,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CAErC,MAAM,gBAAgB,OAAO,aAAa;AACxC,WAAS,SAAS;;AAGpB,QACE,oCAAC,SAAI,WAAW,KAAK,QAAQ,MAAM,UAAU,IAC3C,oCAAC;EACQ;EACA;EACP,UAAU;EACV,GAAI;EACJ,GAAI;IAEH,QAAQ,KAAK,MAAM,UAAU;AAC5B,SACE,oCAAC;GACC,GAAI;GACJ,KAAK;GACL,OAAO,KAAK;GACZ,MAAM,KAAK;GACJ;GACP,cAAc,KAAK;GACV;GACF;GACP,GAAI,UAAU,MAAM;IACpB;GAEJ,CACe,EAElB,QAAQ,KAAK,MAAM,UAAU;AAC5B,SACE,oCAAC;GAAsB;GAAc;GAAc;GAAO,KAAK;KAC5D,KAAK,MACS;GAEnB,CACE"}

package/dist/FluentTextField-CXvZawOG.js

@@ -0,0 +1,68 @@
+import React, { forwardRef } from "react";
+import { TextField, makeStyles } from "@material-ui/core";
+
+//#region src/UI/inputs/textField/FluentTextField.jsx
+const useStyles = makeStyles((theme) => ({
+	input: {
+		borderRadius: 2,
+		height: (props) => !props.multiline && !Array.isArray(props.value) && 32,
+		padding: (props) => !props.multiline && 0,
+		marginTop: 3
+	},
+	formTextInput: { fontSize: 14 },
+	labelRoot: { fontSize: 14 },
+	FormControl: {
+		display: "none",
+		marginTop: 0
+	},
+	root: {
+		marginTop: 25,
+		"& .MuiFormLabel-root": {
+			marginTop: -27,
+			marginLeft: -15
+		},
+		"& .MuiInputAdornment-root": { paddingLeft: theme.spacing(1) }
+	},
+	noLabel: { marginTop: theme.spacing(1) }
+}));
+const FluentTextFieldComponent = (props, ref) => {
+	const classes = useStyles(props);
+	const { id, label, startAdornment, endAdornment, udprecordid, inputProps, ...InputProps } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: label ? classes.root : classes.noLabel }, /* @__PURE__ */ React.createElement(TextField, {
+		...InputProps,
+		id,
+		variant: "outlined",
+		size: "small",
+		inputRef: ref,
+		margin: "dense",
+		label,
+		classes: { label: classes.label },
+		inputProps: {
+			id,
+			udprecordid,
+			...inputProps
+		},
+		InputProps: {
+			classes: {
+				root: classes.input,
+				input: classes.formTextInput,
+				...props.InputProps?.classes
+			},
+			...props.InputProps,
+			...startAdornment,
+			...endAdornment
+		},
+		InputLabelProps: {
+			shrink: false,
+			classes: {
+				root: classes.labelRoot,
+				focused: classes.labelFocused
+			}
+		}
+	}));
+};
+const FluentTextField = forwardRef(FluentTextFieldComponent);
+
+//#endregion
+export { FluentTextFieldComponent as n, FluentTextField as t };
+//# sourceMappingURL=FluentTextField-CXvZawOG.js.map

package/dist/FluentTextField-CXvZawOG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentTextField-CXvZawOG.js","names":[],"sources":["../src/UI/inputs/textField/FluentTextField.jsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { makeStyles, TextField } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  input: {\n    borderRadius: 2,\n    height: (props) => !props.multiline && !Array.isArray(props.value) && 32, // multiline or multiselect\n    padding: (props) => !props.multiline && 0,\n    marginTop: 3\n  },\n  formTextInput: {\n    fontSize: 14\n  },\n  labelRoot: {\n    fontSize: 14\n  },\n  FormControl: {\n    display: 'none',\n    marginTop: 0\n  },\n  root: {\n    marginTop: 25,\n    '& .MuiFormLabel-root': {\n      marginTop: -27,\n      marginLeft: -15\n    },\n    '& .MuiInputAdornment-root': {\n      paddingLeft: theme.spacing(1)\n    }\n  },\n  noLabel: {\n    marginTop: theme.spacing(1)\n  }\n}));\n\nexport const FluentTextFieldComponent = (props, ref) => {\n  const classes = useStyles(props);\n  const {\n    id,\n    label,\n    startAdornment,\n    endAdornment,\n    udprecordid,\n    inputProps,\n    ...InputProps\n  } = props;\n  return (\n    <div className={label ? classes.root : classes.noLabel}>\n      <TextField\n        {...InputProps}\n        id={id}\n        variant='outlined'\n        size='small'\n        inputRef={ref}\n        margin='dense'\n        label={label}\n        classes={{ label: classes.label }}\n        inputProps={{ id: id, udprecordid: udprecordid, ...inputProps }}\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        }}\n        InputLabelProps={{\n          shrink: false,\n          classes: {\n            root: classes.labelRoot,\n            focused: classes.labelFocused\n          }\n        }}\n      />\n    </div>\n  );\n};\n\nexport const FluentTextField = forwardRef(FluentTextFieldComponent);\n"],"mappings":";;;;AAGA,MAAM,YAAY,YAAY,WAAW;CACvC,OAAO;EACL,cAAc;EACd,SAAS,UAAU,CAAC,MAAM,aAAa,CAAC,MAAM,QAAQ,MAAM,MAAM,IAAI;EACtE,UAAU,UAAU,CAAC,MAAM,aAAa;EACxC,WAAW;EACZ;CACD,eAAe,EACb,UAAU,IACX;CACD,WAAW,EACT,UAAU,IACX;CACD,aAAa;EACX,SAAS;EACT,WAAW;EACZ;CACD,MAAM;EACJ,WAAW;EACX,wBAAwB;GACtB,WAAW;GACX,YAAY;GACb;EACD,6BAA6B,EAC3B,aAAa,MAAM,QAAQ,EAAE,EAC9B;EACF;CACD,SAAS,EACP,WAAW,MAAM,QAAQ,EAAE,EAC5B;CACF,EAAE;AAEH,MAAa,4BAA4B,OAAO,QAAQ;CACtD,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EACJ,IACA,OACA,gBACA,cACA,aACA,YACA,GAAG,eACD;AACJ,QACE,oCAAC,SAAI,WAAW,QAAQ,QAAQ,OAAO,QAAQ,WAC7C,oCAAC;EACC,GAAI;EACA;EACJ,SAAQ;EACR,MAAK;EACL,UAAU;EACV,QAAO;EACA;EACP,SAAS,EAAE,OAAO,QAAQ,OAAO;EACjC,YAAY;GAAM;GAAiB;GAAa,GAAG;GAAY;EAC/D,YAAY;GACV,SAAS;IACP,MAAM,QAAQ;IACd,OAAO,QAAQ;IACf,GAAG,MAAM,YAAY;IACtB;GACD,GAAG,MAAM;GACT,GAAG;GACH,GAAG;GACJ;EACD,iBAAiB;GACf,QAAQ;GACR,SAAS;IACP,MAAM,QAAQ;IACd,SAAS,QAAQ;IAClB;GACF;GACD,CACE;;AAIV,MAAa,kBAAkB,WAAW,yBAAyB"}

package/dist/FluentTextFieldAutoComplete-5Hp3qpk6.js

@@ -0,0 +1,100 @@
+import React, { useCallback, useState } from "react";
+import { Popper, TextField, makeStyles } from "@material-ui/core";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+import clsx from "clsx";
+
+//#region src/UI/inputs/textField/FluentTextFieldAutoComplete.jsx
+const useStyles = makeStyles((theme) => ({
+	formTextInput: { fontSize: 14 },
+	labelRoot: { fontSize: 14 }
+}));
+const AutoCompletePopper = (props) => {
+	return /* @__PURE__ */ React.createElement(Popper, {
+		...props,
+		placement: "bottom-start"
+	});
+};
+const FluentTextFieldAutoComplete = (props) => {
+	const { label, placeholder, options, textFieldProps, disabled, onChange: onChangeProp, value, optionKey, additionalOnChangeAction, classes: classProps, variant = "outlined", inputProps, inputPropClasses, customPopper, disableClearable = false, defaultValue, additionalOptionKey, isMultiple = false, limitTags, renderTags, optionLabelDisplayFunction = (option) => option, groupBy = null, size = "medium", id, udprecordid, freeSolo = false, formatUserInputValue, ...other } = props;
+	const classes = useStyles();
+	const { autocompleteRoot } = classProps || {};
+	const [inputValue, setInputValue] = useState("");
+	const onChange = useCallback((e, value$1) => {
+		if (additionalOnChangeAction) additionalOnChangeAction(value$1);
+		return onChangeProp?.(value$1);
+	}, [onChangeProp, additionalOnChangeAction]);
+	const handleInputChange = useCallback((e, newInputValue) => {
+		setInputValue(newInputValue ?? "");
+	}, []);
+	const handleClose = useCallback((event, reason) => {
+		if (!freeSolo) return;
+		if (isMultiple) return;
+		if (value && typeof value === "object") return;
+		const raw = (inputValue || "").trim();
+		if (!raw) return;
+		if (reason === "blur" || reason === "enter" || reason === "create-option") {
+			const updatedValue = formatUserInputValue ? formatUserInputValue(raw) : raw;
+			if (additionalOnChangeAction) additionalOnChangeAction(updatedValue);
+			onChangeProp?.(updatedValue);
+		}
+	}, [
+		freeSolo,
+		isMultiple,
+		value,
+		inputValue,
+		formatUserInputValue,
+		additionalOnChangeAction,
+		onChangeProp
+	]);
+	return /* @__PURE__ */ React.createElement(Autocomplete, {
+		id: "autocomplete",
+		multiple: isMultiple,
+		limitTags,
+		disabled,
+		options: options || [],
+		getOptionLabel: (option) => option && (optionKey ? `${optionLabelDisplayFunction(option[optionKey])}${additionalOptionKey ? ` - (${option[additionalOptionKey]})` : ""}` : optionLabelDisplayFunction(option) || ""),
+		getOptionSelected: (option, val) => optionKey ? option[optionKey] === val[optionKey] : option === val,
+		groupBy,
+		onChange,
+		inputValue,
+		onInputChange: handleInputChange,
+		onClose: handleClose,
+		value: value || (isMultiple ? [] : null),
+		className: autocompleteRoot,
+		classes: { root: classProps?.formControl },
+		PopperComponent: customPopper || AutoCompletePopper,
+		disableClearable,
+		defaultValue,
+		size,
+		renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, {
+			...textFieldProps,
+			...params,
+			...other,
+			inputProps: {
+				...params.inputProps,
+				id,
+				udprecordid
+			},
+			label,
+			margin: "dense",
+			variant,
+			placeholder,
+			size: "small",
+			InputProps: {
+				...params.InputProps,
+				...inputProps,
+				classes: {
+					root: classProps?.inputPropRoot,
+					input: clsx(classes.formTextInput, classProps?.inputPropInput)
+				}
+			},
+			InputLabelProps: { classes: { root: clsx(classes.labelRoot, classProps?.formLabelRoot) } }
+		}),
+		renderTags,
+		freeSolo
+	});
+};
+
+//#endregion
+export { FluentTextFieldAutoComplete as t };
+//# sourceMappingURL=FluentTextFieldAutoComplete-5Hp3qpk6.js.map

package/dist/FluentTextFieldAutoComplete-5Hp3qpk6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentTextFieldAutoComplete-5Hp3qpk6.js","names":["value"],"sources":["../src/UI/inputs/textField/FluentTextFieldAutoComplete.jsx"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport React, { useCallback, useState } from 'react';\nimport { TextField, makeStyles, Popper } from '@material-ui/core';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles((theme) => ({\n  formTextInput: {\n    fontSize: 14\n  },\n  labelRoot: {\n    fontSize: 14\n  }\n}));\n\nconst AutoCompletePopper = (props) => {\n  return <Popper {...props} placement='bottom-start' />;\n};\n\nexport const FluentTextFieldAutoComplete = (props) => {\n  const {\n    label,\n    placeholder,\n    options,\n    textFieldProps,\n    disabled,\n    onChange: onChangeProp,\n    value,\n    optionKey,\n    additionalOnChangeAction,\n    classes: classProps,\n    variant = 'outlined',\n    inputProps,\n    inputPropClasses,\n    customPopper,\n    disableClearable = false,\n    defaultValue,\n    additionalOptionKey,\n    isMultiple = false,\n    limitTags,\n    renderTags,\n    optionLabelDisplayFunction = (option) => option,\n    groupBy = null,\n    size = 'medium',\n    id,\n    udprecordid,\n    freeSolo = false,\n    formatUserInputValue,\n    ...other\n  } = props;\n\n  const classes = useStyles();\n  const { autocompleteRoot } = classProps || {};\n  const [inputValue, setInputValue] = useState('');\n\n  const onChange = useCallback(\n    (e, value) => {\n      if (additionalOnChangeAction) {\n        additionalOnChangeAction(value);\n      }\n      return onChangeProp?.(value);\n    },\n    [onChangeProp, additionalOnChangeAction]\n  );\n\n  const handleInputChange = useCallback((e, newInputValue) => {\n    setInputValue(newInputValue ?? '');\n  }, []);\n\n  const handleClose = useCallback(\n    (event, reason) => {\n      if (!freeSolo) return;\n      if (isMultiple) return;\n\n      if (value && typeof value === 'object') return;\n\n      const raw = (inputValue || '').trim();\n      if (!raw) return;\n\n      if (\n        reason === 'blur' ||\n        reason === 'enter' ||\n        reason === 'create-option'\n      ) {\n        const updatedValue = formatUserInputValue\n          ? formatUserInputValue(raw)\n          : raw;\n        if (additionalOnChangeAction) additionalOnChangeAction(updatedValue);\n        onChangeProp?.(updatedValue);\n      }\n    },\n    [\n      freeSolo,\n      isMultiple,\n      value,\n      inputValue,\n      formatUserInputValue,\n      additionalOnChangeAction,\n      onChangeProp\n    ]\n  );\n\n  return (\n    <Autocomplete\n      id='autocomplete'\n      multiple={isMultiple}\n      limitTags={limitTags}\n      disabled={disabled}\n      options={options || []}\n      getOptionLabel={(option) =>\n        option &&\n        (optionKey\n          ? `${optionLabelDisplayFunction(option[optionKey])}${\n              additionalOptionKey ? ` - (${option[additionalOptionKey]})` : ''\n            }`\n          : optionLabelDisplayFunction(option) || '')\n      }\n      getOptionSelected={(option, val) =>\n        optionKey ? option[optionKey] === val[optionKey] : option === val\n      }\n      groupBy={groupBy}\n      onChange={onChange}\n      inputValue={inputValue}\n      onInputChange={handleInputChange}\n      onClose={handleClose}\n      value={value || (isMultiple ? [] : null)}\n      className={autocompleteRoot}\n      classes={{\n        root: classProps?.formControl\n      }}\n      PopperComponent={customPopper || AutoCompletePopper}\n      disableClearable={disableClearable}\n      defaultValue={defaultValue}\n      size={size}\n      renderInput={(params) => (\n        <TextField\n          {...textFieldProps}\n          {...params}\n          {...other}\n          inputProps={{\n            ...params.inputProps,\n            id: id,\n            udprecordid: udprecordid\n          }}\n          label={label}\n          margin='dense'\n          variant={variant}\n          placeholder={placeholder}\n          size='small'\n          InputProps={{\n            ...params.InputProps,\n            ...inputProps,\n            classes: {\n              root: classProps?.inputPropRoot,\n              input: clsx(classes.formTextInput, classProps?.inputPropInput)\n            }\n          }}\n          InputLabelProps={{\n            classes: {\n              root: clsx(classes.labelRoot, classProps?.formLabelRoot)\n            }\n          }}\n        />\n      )}\n      renderTags={renderTags}\n      freeSolo={freeSolo}\n    />\n  );\n};\n"],"mappings":";;;;;;AAMA,MAAM,YAAY,YAAY,WAAW;CACvC,eAAe,EACb,UAAU,IACX;CACD,WAAW,EACT,UAAU,IACX;CACF,EAAE;AAEH,MAAM,sBAAsB,UAAU;AACpC,QAAO,oCAAC;EAAO,GAAI;EAAO,WAAU;GAAiB;;AAGvD,MAAa,+BAA+B,UAAU;CACpD,MAAM,EACJ,OACA,aACA,SACA,gBACA,UACA,UAAU,cACV,OACA,WACA,0BACA,SAAS,YACT,UAAU,YACV,YACA,kBACA,cACA,mBAAmB,OACnB,cACA,qBACA,aAAa,OACb,WACA,YACA,8BAA8B,WAAW,QACzC,UAAU,MACV,OAAO,UACP,IACA,aACA,WAAW,OACX,sBACA,GAAG,UACD;CAEJ,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,qBAAqB,cAAc,EAAE;CAC7C,MAAM,CAAC,YAAY,iBAAiB,SAAS,GAAG;CAEhD,MAAM,WAAW,aACd,GAAG,YAAU;AACZ,MAAI,yBACF,0BAAyBA,QAAM;AAEjC,SAAO,eAAeA,QAAM;IAE9B,CAAC,cAAc,yBAAyB,CACzC;CAED,MAAM,oBAAoB,aAAa,GAAG,kBAAkB;AAC1D,gBAAc,iBAAiB,GAAG;IACjC,EAAE,CAAC;CAEN,MAAM,cAAc,aACjB,OAAO,WAAW;AACjB,MAAI,CAAC,SAAU;AACf,MAAI,WAAY;AAEhB,MAAI,SAAS,OAAO,UAAU,SAAU;EAExC,MAAM,OAAO,cAAc,IAAI,MAAM;AACrC,MAAI,CAAC,IAAK;AAEV,MACE,WAAW,UACX,WAAW,WACX,WAAW,iBACX;GACA,MAAM,eAAe,uBACjB,qBAAqB,IAAI,GACzB;AACJ,OAAI,yBAA0B,0BAAyB,aAAa;AACpE,kBAAe,aAAa;;IAGhC;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAED,QACE,oCAAC;EACC,IAAG;EACH,UAAU;EACC;EACD;EACV,SAAS,WAAW,EAAE;EACtB,iBAAiB,WACf,WACC,YACG,GAAG,2BAA2B,OAAO,WAAW,GAC9C,sBAAsB,OAAO,OAAO,qBAAqB,KAAK,OAEhE,2BAA2B,OAAO,IAAI;EAE5C,oBAAoB,QAAQ,QAC1B,YAAY,OAAO,eAAe,IAAI,aAAa,WAAW;EAEvD;EACC;EACE;EACZ,eAAe;EACf,SAAS;EACT,OAAO,UAAU,aAAa,EAAE,GAAG;EACnC,WAAW;EACX,SAAS,EACP,MAAM,YAAY,aACnB;EACD,iBAAiB,gBAAgB;EACf;EACJ;EACR;EACN,cAAc,WACZ,oCAAC;GACC,GAAI;GACJ,GAAI;GACJ,GAAI;GACJ,YAAY;IACV,GAAG,OAAO;IACN;IACS;IACd;GACM;GACP,QAAO;GACE;GACI;GACb,MAAK;GACL,YAAY;IACV,GAAG,OAAO;IACV,GAAG;IACH,SAAS;KACP,MAAM,YAAY;KAClB,OAAO,KAAK,QAAQ,eAAe,YAAY,eAAe;KAC/D;IACF;GACD,iBAAiB,EACf,SAAS,EACP,MAAM,KAAK,QAAQ,WAAW,YAAY,cAAc,EACzD,EACF;IACD;EAEQ;EACF;GACV"}

package/dist/FluentTimePicker-BfGJcPck.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { InputAdornment, makeStyles } from "@material-ui/core";
+import { KeyboardTimePicker, 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/FluentTimePicker.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 FluentTimePicker = (props) => {
+	const classes = useStyles();
+	const { id, label, startAdornment, endAdornment, ...otherProps } = props;
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(MuiPickersUtilsProvider, { utils: DateFnsUtils }, /* @__PURE__ */ React.createElement(KeyboardTimePicker, {
+		variant: "inline",
+		margin: "normal",
+		...otherProps,
+		id,
+		inputVariant: "outlined",
+		KeyboardButtonProps: { "aria-label": "change date" },
+		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
+			}
+		}
+	})));
+};
+FluentTimePicker.propTypes = {
+	label: PropTypes.string,
+	id: PropTypes.string
+};
+
+//#endregion
+export { FluentTimePicker as t };
+//# sourceMappingURL=FluentTimePicker-BfGJcPck.js.map

package/dist/FluentTimePicker-BfGJcPck.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentTimePicker-BfGJcPck.js","names":[],"sources":["../src/UI/inputs/pickers/FluentTimePicker.jsx"],"sourcesContent":["import React from 'react'\nimport { KeyboardTimePicker } from '@material-ui/pickers'\nimport { makeStyles, InputAdornment } from '@material-ui/core'\nimport { EventDateIcon } from '@fluentui/react-icons'\nimport { MuiPickersUtilsProvider } 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 FluentTimePicker = (props) => {\n  const classes = useStyles()\n  const { id, label, startAdornment, endAdornment, ...otherProps } = props\n\n  return (\n    <div>\n      <MuiPickersUtilsProvider utils={DateFnsUtils}>\n        <KeyboardTimePicker\n          variant='inline'\n          margin='normal'\n          {...otherProps}\n          id={id}\n          inputVariant='outlined'\n          KeyboardButtonProps={{\n            'aria-label': 'change date'\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\nFluentTimePicker.propTypes = {\n  /**\n   * Adornment label (eg, From: )\n   */\n  label: PropTypes.string,\n  /**\n   * Id\n   */\n  id: PropTypes.string\n}\n"],"mappings":";;;;;;;;AAQA,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,EAAE,IAAI,OAAO,gBAAgB,cAAc,GAAG,eAAe;AAEnE,QACE,oCAAC,aACC,oCAAC,2BAAwB,OAAO,gBAC9B,oCAAC;EACC,SAAQ;EACR,QAAO;EACP,GAAI;EACA;EACJ,cAAa;EACb,qBAAqB,EACnB,cAAc,eACf;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;CAI3B,OAAO,UAAU;CAIjB,IAAI,UAAU;CACf"}

package/dist/FluentTimeline-vLyX4O7h.js

@@ -0,0 +1,156 @@
+import { t as FluentIcon } from "./FluentIcon-DQ6nSDJg.js";
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import { t as UnityFluentIcon } from "./UnityFluentIcon-DrASIcTF.js";
+import { S as getIconFromName } from "./TreeUtilities-C6e2dd4g.js";
+import React, { useState } from "react";
+import { Avatar, MenuItem, Popover, Typography, alpha, makeStyles } from "@material-ui/core";
+import { MoreVerticalIcon } from "@fluentui/react-icons";
+
+//#region src/UI/timeline/fluentTimeline/FluentTimelineHeader.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	customTimelineHeader: {
+		backgroundColor: alpha(theme.palette.secondary.main, .1),
+		borderRadius: theme.spacing(4),
+		padding: theme.spacing(.5, 2, .5, .5),
+		display: "flex",
+		alignItems: "center"
+	},
+	customTimelineHeaderAvatar: {
+		marginRight: theme.spacing(1),
+		height: theme.spacing(4),
+		width: theme.spacing(4)
+	},
+	flexDescription: {
+		fontSize: "0.875rem",
+		marginLeft: theme.spacing(2)
+	}
+}));
+const FluentTimelineHeader = (props) => {
+	const { title, date, iconName } = props;
+	const classes = useStyles$1();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.customTimelineHeader }, /* @__PURE__ */ React.createElement(Avatar, { className: classes.customTimelineHeaderAvatar }, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		size: "medium",
+		icon: getIconFromName(iconName ?? "PageListIcon"),
+		type: ""
+	})), /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, title), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		color: "textSecondary",
+		className: classes.flexDescription
+	}, date));
+};
+
+//#endregion
+//#region src/UI/timeline/fluentTimeline/FluentTimelineContent.jsx
+const useStyles = makeStyles((theme) => ({
+	flexCol: {
+		flexGrow: 1,
+		fontSize: "0.875rem",
+		marginLeft: theme.spacing(1)
+	},
+	customTimelineContent: {
+		display: "flex",
+		borderLeft: "1px solid " + theme.palette.grey[300],
+		paddingLeft: theme.spacing(3),
+		paddingTop: theme.spacing(.5),
+		paddingBottom: theme.spacing(.5),
+		marginLeft: theme.spacing(2.5),
+		alignItems: "center"
+	},
+	customTimelineContentDate: {
+		marginLeft: theme.spacing(3),
+		marginRight: theme.spacing(2),
+		minWidth: theme.spacing(5),
+		fontWeight: 400,
+		textAlign: "right",
+		fontSize: "12px"
+	},
+	customTimelineDot: {
+		marginLeft: theme.spacing(-3.55),
+		width: theme.spacing(1),
+		height: theme.spacing(1),
+		backgroundColor: theme.palette.grey[400],
+		borderRadius: "100%"
+	},
+	flexDescription: { fontSize: "0.875rem" }
+}));
+const FluentTimelineContent = (props) => {
+	const { data, title, description, date, actions, category } = props;
+	const classes = useStyles();
+	const [openMenu, setOpenMenu] = useState(false);
+	const [anchorEl, setAnchorEl] = useState(null);
+	const handlePopoverClick = (event) => {
+		setOpenMenu(true);
+		setAnchorEl(event.currentTarget);
+	};
+	const handlePopoverClose = (event) => {
+		setOpenMenu(false);
+		setAnchorEl(null);
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.customTimelineContent }, /* @__PURE__ */ React.createElement("div", { className: classes.customTimelineDot }), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body2",
+		noWrap: true,
+		className: classes.flexCol
+	}, title), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body2",
+		noWrap: true,
+		className: classes.flexDescription
+	}, description), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		color: "textSecondary",
+		className: classes.customTimelineContentDate
+	}, date), actions?.length > 0 && /* @__PURE__ */ React.createElement(FluentIconButton, {
+		icon: MoreVerticalIcon,
+		size: "small",
+		onClick: handlePopoverClick,
+		id: "udpRecord-FluentTimelineContent-MoreAction-" + category + "-" + typeof title === "string" && title.replace(/\s+/g, ""),
+		udprecordid: "udpRecord-FluentTimelineContent-MoreAction-" + category + "-" + typeof title === "string" && title.replace(/\s+/g, "")
+	}), /* @__PURE__ */ React.createElement(Popover, {
+		id: "fluentTimelineContentPopover",
+		open: openMenu,
+		anchorEl,
+		onClose: handlePopoverClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, actions?.map((action) => /* @__PURE__ */ React.createElement(MenuItem, {
+		id: "udpRecord-FluentTimelineContent-MenuItem-" + action?.label?.replace(/ /g, "-"),
+		udprecordid: "udpRecord-FluentTimelineContent-MenuItem-" + action?.label?.replace(/ /g, "-"),
+		onClick: () => {
+			if (action.onClick) action.onClick(data);
+		},
+		style: {
+			display: "flex",
+			justifyContent: "space-between"
+		}
+	}, /* @__PURE__ */ React.createElement(Typography, null, action?.label), action?.icon && /* @__PURE__ */ React.createElement(FluentIcon, {
+		component: action?.icon,
+		style: { marginLeft: 7 }
+	})))));
+};
+
+//#endregion
+//#region src/UI/timeline/fluentTimeline/FluentTimeline.jsx
+const FluentTimeline = (props) => {
+	const { data, dataConfig, actions } = props;
+	return /* @__PURE__ */ React.createElement("div", null, data?.map((timeline) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FluentTimelineHeader, {
+		title: timeline?.[dataConfig?.type],
+		date: timeline?.[dataConfig?.typeDate],
+		iconName: timeline?.[dataConfig?.typeIconName]
+	}), timeline?.[dataConfig?.events]?.map((item) => /* @__PURE__ */ React.createElement(FluentTimelineContent, {
+		data: item,
+		title: item?.[dataConfig?.eventTitle],
+		description: item?.[dataConfig?.eventDescription],
+		date: item?.[dataConfig?.eventDate],
+		actions,
+		category: timeline?.[dataConfig?.type]
+	})))));
+};
+
+//#endregion
+export { FluentTimelineContent as n, FluentTimelineHeader as r, FluentTimeline as t };
+//# sourceMappingURL=FluentTimeline-vLyX4O7h.js.map

package/dist/FluentTimeline-vLyX4O7h.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentTimeline-vLyX4O7h.js","names":["useStyles"],"sources":["../src/UI/timeline/fluentTimeline/FluentTimelineHeader.jsx","../src/UI/timeline/fluentTimeline/FluentTimelineContent.jsx","../src/UI/timeline/fluentTimeline/FluentTimeline.jsx"],"sourcesContent":["import React from 'react';\nimport { Typography, Avatar, makeStyles, alpha } from '@material-ui/core';\nimport { UnityFluentIcon } from '../../../utilities/iconLibrary/UnityFluentIcon';\nimport { getIconFromName } from '../../../utilities/tree/TreeUtilities';\n\nconst useStyles = makeStyles((theme) => ({\n  customTimelineHeader: {\n    backgroundColor: alpha(theme.palette.secondary.main, 0.1),\n    borderRadius: theme.spacing(4),\n    padding: theme.spacing(0.5, 2, 0.5, 0.5),\n    display: 'flex',\n    alignItems: 'center'\n  },\n  customTimelineHeaderAvatar: {\n    marginRight: theme.spacing(1),\n    height: theme.spacing(4),\n    width: theme.spacing(4)\n  },\n  flexDescription: {\n    fontSize: '0.875rem',\n    marginLeft: theme.spacing(2)\n  }\n}));\n\nexport const FluentTimelineHeader = (props) => {\n  const { title, date, iconName } = props;\n  const classes = useStyles();\n\n  return (\n    <div className={classes.customTimelineHeader}>\n      <Avatar className={classes.customTimelineHeaderAvatar}>\n        <UnityFluentIcon\n          size='medium'\n          icon={getIconFromName(iconName ?? 'PageListIcon')}\n          type=''\n        />\n      </Avatar>\n      <Typography variant='subtitle2'>{title}</Typography>\n      <Typography\n        variant='caption'\n        color='textSecondary'\n        className={classes.flexDescription}\n      >\n        {date}\n      </Typography>\n    </div>\n  );\n};\n","import React, { useState } from 'react';\nimport { Typography, makeStyles, Popover, MenuItem } from '@material-ui/core';\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton';\nimport { MoreVerticalIcon } from '@fluentui/react-icons';\nimport { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';\n\nconst useStyles = makeStyles(theme => ({\n  flexCol: {\n    flexGrow: 1,\n    fontSize: '0.875rem',\n    marginLeft: theme.spacing(1),\n  },\n  customTimelineContent: {\n    display: 'flex',\n    borderLeft: '1px solid ' + theme.palette.grey[300],\n    paddingLeft: theme.spacing(3),\n    paddingTop: theme.spacing(0.5),\n    paddingBottom: theme.spacing(0.5),\n    marginLeft: theme.spacing(2.5),\n    alignItems: 'center',\n  },\n  customTimelineContentDate: {\n    marginLeft: theme.spacing(3),\n    marginRight: theme.spacing(2),\n    minWidth: theme.spacing(5),\n    fontWeight: 400,\n    textAlign: 'right',\n    fontSize: '12px',\n  },\n  customTimelineDot: {\n    marginLeft: theme.spacing(-3.55),\n    width: theme.spacing(1),\n    height: theme.spacing(1),\n    backgroundColor: theme.palette.grey[400],\n    borderRadius: '100%',\n  },\n  flexDescription: {\n    fontSize: '0.875rem',\n  },\n}));\n\nexport const FluentTimelineContent = props => {\n  const { data, title, description, date, actions, category } = props;\n  const classes = useStyles();\n  const [openMenu, setOpenMenu] = useState(false);\n  const [anchorEl, setAnchorEl] = useState(null);\n\n  const handlePopoverClick = event => {\n    setOpenMenu(true);\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handlePopoverClose = event => {\n    setOpenMenu(false);\n    setAnchorEl(null);\n  };\n\n  return (\n    <div className={classes.customTimelineContent}>\n      <div className={classes.customTimelineDot} />\n      <Typography variant='body2' noWrap className={classes.flexCol}>\n        {title}\n      </Typography>\n      <Typography variant='body2' noWrap className={classes.flexDescription}>\n        {description}\n      </Typography>\n      <Typography\n        variant='caption'\n        color='textSecondary'\n        className={classes.customTimelineContentDate}\n      >\n        {date}\n      </Typography>\n      {actions?.length > 0 && (\n        <FluentIconButton\n          icon={MoreVerticalIcon}\n          size='small'\n          onClick={handlePopoverClick}\n          id={\n            'udpRecord-FluentTimelineContent-MoreAction-' +\n            category +\n            '-' +\n            typeof title === 'string' && title.replace(/\\s+/g, '')\n          }\n          udprecordid={\n            'udpRecord-FluentTimelineContent-MoreAction-' +\n            category +\n            '-' +\n            typeof title === 'string' && title.replace(/\\s+/g, '')\n          }\n        />\n      )}\n\n      <Popover\n        id='fluentTimelineContentPopover'\n        open={openMenu}\n        anchorEl={anchorEl}\n        onClose={handlePopoverClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'right'\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right'\n        }}\n      >\n        {actions?.map((action) => (\n          <MenuItem\n            id={\n              'udpRecord-FluentTimelineContent-MenuItem-' +\n              action?.label?.replace(/ /g, '-')\n            }\n            udprecordid={\n              'udpRecord-FluentTimelineContent-MenuItem-' +\n              action?.label?.replace(/ /g, '-')\n            }\n            onClick={() => {\n              if (action.onClick) {\n                action.onClick(data);\n              }\n            }}\n            style={{\n              display: 'flex',\n              justifyContent: 'space-between'\n            }}\n          >\n            <Typography>{action?.label}</Typography>\n            {action?.icon && (\n              <FluentIcon component={action?.icon} style={{ marginLeft: 7 }} />\n            )}\n          </MenuItem>\n        ))}\n      </Popover>\n    </div>\n  );\n};\n","import React from 'react';\nimport { FluentTimelineHeader } from './FluentTimelineHeader';\nimport { FluentTimelineContent } from './FluentTimelineContent';\n\nexport const FluentTimeline = (props) => {\n  const { data, dataConfig, actions } = props;\n\n  return (\n    <div>\n      {data?.map((timeline) => (\n        <>\n          <FluentTimelineHeader\n            title={timeline?.[dataConfig?.type]}\n            date={timeline?.[dataConfig?.typeDate]}\n            iconName={timeline?.[dataConfig?.typeIconName]}\n          />\n          {timeline?.[dataConfig?.events]?.map((item) => (\n            <FluentTimelineContent\n              data={item}\n              title={item?.[dataConfig?.eventTitle]}\n              description={item?.[dataConfig?.eventDescription]}\n              date={item?.[dataConfig?.eventDate]}\n              actions={actions}\n              category={timeline?.[dataConfig?.type]}\n            />\n          ))}\n        </>\n      ))}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/FluentToggle-B1DqTfua.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { Switch, withStyles } from "@material-ui/core";
+
+//#region src/UI/inputs/toggle/FluentToggle.jsx
+const FluentSwitch = withStyles((theme) => ({
+	root: {
+		width: 40,
+		height: 20,
+		padding: 0,
+		display: "flex"
+	},
+	switchBase: {
+		padding: 4,
+		color: theme.palette.grey[500],
+		"&$checked": {
+			transform: "translateX(20px)",
+			color: theme.palette.common.white,
+			"& + $track": {
+				opacity: 1,
+				borderColor: theme.palette.primary.main
+			}
+		}
+	},
+	thumb: {
+		width: 12,
+		height: 12,
+		boxShadow: "none"
+	},
+	track: {
+		border: `1px solid ${theme.palette.grey[500]}`,
+		borderRadius: 20 / 2,
+		opacity: 1,
+		backgroundColor: theme.palette.common.white
+	},
+	checked: {}
+}))(Switch);
+const FluentToggle = (props) => {
+	const { name, onChange, checked, ...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(FluentSwitch, {
+		...otherProps,
+		checked,
+		onChange,
+		name
+	});
+};
+
+//#endregion
+export { FluentToggle as t };
+//# sourceMappingURL=FluentToggle-B1DqTfua.js.map

package/dist/FluentToggle-B1DqTfua.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentToggle-B1DqTfua.js","names":[],"sources":["../src/UI/inputs/toggle/FluentToggle.jsx"],"sourcesContent":["import React from 'react'\nimport { Switch, withStyles } from '@material-ui/core'\n\nconst FluentSwitch = withStyles((theme) => ({\n  root: {\n    width: 40,\n    height: 20,\n    padding: 0,\n    display: 'flex',\n  },\n  switchBase: {\n    padding: 4,\n    color: theme.palette.grey[500],\n    '&$checked': {\n      transform: 'translateX(20px)',\n      color: theme.palette.common.white,\n      '& + $track': {\n        opacity: 1,\n        borderColor: theme.palette.primary.main\n      }\n    }\n  },\n  thumb: {\n    width: 12,\n    height: 12,\n    boxShadow: 'none'\n  },\n  track: {\n    border: `1px solid ${theme.palette.grey[500]}`,\n    borderRadius: 20 / 2,\n    opacity: 1,\n    backgroundColor: theme.palette.common.white\n  },\n  checked: {}\n}))(Switch)\n\nexport const FluentToggle = (props) => {\n  const { name, onChange, checked, ...otherProps } = props\n\n  return (\n    <FluentSwitch\n      {...otherProps}\n      checked={checked}\n      onChange={onChange}\n      name={name}\n    />\n  )\n}\n"],"mappings":";;;;AAGA,MAAM,eAAe,YAAY,WAAW;CAC1C,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,SAAS;EACT,SAAS;EACV;CACD,YAAY;EACV,SAAS;EACT,OAAO,MAAM,QAAQ,KAAK;EAC1B,aAAa;GACX,WAAW;GACX,OAAO,MAAM,QAAQ,OAAO;GAC5B,cAAc;IACZ,SAAS;IACT,aAAa,MAAM,QAAQ,QAAQ;IACpC;GACF;EACF;CACD,OAAO;EACL,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;CACD,OAAO;EACL,QAAQ,aAAa,MAAM,QAAQ,KAAK;EACxC,cAAc,KAAK;EACnB,SAAS;EACT,iBAAiB,MAAM,QAAQ,OAAO;EACvC;CACD,SAAS,EAAE;CACZ,EAAE,CAAC,OAAO;AAEX,MAAa,gBAAgB,UAAU;CACrC,MAAM,EAAE,MAAM,UAAU,SAAS,GAAG,eAAe;AAEnD,QACE,oCAAC;EACC,GAAI;EACK;EACC;EACJ;GACN"}