udp-react-enterprise-component-library 25.18.1-beta.37 → 25.18.1-beta.39

package/dist/textField-OwxxHROu.js

@@ -0,0 +1,104 @@
+import { t as Field } from "./Field-Cda5rJe2.js";
+import { t as IconButtonWithTooltip } from "./IconButtonWithToolTip-DswviiJB.js";
+import { t as FluentTextField } from "./FluentTextField-WfFk-koa.js";
+import React, { forwardRef, useCallback, useEffect, useState } from "react";
+import { Checkbox, TextField, makeStyles } from "@material-ui/core";
+import { AddIcon } from "@fluentui/react-icons";
+import { Autocomplete } from "@material-ui/lab";
+
+//#region src/UI/inputs/textField/FluentTagField.jsx
+const useStyles = makeStyles((theme) => ({ root: { "&[class*=\"MuiOutlinedInput-root\"][class*=\"MuiOutlinedInput-marginDense\"]": {
+	padding: "4px 8px",
+	height: "auto"
+} } }));
+const FluentTagFieldComponent = (props, ref) => {
+	const classes = useStyles(props);
+	const { id, data, startAdornment, endAdornment, onChange: onChangeProp, autoCompleteProps, displayProperty, width = 300, height = "auto", ...otherProps } = props;
+	const onChange = useCallback((e, value) => onChangeProp?.(value), [onChangeProp]);
+	const getOptionLabel = (option) => {
+		if (displayProperty) return option[displayProperty] || "";
+		return option;
+	};
+	return /* @__PURE__ */ React.createElement(Autocomplete, {
+		classes: { inputRoot: classes.root },
+		multiple: true,
+		id,
+		onChange,
+		options: data,
+		getOptionLabel,
+		style: {
+			width,
+			height
+		},
+		...autoCompleteProps,
+		renderInput: (params) => {
+			return /* @__PURE__ */ React.createElement(FluentTextField, {
+				...otherProps,
+				...params
+			});
+		},
+		renderOption: (option, { selected }) => {
+			const isSelectedValue = displayProperty && autoCompleteProps?.value?.some((item) => item[displayProperty] === option[displayProperty]);
+			return /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(Checkbox, {
+				...otherProps,
+				style: { marginRight: 8 },
+				checked: selected || isSelectedValue
+			}), getOptionLabel(option));
+		}
+	});
+};
+const FluentTagField = forwardRef(FluentTagFieldComponent);
+
+//#endregion
+//#region src/UI/inputs/textField/KeyValueTextField.jsx
+const KeyValueTextField = (props) => {
+	const { previousValues, fieldName } = props;
+	const [numFields, setNumFields] = useState(1);
+	const addField = () => {
+		setNumFields(numFields + 1);
+	};
+	useEffect(() => {
+		if (previousValues) {
+			const numPrevValues = Object.keys(previousValues).length;
+			setNumFields(numPrevValues);
+		}
+	}, [previousValues]);
+	return /* @__PURE__ */ React.createElement("div", null, Array.from({ length: numFields }).map((_, index) => /* @__PURE__ */ React.createElement("div", {
+		key: index,
+		style: {
+			display: "flex",
+			gap: 5
+		}
+	}, /* @__PURE__ */ React.createElement(Field, {
+		component: TextField,
+		id: `${fieldName}Key${index + 1}`,
+		name: `${fieldName}Key${index + 1}`,
+		label: `Parameter Name ${index + 1}`,
+		variant: "filled",
+		size: "small",
+		required: false,
+		fullWidth: true,
+		initialValue: previousValues && Object.keys(previousValues)[index]
+	}), /* @__PURE__ */ React.createElement(Field, {
+		component: TextField,
+		id: `${fieldName}Value${index + 1}`,
+		name: `${fieldName}Value${index + 1}`,
+		label: `Value ${index + 1}`,
+		variant: "filled",
+		size: "small",
+		required: false,
+		fullWidth: true,
+		initialValue: previousValues && Object.values(previousValues)[index]
+	}))), /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		justifyContent: "right"
+	} }, /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
+		icon: AddIcon,
+		onClick: addField,
+		title: "Add field"
+	})));
+};
+
+//#endregion
+export { FluentTagField as n, FluentTagFieldComponent as r, KeyValueTextField as t };
+//# sourceMappingURL=textField-OwxxHROu.js.map

package/dist/textField-OwxxHROu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textField-OwxxHROu.js","names":[],"sources":["../src/UI/inputs/textField/FluentTagField.jsx","../src/UI/inputs/textField/KeyValueTextField.jsx"],"sourcesContent":["import React, { useCallback, forwardRef } from 'react';\nimport { makeStyles, Checkbox } from '@material-ui/core';\nimport { FluentTextField } from './FluentTextField';\nimport { Autocomplete } from '@material-ui/lab';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    '&[class*=\"MuiOutlinedInput-root\"][class*=\"MuiOutlinedInput-marginDense\"]':\n      {\n        padding: '4px 8px',\n        height: 'auto'\n      }\n  }\n}));\n\nexport const FluentTagFieldComponent = (props, ref) => {\n  const classes = useStyles(props);\n  const {\n    id,\n    data,\n    startAdornment,\n    endAdornment,\n    onChange: onChangeProp,\n    autoCompleteProps,\n    displayProperty,\n    width = 300,\n    height = 'auto',\n    ...otherProps\n  } = props;\n\n  const onChange = useCallback(\n    (e, value) => onChangeProp?.(value),\n    [onChangeProp]\n  );\n\n  const getOptionLabel = (option) => {\n    if (displayProperty) {\n      return option[displayProperty] || '';\n    }\n    return option;\n  };\n\n  return (\n    <Autocomplete\n      classes={{\n        inputRoot: classes.root\n      }}\n      multiple\n      id={id}\n      onChange={onChange}\n      options={data}\n      getOptionLabel={getOptionLabel}\n      style={{ width, height }}\n      {...autoCompleteProps}\n      renderInput={(params) => {\n        return <FluentTextField {...otherProps} {...params} />;\n      }}\n      renderOption={(option, { selected }) => {\n        const isSelectedValue =\n          displayProperty &&\n          autoCompleteProps?.value?.some(\n            (item) => item[displayProperty] === option[displayProperty]\n          );\n\n        return (\n          <li>\n            <Checkbox\n              {...otherProps}\n              style={{ marginRight: 8 }}\n              checked={selected || isSelectedValue}\n            />\n            {getOptionLabel(option)}\n          </li>\n        );\n      }}\n    />\n  );\n};\n\nexport const FluentTagField = forwardRef(FluentTagFieldComponent);\n","import React, { useState, useEffect } from 'react';\nimport { TextField } from '@material-ui/core';\nimport { IconButtonWithTooltip } from '../buttons/IconButtonWithToolTip';\nimport { AddIcon } from '@fluentui/react-icons';\nimport { Field } from '../../../utilities/form';\n\nexport const KeyValueTextField = (props) => {\n  const {previousValues, fieldName} = props\n  const [numFields, setNumFields] = useState(1);\n\n  const addField = () => {\n    setNumFields(numFields + 1);\n  };\n\n  useEffect(()=>{\n    if(previousValues){\n      const numPrevValues = Object.keys(previousValues).length\n      setNumFields(numPrevValues)\n    }\n   \n  },[previousValues])\n\n  return (\n    <div>\n      {Array.from({ length: numFields }).map((_, index) => (\n        <div key={index} style={{ display: 'flex', gap: 5 }}>\n          <Field\n            component={TextField}\n            id={`${fieldName}Key${index + 1}`}\n            name={`${fieldName}Key${index + 1}`}\n            label={`Parameter Name ${index + 1}`}\n            variant='filled'\n            size='small'\n            required={false}\n            fullWidth\n            initialValue={previousValues && Object.keys(previousValues)[index]}\n          />\n          <Field\n            component={TextField}\n            id={`${fieldName}Value${index + 1}`}\n            name={`${fieldName}Value${index + 1}`}\n            label={`Value ${index + 1}`}\n            variant='filled'\n            size='small'\n            required={false}\n            fullWidth\n            initialValue={previousValues && Object.values(previousValues)[index]}\n          />\n        </div>\n      ))}\n      <div style={{display: 'flex', justifyContent: 'right'}}>\n      <IconButtonWithTooltip\n        icon={AddIcon}\n        onClick={addField}\n        title='Add field'\n      />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAKA,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM,EACJ,gFACE;CACE,SAAS;CACT,QAAQ;CACT,EACJ,EACF,EAAE;AAEH,MAAa,2BAA2B,OAAO,QAAQ;CACrD,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EACJ,IACA,MACA,gBACA,cACA,UAAU,cACV,mBACA,iBACA,QAAQ,KACR,SAAS,QACT,GAAG,eACD;CAEJ,MAAM,WAAW,aACd,GAAG,UAAU,eAAe,MAAM,EACnC,CAAC,aAAa,CACf;CAED,MAAM,kBAAkB,WAAW;AACjC,MAAI,gBACF,QAAO,OAAO,oBAAoB;AAEpC,SAAO;;AAGT,QACE,oCAAC;EACC,SAAS,EACP,WAAW,QAAQ,MACpB;EACD;EACI;EACM;EACV,SAAS;EACO;EAChB,OAAO;GAAE;GAAO;GAAQ;EACxB,GAAI;EACJ,cAAc,WAAW;AACvB,UAAO,oCAAC;IAAgB,GAAI;IAAY,GAAI;KAAU;;EAExD,eAAe,QAAQ,EAAE,eAAe;GACtC,MAAM,kBACJ,mBACA,mBAAmB,OAAO,MACvB,SAAS,KAAK,qBAAqB,OAAO,iBAC5C;AAEH,UACE,oCAAC,YACC,oCAAC;IACC,GAAI;IACJ,OAAO,EAAE,aAAa,GAAG;IACzB,SAAS,YAAY;KACrB,EACD,eAAe,OAAO,CACpB;;GAGT;;AAIN,MAAa,iBAAiB,WAAW,wBAAwB;;;;ACzEjE,MAAa,qBAAqB,UAAU;CAC1C,MAAM,EAAC,gBAAgB,cAAa;CACpC,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAE7C,MAAM,iBAAiB;AACrB,eAAa,YAAY,EAAE;;AAG7B,iBAAc;AACZ,MAAG,gBAAe;GAChB,MAAM,gBAAgB,OAAO,KAAK,eAAe,CAAC;AAClD,gBAAa,cAAc;;IAG7B,CAAC,eAAe,CAAC;AAEnB,QACE,oCAAC,aACE,MAAM,KAAK,EAAE,QAAQ,WAAW,CAAC,CAAC,KAAK,GAAG,UACzC,oCAAC;EAAI,KAAK;EAAO,OAAO;GAAE,SAAS;GAAQ,KAAK;GAAG;IACjD,oCAAC;EACC,WAAW;EACX,IAAI,GAAG,UAAU,KAAK,QAAQ;EAC9B,MAAM,GAAG,UAAU,KAAK,QAAQ;EAChC,OAAO,kBAAkB,QAAQ;EACjC,SAAQ;EACR,MAAK;EACL,UAAU;EACV;EACA,cAAc,kBAAkB,OAAO,KAAK,eAAe,CAAC;GAC5D,EACF,oCAAC;EACC,WAAW;EACX,IAAI,GAAG,UAAU,OAAO,QAAQ;EAChC,MAAM,GAAG,UAAU,OAAO,QAAQ;EAClC,OAAO,SAAS,QAAQ;EACxB,SAAQ;EACR,MAAK;EACL,UAAU;EACV;EACA,cAAc,kBAAkB,OAAO,OAAO,eAAe,CAAC;GAC9D,CACE,CACN,EACF,oCAAC,SAAI,OAAO;EAAC,SAAS;EAAQ,gBAAgB;EAAQ,IACtD,oCAAC;EACC,MAAM;EACN,SAAS;EACT,OAAM;GACN,CACI,CACF"}

package/dist/theme-C-5VosEn.js

@@ -0,0 +1,266 @@
+import { i as verticalSecondary, n as useTypeScale, r as verticalPrimary, t as greyScale } from "./verticalStyles-CUPjFvB1.js";
+import { t as useTenant } from "./useTenant-CGaZEBEJ.js";
+import React, { useCallback, useMemo, useState } from "react";
+import { CssBaseline, lighten, useTheme as useTheme$2 } from "@material-ui/core";
+import { createTheme } from "@material-ui/core/styles";
+import MuiThemeProvider from "@material-ui/styles/esm/ThemeProvider";
+
+//#region src/utilities/theme/systemColors.js
+const useSystemColor = () => {
+	const [color] = useState({
+		info: "rgb(15, 98, 254)",
+		error: "rgb(218, 30, 40)",
+		warning: "rgb(255, 131, 43)",
+		success: "rgb(36, 161, 72)"
+	});
+	return [color];
+};
+
+//#endregion
+//#region src/utilities/theme/theme.jsx
+/**
+* Custom MUI theme provider
+*/
+const ThemeProvider = ({ children }) => {
+	const [h1, h2, h3, h4, h5, h6, body1, body2, subtitle1, subtitle2, subtitle3, button, caption, caption2, overline] = useTypeScale();
+	const [mode, setMode] = useState("light");
+	const activeTenant = useTenant()?.activeTenant ?? null;
+	const tenantTheme = activeTenant?.theme ?? null;
+	const isThemeInitialized = Boolean(activeTenant?.tenantId);
+	const resolvedTheme = (tenantTheme ?? "").toLowerCase();
+	const getThemeData = useCallback(() => {
+		return {
+			mode,
+			currentTheme: tenantTheme ?? ""
+		};
+	}, [mode, tenantTheme]);
+	const theme = useMemo(() => {
+		const { augmentColor } = createTheme().palette;
+		const primary = verticalPrimary(resolvedTheme);
+		const secondary = verticalSecondary(resolvedTheme);
+		return {
+			...createTheme({
+				...createTheme({
+					palette: {
+						type: mode,
+						primary: {
+							main: primary,
+							light: lighten(primary, .8)
+						},
+						secondary: { main: secondary },
+						appBar: augmentColor({ main: "#021b38" }),
+						background: {
+							default: greyScale(mode),
+							footer: "#021b38"
+						}
+					},
+					dimensions: { drawerWidth: 200 },
+					typography: { fontFamily: [
+						"Segoe UI",
+						"Roboto",
+						"Noto",
+						"Helvetica Neue",
+						"Helvetica",
+						"Ubuntu",
+						"Arial",
+						"sans-serif",
+						"Apple Color Emoji",
+						"Segoe UI Emoji",
+						"Segoe UI Symbol"
+					].map((item) => item.includes(" ") ? `"${item}"` : item).join(", ") },
+					mixins: {},
+					props: { MuiTextField: {
+						margin: "normal",
+						variant: "filled",
+						fullWidth: true
+					} }
+				}),
+				overrides: {
+					MuiCssBaseline: { "@global": {
+						"*::-webkit-scrollbar": {
+							height: 8,
+							width: 8,
+							backgroundColor: "#fff"
+						},
+						"*::-webkit-scrollbar-track": { backgroundColor: "#fff" },
+						"*::-webkit-scrollbar-track:hover": { backgroundColor: "#f4f4f4" },
+						"*::-webkit-scrollbar-thumb": {
+							backgroundColor: "#babac0",
+							borderRadius: 16,
+							border: "2px solid #fff"
+						},
+						"*::-webkit-scrollbar-thumb:hover": {
+							backgroundColor: "#a0a0a5",
+							border: "2px solid #f4f4f4"
+						}
+					} },
+					MuiTypography: {
+						h1: {
+							fontSize: h1.size,
+							fontWeight: h1.weight,
+							lineHeight: h1.lineHeight,
+							letterSpacing: h1.letterSpacing
+						},
+						h2: {
+							fontSize: h2.size,
+							fontWeight: h2.weight,
+							lineHeight: h2.lineHeight,
+							letterSpacing: h2.letterSpacing
+						},
+						h3: {
+							fontSize: h3.size,
+							fontWeight: h3.weight,
+							lineHeight: h3.lineHeight,
+							letterSpacing: h3.letterSpacing
+						},
+						h4: {
+							fontSize: h4.size,
+							fontWeight: h4.weight,
+							lineHeight: h4.lineHeight,
+							letterSpacing: h4.letterSpacing
+						},
+						h5: {
+							fontSize: h5.size,
+							fontWeight: h5.weight,
+							lineHeight: h5.lineHeight,
+							letterSpacing: h5.letterSpacing
+						},
+						h6: {
+							fontSize: h6.size,
+							fontWeight: h6.weight,
+							lineHeight: h6.lineHeight,
+							letterSpacing: h6.letterSpacing
+						},
+						subtitle1: {
+							fontSize: subtitle1.size,
+							fontWeight: subtitle1.weight,
+							lineHeight: subtitle1.lineHeight,
+							letterSpacing: subtitle1.letterSpacing
+						},
+						subtitle2: {
+							fontSize: subtitle2.size,
+							fontWeight: subtitle2.weight,
+							lineHeight: subtitle2.lineHeight,
+							letterSpacing: subtitle2.letterSpacing
+						},
+						subtitle3: {
+							fontSize: subtitle3.size,
+							fontWeight: subtitle3.weight,
+							lineHeight: subtitle3.lineHeight,
+							letterSpacing: subtitle3.letterSpacing
+						},
+						body1: {
+							fontSize: body1.size,
+							fontWeight: body1.weight,
+							lineHeight: body1.lineHeight,
+							letterSpacing: body1.letterSpacing
+						},
+						body2: {
+							fontSize: body2.size,
+							fontWeight: body2.weight,
+							lineHeight: body2.lineHeight,
+							letterSpacing: body2.letterSpacing
+						},
+						button: {
+							fontSize: button.size,
+							fontWeight: button.weight,
+							lineHeight: button.lineHeight,
+							letterSpacing: button.letterSpacing
+						},
+						caption: {
+							fontSize: caption.size,
+							fontWeight: caption.weight,
+							lineHeight: caption.lineHeight,
+							letterSpacing: caption.letterSpacing
+						},
+						caption2: {
+							fontSize: caption2.size,
+							fontWeight: caption2.weight,
+							lineHeight: caption2.lineHeight,
+							letterSpacing: caption2.letterSpacing
+						},
+						overline: {
+							fontSize: overline.size,
+							fontWeight: overline.weight,
+							lineHeight: overline.lineHeight,
+							letterSpacing: overline.letterSpacing
+						}
+					}
+				}
+			}),
+			isInitialized: isThemeInitialized,
+			setMode,
+			getThemeData
+		};
+	}, [
+		body1.letterSpacing,
+		body1.lineHeight,
+		body1.size,
+		body1.weight,
+		body2.letterSpacing,
+		body2.lineHeight,
+		body2.size,
+		body2.weight,
+		button.letterSpacing,
+		button.lineHeight,
+		button.size,
+		button.weight,
+		caption.letterSpacing,
+		caption.lineHeight,
+		caption.size,
+		caption.weight,
+		caption2.letterSpacing,
+		caption2.lineHeight,
+		caption2.size,
+		caption2.weight,
+		h1.letterSpacing,
+		h1.lineHeight,
+		h1.size,
+		h1.weight,
+		h2.letterSpacing,
+		h2.lineHeight,
+		h2.size,
+		h2.weight,
+		h3.letterSpacing,
+		h3.lineHeight,
+		h3.size,
+		h3.weight,
+		h4.letterSpacing,
+		h4.lineHeight,
+		h4.size,
+		h4.weight,
+		h5.letterSpacing,
+		h5.lineHeight,
+		h5.size,
+		h5.weight,
+		h6.letterSpacing,
+		h6.lineHeight,
+		h6.size,
+		h6.weight,
+		overline.letterSpacing,
+		overline.lineHeight,
+		overline.size,
+		overline.weight,
+		subtitle1.letterSpacing,
+		subtitle1.lineHeight,
+		subtitle1.size,
+		subtitle1.weight,
+		subtitle2.letterSpacing,
+		subtitle2.lineHeight,
+		subtitle2.size,
+		subtitle2.weight,
+		subtitle3.letterSpacing,
+		subtitle3.lineHeight,
+		subtitle3.size,
+		subtitle3.weight,
+		isThemeInitialized,
+		mode,
+		getThemeData,
+		resolvedTheme
+	]);
+	return /* @__PURE__ */ React.createElement(MuiThemeProvider, { theme }, /* @__PURE__ */ React.createElement(CssBaseline, null), children);
+};
+
+//#endregion
+export { ThemeProvider as n, useSystemColor as r, useTheme$2 as t };
+//# sourceMappingURL=theme-C-5VosEn.js.map

package/dist/theme-C-5VosEn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-C-5VosEn.js","names":[],"sources":["../src/utilities/theme/systemColors.js","../src/utilities/theme/theme.jsx"],"sourcesContent":["import { useState } from 'react'\n\nexport const useSystemColor = () => {\n  const [color] = useState({\n    info: 'rgb(15, 98, 254)',\n    error: 'rgb(218, 30, 40)',\n    warning: 'rgb(255, 131, 43)',\n    success: 'rgb(36, 161, 72)'\n  })\n\n  return [color]\n}\n","import React, { useCallback, useMemo, useState } from 'react';\nimport { CssBaseline, lighten } from '@material-ui/core';\nimport {default as MuiThemeProvider } from '@material-ui/styles/esm/ThemeProvider';\nimport { createTheme } from '@material-ui/core/styles';\nimport { verticalPrimary, verticalSecondary } from '../style/verticalStyles';\nimport { useTypeScale } from '../style/verticalStyles';\nimport { greyScale } from '../style/verticalStyles';\nimport { useTenant } from '../tenant/useTenant';\n/**\n * Custom MUI theme provider\n */\nexport const ThemeProvider = ({ children }) => {\n  const [\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    body1,\n    body2,\n    subtitle1,\n    subtitle2,\n    subtitle3,\n    button,\n    caption,\n    caption2,\n    overline\n  ] = useTypeScale();\n  const [mode, setMode] = useState('light');\n  const tenant = useTenant();\n  const activeTenant = tenant?.activeTenant ?? null;\n  const tenantTheme = activeTenant?.theme ?? null;\n  const isThemeInitialized = Boolean(activeTenant?.tenantId);\n  const resolvedTheme = (tenantTheme ?? '').toLowerCase();\n\n  const getThemeData = useCallback(() => {\n    return { mode, currentTheme: tenantTheme ?? '' };\n  }, [mode, tenantTheme]);\n\n\n\n  const theme = useMemo(() => {\n\n    const { augmentColor } = createTheme().palette;\n\n    const primary = verticalPrimary(resolvedTheme);\n    const secondary = verticalSecondary(resolvedTheme);\n\n    const coreTheme = createTheme({\n      palette: {\n        type: mode,\n        primary: {\n          main: primary,\n          light: lighten(primary, 0.8)\n        },\n        secondary: {\n          main: secondary\n        },\n        appBar: augmentColor({\n          main: '#021b38'\n        }),\n        background: {\n          default: greyScale(mode),\n          footer: '#021b38'\n        }\n      },\n      dimensions: {\n        drawerWidth: 200\n      },\n      typography: {\n        fontFamily: [\n          // Webfont\n          // System font stack\n          // '-apple-system',\n          // 'BlinkMacSystemFont',\n          'Segoe UI',\n          'Roboto',\n          'Noto',\n          'Helvetica Neue',\n          'Helvetica',\n          'Ubuntu',\n          'Arial',\n          'sans-serif',\n          'Apple Color Emoji',\n          'Segoe UI Emoji',\n          'Segoe UI Symbol'\n        ]\n          .map((item) => (item.includes(' ') ? `\"${item}\"` : item))\n          .join(', ')\n      },\n      mixins: {\n        // toolbar: {\n        //   minHeight: 48,\n        //   padding: 0\n        // }\n      },\n      props: {\n        MuiTextField: {\n          margin: 'normal',\n          variant: 'filled',\n          fullWidth: true\n        }\n      }\n    });\n\n    const fullTheme = createTheme({\n      ...coreTheme,\n      overrides: {\n        MuiCssBaseline: {\n          '@global': {\n            '*::-webkit-scrollbar': {\n              height: 8,\n              width: 8,\n              backgroundColor: '#fff'\n            },\n            '*::-webkit-scrollbar-track': {\n              backgroundColor: '#fff'\n            },\n            '*::-webkit-scrollbar-track:hover': {\n              backgroundColor: '#f4f4f4'\n            },\n            '*::-webkit-scrollbar-thumb': {\n              backgroundColor: '#babac0',\n              borderRadius: 16,\n              border: '2px solid #fff'\n            },\n            '*::-webkit-scrollbar-thumb:hover': {\n              backgroundColor: '#a0a0a5',\n              border: '2px solid #f4f4f4'\n            }\n          }\n        },\n        MuiTypography: {\n          h1: {\n            fontSize: h1.size,\n            fontWeight: h1.weight,\n            lineHeight: h1.lineHeight,\n            letterSpacing: h1.letterSpacing\n          },\n          h2: {\n            fontSize: h2.size,\n            fontWeight: h2.weight,\n            lineHeight: h2.lineHeight,\n            letterSpacing: h2.letterSpacing\n          },\n          h3: {\n            fontSize: h3.size,\n            fontWeight: h3.weight,\n            lineHeight: h3.lineHeight,\n            letterSpacing: h3.letterSpacing\n          },\n          h4: {\n            fontSize: h4.size,\n            fontWeight: h4.weight,\n            lineHeight: h4.lineHeight,\n            letterSpacing: h4.letterSpacing\n          },\n\n          h5: {\n            fontSize: h5.size,\n            fontWeight: h5.weight,\n            lineHeight: h5.lineHeight,\n            letterSpacing: h5.letterSpacing\n          },\n          h6: {\n            fontSize: h6.size,\n            fontWeight: h6.weight,\n            lineHeight: h6.lineHeight,\n            letterSpacing: h6.letterSpacing\n          },\n          subtitle1: {\n            fontSize: subtitle1.size,\n            fontWeight: subtitle1.weight,\n            lineHeight: subtitle1.lineHeight,\n            letterSpacing: subtitle1.letterSpacing\n          },\n          subtitle2: {\n            fontSize: subtitle2.size,\n            fontWeight: subtitle2.weight,\n            lineHeight: subtitle2.lineHeight,\n            letterSpacing: subtitle2.letterSpacing\n          },\n          subtitle3: {\n            fontSize: subtitle3.size,\n            fontWeight: subtitle3.weight,\n            lineHeight: subtitle3.lineHeight,\n            letterSpacing: subtitle3.letterSpacing\n          },\n          body1: {\n            fontSize: body1.size,\n            fontWeight: body1.weight,\n            lineHeight: body1.lineHeight,\n            letterSpacing: body1.letterSpacing\n          },\n          body2: {\n            fontSize: body2.size,\n            fontWeight: body2.weight,\n            lineHeight: body2.lineHeight,\n            letterSpacing: body2.letterSpacing\n          },\n          button: {\n            fontSize: button.size,\n            fontWeight: button.weight,\n            lineHeight: button.lineHeight,\n            letterSpacing: button.letterSpacing\n          },\n          caption: {\n            fontSize: caption.size,\n            fontWeight: caption.weight,\n            lineHeight: caption.lineHeight,\n            letterSpacing: caption.letterSpacing\n          },\n          caption2: {\n            fontSize: caption2.size,\n            fontWeight: caption2.weight,\n            lineHeight: caption2.lineHeight,\n            letterSpacing: caption2.letterSpacing\n          },\n          overline: {\n            fontSize: overline.size,\n            fontWeight: overline.weight,\n            lineHeight: overline.lineHeight,\n            letterSpacing: overline.letterSpacing\n          }\n        }\n      }\n    });\n    return {\n      ...fullTheme,\n      isInitialized: isThemeInitialized,\n      setMode,\n      getThemeData\n    };\n  }, [\n    body1.letterSpacing,\n    body1.lineHeight,\n    body1.size,\n    body1.weight,\n    body2.letterSpacing,\n    body2.lineHeight,\n    body2.size,\n    body2.weight,\n    button.letterSpacing,\n    button.lineHeight,\n    button.size,\n    button.weight,\n    caption.letterSpacing,\n    caption.lineHeight,\n    caption.size,\n    caption.weight,\n    caption2.letterSpacing,\n    caption2.lineHeight,\n    caption2.size,\n    caption2.weight,\n    h1.letterSpacing,\n    h1.lineHeight,\n    h1.size,\n    h1.weight,\n    h2.letterSpacing,\n    h2.lineHeight,\n    h2.size,\n    h2.weight,\n    h3.letterSpacing,\n    h3.lineHeight,\n    h3.size,\n    h3.weight,\n    h4.letterSpacing,\n    h4.lineHeight,\n    h4.size,\n    h4.weight,\n    h5.letterSpacing,\n    h5.lineHeight,\n    h5.size,\n    h5.weight,\n    h6.letterSpacing,\n    h6.lineHeight,\n    h6.size,\n    h6.weight,\n    overline.letterSpacing,\n    overline.lineHeight,\n    overline.size,\n    overline.weight,\n    subtitle1.letterSpacing,\n    subtitle1.lineHeight,\n    subtitle1.size,\n    subtitle1.weight,\n    subtitle2.letterSpacing,\n    subtitle2.lineHeight,\n    subtitle2.size,\n    subtitle2.weight,\n    subtitle3.letterSpacing,\n    subtitle3.lineHeight,\n    subtitle3.size,\n    subtitle3.weight,\n    isThemeInitialized,\n    mode,\n    getThemeData,\n    resolvedTheme\n  ]);\n\n  return (\n    <MuiThemeProvider theme={theme}>\n      <CssBaseline />\n      {children}\n    </MuiThemeProvider>\n  );\n};\n"],"mappings":"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nB,YAAY,SAAS;OACrB,YAAY,SAAS;OACrB,eAAe,SAAS;OACzB;MACD,UAAU;OACR,UAAU,SAAS;OACnB,YAAY,SAAS;OACrB,YAAY,SAAS;OACrB,eAAe,SAAS;OACzB;MACF;KACF;IACF,CAAC;GAGA,eAAe;GACf;GACA;GACD;IACA;EACD,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,SAAS;EACT,SAAS;EACT,SAAS;EACT,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,SAAS;EACT,SAAS;EACT,SAAS;EACT,SAAS;EACT,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV,UAAU;EACV;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oCAAC,oBAAwB,SACvB,oCAAC,kBAAc,EACd,SACgB"}

package/dist/timeline-CdeAJqvB.js

@@ -0,0 +1,213 @@
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import React, { useState } from "react";
+import { Avatar, Card, CardContent, Fade, Typography, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { AlertSolidIcon, CalculatorAdditionIcon, CalculatorSubtractIcon, CheckMarkIcon, WarningSolidIcon } from "@fluentui/react-icons";
+import { Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineItem, TimelineOppositeContent, TimelineSeparator } from "@material-ui/lab";
+import TimeAgo from "timeago-react";
+import Timeline$1 from "@material-ui/lab/Timeline";
+
+//#region src/UI/timeline/UdpTimelineItemConnector.jsx
+const UdpTimelineConnector = (props) => {
+	return /* @__PURE__ */ React.createElement(TimelineConnector, props);
+};
+
+//#endregion
+//#region src/UI/timeline/ExtendActions.jsx
+const useStyles$3 = makeStyles((theme) => ({ root: {
+	display: "flex",
+	flexDirection: "row"
+} }));
+const ExtendActions = (props) => {
+	const classes = useStyles$3();
+	const { more, less, showMore, showLess } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, showMore && /* @__PURE__ */ React.createElement(FluentIconButton, {
+		onClick: more,
+		color: "primary",
+		icon: CalculatorAdditionIcon
+	}), showLess && /* @__PURE__ */ React.createElement(FluentIconButton, {
+		onClick: less,
+		color: "primary",
+		icon: CalculatorSubtractIcon
+	}));
+};
+var ExtendActions_default = ExtendActions;
+
+//#endregion
+//#region src/UI/timeline/UdpTimelineContent.jsx
+const UdpTimelineContent = (props) => {
+	return /* @__PURE__ */ React.createElement(TimelineContent, props);
+};
+
+//#endregion
+//#region src/UI/timeline/UdpTimelineDot.jsx
+const UdpTimelineDot = (props) => {
+	return /* @__PURE__ */ React.createElement(TimelineDot, props);
+};
+
+//#endregion
+//#region src/UI/timeline/UdpTimelineItemSeparator.jsx
+const UdpTimelineSeparator = (props) => {
+	return /* @__PURE__ */ React.createElement(TimelineSeparator, props);
+};
+
+//#endregion
+//#region src/UI/timeline/TimeEntryStates.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	avatar: {
+		width: 35,
+		height: 35,
+		fontSize: 16
+	},
+	spacer: {
+		marginTop: theme.spacing(1),
+		marginBottom: theme.spacing(1)
+	},
+	alert: { color: theme.palette.error.dark },
+	avatarWarning: {
+		width: 25,
+		height: 25,
+		fontSize: 12,
+		paddingLeft: 1,
+		paddingBottom: 1
+	}
+}));
+const TimeEntryStates = (props) => {
+	let eventState = "";
+	const { type } = props;
+	const classes = useStyles$2();
+	const theme = useTheme();
+	switch (type) {
+		case "alert":
+			eventState = /* @__PURE__ */ React.createElement(AlertSolidIcon, { className: clsx(classes.spacer, classes.alert) });
+			break;
+		case "success":
+			eventState = /* @__PURE__ */ React.createElement(Avatar, {
+				className: classes.avatar,
+				style: { backgroundColor: theme.palette.success.main }
+			}, /* @__PURE__ */ React.createElement(CheckMarkIcon, null));
+			break;
+		case "warning":
+			eventState = /* @__PURE__ */ React.createElement(Avatar, {
+				className: classes.avatarWarning,
+				style: { backgroundColor: theme.palette.warning.main }
+			}, /* @__PURE__ */ React.createElement(WarningSolidIcon, null));
+			break;
+		default: eventState = /* @__PURE__ */ React.createElement(TimelineDot, { variant: "outlined" });
+	}
+	return eventState;
+};
+
+//#endregion
+//#region src/UI/timeline/TimelineElement.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {},
+	extended: { maxWidth: 300 },
+	extendedButton: {
+		marginTop: theme.spacing(-1),
+		marginLeft: theme.spacing(1)
+	}
+}));
+const TimelineElement = (props) => {
+	const { time, entry, type, demoGraph, extend, extendOne, title, biasLeft } = props;
+	const classes = useStyles$1();
+	return /* @__PURE__ */ React.createElement(TimelineItem, null, /* @__PURE__ */ React.createElement(TimelineOppositeContent, null, /* @__PURE__ */ React.createElement(Typography, {
+		className: classes.time,
+		color: "textSecondary"
+	}, time)), /* @__PURE__ */ React.createElement(TimelineSeparator, null, /* @__PURE__ */ React.createElement(TimeEntryStates, { type }), /* @__PURE__ */ React.createElement(TimelineConnector, null)), /* @__PURE__ */ React.createElement(TimelineContent, { style: { flex: biasLeft ? 2 : 1 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, " ", title, " "), /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		justifyContent: "flex-start",
+		marginTop: 8
+	} }, /* @__PURE__ */ React.createElement(Typography, null, " ", entry, " "), demoGraph && /* @__PURE__ */ React.createElement(FluentIconButton, {
+		className: classes.extendedButton,
+		onClick: extend,
+		color: "primary",
+		icon: extendOne ? CalculatorSubtractIcon : CalculatorAdditionIcon
+	})), demoGraph));
+};
+var TimelineElement_default = TimelineElement;
+
+//#endregion
+//#region src/UI/timeline/TimeLine.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { position: "relative" },
+	extended: { display: "none" },
+	paper: {
+		position: "absolute",
+		bottom: -38,
+		left: -16,
+		width: "100%",
+		height: 0,
+		transition: theme.transitions.create("height", {
+			easing: theme.transitions.easing.easeOut,
+			duration: theme.transitions.duration.standard
+		})
+	},
+	expanded: { height: 500 },
+	extendedButton: {
+		display: "flex",
+		justifyContent: "flex-end"
+	},
+	actions: {
+		display: "flex",
+		justifyContent: "center",
+		marginBottom: theme.spacing(3)
+	},
+	biasLeft: {
+		display: "flex",
+		width: "100%"
+	}
+}));
+const TimeLine = ({ timelineData, semantic, biasLeft }) => {
+	const [initial, setInitial] = useState(6);
+	const [extendOne, setExtendOne] = useState(false);
+	const classes = useStyles();
+	const extend = () => {
+		setExtendOne(!extendOne);
+	};
+	const extendActions = /* @__PURE__ */ React.createElement(ExtendActions_default, {
+		more: () => setInitial(initial + 6),
+		less: () => setInitial(initial - 6),
+		showMore: initial < timelineData.length,
+		showLess: initial >= 6
+	});
+	return /* @__PURE__ */ React.createElement(Timeline$1, { className: classes.root }, timelineData && timelineData.map((item, index) => {
+		if (index <= initial) {
+			console.log(item);
+			return /* @__PURE__ */ React.createElement(TimelineElement_default, {
+				biasLeft,
+				key: index,
+				time: semantic ? /* @__PURE__ */ React.createElement(TimeAgo, { datetime: item.time }) : item.time,
+				entry: item.event,
+				type: item.type,
+				title: item.title,
+				extendOne,
+				extend,
+				demoGraph: item.extendedData && /* @__PURE__ */ React.createElement(Fade, { in: extendOne }, /* @__PURE__ */ React.createElement(Card, {
+					style: { backgroundColor: "white" },
+					elevation: 0,
+					className: !extendOne && classes.extended
+				}, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement("div", { className: classes.extendedButton }, item.moreInfo && item.moreInfo))))
+			});
+		}
+	}), biasLeft && /* @__PURE__ */ React.createElement("div", { className: classes.biasLeft }, /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement("div", { style: {
+		flex: 2,
+		marginLeft: -22
+	} }, extendActions)), !biasLeft && /* @__PURE__ */ React.createElement("div", { className: classes.actions }, extendActions));
+};
+
+//#endregion
+//#region src/UI/timeline/UdpTimeline.jsx
+const UdpTimeline = (props) => {
+	return /* @__PURE__ */ React.createElement(Timeline, props);
+};
+
+//#endregion
+//#region src/UI/timeline/UdpTimelineItem.jsx
+const UdpTimelineItem = (props) => {
+	return /* @__PURE__ */ React.createElement(TimelineItem, props);
+};
+
+//#endregion
+export { UdpTimelineSeparator as a, UdpTimelineConnector as c, TimeEntryStates as i, UdpTimeline as n, UdpTimelineDot as o, TimeLine as r, UdpTimelineContent as s, UdpTimelineItem as t };
+//# sourceMappingURL=timeline-CdeAJqvB.js.map

package/dist/timeline-CdeAJqvB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-CdeAJqvB.js","names":["useStyles","useStyles","useStyles","ExtendActions","Timeline","TimelineElement"],"sources":["../src/UI/timeline/UdpTimelineItemConnector.jsx","../src/UI/timeline/ExtendActions.jsx","../src/UI/timeline/UdpTimelineContent.jsx","../src/UI/timeline/UdpTimelineDot.jsx","../src/UI/timeline/UdpTimelineItemSeparator.jsx","../src/UI/timeline/TimeEntryStates.jsx","../src/UI/timeline/TimelineElement.jsx","../src/UI/timeline/TimeLine.jsx","../src/UI/timeline/UdpTimeline.jsx","../src/UI/timeline/UdpTimelineItem.jsx"],"sourcesContent":["import React from 'react';\nimport { TimelineConnector } from '@material-ui/lab';\n\nexport const UdpTimelineConnector = (props) => {\n  return <TimelineConnector {...props} />;\n};\n","import React from 'react'\nimport { makeStyles } from '@material-ui/core'\nimport { FluentIconButton } from '../inputs/buttons/FluentIconButton'\nimport {\n  CalculatorSubtractIcon,\n  CalculatorAdditionIcon\n} from '@fluentui/react-icons'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row'\n  }\n}))\n\nconst ExtendActions = (props) => {\n  const classes = useStyles()\n  const { more, less, showMore, showLess } = props\n\n  return (\n    <div className={classes.root}>\n      {showMore && (\n        <FluentIconButton\n          onClick={more}\n          color='primary'\n          icon={CalculatorAdditionIcon}\n        />\n      )}\n      {showLess && (\n        <FluentIconButton\n          onClick={less}\n          color='primary'\n          icon={CalculatorSubtractIcon}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default ExtendActions\n","import React from 'react';\nimport { TimelineContent } from '@material-ui/lab';\n\nexport const UdpTimelineContent = (props) => {\n  return <TimelineContent {...props} />;\n};\n","import React from 'react';\nimport { TimelineDot } from '@material-ui/lab';\n\nexport const UdpTimelineDot = (props) => {\n  return <TimelineDot {...props} />;\n};\n","import React from 'react';\nimport { TimelineSeparator } from '@material-ui/lab';\n\nexport const UdpTimelineSeparator = (props) => {\n  return <TimelineSeparator {...props} />;\n};\n","import React from 'react'\nimport { Avatar, makeStyles, useTheme } from '@material-ui/core'\nimport {\n  AlertSolidIcon,\n  CheckMarkIcon,\n  WarningSolidIcon\n} from '@fluentui/react-icons'\nimport { TimelineDot } from '@material-ui/lab'\nimport clsx from 'clsx'\n\nconst useStyles = makeStyles((theme) => ({\n  avatar: {\n    width: 35,\n    height: 35,\n    fontSize: 16\n  },\n  spacer: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  alert: {\n    color: theme.palette.error.dark\n  },\n  avatarWarning: {\n    width: 25,\n    height: 25,\n    fontSize: 12,\n    paddingLeft: 1,\n    paddingBottom: 1\n  }\n}))\n\nexport const TimeEntryStates = (props) => {\n  let eventState = ''\n  const { type } = props\n  const classes = useStyles()\n  const theme = useTheme()\n\n  switch (type) {\n    case 'alert':\n      eventState = (\n        <AlertSolidIcon className={clsx(classes.spacer, classes.alert)} />\n      )\n      break\n    case 'success':\n      eventState = (\n        <Avatar\n          className={classes.avatar}\n          style={{ backgroundColor: theme.palette.success.main }}\n        >\n          <CheckMarkIcon />\n        </Avatar>\n      )\n      break\n    case 'warning':\n      eventState = (\n        <Avatar\n          className={classes.avatarWarning}\n          style={{ backgroundColor: theme.palette.warning.main }}\n        >\n          <WarningSolidIcon />\n        </Avatar>\n      )\n      break\n\n    default:\n      eventState = <TimelineDot variant='outlined' />\n  }\n\n  return eventState\n}\n","import React from 'react'\nimport {\n  TimelineItem,\n  TimelineOppositeContent,\n  TimelineSeparator,\n  TimelineConnector,\n  TimelineContent\n} from '@material-ui/lab'\nimport { Typography, makeStyles } from '@material-ui/core'\nimport { TimeEntryStates } from './TimeEntryStates'\nimport { FluentIconButton } from '../inputs/buttons/FluentIconButton'\nimport {\n  CalculatorSubtractIcon,\n  CalculatorAdditionIcon\n} from '@fluentui/react-icons'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  extended: {\n    maxWidth: 300\n  },\n  extendedButton: {\n    marginTop: theme.spacing(-1),\n    marginLeft: theme.spacing(1)\n  }\n}))\n\nconst TimelineElement = (props) => {\n  const {\n    time,\n    entry,\n    type,\n    demoGraph,\n    extend,\n    extendOne,\n    title,\n    biasLeft\n  } = props\n  const classes = useStyles()\n  return (\n    <TimelineItem>\n      <TimelineOppositeContent>\n        <Typography className={classes.time} color='textSecondary'>\n          {time}\n        </Typography>\n      </TimelineOppositeContent>\n      <TimelineSeparator>\n        <TimeEntryStates type={type} />\n        <TimelineConnector />\n      </TimelineSeparator>\n      <TimelineContent style={{ flex: biasLeft ? 2 : 1 }}>\n        <Typography variant='subtitle2'> {title} </Typography>\n        <div\n          style={{\n            display: 'flex',\n            justifyContent: 'flex-start',\n            marginTop: 8\n          }}\n        >\n          <Typography> {entry} </Typography>\n          {demoGraph && (\n            <FluentIconButton\n              className={classes.extendedButton}\n              onClick={extend}\n              color='primary'\n              icon={extendOne ? CalculatorSubtractIcon : CalculatorAdditionIcon}\n            />\n          )}\n        </div>\n\n        {demoGraph}\n      </TimelineContent>\n    </TimelineItem>\n  )\n}\nexport default TimelineElement\n","import React, { useState } from 'react'\nimport { makeStyles, Fade, Card, CardContent } from '@material-ui/core'\nimport Timeline from '@material-ui/lab/Timeline'\nimport TimelineElement from './TimelineElement'\nimport TimeAgo from 'timeago-react'\nimport ExtendActions from './ExtendActions'\n// import { timelineData } from '../../test/MockTimelineData';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    position: 'relative'\n  },\n  extended: {\n    display: 'none'\n  },\n  paper: {\n    position: 'absolute',\n    bottom: -38,\n    left: -16,\n    width: '100%',\n    height: 0,\n    // transition: 'height 1s ',\n    transition: theme.transitions.create('height', {\n      easing: theme.transitions.easing.easeOut,\n      duration: theme.transitions.duration.standard\n    })\n  },\n  expanded: {\n    height: 500\n  },\n  extendedButton: {\n    display: 'flex',\n    justifyContent: 'flex-end'\n  },\n  actions: {\n    display: 'flex',\n    justifyContent: 'center',\n    marginBottom: theme.spacing(3)\n  },\n  biasLeft: {\n    display: 'flex',\n    width: '100%'\n  }\n}))\n\nexport const TimeLine = ({ timelineData, semantic, biasLeft }) => {\n  const [initial, setInitial] = useState(6)\n  const [extendOne, setExtendOne] = useState(false)\n  const classes = useStyles()\n\n  const extend = () => {\n    setExtendOne(!extendOne)\n  }\n\n  const extendActions = (\n    <ExtendActions\n      more={() => setInitial(initial + 6)}\n      less={() => setInitial(initial - 6)}\n      showMore={initial < timelineData.length}\n      showLess={initial >= 6}\n    />\n  )\n\n  return (\n    <Timeline\n      // align=\"alternate\"\n      className={classes.root}\n    >\n      {timelineData &&\n        timelineData.map((item, index) => {\n          if (index <= initial) {\n            console.log(item)\n            return (\n              <TimelineElement\n                biasLeft={biasLeft}\n                key={index}\n                time={semantic ? <TimeAgo datetime={item.time} /> : item.time}\n                entry={item.event}\n                type={item.type}\n                title={item.title}\n                extendOne={extendOne}\n                extend={extend}\n                demoGraph={\n                  item.extendedData && (\n                    <Fade in={extendOne}>\n                      <Card\n                        style={{ backgroundColor: 'white' }}\n                        elevation={0}\n                        className={!extendOne && classes.extended}\n                      >\n                        <CardContent>\n                          <div className={classes.extendedButton}>\n                            {item.moreInfo && item.moreInfo}\n                          </div>\n                        </CardContent>\n                      </Card>\n                    </Fade>\n                  )\n                }\n              />\n            )\n          }\n        })}\n      {biasLeft && (\n        <div className={classes.biasLeft}>\n          <div style={{ flex: 1 }} />\n          <div style={{ flex: 2, marginLeft: -22 }}>{extendActions}</div>\n        </div>\n      )}\n      {!biasLeft && <div className={classes.actions}>{extendActions}</div>}\n    </Timeline>\n  )\n}\n\nexport default TimeLine\n","import React from 'react';\nimport { Timeline } from '@material-ui/lab';\n\nexport const UdpTimeline = (props) => {\n  return <Timeline {...props} />;\n};\n","import React from 'react';\nimport { TimelineItem } from '@material-ui/lab';\n\nexport const UdpTimelineItem = (props) => {\n  return <TimelineItem {...props} />;\n};\n"],"mappings":"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"}

package/dist/treeMenu/index.js

@@ -1,3 +1,3 @@
-import { n as BaseTreeMenuItem, t as BaseTreeMenu } from "../BaseTreeMenu-B4d--j95.js";
+import { n as BaseTreeMenuItem, t as BaseTreeMenu } from "../BaseTreeMenu-koW5kjhb.js";
 
 export { BaseTreeMenu, BaseTreeMenuItem };

package/dist/types/src/UI/forms/UdpTransactionEmailForm.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const UdpTransactionEmailForm: ({ existingTransactionAttachments, toOptions, ccOptions, toLabelFunction, ccLabelFunction, attachmentsLabelFunction }: {
+    attachmentsLabelFunction: any;
+    ccLabelFunction: any;
+    ccOptions: any;
+    existingTransactionAttachments: any;
+    toLabelFunction: any;
+    toOptions: any;
+}) => React.JSX.Element;
+//# sourceMappingURL=UdpTransactionEmailForm.d.ts.map