udp-react-enterprise-component-library 25.18.1-beta.4 → 25.18.1-beta.40

package/dist/AmbientStepper-BkhoDtpx.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-BkhoDtpx.js.map

package/dist/AmbientStepper-BkhoDtpx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmbientStepper-BkhoDtpx.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/AmbientTextField-CdnqPJUw.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { TextField, makeStyles } from "@material-ui/core";
+import PropTypes from "prop-types";
+
+//#region src/UI/inputs/textField/AmbientTextField.jsx
+const useStyles = makeStyles((theme) => ({
+	input: {
+		borderRadius: 2,
+		height: (props) => !props.multiline && !Array.isArray(props.value) && 32,
+		padding: (props) => !props.multiline && 0,
+		paddingBottom: 10,
+		marginTop: 3,
+		"& .MuiFilledInput-inputMarginDense": { paddingTop: 8 },
+		"& .MuiInputAdornment-filled.MuiInputAdornment-positionStart:not(.MuiInputAdornment-hiddenLabel)": {
+			marginTop: theme.spacing(.5),
+			marginLeft: theme.spacing(1)
+		}
+	},
+	formTextInput: { fontSize: 14 },
+	labelRoot: { fontSize: 14 },
+	FormControl: {
+		display: "none",
+		marginTop: 0
+	},
+	root: {
+		width: "100%",
+		marginTop: 25,
+		"& .MuiFormLabel-root": {
+			marginTop: -30,
+			marginLeft: -11
+		},
+		"& .MuiInputAdornment-root": { paddingLeft: theme.spacing(1) }
+	},
+	noLabel: { marginTop: theme.spacing(1) }
+}));
+const AmbientTextField = (props) => {
+	const classes = useStyles(props);
+	const { id, label, startAdornment, endAdornment, title = "noTitle", ...InputProps } = props;
+	return /* @__PURE__ */ React.createElement("div", { className: label ? classes.root : classes.noLabel }, /* @__PURE__ */ React.createElement(TextField, {
+		...InputProps,
+		id,
+		udprecordid: `udpRecord-FluentAmbientTextField-${title.replace(/\s/g, "")}-${props?.InputProps?.type}`,
+		variant: "filled",
+		size: "small",
+		margin: "dense",
+		label,
+		classes: { label: classes.label },
+		InputProps: {
+			classes: {
+				root: classes.input,
+				input: classes.formTextInput,
+				...props.InputProps?.classes
+			},
+			...props.InputProps,
+			...startAdornment,
+			...endAdornment
+		},
+		InputLabelProps: {
+			shrink: false,
+			classes: {
+				root: classes.labelRoot,
+				focused: classes.labelFocused
+			}
+		}
+	}));
+};
+AmbientTextField.propTypes = {
+	id: PropTypes.string,
+	label: PropTypes.string,
+	startAdornment: PropTypes.node,
+	endAdornment: PropTypes.node
+};
+
+//#endregion
+export { AmbientTextField as t };
+//# sourceMappingURL=AmbientTextField-CdnqPJUw.js.map

package/dist/AmbientTextField-CdnqPJUw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmbientTextField-CdnqPJUw.js","names":[],"sources":["../src/UI/inputs/textField/AmbientTextField.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, TextField } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  input: {\n    borderRadius: 2,\n    height: (props) => !props.multiline && !Array.isArray(props.value) && 32, // multiline or multiselect\n    padding: (props) => !props.multiline && 0,\n    paddingBottom: 10,\n    marginTop: 3,\n    '& .MuiFilledInput-inputMarginDense': {\n      paddingTop: 8\n    },\n    '& .MuiInputAdornment-filled.MuiInputAdornment-positionStart:not(.MuiInputAdornment-hiddenLabel)':\n      {\n        marginTop: theme.spacing(0.5),\n        marginLeft: theme.spacing(1)\n      }\n  },\n  formTextInput: {\n    fontSize: 14\n  },\n  labelRoot: {\n    fontSize: 14\n  },\n  FormControl: {\n    display: 'none',\n    marginTop: 0\n  },\n  root: {\n    width: '100%',\n    marginTop: 25,\n    '& .MuiFormLabel-root': {\n      marginTop: -30,\n      marginLeft: -11\n    },\n    '& .MuiInputAdornment-root': {\n      paddingLeft: theme.spacing(1)\n    }\n    //   '& .MuiInputAdornment-filled.MuiInputAdornment-positionStart:not(.MuiInputAdornment-hiddenLabel)' : {\n    //     marginTop: 0\n    // }\n  },\n  noLabel: {\n    marginTop: theme.spacing(1)\n  }\n}));\n\nexport const AmbientTextField = (props) => {\n  const classes = useStyles(props);\n  const { id, label, startAdornment, endAdornment, title = 'noTitle', ...InputProps } = props;\n  return (\n    <div className={label ? classes.root : classes.noLabel}>\n      <TextField\n        {...InputProps}\n        id={id}\n        udprecordid={`udpRecord-FluentAmbientTextField-${title.replace(/\\s/g, '')}-${props?.InputProps?.type}`}\n        variant='filled'\n        size='small'\n        margin='dense'\n        label={label}\n        classes={{ label: classes.label }}\n        InputProps={{\n          classes: {\n            root: classes.input,\n            input: classes.formTextInput,\n            ...props.InputProps?.classes\n          },\n          ...props.InputProps,\n          ...startAdornment,\n          ...endAdornment\n        }}\n        InputLabelProps={{\n          shrink: false,\n          classes: {\n            root: classes.labelRoot,\n            focused: classes.labelFocused\n          }\n        }}\n      />\n    </div>\n  );\n};\n\nAmbientTextField.propTypes = {\n  /**\n   * id - textfield ID\n   */\n  id: PropTypes.string,\n  /**\n   * label - textField label\n   */\n  label: PropTypes.string,\n  /**\n   * startAdornment - icon placed at the beginning of the input\n   */\n  startAdornment: PropTypes.node,\n  /**\n   * endAdornment - icon placed at the end of the input\n   */\n  endAdornment: PropTypes.node\n};\n"],"mappings":";;;;;AAIA,MAAM,YAAY,YAAY,WAAW;CACvC,OAAO;EACL,cAAc;EACd,SAAS,UAAU,CAAC,MAAM,aAAa,CAAC,MAAM,QAAQ,MAAM,MAAM,IAAI;EACtE,UAAU,UAAU,CAAC,MAAM,aAAa;EACxC,eAAe;EACf,WAAW;EACX,sCAAsC,EACpC,YAAY,GACb;EACD,mGACE;GACE,WAAW,MAAM,QAAQ,GAAI;GAC7B,YAAY,MAAM,QAAQ,EAAE;GAC7B;EACJ;CACD,eAAe,EACb,UAAU,IACX;CACD,WAAW,EACT,UAAU,IACX;CACD,aAAa;EACX,SAAS;EACT,WAAW;EACZ;CACD,MAAM;EACJ,OAAO;EACP,WAAW;EACX,wBAAwB;GACtB,WAAW;GACX,YAAY;GACb;EACD,6BAA6B,EAC3B,aAAa,MAAM,QAAQ,EAAE,EAC9B;EAIF;CACD,SAAS,EACP,WAAW,MAAM,QAAQ,EAAE,EAC5B;CACF,EAAE;AAEH,MAAa,oBAAoB,UAAU;CACzC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,IAAI,OAAO,gBAAgB,cAAc,QAAQ,WAAW,GAAG,eAAe;AACtF,QACE,oCAAC,SAAI,WAAW,QAAQ,QAAQ,OAAO,QAAQ,WAC7C,oCAAC;EACC,GAAI;EACA;EACJ,aAAa,oCAAoC,MAAM,QAAQ,OAAO,GAAG,CAAC,GAAG,OAAO,YAAY;EAChG,SAAQ;EACR,MAAK;EACL,QAAO;EACA;EACP,SAAS,EAAE,OAAO,QAAQ,OAAO;EACjC,YAAY;GACV,SAAS;IACP,MAAM,QAAQ;IACd,OAAO,QAAQ;IACf,GAAG,MAAM,YAAY;IACtB;GACD,GAAG,MAAM;GACT,GAAG;GACH,GAAG;GACJ;EACD,iBAAiB;GACf,QAAQ;GACR,SAAS;IACP,MAAM,QAAQ;IACd,SAAS,QAAQ;IAClB;GACF;GACD,CACE;;AAIV,iBAAiB,YAAY;CAI3B,IAAI,UAAU;CAId,OAAO,UAAU;CAIjB,gBAAgB,UAAU;CAI1B,cAAc,UAAU;CACzB"}

package/dist/AmbientToast-iliGNjGA.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-iliGNjGA.js.map

package/dist/AmbientToast-iliGNjGA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmbientToast-iliGNjGA.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/AmbientToggleButton-BjyjXj8S.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core";
+import PropTypes from "prop-types";
+import ToggleButton from "@material-ui/lab/ToggleButton";
+
+//#region src/UI/inputs/buttons/AmbientToggleButton.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	groupActionContainer: {
+		display: "flex",
+		flexDirection: "column",
+		flexWrap: "wrap",
+		alignContent: "space-around"
+	},
+	toggleRoot: {
+		"&:not(:first-child)": {
+			marginTop: 16,
+			border: "1px solid lightgrey",
+			borderTopLeftRadius: 25,
+			borderTopRightRadius: 25,
+			borderRadius: 25,
+			padding: 0,
+			paddingRight: theme.spacing(2)
+		},
+		"&:not(:last-child)": {
+			borderBottomLeftRadius: 25,
+			borderBottomRightRadius: 25,
+			borderRadius: 25,
+			padding: 0,
+			border: "1px solid lightgrey",
+			paddingRight: theme.spacing(2)
+		},
+		"& .MuiToggleButton-root.Mui-selected": {
+			color: "rgba(0, 0, 0, 0.54)",
+			backgroundColor: "white"
+		}
+	},
+	buttonRoot: {
+		textTransform: "none",
+		fontWeight: 700,
+		justifyContent: "flex-start"
+	},
+	".MuiToggleButton-root.Mui-selected": {
+		color: "rgba(0, 0, 0, 0.54)",
+		backgroundColor: "white"
+	}
+}));
+const AmbientToggleButton = ({ children, value, ariaLabel, onClick, ...otherProps }) => {
+	const classes = useStyles();
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(ToggleButton, {
+		classes: { root: classes.buttonRoot },
+		value,
+		"aria-label": ariaLabel,
+		onClick,
+		...otherProps
+	}, children));
+};
+AmbientToggleButton.propTypes = {
+	children: PropTypes.node,
+	value: PropTypes.string,
+	ariaLabel: PropTypes.string,
+	onClick: PropTypes.func
+};
+
+//#endregion
+export { AmbientToggleButton as t };
+//# sourceMappingURL=AmbientToggleButton-BjyjXj8S.js.map

package/dist/AmbientToggleButton-BjyjXj8S.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmbientToggleButton-BjyjXj8S.js","names":[],"sources":["../src/UI/inputs/buttons/AmbientToggleButton.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles } from '@material-ui/core'\nimport ToggleButton from '@material-ui/lab/ToggleButton';\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  groupActionContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexWrap: 'wrap',\n    alignContent: 'space-around',\n  }, \n  toggleRoot: {\n    '&:not(:first-child)': {\n      marginTop: 16,\n      border: '1px solid lightgrey',\n      borderTopLeftRadius: 25,\n      borderTopRightRadius: 25,\n      borderRadius: 25,\n      padding: 0,\n      paddingRight: theme.spacing(2),\n      \n    },\n    '&:not(:last-child)': {\n      borderBottomLeftRadius: 25,\n      borderBottomRightRadius: 25,\n      borderRadius: 25,\n      padding: 0,\n      border: '1px solid lightgrey',\n      paddingRight: theme.spacing(2)\n    },\n    '& .MuiToggleButton-root.Mui-selected': {\n      color: 'rgba(0, 0, 0, 0.54)',\n      backgroundColor: 'white'\n    }\n  },\n  buttonRoot: {\n    textTransform: 'none',\n    fontWeight: 700,\n    justifyContent: 'flex-start'\n  },\n  '.MuiToggleButton-root.Mui-selected': {\n    color: 'rgba(0, 0, 0, 0.54)',\n    backgroundColor: 'white'\n  }\n}))\n\nexport const AmbientToggleButton = ({children, value, ariaLabel, onClick, ...otherProps}) => {\n  const classes = useStyles()\n\n\n  return (\n    <div className={classes.root} >\n    \n      <ToggleButton classes={{root: classes.buttonRoot}}  value={value} aria-label={ariaLabel} onClick={onClick} {...otherProps} >\n        {children}\n     </ToggleButton>\n    </div>\n  )\n}\nAmbientToggleButton.propTypes = {\n  /**\n   * Contents of the button\n   */\n  children: PropTypes.node,\n  /**\n   * Value used to determine active toggle\n   */\n  value: PropTypes.string,\n    /**\n   * Lable for accessiblity on icon\n   */\n  ariaLabel: PropTypes.string,\n      /**\n   * Function to handle event\n   */\n  onClick: PropTypes.func,\n}\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,sBAAsB;EACpB,SAAS;EACT,eAAe;EACf,UAAU;EACV,cAAc;EACf;CACD,YAAY;EACV,uBAAuB;GACrB,WAAW;GACX,QAAQ;GACR,qBAAqB;GACrB,sBAAsB;GACtB,cAAc;GACd,SAAS;GACT,cAAc,MAAM,QAAQ,EAAE;GAE/B;EACD,sBAAsB;GACpB,wBAAwB;GACxB,yBAAyB;GACzB,cAAc;GACd,SAAS;GACT,QAAQ;GACR,cAAc,MAAM,QAAQ,EAAE;GAC/B;EACD,wCAAwC;GACtC,OAAO;GACP,iBAAiB;GAClB;EACF;CACD,YAAY;EACV,eAAe;EACf,YAAY;EACZ,gBAAgB;EACjB;CACD,sCAAsC;EACpC,OAAO;EACP,iBAAiB;EAClB;CACF,EAAE;AAEH,MAAa,uBAAuB,EAAC,UAAU,OAAO,WAAW,SAAS,GAAG,iBAAgB;CAC3F,MAAM,UAAU,WAAW;AAG3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QAEtB,oCAAC;EAAa,SAAS,EAAC,MAAM,QAAQ,YAAW;EAAU;EAAO,cAAY;EAAoB;EAAS,GAAI;IAC5G,SACW,CACV;;AAGV,oBAAoB,YAAY;CAI9B,UAAU,UAAU;CAIpB,OAAO,UAAU;CAIjB,WAAW,UAAU;CAIrB,SAAS,UAAU;CACpB"}

package/dist/AmbientToggleButtonGroup-Bi9yW5gC.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-Bi9yW5gC.js.map

package/dist/AmbientToggleButtonGroup-Bi9yW5gC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmbientToggleButtonGroup-Bi9yW5gC.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/AmbientToggleButtonGroupDefault-CngfAplM.js

@@ -0,0 +1,107 @@
+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 { withStyles } from "@material-ui/core/styles";
+import { isFragment } from "react-is";
+import { capitalize } from "@material-ui/core/utils";
+
+//#region src/UI/inputs/buttons/AmbientToggleButtonGroupDefault.jsx
+const styles = (theme) => ({
+	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
+		}
+	},
+	groupedVertical: {
+		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 AmbientToggleButtonGroupDefault = forwardRef(function AmbientToggleButton(props, ref) {
+	const { children, classes, className, exclusive = false, onChange, orientation = "horizontal", size = "medium", value, ...other } = props;
+	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
+		});
+	}));
+});
+AmbientToggleButtonGroupDefault.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
+};
+/**
+* Explicitly cast the HOC to any to avoid non-portable inferred React types in declaration output.
+* @type {any}
+*/
+const AmbientToggleButtonGroupDefaultExport = withStyles(styles, { name: "MuiToggleButtonGroup" })(AmbientToggleButtonGroupDefault);
+var AmbientToggleButtonGroupDefault_default = AmbientToggleButtonGroupDefaultExport;
+
+//#endregion
+export { styles as n, AmbientToggleButtonGroupDefault_default as t };
+//# sourceMappingURL=AmbientToggleButtonGroupDefault-CngfAplM.js.map