udp-react-enterprise-component-library 25.18.3 → 25.18.4-beta.2

package/dist/ToggleButton-C7eFkEfD.js

@@ -0,0 +1,319 @@
+import { t as FluentButton } from "./FluentButton-BexKrnAp.js";
+import { t as FluentIconButton } from "./FluentIconButton-Av4urxc6.js";
+import { t as UnityFluentIcon } from "./UnityFluentIcon-CZlFXb6G.js";
+import { t as LayoutUnit } from "./LayoutUnit-xKXf06lQ.js";
+import { t as StatusChip } from "./StatusChip-DZAN88VU.js";
+import { t as fluentLibraryIcons } from "./LibraryData-D8Uai7Yd.js";
+import { t as useFluentIcon } from "./useFluentIcon-Dy-hy_aD.js";
+import React, { useMemo } from "react";
+import { Typography, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { ChevronLeftIcon, ChevronRightIcon } from "@fluentui/react-icons";
+
+//#region src/inquiry/AlertFlag.jsx
+const useStyles$7 = makeStyles((theme) => ({
+	labelRoot: {
+		display: "flex",
+		alignItems: "center",
+		flexDirection: "column"
+	},
+	labelText: {
+		fontWeight: "inherit",
+		flexGrow: 1,
+		lineHeight: "1.25rem"
+	},
+	iconContainer: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flexDirection: "column",
+		marginTop: theme.spacing(.5),
+		width: theme.spacing(4),
+		height: theme.spacing(4)
+	},
+	labelOverflow: {
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis"
+	},
+	iconsContainer: {
+		display: "flex",
+		alignItems: "flex-start",
+		justifyContent: "center",
+		gap: theme.spacing(.75)
+	}
+}));
+/**
+* `AlertFlag` component
+*/
+const AlertFlag = (props) => {
+	const { iconName = "none", secondaryIconName = "none", secondaryIconColor = "#008383", link = false, label, iconSize = "medium", iconType = "", iconColor = "", variant = "caption", style = {} } = props;
+	const theme = useTheme();
+	const classes = useStyles$7(props);
+	const { icon: IconComponent } = useFluentIcon(iconName);
+	const { icon: SubIconComponent } = useFluentIcon(secondaryIconName);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.labelRoot }, /* @__PURE__ */ React.createElement("div", { className: classes.iconsContainer }, IconComponent && /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		color: iconColor || theme.palette.primary.main,
+		type: iconType,
+		icon: IconComponent,
+		customSize: true,
+		size: iconSize,
+		styles: {
+			color: iconColor,
+			...style
+		}
+	}), link && SubIconComponent && /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		size: "small",
+		color: secondaryIconColor,
+		icon: SubIconComponent || "",
+		style: {
+			color: secondaryIconColor,
+			marginTop: theme.spacing(.4)
+		}
+	})), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement(Typography, {
+		variant,
+		className: clsx(classes.labelText, classes.labelOverflow),
+		style
+	}, label));
+};
+
+//#endregion
+//#region src/inquiry/ItemDescription.jsx
+const useStyles$6 = makeStyles((theme) => ({
+	labelRoot: {
+		display: "flex",
+		alignItems: "center"
+	},
+	labelText: {
+		fontWeight: "inherit",
+		flexGrow: 1,
+		lineHeight: "1.25rem"
+	},
+	iconContainer: {
+		display: "flex",
+		alignItems: "flex-start",
+		justifyContent: "center",
+		width: theme.spacing(4)
+	},
+	labelContainer: { width: `calc(100% - ${theme.spacing(1)}px)` }
+}));
+/**
+* `ItemDescription` component
+*/
+const ItemDescription = (props) => {
+	const { iconName = "none", label, iconSize = "medium", iconType = "", iconColor = "", variant = "caption", style = {} } = props;
+	const theme = useTheme();
+	const classes = useStyles$6(props);
+	const IconComponent = useMemo(() => {
+		if (!iconName || iconName === "none") return null;
+		return fluentLibraryIcons.find((item) => item.id.toLowerCase().includes(iconName.toLowerCase()))?.icon || null;
+	}, [iconName]);
+	return /* @__PURE__ */ React.createElement("div", { className: classes.labelRoot }, IconComponent && /* @__PURE__ */ React.createElement("div", { className: classes.iconContainer }, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		size: iconSize,
+		color: iconColor || theme.palette.primary.main,
+		type: iconType,
+		icon: IconComponent,
+		styles: {
+			color: iconColor,
+			...style
+		}
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.labelContainer }, /* @__PURE__ */ React.createElement(Typography, {
+		variant,
+		className: classes.labelText,
+		style
+	}, label)));
+};
+
+//#endregion
+//#region src/inquiry/AmbientListItem.jsx
+const useStyles$5 = makeStyles((theme) => ({
+	headerRoot: {
+		display: "flex",
+		flexDirection: "row",
+		justifyContent: "space-between",
+		alignItems: "center",
+		boxSizing: "border-box",
+		height: theme.spacing(5),
+		borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
+		flexGrow: "0",
+		paddingRight: theme.spacing(2),
+		gap: theme.spacing(1.5),
+		background: (props) => props?.Alert?.toLowerCase() === "true" ? props?.style?.background ? props?.style?.background : "#FDF7F6" : theme.palette.background.paper
+	},
+	labelText: {
+		fontWeight: "inherit",
+		flexGrow: 1,
+		lineHeight: "1.25rem"
+	},
+	labelOverflow: {
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis"
+	}
+}));
+/**
+* `AmbientListItem` component
+*/
+const AmbientListItem = (props) => {
+	const { dataList = [], paid, paidLabel = "none", handleClick, style = {} } = props;
+	const classes = useStyles$5(props);
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classes.headerRoot,
+		style
+	}, dataList?.map((data, index) => /* @__PURE__ */ React.createElement(ItemDescription, {
+		key: `${data.id}${index}`,
+		iconName: data?.icon,
+		label: data?.label,
+		style: data?.style
+	})), paid?.toLowerCase() === "true" && /* @__PURE__ */ React.createElement(StatusChip, {
+		status: "success",
+		label: paidLabel,
+		onClick: handleClick
+	}));
+};
+
+//#endregion
+//#region src/inquiry/AmbientSummaryListHeader.jsx
+const useStyles$4 = makeStyles((theme) => ({
+	headerRoot: {
+		display: "flex",
+		flexDirection: "row",
+		justifyContent: "space-between",
+		alignItems: "center",
+		paddingTop: theme.spacing(1),
+		paddingRight: theme.spacing(2),
+		paddingBottom: theme.spacing(1),
+		paddingLeft: theme.spacing(2),
+		gap: theme.spacing(1.5),
+		borderWidth: "1px 0px",
+		borderStyle: "solid",
+		boxSizing: "border-box",
+		background: (props) => props.style?.background ? props.style.background : theme.palette.background.paper,
+		borderColor: (props) => props.style?.borderColor ? props.style.borderColor : "rgba(0, 0, 0, 0.12)"
+	},
+	labelText: {
+		fontWeight: "inherit",
+		flexGrow: 1,
+		lineHeight: "1.25rem"
+	},
+	labelOverflow: {
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis"
+	}
+}));
+/**
+* `AmbientSummaryListHeader` component
+*/
+const AmbientSummaryListHeader = (props) => {
+	const { columns, style = {} } = props;
+	const classes = useStyles$4(props);
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classes.headerRoot,
+		style
+	}, columns.map((column, index) => /* @__PURE__ */ React.createElement("div", { key: index }, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		className: clsx(classes.labelText, classes.labelOverflow)
+	}, column.label.toUpperCase()))));
+};
+
+//#endregion
+//#region src/inquiry/FilterSearch.jsx
+const useStyles$3 = makeStyles((theme) => ({ root: {
+	background: "#eeeeee",
+	width: "100%",
+	height: "100vh"
+} }));
+const FilterSearch = ({ children }) => {
+	const classes = useStyles$3();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, " ", children, " ");
+};
+
+//#endregion
+//#region src/inquiry/FlagBlock.jsx
+const AlertTypeEnum = {
+	default: { backgroundColor: "none" },
+	success: { backgroundColor: "#F3FAF3" },
+	error: { backgroundColor: "#FDF7F6" }
+};
+const useStyles$2 = makeStyles((theme) => ({
+	rootContainer: {
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		alignItems: "center",
+		gap: theme.spacing(1.25),
+		width: (props) => props?.width ? props?.width : "100%",
+		height: (props) => props?.height ? props?.height : "77px",
+		backgroundColor: (props) => AlertTypeEnum[props?.alertType?.toLowerCase()]?.backgroundColor || theme.palette.background.paper,
+		borderWidth: "0px 1px",
+		borderStyle: "solid",
+		borderColor: "rgba(0, 0, 0, 0.12)"
+	},
+	textContainer: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		padding: "0px"
+	}
+}));
+/**
+* `FlagBlock` component
+*/
+const FlagBlock = (props) => {
+	const { children, style } = props;
+	const classes = useStyles$2(props);
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classes.rootContainer,
+		style
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.textContainer }, children));
+};
+
+//#endregion
+//#region src/inquiry/NodeColumnHeader.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: { position: "relative" },
+	title: { margin: theme.spacing(2) },
+	iconButton: {
+		position: "absolute",
+		right: 4,
+		top: 4,
+		zIndex: theme.zIndex.appBar
+	}
+}));
+const NodeColumnHeader = ({ children, toggleView, expanded }) => {
+	const classes = useStyles$1();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", null, children), /* @__PURE__ */ React.createElement("div", { className: classes.iconButton }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		icon: expanded ? ChevronLeftIcon : ChevronRightIcon,
+		onClick: toggleView
+	})));
+};
+
+//#endregion
+//#region src/inquiry/ToggleButton.jsx
+const useStyles = makeStyles((theme) => ({ button: {
+	borderRadius: theme.spacing(5),
+	width: (props) => props.width || "100%",
+	backgroundColor: (props) => props.disabled ? "none" : props.color ? theme.palette[props.color]?.main ? theme.palette[props.color].main : props.color : theme.palette.secondary.main,
+	borderColor: (props) => props.disabled && theme.palette.grey[300],
+	color: (props) => props.disabled ? "#000 !important" : "#fff",
+	"&:hover": { color: "#000" }
+} }));
+/**
+* `ToggleButton` component
+*/
+const ToggleButton = (props) => {
+	const { variant = "", onClick, children, ...otherProps } = props;
+	const classes = useStyles(props);
+	return /* @__PURE__ */ React.createElement(FluentButton, {
+		onClick,
+		className: classes.button,
+		variant,
+		...otherProps
+	}, children);
+};
+
+//#endregion
+export { AmbientSummaryListHeader as a, AlertFlag as c, FilterSearch as i, NodeColumnHeader as n, AmbientListItem as o, FlagBlock as r, ItemDescription as s, ToggleButton as t };
+//# sourceMappingURL=ToggleButton-C7eFkEfD.js.map

package/dist/ToggleButton-C7eFkEfD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton-C7eFkEfD.js","names":["useStyles","useStyles","useStyles","useStyles","useStyles","useStyles","useStyles"],"sources":["../src/inquiry/AlertFlag.jsx","../src/inquiry/ItemDescription.jsx","../src/inquiry/AmbientListItem.jsx","../src/inquiry/AmbientSummaryListHeader.jsx","../src/inquiry/FilterSearch.jsx","../src/inquiry/FlagBlock.jsx","../src/inquiry/NodeColumnHeader.jsx","../src/inquiry/ToggleButton.jsx"],"sourcesContent":["import React from 'react';\nimport { LayoutUnit } from '../layout/LayoutUnit';\nimport { UnityFluentIcon } from '../utilities/iconLibrary/UnityFluentIcon';\nimport { Typography, useTheme, makeStyles } from '@material-ui/core';\nimport clsx from 'clsx';\nimport { useFluentIcon } from '../hooks/useFluentIcon';\n\nconst useStyles = makeStyles((theme) => ({\n  labelRoot: {\n    display: 'flex',\n    alignItems: 'center',\n    flexDirection: 'column'\n  },\n  labelText: {\n    fontWeight: 'inherit',\n    flexGrow: 1,\n    lineHeight: '1.25rem'\n  },\n  iconContainer: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexDirection: 'column',\n    marginTop: theme.spacing(0.5),\n    width: theme.spacing(4),\n    height: theme.spacing(4)\n  },\n  labelOverflow: {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis'\n  },\n  iconsContainer: {\n    display: 'flex',\n    alignItems: 'flex-start',\n    justifyContent: 'center',\n    gap: theme.spacing(0.75)\n  }\n}));\n\n/**\n * `AlertFlag` component\n */\nexport const AlertFlag = (props) => {\n  const {\n    iconName = 'none',\n    secondaryIconName = 'none',\n    secondaryIconColor = '#008383',\n    link = false,\n    label,\n    iconSize = 'medium',\n    iconType = '',\n    iconColor = '',\n    variant = 'caption',\n    style = {}\n  } = props;\n\n  const theme = useTheme();\n  const classes = useStyles(props);\n  const { icon: IconComponent } = useFluentIcon(iconName);\n  const { icon: SubIconComponent } = useFluentIcon(secondaryIconName);\n\n  return (\n    <div className={classes.labelRoot}>\n      <div className={classes.iconsContainer}>\n        {IconComponent && (\n          <UnityFluentIcon\n            color={iconColor || theme.palette.primary.main}\n            type={iconType}\n            icon={IconComponent}\n            customSize={true}\n            size={iconSize}\n            styles={{\n              color: iconColor,\n              ...style\n            }}\n          />\n        )}\n        {link && SubIconComponent && (\n          <UnityFluentIcon\n            size='small'\n            color={secondaryIconColor}\n            icon={SubIconComponent || ''}\n            style={{\n              color: secondaryIconColor,\n              marginTop: theme.spacing(0.4)\n            }}\n          />\n        )}\n      </div>\n      <LayoutUnit unit='nudge' />\n      <Typography\n        variant={variant}\n        className={clsx(classes.labelText, classes.labelOverflow)}\n        style={style}\n      >\n        {label}\n      </Typography>\n    </div>\n  );\n};\n","import React, { useMemo } from 'react';\nimport { fluentLibraryIcons } from '../assets/unityIcons/LibraryData';\nimport { UnityFluentIcon } from '../utilities/iconLibrary/UnityFluentIcon';\nimport { Typography, useTheme, makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  labelRoot: {\n    display: 'flex',\n    alignItems: 'center'\n  },\n  labelText: {\n    fontWeight: 'inherit',\n    flexGrow: 1,\n    lineHeight: '1.25rem'\n  },\n  iconContainer: {\n    display: 'flex',\n    alignItems: 'flex-start',\n    justifyContent: 'center',\n    width: theme.spacing(4)\n  },\n  labelContainer: {\n    width: `calc(100% - ${theme.spacing(1.0)}px)`\n  }\n}));\n\n/**\n * `ItemDescription` component\n */\nexport const ItemDescription = (props) => {\n  const {\n    iconName = 'none',\n    label,\n    iconSize = 'medium',\n    iconType = '',\n    iconColor = '',\n    variant = 'caption',\n    style = {}\n  } = props;\n\n  const theme = useTheme();\n  const classes = useStyles(props);\n\n  const IconComponent = useMemo(() => {\n    if (!iconName || iconName === 'none') {\n      return null;\n    }\n\n    const result = fluentLibraryIcons.find((item) =>\n      item.id.toLowerCase().includes(iconName.toLowerCase())\n    );\n    return result?.icon || null;\n  }, [iconName]);\n\n  return (\n    <div className={classes.labelRoot}>\n      {IconComponent && (\n        <div className={classes.iconContainer}>\n          <UnityFluentIcon\n            size={iconSize}\n            color={iconColor || theme.palette.primary.main}\n            type={iconType}\n            icon={IconComponent}\n            styles={{\n              color: iconColor,\n              ...style\n            }}\n          />\n        </div>\n      )}\n      <div className={classes.labelContainer}>\n        <Typography\n          variant={variant}\n          className={classes.labelText}\n          style={style}\n        >\n          {label}\n        </Typography>\n      </div>\n    </div>\n  );\n};\n","import React from 'react';\nimport { ItemDescription } from './ItemDescription';\nimport { StatusChip } from '../UI/dataDisplay/status/StatusChip';\nimport { makeStyles } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n  headerRoot: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    height: theme.spacing(5),\n    borderBottom: '1px solid rgba(0, 0, 0, 0.12)',\n    flexGrow: '0',\n    paddingRight: theme.spacing(2),\n    gap: theme.spacing(1.5),\n    background: (props) =>\n      props?.Alert?.toLowerCase() === 'true'\n        ? props?.style?.background\n          ? props?.style?.background\n          : '#FDF7F6'\n        : theme.palette.background.paper\n  },\n  labelText: {\n    fontWeight: 'inherit',\n    flexGrow: 1,\n    lineHeight: '1.25rem'\n  },\n  labelOverflow: {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis'\n  }\n}));\n\n/**\n * `AmbientListItem` component\n */\nexport const AmbientListItem = (props) => {\n  const {\n    dataList = [],\n    paid,\n    paidLabel = 'none',\n    handleClick,\n    style = {}\n  } = props;\n  const classes = useStyles(props);\n\n  return (\n    <div className={classes.headerRoot} style={style}>\n      {dataList?.map((data, index) => (\n        <ItemDescription\n          key={`${data.id}${index}`}\n          iconName={data?.icon}\n          label={data?.label}\n          style={data?.style}\n        />\n      ))}\n      {paid?.toLowerCase() === 'true' && (\n        <StatusChip status='success' label={paidLabel} onClick={handleClick} />\n      )}\n    </div>\n  );\n};\n","import React from 'react';\nimport { Typography, makeStyles } from '@material-ui/core';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles(theme => ({\n  headerRoot: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    paddingTop: theme.spacing(1),\n    paddingRight: theme.spacing(2),\n    paddingBottom: theme.spacing(1),\n    paddingLeft: theme.spacing(2),\n    gap: theme.spacing(1.5),\n    borderWidth: '1px 0px',\n    borderStyle: 'solid',\n    boxSizing: 'border-box',\n    background: props =>\n      props.style?.background\n        ? props.style.background\n        : theme.palette.background.paper,\n    borderColor: props =>\n      props.style?.borderColor\n        ? props.style.borderColor\n        : 'rgba(0, 0, 0, 0.12)',\n  },\n  labelText: {\n    fontWeight: 'inherit',\n    flexGrow: 1,\n    lineHeight: '1.25rem',\n  },\n  labelOverflow: {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  },\n}));\n\n/**\n * `AmbientSummaryListHeader` component\n */\nexport const AmbientSummaryListHeader = props => {\n  const { columns, style = {} } = props;\n\n  const classes = useStyles(props);\n\n  return (\n    <div className={classes.headerRoot} style={style}>\n      {columns.map((column, index) => (\n        <div key={index}>\n          <Typography\n            variant=\"caption\"\n            className={clsx(classes.labelText, classes.labelOverflow)}\n          >\n            {column.label.toUpperCase()}\n          </Typography>\n        </div>\n      ))}\n    </div>\n  );\n};\n","import React from 'react'\nimport { makeStyles } from '@material-ui/core'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    background: '#eeeeee',\n    width: '100%',\n    height: '100vh'\n  }\n}))\n\nexport const FilterSearch = ({ children }) => {\n  const classes = useStyles()\n\n  return <div className={classes.root}> {children} </div>\n}\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\n\nconst AlertTypeEnum = {\n  default: {\n    backgroundColor: 'none'\n  },\n  success: {\n    backgroundColor: '#F3FAF3'\n  },\n  error: {\n    backgroundColor: '#FDF7F6'\n  }\n};\n\nconst useStyles = makeStyles((theme) => ({\n  rootContainer: {\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    gap: theme.spacing(1.25),\n    width: (props) => (props?.width ? props?.width : '100%'),\n    height: (props) => (props?.height ? props?.height : '77px'),\n    backgroundColor: (props) =>\n      AlertTypeEnum[props?.alertType?.toLowerCase()]?.backgroundColor ||\n      theme.palette.background.paper,\n    borderWidth: '0px 1px',\n    borderStyle: 'solid',\n    borderColor: 'rgba(0, 0, 0, 0.12)'\n  },\n  textContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    padding: '0px'\n  }\n}));\n\n/**\n * `FlagBlock` component\n */\nexport const FlagBlock = (props) => {\n  const { children, style } = props;\n  const classes = useStyles(props);\n\n  return (\n    <div className={classes.rootContainer} style={style}>\n      <div className={classes.textContainer}>{children}</div>\n    </div>\n  );\n};\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { FluentIconButton } from '../UI/inputs/buttons/FluentIconButton';\nimport { ChevronLeftIcon, ChevronRightIcon } from '@fluentui/react-icons';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    position: 'relative'\n  },\n  title: {\n    margin: theme.spacing(2)\n  },\n  iconButton: {\n    position: 'absolute',\n    right: 4,\n    top: 4,\n    zIndex: theme.zIndex.appBar\n  }\n}));\n\nexport const NodeColumnHeader = ({ children, toggleView, expanded }) => {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      <div>{children}</div>\n      <div className={classes.iconButton}>\n        <FluentIconButton\n          icon={expanded ? ChevronLeftIcon : ChevronRightIcon}\n          onClick={toggleView}\n        />\n      </div>\n    </div>\n  );\n};\n","import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { FluentButton } from '../UI/inputs/buttons/FluentButton';\n\nconst useStyles = makeStyles((theme) => ({\n  button: {\n    borderRadius: theme.spacing(5),\n    width: (props) => props.width || '100%',\n    backgroundColor: (props) =>\n      props.disabled\n        ? 'none'\n        : props.color\n        ? theme.palette[props.color]?.main\n          ? theme.palette[props.color].main\n          : props.color\n        : theme.palette.secondary.main,\n    borderColor: (props) => props.disabled && theme.palette.grey[300],\n    color: (props) => (props.disabled ? '#000 !important' : '#fff'),\n    '&:hover': {\n      color: '#000'\n    }\n  }\n}));\n\n/**\n * `ToggleButton` component\n */\nexport const ToggleButton = (props) => {\n  const { variant = '', onClick, children, ...otherProps } = props;\n  const classes = useStyles(props);\n\n  return (\n    <FluentButton\n      onClick={onClick}\n      className={classes.button}\n      variant={variant}\n      {...otherProps}\n    >\n      {children}\n    </FluentButton>\n  );\n};\n"],"mappings":"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"}

package/dist/ToggleSection-4nTmx6s1.js

@@ -0,0 +1,116 @@
+import { t as FluentIconButton } from "./FluentIconButton-Av4urxc6.js";
+import { t as ExtenderToggle } from "./ExtenderToggle-Bhk4quIt.js";
+import React, { useState } from "react";
+import { makeStyles, useTheme } from "@material-ui/core";
+import { ChevronLeftIcon, ChevronRightIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/templates/SapFlexibleTemplate.jsx
+const SapFlexibleTemplate = ({ left, center, right }) => {
+	const [columns, setColumns] = useState({
+		columnLeft: true,
+		columnCenter: true,
+		columnRight: true
+	});
+	const [columnPercent, setColumnPercent] = useState({
+		columnLeft: "25%",
+		columnCenter: "50%",
+		columnRight: "25%"
+	});
+	const classes = makeStyles((theme) => ({
+		root: {
+			display: "flex",
+			flexDirection: "row"
+		},
+		columnLeft: {
+			display: "flex",
+			flex: columnPercent.columnLeft,
+			height: "100vh"
+		},
+		columnCenter: {
+			flex: columnPercent.columnCenter,
+			height: "100vh"
+		},
+		columnRight: {
+			display: "flex",
+			flex: columnPercent.columnRight,
+			height: "100vh"
+		},
+		fillContent: { flex: 1 }
+	}))();
+	const handleToggleColumn = (columnType) => {
+		setColumns({
+			...columns,
+			columnCenter: !columns.columnCenter
+		});
+		if (columnType === "columnLeft") {
+			setColumnPercent({
+				...columnPercent,
+				columnLeft: "75%"
+			});
+			if (columnPercent.columnLeft === "75%") setColumnPercent({
+				...columnPercent,
+				columnLeft: "25%"
+			});
+		} else {
+			setColumnPercent({
+				...columnPercent,
+				columnRight: "75%"
+			});
+			if (columnPercent.columnRight === "75%") setColumnPercent({
+				...columnPercent,
+				columnRight: "25%"
+			});
+		}
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, columns.columnLeft && /* @__PURE__ */ React.createElement("div", { className: classes.columnLeft }, /* @__PURE__ */ React.createElement("div", { className: classes.fillContent }, left, " "), /* @__PURE__ */ React.createElement("div", { className: classes.toggle }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		"aria-label": columnPercent.columnLeft === "25%" ? "Expand column" : "Collapse column",
+		color: "primary",
+		icon: columnPercent.columnLeft === "25%" ? ChevronRightIcon : ChevronLeftIcon,
+		onClick: () => handleToggleColumn("columnLeft")
+	}))), columns.columnCenter && /* @__PURE__ */ React.createElement("div", { className: classes.columnCenter }, /* @__PURE__ */ React.createElement("div", null, " ", center, " ")), columns.columnRight && /* @__PURE__ */ React.createElement("div", { className: classes.columnRight }, /* @__PURE__ */ React.createElement("div", { className: classes.toggle }, /* @__PURE__ */ React.createElement(FluentIconButton, {
+		"aria-label": columnPercent.columnRight === "25%" ? "Expand column" : "Collapse column",
+		color: "primary",
+		icon: columnPercent.columnRight === "25%" ? ChevronLeftIcon : ChevronRightIcon,
+		onClick: () => handleToggleColumn("columnRight")
+	})), /* @__PURE__ */ React.createElement("div", { className: classes.fillContent }, " ", right, " ")));
+};
+
+//#endregion
+//#region src/UI/templates/ToggleSection.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { width: "100%" },
+	container: {
+		padding: (props) => props.open ? theme.spacing(1) : theme.spacing(.25),
+		parddingRight: theme.spacing(1),
+		parddingleft: theme.spacing(1),
+		background: (props) => props.color
+	},
+	lowerShelf: { display: "flex" },
+	shelfOptions: {
+		flex: 1,
+		width: "100%"
+	}
+}));
+const ToggleSection = (props) => {
+	const classes = useStyles(props);
+	const { children, onClick, sectionOpen, options, toggleLabel, color } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.container }, " ", children, " "), /* @__PURE__ */ React.createElement("div", { className: classes.lowerShelf }, /* @__PURE__ */ React.createElement("div", { className: classes.shelfOptions }, options), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(ExtenderToggle, {
+		onClick,
+		open: sectionOpen,
+		toggleLabel,
+		color
+	}))));
+};
+ToggleSection.propTypes = {
+	children: PropTypes.node,
+	onClick: PropTypes.func,
+	sectionOpen: PropTypes.bool,
+	options: PropTypes.node,
+	toggleLabel: PropTypes.node,
+	color: PropTypes.string
+};
+
+//#endregion
+export { SapFlexibleTemplate as n, ToggleSection as t };
+//# sourceMappingURL=ToggleSection-4nTmx6s1.js.map

package/dist/ToggleSection-4nTmx6s1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSection-4nTmx6s1.js","names":[],"sources":["../src/UI/templates/SapFlexibleTemplate.jsx","../src/UI/templates/ToggleSection.jsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { makeStyles } from '@material-ui/core'\nimport { FluentIconButton } from '../inputs/buttons/FluentIconButton'\nimport { ChevronRightIcon, ChevronLeftIcon } from '@fluentui/react-icons'\n\nexport const SapFlexibleTemplate = ({ left, center, right }) => {\n  const [columns, setColumns] = useState({\n    columnLeft: true,\n    columnCenter: true,\n    columnRight: true\n  })\n\n  const [columnPercent, setColumnPercent] = useState({\n    columnLeft: '25%',\n    columnCenter: '50%',\n    columnRight: '25%'\n  })\n\n  const useStyles = makeStyles((theme) => ({\n    root: {\n      display: 'flex',\n      flexDirection: 'row'\n    },\n    columnLeft: {\n      display: 'flex',\n      flex: columnPercent.columnLeft,\n      height: '100vh'\n    },\n    columnCenter: {\n      flex: columnPercent.columnCenter,\n      height: '100vh'\n    },\n    columnRight: {\n      display: 'flex',\n      flex: columnPercent.columnRight,\n      height: '100vh'\n    },\n    fillContent: {\n      flex: 1\n    }\n  }))\n\n  const classes = useStyles()\n\n  const handleToggleColumn = (columnType) => {\n    setColumns({ ...columns, columnCenter: !columns.columnCenter })\n\n    if (columnType === 'columnLeft') {\n      setColumnPercent({ ...columnPercent, columnLeft: '75%' })\n\n      if (columnPercent.columnLeft === '75%') {\n        setColumnPercent({ ...columnPercent, columnLeft: '25%' })\n      }\n    } else {\n      setColumnPercent({ ...columnPercent, columnRight: '75%' })\n\n      if (columnPercent.columnRight === '75%') {\n        setColumnPercent({ ...columnPercent, columnRight: '25%' })\n      }\n    }\n  }\n\n  return (\n    <div className={classes.root}>\n      {columns.columnLeft && (\n        <div className={classes.columnLeft}>\n          <div className={classes.fillContent}>{left} </div>\n          <div className={classes.toggle}>\n            <FluentIconButton\n              aria-label={\n                columnPercent.columnLeft === '25%'\n                  ? 'Expand column'\n                  : 'Collapse column'\n              }\n              color='primary'\n              icon={\n                columnPercent.columnLeft === '25%'\n                  ? ChevronRightIcon\n                  : ChevronLeftIcon\n              }\n              onClick={() => handleToggleColumn('columnLeft')}\n            />\n          </div>\n        </div>\n      )}\n\n      {columns.columnCenter && (\n        <div className={classes.columnCenter}>\n          <div> {center} </div>\n        </div>\n      )}\n\n      {columns.columnRight && (\n        <div className={classes.columnRight}>\n          <div className={classes.toggle}>\n            <FluentIconButton\n              aria-label={\n                columnPercent.columnRight === '25%'\n                  ? 'Expand column'\n                  : 'Collapse column'\n              }\n              color='primary'\n              icon={\n                columnPercent.columnRight === '25%'\n                  ? ChevronLeftIcon\n                  : ChevronRightIcon\n              }\n              onClick={() => handleToggleColumn('columnRight')}\n            />\n          </div>\n          <div className={classes.fillContent}> {right} </div>\n        </div>\n      )}\n    </div>\n  )\n}\n","import React from 'react';\nimport { makeStyles, useTheme } from '@material-ui/core';\nimport { ExtenderToggle } from './ui/ExtenderToggle';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%'\n  },\n  container: {\n    padding: (props) => (props.open ? theme.spacing(1) : theme.spacing(0.25)),\n    parddingRight: theme.spacing(1),\n    parddingleft: theme.spacing(1),\n    background: (props) => props.color\n  },\n  lowerShelf: {\n    display: 'flex'\n  },\n  shelfOptions: {\n    flex: 1,\n    width: '100%'\n  }\n}));\n\nexport const ToggleSection = (props) => {\n  const classes = useStyles(props);\n  const { children, onClick, sectionOpen, options, toggleLabel, color } = props;\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.container}> {children} </div>\n\n      <div className={classes.lowerShelf}>\n        <div className={classes.shelfOptions}>{options}</div>\n        <div>\n          <ExtenderToggle\n            onClick={onClick}\n            open={sectionOpen}\n            toggleLabel={toggleLabel}\n            color={color}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\nToggleSection.propTypes = {\n  /**\n   * Contents of container\n   */\n  children: PropTypes.node,\n  /**\n   * Function to trigger panel to open and close\n   */\n  onClick: PropTypes.func,\n  /**\n   * State, if true, will cause panel to open. If false, the panel is closed.\n   */\n  sectionOpen: PropTypes.bool,\n  /**\n   * Shelf below drawer that fills the space left by the toggle button.\n   * Can be used to add things like additional toggles, other buttons,\n   * stats, etc.\n   */\n  options: PropTypes.node,\n  /**\n   * The label that appears on the toggle tab.\n   */\n  toggleLabel: PropTypes.node,\n  /**\n   * The color of the background section and toggle.\n   */\n  color: PropTypes.string\n};\n"],"mappings":"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"}

package/dist/Token-8t2ak5Tk.js

@@ -0,0 +1,70 @@
+import { t as UnityFluentIcon } from "./UnityFluentIcon-CZlFXb6G.js";
+import { n as getEllipseColor, r as getEllipseHintColor, t as Ellipse } from "./Ellipse-DGTaApGj.js";
+import React, { useMemo } from "react";
+import { IconButton, Typography, makeStyles, useTheme } from "@material-ui/core";
+import PropTypes from "prop-types";
+
+//#region src/UI/components/dataDisplay/Token.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { margin: (props) => props.compact ? theme.spacing(.5) : theme.spacing(1) },
+	letter: {
+		fontSize: (props) => props.size === "small" ? theme.spacing(2.25) : theme.spacing(2.5),
+		color: (props) => getEllipseColor(theme, props.color)
+	},
+	buttonRoot: {
+		margin: theme.spacing(1),
+		width: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
+		height: (props) => props.size === "small" ? theme.spacing(4) : theme.spacing(5),
+		background: (props) => props.variant === "filled" ? getEllipseHintColor(theme, props.color) : "",
+		border: (props) => props.variant === "outlined" ? `1px solid` : "none",
+		borderColor: (props) => props.variant === "outlined" ? getEllipseColor(theme, props.color) : ""
+	}
+}));
+const Token = (props) => {
+	const { type = "default", variant = "outlined", color = "default", size = "large", iconType, icon, letter = "A", IconEllipseProps, onClick } = props;
+	const classes = useStyles(props);
+	const theme = useTheme();
+	const iconColor = useMemo(() => {
+		return getEllipseColor(theme, color);
+	}, [color, theme]);
+	const tokenComponent = /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Ellipse, {
+		variant,
+		size,
+		color,
+		...IconEllipseProps
+	}, type === "letter" ? /* @__PURE__ */ React.createElement(Typography, {
+		variant: "body1",
+		className: classes.letter
+	}, letter.toUpperCase()) : /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		size: size === "small" ? size : "medium",
+		color: iconColor,
+		type: iconType,
+		icon,
+		style: { color: iconColor }
+	})));
+	if (type === "action") return /* @__PURE__ */ React.createElement(IconButton, {
+		classes: { root: classes.buttonRoot },
+		onClick
+	}, /* @__PURE__ */ React.createElement(UnityFluentIcon, {
+		size: size === "small" ? size : "medium",
+		color: iconColor,
+		type: iconType,
+		icon,
+		style: { color: iconColor }
+	}));
+	return tokenComponent;
+};
+Token.propTypes = {
+	type: PropTypes.string,
+	variant: PropTypes.string,
+	color: PropTypes.string,
+	size: PropTypes.string,
+	iconType: PropTypes.string,
+	icon: PropTypes.elementType,
+	letter: PropTypes.string,
+	onClick: PropTypes.func
+};
+
+//#endregion
+export { Token as t };
+//# sourceMappingURL=Token-8t2ak5Tk.js.map

package/dist/Token-8t2ak5Tk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Token-8t2ak5Tk.js","names":[],"sources":["../src/UI/components/dataDisplay/Token.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n  makeStyles,\n  useTheme,\n  Typography,\n  IconButton\n} from '@material-ui/core';\nimport PropTypes from 'prop-types';\nimport { Ellipse } from './Ellipse';\nimport { UnityFluentIcon } from '../../../utilities/iconLibrary/UnityFluentIcon';\nimport {\n  getEllipseColor,\n  getEllipseHintColor\n} from '../../../utilities/style/utils/styleUtils';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    margin: (props) => (props.compact ? theme.spacing(0.5) : theme.spacing(1))\n  },\n  letter: {\n    fontSize: (props) =>\n      props.size === 'small' ? theme.spacing(2.25) : theme.spacing(2.5),\n    color: (props) => getEllipseColor(theme, props.color)\n  },\n  buttonRoot: {\n    margin: theme.spacing(1),\n    width: (props) =>\n      props.size === 'small' ? theme.spacing(4) : theme.spacing(5),\n    height: (props) =>\n      props.size === 'small' ? theme.spacing(4) : theme.spacing(5),\n    background: (props) =>\n      props.variant === 'filled' ? getEllipseHintColor(theme, props.color) : '',\n    border: (props) => (props.variant === 'outlined' ? `1px solid` : 'none'),\n    borderColor: (props) =>\n      props.variant === 'outlined' ? getEllipseColor(theme, props.color) : ''\n  }\n}));\n\nexport const Token = (props) => {\n  const {\n    type = 'default',\n    variant = 'outlined',\n    color = 'default',\n    size = 'large',\n    iconType,\n    icon,\n    letter = 'A',\n    IconEllipseProps,\n    onClick\n  } = props;\n  const classes = useStyles(props);\n  const theme = useTheme();\n\n  const iconColor = useMemo(() => {\n    return getEllipseColor(theme, color);\n  }, [color, theme]);\n\n  const tokenComponent = (\n    <div className={classes.root}>\n      <Ellipse\n        variant={variant}\n        size={size}\n        color={color}\n        {...IconEllipseProps}\n      >\n        {type === 'letter' ? (\n          <Typography variant='body1' className={classes.letter}>\n            {letter.toUpperCase()}\n          </Typography>\n        ) : (\n          <UnityFluentIcon\n            size={size === 'small' ? size : 'medium'}\n            color={iconColor}\n            type={iconType}\n            icon={icon}\n            style={{\n              color: iconColor\n            }}\n          />\n        )}\n      </Ellipse>\n    </div>\n  );\n\n  if (type === 'action') {\n    return (\n      <IconButton\n        classes={{\n          root: classes.buttonRoot\n        }}\n        onClick={onClick}\n      >\n        <UnityFluentIcon\n          size={size === 'small' ? size : 'medium'}\n          color={iconColor}\n          type={iconType}\n          icon={icon}\n          style={{\n            color: iconColor\n          }}\n        />\n      </IconButton>\n    );\n  }\n\n  return tokenComponent;\n};\n\nToken.propTypes = {\n  type: PropTypes.string,\n  variant: PropTypes.string,\n  color: PropTypes.string,\n  size: PropTypes.string,\n  iconType: PropTypes.string,\n  icon: PropTypes.elementType,\n  letter: PropTypes.string,\n  onClick: PropTypes.func\n};\n"],"mappings":";;;;;;;AAeA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,SAAS,UAAW,MAAM,UAAU,MAAM,QAAQ,GAAI,GAAG,MAAM,QAAQ,EAAE,EAC1E;CACD,QAAQ;EACN,WAAW,UACT,MAAM,SAAS,UAAU,MAAM,QAAQ,KAAK,GAAG,MAAM,QAAQ,IAAI;EACnE,QAAQ,UAAU,gBAAgB,OAAO,MAAM,MAAM;EACtD;CACD,YAAY;EACV,QAAQ,MAAM,QAAQ,EAAE;EACxB,QAAQ,UACN,MAAM,SAAS,UAAU,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,EAAE;EAC9D,SAAS,UACP,MAAM,SAAS,UAAU,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,EAAE;EAC9D,aAAa,UACX,MAAM,YAAY,WAAW,oBAAoB,OAAO,MAAM,MAAM,GAAG;EACzE,SAAS,UAAW,MAAM,YAAY,aAAa,cAAc;EACjE,cAAc,UACZ,MAAM,YAAY,aAAa,gBAAgB,OAAO,MAAM,MAAM,GAAG;EACxE;CACF,EAAE;AAEH,MAAa,SAAS,UAAU;CAC9B,MAAM,EACJ,OAAO,WACP,UAAU,YACV,QAAQ,WACR,OAAO,SACP,UACA,MACA,SAAS,KACT,kBACA,YACE;CACJ,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,QAAQ,UAAU;CAExB,MAAM,YAAY,cAAc;AAC9B,SAAO,gBAAgB,OAAO,MAAM;IACnC,CAAC,OAAO,MAAM,CAAC;CAElB,MAAM,iBACJ,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EACU;EACH;EACC;EACP,GAAI;IAEH,SAAS,WACR,oCAAC;EAAW,SAAQ;EAAQ,WAAW,QAAQ;IAC5C,OAAO,aAAa,CACV,GAEb,oCAAC;EACC,MAAM,SAAS,UAAU,OAAO;EAChC,OAAO;EACP,MAAM;EACA;EACN,OAAO,EACL,OAAO,WACR;GACD,CAEI,CACN;AAGR,KAAI,SAAS,SACX,QACE,oCAAC;EACC,SAAS,EACP,MAAM,QAAQ,YACf;EACQ;IAET,oCAAC;EACC,MAAM,SAAS,UAAU,OAAO;EAChC,OAAO;EACP,MAAM;EACA;EACN,OAAO,EACL,OAAO,WACR;GACD,CACS;AAIjB,QAAO;;AAGT,MAAM,YAAY;CAChB,MAAM,UAAU;CAChB,SAAS,UAAU;CACnB,OAAO,UAAU;CACjB,MAAM,UAAU;CAChB,UAAU,UAAU;CACpB,MAAM,UAAU;CAChB,QAAQ,UAAU;CAClB,SAAS,UAAU;CACpB"}

package/dist/TokenGroupItem-D2pnPSKi.js

@@ -0,0 +1,36 @@
+import { t as Token } from "./Token-8t2ak5Tk.js";
+import React, { Fragment } from "react";
+import { Typography, makeStyles } from "@material-ui/core";
+import { DeveloperToolsIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+
+//#region src/UI/templates/ui/TokenGroupItem.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	label: { color: theme.palette.common.black }
+}));
+/**
+* @param {{label: string, icon: React.ElementType, color: string}} props
+*/
+const TokenGroupItem = ({ label, icon = DeveloperToolsIcon, color }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Token, {
+		icon,
+		color,
+		size: "small",
+		variant: "filled",
+		type: "icon"
+	}), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "caption",
+		className: classes.label
+	}, " ", label, " "));
+};
+TokenGroupItem.propTypes = {
+	label: PropTypes.string,
+	icon: PropTypes.bool,
+	color: PropTypes.string
+};
+
+//#endregion
+export { TokenGroupItem as t };
+//# sourceMappingURL=TokenGroupItem-D2pnPSKi.js.map

package/dist/TokenGroupItem-D2pnPSKi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenGroupItem-D2pnPSKi.js","names":[],"sources":["../src/UI/templates/ui/TokenGroupItem.jsx"],"sourcesContent":["import React, {Fragment} from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport { DeveloperToolsIcon } from '@fluentui/react-icons'\nimport {Token} from '../../components/dataDisplay/Token'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  label: {\n    color: theme.palette.common.black\n  }\n}))\n\n/**\n * @param {{label: string, icon: React.ElementType, color: string}} props\n */\n  export const TokenGroupItem = ({label, icon = DeveloperToolsIcon, color}) => {\n    const classes = useStyles()\n    return (\n      <Fragment >\n        <Token icon={icon} color={color} size=\"small\" variant=\"filled\" type=\"icon\"  />\n        <Typography variant='caption' className={classes.label} > {label} </Typography>  \n      </Fragment>\n    )\n  }\n\n  \n  TokenGroupItem.propTypes = {\n    /**\n     * Label to display in list.\n     */\n    label: PropTypes.string,\n    /**\n     * Icon to display in grouping.\n     */\n    icon: PropTypes.bool,\n     /**\n     * sets color of token background\n     */\n    color: PropTypes.string,\n  \n  }"],"mappings":";;;;;;;AAMA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,OAAO,EACL,OAAO,MAAM,QAAQ,OAAO,OAC7B;CACF,EAAE;;;;AAKD,MAAa,kBAAkB,EAAC,OAAO,OAAO,oBAAoB,YAAW;CAC3E,MAAM,UAAU,WAAW;AAC3B,QACE,oCAAC,gBACC,oCAAC;EAAY;EAAa;EAAO,MAAK;EAAQ,SAAQ;EAAS,MAAK;GAAU,EAC9E,oCAAC;EAAW,SAAQ;EAAU,WAAW,QAAQ;IAAQ,KAAE,OAAM,IAAc,CACtE;;AAKf,eAAe,YAAY;CAIzB,OAAO,UAAU;CAIjB,MAAM,UAAU;CAIhB,OAAO,UAAU"}