@mxenabled/connect-widget 2.13.2 → 2.14.0

package/dist/index.es.js

@@ -9045,7 +9045,8 @@ const initialState$6 = {
   wait_for_full_aggregation: false,
   data_request: null,
   use_cases: null,
-  additional_product_option: null
+  additional_product_option: null,
+  show_back_button: false
 };
 const configSlice = createSlice({
   name: "config",
@@ -22844,7 +22845,7 @@ function getSvgIconUtilityClass$2(slot) {
 generateUtilityClasses$1("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
 
 const _excluded$y = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
-const useUtilityClasses$17 = (ownerState) => {
+const useUtilityClasses$19 = (ownerState) => {
   const {
     color,
     fontSize,
@@ -22925,7 +22926,7 @@ const SvgIcon$2 = /* @__PURE__ */ React$1.forwardRef(function SvgIcon2(inProps,
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$17(ownerState);
+  const classes = useUtilityClasses$19(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SvgIconRoot$2, _extends$1({
     as: component,
     className: clsx(classes.root, className),
@@ -28613,7 +28614,7 @@ const v6Colors$1 = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$16 = (ownerState) => {
+const useUtilityClasses$18 = (ownerState) => {
   const {
     align,
     gutterBottom,
@@ -28753,7 +28754,7 @@ const Typography$1 = /* @__PURE__ */ React$1.forwardRef(function Typography2(inP
     variantMapping
   };
   const Component = component || (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping$1[variant]) || "span";
-  const classes = useUtilityClasses$16(ownerState);
+  const classes = useUtilityClasses$18(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TypographyRoot$1, {
     as: Component,
     ref,
@@ -28860,7 +28861,7 @@ function getSvgIconUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
 
-const useUtilityClasses$15 = (ownerState) => {
+const useUtilityClasses$17 = (ownerState) => {
   const {
     color,
     fontSize,
@@ -28999,7 +29000,7 @@ const SvgIcon$1 = /* @__PURE__ */ React$1.forwardRef(function SvgIcon2(inProps,
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$15(ownerState);
+  const classes = useUtilityClasses$17(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SvgIconRoot$1, {
     as: component,
     className: clsx(classes.root, className),
@@ -30270,7 +30271,7 @@ function getButtonBaseUtilityClass$1(slot) {
 }
 const buttonBaseClasses$1 = generateUtilityClasses("MuiButtonBase", ["root", "disabled", "focusVisible"]);
 
-const useUtilityClasses$14 = (ownerState) => {
+const useUtilityClasses$16 = (ownerState) => {
   const {
     disabled,
     focusVisible,
@@ -30487,7 +30488,7 @@ const ButtonBase$1 = /* @__PURE__ */ React$1.forwardRef(function ButtonBase2(inP
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$14(ownerState);
+  const classes = useUtilityClasses$16(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ButtonBaseRoot$1, {
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -30724,7 +30725,7 @@ const rotateAnimation = typeof circularRotateKeyframe !== "string" ? css`
 const dashAnimation = typeof circularDashKeyframe !== "string" ? css`
         animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
       ` : null;
-const useUtilityClasses$13 = (ownerState) => {
+const useUtilityClasses$15 = (ownerState) => {
   const {
     classes,
     variant,
@@ -30847,7 +30848,7 @@ const CircularProgress = /* @__PURE__ */ React$1.forwardRef(function CircularPro
     value,
     variant
   };
-  const classes = useUtilityClasses$13(ownerState);
+  const classes = useUtilityClasses$15(ownerState);
   const circleStyle = {};
   const rootStyle = {};
   const rootProps = {};
@@ -30958,7 +30959,7 @@ function getIconButtonUtilityClass(slot) {
 }
 const iconButtonClasses = generateUtilityClasses("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]);
 
-const useUtilityClasses$12 = (ownerState) => {
+const useUtilityClasses$14 = (ownerState) => {
   const {
     classes,
     disabled,
@@ -31144,7 +31145,7 @@ const IconButton$1 = /* @__PURE__ */ React$1.forwardRef(function IconButton2(inP
     loadingIndicator,
     size
   };
-  const classes = useUtilityClasses$12(ownerState);
+  const classes = useUtilityClasses$14(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconButtonRoot, {
     id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
@@ -31314,7 +31315,7 @@ function useSlot(name, parameters) {
   return [elementType, props];
 }
 
-const useUtilityClasses$11 = (ownerState) => {
+const useUtilityClasses$13 = (ownerState) => {
   const {
     classes,
     inset,
@@ -31401,7 +31402,7 @@ const ListItemText = /* @__PURE__ */ React$1.forwardRef(function ListItemText2(i
     secondary: !!secondary,
     dense
   };
-  const classes = useUtilityClasses$11(ownerState);
+  const classes = useUtilityClasses$13(ownerState);
   const externalForwardedProps = {
     slots,
     slotProps: {
@@ -31533,7 +31534,7 @@ function getListUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiList", ["root", "padding", "dense", "subheader"]);
 
-const useUtilityClasses$10 = (ownerState) => {
+const useUtilityClasses$12 = (ownerState) => {
   const {
     classes,
     disablePadding,
@@ -31599,7 +31600,7 @@ const List$1 = /* @__PURE__ */ React$1.forwardRef(function List2(inProps, ref) {
     dense,
     disablePadding
   };
-  const classes = useUtilityClasses$10(ownerState);
+  const classes = useUtilityClasses$12(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListContext$1.Provider, {
     value: context,
     children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ListRoot$1, {
@@ -32164,7 +32165,7 @@ const inputOverridesResolver$1 = (props, styles) => {
   } = props;
   return [styles.input, ownerState.size === "small" && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === "search" && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
 };
-const useUtilityClasses$$ = (ownerState) => {
+const useUtilityClasses$11 = (ownerState) => {
   const {
     classes,
     color,
@@ -32568,7 +32569,7 @@ const InputBase$1 = /* @__PURE__ */ React$1.forwardRef(function InputBase2(inPro
     startAdornment,
     type
   };
-  const classes = useUtilityClasses$$(ownerState);
+  const classes = useUtilityClasses$11(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot$1;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseInput;
@@ -32869,7 +32870,7 @@ const inputClasses$1 = {
   ...generateUtilityClasses("MuiInput", ["root", "underline", "input"])
 };
 
-const useUtilityClasses$_ = (ownerState) => {
+const useUtilityClasses$10 = (ownerState) => {
   const {
     classes,
     disableUnderline
@@ -33002,7 +33003,7 @@ const Input$1 = /* @__PURE__ */ React$1.forwardRef(function Input2(inProps, ref)
     type = "text",
     ...other
   } = props;
-  const classes = useUtilityClasses$_(props);
+  const classes = useUtilityClasses$10(props);
   const ownerState = {
     disableUnderline
   };
@@ -33224,7 +33225,7 @@ const filledInputClasses$1 = {
   ...generateUtilityClasses("MuiFilledInput", ["root", "underline", "input", "adornedStart", "adornedEnd", "sizeSmall", "multiline", "hiddenLabel"])
 };
 
-const useUtilityClasses$Z = (ownerState) => {
+const useUtilityClasses$$ = (ownerState) => {
   const {
     classes,
     disableUnderline,
@@ -33503,7 +33504,7 @@ const FilledInput$1 = /* @__PURE__ */ React$1.forwardRef(function FilledInput2(i
     multiline,
     type
   };
-  const classes = useUtilityClasses$Z(props);
+  const classes = useUtilityClasses$$(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -33879,7 +33880,7 @@ const outlinedInputClasses$1 = {
   ...generateUtilityClasses("MuiOutlinedInput", ["root", "notchedOutline", "input"])
 };
 
-const useUtilityClasses$Y = (ownerState) => {
+const useUtilityClasses$_ = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -34058,7 +34059,7 @@ const OutlinedInput$1 = /* @__PURE__ */ React$1.forwardRef(function OutlinedInpu
     type = "text",
     ...other
   } = props;
-  const classes = useUtilityClasses$Y(props);
+  const classes = useUtilityClasses$_(props);
   const muiFormControl = useFormControl$1();
   const fcs = formControlState$1({
     props,
@@ -34296,7 +34297,7 @@ function getFormLabelUtilityClasses$1(slot) {
 }
 const formLabelClasses$1 = generateUtilityClasses("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]);
 
-const useUtilityClasses$X = (ownerState) => {
+const useUtilityClasses$Z = (ownerState) => {
   const {
     classes,
     color,
@@ -34394,7 +34395,7 @@ const FormLabel$1 = /* @__PURE__ */ React$1.forwardRef(function FormLabel2(inPro
     focused: fcs.focused,
     required: fcs.required
   };
-  const classes = useUtilityClasses$X(ownerState);
+  const classes = useUtilityClasses$Z(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FormLabelRoot$1, {
     as: component,
     ownerState,
@@ -34468,7 +34469,7 @@ function getInputLabelUtilityClasses$1(slot) {
 }
 generateUtilityClasses("MuiInputLabel", ["root", "focused", "disabled", "error", "required", "asterisk", "formControl", "sizeSmall", "shrink", "animated", "standard", "filled", "outlined"]);
 
-const useUtilityClasses$W = (ownerState) => {
+const useUtilityClasses$Y = (ownerState) => {
   const {
     classes,
     formControl,
@@ -34657,7 +34658,7 @@ const InputLabel$1 = /* @__PURE__ */ React$1.forwardRef(function InputLabel2(inP
     required: fcs.required,
     focused: fcs.focused
   };
-  const classes = useUtilityClasses$W(ownerState);
+  const classes = useUtilityClasses$Y(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabelRoot$1, {
     "data-shrink": shrink,
     ref,
@@ -34740,7 +34741,7 @@ function getFormControlUtilityClasses$1(slot) {
 }
 generateUtilityClasses("MuiFormControl", ["root", "marginNone", "marginNormal", "marginDense", "fullWidth", "disabled"]);
 
-const useUtilityClasses$V = (ownerState) => {
+const useUtilityClasses$X = (ownerState) => {
   const {
     classes,
     margin,
@@ -34830,7 +34831,7 @@ const FormControl$1 = /* @__PURE__ */ React$1.forwardRef(function FormControl2(i
     size,
     variant
   };
-  const classes = useUtilityClasses$V(ownerState);
+  const classes = useUtilityClasses$X(ownerState);
   const [adornedStart, setAdornedStart] = React$1.useState(() => {
     let initialAdornedStart = false;
     if (children) {
@@ -35008,7 +35009,7 @@ function getFormHelperTextUtilityClasses$1(slot) {
 const formHelperTextClasses$1 = generateUtilityClasses("MuiFormHelperText", ["root", "error", "disabled", "sizeSmall", "sizeMedium", "contained", "focused", "filled", "required"]);
 
 var _span$5;
-const useUtilityClasses$U = (ownerState) => {
+const useUtilityClasses$W = (ownerState) => {
   const {
     classes,
     contained,
@@ -35103,7 +35104,7 @@ const FormHelperText$1 = /* @__PURE__ */ React$1.forwardRef(function FormHelperT
     required: fcs.required
   };
   delete ownerState.ownerState;
-  const classes = useUtilityClasses$U(ownerState);
+  const classes = useUtilityClasses$W(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormHelperTextRoot$1, {
     as: component,
     className: clsx(classes.root, className),
@@ -36138,7 +36139,7 @@ function getBackdropUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiBackdrop", ["root", "invisible"]);
 
-const useUtilityClasses$T = (ownerState) => {
+const useUtilityClasses$V = (ownerState) => {
   const {
     classes,
     invisible
@@ -36201,7 +36202,7 @@ const Backdrop$1 = /* @__PURE__ */ React$1.forwardRef(function Backdrop2(inProps
     component,
     invisible
   };
-  const classes = useUtilityClasses$T(ownerState);
+  const classes = useUtilityClasses$V(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     root: components.Root,
@@ -36501,7 +36502,7 @@ function getModalUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiModal", ["root", "hidden", "backdrop"]);
 
-const useUtilityClasses$S = (ownerState) => {
+const useUtilityClasses$U = (ownerState) => {
   const {
     open,
     exited,
@@ -36612,7 +36613,7 @@ const Modal$1 = /* @__PURE__ */ React$1.forwardRef(function Modal2(inProps, ref)
     ...propsWithDefaults,
     exited
   };
-  const classes = useUtilityClasses$S(ownerState);
+  const classes = useUtilityClasses$U(ownerState);
   const childProps = {};
   if (children.props.tabIndex === void 0) {
     childProps.tabIndex = "-1";
@@ -36877,7 +36878,7 @@ function getPaperUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiPaper", ["root", "rounded", "outlined", "elevation", "elevation0", "elevation1", "elevation2", "elevation3", "elevation4", "elevation5", "elevation6", "elevation7", "elevation8", "elevation9", "elevation10", "elevation11", "elevation12", "elevation13", "elevation14", "elevation15", "elevation16", "elevation17", "elevation18", "elevation19", "elevation20", "elevation21", "elevation22", "elevation23", "elevation24"]);
 
-const useUtilityClasses$R = (ownerState) => {
+const useUtilityClasses$T = (ownerState) => {
   const {
     square,
     elevation,
@@ -36949,7 +36950,7 @@ const Paper$1 = /* @__PURE__ */ React$1.forwardRef(function Paper2(inProps, ref)
     square,
     variant
   };
-  const classes = useUtilityClasses$R(ownerState);
+  const classes = useUtilityClasses$T(ownerState);
   if (process.env.NODE_ENV !== "production") {
     if (theme.shadows[elevation] === void 0) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join("\n"));
@@ -37065,7 +37066,7 @@ function getTransformOriginValue$1(transformOrigin) {
 function resolveAnchorEl$1(anchorEl) {
   return typeof anchorEl === "function" ? anchorEl() : anchorEl;
 }
-const useUtilityClasses$Q = (ownerState) => {
+const useUtilityClasses$S = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -37145,7 +37146,7 @@ const Popover$1 = /* @__PURE__ */ React$1.forwardRef(function Popover2(inProps,
     transitionDuration: transitionDurationProp,
     TransitionProps
   };
-  const classes = useUtilityClasses$Q(ownerState);
+  const classes = useUtilityClasses$S(ownerState);
   const getAnchorOffset = React$1.useCallback(() => {
     if (anchorReference === "anchorPosition") {
       if (process.env.NODE_ENV !== "production") {
@@ -37584,7 +37585,7 @@ const LTR_ORIGIN$1 = {
   vertical: "top",
   horizontal: "left"
 };
-const useUtilityClasses$P = (ownerState) => {
+const useUtilityClasses$R = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -37658,7 +37659,7 @@ const Menu$1 = /* @__PURE__ */ React$1.forwardRef(function Menu2(inProps, ref) {
     TransitionProps,
     variant
   };
-  const classes = useUtilityClasses$P(ownerState);
+  const classes = useUtilityClasses$R(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React$1.useRef(null);
   const handleEntering = (element, isAppearing) => {
@@ -37895,7 +37896,7 @@ function getNativeSelectUtilityClasses$1(slot) {
 }
 const nativeSelectClasses$1 = generateUtilityClasses("MuiNativeSelect", ["root", "select", "multiple", "filled", "outlined", "standard", "disabled", "icon", "iconOpen", "iconFilled", "iconOutlined", "iconStandard", "nativeInput", "error"]);
 
-const useUtilityClasses$O = (ownerState) => {
+const useUtilityClasses$Q = (ownerState) => {
   const {
     classes,
     variant,
@@ -38054,7 +38055,7 @@ const NativeSelectInput$1 = /* @__PURE__ */ React$1.forwardRef(function NativeSe
     variant,
     error
   };
-  const classes = useUtilityClasses$O(ownerState);
+  const classes = useUtilityClasses$Q(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(React$1.Fragment, {
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx(NativeSelectSelect$1, {
       ownerState,
@@ -38199,7 +38200,7 @@ function areEqualValues$2(a, b) {
 function isEmpty$3(display) {
   return display == null || typeof display === "string" && !display.trim();
 }
-const useUtilityClasses$N = (ownerState) => {
+const useUtilityClasses$P = (ownerState) => {
   const {
     classes,
     variant,
@@ -38518,7 +38519,7 @@ const SelectInput$1 = /* @__PURE__ */ React$1.forwardRef(function SelectInput2(p
     open,
     error
   };
-  const classes = useUtilityClasses$N(ownerState);
+  const classes = useUtilityClasses$P(ownerState);
   const paperProps = {
     ...MenuProps.PaperProps,
     ...MenuProps.slotProps?.paper
@@ -38762,7 +38763,7 @@ const ArrowDropDownIcon$1 = createSvgIcon$1(/* @__PURE__ */ jsxRuntimeExports.js
   d: "M7 10l5 5 5-5z"
 }), "ArrowDropDown");
 
-const useUtilityClasses$M = (ownerState) => {
+const useUtilityClasses$O = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -38826,7 +38827,7 @@ const Select$2 = /* @__PURE__ */ React$1.forwardRef(function Select2(inProps, re
     variant,
     classes: classesProp
   };
-  const classes = useUtilityClasses$M(ownerState);
+  const classes = useUtilityClasses$O(ownerState);
   const {
     root,
     ...restOfClasses
@@ -39050,7 +39051,7 @@ const variantComponent$1 = {
   filled: FilledInput$1,
   outlined: OutlinedInput$1
 };
-const useUtilityClasses$L = (ownerState) => {
+const useUtilityClasses$N = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -39118,7 +39119,7 @@ const TextField$1 = /* @__PURE__ */ React$1.forwardRef(function TextField2(inPro
     select,
     variant
   };
-  const classes = useUtilityClasses$L(ownerState);
+  const classes = useUtilityClasses$N(ownerState);
   if (process.env.NODE_ENV !== "production") {
     if (select && !children) {
       console.error("MUI: `children` must be passed when using the `TextField` component with `select`.");
@@ -39460,7 +39461,7 @@ const overridesResolver$2 = (props, styles) => {
   } = props;
   return [styles.root, styles[`position${capitalize$1(ownerState.position)}`], ownerState.disablePointerEvents === true && styles.disablePointerEvents, styles[ownerState.variant]];
 };
-const useUtilityClasses$K = (ownerState) => {
+const useUtilityClasses$M = (ownerState) => {
   const {
     classes,
     disablePointerEvents,
@@ -39553,7 +39554,7 @@ const InputAdornment = /* @__PURE__ */ React$1.forwardRef(function InputAdornmen
     position,
     variant
   };
-  const classes = useUtilityClasses$K(ownerState);
+  const classes = useUtilityClasses$M(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormControlContext$1.Provider, {
     value: null,
     children: /* @__PURE__ */ jsxRuntimeExports.jsx(InputAdornmentRoot, {
@@ -39642,7 +39643,7 @@ if (process.env.NODE_ENV !== "production") {
   ButtonGroupButtonContext$1.displayName = "ButtonGroupButtonContext";
 }
 
-const useUtilityClasses$J = (ownerState) => {
+const useUtilityClasses$L = (ownerState) => {
   const {
     color,
     disableElevation,
@@ -40144,7 +40145,7 @@ const Button$2 = /* @__PURE__ */ React$1.forwardRef(function Button2(inProps, re
     type,
     variant
   };
-  const classes = useUtilityClasses$J(ownerState);
+  const classes = useUtilityClasses$L(ownerState);
   const startIcon = (startIconProp || loading && loadingPosition === "start") && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonStartIcon$1, {
     className: classes.startIcon,
     ownerState,
@@ -40324,7 +40325,7 @@ const overridesResolver$1 = (props, styles) => {
   } = props;
   return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === "flex-start" && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];
 };
-const useUtilityClasses$I = (ownerState) => {
+const useUtilityClasses$K = (ownerState) => {
   const {
     alignItems,
     classes,
@@ -40467,7 +40468,7 @@ const ListItemButton = /* @__PURE__ */ React$1.forwardRef(function ListItemButto
     divider,
     selected
   };
-  const classes = useUtilityClasses$I(ownerState);
+  const classes = useUtilityClasses$K(ownerState);
   const handleRef = useForkRef$1(listItemRef, ref);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListContext$1.Provider, {
     value: childContext,
@@ -40568,7 +40569,7 @@ function getListItemSecondaryActionClassesUtilityClass(slot) {
 }
 generateUtilityClasses("MuiListItemSecondaryAction", ["root", "disableGutters"]);
 
-const useUtilityClasses$H = (ownerState) => {
+const useUtilityClasses$J = (ownerState) => {
   const {
     disableGutters,
     classes
@@ -40615,7 +40616,7 @@ const ListItemSecondaryAction = /* @__PURE__ */ React$1.forwardRef(function List
     ...props,
     disableGutters: context.disableGutters
   };
-  const classes = useUtilityClasses$H(ownerState);
+  const classes = useUtilityClasses$J(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemSecondaryActionRoot, {
     className: clsx(classes.root, className),
     ownerState,
@@ -40653,7 +40654,7 @@ const overridesResolver = (props, styles) => {
   } = props;
   return [styles.root, ownerState.dense && styles.dense, ownerState.alignItems === "flex-start" && styles.alignItemsFlexStart, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters, !ownerState.disablePadding && styles.padding, ownerState.hasSecondaryAction && styles.secondaryAction];
 };
-const useUtilityClasses$G = (ownerState) => {
+const useUtilityClasses$I = (ownerState) => {
   const {
     alignItems,
     classes,
@@ -40820,7 +40821,7 @@ const ListItem = /* @__PURE__ */ React$1.forwardRef(function ListItem2(inProps,
     divider,
     hasSecondaryAction
   };
-  const classes = useUtilityClasses$G(ownerState);
+  const classes = useUtilityClasses$I(ownerState);
   const handleRef = useForkRef$1(listItemRef, ref);
   const Root = slots.root || components.Root || ListItemRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
@@ -41010,7 +41011,7 @@ function getChipUtilityClass(slot) {
 }
 const chipClasses = generateUtilityClasses("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]);
 
-const useUtilityClasses$F = (ownerState) => {
+const useUtilityClasses$H = (ownerState) => {
   const {
     classes,
     disabled,
@@ -41401,7 +41402,7 @@ const Chip = /* @__PURE__ */ React$1.forwardRef(function Chip2(inProps, ref) {
     clickable,
     variant
   };
-  const classes = useUtilityClasses$F(ownerState);
+  const classes = useUtilityClasses$H(ownerState);
   const moreProps = component === ButtonBase$1 ? {
     component: ComponentProp || "div",
     focusVisibleClassName: classes.focusVisible,
@@ -41568,7 +41569,7 @@ function getDialogTitleUtilityClass(slot) {
 }
 const dialogTitleClasses = generateUtilityClasses("MuiDialogTitle", ["root"]);
 
-const useUtilityClasses$E = (ownerState) => {
+const useUtilityClasses$G = (ownerState) => {
   const {
     classes,
     dividers
@@ -41629,7 +41630,7 @@ const DialogContent = /* @__PURE__ */ React$1.forwardRef(function DialogContent2
     ...props,
     dividers
   };
-  const classes = useUtilityClasses$E(ownerState);
+  const classes = useUtilityClasses$G(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DialogContentRoot, {
     className: clsx(classes.root, className),
     ownerState,
@@ -41683,7 +41684,7 @@ const DialogBackdrop = styled(Backdrop$1, {
   // Improve scrollable dialog support.
   zIndex: -1
 });
-const useUtilityClasses$D = (ownerState) => {
+const useUtilityClasses$F = (ownerState) => {
   const {
     classes,
     scroll,
@@ -41888,7 +41889,7 @@ const Dialog = /* @__PURE__ */ React$1.forwardRef(function Dialog2(inProps, ref)
     maxWidth,
     scroll
   };
-  const classes = useUtilityClasses$D(ownerState);
+  const classes = useUtilityClasses$F(ownerState);
   const backdropClick = React$1.useRef();
   const handleMouseDown = (event) => {
     backdropClick.current = event.target === event.currentTarget;
@@ -43231,7 +43232,7 @@ function getButtonBaseUtilityClass(slot) {
 const buttonBaseClasses = generateUtilityClasses$2("MuiButtonBase", ["root", "disabled", "focusVisible"]);
 
 const _excluded$v = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
-const useUtilityClasses$C = (ownerState) => {
+const useUtilityClasses$E = (ownerState) => {
   const {
     disabled,
     focusVisible,
@@ -43479,7 +43480,7 @@ const ButtonBase = /* @__PURE__ */ React$1.forwardRef(function ButtonBase2(inPro
     tabIndex,
     focusVisible
   });
-  const classes = useUtilityClasses$C(ownerState);
+  const classes = useUtilityClasses$E(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ButtonBaseRoot, _extends$1({
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -43690,7 +43691,7 @@ function getSvgIconUtilityClass(slot) {
 generateUtilityClasses$2("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
 
 const _excluded$u = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
-const useUtilityClasses$B = (ownerState) => {
+const useUtilityClasses$D = (ownerState) => {
   const {
     color,
     fontSize,
@@ -43771,7 +43772,7 @@ const SvgIcon = /* @__PURE__ */ React$1.forwardRef(function SvgIcon2(inProps, re
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$B(ownerState);
+  const classes = useUtilityClasses$D(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SvgIconRoot, _extends$1({
     as: component,
     className: clsx(classes.root, className),
@@ -44190,7 +44191,7 @@ if (process.env.NODE_ENV !== "production") {
 }
 
 const _excluded$s = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
-const useUtilityClasses$A = (ownerState) => {
+const useUtilityClasses$C = (ownerState) => {
   const {
     color,
     disableElevation,
@@ -44427,7 +44428,7 @@ const Button$1 = /* @__PURE__ */ React$1.forwardRef(function Button2(inProps, re
     type,
     variant
   });
-  const classes = useUtilityClasses$A(ownerState);
+  const classes = useUtilityClasses$C(ownerState);
   const startIcon = startIconProp && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState,
@@ -44554,7 +44555,7 @@ function getTypographyUtilityClass(slot) {
 generateUtilityClasses$2("MuiTypography", ["root", "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "inherit", "button", "caption", "overline", "alignLeft", "alignRight", "alignCenter", "alignJustify", "noWrap", "gutterBottom", "paragraph"]);
 
 const _excluded$r = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
-const useUtilityClasses$z = (ownerState) => {
+const useUtilityClasses$B = (ownerState) => {
   const {
     align,
     gutterBottom,
@@ -44650,7 +44651,7 @@ const Typography = /* @__PURE__ */ React$1.forwardRef(function Typography2(inPro
     variantMapping
   });
   const Component = component || (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) || "span";
-  const classes = useUtilityClasses$z(ownerState);
+  const classes = useUtilityClasses$B(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TypographyRoot, _extends$1({
     as: Component,
     ref,
@@ -45445,7 +45446,7 @@ function getBackdropUtilityClass(slot) {
 generateUtilityClasses$2("MuiBackdrop", ["root", "invisible"]);
 
 const _excluded$p = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
-const useUtilityClasses$y = (ownerState) => {
+const useUtilityClasses$A = (ownerState) => {
   const {
     classes,
     invisible
@@ -45503,7 +45504,7 @@ const Backdrop = /* @__PURE__ */ React$1.forwardRef(function Backdrop2(inProps,
     component,
     invisible
   });
-  const classes = useUtilityClasses$y(ownerState);
+  const classes = useUtilityClasses$A(ownerState);
   const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TransitionComponent, _extends$1({
     in: open,
@@ -45782,7 +45783,7 @@ function getModalUtilityClass(slot) {
 generateUtilityClasses$2("MuiModal", ["root", "hidden", "backdrop"]);
 
 const _excluded$o = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
-const useUtilityClasses$x = (ownerState) => {
+const useUtilityClasses$z = (ownerState) => {
   const {
     open,
     exited,
@@ -45880,7 +45881,7 @@ const Modal = /* @__PURE__ */ React$1.forwardRef(function Modal2(inProps, ref) {
   const ownerState = _extends$1({}, propsWithDefaults, {
     exited
   });
-  const classes = useUtilityClasses$x(ownerState);
+  const classes = useUtilityClasses$z(ownerState);
   const childProps = {};
   if (children.props.tabIndex === void 0) {
     childProps.tabIndex = "-1";
@@ -46135,7 +46136,7 @@ function getPaperUtilityClass(slot) {
 generateUtilityClasses$2("MuiPaper", ["root", "rounded", "outlined", "elevation", "elevation0", "elevation1", "elevation2", "elevation3", "elevation4", "elevation5", "elevation6", "elevation7", "elevation8", "elevation9", "elevation10", "elevation11", "elevation12", "elevation13", "elevation14", "elevation15", "elevation16", "elevation17", "elevation18", "elevation19", "elevation20", "elevation21", "elevation22", "elevation23", "elevation24"]);
 
 const _excluded$n = ["className", "component", "elevation", "square", "variant"];
-const useUtilityClasses$w = (ownerState) => {
+const useUtilityClasses$y = (ownerState) => {
   const {
     square,
     elevation,
@@ -46195,7 +46196,7 @@ const Paper = /* @__PURE__ */ React$1.forwardRef(function Paper2(inProps, ref) {
     square,
     variant
   });
-  const classes = useUtilityClasses$w(ownerState);
+  const classes = useUtilityClasses$y(ownerState);
   if (process.env.NODE_ENV !== "production") {
     const theme = useTheme$4();
     if (theme.shadows[elevation] === void 0) {
@@ -46536,7 +46537,7 @@ const inputOverridesResolver = (props, styles) => {
   } = props;
   return [styles.input, ownerState.size === "small" && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === "search" && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
 };
-const useUtilityClasses$v = (ownerState) => {
+const useUtilityClasses$x = (ownerState) => {
   const {
     classes,
     color,
@@ -46908,7 +46909,7 @@ const InputBase = /* @__PURE__ */ React$1.forwardRef(function InputBase2(inProps
     startAdornment,
     type
   });
-  const classes = useUtilityClasses$v(ownerState);
+  const classes = useUtilityClasses$x(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseComponent;
@@ -47195,7 +47196,7 @@ function getInputUtilityClass(slot) {
 const inputClasses = _extends$1({}, inputBaseClasses, generateUtilityClasses$2("MuiInput", ["root", "underline", "input"]));
 
 const _excluded$k = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
-const useUtilityClasses$u = (ownerState) => {
+const useUtilityClasses$w = (ownerState) => {
   const {
     classes,
     disableUnderline
@@ -47307,7 +47308,7 @@ const Input = /* @__PURE__ */ React$1.forwardRef(function Input2(inProps, ref) {
     slots = {},
     type = "text"
   } = props, other = _objectWithoutPropertiesLoose(props, _excluded$k);
-  const classes = useUtilityClasses$u(props);
+  const classes = useUtilityClasses$w(props);
   const ownerState = {
     disableUnderline
   };
@@ -47528,7 +47529,7 @@ function getFilledInputUtilityClass(slot) {
 const filledInputClasses = _extends$1({}, inputBaseClasses, generateUtilityClasses$2("MuiFilledInput", ["root", "underline", "input"]));
 
 const _excluded$j = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
-const useUtilityClasses$t = (ownerState) => {
+const useUtilityClasses$v = (ownerState) => {
   const {
     classes,
     disableUnderline
@@ -47720,7 +47721,7 @@ const FilledInput = /* @__PURE__ */ React$1.forwardRef(function FilledInput2(inP
     multiline,
     type
   });
-  const classes = useUtilityClasses$t(props);
+  const classes = useUtilityClasses$v(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -48075,7 +48076,7 @@ function getOutlinedInputUtilityClass(slot) {
 const outlinedInputClasses = _extends$1({}, inputBaseClasses, generateUtilityClasses$2("MuiOutlinedInput", ["root", "notchedOutline", "input"]));
 
 const _excluded$h = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
-const useUtilityClasses$s = (ownerState) => {
+const useUtilityClasses$u = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -48193,7 +48194,7 @@ const OutlinedInput = /* @__PURE__ */ React$1.forwardRef(function OutlinedInput2
     slots = {},
     type = "text"
   } = props, other = _objectWithoutPropertiesLoose(props, _excluded$h);
-  const classes = useUtilityClasses$s(props);
+  const classes = useUtilityClasses$u(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -48412,7 +48413,7 @@ function getFormLabelUtilityClasses(slot) {
 const formLabelClasses = generateUtilityClasses$2("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]);
 
 const _excluded$g = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
-const useUtilityClasses$r = (ownerState) => {
+const useUtilityClasses$t = (ownerState) => {
   const {
     classes,
     color,
@@ -48491,7 +48492,7 @@ const FormLabel = /* @__PURE__ */ React$1.forwardRef(function FormLabel2(inProps
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$r(ownerState);
+  const classes = useUtilityClasses$t(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FormLabelRoot, _extends$1({
     as: component,
     ownerState,
@@ -48566,7 +48567,7 @@ function getInputLabelUtilityClasses(slot) {
 generateUtilityClasses$2("MuiInputLabel", ["root", "focused", "disabled", "error", "required", "asterisk", "formControl", "sizeSmall", "shrink", "animated", "standard", "filled", "outlined"]);
 
 const _excluded$f = ["disableAnimation", "margin", "shrink", "variant", "className"];
-const useUtilityClasses$q = (ownerState) => {
+const useUtilityClasses$s = (ownerState) => {
   const {
     classes,
     formControl,
@@ -48686,7 +48687,7 @@ const InputLabel = /* @__PURE__ */ React$1.forwardRef(function InputLabel2(inPro
     required: fcs.required,
     focused: fcs.focused
   });
-  const classes = useUtilityClasses$q(ownerState);
+  const classes = useUtilityClasses$s(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabelRoot, _extends$1({
     "data-shrink": shrink,
     ownerState,
@@ -48770,7 +48771,7 @@ function getFormControlUtilityClasses(slot) {
 generateUtilityClasses$2("MuiFormControl", ["root", "marginNone", "marginNormal", "marginDense", "fullWidth", "disabled"]);
 
 const _excluded$e = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
-const useUtilityClasses$p = (ownerState) => {
+const useUtilityClasses$r = (ownerState) => {
   const {
     classes,
     margin,
@@ -48842,7 +48843,7 @@ const FormControl = /* @__PURE__ */ React$1.forwardRef(function FormControl2(inP
     size,
     variant
   });
-  const classes = useUtilityClasses$p(ownerState);
+  const classes = useUtilityClasses$r(ownerState);
   const [adornedStart, setAdornedStart] = React$1.useState(() => {
     let initialAdornedStart = false;
     if (children) {
@@ -49019,7 +49020,7 @@ const formHelperTextClasses = generateUtilityClasses$2("MuiFormHelperText", ["ro
 
 var _span$1;
 const _excluded$d = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
-const useUtilityClasses$o = (ownerState) => {
+const useUtilityClasses$q = (ownerState) => {
   const {
     classes,
     contained,
@@ -49094,7 +49095,7 @@ const FormHelperText = /* @__PURE__ */ React$1.forwardRef(function FormHelperTex
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$o(ownerState);
+  const classes = useUtilityClasses$q(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormHelperTextRoot, _extends$1({
     as: component,
     ownerState,
@@ -49180,7 +49181,7 @@ function getListUtilityClass(slot) {
 generateUtilityClasses$2("MuiList", ["root", "padding", "dense", "subheader"]);
 
 const _excluded$c = ["children", "className", "component", "dense", "disablePadding", "subheader"];
-const useUtilityClasses$n = (ownerState) => {
+const useUtilityClasses$p = (ownerState) => {
   const {
     classes,
     disablePadding,
@@ -49235,7 +49236,7 @@ const List = /* @__PURE__ */ React$1.forwardRef(function List2(inProps, ref) {
     dense,
     disablePadding
   });
-  const classes = useUtilityClasses$n(ownerState);
+  const classes = useUtilityClasses$p(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListContext.Provider, {
     value: context,
     children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ListRoot, _extends$1({
@@ -49789,7 +49790,7 @@ function getTransformOriginValue(transformOrigin) {
 function resolveAnchorEl(anchorEl) {
   return typeof anchorEl === "function" ? anchorEl() : anchorEl;
 }
-const useUtilityClasses$m = (ownerState) => {
+const useUtilityClasses$o = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -49870,7 +49871,7 @@ const Popover = /* @__PURE__ */ React$1.forwardRef(function Popover2(inProps, re
     transitionDuration: transitionDurationProp,
     TransitionProps
   });
-  const classes = useUtilityClasses$m(ownerState);
+  const classes = useUtilityClasses$o(ownerState);
   const getAnchorOffset = React$1.useCallback(() => {
     if (anchorReference === "anchorPosition") {
       if (process.env.NODE_ENV !== "production") {
@@ -50254,7 +50255,7 @@ const LTR_ORIGIN = {
   vertical: "top",
   horizontal: "left"
 };
-const useUtilityClasses$l = (ownerState) => {
+const useUtilityClasses$n = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -50326,7 +50327,7 @@ const Menu = /* @__PURE__ */ React$1.forwardRef(function Menu2(inProps, ref) {
     TransitionProps,
     variant
   });
-  const classes = useUtilityClasses$l(ownerState);
+  const classes = useUtilityClasses$n(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React$1.useRef(null);
   const handleEntering = (element, isAppearing) => {
@@ -50528,7 +50529,7 @@ function getNativeSelectUtilityClasses(slot) {
 const nativeSelectClasses = generateUtilityClasses$2("MuiNativeSelect", ["root", "select", "multiple", "filled", "outlined", "standard", "disabled", "icon", "iconOpen", "iconFilled", "iconOutlined", "iconStandard", "nativeInput", "error"]);
 
 const _excluded$7 = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
-const useUtilityClasses$k = (ownerState) => {
+const useUtilityClasses$m = (ownerState) => {
   const {
     classes,
     variant,
@@ -50658,7 +50659,7 @@ const NativeSelectInput = /* @__PURE__ */ React$1.forwardRef(function NativeSele
     variant,
     error
   });
-  const classes = useUtilityClasses$k(ownerState);
+  const classes = useUtilityClasses$m(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(React$1.Fragment, {
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx(NativeSelectSelect, _extends$1({
       ownerState,
@@ -50803,7 +50804,7 @@ function areEqualValues$1(a, b) {
 function isEmpty$1(display) {
   return display == null || typeof display === "string" && !display.trim();
 }
-const useUtilityClasses$j = (ownerState) => {
+const useUtilityClasses$l = (ownerState) => {
   const {
     classes,
     variant,
@@ -51118,7 +51119,7 @@ const SelectInput = /* @__PURE__ */ React$1.forwardRef(function SelectInput2(pro
     open,
     error
   });
-  const classes = useUtilityClasses$j(ownerState);
+  const classes = useUtilityClasses$l(ownerState);
   const paperProps = _extends$1({}, MenuProps.PaperProps, (_MenuProps$slotProps = MenuProps.slotProps) == null ? void 0 : _MenuProps$slotProps.paper);
   const listboxId = useId();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(React$1.Fragment, {
@@ -51346,7 +51347,7 @@ const ArrowDropDownIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("p
 }), "ArrowDropDown");
 
 const _excluded$5 = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"], _excluded2 = ["root"];
-const useUtilityClasses$i = (ownerState) => {
+const useUtilityClasses$k = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -51401,7 +51402,7 @@ const Select$1 = /* @__PURE__ */ React$1.forwardRef(function Select2(inProps, re
     variant,
     classes: classesProp
   });
-  const classes = useUtilityClasses$i(ownerState);
+  const classes = useUtilityClasses$k(ownerState);
   const restOfClasses = _objectWithoutPropertiesLoose(classes, _excluded2);
   const InputComponent = input || {
     standard: /* @__PURE__ */ jsxRuntimeExports.jsx(StyledInput, {
@@ -51617,7 +51618,7 @@ const variantComponent = {
   filled: FilledInput,
   outlined: OutlinedInput
 };
-const useUtilityClasses$h = (ownerState) => {
+const useUtilityClasses$j = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -51681,7 +51682,7 @@ const TextField = /* @__PURE__ */ React$1.forwardRef(function TextField2(inProps
     select,
     variant
   });
-  const classes = useUtilityClasses$h(ownerState);
+  const classes = useUtilityClasses$j(ownerState);
   if (process.env.NODE_ENV !== "production") {
     if (select && !children) {
       console.error("MUI: `children` must be passed when using the `TextField` component with `select`.");
@@ -51936,7 +51937,7 @@ function getSwitchBaseUtilityClass(slot) {
 generateUtilityClasses$2("PrivateSwitchBase", ["root", "checked", "disabled", "input", "edgeStart", "edgeEnd"]);
 
 const _excluded$3 = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
-const useUtilityClasses$g = (ownerState) => {
+const useUtilityClasses$i = (ownerState) => {
   const {
     classes,
     checked,
@@ -52046,7 +52047,7 @@ const SwitchBase = /* @__PURE__ */ React$1.forwardRef(function SwitchBase2(props
     disableFocusRipple,
     edge
   });
-  const classes = useUtilityClasses$g(ownerState);
+  const classes = useUtilityClasses$i(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SwitchBaseRoot, _extends$1({
     component: "span",
     className: clsx(classes.root, className),
@@ -52202,7 +52203,7 @@ function getCheckboxUtilityClass(slot) {
 const checkboxClasses = generateUtilityClasses$2("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium"]);
 
 const _excluded$2 = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
-const useUtilityClasses$f = (ownerState) => {
+const useUtilityClasses$h = (ownerState) => {
   const {
     classes,
     indeterminate,
@@ -52272,7 +52273,7 @@ const Checkbox = /* @__PURE__ */ React$1.forwardRef(function Checkbox2(inProps,
     indeterminate,
     size
   });
-  const classes = useUtilityClasses$f(ownerState);
+  const classes = useUtilityClasses$h(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxRoot, _extends$1({
     type: "checkbox",
     inputProps: _extends$1({
@@ -52401,7 +52402,7 @@ function getFormControlLabelUtilityClasses(slot) {
 const formControlLabelClasses = generateUtilityClasses$2("MuiFormControlLabel", ["root", "labelPlacementStart", "labelPlacementTop", "labelPlacementBottom", "disabled", "label", "error", "required", "asterisk"]);
 
 const _excluded$1 = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
-const useUtilityClasses$e = (ownerState) => {
+const useUtilityClasses$g = (ownerState) => {
   const {
     classes,
     disabled,
@@ -52512,7 +52513,7 @@ const FormControlLabel = /* @__PURE__ */ React$1.forwardRef(function FormControl
     required,
     error: fcs.error
   });
-  const classes = useUtilityClasses$e(ownerState);
+  const classes = useUtilityClasses$g(ownerState);
   const typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
   let label = labelProp;
   if (label != null && label.type !== Typography && !disableTypography) {
@@ -52715,7 +52716,7 @@ function getRadioUtilityClass(slot) {
 const radioClasses = generateUtilityClasses$2("MuiRadio", ["root", "checked", "disabled", "colorPrimary", "colorSecondary", "sizeSmall"]);
 
 const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
-const useUtilityClasses$d = (ownerState) => {
+const useUtilityClasses$f = (ownerState) => {
   const {
     classes,
     color,
@@ -52788,7 +52789,7 @@ const Radio$1 = /* @__PURE__ */ React$1.forwardRef(function Radio2(inProps, ref)
     color,
     size
   });
-  const classes = useUtilityClasses$d(ownerState);
+  const classes = useUtilityClasses$f(ownerState);
   const radioGroup = useRadioGroup();
   let checked = checkedProp;
   const onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
@@ -54701,7 +54702,7 @@ function getCollapseUtilityClass(slot) {
 }
 generateUtilityClasses("MuiCollapse", ["root", "horizontal", "vertical", "entered", "hidden", "wrapper", "wrapperInner"]);
 
-const useUtilityClasses$c = (ownerState) => {
+const useUtilityClasses$e = (ownerState) => {
   const {
     orientation,
     classes
@@ -54829,7 +54830,7 @@ const Collapse = /* @__PURE__ */ React$1.forwardRef(function Collapse2(inProps,
     orientation,
     collapsedSize: collapsedSizeProp
   };
-  const classes = useUtilityClasses$c(ownerState);
+  const classes = useUtilityClasses$e(ownerState);
   const theme = useTheme();
   const timer = useTimeout$1();
   const wrapperRef = React$1.useRef(null);
@@ -55092,7 +55093,7 @@ function getAccordionUtilityClass(slot) {
 }
 const accordionClasses = generateUtilityClasses("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled", "gutters", "region"]);
 
-const useUtilityClasses$b = (ownerState) => {
+const useUtilityClasses$d = (ownerState) => {
   const {
     classes,
     square,
@@ -55248,7 +55249,7 @@ const Accordion = /* @__PURE__ */ React$1.forwardRef(function Accordion2(inProps
     disableGutters,
     expanded
   };
-  const classes = useUtilityClasses$b(ownerState);
+  const classes = useUtilityClasses$d(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     ...slots
@@ -55407,7 +55408,7 @@ function getAccordionDetailsUtilityClass(slot) {
 }
 generateUtilityClasses("MuiAccordionDetails", ["root"]);
 
-const useUtilityClasses$a = (ownerState) => {
+const useUtilityClasses$c = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -55435,7 +55436,7 @@ const AccordionDetails = /* @__PURE__ */ React$1.forwardRef(function AccordionDe
     ...other
   } = props;
   const ownerState = props;
-  const classes = useUtilityClasses$a(ownerState);
+  const classes = useUtilityClasses$c(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionDetailsRoot, {
     className: clsx(classes.root, className),
     ref,
@@ -55471,7 +55472,7 @@ function getAccordionSummaryUtilityClass(slot) {
 }
 const accordionSummaryClasses = generateUtilityClasses("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disabled", "gutters", "contentGutters", "content", "expandIconWrapper"]);
 
-const useUtilityClasses$9 = (ownerState) => {
+const useUtilityClasses$b = (ownerState) => {
   const {
     classes,
     expanded,
@@ -55596,7 +55597,7 @@ const AccordionSummary = /* @__PURE__ */ React$1.forwardRef(function AccordionSu
     disabled,
     disableGutters
   };
-  const classes = useUtilityClasses$9(ownerState);
+  const classes = useUtilityClasses$b(ownerState);
   const externalForwardedProps = {
     slots,
     slotProps
@@ -55707,6 +55708,221 @@ process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes = {
   sx: PropTypes$1.oneOfType([PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.object, PropTypes$1.bool])), PropTypes$1.func, PropTypes$1.object])
 } : void 0;
 
+function getAppBarUtilityClass(slot) {
+  return generateUtilityClass("MuiAppBar", slot);
+}
+generateUtilityClasses("MuiAppBar", ["root", "positionFixed", "positionAbsolute", "positionSticky", "positionStatic", "positionRelative", "colorDefault", "colorPrimary", "colorSecondary", "colorInherit", "colorTransparent", "colorError", "colorInfo", "colorSuccess", "colorWarning"]);
+
+const useUtilityClasses$a = (ownerState) => {
+  const {
+    color,
+    position,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ["root", `color${capitalize$1(color)}`, `position${capitalize$1(position)}`]
+  };
+  return composeClasses$1(slots, getAppBarUtilityClass, classes);
+};
+const joinVars = (var1, var2) => var1 ? `${var1?.replace(")", "")}, ${var2})` : var2;
+const AppBarRoot = styled(Paper$1, {
+  name: "MuiAppBar",
+  slot: "Root",
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[`position${capitalize$1(ownerState.position)}`], styles[`color${capitalize$1(ownerState.color)}`]];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  boxSizing: "border-box",
+  // Prevent padding issue with the Modal and fixed positioned AppBar.
+  flexShrink: 0,
+  variants: [{
+    props: {
+      position: "fixed"
+    },
+    style: {
+      position: "fixed",
+      zIndex: (theme.vars || theme).zIndex.appBar,
+      top: 0,
+      left: "auto",
+      right: 0,
+      "@media print": {
+        // Prevent the app bar to be visible on each printed page.
+        position: "absolute"
+      }
+    }
+  }, {
+    props: {
+      position: "absolute"
+    },
+    style: {
+      position: "absolute",
+      zIndex: (theme.vars || theme).zIndex.appBar,
+      top: 0,
+      left: "auto",
+      right: 0
+    }
+  }, {
+    props: {
+      position: "sticky"
+    },
+    style: {
+      position: "sticky",
+      zIndex: (theme.vars || theme).zIndex.appBar,
+      top: 0,
+      left: "auto",
+      right: 0
+    }
+  }, {
+    props: {
+      position: "static"
+    },
+    style: {
+      position: "static"
+    }
+  }, {
+    props: {
+      position: "relative"
+    },
+    style: {
+      position: "relative"
+    }
+  }, {
+    props: {
+      color: "inherit"
+    },
+    style: {
+      "--AppBar-color": "inherit"
+    }
+  }, {
+    props: {
+      color: "default"
+    },
+    style: {
+      "--AppBar-background": theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[100],
+      "--AppBar-color": theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[100]),
+      ...theme.applyStyles("dark", {
+        "--AppBar-background": theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[900],
+        "--AppBar-color": theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[900])
+      })
+    }
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(["contrastText"])).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      "--AppBar-background": (theme.vars ?? theme).palette[color].main,
+      "--AppBar-color": (theme.vars ?? theme).palette[color].contrastText
+    }
+  })), {
+    props: (props) => props.enableColorOnDark === true && !["inherit", "transparent"].includes(props.color),
+    style: {
+      backgroundColor: "var(--AppBar-background)",
+      color: "var(--AppBar-color)"
+    }
+  }, {
+    props: (props) => props.enableColorOnDark === false && !["inherit", "transparent"].includes(props.color),
+    style: {
+      backgroundColor: "var(--AppBar-background)",
+      color: "var(--AppBar-color)",
+      ...theme.applyStyles("dark", {
+        backgroundColor: theme.vars ? joinVars(theme.vars.palette.AppBar.darkBg, "var(--AppBar-background)") : null,
+        color: theme.vars ? joinVars(theme.vars.palette.AppBar.darkColor, "var(--AppBar-color)") : null
+      })
+    }
+  }, {
+    props: {
+      color: "transparent"
+    },
+    style: {
+      "--AppBar-background": "transparent",
+      "--AppBar-color": "inherit",
+      backgroundColor: "var(--AppBar-background)",
+      color: "var(--AppBar-color)",
+      ...theme.applyStyles("dark", {
+        backgroundImage: "none"
+      })
+    }
+  }]
+})));
+const AppBar = /* @__PURE__ */ React$1.forwardRef(function AppBar2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiAppBar"
+  });
+  const {
+    className,
+    color = "primary",
+    enableColorOnDark = false,
+    position = "fixed",
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    color,
+    position,
+    enableColorOnDark
+  };
+  const classes = useUtilityClasses$a(ownerState);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(AppBarRoot, {
+    square: true,
+    component: "header",
+    ownerState,
+    elevation: 4,
+    className: clsx(classes.root, className, position === "fixed" && "mui-fixed"),
+    ref,
+    ...other
+  });
+});
+process.env.NODE_ENV !== "production" ? AppBar.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes$1.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes$1.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes$1.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes$1.oneOfType([PropTypes$1.oneOf(["default", "inherit", "primary", "secondary", "transparent", "error", "info", "success", "warning"]), PropTypes$1.string]),
+  /**
+   * If true, the `color` prop is applied in dark mode.
+   * @default false
+   */
+  enableColorOnDark: PropTypes$1.bool,
+  /**
+   * The positioning type. The behavior of the different options is described
+   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
+   * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
+   * @default 'fixed'
+   */
+  position: PropTypes$1.oneOf(["absolute", "fixed", "relative", "static", "sticky"]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes$1.oneOfType([PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.object, PropTypes$1.bool])), PropTypes$1.func, PropTypes$1.object])
+} : void 0;
+
 function useBadge(parameters) {
   const {
     badgeContent: badgeContentProp,
@@ -55769,7 +55985,7 @@ const badgeClasses = generateUtilityClasses("MuiBadge", [
 
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
-const useUtilityClasses$8 = (ownerState) => {
+const useUtilityClasses$9 = (ownerState) => {
   const {
     color,
     anchorOrigin,
@@ -56032,7 +56248,7 @@ const Badge = /* @__PURE__ */ React$1.forwardRef(function Badge2(inProps, ref) {
     overlap,
     variant
   };
-  const classes = useUtilityClasses$8(ownerState);
+  const classes = useUtilityClasses$9(ownerState);
   const externalForwardedProps = {
     slots: {
       root: slots?.root ?? components.Root,
@@ -56213,7 +56429,7 @@ process.env.NODE_ENV !== "production" ? Box.propTypes = {
   sx: PropTypes$1.oneOfType([PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.object, PropTypes$1.bool])), PropTypes$1.func, PropTypes$1.object])
 } : void 0;
 
-const useUtilityClasses$7 = (ownerState) => {
+const useUtilityClasses$8 = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -56241,7 +56457,7 @@ const DialogTitle = /* @__PURE__ */ React$1.forwardRef(function DialogTitle2(inP
     ...other
   } = props;
   const ownerState = props;
-  const classes = useUtilityClasses$7(ownerState);
+  const classes = useUtilityClasses$8(ownerState);
   const {
     titleId = idProp
   } = React$1.useContext(DialogContext);
@@ -56287,7 +56503,7 @@ function getFormGroupUtilityClass(slot) {
 }
 generateUtilityClasses("MuiFormGroup", ["root", "row", "error"]);
 
-const useUtilityClasses$6 = (ownerState) => {
+const useUtilityClasses$7 = (ownerState) => {
   const {
     classes,
     row,
@@ -56341,7 +56557,7 @@ const FormGroup = /* @__PURE__ */ React$1.forwardRef(function FormGroup2(inProps
     row,
     error: fcs.error
   };
-  const classes = useUtilityClasses$6(ownerState);
+  const classes = useUtilityClasses$7(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormGroupRoot, {
     className: clsx(classes.root, className),
     ownerState,
@@ -56382,7 +56598,7 @@ function getIconUtilityClass(slot) {
 }
 generateUtilityClasses("MuiIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
 
-const useUtilityClasses$5 = (ownerState) => {
+const useUtilityClasses$6 = (ownerState) => {
   const {
     color,
     fontSize,
@@ -56494,7 +56710,7 @@ const Icon = /* @__PURE__ */ React$1.forwardRef(function Icon2(inProps, ref) {
     component: Component,
     fontSize
   };
-  const classes = useUtilityClasses$5(ownerState);
+  const classes = useUtilityClasses$6(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(IconRoot, {
     as: Component,
     className: clsx(
@@ -56587,7 +56803,7 @@ const v6Colors = {
   textSecondary: true,
   textDisabled: true
 };
-const useUtilityClasses$4 = (ownerState) => {
+const useUtilityClasses$5 = (ownerState) => {
   const {
     classes,
     component,
@@ -56757,7 +56973,7 @@ const Link$1 = /* @__PURE__ */ React$1.forwardRef(function Link2(inProps, ref) {
     underline,
     variant
   };
-  const classes = useUtilityClasses$4(ownerState);
+  const classes = useUtilityClasses$5(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(LinkRoot, {
     color,
     className: clsx(classes.root, className),
@@ -56847,7 +57063,7 @@ function getListItemAvatarUtilityClass(slot) {
 }
 generateUtilityClasses("MuiListItemAvatar", ["root", "alignItemsFlexStart"]);
 
-const useUtilityClasses$3 = (ownerState) => {
+const useUtilityClasses$4 = (ownerState) => {
   const {
     alignItems,
     classes
@@ -56892,7 +57108,7 @@ const ListItemAvatar = /* @__PURE__ */ React$1.forwardRef(function ListItemAvata
     ...props,
     alignItems: context.alignItems
   };
-  const classes = useUtilityClasses$3(ownerState);
+  const classes = useUtilityClasses$4(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemAvatarRoot, {
     className: clsx(classes.root, className),
     ownerState,
@@ -56933,7 +57149,7 @@ function getRadioGroupUtilityClass(slot) {
 }
 generateUtilityClasses("MuiRadioGroup", ["root", "row", "error"]);
 
-const useUtilityClasses$2 = (props) => {
+const useUtilityClasses$3 = (props) => {
   const {
     classes,
     row,
@@ -56958,7 +57174,7 @@ const RadioGroup = /* @__PURE__ */ React$1.forwardRef(function RadioGroup2(props
     ...other
   } = props;
   const rootRef = React$1.useRef(null);
-  const classes = useUtilityClasses$2(props);
+  const classes = useUtilityClasses$3(props);
   const [value, setValueState] = useControlled$1({
     controlled: valueProp,
     default: defaultValue,
@@ -57034,6 +57250,129 @@ process.env.NODE_ENV !== "production" ? RadioGroup.propTypes = {
   value: PropTypes$1.any
 } : void 0;
 
+function getToolbarUtilityClass(slot) {
+  return generateUtilityClass("MuiToolbar", slot);
+}
+generateUtilityClasses("MuiToolbar", ["root", "gutters", "regular", "dense"]);
+
+const useUtilityClasses$2 = (ownerState) => {
+  const {
+    classes,
+    disableGutters,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ["root", !disableGutters && "gutters", variant]
+  };
+  return composeClasses$1(slots, getToolbarUtilityClass, classes);
+};
+const ToolbarRoot = styled("div", {
+  name: "MuiToolbar",
+  slot: "Root",
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, !ownerState.disableGutters && styles.gutters, styles[ownerState.variant]];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disableGutters,
+    style: {
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      [theme.breakpoints.up("sm")]: {
+        paddingLeft: theme.spacing(3),
+        paddingRight: theme.spacing(3)
+      }
+    }
+  }, {
+    props: {
+      variant: "dense"
+    },
+    style: {
+      minHeight: 48
+    }
+  }, {
+    props: {
+      variant: "regular"
+    },
+    style: theme.mixins.toolbar
+  }]
+})));
+const Toolbar = /* @__PURE__ */ React$1.forwardRef(function Toolbar2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiToolbar"
+  });
+  const {
+    className,
+    component = "div",
+    disableGutters = false,
+    variant = "regular",
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    component,
+    disableGutters,
+    variant
+  };
+  const classes = useUtilityClasses$2(ownerState);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarRoot, {
+    as: component,
+    className: clsx(classes.root, className),
+    ref,
+    ownerState,
+    ...other
+  });
+});
+process.env.NODE_ENV !== "production" ? Toolbar.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`.
+   * The Toolbar is a flex container, allowing flex item properties to be used to lay out the children.
+   */
+  children: PropTypes$1.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes$1.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes$1.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes$1.elementType,
+  /**
+   * If `true`, disables gutter padding.
+   * @default false
+   */
+  disableGutters: PropTypes$1.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes$1.oneOfType([PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.object, PropTypes$1.bool])), PropTypes$1.func, PropTypes$1.object]),
+  /**
+   * The variant to use.
+   * @default 'regular'
+   */
+  variant: PropTypes$1.oneOfType([PropTypes$1.oneOf(["dense", "regular"]), PropTypes$1.string])
+} : void 0;
+
 function getToggleButtonUtilityClass(slot) {
   return generateUtilityClass("MuiToggleButton", slot);
 }
@@ -72943,6 +73282,8 @@ const Search$2 = React__default.forwardRef((_, navigationRef) => {
   const sendAnalyticsEvent = useAnalyticsEvent();
   const postMessageFunctions = useContext(PostMessageContext);
   const { api } = useApi();
+  const tokens = useTokens();
+  const inlineStyles = getStyles$19(tokens, state.currentView);
   const reduxDispatch = useDispatch();
   const connectConfig = useSelector(selectConnectConfig);
   const connectedMembers = useSelector(getMembers);
@@ -73070,8 +73411,6 @@ const Search$2 = React__default.forwardRef((_, navigationRef) => {
       dispatch({ type: SEARCH_ACTIONS.SEARCH_LOADING, payload: value });
     }
   }, 500);
-  const tokens = useTokens();
-  const inlineStyles = getStyles$19(tokens, state.currentView);
   if (state.currentView === SEARCH_VIEWS.OOPS) {
     throw state.error;
   }
@@ -83182,6 +83521,8 @@ const getViewByStatus = (status) => {
 const VerifyExistingMember = (props) => {
   useAnalyticsPath(...PageviewInfo.CONNECT_VERIFY_EXISTING_MEMBER);
   const { api } = useApi();
+  const tokens = useTokens();
+  const styles = getStyles$g(tokens);
   const config = useSelector(selectConfig);
   const dispatch = useDispatch();
   const { members, onAddNew } = props;
@@ -83194,8 +83535,6 @@ const VerifyExistingMember = (props) => {
   const [institutions, setInstitutions] = useState(/* @__PURE__ */ new Map());
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const tokens = useTokens();
-  const styles = getStyles$g(tokens);
   const handleMemberClick = useCallback(
     (selectedMember) => {
       const institution = institutions.get(selectedMember.institution_guid);
@@ -85096,7 +85435,7 @@ const RenderConnectStep = (props) => {
         OAuthStep,
         {
           institution: selectedInstitution,
-          onGoBack: props.handleOAuthGoBack,
+          onGoBack: props.handleCredentialsGoBack,
           ref: props.navigationRef
         }
       );
@@ -85186,7 +85525,8 @@ const RenderConnectStep = (props) => {
       VerifyExistingMember,
       {
         members: connectedMembers,
-        onAddNew: () => dispatch(verifyDifferentConnection$1())
+        onAddNew: () => dispatch(verifyDifferentConnection$1()),
+        ref: props.navigationRef
       }
     );
   } else if (step === STEPS.VERIFY_ERROR) {
@@ -86972,11 +87312,15 @@ const NON_CONECTED_REASONS = [
 
 const ConnectNavigationHeader = (props) => {
   const goBackButtonContainerRef = useRef();
+  const postMessageFunctions = useContext(PostMessageContext);
   const tokens = useTokens();
-  const styles = getStyles$4(tokens);
+  const sx = getStyles$4(tokens);
   const step = useSelector(
     (state) => state.connect.location[state.connect.location.length - 1]?.step ?? STEPS.SEARCH
   );
+  const showMobileBackButton = useSelector(
+    (state) => state.config.show_back_button && state.connect.location.length === 1
+  );
   const [shouldShowGlobalBackButton, setShouldShowGlobalBackButton] = useState(false);
   useEffect(() => {
     const backButtonNavigationToggle = () => {
@@ -86993,41 +87337,40 @@ const ConnectNavigationHeader = (props) => {
     }
   }, [shouldShowGlobalBackButton, step]);
   const backButtonNavigationHandler = () => {
-    if (typeof props.stepComponentRef?.handleBackButton === "function") {
+    if (showMobileBackButton) {
+      postMessageFunctions.onPostMessage("connect/backButtonClicked");
+    } else if (typeof props.stepComponentRef?.handleBackButton === "function") {
       props.stepComponentRef.handleBackButton();
     } else {
       props.connectGoBack();
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-test": "navigation-header", style: styles.container, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: goBackButtonContainerRef, style: styles.content, tabIndex: -1, children: shouldShowGlobalBackButton && /* @__PURE__ */ jsxRuntimeExports.jsx(GoBackButton, { handleGoBack: backButtonNavigationHandler }) }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { "data-test": "navigation-header", sx: sx.container, children: /* @__PURE__ */ jsxRuntimeExports.jsx(AppBar, { elevation: 0, position: "static", sx: sx.appBar, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Toolbar, { disableGutters: true, sx: sx.toolbar, children: shouldShowGlobalBackButton || showMobileBackButton ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    IconButton$1,
+    {
+      name: "connect-navigation-back-button",
+      onClick: backButtonNavigationHandler,
+      ref: goBackButtonContainerRef,
+      sx: sx.button,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(M, { name: "arrow_back_ios_new", size: 24 })
+    }
+  ) : null }) }) });
 };
 ConnectNavigationHeader.propTypes = {
   connectGoBack: PropTypes$1.func.isRequired,
   stepComponentRef: PropTypes$1.object
 };
-const getStyles$4 = (tokens) => {
-  return {
-    container: {
-      display: "flex",
-      justifyContent: "center",
-      position: "sticky",
-      top: 0,
-      left: 0,
-      backgroundColor: tokens.BackgroundColor.Container,
-      zIndex: tokens.ZIndex.Sticky
-    },
-    content: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      width: "100%",
-      height: "60px",
-      maxWidth: "352px",
-      minWidth: "270px",
-      margin: `0px ${tokens.Spacing.Large}px`
-    }
-  };
-};
+const getStyles$4 = (tokens) => ({
+  container: { flexGrow: 1 },
+  appBar: { backgroundColor: tokens.BackgroundColor.Container, display: "flex" },
+  toolbar: {
+    padding: `0 ${tokens.Spacing.Medium}px`,
+    maxWidth: "368px",
+    left: "50%",
+    transform: "translateX(-50%)"
+  },
+  button: { color: tokens.TextColor.Default }
+});
 
 const Container = (props) => {
   const tokens = useTokens();