@mxenabled/connect-widget 0.14.0 → 0.15.0

package/dist/index.es.js

@@ -5236,6 +5236,8 @@ const _find = /*@__PURE__*/getDefaultExportFromCjs(find_1);
 
 const ActionTypes$2 = {
   ACCEPT_DISCLOSURE: "connect/accept_disclosure",
+  ACTIONABLE_ERROR_CONNECT_DIFFERENT_INSTITUTION: "connect/actionable_error_connect_different_institution",
+  ACTIONABLE_ERROR_LOG_IN_AGAIN: "connect/actionable_error_log_in_again",
   ADD_MANUAL_ACCOUNT_SUCCESS: "connect/add_manual_account_success",
   CREATE_MEMBER_SUCCESS: "connect/create_member_success",
   EXIT_MICRODEPOSITS: "connect/exit_microdeposits",
@@ -5262,7 +5264,6 @@ const ActionTypes$2 = {
   RESET_CONNECT: "connect/reset_connect",
   RESET_WIDGET_CONNECTED: "connect/reset_widget_connected",
   RESET_WIDGET_MFA_STEP: "connect/reset_widget_mfa_step",
-  RESET_WIDGET_NO_ELIGIBLE_ACCOUNTS: "connect/reset_widget_no_eligible_accounts",
   SELECT_INSTITUTION: "connect/select_institution",
   SELECT_INSTITUTION_SUCCESS: "connect/select_institution_success",
   SELECT_INSTITUTION_ERROR: "connect/select_institution_error",
@@ -5376,6 +5377,7 @@ const VERIFY_MODE = "verification";
 const REWARD_MODE = "reward";
 const TAX_MODE = "tax";
 const STEPS = {
+  ACTIONABLE_ERROR: "actionableError",
   ADD_MANUAL_ACCOUNT: "addManualAccount",
   CONNECTED: "connected",
   CONNECTING: "connecting",
@@ -5384,7 +5386,6 @@ const STEPS = {
   DISCLOSURE: "disclosure",
   ENTER_CREDENTIALS: "enterCreds",
   EXISTING_MEMBER: "existingMember",
-  LOGIN_ERROR: "loginError",
   MFA: "mfa",
   MICRODEPOSITS: "microdeposits",
   OAUTH_ERROR: "oauthError",
@@ -9031,16 +9032,6 @@ const ReadableAccountTypes = {
   SAVINGS: 2
 };
 
-const JOB_DETAIL_CODE = {
-  NO_VERIFIABLE_ACCOUNTS: 1e3
-};
-
-const hasNoVerifiableAccounts = (member, connectConfig) => {
-  if (connectConfig.mode === VERIFY_MODE && member?.most_recent_job_detail_code === JOB_DETAIL_CODE.NO_VERIFIABLE_ACCOUNTS) {
-    return true;
-  }
-  return false;
-};
 const hasNoSingleAccountSelectOptions = (member) => {
   const mfaCredentials = _get(member, "mfa.credentials", []);
   const isSAS = mfaCredentials[0]?.external_id === "single_account_select";
@@ -9054,8 +9045,6 @@ const hasNoSingleAccountSelectOptions = (member) => {
 const defaultState$1 = {
   error: null,
   // The most recent job request error, if any
-  hasInvalidData: false,
-  // no dda accounts for verification
   isComponentLoading: true,
   // whether or not the entire component is loading
   isConnectMounted: false,
@@ -9097,28 +9086,16 @@ const loadConnectSuccess = (state, action) => {
     institution = {},
     widgetProfile
   } = action.payload;
-  const currentMicrodepositGuid = config.current_microdeposit_guid;
-  let hasInvalidData2 = state.hasInvalidData;
-  let startingStep = getStartingStep(
-    members,
-    member,
-    microdeposit,
-    config,
-    institution,
-    widgetProfile
-  );
-  if (member && config.mode === VERIFY_MODE && (hasNoVerifiableAccounts(member, config) || hasNoSingleAccountSelectOptions(member))) {
-    startingStep = STEPS.LOGIN_ERROR;
-    hasInvalidData2 = true;
-  }
   return {
     ...state,
     currentMemberGuid: member?.guid ?? defaultState$1.currentMemberGuid,
-    currentMicrodepositGuid,
+    currentMicrodepositGuid: config.current_microdeposit_guid ?? defaultState$1.currentMicrodepositGuid,
     isComponentLoading: false,
-    location: pushLocation(state.location, startingStep),
+    location: pushLocation(
+      state.location,
+      getStartingStep(members, member, microdeposit, config, institution, widgetProfile)
+    ),
     selectedInstitution: institution,
-    hasInvalidData: hasInvalidData2,
     updateCredentials: member?.connection_status === ReadableStatuses$1.DENIED || state.updateCredentials,
     members
   };
@@ -9143,7 +9120,6 @@ const goBackSearchOrVerify = (state, { payload }) => {
     oauthURL: defaultState$1.oauthURL,
     oauthErrorReason: defaultState$1.oauthErrorReason,
     jobSchedule: UNINITIALIZED$2,
-    hasInvalidData: defaultState$1.hasInvalidData,
     selectedInstitution: defaultState$1.selectedInstitution
   };
 };
@@ -9157,7 +9133,6 @@ const resetWidgetMFAStep = (state, { payload }) => {
     oauthURL: defaultState$1.oauthURL,
     oauthErrorReason: defaultState$1.oauthErrorReason,
     jobSchedule: UNINITIALIZED$2,
-    hasInvalidData: defaultState$1.hasInvalidData,
     selectedInstitution: defaultState$1.selectedInstitution
   };
 };
@@ -9170,7 +9145,6 @@ const resetWidgetConnected = (state) => {
     oauthURL: defaultState$1.oauthURL,
     oauthErrorReason: defaultState$1.oauthErrorReason,
     jobSchedule: UNINITIALIZED$2,
-    hasInvalidData: defaultState$1.hasInvalidData,
     selectedInstitution: defaultState$1.selectedInstitution,
     // This overrides/resets the location to always only be the search step.
     location: pushLocation(state.location, STEPS.SEARCH, true)
@@ -9216,8 +9190,7 @@ const deleteMemberSuccessReset = (state, { payload }) => {
     updateCredentials: defaultState$1.updateCredentials,
     oauthURL: defaultState$1.oauthURL,
     oauthErrorReason: defaultState$1.oauthErrorReason,
-    jobSchedule: UNINITIALIZED$2,
-    hasInvalidData: defaultState$1.hasInvalidData
+    jobSchedule: UNINITIALIZED$2
   };
 };
 const userConsented = (state) => ({
@@ -9246,12 +9219,10 @@ const stepToAddManualAccount = (state) => ({
   ...state,
   location: pushLocation(state.location, STEPS.ADD_MANUAL_ACCOUNT)
 });
-function stepToLoginError(state) {
-  return {
-    ...state,
-    location: pushLocation(state.location, STEPS.LOGIN_ERROR)
-  };
-}
+const mfaConnectSubmitError = (state) => ({
+  ...state,
+  location: pushLocation(state.location, STEPS.ACTIONABLE_ERROR)
+});
 const acceptDisclosure = (state, { payload }) => {
   let nextStep = STEPS.SEARCH;
   if (state.selectedInstitution && (payload.current_institution_guid || payload.current_institution_code)) {
@@ -9378,30 +9349,36 @@ const addManualAccount = (state, { payload }) => {
   }
   return state;
 };
-const resetWidgetInvalidData = (state) => {
+const connectGoBack = (state) => {
   return {
     ...state,
-    location: pushLocation(state.location, STEPS.SEARCH, true),
-    error: defaultState$1.error,
-    updateCredentials: defaultState$1.updateCredentials,
-    oauthURL: defaultState$1.oauthURL,
-    oauthErrorReason: defaultState$1.oauthErrorReason,
-    jobSchedule: UNINITIALIZED$2,
-    currentMemberGuid: defaultState$1.currentMemberGuid,
-    hasInvalidData: defaultState$1.hasInvalidData
+    location: popLocation(state)
   };
 };
-const hasInvalidData = (state) => {
+const actionableErrorConnectDifferentInstitution = (state, action) => {
+  const mode = action.payload;
+  const iavMembers = getIavMembers(state.members);
   return {
-    ...state,
-    location: pushLocation(state.location, STEPS.LOGIN_ERROR),
-    hasInvalidData: true
+    ...defaultState$1,
+    isComponentLoading: state.isComponentLoading,
+    isConnectMounted: state.isConnectMounted,
+    location: pushLocation(
+      state.location,
+      mode === VERIFY_MODE && iavMembers.length > 0 ? STEPS.VERIFY_EXISTING_MEMBER : STEPS.SEARCH,
+      true
+    ),
+    members: state.members
   };
 };
-const connectGoBack = (state) => {
+const actionableErrorLogInAgain = (state) => {
   return {
     ...state,
-    location: popLocation(state)
+    location: pushLocation(popLocation(state), STEPS.ENTER_CREDENTIALS, true),
+    currentMemberGuid: defaultState$1.currentMemberGuid,
+    error: defaultState$1.error,
+    oauthURL: defaultState$1.oauthURL,
+    oauthErrorReason: defaultState$1.oauthErrorReason,
+    jobSchedule: UNINITIALIZED$2
   };
 };
 const upsertMember = (state, action) => {
@@ -9415,38 +9392,38 @@ const upsertMember = (state, action) => {
 function getStartingStep(members, member, microdeposit, config, institution, widgetProfile) {
   const shouldStepToMFA = member && config.update_credentials && member.connection_status === ReadableStatuses$1.CHALLENGED;
   const shouldUpdateCredentials = member && (config.update_credentials || member.connection_status === ReadableStatuses$1.DENIED);
-  if (shouldStepToMFA) {
+  const shouldStepToMicrodeposits = config.current_microdeposit_guid && config.mode === VERIFY_MODE && microdeposit.status !== MicrodepositsStatuses.PREINITIATED;
+  const shouldLoadWithInstitution = institution && (config.current_institution_guid || config.current_institution_code);
+  const shouldStepToConnecting = member?.connection_status === ReadableStatuses$1.REJECTED || member?.connection_status === ReadableStatuses$1.EXPIRED;
+  if (shouldStepToMFA)
     return STEPS.MFA;
-  } else if (shouldUpdateCredentials) {
+  else if (shouldUpdateCredentials)
     return STEPS.ENTER_CREDENTIALS;
-  } else if (member && config.current_member_guid) {
-    const shouldStepToConnecting = member.connection_status === ReadableStatuses$1.REJECTED || member.connection_status === ReadableStatuses$1.EXPIRED;
+  else if (member && config.current_member_guid)
     return shouldStepToConnecting ? STEPS.CONNECTING : getStepFromMember(member);
-  } else if (config.current_microdeposit_guid && config.mode === VERIFY_MODE && microdeposit.status !== MicrodepositsStatuses.PREINITIATED) {
+  else if (shouldStepToMicrodeposits)
     return STEPS.MICRODEPOSITS;
-  } else if (widgetProfile.display_disclosure_in_connect) {
+  else if (widgetProfile.display_disclosure_in_connect)
     return STEPS.DISCLOSURE;
-  } else if (institution && (config.current_institution_guid || config.current_institution_code)) {
+  else if (shouldLoadWithInstitution)
     return STEPS.ENTER_CREDENTIALS;
-  } else if (config.mode === VERIFY_MODE) {
-    const iavMembers = getIavMembers(members);
-    return iavMembers.length > 0 ? STEPS.VERIFY_EXISTING_MEMBER : STEPS.SEARCH;
-  }
-  return STEPS.SEARCH;
+  else if (config.mode === VERIFY_MODE)
+    return getIavMembers(members).length > 0 ? STEPS.VERIFY_EXISTING_MEMBER : STEPS.SEARCH;
+  else return STEPS.SEARCH;
 }
 function getStepFromMember(member) {
   const connection_status = member.connection_status;
-  if (connection_status === ReadableStatuses$1.CHALLENGED) {
+  if (member?.most_recent_job_detail_code || hasNoSingleAccountSelectOptions(member))
+    return STEPS.ACTIONABLE_ERROR;
+  else if (connection_status === ReadableStatuses$1.CHALLENGED)
     return STEPS.MFA;
-  } else if (connection_status === ReadableStatuses$1.CONNECTED) {
+  else if (connection_status === ReadableStatuses$1.CONNECTED)
     return STEPS.CONNECTED;
-  } else if (connection_status === ReadableStatuses$1.PENDING || connection_status === ReadableStatuses$1.DENIED) {
+  else if ([ReadableStatuses$1.PENDING, ReadableStatuses$1.DENIED].includes(connection_status))
     return STEPS.ENTER_CREDENTIALS;
-  } else if (ProcessingStatuses.indexOf(connection_status) !== -1) {
+  else if (ProcessingStatuses.indexOf(connection_status) !== -1)
     return STEPS.CONNECTING;
-  } else {
-    return STEPS.LOGIN_ERROR;
-  }
+  else return STEPS.ACTIONABLE_ERROR;
 }
 function getIavMembers(members) {
   const iavMembers = members.filter(
@@ -9490,7 +9467,6 @@ const connect = createReducer(defaultState$1, {
   [ActionTypes$2.DELETE_MEMBER_SUCCESS]: deleteMemberSuccess,
   [ActionTypes$2.STEP_TO_DELETE_MEMBER_SUCCESS]: stepToDeleteMemberSuccess,
   [ActionTypes$2.DELETE_MEMBER_SUCCESS_RESET]: deleteMemberSuccessReset,
-  [ActionTypes$2.HAS_INVALID_DATA]: hasInvalidData,
   [ActionTypes$2.INIT_JOB_SCHEDULE]: initializeJobSchedule,
   [ActionTypes$2.JOB_COMPLETE]: jobComplete,
   [ActionTypes$2.LOAD_CONNECT]: loadConnect,
@@ -9503,7 +9479,8 @@ const connect = createReducer(defaultState$1, {
   [ActionTypes$2.RETRY_OAUTH]: retryOAuth,
   [ActionTypes$2.RESET_WIDGET_CONNECTED]: resetWidgetConnected,
   [ActionTypes$2.RESET_WIDGET_MFA_STEP]: resetWidgetMFAStep,
-  [ActionTypes$2.RESET_WIDGET_NO_ELIGIBLE_ACCOUNTS]: resetWidgetInvalidData,
+  [ActionTypes$2.ACTIONABLE_ERROR_CONNECT_DIFFERENT_INSTITUTION]: actionableErrorConnectDifferentInstitution,
+  [ActionTypes$2.ACTIONABLE_ERROR_LOG_IN_AGAIN]: actionableErrorLogInAgain,
   [ActionTypes$2.SELECT_INSTITUTION_SUCCESS]: selectInstitutionSuccess,
   [ActionTypes$2.START_OAUTH]: startOauth,
   [ActionTypes$2.START_OAUTH_SUCCESS]: startOauthSuccess,
@@ -9518,7 +9495,7 @@ const connect = createReducer(defaultState$1, {
   [ActionTypes$2.UPDATE_MEMBER_SUCCESS]: updateMemberSuccess,
   [ActionTypes$2.USER_CONSENTED]: userConsented,
   [ActionTypes$2.MFA_CONNECT_SUBMIT_SUCCESS]: updateMemberSuccess,
-  [ActionTypes$2.MFA_CONNECT_SUBMIT_ERROR]: stepToLoginError,
+  [ActionTypes$2.MFA_CONNECT_SUBMIT_ERROR]: mfaConnectSubmitError,
   [ActionTypes$2.ADD_MANUAL_ACCOUNT_SUCCESS]: addManualAccount,
   [ActionTypes$2.LOGIN_ERROR_START_OVER]: loginErrorStartOver,
   [ActionTypes$2.CONNECT_GO_BACK]: connectGoBack
@@ -19951,7 +19928,7 @@ function getIconUtilityClass$1(slot) {
 generateUtilityClasses$1("MuiIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
 
 const _excluded$u = ["baseClassName", "className", "color", "component", "fontSize"];
-const useUtilityClasses$Y = (ownerState) => {
+const useUtilityClasses$Z = (ownerState) => {
   const {
     color,
     fontSize,
@@ -20023,7 +20000,7 @@ const Icon$1 = /* @__PURE__ */ React$2.forwardRef(function Icon2(inProps, ref) {
     component: Component,
     fontSize
   });
-  const classes = useUtilityClasses$Y(ownerState);
+  const classes = useUtilityClasses$Z(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(IconRoot$1, _extends$1({
     as: Component,
     className: clsx(
@@ -22393,6 +22370,14 @@ function getScrollbarSize(win = window) {
   return win.innerWidth - documentWidth;
 }
 
+const usePreviousProps = (value) => {
+  const ref = React$2.useRef({});
+  React$2.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
 function getValidReactChildren(children) {
   return React$2.Children.toArray(children).filter((child) => /* @__PURE__ */ React$2.isValidElement(child));
 }
@@ -25323,7 +25308,7 @@ const v6Colors$1 = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$X = (ownerState) => {
+const useUtilityClasses$Y = (ownerState) => {
   const {
     align,
     gutterBottom,
@@ -25463,7 +25448,7 @@ const Typography$1 = /* @__PURE__ */ React$2.forwardRef(function Typography2(inP
     variantMapping
   };
   const Component = component || (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping$1[variant]) || "span";
-  const classes = useUtilityClasses$X(ownerState);
+  const classes = useUtilityClasses$Y(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TypographyRoot$1, {
     as: Component,
     ref,
@@ -26678,7 +26663,7 @@ function getButtonBaseUtilityClass$1(slot) {
 }
 const buttonBaseClasses$1 = generateUtilityClasses("MuiButtonBase", ["root", "disabled", "focusVisible"]);
 
-const useUtilityClasses$W = (ownerState) => {
+const useUtilityClasses$X = (ownerState) => {
   const {
     disabled,
     focusVisible,
@@ -26907,7 +26892,7 @@ const ButtonBase$1 = /* @__PURE__ */ React$2.forwardRef(function ButtonBase2(inP
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$W(ownerState);
+  const classes = useUtilityClasses$X(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ButtonBaseRoot$1, {
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -27101,7 +27086,7 @@ function getIconButtonUtilityClass(slot) {
 }
 const iconButtonClasses = generateUtilityClasses("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge"]);
 
-const useUtilityClasses$V = (ownerState) => {
+const useUtilityClasses$W = (ownerState) => {
   const {
     classes,
     disabled,
@@ -27247,7 +27232,7 @@ const IconButton$1 = /* @__PURE__ */ React$2.forwardRef(function IconButton2(inP
     disableFocusRipple,
     size
   };
-  const classes = useUtilityClasses$V(ownerState);
+  const classes = useUtilityClasses$W(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(IconButtonRoot, {
     className: clsx(classes.root, className),
     centerRipple: true,
@@ -27332,7 +27317,7 @@ function getSvgIconUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
 
-const useUtilityClasses$U = (ownerState) => {
+const useUtilityClasses$V = (ownerState) => {
   const {
     color,
     fontSize,
@@ -27471,7 +27456,7 @@ const SvgIcon$1 = /* @__PURE__ */ React$2.forwardRef(function SvgIcon2(inProps,
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$U(ownerState);
+  const classes = useUtilityClasses$V(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SvgIconRoot$1, {
     as: component,
     className: clsx(classes.root, className),
@@ -27591,7 +27576,7 @@ function getListUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiList", ["root", "padding", "dense", "subheader"]);
 
-const useUtilityClasses$T = (ownerState) => {
+const useUtilityClasses$U = (ownerState) => {
   const {
     classes,
     disablePadding,
@@ -27657,7 +27642,7 @@ const List$1 = /* @__PURE__ */ React$2.forwardRef(function List2(inProps, ref) {
     dense,
     disablePadding
   };
-  const classes = useUtilityClasses$T(ownerState);
+  const classes = useUtilityClasses$U(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListContext$1.Provider, {
     value: context,
     children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ListRoot$1, {
@@ -28201,7 +28186,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$S = (ownerState) => {
+const useUtilityClasses$T = (ownerState) => {
   const {
     classes,
     color,
@@ -28605,7 +28590,7 @@ const InputBase$1 = /* @__PURE__ */ React$2.forwardRef(function InputBase2(inPro
     startAdornment,
     type
   };
-  const classes = useUtilityClasses$S(ownerState);
+  const classes = useUtilityClasses$T(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot$1;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseInput;
@@ -28906,7 +28891,7 @@ const inputClasses$1 = {
   ...generateUtilityClasses("MuiInput", ["root", "underline", "input"])
 };
 
-const useUtilityClasses$R = (ownerState) => {
+const useUtilityClasses$S = (ownerState) => {
   const {
     classes,
     disableUnderline
@@ -29039,7 +29024,7 @@ const Input$1 = /* @__PURE__ */ React$2.forwardRef(function Input2(inProps, ref)
     type = "text",
     ...other
   } = props;
-  const classes = useUtilityClasses$R(props);
+  const classes = useUtilityClasses$S(props);
   const ownerState = {
     disableUnderline
   };
@@ -29263,7 +29248,7 @@ const filledInputClasses$1 = {
   ...generateUtilityClasses("MuiFilledInput", ["root", "underline", "input", "adornedStart", "adornedEnd", "sizeSmall", "multiline", "hiddenLabel"])
 };
 
-const useUtilityClasses$Q = (ownerState) => {
+const useUtilityClasses$R = (ownerState) => {
   const {
     classes,
     disableUnderline,
@@ -29542,7 +29527,7 @@ const FilledInput$1 = /* @__PURE__ */ React$2.forwardRef(function FilledInput2(i
     multiline,
     type
   };
-  const classes = useUtilityClasses$Q(props);
+  const classes = useUtilityClasses$R(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -29917,7 +29902,7 @@ const outlinedInputClasses$1 = {
   ...generateUtilityClasses("MuiOutlinedInput", ["root", "notchedOutline", "input"])
 };
 
-const useUtilityClasses$P = (ownerState) => {
+const useUtilityClasses$Q = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -30096,7 +30081,7 @@ const OutlinedInput$1 = /* @__PURE__ */ React$2.forwardRef(function OutlinedInpu
     type = "text",
     ...other
   } = props;
-  const classes = useUtilityClasses$P(props);
+  const classes = useUtilityClasses$Q(props);
   const muiFormControl = useFormControl$1();
   const fcs = formControlState$1({
     props,
@@ -30317,7 +30302,7 @@ function getFormLabelUtilityClasses$1(slot) {
 }
 const formLabelClasses$1 = generateUtilityClasses("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]);
 
-const useUtilityClasses$O = (ownerState) => {
+const useUtilityClasses$P = (ownerState) => {
   const {
     classes,
     color,
@@ -30418,7 +30403,7 @@ const FormLabel$1 = /* @__PURE__ */ React$2.forwardRef(function FormLabel2(inPro
     focused: fcs.focused,
     required: fcs.required
   };
-  const classes = useUtilityClasses$O(ownerState);
+  const classes = useUtilityClasses$P(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FormLabelRoot$1, {
     as: component,
     ownerState,
@@ -30492,7 +30477,7 @@ function getInputLabelUtilityClasses$1(slot) {
 }
 generateUtilityClasses("MuiInputLabel", ["root", "focused", "disabled", "error", "required", "asterisk", "formControl", "sizeSmall", "shrink", "animated", "standard", "filled", "outlined"]);
 
-const useUtilityClasses$N = (ownerState) => {
+const useUtilityClasses$O = (ownerState) => {
   const {
     classes,
     formControl,
@@ -30681,7 +30666,7 @@ const InputLabel$1 = /* @__PURE__ */ React$2.forwardRef(function InputLabel2(inP
     required: fcs.required,
     focused: fcs.focused
   };
-  const classes = useUtilityClasses$N(ownerState);
+  const classes = useUtilityClasses$O(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabelRoot$1, {
     "data-shrink": shrink,
     ref,
@@ -30764,7 +30749,7 @@ function getFormControlUtilityClasses$1(slot) {
 }
 generateUtilityClasses("MuiFormControl", ["root", "marginNone", "marginNormal", "marginDense", "fullWidth", "disabled"]);
 
-const useUtilityClasses$M = (ownerState) => {
+const useUtilityClasses$N = (ownerState) => {
   const {
     classes,
     margin,
@@ -30857,7 +30842,7 @@ const FormControl$1 = /* @__PURE__ */ React$2.forwardRef(function FormControl2(i
     size,
     variant
   };
-  const classes = useUtilityClasses$M(ownerState);
+  const classes = useUtilityClasses$N(ownerState);
   const [adornedStart, setAdornedStart] = React$2.useState(() => {
     let initialAdornedStart = false;
     if (children) {
@@ -31033,7 +31018,7 @@ function getFormHelperTextUtilityClasses$1(slot) {
 const formHelperTextClasses$1 = generateUtilityClasses("MuiFormHelperText", ["root", "error", "disabled", "sizeSmall", "sizeMedium", "contained", "focused", "filled", "required"]);
 
 var _span$5;
-const useUtilityClasses$L = (ownerState) => {
+const useUtilityClasses$M = (ownerState) => {
   const {
     classes,
     contained,
@@ -31128,7 +31113,7 @@ const FormHelperText$1 = /* @__PURE__ */ React$2.forwardRef(function FormHelperT
     required: fcs.required
   };
   delete ownerState.ownerState;
-  const classes = useUtilityClasses$L(ownerState);
+  const classes = useUtilityClasses$M(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormHelperTextRoot$1, {
     as: component,
     className: clsx(classes.root, className),
@@ -32223,7 +32208,7 @@ const removeOwnerState = (props) => {
   } = props;
   return rest;
 };
-const useUtilityClasses$K = (ownerState) => {
+const useUtilityClasses$L = (ownerState) => {
   const {
     classes,
     invisible
@@ -32286,7 +32271,7 @@ const Backdrop$1 = /* @__PURE__ */ React$2.forwardRef(function Backdrop2(inProps
     component,
     invisible
   };
-  const classes = useUtilityClasses$K(ownerState);
+  const classes = useUtilityClasses$L(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     root: components.Root,
@@ -32584,7 +32569,7 @@ function getModalUtilityClass$1(slot) {
 }
 generateUtilityClasses("MuiModal", ["root", "hidden", "backdrop"]);
 
-const useUtilityClasses$J = (ownerState) => {
+const useUtilityClasses$K = (ownerState) => {
   const {
     open,
     exited,
@@ -32695,7 +32680,7 @@ const Modal$1 = /* @__PURE__ */ React$2.forwardRef(function Modal2(inProps, ref)
     ...propsWithDefaults,
     exited
   };
-  const classes = useUtilityClasses$J(ownerState);
+  const classes = useUtilityClasses$K(ownerState);
   const childProps = {};
   if (children.props.tabIndex === void 0) {
     childProps.tabIndex = "-1";
@@ -32960,7 +32945,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$I = (ownerState) => {
+const useUtilityClasses$J = (ownerState) => {
   const {
     square,
     elevation,
@@ -33032,7 +33017,7 @@ const Paper$1 = /* @__PURE__ */ React$2.forwardRef(function Paper2(inProps, ref)
     square,
     variant
   };
-  const classes = useUtilityClasses$I(ownerState);
+  const classes = useUtilityClasses$J(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"));
@@ -33148,7 +33133,7 @@ function getTransformOriginValue$1(transformOrigin) {
 function resolveAnchorEl$1(anchorEl) {
   return typeof anchorEl === "function" ? anchorEl() : anchorEl;
 }
-const useUtilityClasses$H = (ownerState) => {
+const useUtilityClasses$I = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -33230,7 +33215,7 @@ const Popover$1 = /* @__PURE__ */ React$2.forwardRef(function Popover2(inProps,
     transitionDuration: transitionDurationProp,
     TransitionProps
   };
-  const classes = useUtilityClasses$H(ownerState);
+  const classes = useUtilityClasses$I(ownerState);
   const getAnchorOffset = React$2.useCallback(() => {
     if (anchorReference === "anchorPosition") {
       if (process.env.NODE_ENV !== "production") {
@@ -33640,7 +33625,7 @@ const LTR_ORIGIN$1 = {
   vertical: "top",
   horizontal: "left"
 };
-const useUtilityClasses$G = (ownerState) => {
+const useUtilityClasses$H = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -33714,7 +33699,7 @@ const Menu$1 = /* @__PURE__ */ React$2.forwardRef(function Menu2(inProps, ref) {
     TransitionProps,
     variant
   };
-  const classes = useUtilityClasses$G(ownerState);
+  const classes = useUtilityClasses$H(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React$2.useRef(null);
   const handleEntering = (element, isAppearing) => {
@@ -33913,7 +33898,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$F = (ownerState) => {
+const useUtilityClasses$G = (ownerState) => {
   const {
     classes,
     variant,
@@ -34068,7 +34053,7 @@ const NativeSelectInput$1 = /* @__PURE__ */ React$2.forwardRef(function NativeSe
     variant,
     error
   };
-  const classes = useUtilityClasses$F(ownerState);
+  const classes = useUtilityClasses$G(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(React$2.Fragment, {
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx(NativeSelectSelect$1, {
       ownerState,
@@ -34213,7 +34198,7 @@ function areEqualValues$1(a, b) {
 function isEmpty$3(display) {
   return display == null || typeof display === "string" && !display.trim();
 }
-const useUtilityClasses$E = (ownerState) => {
+const useUtilityClasses$F = (ownerState) => {
   const {
     classes,
     variant,
@@ -34531,7 +34516,7 @@ const SelectInput$1 = /* @__PURE__ */ React$2.forwardRef(function SelectInput2(p
     open,
     error
   };
-  const classes = useUtilityClasses$E(ownerState);
+  const classes = useUtilityClasses$F(ownerState);
   const paperProps = {
     ...MenuProps.PaperProps,
     ...MenuProps.slotProps?.paper
@@ -34767,7 +34752,7 @@ const ArrowDropDownIcon$1 = createSvgIcon$1(/* @__PURE__ */ jsxRuntimeExports.js
   d: "M7 10l5 5 5-5z"
 }), "ArrowDropDown");
 
-const useUtilityClasses$D = (ownerState) => {
+const useUtilityClasses$E = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -34824,7 +34809,7 @@ const Select$2 = /* @__PURE__ */ React$2.forwardRef(function Select2(inProps, re
     variant,
     classes: classesProp
   };
-  const classes = useUtilityClasses$D(ownerState);
+  const classes = useUtilityClasses$E(ownerState);
   const {
     root,
     ...restOfClasses
@@ -35048,7 +35033,7 @@ const variantComponent$1 = {
   filled: FilledInput$1,
   outlined: OutlinedInput$1
 };
-const useUtilityClasses$C = (ownerState) => {
+const useUtilityClasses$D = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -35116,7 +35101,7 @@ const TextField$1 = /* @__PURE__ */ React$2.forwardRef(function TextField2(inPro
     select,
     variant
   };
-  const classes = useUtilityClasses$C(ownerState);
+  const classes = useUtilityClasses$D(ownerState);
   if (process.env.NODE_ENV !== "production") {
     if (select && !children) {
       console.error("MUI: `children` must be passed when using the `TextField` component with `select`.");
@@ -35446,7 +35431,7 @@ const overridesResolver$1 = (props, styles) => {
   } = props;
   return [styles.root, styles[`position${capitalize(ownerState.position)}`], ownerState.disablePointerEvents === true && styles.disablePointerEvents, styles[ownerState.variant]];
 };
-const useUtilityClasses$B = (ownerState) => {
+const useUtilityClasses$C = (ownerState) => {
   const {
     classes,
     disablePointerEvents,
@@ -35539,7 +35524,7 @@ const InputAdornment = /* @__PURE__ */ React$2.forwardRef(function InputAdornmen
     position,
     variant
   };
-  const classes = useUtilityClasses$B(ownerState);
+  const classes = useUtilityClasses$C(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormControlContext$1.Provider, {
     value: null,
     children: /* @__PURE__ */ jsxRuntimeExports.jsx(InputAdornmentRoot, {
@@ -35627,7 +35612,7 @@ if (process.env.NODE_ENV !== "production") {
   ButtonGroupButtonContext$1.displayName = "ButtonGroupButtonContext";
 }
 
-const useUtilityClasses$A = (ownerState) => {
+const useUtilityClasses$B = (ownerState) => {
   const {
     color,
     disableElevation,
@@ -35956,7 +35941,7 @@ const Button$2 = /* @__PURE__ */ React$2.forwardRef(function Button2(inProps, re
     type,
     variant
   };
-  const classes = useUtilityClasses$A(ownerState);
+  const classes = useUtilityClasses$B(ownerState);
   const startIcon = startIconProp && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonStartIcon$1, {
     className: classes.startIcon,
     ownerState,
@@ -36089,7 +36074,7 @@ function getListItemSecondaryActionClassesUtilityClass(slot) {
 }
 generateUtilityClasses("MuiListItemSecondaryAction", ["root", "disableGutters"]);
 
-const useUtilityClasses$z = (ownerState) => {
+const useUtilityClasses$A = (ownerState) => {
   const {
     disableGutters,
     classes
@@ -36136,7 +36121,7 @@ const ListItemSecondaryAction = /* @__PURE__ */ React$2.forwardRef(function List
     ...props,
     disableGutters: context.disableGutters
   };
-  const classes = useUtilityClasses$z(ownerState);
+  const classes = useUtilityClasses$A(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemSecondaryActionRoot, {
     className: clsx(classes.root, className),
     ownerState,
@@ -36174,7 +36159,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$y = (ownerState) => {
+const useUtilityClasses$z = (ownerState) => {
   const {
     alignItems,
     classes,
@@ -36341,7 +36326,7 @@ const ListItem = /* @__PURE__ */ React$2.forwardRef(function ListItem2(inProps,
     divider,
     hasSecondaryAction
   };
-  const classes = useUtilityClasses$y(ownerState);
+  const classes = useUtilityClasses$z(ownerState);
   const handleRef = useForkRef(listItemRef, ref);
   const Root = slots.root || components.Root || ListItemRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
@@ -36532,7 +36517,7 @@ function getDialogTitleUtilityClass(slot) {
 }
 const dialogTitleClasses = generateUtilityClasses("MuiDialogTitle", ["root"]);
 
-const useUtilityClasses$x = (ownerState) => {
+const useUtilityClasses$y = (ownerState) => {
   const {
     classes,
     dividers
@@ -36593,7 +36578,7 @@ const DialogContent = /* @__PURE__ */ React$2.forwardRef(function DialogContent2
     ...props,
     dividers
   };
-  const classes = useUtilityClasses$x(ownerState);
+  const classes = useUtilityClasses$y(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DialogContentRoot, {
     className: clsx(classes.root, className),
     ownerState,
@@ -36647,7 +36632,7 @@ const DialogBackdrop = styled(Backdrop$1, {
   // Improve scrollable dialog support.
   zIndex: -1
 });
-const useUtilityClasses$w = (ownerState) => {
+const useUtilityClasses$x = (ownerState) => {
   const {
     classes,
     scroll,
@@ -36850,7 +36835,7 @@ const Dialog = /* @__PURE__ */ React$2.forwardRef(function Dialog2(inProps, ref)
     maxWidth,
     scroll
   };
-  const classes = useUtilityClasses$w(ownerState);
+  const classes = useUtilityClasses$x(ownerState);
   const backdropClick = React$2.useRef();
   const handleMouseDown = (event) => {
     backdropClick.current = event.target === event.currentTarget;
@@ -37490,7 +37475,7 @@ function getButtonBaseUtilityClass(slot) {
 const buttonBaseClasses = generateUtilityClasses$1("MuiButtonBase", ["root", "disabled", "focusVisible"]);
 
 const _excluded$s = ["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$v = (ownerState) => {
+const useUtilityClasses$w = (ownerState) => {
   const {
     disabled,
     focusVisible,
@@ -37738,7 +37723,7 @@ const ButtonBase = /* @__PURE__ */ React$2.forwardRef(function ButtonBase2(inPro
     tabIndex,
     focusVisible
   });
-  const classes = useUtilityClasses$v(ownerState);
+  const classes = useUtilityClasses$w(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ButtonBaseRoot, _extends$1({
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -37949,7 +37934,7 @@ function getSvgIconUtilityClass(slot) {
 generateUtilityClasses$1("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
 
 const _excluded$r = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
-const useUtilityClasses$u = (ownerState) => {
+const useUtilityClasses$v = (ownerState) => {
   const {
     color,
     fontSize,
@@ -38030,7 +38015,7 @@ const SvgIcon = /* @__PURE__ */ React$2.forwardRef(function SvgIcon2(inProps, re
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$u(ownerState);
+  const classes = useUtilityClasses$v(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SvgIconRoot, _extends$1({
     as: component,
     className: clsx(classes.root, className),
@@ -38449,7 +38434,7 @@ if (process.env.NODE_ENV !== "production") {
 }
 
 const _excluded$p = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
-const useUtilityClasses$t = (ownerState) => {
+const useUtilityClasses$u = (ownerState) => {
   const {
     color,
     disableElevation,
@@ -38686,7 +38671,7 @@ const Button$1 = /* @__PURE__ */ React$2.forwardRef(function Button2(inProps, re
     type,
     variant
   });
-  const classes = useUtilityClasses$t(ownerState);
+  const classes = useUtilityClasses$u(ownerState);
   const startIcon = startIconProp && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState,
@@ -38813,7 +38798,7 @@ function getToolbarUtilityClass(slot) {
 generateUtilityClasses$1("MuiToolbar", ["root", "gutters", "regular", "dense"]);
 
 const _excluded$o = ["className", "component", "disableGutters", "variant"];
-const useUtilityClasses$s = (ownerState) => {
+const useUtilityClasses$t = (ownerState) => {
   const {
     classes,
     disableGutters,
@@ -38869,7 +38854,7 @@ const Toolbar = /* @__PURE__ */ React$2.forwardRef(function Toolbar2(inProps, re
     disableGutters,
     variant
   });
-  const classes = useUtilityClasses$s(ownerState);
+  const classes = useUtilityClasses$t(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarRoot, _extends$1({
     as: component,
     className: clsx(classes.root, className),
@@ -39627,7 +39612,7 @@ function getBackdropUtilityClass(slot) {
 generateUtilityClasses$1("MuiBackdrop", ["root", "invisible"]);
 
 const _excluded$m = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
-const useUtilityClasses$r = (ownerState) => {
+const useUtilityClasses$s = (ownerState) => {
   const {
     classes,
     invisible
@@ -39685,7 +39670,7 @@ const Backdrop = /* @__PURE__ */ React$2.forwardRef(function Backdrop2(inProps,
     component,
     invisible
   });
-  const classes = useUtilityClasses$r(ownerState);
+  const classes = useUtilityClasses$s(ownerState);
   const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TransitionComponent, _extends$1({
     in: open,
@@ -39964,7 +39949,7 @@ function getModalUtilityClass(slot) {
 generateUtilityClasses$1("MuiModal", ["root", "hidden", "backdrop"]);
 
 const _excluded$l = ["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$q = (ownerState) => {
+const useUtilityClasses$r = (ownerState) => {
   const {
     open,
     exited,
@@ -40062,7 +40047,7 @@ const Modal = /* @__PURE__ */ React$2.forwardRef(function Modal2(inProps, ref) {
   const ownerState = _extends$1({}, propsWithDefaults, {
     exited
   });
-  const classes = useUtilityClasses$q(ownerState);
+  const classes = useUtilityClasses$r(ownerState);
   const childProps = {};
   if (children.props.tabIndex === void 0) {
     childProps.tabIndex = "-1";
@@ -40317,7 +40302,7 @@ function getPaperUtilityClass(slot) {
 generateUtilityClasses$1("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$k = ["className", "component", "elevation", "square", "variant"];
-const useUtilityClasses$p = (ownerState) => {
+const useUtilityClasses$q = (ownerState) => {
   const {
     square,
     elevation,
@@ -40377,7 +40362,7 @@ const Paper = /* @__PURE__ */ React$2.forwardRef(function Paper2(inProps, ref) {
     square,
     variant
   });
-  const classes = useUtilityClasses$p(ownerState);
+  const classes = useUtilityClasses$q(ownerState);
   if (process.env.NODE_ENV !== "production") {
     const theme = useTheme$4();
     if (theme.shadows[elevation] === void 0) {
@@ -40450,7 +40435,7 @@ function getTypographyUtilityClass(slot) {
 generateUtilityClasses$1("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$j = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
-const useUtilityClasses$o = (ownerState) => {
+const useUtilityClasses$p = (ownerState) => {
   const {
     align,
     gutterBottom,
@@ -40546,7 +40531,7 @@ const Typography = /* @__PURE__ */ React$2.forwardRef(function Typography2(inPro
     variantMapping
   });
   const Component = component || (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) || "span";
-  const classes = useUtilityClasses$o(ownerState);
+  const classes = useUtilityClasses$p(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TypographyRoot, _extends$1({
     as: Component,
     ref,
@@ -40883,7 +40868,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$n = (ownerState) => {
+const useUtilityClasses$o = (ownerState) => {
   const {
     classes,
     color,
@@ -41255,7 +41240,7 @@ const InputBase = /* @__PURE__ */ React$2.forwardRef(function InputBase2(inProps
     startAdornment,
     type
   });
-  const classes = useUtilityClasses$n(ownerState);
+  const classes = useUtilityClasses$o(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input = slots.input || components.Input || InputBaseComponent;
@@ -41542,7 +41527,7 @@ function getInputUtilityClass(slot) {
 const inputClasses = _extends$1({}, inputBaseClasses, generateUtilityClasses$1("MuiInput", ["root", "underline", "input"]));
 
 const _excluded$g = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
-const useUtilityClasses$m = (ownerState) => {
+const useUtilityClasses$n = (ownerState) => {
   const {
     classes,
     disableUnderline
@@ -41654,7 +41639,7 @@ const Input = /* @__PURE__ */ React$2.forwardRef(function Input2(inProps, ref) {
     slots = {},
     type = "text"
   } = props, other = _objectWithoutPropertiesLoose(props, _excluded$g);
-  const classes = useUtilityClasses$m(props);
+  const classes = useUtilityClasses$n(props);
   const ownerState = {
     disableUnderline
   };
@@ -41875,7 +41860,7 @@ function getFilledInputUtilityClass(slot) {
 const filledInputClasses = _extends$1({}, inputBaseClasses, generateUtilityClasses$1("MuiFilledInput", ["root", "underline", "input"]));
 
 const _excluded$f = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
-const useUtilityClasses$l = (ownerState) => {
+const useUtilityClasses$m = (ownerState) => {
   const {
     classes,
     disableUnderline
@@ -42067,7 +42052,7 @@ const FilledInput = /* @__PURE__ */ React$2.forwardRef(function FilledInput2(inP
     multiline,
     type
   });
-  const classes = useUtilityClasses$l(props);
+  const classes = useUtilityClasses$m(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -42420,7 +42405,7 @@ function getOutlinedInputUtilityClass(slot) {
 const outlinedInputClasses = _extends$1({}, inputBaseClasses, generateUtilityClasses$1("MuiOutlinedInput", ["root", "notchedOutline", "input"]));
 
 const _excluded$d = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
-const useUtilityClasses$k = (ownerState) => {
+const useUtilityClasses$l = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -42538,7 +42523,7 @@ const OutlinedInput = /* @__PURE__ */ React$2.forwardRef(function OutlinedInput2
     slots = {},
     type = "text"
   } = props, other = _objectWithoutPropertiesLoose(props, _excluded$d);
-  const classes = useUtilityClasses$k(props);
+  const classes = useUtilityClasses$l(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -42757,7 +42742,7 @@ function getFormLabelUtilityClasses(slot) {
 const formLabelClasses = generateUtilityClasses$1("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]);
 
 const _excluded$c = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
-const useUtilityClasses$j = (ownerState) => {
+const useUtilityClasses$k = (ownerState) => {
   const {
     classes,
     color,
@@ -42836,7 +42821,7 @@ const FormLabel = /* @__PURE__ */ React$2.forwardRef(function FormLabel2(inProps
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$j(ownerState);
+  const classes = useUtilityClasses$k(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FormLabelRoot, _extends$1({
     as: component,
     ownerState,
@@ -42911,7 +42896,7 @@ function getInputLabelUtilityClasses(slot) {
 generateUtilityClasses$1("MuiInputLabel", ["root", "focused", "disabled", "error", "required", "asterisk", "formControl", "sizeSmall", "shrink", "animated", "standard", "filled", "outlined"]);
 
 const _excluded$b = ["disableAnimation", "margin", "shrink", "variant", "className"];
-const useUtilityClasses$i = (ownerState) => {
+const useUtilityClasses$j = (ownerState) => {
   const {
     classes,
     formControl,
@@ -43031,7 +43016,7 @@ const InputLabel = /* @__PURE__ */ React$2.forwardRef(function InputLabel2(inPro
     required: fcs.required,
     focused: fcs.focused
   });
-  const classes = useUtilityClasses$i(ownerState);
+  const classes = useUtilityClasses$j(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabelRoot, _extends$1({
     "data-shrink": shrink,
     ownerState,
@@ -43115,7 +43100,7 @@ function getFormControlUtilityClasses(slot) {
 generateUtilityClasses$1("MuiFormControl", ["root", "marginNone", "marginNormal", "marginDense", "fullWidth", "disabled"]);
 
 const _excluded$a = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
-const useUtilityClasses$h = (ownerState) => {
+const useUtilityClasses$i = (ownerState) => {
   const {
     classes,
     margin,
@@ -43187,7 +43172,7 @@ const FormControl = /* @__PURE__ */ React$2.forwardRef(function FormControl2(inP
     size,
     variant
   });
-  const classes = useUtilityClasses$h(ownerState);
+  const classes = useUtilityClasses$i(ownerState);
   const [adornedStart, setAdornedStart] = React$2.useState(() => {
     let initialAdornedStart = false;
     if (children) {
@@ -43364,7 +43349,7 @@ const formHelperTextClasses = generateUtilityClasses$1("MuiFormHelperText", ["ro
 
 var _span$1;
 const _excluded$9 = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
-const useUtilityClasses$g = (ownerState) => {
+const useUtilityClasses$h = (ownerState) => {
   const {
     classes,
     contained,
@@ -43439,7 +43424,7 @@ const FormHelperText = /* @__PURE__ */ React$2.forwardRef(function FormHelperTex
     focused: fcs.focused,
     required: fcs.required
   });
-  const classes = useUtilityClasses$g(ownerState);
+  const classes = useUtilityClasses$h(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormHelperTextRoot, _extends$1({
     as: component,
     ownerState,
@@ -43525,7 +43510,7 @@ function getListUtilityClass(slot) {
 generateUtilityClasses$1("MuiList", ["root", "padding", "dense", "subheader"]);
 
 const _excluded$8 = ["children", "className", "component", "dense", "disablePadding", "subheader"];
-const useUtilityClasses$f = (ownerState) => {
+const useUtilityClasses$g = (ownerState) => {
   const {
     classes,
     disablePadding,
@@ -43580,7 +43565,7 @@ const List = /* @__PURE__ */ React$2.forwardRef(function List2(inProps, ref) {
     dense,
     disablePadding
   });
-  const classes = useUtilityClasses$f(ownerState);
+  const classes = useUtilityClasses$g(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListContext.Provider, {
     value: context,
     children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ListRoot, _extends$1({
@@ -44134,7 +44119,7 @@ function getTransformOriginValue(transformOrigin) {
 function resolveAnchorEl(anchorEl) {
   return typeof anchorEl === "function" ? anchorEl() : anchorEl;
 }
-const useUtilityClasses$e = (ownerState) => {
+const useUtilityClasses$f = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -44215,7 +44200,7 @@ const Popover = /* @__PURE__ */ React$2.forwardRef(function Popover2(inProps, re
     transitionDuration: transitionDurationProp,
     TransitionProps
   });
-  const classes = useUtilityClasses$e(ownerState);
+  const classes = useUtilityClasses$f(ownerState);
   const getAnchorOffset = React$2.useCallback(() => {
     if (anchorReference === "anchorPosition") {
       if (process.env.NODE_ENV !== "production") {
@@ -44599,7 +44584,7 @@ const LTR_ORIGIN = {
   vertical: "top",
   horizontal: "left"
 };
-const useUtilityClasses$d = (ownerState) => {
+const useUtilityClasses$e = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -44671,7 +44656,7 @@ const Menu = /* @__PURE__ */ React$2.forwardRef(function Menu2(inProps, ref) {
     TransitionProps,
     variant
   });
-  const classes = useUtilityClasses$d(ownerState);
+  const classes = useUtilityClasses$e(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React$2.useRef(null);
   const handleEntering = (element, isAppearing) => {
@@ -44873,7 +44858,7 @@ function getNativeSelectUtilityClasses(slot) {
 const nativeSelectClasses = generateUtilityClasses$1("MuiNativeSelect", ["root", "select", "multiple", "filled", "outlined", "standard", "disabled", "icon", "iconOpen", "iconFilled", "iconOutlined", "iconStandard", "nativeInput", "error"]);
 
 const _excluded$3 = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
-const useUtilityClasses$c = (ownerState) => {
+const useUtilityClasses$d = (ownerState) => {
   const {
     classes,
     variant,
@@ -45003,7 +44988,7 @@ const NativeSelectInput = /* @__PURE__ */ React$2.forwardRef(function NativeSele
     variant,
     error
   });
-  const classes = useUtilityClasses$c(ownerState);
+  const classes = useUtilityClasses$d(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(React$2.Fragment, {
     children: [/* @__PURE__ */ jsxRuntimeExports.jsx(NativeSelectSelect, _extends$1({
       ownerState,
@@ -45148,7 +45133,7 @@ function areEqualValues(a, b) {
 function isEmpty$1(display) {
   return display == null || typeof display === "string" && !display.trim();
 }
-const useUtilityClasses$b = (ownerState) => {
+const useUtilityClasses$c = (ownerState) => {
   const {
     classes,
     variant,
@@ -45463,7 +45448,7 @@ const SelectInput = /* @__PURE__ */ React$2.forwardRef(function SelectInput2(pro
     open,
     error
   });
-  const classes = useUtilityClasses$b(ownerState);
+  const classes = useUtilityClasses$c(ownerState);
   const paperProps = _extends$1({}, MenuProps.PaperProps, (_MenuProps$slotProps = MenuProps.slotProps) == null ? void 0 : _MenuProps$slotProps.paper);
   const listboxId = useId$1();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(React$2.Fragment, {
@@ -45691,7 +45676,7 @@ const ArrowDropDownIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("p
 }), "ArrowDropDown");
 
 const _excluded$1 = ["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$a = (ownerState) => {
+const useUtilityClasses$b = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -45746,7 +45731,7 @@ const Select$1 = /* @__PURE__ */ React$2.forwardRef(function Select2(inProps, re
     variant,
     classes: classesProp
   });
-  const classes = useUtilityClasses$a(ownerState);
+  const classes = useUtilityClasses$b(ownerState);
   const restOfClasses = _objectWithoutPropertiesLoose(classes, _excluded2);
   const InputComponent = input || {
     standard: /* @__PURE__ */ jsxRuntimeExports.jsx(StyledInput, {
@@ -45962,7 +45947,7 @@ const variantComponent = {
   filled: FilledInput,
   outlined: OutlinedInput
 };
-const useUtilityClasses$9 = (ownerState) => {
+const useUtilityClasses$a = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -46026,7 +46011,7 @@ const TextField = /* @__PURE__ */ React$2.forwardRef(function TextField2(inProps
     select,
     variant
   });
-  const classes = useUtilityClasses$9(ownerState);
+  const classes = useUtilityClasses$a(ownerState);
   if (process.env.NODE_ENV !== "production") {
     if (select && !children) {
       console.error("MUI: `children` must be passed when using the `TextField` component with `select`.");
@@ -47922,7 +47907,7 @@ function getCollapseUtilityClass(slot) {
 }
 generateUtilityClasses("MuiCollapse", ["root", "horizontal", "vertical", "entered", "hidden", "wrapper", "wrapperInner"]);
 
-const useUtilityClasses$8 = (ownerState) => {
+const useUtilityClasses$9 = (ownerState) => {
   const {
     orientation,
     classes
@@ -48050,7 +48035,7 @@ const Collapse = /* @__PURE__ */ React$2.forwardRef(function Collapse2(inProps,
     orientation,
     collapsedSize: collapsedSizeProp
   };
-  const classes = useUtilityClasses$8(ownerState);
+  const classes = useUtilityClasses$9(ownerState);
   const theme = useTheme();
   const timer = useTimeout();
   const wrapperRef = React$2.useRef(null);
@@ -48312,7 +48297,7 @@ function getAccordionUtilityClass(slot) {
 }
 const accordionClasses = generateUtilityClasses("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled", "gutters", "region"]);
 
-const useUtilityClasses$7 = (ownerState) => {
+const useUtilityClasses$8 = (ownerState) => {
   const {
     classes,
     square,
@@ -48468,7 +48453,7 @@ const Accordion = /* @__PURE__ */ React$2.forwardRef(function Accordion2(inProps
     disableGutters,
     expanded
   };
-  const classes = useUtilityClasses$7(ownerState);
+  const classes = useUtilityClasses$8(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     ...slots
@@ -48613,7 +48598,7 @@ function getAccordionDetailsUtilityClass(slot) {
 }
 generateUtilityClasses("MuiAccordionDetails", ["root"]);
 
-const useUtilityClasses$6 = (ownerState) => {
+const useUtilityClasses$7 = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -48641,7 +48626,7 @@ const AccordionDetails = /* @__PURE__ */ React$2.forwardRef(function AccordionDe
     ...other
   } = props;
   const ownerState = props;
-  const classes = useUtilityClasses$6(ownerState);
+  const classes = useUtilityClasses$7(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionDetailsRoot, {
     className: clsx(classes.root, className),
     ref,
@@ -48677,7 +48662,7 @@ function getAccordionSummaryUtilityClass(slot) {
 }
 const accordionSummaryClasses = generateUtilityClasses("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disabled", "gutters", "contentGutters", "content", "expandIconWrapper"]);
 
-const useUtilityClasses$5 = (ownerState) => {
+const useUtilityClasses$6 = (ownerState) => {
   const {
     classes,
     expanded,
@@ -48798,7 +48783,7 @@ const AccordionSummary = /* @__PURE__ */ React$2.forwardRef(function AccordionSu
     disabled,
     disableGutters
   };
-  const classes = useUtilityClasses$5(ownerState);
+  const classes = useUtilityClasses$6(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionSummaryRoot, {
     focusRipple: false,
     disableRipple: true,
@@ -48862,6 +48847,476 @@ process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes = {
   sx: PropTypes$1.oneOfType([PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.object, PropTypes$1.bool])), PropTypes$1.func, PropTypes$1.object])
 } : void 0;
 
+function useBadge(parameters) {
+  const {
+    badgeContent: badgeContentProp,
+    invisible: invisibleProp = false,
+    max: maxProp = 99,
+    showZero = false
+  } = parameters;
+  const prevProps = usePreviousProps({
+    badgeContent: badgeContentProp,
+    max: maxProp
+  });
+  let invisible = invisibleProp;
+  if (invisibleProp === false && badgeContentProp === 0 && !showZero) {
+    invisible = true;
+  }
+  const {
+    badgeContent,
+    max = maxProp
+  } = invisible ? prevProps : parameters;
+  const displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
+  return {
+    badgeContent,
+    invisible,
+    max,
+    displayValue
+  };
+}
+
+function getBadgeUtilityClass(slot) {
+  return generateUtilityClass("MuiBadge", slot);
+}
+const badgeClasses = generateUtilityClasses("MuiBadge", [
+  "root",
+  "badge",
+  "dot",
+  "standard",
+  "anchorOriginTopRight",
+  "anchorOriginBottomRight",
+  "anchorOriginTopLeft",
+  "anchorOriginBottomLeft",
+  "invisible",
+  "colorError",
+  "colorInfo",
+  "colorPrimary",
+  "colorSecondary",
+  "colorSuccess",
+  "colorWarning",
+  "overlapRectangular",
+  "overlapCircular",
+  // TODO: v6 remove the overlap value from these class keys
+  "anchorOriginTopLeftCircular",
+  "anchorOriginTopLeftRectangular",
+  "anchorOriginTopRightCircular",
+  "anchorOriginTopRightRectangular",
+  "anchorOriginBottomLeftCircular",
+  "anchorOriginBottomLeftRectangular",
+  "anchorOriginBottomRightCircular",
+  "anchorOriginBottomRightRectangular"
+]);
+
+const RADIUS_STANDARD = 10;
+const RADIUS_DOT = 4;
+const useUtilityClasses$5 = (ownerState) => {
+  const {
+    color,
+    anchorOrigin,
+    invisible,
+    overlap,
+    variant,
+    classes = {}
+  } = ownerState;
+  const slots = {
+    root: ["root"],
+    badge: ["badge", variant, invisible && "invisible", `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`, `overlap${capitalize(overlap)}`, color !== "default" && `color${capitalize(color)}`]
+  };
+  return composeClasses(slots, getBadgeUtilityClass, classes);
+};
+const BadgeRoot = styled("span", {
+  name: "MuiBadge",
+  slot: "Root",
+  overridesResolver: (props, styles) => styles.root
+})({
+  position: "relative",
+  display: "inline-flex",
+  // For correct alignment with the text.
+  verticalAlign: "middle",
+  flexShrink: 0
+});
+const BadgeBadge = styled("span", {
+  name: "MuiBadge",
+  slot: "Badge",
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.badge, styles[ownerState.variant], styles[`anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize(ownerState.anchorOrigin.horizontal)}${capitalize(ownerState.overlap)}`], ownerState.color !== "default" && styles[`color${capitalize(ownerState.color)}`], ownerState.invisible && styles.invisible];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "wrap",
+  justifyContent: "center",
+  alignContent: "center",
+  alignItems: "center",
+  position: "absolute",
+  boxSizing: "border-box",
+  fontFamily: theme.typography.fontFamily,
+  fontWeight: theme.typography.fontWeightMedium,
+  fontSize: theme.typography.pxToRem(12),
+  minWidth: RADIUS_STANDARD * 2,
+  lineHeight: 1,
+  padding: "0 6px",
+  height: RADIUS_STANDARD * 2,
+  borderRadius: RADIUS_STANDARD,
+  zIndex: 1,
+  // Render the badge on top of potential ripples.
+  transition: theme.transitions.create("transform", {
+    easing: theme.transitions.easing.easeInOut,
+    duration: theme.transitions.duration.enteringScreen
+  }),
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(["contrastText"])).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette[color].main,
+      color: (theme.vars || theme).palette[color].contrastText
+    }
+  })), {
+    props: {
+      variant: "dot"
+    },
+    style: {
+      borderRadius: RADIUS_DOT,
+      height: RADIUS_DOT * 2,
+      minWidth: RADIUS_DOT * 2,
+      padding: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "rectangular",
+    style: {
+      top: 0,
+      right: 0,
+      transform: "scale(1) translate(50%, -50%)",
+      transformOrigin: "100% 0%",
+      [`&.${badgeClasses.invisible}`]: {
+        transform: "scale(0) translate(50%, -50%)"
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "rectangular",
+    style: {
+      bottom: 0,
+      right: 0,
+      transform: "scale(1) translate(50%, 50%)",
+      transformOrigin: "100% 100%",
+      [`&.${badgeClasses.invisible}`]: {
+        transform: "scale(0) translate(50%, 50%)"
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "rectangular",
+    style: {
+      top: 0,
+      left: 0,
+      transform: "scale(1) translate(-50%, -50%)",
+      transformOrigin: "0% 0%",
+      [`&.${badgeClasses.invisible}`]: {
+        transform: "scale(0) translate(-50%, -50%)"
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "rectangular",
+    style: {
+      bottom: 0,
+      left: 0,
+      transform: "scale(1) translate(-50%, 50%)",
+      transformOrigin: "0% 100%",
+      [`&.${badgeClasses.invisible}`]: {
+        transform: "scale(0) translate(-50%, 50%)"
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "circular",
+    style: {
+      top: "14%",
+      right: "14%",
+      transform: "scale(1) translate(50%, -50%)",
+      transformOrigin: "100% 0%",
+      [`&.${badgeClasses.invisible}`]: {
+        transform: "scale(0) translate(50%, -50%)"
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "circular",
+    style: {
+      bottom: "14%",
+      right: "14%",
+      transform: "scale(1) translate(50%, 50%)",
+      transformOrigin: "100% 100%",
+      [`&.${badgeClasses.invisible}`]: {
+        transform: "scale(0) translate(50%, 50%)"
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "circular",
+    style: {
+      top: "14%",
+      left: "14%",
+      transform: "scale(1) translate(-50%, -50%)",
+      transformOrigin: "0% 0%",
+      [`&.${badgeClasses.invisible}`]: {
+        transform: "scale(0) translate(-50%, -50%)"
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "circular",
+    style: {
+      bottom: "14%",
+      left: "14%",
+      transform: "scale(1) translate(-50%, 50%)",
+      transformOrigin: "0% 100%",
+      [`&.${badgeClasses.invisible}`]: {
+        transform: "scale(0) translate(-50%, 50%)"
+      }
+    }
+  }, {
+    props: {
+      invisible: true
+    },
+    style: {
+      transition: theme.transitions.create("transform", {
+        easing: theme.transitions.easing.easeInOut,
+        duration: theme.transitions.duration.leavingScreen
+      })
+    }
+  }]
+})));
+function getAnchorOrigin(anchorOrigin) {
+  return {
+    vertical: anchorOrigin?.vertical ?? "top",
+    horizontal: anchorOrigin?.horizontal ?? "right"
+  };
+}
+const Badge = /* @__PURE__ */ React$2.forwardRef(function Badge2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiBadge"
+  });
+  const {
+    anchorOrigin: anchorOriginProp,
+    className,
+    classes: classesProp,
+    component,
+    components = {},
+    componentsProps = {},
+    children,
+    overlap: overlapProp = "rectangular",
+    color: colorProp = "default",
+    invisible: invisibleProp = false,
+    max: maxProp = 99,
+    badgeContent: badgeContentProp,
+    slots,
+    slotProps,
+    showZero = false,
+    variant: variantProp = "standard",
+    ...other
+  } = props;
+  const {
+    badgeContent,
+    invisible: invisibleFromHook,
+    max,
+    displayValue: displayValueFromHook
+  } = useBadge({
+    max: maxProp,
+    invisible: invisibleProp,
+    badgeContent: badgeContentProp,
+    showZero
+  });
+  const prevProps = usePreviousProps({
+    anchorOrigin: getAnchorOrigin(anchorOriginProp),
+    color: colorProp,
+    overlap: overlapProp,
+    variant: variantProp,
+    badgeContent: badgeContentProp
+  });
+  const invisible = invisibleFromHook || badgeContent == null && variantProp !== "dot";
+  const {
+    color = colorProp,
+    overlap = overlapProp,
+    anchorOrigin: anchorOriginPropProp,
+    variant = variantProp
+  } = invisible ? prevProps : props;
+  const anchorOrigin = getAnchorOrigin(anchorOriginPropProp);
+  const displayValue = variant !== "dot" ? displayValueFromHook : void 0;
+  const ownerState = {
+    ...props,
+    badgeContent,
+    invisible,
+    max,
+    displayValue,
+    showZero,
+    anchorOrigin,
+    color,
+    overlap,
+    variant
+  };
+  const classes = useUtilityClasses$5(ownerState);
+  const RootSlot = slots?.root ?? components.Root ?? BadgeRoot;
+  const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge;
+  const rootSlotProps = slotProps?.root ?? componentsProps.root;
+  const badgeSlotProps = slotProps?.badge ?? componentsProps.badge;
+  const rootProps = useSlotProps({
+    elementType: RootSlot,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    additionalProps: {
+      ref,
+      as: component
+    },
+    ownerState,
+    className: clsx(rootSlotProps?.className, classes.root, className)
+  });
+  const badgeProps = useSlotProps({
+    elementType: BadgeSlot,
+    externalSlotProps: badgeSlotProps,
+    ownerState,
+    className: clsx(classes.badge, badgeSlotProps?.className)
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(RootSlot, {
+    ...rootProps,
+    children: [children, /* @__PURE__ */ jsxRuntimeExports.jsx(BadgeSlot, {
+      ...badgeProps,
+      children: displayValue
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" ? Badge.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The anchor of the badge.
+   * @default {
+   *   vertical: 'top',
+   *   horizontal: 'right',
+   * }
+   */
+  anchorOrigin: PropTypes$1.shape({
+    horizontal: PropTypes$1.oneOf(["left", "right"]),
+    vertical: PropTypes$1.oneOf(["bottom", "top"])
+  }),
+  /**
+   * The content rendered within the badge.
+   */
+  badgeContent: PropTypes$1.node,
+  /**
+   * The badge will be added relative to this node.
+   */
+  children: PropTypes$1.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes$1.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes$1.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'default'
+   */
+  color: PropTypes$1.oneOfType([PropTypes$1.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), 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,
+  /**
+   * The components used for each slot inside.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  components: PropTypes$1.shape({
+    Badge: PropTypes$1.elementType,
+    Root: PropTypes$1.elementType
+  }),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  componentsProps: PropTypes$1.shape({
+    badge: PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.object]),
+    root: PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.object])
+  }),
+  /**
+   * If `true`, the badge is invisible.
+   * @default false
+   */
+  invisible: PropTypes$1.bool,
+  /**
+   * Max count to show.
+   * @default 99
+   */
+  max: PropTypes$1.number,
+  /**
+   * Wrapped shape the badge should overlap.
+   * @default 'rectangular'
+   */
+  overlap: PropTypes$1.oneOf(["circular", "rectangular"]),
+  /**
+   * Controls whether the badge is hidden when `badgeContent` is zero.
+   * @default false
+   */
+  showZero: PropTypes$1.bool,
+  /**
+   * The props used for each slot inside the Badge.
+   * @default {}
+   */
+  slotProps: PropTypes$1.shape({
+    badge: PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.object]),
+    root: PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.object])
+  }),
+  /**
+   * The components used for each slot inside the Badge.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes$1.shape({
+    badge: PropTypes$1.elementType,
+    root: 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]),
+  /**
+   * The variant to use.
+   * @default 'standard'
+   */
+  variant: PropTypes$1.oneOfType([PropTypes$1.oneOf(["dot", "standard"]), PropTypes$1.string])
+} : void 0;
+
 const boxClasses = generateUtilityClasses("MuiBox", ["root"]);
 
 const defaultTheme = createTheme();
@@ -71221,22 +71676,13 @@ const Connecting = (props) => {
           take(1),
           mergeMap((polledMember) => {
             const loadLatestJob$ = defer(() => api.loadJob(member.most_recent_job_guid)).pipe(
-              map((job) => ({ member: polledMember, job, hasInvalidData: false }))
+              map((job) => ({ member: polledMember, job }))
             );
-            if (connectConfig.mode === VERIFY_MODE) {
-              const invalidData$ = of({ member: {}, job: {}, hasInvalidData: true });
-              if (hasNoVerifiableAccounts(polledMember, connectConfig) || hasNoSingleAccountSelectOptions(polledMember)) {
-                return invalidData$;
-              }
-            }
             return loadLatestJob$;
           })
         )
       )
-    ).subscribe(({ member, job, hasInvalidData }) => {
-      if (hasInvalidData) {
-        return dispatch({ type: ActionTypes$2.HAS_INVALID_DATA });
-      }
+    ).subscribe(({ member, job }) => {
       if (onUpsertMember) {
         onUpsertMember(member);
       }
@@ -71589,133 +72035,6 @@ ImpededMemberError.propTypes = {
   title: PropTypes$1.string.isRequired
 };
 
-const NoEligibleAccounts = () => {
-  const sendPosthogEvent = useAnalyticsEvent();
-  const tokens = useTokens();
-  const styles = getStyles$A(tokens);
-  const postMessageFunctions = useContext(PostMessageContext);
-  const dispatch = useDispatch();
-  const currentMember = useSelector(getCurrentMember);
-  const selectedInstitution = useSelector(getSelectedInstitution);
-  const postHogEventMetadata = {
-    authentication_method: currentMember.is_oauth ? AuthenticationMethods.OAUTH : AuthenticationMethods.NON_OAUTH,
-    institution_guid: selectedInstitution.guid,
-    institution_name: selectedInstitution.name
-  };
-  const getNextDelay = getDelay();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.headerContianer, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        x,
-        {
-          component: "h2",
-          "data-test": "no-eligible-accounts-header",
-          style: styles.headerText,
-          truncate: false,
-          variant: "H2",
-          children: __("Accounts not eligible for transfers")
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        AttentionFilled,
-        {
-          color: tokens.Color.Error300,
-          height: tokens.Spacing.Large,
-          styles: styles.icon,
-          width: tokens.Spacing.Large
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      x,
-      {
-        component: "p",
-        "data-test": "no-eligible-accounts-paragraph",
-        style: styles.paragraphOne,
-        truncate: false,
-        variant: "Paragraph",
-        children: __(
-          "We've connected to your financial institution, but couldn't find eligible checking or savings accounts for money movement; however, other account information may still have been shared."
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      x,
-      {
-        component: "p",
-        "data-test": "no-eligible-accounts-paragraph-two",
-        style: styles.paragraphTwo,
-        truncate: false,
-        variant: "Paragraph",
-        children: __("Please try linking a checking or savings account.")
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Button$2,
-      {
-        "aria-label": __("Try again"),
-        "data-test": "try-again-button",
-        onClick: () => {
-          sendPosthogEvent(AnalyticEvents.NO_ELIGIBLE_ACCOUNTS_RETRY, postHogEventMetadata);
-          postMessageFunctions.onPostMessage("connect/invalidData/primaryAction", {
-            memberGuid: currentMember.guid
-          });
-          postMessageFunctions.onPostMessage(POST_MESSAGES.BACK_TO_SEARCH);
-          dispatch({ type: ActionTypes$2.RESET_WIDGET_NO_ELIGIBLE_ACCOUNTS });
-        },
-        style: styles.tryAgainButton,
-        children: __("Try again")
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      AriaLive,
-      {
-        level: "assertive",
-        message: "We've connected to your financial institution, but couldn't find eligible checking or savings accounts for money movement; however, other account information may still have been shared. Please try linking a checking or savings account.",
-        timeout: 100
-      }
-    )
-  ] });
-};
-const getStyles$A = (tokens) => {
-  return {
-    headerText: {
-      fontWeight: tokens.FontWeight.Bold
-    },
-    headerContianer: {
-      display: "flex",
-      alignItems: "center"
-    },
-    icon: {
-      marginLeft: tokens.Spacing.Small
-    },
-    paragraphOne: {
-      fontWeight: tokens.FontWeight.Regular,
-      fontSize: tokens.FontSize.Small,
-      marginTop: tokens.Spacing.XSmall
-    },
-    paragraphTwo: {
-      fontWeight: tokens.FontWeight.Regular,
-      fontSize: tokens.FontSize.Small,
-      marginTop: tokens.Spacing.Medium
-    },
-    tryAgainButton: {
-      background: tokens.BackgroundColor.ButtonPrimary,
-      color: tokens.Color.NeutralWhite,
-      marginTop: tokens.Spacing.XLarge,
-      borderRadius: tokens.BorderRadius.Medium,
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      padding: "12px 16px",
-      gap: "10px",
-      height: "44px",
-      width: "100%"
-    }
-  };
-};
-NoEligibleAccounts.propTypes = {};
-
 const LoginError = React__default.forwardRef(
   ({
     isDeleteInstitutionOptionEnabled,
@@ -71731,9 +72050,8 @@ const LoginError = React__default.forwardRef(
     const supportNavRef = useRef(null);
     const postMessageFunctions = useContext(PostMessageContext);
     const dispatch = useDispatch();
-    const hasInvalidData = useSelector((state) => state.connect.hasInvalidData || false);
     const connectConfig = useSelector(selectConnectConfig);
-    const pageViewInfo = hasInvalidData ? PageviewInfo.CONNECT_NO_ELIGIBLE_ACCOUNTS : PageviewInfo.CONNECT_LOGIN_ERROR;
+    const pageViewInfo = PageviewInfo.CONNECT_LOGIN_ERROR;
     useAnalyticsPath(...pageViewInfo);
     const [isLeaving, setIsLeaving] = useState(false);
     const [showSupportView, setShowSupportView] = useState(false);
@@ -71754,21 +72072,12 @@ const LoginError = React__default.forwardRef(
       };
     }, [showSupportView]);
     useEffect(() => {
-      if (hasInvalidData) {
-        postMessageFunctions.onPostMessage("connect/invalidData", {
-          member: {
-            guid: member.guid,
-            code: member.most_recent_job_detail_code
-          }
-        });
-      } else {
-        postMessageFunctions.onPostMessage("connect/memberError", {
-          member: {
-            guid: member.guid,
-            connection_status: member.connection_status
-          }
-        });
-      }
+      postMessageFunctions.onPostMessage("connect/memberError", {
+        member: {
+          guid: member.guid,
+          connection_status: member.connection_status
+        }
+      });
     }, [member]);
     const loginErrorStartOver = () => dispatch({ type: ActionTypes$2.LOGIN_ERROR_START_OVER, payload: { mode: connectConfig.mode } });
     const handleOkPrimaryActionClick = () => {
@@ -71919,17 +72228,7 @@ const LoginError = React__default.forwardRef(
       primary: [],
       secondary: [GET_HELP, DISCONNECT_INSTITUTION]
     };
-    let statusActions;
-    if (hasInvalidData) {
-      statusActions = {
-        renderBody: /* @__PURE__ */ jsxRuntimeExports.jsx(NoEligibleAccounts, {}),
-        primary: [],
-        secondary: [],
-        title: ""
-      };
-    } else {
-      statusActions = memberStatusActionsMap[member.connection_status] || defaultMemberStatusAction;
-    }
+    const statusActions = memberStatusActionsMap[member.connection_status] || defaultMemberStatusAction;
     if (showSupportView) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         Support,
@@ -71987,6 +72286,138 @@ LoginError.propTypes = {
 };
 LoginError.displayName = "LoginError";
 
+const ACTIONABLE_ERROR_CODES = {
+  NO_ELIGIBLE_ACCOUNTS: 1e3
+};
+
+const ActionableError = () => {
+  const postMessageFunctions = useContext(PostMessageContext);
+  const institution = useSelector((state) => state.connect.selectedInstitution);
+  const currentMember = useSelector(getCurrentMember);
+  const jobDetailCode = currentMember.most_recent_job_detail_code;
+  const tokens = useTokens();
+  const styles = getStyles$A(tokens);
+  const getNextDelay = getDelay();
+  const dispatch = useDispatch();
+  const messagingMap = useMemo(
+    () => ({
+      [ACTIONABLE_ERROR_CODES.NO_ELIGIBLE_ACCOUNTS]: {
+        title: __("No eligible accounts"),
+        userMessage: (institution2) => __(
+          "Only checking or savings accounts can be used for transfers. If you have one at %1, make sure to select it when connecting. Otherwise, try connecting a different institution.",
+          institution2.name
+        ),
+        primaryAction: {
+          label: __("Log in again"),
+          action: () => dispatch({ type: ActionTypes$2.ACTIONABLE_ERROR_LOG_IN_AGAIN })
+        },
+        secondaryActions: {
+          label: __("Connect a different institution"),
+          action: () => {
+            postMessageFunctions.onPostMessage("connect/backToSearch");
+            dispatch({ type: ActionTypes$2.ACTIONABLE_ERROR_CONNECT_DIFFERENT_INSTITUTION });
+          }
+        }
+      }
+    }),
+    [dispatch]
+  );
+  useEffect(() => {
+    postMessageFunctions.onPostMessage("connect/invalidData", {
+      member: {
+        guid: currentMember.guid,
+        code: jobDetailCode
+      }
+    });
+  }, [jobDetailCode]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { badgeContent: "!", color: "error", sx: styles.badge, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      De,
+      {
+        alt: `${institution.name} logo`,
+        institutionGuid: institution.guid,
+        size: 64
+      }
+    ) }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { delay: getNextDelay(), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        x,
+        {
+          component: "h2",
+          "data-test": "actionable-error-header",
+          style: styles.title,
+          truncate: false,
+          variant: "H2",
+          children: messagingMap[jobDetailCode].title
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        x,
+        {
+          component: "p",
+          "data-test": "actionable-error-paragraph",
+          style: styles.paragraph,
+          truncate: false,
+          variant: "Paragraph",
+          children: messagingMap[jobDetailCode].userMessage(institution)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { delay: getNextDelay(), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button$2,
+        {
+          "data-test": "actionable-error-primary-button",
+          fullWidth: true,
+          onClick: messagingMap[jobDetailCode].primaryAction.action,
+          style: { marginBottom: 8 },
+          variant: "contained",
+          children: messagingMap[jobDetailCode].primaryAction.label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button$2,
+        {
+          "data-test": "actionable-error-secondary-button",
+          fullWidth: true,
+          onClick: messagingMap[jobDetailCode].secondaryActions.action,
+          style: { marginBottom: 8 },
+          variant: "text",
+          children: messagingMap[jobDetailCode].secondaryActions.label
+        }
+      )
+    ] })
+  ] });
+};
+const getStyles$A = (tokens) => ({
+  logoWrapper: {
+    display: "flex",
+    justifyContent: "center",
+    marginBottom: tokens.Spacing.XLarge,
+    marginTop: 20,
+    width: "100%"
+  },
+  badge: {
+    "& .MuiBadge-badge": {
+      fontWeight: "bold",
+      borderRadius: "100%",
+      border: `2px solid ${tokens.BackgroundColor.Container}`,
+      fontSize: tokens.FontSize.H3,
+      margin: tokens.Spacing.Tiny,
+      height: tokens.Spacing.Large + tokens.Spacing.Tiny,
+      width: tokens.Spacing.Large + tokens.Spacing.Tiny
+    }
+  },
+  title: {
+    marginBottom: tokens.Spacing.Tiny,
+    textAlign: "center"
+  },
+  paragraph: {
+    marginBottom: tokens.Spacing.XLarge,
+    textAlign: "center"
+  }
+});
+
 var reactConfetti_min = {exports: {}};
 
 (function (module, exports) {
@@ -76876,8 +77307,10 @@ const RenderConnectStep = (props) => {
         ref: props.navigationRef
       }
     );
-  } else if (step === STEPS.LOGIN_ERROR) {
-    connectStepView = /* @__PURE__ */ jsxRuntimeExports.jsx(
+  } else if (step === STEPS.ACTIONABLE_ERROR) {
+    connectStepView = [ACTIONABLE_ERROR_CODES.NO_ELIGIBLE_ACCOUNTS].includes(
+      currentMember?.most_recent_job_detail_code ?? -1
+    ) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ActionableError, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(
       LoginError,
       {
         institution: selectedInstitution,
@@ -79609,7 +80042,6 @@ const frCa = {
 	"Transaction amounts": "Montants des transactions",
 	"Transaction dates": "Dates des transactions",
 	"Transaction descriptions": "Descriptions des transactions",
-	"Disconnect institution": "Déconnecter l'institution",
 	"This includes:": "Cela comprend:",
 	"Who is MX Technologies?": "Qui est MX Technologies?",
 	"MX is a trusted financial data platform that securely connects your accounts. It follows strict security and privacy standards to keep your information safe.": "MX est une plateforme de données financières fiable qui connecte vos comptes en toute sécurité. Elle respecte des normes strictes de sécurité et de confidentialité pour garantir la sécurité de vos informations.",
@@ -79655,6 +80087,10 @@ const frCa = {
 	"This mode isn’t available in your current plan. Please contact your representative to explore options.": "Ce mode n'est pas disponible avec votre forfait actuel. Veuillez contacter votre représentant pour explorer les options.",
 	"Feature not available": "Fonctionnalité non disponible",
 	"%1 does not offer this feature. Please contact your representative to explore options.": "%1 n'offre pas cette fonctionnalité. Veuillez contacter votre représentant pour explorer les options.",
+	"Log in again": "Connectez-vous à nouveau",
+	"Connect a different institution": "Mettre en relation un autre établissement",
+	"No eligible accounts": "Aucun compte admissible",
+	"Only checking or savings accounts can be used for transfers. If you have one at %1, make sure to select it when connecting. Otherwise, try connecting a different institution.": "Seuls les comptes chèques ou d’épargne peuvent être utilisés pour les transferts. Si vous en avez un à %1, assurez-vous de le sélectionner lors de la connexion. Sinon, essayez de connecter une autre institution.",
 	"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.",
@@ -80090,7 +80526,6 @@ const es = {
 	"Transaction amounts": "Montos de la transacción",
 	"Transaction dates": "Fechas de transacción",
 	"Transaction descriptions": "Descripciones de transacciones",
-	"Disconnect institution": "Desconectar institución",
 	"This includes:": "Esto incluye:",
 	"Who is MX Technologies?": "¿Quién es MX Technologies?",
 	"MX is a trusted financial data platform that securely connects your accounts. It follows strict security and privacy standards to keep your information safe.": "MX es una plataforma confiable de datos financieros que conecta tus cuentas de forma segura. Cumple con estrictos estándares de seguridad y privacidad para mantener tu información segura.",
@@ -80136,6 +80571,10 @@ const es = {
 	"This mode isn’t available in your current plan. Please contact your representative to explore options.": "Este modo no está disponible en tu plan actual. Contacte a su representante para explorar las opciones.",
 	"Feature not available": "Característica no disponible",
 	"%1 does not offer this feature. Please contact your representative to explore options.": "%1 no ofrece esta función. Contacte a su representante para explorar las opciones.",
+	"Log in again": "Inicie sesión nuevamente",
+	"Connect a different institution": "Conecte una institución diferente",
+	"No eligible accounts": "No hay cuentas elegibles",
+	"Only checking or savings accounts can be used for transfers. If you have one at %1, make sure to select it when connecting. Otherwise, try connecting a different institution.": "Solo se pueden usar cuentas de control o ahorro para transferencias. Si tiene uno en %1, asegúrese de seleccionarlo al conectarlo. De lo contrario, intente conectar una institución diferente.",
 	"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.",
@@ -80232,49 +80671,34 @@ const scrubLocale = (locale) => {
   return lowerLocale === "en-us" ? "en" : lowerLocale;
 };
 
-const getNewClientColors = (state) => ({
-  Brand100: state.profiles.clientColorScheme.primary_100,
-  Brand200: state.profiles.clientColorScheme.primary_200,
-  Brand300: state.profiles.clientColorScheme.primary_300,
-  Brand400: state.profiles.clientColorScheme.primary_400,
-  Brand500: state.profiles.clientColorScheme.primary_500
-});
-const getOldClientColors = (state) => {
-  const widgetBrandColor = _get(state, "profiles.clientColorScheme.widget_brand_color");
-  if (!widgetBrandColor) {
-    return {};
+const getTheme = (state) => state.config.color_scheme;
+const getClientColorScheme = (state) => state.profiles.clientColorScheme;
+const getNewClientColors = createSelector([getClientColorScheme], (colorScheme) => ({
+  Brand100: colorScheme?.primary_100,
+  Brand200: colorScheme?.primary_200,
+  Brand300: colorScheme?.primary_300,
+  Brand400: colorScheme?.primary_400,
+  Brand500: colorScheme?.primary_500
+}));
+const getOldClientColors = createSelector(
+  [getClientColorScheme],
+  ({ widget_brand_color }) => {
+    return widget_brand_color ? {
+      Brand100: "#F8F9FB",
+      // We couldn't come up with a consistent good looking color with the proper aspect ratio. Defaults to Neutral_100.
+      Brand200: adjustColor(widget_brand_color, 15),
+      Brand300: widget_brand_color,
+      Brand400: adjustColor(widget_brand_color, -15),
+      Brand500: adjustColor(widget_brand_color, -30)
+    } : {};
   }
-  return {
-    Brand100: "#F8F9FB",
-    // We couldn't come up with a consistent good looking color with the proper aspect ratio. Defaults to Neutral_100.
-    Brand200: adjustColor(widgetBrandColor, 15),
-    Brand300: widgetBrandColor,
-    Brand400: adjustColor(widgetBrandColor, -15),
-    Brand500: adjustColor(widgetBrandColor, -30)
-  };
-};
+);
 const getTokenProviderValues = createSelector(
-  (state) => state.config.color_scheme,
-  getNewClientColors,
-  getOldClientColors,
+  [getTheme, getNewClientColors, getOldClientColors],
   (theme, newColors, oldColors) => {
-    const hasNewColors = _every(Object.values(newColors), (color) => !!color);
-    if (hasNewColors) {
-      return {
-        tokenOverrides: {
-          Color: {
-            ...newColors
-          }
-        },
-        theme
-      };
-    }
+    const hasNewColors = _every(Object.values(newColors), Boolean);
     return {
-      tokenOverrides: {
-        Color: {
-          ...oldColors
-        }
-      },
+      tokenOverrides: { Color: hasNewColors ? newColors : oldColors },
       theme
     };
   }
@@ -80290,21 +80714,9 @@ const adjustColor = (col, amt) => {
   let intRVal = parseInt(colorPadded.slice(0, 2), 16) + amt;
   let intGVal = parseInt(colorPadded.slice(2, 4), 16) + amt;
   let intBVal = parseInt(colorPadded.slice(4, 6), 16) + amt;
-  if (intRVal > 255) {
-    intRVal = 255;
-  } else if (intRVal < 0) {
-    intRVal = 0;
-  }
-  if (intGVal > 255) {
-    intGVal = 255;
-  } else if (intGVal < 0) {
-    intGVal = 0;
-  }
-  if (intBVal > 255) {
-    intBVal = 255;
-  } else if (intBVal < 0) {
-    intBVal = 0;
-  }
+  intRVal = Math.min(Math.max(intRVal, 0), 255);
+  intGVal = Math.min(Math.max(intGVal, 0), 255);
+  intBVal = Math.min(Math.max(intBVal, 0), 255);
   const hexR = intRVal.toString(16).padStart(2, "0");
   const hexG = intGVal.toString(16).padStart(2, "0");
   const hexB = intBVal.toString(16).padStart(2, "0");