udp-react-enterprise-component-library 25.18.1-beta.36 → 25.18.1-beta.38

package/dist/AmbientStepper-CNA0o_tZ.js

@@ -0,0 +1,175 @@
+import * as React$1 from "react";
+import React from "react";
+import { Typography, withStyles } from "@material-ui/core";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import { makeStyles as makeStyles$1, withStyles as withStyles$1 } from "@material-ui/core/styles";
+import Stepper$1 from "@material-ui/core/Stepper";
+import Step$1 from "@material-ui/core/Step";
+import Check from "@material-ui/icons/esm/Check";
+import StepConnector$1 from "@material-ui/core/StepConnector";
+
+//#region src/UI/inputs/menus/AmbientStepper/StepLabel.jsx
+const styles = (theme) => ({
+	root: {
+		display: "flex",
+		alignItems: "center",
+		"&$alternativeLabel": { flexDirection: "column" },
+		"&$disabled": { cursor: "default" }
+	},
+	horizontal: {},
+	vertical: {},
+	label: {
+		color: theme.palette.text.secondary,
+		"&$active": {
+			color: theme.palette.text.primary,
+			fontWeight: 500
+		},
+		"&$completed": {
+			color: theme.palette.text.primary,
+			fontWeight: 500
+		},
+		"&$alternativeLabel": { textAlign: "center" },
+		"&$error": { color: theme.palette.error.main }
+	},
+	active: {},
+	completed: {},
+	error: {},
+	disabled: {},
+	iconContainer: {
+		flexShrink: 0,
+		display: "flex",
+		paddingRight: 8,
+		"&$alternativeLabel": { paddingRight: 0 }
+	},
+	alternativeLabel: {},
+	labelContainer: { width: "100%" }
+});
+const StepLabel$1 = React$1.forwardRef(function StepLabel$2(props, ref) {
+	const { active = false, alternativeLabel = false, children, classes, className, completed = false, disabled = false, error = false, expanded, icon, last, optional, orientation = "horizontal", StepIconComponent: StepIconComponentProp, StepIconProps, ...other } = props;
+	let StepIconComponent = StepIconComponentProp;
+	return /* @__PURE__ */ React$1.createElement("span", {
+		className: clsx(classes.root, classes[orientation], {
+			[classes.disabled]: disabled,
+			[classes.alternativeLabel]: alternativeLabel,
+			[classes.error]: error
+		}, className),
+		ref,
+		...other
+	}, icon || StepIconComponent ? /* @__PURE__ */ React$1.createElement("span", { className: clsx(classes.iconContainer, { [classes.alternativeLabel]: alternativeLabel }) }, /* @__PURE__ */ React$1.createElement(StepIconComponent, {
+		completed,
+		active,
+		error,
+		icon,
+		...StepIconProps
+	})) : null, /* @__PURE__ */ React$1.createElement("span", { className: classes.labelContainer }, children ? /* @__PURE__ */ React$1.createElement(Typography, {
+		variant: "body2",
+		component: "span",
+		display: "block",
+		className: clsx(classes.label, {
+			[classes.alternativeLabel]: alternativeLabel,
+			[classes.completed]: completed,
+			[classes.active]: active,
+			[classes.error]: error
+		})
+	}, children) : null, optional));
+});
+StepLabel$1.propTypes = {
+	children: PropTypes.node,
+	classes: PropTypes.object,
+	className: PropTypes.string,
+	disabled: PropTypes.bool,
+	error: PropTypes.bool,
+	icon: PropTypes.node,
+	optional: PropTypes.node,
+	StepIconComponent: PropTypes.elementType,
+	StepIconProps: PropTypes.object
+};
+StepLabel$1.muiName = "StepLabel";
+/**
+* Explicit any export to avoid non-portable inferred React types in declaration output.
+* @type {any}
+*/
+const StepLabelExport = withStyles(styles, { name: "MuiStepLabel" })(StepLabel$1);
+var StepLabel_default = StepLabelExport;
+
+//#endregion
+//#region src/UI/inputs/menus/AmbientStepper/AmbientStepper.jsx
+const QontoConnector = withStyles$1({
+	alternativeLabel: {
+		top: 10,
+		left: "calc(-50% + 16px)",
+		right: "calc(50% + 16px)"
+	},
+	active: { "& $line": { borderColor: "#09A58C" } },
+	completed: { "& $line": { borderColor: "#09A58C" } },
+	line: {
+		borderColor: "#eaeaf0",
+		borderTopWidth: 3,
+		borderRadius: 1
+	}
+})(StepConnector$1);
+const useQontoStepIconStyles = makeStyles$1({
+	root: {
+		color: "#09A58C",
+		display: "flex",
+		height: 22,
+		alignItems: "center"
+	},
+	active: { color: "#09A58C" },
+	circle: {
+		width: 16,
+		height: 16,
+		borderRadius: "50%",
+		border: "2px solid currentColor"
+	},
+	completed: {
+		color: "#09A58C",
+		zIndex: 1,
+		fontSize: 18
+	},
+	stepLabel: { display: "none" },
+	rootStepper: { background: "blue" }
+});
+const QontoStepIcon = (props) => {
+	const classes = useQontoStepIconStyles();
+	const { active, completed } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, { [classes.active]: active }) }, completed ? /* @__PURE__ */ React.createElement(Check, { className: classes.completed }) : /* @__PURE__ */ React.createElement("div", { className: classes.circle }));
+};
+QontoStepIcon.propTypes = {
+	active: PropTypes.bool,
+	completed: PropTypes.bool
+};
+const useStyles = makeStyles$1((theme) => ({
+	root: { width: "100%" },
+	button: { marginRight: theme.spacing(1) },
+	instructions: {
+		marginTop: theme.spacing(1),
+		marginBottom: theme.spacing(1)
+	},
+	rootStep: { marginTop: 0 }
+}));
+const AmbientStepper = ({ activeStep, steps, orientation }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Stepper$1, {
+		style: {
+			background: "transparent",
+			padding: 0
+		},
+		classes: { root: classes.rootStepper },
+		alternativeLabel: true,
+		activeStep,
+		connector: /* @__PURE__ */ React.createElement(QontoConnector, null),
+		orietation: orientation
+	}, steps.map((label) => /* @__PURE__ */ React.createElement(Step$1, {
+		classes: { root: classes.rootStep },
+		key: label
+	}, /* @__PURE__ */ React.createElement(StepLabel_default, {
+		className: classes.stepLabel,
+		StepIconComponent: QontoStepIcon
+	}, /* @__PURE__ */ React.createElement("span", { style: { fontSize: 14 } }, label))))));
+};
+
+//#endregion
+export { styles as n, AmbientStepper as t };
+//# sourceMappingURL=AmbientStepper-CNA0o_tZ.js.map

package/dist/AmbientStepper-CNA0o_tZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmbientStepper-CNA0o_tZ.js","names":["StepLabel","React","withStyles","StepConnector","makeStyles","Stepper","Step","StepLabel"],"sources":["../src/UI/inputs/menus/AmbientStepper/StepLabel.jsx","../src/UI/inputs/menus/AmbientStepper/AmbientStepper.jsx"],"sourcesContent":["import * as React from 'react'\nimport PropTypes from 'prop-types'\nimport clsx from 'clsx'\nimport { withStyles, Typography } from '@material-ui/core'\n\nexport const styles = (theme) => ({\n  /* Styles applied to the root element. */\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    '&$alternativeLabel': {\n      flexDirection: 'column'\n    },\n    '&$disabled': {\n      cursor: 'default'\n    }\n  },\n  /* Styles applied to the root element if `orientation=\"horizontal\"`. */\n  horizontal: {},\n  /* Styles applied to the root element if `orientation=\"vertical\"`. */\n  vertical: {},\n  /* Styles applied to the `Typography` component which wraps `children`. */\n  label: {\n    color: theme.palette.text.secondary,\n    '&$active': {\n      color: theme.palette.text.primary,\n      fontWeight: 500\n    },\n    '&$completed': {\n      color: theme.palette.text.primary,\n      fontWeight: 500\n    },\n    '&$alternativeLabel': {\n      textAlign: 'center'\n      // marginTop: 16,\n    },\n    '&$error': {\n      color: theme.palette.error.main\n    }\n  },\n  /* Pseudo-class applied to the `Typography` component if `active={true}`. */\n  active: {},\n  /* Pseudo-class applied to the `Typography` component if `completed={true}`. */\n  completed: {},\n  /* Pseudo-class applied to the root element and `Typography` component if `error={true}`. */\n  error: {},\n  /* Pseudo-class applied to the root element and `Typography` component if `disabled={true}`. */\n  disabled: {},\n  /* Styles applied to the `icon` container element. */\n  iconContainer: {\n    flexShrink: 0, // Fix IE 11 issue\n    display: 'flex',\n    paddingRight: 8,\n    '&$alternativeLabel': {\n      paddingRight: 0\n    }\n  },\n  /* Pseudo-class applied to the root and icon container and `Typography` if `alternativeLabel={true}`. */\n  alternativeLabel: {},\n  /* Styles applied to the container element which wraps `Typography` and `optional`. */\n  labelContainer: {\n    width: '100%'\n  }\n})\n\nconst StepLabel = React.forwardRef(function StepLabel(props, ref) {\n  const {\n    // eslint-disable-next-line react/prop-types\n    active = false,\n    // eslint-disable-next-line react/prop-types\n    alternativeLabel = false,\n    children,\n    classes,\n    className,\n    // eslint-disable-next-line react/prop-types\n    completed = false,\n    disabled = false,\n    error = false,\n    // eslint-disable-next-line react/prop-types\n    expanded,\n    icon,\n    // eslint-disable-next-line react/prop-types\n    last,\n    optional,\n    // eslint-disable-next-line react/prop-types\n    orientation = 'horizontal',\n    StepIconComponent: StepIconComponentProp,\n    StepIconProps,\n    ...other\n  } = props\n\n  let StepIconComponent = StepIconComponentProp\n\n  return (\n    <span\n      className={clsx(\n        classes.root,\n        classes[orientation],\n        {\n          [classes.disabled]: disabled,\n          [classes.alternativeLabel]: alternativeLabel,\n          [classes.error]: error\n        },\n        className\n      )}\n      ref={ref}\n      {...other}\n    >\n      {icon || StepIconComponent ? (\n        <span\n          className={clsx(classes.iconContainer, {\n            [classes.alternativeLabel]: alternativeLabel\n          })}\n        >\n          <StepIconComponent\n            completed={completed}\n            active={active}\n            error={error}\n            icon={icon}\n            {...StepIconProps}\n          />\n        </span>\n      ) : null}\n      <span className={classes.labelContainer}>\n        {children ? (\n          <Typography\n            variant='body2'\n            component='span'\n            display='block'\n            className={clsx(classes.label, {\n              [classes.alternativeLabel]: alternativeLabel,\n              [classes.completed]: completed,\n              [classes.active]: active,\n              [classes.error]: error\n            })}\n          >\n            {children}\n          </Typography>\n        ) : null}\n        {optional}\n      </span>\n    </span>\n  )\n})\n\nStepLabel.propTypes = {\n  // ----------------------------- Warning --------------------------------\n  // | These PropTypes are generated from the TypeScript type definitions |\n  // |     To update them edit the d.ts file and run \"yarn proptypes\"     |\n  // ----------------------------------------------------------------------\n  /**\n   * In most cases will simply be a string containing a title for the label.\n   */\n  children: PropTypes.node,\n  /**\n   * Override or extend the styles applied to the component.\n   * See [CSS API](#css) below for more details.\n   */\n  classes: PropTypes.object,\n  /**\n   * @ignore\n   */\n  className: PropTypes.string,\n  /**\n   * Mark the step as disabled, will also disable the button if\n   * `StepLabelButton` is a child of `StepLabel`. Is passed to child components.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Mark the step as failed.\n   */\n  error: PropTypes.bool,\n  /**\n   * Override the default label of the step icon.\n   */\n  icon: PropTypes.node,\n  /**\n   * The optional node to display.\n   */\n  optional: PropTypes.node,\n  /**\n   * The component to render in place of the [`StepIcon`](/api/step-icon/).\n   */\n  StepIconComponent: PropTypes.elementType,\n  /**\n   * Props applied to the [`StepIcon`](/api/step-icon/) element.\n   */\n  StepIconProps: PropTypes.object\n}\n\nStepLabel.muiName = 'StepLabel'\n\n/**\n * Explicit any export to avoid non-portable inferred React types in declaration output.\n * @type {any}\n */\nconst StepLabelExport = withStyles(styles, { name: 'MuiStepLabel' })(StepLabel)\n\nexport default StepLabelExport\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { makeStyles, withStyles } from '@material-ui/core/styles'\nimport clsx from 'clsx'\nimport Stepper from '@material-ui/core/Stepper'\nimport Step from '@material-ui/core/Step'\n// import StepLabel from '@material-ui/core/StepLabel';\nimport Check from '@material-ui/icons/esm/Check'\nimport StepConnector from '@material-ui/core/StepConnector'\nimport StepLabel from './StepLabel'\n\nconst QontoConnector = withStyles({\n  alternativeLabel: {\n    top: 10,\n    left: 'calc(-50% + 16px)',\n    right: 'calc(50% + 16px)'\n  },\n  active: {\n    '& $line': {\n      borderColor: '#09A58C'\n    }\n  },\n  completed: {\n    '& $line': {\n      borderColor: '#09A58C'\n    }\n  },\n  line: {\n    borderColor: '#eaeaf0',\n    borderTopWidth: 3,\n    borderRadius: 1\n  }\n})(StepConnector)\n\nconst useQontoStepIconStyles = makeStyles({\n  root: {\n    color: '#09A58C',\n    display: 'flex',\n    height: 22,\n    alignItems: 'center'\n  },\n  active: {\n    color: '#09A58C'\n  },\n  circle: {\n    width: 16,\n    height: 16,\n    borderRadius: '50%',\n    border: '2px solid currentColor'\n  },\n  completed: {\n    color: '#09A58C',\n    zIndex: 1,\n    fontSize: 18\n  },\n  stepLabel: {\n    display: 'none'\n  },\n  rootStepper: {\n    background: 'blue'\n  }\n})\n\nconst QontoStepIcon = (props) => {\n  const classes = useQontoStepIconStyles()\n  const { active, completed } = props\n\n  return (\n    <div\n      className={clsx(classes.root, {\n        [classes.active]: active\n      })}\n    >\n      {completed ? (\n        <Check className={classes.completed} />\n      ) : (\n        <div className={classes.circle} />\n      )}\n    </div>\n  )\n}\n\nQontoStepIcon.propTypes = {\n  /**\n   * Whether this step is active.\n   */\n  active: PropTypes.bool,\n  /**\n   * Mark the step as completed. Is passed to child components.\n   */\n  completed: PropTypes.bool\n}\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%'\n  },\n  button: {\n    marginRight: theme.spacing(1)\n  },\n  instructions: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  rootStep: {\n    marginTop: 0\n  }\n}))\n\n// function getSteps() {\n//   return [\n//     'Select campaign settings',\n//     'Create an ad group',\n//     'Create an ad',\n//     'another',\n//   ];\n// }\n\nexport const AmbientStepper = ({ activeStep, steps, orientation }) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <Stepper\n        style={{ background: 'transparent', padding: 0 }}\n        classes={{ root: classes.rootStepper }}\n        alternativeLabel\n        activeStep={activeStep}\n        connector={<QontoConnector />}\n        orietation={orientation}\n      >\n        {steps.map((label) => (\n          <Step classes={{ root: classes.rootStep }} key={label}>\n            <StepLabel\n              className={classes.stepLabel}\n              StepIconComponent={QontoStepIcon}\n            >\n              <span style={{ fontSize: 14 }}>{label}</span>\n            </StepLabel>\n          </Step>\n        ))}\n      </Stepper>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/AmbientToast-BgMFpLdS.js

@@ -0,0 +1,70 @@
+import { t as FluentIconButton } from "./FluentIconButton-Dc95mE3v.js";
+import React from "react";
+import { Button, Snackbar, makeStyles, useTheme } from "@material-ui/core";
+import { ChromeCloseIcon } from "@fluentui/react-icons";
+
+//#region src/UI/feedback/AmbientToast.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		maxWidth: 600,
+		"& > * + *": { marginTop: theme.spacing(2) },
+		display: "flex"
+	},
+	alertSecondary: { borderLeft: `4px solid ${theme.palette.secondary.main}` },
+	alertPrimary: { borderLeft: `4px solid ${theme.palette.primary.main}` },
+	alertSuccess: { borderLeft: `4px solid ${theme.palette.success.main}` },
+	alertWarning: { borderLeft: `4px solid ${theme.palette.warning.main}` },
+	alertError: {
+		borderLeft: `4px solid ${theme.palette.error.main}`,
+		color: theme.palette.error.main
+	},
+	alertInfo: { borderLeft: `4px solid ${theme.palette.info.main}` },
+	"@global": { ".MuiSnackbarContent-root": { borderRadius: 0 } }
+}));
+const AmbientToast = (props) => {
+	const classes = useStyles(props);
+	const { noticeType, noticeButton, noticeMessage, closeNotice, noticeOpen, noticeAction } = props;
+	const theme = useTheme();
+	const alertColor = () => {
+		if (noticeType === "secondary") return classes.alertSecondary;
+		else if (noticeType === "primary") return classes.alertPrimary;
+		else if (noticeType === "success") return classes.alertSuccess;
+		else if (noticeType === "warning") return classes.alertWarning;
+		else if (noticeType === "error") return classes.alertError;
+		else if (noticeType === "info") return classes.alertInfo;
+	};
+	const alertText = () => {
+		if (noticeType === "secondary") return theme.palette.secondary.main;
+		else if (noticeType === "primary") return theme.palette.primary.main;
+		else if (noticeType === "success") return theme.palette.success.main;
+		else if (noticeType === "warning") return theme.palette.warning.main;
+		else if (noticeType === "error") return theme.palette.error.main;
+		else if (noticeType === "info") return theme.palette.info.main;
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Snackbar, {
+		classes: { root: alertColor() },
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		open: noticeOpen,
+		onClose: closeNotice,
+		message: noticeMessage,
+		key: 1,
+		action: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, {
+			style: { color: alertText() },
+			size: "small",
+			onClick: noticeAction
+		}, noticeButton), /* @__PURE__ */ React.createElement(FluentIconButton, {
+			style: { color: "white" },
+			size: "small",
+			onClick: closeNotice,
+			icon: ChromeCloseIcon,
+			className: classes.icon
+		}))
+	}));
+};
+
+//#endregion
+export { AmbientToast as t };
+//# sourceMappingURL=AmbientToast-BgMFpLdS.js.map

package/dist/AmbientToast-BgMFpLdS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmbientToast-BgMFpLdS.js","names":[],"sources":["../src/UI/feedback/AmbientToast.jsx"],"sourcesContent":["import React from 'react';\nimport { Button, makeStyles, Snackbar, useTheme } from '@material-ui/core'\nimport {FluentIconButton} from '../inputs/buttons/FluentIconButton'\nimport { ChromeCloseIcon } from '@fluentui/react-icons'\n\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    maxWidth: 600,\n    '& > * + *': {\n      marginTop: theme.spacing(2),\n    },\n    display: 'flex'\n  },\n  alertSecondary: {\n    borderLeft: `4px solid ${theme.palette.secondary.main}`\n  },\n  alertPrimary: {\n    borderLeft: `4px solid ${theme.palette.primary.main}`\n  },\n  alertSuccess: {\n    borderLeft: `4px solid ${theme.palette.success.main}`\n  },\n  alertWarning: {\n    borderLeft: `4px solid ${theme.palette.warning.main}`\n  },\n  alertError: {\n    borderLeft: `4px solid ${theme.palette.error.main}`,\n    color: theme.palette.error.main\n  },\n  alertInfo: {\n    borderLeft: `4px solid ${theme.palette.info.main}`\n  },\n  '@global': {\n    '.MuiSnackbarContent-root': {\n      borderRadius: 0,\n    },\n  }\n}));\n\nexport const AmbientToast = (props) => {\n  const classes = useStyles(props);\n\n  const {noticeType, noticeButton, noticeMessage, closeNotice, noticeOpen, noticeAction} = props;\n\n  const theme = useTheme()\n\n  const alertColor = () => {\n    if(noticeType === 'secondary') {\n      let alertLevel = classes.alertSecondary\n      return alertLevel\n      \n    } else if (noticeType === 'primary') {\n      let alertLevel = classes.alertPrimary\n      return alertLevel\n    } else if (noticeType === 'success') {\n      let alertLevel = classes.alertSuccess\n      return alertLevel\n    } else if (noticeType === 'warning') {\n      let alertLevel = classes.alertWarning\n      return alertLevel\n    } else if (noticeType === 'error') {\n      let alertLevel = classes.alertError\n      return alertLevel\n    } else if (noticeType === 'info') {\n      let alertLevel = classes.alertInfo\n      return alertLevel\n    }\n  }\n\n\n  const alertText = () => {\n    if(noticeType === 'secondary'){\n      return theme.palette.secondary.main\n    } else if (noticeType === 'primary') {\n      return theme.palette.primary.main\n    } else if (noticeType === 'success') {\n      return theme.palette.success.main\n    } else if (noticeType === 'warning') {\n      return theme.palette.warning.main\n    } else if (noticeType === 'error') {\n      return theme.palette.error.main\n    } else if (noticeType === 'info') {\n      return theme.palette.info.main\n    }\n  }\n\n  return (\n    <div className={classes.root}>   \n      <Snackbar\n        classes={{root: alertColor() }}\n        anchorOrigin={{ vertical:'bottom', horizontal:'right' }}\n        open={noticeOpen}\n        onClose={closeNotice}\n        message={noticeMessage}\n        key={1}\n        action={\n          <div>\n            <Button style={{color: alertText()}} size=\"small\" onClick={noticeAction}>\n              {noticeButton}\n            </Button>\n            <FluentIconButton\n                style={{color: 'white'}}\n                      size=\"small\"\n                      onClick={closeNotice}\n                      icon={ChromeCloseIcon}\n                      className={classes.icon}\n                    />\n          </div>\n        }\n      />\n    </div>\n  );\n}"],"mappings":";;;;;;AAMA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,UAAU;EACV,aAAa,EACX,WAAW,MAAM,QAAQ,EAAE,EAC5B;EACD,SAAS;EACV;CACD,gBAAgB,EACd,YAAY,aAAa,MAAM,QAAQ,UAAU,QAClD;CACD,cAAc,EACZ,YAAY,aAAa,MAAM,QAAQ,QAAQ,QAChD;CACD,cAAc,EACZ,YAAY,aAAa,MAAM,QAAQ,QAAQ,QAChD;CACD,cAAc,EACZ,YAAY,aAAa,MAAM,QAAQ,QAAQ,QAChD;CACD,YAAY;EACV,YAAY,aAAa,MAAM,QAAQ,MAAM;EAC7C,OAAO,MAAM,QAAQ,MAAM;EAC5B;CACD,WAAW,EACT,YAAY,aAAa,MAAM,QAAQ,KAAK,QAC7C;CACD,WAAW,EACT,4BAA4B,EAC1B,cAAc,GACf,EACF;CACF,EAAE;AAEH,MAAa,gBAAgB,UAAU;CACrC,MAAM,UAAU,UAAU,MAAM;CAEhC,MAAM,EAAC,YAAY,cAAc,eAAe,aAAa,YAAY,iBAAgB;CAEzF,MAAM,QAAQ,UAAU;CAExB,MAAM,mBAAmB;AACvB,MAAG,eAAe,YAEhB,QADiB,QAAQ;WAGhB,eAAe,UAExB,QADiB,QAAQ;WAEhB,eAAe,UAExB,QADiB,QAAQ;WAEhB,eAAe,UAExB,QADiB,QAAQ;WAEhB,eAAe,QAExB,QADiB,QAAQ;WAEhB,eAAe,OAExB,QADiB,QAAQ;;CAM7B,MAAM,kBAAkB;AACtB,MAAG,eAAe,YAChB,QAAO,MAAM,QAAQ,UAAU;WACtB,eAAe,UACxB,QAAO,MAAM,QAAQ,QAAQ;WACpB,eAAe,UACxB,QAAO,MAAM,QAAQ,QAAQ;WACpB,eAAe,UACxB,QAAO,MAAM,QAAQ,QAAQ;WACpB,eAAe,QACxB,QAAO,MAAM,QAAQ,MAAM;WAClB,eAAe,OACxB,QAAO,MAAM,QAAQ,KAAK;;AAI9B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EACC,SAAS,EAAC,MAAM,YAAY,EAAE;EAC9B,cAAc;GAAE,UAAS;GAAU,YAAW;GAAS;EACvD,MAAM;EACN,SAAS;EACT,SAAS;EACT,KAAK;EACL,QACE,oCAAC,aACC,oCAAC;GAAO,OAAO,EAAC,OAAO,WAAW,EAAC;GAAE,MAAK;GAAQ,SAAS;KACxD,aACM,EACT,oCAAC;GACG,OAAO,EAAC,OAAO,SAAQ;GACjB,MAAK;GACL,SAAS;GACT,MAAM;GACN,WAAW,QAAQ;IACnB,CACN;GAER,CACE"}

package/dist/AmbientToggleButtonGroup-BZiASZSK.js

@@ -0,0 +1,87 @@
+import { t as isValueSelected } from "./isValueSelected-DhRqZZPu.js";
+import React, { Children, cloneElement, forwardRef, isValidElement } from "react";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/core/styles";
+import { isFragment } from "react-is";
+import { capitalize } from "@material-ui/core/utils";
+
+//#region src/UI/inputs/buttons/AmbientToggleButtonGroup.jsx
+const useStyles = makeStyles((theme) => ({
+	item: { marginRight: 8 },
+	root: {
+		display: "inline-flex",
+		padding: 0
+	},
+	vertical: { flexDirection: "column" },
+	grouped: {},
+	groupedHorizontal: {
+		borderRadius: 25,
+		padding: 0,
+		paddingRight: 16,
+		"&:not(:first-child)": {
+			marginTop: 16,
+			borderRadius: 25,
+			paddingRight: 16,
+			padding: 0
+		},
+		"&:not(:last-child)": {
+			padding: 0,
+			borderRadius: 25,
+			paddingRight: 16
+		}
+	}
+}));
+const AmbientToggleButtonGroup = forwardRef(function AmbientToggleButton(props, ref) {
+	const { children, className, exclusive = false, onChange, orientation = "horizontal", size = "medium", value, ...other } = props;
+	const classes = useStyles();
+	const handleChange = (event, buttonValue) => {
+		if (!onChange) return;
+		const index = value && value.indexOf(buttonValue);
+		let newValue;
+		if (value && index >= 0) {
+			newValue = value.slice();
+			newValue.splice(index, 1);
+		} else newValue = value ? value.concat(buttonValue) : [buttonValue];
+		onChange(event, newValue);
+	};
+	const handleExclusiveChange = (event, buttonValue) => {
+		if (!onChange) return;
+		onChange(event, value === buttonValue ? null : buttonValue);
+	};
+	return /* @__PURE__ */ React.createElement("div", {
+		role: "group",
+		className: clsx(classes.root, { [classes.vertical]: orientation === "vertical" }, className),
+		ref,
+		...other
+	}, Children.map(children, (child) => {
+		if (!isValidElement(child)) return null;
+		if (process.env.NODE_ENV !== "production") {
+			if (isFragment(child)) console.error(["Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join("\n"));
+		}
+		return cloneElement(child, {
+			className: clsx(classes.grouped, classes[`grouped${capitalize(orientation)}`], child.props.className),
+			onChange: exclusive ? handleExclusiveChange : handleChange,
+			selected: child.props.selected === void 0 ? isValueSelected(child.props.value, value) : child.props.selected,
+			size: child.props.size || size
+		});
+	}));
+});
+AmbientToggleButtonGroup.propTypes = {
+	children: PropTypes.node,
+	classes: PropTypes.object,
+	className: PropTypes.string,
+	exclusive: PropTypes.bool,
+	onChange: PropTypes.func,
+	orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+	size: PropTypes.oneOf([
+		"large",
+		"medium",
+		"small"
+	]),
+	value: PropTypes.any
+};
+
+//#endregion
+export { AmbientToggleButtonGroup as t };
+//# sourceMappingURL=AmbientToggleButtonGroup-BZiASZSK.js.map

package/dist/AmbientToggleButtonGroup-BZiASZSK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmbientToggleButtonGroup-BZiASZSK.js","names":[],"sources":["../src/UI/inputs/buttons/AmbientToggleButtonGroup.jsx"],"sourcesContent":["import React, {forwardRef, Children, isValidElement, cloneElement} from 'react';\nimport { isFragment } from 'react-is';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport isValueSelected from '../../../utilities/isValueSelected';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { capitalize } from '@material-ui/core/utils';\n\nconst useStyles = makeStyles((theme) => ({\n  item: {\n    marginRight: 8\n  },\n   /* Styles applied to the root element. */\n   root: {\n    display: 'inline-flex',\n    padding: 0\n  },\n  /* Styles applied to the root element if `orientation=\"vertical\"`. */\n  vertical: {\n    flexDirection: 'column',\n  },\n  /* Styles applied to the children. */\n  grouped: {},\n  /* Styles applied to the children if `orientation=\"horizontal\"`. */\n  groupedHorizontal: {\n    borderRadius: 25,\n    padding: 0,\n    paddingRight: 16,\n  '&:not(:first-child)': {\n    marginTop: 16,\n    borderRadius: 25,\n    paddingRight: 16,\n    padding: 0\n  },\n  '&:not(:last-child)': {\n    padding: 0,\n    borderRadius: 25,\n    paddingRight: 16,\n  },\n    \n   },\n}))\n\n\n\nexport const AmbientToggleButtonGroup = forwardRef(function AmbientToggleButton(props, ref) {\n  const {\n    children,\n    // classes,\n    className,\n    exclusive = false,\n    onChange,\n    orientation = 'horizontal',\n    size = 'medium',\n    value,\n    ...other\n  } = props;\n\n  const classes = useStyles()\n\n  const handleChange = (event, buttonValue) => {\n    if (!onChange) {\n      return;\n    }\n\n    const index = value && value.indexOf(buttonValue);\n    let newValue;\n\n    if (value && index >= 0) {\n      newValue = value.slice();\n      newValue.splice(index, 1);\n    } else {\n      newValue = value ? value.concat(buttonValue) : [buttonValue];\n    }\n\n    onChange(event, newValue);\n  };\n\n  const handleExclusiveChange = (event, buttonValue) => {\n    if (!onChange) {\n      return;\n    }\n\n    onChange(event, value === buttonValue ? null : buttonValue);\n  };\n\n  return (\n    <div\n      role=\"group\"\n      className={clsx(\n        classes.root,\n        {\n          [classes.vertical]: orientation === 'vertical',\n        },\n        className,\n      )}\n      ref={ref}\n      {...other}\n    >\n      {Children.map(children, (child) => {\n        if (!isValidElement(child)) {\n          return null;\n        }\n\n        if (process.env.NODE_ENV !== 'production') {\n          if (isFragment(child)) {\n            console.error(\n              [\n                \"Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.\",\n                'Consider providing an array instead.',\n              ].join('\\n'),\n            );\n          }\n        }\n\n        return cloneElement(child, {\n          className: clsx(\n            classes.grouped,\n            classes[`grouped${capitalize(orientation)}`],\n            child.props.className,\n          ),\n          onChange: exclusive ? handleExclusiveChange : handleChange,\n          selected:\n            child.props.selected === undefined\n              ? isValueSelected(child.props.value, value)\n              : child.props.selected,\n          size: child.props.size || size,\n        });\n      })}\n    </div>\n  );\n});\n\nAmbientToggleButtonGroup.propTypes = {\n  // ----------------------------- Warning --------------------------------\n  // | These PropTypes are generated from the TypeScript type definitions |\n  // |     To update them edit the d.ts file and run \"yarn proptypes\"     |\n  // ----------------------------------------------------------------------\n  /**\n   * The content of the button.\n   */\n  children: PropTypes.node,\n  /**\n   * Override or extend the styles applied to the component.\n   * See [CSS API](#css) below for more details.\n   */\n  classes: PropTypes.object,\n  /**\n   * @ignore\n   */\n  className: PropTypes.string,\n  /**\n   * If `true`, only allow one of the child ToggleButton values to be selected.\n   */\n  exclusive: PropTypes.bool,\n  /**\n   * Callback fired when the value changes.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {any} value of the selected buttons. When `exclusive` is true\n   * this is a single value; when false an array of selected values. If no value\n   * is selected and `exclusive` is true the value is null; when false an empty array.\n   */\n  onChange: PropTypes.func,\n  /**\n   * The group orientation (layout flow direction).\n   */\n  orientation: PropTypes.oneOf(['horizontal', 'vertical']),\n  /**\n   * The size of the buttons.\n   */\n  size: PropTypes.oneOf(['large', 'medium', 'small']),\n  /**\n   * The currently selected value within the group or an array of selected\n   * values when `exclusive` is false.\n   *\n   * The value must have reference equality with the option in order to be selected.\n   */\n  value: PropTypes.any,\n};\n\n// export default withStyles(styles, { name: 'MuiToggleButtonGroup' })(AmbientToggleButtonGroup);"],"mappings":";;;;;;;;;AAQA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,aAAa,GACd;CAEA,MAAM;EACL,SAAS;EACT,SAAS;EACV;CAED,UAAU,EACR,eAAe,UAChB;CAED,SAAS,EAAE;CAEX,mBAAmB;EACjB,cAAc;EACd,SAAS;EACT,cAAc;EAChB,uBAAuB;GACrB,WAAW;GACX,cAAc;GACd,cAAc;GACd,SAAS;GACV;EACD,sBAAsB;GACpB,SAAS;GACT,cAAc;GACd,cAAc;GACf;EAEC;CACH,EAAE;AAIH,MAAa,2BAA2B,WAAW,SAAS,oBAAoB,OAAO,KAAK;CAC1F,MAAM,EACJ,UAEA,WACA,YAAY,OACZ,UACA,cAAc,cACd,OAAO,UACP,OACA,GAAG,UACD;CAEJ,MAAM,UAAU,WAAW;CAE3B,MAAM,gBAAgB,OAAO,gBAAgB;AAC3C,MAAI,CAAC,SACH;EAGF,MAAM,QAAQ,SAAS,MAAM,QAAQ,YAAY;EACjD,IAAI;AAEJ,MAAI,SAAS,SAAS,GAAG;AACvB,cAAW,MAAM,OAAO;AACxB,YAAS,OAAO,OAAO,EAAE;QAEzB,YAAW,QAAQ,MAAM,OAAO,YAAY,GAAG,CAAC,YAAY;AAG9D,WAAS,OAAO,SAAS;;CAG3B,MAAM,yBAAyB,OAAO,gBAAgB;AACpD,MAAI,CAAC,SACH;AAGF,WAAS,OAAO,UAAU,cAAc,OAAO,YAAY;;AAG7D,QACE,oCAAC;EACC,MAAK;EACL,WAAW,KACT,QAAQ,MACR,GACG,QAAQ,WAAW,gBAAgB,YACrC,EACD,UACD;EACI;EACL,GAAI;IAEH,SAAS,IAAI,WAAW,UAAU;AACjC,MAAI,CAAC,eAAe,MAAM,CACxB,QAAO;AAGT,MAAI,QAAQ,IAAI,aAAa,cAC3B;OAAI,WAAW,MAAM,CACnB,SAAQ,MACN,CACE,sFACA,uCACD,CAAC,KAAK,KAAK,CACb;;AAIL,SAAO,aAAa,OAAO;GACzB,WAAW,KACT,QAAQ,SACR,QAAQ,UAAU,WAAW,YAAY,KACzC,MAAM,MAAM,UACb;GACD,UAAU,YAAY,wBAAwB;GAC9C,UACE,MAAM,MAAM,aAAa,SACrB,gBAAgB,MAAM,MAAM,OAAO,MAAM,GACzC,MAAM,MAAM;GAClB,MAAM,MAAM,MAAM,QAAQ;GAC3B,CAAC;GACF,CACE;EAER;AAEF,yBAAyB,YAAY;CAQnC,UAAU,UAAU;CAKpB,SAAS,UAAU;CAInB,WAAW,UAAU;CAIrB,WAAW,UAAU;CASrB,UAAU,UAAU;CAIpB,aAAa,UAAU,MAAM,CAAC,cAAc,WAAW,CAAC;CAIxD,MAAM,UAAU,MAAM;EAAC;EAAS;EAAU;EAAQ,CAAC;CAOnD,OAAO,UAAU;CAClB"}

package/dist/AmbientVisualizationCard-CZ0zqPE5.js

@@ -0,0 +1,232 @@
+import { t as LayoutUnit } from "./LayoutUnit-D4jJvonh.js";
+import { t as AmbientCard } from "./AmbientCard-CLW4bPCu.js";
+import { t as AmbientToggleButton } from "./AmbientToggleButton-BjyjXj8S.js";
+import { t as SummaryBlock } from "./SummaryBlock-BjUNDl4q.js";
+import { n as FluentSimpleTab, t as FluentSimpleTabs } from "./FluentSimpleTabs-BghyAzdO.js";
+import { t as FluentTabPanel } from "./FluentTabPanel-BzgD6hTJ.js";
+import { t as AmbientToggleButtonGroup } from "./AmbientToggleButtonGroup-BZiASZSK.js";
+import { t as AmbientVisualizer } from "./AmbientVisualizer-BpM6axMB.js";
+import { t as TokenGroupItem } from "./TokenGroupItem-DKbm__Kc.js";
+import React, { useState } from "react";
+import { Box, Divider, Typography, makeStyles } from "@material-ui/core";
+import { MuiVegaLite } from "@material-vega/material-ui";
+
+//#region src/UI/surfaces/cards/chartDisplayCards/AmbientSplitStatCard.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	rootContainer: {
+		background: "#FFFFFF",
+		boxShadow: "0px 1px 4px rgba(0, 0, 0, 0.08)",
+		borderRadius: "6px",
+		display: "flex",
+		justifyContent: "center",
+		flexDirection: "column"
+	},
+	infoContainer: {
+		display: "flex",
+		justifyContent: "center",
+		paddingLeft: theme.spacing(3)
+	},
+	divider: {
+		width: "100%",
+		height: "1px"
+	},
+	subContainer: {
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "flex-start",
+		alignItems: "center",
+		width: "100%"
+	},
+	subContainerGraph: {
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "flex-start",
+		alignItems: "start",
+		width: "100%"
+	},
+	graphContainer: {
+		display: "flex",
+		paddingLeft: theme.spacing(3)
+	}
+}));
+const defaultBlockSpecs = {
+	alertType: "default",
+	value: "0",
+	startLabel: "$",
+	label: "",
+	labelVariant: "subtitle2",
+	width: "100%",
+	style: { border: "none" }
+};
+/**
+* `AmbientSplitStatCard` component
+*/
+const AmbientSplitStatCard = (props) => {
+	const { title, subtitle, cardsSpecs, graphTitle, graphVariant, graphSpec, style } = props;
+	const classes = useStyles$1(props);
+	return /* @__PURE__ */ React.createElement("div", {
+		className: classes.rootContainer,
+		style
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.infoContainer }, /* @__PURE__ */ React.createElement("div", { className: classes.subContainerGraph }, /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "h6",
+		style: {
+			fontStyle: "normal",
+			fontWeight: 500,
+			fontSize: "19px"
+		}
+	}, title), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement(SummaryBlock, cardsSpecs?.SummaryBlockOne || defaultBlockSpecs), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle2",
+		style: { fontWeight: 400 }
+	}, subtitle), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" })), /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical" }), /* @__PURE__ */ React.createElement("div", { className: classes.subContainer }, /* @__PURE__ */ React.createElement(SummaryBlock, cardsSpecs?.SummaryBlockTwo || defaultBlockSpecs), /* @__PURE__ */ React.createElement(Divider, {
+		orientation: "horizontal",
+		className: classes.divider
+	}), /* @__PURE__ */ React.createElement(SummaryBlock, cardsSpecs?.SummaryBlockThree || defaultBlockSpecs))), /* @__PURE__ */ React.createElement(Divider, {
+		orientation: "horizontal",
+		className: classes.divider
+	}), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement("div", { className: classes.graphContainer }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, graphTitle), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" })), /* @__PURE__ */ React.createElement(Box, {
+		clone: true,
+		overflow: "hidden",
+		sx: {
+			width: "100%",
+			minWidth: "100%",
+			"& svg": { width: "100%" }
+		}
+	}, /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		variant: graphVariant || "verticalBarChart",
+		background: "paper",
+		autoResize: true,
+		actions: false,
+		spec: graphSpec
+	})), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }));
+};
+
+//#endregion
+//#region src/UI/surfaces/cards/chartDisplayCards/AmbientVisualizationCard.jsx
+const useStyles = makeStyles((theme) => ({
+	root: { position: "relative" },
+	item: { marginRight: theme.spacing(2) },
+	tabPanelContents: { marginLeft: theme.spacing(2) },
+	togglePadding: { padding: theme.spacing(2) }
+}));
+const AmbientVisualizationCard = ({ title, toggleList1, toggleList2, toggleList3, tabList, tabContent1, tabContent2, tabContent3 }) => {
+	const classes = useStyles();
+	const [value, setValue] = useState(0);
+	const [toggleValue, setToggleValue] = useState("month");
+	const handleChange = (event, newValue) => {
+		setValue(newValue);
+	};
+	const selectToggle = (event, nextView) => {
+		setToggleValue(nextView);
+	};
+	return /* @__PURE__ */ React.createElement(AmbientCard, {
+		title,
+		customAdornment: " ",
+		visualization: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			value,
+			index: 0
+		}, /* @__PURE__ */ React.createElement("div", { className: classes.tabPanelContents }, tabContent1 && tabContent1.map((item) => {
+			return toggleValue === item.value && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientVisualizer, {
+				values: item.values,
+				visualization: item.chartType,
+				verticalBarColor: item.verticalBarColor,
+				verticalBarBand: item.verticalBarBand,
+				verticalBarXfield: item.verticalBarXfield,
+				verticalBarXtype: item.verticalBarXtype,
+				verticalBarYfield: item.verticalBarYfield,
+				verticalBarYtype: item.verticalBarYtype,
+				styleThin: item.styleThin
+			}));
+		}))), /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			value,
+			index: 1
+		}, /* @__PURE__ */ React.createElement("div", { className: classes.tabPanelContents }, tabContent2 && tabContent2.map((item) => {
+			return toggleValue === item.value && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientVisualizer, {
+				values: item.values,
+				visualization: item.chartType,
+				verticalBarColor: item.verticalBarColor,
+				verticalBarBand: item.verticalBarBand,
+				verticalBarXfield: item.verticalBarXfield,
+				verticalBarXtype: item.verticalBarXtype,
+				verticalBarYfield: item.verticalBarYfield,
+				verticalBarYtype: item.verticalBarYtype,
+				styleThin: item.styleThin
+			}));
+		}))), /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			value,
+			index: 2
+		}, /* @__PURE__ */ React.createElement("div", { className: classes.tabPanelContents }, tabContent3 && tabContent3.map((item) => {
+			return toggleValue === item.value && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(AmbientVisualizer, {
+				values: item.values,
+				visualization: item.chartType,
+				verticalBarColor: item.verticalBarColor,
+				verticalBarBand: item.verticalBarBand,
+				verticalBarXfield: item.verticalBarXfield,
+				verticalBarXtype: item.verticalBarXtype,
+				verticalBarYfield: item.verticalBarYfield,
+				verticalBarYtype: item.verticalBarYtype,
+				styleThin: item.styleThin
+			}));
+		}))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FluentSimpleTabs, {
+			value,
+			onChange: handleChange,
+			"aria-label": "simple tabs example"
+		}, tabList && tabList.map((item) => {
+			return /* @__PURE__ */ React.createElement(FluentSimpleTab, { label: item.label });
+		})), /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			value,
+			index: 0
+		}, /* @__PURE__ */ React.createElement("div", { className: classes.togglePadding }, /* @__PURE__ */ React.createElement(AmbientToggleButtonGroup, {
+			orientation: "horizontal",
+			value: toggleValue
+		}, toggleList1 && toggleList1.map((item) => {
+			return /* @__PURE__ */ React.createElement(AmbientToggleButton, {
+				value: item.value,
+				"aria-label": item.ariaLabel,
+				onMouseUp: item.onClick,
+				onClick: selectToggle,
+				className: classes.item
+			}, /* @__PURE__ */ React.createElement(TokenGroupItem, {
+				label: item.label,
+				icon: item.icon
+			}));
+		})))), /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			value,
+			index: 1
+		}, /* @__PURE__ */ React.createElement("div", { className: classes.togglePadding }, /* @__PURE__ */ React.createElement(AmbientToggleButtonGroup, {
+			orientation: "horizontal",
+			value: toggleValue
+		}, toggleList2 && toggleList2.map((item) => {
+			return /* @__PURE__ */ React.createElement(AmbientToggleButton, {
+				value: item.value,
+				"aria-label": item.ariaLabel,
+				onMouseUp: item.onClick,
+				onClick: selectToggle,
+				className: classes.item
+			}, /* @__PURE__ */ React.createElement(TokenGroupItem, {
+				label: item.label,
+				icon: item.icon
+			}));
+		})))), /* @__PURE__ */ React.createElement(FluentTabPanel, {
+			value,
+			index: 2
+		}, /* @__PURE__ */ React.createElement("div", { className: classes.togglePadding }, /* @__PURE__ */ React.createElement(AmbientToggleButtonGroup, {
+			orientation: "horizontal",
+			value: toggleValue
+		}, toggleList3 && toggleList3.map((item) => {
+			return /* @__PURE__ */ React.createElement(AmbientToggleButton, {
+				value: item.value,
+				"aria-label": item.ariaLabel,
+				onMouseUp: item.onClick,
+				onClick: selectToggle,
+				className: classes.item
+			}, /* @__PURE__ */ React.createElement(TokenGroupItem, {
+				label: item.label,
+				icon: item.icon
+			}));
+		}))))))
+	});
+};
+
+//#endregion
+export { AmbientSplitStatCard as n, AmbientVisualizationCard as t };
+//# sourceMappingURL=AmbientVisualizationCard-CZ0zqPE5.js.map