@mxenabled/connect-widget 2.11.0 → 2.12.0

package/dist/index.es.js

@@ -22835,7 +22835,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$14 = (ownerState) => {
+const useUtilityClasses$17 = (ownerState) => {
   const {
     color,
     fontSize,
@@ -22916,7 +22916,7 @@ const SvgIcon$2 = /* @__PURE__ */ React$1.forwardRef(function SvgIcon2(inProps,
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$14(ownerState);
+  const classes = useUtilityClasses$17(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SvgIconRoot$2, _extends$1({
     as: component,
     className: clsx(classes.root, className),
@@ -28590,7 +28590,7 @@ function createSimplePaletteValueFilter(additionalPropertiesToCheck = []) {
 function getTypographyUtilityClass$1(slot) {
   return generateUtilityClass("MuiTypography", slot);
 }
-generateUtilityClasses("MuiTypography", ["root", "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "inherit", "button", "caption", "overline", "alignLeft", "alignRight", "alignCenter", "alignJustify", "noWrap", "gutterBottom", "paragraph"]);
+const typographyClasses = generateUtilityClasses("MuiTypography", ["root", "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "inherit", "button", "caption", "overline", "alignLeft", "alignRight", "alignCenter", "alignJustify", "noWrap", "gutterBottom", "paragraph"]);
 
 const v6Colors$1 = {
   primary: true,
@@ -28604,7 +28604,7 @@ const v6Colors$1 = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$13 = (ownerState) => {
+const useUtilityClasses$16 = (ownerState) => {
   const {
     align,
     gutterBottom,
@@ -28744,7 +28744,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$13(ownerState);
+  const classes = useUtilityClasses$16(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TypographyRoot$1, {
     as: Component,
     ref,
@@ -28851,7 +28851,7 @@ function getSvgIconUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
 
-const useUtilityClasses$12 = (ownerState) => {
+const useUtilityClasses$15 = (ownerState) => {
   const {
     color,
     fontSize,
@@ -28990,7 +28990,7 @@ const SvgIcon$1 = /* @__PURE__ */ React$1.forwardRef(function SvgIcon2(inProps,
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$12(ownerState);
+  const classes = useUtilityClasses$15(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SvgIconRoot$1, {
     as: component,
     className: clsx(classes.root, className),
@@ -30261,7 +30261,7 @@ function getButtonBaseUtilityClass$1(slot) {
 }
 const buttonBaseClasses$1 = generateUtilityClasses("MuiButtonBase", ["root", "disabled", "focusVisible"]);
 
-const useUtilityClasses$11 = (ownerState) => {
+const useUtilityClasses$14 = (ownerState) => {
   const {
     disabled,
     focusVisible,
@@ -30478,7 +30478,7 @@ const ButtonBase$1 = /* @__PURE__ */ React$1.forwardRef(function ButtonBase2(inP
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$11(ownerState);
+  const classes = useUtilityClasses$14(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ButtonBaseRoot$1, {
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -30715,7 +30715,7 @@ const rotateAnimation = typeof circularRotateKeyframe !== "string" ? css`
 const dashAnimation = typeof circularDashKeyframe !== "string" ? css`
         animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
       ` : null;
-const useUtilityClasses$10 = (ownerState) => {
+const useUtilityClasses$13 = (ownerState) => {
   const {
     classes,
     variant,
@@ -30838,7 +30838,7 @@ const CircularProgress = /* @__PURE__ */ React$1.forwardRef(function CircularPro
     value,
     variant
   };
-  const classes = useUtilityClasses$10(ownerState);
+  const classes = useUtilityClasses$13(ownerState);
   const circleStyle = {};
   const rootStyle = {};
   const rootProps = {};
@@ -30949,7 +30949,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$$ = (ownerState) => {
+const useUtilityClasses$12 = (ownerState) => {
   const {
     classes,
     disabled,
@@ -31135,7 +31135,7 @@ const IconButton$1 = /* @__PURE__ */ React$1.forwardRef(function IconButton2(inP
     loadingIndicator,
     size
   };
-  const classes = useUtilityClasses$$(ownerState);
+  const classes = useUtilityClasses$12(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconButtonRoot, {
     id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
@@ -31249,6 +31249,11 @@ if (process.env.NODE_ENV !== "production") {
   ListContext$1.displayName = "ListContext";
 }
 
+function getListItemTextUtilityClass(slot) {
+  return generateUtilityClass("MuiListItemText", slot);
+}
+const listItemTextClasses = generateUtilityClasses("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]);
+
 function useSlot(name, parameters) {
   const {
     className,
@@ -31300,12 +31305,226 @@ function useSlot(name, parameters) {
   return [elementType, props];
 }
 
+const useUtilityClasses$11 = (ownerState) => {
+  const {
+    classes,
+    inset,
+    primary,
+    secondary,
+    dense
+  } = ownerState;
+  const slots = {
+    root: ["root", inset && "inset", dense && "dense", primary && secondary && "multiline"],
+    primary: ["primary"],
+    secondary: ["secondary"]
+  };
+  return composeClasses$1(slots, getListItemTextUtilityClass, classes);
+};
+const ListItemTextRoot = styled("div", {
+  name: "MuiListItemText",
+  slot: "Root",
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [{
+      [`& .${listItemTextClasses.primary}`]: styles.primary
+    }, {
+      [`& .${listItemTextClasses.secondary}`]: styles.secondary
+    }, styles.root, ownerState.inset && styles.inset, ownerState.primary && ownerState.secondary && styles.multiline, ownerState.dense && styles.dense];
+  }
+})({
+  flex: "1 1 auto",
+  minWidth: 0,
+  marginTop: 4,
+  marginBottom: 4,
+  [`.${typographyClasses.root}:where(& .${listItemTextClasses.primary})`]: {
+    display: "block"
+  },
+  [`.${typographyClasses.root}:where(& .${listItemTextClasses.secondary})`]: {
+    display: "block"
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.primary && ownerState.secondary,
+    style: {
+      marginTop: 6,
+      marginBottom: 6
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.inset,
+    style: {
+      paddingLeft: 56
+    }
+  }]
+});
+const ListItemText = /* @__PURE__ */ React$1.forwardRef(function ListItemText2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiListItemText"
+  });
+  const {
+    children,
+    className,
+    disableTypography = false,
+    inset = false,
+    primary: primaryProp,
+    primaryTypographyProps,
+    secondary: secondaryProp,
+    secondaryTypographyProps,
+    slots = {},
+    slotProps = {},
+    ...other
+  } = props;
+  const {
+    dense
+  } = React$1.useContext(ListContext$1);
+  let primary = primaryProp != null ? primaryProp : children;
+  let secondary = secondaryProp;
+  const ownerState = {
+    ...props,
+    disableTypography,
+    inset,
+    primary: !!primary,
+    secondary: !!secondary,
+    dense
+  };
+  const classes = useUtilityClasses$11(ownerState);
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      primary: primaryTypographyProps,
+      secondary: secondaryTypographyProps,
+      ...slotProps
+    }
+  };
+  const [RootSlot, rootSlotProps] = useSlot("root", {
+    className: clsx(classes.root, className),
+    elementType: ListItemTextRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    ref
+  });
+  const [PrimarySlot, primarySlotProps] = useSlot("primary", {
+    className: classes.primary,
+    elementType: Typography$1,
+    externalForwardedProps,
+    ownerState
+  });
+  const [SecondarySlot, secondarySlotProps] = useSlot("secondary", {
+    className: classes.secondary,
+    elementType: Typography$1,
+    externalForwardedProps,
+    ownerState
+  });
+  if (primary != null && primary.type !== Typography$1 && !disableTypography) {
+    primary = /* @__PURE__ */ jsxRuntimeExports.jsx(PrimarySlot, {
+      variant: dense ? "body2" : "body1",
+      component: primarySlotProps?.variant ? void 0 : "span",
+      ...primarySlotProps,
+      children: primary
+    });
+  }
+  if (secondary != null && secondary.type !== Typography$1 && !disableTypography) {
+    secondary = /* @__PURE__ */ jsxRuntimeExports.jsx(SecondarySlot, {
+      variant: "body2",
+      color: "textSecondary",
+      ...secondarySlotProps,
+      children: secondary
+    });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(RootSlot, {
+    ...rootSlotProps,
+    children: [primary, secondary]
+  });
+});
+process.env.NODE_ENV !== "production" ? ListItemText.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Alias for the `primary` prop.
+   */
+  children: PropTypes$1.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes$1.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes$1.string,
+  /**
+   * If `true`, the children won't be wrapped by a Typography component.
+   * This can be useful to render an alternative Typography variant by wrapping
+   * the `children` (or `primary`) text, and optional `secondary` text
+   * with the Typography component.
+   * @default false
+   */
+  disableTypography: PropTypes$1.bool,
+  /**
+   * If `true`, the children are indented.
+   * This should be used if there is no left avatar or left icon.
+   * @default false
+   */
+  inset: PropTypes$1.bool,
+  /**
+   * The main content element.
+   */
+  primary: PropTypes$1.node,
+  /**
+   * These props will be forwarded to the primary typography component
+   * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.primary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  primaryTypographyProps: PropTypes$1.object,
+  /**
+   * The secondary content element.
+   */
+  secondary: PropTypes$1.node,
+  /**
+   * These props will be forwarded to the secondary typography component
+   * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.secondary` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  secondaryTypographyProps: PropTypes$1.object,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes$1.shape({
+    primary: PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.object]),
+    root: PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.object]),
+    secondary: PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes$1.shape({
+    primary: PropTypes$1.elementType,
+    root: PropTypes$1.elementType,
+    secondary: PropTypes$1.elementType
+  }),
+  /**
+   * 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 getListUtilityClass$1(slot) {
   return generateUtilityClass("MuiList", slot);
 }
 generateUtilityClasses("MuiList", ["root", "padding", "dense", "subheader"]);
 
-const useUtilityClasses$_ = (ownerState) => {
+const useUtilityClasses$10 = (ownerState) => {
   const {
     classes,
     disablePadding,
@@ -31371,7 +31590,7 @@ const List$1 = /* @__PURE__ */ React$1.forwardRef(function List2(inProps, ref) {
     dense,
     disablePadding
   };
-  const classes = useUtilityClasses$_(ownerState);
+  const classes = useUtilityClasses$10(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListContext$1.Provider, {
     value: context,
     children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ListRoot$1, {
@@ -31936,7 +32155,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$Z = (ownerState) => {
+const useUtilityClasses$$ = (ownerState) => {
   const {
     classes,
     color,
@@ -32340,7 +32559,7 @@ const InputBase$1 = /* @__PURE__ */ React$1.forwardRef(function InputBase2(inPro
     startAdornment,
     type
   };
-  const classes = useUtilityClasses$Z(ownerState);
+  const classes = useUtilityClasses$$(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot$1;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseInput;
@@ -32641,7 +32860,7 @@ const inputClasses$1 = {
   ...generateUtilityClasses("MuiInput", ["root", "underline", "input"])
 };
 
-const useUtilityClasses$Y = (ownerState) => {
+const useUtilityClasses$_ = (ownerState) => {
   const {
     classes,
     disableUnderline
@@ -32774,7 +32993,7 @@ const Input$1 = /* @__PURE__ */ React$1.forwardRef(function Input2(inProps, ref)
     type = "text",
     ...other
   } = props;
-  const classes = useUtilityClasses$Y(props);
+  const classes = useUtilityClasses$_(props);
   const ownerState = {
     disableUnderline
   };
@@ -32996,7 +33215,7 @@ const filledInputClasses$1 = {
   ...generateUtilityClasses("MuiFilledInput", ["root", "underline", "input", "adornedStart", "adornedEnd", "sizeSmall", "multiline", "hiddenLabel"])
 };
 
-const useUtilityClasses$X = (ownerState) => {
+const useUtilityClasses$Z = (ownerState) => {
   const {
     classes,
     disableUnderline,
@@ -33275,7 +33494,7 @@ const FilledInput$1 = /* @__PURE__ */ React$1.forwardRef(function FilledInput2(i
     multiline,
     type
   };
-  const classes = useUtilityClasses$X(props);
+  const classes = useUtilityClasses$Z(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -33651,7 +33870,7 @@ const outlinedInputClasses$1 = {
   ...generateUtilityClasses("MuiOutlinedInput", ["root", "notchedOutline", "input"])
 };
 
-const useUtilityClasses$W = (ownerState) => {
+const useUtilityClasses$Y = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -33830,7 +34049,7 @@ const OutlinedInput$1 = /* @__PURE__ */ React$1.forwardRef(function OutlinedInpu
     type = "text",
     ...other
   } = props;
-  const classes = useUtilityClasses$W(props);
+  const classes = useUtilityClasses$Y(props);
   const muiFormControl = useFormControl$1();
   const fcs = formControlState$1({
     props,
@@ -34068,7 +34287,7 @@ function getFormLabelUtilityClasses$1(slot) {
 }
 const formLabelClasses$1 = generateUtilityClasses("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]);
 
-const useUtilityClasses$V = (ownerState) => {
+const useUtilityClasses$X = (ownerState) => {
   const {
     classes,
     color,
@@ -34166,7 +34385,7 @@ const FormLabel$1 = /* @__PURE__ */ React$1.forwardRef(function FormLabel2(inPro
     focused: fcs.focused,
     required: fcs.required
   };
-  const classes = useUtilityClasses$V(ownerState);
+  const classes = useUtilityClasses$X(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FormLabelRoot$1, {
     as: component,
     ownerState,
@@ -34240,7 +34459,7 @@ function getInputLabelUtilityClasses$1(slot) {
 }
 generateUtilityClasses("MuiInputLabel", ["root", "focused", "disabled", "error", "required", "asterisk", "formControl", "sizeSmall", "shrink", "animated", "standard", "filled", "outlined"]);
 
-const useUtilityClasses$U = (ownerState) => {
+const useUtilityClasses$W = (ownerState) => {
   const {
     classes,
     formControl,
@@ -34429,7 +34648,7 @@ const InputLabel$1 = /* @__PURE__ */ React$1.forwardRef(function InputLabel2(inP
     required: fcs.required,
     focused: fcs.focused
   };
-  const classes = useUtilityClasses$U(ownerState);
+  const classes = useUtilityClasses$W(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabelRoot$1, {
     "data-shrink": shrink,
     ref,
@@ -34512,7 +34731,7 @@ function getFormControlUtilityClasses$1(slot) {
 }
 generateUtilityClasses("MuiFormControl", ["root", "marginNone", "marginNormal", "marginDense", "fullWidth", "disabled"]);
 
-const useUtilityClasses$T = (ownerState) => {
+const useUtilityClasses$V = (ownerState) => {
   const {
     classes,
     margin,
@@ -34602,7 +34821,7 @@ const FormControl$1 = /* @__PURE__ */ React$1.forwardRef(function FormControl2(i
     size,
     variant
   };
-  const classes = useUtilityClasses$T(ownerState);
+  const classes = useUtilityClasses$V(ownerState);
   const [adornedStart, setAdornedStart] = React$1.useState(() => {
     let initialAdornedStart = false;
     if (children) {
@@ -34780,7 +34999,7 @@ function getFormHelperTextUtilityClasses$1(slot) {
 const formHelperTextClasses$1 = generateUtilityClasses("MuiFormHelperText", ["root", "error", "disabled", "sizeSmall", "sizeMedium", "contained", "focused", "filled", "required"]);
 
 var _span$5;
-const useUtilityClasses$S = (ownerState) => {
+const useUtilityClasses$U = (ownerState) => {
   const {
     classes,
     contained,
@@ -34875,7 +35094,7 @@ const FormHelperText$1 = /* @__PURE__ */ React$1.forwardRef(function FormHelperT
     required: fcs.required
   };
   delete ownerState.ownerState;
-  const classes = useUtilityClasses$S(ownerState);
+  const classes = useUtilityClasses$U(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormHelperTextRoot$1, {
     as: component,
     className: clsx(classes.root, className),
@@ -35910,7 +36129,7 @@ function getBackdropUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiBackdrop", ["root", "invisible"]);
 
-const useUtilityClasses$R = (ownerState) => {
+const useUtilityClasses$T = (ownerState) => {
   const {
     classes,
     invisible
@@ -35973,7 +36192,7 @@ const Backdrop$1 = /* @__PURE__ */ React$1.forwardRef(function Backdrop2(inProps
     component,
     invisible
   };
-  const classes = useUtilityClasses$R(ownerState);
+  const classes = useUtilityClasses$T(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     root: components.Root,
@@ -36273,7 +36492,7 @@ function getModalUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiModal", ["root", "hidden", "backdrop"]);
 
-const useUtilityClasses$Q = (ownerState) => {
+const useUtilityClasses$S = (ownerState) => {
   const {
     open,
     exited,
@@ -36384,7 +36603,7 @@ const Modal$1 = /* @__PURE__ */ React$1.forwardRef(function Modal2(inProps, ref)
     ...propsWithDefaults,
     exited
   };
-  const classes = useUtilityClasses$Q(ownerState);
+  const classes = useUtilityClasses$S(ownerState);
   const childProps = {};
   if (children.props.tabIndex === void 0) {
     childProps.tabIndex = "-1";
@@ -36649,7 +36868,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$P = (ownerState) => {
+const useUtilityClasses$R = (ownerState) => {
   const {
     square,
     elevation,
@@ -36721,7 +36940,7 @@ const Paper$1 = /* @__PURE__ */ React$1.forwardRef(function Paper2(inProps, ref)
     square,
     variant
   };
-  const classes = useUtilityClasses$P(ownerState);
+  const classes = useUtilityClasses$R(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"));
@@ -36837,7 +37056,7 @@ function getTransformOriginValue$1(transformOrigin) {
 function resolveAnchorEl$1(anchorEl) {
   return typeof anchorEl === "function" ? anchorEl() : anchorEl;
 }
-const useUtilityClasses$O = (ownerState) => {
+const useUtilityClasses$Q = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -36917,7 +37136,7 @@ const Popover$1 = /* @__PURE__ */ React$1.forwardRef(function Popover2(inProps,
     transitionDuration: transitionDurationProp,
     TransitionProps
   };
-  const classes = useUtilityClasses$O(ownerState);
+  const classes = useUtilityClasses$Q(ownerState);
   const getAnchorOffset = React$1.useCallback(() => {
     if (anchorReference === "anchorPosition") {
       if (process.env.NODE_ENV !== "production") {
@@ -37356,7 +37575,7 @@ const LTR_ORIGIN$1 = {
   vertical: "top",
   horizontal: "left"
 };
-const useUtilityClasses$N = (ownerState) => {
+const useUtilityClasses$P = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -37430,7 +37649,7 @@ const Menu$1 = /* @__PURE__ */ React$1.forwardRef(function Menu2(inProps, ref) {
     TransitionProps,
     variant
   };
-  const classes = useUtilityClasses$N(ownerState);
+  const classes = useUtilityClasses$P(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React$1.useRef(null);
   const handleEntering = (element, isAppearing) => {
@@ -37667,7 +37886,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$M = (ownerState) => {
+const useUtilityClasses$O = (ownerState) => {
   const {
     classes,
     variant,
@@ -37826,7 +38045,7 @@ const NativeSelectInput$1 = /* @__PURE__ */ React$1.forwardRef(function NativeSe
     variant,
     error
   };
-  const classes = useUtilityClasses$M(ownerState);
+  const classes = useUtilityClasses$O(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(React$1.Fragment, {
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx(NativeSelectSelect$1, {
       ownerState,
@@ -37971,7 +38190,7 @@ function areEqualValues$2(a, b) {
 function isEmpty$3(display) {
   return display == null || typeof display === "string" && !display.trim();
 }
-const useUtilityClasses$L = (ownerState) => {
+const useUtilityClasses$N = (ownerState) => {
   const {
     classes,
     variant,
@@ -38290,7 +38509,7 @@ const SelectInput$1 = /* @__PURE__ */ React$1.forwardRef(function SelectInput2(p
     open,
     error
   };
-  const classes = useUtilityClasses$L(ownerState);
+  const classes = useUtilityClasses$N(ownerState);
   const paperProps = {
     ...MenuProps.PaperProps,
     ...MenuProps.slotProps?.paper
@@ -38534,7 +38753,7 @@ const ArrowDropDownIcon$1 = createSvgIcon$1(/* @__PURE__ */ jsxRuntimeExports.js
   d: "M7 10l5 5 5-5z"
 }), "ArrowDropDown");
 
-const useUtilityClasses$K = (ownerState) => {
+const useUtilityClasses$M = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -38598,7 +38817,7 @@ const Select$2 = /* @__PURE__ */ React$1.forwardRef(function Select2(inProps, re
     variant,
     classes: classesProp
   };
-  const classes = useUtilityClasses$K(ownerState);
+  const classes = useUtilityClasses$M(ownerState);
   const {
     root,
     ...restOfClasses
@@ -38822,7 +39041,7 @@ const variantComponent$1 = {
   filled: FilledInput$1,
   outlined: OutlinedInput$1
 };
-const useUtilityClasses$J = (ownerState) => {
+const useUtilityClasses$L = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -38890,7 +39109,7 @@ const TextField$1 = /* @__PURE__ */ React$1.forwardRef(function TextField2(inPro
     select,
     variant
   };
-  const classes = useUtilityClasses$J(ownerState);
+  const classes = useUtilityClasses$L(ownerState);
   if (process.env.NODE_ENV !== "production") {
     if (select && !children) {
       console.error("MUI: `children` must be passed when using the `TextField` component with `select`.");
@@ -39226,13 +39445,13 @@ function getInputAdornmentUtilityClass(slot) {
 const inputAdornmentClasses = generateUtilityClasses("MuiInputAdornment", ["root", "filled", "standard", "outlined", "positionStart", "positionEnd", "disablePointerEvents", "hiddenLabel", "sizeSmall"]);
 
 var _span$3;
-const overridesResolver$1 = (props, styles) => {
+const overridesResolver$2 = (props, styles) => {
   const {
     ownerState
   } = props;
   return [styles.root, styles[`position${capitalize$1(ownerState.position)}`], ownerState.disablePointerEvents === true && styles.disablePointerEvents, styles[ownerState.variant]];
 };
-const useUtilityClasses$I = (ownerState) => {
+const useUtilityClasses$K = (ownerState) => {
   const {
     classes,
     disablePointerEvents,
@@ -39249,7 +39468,7 @@ const useUtilityClasses$I = (ownerState) => {
 const InputAdornmentRoot = styled("div", {
   name: "MuiInputAdornment",
   slot: "Root",
-  overridesResolver: overridesResolver$1
+  overridesResolver: overridesResolver$2
 })(memoTheme(({
   theme
 }) => ({
@@ -39325,7 +39544,7 @@ const InputAdornment = /* @__PURE__ */ React$1.forwardRef(function InputAdornmen
     position,
     variant
   };
-  const classes = useUtilityClasses$I(ownerState);
+  const classes = useUtilityClasses$K(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormControlContext$1.Provider, {
     value: null,
     children: /* @__PURE__ */ jsxRuntimeExports.jsx(InputAdornmentRoot, {
@@ -39414,7 +39633,7 @@ if (process.env.NODE_ENV !== "production") {
   ButtonGroupButtonContext$1.displayName = "ButtonGroupButtonContext";
 }
 
-const useUtilityClasses$H = (ownerState) => {
+const useUtilityClasses$J = (ownerState) => {
   const {
     color,
     disableElevation,
@@ -39916,7 +40135,7 @@ const Button$2 = /* @__PURE__ */ React$1.forwardRef(function Button2(inProps, re
     type,
     variant
   };
-  const classes = useUtilityClasses$H(ownerState);
+  const classes = useUtilityClasses$J(ownerState);
   const startIcon = (startIconProp || loading && loadingPosition === "start") && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonStartIcon$1, {
     className: classes.startIcon,
     ownerState,
@@ -40085,14 +40304,262 @@ function getListItemUtilityClass(slot) {
 }
 generateUtilityClasses("MuiListItem", ["root", "container", "dense", "alignItemsFlexStart", "divider", "gutters", "padding", "secondaryAction"]);
 
+function getListItemButtonUtilityClass(slot) {
+  return generateUtilityClass("MuiListItemButton", slot);
+}
 const listItemButtonClasses = generateUtilityClasses("MuiListItemButton", ["root", "focusVisible", "dense", "alignItemsFlexStart", "disabled", "divider", "gutters", "selected"]);
 
+const overridesResolver$1 = (props, styles) => {
+  const {
+    ownerState
+  } = 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 {
+    alignItems,
+    classes,
+    dense,
+    disabled,
+    disableGutters,
+    divider,
+    selected
+  } = ownerState;
+  const slots = {
+    root: ["root", dense && "dense", !disableGutters && "gutters", divider && "divider", disabled && "disabled", alignItems === "flex-start" && "alignItemsFlexStart", selected && "selected"]
+  };
+  const composedClasses = composeClasses$1(slots, getListItemButtonUtilityClass, classes);
+  return {
+    ...classes,
+    ...composedClasses
+  };
+};
+const ListItemButtonRoot = styled(ButtonBase$1, {
+  shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === "classes",
+  name: "MuiListItemButton",
+  slot: "Root",
+  overridesResolver: overridesResolver$1
+})(memoTheme(({
+  theme
+}) => ({
+  display: "flex",
+  flexGrow: 1,
+  justifyContent: "flex-start",
+  alignItems: "center",
+  position: "relative",
+  textDecoration: "none",
+  minWidth: 0,
+  boxSizing: "border-box",
+  textAlign: "left",
+  paddingTop: 8,
+  paddingBottom: 8,
+  transition: theme.transitions.create("background-color", {
+    duration: theme.transitions.duration.shortest
+  }),
+  "&:hover": {
+    textDecoration: "none",
+    backgroundColor: (theme.vars || theme).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      backgroundColor: "transparent"
+    }
+  },
+  [`&.${listItemButtonClasses.selected}`]: {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    [`&.${listItemButtonClasses.focusVisible}`]: {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    }
+  },
+  [`&.${listItemButtonClasses.selected}:hover`]: {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+    }
+  },
+  [`&.${listItemButtonClasses.focusVisible}`]: {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  },
+  [`&.${listItemButtonClasses.disabled}`]: {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.divider,
+    style: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+      backgroundClip: "padding-box"
+    }
+  }, {
+    props: {
+      alignItems: "flex-start"
+    },
+    style: {
+      alignItems: "flex-start"
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disableGutters,
+    style: {
+      paddingLeft: 16,
+      paddingRight: 16
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.dense,
+    style: {
+      paddingTop: 4,
+      paddingBottom: 4
+    }
+  }]
+})));
+const ListItemButton = /* @__PURE__ */ React$1.forwardRef(function ListItemButton2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiListItemButton"
+  });
+  const {
+    alignItems = "center",
+    autoFocus = false,
+    component = "div",
+    children,
+    dense = false,
+    disableGutters = false,
+    divider = false,
+    focusVisibleClassName,
+    selected = false,
+    className,
+    ...other
+  } = props;
+  const context = React$1.useContext(ListContext$1);
+  const childContext = React$1.useMemo(() => ({
+    dense: dense || context.dense || false,
+    alignItems,
+    disableGutters
+  }), [alignItems, context.dense, dense, disableGutters]);
+  const listItemRef = React$1.useRef(null);
+  useEnhancedEffect$1(() => {
+    if (autoFocus) {
+      if (listItemRef.current) {
+        listItemRef.current.focus();
+      } else if (process.env.NODE_ENV !== "production") {
+        console.error("MUI: Unable to set focus to a ListItemButton whose component has not been rendered.");
+      }
+    }
+  }, [autoFocus]);
+  const ownerState = {
+    ...props,
+    alignItems,
+    dense: childContext.dense,
+    disableGutters,
+    divider,
+    selected
+  };
+  const classes = useUtilityClasses$I(ownerState);
+  const handleRef = useForkRef$1(listItemRef, ref);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ListContext$1.Provider, {
+    value: childContext,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemButtonRoot, {
+      ref: handleRef,
+      href: other.href || other.to,
+      component: (other.href || other.to) && component === "div" ? "button" : component,
+      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+      ownerState,
+      className: clsx(classes.root, className),
+      ...other,
+      classes,
+      children
+    })
+  });
+});
+process.env.NODE_ENV !== "production" ? ListItemButton.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Defines the `align-items` style property.
+   * @default 'center'
+   */
+  alignItems: PropTypes$1.oneOf(["center", "flex-start"]),
+  /**
+   * If `true`, the list item is focused during the first mount.
+   * Focus will also be triggered if the value changes from false to true.
+   * @default false
+   */
+  autoFocus: PropTypes$1.bool,
+  /**
+   * The content of the component if a `ListItemSecondaryAction` is used it must
+   * be the last child.
+   */
+  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`, compact vertical padding designed for keyboard and mouse input is used.
+   * The prop defaults to the value inherited from the parent List component.
+   * @default false
+   */
+  dense: PropTypes$1.bool,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes$1.bool,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: PropTypes$1.bool,
+  /**
+   * If `true`, a 1px light border is added to the bottom of the list item.
+   * @default false
+   */
+  divider: PropTypes$1.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes$1.string,
+  /**
+   * @ignore
+   */
+  href: PropTypes$1.string,
+  /**
+   * Use to apply selected styling.
+   * @default false
+   */
+  selected: 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])
+} : void 0;
+
 function getListItemSecondaryActionClassesUtilityClass(slot) {
   return generateUtilityClass("MuiListItemSecondaryAction", slot);
 }
 generateUtilityClasses("MuiListItemSecondaryAction", ["root", "disableGutters"]);
 
-const useUtilityClasses$G = (ownerState) => {
+const useUtilityClasses$H = (ownerState) => {
   const {
     disableGutters,
     classes
@@ -40139,7 +40606,7 @@ const ListItemSecondaryAction = /* @__PURE__ */ React$1.forwardRef(function List
     ...props,
     disableGutters: context.disableGutters
   };
-  const classes = useUtilityClasses$G(ownerState);
+  const classes = useUtilityClasses$H(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemSecondaryActionRoot, {
     className: clsx(classes.root, className),
     ownerState,
@@ -40177,7 +40644,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$F = (ownerState) => {
+const useUtilityClasses$G = (ownerState) => {
   const {
     alignItems,
     classes,
@@ -40344,7 +40811,7 @@ const ListItem = /* @__PURE__ */ React$1.forwardRef(function ListItem2(inProps,
     divider,
     hasSecondaryAction
   };
-  const classes = useUtilityClasses$F(ownerState);
+  const classes = useUtilityClasses$G(ownerState);
   const handleRef = useForkRef$1(listItemRef, ref);
   const Root = slots.root || components.Root || ListItemRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
@@ -40534,7 +41001,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$E = (ownerState) => {
+const useUtilityClasses$F = (ownerState) => {
   const {
     classes,
     disabled,
@@ -40925,7 +41392,7 @@ const Chip = /* @__PURE__ */ React$1.forwardRef(function Chip2(inProps, ref) {
     clickable,
     variant
   };
-  const classes = useUtilityClasses$E(ownerState);
+  const classes = useUtilityClasses$F(ownerState);
   const moreProps = component === ButtonBase$1 ? {
     component: ComponentProp || "div",
     focusVisibleClassName: classes.focusVisible,
@@ -41092,7 +41559,7 @@ function getDialogTitleUtilityClass(slot) {
 }
 const dialogTitleClasses = generateUtilityClasses("MuiDialogTitle", ["root"]);
 
-const useUtilityClasses$D = (ownerState) => {
+const useUtilityClasses$E = (ownerState) => {
   const {
     classes,
     dividers
@@ -41153,7 +41620,7 @@ const DialogContent = /* @__PURE__ */ React$1.forwardRef(function DialogContent2
     ...props,
     dividers
   };
-  const classes = useUtilityClasses$D(ownerState);
+  const classes = useUtilityClasses$E(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DialogContentRoot, {
     className: clsx(classes.root, className),
     ownerState,
@@ -41207,7 +41674,7 @@ const DialogBackdrop = styled(Backdrop$1, {
   // Improve scrollable dialog support.
   zIndex: -1
 });
-const useUtilityClasses$C = (ownerState) => {
+const useUtilityClasses$D = (ownerState) => {
   const {
     classes,
     scroll,
@@ -41412,7 +41879,7 @@ const Dialog = /* @__PURE__ */ React$1.forwardRef(function Dialog2(inProps, ref)
     maxWidth,
     scroll
   };
-  const classes = useUtilityClasses$C(ownerState);
+  const classes = useUtilityClasses$D(ownerState);
   const backdropClick = React$1.useRef();
   const handleMouseDown = (event) => {
     backdropClick.current = event.target === event.currentTarget;
@@ -42755,7 +43222,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$B = (ownerState) => {
+const useUtilityClasses$C = (ownerState) => {
   const {
     disabled,
     focusVisible,
@@ -43003,7 +43470,7 @@ const ButtonBase = /* @__PURE__ */ React$1.forwardRef(function ButtonBase2(inPro
     tabIndex,
     focusVisible
   });
-  const classes = useUtilityClasses$B(ownerState);
+  const classes = useUtilityClasses$C(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ButtonBaseRoot, _extends$1({
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -43214,7 +43681,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$A = (ownerState) => {
+const useUtilityClasses$B = (ownerState) => {
   const {
     color,
     fontSize,
@@ -43295,7 +43762,7 @@ const SvgIcon = /* @__PURE__ */ React$1.forwardRef(function SvgIcon2(inProps, re
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$A(ownerState);
+  const classes = useUtilityClasses$B(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SvgIconRoot, _extends$1({
     as: component,
     className: clsx(classes.root, className),
@@ -43714,7 +44181,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$z = (ownerState) => {
+const useUtilityClasses$A = (ownerState) => {
   const {
     color,
     disableElevation,
@@ -43951,7 +44418,7 @@ const Button$1 = /* @__PURE__ */ React$1.forwardRef(function Button2(inProps, re
     type,
     variant
   });
-  const classes = useUtilityClasses$z(ownerState);
+  const classes = useUtilityClasses$A(ownerState);
   const startIcon = startIconProp && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState,
@@ -44078,7 +44545,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$y = (ownerState) => {
+const useUtilityClasses$z = (ownerState) => {
   const {
     align,
     gutterBottom,
@@ -44174,7 +44641,7 @@ const Typography = /* @__PURE__ */ React$1.forwardRef(function Typography2(inPro
     variantMapping
   });
   const Component = component || (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) || "span";
-  const classes = useUtilityClasses$y(ownerState);
+  const classes = useUtilityClasses$z(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TypographyRoot, _extends$1({
     as: Component,
     ref,
@@ -44969,7 +45436,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$x = (ownerState) => {
+const useUtilityClasses$y = (ownerState) => {
   const {
     classes,
     invisible
@@ -45027,7 +45494,7 @@ const Backdrop = /* @__PURE__ */ React$1.forwardRef(function Backdrop2(inProps,
     component,
     invisible
   });
-  const classes = useUtilityClasses$x(ownerState);
+  const classes = useUtilityClasses$y(ownerState);
   const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TransitionComponent, _extends$1({
     in: open,
@@ -45306,7 +45773,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$w = (ownerState) => {
+const useUtilityClasses$x = (ownerState) => {
   const {
     open,
     exited,
@@ -45404,7 +45871,7 @@ const Modal = /* @__PURE__ */ React$1.forwardRef(function Modal2(inProps, ref) {
   const ownerState = _extends$1({}, propsWithDefaults, {
     exited
   });
-  const classes = useUtilityClasses$w(ownerState);
+  const classes = useUtilityClasses$x(ownerState);
   const childProps = {};
   if (children.props.tabIndex === void 0) {
     childProps.tabIndex = "-1";
@@ -45659,7 +46126,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$v = (ownerState) => {
+const useUtilityClasses$w = (ownerState) => {
   const {
     square,
     elevation,
@@ -45719,7 +46186,7 @@ const Paper = /* @__PURE__ */ React$1.forwardRef(function Paper2(inProps, ref) {
     square,
     variant
   });
-  const classes = useUtilityClasses$v(ownerState);
+  const classes = useUtilityClasses$w(ownerState);
   if (process.env.NODE_ENV !== "production") {
     const theme = useTheme$4();
     if (theme.shadows[elevation] === void 0) {
@@ -46060,7 +46527,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$u = (ownerState) => {
+const useUtilityClasses$v = (ownerState) => {
   const {
     classes,
     color,
@@ -46432,7 +46899,7 @@ const InputBase = /* @__PURE__ */ React$1.forwardRef(function InputBase2(inProps
     startAdornment,
     type
   });
-  const classes = useUtilityClasses$u(ownerState);
+  const classes = useUtilityClasses$v(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseComponent;
@@ -46719,7 +47186,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$t = (ownerState) => {
+const useUtilityClasses$u = (ownerState) => {
   const {
     classes,
     disableUnderline
@@ -46831,7 +47298,7 @@ const Input = /* @__PURE__ */ React$1.forwardRef(function Input2(inProps, ref) {
     slots = {},
     type = "text"
   } = props, other = _objectWithoutPropertiesLoose(props, _excluded$k);
-  const classes = useUtilityClasses$t(props);
+  const classes = useUtilityClasses$u(props);
   const ownerState = {
     disableUnderline
   };
@@ -47052,7 +47519,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$s = (ownerState) => {
+const useUtilityClasses$t = (ownerState) => {
   const {
     classes,
     disableUnderline
@@ -47244,7 +47711,7 @@ const FilledInput = /* @__PURE__ */ React$1.forwardRef(function FilledInput2(inP
     multiline,
     type
   });
-  const classes = useUtilityClasses$s(props);
+  const classes = useUtilityClasses$t(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -47599,7 +48066,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$r = (ownerState) => {
+const useUtilityClasses$s = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -47717,7 +48184,7 @@ const OutlinedInput = /* @__PURE__ */ React$1.forwardRef(function OutlinedInput2
     slots = {},
     type = "text"
   } = props, other = _objectWithoutPropertiesLoose(props, _excluded$h);
-  const classes = useUtilityClasses$r(props);
+  const classes = useUtilityClasses$s(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -47936,7 +48403,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$q = (ownerState) => {
+const useUtilityClasses$r = (ownerState) => {
   const {
     classes,
     color,
@@ -48015,7 +48482,7 @@ const FormLabel = /* @__PURE__ */ React$1.forwardRef(function FormLabel2(inProps
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$q(ownerState);
+  const classes = useUtilityClasses$r(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FormLabelRoot, _extends$1({
     as: component,
     ownerState,
@@ -48090,7 +48557,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$p = (ownerState) => {
+const useUtilityClasses$q = (ownerState) => {
   const {
     classes,
     formControl,
@@ -48210,7 +48677,7 @@ const InputLabel = /* @__PURE__ */ React$1.forwardRef(function InputLabel2(inPro
     required: fcs.required,
     focused: fcs.focused
   });
-  const classes = useUtilityClasses$p(ownerState);
+  const classes = useUtilityClasses$q(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabelRoot, _extends$1({
     "data-shrink": shrink,
     ownerState,
@@ -48294,7 +48761,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$o = (ownerState) => {
+const useUtilityClasses$p = (ownerState) => {
   const {
     classes,
     margin,
@@ -48366,7 +48833,7 @@ const FormControl = /* @__PURE__ */ React$1.forwardRef(function FormControl2(inP
     size,
     variant
   });
-  const classes = useUtilityClasses$o(ownerState);
+  const classes = useUtilityClasses$p(ownerState);
   const [adornedStart, setAdornedStart] = React$1.useState(() => {
     let initialAdornedStart = false;
     if (children) {
@@ -48543,7 +49010,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$n = (ownerState) => {
+const useUtilityClasses$o = (ownerState) => {
   const {
     classes,
     contained,
@@ -48618,7 +49085,7 @@ const FormHelperText = /* @__PURE__ */ React$1.forwardRef(function FormHelperTex
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$n(ownerState);
+  const classes = useUtilityClasses$o(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormHelperTextRoot, _extends$1({
     as: component,
     ownerState,
@@ -48704,7 +49171,7 @@ function getListUtilityClass(slot) {
 generateUtilityClasses$2("MuiList", ["root", "padding", "dense", "subheader"]);
 
 const _excluded$c = ["children", "className", "component", "dense", "disablePadding", "subheader"];
-const useUtilityClasses$m = (ownerState) => {
+const useUtilityClasses$n = (ownerState) => {
   const {
     classes,
     disablePadding,
@@ -48759,7 +49226,7 @@ const List = /* @__PURE__ */ React$1.forwardRef(function List2(inProps, ref) {
     dense,
     disablePadding
   });
-  const classes = useUtilityClasses$m(ownerState);
+  const classes = useUtilityClasses$n(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListContext.Provider, {
     value: context,
     children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ListRoot, _extends$1({
@@ -49313,7 +49780,7 @@ function getTransformOriginValue(transformOrigin) {
 function resolveAnchorEl(anchorEl) {
   return typeof anchorEl === "function" ? anchorEl() : anchorEl;
 }
-const useUtilityClasses$l = (ownerState) => {
+const useUtilityClasses$m = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -49394,7 +49861,7 @@ const Popover = /* @__PURE__ */ React$1.forwardRef(function Popover2(inProps, re
     transitionDuration: transitionDurationProp,
     TransitionProps
   });
-  const classes = useUtilityClasses$l(ownerState);
+  const classes = useUtilityClasses$m(ownerState);
   const getAnchorOffset = React$1.useCallback(() => {
     if (anchorReference === "anchorPosition") {
       if (process.env.NODE_ENV !== "production") {
@@ -49778,7 +50245,7 @@ const LTR_ORIGIN = {
   vertical: "top",
   horizontal: "left"
 };
-const useUtilityClasses$k = (ownerState) => {
+const useUtilityClasses$l = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -49850,7 +50317,7 @@ const Menu = /* @__PURE__ */ React$1.forwardRef(function Menu2(inProps, ref) {
     TransitionProps,
     variant
   });
-  const classes = useUtilityClasses$k(ownerState);
+  const classes = useUtilityClasses$l(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React$1.useRef(null);
   const handleEntering = (element, isAppearing) => {
@@ -50052,7 +50519,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$j = (ownerState) => {
+const useUtilityClasses$k = (ownerState) => {
   const {
     classes,
     variant,
@@ -50182,7 +50649,7 @@ const NativeSelectInput = /* @__PURE__ */ React$1.forwardRef(function NativeSele
     variant,
     error
   });
-  const classes = useUtilityClasses$j(ownerState);
+  const classes = useUtilityClasses$k(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(React$1.Fragment, {
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx(NativeSelectSelect, _extends$1({
       ownerState,
@@ -50327,7 +50794,7 @@ function areEqualValues$1(a, b) {
 function isEmpty$1(display) {
   return display == null || typeof display === "string" && !display.trim();
 }
-const useUtilityClasses$i = (ownerState) => {
+const useUtilityClasses$j = (ownerState) => {
   const {
     classes,
     variant,
@@ -50642,7 +51109,7 @@ const SelectInput = /* @__PURE__ */ React$1.forwardRef(function SelectInput2(pro
     open,
     error
   });
-  const classes = useUtilityClasses$i(ownerState);
+  const classes = useUtilityClasses$j(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, {
@@ -50870,7 +51337,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$h = (ownerState) => {
+const useUtilityClasses$i = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -50925,7 +51392,7 @@ const Select$1 = /* @__PURE__ */ React$1.forwardRef(function Select2(inProps, re
     variant,
     classes: classesProp
   });
-  const classes = useUtilityClasses$h(ownerState);
+  const classes = useUtilityClasses$i(ownerState);
   const restOfClasses = _objectWithoutPropertiesLoose(classes, _excluded2);
   const InputComponent = input || {
     standard: /* @__PURE__ */ jsxRuntimeExports.jsx(StyledInput, {
@@ -51141,7 +51608,7 @@ const variantComponent = {
   filled: FilledInput,
   outlined: OutlinedInput
 };
-const useUtilityClasses$g = (ownerState) => {
+const useUtilityClasses$h = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -51205,7 +51672,7 @@ const TextField = /* @__PURE__ */ React$1.forwardRef(function TextField2(inProps
     select,
     variant
   });
-  const classes = useUtilityClasses$g(ownerState);
+  const classes = useUtilityClasses$h(ownerState);
   if (process.env.NODE_ENV !== "production") {
     if (select && !children) {
       console.error("MUI: `children` must be passed when using the `TextField` component with `select`.");
@@ -51460,7 +51927,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$f = (ownerState) => {
+const useUtilityClasses$g = (ownerState) => {
   const {
     classes,
     checked,
@@ -51570,7 +52037,7 @@ const SwitchBase = /* @__PURE__ */ React$1.forwardRef(function SwitchBase2(props
     disableFocusRipple,
     edge
   });
-  const classes = useUtilityClasses$f(ownerState);
+  const classes = useUtilityClasses$g(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SwitchBaseRoot, _extends$1({
     component: "span",
     className: clsx(classes.root, className),
@@ -51726,7 +52193,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$e = (ownerState) => {
+const useUtilityClasses$f = (ownerState) => {
   const {
     classes,
     indeterminate,
@@ -51796,7 +52263,7 @@ const Checkbox = /* @__PURE__ */ React$1.forwardRef(function Checkbox2(inProps,
     indeterminate,
     size
   });
-  const classes = useUtilityClasses$e(ownerState);
+  const classes = useUtilityClasses$f(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxRoot, _extends$1({
     type: "checkbox",
     inputProps: _extends$1({
@@ -51925,7 +52392,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$d = (ownerState) => {
+const useUtilityClasses$e = (ownerState) => {
   const {
     classes,
     disabled,
@@ -52036,7 +52503,7 @@ const FormControlLabel = /* @__PURE__ */ React$1.forwardRef(function FormControl
     required,
     error: fcs.error
   });
-  const classes = useUtilityClasses$d(ownerState);
+  const classes = useUtilityClasses$e(ownerState);
   const typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
   let label = labelProp;
   if (label != null && label.type !== Typography && !disableTypography) {
@@ -52239,7 +52706,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$c = (ownerState) => {
+const useUtilityClasses$d = (ownerState) => {
   const {
     classes,
     color,
@@ -52312,7 +52779,7 @@ const Radio$1 = /* @__PURE__ */ React$1.forwardRef(function Radio2(inProps, ref)
     color,
     size
   });
-  const classes = useUtilityClasses$c(ownerState);
+  const classes = useUtilityClasses$d(ownerState);
   const radioGroup = useRadioGroup();
   let checked = checkedProp;
   const onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);
@@ -54277,7 +54744,7 @@ function getCollapseUtilityClass(slot) {
 }
 generateUtilityClasses("MuiCollapse", ["root", "horizontal", "vertical", "entered", "hidden", "wrapper", "wrapperInner"]);
 
-const useUtilityClasses$b = (ownerState) => {
+const useUtilityClasses$c = (ownerState) => {
   const {
     orientation,
     classes
@@ -54405,7 +54872,7 @@ const Collapse = /* @__PURE__ */ React$1.forwardRef(function Collapse2(inProps,
     orientation,
     collapsedSize: collapsedSizeProp
   };
-  const classes = useUtilityClasses$b(ownerState);
+  const classes = useUtilityClasses$c(ownerState);
   const theme = useTheme();
   const timer = useTimeout$1();
   const wrapperRef = React$1.useRef(null);
@@ -54668,7 +55135,7 @@ function getAccordionUtilityClass(slot) {
 }
 const accordionClasses = generateUtilityClasses("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled", "gutters", "region"]);
 
-const useUtilityClasses$a = (ownerState) => {
+const useUtilityClasses$b = (ownerState) => {
   const {
     classes,
     square,
@@ -54824,7 +55291,7 @@ const Accordion = /* @__PURE__ */ React$1.forwardRef(function Accordion2(inProps
     disableGutters,
     expanded
   };
-  const classes = useUtilityClasses$a(ownerState);
+  const classes = useUtilityClasses$b(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     ...slots
@@ -54983,7 +55450,7 @@ function getAccordionDetailsUtilityClass(slot) {
 }
 generateUtilityClasses("MuiAccordionDetails", ["root"]);
 
-const useUtilityClasses$9 = (ownerState) => {
+const useUtilityClasses$a = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -55011,7 +55478,7 @@ const AccordionDetails = /* @__PURE__ */ React$1.forwardRef(function AccordionDe
     ...other
   } = props;
   const ownerState = props;
-  const classes = useUtilityClasses$9(ownerState);
+  const classes = useUtilityClasses$a(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionDetailsRoot, {
     className: clsx(classes.root, className),
     ref,
@@ -55047,7 +55514,7 @@ function getAccordionSummaryUtilityClass(slot) {
 }
 const accordionSummaryClasses = generateUtilityClasses("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disabled", "gutters", "contentGutters", "content", "expandIconWrapper"]);
 
-const useUtilityClasses$8 = (ownerState) => {
+const useUtilityClasses$9 = (ownerState) => {
   const {
     classes,
     expanded,
@@ -55172,7 +55639,7 @@ const AccordionSummary = /* @__PURE__ */ React$1.forwardRef(function AccordionSu
     disabled,
     disableGutters
   };
-  const classes = useUtilityClasses$8(ownerState);
+  const classes = useUtilityClasses$9(ownerState);
   const externalForwardedProps = {
     slots,
     slotProps
@@ -55345,7 +55812,7 @@ const badgeClasses = generateUtilityClasses("MuiBadge", [
 
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
-const useUtilityClasses$7 = (ownerState) => {
+const useUtilityClasses$8 = (ownerState) => {
   const {
     color,
     anchorOrigin,
@@ -55608,7 +56075,7 @@ const Badge = /* @__PURE__ */ React$1.forwardRef(function Badge2(inProps, ref) {
     overlap,
     variant
   };
-  const classes = useUtilityClasses$7(ownerState);
+  const classes = useUtilityClasses$8(ownerState);
   const externalForwardedProps = {
     slots: {
       root: slots?.root ?? components.Root,
@@ -55789,7 +56256,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$6 = (ownerState) => {
+const useUtilityClasses$7 = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -55817,7 +56284,7 @@ const DialogTitle = /* @__PURE__ */ React$1.forwardRef(function DialogTitle2(inP
     ...other
   } = props;
   const ownerState = props;
-  const classes = useUtilityClasses$6(ownerState);
+  const classes = useUtilityClasses$7(ownerState);
   const {
     titleId = idProp
   } = React$1.useContext(DialogContext);
@@ -55863,7 +56330,7 @@ function getFormGroupUtilityClass(slot) {
 }
 generateUtilityClasses("MuiFormGroup", ["root", "row", "error"]);
 
-const useUtilityClasses$5 = (ownerState) => {
+const useUtilityClasses$6 = (ownerState) => {
   const {
     classes,
     row,
@@ -55917,7 +56384,7 @@ const FormGroup = /* @__PURE__ */ React$1.forwardRef(function FormGroup2(inProps
     row,
     error: fcs.error
   };
-  const classes = useUtilityClasses$5(ownerState);
+  const classes = useUtilityClasses$6(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormGroupRoot, {
     className: clsx(classes.root, className),
     ownerState,
@@ -55958,7 +56425,7 @@ function getIconUtilityClass(slot) {
 }
 generateUtilityClasses("MuiIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
 
-const useUtilityClasses$4 = (ownerState) => {
+const useUtilityClasses$5 = (ownerState) => {
   const {
     color,
     fontSize,
@@ -56070,7 +56537,7 @@ const Icon = /* @__PURE__ */ React$1.forwardRef(function Icon2(inProps, ref) {
     component: Component,
     fontSize
   };
-  const classes = useUtilityClasses$4(ownerState);
+  const classes = useUtilityClasses$5(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(IconRoot, {
     as: Component,
     className: clsx(
@@ -56163,7 +56630,7 @@ const v6Colors = {
   textSecondary: true,
   textDisabled: true
 };
-const useUtilityClasses$3 = (ownerState) => {
+const useUtilityClasses$4 = (ownerState) => {
   const {
     classes,
     component,
@@ -56333,7 +56800,7 @@ const Link$1 = /* @__PURE__ */ React$1.forwardRef(function Link2(inProps, ref) {
     underline,
     variant
   };
-  const classes = useUtilityClasses$3(ownerState);
+  const classes = useUtilityClasses$4(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(LinkRoot, {
     color,
     className: clsx(classes.root, className),
@@ -56418,6 +56885,87 @@ process.env.NODE_ENV !== "production" ? Link$1.propTypes = {
   variant: PropTypes$1.oneOfType([PropTypes$1.oneOf(["body1", "body2", "button", "caption", "h1", "h2", "h3", "h4", "h5", "h6", "inherit", "overline", "subtitle1", "subtitle2"]), PropTypes$1.string])
 } : void 0;
 
+function getListItemAvatarUtilityClass(slot) {
+  return generateUtilityClass("MuiListItemAvatar", slot);
+}
+generateUtilityClasses("MuiListItemAvatar", ["root", "alignItemsFlexStart"]);
+
+const useUtilityClasses$3 = (ownerState) => {
+  const {
+    alignItems,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ["root", alignItems === "flex-start" && "alignItemsFlexStart"]
+  };
+  return composeClasses$1(slots, getListItemAvatarUtilityClass, classes);
+};
+const ListItemAvatarRoot = styled("div", {
+  name: "MuiListItemAvatar",
+  slot: "Root",
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.alignItems === "flex-start" && styles.alignItemsFlexStart];
+  }
+})({
+  minWidth: 56,
+  flexShrink: 0,
+  variants: [{
+    props: {
+      alignItems: "flex-start"
+    },
+    style: {
+      marginTop: 8
+    }
+  }]
+});
+const ListItemAvatar = /* @__PURE__ */ React$1.forwardRef(function ListItemAvatar2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiListItemAvatar"
+  });
+  const {
+    className,
+    ...other
+  } = props;
+  const context = React$1.useContext(ListContext$1);
+  const ownerState = {
+    ...props,
+    alignItems: context.alignItems
+  };
+  const classes = useUtilityClasses$3(ownerState);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemAvatarRoot, {
+    className: clsx(classes.root, className),
+    ownerState,
+    ref,
+    ...other
+  });
+});
+process.env.NODE_ENV !== "production" ? ListItemAvatar.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, normally an `Avatar`.
+   */
+  children: PropTypes$1.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes$1.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes$1.string,
+  /**
+   * 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;
+
 const RadioGroupContext = /* @__PURE__ */ React$1.createContext(void 0);
 if (process.env.NODE_ENV !== "production") {
   RadioGroupContext.displayName = "RadioGroupContext";
@@ -77875,7 +78423,6 @@ const getStyles$J = (tokens) => {
       height: "24px",
       width: "24px",
       minWidth: "24px",
-      padding: "2px",
       zIndex: 20,
       display: "flex",
       alignItems: "center",
@@ -77962,7 +78509,7 @@ const ProgressMessage = ({ allDone, jobType }) => {
 };
 ProgressMessage.propTypes = {
   allDone: PropTypes$1.bool,
-  jobType: PropTypes$1.string
+  jobType: PropTypes$1.number
 };
 
 const ProgressLogo = ({ children }) => {
@@ -77976,15 +78523,14 @@ const getStyles$H = (tokens) => {
       backgroundColor: tokens.BackgroundColor.Container,
       borderRadius: "8px",
       display: "flex",
-      padding: "2px",
       zIndex: 11
     }
   };
 };
 
-const SvgProgressBackdropDark = (props) => /* @__PURE__ */ React$1.createElement("svg", { width: 80, height: 80, viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "image", ...props }, /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 23.5, stroke: "white", strokeOpacity: 0.45 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 31.5, stroke: "white", strokeOpacity: 0.3 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 39.5, stroke: "white", strokeOpacity: 0.15 }));
+const SvgProgressBackdropDark = (props) => /* @__PURE__ */ React$1.createElement("svg", { width: 80, height: 80, viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "image", "aria-hidden": "true", ...props }, /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 23.5, stroke: "white", strokeOpacity: 0.45 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 31.5, stroke: "white", strokeOpacity: 0.3 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 39.5, stroke: "white", strokeOpacity: 0.15 }));
 
-const SvgProgressBackdropLight = (props) => /* @__PURE__ */ React$1.createElement("svg", { width: 80, height: 80, viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "image", ...props }, /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 23.5, stroke: "black", strokeOpacity: 0.25 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 31.5, stroke: "black", strokeOpacity: 0.1 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 39.5, stroke: "black", strokeOpacity: 0.05 }));
+const SvgProgressBackdropLight = (props) => /* @__PURE__ */ React$1.createElement("svg", { width: 80, height: 80, viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "image", "aria-hidden": "true", ...props }, /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 23.5, stroke: "black", strokeOpacity: 0.25 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 31.5, stroke: "black", strokeOpacity: 0.1 }), /* @__PURE__ */ React$1.createElement("circle", { cx: 40, cy: 40, r: 39.5, stroke: "black", strokeOpacity: 0.05 }));
 
 const ProgressBackgroundImage = ({ style }) => {
   const isLightColorScheme = useSelector(getIsLightColorScheme);
@@ -78033,7 +78579,8 @@ const ProgressBar = ({
 const getStyles$G = () => {
   return {
     container: {
-      textAlign: "center"
+      textAlign: "center",
+      width: "100%"
     },
     backgroundImage: {
       height: "80px",
@@ -78053,9 +78600,7 @@ const getStyles$G = () => {
       alignItems: "center",
       boxSizing: "border-box",
       display: "flex",
-      justifyContent: "space-between",
-      paddingLeft: "28px",
-      paddingRight: "28px",
+      justifyContent: "space-around",
       position: "absolute",
       width: "100%"
     }
@@ -80035,8 +80580,8 @@ const Connected = React__default.forwardRef(
     const continueButtonRef = useRef(null);
     const connectSuccessSurveyRef = useRef(null);
     const postMessageFunctions = useContext(PostMessageContext);
-    const appName = useSelector((state) => state.profiles.client.oauth_app_name || null);
     const { onShowConnectSuccessSurvey } = useContext(AnalyticContext);
+    const clientGuid = useSelector(getClientGuid);
     const tokens = useTokens();
     const styles = getStyles$x(tokens);
     const getNextDelay = getDelay();
@@ -80066,7 +80611,7 @@ const Connected = React__default.forwardRef(
     useEffect(() => {
       focusElement(continueButtonRef.current);
     }, [institutionName]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, style: styles.pageContainer, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ReactConfetti,
         {
@@ -80081,82 +80626,139 @@ const Connected = React__default.forwardRef(
           style: { zIndex: 3e3 }
         }
       ),
-      showFeedBack ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ConnectSuccessSurvey,
-        {
-          handleBack: () => setShowFeedBack(false),
-          handleDone,
-          ref: connectSuccessSurveyRef
-        }
-      ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.header, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          M,
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.content, children: [
+        showFeedBack ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ConnectSuccessSurvey,
           {
-            className: "material-symbols-rounded",
-            color: "success",
-            fill: true,
-            name: "check_circle",
-            size: 80,
-            weight: Fe.Dark
+            handleBack: () => setShowFeedBack(false),
+            handleDone,
+            ref: connectSuccessSurveyRef
           }
-        ) }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             D,
             {
-              component: "h2",
+              component: "h1",
               "data-test": "connected-header",
               style: styles.title,
               truncate: false,
               variant: "H2",
-              children: __("Success")
+              children: __("Success!")
             }
-          ),
-          appName && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(D, { component: "p", "data-test": "connected-secondary-text", style: styles.body, children: __("You have successfully connected %1 to %2.", institutionName, appName) }) }),
-          !appName && /* @__PURE__ */ jsxRuntimeExports.jsx(D, { component: "p", "data-test": "connected-secondary-text", style: styles.body, children: __("You have successfully connected to %1.", institutionName) })
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.progressBarContainer, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.barContainer, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.logosContainer, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressLogo, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                ClientLogo,
+                {
+                  alt: "Client logo",
+                  clientGuid,
+                  size: 64,
+                  style: styles.logo
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressBackgroundImage, { style: styles.backgroundImage }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressLogo, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                K0,
+                {
+                  alt: "Institution logo",
+                  institutionGuid: institution.guid,
+                  logoUrl: institution.logo_url || "",
+                  size: 64,
+                  style: styles.logo
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressLine, { isActive: true }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressCheckMark, {}),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressLine, { isActive: true, isCentralLine: true }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressCheckMark, {}),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressLine, { isActive: true, isCentralLine: true }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressCheckMark, {}),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressLine, { isActive: true })
+          ] }) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button$2,
+            {
+              "data-test": "done-button",
+              fullWidth: true,
+              onClick: handleDone,
+              ref: continueButtonRef,
+              style: styles.button,
+              variant: "contained",
+              children: __("Done")
+            }
+          ) }),
+          typeof onShowConnectSuccessSurvey === "function" && /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button$2,
+            {
+              "data-test": "give-feedback",
+              fullWidth: true,
+              onClick: () => {
+                onShowConnectSuccessSurvey();
+                setShowFeedBack(true);
+              },
+              style: styles.feedbackButton,
+              variant: "text",
+              children: __("Give feedback")
+            }
+          ) })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button$2,
-          {
-            "data-test": "done-button",
-            fullWidth: true,
-            onClick: handleDone,
-            ref: continueButtonRef,
-            style: styles.button,
-            variant: "contained",
-            children: __("Done")
-          }
-        ) }),
-        typeof onShowConnectSuccessSurvey === "function" && /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button$2,
-          {
-            "data-test": "give-feedback",
-            fullWidth: true,
-            onClick: () => {
-              onShowConnectSuccessSurvey();
-              setShowFeedBack(true);
-            },
-            variant: "text",
-            children: __("Give feedback")
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PrivateAndSecure, {}) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AriaLive, { level: "assertive", message: ariaLiveRegionMessage, timeout: 100 })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(AriaLive, { level: "assertive", message: ariaLiveRegionMessage, timeout: 100 })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.footer, children: /* @__PURE__ */ jsxRuntimeExports.jsx(PoweredByFooter, { aggregator: institution.aggregatorDisplayName }) })
     ] });
   }
 );
 const getStyles$x = (tokens) => {
   return {
+    pageContainer: {
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100%"
+    },
+    content: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column"
+    },
     header: {
       display: "flex",
       justifyContent: "center",
       marginTop: "20px",
       marginBottom: tokens.Spacing.Large
     },
+    progressBarContainer: {
+      marginBottom: "48px",
+      textAlign: "center",
+      width: "100%"
+    },
+    barContainer: {
+      alignItems: "center",
+      display: "flex",
+      height: "80px",
+      justifyContent: "center"
+    },
+    logosContainer: {
+      alignItems: "center",
+      boxSizing: "border-box",
+      display: "flex",
+      justifyContent: "space-around",
+      position: "absolute",
+      width: "100%"
+    },
+    logo: {
+      borderRadius: "8px"
+    },
+    backgroundImage: {
+      height: "80px",
+      width: "80px",
+      zIndex: 1
+    },
     title: {
       textAlign: "center",
-      marginBottom: tokens.Spacing.Tiny
+      marginBottom: tokens.Spacing.XLarge,
+      marginTop: tokens.Spacing.XLarge
     },
     body: {
       textAlign: "center",
@@ -80165,6 +80767,13 @@ const getStyles$x = (tokens) => {
     },
     button: {
       marginBottom: tokens.Spacing.Small
+    },
+    feedbackButton: {
+      color: tokens.Color.Primary300
+    },
+    footer: {
+      marginTop: "24px",
+      marginBottom: "24px"
     }
   };
 };
@@ -82535,7 +83144,7 @@ const VerifyExistingMember = (props) => {
         component: "h2",
         "data-test": "verify-existing-member-header",
         id: "connect-select-institution",
-        sx: { marginBottom: tokens.Spacing.Tiny },
+        sx: { marginBottom: tokens.Spacing.Small },
         tabIndex: -1,
         truncate: false,
         variant: "H2",
@@ -82561,7 +83170,7 @@ const VerifyExistingMember = (props) => {
       {
         component: "h3",
         "data-test": "connected-institutions-text",
-        sx: { marginBottom: tokens.Spacing.XSmall, fontWeight: 600 },
+        sx: { marginBottom: tokens.Spacing.Tiny, fontWeight: 600 },
         truncate: false,
         variant: "ParagraphSmall",
         children: _n(
@@ -82572,27 +83181,27 @@ const VerifyExistingMember = (props) => {
         )
       }
     ),
-    productSupportingMembers.map((member) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        UtilityRow,
+    /* @__PURE__ */ jsxRuntimeExports.jsx(List$1, { children: productSupportingMembers.map((member) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(ListItem, { "data-test": "connect-account-row", disableGutters: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        ListItemButton,
         {
-          borderType: "none",
-          "data-test": "connect-account-row",
-          leftChildren: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            InstitutionLogo,
-            {
-              alt: member.name,
-              "aria-hidden": true,
-              institutionGuid: member.institution_guid
-            }
-          ),
           onClick: () => handleMemberClick(member),
-          subTitle: member.institution_url,
-          title: member.name
-        },
-        member.guid
-      );
-    }),
+          style: styles.listItemButton,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemAvatar, { style: { minWidth: 48, minHeight: 48 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InstitutionLogo,
+              {
+                alt: member.name,
+                "aria-hidden": true,
+                institutionGuid: member.institution_guid,
+                size: 48
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemText, { primary: member.name, secondary: member.institution_url })
+          ]
+        }
+      ) }, member.guid);
+    }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Button$2,
       {
@@ -82614,8 +83223,15 @@ const getStyles$g = (tokens) => {
       display: "flex",
       flexDirection: "column"
     },
+    listItemButton: {
+      borderRadius: tokens.BorderRadius.Large,
+      margin: 0,
+      paddingLeft: 0,
+      paddingRight: 0,
+      minHeight: 72
+    },
     buttonSpacing: {
-      marginTop: tokens.Spacing.Medium
+      marginTop: tokens.Spacing.Large
     }
   };
 };
@@ -86960,7 +87576,6 @@ const Edge$1 = "Edge";
 const Chrome$1 = "Chrome";
 const Firefox$1 = "Firefox";
 const Dismiss$1 = "Rejeter";
-const Success$1 = "Succès";
 const Spanish$1 = "Espagnol";
 const French$1 = "Français";
 const English$1 = "Anglais";
@@ -87301,9 +87916,6 @@ const frCa = {
 	"Please try linking a checking or savings account.": "Veuillez essayer de lier un compte courant ou un compte d'épargne.",
 	"Choose an institution that’s already connected and select accounts to share, or search for a different one.": "Choisissez une institution déjà connectée et sélectionnez les comptes à partager, ou recherchez-en un autre.",
 	"You have successfully connected to %1": "Vous vous êtes connecté avec succès à %1",
-	Success: Success$1,
-	"You have successfully connected to %1.": "Vous vous êtes connecté avec succès à %1.",
-	"You have successfully connected %1 to %2.": "Vous avez réussi à connecter %1 à %2",
 	"Go back": "Retourner",
 	"Account Information": "Informations sur le compte",
 	"Account type and description": "Type de compte et description",
@@ -87383,6 +87995,14 @@ const frCa = {
 	"Logo for %1": "Logo pour %1",
 	"Free %1 Connections Are No Longer Available": "Les connexions gratuites %1 ne sont plus disponibles",
 	"%1 now charges a fee for us to access your account data. To avoid passing that cost on to you, we no longer support %1 connections.": "$1 facture désormais des frais pour accéder à vos données de compte. Pour éviter de vous les répercuter, nous ne prenons plus en charge les connexions $1.",
+	"Success!": "Succès!",
+	"No accounts found": "Aucun compte trouvé",
+	"Return to institution selection": "Retour à la sélection des établissements",
+	"Additional permissions needed": "Autorisations supplémentaires nécessaires",
+	"Review instructions": "Instructions de révision",
+	"Unable to connect": "Impossible de se connecter",
+	"Maintenance in progress": "Entretien en cours",
+	"Deposits verified. You're almost done setting things up. Continue to your institution.": "Dépôts vérifiés. Vous avez presque terminé la configuration. Rendez-vous dans votre établissement.",
 	"connect/disclosure/policy/text\u0004By clicking Continue, you agree to the ": "En cliquant sur Continuer, vous acceptez la ",
 	"connect/disclosure/policy/link\u0004MX Privacy Policy.": "Politique de confidentialité de MX.",
 	"connect/disclosure/policy/link\u0004MX Privacy Policy": "Politique de confidentialité de MX.",
@@ -87457,7 +88077,6 @@ const Edge = "Edge";
 const Chrome = "Chrome";
 const Firefox = "Firefox";
 const Dismiss = "Descartar";
-const Success = "Éxito";
 const Spanish = "Español";
 const French = "Francés";
 const English = "Inglés";
@@ -87801,9 +88420,6 @@ const es = {
 	"Please try linking a checking or savings account.": "Intente vincular una cuenta corriente o de ahorros.",
 	"Choose an institution that’s already connected and select accounts to share, or search for a different one.": "Elija una institución que ya esté conectada y seleccione cuentas para compartir. o buscar uno diferente.",
 	"You have successfully connected to %1": "Te has conectado correctamente a %1",
-	Success: Success,
-	"You have successfully connected to %1.": "Te has conectado correctamente a %1.",
-	"You have successfully connected %1 to %2.": "Has conectado correctamente %1 a %2.",
 	"Account Information": "Información de la cuenta",
 	"Account type and description": "Tipo de cuenta y descripción",
 	"Credit limits": "Límites de crédito",
@@ -87882,6 +88498,14 @@ const es = {
 	"Logo for %1": "Logotipo de %1",
 	"Free %1 Connections Are No Longer Available": "Las conexiones gratuitas de %1 ya no están disponibles",
 	"%1 now charges a fee for us to access your account data. To avoid passing that cost on to you, we no longer support %1 connections.": "%1 ahora cobra una comisión por acceder a los datos de su cuenta. Para evitar que usted pague ese costo, ya no ofrecemos conexiones con %1.",
+	"Success!": "¡Éxito!",
+	"No accounts found": "No se encontraron cuentas",
+	"Return to institution selection": "Volver a la selección de instituciones",
+	"Additional permissions needed": "Se necesitan permisos adicionales",
+	"Review instructions": "Revisar instrucciones",
+	"Unable to connect": "No se puede conectar",
+	"Maintenance in progress": "Mantenimiento en curso",
+	"Deposits verified. You're almost done setting things up. Continue to your institution.": "Depósitos verificados. Ya casi terminas de configurar todo. Continúa con tu institución.",
 	"connect/disclosure/button\u0004Continue": "Continuar",
 	"connect/disclosure/policy/text\u0004By clicking Continue, you agree to the ": "Al hacer clic en Continuar, tu aceptas la ",
 	"connect/disclosure/policy/link\u0004MX Privacy Policy.": "Política de privacidad de Money Experience.",