udp-react-enterprise-component-library 25.16.2-beta.7 → 25.16.2-beta.9

package/dist/DynamicContainerWithMenu-DWB4-ibW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicContainerWithMenu-DWB4-ibW.js","names":["makeStyles","visibleChildren","menuChildren","children","child","ref"],"sources":["../src/UI/containers/DynamicContainerWithMenu.jsx"],"sourcesContent":["import { MoreVerticalIcon } from '@fluentui/react-icons';\nimport { MenuItem, Popover } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport React, {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport { useDynamicListCalculation } from '../../hooks/useDynamicListCalculation';\nimport { AmbientTokenButton } from '../inputs/buttons/AmbientTokenButton';\n\nconst useStyles = makeStyles((theme) => ({\n  filterChipMenuIcon: {\n    background: theme.palette.common.grey,\n    padding: theme.spacing(1),\n    color: theme.palette.primary.main\n  }\n}));\n\nexport const DynamicContainerWithMenu = forwardRef((props, ref) => {\n  // ################### Props ###################\n  const {\n    children,\n    className,\n    menuButton,\n    menuIconClassName,\n    includeBuffer = true\n  } = props;\n\n  // ################### Custom Hooks ###################\n  const classes = useStyles();\n  const { calculateNumberOfVisibleChildren } = useDynamicListCalculation();\n\n  // ################### Memoized Values ###################\n  const modifiedMenuButton = useMemo(() => {\n    if (!menuButton) return null;\n\n    return cloneElement(\n      menuButton,\n      {\n        onClick: (event) => {\n          menuButton.props.onClick(event);\n          handlePopoverClick(event);\n        },\n        ...menuButton.props\n      },\n      menuButton.props.children\n    );\n  }, [menuButton]);\n\n  // ################### States ###################\n  const [allChildren, setAllChildren] = useState([]);\n  const [visibleChildren, setVisibleChildren] = useState([]);\n  const [menuChildren, setMenuChildren] = useState([]);\n  const [anchorEl, setAnchorEl] = useState(null);\n\n  // ################### Variables ###################\n  const open = Boolean(anchorEl);\n  const id = open ? 'simple-popover' : undefined;\n\n  // ################### Refs ###################\n  const containerRef = useRef(ref);\n  const outerContainerRef = useRef(null);\n  const childrenRefs = useRef([]);\n\n  // ################### Functions ###################\n  const handlePopoverClick = (event) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handlePopoverClose = () => {\n    setAnchorEl(null);\n  };\n\n  // ################### Callbacks ###################\n  const handleSizeChange = useCallback(() => {\n    const maxVisibleChildren = calculateNumberOfVisibleChildren(\n      containerRef,\n      childrenRefs,\n      includeBuffer\n    );\n\n    const visibleChildren = allChildren.slice(0, maxVisibleChildren);\n    const menuChildren = allChildren.slice(maxVisibleChildren);\n\n    setVisibleChildren(visibleChildren);\n    setMenuChildren(menuChildren);\n  }, [\n    containerRef,\n    allChildren,\n    childrenRefs,\n    calculateNumberOfVisibleChildren,\n    includeBuffer\n  ]);\n\n  const handleMenuItemClick = useCallback((child) => {\n    if (child.props.onClick && typeof child.props.onClick === 'function') {\n      child.props.onClick();\n    }\n\n    // If the child has children, then call the onClick function for each child\n    let children = child.props.children;\n    while (children) {\n      if (Array.isArray(children) && children.length > 0) {\n        children.forEach((child) => {\n          if (\n            child.props.onClick &&\n            typeof child.props.onClick === 'function'\n          ) {\n            child.props.onClick();\n          }\n        });\n      } else if (typeof children === 'object') {\n        if (\n          children.props.onClick &&\n          typeof children.props.onClick === 'function'\n        ) {\n          children.props.onClick();\n        }\n      }\n\n      children = children.props.children;\n    }\n\n    handlePopoverClose();\n  }, []);\n\n  // ################### Effects ###################\n  useEffect(() => {\n    const arrayChildren = Children.toArray(children);\n    setAllChildren(arrayChildren);\n    setVisibleChildren(arrayChildren);\n  }, [children]);\n\n  useLayoutEffect(handleSizeChange, [handleSizeChange]);\n\n  useLayoutEffect(() => {\n    // Add the resize event listener for when the browser window is resized\n    window.addEventListener('resize', handleSizeChange);\n    // Add the resize observer for when the parent div is resized\n    const resizeObserver = new ResizeObserver(handleSizeChange);\n    if (outerContainerRef.current) {\n      resizeObserver.observe(outerContainerRef.current);\n    }\n\n    // Remove the event listeners on cleanup\n    return () => {\n      window.removeEventListener('resize', handleSizeChange);\n      resizeObserver.disconnect();\n    };\n  }, [handleSizeChange, outerContainerRef]);\n\n  // ################### Render ###################\n  return (\n    <div\n      ref={outerContainerRef}\n      style={{\n        width: '100%',\n        overflow: 'hidden'\n      }}\n    >\n      <div\n        className={className}\n        ref={containerRef}\n        style={{\n          display: 'flex',\n          flexWrap: 'noWrap',\n          overflow: 'hidden',\n          flexGrow: 1\n        }}\n      >\n        {visibleChildren &&\n          Children.map(visibleChildren, (child, index) => {\n            return cloneElement(\n              child,\n              {\n                ref: (ref) => (childrenRefs.current[index] = ref),\n                ...child.props\n              },\n              child.props.children\n            );\n          })}\n        {menuChildren && menuChildren.length > 0 && (\n          <div>\n            {modifiedMenuButton ?? (\n              <AmbientTokenButton\n                id={id}\n                icon={MoreVerticalIcon}\n                tooltip='Additional Filter Values'\n                ariaLabel='Additional Filter Values'\n                onClick={handlePopoverClick}\n                iconClassName={menuIconClassName ?? classes.filterChipMenuIcon}\n              />\n            )}\n            <Popover\n              id={id}\n              open={open}\n              anchorEl={anchorEl}\n              onClose={handlePopoverClose}\n              anchorOrigin={{\n                vertical: 'bottom',\n                horizontal: 'right'\n              }}\n              transformOrigin={{\n                vertical: 'top',\n                horizontal: 'right'\n              }}\n            >\n              {Children.map(menuChildren, (child, index) => {\n                return (\n                  <MenuItem onClick={() => handleMenuItemClick(child)}>\n                    {cloneElement(\n                      child,\n                      {\n                        ...child.props\n                      },\n                      child.props.children\n                    )}\n                  </MenuItem>\n                );\n              })}\n            </Popover>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n});\n\nDynamicContainerWithMenu.displayName = 'DynamicContainerWithMenu';\nDynamicContainerWithMenu.propTypes = {\n  /**\n   * The children to render in the container\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * A className to apply to the container\n   */\n  className: PropTypes.string,\n  /**\n   * A custom menu button to use instead of the default\n   */\n  menuButton: PropTypes.node,\n  /**\n   * A custom class to apply to the menu icon\n   */\n  menuIconClassName: PropTypes.string,\n  /**\n   * Whether to include a space buffer between the menu button and container border (default: true)\n   * @default true\n   */\n  includeBuffer: PropTypes.bool\n};\n"],"mappings":"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"}

package/dist/DynamicRangeSlider-DBM06VuQ.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-DBM06VuQ.js.map