udp-react-enterprise-component-library 25.18.1-beta.3 → 25.18.1-beta.31

package/dist/DynamicRangeSlider-prr4fg8d.js

@@ -0,0 +1,569 @@
+import { t as colors$1 } from "./colors-BONxjrOE.js";
+import { t as getCategoryColor } from "./colorConverter-x64WSLsF.js";
+import { t as LayoutUnit } from "./LayoutUnit-D4jJvonh.js";
+import { n as TimelineStatus, r as TimelineDateBar } from "./MttYearTag-Cw8OyKTy.js";
+import { t as TimelineToken } from "./TimelineToken-nU7fdgjR.js";
+import React, { memo, useState } from "react";
+import { Divider, Typography, lighten, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { AlarmClockIcon, BankIcon, ChromeCloseIcon, CustomListIcon, DietPlanNotebookIcon, MessageIcon, MoneyIcon, SendIcon, SpeedHighIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import Skeleton from "@material-ui/lab/Skeleton";
+import RangeSlider from "react-range-slider-input";
+
+//#region src/componentSystems/multiThreadTimeline/ui/TimelineHoverCard.jsx
+const useStyles$8 = makeStyles((theme) => ({
+	root: {},
+	hover: {
+		position: "absolute",
+		top: 16,
+		left: (props) => props.offset ? props.offset : 20,
+		padding: theme.spacing(3),
+		paddingTop: (props) => props.popover ? theme.spacing(1) : theme.spacing(2),
+		paddingRight: theme.spacing(2),
+		background: theme.palette.common.white,
+		boxShadow: `0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%), 0px 11px 15px -7px rgb(0 0 0 / 20%)`,
+		borderRadius: theme.spacing(1),
+		zIndex: 99,
+		minWidth: 190
+	},
+	close: { cursor: "pointer" },
+	displayHeader: {
+		position: "absolute",
+		right: theme.spacing(2),
+		top: theme.spacing(1)
+	}
+}));
+const TimelineHoverCard = (props) => {
+	const { children } = props;
+	const classes = useStyles$8(props);
+	const { className, popover = true } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, className) }, /* @__PURE__ */ React.createElement("div", { className: classes.hover }, /* @__PURE__ */ React.createElement("div", { className: classes.displayHeader }, popover && /* @__PURE__ */ React.createElement("div", { className: classes.close }, /* @__PURE__ */ React.createElement(ChromeCloseIcon, { style: {
+		width: 10,
+		height: 10
+	} }))), children));
+};
+TimelineHoverCard.propTypes = {
+	children: PropTypes.node,
+	className: PropTypes.string,
+	popover: PropTypes.bool,
+	offset: PropTypes.number
+};
+
+//#endregion
+//#region src/componentSystems/multiThreadTimeline/ui/TimelineDot.jsx
+const useStyles$7 = makeStyles((theme) => ({
+	root: {},
+	dot: {
+		width: theme.spacing(2),
+		height: theme.spacing(2),
+		background: (props) => props.color ? props.color : theme.palette.secondary.main,
+		borderRadius: 50,
+		margin: theme.spacing(2),
+		color: theme.palette.common.white
+	},
+	hover: { position: "relative" },
+	title: {
+		transform: "rotate(90deg)",
+		background: lighten(theme.palette.common.black, .8),
+		borderRadius: 4,
+		padding: theme.spacing(1),
+		paddingTop: theme.spacing(.5),
+		paddingBottom: theme.spacing(.5),
+		marginTop: theme.spacing(1),
+		textTransform: "capitalize",
+		position: "absolute",
+		top: 70,
+		left: -31,
+		width: 115
+	}
+}));
+const TimelineDot = (props) => {
+	const { hoverContent, title, hideLable = true } = props;
+	const classes = useStyles$7(props);
+	const [hover, setHover] = useState(false);
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: classes.dot }, /* @__PURE__ */ React.createElement("div", {
+		className: classes.hover,
+		style: { display: hover ? "inline" : "none" }
+	}, hoverContent)), !hideLable && /* @__PURE__ */ React.createElement("div", { className: classes.title }, /* @__PURE__ */ React.createElement(Typography, null, /* @__PURE__ */ React.createElement("span", { style: { fontWeight: 700 } }, " ", title))));
+};
+TimelineDot.propTypes = {
+	hoverContent: PropTypes.node,
+	title: PropTypes.string,
+	hideLable: PropTypes.bool,
+	color: PropTypes.string
+};
+
+//#endregion
+//#region src/componentSystems/multiThreadTimeline/ui/TimelineTokenSummary.jsx
+const useStyles$6 = makeStyles((theme) => ({
+	root: { height: 200 },
+	timelineWrapper: {
+		background: lighten(theme.palette.secondary.main, .7),
+		height: 40,
+		borderRadius: 50,
+		position: (props) => props.relative ? "relative" : "absolute"
+	},
+	token: {
+		position: (props) => props.relative ? "relative" : "absolute",
+		top: (props) => props.top - 9,
+		left: (props) => props.left - 2,
+		transition: "1s",
+		cursor: "pointer",
+		"&:hover": {}
+	},
+	summaryRoot: {},
+	negativeMargin: { marginTop: -6 },
+	titleContainer: {
+		textOverflow: "ellipsis",
+		overflow: "hidden",
+		borderRadius: 4,
+		paddingLeft: 4,
+		paddingRight: 2
+	}
+}), { name: "TimelineTokenSummary" });
+const TimelineTokenSummary = (props) => {
+	const { timelineItem, onClick, isHover, title, showLabel = true, dot, color, date, message, amount, user, status, summary, iconColor, showToken, details = true, icon } = props;
+	const classes = useStyles$6(props);
+	const theme = useTheme();
+	const TimelineSummary = ({ message: message$1 }) => {
+		return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: {
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+			alignItems: "center"
+		} }, summary && /* @__PURE__ */ React.createElement("div", { style: { height: 24 } }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" })), /* @__PURE__ */ React.createElement("div", {
+			className: classes.summaryRoot,
+			style: { display: "flex" }
+		}, /* @__PURE__ */ React.createElement("div", {
+			className: classes.titleContainer,
+			style: { height: summary && 90 }
+		}, /* @__PURE__ */ React.createElement(Typography, {
+			variant: "caption",
+			style: {
+				fontWeight: 700,
+				textOverflow: "ellipsis",
+				overflow: "hidden"
+			}
+		}, title), details && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement(Typography, null, amount), /* @__PURE__ */ React.createElement(TimelineStatus, { status }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, message$1), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, user))))))));
+	};
+	const NodeItem = ({ dot: dot$1, icon: icon$1 }) => {
+		return /* @__PURE__ */ React.createElement("div", {
+			className: classes.token,
+			onClick
+		}, (dot$1 || showToken) && /* @__PURE__ */ React.createElement(TimelineToken, {
+			color: colors$1.unity?.info?.hint,
+			icon: icon$1,
+			size: "small",
+			iconColorOverride: iconColor,
+			onClick,
+			action: true,
+			isHover,
+			hoverContainer: /* @__PURE__ */ React.createElement(TimelineHoverCard, {
+				date,
+				categoryColor: theme.palette.info.main,
+				message,
+				timelineItem
+			})
+		}, " "), !dot$1 && !summary && /* @__PURE__ */ React.createElement(TimelineDot, {
+			title,
+			date,
+			color,
+			hoverContent: /* @__PURE__ */ React.createElement(TimelineHoverCard, {
+				date,
+				categoryColor: theme.palette.info.main,
+				message,
+				timelineItem
+			})
+		}), showLabel && !dot$1 && /* @__PURE__ */ React.createElement(TimelineSummary, { message }));
+	};
+	switch (timelineItem) {
+		case "Email": break;
+		case "ServiceOrder": break;
+		case "SMS": break;
+		case "Web Payment": break;
+		case "Deposit - Regular": break;
+		case "Start Read": break;
+		case "Regular Bill": break;
+		case "Email Notify": break;
+		case "Payment": break;
+		case "Bill": break;
+		case "Service Order": break;
+		case "Late": break;
+		case "Letter": break;
+		case "Disc": break;
+		default:
+	}
+	return /* @__PURE__ */ React.createElement(NodeItem, {
+		icon: icon ? icon : MoneyIcon,
+		dot
+	});
+};
+TimelineTokenSummary.propTypes = {
+	timelineItem: PropTypes.string.isRequired,
+	onClick: PropTypes.func,
+	isHover: PropTypes.bool,
+	title: PropTypes.string,
+	showLabel: PropTypes.bool,
+	dot: PropTypes.bool,
+	color: PropTypes.string,
+	date: PropTypes.string,
+	message: PropTypes.string,
+	amount: PropTypes.string,
+	user: PropTypes.string,
+	status: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	summary: PropTypes.bool,
+	iconColor: PropTypes.string,
+	showToken: PropTypes.bool,
+	details: PropTypes.bool,
+	icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.object])
+};
+
+//#endregion
+//#region src/componentSystems/multiThreadTimeline/ui/TimelineNode.jsx
+const useStyles$5 = makeStyles((theme) => ({
+	root: {},
+	wrapper: {
+		display: "flex",
+		flexDirection: "column",
+		alignContent: "space-between",
+		alignItems: "center"
+	},
+	label: {
+		width: 46,
+		textAlign: "center"
+	}
+}));
+const TimelineNode = memo((props) => {
+	const [hover, setHover] = useState(false);
+	const { data, height = 187, details = true, show = false, width, dot, iconColor, dotColor, test, icon } = props;
+	const classes = useStyles$5(props);
+	const maxLineLength = 8;
+	const maxLines = 2;
+	const capitalizeFirstLetter = (str) => {
+		return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+	};
+	const formatString = (str) => {
+		let formattedStr = "";
+		let lineCount = 0;
+		let words = str.split(" ");
+		for (let i = 0; i < words.length && lineCount < maxLines; i++) {
+			let line = "";
+			while (i < words.length && line.length + words[i].length <= maxLineLength) {
+				line += capitalizeFirstLetter(words[i]) + " ";
+				i++;
+			}
+			if (line.length > maxLineLength) line = line.slice(0, maxLineLength - 3) + "...";
+			formattedStr += line.trim() + "\n";
+			lineCount++;
+			i--;
+		}
+		return formattedStr.trim();
+	};
+	return /* @__PURE__ */ React.createElement("div", {
+		onMouseDownCapture: () => setHover(!hover),
+		className: classes.root,
+		style: {
+			background: details && "whitesmoke",
+			width
+		}
+	}, /* @__PURE__ */ React.createElement("div", null, test, " "), data.map((item) => {
+		return /* @__PURE__ */ React.createElement("div", null, (hover || show) && /* @__PURE__ */ React.createElement(TimelineHoverCard, { offset: 0 }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, item.details.shortDescription)), /* @__PURE__ */ React.createElement("div", null, item.details.data1 ? /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, item.details.data1) : /* @__PURE__ */ React.createElement(TimelineStatus, { status: item.details.data2 })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, item.details.date)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, item.details.data3))), /* @__PURE__ */ React.createElement("div", {
+			className: classes.wrapper,
+			style: { height: height - 4 }
+		}, /* @__PURE__ */ React.createElement("div", { style: { marginRight: -8 } }, /* @__PURE__ */ React.createElement(TimelineTokenSummary, {
+			dot,
+			color: dotColor,
+			relative: true,
+			timelineItem: item.details.transactionType,
+			iconColor,
+			icon,
+			removeHeight: true
+		})), /* @__PURE__ */ React.createElement("div", {
+			className: classes.label,
+			style: { marginTop: !details && -3 }
+		}, dot && /* @__PURE__ */ React.createElement(Typography, {
+			variant: "subtitle2",
+			style: { lineHeight: "0.9rem" }
+		}, formatString(item.details.shortDescription))), details && /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), details && /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement("div", null, item.details.data1 && item.details.data1.toString().trim() !== "" ? /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, item.details.data1) : /* @__PURE__ */ React.createElement(TimelineStatus, { status: Number(item.details.data2) })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, item.details.date)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, item.details.data3)))), details && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TimelineDateBar, { month: Number(item.date.toString().charAt(0)) })));
+	}));
+});
+TimelineNode.propTypes = {
+	data: PropTypes.array.isRequired,
+	height: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+	details: PropTypes.bool,
+	show: PropTypes.bool,
+	width: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
+		PropTypes.bool
+	]),
+	dot: PropTypes.bool,
+	iconColor: PropTypes.string,
+	dotColor: PropTypes.string,
+	test: PropTypes.string,
+	icon: PropTypes.element
+};
+
+//#endregion
+//#region src/componentSystems/multiThreadTimeline/ui/TimelineWrapper.jsx
+const useStyles$4 = makeStyles((theme) => ({
+	root: {},
+	timelineWrapper: {
+		background: lighten(theme.palette.secondary.main, .7),
+		height: 40,
+		borderRadius: 50
+	},
+	dot: {
+		width: 30,
+		height: 30,
+		borderRadius: 50
+	},
+	colorOne: { background: lighten(theme.palette.success.main, .8) },
+	colorTwo: { background: lighten(theme.palette.info.main, .8) },
+	colorThree: { background: lighten(theme.palette.secondary.main, .9) },
+	colorFour: { background: getCategoryColor("four") },
+	colorFive: { background: getCategoryColor("five") },
+	colorSix: { background: getCategoryColor("six") },
+	colorSeven: { background: lighten(theme.palette.warning.main, .9) }
+}), { name: "Timeline" });
+const TimelineWrapper = ({ style, timeline }) => {
+	const classes = useStyles$4();
+	let type = "";
+	switch (timeline) {
+		case 1:
+			type = /* @__PURE__ */ React.createElement("div", {
+				className: clsx(classes.timelineWrapper, classes.colorOne),
+				style
+			});
+			break;
+		case 2:
+			type = /* @__PURE__ */ React.createElement("div", {
+				className: clsx(classes.timelineWrapper, classes.colorTwo),
+				style
+			});
+			break;
+		case 3:
+			type = /* @__PURE__ */ React.createElement("div", {
+				className: clsx(classes.timelineWrapper, classes.colorThree),
+				style
+			});
+			break;
+		case 4:
+			type = /* @__PURE__ */ React.createElement("div", {
+				className: clsx(classes.timelineWrapper, classes.colorFour),
+				style
+			});
+			break;
+		case 5:
+			type = /* @__PURE__ */ React.createElement("div", {
+				className: clsx(classes.timelineWrapper, classes.colorFive),
+				style
+			});
+			break;
+		case 6:
+			type = /* @__PURE__ */ React.createElement("div", {
+				className: clsx(classes.timelineWrapper, classes.colorSix),
+				style
+			});
+			break;
+		case 7:
+			type = /* @__PURE__ */ React.createElement("div", {
+				className: clsx(classes.timelineWrapper, classes.colorSeven),
+				style
+			});
+			break;
+		default:
+	}
+	return type;
+};
+TimelineWrapper.propTypes = {
+	style: PropTypes.object,
+	timeline: PropTypes.oneOf([
+		1,
+		2,
+		3,
+		4,
+		5,
+		6,
+		7
+	]).isRequired
+};
+
+//#endregion
+//#region src/componentSystems/multiThreadTimeline/ui/MultiDot.jsx
+const useStyles$3 = makeStyles((theme) => ({
+	root: { cursor: "pointer" },
+	wrapper: {
+		width: 130,
+		marginBottom: theme.spacing(2)
+	}
+}));
+const MultiDot = (props) => {
+	const { map, number } = props;
+	const classes = useStyles$3(props);
+	const { className } = props;
+	const [hover, setHover] = useState(false);
+	return /* @__PURE__ */ React.createElement("div", {
+		className: clsx(classes.root, className),
+		onMouseDownCapture: () => setHover(!hover)
+	}, /* @__PURE__ */ React.createElement("div", { style: {
+		paddingLeft: 16,
+		paddingRight: 16,
+		paddingTop: 10,
+		paddingBottom: 10,
+		background: "#918296",
+		borderRadius: 50,
+		color: "white"
+	} }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, " ", number, " ")), hover && /* @__PURE__ */ React.createElement(TimelineHoverCard, null, map.map((item) => {
+		return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, item.details.shortDescription), /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", item.details.date, " "), /* @__PURE__ */ React.createElement(TimelineStatus, { status: item.details.status }));
+	})));
+};
+MultiDot.propTypes = {
+	map: PropTypes.arrayOf(PropTypes.shape({ details: PropTypes.shape({
+		shortDescription: PropTypes.string.isRequired,
+		date: PropTypes.string.isRequired,
+		status: PropTypes.string.isRequired
+	}).isRequired })).isRequired,
+	number: PropTypes.number.isRequired,
+	className: PropTypes.string
+};
+
+//#endregion
+//#region src/componentSystems/multiThreadTimeline/ui/VisualizationDot.jsx
+const useStyles$2 = makeStyles((theme) => ({
+	root: {
+		minHeight: theme.spacing(1.25),
+		minWidth: theme.spacing(1.25),
+		borderRadius: 25,
+		cursor: (props) => props.hover && "pointer"
+	},
+	multi: {
+		padding: 11,
+		paddingTop: 5,
+		paddingBottom: 5,
+		color: theme.palette.common.white
+	}
+}));
+const VisualizationDot = (props) => {
+	const theme = useTheme();
+	const classes = useStyles$2(props);
+	const { type, children, hover, multi, noHover } = props;
+	const [showHover, setShowHover] = useState();
+	const DotWrapper = ({ color }) => {
+		return /* @__PURE__ */ React.createElement("div", {
+			onMouseEnter: () => setShowHover(true),
+			onMouseLeave: () => setShowHover(false),
+			className: clsx(classes.root, multi && classes.multi),
+			style: { background: color }
+		}, children, showHover && !noHover && /* @__PURE__ */ React.createElement(TimelineHoverCard, { popover: false }, " ", hover, " "));
+	};
+	let dot = theme.palette.primary.main;
+	switch (type) {
+		case "Late Bill":
+			dot = /* @__PURE__ */ React.createElement(DotWrapper, { color: theme.palette.warning.light });
+			break;
+		case "Disconnect":
+			dot = /* @__PURE__ */ React.createElement(DotWrapper, { color: theme.palette.error.main });
+			break;
+		case "Letter Sent":
+			dot = /* @__PURE__ */ React.createElement(DotWrapper, { color: theme.palette.warning.dark });
+			break;
+		case "Payment":
+			dot = /* @__PURE__ */ React.createElement(DotWrapper, { color: theme.palette.success.main });
+			break;
+		case "Arrange Pay":
+			dot = /* @__PURE__ */ React.createElement(DotWrapper, { color: theme.palette.warning.main });
+			break;
+		default:
+			dot = /* @__PURE__ */ React.createElement(DotWrapper, { color: theme.palette.info.light });
+			break;
+	}
+	return dot;
+};
+VisualizationDot.propTypes = {
+	type: PropTypes.string,
+	children: PropTypes.node,
+	hover: PropTypes.node,
+	multi: PropTypes.bool,
+	noHover: PropTypes.bool
+};
+
+//#endregion
+//#region src/componentSystems/multiThreadTimeline/ui/TimelinePreloaderNode.jsx
+const useStyles$1 = makeStyles((theme) => ({ root: {} }));
+const TimelinePreloaderNode = (props) => {
+	const { children, shortView } = props;
+	const classes = useStyles$1(props);
+	const { className, longView } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, className) }, shortView && /* @__PURE__ */ React.createElement("div", { style: {
+		marginRight: 100,
+		marginBottom: 40
+	} }, /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		justifyContent: "center"
+	} }, /* @__PURE__ */ React.createElement(Skeleton, {
+		variant: "circle",
+		width: 30,
+		height: 30
+	})), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement("div", { style: {
+		display: "flex",
+		justifyContent: "center"
+	} }, /* @__PURE__ */ React.createElement(Skeleton, {
+		variant: "rect",
+		width: 1,
+		height: 25
+	})), /* @__PURE__ */ React.createElement(Skeleton, { variant: "text" }), /* @__PURE__ */ React.createElement(Skeleton, { variant: "text" }), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "sm" }), /* @__PURE__ */ React.createElement(Skeleton, {
+		variant: "rect",
+		width: 80,
+		height: 6
+	})), longView && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Skeleton, {
+		variant: "rect",
+		width: 800,
+		height: 45
+	})));
+};
+TimelinePreloaderNode.propTypes = {
+	children: PropTypes.node,
+	shortView: PropTypes.bool,
+	longView: PropTypes.bool,
+	className: PropTypes.string
+};
+
+//#endregion
+//#region src/componentSystems/multiThreadTimeline/ui/DynamicRangeSlider.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	rangeSlider: {
+		"& .range-slider__thumb": {
+			width: theme.spacing(2.25),
+			height: (props) => `calc(${props.margin}px + ${props.threads}px )`,
+			borderRadius: theme.spacing(.5),
+			background: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23333' viewBox='0 0 24 24'%3E%3Cpath d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z' /%3E%3C/svg%3E\") #fff",
+			backgroundRepeat: "no-repeat",
+			backgroundPosition: "center"
+		},
+		"& .range-slider__range": {
+			background: "transparent",
+			border: "4px solid #fff",
+			boxSizing: "border-box",
+			boxShadow: "0 0 0 9999px rgba(194, 194, 194, 0.75)",
+			zIndex: 0
+		},
+		height: (props) => `calc(${props.margin}px + ${props.threads}px )`,
+		background: "whitesmoke",
+		overflow: "hidden"
+	}
+}));
+const DynamicRangeSlider = (props) => {
+	const { children, ...otherProps } = props;
+	const classes = useStyles(props);
+	return /* @__PURE__ */ React.createElement(RangeSlider, {
+		className: classes.rangeSlider,
+		...otherProps
+	});
+};
+
+//#endregion
+export { TimelineWrapper as a, TimelineDot as c, MultiDot as i, TimelineHoverCard as l, TimelinePreloaderNode as n, TimelineNode as o, VisualizationDot as r, TimelineTokenSummary as s, DynamicRangeSlider as t };
+//# sourceMappingURL=DynamicRangeSlider-prr4fg8d.js.map

package/dist/DynamicRangeSlider-prr4fg8d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicRangeSlider-prr4fg8d.js","names":["useStyles","useStyles","useStyles","message","dot","colors","icon","useStyles","useStyles","useStyles","useStyles","useStyles"],"sources":["../src/componentSystems/multiThreadTimeline/ui/TimelineHoverCard.jsx","../src/componentSystems/multiThreadTimeline/ui/TimelineDot.jsx","../src/componentSystems/multiThreadTimeline/ui/TimelineTokenSummary.jsx","../src/componentSystems/multiThreadTimeline/ui/TimelineNode.jsx","../src/componentSystems/multiThreadTimeline/ui/TimelineWrapper.jsx","../src/componentSystems/multiThreadTimeline/ui/MultiDot.jsx","../src/componentSystems/multiThreadTimeline/ui/VisualizationDot.jsx","../src/componentSystems/multiThreadTimeline/ui/TimelinePreloaderNode.jsx","../src/componentSystems/multiThreadTimeline/ui/DynamicRangeSlider.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport clsx from 'clsx';\nimport { ChromeCloseIcon } from '@fluentui/react-icons';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  hover: {\n    position: 'absolute',\n    top: 16,\n    left: (props) => (props.offset ? props.offset : 20),\n    padding: theme.spacing(3),\n    paddingTop: (props) =>\n      props.popover ? theme.spacing(1) : theme.spacing(2),\n    paddingRight: theme.spacing(2),\n    background: theme.palette.common.white,\n    boxShadow: `0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%), 0px 11px 15px -7px rgb(0 0 0 / 20%)`,\n    borderRadius: theme.spacing(1),\n    zIndex: 99,\n    minWidth: 190\n  },\n  close: {\n    cursor: 'pointer'\n  },\n  displayHeader: {\n    position: 'absolute',\n    right: theme.spacing(2),\n    top: theme.spacing(1)\n  }\n}));\n\nexport const TimelineHoverCard = (props) => {\n  const { children } = props;\n  const classes = useStyles(props);\n  const { className, popover = true } = props;\n\n  return (\n    <div className={clsx(classes.root, className)}>\n      <div className={classes.hover}>\n        <div className={classes.displayHeader}>\n          {popover && (\n            <div className={classes.close}>\n              <ChromeCloseIcon style={{ width: 10, height: 10 }} />\n            </div>\n          )}\n        </div>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nTimelineHoverCard.propTypes = {\n  children: PropTypes.node,\n  className: PropTypes.string,\n  popover: PropTypes.bool,\n  offset: PropTypes.number\n};\n","import React, { useState } from 'react';\nimport { lighten, makeStyles, Typography } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  dot: {\n    width: theme.spacing(2),\n    height: theme.spacing(2),\n    background: (props) =>\n      props.color ? props.color : theme.palette.secondary.main,\n    borderRadius: 50,\n    margin: theme.spacing(2),\n    color: theme.palette.common.white\n  },\n  hover: {\n    position: 'relative'\n  },\n  title: {\n    transform: 'rotate(90deg)',\n    background: lighten(theme.palette.common.black, 0.8),\n    borderRadius: 4,\n    padding: theme.spacing(1),\n    paddingTop: theme.spacing(0.5),\n    paddingBottom: theme.spacing(0.5),\n    marginTop: theme.spacing(1),\n    textTransform: 'capitalize',\n    position: 'absolute',\n    top: 70,\n    left: -31,\n    width: 115\n  }\n}));\n\nexport const TimelineDot = (props) => {\n  const { hoverContent, title, hideLable = true } = props;\n  const classes = useStyles(props);\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <div>\n      <div className={classes.dot}>\n        <div\n          className={classes.hover}\n          style={{ display: hover ? 'inline' : 'none' }}\n        >\n          {hoverContent}\n        </div>\n      </div>\n      {!hideLable && (\n        <div className={classes.title}>\n          <Typography>\n            <span style={{ fontWeight: 700 }}> {title}</span>\n          </Typography>\n        </div>\n      )}\n    </div>\n  );\n};\n\nTimelineDot.propTypes = {\n  hoverContent: PropTypes.node,\n  title: PropTypes.string,\n  hideLable: PropTypes.bool,\n  color: PropTypes.string\n};\n","import React from 'react';\nimport {\n  makeStyles,\n  lighten,\n  useTheme,\n  Typography,\n  Divider\n} from '@material-ui/core';\nimport { TimelineToken } from './modified/TimelineToken';\nimport {\n  CustomListIcon,\n  AlarmClockIcon,\n  SendIcon,\n  SpeedHighIcon,\n  BankIcon,\n  MoneyIcon,\n  MessageIcon,\n  DietPlanNotebookIcon\n} from '@fluentui/react-icons';\nimport { colors } from '../../../utilities/style/colors';\nimport { TimelineHoverCard } from './TimelineHoverCard';\nimport { TimelineDot } from './TimelineDot';\nimport { TimelineStatus } from './TimelineStatus';\nimport { LayoutUnit } from '../../../layout/LayoutUnit';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {\n      height: 200\n    },\n    timelineWrapper: {\n      background: lighten(theme.palette.secondary.main, 0.7),\n      height: 40,\n      borderRadius: 50,\n      position: (props) => (props.relative ? 'relative' : 'absolute')\n    },\n    token: {\n      position: (props) => (props.relative ? 'relative' : 'absolute'),\n      top: (props) => props.top - 9,\n      left: (props) => props.left - 2,\n      transition: '1s',\n      cursor: 'pointer',\n      '&:hover': {}\n    },\n    // summaryRoot: {\n    //   display: 'flex',\n    //   flexDirection: 'column',\n    //   alignItems: 'center',\n    //   color: 'grey',\n\n    // },\n    summaryRoot: {\n      //marginRight: theme.spacing(4),\n      //width: 100\n    },\n    negativeMargin: {\n      marginTop: -6\n    },\n    titleContainer: {\n      textOverflow: 'ellipsis',\n      //background: lighten(theme.palette.common.black, 0.9),\n      overflow: 'hidden',\n      //color: theme.palette.common.white,\n      borderRadius: 4,\n      paddingLeft: 4,\n      paddingRight: 2\n    }\n  }),\n  { name: 'TimelineTokenSummary' }\n);\n\nexport const TimelineTokenSummary = (props) => {\n  const {\n    timelineItem,\n    onClick,\n    isHover,\n    title,\n    showLabel = true,\n    dot,\n    color,\n    date,\n    message,\n    amount,\n    user,\n    status,\n    summary,\n    iconColor,\n    showToken,\n    details = true,\n    icon\n  } = props;\n  const classes = useStyles(props);\n  let type = '';\n  const theme = useTheme();\n\n  const TimelineSummary = ({ message }) => {\n    return (\n      <div>\n        <div\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center'\n          }}\n        >\n          {summary && (\n            <div style={{ height: 24 }}>\n              <Divider orientation='vertical' />\n            </div>\n          )}\n\n          <div className={classes.summaryRoot} style={{ display: 'flex' }}>\n            {/* <div className={classes.titleContainer} style={{width: scale}} > */}\n\n            {/* <div className={classes.titleContainer} style={{height: details && 90}} > */}\n            <div\n              className={classes.titleContainer}\n              style={{ height: summary && 90 }}\n            >\n              <Typography\n                variant='caption'\n                style={{\n                  fontWeight: 700,\n                  textOverflow: 'ellipsis',\n                  overflow: 'hidden'\n                }}\n              >\n                {title}\n              </Typography>\n\n              {details && (\n                <div>\n                  <LayoutUnit unit='nudge' />\n                  <Typography>\n                    {/* {amount && '$' }  {amount} */}\n                    {amount}\n                  </Typography>\n                  <TimelineStatus status={status} />\n                  <div>\n                    <Typography variant='caption'>{message}</Typography>\n                    <div>\n                      <Typography variant='caption'>{user}</Typography>\n                    </div>\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  };\n\n  const NodeItem = ({ dot, icon }) => {\n    return (\n      <div className={classes.token} onClick={onClick}>\n        {(dot || showToken) && (\n          <TimelineToken\n            color={colors.unity?.info?.hint}\n            icon={icon}\n            size='small'\n            // iconColorOverride={theme.palette.info.light}\n            iconColorOverride={iconColor}\n            onClick={onClick}\n            action\n            isHover={isHover}\n            hoverContainer={\n              <TimelineHoverCard\n                date={date}\n                categoryColor={theme.palette.info.main}\n                message={message}\n                timelineItem={timelineItem}\n              />\n            }\n          >\n            {' '}\n          </TimelineToken>\n        )}\n        {!dot && !summary && (\n          <TimelineDot\n            title={title}\n            date={date}\n            color={color}\n            hoverContent={\n              <TimelineHoverCard\n                date={date}\n                categoryColor={theme.palette.info.main}\n                message={message}\n                timelineItem={timelineItem}\n              />\n            }\n          />\n        )}\n        {showLabel && !dot && <TimelineSummary message={message} />}\n      </div>\n    );\n  };\n\n  switch (timelineItem) {\n    case 'Email':\n      type = <NodeItem icon={SendIcon} dot={dot} />;\n      break;\n    case 'ServiceOrder':\n      type = <NodeItem icon={CustomListIcon} dot={dot} />;\n      break;\n    case 'SMS':\n      type = <NodeItem icon={MessageIcon} dot={dot} />;\n      break;\n    case 'Web Payment':\n      type = <NodeItem icon={BankIcon} dot={dot} />;\n      break;\n    case 'Deposit - Regular':\n      type = <NodeItem icon={AlarmClockIcon} dot={dot} />;\n      break;\n    case 'Start Read':\n      type = <NodeItem icon={SpeedHighIcon} dot={dot} />;\n      break;\n    case 'Regular Bill':\n      type = <NodeItem icon={DietPlanNotebookIcon} dot={dot} />;\n      break;\n    case 'Email Notify':\n      type = <NodeItem icon={MoneyIcon} dot={dot} />;\n      break;\n    case 'Payment':\n      type = <NodeItem icon={MoneyIcon} dot={dot} />;\n      break;\n    case 'Bill':\n      type = <NodeItem icon={MoneyIcon} dot={dot} />;\n      break;\n    case 'Service Order':\n      type = <NodeItem icon={MoneyIcon} dot={dot} />;\n      break;\n    case 'Late':\n      type = <NodeItem icon={MoneyIcon} dot={dot} />;\n      break;\n    case 'Letter':\n      type = <NodeItem icon={MoneyIcon} dot={dot} />;\n      break;\n    case 'Disc':\n      type = <NodeItem icon={MoneyIcon} dot={dot} />;\n      break;\n    default:\n  }\n\n  return <NodeItem icon={icon ? icon : MoneyIcon} dot={dot} />;\n};\n\nTimelineTokenSummary.propTypes = {\n  timelineItem: PropTypes.string.isRequired,\n  onClick: PropTypes.func,\n  isHover: PropTypes.bool,\n  title: PropTypes.string,\n  showLabel: PropTypes.bool,\n  dot: PropTypes.bool,\n  color: PropTypes.string,\n  date: PropTypes.string,\n  message: PropTypes.string,\n  amount: PropTypes.string,\n  user: PropTypes.string,\n  status: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  summary: PropTypes.bool,\n  iconColor: PropTypes.string,\n  showToken: PropTypes.bool,\n  details: PropTypes.bool,\n  icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.object])\n};\n","import React, { useState, memo } from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport { TimelineDateBar } from './TimelineDateBar';\nimport { TimelineTokenSummary } from './TimelineTokenSummary';\nimport { TimelineStatus } from './TimelineStatus';\nimport { TimelineHoverCard } from './TimelineHoverCard';\nimport { LayoutUnit } from '../../../layout/LayoutUnit';\nimport PropTypes from 'prop-types'; // import PropTypes\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  wrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignContent: 'space-between',\n    alignItems: 'center'\n  },\n  label: { width: 46, textAlign: 'center' }\n}));\n// eslint-disable-next-line react/display-name\nexport const TimelineNode = memo((props) => {\n  const [hover, setHover] = useState(false);\n  const {\n    data,\n    height = 187,\n    details = true,\n    show = false,\n    width,\n    dot,\n    iconColor,\n    dotColor,\n    test,\n    icon\n  } = props;\n  const classes = useStyles(props);\n  const maxLineLength = 8;\n  const maxLines = 2;\n  const capitalizeFirstLetter = (str) => {\n    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();\n  };\n  const formatString = (str) => {\n    let formattedStr = '';\n    let lineCount = 0;\n    let words = str.split(' ');\n    for (let i = 0; i < words.length && lineCount < maxLines; i++) {\n      let line = '';\n      while (\n        i < words.length &&\n        line.length + words[i].length <= maxLineLength\n      ) {\n        line += capitalizeFirstLetter(words[i]) + ' ';\n        i++;\n      }\n      if (line.length > maxLineLength) {\n        line = line.slice(0, maxLineLength - 3) + '...';\n      }\n      formattedStr += line.trim() + '\\n';\n      lineCount++;\n      i--;\n    }\n    return formattedStr.trim();\n  };\n  return (\n    <div\n      onMouseDownCapture={() => setHover(!hover)}\n      className={classes.root}\n      style={{ background: details && 'whitesmoke', width: width }}\n    >\n      <div>{test} </div>\n      {data.map((item) => {\n        return (\n          <div>\n            {(hover || show) && (\n              <TimelineHoverCard offset={0}>\n                <div>\n                  <Typography variant='h6'>\n                    {item.details.shortDescription}\n                  </Typography>\n                </div>\n                <div>\n                  {item.details.data1 ? (\n                    <Typography variant='caption'>\n                      {item.details.data1}\n                    </Typography>\n                  ) : (\n                    <TimelineStatus status={item.details.data2} />\n                  )}\n                </div>\n                <div>\n                  <Typography variant='caption'>{item.details.date}</Typography>\n                </div>\n                <div>\n                  <Typography variant='caption'>\n                    {item.details.data3}\n                  </Typography>\n                </div>\n              </TimelineHoverCard>\n            )}\n            <div className={classes.wrapper} style={{ height: height - 4 }}>\n              <div style={{ marginRight: -8 }}>\n                <TimelineTokenSummary\n                  dot={dot}\n                  color={dotColor}\n                  relative\n                  timelineItem={item.details.transactionType}\n                  iconColor={iconColor}\n                  //timelineItem=\"Email\"\n                  icon={icon}\n                  removeHeight\n                />\n              </div>\n              <div\n                className={classes.label}\n                style={{ marginTop: !details && -3 }}\n              >\n                {dot && (\n                  <Typography\n                    variant='subtitle2'\n                    style={{ lineHeight: '0.9rem' }}\n                  >\n                    {formatString(item.details.shortDescription)}\n                  </Typography>\n                )}\n              </div>\n              {details && <LayoutUnit unit='nudge' />}\n              {details && (\n                <div className={classes.wrapper}>\n                  <div>\n                    {item.details.data1 &&\n                    item.details.data1.toString().trim() !== '' ? (\n                      <Typography variant='caption'>\n                        {item.details.data1}\n                      </Typography>\n                    ) : (\n                      <TimelineStatus status={Number(item.details.data2)} />\n                    )}\n                  </div>\n                  <div>\n                    <Typography variant='caption'>\n                      {item.details.date}\n                    </Typography>\n                  </div>\n                  <div>\n                    <Typography variant='caption'>\n                      {item.details.data3}\n                    </Typography>\n                  </div>\n                </div>\n              )}\n            </div>\n            {details && (\n              <div>\n                <TimelineDateBar\n                  month={Number(item.date.toString().charAt(0))}\n                />\n              </div>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n});\n\n// Define propTypes\nTimelineNode.propTypes = {\n  data: PropTypes.array.isRequired,\n  height: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),\n  details: PropTypes.bool,\n  show: PropTypes.bool,\n  width: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool\n  ]),\n  dot: PropTypes.bool,\n  iconColor: PropTypes.string,\n  dotColor: PropTypes.string,\n  test: PropTypes.string,\n  icon: PropTypes.element\n};\n","import React from 'react';\nimport { makeStyles, lighten } from '@material-ui/core';\nimport { getCategoryColor } from '../../../utilities/style/colorConverter';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types'; // import PropTypes\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {},\n    timelineWrapper: {\n      background: lighten(theme.palette.secondary.main, 0.7),\n      height: 40,\n      borderRadius: 50\n      //width: 800\n      //position: 'absolute'\n    },\n    dot: {\n      width: 30,\n      height: 30,\n      borderRadius: 50\n    },\n    colorOne: {\n      background: lighten(theme.palette.success.main, 0.8)\n    },\n    colorTwo: {\n      background: lighten(theme.palette.info.main, 0.8)\n    },\n    colorThree: {\n      background: lighten(theme.palette.secondary.main, 0.9)\n    },\n    colorFour: {\n      background: getCategoryColor('four')\n    },\n    colorFive: {\n      background: getCategoryColor('five')\n    },\n    colorSix: {\n      background: getCategoryColor('six')\n    },\n    colorSeven: {\n      background: lighten(theme.palette.warning.main, 0.9)\n    }\n  }),\n  { name: 'Timeline' }\n);\n\nexport const TimelineWrapper = ({ style, timeline }) => {\n  const classes = useStyles();\n  let type = '';\n  switch (timeline) {\n    case 1:\n      type = (\n        <div\n          className={clsx(classes.timelineWrapper, classes.colorOne)}\n          style={style}\n        />\n      );\n      break;\n    case 2:\n      type = (\n        <div\n          className={clsx(classes.timelineWrapper, classes.colorTwo)}\n          style={style}\n        />\n      );\n      break;\n    case 3:\n      type = (\n        <div\n          className={clsx(classes.timelineWrapper, classes.colorThree)}\n          style={style}\n        />\n      );\n      break;\n    case 4:\n      type = (\n        <div\n          className={clsx(classes.timelineWrapper, classes.colorFour)}\n          style={style}\n        />\n      );\n      break;\n    case 5:\n      type = (\n        <div\n          className={clsx(classes.timelineWrapper, classes.colorFive)}\n          style={style}\n        />\n      );\n      break;\n    case 6:\n      type = (\n        <div\n          className={clsx(classes.timelineWrapper, classes.colorSix)}\n          style={style}\n        />\n      );\n      break;\n    case 7:\n      type = (\n        <div\n          className={clsx(classes.timelineWrapper, classes.colorSeven)}\n          style={style}\n        />\n      );\n      break;\n    default:\n  }\n\n  return type;\n};\n\n// Define propTypes\nTimelineWrapper.propTypes = {\n  style: PropTypes.object,\n  timeline: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7]).isRequired\n};\n","import React, { useState } from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport clsx from 'clsx';\nimport { TimelineHoverCard } from './TimelineHoverCard';\nimport { TimelineStatus } from './TimelineStatus';\nimport PropTypes from 'prop-types'; // import PropTypes\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    cursor: 'pointer'\n  },\n  wrapper: {\n    width: 130,\n    marginBottom: theme.spacing(2)\n  }\n}));\n\nexport const MultiDot = (props) => {\n  const { map, number } = props;\n  const classes = useStyles(props);\n  const { className } = props;\n\n  const [hover, setHover] = useState(false);\n\n  return (\n    <div\n      className={clsx(classes.root, className)}\n      onMouseDownCapture={() => setHover(!hover)}\n    >\n      <div\n        style={{\n          paddingLeft: 16,\n          paddingRight: 16,\n          paddingTop: 10,\n          paddingBottom: 10,\n          background: '#918296',\n          borderRadius: 50,\n          color: 'white'\n        }}\n      >\n        <Typography variant='subtitle2'> {number} </Typography>\n      </div>\n      {hover && (\n        <TimelineHoverCard>\n          {map.map((item) => {\n            return (\n              <div className={classes.wrapper}>\n                <Typography variant='subtitle2'>\n                  {item.details.shortDescription}\n                </Typography>\n                <Typography variant='caption'> {item.details.date} </Typography>\n                <TimelineStatus status={item.details.status} />\n              </div>\n            );\n          })}\n        </TimelineHoverCard>\n      )}\n    </div>\n  );\n};\n\n// Define propTypes\nMultiDot.propTypes = {\n  map: PropTypes.arrayOf(\n    PropTypes.shape({\n      details: PropTypes.shape({\n        shortDescription: PropTypes.string.isRequired,\n        date: PropTypes.string.isRequired,\n        status: PropTypes.string.isRequired\n      }).isRequired\n    })\n  ).isRequired,\n  number: PropTypes.number.isRequired,\n  className: PropTypes.string\n};\n","import React, { useState } from 'react';\nimport { makeStyles, useTheme } from '@material-ui/core';\nimport { TimelineHoverCard } from './TimelineHoverCard';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types'; // import PropTypes\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    minHeight: theme.spacing(1.25),\n    minWidth: theme.spacing(1.25),\n    borderRadius: 25,\n    cursor: (props) => props.hover && 'pointer'\n  },\n  multi: {\n    padding: 11,\n    paddingTop: 5,\n    paddingBottom: 5,\n    color: theme.palette.common.white\n  }\n}));\n\nexport const VisualizationDot = (props) => {\n  const theme = useTheme();\n  const classes = useStyles(props);\n  const { type, children, hover, multi, noHover } = props;\n\n  const [showHover, setShowHover] = useState();\n\n  const DotWrapper = ({ color }) => {\n    return (\n      <div\n        onMouseEnter={() => setShowHover(true)}\n        onMouseLeave={() => setShowHover(false)}\n        className={clsx(classes.root, multi && classes.multi)}\n        style={{ background: color }}\n      >\n        {children}\n        {showHover && !noHover && (\n          <TimelineHoverCard popover={false}> {hover} </TimelineHoverCard>\n        )}\n      </div>\n    );\n  };\n\n  let dot = theme.palette.primary.main;\n  switch (type) {\n    case 'Late Bill':\n      dot = <DotWrapper color={theme.palette.warning.light} />;\n      break;\n    case 'Disconnect':\n      dot = <DotWrapper color={theme.palette.error.main} />;\n      break;\n    case 'Letter Sent':\n      dot = <DotWrapper color={theme.palette.warning.dark} />;\n      break;\n    case 'Payment':\n      dot = <DotWrapper color={theme.palette.success.main} />;\n      break;\n    case 'Arrange Pay':\n      dot = <DotWrapper color={theme.palette.warning.main} />;\n      break;\n    default:\n      dot = <DotWrapper color={theme.palette.info.light} />;\n      break;\n  }\n  return dot;\n};\n\n// Define propTypes\nVisualizationDot.propTypes = {\n  type: PropTypes.string,\n  children: PropTypes.node,\n  hover: PropTypes.node,\n  multi: PropTypes.bool,\n  noHover: PropTypes.bool\n};\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport clsx from 'clsx';\nimport Skeleton from '@material-ui/lab/Skeleton';\nimport { LayoutUnit } from '../../../layout/LayoutUnit';\nimport PropTypes from 'prop-types'; // import PropTypes\n\nconst useStyles = makeStyles((theme) => ({\n  root: {}\n}));\n\nexport const TimelinePreloaderNode = (props) => {\n  const { children, shortView } = props;\n  const classes = useStyles(props);\n  const { className, longView } = props;\n\n  return (\n    <div className={clsx(classes.root, className)}>\n      {shortView && (\n        <div style={{ marginRight: 100, marginBottom: 40 }}>\n          <LayoutUnit unit='nudge' />\n          <div style={{ display: 'flex', justifyContent: 'center' }}>\n            <Skeleton variant='circle' width={30} height={30} />\n          </div>\n          <LayoutUnit unit='nudge' />\n          <div style={{ display: 'flex', justifyContent: 'center' }}>\n            <Skeleton variant='rect' width={1} height={25} />\n          </div>\n          <Skeleton variant='text' />\n          <Skeleton variant='text' />\n          <LayoutUnit unit='sm' />\n          <Skeleton variant='rect' width={80} height={6} />\n        </div>\n      )}\n\n      {longView && (\n        <div>\n          <Skeleton variant='rect' width={800} height={45} />\n        </div>\n      )}\n    </div>\n  );\n};\n\n// Define propTypes\nTimelinePreloaderNode.propTypes = {\n  children: PropTypes.node,\n  shortView: PropTypes.bool,\n  longView: PropTypes.bool,\n  className: PropTypes.string\n};\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport RangeSlider from 'react-range-slider-input';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  rangeSlider: {\n    '& .range-slider__thumb': {\n      width: theme.spacing(2.25),\n      height: (props) => `calc(${props.margin}px + ${props.threads}px )`,\n      borderRadius: theme.spacing(0.5),\n      background:\n        \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23333' viewBox='0 0 24 24'%3E%3Cpath d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z' /%3E%3C/svg%3E\\\") #fff\",\n      backgroundRepeat: 'no-repeat',\n      backgroundPosition: 'center'\n    },\n    '& .range-slider__range': {\n      background: 'transparent',\n      border: '4px solid #fff',\n      boxSizing: 'border-box',\n      boxShadow: '0 0 0 9999px rgba(194, 194, 194, 0.75)',\n      zIndex: 0\n    },\n    height: (props) => `calc(${props.margin}px + ${props.threads}px )`,\n    background: 'whitesmoke',\n    overflow: 'hidden'\n  }\n}));\n\nexport const DynamicRangeSlider = (props) => {\n  const { children, ...otherProps } = props;\n  const classes = useStyles(props);\n  return <RangeSlider className={classes.rangeSlider} {...otherProps} />;\n};\n"],"mappings":"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"}