From f26f788874b46a5bb2fc995b1f575b4ce279a90e Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Wed, 25 Oct 2023 18:59:36 -0400
Subject: [PATCH 01/43] fix: [M3-7249] - Linode Landing flickering (#9836)

* dont block children from rendering

* Added changeset: Linodes Landing flickering

* clean up more

* fix preference toggle

* comment and clean up types

* remove ambiguous test

* show children after inital fetches

* fix AuthenticationWrapper logic and test

* revert change

* removed unused state

* fix lish

* fix AuthenticationWrapper more

* fix flags flickering

* add some e2e coverage

* Update packages/manager/src/IdentifyUser.tsx

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
---
 .../.changeset/pr-9836-fixed-1698158641264.md |   5 +
 .../core/general/account-activation.spec.ts   |  27 +++
 packages/manager/src/IdentifyUser.tsx         |   8 +-
 ...inContent.test.tsx => MainContent.test.ts} |  39 +---
 .../AuthenticationWrapper.test.tsx            |   7 +-
 .../AuthenticationWrapper.tsx                 |  24 +--
 .../PreferenceToggle/PreferenceToggle.tsx     | 184 ++----------------
 .../Linodes/LinodesLanding/LinodesLanding.tsx |  17 +-
 .../TopMenu/AddNewMenu/AddNewMenu.test.tsx    |  10 +-
 9 files changed, 82 insertions(+), 239 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9836-fixed-1698158641264.md
 create mode 100644 packages/manager/cypress/e2e/core/general/account-activation.spec.ts
 rename packages/manager/src/{MainContent.test.tsx => MainContent.test.ts} (55%)

diff --git a/packages/manager/.changeset/pr-9836-fixed-1698158641264.md b/packages/manager/.changeset/pr-9836-fixed-1698158641264.md
new file mode 100644
index 00000000000..bccebf54927
--- /dev/null
+++ b/packages/manager/.changeset/pr-9836-fixed-1698158641264.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Linodes Landing flickering ([#9836](https://github.com/linode/manager/pull/9836))
diff --git a/packages/manager/cypress/e2e/core/general/account-activation.spec.ts b/packages/manager/cypress/e2e/core/general/account-activation.spec.ts
new file mode 100644
index 00000000000..c6ab1764182
--- /dev/null
+++ b/packages/manager/cypress/e2e/core/general/account-activation.spec.ts
@@ -0,0 +1,27 @@
+import { apiMatcher } from 'support/util/intercepts';
+
+describe('account activation', () => {
+  /**
+   * The API will return 403 with the body below for most endpoint except `/v4/profile`.
+   *
+   * { "errors": [ { "reason": "Your account must be activated before you can use this endpoint" } ] }
+   */
+  it('should render an activation landing page if the customer is not activated', () => {
+    cy.intercept('GET', apiMatcher('*'), {
+      statusCode: 403,
+      body: {
+        errors: [
+          {
+            reason:
+              'Your account must be activated before you can use this endpoint',
+          },
+        ],
+      },
+    });
+
+    cy.visitWithLogin('/');
+
+    cy.findByText('Your account is currently being reviewed.');
+    cy.findByText('open a support ticket', { exact: false });
+  });
+});
diff --git a/packages/manager/src/IdentifyUser.tsx b/packages/manager/src/IdentifyUser.tsx
index 8dfb036dd04..983454d9bb7 100644
--- a/packages/manager/src/IdentifyUser.tsx
+++ b/packages/manager/src/IdentifyUser.tsx
@@ -80,9 +80,15 @@ export const IdentifyUser = () => {
         // in maintenance mode, we can't fetch the user's username.
         // Therefore, the `if` above won't "setFeatureFlagsLoaded".
 
+        // We also need to make sure client is defined. Launch Darkly has a weird API.
+        // If client is undefined, that means flags are loading. Even if flags fail to load,
+        // client will become defined and we and allow the app to render.
+
         // If we're being honest, featureFlagsLoading shouldn't be tracked by Redux
         // and this code should go away eventually.
-        setFeatureFlagsLoaded();
+        if (client) {
+          setFeatureFlagsLoaded();
+        }
       }
     }
   }, [client, username, account, accountError]);
diff --git a/packages/manager/src/MainContent.test.tsx b/packages/manager/src/MainContent.test.ts
similarity index 55%
rename from packages/manager/src/MainContent.test.tsx
rename to packages/manager/src/MainContent.test.ts
index 298d7762e32..676fc7a38d6 100644
--- a/packages/manager/src/MainContent.test.tsx
+++ b/packages/manager/src/MainContent.test.ts
@@ -1,16 +1,7 @@
-import { render, waitFor } from '@testing-library/react';
-import * as React from 'react';
-
-import { rest, server } from 'src/mocks/testServer';
-import { wrapWithTheme } from 'src/utilities/testHelpers';
-
-import MainContent, {
+import {
   checkFlagsForMainContentBanner,
   checkPreferencesForBannerDismissal,
 } from './MainContent';
-import { queryClientFactory } from './queries/base';
-
-const queryClient = queryClientFactory();
 
 const mainContentBanner = {
   key: 'Test Text Key',
@@ -52,31 +43,3 @@ describe('checkPreferencesForBannerDismissal', () => {
     expect(checkPreferencesForBannerDismissal({}, 'key1')).toBe(false);
   });
 });
-
-describe('Databases menu item for a restricted user', () => {
-  it('should not render the menu item', async () => {
-    server.use(
-      rest.get('*/account', (req, res, ctx) => {
-        return res(ctx.json({}));
-      })
-    );
-    const { getByText } = render(
-      wrapWithTheme(
-        <MainContent appIsLoading={false} isLoggedInAsCustomer={true} />,
-        {
-          flags: { databases: false },
-          queryClient,
-        }
-      )
-    );
-
-    await waitFor(() => {
-      let el;
-      try {
-        el = getByText('Databases');
-      } catch (e) {
-        expect(el).not.toBeDefined();
-      }
-    });
-  });
-});
diff --git a/packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.test.tsx b/packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.test.tsx
index 1ac9a4db84f..2fd604c8616 100644
--- a/packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.test.tsx
+++ b/packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.test.tsx
@@ -27,15 +27,14 @@ describe('AuthenticationWrapper', () => {
   });
   it('should render one child when showChildren state is true', () => {
     component.setState({ showChildren: true });
-    expect(component.childAt(0)).toHaveLength(1);
+    expect(component.childAt(0)).toBeDefined();
   });
   it('should invoke props.initSession when the component is mounted', () => {
     expect(component.instance().props.initSession).toHaveBeenCalledTimes(1);
   });
-
-  it('should set showChildren state to true when the isAuthenticated prop goes from false to true', () => {
+  it('should not showChildren initially because they should be shown after makeInitialRequests', () => {
     component.setState({ showChildren: false });
     component.setProps({ isAuthenticated: true });
-    expect(component.state('showChildren')).toBeTruthy();
+    expect(component.state('showChildren')).toBeFalsy();
   });
 });
diff --git a/packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.tsx b/packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.tsx
index 17b771a8c12..c9ca6872336 100644
--- a/packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.tsx
+++ b/packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.tsx
@@ -22,6 +22,7 @@ import { handleInitTokens } from 'src/store/authentication/authentication.action
 import { handleLoadingDone } from 'src/store/initialLoad/initialLoad.actions';
 import { State as PendingUploadState } from 'src/store/pendingUpload';
 import { MapState } from 'src/store/types';
+import SplashScreen from '../SplashScreen';
 
 interface Props {
   children: React.ReactNode;
@@ -34,11 +35,6 @@ type CombinedProps = Props &
   WithApplicationStoreProps;
 
 export class AuthenticationWrapper extends React.Component<CombinedProps> {
-  state = {
-    hasEnsuredAllTypes: false,
-    showChildren: false,
-  };
-
   componentDidMount() {
     const { initSession } = this.props;
     /**
@@ -54,8 +50,6 @@ export class AuthenticationWrapper extends React.Component<CombinedProps> {
      * to show the children onMount
      */
     if (this.props.isAuthenticated) {
-      this.setState({ showChildren: true });
-
       this.makeInitialRequests();
     }
   }
@@ -72,8 +66,6 @@ export class AuthenticationWrapper extends React.Component<CombinedProps> {
       !this.state.showChildren
     ) {
       this.makeInitialRequests();
-
-      return this.setState({ showChildren: true });
     }
 
     /** basically handles for the case where our token is expired or we got a 401 error */
@@ -90,8 +82,12 @@ export class AuthenticationWrapper extends React.Component<CombinedProps> {
   render() {
     const { children } = this.props;
     const { showChildren } = this.state;
-    // eslint-disable-next-line
-    return <React.Fragment>{showChildren ? children : null}</React.Fragment>;
+
+    if (showChildren) {
+      return children;
+    }
+
+    return <SplashScreen />;
   }
 
   static defaultProps = {
@@ -109,6 +105,7 @@ export class AuthenticationWrapper extends React.Component<CombinedProps> {
   makeInitialRequests = async () => {
     // When loading Lish we avoid all this extra data loading
     if (window.location?.pathname?.match(/linodes\/[0-9]+\/lish/)) {
+      this.setState({ showChildren: true });
       return;
     }
 
@@ -142,8 +139,13 @@ export class AuthenticationWrapper extends React.Component<CombinedProps> {
       /** We choose to do nothing, relying on the Redux error state. */
     } finally {
       this.props.markAppAsDoneLoading();
+      this.setState({ showChildren: true });
     }
   };
+
+  state = {
+    showChildren: false,
+  };
 }
 
 interface StateProps {
diff --git a/packages/manager/src/components/PreferenceToggle/PreferenceToggle.tsx b/packages/manager/src/components/PreferenceToggle/PreferenceToggle.tsx
index de1dd66f538..b279ec36f83 100644
--- a/packages/manager/src/components/PreferenceToggle/PreferenceToggle.tsx
+++ b/packages/manager/src/components/PreferenceToggle/PreferenceToggle.tsx
@@ -1,10 +1,4 @@
-import { path } from 'ramda';
-import * as React from 'react';
-
 import { useMutatePreferences, usePreferences } from 'src/queries/preferences';
-import { isNullOrUndefined } from 'src/utilities/nullOrUndefined';
-
-type PreferenceValue = boolean | number | string;
 
 export interface PreferenceToggleProps<T> {
   preference: T;
@@ -18,171 +12,43 @@ interface RenderChildrenProps<T> {
 
 type RenderChildren<T> = (props: RenderChildrenProps<T>) => JSX.Element;
 
-interface Props<T = PreferenceValue> {
+interface Props<T> {
   children: RenderChildren<T>;
   initialSetCallbackFn?: (value: T) => void;
-  localStorageKey?: string;
   preferenceKey: string;
   preferenceOptions: [T, T];
   toggleCallbackFn?: (value: T) => void;
-  toggleCallbackFnDebounced?: (value: T) => void;
   value?: T;
 }
 
-export const PreferenceToggle = <T extends unknown>(props: Props<T>) => {
+export const PreferenceToggle = <T,>(props: Props<T>) => {
   const {
     children,
     preferenceKey,
     preferenceOptions,
     toggleCallbackFn,
-    toggleCallbackFnDebounced,
     value,
   } = props;
 
-  /** will be undefined and render-block children unless otherwise specified */
-  const [currentlySetPreference, setPreference] = React.useState<T | undefined>(
-    value
-  );
-  const [lastUpdated, setLastUpdated] = React.useState<number>(0);
-
-  const {
-    data: preferences,
-    error: preferencesError,
-    refetch: refetchUserPreferences,
-  } = usePreferences();
+  const { data: preferences } = usePreferences();
 
   const { mutateAsync: updateUserPreferences } = useMutatePreferences();
 
-  React.useEffect(() => {
-    /**
-     * This useEffect is strictly for when the app first loads
-     * whether we have a preference error or preference data
-     */
-
-    /**
-     * if for whatever reason we failed to get the preferences data
-     * just fallback to some default (the first in the list of options).
-     *
-     * Do NOT try and PUT to the API - we don't want to overwrite other unrelated preferences
-     */
-    if (
-      isNullOrUndefined(currentlySetPreference) &&
-      !!preferencesError &&
-      lastUpdated === 0
-    ) {
-      /**
-       * get the first set of options
-       */
-      const preferenceToSet = preferenceOptions[0];
-      setPreference(preferenceToSet);
-
-      if (props.initialSetCallbackFn) {
-        props.initialSetCallbackFn(preferenceToSet);
-      }
-    }
-
-    /**
-     * In the case of when we successfully retrieved preferences for the FIRST time,
-     * set the state to what we got from the server. If the preference
-     * doesn't exist yet in this user's payload, set defaults in local state.
-     */
-    if (
-      isNullOrUndefined(currentlySetPreference) &&
-      !!preferences &&
-      lastUpdated === 0
-    ) {
-      const preferenceFromAPI = path<T>([preferenceKey], preferences);
-
-      /**
-       * this is the first time the user is setting the user preference
-       *
-       * if the API value is null or undefined, default to the first value that was passed to this component from props.
-       */
-      const preferenceToSet = isNullOrUndefined(preferenceFromAPI)
-        ? preferenceOptions[0]
-        : preferenceFromAPI;
-
-      setPreference(preferenceToSet);
-
-      /** run callback function if passed one */
-      if (props.initialSetCallbackFn) {
-        props.initialSetCallbackFn(preferenceToSet);
-      }
-    }
-  }, [preferences, preferencesError]);
-
-  React.useEffect(() => {
-    /**
-     * we only want to update local state if we already have something set in local state
-     * setting the initial state is the responsibility of the first useEffect
-     */
-    if (!isNullOrUndefined(currentlySetPreference)) {
-      const debouncedErrorUpdate = setTimeout(() => {
-        /**
-         * we have a preference error, so first GET the preferences
-         * before trying to PUT them.
-         *
-         * Don't update anything if the GET fails
-         */
-        if (!!preferencesError && lastUpdated !== 0) {
-          /** invoke our callback prop if we have one */
-          if (
-            toggleCallbackFnDebounced &&
-            !isNullOrUndefined(currentlySetPreference)
-          ) {
-            toggleCallbackFnDebounced(currentlySetPreference);
-          }
-          refetchUserPreferences()
-            .then((response) => {
-              updateUserPreferences({
-                ...response.data,
-                [preferenceKey]: currentlySetPreference,
-              }).catch(() => /** swallow the error */ null);
-            })
-            .catch(() => /** swallow the error */ null);
-        } else if (
-          !!preferences &&
-          !isNullOrUndefined(currentlySetPreference) &&
-          lastUpdated !== 0
-        ) {
-          /**
-           * PUT to /preferences on every toggle, debounced.
-           */
-          updateUserPreferences({
-            [preferenceKey]: currentlySetPreference,
-          }).catch(() => /** swallow the error */ null);
-
-          /** invoke our callback prop if we have one */
-          if (
-            toggleCallbackFnDebounced &&
-            !isNullOrUndefined(currentlySetPreference)
-          ) {
-            toggleCallbackFnDebounced(currentlySetPreference);
-          }
-        } else if (lastUpdated === 0) {
-          /**
-           * this is the case where the app has just been mounted and the preferences are
-           * being set in local state for the first time
-           */
-          setLastUpdated(Date.now());
-        }
-      }, 500);
-
-      return () => clearTimeout(debouncedErrorUpdate);
-    }
-
-    return () => null;
-  }, [currentlySetPreference]);
-
   const togglePreference = () => {
-    /** first set local state to the opposite option */
-    const newPreferenceToSet =
-      currentlySetPreference === preferenceOptions[0]
-        ? preferenceOptions[1]
-        : preferenceOptions[0];
+    let newPreferenceToSet: T;
+
+    if (preferences?.[preferenceKey] === undefined) {
+      // Because we default to preferenceOptions[0], toggling with no preference should pick preferenceOptions[1]
+      newPreferenceToSet = preferenceOptions[1];
+    } else if (preferences[preferenceKey] === preferenceOptions[0]) {
+      newPreferenceToSet = preferenceOptions[1];
+    } else {
+      newPreferenceToSet = preferenceOptions[0];
+    }
 
-    /** set the preference in local state */
-    setPreference(newPreferenceToSet);
+    updateUserPreferences({
+      [preferenceKey]: newPreferenceToSet,
+    }).catch(() => /** swallow the error */ null);
 
     /** invoke our callback prop if we have one */
     if (toggleCallbackFn) {
@@ -192,18 +58,8 @@ export const PreferenceToggle = <T extends unknown>(props: Props<T>) => {
     return newPreferenceToSet;
   };
 
-  /**
-   * render-block the children. We can prevent
-   * render-blocking by passing a default value as a prop
-   *
-   * So if you want to handle local state outside of this component,
-   * you can do so and pass the value explicitly with the _value_ prop
-   */
-  if (isNullOrUndefined(currentlySetPreference)) {
-    return null;
-  }
-
-  return typeof children === 'function'
-    ? children({ preference: currentlySetPreference, togglePreference })
-    : null;
+  return children({
+    preference: value ?? preferences?.[preferenceKey] ?? preferenceOptions[0],
+    togglePreference,
+  });
 };
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx
index 000134592ea..49f314ddc3b 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx
@@ -188,10 +188,9 @@ class ListLinodes extends React.Component<CombinedProps, State> {
         <DocumentTitleSegment segment="Linodes" />
         <ProductInformationBanner bannerLocation="Linodes" />
         <PreferenceToggle<boolean>
-          localStorageKey="GROUP_LINODES"
           preferenceKey="linodes_group_by_tag"
           preferenceOptions={[false, true]}
-          toggleCallbackFnDebounced={sendGroupByAnalytic}
+          toggleCallbackFn={sendGroupByAnalytic}
         >
           {({
             preference: linodesAreGrouped,
@@ -199,11 +198,9 @@ class ListLinodes extends React.Component<CombinedProps, State> {
           }: PreferenceToggleProps<boolean>) => {
             return (
               <PreferenceToggle<'grid' | 'list'>
-                localStorageKey="LINODE_VIEW"
                 preferenceKey="linodes_view_style"
                 preferenceOptions={['list', 'grid']}
-                toggleCallbackFn={this.changeViewInstant}
-                toggleCallbackFnDebounced={this.changeViewDelayed}
+                toggleCallbackFn={this.changeView}
                 /**
                  * we want the URL query param to take priority here, but if it's
                  * undefined, just use the user preference
@@ -338,17 +335,9 @@ class ListLinodes extends React.Component<CombinedProps, State> {
     );
   }
 
-  /**
-   * when you change the linode view, send analytics event, debounced.
-   */
-  changeViewDelayed = (style: 'grid' | 'list') => {
+  changeView = (style: 'grid' | 'list') => {
     sendLinodesViewEvent(eventCategory, style);
-  };
 
-  /**
-   * when you change the linode view, instantly update the query params
-   */
-  changeViewInstant = (style: 'grid' | 'list') => {
     const { history, location } = this.props;
 
     const query = new URLSearchParams(location.search);
diff --git a/packages/manager/src/features/TopMenu/AddNewMenu/AddNewMenu.test.tsx b/packages/manager/src/features/TopMenu/AddNewMenu/AddNewMenu.test.tsx
index 44529a312ef..eb7d193439d 100644
--- a/packages/manager/src/features/TopMenu/AddNewMenu/AddNewMenu.test.tsx
+++ b/packages/manager/src/features/TopMenu/AddNewMenu/AddNewMenu.test.tsx
@@ -66,13 +66,9 @@ describe('AddNewMenu', () => {
   });
 
   test('does not render hidden menu item - databases', () => {
-    const mockedUseFlags = jest.fn().mockReturnValue({ databases: false });
-    jest.mock('src/hooks/useFlags', () => ({
-      __esModule: true,
-      useFlags: mockedUseFlags,
-    }));
-
-    const { getByText, queryByText } = renderWithTheme(<AddNewMenu />);
+    const { getByText, queryByText } = renderWithTheme(<AddNewMenu />, {
+      flags: { databases: false },
+    });
     const createButton = getByText('Create');
     fireEvent.click(createButton);
     const hiddenMenuItem = queryByText('Create Database');

From 9cd7af231110dbf3fb8229dcea24eb813d485d9b Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Thu, 26 Oct 2023 09:08:04 -0500
Subject: [PATCH 02/43] feat: [M3-7288] - AGLB create page with Actions
 buttons. (#9825)

* feat: [M3-7288] - AGLB create page with Actions buttons.

* Add configuration header section

* Add Actions buttons

* Render Regions as per the mockup

* Added changeset: AGLB create page with Actions buttons.

* Unit test coverage for LoadBalancerLabel

* Unit test for LoadBalancerConfiguration

* Update packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

* Update packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

* PR - Feedback

* PR - feedback

* Update packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx

Co-authored-by: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>

* Update packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx

Co-authored-by: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>

* PR - Feedback

* Fix alignment for small screen

* Override breadcrumb label

* Fix tests

* Adjust actions buttons order for small screens.

* Update packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx

Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>

* Rename file name - LoadBalancerLabel

* simplify styles and use less grid

* Wrap stepper component for mobile view

* add real regions

* Use util - convertToKebabCase

---------

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
Co-authored-by: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Co-authored-by: Banks Nussman <banks@nussman.us>
---
 ...pr-9825-upcoming-features-1698093221284.md |  5 ++
 .../VerticalLinearStepper.styles.ts           |  4 +-
 .../VerticalLinearStepper.tsx                 | 34 +++++++---
 .../LoadBalancerConfiguration.test.tsx        | 67 +++++++++++++++++++
 .../LoadBalancerConfiguration.tsx             | 44 ++++++++++++
 .../LoadBalancerCreate/LoadBalancerCreate.tsx | 52 +++++++++++++-
 .../LoadBalancerLabel.test.tsx                | 49 ++++++++++++++
 .../LoadBalancerCreate/LoadBalancerLabel.tsx  | 36 ++++++++++
 .../LoadBalancerRegions.tsx                   | 49 ++++++++++++++
 9 files changed, 328 insertions(+), 12 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.tsx
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx

diff --git a/packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md b/packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md
new file mode 100644
index 00000000000..b11a0b1b6bf
--- /dev/null
+++ b/packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add AGLB create page with Actions buttons ([#9825](https://github.com/linode/manager/pull/9825))
diff --git a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.styles.ts b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.styles.ts
index 03eb7eff8c1..4d8bc9d619c 100644
--- a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.styles.ts
+++ b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.styles.ts
@@ -44,10 +44,10 @@ export const CustomStepIcon = styled(StepIcon, { label: 'StyledCircleIcon' })(
 
 export const StyledColorlibConnector = styled(StepConnector, {
   label: 'StyledColorlibConnector',
-})(() => ({
+})(({ theme }) => ({
   '& .MuiStepConnector-line': {
     borderColor: '#eaeaf0',
     borderLeftWidth: '3px',
-    minHeight: '28px',
+    minHeight: theme.spacing(2),
   },
 }));
diff --git a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
index 7efed690d24..e76f6732885 100644
--- a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
+++ b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx
@@ -7,9 +7,12 @@ import {
 } from '@mui/material';
 import Box from '@mui/material/Box';
 import { Theme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/styles';
 import React, { useState } from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { convertToKebabCase } from 'src/utilities/convertToKebobCase';
 
 import {
   CustomStepIcon,
@@ -23,7 +26,7 @@ type VerticalLinearStep = {
   label: string;
 };
 
-interface VerticalLinearStepperProps {
+export interface VerticalLinearStepperProps {
   steps: VerticalLinearStep[];
 }
 
@@ -31,6 +34,9 @@ export const VerticalLinearStepper = ({
   steps,
 }: VerticalLinearStepperProps) => {
   const [activeStep, setActiveStep] = useState(0);
+  const theme = useTheme<Theme>();
+
+  const matchesSmDown = useMediaQuery(theme.breakpoints.down('md'));
 
   const handleNext = () => {
     setActiveStep((prevActiveStep) => prevActiveStep + 1);
@@ -45,9 +51,8 @@ export const VerticalLinearStepper = ({
       sx={(theme: Theme) => ({
         backgroundColor: theme.bg.bgPaper,
         display: 'flex',
-        margin: 'auto',
-        maxWidth: 800,
-        p: `${theme.spacing(2)}`,
+        flexDirection: matchesSmDown ? 'column' : 'row',
+        p: matchesSmDown ? `${theme.spacing(2)}px 0px` : `${theme.spacing(2)}`,
       })}
     >
       {/* Left Column - Vertical Steps */}
@@ -101,7 +106,16 @@ export const VerticalLinearStepper = ({
           {steps.map(({ content, handler, label }, index) => (
             <Step key={label}>
               {index === activeStep ? (
-                <StepContent sx={{ border: 'none' }}>
+                <StepContent
+                  sx={{
+                    border: 'none',
+                    marginLeft: matchesSmDown ? '0px' : undefined,
+                    paddingLeft: matchesSmDown ? '0px' : undefined,
+                    paddingTop: matchesSmDown
+                      ? `${theme.spacing(2)}`
+                      : undefined,
+                  }}
+                >
                   <Box
                     sx={(theme) => ({
                       bgcolor: theme.bg.app,
@@ -116,9 +130,13 @@ export const VerticalLinearStepper = ({
                       primaryButtonProps={
                         index !== 2
                           ? {
-                              'data-testid': steps[
-                                index + 1
-                              ]?.label.toLocaleLowerCase(),
+                              /** Generate a 'data-testid' attribute value based on the label of the next step.
+                               * 1. toLocaleLowerCase(): Converts the label to lowercase for consistency.
+                               * 2. replace(/\s/g, ''): Removes spaces from the label to create a valid test ID.
+                               */
+                              'data-testid': convertToKebabCase(
+                                steps[index + 1]?.label
+                              ),
                               label: `Next: ${steps[index + 1]?.label}`,
                               onClick: () => {
                                 handleNext();
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
new file mode 100644
index 00000000000..014364fbcca
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
@@ -0,0 +1,67 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { LoadBalancerConfiguration } from './LoadBalancerConfiguration';
+
+describe('LoadBalancerConfiguration', () => {
+  test('Should render Details content', () => {
+    renderWithTheme(<LoadBalancerConfiguration />);
+    expect(
+      screen.getByText('TODO: AGLB - Implement Details step content.')
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        'TODO: AGLB - Implement Service Targets Configuration.'
+      )
+    ).toBeNull();
+    expect(
+      screen.queryByText('TODO: AGLB - Implement Routes Confiugataion.')
+    ).toBeNull();
+    expect(screen.getByText('Next: Service Targets')).toBeInTheDocument();
+    expect(screen.queryByText('Previous: Details')).toBeNull();
+  });
+  test('Should navigate to Service Targets content', () => {
+    renderWithTheme(<LoadBalancerConfiguration />);
+    userEvent.click(screen.getByTestId('service-targets'));
+    expect(
+      screen.getByText('TODO: AGLB - Implement Service Targets Configuration.')
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText('TODO: AGLB - Implement Details step content.')
+    ).toBeNull();
+    expect(
+      screen.queryByText('TODO: AGLB - Implement Routes Confiugataion.')
+    ).toBeNull();
+    expect(screen.getByText('Next: Routes')).toBeInTheDocument();
+    expect(screen.getByText('Previous: Details')).toBeInTheDocument();
+    expect(screen.queryByText('Previous: Service Targets')).toBeNull();
+  });
+  test('Should navigate to Routes content', () => {
+    renderWithTheme(<LoadBalancerConfiguration />);
+    userEvent.click(screen.getByTestId('service-targets'));
+    userEvent.click(screen.getByTestId('routes'));
+    expect(
+      screen.queryByText('TODO: AGLB - Implement Details step content.')
+    ).toBeNull();
+    expect(
+      screen.queryByText(
+        'TODO: AGLB - Implement Service Targets Configuration.'
+      )
+    ).toBeNull();
+    expect(
+      screen.getByText('TODO: AGLB - Implement Routes Confiugataion.')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Previous: Service Targets')).toBeInTheDocument();
+  });
+  test('Should be able to go previous step', () => {
+    renderWithTheme(<LoadBalancerConfiguration />);
+    userEvent.click(screen.getByTestId('service-targets'));
+    userEvent.click(screen.getByText('Previous: Details'));
+    expect(
+      screen.getByText('TODO: AGLB - Implement Details step content.')
+    ).toBeInTheDocument();
+  });
+});
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
new file mode 100644
index 00000000000..a9eadc0b2b2
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
@@ -0,0 +1,44 @@
+import Stack from '@mui/material/Stack';
+import * as React from 'react';
+
+import { Paper } from 'src/components/Paper';
+import { Typography } from 'src/components/Typography';
+import { VerticalLinearStepper } from 'src/components/VerticalLinearStepper/VerticalLinearStepper';
+
+export const configurationSteps = [
+  {
+    content: <div>TODO: AGLB - Implement Details step content.</div>,
+    handler: () => null,
+    label: 'Details',
+  },
+  {
+    content: <div>TODO: AGLB - Implement Service Targets Configuration.</div>,
+    handler: () => null,
+    label: 'Service Targets',
+  },
+  {
+    content: <div>TODO: AGLB - Implement Routes Confiugataion.</div>,
+    handler: () => null,
+    label: 'Routes',
+  },
+];
+
+export const LoadBalancerConfiguration = () => {
+  return (
+    <Paper>
+      <Typography
+        sx={(theme) => ({ marginBottom: theme.spacing(2) })}
+        variant="h2"
+      >
+        Configuration -{' '}
+      </Typography>
+      <Stack spacing={1}>
+        <Typography>
+          A Configuration listens on a port and uses Route Rules to forward
+          request to Service Target Endpoints
+        </Typography>
+        <VerticalLinearStepper steps={configurationSteps} />
+      </Stack>
+    </Paper>
+  );
+};
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
index 6d9e2f9e479..c7b90a87917 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
@@ -1,12 +1,60 @@
+import Stack from '@mui/material/Stack';
 import * as React from 'react';
 
+import { Box } from 'src/components/Box';
+import { Button } from 'src/components/Button/Button';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle/DocumentTitle';
+import { LandingHeader } from 'src/components/LandingHeader';
+
+import { LoadBalancerConfiguration } from './LoadBalancerConfiguration';
+import { LoadBalancerLabel } from './LoadBalancerLabel';
+import { LoadBalancerRegions } from './LoadBalancerRegions';
 
 const LoadBalancerCreate = () => {
   return (
     <>
-      <DocumentTitleSegment segment="Load Balancers" />
-      TODO: AGLB M3-6815: Load Balancer Create
+      <DocumentTitleSegment segment="Create a Load Balancer" />
+      <LandingHeader
+        breadcrumbProps={{
+          crumbOverrides: [
+            {
+              label: 'Global Load Balancers',
+              position: 1,
+            },
+          ],
+          pathname: location.pathname,
+        }}
+        title="Create"
+      />
+      <Stack spacing={3}>
+        <LoadBalancerLabel
+          labelFieldProps={{
+            disabled: false,
+            errorText: '',
+            label: 'Linode Label',
+            onChange: () => null,
+            value: '',
+          }}
+        />
+        <LoadBalancerRegions />
+        <LoadBalancerConfiguration />
+        {/* TODO: AGLB -
+         * Implement Review Load Balancer Action Behavior
+         * Implement Add Another Configuration Behavior
+         */}
+        <Box
+          columnGap={1}
+          display="flex"
+          flexWrap="wrap"
+          justifyContent="space-between"
+          rowGap={3}
+        >
+          <Button buttonType="outlined">Add Another Configuration</Button>
+          <Button buttonType="primary" sx={{ marginLeft: 'auto' }}>
+            Review Load Balancer
+          </Button>
+        </Box>
+      </Stack>
     </>
   );
 };
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx
new file mode 100644
index 00000000000..c99ba36bfe2
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { LoadBalancerLabel } from './LoadBalancerLabel';
+
+describe('LoadBalancerLabel', () => {
+  it('should render the component with a label and no error', () => {
+    const labelFieldProps = {
+      disabled: false,
+      errorText: '',
+      label: 'Load Balancer Label',
+      onChange: jest.fn(),
+      value: 'Test Label',
+    };
+
+    const { getByTestId, queryByText } = renderWithTheme(
+      <LoadBalancerLabel error="" labelFieldProps={labelFieldProps} />
+    );
+
+    const labelInput = getByTestId('textfield-input');
+    const errorNotice = queryByText('Error Text');
+
+    expect(labelInput).toBeInTheDocument();
+    expect(labelInput).toHaveAttribute('placeholder', 'Enter a label');
+    expect(labelInput).toHaveValue('Test Label');
+    expect(errorNotice).toBeNull();
+  });
+
+  it('should render the component with an error message', () => {
+    const labelFieldProps = {
+      disabled: false,
+      errorText: 'This is an error',
+      label: 'Load Balancer Label',
+      onChange: jest.fn(),
+      value: 'Test Label',
+    };
+
+    const { getByTestId, getByText } = renderWithTheme(
+      <LoadBalancerLabel error="Error Text" labelFieldProps={labelFieldProps} />
+    );
+
+    const labelInput = getByTestId('textfield-input');
+    const errorNotice = getByText('This is an error');
+
+    expect(labelInput).toBeInTheDocument();
+    expect(errorNotice).toBeInTheDocument();
+  });
+});
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.tsx
new file mode 100644
index 00000000000..1bff990ab83
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { Notice } from 'src/components/Notice/Notice';
+import { Paper } from 'src/components/Paper';
+import { TextField, TextFieldProps } from 'src/components/TextField';
+
+interface LabelProps {
+  error?: string;
+  labelFieldProps: TextFieldProps;
+}
+
+export const LoadBalancerLabel = (props: LabelProps) => {
+  const { error, labelFieldProps } = props;
+
+  return (
+    <Paper
+      sx={{
+        flexGrow: 1,
+        width: '100%',
+      }}
+      data-qa-label-header
+    >
+      {error && <Notice text={error} variant="error" />}
+      <TextField
+        data-qa-label-input
+        disabled={labelFieldProps.disabled}
+        errorText={labelFieldProps.errorText}
+        label="Load Balancer Label"
+        noMarginTop
+        onChange={() => labelFieldProps.onChange}
+        placeholder="Enter a label"
+        value={labelFieldProps.value}
+      />
+    </Paper>
+  );
+};
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
new file mode 100644
index 00000000000..e1242d97fda
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
@@ -0,0 +1,49 @@
+import Stack from '@mui/material/Stack';
+import * as React from 'react';
+
+import { BetaChip } from 'src/components/BetaChip/BetaChip';
+import { Country } from 'src/components/EnhancedSelect/variants/RegionSelect/utils';
+import { Flag } from 'src/components/Flag';
+import { Paper } from 'src/components/Paper';
+import { Typography } from 'src/components/Typography';
+
+const regions = [
+  { country: 'us', id: 'us-iad', label: 'Washington, DC' },
+  { country: 'us', id: 'us-lax', label: 'Los Angeles, CA' },
+  { country: 'fr', id: 'fr-par', label: 'Paris, FR' },
+  { country: 'jp', id: 'jp-osa', label: 'Osaka, JP' },
+  { country: 'au', id: 'ap-southeast', label: 'Sydney, AU' },
+];
+
+export const LoadBalancerRegions = () => {
+  return (
+    <Paper>
+      <Stack spacing={2}>
+        <Typography variant="h2">Regions</Typography>
+        <Stack spacing={1}>
+          <Typography>
+            Where this Load Balancer instance will be deployed.
+          </Typography>
+          <Typography>
+            <BetaChip sx={{ marginLeft: '0 !important' }} /> Load Balancers will
+            be automatically provisioned in these 5 Regions. No charges with be
+            incurred.
+          </Typography>
+        </Stack>
+        <Stack py={0.5} spacing={1.25}>
+          {regions.map((region) => (
+            <Stack
+              alignItems="center"
+              direction="row"
+              key={region.id}
+              spacing={2}
+            >
+              <Flag country={region.country as Lowercase<Country>} />
+              <Typography>{`${region.label} (${region.id})`}</Typography>
+            </Stack>
+          ))}
+        </Stack>
+      </Stack>
+    </Paper>
+  );
+};

From 55b1205608eb05fae755ae50b25f0e94637d976d Mon Sep 17 00:00:00 2001
From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
Date: Thu, 26 Oct 2023 10:10:17 -0400
Subject: [PATCH 03/43] change: [M3-7182] - Update RemovableSelectionsList
 default maximum height to cut off the last list item (#9827)

* update removable list height to cut off last item if scrolling is necessary

* add changeset

* box shadow for removable selections list

* fix safari box shadow display (css really really got me ;-;)

* cleanup, make dropshadow appear more dynamically
---
 ...pr-9827-upcoming-features-1698091273479.md |   5 +
 .../RemovableSelectionsList.style.ts          |  90 +++++++++++
 .../RemovableSelectionsList.test.tsx          |   8 +
 .../RemovableSelectionsList.tsx               | 146 +++++++-----------
 .../Linodes/LinodesCreate/SelectAppPanel.tsx  |   1 -
 .../TabbedContent/FromAppsContent.tsx         |  48 ++++--
 6 files changed, 193 insertions(+), 105 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9827-upcoming-features-1698091273479.md
 create mode 100644 packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.style.ts

diff --git a/packages/manager/.changeset/pr-9827-upcoming-features-1698091273479.md b/packages/manager/.changeset/pr-9827-upcoming-features-1698091273479.md
new file mode 100644
index 00000000000..7b5861003ea
--- /dev/null
+++ b/packages/manager/.changeset/pr-9827-upcoming-features-1698091273479.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update `RemovableSelectionsList` default maximum height to cut off last list item and indicate scrolling ([#9827](https://github.com/linode/manager/pull/9827))
diff --git a/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.style.ts b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.style.ts
new file mode 100644
index 00000000000..9753f7173f2
--- /dev/null
+++ b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.style.ts
@@ -0,0 +1,90 @@
+import { styled } from '@mui/material/styles';
+
+import { Box } from 'src/components/Box';
+import { List } from 'src/components/List';
+import { ListItem } from 'src/components/ListItem';
+import { omittedProps } from 'src/utilities/omittedProps';
+
+import type { RemovableSelectionsListProps } from './RemovableSelectionsList';
+
+export const StyledNoAssignedLinodesBox = styled(Box, {
+  label: 'StyledNoAssignedLinodesBox',
+  shouldForwardProp: omittedProps(['maxWidth']),
+})(({ maxWidth, theme }) => ({
+  background: theme.name === 'light' ? theme.bg.main : theme.bg.app,
+  display: 'flex',
+  flexDirection: 'column',
+  height: '52px',
+  justifyContent: 'center',
+  maxWidth: maxWidth ? `${maxWidth}px` : '416px',
+  paddingLeft: theme.spacing(2),
+  width: '100%',
+}));
+
+export const SelectedOptionsHeader = styled('h4', {
+  label: 'SelectedOptionsHeader',
+})(({ theme }) => ({
+  color: theme.color.headline,
+  fontFamily: theme.font.bold,
+  fontSize: '14px',
+  textTransform: 'initial',
+}));
+
+export const SelectedOptionsList = styled(List, {
+  label: 'SelectedOptionsList',
+  shouldForwardProp: omittedProps(['isRemovable']),
+})<{ isRemovable?: boolean }>(({ isRemovable, theme }) => ({
+  background: theme.name === 'light' ? theme.bg.main : theme.bg.app,
+  padding: !isRemovable ? `${theme.spacing(2)} 0` : '5px 0',
+  width: '100%',
+}));
+
+export const SelectedOptionsListItem = styled(ListItem, {
+  label: 'SelectedOptionsListItem',
+})(() => ({
+  justifyContent: 'space-between',
+  paddingBottom: 0,
+  paddingRight: 4,
+  paddingTop: 0,
+}));
+
+export const StyledLabel = styled('span', { label: 'StyledLabel' })(
+  ({ theme }) => ({
+    color: theme.color.label,
+    fontFamily: theme.font.semiBold,
+    fontSize: '14px',
+  })
+);
+
+type StyledBoxShadowWrapperBoxProps = Pick<
+  RemovableSelectionsListProps,
+  'maxHeight' | 'maxWidth'
+>;
+
+export const StyledBoxShadowWrapper = styled(Box, {
+  label: 'StyledBoxShadowWrapper',
+  shouldForwardProp: omittedProps(['displayShadow']),
+})<{ displayShadow: boolean; maxWidth: number }>(
+  ({ displayShadow, maxWidth, theme }) => ({
+    '&:after': {
+      bottom: 0,
+      content: '""',
+      height: '15px',
+      position: 'absolute',
+      width: '100%',
+      ...(displayShadow && {
+        boxShadow: `${theme.color.boxShadow} 0px -15px 10px -10px inset`,
+      }),
+    },
+    maxWidth: `${maxWidth}px`,
+    position: 'relative',
+  })
+);
+
+export const StyledScrollBox = styled(Box, {
+  label: 'StyledScrollBox',
+})<StyledBoxShadowWrapperBoxProps>(({ maxHeight, maxWidth }) => ({
+  maxHeight: `${maxHeight}px`,
+  maxWidth: `${maxWidth}px`,
+  overflow: 'auto',
+}));
diff --git a/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.test.tsx b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.test.tsx
index 916b7c96175..26cb3be5bca 100644
--- a/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.test.tsx
+++ b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.test.tsx
@@ -81,4 +81,12 @@ describe('Removable Selections List', () => {
     fireEvent.click(removeButton);
     expect(props.onRemove).toHaveBeenCalled();
   });
+
+  it('should not display the remove button for a list item', () => {
+    const screen = renderWithTheme(
+      <RemovableSelectionsList {...props} isRemovable={false} />
+    );
+    const removeButton = screen.queryByLabelText(`remove my-linode-1`);
+    expect(removeButton).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.tsx b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.tsx
index f97bb62af5c..706d4ada54a 100644
--- a/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.tsx
+++ b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.tsx
@@ -1,12 +1,17 @@
 import Close from '@mui/icons-material/Close';
-import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { Box } from 'src/components/Box';
 import { IconButton } from 'src/components/IconButton';
-import { List } from 'src/components/List';
-import { ListItem } from 'src/components/ListItem';
-import { omittedProps } from 'src/utilities/omittedProps';
+
+import {
+  SelectedOptionsHeader,
+  SelectedOptionsList,
+  SelectedOptionsListItem,
+  StyledBoxShadowWrapper,
+  StyledLabel,
+  StyledNoAssignedLinodesBox,
+  StyledScrollBox,
+} from './RemovableSelectionsList.style';
 
 export type RemovableItem = {
   id: number;
@@ -16,7 +21,7 @@ export type RemovableItem = {
   // Trying to type them as 'unknown' led to type errors.
 } & { [key: string]: any };
 
-interface Props {
+export interface RemovableSelectionsListProps {
   /**
    * The descriptive text to display above the list
    */
@@ -26,11 +31,11 @@ interface Props {
    */
   isRemovable?: boolean;
   /**
-   * The maxHeight of the list component, in px
+   * The maxHeight of the list component, in px. The default max height is 427px.
    */
   maxHeight?: number;
   /**
-   * The maxWidth of the list component, in px
+   * The maxWidth of the list component, in px. The default max width is 416px.
    */
   maxWidth?: number;
   /**
@@ -53,18 +58,30 @@ interface Props {
   selectionData: RemovableItem[];
 }
 
-export const RemovableSelectionsList = (props: Props) => {
+export const RemovableSelectionsList = (
+  props: RemovableSelectionsListProps
+) => {
   const {
     headerText,
     isRemovable = true,
-    maxHeight,
-    maxWidth,
+    maxHeight = 427,
+    maxWidth = 416,
     noDataText,
     onRemove,
     preferredDataLabel,
     selectionData,
   } = props;
 
+  // used to determine when to display a box-shadow to indicate scrollability
+  const listRef = React.useRef<HTMLUListElement>(null);
+  const [listHeight, setListHeight] = React.useState<number>(0);
+
+  React.useEffect(() => {
+    if (listRef.current) {
+      setListHeight(listRef.current.clientHeight);
+    }
+  }, [selectionData]);
+
   const handleOnClick = (selection: RemovableItem) => {
     onRemove(selection);
   };
@@ -73,37 +90,38 @@ export const RemovableSelectionsList = (props: Props) => {
     <>
       <SelectedOptionsHeader>{headerText}</SelectedOptionsHeader>
       {selectionData.length > 0 ? (
-        <SelectedOptionsList
-          sx={{
-            maxHeight: maxHeight ? `${maxHeight}px` : '450px',
-            maxWidth: maxWidth ? `${maxWidth}px` : '416px',
-          }}
-          isRemovable={isRemovable}
+        <StyledBoxShadowWrapper
+          displayShadow={listHeight > maxHeight}
+          maxWidth={maxWidth}
         >
-          {selectionData.map((selection) => (
-            <SelectedOptionsListItem alignItems="center" key={selection.id}>
-              <StyledLabel>
-                {preferredDataLabel
-                  ? selection[preferredDataLabel]
-                  : selection.label}
-              </StyledLabel>
-              {isRemovable && (
-                <IconButton
-                  aria-label={`remove ${
-                    preferredDataLabel
+          <StyledScrollBox maxHeight={maxHeight} maxWidth={maxWidth}>
+            <SelectedOptionsList isRemovable={isRemovable} ref={listRef}>
+              {selectionData.map((selection) => (
+                <SelectedOptionsListItem alignItems="center" key={selection.id}>
+                  <StyledLabel>
+                    {preferredDataLabel
                       ? selection[preferredDataLabel]
-                      : selection.label
-                  }`}
-                  disableRipple
-                  onClick={() => handleOnClick(selection)}
-                  size="medium"
-                >
-                  <Close />
-                </IconButton>
-              )}
-            </SelectedOptionsListItem>
-          ))}
-        </SelectedOptionsList>
+                      : selection.label}
+                  </StyledLabel>
+                  {isRemovable && (
+                    <IconButton
+                      aria-label={`remove ${
+                        preferredDataLabel
+                          ? selection[preferredDataLabel]
+                          : selection.label
+                      }`}
+                      disableRipple
+                      onClick={() => handleOnClick(selection)}
+                      size="medium"
+                    >
+                      <Close />
+                    </IconButton>
+                  )}
+                </SelectedOptionsListItem>
+              ))}
+            </SelectedOptionsList>
+          </StyledScrollBox>
+        </StyledBoxShadowWrapper>
       ) : (
         <StyledNoAssignedLinodesBox maxWidth={maxWidth}>
           <StyledLabel>{noDataText}</StyledLabel>
@@ -112,51 +130,3 @@ export const RemovableSelectionsList = (props: Props) => {
     </>
   );
 };
-
-const StyledNoAssignedLinodesBox = styled(Box, {
-  label: 'StyledNoAssignedLinodesBox',
-  shouldForwardProp: omittedProps(['maxWidth']),
-})(({ maxWidth, theme }) => ({
-  background: theme.name === 'light' ? theme.bg.main : theme.bg.app,
-  display: 'flex',
-  flexDirection: 'column',
-  height: '52px',
-  justifyContent: 'center',
-  maxWidth: maxWidth ? `${maxWidth}px` : '416px',
-  paddingLeft: theme.spacing(2),
-  width: '100%',
-}));
-
-const SelectedOptionsHeader = styled('h4', {
-  label: 'SelectedOptionsHeader',
-})(({ theme }) => ({
-  color: theme.color.headline,
-  fontFamily: theme.font.bold,
-  fontSize: '14px',
-  textTransform: 'initial',
-}));
-
-const SelectedOptionsList = styled(List, {
-  label: 'SelectedOptionsList',
-  shouldForwardProp: omittedProps(['isRemovable']),
-})<{ isRemovable?: boolean }>(({ isRemovable, theme }) => ({
-  background: theme.name === 'light' ? theme.bg.main : theme.bg.app,
-  overflow: 'auto',
-  padding: !isRemovable ? '16px 0' : '5px 0',
-  width: '100%',
-}));
-
-const SelectedOptionsListItem = styled(ListItem, {
-  label: 'SelectedOptionsListItem',
-})(() => ({
-  justifyContent: 'space-between',
-  paddingBottom: 0,
-  paddingRight: 4,
-  paddingTop: 0,
-}));
-
-const StyledLabel = styled('span', { label: 'StyledLabel' })(({ theme }) => ({
-  color: theme.color.label,
-  fontFamily: theme.font.semiBold,
-  fontSize: '14px',
-}));
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectAppPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectAppPanel.tsx
index f7dad5c3cf9..a575d67e217 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectAppPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/SelectAppPanel.tsx
@@ -182,7 +182,6 @@ class SelectAppPanel extends React.PureComponent<Props> {
 }
 
 const commonStyling = (theme: Theme) => ({
-  boxShadow: `${theme.color.boxShadow} 0px -15px 10px -10px inset`,
   height: 450,
   marginBottom: theme.spacing(3),
   overflowY: 'auto' as const,
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
index ed63f2cb351..0b5c3fb8a9c 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
@@ -233,22 +233,24 @@ export class FromAppsContent extends React.Component<CombinedProps, State> {
               </StyledFilterBox>
             </StyledSearchFilterBox>
           </Paper>
-          <SelectAppPanel
-            appInstances={
-              isSearching || isFiltering ? filteredApps : appInstances
-            }
-            appInstancesError={appInstancesError}
-            appInstancesLoading={appInstancesLoading}
-            disabled={userCannotCreateLinode}
-            error={hasErrorFor('stackscript_id')}
-            flags={flags}
-            handleClick={handleSelectStackScript}
-            isFiltering={isFiltering}
-            isSearching={isSearching}
-            openDrawer={this.openDrawer}
-            searchValue={query}
-            selectedStackScriptID={selectedStackScriptID}
-          />
+          <StyledBoxShadowWrapper>
+            <SelectAppPanel
+              appInstances={
+                isSearching || isFiltering ? filteredApps : appInstances
+              }
+              appInstancesError={appInstancesError}
+              appInstancesLoading={appInstancesLoading}
+              disabled={userCannotCreateLinode}
+              error={hasErrorFor('stackscript_id')}
+              flags={flags}
+              handleClick={handleSelectStackScript}
+              isFiltering={isFiltering}
+              isSearching={isSearching}
+              openDrawer={this.openDrawer}
+              searchValue={query}
+              selectedStackScriptID={selectedStackScriptID}
+            />
+          </StyledBoxShadowWrapper>
           {!userCannotCreateLinode && selectedStackScriptLabel ? (
             <UserDefinedFieldsPanel
               updateFor={[
@@ -415,3 +417,17 @@ const StyledSearchBox = styled(Box, { label: 'StyledSearchBox' })({
   },
   flexGrow: 10,
 });
+
+const StyledBoxShadowWrapper = styled('div', {
+  label: 'StyledBoxShadowWrapper',
+})(({ theme }) => ({
+  '&:after': {
+    bottom: 0,
+    boxShadow: `${theme.color.boxShadow} 0px -15px 10px -10px inset`,
+    content: '""',
+    height: '15px',
+    position: 'absolute',
+    width: '100%',
+  },
+  position: 'relative',
+}));

From e780ffcc44f5dbda8601606093950e29a86996a7 Mon Sep 17 00:00:00 2001
From: Hana Xu <115299789+hana-linode@users.noreply.github.com>
Date: Thu, 26 Oct 2023 11:25:27 -0400
Subject: [PATCH 04/43] fix: [M3-7268] - Unassign multiple Linodes from Subnet
 (#9820)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description 📝
Fix bug where selecting a single Linode in the Unassign Linodes drawer visually selects everything in the dropdown

## How to test 🧪

### Prerequisites
- Point to the dev env and ensure your account has vpc customer tags

### Reproduction steps
- Ensure you are on the develop branch or the remote dev environment
- Create a VPC and Subnet if you don't already have one
- Go to the VPC's details page and assign some Linodes to the Subnet via the kebab action menu in the table
- Click on Unassign Linodes via the kebab action menu and try to select a Linode
  - You should see that all Linodes are visually selected instead of just the one

### Verification steps
- Confirm that you are able to select Linodes as normal and then click Unassign Linodes
- Confirm that the Subnet table removes the unassigned Linodes
- Confirm that the inline singular Unassign Linode still works as expected

---------

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
---
 ...pr-9820-upcoming-features-1698170376454.md |   5 +
 .../components/Autocomplete/Autocomplete.tsx  |   2 -
 .../VPCDetail/SubnetUnassignLinodesDrawer.tsx | 184 +++++++-----------
 .../VPCs/VPCDetail/VPCSubnetsTable.tsx        |   2 +-
 4 files changed, 79 insertions(+), 114 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9820-upcoming-features-1698170376454.md

diff --git a/packages/manager/.changeset/pr-9820-upcoming-features-1698170376454.md b/packages/manager/.changeset/pr-9820-upcoming-features-1698170376454.md
new file mode 100644
index 00000000000..11c50366776
--- /dev/null
+++ b/packages/manager/.changeset/pr-9820-upcoming-features-1698170376454.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Fix Unassign multiple Linodes from Subnet ([#9820](https://github.com/linode/manager/pull/9820))
diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.tsx
index 7a2b744de77..dc731e4d0d0 100644
--- a/packages/manager/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/manager/src/components/Autocomplete/Autocomplete.tsx
@@ -66,7 +66,6 @@ export const Autocomplete = <
     disablePortal = true,
     errorText = '',
     helperText,
-    isOptionEqualToValue,
     label,
     limitTags = 2,
     loading = false,
@@ -136,7 +135,6 @@ export const Autocomplete = <
       defaultValue={defaultValue}
       disableCloseOnSelect={multiple}
       disablePortal={disablePortal}
-      isOptionEqualToValue={isOptionEqualToValue}
       limitTags={limitTags}
       loading={loading}
       loadingText={loadingText || 'Loading...'}
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx
index 63c09ffe58e..d0375311efa 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx
@@ -3,7 +3,6 @@ import { Stack, Typography } from '@mui/material';
 import { useFormik } from 'formik';
 import * as React from 'react';
 import { useQueryClient } from 'react-query';
-import { debounce } from 'throttle-debounce';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
@@ -13,7 +12,6 @@ import { Notice } from 'src/components/Notice/Notice';
 import { RemovableSelectionsList } from 'src/components/RemovableSelectionsList/RemovableSelectionsList';
 import { SUBNET_UNASSIGN_LINODES_WARNING } from 'src/features/VPCs/constants';
 import { useFormattedDate } from 'src/hooks/useFormattedDate';
-import { usePrevious } from 'src/hooks/usePrevious';
 import { useUnassignLinode } from 'src/hooks/useUnassignLinode';
 import {
   queryKey as linodesQueryKey,
@@ -33,15 +31,16 @@ import type {
 interface Props {
   onClose: () => void;
   open: boolean;
-  selectedLinode?: Linode;
+  singleLinodeToBeUnassigned?: Linode;
   subnet?: Subnet;
   vpcId: number;
 }
 
 export const SubnetUnassignLinodesDrawer = React.memo(
-  ({ onClose, open, selectedLinode, subnet, vpcId }: Props) => {
+  ({ onClose, open, singleLinodeToBeUnassigned, subnet, vpcId }: Props) => {
     const { data: profile } = useProfile();
     const { data: grants } = useGrants();
+    const subnetId = subnet?.id;
     const vpcPermissions = grants?.vpc.find((v) => v.id === vpcId);
 
     const queryClient = useQueryClient();
@@ -54,9 +53,8 @@ export const SubnetUnassignLinodesDrawer = React.memo(
     const csvRef = React.useRef<any>();
     const formattedDate = useFormattedDate();
     const [selectedLinodes, setSelectedLinodes] = React.useState<Linode[]>(
-      selectedLinode ? [selectedLinode] : []
+      singleLinodeToBeUnassigned ? [singleLinodeToBeUnassigned] : []
     );
-    const prevSelectedLinodes = usePrevious(selectedLinodes);
     const hasError = React.useRef(false); // This flag is used to prevent the drawer from closing if an error occurs.
 
     const [
@@ -94,106 +92,74 @@ export const SubnetUnassignLinodesDrawer = React.memo(
       if (linodes) {
         setLinodeOptionsToUnassign(findAssignedLinodes() ?? []);
       }
-      return () => {
-        setLinodeOptionsToUnassign([]);
-      };
     }, [linodes, setLinodeOptionsToUnassign, findAssignedLinodes]);
 
-    // 3. Everytime our selection changes, we need to either add or remove the linode from the configInterfacesToDelete state.
-    React.useEffect(() => {
-      const prevSelectedSet = new Set(prevSelectedLinodes || []);
-      const selectedSet = new Set(selectedLinodes);
-
-      // Get the linodes that were added.
-      const updatedSelectedLinodes = selectedLinodes.filter(
-        (linode) => !prevSelectedSet.has(linode)
-      );
-
-      // If a linode was removed, remove the corresponding configInterfaceToDelete.
-      if (prevSelectedSet.size > selectedSet.size) {
-        const linodesToRemove = Array.from(prevSelectedSet).filter(
-          (linode) => !selectedSet.has(linode)
-        );
-
-        // Filter the config interfaces to delete, removing those associated with Linodes to be removed.
-        const updatedConfigInterfacesToDelete = configInterfacesToDelete.filter(
-          (_interface) => {
-            const linodeToRemove = linodesToRemove.find(
-              (linode) => linode.id === _interface.linodeId
-            );
-
-            if (linodeToRemove) {
-              return false;
-            }
-
-            return true;
-          }
-        );
-
-        return setConfigInterfacesToDelete(updatedConfigInterfacesToDelete);
-      }
-
-      debouncedGetConfigWithInterface(updatedSelectedLinodes);
-
-      // We only want to run this effect when the selectedLinodes changes.
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedLinodes]);
+    // 3. When a linode is selected, we need to get the configs with VPC interfaces.
+    const getConfigWithVPCInterface = React.useCallback(
+      async (selectedLinodes: Linode[]) => {
+        try {
+          const updatedConfigInterfaces = await Promise.all(
+            selectedLinodes.map(async (linode) => {
+              const response = await queryClient.fetchQuery(
+                [linodesQueryKey, 'linode', linode.id, 'configs'],
+                () => getAllLinodeConfigs(linode.id)
+              );
 
-    // 4. When a linode is selected, we need to get the configs with VPC interfaces.
-    const getConfigWithVPCInterface = async (selectedLinodes: Linode[]) => {
-      try {
-        const updatedConfigInterfaces = await Promise.all(
-          selectedLinodes.map(async (linode) => {
-            const response = await queryClient.fetchQuery(
-              [linodesQueryKey, 'linode', linode.id, 'configs'],
-              () => getAllLinodeConfigs(linode.id)
-            );
+              if (response) {
+                const configWithVpcInterface = response.find((config) =>
+                  config.interfaces.some(
+                    (_interface) =>
+                      _interface.subnet_id === subnetId &&
+                      _interface.purpose === 'vpc'
+                  )
+                );
 
-            if (response) {
-              const configWithVpcInterface = response.find((config) =>
-                config.interfaces.some(
+                const vpcInterface = configWithVpcInterface?.interfaces?.find(
                   (_interface) =>
-                    _interface.subnet_id === subnet?.id &&
+                    _interface.subnet_id === subnetId &&
                     _interface.purpose === 'vpc'
-                )
-              );
+                );
 
-              const vpcInterface = configWithVpcInterface?.interfaces?.find(
-                (_interface) =>
-                  _interface.subnet_id === subnet?.id &&
-                  _interface.purpose === 'vpc'
-              );
+                if (!vpcInterface || !configWithVpcInterface) {
+                  return null;
+                }
 
-              if (!vpcInterface || !configWithVpcInterface) {
-                return null;
+                return {
+                  configId: configWithVpcInterface.id,
+                  interfaceId: vpcInterface.id,
+                  linodeId: linode.id,
+                };
               }
+              return null;
+            })
+          );
+
+          // Filter out any null values and ensure item conforms to type using `is` type guard.
+          const filteredConfigInterfaces = updatedConfigInterfaces.filter(
+            (item): item is DeleteLinodeConfigInterfacePayload => item !== null
+          );
+
+          // Update the state with the new data
+          setConfigInterfacesToDelete([...filteredConfigInterfaces]);
+        } catch (error) {
+          // Capture errors if the promise.all fails
+          hasError.current = true;
+          setUnassignLinodesErrors(error as APIError[]);
+        }
+      },
+      [
+        queryClient,
+        setConfigInterfacesToDelete,
+        setUnassignLinodesErrors,
+        subnetId,
+      ]
+    );
 
-              return {
-                configId: configWithVpcInterface.id,
-                interfaceId: vpcInterface.id,
-                linodeId: linode.id,
-              };
-            }
-            return null;
-          })
-        );
-
-        // Filter out any null values and ensure item conforms to type using `is` type guard.
-        const filteredConfigInterfaces = updatedConfigInterfaces.filter(
-          (item): item is DeleteLinodeConfigInterfacePayload => item !== null
-        );
-
-        // Update the state with the new data
-        setConfigInterfacesToDelete([
-          ...configInterfacesToDelete,
-          ...filteredConfigInterfaces,
-        ]);
-      } catch (error) {
-        // Capture errors if the promise.all fails
-        hasError.current = true;
-        setUnassignLinodesErrors(error as APIError[]);
+    React.useEffect(() => {
+      if (singleLinodeToBeUnassigned) {
+        getConfigWithVPCInterface([singleLinodeToBeUnassigned]);
       }
-    };
+    }, [singleLinodeToBeUnassigned, getConfigWithVPCInterface]);
 
     const downloadCSV = async (e: React.MouseEvent<HTMLButtonElement>) => {
       e.preventDefault();
@@ -207,12 +173,6 @@ export const SubnetUnassignLinodesDrawer = React.memo(
       );
     };
 
-    // Debounce the getConfigWithVPCInterface function to prevent rapid API calls
-    const debouncedGetConfigWithInterface = React.useCallback(
-      debounce(200, false, getConfigWithVPCInterface),
-      [getConfigWithVPCInterface]
-    );
-
     const processUnassignLinodes = async () => {
       try {
         const promises = configInterfacesToDelete.map(async (_interface) => {
@@ -221,7 +181,7 @@ export const SubnetUnassignLinodesDrawer = React.memo(
               configId: _interface.configId,
               interfaceId: _interface.interfaceId,
               linodeId: _interface.linodeId,
-              subnetId: subnet?.id ?? -1,
+              subnetId: subnetId ?? -1,
               vpcId,
             });
           } catch (error) {
@@ -242,7 +202,7 @@ export const SubnetUnassignLinodesDrawer = React.memo(
       }
     };
 
-    // 5. When the user submits the form, we need to process the unassign linodes.
+    // 4. When the user submits the form, we need to process the unassign linodes.
     const handleUnassignLinode = async () => {
       await processUnassignLinodes();
 
@@ -263,11 +223,11 @@ export const SubnetUnassignLinodesDrawer = React.memo(
     );
 
     const handleOnClose = () => {
-      onClose();
       resetForm();
       setSelectedLinodes([]);
       setConfigInterfacesToDelete([]);
       setUnassignLinodesErrors([]);
+      onClose();
     };
 
     return (
@@ -289,11 +249,11 @@ export const SubnetUnassignLinodesDrawer = React.memo(
           <Notice text={unassignLinodesErrors[0].reason} variant="error" />
         )}
         <Notice
-          spacingBottom={selectedLinode ? 0 : 16}
+          spacingBottom={singleLinodeToBeUnassigned ? 0 : 16}
           text={SUBNET_UNASSIGN_LINODES_WARNING}
           variant="warning"
         />
-        {!selectedLinode && (
+        {!singleLinodeToBeUnassigned && (
           <Typography>
             Select the Linodes you would like to unassign from this subnet. Only
             Linodes in this VPC&rsquo;s region are displayed.
@@ -301,14 +261,16 @@ export const SubnetUnassignLinodesDrawer = React.memo(
         )}
         <form onSubmit={handleSubmit}>
           <Stack>
-            {!selectedLinode && (
+            {!singleLinodeToBeUnassigned && (
               <Autocomplete
+                onChange={(_, value) => {
+                  setSelectedLinodes(value);
+                  getConfigWithVPCInterface(value);
+                }}
                 disabled={userCannotUnassignLinodes}
                 errorText={linodesError ? linodesError[0].reason : undefined}
-                isOptionEqualToValue={() => true} // Ignore the multi-select warning since it isn't helpful https://github.com/mui/material-ui/issues/29727
                 label="Linodes"
                 multiple
-                onChange={(_, value) => setSelectedLinodes(value)}
                 options={linodeOptionsToUnassign}
                 placeholder="Select Linodes or type to search"
                 renderTags={() => null}
@@ -317,7 +279,7 @@ export const SubnetUnassignLinodesDrawer = React.memo(
             )}
             <RemovableSelectionsList
               headerText={`Linodes to be Unassigned from Subnet (${selectedLinodes.length})`}
-              isRemovable={selectedLinode ? false : true}
+              isRemovable={!Boolean(singleLinodeToBeUnassigned)}
               noDataText={'Select Linodes to be Unassigned from Subnet.'}
               onRemove={handleRemoveLinode}
               selectionData={selectedLinodes}
@@ -341,7 +303,7 @@ export const SubnetUnassignLinodesDrawer = React.memo(
             <ActionsPanel
               primaryButtonProps={{
                 'data-testid': 'unassign-submit-button',
-                disabled: selectedLinodes.length === 0,
+                disabled: configInterfacesToDelete.length === 0,
                 label: 'Unassign Linodes',
                 type: 'submit',
               }}
diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx
index b338229b44f..d271d260d9e 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx
@@ -308,7 +308,7 @@ export const VPCSubnetsTable = (props: Props) => {
             setSelectedLinode(undefined);
           }}
           open={subnetUnassignLinodesDrawerOpen}
-          selectedLinode={selectedLinode}
+          singleLinodeToBeUnassigned={selectedLinode}
           subnet={selectedSubnet}
           vpcId={vpcId}
         />

From 5033391366b74e3eb53d2ffb1fc8b72ce7f5c856 Mon Sep 17 00:00:00 2001
From: sujai-git <136849150+sujai-git@users.noreply.github.com>
Date: Thu, 26 Oct 2023 16:35:54 -0400
Subject: [PATCH 05/43] test: [DBASS1-574] - Adding test coverage for disk
 metrics added to UI. (#9833)

* Adding test coverage for disk metrics added to UI

* Add changeset

---------

Co-authored-by: Joe D'Amore <jdamore@linode.com>
---
 packages/manager/.changeset/pr-9833-tests-1698335199212.md   | 5 +++++
 .../cypress/e2e/core/databases/update-database.spec.ts       | 2 ++
 .../cypress/e2e/core/notificationsAndEvents/events.spec.ts   | 1 +
 3 files changed, 8 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-9833-tests-1698335199212.md

diff --git a/packages/manager/.changeset/pr-9833-tests-1698335199212.md b/packages/manager/.changeset/pr-9833-tests-1698335199212.md
new file mode 100644
index 00000000000..9049e95d0e2
--- /dev/null
+++ b/packages/manager/.changeset/pr-9833-tests-1698335199212.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add DBaaS test coverage for disk metrics ([#9833](https://github.com/linode/manager/pull/9833))
diff --git a/packages/manager/cypress/e2e/core/databases/update-database.spec.ts b/packages/manager/cypress/e2e/core/databases/update-database.spec.ts
index 2aaee4bd0d7..5c7e492b8a5 100644
--- a/packages/manager/cypress/e2e/core/databases/update-database.spec.ts
+++ b/packages/manager/cypress/e2e/core/databases/update-database.spec.ts
@@ -186,6 +186,8 @@ describe('Update database clusters', () => {
 
           cy.get('[data-qa-cluster-config]').within(() => {
             cy.findByText(configuration.region.label).should('be.visible');
+            cy.findByText(database.used_disk_size_gb + " GB").should('be.visible');
+            cy.findByText(database.total_disk_size_gb + " GB").should('be.visible');
           });
 
           cy.get('[data-qa-connection-details]').within(() => {
diff --git a/packages/manager/cypress/e2e/core/notificationsAndEvents/events.spec.ts b/packages/manager/cypress/e2e/core/notificationsAndEvents/events.spec.ts
index d0e78d7ff77..3bd441c7a18 100644
--- a/packages/manager/cypress/e2e/core/notificationsAndEvents/events.spec.ts
+++ b/packages/manager/cypress/e2e/core/notificationsAndEvents/events.spec.ts
@@ -16,6 +16,7 @@ const eventActions: RecPartial<EventAction>[] = [
   'disk_duplicate',
   'disk_resize',
   'disk_update',
+  'database_low_disk_space',
   'entity_transfer_accept',
   'entity_transfer_cancel',
   'entity_transfer_create',

From 25ff801e366e3074a25c078095f974b2fe5a6a0e Mon Sep 17 00:00:00 2001
From: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
Date: Thu, 26 Oct 2023 17:20:17 -0400
Subject: [PATCH 06/43] =?UTF-8?q?fix:=20[M3-7285]=20=E2=80=93=20Tweak=20wh?=
 =?UTF-8?q?en=20and=20where=20`public`=20interfaces=20are=20included=20in?=
 =?UTF-8?q?=20Linode=20Create=20payload=20(#9834)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pr-9834-changed-1698111109868.md          |  5 +++
 .../Linodes/LinodesCreate/LinodeCreate.tsx    | 31 +++++++++++++++----
 2 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9834-changed-1698111109868.md

diff --git a/packages/manager/.changeset/pr-9834-changed-1698111109868.md b/packages/manager/.changeset/pr-9834-changed-1698111109868.md
new file mode 100644
index 00000000000..b9ea3861022
--- /dev/null
+++ b/packages/manager/.changeset/pr-9834-changed-1698111109868.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Logic governing inclusion of public interfaces in Linode Create payload ([#9834](https://github.com/linode/manager/pull/9834))
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
index 77d96377a6f..00d5f26d2bb 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
@@ -813,7 +813,7 @@ export class LinodeCreate extends React.PureComponent<
         vpc_id: this.props.selectedVPCId,
       };
 
-      interfaces.push(vpcInterfaceData);
+      interfaces.unshift(vpcInterfaceData);
     }
 
     if (
@@ -828,11 +828,6 @@ export class LinodeCreate extends React.PureComponent<
         label: this.props.vlanLabel,
         purpose: 'vlan',
       });
-
-      // If there are no VPC interfaces, insert a default public interface in interfaces[0]
-      if (!interfaces.some((_interface) => _interface.purpose === 'vpc')) {
-        interfaces.unshift(defaultPublicInterface);
-      }
     }
 
     if (this.props.userData) {
@@ -841,9 +836,33 @@ export class LinodeCreate extends React.PureComponent<
       };
     }
 
+    const vpcAssigned = interfaces.some(
+      (_interface) => _interface.purpose === 'vpc'
+    );
+    const vlanAssigned = interfaces.some(
+      (_interface) => _interface.purpose === 'vlan'
+    );
+
     // Only submit 'interfaces' in the payload if there are VPCs
     // or VLANs
     if (interfaces.length > 0) {
+      // Determine position of the default public interface
+
+      // Case 1: VLAN assigned, no VPC assigned
+      if (!vpcAssigned) {
+        interfaces.unshift(defaultPublicInterface);
+      }
+
+      // Case 2: VPC assigned, no VLAN assigned, Private IP enabled
+      if (!vlanAssigned && this.props.privateIPEnabled) {
+        interfaces.push(defaultPublicInterface);
+      }
+
+      // Case 3: VPC and VLAN assigned + Private IP enabled
+      if (vpcAssigned && vlanAssigned && this.props.privateIPEnabled) {
+        interfaces.push(defaultPublicInterface);
+      }
+
       payload['interfaces'] = interfaces;
     }
 

From 654d1bf4b147b38b58d9fe38c3202d50e0de8d61 Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Thu, 26 Oct 2023 22:07:15 -0400
Subject: [PATCH 07/43] refactor: [M3-7329] - MUI Migration - `SRC > Components
 > Crumbs` (#9841)

* run tss migration and find and replace import

* fix breadcrumb story

* Added changeset: MUI Migration - SRC > Components > Crumbs

* remove outdated docs and feedback

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
---
 .../pr-9841-tech-stories-1698261567678.md     |   5 +
 .../Breadcrumb/Breadcrumb.stories.mdx         | 137 ------------------
 .../Breadcrumb/Breadcrumb.stories.tsx         |  27 ++++
 .../src/components/Breadcrumb/Breadcrumb.tsx  |  36 ++++-
 .../src/components/Breadcrumb/Crumbs.tsx      |  30 ++--
 .../src/components/Breadcrumb/README.md       |  45 ------
 .../CheckoutSummary/CheckoutSummary.tsx       |   2 +-
 .../DatabaseLanding/DatabaseActionMenu.tsx    |   2 +-
 .../src/features/Domains/DomainActionMenu.tsx |   2 +-
 .../LinodeTransferTable.tsx                   |   2 +-
 .../Rules/FirewallRuleActionMenu.tsx          |   2 +-
 .../FirewallLanding/FirewallActionMenu.tsx    |   2 +-
 .../ClusterList/ClusterActionMenu.tsx         |   2 +-
 .../LinodeConfigs/LinodeConfigActionMenu.tsx  |   2 +-
 .../LinodeNetworkingActionMenu.tsx            |   2 +-
 .../LinodesLanding/LinodeActionMenu.tsx       |   2 +-
 .../MigrateLinode/MigrationPricing.tsx        |   2 +-
 .../Credentials/CredentialActionMenu.tsx      |   2 +-
 .../NodeBalancers/NodeBalancerCreate.tsx      |   2 +-
 .../NodeBalancerActionMenu.tsx                |   2 +-
 .../BucketDetail/FolderActionMenu.tsx         |   2 +-
 .../BucketDetail/ObjectActionMenu.tsx         |   2 +-
 .../Profile/APITokens/APITokenMenu.tsx        |   2 +-
 .../OAuthClients/OAuthClientActionMenu.tsx    |   2 +-
 .../StackScriptActionMenu.tsx                 |   2 +-
 .../src/features/Users/UsersActionMenu.tsx    |   2 +-
 .../features/Volumes/VolumesActionMenu.tsx    |   2 +-
 27 files changed, 95 insertions(+), 227 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9841-tech-stories-1698261567678.md
 delete mode 100644 packages/manager/src/components/Breadcrumb/Breadcrumb.stories.mdx
 create mode 100644 packages/manager/src/components/Breadcrumb/Breadcrumb.stories.tsx
 delete mode 100644 packages/manager/src/components/Breadcrumb/README.md

diff --git a/packages/manager/.changeset/pr-9841-tech-stories-1698261567678.md b/packages/manager/.changeset/pr-9841-tech-stories-1698261567678.md
new file mode 100644
index 00000000000..9c822a88838
--- /dev/null
+++ b/packages/manager/.changeset/pr-9841-tech-stories-1698261567678.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+MUI Migration - SRC > Components > Crumbs ([#9841](https://github.com/linode/manager/pull/9841))
diff --git a/packages/manager/src/components/Breadcrumb/Breadcrumb.stories.mdx b/packages/manager/src/components/Breadcrumb/Breadcrumb.stories.mdx
deleted file mode 100644
index 30dd5d58888..00000000000
--- a/packages/manager/src/components/Breadcrumb/Breadcrumb.stories.mdx
+++ /dev/null
@@ -1,137 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Breadcrumb } from './Breadcrumb';
-import UserIcon from 'src/assets/icons/user.svg';
-
-<Meta
-  title="Components/Breadcrumb"
-  component={Breadcrumb}
-  args={{
-    pathname: '/linodes/9872893679817/test/lastcrumb',
-    firstAndLastOnly: false,
-  }}
-  argTypes={{
-    pathname: {
-      description:
-        'A string representation of the path of a resource. Each crumb is separated by a `/` character.',
-    },
-    crumbOverrides: {
-      description:
-        'An array of objects that can be used to customize any crumb.',
-      control: false,
-    },
-    labelTitle: {
-      description:
-        'A string that can be used to set a custom title for the last crumb.',
-    },
-    labelOptions: {
-      description: 'An object that can be used to configure the final crumb.',
-      control: false,
-    },
-    firstAndLastOnly: {
-      description:
-        'A boolean that if true will only show the first and last crumb.',
-    },
-    onEditHandlers: {
-      description:
-        'An object that can be used to define functions, errors, and crumb title for an editable final crumb',
-      control: false,
-    },
-    removeCrumbX: {
-      description:
-        'A number indicating the position of the crumb to remove. Not zero indexed.',
-    },
-  }}
-/>
-
-export const BreadcrumbTemplate = (args, context) => <Breadcrumb {...args} />;
-
-export const EditableBreadcrumbTemplate = (args, context) => {
-  const [text, setText] = React.useState('Editable Text!');
-  return (
-    <Breadcrumb
-      labelOptions={{
-        linkTo: '',
-      }}
-      onEditHandlers={{
-        editableTextTitle: text,
-        onEdit: (value) => Promise.resolve(setText(value)),
-        onCancel: () => {},
-      }}
-      {...args}
-    />
-  );
-};
-
-# Breadcrumb
-
-## Usage
-
-- Include the current page as the last item in the breadcrumb trail.
-- In the breadcrumb trail, the breadcrumb corresponding the the current page should not be a link.
-
-<Canvas>
-  <Story name="Default">{BreadcrumbTemplate.bind({})}</Story>
-</Canvas>
-
-<ArgsTable
-  story="Default"
-  sort="requiredFirst"
-  exclude={['className']}
-  sort="requiredFirst"
-/>
-
-### Breadcrumb with Subtitle
-
----
-
-<Canvas>
-  <Story
-    name="Breadcrumb with subtitle"
-    args={{
-      labelOptions: {
-        subtitle: 'subtitle',
-      },
-    }}
-  >
-    {BreadcrumbTemplate.bind({})}
-  </Story>
-</Canvas>
-
-### Breadcrumb with Prefix Component
-
----
-
-<Canvas>
-  <Story
-    name="Breadcrumb with prefix component"
-    args={{
-      labelOptions: {
-        prefixComponent: (
-          <UserIcon
-            style={{
-              margin: '2px 0 0 0',
-              color: '#606469',
-              borderRadius: '50%',
-              width: 32,
-              height: 32,
-              animation: '$fadeIn 150ms linear forwards',
-            }}
-          />
-        ),
-      },
-    }}
-  >
-    {BreadcrumbTemplate.bind({})}
-  </Story>
-</Canvas>
-
-### Breadcrumb with Editable Text
-
----
-
-<Canvas>
-  <Story name="Breadcrumb with editable text">
-    {EditableBreadcrumbTemplate.bind({})}
-  </Story>
-</Canvas>
diff --git a/packages/manager/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/manager/src/components/Breadcrumb/Breadcrumb.stories.tsx
new file mode 100644
index 00000000000..9317926073b
--- /dev/null
+++ b/packages/manager/src/components/Breadcrumb/Breadcrumb.stories.tsx
@@ -0,0 +1,27 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Breadcrumb } from './Breadcrumb';
+
+const meta: Meta<typeof Breadcrumb> = {
+  component: Breadcrumb,
+  title: 'Components/Breadcrumb',
+};
+
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Default: Story = {
+  args: {
+    firstAndLastOnly: false,
+    onEditHandlers: {
+      editableTextTitle: 'test',
+      onCancel: () => action('onCancel'),
+      onEdit: async () => action('onEdit'),
+    },
+    pathname: '/linodes/9872893679817/test/lastcrumb',
+  },
+  render: (args) => <Breadcrumb {...args} />,
+};
+
+export default meta;
diff --git a/packages/manager/src/components/Breadcrumb/Breadcrumb.tsx b/packages/manager/src/components/Breadcrumb/Breadcrumb.tsx
index c45672bac29..3b964df0229 100644
--- a/packages/manager/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/manager/src/components/Breadcrumb/Breadcrumb.tsx
@@ -6,14 +6,41 @@ import { CrumbOverridesProps, Crumbs } from './Crumbs';
 import { EditableProps, LabelProps } from './types';
 
 export interface BreadcrumbProps {
+  /**
+   * Data attributes passed to the root div for testing.
+   */
   breadcrumbDataAttrs?: { [key: string]: boolean };
+  /**
+   * Optional className passed to the root div.
+   */
   className?: string;
+  /**
+   * An array of objects that can be used to customize any crumb.
+   */
   crumbOverrides?: CrumbOverridesProps[];
+  /**
+   * A boolean that if true will only show the first and last crumb.
+   */
   firstAndLastOnly?: boolean;
+  /**
+   * An object that can be used to configure the final crumb.
+   */
   labelOptions?: LabelProps;
+  /**
+   * A string that can be used to set a custom title for the last crumb.
+   */
   labelTitle?: string;
+  /**
+   * An object that can be used to define functions, errors, and crumb title for an editable final crumb.
+   */
   onEditHandlers?: EditableProps;
+  /*
+   * A string representation of the path of a resource. Each crumb is separated by a `/` character.
+   */
   pathname: string;
+  /**
+   * A number indicating the position of the crumb to remove. Not zero indexed.
+   */
   removeCrumbX?: number;
 }
 
@@ -42,7 +69,12 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
 }));
 
-const Breadcrumb = (props: BreadcrumbProps) => {
+/**
+ * ## Usage
+ * - Include the current page as the last item in the breadcrumb trail.
+ * - In the breadcrumb trail, the breadcrumb corresponding the the current page should not be a link.
+ */
+export const Breadcrumb = (props: BreadcrumbProps) => {
   const { classes, cx } = useStyles();
 
   const {
@@ -101,5 +133,3 @@ const removeByIndex = (list: string[], indexToRemove: number) => {
     return index !== indexToRemove;
   });
 };
-
-export { Breadcrumb };
diff --git a/packages/manager/src/components/Breadcrumb/Crumbs.tsx b/packages/manager/src/components/Breadcrumb/Crumbs.tsx
index aad932bd1a5..129376bead4 100644
--- a/packages/manager/src/components/Breadcrumb/Crumbs.tsx
+++ b/packages/manager/src/components/Breadcrumb/Crumbs.tsx
@@ -1,9 +1,8 @@
 import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
-import classNames from 'classnames';
 import { LocationDescriptor } from 'history';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { makeStyles } from 'tss-react/mui';
 
 import { Typography } from 'src/components/Typography';
 
@@ -11,7 +10,7 @@ import { FinalCrumb } from './FinalCrumb';
 import { FinalCrumbPrefix } from './FinalCrumbPrefix';
 import { EditableProps, LabelProps } from './types';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   crumb: {
     fontSize: '1.125rem',
     lineHeight: 'normal',
@@ -56,7 +55,7 @@ interface Props {
 }
 
 export const Crumbs = React.memo((props: Props) => {
-  const classes = useStyles();
+  const { classes, cx } = useStyles();
 
   const {
     crumbOverrides,
@@ -94,9 +93,7 @@ export const Crumbs = React.memo((props: Props) => {
               data-qa-link
             >
               <Typography
-                className={classNames({
-                  [classes.crumb]: true,
-                  [classes.crumbLink]: true,
+                className={cx(classes.crumb, classes.crumbLink, {
                   [classes.noCap]: override && override.noCap,
                 })}
                 data-qa-link-text
@@ -115,32 +112,23 @@ export const Crumbs = React.memo((props: Props) => {
           </div>
         );
       })}
-
-      {/*
-        for prepending some SVG or other element before the final crumb.
-        See users detail page for example
-      */}
+      {/* for prepending some SVG or other element before the final crumb. */}
       {labelOptions && labelOptions.prefixComponent && (
         <FinalCrumbPrefix
           prefixComponent={labelOptions.prefixComponent}
           prefixStyle={labelOptions.prefixStyle}
         />
       )}
-
-      {/*
-        the final crumb has the possibility of being a link, editable text
-        or just static text
-      */}
+      {/* the final crumb has the possibility of being a link, editable text or just static text */}
       <FinalCrumb
         crumb={labelTitle || lastCrumb}
         labelOptions={labelOptions}
         onEditHandlers={onEditHandlers}
       />
-
       {/*
-        for appending some SVG or other element after the final crumb.
-        See support ticket detail as an example
-      */}
+      for appending some SVG or other element after the final crumb.
+      See support ticket detail as an example
+    */}
       {labelOptions &&
         labelOptions.suffixComponent &&
         labelOptions.suffixComponent}
diff --git a/packages/manager/src/components/Breadcrumb/README.md b/packages/manager/src/components/Breadcrumb/README.md
deleted file mode 100644
index f7de19527b2..00000000000
--- a/packages/manager/src/components/Breadcrumb/README.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Breadcrumb
-
-The purpose of the Breadcrumb component is to add a versatile and dynamic solution for the manager navigation patterns.
-
-## Description
-
-The component utilizes the prop.location provided by RouteComponentProps to build the breadCrumb (based on `location.pathname`). It provides a few props for customizing the output. The last item of the crumbs is removed by default in order to pick either a custom one, an editable text component, or the default crumb we slice back in.
-
-### Props
-
-- `pathname` (string, required). Should be the props.location provided by react-router-dom.
-- `labelTitle` (string, optional). Customize the last crumb text.
-- `labelOptions` (LabelProps, optional). Provide options to customize the label overridden above. See labelOptions Props below.
-- `removeCrumbX` (number, optional). Remove a crumb by specifying its actual position in the array/url.
-- `crumbOverrides` (CrumbOverridesProps[], optional). The override for a crumb works by the position (required) of the crumb (index + 1). Just provide the actual position of the crumb in the array. We can either override the label or link or both. Omitted values will inherit the path default. It is an array, so we can replace as many as needed.
-- `onEditHandlers` (EditableProps, optional). Provide an editable text field for the last crumb (ex: linodes and nodeBalancers details).
-
-### labelOptions Props
-
-- `linkTo` (string, optional). Make label a link.
-- `prefixComponent` (JSX.Element | null, optional). Provides a prefix component. ex: user detail avatar.
-- `prefixStyle` (CSSProperties, optional), customize the styles for the `prefixComponent`.
-- `suffixComponent`: (JSX.Element | null, optional). Provides a suffix component. ex: ticket detail status chip.
-- `subtitle`: (string, optional). Provide a subtitle to the label. ex: ticket detail submission information.
-- `noCap`: (boolean, optional). Override the default capitalization for the label.
-
-## Usage
-
-The only required prop is `pathname`. Since we need it to be a string passed from RouteComponentProps, we do need to import the props along with `withRouter` for the export. ex:
-
-```jsx
-import { RouteComponentProps, withRouter } from 'react-router-dom';
-
-type Props = RouteComponentProps<{}>;
-
-class MyComponent extends React.Component<Props> {
-  render() {
-    return <Breadcrumb pathname={this.props.location.pathname} />;
-  }
-}
-
-export default withRouter(MyComponent);
-```
-
-You can otherwise refer to the storybook examples to implement the breadcrumb as needed.
diff --git a/packages/manager/src/components/CheckoutSummary/CheckoutSummary.tsx b/packages/manager/src/components/CheckoutSummary/CheckoutSummary.tsx
index 5fac4667a1a..40ad820d84f 100644
--- a/packages/manager/src/components/CheckoutSummary/CheckoutSummary.tsx
+++ b/packages/manager/src/components/CheckoutSummary/CheckoutSummary.tsx
@@ -1,6 +1,6 @@
+import { useTheme } from '@mui/material';
 import { Theme, styled } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
 import * as React from 'react';
 
 import { Grid } from '../Grid';
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseActionMenu.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseActionMenu.tsx
index f2aa9005a72..ef09ed73fcb 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseActionMenu.tsx
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseActionMenu.tsx
@@ -1,6 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
diff --git a/packages/manager/src/features/Domains/DomainActionMenu.tsx b/packages/manager/src/features/Domains/DomainActionMenu.tsx
index f8a0d14dd22..9fec86feb9f 100644
--- a/packages/manager/src/features/Domains/DomainActionMenu.tsx
+++ b/packages/manager/src/features/Domains/DomainActionMenu.tsx
@@ -1,7 +1,7 @@
 import { Domain } from '@linode/api-v4/lib/domains';
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import { splitAt } from 'ramda';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx
index f52c7073a7c..3c700bfb30a 100644
--- a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx
+++ b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/LinodeTransferTable.tsx
@@ -1,7 +1,7 @@
 import { Linode } from '@linode/api-v4/lib/linodes';
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { Hidden } from 'src/components/Hidden';
diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleActionMenu.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleActionMenu.tsx
index 2879fe76b02..f4155f593a6 100644
--- a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleActionMenu.tsx
+++ b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleActionMenu.tsx
@@ -1,6 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 
 import {
diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallActionMenu.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallActionMenu.tsx
index 9609e3415dd..0f00cae0113 100644
--- a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallActionMenu.tsx
+++ b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallActionMenu.tsx
@@ -1,7 +1,7 @@
 import { FirewallStatus } from '@linode/api-v4/lib/firewalls';
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { Action, ActionMenu } from 'src/components/ActionMenu';
diff --git a/packages/manager/src/features/Kubernetes/ClusterList/ClusterActionMenu.tsx b/packages/manager/src/features/Kubernetes/ClusterList/ClusterActionMenu.tsx
index 13064fa4f38..4c6885cd89c 100644
--- a/packages/manager/src/features/Kubernetes/ClusterList/ClusterActionMenu.tsx
+++ b/packages/manager/src/features/Kubernetes/ClusterList/ClusterActionMenu.tsx
@@ -1,7 +1,7 @@
 import { getKubeConfig } from '@linode/api-v4/lib/kubernetes';
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.tsx
index 5f559e1bad7..dd12c2fa8ee 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.tsx
@@ -1,7 +1,7 @@
 import { Config } from '@linode/api-v4/lib/linodes';
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import { splitAt } from 'ramda';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx
index 024346b4111..a1897950faa 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx
@@ -1,7 +1,7 @@
 import { IPAddress, IPRange } from '@linode/api-v4/lib/networking';
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import { isEmpty } from 'ramda';
 import * as React from 'react';
 
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodeActionMenu.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodeActionMenu.tsx
index 2d0d597cbfb..36a297730bf 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/LinodeActionMenu.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodeActionMenu.tsx
@@ -2,7 +2,7 @@ import { LinodeBackups, LinodeType } from '@linode/api-v4/lib/linodes';
 import { Region } from '@linode/api-v4/lib/regions';
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
diff --git a/packages/manager/src/features/Linodes/MigrateLinode/MigrationPricing.tsx b/packages/manager/src/features/Linodes/MigrateLinode/MigrationPricing.tsx
index aa4e4322fe5..936017a4655 100644
--- a/packages/manager/src/features/Linodes/MigrateLinode/MigrationPricing.tsx
+++ b/packages/manager/src/features/Linodes/MigrateLinode/MigrationPricing.tsx
@@ -1,6 +1,6 @@
 import { PriceObject } from '@linode/api-v4';
 import { styled } from '@mui/material/styles';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
diff --git a/packages/manager/src/features/Managed/Credentials/CredentialActionMenu.tsx b/packages/manager/src/features/Managed/Credentials/CredentialActionMenu.tsx
index 04cab62d328..40a88af1771 100644
--- a/packages/manager/src/features/Managed/Credentials/CredentialActionMenu.tsx
+++ b/packages/manager/src/features/Managed/Credentials/CredentialActionMenu.tsx
@@ -1,6 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { ActionMenu, Action } from 'src/components/ActionMenu';
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx
index 37be0c2a2b5..ae40e9e4a7e 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx
@@ -1,6 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import {
   append,
   clone,
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerActionMenu.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerActionMenu.tsx
index 21c36e91bc2..dd5e2e85c8e 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerActionMenu.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerActionMenu.tsx
@@ -1,6 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/FolderActionMenu.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/FolderActionMenu.tsx
index 35044326b53..27259e0c091 100644
--- a/packages/manager/src/features/ObjectStorage/BucketDetail/FolderActionMenu.tsx
+++ b/packages/manager/src/features/ObjectStorage/BucketDetail/FolderActionMenu.tsx
@@ -1,6 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { ActionMenu, Action } from 'src/components/ActionMenu';
diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectActionMenu.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectActionMenu.tsx
index 6949b6cc140..ee01f16219c 100644
--- a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectActionMenu.tsx
+++ b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectActionMenu.tsx
@@ -1,6 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { ActionMenu, Action } from 'src/components/ActionMenu';
diff --git a/packages/manager/src/features/Profile/APITokens/APITokenMenu.tsx b/packages/manager/src/features/Profile/APITokens/APITokenMenu.tsx
index cd9bb11bd9a..0f9ae41f728 100644
--- a/packages/manager/src/features/Profile/APITokens/APITokenMenu.tsx
+++ b/packages/manager/src/features/Profile/APITokens/APITokenMenu.tsx
@@ -1,7 +1,7 @@
 import { Token } from '@linode/api-v4/lib/profile';
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { ActionMenu, Action } from 'src/components/ActionMenu';
diff --git a/packages/manager/src/features/Profile/OAuthClients/OAuthClientActionMenu.tsx b/packages/manager/src/features/Profile/OAuthClients/OAuthClientActionMenu.tsx
index 354b1509f24..65841d984a4 100644
--- a/packages/manager/src/features/Profile/OAuthClients/OAuthClientActionMenu.tsx
+++ b/packages/manager/src/features/Profile/OAuthClients/OAuthClientActionMenu.tsx
@@ -1,6 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { ActionMenu, Action } from 'src/components/ActionMenu';
diff --git a/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptActionMenu.tsx b/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptActionMenu.tsx
index 1160c2004d3..4afd1a31f1e 100644
--- a/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptActionMenu.tsx
+++ b/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptActionMenu.tsx
@@ -1,6 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
diff --git a/packages/manager/src/features/Users/UsersActionMenu.tsx b/packages/manager/src/features/Users/UsersActionMenu.tsx
index e2deb1ef9d3..59a0d3e2128 100644
--- a/packages/manager/src/features/Users/UsersActionMenu.tsx
+++ b/packages/manager/src/features/Users/UsersActionMenu.tsx
@@ -1,6 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
diff --git a/packages/manager/src/features/Volumes/VolumesActionMenu.tsx b/packages/manager/src/features/Volumes/VolumesActionMenu.tsx
index 8956265be33..fbae965da1c 100644
--- a/packages/manager/src/features/Volumes/VolumesActionMenu.tsx
+++ b/packages/manager/src/features/Volumes/VolumesActionMenu.tsx
@@ -1,7 +1,7 @@
 import { Volume } from '@linode/api-v4';
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 import { splitAt } from 'ramda';
 import * as React from 'react';
 

From 9d323efa71e5565f24c2a7ad1f5560028189a856 Mon Sep 17 00:00:00 2001
From: Hana Xu <115299789+hana-linode@users.noreply.github.com>
Date: Fri, 27 Oct 2023 14:37:46 -0400
Subject: [PATCH 08/43] feat: [M3-7169, M3-7193, M3-7211, M3-7255, M3-7258] -
 VPC UX feedback (#9832)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description 📝
Address UX feedback for VPC

## Changes  🔄
- Updated VPC empty landing text
- New VPC icon
- Minor UI changes to Assign Linode to Subnet drawer
- Updated tooltip text for the Auto-assign a VPC IPv4 address checkbox
- Minor text UI changes to VPC details page

## How to test 🧪

### Prerequisites
- Point to the dev env and ensure your account has vpc customer tags

### Verification steps
Verify the ticket changes requested and check these flows:
- VPC empty landing (set line 87 to true in `VPCLanding`)
- VPC side menu and create menu icons
- Assign Linode to Subnet drawer
- VPC details page (changes are more noticeable in Safari)
---
 ...pr-9832-upcoming-features-1698162070035.md |  5 ++
 .../e2e/core/vpc/vpc-details-page.spec.ts     |  2 +-
 .../e2e/core/vpc/vpc-landing-page.spec.ts     | 11 ++-
 .../src/assets/icons/entityIcons/vpc.svg      |  7 +-
 .../Linodes/LinodesCreate/VPCPanel.tsx        |  7 +-
 .../src/features/OneClickApps/oneClickApps.ts | 21 +++---
 .../VPCDetail/SubnetAssignLinodesDrawer.tsx   | 68 ++++++++++++-------
 .../VPCs/VPCDetail/SubnetLinodeRow.tsx        |  4 +-
 .../VPCDetail/SubnetUnassignLinodesDrawer.tsx | 34 +++++-----
 .../src/features/VPCs/VPCDetail/VPCDetail.tsx | 23 +++++--
 .../VPCs/VPCLanding/VPCEmptyState.tsx         |  3 +-
 .../VPCs/VPCLanding/VPCEmptyStateData.tsx     |  9 ++-
 .../VPCs/VPCLanding/VPCLanding.test.tsx       |  2 +-
 .../features/VPCs/VPCLanding/VPCLanding.tsx   |  5 +-
 .../manager/src/features/VPCs/constants.ts    |  5 ++
 15 files changed, 123 insertions(+), 83 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9832-upcoming-features-1698162070035.md

diff --git a/packages/manager/.changeset/pr-9832-upcoming-features-1698162070035.md b/packages/manager/.changeset/pr-9832-upcoming-features-1698162070035.md
new file mode 100644
index 00000000000..204313ac97b
--- /dev/null
+++ b/packages/manager/.changeset/pr-9832-upcoming-features-1698162070035.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+VPC UX feedback ([#9832](https://github.com/linode/manager/pull/9832))
diff --git a/packages/manager/cypress/e2e/core/vpc/vpc-details-page.spec.ts b/packages/manager/cypress/e2e/core/vpc/vpc-details-page.spec.ts
index d91f38034de..cc8341ef251 100644
--- a/packages/manager/cypress/e2e/core/vpc/vpc-details-page.spec.ts
+++ b/packages/manager/cypress/e2e/core/vpc/vpc-details-page.spec.ts
@@ -117,7 +117,7 @@ describe('VPC details page', () => {
 
     // Confirm that user is redirected to VPC landing page.
     cy.url().should('endWith', '/vpcs');
-    cy.findByText('Create a private and isolated network.');
+    cy.findByText('Create a private and isolated network');
   });
 
   /**
diff --git a/packages/manager/cypress/e2e/core/vpc/vpc-landing-page.spec.ts b/packages/manager/cypress/e2e/core/vpc/vpc-landing-page.spec.ts
index 40639e974f7..855eb7ff1b5 100644
--- a/packages/manager/cypress/e2e/core/vpc/vpc-landing-page.spec.ts
+++ b/packages/manager/cypress/e2e/core/vpc/vpc-landing-page.spec.ts
@@ -12,6 +12,7 @@ import { vpcFactory } from '@src/factories';
 import { ui } from 'support/ui';
 import { randomLabel, randomPhrase } from 'support/util/random';
 import { chooseRegion, getRegionById } from 'support/util/regions';
+import { VPC_LABEL } from 'src/features/VPCs/constants';
 
 // TODO Remove feature flag mocks when feature flag is removed from codebase.
 describe('VPC landing page', () => {
@@ -65,10 +66,8 @@ describe('VPC landing page', () => {
     cy.wait(['@getFeatureFlags', '@getClientStream', '@getVPCs']);
 
     // Confirm that empty state is shown and that each section is present.
-    cy.findByText('VPCs').should('be.visible');
-    cy.findByText('Create a private and isolated network.').should(
-      'be.visible'
-    );
+    cy.findByText(VPC_LABEL).should('be.visible');
+    cy.findByText('Create a private and isolated network').should('be.visible');
     cy.findByText('Getting Started Guides').should('be.visible');
     cy.findByText('Video Playlist').should('be.visible');
 
@@ -268,9 +267,7 @@ describe('VPC landing page', () => {
     cy.wait(['@deleteVPC', '@getVPCs']);
     ui.toast.assertMessage('VPC deleted successfully.');
     cy.findByText(mockVPCs[1].label).should('not.exist');
-    cy.findByText('Create a private and isolated network.').should(
-      'be.visible'
-    );
+    cy.findByText('Create a private and isolated network').should('be.visible');
   });
 
   /*
diff --git a/packages/manager/src/assets/icons/entityIcons/vpc.svg b/packages/manager/src/assets/icons/entityIcons/vpc.svg
index 14ca73da488..c58f06cd668 100644
--- a/packages/manager/src/assets/icons/entityIcons/vpc.svg
+++ b/packages/manager/src/assets/icons/entityIcons/vpc.svg
@@ -1,5 +1,4 @@
-<svg width="24" height="19" viewBox="0 0 24 19" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.59883 5.80765C4.8061 5.80765 5.00795 5.82646 5.20822 5.85359C5.38275 2.59091 8.0497 0 11.3149 0C13.9793 0 16.009 1.96509 16.8477 4.37348C17.2955 4.25456 18.0007 3.95205 18.4844 3.95205C21.5305 3.95205 24 6.45326 24 9.53863C24 12.6239 21.5305 15.1251 18.4844 15.1251C18.1603 15.1251 17.7573 15.1251 17.2991 15.1251V15.6039C17.3017 17.5763 16.002 18.9082 13.9463 19H10.0455C9.1127 19 8.30896 18.6819 7.72098 18.0811C6.7872 17.1288 6.69681 15.8156 6.70123 15.3045V15.1251C5.75487 15.1251 5.008 15.1251 4.59888 15.1251C2.05914 15.1251 4.76837e-05 13.0401 4.76837e-05 10.4658C0 7.89375 2.05909 5.80765 4.59883 5.80765ZM7.63674 15.3045C7.62699 16.4081 8.14551 18.057 10.0534 18.0519H13.9463C15.5018 17.983 16.3656 17.0579 16.3638 15.6049V15.1251V12.8669C16.3715 11.4004 15.5026 11.0614 15.5026 11.0614V9.08803C15.5026 8.67292 14.8597 6.19359 11.947 6.21342C9.08337 6.23117 8.42354 8.67292 8.42354 9.08803V11.0614C8.42354 11.0614 7.65167 11.4568 7.63679 12.8669V15.1251V15.3045H7.63674Z" fill="currentColor"/>
-<path d="M12.0337 12.6562C12.7223 12.6562 13.2812 13.2226 13.2812 13.9193C13.2812 14.4534 12.9535 14.9102 12.4911 15.0938V15.1251V16.336C12.4911 16.5906 12.2869 16.7971 12.0357 16.7971C11.7842 16.7971 11.5794 16.5906 11.5794 16.336V15.1251V15.0948C11.1163 14.9113 10.7878 14.4554 10.7878 13.9193C10.7879 13.2226 11.3458 12.6562 12.0337 12.6562Z" fill="currentColor"/>
-<path d="M11.9112 7.42328C13.0771 7.40247 14.3544 8.13779 14.3397 9.44997V11.0344C14.3397 11.0437 14.3384 11.0521 14.3384 11.0614H9.58901C9.58901 11.0521 9.58848 11.0437 9.58848 11.0344V9.44997C9.59645 8.30674 10.7444 7.44414 11.9112 7.42328Z" fill="currentColor"/>
+<svg width="82" height="61" viewBox="0 0 82 61" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.0963 43.7528L44.294 50.9042H37.4063L38.9037 43.7527C37.7059 43.1568 36.8075 41.6668 36.8075 40.1769C36.8075 37.793 38.6043 36.0052 40.9999 36.0052C43.3956 36.0052 45.1923 37.7931 45.1923 40.1769C45.1923 41.6668 44.2941 42.8588 43.0963 43.7528ZM81.5368 39.2497C79.8535 45.8472 73.8852 50.4665 67.0446 50.466L61.0932 50.4656C60.3572 56.3933 55.2742 61 49.1214 61H32.8781C26.7252 61 21.6428 56.3932 20.9069 50.4656H17.5172C7.8376 50.4606 -0.00505356 42.6484 2.44325e-06 33.0166C0.00505845 23.385 7.85604 15.5811 17.5356 15.5861C18.5962 15.5866 19.6545 15.683 20.6974 15.8739C23.5592 8.87077 31.5845 5.50215 38.6222 8.34971C38.6625 8.36599 38.7026 8.38246 38.7427 8.39913C43.7234 0.185042 54.4532 -2.45595 62.708 2.5002C69.1371 6.36018 72.3653 13.8785 70.7244 21.1695C78.7276 23.1911 83.5685 31.286 81.5368 39.2497ZM30.1711 28.783H32.8783V26.0891C32.8783 21.6258 36.5145 18.0075 41 18.0075C45.4856 18.0075 49.1217 21.6257 49.1217 26.0891V28.783H51.829V26.0891C51.829 20.138 46.9808 15.3136 41 15.3136C35.0193 15.3136 30.1711 20.1379 30.1711 26.0891V28.783ZM55.8898 35.5177C55.8898 33.2859 54.0717 31.4768 51.8289 31.4768H30.1711C27.9283 31.4768 26.1102 33.2859 26.1102 35.5177V48.9869C26.1102 52.7063 29.1404 55.7216 32.8783 55.7216H49.1217C52.8596 55.7216 55.8899 52.7064 55.8899 48.9869L55.8898 35.5177Z"/>
+
 </svg>
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
index e3837b7f1a4..4feaba4a8ef 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
@@ -1,4 +1,3 @@
-import { Stack } from 'src/components/Stack';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
@@ -9,10 +8,12 @@ import Select, { Item } from 'src/components/EnhancedSelect';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
 import { Paper } from 'src/components/Paper';
+import { Stack } from 'src/components/Stack';
 import { TextField } from 'src/components/TextField';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { APP_ROOT } from 'src/constants';
+import { VPC_AUTO_ASSIGN_IPV4_TOOLTIP } from 'src/features/VPCs/constants';
 import { useAccountManagement } from 'src/hooks/useAccountManagement';
 import { useFlags } from 'src/hooks/useFlags';
 import { useRegionsQuery } from 'src/queries/regions';
@@ -255,10 +256,8 @@ export const VPCPanel = (props: VPCPanelProps) => {
                       Auto-assign a VPC IPv4 address for this Linode in the VPC
                     </Typography>
                     <TooltipIcon
-                      text={
-                        'A range of non-internet facing IP addresses used in an internal network.'
-                      }
                       status="help"
+                      text={VPC_AUTO_ASSIGN_IPV4_TOOLTIP}
                     />
                   </Box>
                 }
diff --git a/packages/manager/src/features/OneClickApps/oneClickApps.ts b/packages/manager/src/features/OneClickApps/oneClickApps.ts
index 08345a499a2..9536dd263dd 100644
--- a/packages/manager/src/features/OneClickApps/oneClickApps.ts
+++ b/packages/manager/src/features/OneClickApps/oneClickApps.ts
@@ -1137,11 +1137,11 @@ export const oneClickApps: OCA[] = [
       {
         href:
           'https://www.linode.com/docs/products/tools/marketplace/guides/mcffmpegplugins/',
-        title: 'Deploy MainConcept FFmpeg Plugins through the Linode Marketplace',
+        title:
+          'Deploy MainConcept FFmpeg Plugins through the Linode Marketplace',
       },
     ],
-    summary:
-      'MainConcept FFmpeg Plugins are advanced video encoding tools.',
+    summary: 'MainConcept FFmpeg Plugins are advanced video encoding tools.',
     website: 'https://www.mainconcept.com/ffmpeg',
   },
   {
@@ -1162,8 +1162,7 @@ export const oneClickApps: OCA[] = [
         title: 'Deploy MainConcept Live Encoder through the Linode Marketplace',
       },
     ],
-    summary:
-      'MainConcept Live Encoder is a real time video encoding engine.',
+    summary: 'MainConcept Live Encoder is a real time video encoding engine.',
     website: 'https://www.mainconcept.com/live-encoder',
   },
   {
@@ -1181,7 +1180,8 @@ export const oneClickApps: OCA[] = [
       {
         href:
           'https://www.linode.com/docs/products/tools/marketplace/guides/mcp2avcultratranscoder/',
-        title: 'Deploy MainConcept P2 AVC Ultra Transcoder through the Linode Marketplace',
+        title:
+          'Deploy MainConcept P2 AVC Ultra Transcoder through the Linode Marketplace',
       },
     ],
     summary:
@@ -1203,7 +1203,8 @@ export const oneClickApps: OCA[] = [
       {
         href:
           'https://www.linode.com/docs/products/tools/marketplace/guides/mcp2xavc/',
-        title: 'Deploy MainConcept XAVC Transcoder through the Linode Marketplace',
+        title:
+          'Deploy MainConcept XAVC Transcoder through the Linode Marketplace',
       },
     ],
     summary:
@@ -1225,7 +1226,8 @@ export const oneClickApps: OCA[] = [
       {
         href:
           'https://www.linode.com/docs/products/tools/marketplace/guides/mcp2xdcam/',
-        title: 'Deploy MainConcept XDCAM Transcoder through the Linode Marketplace',
+        title:
+          'Deploy MainConcept XDCAM Transcoder through the Linode Marketplace',
       },
     ],
     summary:
@@ -2250,8 +2252,7 @@ export const oneClickApps: OCA[] = [
     website: 'https://docs.splunk.com/Documentation/Splunk',
   },
   {
-    alt_description:
-      'A private by design messaging platform.',
+    alt_description: 'A private by design messaging platform.',
     alt_name: 'Anonymous messaging platform.',
     categories: ['Productivity'],
     colors: {
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
index 6b19eb9c872..35bd7fd5c15 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
@@ -3,15 +3,20 @@ import { useFormik } from 'formik';
 import * as React from 'react';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { Checkbox } from 'src/components/Checkbox';
 import { DownloadCSV } from 'src/components/DownloadCSV/DownloadCSV';
 import { Drawer } from 'src/components/Drawer';
+import { FormControlLabel } from 'src/components/FormControlLabel';
 import { FormHelperText } from 'src/components/FormHelperText';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
 import { RemovableSelectionsList } from 'src/components/RemovableSelectionsList/RemovableSelectionsList';
 import { TextField } from 'src/components/TextField';
+import { TooltipIcon } from 'src/components/TooltipIcon';
+import { Typography } from 'src/components/Typography';
+import { VPC_AUTO_ASSIGN_IPV4_TOOLTIP } from 'src/features/VPCs/constants';
 import { useFormattedDate } from 'src/hooks/useFormattedDate';
 import { useUnassignLinode } from 'src/hooks/useUnassignLinode';
 import { useAllLinodesQuery } from 'src/queries/linodes/linodes';
@@ -371,16 +376,25 @@ export const SubnetAssignLinodesDrawer = (
           sx={{ marginBottom: '8px' }}
           value={values.selectedLinode || null}
         />
-        <Checkbox
-          toolTipText={
-            'A range of non-internet facing IP used in an internal network'
-          }
-          checked={autoAssignIPv4}
-          disabled={userCannotAssignLinodes}
-          onChange={handleAutoAssignIPv4Change}
-          sx={{ marginLeft: `2px`, marginTop: `8px` }}
-          text={'Auto-assign a VPC IPv4 address for this Linode'}
-        />
+        <Box alignItems="center" display="flex" flexDirection="row">
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={autoAssignIPv4}
+                onChange={handleAutoAssignIPv4Change}
+              />
+            }
+            label={
+              <Typography>
+                Auto-assign a VPC IPv4 address for this Linode
+              </Typography>
+            }
+            data-testid="vpc-ipv4-checkbox"
+            disabled={userCannotAssignLinodes}
+            sx={{ marginRight: 0 }}
+          />
+          <TooltipIcon status="help" text={VPC_AUTO_ASSIGN_IPV4_TOOLTIP} />
+        </Box>
         {!autoAssignIPv4 && (
           <TextField
             onChange={(e) => {
@@ -450,22 +464,24 @@ export const SubnetAssignLinodesDrawer = (
         preferredDataLabel="linodeConfigLabel"
         selectionData={assignedLinodesAndConfigData}
       />
-      <DownloadCSV
-        sx={{
-          alignItems: 'flex-start',
-          display: 'flex',
-          gap: 1,
-          marginTop: 2,
-          textAlign: 'left',
-        }}
-        buttonType="styledLink"
-        csvRef={csvRef}
-        data={assignedLinodesAndConfigData}
-        filename={`linodes-assigned-${formattedDate}.csv`}
-        headers={SUBNET_LINODE_CSV_HEADERS}
-        onClick={downloadCSV}
-        text={'Download List of Assigned Linodes (.csv)'}
-      />
+      {assignedLinodesAndConfigData.length > 0 && (
+        <DownloadCSV
+          sx={{
+            alignItems: 'flex-start',
+            display: 'flex',
+            gap: 1,
+            marginTop: 2,
+            textAlign: 'left',
+          }}
+          buttonType="styledLink"
+          csvRef={csvRef}
+          data={assignedLinodesAndConfigData}
+          filename={`linodes-assigned-${formattedDate}.csv`}
+          headers={SUBNET_LINODE_CSV_HEADERS}
+          onClick={downloadCSV}
+          text={'Download List of Assigned Linodes (.csv)'}
+        />
+      )}
       <StyledButtonBox>
         <Button buttonType="outlined" onClick={handleOnClose}>
           Done
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx
index 2bde080512a..a7deb1e9f79 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx
@@ -59,7 +59,7 @@ export const SubnetLinodeRow = (props: Props) => {
   if (linodeLoading || !linode) {
     return (
       <TableRow>
-        <TableCell sx={{ marginLeft: 6 }}>
+        <TableCell colSpan={6}>
           <CircleProgress mini />
         </TableCell>
       </TableRow>
@@ -69,7 +69,7 @@ export const SubnetLinodeRow = (props: Props) => {
   if (linodeError) {
     return (
       <TableRow data-testid="subnet-linode-row-error">
-        <TableCell colSpan={5} style={{ paddingLeft: 48 }}>
+        <TableCell colSpan={5} style={{ paddingLeft: 24 }}>
           <Box alignItems="center" display="flex">
             <ErrorOutline
               data-qa-error-icon
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx
index d0375311efa..b1093d3c97e 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx
@@ -284,22 +284,24 @@ export const SubnetUnassignLinodesDrawer = React.memo(
               onRemove={handleRemoveLinode}
               selectionData={selectedLinodes}
             />
-            <DownloadCSV
-              sx={{
-                alignItems: 'flex-start',
-                display: 'flex',
-                gap: 1,
-                marginTop: 2,
-                textAlign: 'left',
-              }}
-              buttonType="styledLink"
-              csvRef={csvRef}
-              data={selectedLinodes}
-              filename={`linodes-unassigned-${formattedDate}.csv`}
-              headers={SUBNET_LINODE_CSV_HEADERS}
-              onClick={downloadCSV}
-              text={'Download List of Unassigned Linodes (.csv)'}
-            />
+            {selectedLinodes.length > 0 && (
+              <DownloadCSV
+                sx={{
+                  alignItems: 'flex-start',
+                  display: 'flex',
+                  gap: 1,
+                  marginTop: 2,
+                  textAlign: 'left',
+                }}
+                buttonType="styledLink"
+                csvRef={csvRef}
+                data={selectedLinodes}
+                filename={`linodes-unassigned-${formattedDate}.csv`}
+                headers={SUBNET_LINODE_CSV_HEADERS}
+                onClick={downloadCSV}
+                text={'Download List of Unassigned Linodes (.csv)'}
+              />
+            )}
             <ActionsPanel
               primaryButtonProps={{
                 'data-testid': 'unassign-submit-button',
diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx
index 47eea5a26b8..400d2b5dc22 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx
@@ -10,6 +10,7 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { EntityHeader } from 'src/components/EntityHeader/EntityHeader';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
+import { VPC_LABEL } from 'src/features/VPCs/constants';
 import { useRegionsQuery } from 'src/queries/regions';
 import { useVPCQuery } from 'src/queries/vpcs';
 import { truncate } from 'src/utilities/truncate';
@@ -99,7 +100,7 @@ const VPCDetail = () => {
         breadcrumbProps={{
           crumbOverrides: [
             {
-              label: 'Virtual Private Cloud (VPC)',
+              label: VPC_LABEL,
               position: 1,
             },
           ],
@@ -132,15 +133,21 @@ const VPCDetail = () => {
         </Box>
       </EntityHeader>
       <StyledPaper>
-        <StyledSummaryBox display="flex" flex={1} data-qa-vpc-summary>
+        <StyledSummaryBox data-qa-vpc-summary display="flex" flex={1}>
           {summaryData.map((col) => {
             return (
               <Box key={col[0].label} paddingRight={6}>
                 <StyledSummaryTextTypography>
-                  <strong>{col[0].label}</strong> {col[0].value}
+                  <span style={{ fontFamily: theme.font.bold }}>
+                    {col[0].label}
+                  </span>{' '}
+                  {col[0].value}
                 </StyledSummaryTextTypography>
                 <StyledSummaryTextTypography>
-                  <strong>{col[1].label}</strong> {col[1].value}
+                  <span style={{ fontFamily: theme.font.bold }}>
+                    {col[1].label}
+                  </span>{' '}
+                  {col[1].value}
                 </StyledSummaryTextTypography>
               </Box>
             );
@@ -149,7 +156,9 @@ const VPCDetail = () => {
         {vpc.description.length > 0 && (
           <StyledDescriptionBox display="flex" flex={1}>
             <Typography>
-              <strong style={{ paddingRight: 8 }}>Description</strong>{' '}
+              <span style={{ fontFamily: theme.font.bold, paddingRight: 8 }}>
+                Description
+              </span>{' '}
             </Typography>
             <Typography>
               {description}{' '}
@@ -184,7 +193,9 @@ const VPCDetail = () => {
         })}
         padding={`${theme.spacing(2)} ${theme.spacing()}`}
       >
-        <Typography variant="h2">Subnets ({vpc.subnets.length})</Typography>
+        <Typography sx={{ fontSize: '1rem' }} variant="h2">
+          Subnets ({vpc.subnets.length})
+        </Typography>
       </Box>
       {numLinodes > 0 && (
         <DismissibleBanner
diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCEmptyState.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCEmptyState.tsx
index 7089366d5ef..44d44dde1ed 100644
--- a/packages/manager/src/features/VPCs/VPCLanding/VPCEmptyState.tsx
+++ b/packages/manager/src/features/VPCs/VPCLanding/VPCEmptyState.tsx
@@ -7,9 +7,10 @@ import {
   gettingStartedGuides,
   youtubeLinkData,
 } from 'src/features/Linodes/LinodesLanding/LinodesLandingEmptyStateData';
-import { headers, linkAnalyticsEvent } from './VPCEmptyStateData';
 import { sendEvent } from 'src/utilities/analytics';
 
+import { headers, linkAnalyticsEvent } from './VPCEmptyStateData';
+
 export const VPCEmptyState = () => {
   const { push } = useHistory();
 
diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCEmptyStateData.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCEmptyStateData.tsx
index a71bcfcb903..911f9da165d 100644
--- a/packages/manager/src/features/VPCs/VPCLanding/VPCEmptyStateData.tsx
+++ b/packages/manager/src/features/VPCs/VPCLanding/VPCEmptyStateData.tsx
@@ -1,12 +1,15 @@
+import { VPC_LABEL } from 'src/features/VPCs/constants';
+
 import type {
   ResourcesHeaders,
   ResourcesLinks,
 } from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
 
 export const headers: ResourcesHeaders = {
-  description: '',
-  subtitle: 'Create a private and isolated network.',
-  title: 'VPCs',
+  description:
+    'Enable cloud resources to privately and securely communicate with each other, the internet, and other private networks.',
+  subtitle: 'Create a private and isolated network',
+  title: VPC_LABEL,
 };
 
 export const linkAnalyticsEvent: ResourcesLinks['linkAnalyticsEvent'] = {
diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.test.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.test.tsx
index f2b9f355c0e..682d7b7b40b 100644
--- a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.test.tsx
+++ b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.test.tsx
@@ -61,7 +61,7 @@ describe('VPC Landing Table', () => {
     await waitForElementToBeRemoved(getByTestId(loadingTestId));
 
     expect(
-      getByText('Create a private and isolated network.')
+      getByText('Create a private and isolated network')
     ).toBeInTheDocument();
   });
 });
diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
index 822a5085ac4..480a60a2a89 100644
--- a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
+++ b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
@@ -13,12 +13,13 @@ import { TableCell } from 'src/components/TableCell';
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
-import { VPCDeleteDialog } from './VPCDeleteDialog';
+import { VPC_LABEL } from 'src/features/VPCs/constants';
 import { useOrder } from 'src/hooks/useOrder';
 import { usePagination } from 'src/hooks/usePagination';
 import { useVPCsQuery } from 'src/queries/vpcs';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
+import { VPCDeleteDialog } from './VPCDeleteDialog';
 import { VPCEditDrawer } from './VPCEditDrawer';
 import { VPCEmptyState } from './VPCEmptyState';
 import { VPCRow } from './VPCRow';
@@ -94,7 +95,7 @@ const VPCLanding = () => {
         createButtonText="Create VPC"
         docsLink="#" // @TODO VPC: Add docs link
         onButtonClick={createVPC}
-        title="Virtual Private Cloud (VPC)"
+        title={VPC_LABEL}
       />
       <Table>
         <TableHead>
diff --git a/packages/manager/src/features/VPCs/constants.ts b/packages/manager/src/features/VPCs/constants.ts
index 6fdb4afb1d9..411e7de937a 100644
--- a/packages/manager/src/features/VPCs/constants.ts
+++ b/packages/manager/src/features/VPCs/constants.ts
@@ -12,3 +12,8 @@ export const REBOOT_LINODE_WARNING_VPCDETAILS =
   'Assigned or unassigned Linodes will not take affect until the Linodes are rebooted.';
 
 export const SUBNET_UNASSIGN_LINODES_WARNING = `Unassigning Linodes from a subnet requires you to reboot the Linodes to update its configuration.`;
+
+export const VPC_LABEL = 'Virtual Private Cloud (VPC)';
+
+export const VPC_AUTO_ASSIGN_IPV4_TOOLTIP =
+  'A VPC IPv4 is the private IP address for this Linode in the VPC.';

From 65c9744f4c0c717322ba2258b69e58ec12a3bf13 Mon Sep 17 00:00:00 2001
From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
Date: Tue, 31 Oct 2023 11:48:41 -0400
Subject: [PATCH 09/43] fix: [M3-7348] - Only unassign linodes in the 'Linodes
 to be Unassigned from Subnet' list for Subnet Unassign Drawer (#9851)

* bug fix

* remove duplicate logic that i previously added

* changeset

* update changeset

* recategorize changeset as upcoming features
---
 .../.changeset/pr-9851-upcoming-features-1698695391804.md    | 5 +++++
 .../features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx  | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-9851-upcoming-features-1698695391804.md

diff --git a/packages/manager/.changeset/pr-9851-upcoming-features-1698695391804.md b/packages/manager/.changeset/pr-9851-upcoming-features-1698695391804.md
new file mode 100644
index 00000000000..32078ac44d1
--- /dev/null
+++ b/packages/manager/.changeset/pr-9851-upcoming-features-1698695391804.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Only unassign linodes in the 'Linodes to be Unassigned from Subnet' list for Subnet Unassign Drawer ([#9851](https://github.com/linode/manager/pull/9851))
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx
index b1093d3c97e..5922cabd457 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx
@@ -171,6 +171,11 @@ export const SubnetUnassignLinodesDrawer = React.memo(
       setSelectedLinodes((prevSelectedLinodes) =>
         prevSelectedLinodes.filter((option) => option.id !== optionToRemove.id)
       );
+      setConfigInterfacesToDelete((prevInterfacesToDelete) =>
+        prevInterfacesToDelete.filter(
+          (option) => option.linodeId !== optionToRemove.id
+        )
+      );
     };
 
     const processUnassignLinodes = async () => {

From ccff45b0711e0e22f6dffadadf4a735b2760d39e Mon Sep 17 00:00:00 2001
From: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
Date: Tue, 31 Oct 2023 12:14:24 -0400
Subject: [PATCH 10/43] =?UTF-8?q?change:=20[M3-7250]=20=E2=80=93=20Properl?=
 =?UTF-8?q?y=20surface=20VPC=20interface=20errors=20(#9839)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pr-9839-upcoming-features-1698180186838.md |  5 +++++
 .../Linodes/LinodesCreate/VPCPanel.tsx         | 18 +++++++++---------
 .../LinodeConfigs/LinodeConfigDialog.tsx       | 11 -----------
 .../LinodeSettings/InterfaceSelect.tsx         |  2 ++
 4 files changed, 16 insertions(+), 20 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9839-upcoming-features-1698180186838.md

diff --git a/packages/manager/.changeset/pr-9839-upcoming-features-1698180186838.md b/packages/manager/.changeset/pr-9839-upcoming-features-1698180186838.md
new file mode 100644
index 00000000000..464cd8a5880
--- /dev/null
+++ b/packages/manager/.changeset/pr-9839-upcoming-features-1698180186838.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Remove temporary code for surfacing VPC interface errors and fix formatting of error in Linode Config dialog ([#9839](https://github.com/linode/manager/pull/9839))
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
index 4feaba4a8ef..de66a2eadc8 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
@@ -303,16 +303,16 @@ export const VPCPanel = (props: VPCPanelProps) => {
                   </Box>
                 }
               />
-              {assignPublicIPv4Address && publicIPv4Error && (
-                <Typography
-                  sx={(theme) => ({
-                    color: theme.color.red,
-                  })}
-                >
-                  {publicIPv4Error}
-                </Typography>
-              )}
             </Box>
+            {assignPublicIPv4Address && publicIPv4Error && (
+              <Typography
+                sx={(theme) => ({
+                  color: theme.color.red,
+                })}
+              >
+                {publicIPv4Error}
+              </Typography>
+            )}
           </Stack>
         )}
       </Stack>
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
index c45b7275fa9..3b55047488a 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
@@ -425,20 +425,9 @@ export const LinodeConfigDialog = (props: Props) => {
         });
       };
 
-      // @TODO VPC: Remove this override and surface the field errors appropriately
-      // once API fixes interface index bug for ipv4.vpc & ipv4.nat_1_1 errors
-      const overrideFieldForIPv4 = (error: APIError[]) => {
-        error.forEach((err) => {
-          if (err.field && ['ipv4.nat_1_1', 'ipv4.vpc'].includes(err.field)) {
-            err.field = 'interfaces';
-          }
-        });
-      };
-
       formik.setSubmitting(false);
 
       overrideFieldForDevices(error);
-      overrideFieldForIPv4(error);
 
       handleFieldErrors(formik.setErrors, error);
 
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
index 8e73548edae..a4d9b46db9f 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
@@ -128,6 +128,7 @@ export const InterfaceSelect = (props: CombinedProps) => {
     handleChange({
       ipam_address: null,
       ipv4: {
+        nat_1_1: autoAssignLinodeIPv4 ? 'any' : undefined,
         vpc: autoAssignVPCIPv4 ? undefined : vpcIPv4,
       },
       label: null,
@@ -140,6 +141,7 @@ export const InterfaceSelect = (props: CombinedProps) => {
     handleChange({
       ipam_address: null,
       ipv4: {
+        nat_1_1: autoAssignLinodeIPv4 ? 'any' : undefined,
         vpc: autoAssignVPCIPv4 ? undefined : vpcIPv4,
       },
       label: null,

From 10f760c21a628b3bba298555533b2daa1336e386 Mon Sep 17 00:00:00 2001
From: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
Date: Tue, 31 Oct 2023 15:25:17 -0400
Subject: [PATCH 11/43] =?UTF-8?q?change:=20[M3-7289]=20=E2=80=93=20Payload?=
 =?UTF-8?q?=20refinements=20in=20"Assign=20Linodes"=20flow=20(#9845)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...pr-9845-upcoming-features-1698349552302.md |  5 +++++
 .../Linodes/LinodesCreate/LinodeCreate.tsx    |  2 +-
 .../VPCDetail/SubnetAssignLinodesDrawer.tsx   | 21 ++++++++++++++++++-
 3 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9845-upcoming-features-1698349552302.md

diff --git a/packages/manager/.changeset/pr-9845-upcoming-features-1698349552302.md b/packages/manager/.changeset/pr-9845-upcoming-features-1698349552302.md
new file mode 100644
index 00000000000..51dc3cf071f
--- /dev/null
+++ b/packages/manager/.changeset/pr-9845-upcoming-features-1698349552302.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Refine payload in subnet "Assign Linodes" drawer ([#9845](https://github.com/linode/manager/pull/9845))
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
index 00d5f26d2bb..79e83133cae 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
@@ -962,7 +962,7 @@ export class LinodeCreate extends React.PureComponent<
   ];
 }
 
-const defaultPublicInterface: InterfacePayload = {
+export const defaultPublicInterface: InterfacePayload = {
   ipam_address: '',
   label: '',
   purpose: 'public',
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
index 35bd7fd5c15..a79a67a4a2f 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
@@ -16,6 +16,7 @@ import { RemovableSelectionsList } from 'src/components/RemovableSelectionsList/
 import { TextField } from 'src/components/TextField';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
+import { defaultPublicInterface } from 'src/features/Linodes/LinodesCreate/LinodeCreate';
 import { VPC_AUTO_ASSIGN_IPV4_TOOLTIP } from 'src/features/VPCs/constants';
 import { useFormattedDate } from 'src/hooks/useFormattedDate';
 import { useUnassignLinode } from 'src/hooks/useUnassignLinode';
@@ -144,16 +145,34 @@ export const SubnetAssignLinodesDrawer = (
 
     const configId = getConfigId(linodeConfigs, selectedConfig);
 
+    const configToBeModified = linodeConfigs.find(
+      (config) => config.id === configId
+    );
+
     const interfacePayload: InterfacePayload = {
       ipam_address: null,
+      ipv4: {
+        nat_1_1: 'any', // 'any' in all cases here to help the user towards a functional configuration & hide complexity per stakeholder feedback
+        vpc: !autoAssignIPv4 ? chosenIP : undefined,
+      },
       label: null,
+      primary: true,
       purpose: 'vpc',
       subnet_id: subnet?.id,
       vpc_id: vpcId,
-      ...(!autoAssignIPv4 && { ipv4: { vpc: chosenIP } }),
     };
 
     try {
+      // If the config has only an implicit public interface, make it explicit and
+      // add it in eth0
+      if (configToBeModified?.interfaces.length === 0) {
+        appendConfigInterface(
+          selectedLinode?.id ?? -1,
+          configId,
+          defaultPublicInterface
+        );
+      }
+
       const newInterface = await appendConfigInterface(
         selectedLinode?.id ?? -1,
         configId,

From a6b17ec15c29bf03d2bfc166cb96f13acaf0ff77 Mon Sep 17 00:00:00 2001
From: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>
Date: Tue, 31 Oct 2023 15:47:11 -0400
Subject: [PATCH 12/43] change: [M3-6522] - Tag Component v7 story & cleanup
 (#9840)

* Tag v7 story & cleanup

* cleanup

* Added changeset: Tag Component v7 Story

* Feedback
---
 .../pr-9840-tech-stories-1698181491257.md     |   5 +
 .../src/components/Tag/Tag.stories.mdx        |  63 --------
 .../src/components/Tag/Tag.stories.tsx        |  26 ++++
 .../manager/src/components/Tag/Tag.styles.ts  | 101 ++++++++++++
 .../manager/src/components/Tag/Tag.test.tsx   |  46 ++++++
 packages/manager/src/components/Tag/Tag.tsx   | 145 +++++-------------
 .../TopMenu/SearchBar/SearchSuggestion.tsx    |   1 -
 7 files changed, 219 insertions(+), 168 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9840-tech-stories-1698181491257.md
 delete mode 100644 packages/manager/src/components/Tag/Tag.stories.mdx
 create mode 100644 packages/manager/src/components/Tag/Tag.stories.tsx
 create mode 100644 packages/manager/src/components/Tag/Tag.styles.ts
 create mode 100644 packages/manager/src/components/Tag/Tag.test.tsx

diff --git a/packages/manager/.changeset/pr-9840-tech-stories-1698181491257.md b/packages/manager/.changeset/pr-9840-tech-stories-1698181491257.md
new file mode 100644
index 00000000000..22d0fcf56e9
--- /dev/null
+++ b/packages/manager/.changeset/pr-9840-tech-stories-1698181491257.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Tag Component v7 Story ([#9840](https://github.com/linode/manager/pull/9840))
diff --git a/packages/manager/src/components/Tag/Tag.stories.mdx b/packages/manager/src/components/Tag/Tag.stories.mdx
deleted file mode 100644
index 90bb3adc178..00000000000
--- a/packages/manager/src/components/Tag/Tag.stories.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Tag } from './Tag';
-
-<Meta title="Components/Tag" component={Tag} />
-
-# Tag
-
-export const Template = (args) => <Tag label="tag" {...args} />;
-
-<Canvas>
-  <Story
-    name="Tag"
-    args={{
-      label: 'tag',
-      maxLength: null,
-    }}
-    argTypes={{
-      label: {
-        description: 'The content of the label.',
-        type: { required: true },
-        table: {
-          type: { summary: 'string' },
-        },
-      },
-      colorVariant: {
-        description: 'The variant to use.',
-        control: {
-          type: 'radio',
-        },
-        options: ['default', 'blue', 'lightBlue'],
-      },
-      component: {
-        description:
-          'The component used for the root node. Either a string to use a HTML element or a component.',
-        table: {
-          type: { summary: 'elementType' },
-        },
-        control: { type: null },
-      },
-      maxLength: {
-        description: 'Must be greater than 4.',
-        table: {
-          type: { summary: 'number' },
-        },
-        control: {
-          type: 'number',
-          min: 4,
-        },
-      },
-      onDelete: {
-        description:
-          'Override the default delete icon element. Shown only if onDelete is set.',
-        table: {
-          type: { summary: '() => void' },
-        },
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Tag" sort="requiredFirst" sort="requiredFirst"/>
diff --git a/packages/manager/src/components/Tag/Tag.stories.tsx b/packages/manager/src/components/Tag/Tag.stories.tsx
new file mode 100644
index 00000000000..1a30037ecae
--- /dev/null
+++ b/packages/manager/src/components/Tag/Tag.stories.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Tag } from './Tag';
+
+import type { TagProps } from './Tag';
+import type { Meta, StoryObj } from '@storybook/react';
+
+export const Default: StoryObj<TagProps> = {
+  render: (args: TagProps) => <Tag {...args} />,
+};
+
+export const WithMaxLength: StoryObj<TagProps> = {
+  render: (args: TagProps) => (
+    <Tag {...args} label="Long Label" maxLength={5} />
+  ),
+};
+
+const meta: Meta<TagProps> = {
+  args: {
+    colorVariant: 'lightBlue',
+    label: 'Tag',
+  },
+  component: Tag,
+  title: 'Components/Chip/Tag',
+};
+export default meta;
diff --git a/packages/manager/src/components/Tag/Tag.styles.ts b/packages/manager/src/components/Tag/Tag.styles.ts
new file mode 100644
index 00000000000..3010a22d869
--- /dev/null
+++ b/packages/manager/src/components/Tag/Tag.styles.ts
@@ -0,0 +1,101 @@
+import { styled } from '@mui/material/styles';
+
+import { Chip } from 'src/components/Chip';
+import { omittedProps } from 'src/utilities/omittedProps';
+
+import { StyledLinkButton } from '../Button/StyledLinkButton';
+
+import type { TagProps } from './Tag';
+
+export const StyledChip = styled(Chip, {
+  shouldForwardProp: omittedProps(['colorVariant', 'closeMenu', 'maxLength']),
+})<TagProps>(({ theme, ...props }) => ({
+  '& .MuiChip-label': {
+    '&:hover': {
+      borderBottomRightRadius: props.onDelete && 0,
+      borderTopRightRadius: props.onDelete && 0,
+    },
+    borderRadius: 4,
+    color: theme.name === 'light' ? '#3a3f46' : '#fff',
+    fontWeight: 'normal',
+    maxWidth: 350,
+    padding: '7px 10px',
+  },
+  // Targets first span (tag label)
+  '& > span': {
+    borderBottomRightRadius: 0,
+    borderRadius: 3,
+    borderTopRightRadius: 0,
+    padding: '7px 10px',
+  },
+  '&:focus': {
+    ['& .StyledDeleteButton']: {
+      color: theme.color.tagIcon,
+    },
+    backgroundColor: theme.color.tagButton,
+  },
+  // Overrides MUI chip default styles so these appear as separate elements.
+  '&:hover': {
+    ['& .StyledDeleteButton']: {
+      color: theme.color.tagIcon,
+    },
+    backgroundColor: theme.color.tagButton,
+  },
+  fontSize: '0.875rem',
+  height: 30,
+  padding: 0,
+  ...(props.colorVariant === 'blue' && {
+    '& > span': {
+      '&:hover, &:focus': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+      },
+      color: 'white',
+    },
+
+    backgroundColor: theme.palette.primary.main,
+  }),
+  ...(props.colorVariant === 'lightBlue' && {
+    '& > span': {
+      '&:focus': {
+        backgroundColor: theme.color.tagButton,
+        color: theme.color.black,
+      },
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+      },
+    },
+    backgroundColor: theme.color.tagButton,
+  }),
+}));
+
+export const StyledDeleteButton = styled(StyledLinkButton, {
+  label: 'StyledDeleteButton',
+})(({ theme }) => ({
+  '& svg': {
+    borderRadius: 0,
+    color: theme.color.tagIcon,
+    height: 15,
+    width: 15,
+  },
+  '&:focus': {
+    backgroundColor: theme.bg.lightBlue1,
+    color: theme.color.black,
+  },
+  '&:hover': {
+    '& svg': {
+      color: 'white',
+    },
+    backgroundColor: theme.palette.primary.main,
+    color: 'white',
+  },
+  borderBottomRightRadius: 3,
+  borderLeft: `1px solid ${theme.name === 'light' ? '#fff' : '#2e3238'}`,
+  borderRadius: 0,
+  borderTopRightRadius: 3,
+  height: 30,
+  margin: 0,
+  minWidth: 30,
+  padding: theme.spacing(),
+}));
diff --git a/packages/manager/src/components/Tag/Tag.test.tsx b/packages/manager/src/components/Tag/Tag.test.tsx
new file mode 100644
index 00000000000..ef56e911da7
--- /dev/null
+++ b/packages/manager/src/components/Tag/Tag.test.tsx
@@ -0,0 +1,46 @@
+import { fireEvent } from '@testing-library/react';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { Tag, TagProps } from './Tag';
+
+describe('Tag Component', () => {
+  const defaultProps: TagProps = {
+    colorVariant: 'lightBlue',
+    label: 'Test Label',
+  };
+
+  it('renders correctly with required props', () => {
+    const { getByRole, getByText } = renderWithTheme(<Tag {...defaultProps} />);
+    const tagElement = getByText('Test Label');
+    const searchButton = getByRole('button');
+
+    expect(tagElement).toBeInTheDocument();
+    expect(searchButton).toHaveAttribute(
+      'aria-label',
+      `Search for Tag 'Test Label'`
+    );
+  });
+
+  it('truncates the label if maxLength is provided', () => {
+    const { getByText } = renderWithTheme(
+      <Tag {...defaultProps} label="Long Label" maxLength={5} />
+    );
+    const tagElement = getByText('Lo...');
+    expect(tagElement).toBeInTheDocument();
+  });
+
+  it('calls closeMenu when clicked', () => {
+    const closeMenuMock = jest.fn();
+
+    const { getByText } = renderWithTheme(
+      <Tag {...defaultProps} closeMenu={closeMenuMock} />
+    );
+
+    const tagElement = getByText('Test Label');
+    fireEvent.click(tagElement);
+
+    expect(closeMenuMock).toHaveBeenCalled();
+  });
+});
diff --git a/packages/manager/src/components/Tag/Tag.tsx b/packages/manager/src/components/Tag/Tag.tsx
index 92e40ef9774..ba0bc40ca92 100644
--- a/packages/manager/src/components/Tag/Tag.tsx
+++ b/packages/manager/src/components/Tag/Tag.tsx
@@ -1,33 +1,63 @@
 import Close from '@mui/icons-material/Close';
-import { styled } from '@mui/material/styles';
-import { omit } from 'lodash';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Chip, ChipProps } from 'src/components/Chip';
 import { truncateEnd } from 'src/utilities/truncate';
 
+import { StyledChip, StyledDeleteButton } from './Tag.styles';
+
+import type { ChipProps } from 'src/components/Chip';
+
 type Variants = 'blue' | 'lightBlue';
 
 export interface TagProps extends ChipProps {
-  asSuggestion?: boolean;
+  /**
+   * Callback fired when the delete icon is clicked.
+   */
   closeMenu?: any;
+  /**
+   * The variant to use.
+   */
   colorVariant: Variants;
+  /**
+   * The component used for the root node. Either a string representation of an HTML element or a component.
+   */
   component?: React.ElementType;
+  /**
+   * The content of the label.
+   */
   label: string;
+  /**
+   * The maximum length of the tag label. If the label exceeds this length, it will be truncated.
+   * Must be greater than 4.
+   */
   maxLength?: number;
 }
 
+/**
+ * This component is an abstraction of the Chip component.
+ * It is used to display deletable tags in the Linode Manager.
+ * It contains two elements:
+ * - a label, linking to its corresponding tag search result page
+ * - an optional delete icon
+ */
 export const Tag = (props: TagProps) => {
-  const { className, label, maxLength, ...chipProps } = props;
+  const {
+    className,
+    closeMenu,
+    component = 'div',
+    label,
+    maxLength,
+    ...chipProps
+  } = props;
 
   const history = useHistory();
 
   const handleClick = (e: React.MouseEvent<any>) => {
     e.preventDefault();
     e.stopPropagation();
-    if (props.asSuggestion) {
-      props.closeMenu();
+    if (closeMenu) {
+      closeMenu();
     }
     history.push(`/search/?query=tag:${label}`);
   };
@@ -35,15 +65,13 @@ export const Tag = (props: TagProps) => {
   // If maxLength is set, truncate display to that length.
   const _label = maxLength ? truncateEnd(label, maxLength) : label;
 
-  const tagProps = omit(props, ['asSuggestion', 'closeMenu']);
-
   return (
     <StyledChip
-      {...tagProps}
+      {...props}
       deleteIcon={
         chipProps.onDelete ? (
           <StyledDeleteButton
-            aria-label={`Delete Tag "${label}"`}
+            aria-label={`Delete Tag '${label}'`}
             data-qa-delete-tag
             title="Delete tag"
           >
@@ -51,10 +79,10 @@ export const Tag = (props: TagProps) => {
           </StyledDeleteButton>
         ) : undefined
       }
-      aria-label={`Search for Tag "${label}"`}
+      aria-label={`Search for Tag '${label}'`}
       className={className}
       clickable
-      component="div"
+      component={component}
       data-qa-tag={label}
       label={_label}
       onClick={handleClick}
@@ -62,94 +90,3 @@ export const Tag = (props: TagProps) => {
     />
   );
 };
-
-const StyledChip = styled(Chip, {
-  shouldForwardProp: (prop) => prop !== 'colorVariant',
-})<TagProps>(({ theme, ...props }) => ({
-  '& .MuiChip-label': {
-    '&:hover': {
-      borderBottomRightRadius: props.onDelete && 0,
-      borderTopRightRadius: props.onDelete && 0,
-    },
-    borderRadius: 4,
-    color: theme.name === 'light' ? '#3a3f46' : '#9caec9',
-    maxWidth: 350,
-    padding: '7px 10px',
-  },
-  // Targets first span (tag label)
-  '& > span': {
-    borderBottomRightRadius: 0,
-    borderRadius: 3,
-    borderTopRightRadius: 0,
-    padding: '7px 10px',
-  },
-  '&:focus': {
-    ['& .StyledDeleteButton']: {
-      color: theme.color.tagIcon,
-    },
-    backgroundColor: theme.color.tagButton,
-  },
-  // Overrides MUI chip default styles so these appear as separate elements.
-  '&:hover': {
-    ['& .StyledDeleteButton']: {
-      color: theme.color.tagIcon,
-    },
-    backgroundColor: theme.color.tagButton,
-  },
-  fontSize: '0.875rem',
-  height: 30,
-  padding: 0,
-  ...(props.colorVariant === 'blue' && {
-    '& > span': {
-      color: 'white',
-    },
-    '&:hover, &:focus': {
-      backgroundColor: theme.palette.primary.main,
-    },
-    backgroundColor: theme.palette.primary.main,
-  }),
-  ...(props.colorVariant === 'lightBlue' && {
-    '& > span': {
-      '&:focus': {
-        backgroundColor: theme.color.tagButton,
-        color: theme.color.black,
-      },
-      '&:hover': {
-        backgroundColor: theme.palette.primary.main,
-        color: 'white',
-      },
-    },
-    backgroundColor: theme.color.tagButton,
-  }),
-}));
-
-const StyledDeleteButton = styled('button', { label: 'StyledDeleteButton' })(
-  ({ theme }) => ({
-    ...theme.applyLinkStyles,
-    '& svg': {
-      borderRadius: 0,
-      color: theme.color.tagIcon,
-      height: 15,
-      width: 15,
-    },
-    '&:focus': {
-      backgroundColor: theme.bg.lightBlue1,
-      color: theme.color.black,
-    },
-    '&:hover': {
-      '& svg': {
-        color: 'white',
-      },
-      backgroundColor: theme.palette.primary.main,
-      color: 'white',
-    },
-    borderBottomRightRadius: 3,
-    borderLeft: `1px solid ${theme.name === 'light' ? '#fff' : '#2e3238'}`,
-    borderRadius: 0,
-    borderTopRightRadius: 3,
-    height: 30,
-    margin: 0,
-    minWidth: 30,
-    padding: theme.spacing(),
-  })
-);
diff --git a/packages/manager/src/features/TopMenu/SearchBar/SearchSuggestion.tsx b/packages/manager/src/features/TopMenu/SearchBar/SearchSuggestion.tsx
index 5498c2592e7..43d84821037 100644
--- a/packages/manager/src/features/TopMenu/SearchBar/SearchSuggestion.tsx
+++ b/packages/manager/src/features/TopMenu/SearchBar/SearchSuggestion.tsx
@@ -74,7 +74,6 @@ export const SearchSuggestion = (props: SearchSuggestionProps) => {
     }
     return tags.map((tag: string) => (
       <Tag
-        asSuggestion={true}
         className="tag"
         closeMenu={selectProps.onMenuClose}
         colorVariant={selected ? 'blue' : 'lightBlue'}

From 6d29594533d8080777aaadaf42e74879ac945e03 Mon Sep 17 00:00:00 2001
From: tbaka <48444023+tbaka@users.noreply.github.com>
Date: Tue, 31 Oct 2023 14:20:22 -0700
Subject: [PATCH 13/43] fix: [OCA-1229] - Correct links to Main Concept and
 Simplex docs (#9854)

* fix:[oca-1229] correct links to main concept docs

* fix:[oca-1129] correct simplex doc hyperlink

* adds changeset

* lint changeset formatting

* Update packages/manager/.changeset/pr-9854-fixed.md

Co-authored-by: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>

* remove changeset formatting

* Fix changeset

* Make changeset description better

---------

Co-authored-by: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
Co-authored-by: mjac0bs <mjacobs@akamai.com>
---
 .../.changeset/pr-9854-fixed-1698764756434.md        |  5 +++++
 .../src/features/OneClickApps/oneClickApps.ts        | 12 ++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9854-fixed-1698764756434.md

diff --git a/packages/manager/.changeset/pr-9854-fixed-1698764756434.md b/packages/manager/.changeset/pr-9854-fixed-1698764756434.md
new file mode 100644
index 00000000000..42b01f39a30
--- /dev/null
+++ b/packages/manager/.changeset/pr-9854-fixed-1698764756434.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Incorrect docs links for Main Concept and Simplex Marketplace apps ([#9854](https://github.com/linode/manager/pull/9854))
diff --git a/packages/manager/src/features/OneClickApps/oneClickApps.ts b/packages/manager/src/features/OneClickApps/oneClickApps.ts
index 9536dd263dd..d60d7ae5631 100644
--- a/packages/manager/src/features/OneClickApps/oneClickApps.ts
+++ b/packages/manager/src/features/OneClickApps/oneClickApps.ts
@@ -1136,7 +1136,7 @@ export const oneClickApps: OCA[] = [
     related_guides: [
       {
         href:
-          'https://www.linode.com/docs/products/tools/marketplace/guides/mcffmpegplugins/',
+          'https://www.linode.com/docs/products/tools/marketplace/guides/mainconcept-ffmpeg-plugins/',
         title:
           'Deploy MainConcept FFmpeg Plugins through the Linode Marketplace',
       },
@@ -1158,7 +1158,7 @@ export const oneClickApps: OCA[] = [
     related_guides: [
       {
         href:
-          'https://www.linode.com/docs/products/tools/marketplace/guides/mcliveencoder/',
+          'https://www.linode.com/docs/products/tools/marketplace/guides/mainconcept-live-encoder/',
         title: 'Deploy MainConcept Live Encoder through the Linode Marketplace',
       },
     ],
@@ -1179,7 +1179,7 @@ export const oneClickApps: OCA[] = [
     related_guides: [
       {
         href:
-          'https://www.linode.com/docs/products/tools/marketplace/guides/mcp2avcultratranscoder/',
+          'https://www.linode.com/docs/products/tools/marketplace/guides/mainconcept-p2-avc-ultra/',
         title:
           'Deploy MainConcept P2 AVC Ultra Transcoder through the Linode Marketplace',
       },
@@ -1202,7 +1202,7 @@ export const oneClickApps: OCA[] = [
     related_guides: [
       {
         href:
-          'https://www.linode.com/docs/products/tools/marketplace/guides/mcp2xavc/',
+          'https://www.linode.com/docs/products/tools/marketplace/guides/mainconcept-xavc-transcoder/',
         title:
           'Deploy MainConcept XAVC Transcoder through the Linode Marketplace',
       },
@@ -1225,7 +1225,7 @@ export const oneClickApps: OCA[] = [
     related_guides: [
       {
         href:
-          'https://www.linode.com/docs/products/tools/marketplace/guides/mcp2xdcam/',
+          'https://www.linode.com/docs/products/tools/marketplace/guides/mainconcept-xdcam-transcoder/',
         title:
           'Deploy MainConcept XDCAM Transcoder through the Linode Marketplace',
       },
@@ -2265,7 +2265,7 @@ export const oneClickApps: OCA[] = [
     related_guides: [
       {
         href:
-          'https://www.linode.com/docs/products/tools/marketplace/guides/simplexchat/',
+          'https://www.linode.com/docs/products/tools/marketplace/guides/simplex/',
         title: 'Deploy SimpleX chat through the Linode Marketplace',
       },
     ],

From aff2cf53b39f2c2be8032a48f8ab42bcce633d77 Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Wed, 1 Nov 2023 10:02:23 -0400
Subject: [PATCH 14/43] feat: [M3-7353] - Add AGLB Basic Create Flow (#9856)

* add basic aglb create flow

* add changeset

* feedback

* add missing invalidation

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
---
 packages/api-v4/src/aglb/loadbalancers.ts     | 14 +++
 packages/api-v4/src/aglb/types.ts             |  7 ++
 ...pr-9856-upcoming-features-1698773808066.md |  5 +
 .../manager/src/dev-tools/FeatureFlagTool.tsx |  1 +
 packages/manager/src/featureFlags.ts          |  1 +
 .../LoadBalancerBasicCreate.tsx               | 93 +++++++++++++++++++
 .../src/features/LoadBalancers/index.tsx      | 19 +++-
 .../manager/src/queries/aglb/loadbalancers.ts | 25 ++++-
 .../validation/src/loadbalancers.schema.ts    |  9 ++
 9 files changed, 169 insertions(+), 5 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9856-upcoming-features-1698773808066.md
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerBasicCreate.tsx

diff --git a/packages/api-v4/src/aglb/loadbalancers.ts b/packages/api-v4/src/aglb/loadbalancers.ts
index fc7446a3a9f..3182985d647 100644
--- a/packages/api-v4/src/aglb/loadbalancers.ts
+++ b/packages/api-v4/src/aglb/loadbalancers.ts
@@ -8,10 +8,12 @@ import Request, {
 import { BETA_API_ROOT } from '../constants';
 import { Filter, Params, ResourcePage } from '../types';
 import type {
+  CreateBasicLoadbalancerPayload,
   CreateLoadbalancerPayload,
   Loadbalancer,
   UpdateLoadbalancerPayload,
 } from './types';
+import { CreateBasicLoadbalancerSchema } from '@linode/validation';
 
 /**
  * getLoadbalancers
@@ -49,6 +51,18 @@ export const createLoadbalancer = (data: CreateLoadbalancerPayload) =>
     setMethod('POST')
   );
 
+/**
+ * createBasicLoadbalancer
+ *
+ * Creates an unconfigured Akamai Global Load Balancer
+ */
+export const createBasicLoadbalancer = (data: CreateBasicLoadbalancerPayload) =>
+  Request<Loadbalancer>(
+    setURL(`${BETA_API_ROOT}/aglb`),
+    setData(data, CreateBasicLoadbalancerSchema),
+    setMethod('POST')
+  );
+
 /**
  * updateLoadbalancer
  *
diff --git a/packages/api-v4/src/aglb/types.ts b/packages/api-v4/src/aglb/types.ts
index 156685e9d68..71899bbff72 100644
--- a/packages/api-v4/src/aglb/types.ts
+++ b/packages/api-v4/src/aglb/types.ts
@@ -17,6 +17,13 @@ export interface CreateLoadbalancerPayload {
   configurations?: ConfigurationPayload[];
 }
 
+/**
+ * TODO: AGLB - remove when we move to full creation flow
+ */
+export interface CreateBasicLoadbalancerPayload {
+  label: string;
+}
+
 export interface UpdateLoadbalancerPayload {
   label?: string;
   regions?: string[];
diff --git a/packages/manager/.changeset/pr-9856-upcoming-features-1698773808066.md b/packages/manager/.changeset/pr-9856-upcoming-features-1698773808066.md
new file mode 100644
index 00000000000..fac379a8c39
--- /dev/null
+++ b/packages/manager/.changeset/pr-9856-upcoming-features-1698773808066.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add basic AGLB create page and feature flag ([#9856](https://github.com/linode/manager/pull/9856))
diff --git a/packages/manager/src/dev-tools/FeatureFlagTool.tsx b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
index 70aabf86cf9..32b55651b62 100644
--- a/packages/manager/src/dev-tools/FeatureFlagTool.tsx
+++ b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
@@ -15,6 +15,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'metadata', label: 'Metadata' },
   { flag: 'vpc', label: 'VPC' },
   { flag: 'aglb', label: 'AGLB' },
+  { flag: 'aglbFullCreateFlow', label: 'AGLB Full Create Flow' },
   { flag: 'unifiedMigrations', label: 'Unified Migrations' },
   { flag: 'dcSpecificPricing', label: 'DC-Specific Pricing' },
   { flag: 'objDcSpecificPricing', label: 'OBJ Storage DC-Specific Pricing' },
diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts
index b8e039d1ff7..b8059ce1e9f 100644
--- a/packages/manager/src/featureFlags.ts
+++ b/packages/manager/src/featureFlags.ts
@@ -41,6 +41,7 @@ type OneClickApp = Record<string, string>;
 
 export interface Flags {
   aglb: boolean;
+  aglbFullCreateFlow: boolean;
   apiMaintenance: APIMaintenance;
   databaseBeta: boolean;
   databases: boolean;
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerBasicCreate.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerBasicCreate.tsx
new file mode 100644
index 00000000000..d8997531961
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerBasicCreate.tsx
@@ -0,0 +1,93 @@
+import { useFormik } from 'formik';
+import { useSnackbar } from 'notistack';
+import * as React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { Box } from 'src/components/Box';
+import { Button } from 'src/components/Button/Button';
+import { DocumentTitleSegment } from 'src/components/DocumentTitle/DocumentTitle';
+import { LandingHeader } from 'src/components/LandingHeader';
+import { Notice } from 'src/components/Notice/Notice';
+import { Paper } from 'src/components/Paper';
+import { Stack } from 'src/components/Stack';
+import { TextField } from 'src/components/TextField';
+import { useLoadBalancerBasicCreateMutation } from 'src/queries/aglb/loadbalancers';
+import { getFormikErrorsFromAPIErrors } from 'src/utilities/formikErrorUtils';
+
+import { LoadBalancerRegions } from './LoadBalancerRegions';
+import { CreateBasicLoadbalancerSchema } from '@linode/validation';
+
+export const LoadBalancerBasicCreate = () => {
+  const {
+    error,
+    mutateAsync: createLoadbalancer,
+  } = useLoadBalancerBasicCreateMutation();
+
+  const { push } = useHistory();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const formik = useFormik({
+    initialValues: {
+      label: '',
+    },
+    async onSubmit(values, formikHelpers) {
+      try {
+        const loadbalancer = await createLoadbalancer(values);
+        enqueueSnackbar(
+          `Load Balancer ${loadbalancer.label} successfully created.`,
+          { variant: 'success' }
+        );
+        push(`/loadbalancers/${loadbalancer.id}`);
+      } catch (error) {
+        formikHelpers.setErrors(getFormikErrorsFromAPIErrors(error));
+      }
+    },
+    validationSchema: CreateBasicLoadbalancerSchema,
+  });
+
+  const generalError = error
+    ?.filter((e) => !e.field || e.field !== 'label')
+    .map((e) => e.reason)
+    .join(', ');
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <DocumentTitleSegment segment="Create a Load Balancer" />
+      <LandingHeader
+        breadcrumbProps={{
+          crumbOverrides: [
+            {
+              label: 'Global Load Balancers',
+              position: 1,
+            },
+          ],
+          pathname: location.pathname,
+        }}
+        title="Create"
+      />
+      <Stack spacing={3}>
+        {generalError && <Notice text={generalError} variant="error" />}
+        <Paper>
+          <TextField
+            errorText={formik.errors.label}
+            label="Load Balancer Label"
+            name="label"
+            noMarginTop
+            onChange={formik.handleChange}
+            value={formik.values.label}
+          />
+        </Paper>
+        <LoadBalancerRegions />
+        <Box display="flex" justifyContent="flex-end">
+          <Button
+            buttonType="primary"
+            loading={formik.isSubmitting}
+            type="submit"
+          >
+            Create Load Balancer
+          </Button>
+        </Box>
+      </Stack>
+    </form>
+  );
+};
diff --git a/packages/manager/src/features/LoadBalancers/index.tsx b/packages/manager/src/features/LoadBalancers/index.tsx
index aaa3d9cfc24..0647bd3f279 100644
--- a/packages/manager/src/features/LoadBalancers/index.tsx
+++ b/packages/manager/src/features/LoadBalancers/index.tsx
@@ -3,6 +3,7 @@ import { Route, Switch } from 'react-router-dom';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { useFlags } from 'src/hooks/useFlags';
 
 const LoadBalancerLanding = React.lazy(
   () => import('./LoadBalancerLanding/LoadBalancerLanding')
@@ -13,13 +14,29 @@ const LoadBalancerDetail = React.lazy(
 const LoadBalancerCreate = React.lazy(
   () => import('./LoadBalancerCreate/LoadBalancerCreate')
 );
+const LoadBalancerBasicCreate = React.lazy(() =>
+  import('./LoadBalancerCreate/LoadBalancerBasicCreate').then((module) => ({
+    default: module.LoadBalancerBasicCreate,
+  }))
+);
 
 const LoadBalancer = () => {
+  const flags = useFlags();
   return (
     <React.Suspense fallback={<SuspenseLoader />}>
       <ProductInformationBanner bannerLocation="LoadBalancers" />
       <Switch>
-        <Route component={LoadBalancerCreate} path="/loadbalancers/create" />
+        {/**
+         * TODO: AGLB - remove alternative create flow
+         */}
+        <Route
+          component={
+            flags.aglbFullCreateFlow
+              ? LoadBalancerCreate
+              : LoadBalancerBasicCreate
+          }
+          path="/loadbalancers/create"
+        />
         <Route
           component={LoadBalancerDetail}
           path="/loadbalancers/:loadbalancerId"
diff --git a/packages/manager/src/queries/aglb/loadbalancers.ts b/packages/manager/src/queries/aglb/loadbalancers.ts
index a2b65decd9c..f2ce8124e7d 100644
--- a/packages/manager/src/queries/aglb/loadbalancers.ts
+++ b/packages/manager/src/queries/aglb/loadbalancers.ts
@@ -1,4 +1,5 @@
 import {
+  createBasicLoadbalancer,
   deleteLoadbalancer,
   getLoadbalancer,
   getLoadbalancers,
@@ -8,6 +9,7 @@ import { useMutation, useQuery, useQueryClient } from 'react-query';
 
 import type {
   APIError,
+  CreateBasicLoadbalancerPayload,
   Filter,
   Loadbalancer,
   Params,
@@ -34,22 +36,37 @@ export const useLoadBalancerQuery = (id: number, enabled = true) => {
 };
 
 export const useLoadBalancerMutation = (id: number) => {
-  const queryCleint = useQueryClient();
+  const queryClient = useQueryClient();
   return useMutation<Loadbalancer, APIError[], UpdateLoadbalancerPayload>(
     (data) => updateLoadbalancer(id, data),
     {
       onSuccess(data) {
-        queryCleint.setQueryData([QUERY_KEY, 'aglb', id], data);
+        queryClient.setQueryData([QUERY_KEY, 'aglb', id], data);
+        queryClient.invalidateQueries([QUERY_KEY, 'paginated']);
+      },
+    }
+  );
+};
+
+export const useLoadBalancerBasicCreateMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation<Loadbalancer, APIError[], CreateBasicLoadbalancerPayload>(
+    (data) => createBasicLoadbalancer(data),
+    {
+      onSuccess(data) {
+        queryClient.setQueryData([QUERY_KEY, 'aglb', data.id], data);
+        queryClient.invalidateQueries([QUERY_KEY, 'paginated']);
       },
     }
   );
 };
 
 export const useLoadBalancerDeleteMutation = (id: number) => {
-  const queryCleint = useQueryClient();
+  const queryClient = useQueryClient();
   return useMutation<{}, APIError[]>(() => deleteLoadbalancer(id), {
     onSuccess() {
-      queryCleint.removeQueries([QUERY_KEY, 'aglb', id]);
+      queryClient.removeQueries([QUERY_KEY, 'aglb', id]);
+      queryClient.invalidateQueries([QUERY_KEY, 'paginated']);
     },
   });
 };
diff --git a/packages/validation/src/loadbalancers.schema.ts b/packages/validation/src/loadbalancers.schema.ts
index fbe056c578c..d3f159d6850 100644
--- a/packages/validation/src/loadbalancers.schema.ts
+++ b/packages/validation/src/loadbalancers.schema.ts
@@ -151,3 +151,12 @@ export const UpdateRouteSchema = object({
     otherwise: (o) => o.of(HTTPRuleSchema),
   }),
 });
+
+/**
+ * TODO: AGLB - remove this create schema
+ */
+export const CreateBasicLoadbalancerSchema = object({
+  label: string()
+    .min(1, 'Label must not be empty.')
+    .required('Label is required'),
+});

From 13ccb71225262c695b2dd1d2a0143d5e452e4813 Mon Sep 17 00:00:00 2001
From: cliu-akamai <126020611+cliu-akamai@users.noreply.github.com>
Date: Wed, 1 Nov 2023 12:35:11 -0400
Subject: [PATCH 15/43] test: [M3-7189] - Add assertions for backup prices in
 Linode Create flow (#9821)

* M3-7189 Add assertions for backup prices in Linode Create flow

* Fixed comments
---
 .../e2e/core/linodes/create-linode.spec.ts    | 53 ++++++++++++++++---
 1 file changed, 45 insertions(+), 8 deletions(-)

diff --git a/packages/manager/cypress/e2e/core/linodes/create-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/create-linode.spec.ts
index d44049ef2aa..81cc21759b2 100644
--- a/packages/manager/cypress/e2e/core/linodes/create-linode.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/create-linode.spec.ts
@@ -134,6 +134,7 @@ describe('create linode', () => {
    * - Confirms DC-specific pricing UI flow works as expected during Linode creation.
    * - Confirms that pricing notice is shown in "Region" section.
    * - Confirms that notice is shown when selecting a region with a different price structure.
+   * - Confirms that backups pricing is correct when selecting a region with a different price structure.
    */
   it('shows DC-specific pricing information during create flow', () => {
     const rootpass = randomString(32);
@@ -147,6 +148,19 @@ describe('create linode', () => {
       type: dcPricingMockLinodeTypes[0].id,
     });
 
+    const currentPrice = dcPricingMockLinodeTypes[0].region_prices.find(
+      (regionPrice) => regionPrice.id === initialRegion.id
+    );
+    const currentBackupPrice = dcPricingMockLinodeTypes[0].addons.backups.region_prices.find(
+      (regionPrice) => regionPrice.id === initialRegion.id
+    );
+    const newPrice = dcPricingMockLinodeTypes[1].region_prices.find(
+      (linodeType) => linodeType.id === newRegion.id
+    );
+    const newBackupPrice = dcPricingMockLinodeTypes[1].addons.backups.region_prices.find(
+      (regionPrice) => regionPrice.id === newRegion.id
+    );
+
     mockAppendFeatureFlags({
       dcSpecificPricing: makeFeatureFlagData(true),
     }).as('getFeatureFlags');
@@ -175,15 +189,28 @@ describe('create linode', () => {
       dcPricingPlanPlaceholder
     );
 
-    // Confirm that the checkout summary at the bottom of the page reflects the correct price.
+    // Check the 'Backups' add on
+    cy.get('[data-testid="backups"]').should('be.visible').click();
+
     containsClick(selectRegionString).type(`${initialRegion.label} {enter}`);
     fbtClick('Shared CPU');
     getClick(`[id="${dcPricingMockLinodeTypes[0].id}"]`);
+    // Confirm that the backup prices are displayed as expected.
+    cy.get('[data-qa-add-ons="true"]')
+      .eq(1)
+      .within(() => {
+        cy.findByText(`$${currentBackupPrice.monthly}`).should('be.visible');
+        cy.findByText('per month').should('be.visible');
+      });
+    // Confirm that the checkout summary at the bottom of the page reflects the correct price.
     cy.get('[data-qa-summary="true"]').within(() => {
-      const currentPrice = dcPricingMockLinodeTypes[0].region_prices.find(
-        (regionPrice) => regionPrice.id === initialRegion.id
+      cy.findByText(`$${currentPrice.monthly.toFixed(2)}/month`).should(
+        'be.visible'
+      );
+      cy.findByText('Backups').should('be.visible');
+      cy.findByText(`$${currentBackupPrice.monthly.toFixed(2)}/month`).should(
+        'be.visible'
       );
-      cy.findByText(`$${currentPrice.monthly}0/month`).should('be.visible');
     });
 
     // Confirms that a notice is shown in the "Region" section of the Linode Create form informing the user of tiered pricing
@@ -194,15 +221,25 @@ describe('create linode', () => {
     //   .should('be.visible')
     //   .should('have.attr', 'href', dcPricingDocsUrl);
 
-    // Confirms that the summary updates to reflect price changes if the user changes their region and plan selection.
     containsClick(initialRegion.label).type(`${newRegion.label} {enter}`);
     fbtClick('Shared CPU');
     getClick(`[id="${dcPricingMockLinodeTypes[0].id}"]`);
+    // Confirm that the backup prices are displayed as expected.
+    cy.get('[data-qa-add-ons="true"]')
+      .eq(1)
+      .within(() => {
+        cy.findByText(`$${newBackupPrice.monthly}`).should('be.visible');
+        cy.findByText('per month').should('be.visible');
+      });
+    // Confirms that the summary updates to reflect price changes if the user changes their region and plan selection.
     cy.get('[data-qa-summary="true"]').within(() => {
-      const currentPrice = dcPricingMockLinodeTypes[1].region_prices.find(
-        (regionPrice) => regionPrice.id === newRegion.id
+      cy.findByText(`$${newPrice.monthly.toFixed(2)}/month`).should(
+        'be.visible'
+      );
+      cy.findByText('Backups').should('be.visible');
+      cy.findByText(`$${newBackupPrice.monthly.toFixed(2)}/month`).should(
+        'be.visible'
       );
-      cy.findByText(`$${currentPrice.monthly}0/month`).should('be.visible');
     });
 
     getClick('#linode-label').clear().type(linodeLabel);

From edbb12f4f306a11c044d2c1d52cb8a176024085a Mon Sep 17 00:00:00 2001
From: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>
Date: Wed, 1 Nov 2023 14:00:47 -0400
Subject: [PATCH 16/43] upcoming: [M3-7212] - Add dcGetWell flag (#9859)

* Add dcGetWell flag

* Added changeset: Add dcGetWell featureflag

* Update packages/manager/.changeset/pr-9859-upcoming-features-1698850082776.md

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

---------

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
---
 .../.changeset/pr-9859-upcoming-features-1698850082776.md    | 5 +++++
 packages/manager/src/dev-tools/FeatureFlagTool.tsx           | 1 +
 packages/manager/src/featureFlags.ts                         | 1 +
 3 files changed, 7 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-9859-upcoming-features-1698850082776.md

diff --git a/packages/manager/.changeset/pr-9859-upcoming-features-1698850082776.md b/packages/manager/.changeset/pr-9859-upcoming-features-1698850082776.md
new file mode 100644
index 00000000000..9da6ffb831d
--- /dev/null
+++ b/packages/manager/.changeset/pr-9859-upcoming-features-1698850082776.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add `dcGetWell` feature flag ([#9859](https://github.com/linode/manager/pull/9859))
diff --git a/packages/manager/src/dev-tools/FeatureFlagTool.tsx b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
index 32b55651b62..942ccdfe6ad 100644
--- a/packages/manager/src/dev-tools/FeatureFlagTool.tsx
+++ b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
@@ -17,6 +17,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'aglb', label: 'AGLB' },
   { flag: 'aglbFullCreateFlow', label: 'AGLB Full Create Flow' },
   { flag: 'unifiedMigrations', label: 'Unified Migrations' },
+  { flag: 'dcGetWell', label: 'DC Get Well' },
   { flag: 'dcSpecificPricing', label: 'DC-Specific Pricing' },
   { flag: 'objDcSpecificPricing', label: 'OBJ Storage DC-Specific Pricing' },
   { flag: 'selfServeBetas', label: 'Self Serve Betas' },
diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts
index b8059ce1e9f..027a49547cf 100644
--- a/packages/manager/src/featureFlags.ts
+++ b/packages/manager/src/featureFlags.ts
@@ -45,6 +45,7 @@ export interface Flags {
   apiMaintenance: APIMaintenance;
   databaseBeta: boolean;
   databases: boolean;
+  dcGetWell: boolean;
   dcSpecificPricing: boolean;
   ipv6Sharing: boolean;
   kubernetesDashboardAvailability: boolean;

From e9e4aef3794b477309d976107ef4d1d1027f7578 Mon Sep 17 00:00:00 2001
From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
Date: Wed, 1 Nov 2023 15:26:43 -0400
Subject: [PATCH 17/43] upcoming: [M3-7213] - DC Get Well endpoints, queries,
 and mock data (#9860)

* endpoints and endpoint types for dc get well

* dc get well react query

* mock data

* update endpoint oops

* changesets

* fix mock data

* update to region capabilities

* Update packages/manager/.changeset/pr-9860-upcoming-features-1698852576816.md

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

* Update packages/api-v4/.changeset/pr-9860-upcoming-features-1698852464578.md

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

---------

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
---
 ...pr-9860-upcoming-features-1698852464578.md |  5 +++
 packages/api-v4/src/account/account.ts        | 38 ++++++++++++++++-
 packages/api-v4/src/account/types.ts          |  7 +++-
 ...pr-9860-upcoming-features-1698852576816.md |  5 +++
 .../src/factories/accountAvailability.ts      | 14 +++++++
 packages/manager/src/factories/index.ts       |  1 +
 packages/manager/src/mocks/serverHandlers.ts  | 19 +++++++++
 .../src/queries/accountAvailability.ts        | 42 +++++++++++++++++++
 8 files changed, 129 insertions(+), 2 deletions(-)
 create mode 100644 packages/api-v4/.changeset/pr-9860-upcoming-features-1698852464578.md
 create mode 100644 packages/manager/.changeset/pr-9860-upcoming-features-1698852576816.md
 create mode 100644 packages/manager/src/factories/accountAvailability.ts
 create mode 100644 packages/manager/src/queries/accountAvailability.ts

diff --git a/packages/api-v4/.changeset/pr-9860-upcoming-features-1698852464578.md b/packages/api-v4/.changeset/pr-9860-upcoming-features-1698852464578.md
new file mode 100644
index 00000000000..4d571d8014c
--- /dev/null
+++ b/packages/api-v4/.changeset/pr-9860-upcoming-features-1698852464578.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add `getAccountAvailabilities` and `getAccountAvailability` methods for DC Get Well initiative ([#9860](https://github.com/linode/manager/pull/9860))
diff --git a/packages/api-v4/src/account/account.ts b/packages/api-v4/src/account/account.ts
index a606bb8c141..fb585984394 100644
--- a/packages/api-v4/src/account/account.ts
+++ b/packages/api-v4/src/account/account.ts
@@ -3,15 +3,23 @@ import {
   UpdateAccountSettingsSchema,
 } from '@linode/validation/lib/account.schema';
 import { API_ROOT, BETA_API_ROOT } from '../constants';
-import Request, { setData, setMethod, setURL } from '../request';
+import Request, {
+  setData,
+  setMethod,
+  setURL,
+  setParams,
+  setXFilter,
+} from '../request';
 import {
   Account,
+  AccountAvailability,
   AccountSettings,
   CancelAccount,
   CancelAccountPayload,
   Agreements,
   RegionalNetworkUtilization,
 } from './types';
+import { Filter, ResourcePage as Page, Params } from '../types';
 
 /**
  * getAccountInfo
@@ -99,6 +107,34 @@ export const getAccountAgreements = () =>
     setMethod('GET')
   );
 
+/**
+ * getAccountAvailabilities
+ *
+ * Gets the account's entity availability for each region. Specifically
+ * tells which entities the account does not have capability for in each region.
+ *
+ */
+export const getAccountAvailabilities = (params?: Params, filter?: Filter) =>
+  Request<Page<AccountAvailability>>(
+    setURL(`${API_ROOT}/account/availability`),
+    setMethod('GET'),
+    setParams(params),
+    setXFilter(filter)
+  );
+
+/**
+ * getAccountAvailability
+ *
+ * Gets the account's entity availability for given region. Specifically
+ * tells which entities the account does not have capability for in given region.
+ *
+ */
+export const getAccountAvailability = (regionId: string) =>
+  Request<AccountAvailability>(
+    setURL(`${API_ROOT}/account/availability/${encodeURIComponent(regionId)}`),
+    setMethod('GET')
+  );
+
 /**
  * signAgreement
  *
diff --git a/packages/api-v4/src/account/types.ts b/packages/api-v4/src/account/types.ts
index e3ab5fdf759..e691e362903 100644
--- a/packages/api-v4/src/account/types.ts
+++ b/packages/api-v4/src/account/types.ts
@@ -1,5 +1,5 @@
 import { APIWarning } from '../types';
-import type { Region } from '../regions';
+import type { Capabilities, Region } from '../regions';
 
 export interface User {
   username: string;
@@ -69,6 +69,11 @@ export type AccountCapability =
   | 'Vlans'
   | 'VPCs';
 
+export interface AccountAvailability {
+  id: string; // will be ID of region
+  unavailable: Capabilities[];
+}
+
 export interface AccountSettings {
   managed: boolean;
   longview_subscription: string | null;
diff --git a/packages/manager/.changeset/pr-9860-upcoming-features-1698852576816.md b/packages/manager/.changeset/pr-9860-upcoming-features-1698852576816.md
new file mode 100644
index 00000000000..f8f9ca47aab
--- /dev/null
+++ b/packages/manager/.changeset/pr-9860-upcoming-features-1698852576816.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add RQ queries and mock data for DC Get Well ([#9860](https://github.com/linode/manager/pull/9860))
diff --git a/packages/manager/src/factories/accountAvailability.ts b/packages/manager/src/factories/accountAvailability.ts
new file mode 100644
index 00000000000..3ce664a088f
--- /dev/null
+++ b/packages/manager/src/factories/accountAvailability.ts
@@ -0,0 +1,14 @@
+import { AccountAvailability } from '@linode/api-v4';
+import * as Factory from 'factory.ts';
+
+import { pickRandom } from 'src/utilities/random';
+
+export const accountAvailabilityFactory = Factory.Sync.makeFactory<AccountAvailability>(
+  {
+    id: pickRandom(['us-mia', 'ap-south', 'ap-northeast']),
+    unavailable: pickRandom([
+      ['Block Storage'],
+      ['Linodes', 'Block Storage', 'Kubernetes', 'NodeBalancers'],
+    ]),
+  }
+);
diff --git a/packages/manager/src/factories/index.ts b/packages/manager/src/factories/index.ts
index 1d27e268b33..e2b9be33241 100644
--- a/packages/manager/src/factories/index.ts
+++ b/packages/manager/src/factories/index.ts
@@ -1,4 +1,5 @@
 export * from './account';
+export * from './accountAvailability';
 export * from './accountSettings';
 export * from './accountMaintenance';
 export * from './accountOAuth';
diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts
index 20ba09b075c..0d761530641 100644
--- a/packages/manager/src/mocks/serverHandlers.ts
+++ b/packages/manager/src/mocks/serverHandlers.ts
@@ -12,6 +12,7 @@ import { MockData } from 'src/dev-tools/mockDataController';
 import {
   VLANFactory,
   abuseTicketNotificationFactory,
+  accountAvailabilityFactory,
   accountBetaFactory,
   accountFactory,
   accountMaintenanceFactory,
@@ -1007,6 +1008,24 @@ export const handlers = [
     });
     return res(ctx.json(account));
   }),
+  rest.get('*/account/availability', (req, res, ctx) => {
+    const florida = accountAvailabilityFactory.build({
+      id: 'us-mia',
+      unavailable: ['Block Storage'],
+    });
+    const singapore = accountAvailabilityFactory.build({
+      id: 'ap-south',
+      unavailable: ['Linodes', 'Block Storage', 'Kubernetes', 'NodeBalancers'],
+    });
+    const tokyo = accountAvailabilityFactory.build({
+      id: 'ap-northeast',
+      unavailable: ['Linodes', 'Block Storage', 'Kubernetes', 'NodeBalancers'],
+    });
+    return res(ctx.json(makeResourcePage([florida, singapore, tokyo])));
+  }),
+  rest.get('*/account/availability/:regionId', (req, res, ctx) => {
+    return res(ctx.json(accountAvailabilityFactory.build()));
+  }),
   rest.put('*/account', (req, res, ctx) => {
     return res(ctx.json({ ...accountFactory.build(), ...(req.body as any) }));
   }),
diff --git a/packages/manager/src/queries/accountAvailability.ts b/packages/manager/src/queries/accountAvailability.ts
new file mode 100644
index 00000000000..2ffa8d104e7
--- /dev/null
+++ b/packages/manager/src/queries/accountAvailability.ts
@@ -0,0 +1,42 @@
+import {
+  AccountAvailability,
+  getAccountAvailabilities,
+  getAccountAvailability,
+} from '@linode/api-v4/lib/account';
+import {
+  APIError,
+  Filter,
+  Params,
+  ResourcePage,
+} from '@linode/api-v4/lib/types';
+import { useQuery } from 'react-query';
+
+const queryKey = 'account-availability';
+
+export const useAccountAvailabilitiesQuery = (
+  params: Params,
+  filter: Filter,
+  enabled: boolean = true
+) => {
+  return useQuery<ResourcePage<AccountAvailability>, APIError[]>(
+    [queryKey, 'paginated', params, filter],
+    () => getAccountAvailabilities(params, filter),
+    {
+      enabled,
+      keepPreviousData: true,
+    }
+  );
+};
+
+export const useAccountAvailabilityQuery = (
+  id: string,
+  enabled: boolean = true
+) => {
+  return useQuery<AccountAvailability, APIError[]>(
+    [queryKey, 'accountAvailability', id],
+    () => getAccountAvailability(id),
+    {
+      enabled,
+    }
+  );
+};

From 36e2adf780f279a3ee85fef351dcf37427239240 Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Wed, 1 Nov 2023 15:39:30 -0400
Subject: [PATCH 18/43] refactor: [M3-7334] - Improve, clean up, and simplify
 app entrypoint and render tree logic (#9844)

* initial working

* more fixes

* fixes to auth flow

* why default to null?

* clean up splash screen styles

* clean up

* simplify things more

* rename files

* Added changeset: Clean up app entrypoint render logic

* improve useEffect logic

* clean up / feeback

* feedback and clean up

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
---
 .../pr-9844-tech-stories-1698347210181.md     |   5 +
 packages/manager/src/App.tsx                  |  36 ++-
 packages/manager/src/GoTo.tsx                 |   6 +-
 packages/manager/src/MainContent.tsx          | 251 ++++++++----------
 .../AuthenticationWrapper.test.tsx            |  40 ---
 .../AuthenticationWrapper.tsx                 | 179 -------------
 .../components/AuthenticationWrapper/index.ts |   2 -
 .../manager/src/components/SplashScreen.tsx   |  25 ++
 .../components/SplashScreen/SplashScreen.tsx  |  48 ----
 .../src/components/SplashScreen/index.ts      |   1 -
 packages/manager/src/features/Lish/Lish.tsx   |   7 +-
 .../manager/src/features/TopMenu/TopMenu.tsx  |  14 +-
 .../manager/src/hooks/useFeatureFlagLoad.ts   |  16 --
 packages/manager/src/hooks/useGlobalErrors.ts |   7 +
 .../manager/src/hooks/useInitialRequests.ts   | 101 +++++++
 .../manager/src/hooks/usePendingUpload.ts     |   7 +
 packages/manager/src/index.tsx                | 110 ++++----
 .../authentication/authentication.reducer.ts  |  25 +-
 .../featureFlagsLoad.actions.ts               |   5 -
 .../featureFlagsLoad.reducer.ts               |  19 --
 packages/manager/src/store/index.ts           |  14 -
 .../store/initialLoad/initialLoad.actions.ts  |   6 -
 .../store/initialLoad/initialLoad.reducer.ts  |  22 --
 ...entifyUser.tsx => useSetupFeatureFlags.ts} |  27 +-
 24 files changed, 357 insertions(+), 616 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9844-tech-stories-1698347210181.md
 delete mode 100644 packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.test.tsx
 delete mode 100644 packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.tsx
 delete mode 100644 packages/manager/src/components/AuthenticationWrapper/index.ts
 create mode 100644 packages/manager/src/components/SplashScreen.tsx
 delete mode 100644 packages/manager/src/components/SplashScreen/SplashScreen.tsx
 delete mode 100644 packages/manager/src/components/SplashScreen/index.ts
 delete mode 100644 packages/manager/src/hooks/useFeatureFlagLoad.ts
 create mode 100644 packages/manager/src/hooks/useGlobalErrors.ts
 create mode 100644 packages/manager/src/hooks/useInitialRequests.ts
 create mode 100644 packages/manager/src/hooks/usePendingUpload.ts
 delete mode 100644 packages/manager/src/store/featureFlagsLoad/featureFlagsLoad.actions.ts
 delete mode 100644 packages/manager/src/store/featureFlagsLoad/featureFlagsLoad.reducer.ts
 delete mode 100644 packages/manager/src/store/initialLoad/initialLoad.actions.ts
 delete mode 100644 packages/manager/src/store/initialLoad/initialLoad.reducer.ts
 rename packages/manager/src/{IdentifyUser.tsx => useSetupFeatureFlags.ts} (81%)

diff --git a/packages/manager/.changeset/pr-9844-tech-stories-1698347210181.md b/packages/manager/.changeset/pr-9844-tech-stories-1698347210181.md
new file mode 100644
index 00000000000..71b77317950
--- /dev/null
+++ b/packages/manager/.changeset/pr-9844-tech-stories-1698347210181.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Clean up app entrypoint render logic ([#9844](https://github.com/linode/manager/pull/9844))
diff --git a/packages/manager/src/App.tsx b/packages/manager/src/App.tsx
index 47e7ac976c0..9d71807abe9 100644
--- a/packages/manager/src/App.tsx
+++ b/packages/manager/src/App.tsx
@@ -2,7 +2,6 @@ import '@reach/tabs/styles.css';
 import { ErrorBoundary } from '@sentry/react';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
-import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
 import {
@@ -14,13 +13,12 @@ import withFeatureFlagProvider from 'src/containers/withFeatureFlagProvider.cont
 import { EventWithStore, events$ } from 'src/events';
 import TheApplicationIsOnFire from 'src/features/TheApplicationIsOnFire';
 
-import GoTo from './GoTo';
-import IdentifyUser from './IdentifyUser';
-import MainContent from './MainContent';
+import { GoTo } from './GoTo';
+import { MainContent } from './MainContent';
+import { SplashScreen } from './components/SplashScreen';
 import { ADOBE_ANALYTICS_URL, NUM_ADOBE_SCRIPTS } from './constants';
 import { reportException } from './exceptionReporting';
-import { useAuthentication } from './hooks/useAuthentication';
-import { useFeatureFlagsLoad } from './hooks/useFeatureFlagLoad';
+import { useInitialRequests } from './hooks/useInitialRequests';
 import { loadScript } from './hooks/useScript';
 import { oauthClientsEventHandler } from './queries/accountOAuth';
 import { databaseEventsHandler } from './queries/databases';
@@ -37,7 +35,7 @@ import { sshKeyEventHandler } from './queries/profile';
 import { supportTicketEventHandler } from './queries/support';
 import { tokenEventHandler } from './queries/tokens';
 import { volumeEventsHandler } from './queries/volumes';
-import { ApplicationState } from './store';
+import { useSetupFeatureFlags } from './useSetupFeatureFlags';
 import { getNextThemeValue } from './utilities/theme';
 import { isOSMac } from './utilities/userAgent';
 
@@ -52,11 +50,9 @@ const BaseApp = withDocumentTitleProvider(
       const { data: preferences } = usePreferences();
       const { mutateAsync: updateUserPreferences } = useMutatePreferences();
 
-      const { featureFlagsLoading } = useFeatureFlagsLoad();
-      const appIsLoading = useSelector(
-        (state: ApplicationState) => state.initialLoad.appIsLoading
-      );
-      const { loggedInAsCustomer } = useAuthentication();
+      const { isLoading } = useInitialRequests();
+
+      const { areFeatureFlagsLoading } = useSetupFeatureFlags();
 
       const { enqueueSnackbar } = useSnackbar();
 
@@ -263,10 +259,14 @@ const BaseApp = withDocumentTitleProvider(
         };
       }, [handleMigrationEvent]);
 
+      if (isLoading || areFeatureFlagsLoading) {
+        return <SplashScreen />;
+      }
+
       return (
         <ErrorBoundary fallback={<TheApplicationIsOnFire />}>
           {/** Accessibility helper */}
-          <a href="#main-content" className="skip-link">
+          <a className="skip-link" href="#main-content">
             Skip to main content
           </a>
           <div hidden>
@@ -276,16 +276,10 @@ const BaseApp = withDocumentTitleProvider(
               Opens an external site in a new window
             </span>
           </div>
-          <GoTo open={goToOpen} onClose={() => setGoToOpen(false)} />
+          <GoTo onClose={() => setGoToOpen(false)} open={goToOpen} />
           {/** Update the LD client with the user's id as soon as we know it */}
-          <IdentifyUser />
           <DocumentTitleSegment segment="Akamai Cloud Manager" />
-          {featureFlagsLoading ? null : (
-            <MainContent
-              appIsLoading={appIsLoading}
-              isLoggedInAsCustomer={loggedInAsCustomer}
-            />
-          )}
+          <MainContent />
         </ErrorBoundary>
       );
     })
diff --git a/packages/manager/src/GoTo.tsx b/packages/manager/src/GoTo.tsx
index c66b88a8684..32af40cb471 100644
--- a/packages/manager/src/GoTo.tsx
+++ b/packages/manager/src/GoTo.tsx
@@ -58,7 +58,7 @@ interface Props {
   open: boolean;
 }
 
-const GoTo = (props: Props) => {
+export const GoTo = React.memo((props: Props) => {
   const classes = useStyles();
   const routerHistory = useHistory();
   const { _hasAccountAccess, _isManagedAccount } = useAccountManagement();
@@ -195,6 +195,4 @@ const GoTo = (props: Props) => {
       </div>
     </Dialog>
   );
-};
-
-export default React.memo(GoTo);
+});
diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx
index 4109e1c5739..56c6a6edcd3 100644
--- a/packages/manager/src/MainContent.tsx
+++ b/packages/manager/src/MainContent.tsx
@@ -3,7 +3,6 @@ import { Theme } from '@mui/material/styles';
 import { isEmpty } from 'ramda';
 import * as React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import { compose } from 'recompose';
 import { makeStyles } from 'tss-react/mui';
 
 import Logo from 'src/assets/logo/akamai-logo.svg';
@@ -11,12 +10,8 @@ import { Box } from 'src/components/Box';
 import { MainContentBanner } from 'src/components/MainContentBanner';
 import { MaintenanceScreen } from 'src/components/MaintenanceScreen';
 import { NotFound } from 'src/components/NotFound';
-import { PreferenceToggle } from 'src/components/PreferenceToggle/PreferenceToggle';
 import { SideMenu } from 'src/components/SideMenu';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
-import withGlobalErrors, {
-  Props as GlobalErrorProps,
-} from 'src/containers/globalErrors.container';
 import { useDialogContext } from 'src/context/useDialogContext';
 import { Footer } from 'src/features/Footer';
 import { GlobalNotifications } from 'src/features/GlobalNotifications/GlobalNotifications';
@@ -29,15 +24,14 @@ import { TopMenu } from 'src/features/TopMenu/TopMenu';
 import { useAccountManagement } from 'src/hooks/useAccountManagement';
 import { useFlags } from 'src/hooks/useFlags';
 import { useDatabaseEnginesQuery } from 'src/queries/databases';
-import { usePreferences } from 'src/queries/preferences';
+import { useMutatePreferences, usePreferences } from 'src/queries/preferences';
 import { ManagerPreferences } from 'src/types/ManagerPreferences';
 import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
 
 import { ENABLE_MAINTENANCE_MODE } from './constants';
 import { complianceUpdateContext } from './context/complianceUpdateContext';
 import { FlagSet } from './featureFlags';
-
-import type { PreferenceToggleProps } from 'src/components/PreferenceToggle/PreferenceToggle';
+import { useGlobalErrors } from './hooks/useGlobalErrors';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   activationWrapper: {
@@ -98,10 +92,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
     },
     width: '100%',
   },
-  hidden: {
-    display: 'none',
-    overflow: 'hidden',
-  },
   logo: {
     '& > g': {
       fill: theme.color.black,
@@ -128,13 +118,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
 }));
 
-interface Props {
-  appIsLoading: boolean;
-  isLoggedInAsCustomer: boolean;
-}
-
-type CombinedProps = Props & GlobalErrorProps;
-
 const Account = React.lazy(() =>
   import('src/features/Account').then((module) => ({
     default: module.Account,
@@ -189,10 +172,13 @@ const Databases = React.lazy(() => import('src/features/Databases'));
 const BetaRoutes = React.lazy(() => import('src/features/Betas'));
 const VPC = React.lazy(() => import('src/features/VPCs'));
 
-const MainContent = (props: CombinedProps) => {
+export const MainContent = () => {
   const { classes, cx } = useStyles();
   const flags = useFlags();
   const { data: preferences } = usePreferences();
+  const { mutateAsync: updatePreferences } = useMutatePreferences();
+
+  const globalErrors = useGlobalErrors();
 
   const NotificationProvider = notificationContext.Provider;
   const contextValue = useNotificationContext();
@@ -249,7 +235,7 @@ const MainContent = (props: CombinedProps) => {
    *
    * So in this case, we'll show something more user-friendly
    */
-  if (props.globalErrors.account_unactivated) {
+  if (globalErrors.account_unactivated) {
     return (
       <div className={classes.bgStyling}>
         <div className={classes.activationWrapper}>
@@ -283,139 +269,118 @@ const MainContent = (props: CombinedProps) => {
   }
 
   // If the API is in maintenance mode, return a Maintenance screen
-  if (props.globalErrors.api_maintenance_mode || ENABLE_MAINTENANCE_MODE) {
+  if (globalErrors.api_maintenance_mode || ENABLE_MAINTENANCE_MODE) {
     return <MaintenanceScreen />;
   }
 
+  const desktopMenuIsOpen = preferences?.desktop_sidebar_open ?? false;
+
+  const desktopMenuToggle = () => {
+    updatePreferences({
+      desktop_sidebar_open: !preferences?.desktop_sidebar_open,
+    });
+  };
+
   /**
    * otherwise just show the rest of the app.
    */
   return (
-    <div
-      className={cx({
-        [classes.appFrame]: true,
-        /**
-         * hidden to prevent some jankiness with the app loading before the splash screen
-         */
-        [classes.hidden]: props.appIsLoading,
-      })}
-    >
-      <PreferenceToggle<boolean>
-        preferenceKey="desktop_sidebar_open"
-        preferenceOptions={[true, false]}
-      >
-        {({
-          preference: desktopMenuIsOpen,
-          togglePreference: desktopMenuToggle,
-        }: PreferenceToggleProps<boolean>) => (
-          <ComplianceUpdateProvider value={complianceUpdateContextValue}>
-            <NotificationProvider value={contextValue}>
-              <>
-                {shouldDisplayMainContentBanner ? (
-                  <MainContentBanner
-                    bannerKey={flags.mainContentBanner?.key ?? ''}
-                    bannerText={flags.mainContentBanner?.text ?? ''}
-                    linkText={flags.mainContentBanner?.link?.text ?? ''}
-                    onClose={() => setBannerDismissed(true)}
-                    url={flags.mainContentBanner?.link?.url ?? ''}
-                  />
-                ) : null}
-                <SideMenu
-                  closeMenu={() => toggleMenu(false)}
-                  collapse={desktopMenuIsOpen || false}
-                  open={menuIsOpen}
-                />
-                <div
-                  className={cx(classes.content, {
-                    [classes.fullWidthContent]:
-                      desktopMenuIsOpen ||
-                      (desktopMenuIsOpen && desktopMenuIsOpen === true),
-                  })}
-                >
-                  <TopMenu
-                    desktopMenuToggle={desktopMenuToggle}
-                    isLoggedInAsCustomer={props.isLoggedInAsCustomer}
-                    isSideMenuOpen={!desktopMenuIsOpen}
-                    openSideMenu={() => toggleMenu(true)}
-                    username={username}
-                  />
-                  <main
-                    className={classes.cmrWrapper}
-                    id="main-content"
-                    role="main"
-                  >
-                    <Grid className={classes.grid} container spacing={0}>
-                      <Grid className={cx(classes.switchWrapper, 'p0')}>
-                        <GlobalNotifications />
-                        <React.Suspense fallback={<SuspenseLoader />}>
-                          <Switch>
-                            <Route component={LinodesRoutes} path="/linodes" />
-                            <Route component={Volumes} path="/volumes" />
-                            <Redirect path="/volumes*" to="/volumes" />
-                            {flags.aglb && (
-                              <Route
-                                component={LoadBalancers}
-                                path="/loadbalancer*"
-                              />
-                            )}
-                            <Route
-                              component={NodeBalancers}
-                              path="/nodebalancers"
-                            />
-                            <Route component={Domains} path="/domains" />
-                            <Route component={Managed} path="/managed" />
-                            <Route component={Longview} path="/longview" />
-                            <Route component={Images} path="/images" />
-                            <Route
-                              component={StackScripts}
-                              path="/stackscripts"
-                            />
-                            <Route
-                              component={ObjectStorage}
-                              path="/object-storage"
-                            />
-                            <Route component={Kubernetes} path="/kubernetes" />
-                            <Route component={Account} path="/account" />
-                            <Route component={Profile} path="/profile" />
-                            <Route component={Help} path="/support" />
-                            <Route component={SearchLanding} path="/search" />
-                            <Route component={EventsLanding} path="/events" />
-                            <Route component={Firewalls} path="/firewalls" />
-                            {showDatabases ? (
-                              <Route component={Databases} path="/databases" />
-                            ) : null}
-                            {flags.selfServeBetas ? (
-                              <Route component={BetaRoutes} path="/betas" />
-                            ) : null}
-                            {showVPCs ? (
-                              <Route component={VPC} path="/vpcs" />
-                            ) : null}
-                            <Redirect exact from="/" to={defaultRoot} />
-                            {/** We don't want to break any bookmarks. This can probably be removed eventually. */}
-                            <Redirect from="/dashboard" to={defaultRoot} />
-                            <Route component={NotFound} />
-                          </Switch>
-                        </React.Suspense>
-                      </Grid>
-                    </Grid>
-                  </main>
-                </div>
-              </>
-            </NotificationProvider>
-            <Footer desktopMenuIsOpen={desktopMenuIsOpen} />
-            <ToastNotifications />
-          </ComplianceUpdateProvider>
-        )}
-      </PreferenceToggle>
+    <div className={classes.appFrame}>
+      <ComplianceUpdateProvider value={complianceUpdateContextValue}>
+        <NotificationProvider value={contextValue}>
+          <>
+            {shouldDisplayMainContentBanner ? (
+              <MainContentBanner
+                bannerKey={flags.mainContentBanner?.key ?? ''}
+                bannerText={flags.mainContentBanner?.text ?? ''}
+                linkText={flags.mainContentBanner?.link?.text ?? ''}
+                onClose={() => setBannerDismissed(true)}
+                url={flags.mainContentBanner?.link?.url ?? ''}
+              />
+            ) : null}
+            <SideMenu
+              closeMenu={() => toggleMenu(false)}
+              collapse={desktopMenuIsOpen || false}
+              open={menuIsOpen}
+            />
+            <div
+              className={cx(classes.content, {
+                [classes.fullWidthContent]:
+                  desktopMenuIsOpen ||
+                  (desktopMenuIsOpen && desktopMenuIsOpen === true),
+              })}
+            >
+              <TopMenu
+                desktopMenuToggle={desktopMenuToggle}
+                isSideMenuOpen={!desktopMenuIsOpen}
+                openSideMenu={() => toggleMenu(true)}
+                username={username}
+              />
+              <main
+                className={classes.cmrWrapper}
+                id="main-content"
+                role="main"
+              >
+                <Grid className={classes.grid} container spacing={0}>
+                  <Grid className={cx(classes.switchWrapper, 'p0')}>
+                    <GlobalNotifications />
+                    <React.Suspense fallback={<SuspenseLoader />}>
+                      <Switch>
+                        <Route component={LinodesRoutes} path="/linodes" />
+                        <Route component={Volumes} path="/volumes" />
+                        <Redirect path="/volumes*" to="/volumes" />
+                        {flags.aglb && (
+                          <Route
+                            component={LoadBalancers}
+                            path="/loadbalancer*"
+                          />
+                        )}
+                        <Route
+                          component={NodeBalancers}
+                          path="/nodebalancers"
+                        />
+                        <Route component={Domains} path="/domains" />
+                        <Route component={Managed} path="/managed" />
+                        <Route component={Longview} path="/longview" />
+                        <Route component={Images} path="/images" />
+                        <Route component={StackScripts} path="/stackscripts" />
+                        <Route
+                          component={ObjectStorage}
+                          path="/object-storage"
+                        />
+                        <Route component={Kubernetes} path="/kubernetes" />
+                        <Route component={Account} path="/account" />
+                        <Route component={Profile} path="/profile" />
+                        <Route component={Help} path="/support" />
+                        <Route component={SearchLanding} path="/search" />
+                        <Route component={EventsLanding} path="/events" />
+                        <Route component={Firewalls} path="/firewalls" />
+                        {showDatabases && (
+                          <Route component={Databases} path="/databases" />
+                        )}
+                        {flags.selfServeBetas && (
+                          <Route component={BetaRoutes} path="/betas" />
+                        )}
+                        {showVPCs && <Route component={VPC} path="/vpcs" />}
+                        <Redirect exact from="/" to={defaultRoot} />
+                        {/** We don't want to break any bookmarks. This can probably be removed eventually. */}
+                        <Redirect from="/dashboard" to={defaultRoot} />
+                        <Route component={NotFound} />
+                      </Switch>
+                    </React.Suspense>
+                  </Grid>
+                </Grid>
+              </main>
+            </div>
+          </>
+        </NotificationProvider>
+        <Footer desktopMenuIsOpen={desktopMenuIsOpen} />
+        <ToastNotifications />
+      </ComplianceUpdateProvider>
     </div>
   );
 };
 
-export default compose<CombinedProps, Props>(
-  React.memo,
-  withGlobalErrors()
-)(MainContent);
-
 // =============================================================================
 // Utilities
 // =============================================================================
diff --git a/packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.test.tsx b/packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.test.tsx
deleted file mode 100644
index 2fd604c8616..00000000000
--- a/packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.test.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { shallow } from 'enzyme';
-import * as React from 'react';
-
-import { AuthenticationWrapper } from 'src/components/AuthenticationWrapper/AuthenticationWrapper';
-import { queryClientFactory } from 'src/queries/base';
-import { storeFactory } from 'src/store';
-
-const queryClient = queryClientFactory();
-const store = storeFactory(queryClient);
-
-const component = shallow<AuthenticationWrapper>(
-  <AuthenticationWrapper
-    initSession={jest.fn()}
-    isAuthenticated={false}
-    markAppAsDoneLoading={jest.fn()}
-    pendingUpload={false}
-    queryClient={queryClient}
-    store={store}
-  >
-    <div />
-  </AuthenticationWrapper>
-);
-
-describe('AuthenticationWrapper', () => {
-  it('should render just a react fragment if showChildren state is false', () => {
-    expect(component.childAt(0)).toHaveLength(0);
-  });
-  it('should render one child when showChildren state is true', () => {
-    component.setState({ showChildren: true });
-    expect(component.childAt(0)).toBeDefined();
-  });
-  it('should invoke props.initSession when the component is mounted', () => {
-    expect(component.instance().props.initSession).toHaveBeenCalledTimes(1);
-  });
-  it('should not showChildren initially because they should be shown after makeInitialRequests', () => {
-    component.setState({ showChildren: false });
-    component.setProps({ isAuthenticated: true });
-    expect(component.state('showChildren')).toBeFalsy();
-  });
-});
diff --git a/packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.tsx b/packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.tsx
deleted file mode 100644
index c9ca6872336..00000000000
--- a/packages/manager/src/components/AuthenticationWrapper/AuthenticationWrapper.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import { getAccountInfo, getAccountSettings } from '@linode/api-v4/lib/account';
-import { getProfile } from '@linode/api-v4/lib/profile';
-import * as React from 'react';
-import { MapDispatchToProps, connect } from 'react-redux';
-import { compose } from 'recompose';
-import { Action } from 'redux';
-import { ThunkDispatch } from 'redux-thunk';
-
-import {
-  WithApplicationStoreProps,
-  withApplicationStore,
-} from 'src/containers/withApplicationStore.container';
-import {
-  WithQueryClientProps,
-  withQueryClient,
-} from 'src/containers/withQueryClient.container';
-import { startEventsInterval } from 'src/events';
-import { queryKey as accountQueryKey } from 'src/queries/account';
-import { redirectToLogin } from 'src/session';
-import { ApplicationState } from 'src/store';
-import { handleInitTokens } from 'src/store/authentication/authentication.actions';
-import { handleLoadingDone } from 'src/store/initialLoad/initialLoad.actions';
-import { State as PendingUploadState } from 'src/store/pendingUpload';
-import { MapState } from 'src/store/types';
-import SplashScreen from '../SplashScreen';
-
-interface Props {
-  children: React.ReactNode;
-}
-
-type CombinedProps = Props &
-  DispatchProps &
-  StateProps &
-  WithQueryClientProps &
-  WithApplicationStoreProps;
-
-export class AuthenticationWrapper extends React.Component<CombinedProps> {
-  componentDidMount() {
-    const { initSession } = this.props;
-    /**
-     * set redux state to what's in local storage
-     * or expire the tokens if the expiry time is in the past
-     *
-     * if nothing exists in local storage, we get shot off to login
-     */
-    initSession();
-
-    /**
-     * this is the case where we've just come back from login and need
-     * to show the children onMount
-     */
-    if (this.props.isAuthenticated) {
-      this.makeInitialRequests();
-    }
-  }
-
-  /**
-   * handles for the case where we've refreshed the page
-   * and redux has now been synced with what is in local storage
-   */
-  componentDidUpdate(prevProps: CombinedProps) {
-    /** if we were previously not authenticated and now we are */
-    if (
-      !prevProps.isAuthenticated &&
-      this.props.isAuthenticated &&
-      !this.state.showChildren
-    ) {
-      this.makeInitialRequests();
-    }
-
-    /** basically handles for the case where our token is expired or we got a 401 error */
-    if (
-      prevProps.isAuthenticated &&
-      !this.props.isAuthenticated &&
-      // Do not redirect to Login if there is a pending image upload.
-      !this.props.pendingUpload
-    ) {
-      redirectToLogin(location.pathname, location.search);
-    }
-  }
-
-  render() {
-    const { children } = this.props;
-    const { showChildren } = this.state;
-
-    if (showChildren) {
-      return children;
-    }
-
-    return <SplashScreen />;
-  }
-
-  static defaultProps = {
-    isAuthenticated: false,
-  };
-
-  /**
-   * We make a series of requests for data on app load. The flow is:
-   * 1. App begins load; users see splash screen
-   * 2. Initial requests (in makeInitialRequests) are made (account, profile, etc.)
-   * 3. Initial requests complete; app is marked as done loading
-   * 4. As splash screen goes away, secondary requests (in makeSecondaryRequests -- Linodes, types, regions)
-   * are kicked off
-   */
-  makeInitialRequests = async () => {
-    // When loading Lish we avoid all this extra data loading
-    if (window.location?.pathname?.match(/linodes\/[0-9]+\/lish/)) {
-      this.setState({ showChildren: true });
-      return;
-    }
-
-    // Initial Requests: Things we need immediately (before rendering the app)
-    const dataFetchingPromises: Promise<any>[] = [
-      // Fetch user's account information
-      this.props.queryClient.prefetchQuery({
-        queryFn: getAccountInfo,
-        queryKey: accountQueryKey,
-      }),
-
-      // Username and whether a user is restricted
-      this.props.queryClient.prefetchQuery({
-        queryFn: getProfile,
-        queryKey: 'profile',
-      }),
-
-      // Is a user managed
-      this.props.queryClient.prefetchQuery({
-        queryFn: getAccountSettings,
-        queryKey: 'account-settings',
-      }),
-    ];
-
-    // Start events polling
-    startEventsInterval(this.props.store, this.props.queryClient);
-
-    try {
-      await Promise.all(dataFetchingPromises);
-    } catch {
-      /** We choose to do nothing, relying on the Redux error state. */
-    } finally {
-      this.props.markAppAsDoneLoading();
-      this.setState({ showChildren: true });
-    }
-  };
-
-  state = {
-    showChildren: false,
-  };
-}
-
-interface StateProps {
-  isAuthenticated: boolean;
-  pendingUpload: PendingUploadState;
-}
-
-const mapStateToProps: MapState<StateProps, {}> = (state) => ({
-  isAuthenticated: Boolean(state.authentication.token),
-  pendingUpload: state.pendingUpload,
-});
-
-interface DispatchProps {
-  initSession: () => void;
-  markAppAsDoneLoading: () => void;
-}
-
-const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (
-  dispatch: ThunkDispatch<ApplicationState, undefined, Action<any>>
-) => ({
-  initSession: () => dispatch(handleInitTokens()),
-  markAppAsDoneLoading: () => dispatch(handleLoadingDone()),
-});
-
-const connected = connect(mapStateToProps, mapDispatchToProps);
-
-export default compose(
-  connected,
-  withQueryClient,
-  withApplicationStore
-)(AuthenticationWrapper);
diff --git a/packages/manager/src/components/AuthenticationWrapper/index.ts b/packages/manager/src/components/AuthenticationWrapper/index.ts
deleted file mode 100644
index 236d705ea28..00000000000
--- a/packages/manager/src/components/AuthenticationWrapper/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import AuthenticationWrapper from './AuthenticationWrapper';
-export default AuthenticationWrapper;
diff --git a/packages/manager/src/components/SplashScreen.tsx b/packages/manager/src/components/SplashScreen.tsx
new file mode 100644
index 00000000000..af0b993c47d
--- /dev/null
+++ b/packages/manager/src/components/SplashScreen.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { CircleProgress } from 'src/components/CircleProgress';
+import { srSpeak } from 'src/utilities/accessibility';
+
+import { Box } from './Box';
+
+export const SplashScreen = () => {
+  React.useEffect(() => {
+    // @TODO: The utilility cases a scrollbar to show in the browser, fix it.
+    srSpeak('Loading Linode Cloud Manager', 'polite');
+  }, []);
+
+  return (
+    <Box
+      alignItems="center"
+      aria-label="Loading Cloud Manager"
+      display="flex"
+      height="100vh"
+      justifyContent="center"
+    >
+      <CircleProgress />
+    </Box>
+  );
+};
diff --git a/packages/manager/src/components/SplashScreen/SplashScreen.tsx b/packages/manager/src/components/SplashScreen/SplashScreen.tsx
deleted file mode 100644
index 2b062e6252e..00000000000
--- a/packages/manager/src/components/SplashScreen/SplashScreen.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { styled } from '@mui/material/styles';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { compose } from 'recompose';
-
-import { CircleProgress } from 'src/components/CircleProgress';
-import { useFeatureFlagsLoad } from 'src/hooks/useFeatureFlagLoad';
-import { MapState } from 'src/store/types';
-import { srSpeak } from 'src/utilities/accessibility';
-
-const SplashScreen = (props: StateProps) => {
-  React.useEffect(() => {
-    srSpeak('Loading Linode Cloud Manager', 'polite');
-  }, []);
-
-  const { featureFlagsLoading } = useFeatureFlagsLoad();
-
-  return props.appIsLoading || featureFlagsLoading ? (
-    <StyledDiv aria-label="Loading Cloud Manager">
-      <CircleProgress />
-    </StyledDiv>
-  ) : null;
-};
-
-interface StateProps {
-  appIsLoading: boolean;
-}
-
-const mapStateToProps: MapState<StateProps, {}> = (state) => ({
-  appIsLoading: state.initialLoad.appIsLoading,
-});
-
-const connected = connect(mapStateToProps);
-
-export default compose<StateProps, {}>(connected, React.memo)(SplashScreen);
-
-const StyledDiv = styled('div')(({ theme }) => ({
-  alignItems: 'center',
-  backgroundColor: theme.bg.main,
-  display: 'flex',
-  height: '100vh',
-  justifyContent: 'center',
-  left: 0,
-  position: 'fixed',
-  top: 0,
-  width: '100vw',
-  zIndex: 100,
-}));
diff --git a/packages/manager/src/components/SplashScreen/index.ts b/packages/manager/src/components/SplashScreen/index.ts
deleted file mode 100644
index 9a83fef2531..00000000000
--- a/packages/manager/src/components/SplashScreen/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SplashScreen';
diff --git a/packages/manager/src/features/Lish/Lish.tsx b/packages/manager/src/features/Lish/Lish.tsx
index aa0e30a5631..ea5ac6fd62e 100644
--- a/packages/manager/src/features/Lish/Lish.tsx
+++ b/packages/manager/src/features/Lish/Lish.tsx
@@ -7,8 +7,9 @@ import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { TabPanels } from 'src/components/ReachTabPanels';
 import { Tabs } from 'src/components/ReachTabs';
 import { SafeTabPanel } from 'src/components/SafeTabPanel/SafeTabPanel';
-import { TabLinkList } from 'src/components/TabLinkList/TabLinkList';
 import { Tab } from 'src/components/TabLinkList/TabLinkList';
+import { TabLinkList } from 'src/components/TabLinkList/TabLinkList';
+import { useInitialRequests } from 'src/hooks/useInitialRequests';
 import {
   useLinodeLishTokenQuery,
   useLinodeQuery,
@@ -24,6 +25,8 @@ const AUTH_POLLING_INTERVAL = 2000;
 const Lish = () => {
   const history = useHistory();
 
+  const { isLoading: isMakingInitalRequests } = useInitialRequests();
+
   const { linodeId, type } = useParams<{ linodeId: string; type: string }>();
   const id = Number(linodeId);
 
@@ -40,7 +43,7 @@ const Lish = () => {
     refetch,
   } = useLinodeLishTokenQuery(id);
 
-  const isLoading = isLinodeLoading || isTokenLoading;
+  const isLoading = isLinodeLoading || isTokenLoading || isMakingInitalRequests;
 
   const token = data?.lish_token;
 
diff --git a/packages/manager/src/features/TopMenu/TopMenu.tsx b/packages/manager/src/features/TopMenu/TopMenu.tsx
index f07f4240c24..95229854388 100644
--- a/packages/manager/src/features/TopMenu/TopMenu.tsx
+++ b/packages/manager/src/features/TopMenu/TopMenu.tsx
@@ -7,6 +7,7 @@ import { Hidden } from 'src/components/Hidden';
 import { IconButton } from 'src/components/IconButton';
 import { Toolbar } from 'src/components/Toolbar';
 import { Typography } from 'src/components/Typography';
+import { useAuthentication } from 'src/hooks/useAuthentication';
 
 import { AddNewMenu } from './AddNewMenu/AddNewMenu';
 import { Community } from './Community';
@@ -18,20 +19,15 @@ import { UserMenu } from './UserMenu';
 
 interface TopMenuProps {
   desktopMenuToggle: () => void;
-  isLoggedInAsCustomer: boolean;
   isSideMenuOpen: boolean;
   openSideMenu: () => void;
   username: string;
 }
 
 export const TopMenu = React.memo((props: TopMenuProps) => {
-  const {
-    desktopMenuToggle,
-    isLoggedInAsCustomer,
-    isSideMenuOpen,
-    openSideMenu,
-    username,
-  } = props;
+  const { desktopMenuToggle, isSideMenuOpen, openSideMenu, username } = props;
+
+  const { loggedInAsCustomer } = useAuthentication();
 
   const navHoverText = isSideMenuOpen
     ? 'Collapse side menu'
@@ -39,7 +35,7 @@ export const TopMenu = React.memo((props: TopMenuProps) => {
 
   return (
     <React.Fragment>
-      {isLoggedInAsCustomer && (
+      {loggedInAsCustomer && (
         <Box bgcolor="pink" padding="1em" textAlign="center">
           <Typography color="black" fontSize="1.2em">
             You are logged in as customer: <strong>{username}</strong>
diff --git a/packages/manager/src/hooks/useFeatureFlagLoad.ts b/packages/manager/src/hooks/useFeatureFlagLoad.ts
deleted file mode 100644
index c947abaa126..00000000000
--- a/packages/manager/src/hooks/useFeatureFlagLoad.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useDispatch, useSelector } from 'react-redux';
-
-import { ApplicationState } from 'src/store';
-import { setFeatureFlagsLoaded as _setFeatureFlagsLoaded } from 'src/store/featureFlagsLoad/featureFlagsLoad.actions';
-
-import { Dispatch } from './types';
-
-export const useFeatureFlagsLoad = () => {
-  const dispatch: Dispatch = useDispatch();
-  const featureFlagsLoading = useSelector(
-    (state: ApplicationState) => state.featureFlagsLoad.featureFlagsLoading
-  );
-  const setFeatureFlagsLoaded = () => dispatch(_setFeatureFlagsLoaded());
-
-  return { featureFlagsLoading, setFeatureFlagsLoaded };
-};
diff --git a/packages/manager/src/hooks/useGlobalErrors.ts b/packages/manager/src/hooks/useGlobalErrors.ts
new file mode 100644
index 00000000000..317493396ed
--- /dev/null
+++ b/packages/manager/src/hooks/useGlobalErrors.ts
@@ -0,0 +1,7 @@
+import { useSelector } from 'react-redux';
+
+import { ApplicationState } from 'src/store';
+
+export const useGlobalErrors = () => {
+  return useSelector((state: ApplicationState) => state.globalErrors);
+};
diff --git a/packages/manager/src/hooks/useInitialRequests.ts b/packages/manager/src/hooks/useInitialRequests.ts
new file mode 100644
index 00000000000..c2bc651c79e
--- /dev/null
+++ b/packages/manager/src/hooks/useInitialRequests.ts
@@ -0,0 +1,101 @@
+import { getAccountInfo, getAccountSettings } from '@linode/api-v4/lib/account';
+import { getProfile, getUserPreferences } from '@linode/api-v4/lib/profile';
+import * as React from 'react';
+import { useQueryClient } from 'react-query';
+import { useStore } from 'react-redux';
+
+import { startEventsInterval } from 'src/events';
+import { useAuthentication } from 'src/hooks/useAuthentication';
+import { usePendingUpload } from 'src/hooks/usePendingUpload';
+import { queryKey as accountQueryKey } from 'src/queries/account';
+import { redirectToLogin } from 'src/session';
+
+/**
+ * This hook is responsible for making Cloud Manager's initial requests.
+ * It exposes a `isLoading` value so that we can render a loading page
+ * as we make our inital requests.
+ */
+export const useInitialRequests = () => {
+  const store = useStore();
+  const queryClient = useQueryClient();
+
+  const { token } = useAuthentication();
+  const isAuthenticated = Boolean(token);
+  const pendingUpload = usePendingUpload();
+
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    if (
+      !isAuthenticated &&
+      // Do not redirect to Login if there is a pending image upload.
+      !pendingUpload
+    ) {
+      redirectToLogin(location.pathname, location.search);
+    }
+
+    /**
+     * this is the case where we've just come back from login and need
+     * to show the children onMount
+     */
+    if (isAuthenticated) {
+      makeInitialRequests();
+    }
+
+    // We only want this useEffect running when `isAuthenticated` changes.
+  }, [isAuthenticated]);
+
+  /**
+   * We make a series of requests for data on app load. The flow is:
+   * 1. App begins load; users see splash screen
+   * 2. Initial requests (in makeInitialRequests) are made (account, profile, etc.)
+   * 3. Initial requests complete; app is marked as done loading
+   * 4. As splash screen goes away, secondary requests (in makeSecondaryRequests -- Linodes, types, regions)
+   * are kicked off
+   */
+  const makeInitialRequests = async () => {
+    // When loading Lish we avoid all this extra data loading
+    if (window.location?.pathname?.match(/linodes\/[0-9]+\/lish/)) {
+      setIsLoading(false);
+      return;
+    }
+
+    // Initial Requests: Things we need immediately (before rendering the app)
+    const dataFetchingPromises: Promise<any>[] = [
+      // Fetch user's account information
+      queryClient.prefetchQuery({
+        queryFn: getAccountInfo,
+        queryKey: accountQueryKey,
+      }),
+
+      // Username and whether a user is restricted
+      queryClient.prefetchQuery({
+        queryFn: getProfile,
+        queryKey: 'profile',
+      }),
+
+      // Is a user managed
+      queryClient.prefetchQuery({
+        queryFn: getAccountSettings,
+        queryKey: 'account-settings',
+      }),
+
+      // preferences
+      queryClient.prefetchQuery({
+        queryFn: getUserPreferences,
+        queryKey: 'preferences',
+      }),
+    ];
+
+    // Start events polling
+    startEventsInterval(store, queryClient);
+
+    try {
+      await Promise.all(dataFetchingPromises);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { isLoading };
+};
diff --git a/packages/manager/src/hooks/usePendingUpload.ts b/packages/manager/src/hooks/usePendingUpload.ts
new file mode 100644
index 00000000000..11a858e4f22
--- /dev/null
+++ b/packages/manager/src/hooks/usePendingUpload.ts
@@ -0,0 +1,7 @@
+import { useSelector } from 'react-redux';
+
+import { ApplicationState } from 'src/store';
+
+export const usePendingUpload = () => {
+  return useSelector((state: ApplicationState) => state.pendingUpload);
+};
diff --git a/packages/manager/src/index.tsx b/packages/manager/src/index.tsx
index 182ad0c7de6..ed4c4c683cb 100644
--- a/packages/manager/src/index.tsx
+++ b/packages/manager/src/index.tsx
@@ -7,10 +7,9 @@ import { ReactQueryDevtools } from 'react-query/devtools';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
 
-import AuthenticationWrapper from 'src/components/AuthenticationWrapper';
 import { CookieWarning } from 'src/components/CookieWarning';
 import { Snackbar } from 'src/components/Snackbar/Snackbar';
-import SplashScreen from 'src/components/SplashScreen';
+import { SplashScreen } from 'src/components/SplashScreen';
 import 'src/exceptionReporting';
 import Logout from 'src/layouts/Logout';
 import { setupInterceptors } from 'src/request';
@@ -18,6 +17,7 @@ import { storeFactory } from 'src/store';
 
 import { App } from './App';
 import { LinodeThemeWrapper } from './LinodeThemeWrapper';
+import NullComponent from './components/NullComponent';
 import { loadDevTools, shouldEnableDevTools } from './dev-tools/load';
 import './index.css';
 import { queryClientFactory } from './queries/base';
@@ -36,72 +36,58 @@ const LoginAsCustomerCallback = React.lazy(
 );
 const OAuthCallbackPage = React.lazy(() => import('src/layouts/OAuth'));
 
-const NullAuth = () => <span>null auth route</span>;
-
-const Null = () => <span>null route</span>;
-
-const AppWrapper = () => (
-  <>
-    <SplashScreen />
-    <Snackbar
-      anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-      autoHideDuration={4000}
-      data-qa-toast
-      hideIconVariant={true}
-      maxSnack={3}
-    >
-      <App />
-    </Snackbar>
-  </>
-);
-
-const ContextWrapper = () => (
-  <ReduxStoreProvider store={store}>
-    <QueryClientProvider client={queryClient}>
-      <LinodeThemeWrapper>
-        <CssBaseline />
-        <React.Suspense fallback={<SplashScreen />}>
-          <Switch>
-            <Route component={OAuthCallbackPage} exact path="/oauth/callback" />
-            <Route
-              component={LoginAsCustomerCallback}
-              exact
-              path="/admin/callback"
-            />
-            {/* A place to go that prevents the app from loading while refreshing OAuth tokens */}
-            <Route component={NullAuth} exact path="/nullauth" />
-            <Route component={Logout} exact path="/logout" />
-            <Route component={CancelLanding} exact path="/cancel" />
-            <AuthenticationWrapper>
-              <Switch>
-                <Route component={Lish} path="/linodes/:linodeId/lish/:type" />
-                <Route component={AppWrapper} />
-              </Switch>
-            </AuthenticationWrapper>
-          </Switch>
-        </React.Suspense>
-      </LinodeThemeWrapper>
-      <ReactQueryDevtools
-        initialIsOpen={false}
-        toggleButtonProps={{ style: { marginLeft: '3em' } }}
-      />
-    </QueryClientProvider>
-  </ReduxStoreProvider>
-);
-
 const Main = () => {
   if (!navigator.cookieEnabled) {
     return <CookieWarning />;
   }
 
   return (
-    <Router>
-      <Switch>
-        {/* A place to go that prevents the app from loading while injecting OAuth tokens */}
-        <Route component={Null} exact path="/null" />
-        <Route component={ContextWrapper} />
-      </Switch>
-    </Router>
+    <ReduxStoreProvider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <LinodeThemeWrapper>
+          <CssBaseline />
+          <React.Suspense fallback={<SplashScreen />}>
+            <Router>
+              <Switch>
+                <Route
+                  component={OAuthCallbackPage}
+                  exact
+                  path="/oauth/callback"
+                />
+                <Route
+                  component={LoginAsCustomerCallback}
+                  exact
+                  path="/admin/callback"
+                />
+                {/* A place to go that prevents the app from loading while refreshing OAuth tokens */}
+                <Route component={NullComponent} exact path="/nullauth" />
+                <Route component={Logout} exact path="/logout" />
+                <Route component={CancelLanding} exact path="/cancel" />
+                <Snackbar
+                  anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                  autoHideDuration={4000}
+                  data-qa-toast
+                  hideIconVariant={true}
+                  maxSnack={3}
+                >
+                  <Switch>
+                    <Route
+                      component={Lish}
+                      path="/linodes/:linodeId/lish/:type"
+                    />
+                    <Route component={App} />
+                  </Switch>
+                </Snackbar>
+              </Switch>
+            </Router>
+          </React.Suspense>
+        </LinodeThemeWrapper>
+        <ReactQueryDevtools
+          initialIsOpen={false}
+          toggleButtonProps={{ style: { marginLeft: '3em' } }}
+        />
+      </QueryClientProvider>
+    </ReduxStoreProvider>
   );
 };
 
diff --git a/packages/manager/src/store/authentication/authentication.reducer.ts b/packages/manager/src/store/authentication/authentication.reducer.ts
index e50f4f8ee92..22c1fd7bcad 100644
--- a/packages/manager/src/store/authentication/authentication.reducer.ts
+++ b/packages/manager/src/store/authentication/authentication.reducer.ts
@@ -12,19 +12,28 @@ import {
 import { clearLocalStorage } from './authentication.helpers';
 import { State } from './index';
 
-export const defaultState: State = {
-  expiration: null,
-  loggedInAsCustomer: false,
-  scopes: null,
-  token: null,
-};
-
 const {
   expire: expiryInLocalStorage,
   scopes: scopesInLocalStorage,
   token: tokenInLocalStorage,
 } = authentication;
 
+const defaultToken = tokenInLocalStorage.get();
+
+function getIsLoggedInAsCustomer(token: string) {
+  if (!token) {
+    return false;
+  }
+  return token.toLowerCase().includes('admin');
+}
+
+export const defaultState: State = {
+  expiration: expiryInLocalStorage.get(),
+  loggedInAsCustomer: getIsLoggedInAsCustomer(defaultToken),
+  scopes: scopesInLocalStorage.get(),
+  token: defaultToken,
+};
+
 const reducer = reducerWithInitialState(defaultState)
   .case(handleStartSession, (state, payload) => {
     const { expires, scopes, token } = payload;
@@ -76,7 +85,7 @@ const reducer = reducerWithInitialState(defaultState)
     }
 
     /** token will either be "Admin: 1234" or "Bearer: 1234" */
-    const isLoggedInAsCustomer = (token || '').toLowerCase().includes('admin');
+    const isLoggedInAsCustomer = getIsLoggedInAsCustomer(token);
 
     return {
       ...state,
diff --git a/packages/manager/src/store/featureFlagsLoad/featureFlagsLoad.actions.ts b/packages/manager/src/store/featureFlagsLoad/featureFlagsLoad.actions.ts
deleted file mode 100644
index 9cfe65a65b8..00000000000
--- a/packages/manager/src/store/featureFlagsLoad/featureFlagsLoad.actions.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import actionCreatorFactory from 'typescript-fsa';
-
-const actionCreator = actionCreatorFactory('@@manager/feature-flags-load');
-
-export const setFeatureFlagsLoaded = actionCreator('DONE');
diff --git a/packages/manager/src/store/featureFlagsLoad/featureFlagsLoad.reducer.ts b/packages/manager/src/store/featureFlagsLoad/featureFlagsLoad.reducer.ts
deleted file mode 100644
index 9808cfc8e75..00000000000
--- a/packages/manager/src/store/featureFlagsLoad/featureFlagsLoad.reducer.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { reducerWithInitialState } from 'typescript-fsa-reducers';
-
-import { setFeatureFlagsLoaded } from './featureFlagsLoad.actions';
-
-export interface State {
-  featureFlagsLoading: boolean;
-}
-
-export const defaultState: State = {
-  featureFlagsLoading: true,
-};
-
-const reducer = reducerWithInitialState(defaultState)
-  .case(setFeatureFlagsLoaded, () => ({
-    featureFlagsLoading: false,
-  }))
-  .default((state) => state);
-
-export default reducer;
diff --git a/packages/manager/src/store/index.ts b/packages/manager/src/store/index.ts
index 50d1ec45f37..6124fd73ac0 100644
--- a/packages/manager/src/store/index.ts
+++ b/packages/manager/src/store/index.ts
@@ -38,14 +38,6 @@ import stackScriptDialog, {
   defaultState as stackScriptDialogDefaultState,
 } from 'src/store/stackScriptDialog';
 
-import featureFlagsLoad, {
-  State as FeatureFlagsLoadState,
-  defaultState as featureFlagsLoadState,
-} from './featureFlagsLoad/featureFlagsLoad.reducer';
-import initialLoad, {
-  State as InitialLoadState,
-  defaultState as initialLoadState,
-} from './initialLoad/initialLoad.reducer';
 import combineEventsMiddleware from './middleware/combineEventsMiddleware';
 import mockFeatureFlags, {
   MockFeatureFlagState,
@@ -62,9 +54,7 @@ export interface ApplicationState {
   authentication: AuthState;
   createLinode: LinodeCreateState;
   events: EventsState;
-  featureFlagsLoad: FeatureFlagsLoadState;
   globalErrors: GlobalErrorState;
-  initialLoad: InitialLoadState;
   longviewClients: LongviewState;
   longviewStats: LongviewStatsState;
   mockFeatureFlags: MockFeatureFlagState;
@@ -76,9 +66,7 @@ export const defaultState: ApplicationState = {
   authentication: authenticationDefaultState,
   createLinode: linodeCreateDefaultState,
   events: eventsDefaultState,
-  featureFlagsLoad: featureFlagsLoadState,
   globalErrors: defaultGlobalErrorState,
-  initialLoad: initialLoadState,
   longviewClients: defaultLongviewState,
   longviewStats: defaultLongviewStatsState,
   mockFeatureFlags: defaultMockFeatureFlagState,
@@ -93,9 +81,7 @@ const reducers = combineReducers<ApplicationState>({
   authentication,
   createLinode: linodeCreateReducer,
   events,
-  featureFlagsLoad,
   globalErrors,
-  initialLoad,
   longviewClients: longview,
   longviewStats,
   mockFeatureFlags,
diff --git a/packages/manager/src/store/initialLoad/initialLoad.actions.ts b/packages/manager/src/store/initialLoad/initialLoad.actions.ts
deleted file mode 100644
index f9e64183f25..00000000000
--- a/packages/manager/src/store/initialLoad/initialLoad.actions.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import actionCreatorFactory from 'typescript-fsa';
-
-const actionCreator = actionCreatorFactory('@@CLOUDMANAGER/LOADING');
-
-/** user is refreshing the page and redux state needs to be synced with local storage */
-export const handleLoadingDone = actionCreator('DONE');
diff --git a/packages/manager/src/store/initialLoad/initialLoad.reducer.ts b/packages/manager/src/store/initialLoad/initialLoad.reducer.ts
deleted file mode 100644
index 09e93024617..00000000000
--- a/packages/manager/src/store/initialLoad/initialLoad.reducer.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { reducerWithInitialState } from 'typescript-fsa-reducers';
-
-import { handleLoadingDone } from './initialLoad.actions';
-
-export interface State {
-  appIsLoading: boolean;
-  loadingText: string;
-}
-
-export const defaultState: State = {
-  appIsLoading: true,
-  loadingText: '',
-};
-
-const reducer = reducerWithInitialState(defaultState)
-  .case(handleLoadingDone, (state) => ({
-    ...state,
-    appIsLoading: false,
-  }))
-  .default((state) => state);
-
-export default reducer;
diff --git a/packages/manager/src/IdentifyUser.tsx b/packages/manager/src/useSetupFeatureFlags.ts
similarity index 81%
rename from packages/manager/src/IdentifyUser.tsx
rename to packages/manager/src/useSetupFeatureFlags.ts
index 983454d9bb7..9dc86b5afb0 100644
--- a/packages/manager/src/IdentifyUser.tsx
+++ b/packages/manager/src/useSetupFeatureFlags.ts
@@ -4,24 +4,23 @@ import * as React from 'react';
 import { LAUNCH_DARKLY_API_KEY } from 'src/constants';
 
 import { configureErrorReportingUser } from './exceptionReporting';
-import { useFeatureFlagsLoad } from './hooks/useFeatureFlagLoad';
 import { useAccount } from './queries/account';
 import { useProfile } from './queries/profile';
 
 /**
- * This has to be a FC rather than just a function
- * to use the useLDClient hook. We could pass in
- * the client as a prop, but the parents are class components
- * and this is a good side-effect usage of useEffect().
+ * This hook uses Linode account data to set Sentry and Launch Darkly context.
+ * It exposes a `areFeatureFlagsLoading` value so we can display a loading
+ * page while we wait for our feature flags to be setup.
  */
-
-export const IdentifyUser = () => {
+export const useSetupFeatureFlags = () => {
   const { data: account, error: accountError } = useAccount();
   const { data: profile } = useProfile();
 
   const client = useLDClient();
 
-  const { setFeatureFlagsLoaded } = useFeatureFlagsLoad();
+  const [areFeatureFlagsLoading, setAreFeatureFlagsLoading] = React.useState(
+    true
+  );
 
   const userID = profile?.uid;
   const username = profile?.username;
@@ -41,7 +40,7 @@ export const IdentifyUser = () => {
        * our loading state and move on - we'll render the app
        * without any context of feature flags.
        */
-      setFeatureFlagsLoaded();
+      setAreFeatureFlagsLoading(false);
     } else {
       /**
        * returns unknown if:
@@ -68,13 +67,13 @@ export const IdentifyUser = () => {
             privateAttributes: ['country, taxID'],
             taxID,
           })
-          .then(() => setFeatureFlagsLoaded())
+          .then(() => setAreFeatureFlagsLoading(false))
           /**
            * We could handle this in other ways, but for now don't let a
            * LD bung-up block the app from loading.
            */
 
-          .catch(() => setFeatureFlagsLoaded());
+          .catch(() => setAreFeatureFlagsLoading(false));
       } else {
         // We "setFeatureFlagsLoaded" here because if the API is
         // in maintenance mode, we can't fetch the user's username.
@@ -87,13 +86,11 @@ export const IdentifyUser = () => {
         // If we're being honest, featureFlagsLoading shouldn't be tracked by Redux
         // and this code should go away eventually.
         if (client) {
-          setFeatureFlagsLoaded();
+          setAreFeatureFlagsLoading(false);
         }
       }
     }
   }, [client, username, account, accountError]);
 
-  return null;
+  return { areFeatureFlagsLoading };
 };
-
-export default IdentifyUser;

From 369f72aa7fc40b6b8c17a54b9632932c01a2c92b Mon Sep 17 00:00:00 2001
From: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>
Date: Wed, 1 Nov 2023 15:48:41 -0400
Subject: [PATCH 19/43] fix: [M3-7325] - Font rendering inconsistencies (#9843)

* Typography fontWeight

* eslint plugin

* eslint plugin improvement

* eslint plugin improvement

* organize local rules

* replace usage of fontWeight

* update snapshot and other fixes

* Revert typography change and lint for props

* Update snapshot

* Update markup in linode summary

* Added changeset: Faux-bold font rendering

* Convert plusing to TS

* Convert plusing to TS

* Update deps

* Move to external dependency

* update package
---
 .../.changeset/pr-9843-fixed-1698352407030.md |  5 +++++
 packages/manager/.eslintrc.js                 |  4 +++-
 packages/manager/package.json                 |  1 +
 packages/manager/public/fonts/fonts.css       | 13 ------------
 .../src/components/Accordion.stories.tsx      |  9 ++++++++
 packages/manager/src/components/Accordion.tsx |  8 ++++---
 .../Autocomplete/Autocomplete.stories.tsx     |  2 +-
 .../CheckoutSummary/SummaryItem.tsx           |  7 ++++++-
 .../src/components/DynamicPriceNotice.tsx     |  4 +++-
 .../EnhancedSelect/EnhancedSelect.css         |  1 -
 .../LongviewLineGraph/LongviewLineGraph.tsx   |  2 +-
 .../src/components/Notice/Notice.test.tsx     |  4 ++--
 .../RemovableSelectionsList.style.ts          |  8 +++----
 .../SelectRegionPanel/SelectRegionPanel.tsx   |  6 ++++--
 .../src/components/ShowMore/ShowMore.tsx      |  2 +-
 .../ShowMoreExpansion.stories.mdx             |  6 +++++-
 .../src/components/TableCell/TableCell.tsx    |  4 ++--
 .../src/components/TagCell/TagCell.tsx        |  3 +--
 .../src/components/TagsPanel/TagsPanel.tsx    |  3 +--
 .../{Typography.ts => Typography.tsx}         |  0
 .../src/features/Billing/BillingDetail.tsx    |  3 +--
 .../DatabaseDetail/AccessControls.tsx         |  2 +-
 .../DatabaseSummaryConnectionDetails.tsx      | 21 +++++++++++--------
 .../TransferCheckoutBar.styles.ts             |  4 ++--
 .../Rules/FirewallRuleTable.styles.ts         |  2 +-
 .../src/features/Images/ImageUpload.tsx       |  2 +-
 .../KubeCheckoutBar/KubeCheckoutBar.tsx       |  2 +-
 .../KubeCheckoutBar/NodePoolSummary.tsx       |  2 +-
 .../KubeConfigDisplay.tsx                     |  2 +-
 .../NodePoolsDisplay/AddNodePoolDrawer.tsx    |  2 +-
 .../NodePoolsDisplay/ResizeNodePoolDrawer.tsx |  3 +--
 .../Linodes/LinodeEntityDetail.styles.ts      |  2 +-
 .../features/Linodes/LinodeEntityDetail.tsx   |  5 ++++-
 .../ApiAwarenessModal/ApiAwarenessModal.tsx   |  2 --
 .../LinodeConfigs/LinodeConfigs.tsx           |  4 ++--
 .../LinodeNetworking/IPSharing.tsx            |  4 ++--
 .../Linodes/LinodesLanding/AppsSection.tsx    |  2 +-
 .../MigrateLinode/MigrationPricing.tsx        |  2 +-
 .../LoadBalancerDetail/RulesTable.styles.tsx  |  2 +-
 .../DetailTabs/TopProcesses.styles.ts         | 14 +++++++------
 .../NotificationSection.tsx                   |  8 +++----
 .../PhoneVerification.styles.ts               |  2 --
 .../SearchBar/SearchSuggestion.styles.ts      |  2 +-
 packages/manager/src/foundations/fonts.ts     |  1 -
 .../manager/src/foundations/themes/light.ts   |  1 -
 packages/manager/src/index.css                |  3 ++-
 yarn.lock                                     | 17 +++++++++------
 47 files changed, 115 insertions(+), 93 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9843-fixed-1698352407030.md
 rename packages/manager/src/components/{Typography.ts => Typography.tsx} (100%)

diff --git a/packages/manager/.changeset/pr-9843-fixed-1698352407030.md b/packages/manager/.changeset/pr-9843-fixed-1698352407030.md
new file mode 100644
index 00000000000..24997be5f6c
--- /dev/null
+++ b/packages/manager/.changeset/pr-9843-fixed-1698352407030.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Faux-bold font rendering ([#9843](https://github.com/linode/manager/pull/9843))
diff --git a/packages/manager/.eslintrc.js b/packages/manager/.eslintrc.js
index 340efd3f998..1aefa4734d9 100644
--- a/packages/manager/.eslintrc.js
+++ b/packages/manager/.eslintrc.js
@@ -109,8 +109,10 @@ module.exports = {
     'scanjs-rules',
     'xss',
     'perfectionist',
+    '@linode/eslint-plugin-cloud-manager',
   ],
   rules: {
+    '@linode/cloud-manager/no-custom-fontWeight': 'error',
     '@typescript-eslint/camelcase': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
@@ -126,8 +128,8 @@ module.exports = {
     '@typescript-eslint/no-use-before-define': 'off',
     'array-callback-return': 'error',
     'comma-dangle': 'off', // Prettier and TS both handle and check for this one
-    curly: 'warn',
     // radix: Codacy considers it as an error, i put it here to fix it before push
+    curly: 'warn',
     // See: https://www.w3.org/TR/graphics-aria-1.0/
     'jsx-a11y/aria-role': [
       'error',
diff --git a/packages/manager/package.json b/packages/manager/package.json
index 3a700cfc49c..b175ce5e022 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -108,6 +108,7 @@
     ]
   },
   "devDependencies": {
+    "@linode/eslint-plugin-cloud-manager": "^0.0.3",
     "@storybook/addon-actions": "~7.0.24",
     "@storybook/addon-controls": "~7.0.24",
     "@storybook/addon-docs": "~7.0.24",
diff --git a/packages/manager/public/fonts/fonts.css b/packages/manager/public/fonts/fonts.css
index 56f2e3a9d89..6939d146fb8 100644
--- a/packages/manager/public/fonts/fonts.css
+++ b/packages/manager/public/fonts/fonts.css
@@ -11,19 +11,6 @@
   text-rendering: optimizeLegibility;
 }
 
-/* Webfont: Lato-SemiBold */
-@font-face {
-  font-family: 'LatoWebSemibold';
-  src: url('fonts/Lato-Semibold.eot'); /* IE9 Compat Modes */
-  src: url('fonts/Lato-Semibold.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('fonts/Lato-Semibold.woff2') format('woff2'),
-    /* Modern Browsers */ url('fonts/Lato-Semibold.woff') format('woff'),
-    /* Modern Browsers */ url('fonts/Lato-Semibold.ttf') format('truetype');
-  font-style: normal;
-  font-weight: normal;
-  text-rendering: optimizeLegibility;
-}
-
 /* Webfont: Lato-Regular */
 @font-face {
   font-family: 'LatoWeb';
diff --git a/packages/manager/src/components/Accordion.stories.tsx b/packages/manager/src/components/Accordion.stories.tsx
index e45a3ebf943..40c68421544 100644
--- a/packages/manager/src/components/Accordion.stories.tsx
+++ b/packages/manager/src/components/Accordion.stories.tsx
@@ -18,4 +18,13 @@ export const Default: Story = {
   render: (args) => <Accordion {...args} />,
 };
 
+export const WithHeadingNumberCount: Story = {
+  args: {
+    children: <p>Any children can go here!</p>,
+    heading: 'This is an Accordion',
+    headingNumberCount: 1,
+  },
+  render: (args) => <Accordion {...args} />,
+};
+
 export default meta;
diff --git a/packages/manager/src/components/Accordion.tsx b/packages/manager/src/components/Accordion.tsx
index b00160a1184..cdfa7a2e7fc 100644
--- a/packages/manager/src/components/Accordion.tsx
+++ b/packages/manager/src/components/Accordion.tsx
@@ -16,15 +16,17 @@ import { makeStyles } from 'tss-react/mui';
 import { Notice } from 'src/components/Notice/Notice';
 import { Typography, TypographyProps } from 'src/components/Typography';
 
-const useStyles = makeStyles()({
+import type { Theme } from '@mui/material';
+
+const useStyles = makeStyles()((theme: Theme) => ({
   itemCount: {
     alignItems: 'center',
     backgroundColor: '#2575d0',
     borderRadius: '50%',
     color: '#fff',
     display: 'flex',
+    fontFamily: theme.font.bold,
     fontSize: '0.875rem',
-    fontWeight: 600,
     height: 30,
     justifyContent: 'center',
     lineHeight: 0,
@@ -32,7 +34,7 @@ const useStyles = makeStyles()({
     right: 50,
     width: 30,
   },
-});
+}));
 
 export interface AccordionProps extends _AccordionProps {
   /**
diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.stories.tsx
index 1acfc6b20f5..c3ac73fea9c 100644
--- a/packages/manager/src/components/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/manager/src/components/Autocomplete/Autocomplete.stories.tsx
@@ -199,7 +199,7 @@ const StyledListItem = styled('li')(() => ({
 
 const StyledLabel = styled('span')(({ theme }) => ({
   color: theme.color.label,
-  fontFamily: theme.font.semiBold,
+  fontFamily: theme.font.bold,
   fontSize: '14px',
 }));
 
diff --git a/packages/manager/src/components/CheckoutSummary/SummaryItem.tsx b/packages/manager/src/components/CheckoutSummary/SummaryItem.tsx
index 9b194ce3e8a..096b2b3c47a 100644
--- a/packages/manager/src/components/CheckoutSummary/SummaryItem.tsx
+++ b/packages/manager/src/components/CheckoutSummary/SummaryItem.tsx
@@ -10,7 +10,12 @@ export const SummaryItem = ({ details, title }: Props) => {
     <StyledGrid item>
       {title ? (
         <>
-          <Typography component="span" sx={{ fontWeight: 'bold' }}>
+          <Typography
+            sx={(theme) => ({
+              fontFamily: theme.font.bold,
+            })}
+            component="span"
+          >
             {title}
           </Typography>{' '}
         </>
diff --git a/packages/manager/src/components/DynamicPriceNotice.tsx b/packages/manager/src/components/DynamicPriceNotice.tsx
index 661736b2f9e..900159d5bdd 100644
--- a/packages/manager/src/components/DynamicPriceNotice.tsx
+++ b/packages/manager/src/components/DynamicPriceNotice.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material';
 import React from 'react';
 
 import { useRegionsQuery } from 'src/queries/regions';
@@ -13,6 +14,7 @@ interface Props extends NoticeProps {
 export const DynamicPriceNotice = (props: Props) => {
   const { data: regions } = useRegionsQuery();
   const { region, ...rest } = props;
+  const theme = useTheme();
 
   const regionLabel = regions?.find((r) => r.id === region)?.label ?? region;
 
@@ -24,7 +26,7 @@ export const DynamicPriceNotice = (props: Props) => {
       variant="warning"
       {...rest}
     >
-      <Typography fontWeight="bold">
+      <Typography fontFamily={theme.font.bold}>
         Prices for plans, products, and services in {regionLabel} may vary from
         other regions.{' '}
         <Link to="https://www.linode.com/pricing">Learn more.</Link>
diff --git a/packages/manager/src/components/EnhancedSelect/EnhancedSelect.css b/packages/manager/src/components/EnhancedSelect/EnhancedSelect.css
index b34996386e3..d1cf5bfb9d2 100644
--- a/packages/manager/src/components/EnhancedSelect/EnhancedSelect.css
+++ b/packages/manager/src/components/EnhancedSelect/EnhancedSelect.css
@@ -6,7 +6,6 @@
   font-size: 1rem;
   box-sizing: content-box;
   transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color .2s cubic-bezier(0.4, 0, 0.2, 1);
-  font-weight: 400;
   font-family: "LatoWeb", sans-serif;
   line-height: 1.2em;
   white-space: initial;
diff --git a/packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx b/packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx
index 9a1b2e7a281..7bf5cf630d6 100644
--- a/packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx
+++ b/packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx
@@ -23,8 +23,8 @@ const useStyles = makeStyles()((theme: Theme) => ({
       color: theme.palette.text.primary,
     },
     color: theme.color.headline,
+    fontFamily: theme.font.bold,
     fontSize: '1rem',
-    fontWeight: 'bold',
   },
 }));
 
diff --git a/packages/manager/src/components/Notice/Notice.test.tsx b/packages/manager/src/components/Notice/Notice.test.tsx
index 652004b957f..4078b3d7ac1 100644
--- a/packages/manager/src/components/Notice/Notice.test.tsx
+++ b/packages/manager/src/components/Notice/Notice.test.tsx
@@ -89,11 +89,11 @@ describe('Notice Component', () => {
     const { container } = renderWithTheme(
       <Notice
         text="Styled Text"
-        typeProps={{ style: { fontWeight: 'bold' } }}
+        typeProps={{ style: { fontFamily: 'monospace' } }}
       />
     );
     const typography = container.querySelector('.noticeText');
 
-    expect(typography).toHaveStyle('font-weight: bold');
+    expect(typography).toHaveStyle('font-family: monospace');
   });
 });
diff --git a/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.style.ts b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.style.ts
index 9753f7173f2..392807ae9d1 100644
--- a/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.style.ts
+++ b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.style.ts
@@ -5,6 +5,8 @@ import { List } from 'src/components/List';
 import { ListItem } from 'src/components/ListItem';
 import { omittedProps } from 'src/utilities/omittedProps';
 
+import { Typography } from '../Typography';
+
 import type { RemovableSelectionsListProps } from './RemovableSelectionsList';
 
 export const StyledNoAssignedLinodesBox = styled(Box, {
@@ -21,13 +23,12 @@ export const StyledNoAssignedLinodesBox = styled(Box, {
   width: '100%',
 }));
 
-export const SelectedOptionsHeader = styled('h4', {
+export const SelectedOptionsHeader = styled(Typography, {
   label: 'SelectedOptionsHeader',
 })(({ theme }) => ({
   color: theme.color.headline,
   fontFamily: theme.font.bold,
-  fontSize: '14px',
-  textTransform: 'initial',
+  marginBottom: theme.spacing(2),
 }));
 
 export const SelectedOptionsList = styled(List, {
@@ -51,7 +52,6 @@ export const SelectedOptionsListItem = styled(ListItem, {
 export const StyledLabel = styled('span', { label: 'StyledLabel' })(
   ({ theme }) => ({
     color: theme.color.label,
-    fontFamily: theme.font.semiBold,
     fontSize: '14px',
   })
 );
diff --git a/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx b/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx
index 83f2ef3d3bc..f1ff5ab5d2a 100644
--- a/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx
+++ b/packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx
@@ -1,4 +1,5 @@
 import { Region } from '@linode/api-v4/lib/regions';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 import { useLocation } from 'react-router-dom';
 
@@ -50,6 +51,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
 
   const location = useLocation();
   const flags = useFlags();
+  const theme = useTheme();
   const params = getQueryParamsFromQueryString(location.search);
 
   const isCloning = /clone/i.test(params.type);
@@ -132,7 +134,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
           spacingTop={8}
           variant="warning"
         >
-          <Typography fontWeight="bold">
+          <Typography fontFamily={theme.font.bold}>
             {CROSS_DATA_CENTER_CLONE_WARNING}
           </Typography>
         </Notice>
@@ -152,7 +154,7 @@ export const SelectRegionPanel = (props: SelectRegionPanelProps) => {
           spacingTop={12}
           variant="warning"
         >
-          <Typography fontWeight="bold">
+          <Typography fontFamily={theme.font.bold}>
             {DIFFERENT_PRICE_STRUCTURE_WARNING}{' '}
             <Link to="https://www.linode.com/pricing">Learn more.</Link>
           </Typography>
diff --git a/packages/manager/src/components/ShowMore/ShowMore.tsx b/packages/manager/src/components/ShowMore/ShowMore.tsx
index 7c8d41682ba..db2ead1512f 100644
--- a/packages/manager/src/components/ShowMore/ShowMore.tsx
+++ b/packages/manager/src/components/ShowMore/ShowMore.tsx
@@ -75,7 +75,7 @@ const StyledChip = styled(Chip)(({ theme }) => ({
     color: 'white',
   },
   backgroundColor: theme.bg.lightBlue1,
-  fontWeight: 500,
+  fontFamily: theme.font.bold,
   lineHeight: 1,
   marginLeft: theme.spacing(0.5),
   paddingLeft: 2,
diff --git a/packages/manager/src/components/ShowMoreExpansion/ShowMoreExpansion.stories.mdx b/packages/manager/src/components/ShowMoreExpansion/ShowMoreExpansion.stories.mdx
index 68e5de2e604..6091eabb85f 100644
--- a/packages/manager/src/components/ShowMoreExpansion/ShowMoreExpansion.stories.mdx
+++ b/packages/manager/src/components/ShowMoreExpansion/ShowMoreExpansion.stories.mdx
@@ -9,7 +9,11 @@ import { ShowMoreExpansion } from './ShowMoreExpansion';
 
 # Show More Expansion
 
-export const Template = (args) => <ShowMoreExpansion {...args} />;
+export const Template = (args) => (
+  <ShowMoreExpansion {...args}>
+    <Typography>{args.children}</Typography>
+  </ShowMoreExpansion>
+);
 
 <Canvas>
   <Story
diff --git a/packages/manager/src/components/TableCell/TableCell.tsx b/packages/manager/src/components/TableCell/TableCell.tsx
index 16b29c884d9..e9d02a6cff8 100644
--- a/packages/manager/src/components/TableCell/TableCell.tsx
+++ b/packages/manager/src/components/TableCell/TableCell.tsx
@@ -55,11 +55,11 @@ const useStyles = makeStyles()((theme: Theme) => ({
     },
     '& button, & button:focus': {
       color: theme.color.headline,
-      fontWeight: 'normal',
+      fontFamily: theme.font.normal,
     },
     color: theme.color.headline,
     cursor: 'pointer',
-    fontWeight: 'normal',
+    fontFamily: theme.font.normal,
   },
   status: {
     alignItems: 'center',
diff --git a/packages/manager/src/components/TagCell/TagCell.tsx b/packages/manager/src/components/TagCell/TagCell.tsx
index 66ef66a552d..217fb603e7b 100644
--- a/packages/manager/src/components/TagCell/TagCell.tsx
+++ b/packages/manager/src/components/TagCell/TagCell.tsx
@@ -199,9 +199,8 @@ const StyledAddTagButton = styled('button')(({ theme }) => ({
   color: theme.textColors.linkActiveLight,
   cursor: 'pointer',
   display: 'flex',
-  fontFamily: theme.font.normal,
+  fontFamily: theme.font.bold,
   fontSize: 14,
-  fontWeight: 'bold',
   height: 30,
   paddingLeft: 10,
   paddingRight: 10,
diff --git a/packages/manager/src/components/TagsPanel/TagsPanel.tsx b/packages/manager/src/components/TagsPanel/TagsPanel.tsx
index 032c56e85c8..023b878a449 100644
--- a/packages/manager/src/components/TagsPanel/TagsPanel.tsx
+++ b/packages/manager/src/components/TagsPanel/TagsPanel.tsx
@@ -40,9 +40,8 @@ const useStyles = makeStyles()((theme: Theme) => ({
     color: theme.textColors.linkActiveLight,
     cursor: 'pointer',
     display: 'flex',
-    fontFamily: theme.font.normal,
+    fontFamily: theme.font.bold,
     fontSize: '0.875rem',
-    fontWeight: 'bold',
     justifyContent: 'center',
     padding: '7px 10px',
     whiteSpace: 'nowrap',
diff --git a/packages/manager/src/components/Typography.ts b/packages/manager/src/components/Typography.tsx
similarity index 100%
rename from packages/manager/src/components/Typography.ts
rename to packages/manager/src/components/Typography.tsx
diff --git a/packages/manager/src/features/Billing/BillingDetail.tsx b/packages/manager/src/features/Billing/BillingDetail.tsx
index 5e4db934311..0ecb0b0624f 100644
--- a/packages/manager/src/features/Billing/BillingDetail.tsx
+++ b/packages/manager/src/features/Billing/BillingDetail.tsx
@@ -110,9 +110,8 @@ export const BillingActionButton = styled(Button)(({ theme }) => ({
     textDecoration: 'underline',
   },
   color: theme.textColors.linkActiveLight,
-  fontFamily: theme.font.normal,
+  fontFamily: theme.font.bold,
   fontSize: '.875rem',
-  fontWeight: 700,
   minHeight: 'unset',
   minWidth: 'auto',
   padding: 0,
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx
index bee29c8d8b1..890eb4ea5ba 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx
@@ -21,7 +21,7 @@ import AddAccessControlDrawer from './AddAccessControlDrawer';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   addAccessControlBtn: {
-    minWidth: 214,
+    minWidth: 225,
     [theme.breakpoints.down('md')]: {
       alignSelf: 'flex-start',
       marginBottom: '1rem',
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx
index 740ab5a871d..5f6fddeccaf 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx
@@ -1,5 +1,6 @@
 import { getSSLFields } from '@linode/api-v4/lib/databases/databases';
 import { Database, SSLFields } from '@linode/api-v4/lib/databases/types';
+import { useTheme } from '@mui/material';
 import { Theme } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -45,9 +46,8 @@ const useStyles = makeStyles()((theme: Theme) => ({
       cursor: 'default',
     },
     color: theme.palette.primary.main,
-    fontFamily: theme.font.normal,
+    fontFamily: theme.font.bold,
     fontSize: '0.875rem',
-    fontWeight: theme.typography.fontWeightRegular,
     lineHeight: '1.125rem',
     marginLeft: theme.spacing(),
     minHeight: 'auto',
@@ -56,11 +56,11 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
   connectionDetailsCtn: {
     '& p': {
-      '& span': {
-        fontWeight: 'bold',
-      },
       lineHeight: '1.5rem',
     },
+    '& span': {
+      fontFamily: theme.font.bold,
+    },
     background: theme.bg.bgAccessRow,
     border: `1px solid ${theme.name === 'light' ? '#ccc' : '#222'}`,
     padding: '8px 15px',
@@ -100,8 +100,8 @@ const useStyles = makeStyles()((theme: Theme) => ({
     marginLeft: 22,
   },
   provisioningText: {
+    fontFamily: theme.font.normal,
     fontStyle: 'italic',
-    fontWeight: 'lighter !important' as 'lighter',
   },
   showBtn: {
     color: theme.palette.primary.main,
@@ -131,6 +131,7 @@ const mongoHostHelperCopy =
 export const DatabaseSummaryConnectionDetails = (props: Props) => {
   const { database } = props;
   const { classes } = useStyles();
+  const theme = useTheme();
   const { enqueueSnackbar } = useSnackbar();
 
   const [showCredentials, setShowPassword] = React.useState<boolean>(false);
@@ -283,7 +284,7 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
                 <>
                   <Typography>
                     <span>host</span> ={' '}
-                    <span style={{ fontWeight: 'normal' }}>
+                    <span style={{ fontFamily: theme.font.normal }}>
                       {database.hosts?.primary}
                     </span>{' '}
                   </Typography>
@@ -333,7 +334,9 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
                           marginTop: 0,
                         }}
                       >
-                        <span style={{ fontWeight: 'normal' }}>{hostname}</span>
+                        <span style={{ fontFamily: theme.font.normal }}>
+                          {hostname}
+                        </span>
                       </Typography>
                       <CopyTooltip
                         className={classes.inlineCopyToolTip}
@@ -377,7 +380,7 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
             <Box alignItems="center" display="flex" flexDirection="row">
               <Typography>
                 <span>replica set</span> ={' '}
-                <span style={{ fontWeight: 'normal' }}>
+                <span style={{ fontFamily: theme.font.normal }}>
                   {database.replica_set}
                 </span>
               </Typography>
diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferCheckoutBar.styles.ts b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferCheckoutBar.styles.ts
index 26c9ce7b6b5..ff49d135abb 100644
--- a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferCheckoutBar.styles.ts
+++ b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferCheckoutBar.styles.ts
@@ -37,8 +37,8 @@ export const StyledTypography = styled(Typography, {
   label: 'StyledTypography',
 })(({ theme }) => ({
   color: theme.color.green,
+  fontFamily: theme.font.bold,
   fontSize: '1rem',
-  fontWeight: 'bold',
   marginTop: theme.spacing(3),
 }));
 
@@ -46,8 +46,8 @@ export const StyledHeaderTypography = styled(Typography, {
   label: 'StyledHeaderTypography',
 })(({ theme }) => ({
   color: theme.color.green,
+  fontFamily: theme.font.bold,
   fontSize: '1.25rem',
-  fontWeight: 'bold',
   lineHeight: '1.5rem',
 }));
 
diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleTable.styles.ts b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleTable.styles.ts
index b2b1d2ed357..79119f47d09 100644
--- a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleTable.styles.ts
+++ b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleTable.styles.ts
@@ -56,8 +56,8 @@ export const StyledInnerBox = styled(Box, { label: 'StyledInnerBox' })(
   ({ theme }) => ({
     backgroundColor: theme.bg.tableHeader,
     color: theme.textColors.tableHeader,
+    fontFamily: theme.font.bold,
     fontSize: '.875rem',
-    fontWeight: 'bold',
     height: '46px',
   })
 );
diff --git a/packages/manager/src/features/Images/ImageUpload.tsx b/packages/manager/src/features/Images/ImageUpload.tsx
index 7d44b6f1858..38c8bc48441 100644
--- a/packages/manager/src/features/Images/ImageUpload.tsx
+++ b/packages/manager/src/features/Images/ImageUpload.tsx
@@ -42,7 +42,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   cliModalButton: {
     ...theme.applyLinkStyles,
-    fontWeight: 700,
+    fontFamily: theme.font.bold,
   },
   cloudInitCheckboxWrapper: {
     marginLeft: '3px',
diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
index d233cc60063..934eb5615c2 100644
--- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
+++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx
@@ -170,8 +170,8 @@ export default RenderGuard(KubeCheckoutBar);
 const StyledHAHeader = styled(Typography, {
   label: 'StyledHAHeader',
 })(({ theme }) => ({
+  fontFamily: theme.font.bold,
   fontSize: '16px',
-  fontWeight: 600,
   paddingBottom: theme.spacing(0.5),
   paddingTop: theme.spacing(0.5),
 }));
diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.tsx
index cd7c47c0ecf..fa45858b89d 100644
--- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.tsx
+++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.tsx
@@ -38,8 +38,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
   },
   typeHeader: {
+    fontFamily: theme.font.bold,
     fontSize: '16px',
-    fontWeight: 600,
     paddingBottom: theme.spacing(0.5),
   },
   typeSubheader: {
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx
index 523517103f0..3c539c009b5 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx
@@ -63,7 +63,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     width: 16,
   },
   label: {
-    fontWeight: 'bold',
+    fontFamily: theme.font.bold,
     marginBottom: `calc(${theme.spacing(1)} - 3px)`,
   },
 }));
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx
index c152790c0e0..7a99bc0f732 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx
@@ -56,7 +56,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   priceDisplay: {
     '& span': {
-      fontWeight: 'bold',
+      fontFamily: theme.font.bold,
     },
     color: theme.color.headline,
     display: 'inline',
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx
index 558410c68f1..71c6211658b 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx
@@ -29,9 +29,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     paddingBottom: theme.spacing(3),
   },
   summary: {
+    fontFamily: theme.font.bold,
     fontSize: '16px',
-    fontWeight: 'bold',
-    lineHeight: '20px',
   },
 }));
 
diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts
index 7301f546e3a..045954149e8 100644
--- a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts
+++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts
@@ -200,8 +200,8 @@ export const StyledTable = styled(Table, { label: 'StyledTable' })(
       backgroundColor: theme.bg.app,
       borderBottom: `1px solid ${theme.bg.bgPaper}`,
       color: theme.textColors.textAccessTable,
+      fontFamily: theme.font.bold,
       fontSize: '0.875rem',
-      fontWeight: 'bold',
       lineHeight: 1,
       padding: theme.spacing(),
       textAlign: 'left',
diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx
index 64e7734be7a..fc5c88fedec 100644
--- a/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx
+++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx
@@ -14,6 +14,7 @@ import { EntityHeader } from 'src/components/EntityHeader/EntityHeader';
 import { Hidden } from 'src/components/Hidden';
 import { Link } from 'src/components/Link';
 import { TableBody } from 'src/components/TableBody';
+import { TableCell } from 'src/components/TableCell';
 import { TagCell } from 'src/components/TagCell/TagCell';
 import { Typography, TypographyProps } from 'src/components/Typography';
 import { LinodeActionMenu } from 'src/features/Linodes/LinodesLanding/LinodeActionMenu';
@@ -578,7 +579,9 @@ export const AccessTable = React.memo((props: AccessTableProps) => {
               return thisRow.text ? (
                 <StyledTableRow key={thisRow.text}>
                   {thisRow.heading ? (
-                    <th scope="row">{thisRow.heading}</th>
+                    <TableCell component="th" scope="row">
+                      {thisRow.heading}
+                    </TableCell>
                   ) : null}
                   <StyledTableCell>
                     <StyledGradientDiv>
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx
index 20444925274..c495a971c25 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx
@@ -179,9 +179,7 @@ export const ApiAwarenessModal = (props: ApiAwarenessModalProps) => {
       <Notice spacingBottom={0} spacingTop={24} variant="marketing">
         <Typography
           sx={{
-            fontFamily: theme.font.bold,
             fontSize: '14px !important',
-            fontWeight: 400,
           }}
         >
           Deploy and manage your infrastructure with the{' '}
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx
index 0fb57f4b4af..3b5eabfaa40 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx
@@ -134,7 +134,7 @@ const LinodeConfigs = () => {
                         <TableCell
                           sx={{
                             borderRight: `1px solid ${theme.palette.divider}`,
-                            fontWeight: 'bold',
+                            fontFamily: theme.font.bold,
                             width: '25%',
                           }}
                         >
@@ -143,7 +143,7 @@ const LinodeConfigs = () => {
                         <TableCell
                           sx={{
                             borderRight: `1px solid ${theme.palette.divider}`,
-                            fontWeight: 'bold',
+                            fontFamily: theme.font.bold,
                             width: '30%',
                           }}
                         >
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx
index 67fb90fc99b..719170446ca 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx
@@ -306,7 +306,7 @@ const IPSharingPanel = (props: Props) => {
             <Grid lg={8} sm={12} xl={6}>
               {flags.ipv6Sharing ? (
                 <Notice variant="warning">
-                  <Typography style={{ fontSize: '0.875rem' }}>
+                  <Typography sx={{ fontSize: '0.875rem' }}>
                     <strong>Warning:</strong> Converting a statically routed
                     IPv6 range to a shared range will break existing IPv6
                     connectivity unless each Linode that shares the range has
@@ -336,7 +336,7 @@ const IPSharingPanel = (props: Props) => {
                     width: '100%',
                   }}
                 >
-                  <Typography style={{ fontWeight: 'bold' }}>
+                  <Typography sx={{ fontFamily: theme.font.bold }}>
                     IP Addresses
                   </Typography>
                 </Grid>
diff --git a/packages/manager/src/features/Linodes/LinodesLanding/AppsSection.tsx b/packages/manager/src/features/Linodes/LinodesLanding/AppsSection.tsx
index ea4150943a7..b34ee4921eb 100644
--- a/packages/manager/src/features/Linodes/LinodesLanding/AppsSection.tsx
+++ b/packages/manager/src/features/Linodes/LinodesLanding/AppsSection.tsx
@@ -101,8 +101,8 @@ const StyledLink = styled(Link, { label: 'StyledLink' })(({ theme }) => ({
   }`,
   color: theme.palette.text.primary,
   display: 'flex',
+  fontFamily: theme.font.bold,
   fontSize: '0.875rem',
-  fontWeight: 700,
   gridColumn: 'span 1',
   height: theme.spacing(4.75),
   justifyContent: 'space-between',
diff --git a/packages/manager/src/features/Linodes/MigrateLinode/MigrationPricing.tsx b/packages/manager/src/features/Linodes/MigrateLinode/MigrationPricing.tsx
index 936017a4655..fbc7480a4ab 100644
--- a/packages/manager/src/features/Linodes/MigrateLinode/MigrationPricing.tsx
+++ b/packages/manager/src/features/Linodes/MigrateLinode/MigrationPricing.tsx
@@ -47,7 +47,7 @@ export const MigrationPricing = (props: MigrationPricingProps) => {
         {backups !== 'disabled' && backups?.monthly && (
           <>
             &nbsp;
-            <Typography fontSize={priceFontSize} fontWeight="bold">
+            <Typography fontFamily={theme.font.bold} fontSize={priceFontSize}>
               | Backups&nbsp;
             </Typography>
             <DisplayPrice
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/RulesTable.styles.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/RulesTable.styles.tsx
index 4b822684787..667e813d632 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/RulesTable.styles.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/RulesTable.styles.tsx
@@ -30,8 +30,8 @@ export const StyledInnerBox = styled(Box, { label: 'StyledInnerBox' })(
   ({ theme }) => ({
     backgroundColor: theme.bg.tableHeader,
     color: theme.textColors.tableHeader,
+    fontFamily: theme.font.bold,
     fontSize: '.875rem',
-    fontWeight: 'bold',
     height: '46px',
   })
 );
diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/TopProcesses.styles.ts b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/TopProcesses.styles.ts
index 3d465e8f4dc..17b396e98b1 100644
--- a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/TopProcesses.styles.ts
+++ b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/TopProcesses.styles.ts
@@ -1,9 +1,11 @@
 import { styled } from '@mui/material/styles';
 import { Link } from 'react-router-dom';
 
-export const StyledLink = styled(Link, { label: 'StyledLink' })({
-  fontSize: 16,
-  fontWeight: 'bold',
-  position: 'relative',
-  top: 3,
-});
+export const StyledLink = styled(Link, { label: 'StyledLink' })(
+  ({ theme }) => ({
+    fontFamily: theme.font.bold,
+    fontSize: 16,
+    position: 'relative',
+    top: 3,
+  })
+);
diff --git a/packages/manager/src/features/NotificationCenter/NotificationSection.tsx b/packages/manager/src/features/NotificationCenter/NotificationSection.tsx
index 0baab5212a5..621dc5655e5 100644
--- a/packages/manager/src/features/NotificationCenter/NotificationSection.tsx
+++ b/packages/manager/src/features/NotificationCenter/NotificationSection.tsx
@@ -32,8 +32,8 @@ const useStyles = makeStyles()((theme: Theme) => ({
     },
     alignItems: 'center',
     display: 'flex',
+    fontFamily: theme.font.bold,
     fontSize: 14,
-    fontWeight: 'bold',
     paddingTop: theme.spacing(),
   },
 }));
@@ -170,11 +170,11 @@ const ContentBody = React.memo((props: BodyProps) => {
       {content.length > count ? (
         <StyledLToggleContainer display="flex" justifyContent="flex-end">
           <StyledLinkButton
-            sx={{
+            sx={(theme) => ({
               color: 'primary.main',
-              fontWeight: 'bold',
+              fontFamily: theme.font.bold,
               textDecoration: 'none !important',
-            }}
+            })}
             aria-label={`Display all ${content.length} items`}
             data-test-id="showMoreButton"
             onClick={() => setShowAll(!showAll)}
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
index 8d1dce833f2..4a05ca75936 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
@@ -85,9 +85,7 @@ export const StyledLabel = styled(Typography, {
   label: 'StyledLabel',
 })(({ theme }) => ({
   color: theme.name === 'light' ? '#555' : '#c9cacb',
-  fontFamily: 'LatoWebBold',
   fontSize: '.875rem',
-  fontWeight: 400,
   lineHeight: '1',
   marginBottom: '8px',
   marginTop: theme.spacing(2),
diff --git a/packages/manager/src/features/TopMenu/SearchBar/SearchSuggestion.styles.ts b/packages/manager/src/features/TopMenu/SearchBar/SearchSuggestion.styles.ts
index 51f64a28083..ae369de459a 100644
--- a/packages/manager/src/features/TopMenu/SearchBar/SearchSuggestion.styles.ts
+++ b/packages/manager/src/features/TopMenu/SearchBar/SearchSuggestion.styles.ts
@@ -47,8 +47,8 @@ export const StyledSuggestionTitle = styled('div', {
   label: 'StyledSuggestionTitle',
 })(({ theme }) => ({
   color: theme.palette.text.primary,
+  fontFamily: theme.font.bold,
   fontSize: '1rem',
-  fontWeight: 600,
   wordBreak: 'break-all',
 }));
 
diff --git a/packages/manager/src/foundations/fonts.ts b/packages/manager/src/foundations/fonts.ts
index 0c91078f802..020745fcb65 100644
--- a/packages/manager/src/foundations/fonts.ts
+++ b/packages/manager/src/foundations/fonts.ts
@@ -1,5 +1,4 @@
 export const latoWeb = {
   bold: '"LatoWebBold", sans-serif',
   normal: '"LatoWeb", sans-serif',
-  semiBold: '"LatoWebSemibold", sans-serif',
 } as const;
diff --git a/packages/manager/src/foundations/themes/light.ts b/packages/manager/src/foundations/themes/light.ts
index 87ed48c5aef..71f28339453 100644
--- a/packages/manager/src/foundations/themes/light.ts
+++ b/packages/manager/src/foundations/themes/light.ts
@@ -1352,7 +1352,6 @@ export const lightTheme: ThemeOptions = {
   font: {
     bold: latoWeb.bold,
     normal: latoWeb.normal,
-    semiBold: latoWeb.semiBold,
   },
   graphs: {
     aborted: {
diff --git a/packages/manager/src/index.css b/packages/manager/src/index.css
index 07af05d4999..d5a52915b96 100644
--- a/packages/manager/src/index.css
+++ b/packages/manager/src/index.css
@@ -155,6 +155,7 @@ a.h-u:hover {
 strong,
 b {
   font-family: 'LatoWebBold', sans-serif;
+  font-weight: normal;
 }
 
 .visually-hidden {
@@ -334,7 +335,7 @@ button::-moz-focus-inner {
   background: #3683dc;
   color: white;
   font-size: 14px;
-  font-weight: bold;
+  font-family: 'LatoWebBold', sans-serif;
   padding: 8px;
   position: absolute;
   top: -40px;
diff --git a/yarn.lock b/yarn.lock
index 69df606383f..839422c2adf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2488,6 +2488,11 @@
   resolved "https://registry.yarnpkg.com/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz#8ace5259254426ccef57f3175bc64ed7095ed919"
   integrity sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==
 
+"@linode/eslint-plugin-cloud-manager@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@linode/eslint-plugin-cloud-manager/-/eslint-plugin-cloud-manager-0.0.3.tgz#dcb78ab36065bf0fb71106a586c1f3f88dbf840a"
+  integrity sha512-tW0CVkou/UzsAfvVbyxsvdwgXspcKMuJZPnGJJnlAGzFa7CVSURJiefYRbWjn2EFeoehgGvW4mGt30JNhhY+3g==
+
 "@mdx-js/react@^2.1.5":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-2.3.0.tgz#4208bd6d70f0d0831def28ef28c26149b03180b3"
@@ -14271,9 +14276,9 @@ typescript@^4.9.5:
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
 ua-parser-js@^0.7.30, ua-parser-js@^0.7.33:
-  version "0.7.36"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.36.tgz#382c5d6fc09141b6541be2cae446ecfcec284db2"
-  integrity sha512-CPPLoCts2p7D8VbybttE3P2ylv0OBZEAy7a12DsulIEcAiMtWJy+PBgMXgWDI80D5UwqE8oQPHYnk13tm38M2Q==
+  version "0.7.37"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.37.tgz#e464e66dac2d33a7a1251d7d7a99d6157ec27832"
+  integrity sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA==
 
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
@@ -14903,9 +14908,9 @@ yallist@^4.0.0:
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
 yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2, yaml@^2.2.2, yaml@^2.3.0:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.2.tgz#f522db4313c671a0ca963a75670f1c12ea909144"
-  integrity sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.3.tgz#01f6d18ef036446340007db8e016810e5d64aad9"
+  integrity sha512-zw0VAJxgeZ6+++/su5AFoqBbZbrEakwu+X0M5HmcwUiBL7AzcuPKjj5we4xfQLp78LkEMpD0cOnUhmgOVy3KdQ==
 
 yargs-parser@^11.1.1, yargs-parser@^18.1.2, yargs-parser@^18.1.3, yargs-parser@^20.2.2, yargs-parser@^20.2.9:
   version "18.1.3"

From ec48b0e458c0324ecf3fbe8ce599c66414ba2899 Mon Sep 17 00:00:00 2001
From: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>
Date: Thu, 2 Nov 2023 11:55:46 -0400
Subject: [PATCH 20/43] fix: [M3-7341] - Create Linode from backup: grid fix
 and cleanup (#9862)

* Grid fix and cleanup

* Added changeset: Select backup grid layout

* Feedback
---
 .../.changeset/pr-9862-fixed-1698853596745.md |  5 ++++
 .../LinodesCreate/SelectBackupPanel.tsx       | 29 +++++--------------
 .../LinodesCreate/SelectLinodePanel.tsx       | 15 ++++------
 .../TabbedContent/FromBackupsContent.tsx      | 13 ++-------
 4 files changed, 21 insertions(+), 41 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9862-fixed-1698853596745.md

diff --git a/packages/manager/.changeset/pr-9862-fixed-1698853596745.md b/packages/manager/.changeset/pr-9862-fixed-1698853596745.md
new file mode 100644
index 00000000000..77a4a2fe65d
--- /dev/null
+++ b/packages/manager/.changeset/pr-9862-fixed-1698853596745.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Select backup grid layout ([#9862](https://github.com/linode/manager/pull/9862))
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectBackupPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectBackupPanel.tsx
index 7d213494013..fafb7e11394 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectBackupPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/SelectBackupPanel.tsx
@@ -6,22 +6,14 @@ import {
 import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
-import { compose } from 'recompose';
 
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
-import { RenderGuard, RenderGuardProps } from 'src/components/RenderGuard';
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
 import { Typography } from 'src/components/Typography';
-import {
-  WithProfileProps,
-  withProfile,
-} from 'src/containers/profile.container';
+import { useProfile } from 'src/queries/profile';
 import { formatDate } from 'src/utilities/formatDate';
-import { omittedProps } from 'src/utilities/omittedProps';
-
-import type { StyledTypographyProps } from './SelectLinodePanel';
 
 export const aggregateBackups = (
   backups: LinodeBackupsResponse
@@ -55,15 +47,13 @@ interface Props {
   selectedLinodeWithBackups?: LinodeWithBackups;
 }
 
-type CombinedProps = Props & WithProfileProps;
-
-const SelectBackupPanel = (props: CombinedProps) => {
+export const SelectBackupPanel = (props: Props) => {
+  const { data: profile } = useProfile();
   const {
     error,
     handleChangeBackup,
     handleChangeBackupInfo,
     loading,
-    profile,
     selectedBackupID,
     selectedLinodeID,
     selectedLinodeWithBackups,
@@ -80,12 +70,13 @@ const SelectBackupPanel = (props: CombinedProps) => {
       ? 'Automatic'
       : 'Snapshot';
     const subheading = formatDate(backup.created, {
-      timezone: profile.data?.timezone,
+      timezone: profile?.timezone,
     });
     const infoName =
       heading === 'Automatic'
         ? 'From automatic backup'
         : `From backup ${heading}`;
+
     return {
       heading,
       infoName,
@@ -126,7 +117,7 @@ const SelectBackupPanel = (props: CombinedProps) => {
           <React.Fragment>
             {aggregatedBackups.length !== 0 ? (
               <StyledTypography component="div">
-                <Grid container>
+                <Grid container spacing={2}>
                   {aggregatedBackups.map((backup) => {
                     return renderCard(backup);
                   })}
@@ -146,8 +137,7 @@ const SelectBackupPanel = (props: CombinedProps) => {
 
 const StyledTypography = styled(Typography, {
   label: 'StyledTypography',
-  shouldForwardProp: omittedProps(['component']),
-})<StyledTypographyProps>(({ theme }) => ({
+})<{ component: string }>(({ theme }) => ({
   padding: `${theme.spacing(2)} 0 0`,
   width: '100%',
 }));
@@ -167,8 +157,3 @@ const StyledWrapperGrid = styled(Grid, { label: 'StyledWrapperGrid' })(
     padding: theme.spacing(1),
   })
 );
-
-export default compose<CombinedProps, Props & RenderGuardProps>(
-  RenderGuard,
-  withProfile
-)(SelectBackupPanel);
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel.tsx
index ff686e33009..1e17f0b2fb3 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel.tsx
@@ -3,6 +3,7 @@ import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
+import { Box } from 'src/components/Box';
 import { Notice } from 'src/components/Notice/Notice';
 import Paginate from 'src/components/Paginate';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
@@ -10,7 +11,6 @@ import { Paper } from 'src/components/Paper';
 import { RenderGuard } from 'src/components/RenderGuard';
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
 import { Typography } from 'src/components/Typography';
-import { omittedProps } from 'src/utilities/omittedProps';
 
 export interface ExtendedLinode extends Linode {
   heading: string;
@@ -78,13 +78,13 @@ const SelectLinodePanel = (props: Props) => {
               <Typography data-qa-select-linode-header variant="h2">
                 {!!header ? header : 'Select Linode'}
               </Typography>
-              <StyledTypography component="div">
+              <StyledBox>
                 <Grid container spacing={2}>
                   {linodesData.map((linode) => {
                     return renderCard(linode);
                   })}
                 </Grid>
-              </StyledTypography>
+              </StyledBox>
             </StyledPaper>
             <PaginationFooter
               count={count}
@@ -101,12 +101,9 @@ const SelectLinodePanel = (props: Props) => {
   );
 };
 
-export type StyledTypographyProps = { component: string };
-
-const StyledTypography = styled(Typography, {
-  label: 'StyledTypography',
-  shouldForwardProp: omittedProps(['component']),
-})<StyledTypographyProps>(({ theme }) => ({
+const StyledBox = styled(Box, {
+  label: 'StyledBox',
+})(({ theme }) => ({
   padding: `${theme.spacing(2)} 0 0`,
 }));
 
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx
index 2a71b9dadf4..a8b5eef31ef 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx
@@ -3,18 +3,17 @@ import {
   LinodeBackupsResponse,
   getLinodeBackups,
 } from '@linode/api-v4/lib/linodes';
-import { StyledGrid } from './CommonTabbedContent.styles';
 import { compose as ramdaCompose } from 'ramda';
 import * as React from 'react';
 
 import VolumeIcon from 'src/assets/icons/entityIcons/volume.svg';
-import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import { Paper } from 'src/components/Paper';
+import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import { reportException } from 'src/exceptionReporting';
 import { extendType } from 'src/utilities/extendType';
 import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
 
-import SelectBackupPanel from '../SelectBackupPanel';
+import { SelectBackupPanel } from '../SelectBackupPanel';
 import SelectLinodePanel from '../SelectLinodePanel';
 import {
   BackupFormStateHandlers,
@@ -23,6 +22,7 @@ import {
   WithLinodesTypesRegionsAndImages,
 } from '../types';
 import { extendLinodes, getRegionIDFromLinodeID } from '../utilities';
+import { StyledGrid } from './CommonTabbedContent.styles';
 
 export interface LinodeWithBackups extends Linode {
   currentBackups: LinodeBackupsResponse;
@@ -134,13 +134,6 @@ export class FromBackupsContent extends React.Component<CombinedProps, State> {
               updateFor={[selectedLinodeID, errors]}
             />
             <SelectBackupPanel
-              updateFor={[
-                selectedLinodeID,
-                selectedBackupID,
-                errors,
-                selectedLinodeWithBackups,
-                isGettingBackups,
-              ]}
               error={hasErrorFor('backup_id') || this.state.backupsError}
               handleChangeBackup={setBackupID}
               handleChangeBackupInfo={this.handleSelectBackupInfo}

From 3ea70908ef0ed9a9e0dd309866d57a8674d01fc7 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Thu, 2 Nov 2023 12:21:11 -0500
Subject: [PATCH 21/43] feat: [M3-7311] - Create Load Balancer flow - manage
 state (#9848)

* feat: [M3-7311] - Create Load Balancer flow - Mange state.

* Code cleanup

* Added changeset: Create Load Balancer flow - Mange state.

* Update pr-9848-upcoming-features-1698675578462.md

* Update update-database.spec.ts

* Update packages/manager/.changeset/pr-9848-upcoming-features-1698675578462.md

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

* Fix typos

* use useFormikContext instead of custom state management hook

* PR feedback

* Update loadbalancers.schema.ts

* Update packages/validation/src/loadbalancers.schema.ts

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

* Update packages/validation/src/loadbalancers.schema.ts

Co-authored-by: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>

* Update loadbalancers.schema.ts

* Update CreateLoadBalancerSchema and Endpoint Schema

* Revert "Update CreateLoadBalancerSchema and Endpoint Schema"

This reverts commit 106f4d1f175f7c28a13b04f5a11f4c00345e575f.

* Code cleanup and update Endpoint schema.

* Update the field names

* Added changeset: Create Load Balancer flow - manage state

---------

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
Co-authored-by: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>
---
 ...pr-9848-upcoming-features-1698675578462.md |  5 +
 .../core/databases/update-database.spec.ts    |  8 +-
 .../LoadBalancerActionPanel.tsx               | 27 +++++
 .../LoadBalancerConfiguration.test.tsx        |  6 +-
 .../LoadBalancerConfiguration.tsx             |  2 +-
 .../LoadBalancerCreate/LoadBalancerCreate.tsx | 58 +++++------
 .../LoadBalancerLabel.test.tsx                | 79 ++++++++++-----
 .../LoadBalancerCreate/LoadBalancerLabel.tsx  | 28 +++---
 .../LoadBalancerRegions.tsx                   |  4 +-
 ...pr-9848-upcoming-features-1698944870213.md |  5 +
 .../validation/src/loadbalancers.schema.ts    | 99 ++++++++++++++++++-
 11 files changed, 239 insertions(+), 82 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9848-upcoming-features-1698675578462.md
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerActionPanel.tsx
 create mode 100644 packages/validation/.changeset/pr-9848-upcoming-features-1698944870213.md

diff --git a/packages/manager/.changeset/pr-9848-upcoming-features-1698675578462.md b/packages/manager/.changeset/pr-9848-upcoming-features-1698675578462.md
new file mode 100644
index 00000000000..027f79ae372
--- /dev/null
+++ b/packages/manager/.changeset/pr-9848-upcoming-features-1698675578462.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Create Load Balancer flow - manage state ([#9848](https://github.com/linode/manager/pull/9848))
diff --git a/packages/manager/cypress/e2e/core/databases/update-database.spec.ts b/packages/manager/cypress/e2e/core/databases/update-database.spec.ts
index 5c7e492b8a5..a2b15006d23 100644
--- a/packages/manager/cypress/e2e/core/databases/update-database.spec.ts
+++ b/packages/manager/cypress/e2e/core/databases/update-database.spec.ts
@@ -186,8 +186,12 @@ describe('Update database clusters', () => {
 
           cy.get('[data-qa-cluster-config]').within(() => {
             cy.findByText(configuration.region.label).should('be.visible');
-            cy.findByText(database.used_disk_size_gb + " GB").should('be.visible');
-            cy.findByText(database.total_disk_size_gb + " GB").should('be.visible');
+            cy.findByText(database.used_disk_size_gb + ' GB').should(
+              'be.visible'
+            );
+            cy.findByText(database.total_disk_size_gb + ' GB').should(
+              'be.visible'
+            );
           });
 
           cy.get('[data-qa-connection-details]').within(() => {
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerActionPanel.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerActionPanel.tsx
new file mode 100644
index 00000000000..8a6c43caa6a
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerActionPanel.tsx
@@ -0,0 +1,27 @@
+import { useFormikContext } from 'formik';
+import * as React from 'react';
+
+import { Box } from 'src/components/Box';
+import { Button } from 'src/components/Button/Button';
+
+export const LoadBalancerActionPanel = () => {
+  const { submitForm } = useFormikContext();
+  return (
+    <Box
+      columnGap={1}
+      display="flex"
+      flexWrap="wrap"
+      justifyContent="space-between"
+      rowGap={3}
+    >
+      <Button buttonType="outlined">Add Another Configuration</Button>
+      <Button
+        buttonType="primary"
+        onClick={submitForm}
+        sx={{ marginLeft: 'auto' }}
+      >
+        Review Load Balancer
+      </Button>
+    </Box>
+  );
+};
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
index 014364fbcca..a7f01c1eed9 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.test.tsx
@@ -18,7 +18,7 @@ describe('LoadBalancerConfiguration', () => {
       )
     ).toBeNull();
     expect(
-      screen.queryByText('TODO: AGLB - Implement Routes Confiugataion.')
+      screen.queryByText('TODO: AGLB - Implement Routes Configuration.')
     ).toBeNull();
     expect(screen.getByText('Next: Service Targets')).toBeInTheDocument();
     expect(screen.queryByText('Previous: Details')).toBeNull();
@@ -33,7 +33,7 @@ describe('LoadBalancerConfiguration', () => {
       screen.queryByText('TODO: AGLB - Implement Details step content.')
     ).toBeNull();
     expect(
-      screen.queryByText('TODO: AGLB - Implement Routes Confiugataion.')
+      screen.queryByText('TODO: AGLB - Implement Routes Configuration.')
     ).toBeNull();
     expect(screen.getByText('Next: Routes')).toBeInTheDocument();
     expect(screen.getByText('Previous: Details')).toBeInTheDocument();
@@ -52,7 +52,7 @@ describe('LoadBalancerConfiguration', () => {
       )
     ).toBeNull();
     expect(
-      screen.getByText('TODO: AGLB - Implement Routes Confiugataion.')
+      screen.getByText('TODO: AGLB - Implement Routes Configuration.')
     ).toBeInTheDocument();
     expect(screen.getByText('Previous: Service Targets')).toBeInTheDocument();
   });
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
index a9eadc0b2b2..3d6d3cccd9d 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerConfiguration.tsx
@@ -17,7 +17,7 @@ export const configurationSteps = [
     label: 'Service Targets',
   },
   {
-    content: <div>TODO: AGLB - Implement Routes Confiugataion.</div>,
+    content: <div>TODO: AGLB - Implement Routes Configuration.</div>,
     handler: () => null,
     label: 'Routes',
   },
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
index c7b90a87917..0308f977e0a 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
@@ -1,15 +1,23 @@
+import { CreateLoadBalancerSchema } from '@linode/validation';
 import Stack from '@mui/material/Stack';
+import { Form, Formik } from 'formik';
 import * as React from 'react';
 
-import { Box } from 'src/components/Box';
-import { Button } from 'src/components/Button/Button';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
 
+import { LoadBalancerActionPanel } from './LoadBalancerActionPanel';
 import { LoadBalancerConfiguration } from './LoadBalancerConfiguration';
 import { LoadBalancerLabel } from './LoadBalancerLabel';
 import { LoadBalancerRegions } from './LoadBalancerRegions';
 
+import type { CreateLoadbalancerPayload } from '@linode/api-v4';
+
+const initialValues = {
+  label: '',
+  regions: [],
+};
+
 const LoadBalancerCreate = () => {
   return (
     <>
@@ -26,35 +34,23 @@ const LoadBalancerCreate = () => {
         }}
         title="Create"
       />
-      <Stack spacing={3}>
-        <LoadBalancerLabel
-          labelFieldProps={{
-            disabled: false,
-            errorText: '',
-            label: 'Linode Label',
-            onChange: () => null,
-            value: '',
-          }}
-        />
-        <LoadBalancerRegions />
-        <LoadBalancerConfiguration />
-        {/* TODO: AGLB -
-         * Implement Review Load Balancer Action Behavior
-         * Implement Add Another Configuration Behavior
-         */}
-        <Box
-          columnGap={1}
-          display="flex"
-          flexWrap="wrap"
-          justifyContent="space-between"
-          rowGap={3}
-        >
-          <Button buttonType="outlined">Add Another Configuration</Button>
-          <Button buttonType="primary" sx={{ marginLeft: 'auto' }}>
-            Review Load Balancer
-          </Button>
-        </Box>
-      </Stack>
+      <Formik<CreateLoadbalancerPayload>
+        onSubmit={(values, actions) => {
+          // TODO: AGLB - Implement form submit
+          // console.log('Values ', values);
+        }}
+        initialValues={initialValues}
+        validationSchema={CreateLoadBalancerSchema}
+      >
+        <Form>
+          <Stack spacing={3}>
+            <LoadBalancerLabel />
+            <LoadBalancerRegions />
+            <LoadBalancerConfiguration />
+            <LoadBalancerActionPanel />
+          </Stack>
+        </Form>
+      </Formik>
     </>
   );
 };
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx
index c99ba36bfe2..29c52f12122 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.test.tsx
@@ -1,49 +1,74 @@
+import { fireEvent } from '@testing-library/react';
+import { Formik } from 'formik';
 import React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { LoadBalancerLabel } from './LoadBalancerLabel';
 
+const loadBalancerLabelValue = 'Test Label';
+const loadBalancerTestId = 'textfield-input';
+
+import type { CreateLoadbalancerPayload } from '@linode/api-v4';
+
+type MockFormikContext = {
+  initialErrors?: {};
+  initialTouched?: {};
+  initialValues: CreateLoadbalancerPayload;
+};
+
+const initialValues = {
+  label: loadBalancerLabelValue,
+  regions: [],
+};
+
+const renderWithFormikWrapper = (mockFormikContext: MockFormikContext) =>
+  renderWithTheme(
+    <Formik {...mockFormikContext} onSubmit={jest.fn()}>
+      <LoadBalancerLabel />
+    </Formik>
+  );
+
 describe('LoadBalancerLabel', () => {
   it('should render the component with a label and no error', () => {
-    const labelFieldProps = {
-      disabled: false,
-      errorText: '',
-      label: 'Load Balancer Label',
-      onChange: jest.fn(),
-      value: 'Test Label',
-    };
-
-    const { getByTestId, queryByText } = renderWithTheme(
-      <LoadBalancerLabel error="" labelFieldProps={labelFieldProps} />
-    );
-
-    const labelInput = getByTestId('textfield-input');
+    const { getByTestId, queryByText } = renderWithFormikWrapper({
+      initialValues,
+    });
+
+    const labelInput = getByTestId(loadBalancerTestId);
     const errorNotice = queryByText('Error Text');
 
     expect(labelInput).toBeInTheDocument();
     expect(labelInput).toHaveAttribute('placeholder', 'Enter a label');
-    expect(labelInput).toHaveValue('Test Label');
+    expect(labelInput).toHaveValue(loadBalancerLabelValue);
     expect(errorNotice).toBeNull();
   });
 
   it('should render the component with an error message', () => {
-    const labelFieldProps = {
-      disabled: false,
-      errorText: 'This is an error',
-      label: 'Load Balancer Label',
-      onChange: jest.fn(),
-      value: 'Test Label',
-    };
-
-    const { getByTestId, getByText } = renderWithTheme(
-      <LoadBalancerLabel error="Error Text" labelFieldProps={labelFieldProps} />
-    );
-
-    const labelInput = getByTestId('textfield-input');
+    const { getByTestId, getByText } = renderWithFormikWrapper({
+      initialErrors: { label: 'This is an error' },
+      initialTouched: { label: true },
+      initialValues,
+    });
+
+    const labelInput = getByTestId(loadBalancerTestId);
     const errorNotice = getByText('This is an error');
 
     expect(labelInput).toBeInTheDocument();
     expect(errorNotice).toBeInTheDocument();
   });
+
+  it('should update formik values on input change', () => {
+    const { getByTestId } = renderWithFormikWrapper({
+      initialValues,
+    });
+
+    const labelInput = getByTestId(loadBalancerTestId);
+
+    // Simulate typing 'New Label' in the input field
+    fireEvent.change(labelInput, { target: { value: 'New Label' } });
+
+    // Expect the input to have the new value
+    expect(labelInput).toHaveValue('New Label');
+  });
 });
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.tsx
index 1bff990ab83..f385010e44d 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerLabel.tsx
@@ -1,16 +1,18 @@
+import { useFormikContext } from 'formik';
 import * as React from 'react';
 
-import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
-import { TextField, TextFieldProps } from 'src/components/TextField';
+import { TextField } from 'src/components/TextField';
 
-interface LabelProps {
-  error?: string;
-  labelFieldProps: TextFieldProps;
-}
+import type { CreateLoadbalancerPayload } from '@linode/api-v4';
 
-export const LoadBalancerLabel = (props: LabelProps) => {
-  const { error, labelFieldProps } = props;
+export const LoadBalancerLabel = () => {
+  const {
+    errors,
+    handleChange,
+    touched,
+    values,
+  } = useFormikContext<CreateLoadbalancerPayload>();
 
   return (
     <Paper
@@ -20,16 +22,16 @@ export const LoadBalancerLabel = (props: LabelProps) => {
       }}
       data-qa-label-header
     >
-      {error && <Notice text={error} variant="error" />}
       <TextField
         data-qa-label-input
-        disabled={labelFieldProps.disabled}
-        errorText={labelFieldProps.errorText}
+        disabled={false}
+        errorText={touched.label && errors.label ? errors.label : undefined} // Display errors if the field is touched and there's an error
         label="Load Balancer Label"
+        name="label"
         noMarginTop
-        onChange={() => labelFieldProps.onChange}
+        onChange={handleChange}
         placeholder="Enter a label"
-        value={labelFieldProps.value}
+        value={values?.label}
       />
     </Paper>
   );
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
index e1242d97fda..e5d999d8ed4 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
@@ -7,7 +7,7 @@ import { Flag } from 'src/components/Flag';
 import { Paper } from 'src/components/Paper';
 import { Typography } from 'src/components/Typography';
 
-const regions = [
+const loadBalancerRegions = [
   { country: 'us', id: 'us-iad', label: 'Washington, DC' },
   { country: 'us', id: 'us-lax', label: 'Los Angeles, CA' },
   { country: 'fr', id: 'fr-par', label: 'Paris, FR' },
@@ -31,7 +31,7 @@ export const LoadBalancerRegions = () => {
           </Typography>
         </Stack>
         <Stack py={0.5} spacing={1.25}>
-          {regions.map((region) => (
+          {loadBalancerRegions.map((region) => (
             <Stack
               alignItems="center"
               direction="row"
diff --git a/packages/validation/.changeset/pr-9848-upcoming-features-1698944870213.md b/packages/validation/.changeset/pr-9848-upcoming-features-1698944870213.md
new file mode 100644
index 00000000000..a9d70004239
--- /dev/null
+++ b/packages/validation/.changeset/pr-9848-upcoming-features-1698944870213.md
@@ -0,0 +1,5 @@
+---
+"@linode/validation": Upcoming Features
+---
+
+Create Load Balancer flow - manage state ([#9848](https://github.com/linode/manager/pull/9848))
diff --git a/packages/validation/src/loadbalancers.schema.ts b/packages/validation/src/loadbalancers.schema.ts
index d3f159d6850..332d8cd057a 100644
--- a/packages/validation/src/loadbalancers.schema.ts
+++ b/packages/validation/src/loadbalancers.schema.ts
@@ -1,12 +1,14 @@
 import { number, object, string, array } from 'yup';
 
+const LABEL_REQUIRED = 'Label is required.';
+
 export const CreateCertificateSchema = object({
   certificate: string().required('Certificate is required.'),
   key: string().when('type', {
     is: 'downstream',
     then: string().required('Private Key is required.'),
   }),
-  label: string().required('Label is required.'),
+  label: string().required(LABEL_REQUIRED),
   type: string().oneOf(['downstream', 'ca']).required('Type is required.'),
 });
 
@@ -54,7 +56,7 @@ const HealthCheckSchema = object({
 });
 
 export const CreateServiceTargetSchema = object({
-  label: string().required('Label is required.'),
+  label: string().required(LABEL_REQUIRED),
   endpoints: array(EndpointSchema).required(),
   ca_certificate: string().nullable(),
   load_balancing_policy: string()
@@ -78,7 +80,7 @@ export const UpdateServiceTargetSchema = object({
 });
 
 export const CreateRouteSchema = object({
-  label: string().required('Label is required.'),
+  label: string().required(LABEL_REQUIRED),
   protocol: string().oneOf(['http', 'tcp']),
 });
 
@@ -152,6 +154,97 @@ export const UpdateRouteSchema = object({
   }),
 });
 
+// Endpoint Schema
+const CreateLoadBalancerEndpointSchema = object({
+  ip: string().test(
+    'ip-or-host',
+    'Either IP or host must be provided.',
+    function (value) {
+      const { host } = this.parent;
+      return !!value || !!host;
+    }
+  ),
+  host: string().test(
+    'host-or-ip',
+    'Either host or IP must be provided.',
+    function (value) {
+      const { ip } = this.parent;
+      return !!value || !!ip;
+    }
+  ),
+  port: number().integer().required(),
+  rate_capacity: number().integer().required(),
+});
+
+// Service Target Schema
+const CreateLoadBalancerServiceTargetSchema = object({
+  percentage: number().integer().required(),
+  label: string().required(),
+  endpoints: array().of(CreateLoadBalancerEndpointSchema).required(),
+  certificate_id: number().integer(),
+  load_balancing_policy: string()
+    .oneOf(['round_robin', 'least_request', 'ring_hash', 'random', 'maglev'])
+    .required(),
+  healthcheck: HealthCheckSchema.required(),
+});
+
+// Rule Schema
+const CreateLoadBalancerRuleSchema = object({
+  match_condition: object().shape({
+    hostname: string().required(),
+    match_field: string()
+      .oneOf(['path_prefix', 'host', 'query', 'hostname', 'header', 'method'])
+      .required(),
+    match_value: string().required(),
+    session_stickiness_cookie: string(),
+    session_stickiness_ttl: number().integer(),
+  }),
+  service_targets: array().of(CreateLoadBalancerServiceTargetSchema).required(),
+});
+
+export const ConfigurationSchema = object({
+  label: string().required(LABEL_REQUIRED),
+  port: number().required('Port is required.').min(0).max(65_535),
+  protocol: string().oneOf(['tcp', 'http', 'https']).required(),
+  certificates: string().when('protocol', {
+    is: (val: string) => val !== 'http' && val !== 'tcp',
+    then: array().of(certificateConfigSchema).required(),
+    otherwise: array().strip(),
+  }),
+  routes: string().when('protocol', {
+    is: 'tcp',
+    then: array()
+      .of(
+        object({
+          label: string().required(),
+          protocol: string().oneOf(['tcp']).required(),
+          rules: array().of(CreateLoadBalancerRuleSchema).required(),
+        })
+      )
+      .required(),
+    otherwise: array()
+      .of(
+        object().shape({
+          label: string().required(),
+          protocol: string().oneOf(['http']).required(),
+          rules: array().of(CreateLoadBalancerRuleSchema).required(),
+        })
+      )
+      .required(),
+  }),
+});
+export const CreateLoadBalancerSchema = object({
+  label: string()
+    .matches(
+      /^[a-zA-Z0-9.\-_]+$/,
+      'Label may only contain letters, numbers, periods, dashes, and underscores.'
+    )
+    .required(LABEL_REQUIRED),
+  tags: array().of(string()), // TODO: AGLB - Should confirm on this with API team. Assuming this will be out of scope for Beta.
+  regions: array().of(string()).required(),
+  configurations: array().of(ConfigurationSchema),
+});
+
 /**
  * TODO: AGLB - remove this create schema
  */

From d47fdc55acae27b4fdd1ebdd3bfccdc81ef8e525 Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Thu, 2 Nov 2023 15:38:42 -0400
Subject: [PATCH 22/43] feat: [M3-7351] - AGLB Configurations Add Route Drawer
 and other refinements (#9853)

* fix up AGLB configurations

* various fixes

* add basic e2e test

* Added changeset: AGLB Configurations Add Route Drawer and other refinements

* improve mock data

* clean up and comment

* improve the mobile experence

* clean up regions

* fix create page crash

* feedback @mjac0bs

* Added changeset: AGLB Configurations Add Route Drawer and other refinements

* Added changeset: Add `UpdateConfigurationPayload`

* Added changeset: Add `UpdateConfigurationSchema` for AGLB

* Delete packages/manager/.changeset/pr-9853-upcoming-features-1698871857708.md

* add `id` to the routes table and add `id` to Load Balancer summary

* other minor improvements

* add certificate `id`

* export clean up and deep link configs

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
---
 ...pr-9853-upcoming-features-1698871909714.md |   5 +
 packages/api-v4/src/aglb/configurations.ts    |  11 +-
 packages/api-v4/src/aglb/types.ts             |   8 +
 ...pr-9853-upcoming-features-1698705643963.md |   5 +
 .../load-balancer-configurations.spec.ts      |  38 ++++
 packages/manager/src/MainContent.tsx          |   6 +-
 packages/manager/src/factories/aglb.ts        |   4 +-
 .../EntryPointLanding/EntryPointLanding.tsx   |  14 --
 .../LoadBalancerCreate/LoadBalancerCreate.tsx |   4 +-
 .../LoadBalancerRegions.tsx                   |  24 +--
 .../Certificates/Certificates.tsx             |   9 +
 .../ApplyCertificatesDrawer.tsx               |   4 +-
 .../Configurations/ConfigurationAccordion.tsx | 124 ++++++++----
 .../LoadBalancerConfigurations.tsx            |   6 +
 .../LoadBalancerDetail/LoadBalancerDetail.tsx |  35 ++--
 .../LoadBalancerRegions.tsx                   |  27 +++
 .../LoadBalancerDetail/LoadBalancerRoutes.tsx |  71 +++++++
 .../LoadBalancerServiceTargets.tsx            |  26 ++-
 .../LoadBalancerSettings.tsx                  |   3 +-
 .../LoadBalancerSummary.tsx                   |   4 +
 .../Routes/AddRouteDrawer.tsx                 | 179 ++++++++++++++++++
 .../LoadBalancerDetail/Routes/RouteSelect.tsx |  87 +++++++++
 .../LoadBalancerDetail/Routes/RoutesTable.tsx |  97 +++-------
 .../LoadBalancerDetail/Routes/utils.ts        |  24 ++-
 .../LoadBalancerDetail/Settings/Region.tsx    |  20 +-
 .../LoadBalancerLanding.tsx                   |   4 +-
 .../src/features/LoadBalancers/index.tsx      |  25 ++-
 packages/manager/src/mocks/serverHandlers.ts  |   9 +-
 .../src/queries/aglb/configurations.ts        |   3 +-
 packages/manager/src/queries/aglb/routes.ts   |  26 ++-
 ...pr-9853-upcoming-features-1698871976111.md |   5 +
 .../validation/src/loadbalancers.schema.ts    |  18 +-
 32 files changed, 701 insertions(+), 224 deletions(-)
 create mode 100644 packages/api-v4/.changeset/pr-9853-upcoming-features-1698871909714.md
 create mode 100644 packages/manager/.changeset/pr-9853-upcoming-features-1698705643963.md
 create mode 100644 packages/manager/cypress/e2e/core/loadBalancers/load-balancer-configurations.spec.ts
 delete mode 100644 packages/manager/src/features/LoadBalancers/EntryPoints/EntryPointLanding/EntryPointLanding.tsx
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRegions.tsx
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/AddRouteDrawer.tsx
 create mode 100644 packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RouteSelect.tsx
 create mode 100644 packages/validation/.changeset/pr-9853-upcoming-features-1698871976111.md

diff --git a/packages/api-v4/.changeset/pr-9853-upcoming-features-1698871909714.md b/packages/api-v4/.changeset/pr-9853-upcoming-features-1698871909714.md
new file mode 100644
index 00000000000..41eec7f5620
--- /dev/null
+++ b/packages/api-v4/.changeset/pr-9853-upcoming-features-1698871909714.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add `UpdateConfigurationPayload` ([#9853](https://github.com/linode/manager/pull/9853))
diff --git a/packages/api-v4/src/aglb/configurations.ts b/packages/api-v4/src/aglb/configurations.ts
index dd647471946..e98a31e6967 100644
--- a/packages/api-v4/src/aglb/configurations.ts
+++ b/packages/api-v4/src/aglb/configurations.ts
@@ -7,7 +7,12 @@ import Request, {
 } from '../request';
 import { Filter, Params, ResourcePage } from '../types';
 import { BETA_API_ROOT } from '../constants';
-import type { Configuration, ConfigurationPayload } from './types';
+import type {
+  Configuration,
+  ConfigurationPayload,
+  UpdateConfigurationPayload,
+} from './types';
+import { UpdateConfigurationSchema } from '@linode/validation';
 
 /**
  * getLoadbalancerConfigurations
@@ -75,7 +80,7 @@ export const createLoadbalancerConfiguration = (
 export const updateLoadbalancerConfiguration = (
   loadbalancerId: number,
   configurationId: number,
-  data: Partial<Configuration>
+  data: UpdateConfigurationPayload
 ) =>
   Request<Configuration>(
     setURL(
@@ -83,7 +88,7 @@ export const updateLoadbalancerConfiguration = (
         loadbalancerId
       )}/configurations/${encodeURIComponent(configurationId)}`
     ),
-    setData(data),
+    setData(data, UpdateConfigurationSchema),
     setMethod('PUT')
   );
 
diff --git a/packages/api-v4/src/aglb/types.ts b/packages/api-v4/src/aglb/types.ts
index 71899bbff72..525678e92f0 100644
--- a/packages/api-v4/src/aglb/types.ts
+++ b/packages/api-v4/src/aglb/types.ts
@@ -111,6 +111,14 @@ export interface Configuration {
   routes: { id: number; label: string }[];
 }
 
+export type UpdateConfigurationPayload = Partial<{
+  label: string;
+  port: number;
+  protocol: Protocol;
+  certificates: CertificateConfig[];
+  routes: number[];
+}>;
+
 export interface CertificateConfig {
   hostname: string;
   id: number;
diff --git a/packages/manager/.changeset/pr-9853-upcoming-features-1698705643963.md b/packages/manager/.changeset/pr-9853-upcoming-features-1698705643963.md
new file mode 100644
index 00000000000..5d32aeb6ef1
--- /dev/null
+++ b/packages/manager/.changeset/pr-9853-upcoming-features-1698705643963.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+AGLB Configurations Add Route Drawer and other refinements ([#9853](https://github.com/linode/manager/pull/9853))
diff --git a/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-configurations.spec.ts b/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-configurations.spec.ts
new file mode 100644
index 00000000000..8fc87120c34
--- /dev/null
+++ b/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-configurations.spec.ts
@@ -0,0 +1,38 @@
+import {
+  mockAppendFeatureFlags,
+  mockGetFeatureFlagClientstream,
+} from 'support/intercepts/feature-flags';
+import { makeFeatureFlagData } from 'support/util/feature-flags';
+import { loadbalancerFactory, configurationFactory } from '@src/factories';
+import {
+  mockGetLoadBalancer,
+  mockGetLoadBalancerConfigurations,
+} from 'support/intercepts/load-balancers';
+
+describe('Akamai Global Load Balancer configurations page', () => {
+  it('renders configurations', () => {
+    const loadbalancer = loadbalancerFactory.build();
+    const configurations = configurationFactory.buildList(5);
+
+    mockAppendFeatureFlags({
+      aglb: makeFeatureFlagData(true),
+    }).as('getFeatureFlags');
+    mockGetFeatureFlagClientstream().as('getClientStream');
+    mockGetLoadBalancer(loadbalancer).as('getLoadBalancer');
+    mockGetLoadBalancerConfigurations(loadbalancer.id, configurations).as(
+      'getConfigurations'
+    );
+
+    cy.visitWithLogin(`/loadbalancers/${loadbalancer.id}/configurations`);
+    cy.wait([
+      '@getFeatureFlags',
+      '@getClientStream',
+      '@getLoadBalancer',
+      '@getConfigurations',
+    ]);
+
+    for (const configuration of configurations) {
+      cy.findByText(configuration.label).should('be.visible');
+    }
+  });
+});
diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx
index 56c6a6edcd3..dab1dd692da 100644
--- a/packages/manager/src/MainContent.tsx
+++ b/packages/manager/src/MainContent.tsx
@@ -134,7 +134,11 @@ const Images = React.lazy(() => import('src/features/Images'));
 const Kubernetes = React.lazy(() => import('src/features/Kubernetes'));
 const ObjectStorage = React.lazy(() => import('src/features/ObjectStorage'));
 const Profile = React.lazy(() => import('src/features/Profile/Profile'));
-const LoadBalancers = React.lazy(() => import('src/features/LoadBalancers'));
+const LoadBalancers = React.lazy(() =>
+  import('src/features/LoadBalancers').then((module) => ({
+    default: module.LoadBalancers,
+  }))
+);
 const NodeBalancers = React.lazy(
   () => import('src/features/NodeBalancers/NodeBalancers')
 );
diff --git a/packages/manager/src/factories/aglb.ts b/packages/manager/src/factories/aglb.ts
index eb438a7d04d..ba4022defb5 100644
--- a/packages/manager/src/factories/aglb.ts
+++ b/packages/manager/src/factories/aglb.ts
@@ -258,7 +258,7 @@ export const createRouteFactory = Factory.Sync.makeFactory<CreateRoutePayload>({
 // *************************
 
 export const serviceTargetFactory = Factory.Sync.makeFactory<ServiceTarget>({
-  ca_certificate: 'my-cms-certificate',
+  ca_certificate: 'certificate-0',
   endpoints: [
     {
       ip: '192.168.0.100',
@@ -276,7 +276,7 @@ export const serviceTargetFactory = Factory.Sync.makeFactory<ServiceTarget>({
     unhealthy_threshold: 5,
   },
   id: Factory.each((i) => i),
-  label: Factory.each((i) => `images-backend-aws-${i}`),
+  label: Factory.each((i) => `service-target-${i}`),
   load_balancing_policy: 'round_robin',
 });
 
diff --git a/packages/manager/src/features/LoadBalancers/EntryPoints/EntryPointLanding/EntryPointLanding.tsx b/packages/manager/src/features/LoadBalancers/EntryPoints/EntryPointLanding/EntryPointLanding.tsx
deleted file mode 100644
index 70dbaac6a6a..00000000000
--- a/packages/manager/src/features/LoadBalancers/EntryPoints/EntryPointLanding/EntryPointLanding.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-import { DocumentTitleSegment } from 'src/components/DocumentTitle/DocumentTitle';
-
-const EntryPointLanding = () => {
-  return (
-    <>
-      <DocumentTitleSegment segment="Service Targets" />
-      TODO: AGLB M3-6811: Service Target Landing
-    </>
-  );
-};
-
-export default EntryPointLanding;
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
index 0308f977e0a..02cfbae851f 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerCreate.tsx
@@ -18,7 +18,7 @@ const initialValues = {
   regions: [],
 };
 
-const LoadBalancerCreate = () => {
+export const LoadBalancerCreate = () => {
   return (
     <>
       <DocumentTitleSegment segment="Create a Load Balancer" />
@@ -54,5 +54,3 @@ const LoadBalancerCreate = () => {
     </>
   );
 };
-
-export default LoadBalancerCreate;
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
index e5d999d8ed4..d1722ceda96 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerRegions.tsx
@@ -2,18 +2,10 @@ import Stack from '@mui/material/Stack';
 import * as React from 'react';
 
 import { BetaChip } from 'src/components/BetaChip/BetaChip';
-import { Country } from 'src/components/EnhancedSelect/variants/RegionSelect/utils';
-import { Flag } from 'src/components/Flag';
 import { Paper } from 'src/components/Paper';
 import { Typography } from 'src/components/Typography';
 
-const loadBalancerRegions = [
-  { country: 'us', id: 'us-iad', label: 'Washington, DC' },
-  { country: 'us', id: 'us-lax', label: 'Los Angeles, CA' },
-  { country: 'fr', id: 'fr-par', label: 'Paris, FR' },
-  { country: 'jp', id: 'jp-osa', label: 'Osaka, JP' },
-  { country: 'au', id: 'ap-southeast', label: 'Sydney, AU' },
-];
+import { LoadBalancerRegions as Regions } from '../LoadBalancerDetail/LoadBalancerRegions';
 
 export const LoadBalancerRegions = () => {
   return (
@@ -30,19 +22,7 @@ export const LoadBalancerRegions = () => {
             incurred.
           </Typography>
         </Stack>
-        <Stack py={0.5} spacing={1.25}>
-          {loadBalancerRegions.map((region) => (
-            <Stack
-              alignItems="center"
-              direction="row"
-              key={region.id}
-              spacing={2}
-            >
-              <Flag country={region.country as Lowercase<Country>} />
-              <Typography>{`${region.label} (${region.id})`}</Typography>
-            </Stack>
-          ))}
-        </Stack>
+        <Regions />
       </Stack>
     </Paper>
   );
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx
index f68703a1812..52c7f08907c 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx
@@ -142,6 +142,14 @@ export const Certificates = () => {
             >
               Label
             </TableSortCell>
+            <TableSortCell
+              active={orderBy === 'id'}
+              direction={order}
+              handleClick={handleOrderChange}
+              label="id"
+            >
+              ID
+            </TableSortCell>
             <TableCell></TableCell>
           </TableRow>
         </TableHead>
@@ -151,6 +159,7 @@ export const Certificates = () => {
           {data?.data.map((certificate) => (
             <TableRow key={`${certificate.label}-${certificate.type}`}>
               <TableCell>{certificate.label}</TableCell>
+              <TableCell>{certificate.id}</TableCell>
               <TableCell actionCell>
                 <ActionMenu
                   actionsList={[
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ApplyCertificatesDrawer.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ApplyCertificatesDrawer.tsx
index a40c6ac4609..d6503b2b618 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ApplyCertificatesDrawer.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ApplyCertificatesDrawer.tsx
@@ -1,5 +1,5 @@
 import { Configuration } from '@linode/api-v4';
-import { certificateConfigSchema } from '@linode/validation';
+import { CertificateConfigSchema } from '@linode/validation';
 import { useFormik } from 'formik';
 import React, { useEffect } from 'react';
 
@@ -39,7 +39,7 @@ export const ApplyCertificatesDrawer = (props: Props) => {
       onClose();
     },
     validateOnChange: false,
-    validationSchema: certificateConfigSchema,
+    validationSchema: CertificateConfigSchema,
   });
 
   useEffect(() => {
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx
index b1f24d6a6fe..a3e3b2ae405 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Configurations/ConfigurationAccordion.tsx
@@ -1,14 +1,13 @@
-import { Stack } from 'src/components/Stack';
 import { useFormik } from 'formik';
 import React, { useState } from 'react';
 
 import { Accordion } from 'src/components/Accordion';
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { Divider } from 'src/components/Divider';
-import Select from 'src/components/EnhancedSelect/Select';
 import { InputLabel } from 'src/components/InputLabel';
+import { Stack } from 'src/components/Stack';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { TextField } from 'src/components/TextField';
 import { TooltipIcon } from 'src/components/TooltipIcon';
@@ -17,23 +16,45 @@ import { useLoadBalancerConfigurationMutation } from 'src/queries/aglb/configura
 import { getErrorMap } from 'src/utilities/errorUtils';
 import { pluralize } from 'src/utilities/pluralize';
 
+import { AddRouteDrawer } from '../Routes/AddRouteDrawer';
 import { RoutesTable } from '../Routes/RoutesTable';
 import { ApplyCertificatesDrawer } from './ApplyCertificatesDrawer';
 import { CertificateTable } from './CertificateTable';
 import { DeleteConfigurationDialog } from './DeleteConfigurationDialog';
 
 import type { Configuration } from '@linode/api-v4';
+import { useParams } from 'react-router-dom';
 
 interface Props {
   configuration: Configuration;
   loadbalancerId: number;
 }
 
+function getConfigurationPayloadFromConfiguration(
+  configuration: Configuration
+) {
+  return {
+    certificates: configuration.certificates,
+    label: configuration.label,
+    port: configuration.port,
+    protocol: configuration.protocol,
+    routes: configuration.routes.map((r) => r.id),
+  };
+}
+
 export const ConfigurationAccordion = (props: Props) => {
   const { configuration, loadbalancerId } = props;
+  const { configurationId } = useParams<{ configurationId: string }>();
   const [isApplyCertDialogOpen, setIsApplyCertDialogOpen] = useState(false);
+  const [isAddRouteDrawerOpen, setIsAddRouteDrawerOpen] = useState(false);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
 
+  const [routesTableQuery, setRoutesTableQuery] = useState('');
+
+  const routesTableFilter = routesTableQuery
+    ? { label: { '+contains': routesTableQuery } }
+    : {};
+
   const {
     error,
     isLoading,
@@ -42,7 +63,7 @@ export const ConfigurationAccordion = (props: Props) => {
 
   const formik = useFormik({
     enableReinitialize: true,
-    initialValues: configuration,
+    initialValues: getConfigurationPayloadFromConfiguration(configuration),
     onSubmit(values) {
       mutateAsync(values);
     },
@@ -87,7 +108,7 @@ export const ConfigurationAccordion = (props: Props) => {
               {pluralize('Route', 'Routes', configuration.routes.length)}
             </Typography>
           </Stack>
-          {/* @TODO Hook up endpoint status */}
+          {/* TODO: AGLB - Hook up endpoint status */}
           <Stack direction="row" spacing={2}>
             <Stack alignItems="center" direction="row" spacing={1}>
               <Typography>Endpoints:</Typography>
@@ -103,6 +124,7 @@ export const ConfigurationAccordion = (props: Props) => {
           </Stack>
         </Stack>
       }
+      defaultExpanded={configuration.id === Number(configurationId)}
       headingProps={{ sx: { width: '100%' } }}
     >
       <form onSubmit={formik.handleSubmit}>
@@ -115,44 +137,34 @@ export const ConfigurationAccordion = (props: Props) => {
         />
         <Stack spacing={2}>
           <Stack direction="row" spacing={2}>
-            <Select
+            <Autocomplete
+              onChange={(e, { value }) =>
+                formik.setFieldValue('protocol', value)
+              }
               textFieldProps={{
-                labelTooltipText: 'TODO',
+                labelTooltipText: 'TODO: AGLB',
               }}
-              value={
-                protocolOptions.find(
-                  (option) => option.value === formik.values.protocol
-                ) ?? null
-              }
+              value={protocolOptions.find(
+                (option) => option.value === formik.values.protocol
+              )}
+              disableClearable
               errorText={errorMap.protocol}
-              isClearable={false}
               label="Protocol"
-              onChange={({ value }) => formik.setFieldValue('protocol', value)}
               options={protocolOptions}
-              styles={{ container: () => ({ width: 'unset' }) }}
             />
             <TextField
               errorText={errorMap.port}
               label="Port"
-              labelTooltipText="TODO"
+              labelTooltipText="TODO: AGLB"
               name="port"
               onChange={formik.handleChange}
               value={formik.values.port}
             />
           </Stack>
           <Stack maxWidth="600px">
-            <Stack
-              alignItems="center"
-              direction="row"
-              justifyContent="space-between"
-            >
-              <Stack alignItems="center" direction="row">
-                <InputLabel sx={{ marginBottom: 0 }}>
-                  TLS Certificates
-                </InputLabel>
-                <TooltipIcon status="help" text="OMG!" />
-              </Stack>
-              <Button>Upload Certificate</Button>
+            <Stack alignItems="center" direction="row">
+              <InputLabel sx={{ marginBottom: 0 }}>TLS Certificates</InputLabel>
+              <TooltipIcon status="help" text="TODO: AGLB" />
             </Stack>
             <CertificateTable
               certificates={formik.values.certificates}
@@ -173,19 +185,55 @@ export const ConfigurationAccordion = (props: Props) => {
         <Divider spacingBottom={16} spacingTop={16} />
         <Stack spacing={2}>
           <Typography variant="h2">Routes</Typography>
-          <RoutesTable configuredRoutes={configuration.routes} />
+          <Stack direction="row" flexWrap="wrap" gap={2}>
+            <Button
+              buttonType="outlined"
+              onClick={() => setIsAddRouteDrawerOpen(true)}
+            >
+              Add Route
+            </Button>
+            <TextField
+              hideLabel
+              label={`Filter ${configuration.label}'s Routes`}
+              onChange={(e) => setRoutesTableQuery(e.target.value)}
+              placeholder="Filter"
+            />
+          </Stack>
+          <RoutesTable
+            configuredRoutes={configuration.routes}
+            filter={routesTableFilter}
+          />
         </Stack>
         <Divider spacingBottom={16} spacingTop={16} />
-        <ActionsPanel
-          primaryButtonProps={{
-            label: 'Save Configuration',
-            loading: isLoading,
-            type: 'submit',
-          }}
-          secondaryButtonProps={{
-            label: 'Delete Configuration',
-            onClick: () => setIsDeleteDialogOpen(true),
+        <Stack
+          direction="row"
+          flexWrap="wrap"
+          gap={2}
+          justifyContent="flex-end"
+        >
+          <Button
+            buttonType="secondary"
+            onClick={() => setIsDeleteDialogOpen(true)}
+          >
+            Delete
+          </Button>
+          <Button
+            buttonType="primary"
+            disabled={!formik.dirty}
+            loading={isLoading}
+            type="submit"
+          >
+            Save Configuration
+          </Button>
+        </Stack>
+        <AddRouteDrawer
+          onAdd={(route) => {
+            formik.setFieldValue('routes', [...formik.values.routes, route]);
           }}
+          configuration={configuration}
+          loadbalancerId={loadbalancerId}
+          onClose={() => setIsAddRouteDrawerOpen(false)}
+          open={isAddRouteDrawerOpen}
         />
         <ApplyCertificatesDrawer
           loadbalancerId={loadbalancerId}
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerConfigurations.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerConfigurations.tsx
index fc2fb2efdbc..e983cefbac5 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerConfigurations.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerConfigurations.tsx
@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 import { Waypoint } from 'react-waypoint';
 
 import { CircleProgress } from 'src/components/CircleProgress';
+import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { useLoabalancerConfigurationsInfiniteQuery } from 'src/queries/aglb/configurations';
 
 import { ConfigurationAccordion } from './Configurations/ConfigurationAccordion';
@@ -12,6 +13,7 @@ export const LoadBalancerConfigurations = () => {
 
   const {
     data,
+    error,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
@@ -22,6 +24,10 @@ export const LoadBalancerConfigurations = () => {
     return <CircleProgress />;
   }
 
+  if (error) {
+    return <ErrorState errorText={error[0].reason} />;
+  }
+
   const configurations = data?.pages.flatMap((page) => page.data);
 
   return (
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx
index d4e00db41d1..769749e17aa 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerDetail.tsx
@@ -32,8 +32,8 @@ const LoadBalancerServiceTargets = React.lazy(() =>
   }))
 );
 const LoadBalancerRoutes = React.lazy(() =>
-  import('./Routes/RoutesTable').then((module) => ({
-    default: module.RoutesTable,
+  import('./LoadBalancerRoutes').then((module) => ({
+    default: module.LoadBalancerRoutes,
   }))
 );
 
@@ -49,7 +49,7 @@ const LoadBalancerSettings = React.lazy(() =>
   }))
 );
 
-const LoadBalancerDetailLanding = () => {
+export const LoadBalancerDetail = () => {
   const { loadbalancerId } = useParams<{ loadbalancerId: string }>();
   const location = useLocation();
   const { path, url } = useRouteMatch();
@@ -60,32 +60,26 @@ const LoadBalancerDetailLanding = () => {
 
   const tabs = [
     {
-      component: LoadBalancerSummary,
       path: 'summary',
       title: 'Summary',
     },
     {
-      component: LoadBalancerConfigurations,
       path: 'configurations',
       title: 'Configurations',
     },
     {
-      component: LoadBalancerRoutes,
       path: 'routes',
       title: 'Routes',
     },
     {
-      component: LoadBalancerServiceTargets,
       path: 'service-targets',
       title: 'Service Targets',
     },
     {
-      component: LoadBalancerCertificates,
       path: 'certificates',
       title: 'Certificates',
     },
     {
-      component: LoadBalancerSettings,
       path: 'settings',
       title: 'Settings',
     },
@@ -118,13 +112,20 @@ const LoadBalancerDetailLanding = () => {
         />
         <React.Suspense fallback={<SuspenseLoader />}>
           <Switch>
-            {tabs.map((tab) => (
-              <Route
-                component={tab.component}
-                key={tab.title}
-                path={`${path}/${tab.path}`}
-              />
-            ))}
+            <Route
+              component={LoadBalancerConfigurations}
+              path={`${path}/configurations/:configurationId?`}
+            />
+            <Route component={LoadBalancerRoutes} path={`${path}/routes`} />
+            <Route
+              component={LoadBalancerCertificates}
+              path={`${path}/certificates`}
+            />
+            <Route
+              component={LoadBalancerServiceTargets}
+              path={`${path}/service-targets`}
+            />
+            <Route component={LoadBalancerSettings} path={`${path}/settings`} />
             <Route component={LoadBalancerSummary} />
           </Switch>
         </React.Suspense>
@@ -132,5 +133,3 @@ const LoadBalancerDetailLanding = () => {
     </>
   );
 };
-
-export default LoadBalancerDetailLanding;
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRegions.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRegions.tsx
new file mode 100644
index 00000000000..731e1f40cb2
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRegions.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Country } from 'src/components/EnhancedSelect/variants/RegionSelect/utils';
+import { Flag } from 'src/components/Flag';
+import { Stack } from 'src/components/Stack';
+import { Typography } from 'src/components/Typography';
+
+export const regions = [
+  { country: 'us', id: 'us-iad', label: 'Washington, DC' },
+  { country: 'us', id: 'us-lax', label: 'Los Angeles, CA' },
+  { country: 'fr', id: 'fr-par', label: 'Paris, FR' },
+  { country: 'jp', id: 'jp-osa', label: 'Osaka, JP' },
+  { country: 'au', id: 'ap-southeast', label: 'Sydney, AU' },
+];
+
+export const LoadBalancerRegions = () => {
+  return (
+    <Stack spacing={1.25}>
+      {regions.map((region) => (
+        <Stack alignItems="center" direction="row" key={region.id} spacing={2}>
+          <Flag country={region.country as Lowercase<Country>} />
+          <Typography>{`${region.label} (${region.id})`}</Typography>
+        </Stack>
+      ))}
+    </Stack>
+  );
+};
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx
new file mode 100644
index 00000000000..fc2c1724d63
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerRoutes.tsx
@@ -0,0 +1,71 @@
+import CloseIcon from '@mui/icons-material/Close';
+import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { Button } from 'src/components/Button/Button';
+import { IconButton } from 'src/components/IconButton';
+import { InputAdornment } from 'src/components/InputAdornment';
+import { Stack } from 'src/components/Stack';
+import { TextField } from 'src/components/TextField';
+
+import { CreateRouteDrawer } from './Routes/CreateRouteDrawer';
+import { RoutesTable } from './Routes/RoutesTable';
+
+import type { Filter } from '@linode/api-v4';
+
+export const LoadBalancerRoutes = () => {
+  const { loadbalancerId } = useParams<{ loadbalancerId: string }>();
+  const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false);
+  const [query, setQuery] = useState<string>();
+
+  const filter: Filter = query ? { label: { '+contains': query } } : {};
+
+  return (
+    <>
+      <Stack
+        alignItems="flex-end"
+        direction="row"
+        flexWrap="wrap"
+        gap={2}
+        justifyContent="space-between"
+        mb={2}
+        mt={1.5}
+      >
+        <TextField
+          InputProps={{
+            endAdornment: query && (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="Clear"
+                  onClick={() => setQuery('')}
+                  size="small"
+                  sx={{ padding: 'unset' }}
+                >
+                  <CloseIcon sx={{ color: '#aaa !important' }} />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+          hideLabel
+          label="Filter"
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Filter"
+          style={{ minWidth: '320px' }}
+          value={query}
+        />
+        <Button
+          buttonType="primary"
+          onClick={() => setIsCreateDrawerOpen(true)}
+        >
+          Create Route
+        </Button>
+      </Stack>
+      <RoutesTable filter={filter} />
+      <CreateRouteDrawer
+        loadbalancerId={Number(loadbalancerId)}
+        onClose={() => setIsCreateDrawerOpen(false)}
+        open={isCreateDrawerOpen}
+      />
+    </>
+  );
+};
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
index 9101eb5651d..91383f89403 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerServiceTargets.tsx
@@ -8,7 +8,6 @@ import { ActionMenu } from 'src/components/ActionMenu';
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { InputAdornment } from 'src/components/InputAdornment';
-import { Link } from 'src/components/Link';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Stack } from 'src/components/Stack';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
@@ -106,7 +105,7 @@ export const LoadBalancerServiceTargets = () => {
       >
         <TextField
           InputProps={{
-            endAdornment: (
+            endAdornment: query && (
               <InputAdornment position="end">
                 <IconButton
                   aria-label="Clear"
@@ -114,10 +113,7 @@ export const LoadBalancerServiceTargets = () => {
                   size="small"
                   sx={{ padding: 'unset' }}
                 >
-                  <CloseIcon
-                    color="inherit"
-                    sx={{ color: '#aaa !important' }}
-                  />
+                  <CloseIcon sx={{ color: '#aaa !important' }} />
                 </IconButton>
               </InputAdornment>
             ),
@@ -154,6 +150,16 @@ export const LoadBalancerServiceTargets = () => {
             <Hidden lgDown>
               <TableCell>Health Checks</TableCell>
             </Hidden>
+            <Hidden smDown>
+              <TableSortCell
+                active={orderBy === 'id'}
+                direction={order}
+                handleClick={handleOrderChange}
+                label="id"
+              >
+                ID
+              </TableSortCell>
+            </Hidden>
             <TableCell></TableCell>
           </TableRow>
         </TableHead>
@@ -162,9 +168,7 @@ export const LoadBalancerServiceTargets = () => {
           {data?.results === 0 && <TableRowEmpty colSpan={6} />}
           {data?.data.map((serviceTarget) => (
             <TableRow key={serviceTarget.label}>
-              <TableCell>
-                <Link to={String(serviceTarget.id)}>{serviceTarget.label}</Link>
-              </TableCell>
+              <TableCell>{serviceTarget.label}</TableCell>
               <TableCell>
                 <Stack alignItems="center" direction="row" spacing={1}>
                   <StatusIcon status="active" />
@@ -187,6 +191,9 @@ export const LoadBalancerServiceTargets = () => {
                   {serviceTarget.healthcheck.interval !== 0 ? 'Yes' : 'No'}
                 </TableCell>
               </Hidden>
+              <Hidden smDown>
+                <TableCell>{serviceTarget.id}</TableCell>
+              </Hidden>
               <TableCell actionCell>
                 <ActionMenu
                   actionsList={[
@@ -194,7 +201,6 @@ export const LoadBalancerServiceTargets = () => {
                       onClick: () => handleEditServiceTarget(serviceTarget),
                       title: 'Edit',
                     },
-                    { onClick: () => null, title: 'Clone Service Target' },
                     {
                       onClick: () => handleDeleteServiceTarget(serviceTarget),
                       title: 'Delete',
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSettings.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSettings.tsx
index 65f19a9076b..e605458b1e6 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSettings.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSettings.tsx
@@ -1,7 +1,8 @@
-import { Stack } from 'src/components/Stack';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
+import { Stack } from 'src/components/Stack';
+
 import { Delete } from './Settings/Delete';
 import { Label } from './Settings/Label';
 import { Region } from './Settings/Region';
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSummary.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSummary.tsx
index 3f19583fc48..0b8416a6ec8 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSummary.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/LoadBalancerSummary.tsx
@@ -58,6 +58,10 @@ export const LoadBalancerSummary = () => {
         </Typography>
       ),
     },
+    {
+      title: 'Load Balancer ID',
+      value: <Typography>{loadbalancer?.id}</Typography>,
+    },
   ];
 
   return (
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/AddRouteDrawer.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/AddRouteDrawer.tsx
new file mode 100644
index 00000000000..04214869c61
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/AddRouteDrawer.tsx
@@ -0,0 +1,179 @@
+import { CreateRouteSchema } from '@linode/validation';
+import { useFormik } from 'formik';
+import React, { useState } from 'react';
+import { number, object } from 'yup';
+
+import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { Drawer } from 'src/components/Drawer';
+import { FormControlLabel } from 'src/components/FormControlLabel';
+import { Notice } from 'src/components/Notice/Notice';
+import { Radio } from 'src/components/Radio/Radio';
+import { RadioGroup } from 'src/components/RadioGroup';
+import { TextField } from 'src/components/TextField';
+import { useLoadBalancerRouteCreateMutation } from 'src/queries/aglb/routes';
+import { getFormikErrorsFromAPIErrors } from 'src/utilities/formikErrorUtils';
+
+import { RouteSelect } from './RouteSelect';
+import { getRouteProtocolFromConfiguration } from './utils';
+
+import type { Configuration, CreateRoutePayload } from '@linode/api-v4';
+
+export interface Props {
+  configuration: Configuration;
+  loadbalancerId: number;
+  onAdd: (routeId: number) => void;
+  onClose: () => void;
+  open: boolean;
+}
+
+type Mode = 'existing' | 'new';
+
+export const AddRouteDrawer = (props: Props) => {
+  const { configuration, loadbalancerId, onAdd, onClose, open } = props;
+
+  const [mode, setMode] = useState<Mode>('existing');
+
+  const routeProtocol = getRouteProtocolFromConfiguration(
+    configuration
+  ).toLocaleUpperCase();
+
+  return (
+    <Drawer onClose={onClose} open={open} title="Add Route">
+      <RadioGroup onChange={(_, value) => setMode(value as Mode)} value={mode}>
+        <FormControlLabel
+          control={<Radio />}
+          label={`Create New ${routeProtocol} Route`}
+          value="new"
+        />
+        <FormControlLabel
+          control={<Radio />}
+          label="Add Existing Route"
+          value="existing"
+        />
+      </RadioGroup>
+      {mode === 'existing' ? (
+        <AddExistingRouteForm
+          loadbalancerId={loadbalancerId}
+          onAdd={onAdd}
+          onClose={onClose}
+        />
+      ) : (
+        <AddNewRouteForm
+          configuration={configuration}
+          loadbalancerId={loadbalancerId}
+          onAdd={onAdd}
+          onClose={onClose}
+        />
+      )}
+    </Drawer>
+  );
+};
+
+interface AddExistingRouteFormProps {
+  loadbalancerId: number;
+  onAdd: (routeId: number) => void;
+  onClose: () => void;
+}
+
+const AddExistingRouteForm = (props: AddExistingRouteFormProps) => {
+  const { loadbalancerId, onAdd, onClose } = props;
+
+  const formik = useFormik<{ route: null | number }>({
+    initialValues: {
+      route: null,
+    },
+    onSubmit({ route }) {
+      onAdd(route!);
+      onClose();
+    },
+    validationSchema: object({
+      route: number().required().typeError('Route is required.'),
+    }),
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <RouteSelect
+        errorText={formik.errors.route}
+        loadbalancerId={loadbalancerId}
+        onChange={(route) => formik.setFieldValue('route', route?.id ?? null)}
+        value={formik.values.route ?? -1}
+      />
+      <ActionsPanel
+        primaryButtonProps={{
+          label: 'Add Route',
+          type: 'submit',
+        }}
+        secondaryButtonProps={{
+          label: 'Cancel',
+          onClick: onClose,
+        }}
+      />
+    </form>
+  );
+};
+
+interface AddNewRouteFormProps {
+  configuration: Configuration;
+  loadbalancerId: number;
+  onAdd: (routeId: number) => void;
+  onClose: () => void;
+}
+
+const AddNewRouteForm = (props: AddNewRouteFormProps) => {
+  const { configuration, loadbalancerId, onAdd, onClose } = props;
+
+  const {
+    error,
+    isLoading,
+    mutateAsync: createRoute,
+  } = useLoadBalancerRouteCreateMutation(loadbalancerId);
+
+  const formik = useFormik<CreateRoutePayload>({
+    initialValues: {
+      label: '',
+      protocol: getRouteProtocolFromConfiguration(configuration),
+      rules: [],
+    },
+    async onSubmit(values, helpers) {
+      try {
+        const route = await createRoute(values);
+        onAdd(route.id);
+        onClose();
+      } catch (error) {
+        helpers.setErrors(getFormikErrorsFromAPIErrors(error));
+      }
+    },
+    validationSchema: CreateRouteSchema,
+  });
+
+  const generalErrors = error
+    ?.filter((e) => !e.field || e.field !== 'label')
+    .map((e) => e.reason)
+    .join(',');
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      {generalErrors && <Notice text={generalErrors} variant="error" />}
+      <TextField
+        errorText={formik.errors.label}
+        label="Route Label"
+        name="label"
+        noMarginTop
+        onChange={formik.handleChange}
+        value={formik.values.label}
+      />
+      <ActionsPanel
+        primaryButtonProps={{
+          label: 'Create Route',
+          loading: isLoading,
+          type: 'submit',
+        }}
+        secondaryButtonProps={{
+          label: 'Cancel',
+          onClick: onClose,
+        }}
+      />
+    </form>
+  );
+};
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RouteSelect.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RouteSelect.tsx
new file mode 100644
index 00000000000..099da8236e7
--- /dev/null
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RouteSelect.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { useLoadBalancerRoutesInfiniteQuery } from 'src/queries/aglb/routes';
+
+import type { Filter, Route } from '@linode/api-v4';
+
+interface Props {
+  /**
+   * Error text to display as helper text under the TextField. Useful for validation errors.
+   */
+  errorText?: string;
+  /**
+   * The TextField label
+   * @default Route
+   */
+  label?: string;
+  /**
+   * The id of the Load Balancer you want to show certificates for
+   */
+  loadbalancerId: number;
+  /**
+   * Called when the value of the Select changes
+   */
+  onChange: (certificate: Route | null) => void;
+  /**
+   * The id of the selected Route
+   */
+  value: number;
+}
+
+export const RouteSelect = (props: Props) => {
+  const { errorText, label, loadbalancerId, onChange, value } = props;
+
+  const [inputValue, setInputValue] = React.useState<string>('');
+
+  const filter: Filter = {};
+
+  if (inputValue) {
+    filter['label'] = { '+contains': inputValue };
+  }
+
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+  } = useLoadBalancerRoutesInfiniteQuery(loadbalancerId, filter);
+
+  const routes = data?.pages.flatMap((page) => page.data);
+
+  const selectedRoute = routes?.find((cert) => cert.id === value) ?? null;
+
+  const onScroll = (event: React.SyntheticEvent) => {
+    const listboxNode = event.currentTarget;
+    if (
+      listboxNode.scrollTop + listboxNode.clientHeight >=
+        listboxNode.scrollHeight &&
+      hasNextPage
+    ) {
+      fetchNextPage();
+    }
+  };
+
+  return (
+    <Autocomplete
+      ListboxProps={{
+        onScroll,
+      }}
+      onInputChange={(_, value, reason) => {
+        if (reason === 'input') {
+          setInputValue(value);
+        }
+      }}
+      errorText={error?.[0].reason ?? errorText}
+      inputValue={selectedRoute ? selectedRoute.label : inputValue}
+      label={label ?? 'Route'}
+      loading={isLoading}
+      noMarginTop
+      onChange={(e, value) => onChange(value)}
+      options={routes ?? []}
+      placeholder="Select a Route"
+      value={selectedRoute}
+    />
+  );
+};
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RoutesTable.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RoutesTable.tsx
index f5b7671e9ab..18b50a1e4f3 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RoutesTable.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RoutesTable.tsx
@@ -1,30 +1,24 @@
-import CloseIcon from '@mui/icons-material/Close';
-import { Hidden, IconButton } from '@mui/material';
-import { Stack } from 'src/components/Stack';
+import { Hidden } from '@mui/material';
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { ActionMenu } from 'src/components/ActionMenu';
-import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import {
   CollapsibleTable,
   TableItem,
 } from 'src/components/CollapsibleTable/CollapsibleTable';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
-import { InputAdornment } from 'src/components/InputAdornment';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableSortCell } from 'src/components/TableSortCell';
-import { TextField } from 'src/components/TextField';
 import { useOrder } from 'src/hooks/useOrder';
 import { usePagination } from 'src/hooks/usePagination';
 import { useLoadBalancerRoutesQuery } from 'src/queries/aglb/routes';
 
 import { RulesTable } from '../RulesTable';
-import { CreateRouteDrawer } from './CreateRouteDrawer';
 import { DeleteRouteDialog } from './DeleteRouteDialog';
 import { DeleteRuleDialog } from './DeleteRuleDialog';
 import { EditRouteDrawer } from './EditRouteDrawer';
@@ -36,14 +30,15 @@ const PREFERENCE_KEY = 'loadbalancer-routes';
 
 interface Props {
   configuredRoutes?: Configuration['routes'];
+  filter?: Filter;
 }
 
-export const RoutesTable = ({ configuredRoutes }: Props) => {
+export const RoutesTable = (props: Props) => {
+  const { configuredRoutes, filter: additionalFilter } = props;
+
   const { loadbalancerId } = useParams<{ loadbalancerId: string }>();
-  const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false);
   const [isEditDrawerOpen, setIsEditDrawerOpen] = useState(false);
   const [isAddRuleDrawerOpen, setIsAddRuleDrawerOpen] = useState(false);
-  const [query, setQuery] = useState<string>();
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [isDeleteRuleDialogOpen, setIsDeleteRuleDialogOpen] = useState(false);
   const [selectedRouteId, setSelectedRouteId] = useState<number>();
@@ -64,11 +59,6 @@ export const RoutesTable = ({ configuredRoutes }: Props) => {
     ['+order_by']: orderBy,
   };
 
-  // If the user types in a search query, API filter by the label.
-  if (query) {
-    filter['label'] = { '+contains': query };
-  }
-
   /**
    * If configuredRoutes is passed, it filters the configured routes form API
    *  Otherwise, it fetches routes without filter in the routes table.
@@ -83,7 +73,7 @@ export const RoutesTable = ({ configuredRoutes }: Props) => {
       page: pagination.page,
       page_size: pagination.pageSize,
     },
-    filter
+    { ...filter, ...additionalFilter }
   );
 
   const selectedRoute = routes?.data?.find(
@@ -128,27 +118,23 @@ export const RoutesTable = ({ configuredRoutes }: Props) => {
     return routes?.data?.map((route) => {
       const OuterTableCells = (
         <>
-          <Hidden smDown>
+          <Hidden mdDown>
             <TableCell>{route.rules.length}</TableCell>
           </Hidden>
           <Hidden smDown>
-            <TableCell>{route.protocol.toLocaleUpperCase()}</TableCell>{' '}
+            <TableCell>{route.protocol.toLocaleUpperCase()}</TableCell>
+          </Hidden>
+          <Hidden xsDown>
+            <TableCell>{route.id}</TableCell>
           </Hidden>
           <TableCell actionCell>
-            {/**
-             * TODO: AGLB: The Add Rule behavior should be implemented in future AGLB tickets.
-             */}
             <InlineMenuAction
               actionText="Add Rule"
               onClick={() => onAddRule(route)}
             />
-            {/**
-             * TODO: AGLB: The Action menu behavior should be implemented in future AGLB tickets.
-             */}
             <ActionMenu
               actionsList={[
                 { onClick: () => onEditRoute(route), title: 'Edit' },
-                { onClick: () => null, title: 'Clone Route' },
                 { onClick: () => onDeleteRoute(route), title: 'Delete' },
               ]}
               ariaLabel={`Action Menu for Route ${route.label}`}
@@ -185,7 +171,7 @@ export const RoutesTable = ({ configuredRoutes }: Props) => {
       >
         Route Label
       </TableSortCell>
-      <Hidden smDown>
+      <Hidden mdDown>
         <TableCell>Rules</TableCell>
       </Hidden>
       <Hidden smDown>
@@ -198,56 +184,22 @@ export const RoutesTable = ({ configuredRoutes }: Props) => {
           Protocol
         </TableSortCell>
       </Hidden>
+      <Hidden xsDown>
+        <TableSortCell
+          active={orderBy === 'id'}
+          direction={order}
+          handleClick={handleOrderChange}
+          label="id"
+        >
+          ID
+        </TableSortCell>
+      </Hidden>
       <TableCell></TableCell>
     </TableRow>
   );
 
   return (
     <>
-      <Stack
-        alignItems="flex-end"
-        direction="row"
-        flexWrap="wrap"
-        gap={2}
-        justifyContent="space-between"
-        mb={2}
-        mt={1.5}
-      >
-        <TextField
-          InputProps={{
-            endAdornment: (
-              <InputAdornment position="end">
-                <IconButton
-                  aria-label="Clear"
-                  onClick={() => setQuery('')}
-                  size="small"
-                  sx={{ padding: 'unset' }}
-                >
-                  <CloseIcon
-                    color="inherit"
-                    sx={{ color: '#aaa !important' }}
-                  />
-                </IconButton>
-              </InputAdornment>
-            ),
-          }}
-          hideLabel
-          label="Filter"
-          onChange={(e) => setQuery(e.target.value)}
-          placeholder="Filter"
-          style={{ minWidth: '320px' }}
-          value={query}
-        />
-        {/**
-         * TODO: AGLB: The Create Route behavior should be implemented in future AGLB tickets.
-         */}
-        <Button
-          buttonType="primary"
-          onClick={() => setIsCreateDrawerOpen(true)}
-        >
-          Create Route
-        </Button>
-      </Stack>
       <CollapsibleTable
         TableItems={getTableItems()}
         TableRowEmpty={<TableRowEmpty colSpan={5} message={'No Routes'} />}
@@ -276,11 +228,6 @@ export const RoutesTable = ({ configuredRoutes }: Props) => {
         open={isEditDrawerOpen}
         route={selectedRoute}
       />
-      <CreateRouteDrawer
-        loadbalancerId={Number(loadbalancerId)}
-        onClose={() => setIsCreateDrawerOpen(false)}
-        open={isCreateDrawerOpen}
-      />
       <DeleteRouteDialog
         loadbalancerId={Number(loadbalancerId)}
         onClose={() => setIsDeleteDialogOpen(false)}
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/utils.ts b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/utils.ts
index 86c764b9f80..649617bdeba 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/utils.ts
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/utils.ts
@@ -1,7 +1,14 @@
 /* eslint-disable perfectionist/sort-objects */
-import type { MatchField, Rule, RulePayload } from '@linode/api-v4';
 import { capitalize } from 'src/utilities/capitalize';
 
+import type {
+  Configuration,
+  MatchField,
+  Route,
+  Rule,
+  RulePayload,
+} from '@linode/api-v4';
+
 export const matchFieldMap: Record<MatchField, string> = {
   header: 'HTTP Header',
   host: 'Host',
@@ -73,3 +80,18 @@ export const timeUnitOptions = Object.keys(timeUnitFactorMap).map(
 );
 
 export const defaultTTL = timeUnitFactorMap['hour'] * 8;
+
+/**
+ * Routes can be `http` or `tcp`.
+ * Configurations can be `http`, `https`, or `tcp`.
+ *
+ * Use this function to get the corresponding *route* protocol from a *configuration*
+ */
+export function getRouteProtocolFromConfiguration(
+  configuration: Configuration
+): Route['protocol'] {
+  if (configuration.protocol === 'http' || configuration.protocol === 'https') {
+    return 'http';
+  }
+  return 'tcp';
+}
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Region.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Region.tsx
index c4b3f924317..4fe59db5990 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Region.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Settings/Region.tsx
@@ -1,23 +1,24 @@
-import { Stack } from 'src/components/Stack';
 import { useFormik } from 'formik';
 import React from 'react';
 
-import { Box } from 'src/components/Box';
-import { Button } from 'src/components/Button/Button';
+import { BetaChip } from 'src/components/BetaChip/BetaChip';
 import { Paper } from 'src/components/Paper';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 import {
   useLoadBalancerMutation,
   useLoadBalancerQuery,
 } from 'src/queries/aglb/loadbalancers';
 
+import { LoadBalancerRegions } from '../LoadBalancerRegions';
+
 interface Props {
   loadbalancerId: number;
 }
 
 export const Region = ({ loadbalancerId }: Props) => {
   const { data: loadbalancer } = useLoadBalancerQuery(loadbalancerId);
-  const { isLoading, mutateAsync } = useLoadBalancerMutation(loadbalancerId);
+  const { mutateAsync } = useLoadBalancerMutation(loadbalancerId);
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -34,12 +35,11 @@ export const Region = ({ loadbalancerId }: Props) => {
       <form onSubmit={formik.handleSubmit}>
         <Stack spacing={1}>
           <Typography variant="h2">Regions</Typography>
-          <Typography>Select regions for your Load Balancer.</Typography>
-          <Box>
-            <Button buttonType="primary" loading={isLoading} type="submit">
-              Save
-            </Button>
-          </Box>
+          <Typography>
+            <BetaChip sx={{ marginLeft: '0 !important' }} /> Load Balancer
+            regions can not be changed during beta.
+          </Typography>
+          <LoadBalancerRegions />
         </Stack>
       </form>
     </Paper>
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx
index 22266f51b3a..0952097ee58 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerLanding.tsx
@@ -26,7 +26,7 @@ import { LoadBalancerRow } from './LoadBalancerRow';
 const LOADBALANCER_CREATE_ROUTE = 'loadbalancers/create';
 const preferenceKey = 'loadbalancers';
 
-const LoadBalancerLanding = () => {
+export const LoadBalancerLanding = () => {
   const history = useHistory();
 
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false);
@@ -156,5 +156,3 @@ const LoadBalancerLanding = () => {
     </>
   );
 };
-
-export default LoadBalancerLanding;
diff --git a/packages/manager/src/features/LoadBalancers/index.tsx b/packages/manager/src/features/LoadBalancers/index.tsx
index 0647bd3f279..fa417a7dbef 100644
--- a/packages/manager/src/features/LoadBalancers/index.tsx
+++ b/packages/manager/src/features/LoadBalancers/index.tsx
@@ -5,22 +5,31 @@ import { ProductInformationBanner } from 'src/components/ProductInformationBanne
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 import { useFlags } from 'src/hooks/useFlags';
 
-const LoadBalancerLanding = React.lazy(
-  () => import('./LoadBalancerLanding/LoadBalancerLanding')
+const LoadBalancerLanding = React.lazy(() =>
+  import('./LoadBalancerLanding/LoadBalancerLanding').then((module) => ({
+    default: module.LoadBalancerLanding,
+  }))
 );
-const LoadBalancerDetail = React.lazy(
-  () => import('./LoadBalancerDetail/LoadBalancerDetail')
+
+const LoadBalancerDetail = React.lazy(() =>
+  import('./LoadBalancerDetail/LoadBalancerDetail').then((module) => ({
+    default: module.LoadBalancerDetail,
+  }))
 );
-const LoadBalancerCreate = React.lazy(
-  () => import('./LoadBalancerCreate/LoadBalancerCreate')
+
+const LoadBalancerCreate = React.lazy(() =>
+  import('./LoadBalancerCreate/LoadBalancerCreate').then((module) => ({
+    default: module.LoadBalancerCreate,
+  }))
 );
+
 const LoadBalancerBasicCreate = React.lazy(() =>
   import('./LoadBalancerCreate/LoadBalancerBasicCreate').then((module) => ({
     default: module.LoadBalancerBasicCreate,
   }))
 );
 
-const LoadBalancer = () => {
+export const LoadBalancers = () => {
   const flags = useFlags();
   return (
     <React.Suspense fallback={<SuspenseLoader />}>
@@ -46,5 +55,3 @@ const LoadBalancer = () => {
     </React.Suspense>
   );
 };
-
-export default LoadBalancer;
diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts
index 0d761530641..08797753526 100644
--- a/packages/manager/src/mocks/serverHandlers.ts
+++ b/packages/manager/src/mocks/serverHandlers.ts
@@ -377,14 +377,7 @@ const aglb = [
   }),
   // Service Targets
   rest.get('*/v4beta/aglb/:id/service-targets', (req, res, ctx) => {
-    const service_target = serviceTargetFactory.build({
-      ca_certificate: 'certificate-1',
-      load_balancing_policy: 'random',
-    });
-    const service_targets = serviceTargetFactory.buildList(3);
-    return res(
-      ctx.json(makeResourcePage([service_target, ...service_targets]))
-    );
+    return res(ctx.json(makeResourcePage(serviceTargetFactory.buildList(5))));
   }),
   rest.post('*/v4beta/aglb/:id/service-targets', (req, res, ctx) => {
     return res(ctx.json(createServiceTargetFactory.build()));
diff --git a/packages/manager/src/queries/aglb/configurations.ts b/packages/manager/src/queries/aglb/configurations.ts
index fa397ad3024..449c816c747 100644
--- a/packages/manager/src/queries/aglb/configurations.ts
+++ b/packages/manager/src/queries/aglb/configurations.ts
@@ -18,6 +18,7 @@ import type {
   Filter,
   Params,
   ResourcePage,
+  UpdateConfigurationPayload,
 } from '@linode/api-v4';
 
 export const useLoadBalancerConfigurationsQuery = (
@@ -59,7 +60,7 @@ export const useLoadBalancerConfigurationMutation = (
 ) => {
   const queryClient = useQueryClient();
 
-  return useMutation<Configuration, APIError[], Partial<Configuration>>(
+  return useMutation<Configuration, APIError[], UpdateConfigurationPayload>(
     (data) =>
       updateLoadbalancerConfiguration(loadbalancerId, configurationId, data),
     {
diff --git a/packages/manager/src/queries/aglb/routes.ts b/packages/manager/src/queries/aglb/routes.ts
index e710865ba36..3de3ca2c821 100644
--- a/packages/manager/src/queries/aglb/routes.ts
+++ b/packages/manager/src/queries/aglb/routes.ts
@@ -5,7 +5,12 @@ import {
   getLoadbalancerRoutes,
   updateLoadbalancerRoute,
 } from '@linode/api-v4';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from 'react-query';
 
 import { updateInPaginatedStore } from '../base';
 import { QUERY_KEY } from './loadbalancers';
@@ -93,3 +98,22 @@ export const useLoadBalancerRouteDeleteMutation = (
     }
   );
 };
+
+export const useLoadBalancerRoutesInfiniteQuery = (
+  id: number,
+  filter: Filter = {}
+) => {
+  return useInfiniteQuery<ResourcePage<Route>, APIError[]>(
+    [QUERY_KEY, 'loadbalancer', id, 'certificates', 'infinite', filter],
+    ({ pageParam }) =>
+      getLoadbalancerRoutes(id, { page: pageParam, page_size: 25 }, filter),
+    {
+      getNextPageParam: ({ page, pages }) => {
+        if (page === pages) {
+          return undefined;
+        }
+        return page + 1;
+      },
+    }
+  );
+};
diff --git a/packages/validation/.changeset/pr-9853-upcoming-features-1698871976111.md b/packages/validation/.changeset/pr-9853-upcoming-features-1698871976111.md
new file mode 100644
index 00000000000..fd32affac19
--- /dev/null
+++ b/packages/validation/.changeset/pr-9853-upcoming-features-1698871976111.md
@@ -0,0 +1,5 @@
+---
+"@linode/validation": Upcoming Features
+---
+
+Add `UpdateConfigurationSchema` for AGLB ([#9853](https://github.com/linode/manager/pull/9853))
diff --git a/packages/validation/src/loadbalancers.schema.ts b/packages/validation/src/loadbalancers.schema.ts
index 332d8cd057a..5a52f616115 100644
--- a/packages/validation/src/loadbalancers.schema.ts
+++ b/packages/validation/src/loadbalancers.schema.ts
@@ -26,7 +26,7 @@ export const UpdateCertificateSchema = object().shape(
   [['certificate', 'key']]
 );
 
-export const certificateConfigSchema = object({
+export const CertificateConfigSchema = object({
   certificates: array(
     object({
       id: number()
@@ -154,6 +154,19 @@ export const UpdateRouteSchema = object({
   }),
 });
 
+export const UpdateConfigurationSchema = object({
+  label: string().min(1),
+  port: number(),
+  protocol: string().oneOf(['tcp', 'http', 'https']),
+  certificates: array().of(
+    object({
+      hostname: string().required(),
+      id: number().required(),
+    })
+  ),
+  routes: array().of(number()),
+});
+
 // Endpoint Schema
 const CreateLoadBalancerEndpointSchema = object({
   ip: string().test(
@@ -208,7 +221,7 @@ export const ConfigurationSchema = object({
   protocol: string().oneOf(['tcp', 'http', 'https']).required(),
   certificates: string().when('protocol', {
     is: (val: string) => val !== 'http' && val !== 'tcp',
-    then: array().of(certificateConfigSchema).required(),
+    then: array().of(CertificateConfigSchema).required(),
     otherwise: array().strip(),
   }),
   routes: string().when('protocol', {
@@ -233,6 +246,7 @@ export const ConfigurationSchema = object({
       .required(),
   }),
 });
+
 export const CreateLoadBalancerSchema = object({
   label: string()
     .matches(

From 318c6a6ad851325e15dd1118c90593f23cc34a2e Mon Sep 17 00:00:00 2001
From: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>
Date: Fri, 3 Nov 2023 10:02:43 -0400
Subject: [PATCH 23/43] test: [M3-7367] - Improve Cypress Rescue & Rebuild Test
 Flake (#9867)

* Mock user preferences requests when testing Linode landing page summary view

* Refactor rebuild tests, improve flakiness by improving navigation flow

* Use new factory data for each request to prevent label conflicts

* Rename Linode utils

* Use mocks for rescue error test, wait for Linode to boot using UI rather than polling
---
 .../.changeset/pr-9867-tests-1698944917115.md |   5 +
 .../e2e/core/linodes/linode-config.spec.ts    |   2 +-
 .../e2e/core/linodes/rebuild-linode.spec.ts   | 361 ++++++++++++------
 .../e2e/core/linodes/rescue-linode.spec.ts    |  82 ++--
 .../smoke-linode-landing-table.spec.ts        |  22 +-
 .../cypress/support/intercepts/linodes.ts     |  59 +++
 .../cypress/support/intercepts/profile.ts     |  13 +
 packages/manager/cypress/support/ui/select.ts |  13 +
 .../util/{linode-utils.ts => linodes.ts}      |  17 +-
 9 files changed, 415 insertions(+), 159 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9867-tests-1698944917115.md
 rename packages/manager/cypress/support/util/{linode-utils.ts => linodes.ts} (86%)

diff --git a/packages/manager/.changeset/pr-9867-tests-1698944917115.md b/packages/manager/.changeset/pr-9867-tests-1698944917115.md
new file mode 100644
index 00000000000..89ad48a6f42
--- /dev/null
+++ b/packages/manager/.changeset/pr-9867-tests-1698944917115.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Improve Cypress rescue and rebuild test stability ([#9867](https://github.com/linode/manager/pull/9867))
diff --git a/packages/manager/cypress/e2e/core/linodes/linode-config.spec.ts b/packages/manager/cypress/e2e/core/linodes/linode-config.spec.ts
index dcb632df4b2..95933ad1bfa 100644
--- a/packages/manager/cypress/e2e/core/linodes/linode-config.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/linode-config.spec.ts
@@ -12,7 +12,7 @@ import {
 import {
   createLinodeAndGetConfig,
   createAndBootLinode,
-} from 'support/util/linode-utils';
+} from 'support/util/linodes';
 
 import type { Config, Linode } from '@linode/api-v4';
 
diff --git a/packages/manager/cypress/e2e/core/linodes/rebuild-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/rebuild-linode.spec.ts
index e3e36622146..e2f318e4735 100644
--- a/packages/manager/cypress/e2e/core/linodes/rebuild-linode.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/rebuild-linode.spec.ts
@@ -1,17 +1,29 @@
-import { createLinode } from 'support/api/linodes';
-import { containsClick, getClick } from 'support/helpers';
-import { apiMatcher } from 'support/util/intercepts';
+import { createLinode, CreateLinodeRequest, Linode } from '@linode/api-v4';
 import { ui } from 'support/ui';
 import { randomString, randomLabel } from 'support/util/random';
 import { authenticate } from 'support/api/authentication';
 import { createStackScript } from '@linode/api-v4/lib';
 import { interceptGetStackScripts } from 'support/intercepts/stackscripts';
-import { createLinodeRequestFactory } from '@src/factories';
+import { createLinodeRequestFactory, linodeFactory } from '@src/factories';
 import { cleanUp } from 'support/util/cleanup';
+import { chooseRegion } from 'support/util/regions';
+import {
+  interceptRebuildLinode,
+  mockGetLinodeDetails,
+  mockRebuildLinodeError,
+} from 'support/intercepts/linodes';
 
+/**
+ * Creates a Linode and StackScript.
+ *
+ * @param stackScriptRequestPayload - StackScript create request payload.
+ * @param linodeRequestPayload - Linode create request payload.
+ *
+ * @returns Promise that resolves when Linode and StackScript are created.
+ */
 const createStackScriptAndLinode = async (
-  stackScriptRequestPayload,
-  linodeRequestPayload
+  stackScriptRequestPayload: any,
+  linodeRequestPayload: CreateLinodeRequest
 ) => {
   return Promise.all([
     createStackScript(stackScriptRequestPayload),
@@ -19,102 +31,196 @@ const createStackScriptAndLinode = async (
   ]);
 };
 
-const checkPasswordComplexity = (rootPassword: string) => {
-  const weakPassword = '123';
-  const fairPassword = 'Akamai123';
+/**
+ * Opens the Rebuild Linode dialog by selecting it from the Linode's action menu.
+ *
+ * Assumes that the user has first navigated to the Linode's details page.
+ *
+ * @param linodeLabel - Label of the Linode being rebuilt.
+ */
+const openRebuildDialog = (linodeLabel: string) => {
+  ui.actionMenu
+    .findByTitle(`Action menu for Linode ${linodeLabel}`)
+    .should('be.visible')
+    .click();
 
-  // weak or fair root password cannot rebuild the linode
-  cy.get('[id="root-password"]').clear().type(weakPassword);
-  ui.button.findByTitle('Rebuild Linode').should('be.enabled').click();
-  cy.contains('Password does not meet complexity requirements.');
+  ui.actionMenuItem.findByTitle('Rebuild').should('be.visible').click();
+};
 
-  cy.get('[id="root-password"]').clear().type(fairPassword);
-  ui.button.findByTitle('Rebuild Linode').should('be.enabled').click();
-  cy.contains('Password does not meet complexity requirements.');
+/**
+ * Finds the Rebuild Linode dialog.
+ *
+ * @param linodeLabel - Label of the Linode being rebuilt.
+ *
+ * @returns Cypress chainable.
+ */
+const findRebuildDialog = (linodeLabel: string) => {
+  return ui.dialog
+    .findByTitle(`Rebuild Linode ${linodeLabel}`)
+    .should('be.visible');
+};
 
-  // Only strong password is allowed to rebuild the linode
-  cy.get('[id="root-password"]').type(rootPassword);
-  ui.button.findByTitle('Rebuild Linode').should('be.enabled').click();
+/**
+ * Enters a password into the "Root Password" field and confirms it is rated a given strength.
+ *
+ * @param desiredPassword - Password whose strength should be tested.
+ * @param passwordStrength - Expected strength for `desiredPassword`.
+ */
+const assertPasswordComplexity = (
+  desiredPassword: string,
+  passwordStrength: 'Weak' | 'Fair' | 'Good'
+) => {
+  cy.findByLabelText('Root Password')
+    .should('be.visible')
+    .clear()
+    .type(desiredPassword);
+
+  cy.contains(`Strength: ${passwordStrength}`).should('be.visible');
 };
 
+/**
+ * Submits rebuild dialog.
+ */
+const submitRebuild = () => {
+  ui.button
+    .findByTitle('Rebuild Linode')
+    .scrollIntoView()
+    .should('be.visible')
+    .should('be.enabled')
+    .click();
+};
+
+// Error message that is displayed when desired password is not strong enough.
+const passwordComplexityError =
+  'Password does not meet complexity requirements.';
+
 authenticate();
 describe('rebuild linode', () => {
   const image = 'Alpine 3.18';
   const rootPassword = randomString(16);
 
   before(() => {
-    cleanUp(['linodes', 'stackscripts']);
+    cleanUp(['lke-clusters', 'linodes', 'stackscripts', 'images']);
   });
 
+  /*
+   * - Confirms that Linode can be rebuilt using an image.
+   * - Confirms that password complexity
+   */
   it('rebuilds a linode from Image', () => {
-    createLinode().then((linode) => {
-      cy.visitWithLogin(`/linodes`);
-      cy.get(`[data-qa-linode="${linode.label}"]`)
-        .should('be.visible')
-        .within(() => {
-          cy.findByText('Running');
-        });
+    const weakPassword = 'abc123';
+    const fairPassword = 'Akamai123';
 
-      cy.intercept(
-        'POST',
-        apiMatcher(`linode/instances/${linode.id}/rebuild`)
-      ).as('linodeRebuild');
-      cy.visitWithLogin(`/linodes/${linode.id}?rebuild=true`);
-      cy.get('[data-qa-enhanced-select="From Image"]').within(() => {
-        containsClick('From Image').type('From Image{enter}');
-      });
-      cy.get('[data-qa-enhanced-select="Choose an image"]').within(() => {
-        containsClick('Choose an image').type(`${image}{enter}`);
-      });
-      cy.get('[id="linode-label"]').type(linode.label);
+    const linodeCreatePayload = createLinodeRequestFactory.build({
+      label: randomLabel(),
+      region: chooseRegion().id,
+    });
 
-      checkPasswordComplexity(rootPassword);
+    cy.defer(createLinode(linodeCreatePayload), 'creating Linode').then(
+      (linode: Linode) => {
+        interceptRebuildLinode(linode.id).as('linodeRebuild');
 
-      cy.wait('@linodeRebuild');
-      cy.contains('REBUILDING').should('be.visible');
-    });
+        cy.visitWithLogin(`/linodes/${linode.id}`);
+        cy.findByText('RUNNING').should('be.visible');
+
+        openRebuildDialog(linode.label);
+        findRebuildDialog(linode.label).within(() => {
+          // "From Image" should be selected by default; no need to change the value.
+          ui.select.findByText('From Image').should('be.visible');
+
+          ui.select
+            .findByText('Choose an image')
+            .should('be.visible')
+            .click()
+            .type(`${image}{enter}`);
+
+          // Type to confirm.
+          cy.findByLabelText('Linode Label').type(linode.label);
+
+          // checkPasswordComplexity(rootPassword);
+          assertPasswordComplexity(weakPassword, 'Weak');
+          submitRebuild();
+          cy.findByText(passwordComplexityError).should('be.visible');
+
+          assertPasswordComplexity(fairPassword, 'Fair');
+          submitRebuild();
+          cy.findByText(passwordComplexityError).should('be.visible');
+
+          assertPasswordComplexity(rootPassword, 'Good');
+          submitRebuild();
+          cy.findByText(passwordComplexityError).should('not.exist');
+        });
+
+        cy.wait('@linodeRebuild');
+        cy.contains('REBUILDING').should('be.visible');
+      }
+    );
   });
 
+  /*
+   * - Confirms that a Linode can be rebuilt using a Community StackScript.
+   */
   it('rebuilds a linode from Community StackScript', () => {
     const stackScriptId = '443929';
     const stackScriptName = 'OpenLiteSpeed-WordPress';
     const image = 'AlmaLinux 9';
 
-    createLinode().then((linode) => {
-      cy.visitWithLogin(`/linodes`);
-      cy.get(`[data-qa-linode="${linode.label}"]`)
-        .should('be.visible')
-        .within(() => {
-          cy.findByText('Running');
-        });
+    const linodeCreatePayload = createLinodeRequestFactory.build({
+      label: randomLabel(),
+      region: chooseRegion().id,
+    });
 
-      cy.intercept(
-        'POST',
-        apiMatcher(`linode/instances/${linode.id}/rebuild`)
-      ).as('linodeRebuild');
-      cy.visitWithLogin(`/linodes/${linode.id}?rebuild=true`);
-      interceptGetStackScripts().as('getStackScripts');
-      cy.get('[data-qa-enhanced-select="From Image"]').within(() => {
-        containsClick('From Image').type('From Community StackScript{enter}');
-      });
-      cy.wait('@getStackScripts');
-      // Search the corresponding community stack script
-      cy.get('[id="search-by-label,-username,-or-description"]')
-        .click()
-        .type(`${stackScriptName}{enter}`);
-      getClick(`[id="${stackScriptId}"][type="radio"]`);
-      cy.get('[data-qa-enhanced-select="Choose an image"]').within(() => {
-        containsClick('Choose an image').type(`${image}{enter}`);
-      });
-      cy.get('[id="linode-label"]').type(linode.label);
+    cy.defer(createLinode(linodeCreatePayload), 'creating Linode').then(
+      (linode: Linode) => {
+        interceptRebuildLinode(linode.id).as('linodeRebuild');
+        interceptGetStackScripts().as('getStackScripts');
+        cy.visitWithLogin(`/linodes/${linode.id}`);
+        cy.findByText('RUNNING').should('be.visible');
 
-      checkPasswordComplexity(rootPassword);
+        openRebuildDialog(linode.label);
+        findRebuildDialog(linode.label).within(() => {
+          ui.select.findByText('From Image').click();
 
-      cy.wait('@linodeRebuild');
-      cy.contains('REBUILDING').should('be.visible');
-    });
+          ui.select
+            .findItemByText('From Community StackScript')
+            .should('be.visible')
+            .click();
+
+          cy.wait('@getStackScripts');
+          cy.findByLabelText('Search by Label, Username, or Description')
+            .should('be.visible')
+            .type(`${stackScriptName}`);
+
+          cy.wait('@getStackScripts');
+          cy.findByLabelText('List of StackScripts').within(() => {
+            cy.get(`[id="${stackScriptId}"][type="radio"]`).click();
+          });
+
+          ui.select
+            .findByText('Choose an image')
+            .scrollIntoView()
+            .should('be.visible')
+            .click();
+
+          ui.select.findItemByText(image).should('be.visible').click();
+
+          cy.findByLabelText('Linode Label')
+            .should('be.visible')
+            .type(linode.label);
+
+          assertPasswordComplexity(rootPassword, 'Good');
+          submitRebuild();
+        });
+
+        cy.wait('@linodeRebuild');
+        cy.contains('REBUILDING').should('be.visible');
+      }
+    );
   });
 
+  /*
+   * - Confirms that a Linode can be rebuilt using an Account StackScript.
+   */
   it('rebuilds a linode from Account StackScript', () => {
     const image = 'Alpine';
     const region = 'us-east';
@@ -145,57 +251,84 @@ describe('rebuild linode', () => {
     cy.defer(
       createStackScriptAndLinode(stackScriptRequest, linodeRequest),
       'creating stackScript and linode'
-    ).then(([stackScript, linodeBody]) => {
-      const linode = linodeBody.body;
-      cy.visitWithLogin(`/linodes`);
-      cy.get(`[data-qa-linode="${linode.label}"]`)
-        .should('be.visible')
-        .within(() => {
-          cy.findByText('Running');
+    ).then(([stackScript, linode]) => {
+      interceptRebuildLinode(linode.id).as('linodeRebuild');
+      cy.visitWithLogin(`/linodes/${linode.id}`);
+      cy.findByText('RUNNING').should('be.visible');
+
+      openRebuildDialog(linode.label);
+      findRebuildDialog(linode.label).within(() => {
+        ui.select.findByText('From Image').should('be.visible').click();
+
+        ui.select
+          .findItemByText('From Account StackScript')
+          .should('be.visible')
+          .click();
+
+        cy.findByLabelText('Search by Label, Username, or Description')
+          .should('be.visible')
+          .type(`${stackScript.label}`);
+
+        cy.findByLabelText('List of StackScripts').within(() => {
+          cy.get(`[id="${stackScript.id}"][type="radio"]`).click();
         });
 
-      cy.intercept(
-        'POST',
-        apiMatcher(`linode/instances/${linode.id}/rebuild`)
-      ).as('linodeRebuild');
-      cy.visitWithLogin(`/linodes/${linode.id}?rebuild=true`);
-      cy.get('[data-qa-enhanced-select="From Image"]').within(() => {
-        containsClick('From Image').type('From Account StackScript{enter}');
-      });
-      cy.get('[id="search-by-label,-username,-or-description"]')
-        .click()
-        .type(`${stackScript.label}{enter}`);
-      getClick(`[id="${stackScript.id}"][type="radio"]`);
-      cy.get('[data-qa-enhanced-select="Choose an image"]').within(() => {
-        containsClick('Choose an image').type(`${image}{enter}`);
-      });
-      cy.get('[id="linode-label"]').type(linode.label);
+        ui.select
+          .findByText('Choose an image')
+          .scrollIntoView()
+          .should('be.visible')
+          .click();
+
+        ui.select.findItemByText(image).should('be.visible').click();
 
-      checkPasswordComplexity(rootPassword);
+        cy.findByLabelText('Linode Label')
+          .should('be.visible')
+          .type(linode.label);
+
+        assertPasswordComplexity(rootPassword, 'Good');
+        submitRebuild();
+      });
 
       cy.wait('@linodeRebuild');
       cy.contains('REBUILDING').should('be.visible');
     });
   });
 
+  /*
+   * - Confirms UI error flow when attempting to rebuild a Linode that is provisioning.
+   * - Confirms that API error message is displayed in the rebuild dialog.
+   */
   it('cannot rebuild a provisioning linode', () => {
-    createLinode().then((linode) => {
-      cy.intercept(
-        'POST',
-        apiMatcher(`linode/instances/${linode.id}/rebuild`)
-      ).as('linodeRebuild');
-      cy.visitWithLogin(`/linodes/${linode.id}?rebuild=true`);
-      cy.get('[data-qa-enhanced-select="From Image"]').within(() => {
-        containsClick('From Image').type('From Image{enter}');
-      });
-      cy.get('[data-qa-enhanced-select="Choose an image"]').within(() => {
-        containsClick('Choose an image').type(`${image}{enter}`);
-      });
-      cy.get('[id="linode-label"]').type(linode.label);
-      cy.get('[id="root-password"]').type(rootPassword);
-      ui.button.findByTitle('Rebuild Linode').should('be.enabled').click();
-      cy.wait('@linodeRebuild');
-      cy.contains('Linode busy.');
+    const mockLinode = linodeFactory.build({
+      label: randomLabel(),
+      region: chooseRegion().id,
+      status: 'provisioning',
+    });
+
+    const mockErrorMessage = 'Linode busy.';
+
+    mockGetLinodeDetails(mockLinode.id, mockLinode).as('getLinode');
+    mockRebuildLinodeError(mockLinode.id, mockErrorMessage).as('rebuildLinode');
+
+    cy.visitWithLogin(`/linodes/${mockLinode.id}?rebuild=true`);
+    findRebuildDialog(mockLinode.label).within(() => {
+      ui.select.findByText('From Image').should('be.visible');
+      ui.select
+        .findByText('Choose an image')
+        .should('be.visible')
+        .click()
+        .type(`${image}{enter}`);
+
+      assertPasswordComplexity(rootPassword, 'Good');
+
+      cy.findByLabelText('Linode Label')
+        .should('be.visible')
+        .click()
+        .type(mockLinode.label);
+
+      submitRebuild();
+      cy.wait('@rebuildLinode');
+      cy.findByText(mockErrorMessage);
     });
   });
 });
diff --git a/packages/manager/cypress/e2e/core/linodes/rescue-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/rescue-linode.spec.ts
index 977299cb285..e5416609233 100644
--- a/packages/manager/cypress/e2e/core/linodes/rescue-linode.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/rescue-linode.spec.ts
@@ -1,14 +1,17 @@
-import { createLinode, Linode } from '@linode/api-v4';
-import { createLinodeRequestFactory } from '@src/factories';
+import type { Linode } from '@linode/api-v4';
+import { createLinode } from '@linode/api-v4';
+import { createLinodeRequestFactory, linodeFactory } from '@src/factories';
 import { authenticate } from 'support/api/authentication';
 import {
   interceptGetLinodeDetails,
   interceptRebootLinodeIntoRescueMode,
+  mockGetLinodeDetails,
+  mockRebootLinodeIntoRescueModeError,
 } from 'support/intercepts/linodes';
 import { ui } from 'support/ui';
+import { cleanUp } from 'support/util/cleanup';
 import { randomLabel } from 'support/util/random';
 import { chooseRegion } from 'support/util/regions';
-import { createAndBootLinode } from '../../../support/util/linode-utils';
 
 // Submits the Rescue Linode dialog, initiating reboot into rescue mode.
 const rebootInRescueMode = () => {
@@ -21,6 +24,10 @@ const rebootInRescueMode = () => {
 
 authenticate();
 describe('Rescue Linodes', () => {
+  before(() => {
+    cleanUp(['linodes', 'lke-clusters']);
+  });
+
   /*
    * - Creates a Linode, waits for it to boot, and reboots it into rescue mode.
    * - Confirms that rescue mode API requests succeed.
@@ -28,18 +35,33 @@ describe('Rescue Linodes', () => {
    * - Confirms that toast appears confirming successful reboot into rescue mode.
    */
   it('Can reboot a Linode into rescue mode', () => {
-    cy.defer(createAndBootLinode(), 'creating and booting Linode').then(
+    const linodePayload = createLinodeRequestFactory.build({
+      label: randomLabel(),
+      region: chooseRegion().id,
+    });
+
+    cy.defer(createLinode(linodePayload), 'creating Linode').then(
       (linode: Linode) => {
-        // mock 200 response
         interceptGetLinodeDetails(linode.id).as('getLinode');
         interceptRebootLinodeIntoRescueMode(linode.id).as(
           'rebootLinodeRescueMode'
         );
 
-        const rescueUrl = `/linodes/${linode.id}/?rescue=true`;
+        const rescueUrl = `/linodes/${linode.id}`;
         cy.visitWithLogin(rescueUrl);
         cy.wait('@getLinode');
 
+        // Wait for Linode to boot.
+        cy.findByText('RUNNING').should('be.visible');
+
+        // Open rescue dialog using action menu..
+        ui.actionMenu
+          .findByTitle(`Action menu for Linode ${linode.label}`)
+          .should('be.visible')
+          .click();
+
+        ui.actionMenuItem.findByTitle('Rescue').should('be.visible').click();
+
         ui.dialog
           .findByTitle(`Rescue Linode ${linode.label}`)
           .should('be.visible')
@@ -47,7 +69,7 @@ describe('Rescue Linodes', () => {
             rebootInRescueMode();
           });
 
-        // Check mocked response and make sure UI responded correctly.
+        // Check intercepted response and make sure UI responded correctly.
         cy.wait('@rebootLinodeRescueMode')
           .its('response.statusCode')
           .should('eq', 200);
@@ -59,41 +81,29 @@ describe('Rescue Linodes', () => {
   });
 
   /*
-   * - Creates a Linode and immediately attempts to reboot it into rescue mode.
-   * - Confirms that an error message appears in the UI explaining that the Linode is busy.
+   * - Confirms UI error flow when user rescues a Linode that is provisioning.
+   * - Confirms that API error message is displayed in the rescue dialog.
    */
   it('Cannot reboot a provisioning Linode into rescue mode', () => {
-    const linodeRequest = createLinodeRequestFactory.build({
+    const mockLinode = linodeFactory.build({
       label: randomLabel(),
       region: chooseRegion().id,
+      status: 'provisioning',
     });
 
-    cy.defer(createLinode(linodeRequest), 'creating Linode').then(
-      (linode: Linode) => {
-        interceptGetLinodeDetails(linode.id).as('getLinode');
-        interceptRebootLinodeIntoRescueMode(linode.id).as(
-          'rebootLinodeRescueMode'
-        );
-
-        const rescueUrl = `/linodes/${linode.id}?rescue=true`;
-
-        cy.visitWithLogin(rescueUrl);
-        cy.wait('@getLinode');
-
-        ui.dialog
-          .findByTitle(`Rescue Linode ${linode.label}`)
-          .should('be.visible')
-          .within(() => {
-            rebootInRescueMode();
-
-            // Wait for API request and confirm that error message appears in dialog.
-            cy.wait('@rebootLinodeRescueMode')
-              .its('response.statusCode')
-              .should('eq', 400);
-
-            cy.findByText('Linode busy.').should('be.visible');
-          });
-      }
+    mockGetLinodeDetails(mockLinode.id, mockLinode).as('getLinode');
+    mockRebootLinodeIntoRescueModeError(mockLinode.id, 'Linode busy.').as(
+      'rescueLinode'
     );
+
+    cy.visitWithLogin(`/linodes/${mockLinode.id}?rescue=true`);
+    ui.dialog
+      .findByTitle(`Rescue Linode ${mockLinode.label}`)
+      .should('be.visible')
+      .within(() => {
+        rebootInRescueMode();
+        cy.wait('@rescueLinode');
+        cy.findByText('Linode busy.').should('be.visible');
+      });
   });
 });
diff --git a/packages/manager/cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts b/packages/manager/cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts
index dd46377a225..160a1a77218 100644
--- a/packages/manager/cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts
@@ -15,6 +15,11 @@ import { apiMatcher } from 'support/util/intercepts';
 import { chooseRegion, getRegionById } from 'support/util/regions';
 import { authenticate } from 'support/api/authentication';
 import { mockGetLinodes } from 'support/intercepts/linodes';
+import { userPreferencesFactory } from '@src/factories';
+import {
+  mockGetUserPreferences,
+  mockUpdateUserPreferences,
+} from 'support/intercepts/profile';
 
 const mockLinodes = new Array(5).fill(null).map(
   (_item: null, index: number): Linode => {
@@ -360,12 +365,27 @@ describe('linode landing checks', () => {
   });
 
   it('checks summary view for linode table', () => {
+    const mockPreferencesListView = userPreferencesFactory.build({
+      linodes_view_style: 'list',
+    });
+
+    const mockPreferencesSummaryView = {
+      ...mockPreferencesListView,
+      linodes_view_style: 'grid',
+    };
+
     mockGetLinodes(mockLinodes).as('getLinodes');
+    mockGetUserPreferences(mockPreferencesListView).as('getUserPreferences');
+    mockUpdateUserPreferences(mockPreferencesSummaryView).as(
+      'updateUserPreferences'
+    );
+
     cy.visitWithLogin('/linodes');
-    cy.wait('@getLinodes');
+    cy.wait(['@getLinodes', '@getUserPreferences']);
 
     // Check 'Summary View' button works as expected that can be visiable, enabled and clickable
     getVisible('[aria-label="Toggle display"]').should('be.enabled').click();
+    cy.wait('@updateUserPreferences');
 
     mockLinodes.forEach((linode) => {
       cy.findByText(linode.label)
diff --git a/packages/manager/cypress/support/intercepts/linodes.ts b/packages/manager/cypress/support/intercepts/linodes.ts
index 4a873a8333a..bdbc6440f35 100644
--- a/packages/manager/cypress/support/intercepts/linodes.ts
+++ b/packages/manager/cypress/support/intercepts/linodes.ts
@@ -7,6 +7,7 @@ import { paginateResponse } from 'support/util/paginate';
 import { makeResponse } from 'support/util/response';
 
 import type { Disk, Linode, LinodeType, Volume } from '@linode/api-v4/types';
+import { makeErrorResponse } from 'support/util/errors';
 
 /**
  * Intercepts POST request to create a Linode.
@@ -135,6 +136,43 @@ export const mockGetLinodeVolumes = (
   );
 };
 
+/**
+ * Intercepts POST request to rebuild a Linode.
+ *
+ * @param linodeId - ID of Linode for intercepted request.
+ *
+ * @returns Cypress chainable.
+ */
+export const interceptRebuildLinode = (
+  linodeId: number
+): Cypress.Chainable<null> => {
+  return cy.intercept(
+    'POST',
+    apiMatcher(`linode/instances/${linodeId}/rebuild`)
+  );
+};
+
+/**
+ * Intercepts POST request to rebuild a Linode and mocks an error response.
+ *
+ * @param linodeId - ID of Linode for intercepted request.
+ * @param errorMessage - Error message to be included in the mocked HTTP response.
+ * @param statusCode - HTTP status code for mocked error response. Default is `400`.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockRebuildLinodeError = (
+  linodeId: number,
+  errorMessage: string,
+  statusCode: number = 400
+): Cypress.Chainable<null> => {
+  return cy.intercept(
+    'POST',
+    apiMatcher(`linode/instances/${linodeId}/rebuild`),
+    makeErrorResponse(errorMessage, statusCode)
+  );
+};
+
 /**
  * Intercepts POST request to reboot a Linode.
  *
@@ -167,6 +205,27 @@ export const interceptRebootLinodeIntoRescueMode = (
   );
 };
 
+/**
+ * Intercepts POST request to reboot a Linode into rescue mode and mocks error response.
+ *
+ * @param linodeId - ID of Linode to reboot into rescue mode.
+ * @param errorMessage - Error message to be included in the mocked HTTP response.
+ * @param statusCode - HTTP status code for mocked error response. Default is `400`.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockRebootLinodeIntoRescueModeError = (
+  linodeId: number,
+  errorMessage: string,
+  statusCode: number = 400
+): Cypress.Chainable<null> => {
+  return cy.intercept(
+    'POST',
+    apiMatcher(`linode/instances/${linodeId}/rescue`),
+    makeErrorResponse(errorMessage, statusCode)
+  );
+};
+
 /**
  * Intercepts GET request to retrieve a Linode's Disks and mocks response.
  *
diff --git a/packages/manager/cypress/support/intercepts/profile.ts b/packages/manager/cypress/support/intercepts/profile.ts
index cafd8793182..6a83e58ef51 100644
--- a/packages/manager/cypress/support/intercepts/profile.ts
+++ b/packages/manager/cypress/support/intercepts/profile.ts
@@ -62,6 +62,19 @@ export const mockGetUserPreferences = (
   return cy.intercept('GET', apiMatcher('profile/preferences'), preferences);
 };
 
+/**
+ * Intercepts PUT request to update user preferences and mocks response.
+ *
+ * @param preferences - Updated user preferences with which to respond.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockUpdateUserPreferences = (
+  preferences: UserPreferences
+): Cypress.Chainable<null> => {
+  return cy.intercept('PUT', apiMatcher('profile/preferences'), preferences);
+};
+
 /**
  * Intercepts POST request to opt out of SMS verification and mocks response.
  *
diff --git a/packages/manager/cypress/support/ui/select.ts b/packages/manager/cypress/support/ui/select.ts
index 2c46f877dfe..a65be2d618c 100644
--- a/packages/manager/cypress/support/ui/select.ts
+++ b/packages/manager/cypress/support/ui/select.ts
@@ -4,6 +4,19 @@ import { getRegionById, getRegionByLabel } from 'support/util/regions';
  * UI helpers for Enhanced Select component.
  */
 export const select = {
+  /**
+   * Finds an Enhanced Select by its text value.
+   *
+   * @param selectText - Select component inner text.
+   *
+   * @returns Cypress chainable.
+   */
+  findByText: (selectText: string) => {
+    return cy
+      .get(`[data-qa-enhanced-select="${selectText}"]`)
+      .findByText(selectText);
+  },
+
   /**
    * Finds a Select menu item by its `data-qa-option` ID.
    *
diff --git a/packages/manager/cypress/support/util/linode-utils.ts b/packages/manager/cypress/support/util/linodes.ts
similarity index 86%
rename from packages/manager/cypress/support/util/linode-utils.ts
rename to packages/manager/cypress/support/util/linodes.ts
index a2d617e1012..e94a8263402 100644
--- a/packages/manager/cypress/support/util/linode-utils.ts
+++ b/packages/manager/cypress/support/util/linodes.ts
@@ -7,16 +7,15 @@ import { chooseRegion } from 'support/util/regions';
 
 import type { Config, Linode, LinodeConfigCreationData } from '@linode/api-v4';
 
-const linodeRequest = createLinodeRequestFactory.build({
-  label: randomLabel(),
-  region: chooseRegion().id,
-});
-
 /**
  *  Creates a Linode and waits for it to be in "running" state.
  */
 export const createAndBootLinode = async (): Promise<Linode> => {
-  const linode = await createLinode(linodeRequest);
+  const createPayload = createLinodeRequestFactory.build({
+    label: randomLabel(),
+    region: chooseRegion().id,
+  });
+  const linode = await createLinode(createPayload);
 
   await pollLinodeStatus(
     linode.id,
@@ -40,8 +39,12 @@ export const createLinodeAndGetConfig = async ({
   linodeConfigRequestOverride?: Partial<Linode & LinodeConfigCreationData>;
   waitForLinodeToBeRunning?: boolean;
 }): Promise<[Linode, Config]> => {
+  const createPayload = createLinodeRequestFactory.build({
+    label: randomLabel(),
+    region: chooseRegion().id,
+  });
   const linode = await createLinode({
-    ...linodeRequest,
+    ...createPayload,
     ...linodeConfigRequestOverride,
   });
 

From 4d25e1aa4e703bb91b098ce7f8c02745ac88bc3d Mon Sep 17 00:00:00 2001
From: cliu-akamai <126020611+cliu-akamai@users.noreply.github.com>
Date: Fri, 3 Nov 2023 15:12:50 -0400
Subject: [PATCH 24/43] test: [M3-7133] - Add integration tests for AGLB
 certificate delete flow (#9846)

* M3-7133 Add integration tests for AGLB certificate delete flow

* Add changeset
---
 .../.changeset/pr-9846-added-1699023355495.md |   5 +
 .../load-balancer-certificates.spec.ts        | 198 +++++++++++++++++-
 .../support/intercepts/load-balancers.ts      |  42 ++++
 3 files changed, 242 insertions(+), 3 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9846-added-1699023355495.md

diff --git a/packages/manager/.changeset/pr-9846-added-1699023355495.md b/packages/manager/.changeset/pr-9846-added-1699023355495.md
new file mode 100644
index 00000000000..ff4d9565c33
--- /dev/null
+++ b/packages/manager/.changeset/pr-9846-added-1699023355495.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Add integration tests for AGLB certificate delete flow ([#9846](https://github.com/linode/manager/pull/9846))
diff --git a/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-certificates.spec.ts b/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-certificates.spec.ts
index f943313d483..ed7cbe40634 100644
--- a/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-certificates.spec.ts
+++ b/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-certificates.spec.ts
@@ -9,21 +9,99 @@ import {
 import { makeFeatureFlagData } from 'support/util/feature-flags';
 import { loadbalancerFactory, certificateFactory } from '@src/factories';
 import { ui } from 'support/ui';
-import { randomLabel, randomString } from 'support/util/random';
+import { randomItem, randomLabel, randomString } from 'support/util/random';
 import {
+  mockDeleteLoadBalancerCertificate,
+  mockDeleteLoadBalancerCertificateError,
   mockGetLoadBalancer,
   mockGetLoadBalancerCertificates,
   mockUploadLoadBalancerCertificate,
 } from 'support/intercepts/load-balancers';
+import { Loadbalancer, Certificate } from '@linode/api-v4/types';
+
+/**
+ * Deletes the TLS / Service Target certificate in the AGLB landing page.
+ *
+ * @param loadBalancer - The load balancer that contains the certificate to be deleted.
+ * @param certificatesDeleteBefore - The array of certificates to be displayed before deleting.
+ * @param certificatesDeleteAfter - The array of certificates to be displayed after deleting.
+ *
+ * Asserts that the landing page has updated to reflect the changes.
+ */
+const deleteCertificate = (
+  loadBalancer: Loadbalancer,
+  certificatesDeleteBefore: Certificate[],
+  certificatesDeleteAfter: Certificate[]
+) => {
+  mockAppendFeatureFlags({
+    aglb: makeFeatureFlagData(true),
+  }).as('getFeatureFlags');
+  mockGetFeatureFlagClientstream().as('getClientStream');
+  mockGetLoadBalancer(loadBalancer).as('getLoadBalancer');
+  mockGetLoadBalancerCertificates(loadBalancer.id, certificatesDeleteBefore).as(
+    'getCertificates'
+  );
+
+  cy.visitWithLogin(`/loadbalancers/${loadBalancer.id}/certificates`);
+  cy.wait([
+    '@getFeatureFlags',
+    '@getClientStream',
+    '@getLoadBalancer',
+    '@getCertificates',
+  ]);
+
+  // Delete a TLS/Service Target certificate.
+  const certificateToDeleteLabel = certificatesDeleteBefore[0].label;
+  ui.actionMenu
+    .findByTitle(`Action Menu for certificate ${certificateToDeleteLabel}`)
+    .should('be.visible')
+    .click();
+  ui.actionMenuItem.findByTitle('Delete').should('be.visible').click();
+
+  mockDeleteLoadBalancerCertificate(
+    loadBalancer.id,
+    certificatesDeleteBefore[0].id
+  ).as('deleteCertificate');
+
+  mockGetLoadBalancerCertificates(loadBalancer.id, certificatesDeleteAfter).as(
+    'getCertificates'
+  );
+
+  ui.dialog
+    .findByTitle(`Delete Certificate ${certificateToDeleteLabel}?`)
+    .should('be.visible')
+    .within(() => {
+      ui.button
+        .findByTitle('Delete')
+        .should('be.visible')
+        .should('be.enabled')
+        .click();
+    });
+
+  cy.wait(['@deleteCertificate', '@getCertificates']);
+
+  // Confirm that the deleted certificate is removed from the table with expected info.
+  cy.findByText(certificateToDeleteLabel).should('not.exist');
+
+  if (certificatesDeleteAfter.length === 0) {
+    // Confirm that Cloud Manager allows users to delete the last certificate, and display empty state gracefully.
+    cy.findByText('No items to display.').should('be.visible');
+  }
+};
 
 describe('Akamai Global Load Balancer certificates page', () => {
+  let mockLoadBalancer: Loadbalancer;
+
+  before(() => {
+    mockLoadBalancer = loadbalancerFactory.build();
+  });
+
   /*
    * - Confirms Load Balancer certificate upload UI flow using mocked API requests.
    * - Confirms that TLS and Service Target certificates can be uploaded.
    * - Confirms that certificates table update to reflects uploaded certificates.
    */
   it('can upload a TLS certificate', () => {
-    const mockLoadBalancer = loadbalancerFactory.build();
     const mockLoadBalancerCertTls = certificateFactory.build({
       label: randomLabel(),
       type: 'downstream',
@@ -94,8 +172,8 @@ describe('Akamai Global Load Balancer certificates page', () => {
     // Confirm that new certificate is listed in the table with expected info.
     cy.findByText(mockLoadBalancerCertTls.label).should('be.visible');
   });
+
   it('can upload a service target certificate', () => {
-    const mockLoadBalancer = loadbalancerFactory.build();
     const mockLoadBalancerCertServiceTarget = certificateFactory.build({
       label: randomLabel(),
       type: 'ca',
@@ -162,4 +240,118 @@ describe('Akamai Global Load Balancer certificates page', () => {
     // Confirm that both new certificates are listed in the table with expected info.
     cy.findByText(mockLoadBalancerCertServiceTarget.label).should('be.visible');
   });
+
+  /*
+   * - Confirms Load Balancer certificate delete UI flow using mocked API requests.
+   * - Confirms that TLS and Service Target certificates can be deleted.
+   * - Confirms that certificates table update to reflects deleted certificates.
+   * - Confirms that the last certificate can be deleted.
+   */
+  it('can delete a TLS certificate', () => {
+    const mockLoadBalancerCertsTls = certificateFactory.buildList(5, {
+      type: 'downstream',
+    });
+    const mockLoadBalancerAfterDeleteCertsTls = mockLoadBalancerCertsTls.slice(
+      1
+    );
+
+    deleteCertificate(
+      mockLoadBalancer,
+      mockLoadBalancerCertsTls,
+      mockLoadBalancerAfterDeleteCertsTls
+    );
+  });
+
+  it('can delete a service target certificate', () => {
+    const mockLoadBalancerCertsTls = certificateFactory.buildList(5, {
+      type: 'ca',
+    });
+    const mockLoadBalancerAfterDeleteCertsTls = mockLoadBalancerCertsTls.slice(
+      1
+    );
+
+    deleteCertificate(
+      mockLoadBalancer,
+      mockLoadBalancerCertsTls,
+      mockLoadBalancerAfterDeleteCertsTls
+    );
+  });
+
+  it('can delete the last certificate', () => {
+    const mockLoadBalancerCertsTls = certificateFactory.buildList(1, {
+      type: randomItem(['ca', 'downstream']),
+    });
+    const mockLoadBalancerAfterDeleteCertsTls = mockLoadBalancerCertsTls.slice(
+      1
+    );
+
+    deleteCertificate(
+      mockLoadBalancer,
+      mockLoadBalancerCertsTls,
+      mockLoadBalancerAfterDeleteCertsTls
+    );
+  });
+
+  it('can handle server errors gracefully when failing to delete the certificate', () => {
+    const mockLoadBalancerCertsTls = certificateFactory.buildList(1, {
+      type: randomItem(['ca', 'downstream']),
+    });
+    const mockLoadBalancerAfterDeleteCertsTls = mockLoadBalancerCertsTls.slice(
+      1
+    );
+
+    mockAppendFeatureFlags({
+      aglb: makeFeatureFlagData(true),
+    }).as('getFeatureFlags');
+    mockGetFeatureFlagClientstream().as('getClientStream');
+    mockGetLoadBalancer(mockLoadBalancer).as('getLoadBalancer');
+    mockGetLoadBalancerCertificates(
+      mockLoadBalancer.id,
+      mockLoadBalancerCertsTls
+    ).as('getCertificates');
+
+    cy.visitWithLogin(`/loadbalancers/${mockLoadBalancer.id}/certificates`);
+    cy.wait([
+      '@getFeatureFlags',
+      '@getClientStream',
+      '@getLoadBalancer',
+      '@getCertificates',
+    ]);
+
+    // Delete a TLS/Service Target certificate.
+    const certificateToDeleteLabel = mockLoadBalancerCertsTls[0].label;
+    ui.actionMenu
+      .findByTitle(`Action Menu for certificate ${certificateToDeleteLabel}`)
+      .should('be.visible')
+      .click();
+    ui.actionMenuItem.findByTitle('Delete').should('be.visible').click();
+
+    mockDeleteLoadBalancerCertificateError(
+      mockLoadBalancer.id,
+      mockLoadBalancerCertsTls[0].id
+    ).as('deleteCertificateError');
+
+    ui.dialog
+      .findByTitle(`Delete Certificate ${certificateToDeleteLabel}?`)
+      .should('be.visible')
+      .within(() => {
+        ui.button
+          .findByTitle('Delete')
+          .should('be.visible')
+          .should('be.enabled')
+          .click();
+      });
+
+    cy.wait('@deleteCertificateError');
+
+    ui.dialog
+      .findByTitle(`Delete Certificate ${certificateToDeleteLabel}?`)
+      .should('be.visible')
+      .within(() => {
+        // Confirm that an error message shows up in the dialog
+        cy.findByText(
+          'An error occurred while deleting Load Balancer certificate.'
+        ).should('be.visible');
+      });
+  });
 });
diff --git a/packages/manager/cypress/support/intercepts/load-balancers.ts b/packages/manager/cypress/support/intercepts/load-balancers.ts
index ce028c70a86..19cf0a5b884 100644
--- a/packages/manager/cypress/support/intercepts/load-balancers.ts
+++ b/packages/manager/cypress/support/intercepts/load-balancers.ts
@@ -97,6 +97,48 @@ export const mockUploadLoadBalancerCertificate = (
   );
 };
 
+/**
+ * Intercepts DELETE request to delete an AGLB load balancer certificate and mocks a success response.
+ *
+ * @param loadBalancerId - ID of load balancer for which to delete certificates.
+ * @param certificateId - ID of certificate for which to remove.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockDeleteLoadBalancerCertificate = (
+  loadBalancerId: number,
+  certificateId: number
+) => {
+  return cy.intercept(
+    'DELETE',
+    apiMatcher(`/aglb/${loadBalancerId}/certificates/${certificateId}`),
+    makeResponse()
+  );
+};
+
+/**
+ * Intercepts GET request to retrieve AGLB service targets and mocks HTTP 500 error response.
+ *
+ * @param loadBalancerId - ID of load balancer for which to delete certificates.
+ * @param certificateId - ID of certificate for which to remove.
+ * @param message - Optional error message with which to respond.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockDeleteLoadBalancerCertificateError = (
+  loadBalancerId: number,
+  certificateId: number,
+  message?: string
+) => {
+  const defaultMessage =
+    'An error occurred while deleting Load Balancer certificate.';
+  return cy.intercept(
+    'DELETE',
+    apiMatcher(`/aglb/${loadBalancerId}/certificates/${certificateId}`),
+    makeErrorResponse(message ?? defaultMessage, 500)
+  );
+};
+
 /**
  * Intercepts GET request to retrieve AGLB service targets and mocks response.
  *

From 784ea379157e825f788729266639c38057e873ed Mon Sep 17 00:00:00 2001
From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
Date: Fri, 3 Nov 2023 16:30:01 -0400
Subject: [PATCH 25/43] fix: [M3-7340] - Fix error text displaying in Linode
 Add/Edit config flow and prevent clearing subnet section when clicking on
 currently assigned VPC (#9866)

* address bugs p1

* changeset

* fix bug p2

* update comments

* update changeset

* update tests

* change copy if no vpcs exist
---
 ...pr-9866-upcoming-features-1698872557988.md |  5 ++
 .../LinodesCreate/LinodeCreateContainer.tsx   | 23 ++++----
 .../Linodes/LinodesCreate/VPCPanel.test.tsx   | 57 +++++++++++++++++++
 .../Linodes/LinodesCreate/VPCPanel.tsx        | 16 +++---
 .../LinodeSettings/InterfaceSelect.tsx        | 30 +++++-----
 5 files changed, 101 insertions(+), 30 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9866-upcoming-features-1698872557988.md

diff --git a/packages/manager/.changeset/pr-9866-upcoming-features-1698872557988.md b/packages/manager/.changeset/pr-9866-upcoming-features-1698872557988.md
new file mode 100644
index 00000000000..de429e189b3
--- /dev/null
+++ b/packages/manager/.changeset/pr-9866-upcoming-features-1698872557988.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Fix incorrectly displayed error text in Linode Edit/Add config flow and prevent subnet section from incorrectly clearing in Linode Edit/Add Config and Linode Create flow ([#9866](https://github.com/linode/manager/pull/9866))
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
index f26533d8cfc..d50645b6d77 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
@@ -37,6 +37,10 @@ import {
   WithLinodesProps,
   withLinodes,
 } from 'src/containers/withLinodes.container';
+import {
+  WithMarketplaceAppsProps,
+  withMarketplaceApps,
+} from 'src/containers/withMarketplaceApps';
 import {
   WithQueryClientProps,
   withQueryClient,
@@ -60,6 +64,7 @@ import {
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { ExtendedType, extendType } from 'src/utilities/extendType';
 import { isEURegion } from 'src/utilities/formatRegion';
+import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants';
 import { getPrice } from 'src/utilities/pricing/linodes';
 import { getQueryParamsFromQueryString } from 'src/utilities/queryParams';
 import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
@@ -77,11 +82,6 @@ import type {
   LinodeTypeClass,
   PriceObject,
 } from '@linode/api-v4/lib/linodes';
-import {
-  WithMarketplaceAppsProps,
-  withMarketplaceApps,
-} from 'src/containers/withMarketplaceApps';
-import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants';
 
 const DEFAULT_IMAGE = 'linode/debian11';
 
@@ -488,11 +488,14 @@ class LinodeCreateContainer extends React.PureComponent<CombinedProps, State> {
   };
 
   handleVPCChange = (vpcId: number) => {
-    this.setState({
-      selectedSubnetId: undefined, // Ensure the selected subnet is cleared
-      selectedVPCId: vpcId,
-      vpcIPv4AddressOfLinode: '', // Ensure the VPC IPv4 address is cleared
-    });
+    // Only clear VPC related fields if VPC selection changes
+    if (vpcId !== this.state.selectedVPCId) {
+      this.setState({
+        selectedSubnetId: undefined, // Ensure the selected subnet is cleared
+        selectedVPCId: vpcId,
+        vpcIPv4AddressOfLinode: '', // Ensure the VPC IPv4 address is cleared
+      });
+    }
   };
 
   handleVPCIPv4Change = (IPv4: string) => {
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx
index 6adead72adf..fd453d40353 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx
@@ -128,4 +128,61 @@ describe('VPCPanel', () => {
       expect(wrapper.getAllByRole('checkbox')[0]).toBeChecked();
     });
   });
+  it('should display helper text if there are no vpcs in the selected region and "from" is "linodeCreate"', async () => {
+    server.use(
+      rest.get('*/regions', (req, res, ctx) => {
+        const usEast = regionFactory.build({
+          capabilities: ['VPCs'],
+          id: 'us-east',
+        });
+        return res(ctx.json(makeResourcePage([usEast])));
+      }),
+      rest.get('*/vpcs', (req, res, ctx) => {
+        return res(ctx.json(makeResourcePage([])));
+      })
+    );
+
+    const wrapper = renderWithTheme(<VPCPanel {...props} />, {
+      flags: { vpc: true },
+      queryClient,
+    });
+
+    await waitFor(() => {
+      expect(
+        wrapper.queryByText(
+          'No VPCs exist in the selected region. Click Create VPC to create one.'
+        )
+      ).toBeInTheDocument();
+    });
+  });
+  it('should not display helper text if there are no vpcs in the selected region and "from" is "linodeConfig"', async () => {
+    server.use(
+      rest.get('*/regions', (req, res, ctx) => {
+        const usEast = regionFactory.build({
+          capabilities: ['VPCs'],
+          id: 'us-east',
+        });
+        return res(ctx.json(makeResourcePage([usEast])));
+      }),
+      rest.get('*/vpcs', (req, res, ctx) => {
+        return res(ctx.json(makeResourcePage([])));
+      })
+    );
+
+    const wrapper = renderWithTheme(
+      <VPCPanel {...props} from="linodeConfig" />,
+      {
+        flags: { vpc: true },
+        queryClient,
+      }
+    );
+
+    await waitFor(() => {
+      expect(
+        wrapper.queryByText(
+          'No VPCs exist in the selected region. Click Create VPC to create one.'
+        )
+      ).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
index de66a2eadc8..4392df6585a 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
@@ -194,16 +194,18 @@ export const VPCPanel = (props: VPCPanelProps) => {
           isClearable={false}
           isLoading={isLoading}
           label={from === 'linodeCreate' ? 'Assign VPC' : 'VPC'}
-          noOptionsMessage={() => 'Create a VPC to assign to this Linode.'}
+          noOptionsMessage={() => `No VPCs exist in this Linode's region.`}
           options={vpcDropdownOptions}
           placeholder={'Select a VPC'}
         />
-        {vpcDropdownOptions.length <= 1 && regionSupportsVPCs && (
-          <Typography sx={(theme) => ({ paddingTop: theme.spacing(1.5) })}>
-            No VPCs exist in the selected region. Click Create VPC to create
-            one.
-          </Typography>
-        )}
+        {from === 'linodeCreate' &&
+          vpcDropdownOptions.length <= 1 &&
+          regionSupportsVPCs && (
+            <Typography sx={(theme) => ({ paddingTop: theme.spacing(1.5) })}>
+              No VPCs exist in the selected region. Click Create VPC to create
+              one.
+            </Typography>
+          )}
 
         {from === 'linodeCreate' && (
           <StyledCreateLink to={`${APP_ROOT}/vpcs/create`}>
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
index a4d9b46db9f..bcb3bc49603 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
@@ -2,7 +2,6 @@ import {
   InterfacePayload,
   InterfacePurpose,
 } from '@linode/api-v4/lib/linodes/types';
-import { Stack } from 'src/components/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -10,6 +9,7 @@ import * as React from 'react';
 
 import { Divider } from 'src/components/Divider';
 import Select, { Item } from 'src/components/EnhancedSelect/Select';
+import { Stack } from 'src/components/Stack';
 import { TextField } from 'src/components/TextField';
 import { VPCPanel } from 'src/features/Linodes/LinodesCreate/VPCPanel';
 import { useFlags } from 'src/hooks/useFlags';
@@ -124,18 +124,22 @@ export const InterfaceSelect = (props: CombinedProps) => {
       purpose,
     });
 
-  const handleVPCLabelChange = (selectedVPCId: number) =>
-    handleChange({
-      ipam_address: null,
-      ipv4: {
-        nat_1_1: autoAssignLinodeIPv4 ? 'any' : undefined,
-        vpc: autoAssignVPCIPv4 ? undefined : vpcIPv4,
-      },
-      label: null,
-      purpose,
-      subnet_id: undefined,
-      vpc_id: selectedVPCId,
-    });
+  const handleVPCLabelChange = (selectedVPCId: number) => {
+    // Only clear VPC related fields if VPC selection changes
+    if (selectedVPCId !== vpcId) {
+      handleChange({
+        ipam_address: null,
+        ipv4: {
+          nat_1_1: autoAssignLinodeIPv4 ? 'any' : undefined,
+          vpc: autoAssignVPCIPv4 ? undefined : vpcIPv4,
+        },
+        label: null,
+        purpose,
+        subnet_id: undefined,
+        vpc_id: selectedVPCId,
+      });
+    }
+  };
 
   const handleSubnetChange = (selectedSubnetId: number) =>
     handleChange({

From 1d86dfe4724db19aead2cb4ef6d870345babbe8c Mon Sep 17 00:00:00 2001
From: Hana Xu <115299789+hana-linode@users.noreply.github.com>
Date: Fri, 3 Nov 2023 17:12:04 -0400
Subject: [PATCH 26/43] feat: [M3-7235, M3-7236] - VPC UX error feedback
 (#9857)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description 📝
Clear VPC errors in the Linode Create and VPC Edit drawer flow after the input has changed

## How to test 🧪

### Prerequisites
- Point to the dev env and ensure your account has vpc customer tags
- Create two VPCs if you don't already have one

### Reproduction steps
Linode Create
- Be on the develop branch or go to the remote dev environment
- Go to `/linodes/create` and select a region and VPC, but not a subnet
- Click Create Linode and observe the "Subnet is required" error
- Select a Subnet, the error does not clear

VPC Edit
- Edit a VPC on the landing or details page
- Change the label to the same label as another VPC and click Save, you should see an error about unique labels
- Edit the label again, the error does not clear

### Verification steps
Linode Create
- Go to `/linodes/create` and select a region and VPC, but not a subnet
- Click Create Linode and observe the "Subnet is required" error
- Select a Subnet, the error should clear

VPC Edit
- Edit a VPC on the landing or details page
- Change the label to the same label as another VPC and click Save, you should see an error about unique labels
- Edit the label again, the error should clear
---
 ...pr-9857-upcoming-features-1698788535458.md |  5 +++
 .../LinodesCreate/LinodeCreateContainer.tsx   |  7 +++-
 .../VPCs/VPCLanding/VPCEditDrawer.tsx         | 35 ++++++++++++++-----
 3 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9857-upcoming-features-1698788535458.md

diff --git a/packages/manager/.changeset/pr-9857-upcoming-features-1698788535458.md b/packages/manager/.changeset/pr-9857-upcoming-features-1698788535458.md
new file mode 100644
index 00000000000..8b861b7c0fb
--- /dev/null
+++ b/packages/manager/.changeset/pr-9857-upcoming-features-1698788535458.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Clear subnet errors in Linode Create flow and VPC label errors in VPC Edit flow upon input change ([#9857](https://github.com/linode/manager/pull/9857))
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
index d50645b6d77..3c98042c6aa 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
@@ -477,7 +477,12 @@ class LinodeCreateContainer extends React.PureComponent<CombinedProps, State> {
   };
 
   handleSubnetChange = (subnetID: number) => {
-    this.setState({ selectedSubnetId: subnetID });
+    this.setState((prevState) => ({
+      errors: prevState.errors?.filter(
+        (error) => error.field !== 'interfaces[0].subnet_id'
+      ),
+      selectedSubnetId: subnetID,
+    }));
   };
 
   handleVLANChange = (updatedInterface: Interface) => {
diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx
index 140b2199951..6c8c7d0069b 100644
--- a/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx
+++ b/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx
@@ -1,4 +1,5 @@
 import { UpdateVPCPayload, VPC } from '@linode/api-v4/lib/vpcs/types';
+import { updateVPCSchema } from '@linode/validation/lib/vpcs.schema';
 import { useFormik } from 'formik';
 import * as React from 'react';
 
@@ -41,7 +42,7 @@ export const VPCEditDrawer = (props: Props) => {
     reset,
   } = useUpdateVPCMutation(vpc?.id ?? -1);
 
-  const form = useFormik<UpdateVPCPayload>({
+  const form = useFormik<UpdateVPCPayload & { none?: string }>({
     enableReinitialize: true,
     initialValues: {
       description: vpc?.description,
@@ -51,8 +52,17 @@ export const VPCEditDrawer = (props: Props) => {
       await updateVPC(values);
       onClose();
     },
+    validateOnChange: false,
+    validationSchema: updateVPCSchema,
   });
 
+  const handleFieldChange = (field: string, value: string) => {
+    form.setFieldValue(field, value);
+    if (form.errors[field]) {
+      form.setFieldError(field, undefined);
+    }
+  };
+
   React.useEffect(() => {
     if (open) {
       form.resetForm();
@@ -60,13 +70,22 @@ export const VPCEditDrawer = (props: Props) => {
     }
   }, [open]);
 
-  const { data: regionsData, error: regionsError } = useRegionsQuery();
+  // If there's an error, sync it with formik
+  React.useEffect(() => {
+    if (error) {
+      const errorMap = getErrorMap(['label', 'description'], error);
+      for (const [field, reason] of Object.entries(errorMap)) {
+        form.setFieldError(field, reason);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [error]);
 
-  const errorMap = getErrorMap(['label', 'description'], error);
+  const { data: regionsData, error: regionsError } = useRegionsQuery();
 
   return (
     <Drawer onClose={onClose} open={open} title="Edit VPC">
-      {errorMap.none && <Notice text={errorMap.none} variant="error" />}
+      {form.errors.none && <Notice text={form.errors.none} variant="error" />}
       {readOnly && (
         <Notice
           important
@@ -77,18 +96,18 @@ export const VPCEditDrawer = (props: Props) => {
       <form onSubmit={form.handleSubmit}>
         <TextField
           disabled={readOnly}
-          errorText={errorMap.label}
+          errorText={form.errors.label}
           label="Label"
           name="label"
-          onChange={form.handleChange}
+          onChange={(e) => handleFieldChange('label', e.target.value)}
           value={form.values.label}
         />
         <TextField
           disabled={readOnly}
-          errorText={errorMap.description}
+          errorText={form.errors.description}
           label="Description"
           multiline
-          onChange={form.handleChange}
+          onChange={(e) => handleFieldChange('description', e.target.value)}
           rows={1}
           value={form.values.description}
         />

From da8c7eac68e5f03b23c95fb7579b648de6097634 Mon Sep 17 00:00:00 2001
From: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>
Date: Mon, 6 Nov 2023 09:32:18 -0500
Subject: [PATCH 27/43] refactor: [M3-6522] - BetaChip V7 story migration and
 cleanup (#9864)

* V7 story migration and cleanup

* add test

* revert unwanted change

* improve test

* Added changeset: BetaChip V7 story migration
---
 .../pr-9864-tech-stories-1698867933388.md     |    5 +
 packages/manager/package.json                 |   26 +-
 .../components/BetaChip/BetaChip.stories.mdx  |   81 -
 .../components/BetaChip/BetaChip.stories.tsx  |   17 +
 .../src/components/BetaChip/BetaChip.test.tsx |   32 +
 .../src/components/BetaChip/BetaChip.tsx      |   54 +-
 yarn.lock                                     | 3181 +++++++++--------
 7 files changed, 1856 insertions(+), 1540 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9864-tech-stories-1698867933388.md
 delete mode 100644 packages/manager/src/components/BetaChip/BetaChip.stories.mdx
 create mode 100644 packages/manager/src/components/BetaChip/BetaChip.stories.tsx
 create mode 100644 packages/manager/src/components/BetaChip/BetaChip.test.tsx

diff --git a/packages/manager/.changeset/pr-9864-tech-stories-1698867933388.md b/packages/manager/.changeset/pr-9864-tech-stories-1698867933388.md
new file mode 100644
index 00000000000..82e9f350687
--- /dev/null
+++ b/packages/manager/.changeset/pr-9864-tech-stories-1698867933388.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+BetaChip V7 story migration ([#9864](https://github.com/linode/manager/pull/9864))
diff --git a/packages/manager/package.json b/packages/manager/package.json
index b175ce5e022..d1166ad3944 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -109,16 +109,16 @@
   },
   "devDependencies": {
     "@linode/eslint-plugin-cloud-manager": "^0.0.3",
-    "@storybook/addon-actions": "~7.0.24",
-    "@storybook/addon-controls": "~7.0.24",
-    "@storybook/addon-docs": "~7.0.24",
-    "@storybook/addon-measure": "~7.0.24",
-    "@storybook/addon-viewport": "~7.0.24",
-    "@storybook/addons": "~7.0.24",
-    "@storybook/client-api": "~7.0.24",
-    "@storybook/react": "~7.0.24",
-    "@storybook/react-vite": "^7.0.24",
-    "@storybook/theming": "~7.0.24",
+    "@storybook/addon-actions": "~7.5.2",
+    "@storybook/addon-controls": "~7.5.2",
+    "@storybook/addon-docs": "~7.5.2",
+    "@storybook/addon-measure": "~7.5.2",
+    "@storybook/addon-viewport": "~7.5.2",
+    "@storybook/addons": "~7.5.2",
+    "@storybook/client-api": "~7.5.2",
+    "@storybook/react": "~7.5.2",
+    "@storybook/react-vite": "^7.5.2",
+    "@storybook/theming": "~7.5.2",
     "@swc/core": "^1.3.1",
     "@swc/jest": "^0.2.22",
     "@testing-library/cypress": "^9.0.0",
@@ -187,7 +187,7 @@
     "eslint-plugin-react-hooks": "^3.0.0",
     "eslint-plugin-scanjs-rules": "^0.2.1",
     "eslint-plugin-sonarjs": "^0.5.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-testing-library": "^3.1.2",
     "eslint-plugin-xss": "^0.1.10",
     "factory.ts": "^0.5.1",
@@ -203,8 +203,8 @@
     "redux-mock-store": "^1.5.3",
     "reselect-tools": "^0.0.7",
     "serve": "^14.0.1",
-    "storybook": "~7.0.24",
-    "storybook-dark-mode": "^3.0.0",
+    "storybook": "~7.5.2",
+    "storybook-dark-mode": "^3.0.1",
     "vite": "^4.4.11",
     "vite-plugin-svgr": "^3.2.0"
   },
diff --git a/packages/manager/src/components/BetaChip/BetaChip.stories.mdx b/packages/manager/src/components/BetaChip/BetaChip.stories.mdx
deleted file mode 100644
index a5229c1106a..00000000000
--- a/packages/manager/src/components/BetaChip/BetaChip.stories.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { BetaChip } from './BetaChip';
-import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb';
-
-<Meta title="Components/Chip/Beta Chips" component={BetaChip} />
-
-export const Template = (args) => {
-  return <BetaChip {...args} />;
-};
-
-# Beta Chips
-
-## Usage
-
-Beta chips label features that are not yet part of Cloud Manager's core supported functionality.
-
-**Example:** A beta chip may appear in the [primary navigation](https://github.com/linode/manager/pull/8104#issuecomment-1309334374), breadcrumbs, [banners](/docs/components-notifications-dismissible-banners--beta-banners), tabs, and/or plain text to designate beta functionality.
-
-**Visual style:** bold, capitalized text; reduced height, letter spacing, and font size; solid color background.
-
-## Default
-
-<Canvas>
-  <Story name="Default">
-    <BetaChip />
-  </Story>
-</Canvas>
-
-## Example
-<Canvas>
-  <Story name="Example">
-    <Breadcrumb
-      labelTitle="Create"
-      pathname={"Databases Cluster / Create"}
-      crumbOverrides={[
-        {
-          position: 1,
-          label: 'Database Clusters',
-        },
-      ]}
-      labelOptions={{
-        suffixComponent:
-          <BetaChip component="span" />
-      }}
-    />
-  </Story>
-</Canvas>
-
-## Component API
-
-<Canvas>
-  <Story
-    name="Component API"
-    args={{
-      color: 'default',
-    }}
-    argTypes={{
-      color: {
-        description: 'Color of the chip',
-        options: ['default', 'primary'],
-        control: { type: 'radio' },
-        table: {
-          defaultValue: {
-            summary: 'default',
-          },
-        },
-      },
-      component: {
-        description:
-          'The component used for the root node. Either a string to use a HTML element or a component.',
-      },
-      children: {
-        control: false,
-      }
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Component API" exclude={['ref', 'label', 'variant', 'outlineColor', 'size', 'className']} sort="requiredFirst"/>
diff --git a/packages/manager/src/components/BetaChip/BetaChip.stories.tsx b/packages/manager/src/components/BetaChip/BetaChip.stories.tsx
new file mode 100644
index 00000000000..6115d28c209
--- /dev/null
+++ b/packages/manager/src/components/BetaChip/BetaChip.stories.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { BetaChip } from './BetaChip';
+
+import type { BetaChipProps } from './BetaChip';
+import type { Meta, StoryObj } from '@storybook/react';
+
+export const Default: StoryObj<BetaChipProps> = {
+  render: (args) => <BetaChip {...args} />,
+};
+
+const meta: Meta<BetaChipProps> = {
+  args: { color: 'default' },
+  component: BetaChip,
+  title: 'Components/Chip/BetaChip',
+};
+export default meta;
diff --git a/packages/manager/src/components/BetaChip/BetaChip.test.tsx b/packages/manager/src/components/BetaChip/BetaChip.test.tsx
new file mode 100644
index 00000000000..814ad8836cc
--- /dev/null
+++ b/packages/manager/src/components/BetaChip/BetaChip.test.tsx
@@ -0,0 +1,32 @@
+import { fireEvent } from '@testing-library/react';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { BetaChip } from './BetaChip';
+
+describe('BetaChip', () => {
+  it('renders with default color', () => {
+    const { getByTestId } = renderWithTheme(<BetaChip />);
+    const betaChip = getByTestId('betaChip');
+    expect(betaChip).toBeInTheDocument();
+    expect(betaChip).toHaveStyle('background-color: rgba(0, 0, 0, 0.08)');
+  });
+
+  it('renders with primary color', () => {
+    const { getByTestId } = renderWithTheme(<BetaChip color="primary" />);
+    const betaChip = getByTestId('betaChip');
+    expect(betaChip).toBeInTheDocument();
+    expect(betaChip).toHaveStyle('background-color: #3683dc');
+  });
+
+  it('triggers an onClick callback', () => {
+    const onClickMock = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <BetaChip color="default" onClick={onClickMock} />
+    );
+    const betaChip = getByTestId('betaChip');
+    fireEvent.click(betaChip);
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/manager/src/components/BetaChip/BetaChip.tsx b/packages/manager/src/components/BetaChip/BetaChip.tsx
index 88eabf32754..fdeb2d55abe 100644
--- a/packages/manager/src/components/BetaChip/BetaChip.tsx
+++ b/packages/manager/src/components/BetaChip/BetaChip.tsx
@@ -1,10 +1,9 @@
-import { Theme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
 import { Chip, ChipProps } from 'src/components/Chip';
 
-interface BetaChipProps
+export interface BetaChipProps
   extends Omit<
     ChipProps,
     | 'avatar'
@@ -15,38 +14,45 @@ interface BetaChipProps
     | 'label'
     | 'onDelete'
     | 'outlineColor'
+    | 'size'
     | 'variant'
   > {
-  className?: string;
+  /**
+   * The color of the chip.
+   * default renders a gray chip, primary renders a blue chip.
+   */
   color?: 'default' | 'primary';
 }
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  root: {
-    fontFamily: theme.font.bold,
-    fontSize: '0.625rem',
-    height: 16,
-    letterSpacing: '.25px',
-    marginLeft: theme.spacing(),
-    textTransform: 'uppercase',
-  },
-}));
-
-const BetaChip = (props: BetaChipProps) => {
-  const { classes, cx } = useStyles();
-
-  const { className, color } = props;
+/**
+ * ## Usage
+ *
+ * Beta chips label features that are not yet part of Cloud Manager's core supported functionality.<br>
+ * **Example:** A beta chip may appear in the [primary navigation](https://github.com/linode/manager/pull/8104#issuecomment-1309334374),
+ * breadcrumbs, [banners](/docs/components-notifications-dismissible-banners--beta-banners), tabs, and/or plain text to designate beta functionality.<br>
+ * **Visual style:** bold, capitalized text; reduced height, letter spacing, and font size; solid color background.
+ *
+ */
+export const BetaChip = (props: BetaChipProps) => {
+  const { color } = props;
 
   return (
-    <Chip
+    <StyledBetaChip
       {...props}
-      className={cx(className, {
-        [classes.root]: true,
-      })}
       color={color}
+      data-testid="betaChip"
       label="beta"
     />
   );
 };
 
-export { BetaChip };
+const StyledBetaChip = styled(Chip, {
+  label: 'StyledBetaChip',
+})<BetaChipProps>(({ theme }) => ({
+  fontFamily: theme.font.bold,
+  fontSize: '0.625rem',
+  height: 16,
+  letterSpacing: '.25px',
+  marginLeft: theme.spacing(),
+  textTransform: 'uppercase',
+}));
diff --git a/yarn.lock b/yarn.lock
index 839422c2adf..58ef8956017 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -114,10 +114,10 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@aw-web-design/x-default-browser@1.4.88":
-  version "1.4.88"
-  resolved "https://registry.yarnpkg.com/@aw-web-design/x-default-browser/-/x-default-browser-1.4.88.tgz#33d869cb2a537cd6d2a8369d4dc8ea4988d4be89"
-  integrity sha512-AkEmF0wcwYC2QkhK703Y83fxWARttIWXDmQN8+cof8FmFZ5BRhnNXGymeb1S73bOCLfWjYELxtujL56idCN/XA==
+"@aw-web-design/x-default-browser@1.4.126":
+  version "1.4.126"
+  resolved "https://registry.yarnpkg.com/@aw-web-design/x-default-browser/-/x-default-browser-1.4.126.tgz#43e4bd8f0314ed907a8718d7e862a203af79bc16"
+  integrity sha512-Xk1sIhyNC/esHGGVjL/niHLowM0csl/kFO5uawBy4IrWwy0o1G8LGt3jP6nmWGz+USxeeqbihAmp/oVZju6wug==
   dependencies:
     default-browser-id "3.0.0"
 
@@ -135,22 +135,30 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
-"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.1", "@babel/compat-data@^7.20.5":
+"@babel/code-frame@^7.22.13":
+  version "7.22.13"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
+  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
+  dependencies:
+    "@babel/highlight" "^7.22.13"
+    chalk "^2.4.2"
+
+"@babel/compat-data@^7.20.5":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.0.tgz#c241dc454e5b5917e40d37e525e2f4530c399298"
   integrity sha512-gMuZsmsgxk/ENC3O/fRw5QY8A9/uxQbbCEypnLIiYYc/qVJtEV7ouxC3EllIIwNzMqAQee5tanFabWsUOutS7g==
 
-"@babel/compat-data@^7.21.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.4.tgz#457ffe647c480dff59c2be092fc3acf71195c87f"
-  integrity sha512-/DYyDpeCfaVinT40FPGdkkb+lYSKvsVuMjDAG7jPOWWiM1ibOaB9CXJAlc4d1QpP/U2q2P9jbrSlClKSErd55g==
-
 "@babel/compat-data@^7.22.0":
   version "7.22.3"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.3.tgz#cd502a6a0b6e37d7ad72ce7e71a7160a3ae36f7e"
   integrity sha512-aNtko9OPOwVESUFp3MZfD8Uzxl7JzSeJpd7npIoxCasU37PFbAQRpKglkaKwlHOyeJdrREpo8TW8ldrkYWwvIQ==
 
-"@babel/core@^7.1.0", "@babel/core@^7.11.6", "@babel/core@^7.12.10", "@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.20.12", "@babel/core@^7.20.2", "@babel/core@^7.7.5", "@babel/core@~7.21.0":
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9", "@babel/compat-data@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.2.tgz#6a12ced93455827037bfb5ed8492820d60fc32cc"
+  integrity sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==
+
+"@babel/core@^7.1.0", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.20.12", "@babel/core@^7.7.5":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.0.tgz#1341aefdcc14ccc7553fcc688dd8986a2daffc13"
   integrity sha512-PuxUbxcW6ZYe656yL3EAhpy7qXKq0DmYsrJLpbB8XrsCP9Nm+XCg9XFMb5vIDliPD7+U/+M+QJlH17XOcB7eXA==
@@ -171,6 +179,27 @@
     json5 "^2.2.2"
     semver "^6.3.0"
 
+"@babel/core@^7.18.9", "@babel/core@^7.22.9":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.2.tgz#ed10df0d580fff67c5f3ee70fd22e2e4c90a9f94"
+  integrity sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.0"
+    "@babel/helper-compilation-targets" "^7.22.15"
+    "@babel/helper-module-transforms" "^7.23.0"
+    "@babel/helpers" "^7.23.2"
+    "@babel/parser" "^7.23.0"
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.23.0"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
 "@babel/core@^7.21.3":
   version "7.22.1"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.1.tgz#5de51c5206f4c6f5533562838337a603c1033cfd"
@@ -192,7 +221,7 @@
     json5 "^2.2.2"
     semver "^6.3.0"
 
-"@babel/generator@^7.12.11", "@babel/generator@^7.21.0", "@babel/generator@^7.21.1", "@babel/generator@~7.21.1":
+"@babel/generator@^7.21.0", "@babel/generator@^7.21.1":
   version "7.21.1"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.1.tgz#951cc626057bc0af2c35cd23e9c64d384dea83dd"
   integrity sha512-1lT45bAYlQhFn/BHivJs43AiW2rg3/UbLyShGfF3C0KmHvO5fSghWd5kBJy30kpRRucGzXStvnnCFniCR2kXAA==
@@ -212,6 +241,16 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.22.9", "@babel/generator@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420"
+  integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==
+  dependencies:
+    "@babel/types" "^7.23.0"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
@@ -219,15 +258,21 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.18.6":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.9.tgz#acd4edfd7a566d1d51ea975dff38fd52906981bb"
-  integrity sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==
+"@babel/helper-annotate-as-pure@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
+  integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==
   dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.18.6"
-    "@babel/types" "^7.18.9"
+    "@babel/types" "^7.22.5"
 
-"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.0", "@babel/helper-compilation-targets@^7.20.7":
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.22.5":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz#5426b109cf3ad47b91120f8328d8ab1be8b0b956"
+  integrity sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==
+  dependencies:
+    "@babel/types" "^7.22.15"
+
+"@babel/helper-compilation-targets@^7.20.7":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz#a6cd33e93629f5eb473b021aac05df62c4cd09bb"
   integrity sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==
@@ -238,17 +283,6 @@
     lru-cache "^5.1.1"
     semver "^6.3.0"
 
-"@babel/helper-compilation-targets@^7.21.4":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.4.tgz#770cd1ce0889097ceacb99418ee6934ef0572656"
-  integrity sha512-Fa0tTuOXZ1iL8IeDFUWCzjZcn+sJGd9RZdH9esYVjEejGmzf+FFYQpMi/kZUk2kPy/q1H3/GPw7np8qar/stfg==
-  dependencies:
-    "@babel/compat-data" "^7.21.4"
-    "@babel/helper-validator-option" "^7.21.0"
-    browserslist "^4.21.3"
-    lru-cache "^5.1.1"
-    semver "^6.3.0"
-
 "@babel/helper-compilation-targets@^7.22.1":
   version "7.22.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.1.tgz#bfcd6b7321ffebe33290d68550e2c9d7eb7c7a58"
@@ -260,6 +294,17 @@
     lru-cache "^5.1.1"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.22.15", "@babel/helper-compilation-targets@^7.22.5", "@babel/helper-compilation-targets@^7.22.6":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz#0698fc44551a26cf29f18d4662d5bf545a6cfc52"
+  integrity sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==
+  dependencies:
+    "@babel/compat-data" "^7.22.9"
+    "@babel/helper-validator-option" "^7.22.15"
+    browserslist "^4.21.9"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
 "@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.21.0":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.0.tgz#64f49ecb0020532f19b1d014b03bccaa1ab85fb9"
@@ -274,7 +319,22 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
     "@babel/helper-split-export-declaration" "^7.18.6"
 
-"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5":
+"@babel/helper-create-class-features-plugin@^7.22.11", "@babel/helper-create-class-features-plugin@^7.22.5":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.15.tgz#97a61b385e57fe458496fad19f8e63b63c867de4"
+  integrity sha512-jKkwA59IXcvSaiK2UN45kKwSC9o+KuoXsBDvHvU/7BecYIp8GQ2UwrVvFgJASUT+hBnwJx6MhvMCuMzwZZ7jlg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-function-name" "^7.22.5"
+    "@babel/helper-member-expression-to-functions" "^7.22.15"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    semver "^6.3.1"
+
+"@babel/helper-create-regexp-features-plugin@^7.18.6":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.0.tgz#53ff78472e5ce10a52664272a239787107603ebb"
   integrity sha512-N+LaFW/auRSWdx7SHD/HiARwXQju1vXTW4fKr4u5SgBUTm51OKEjKgj+cs00ggW3kEvNqwErnlwuq7Y3xBe4eg==
@@ -282,17 +342,25 @@
     "@babel/helper-annotate-as-pure" "^7.18.6"
     regexpu-core "^5.3.1"
 
-"@babel/helper-define-polyfill-provider@^0.3.3":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz#8612e55be5d51f0cd1f36b4a5a83924e89884b7a"
-  integrity sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==
+"@babel/helper-create-regexp-features-plugin@^7.22.5":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz#5ee90093914ea09639b01c711db0d6775e558be1"
+  integrity sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    regexpu-core "^5.3.1"
+    semver "^6.3.1"
+
+"@babel/helper-define-polyfill-provider@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.3.tgz#a71c10f7146d809f4a256c373f462d9bba8cf6ba"
+  integrity sha512-WBrLmuPP47n7PNwsZ57pqam6G/RGo1vw/87b0Blc53tZNGZ4x7YvZ6HgQe2vo1W/FR20OgjeZuGXzudPiXHFug==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.17.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-compilation-targets" "^7.22.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
     debug "^4.1.1"
     lodash.debounce "^4.0.8"
     resolve "^1.14.2"
-    semver "^6.1.2"
 
 "@babel/helper-environment-visitor@^7.18.9":
   version "7.18.9"
@@ -304,14 +372,12 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.1.tgz#ac3a56dbada59ed969d712cf527bd8271fe3eba8"
   integrity sha512-Z2tgopurB/kTbidvzeBrc2To3PUP/9i5MUe+fU6QJCQDyPwSH2oRapkLw3KGECDYSjhQZCNxEvNvZlLw8JjGwA==
 
-"@babel/helper-explode-assignable-expression@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
-  integrity sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==
-  dependencies:
-    "@babel/types" "^7.18.6"
+"@babel/helper-environment-visitor@^7.22.20", "@babel/helper-environment-visitor@^7.22.5":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
 
-"@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.19.0", "@babel/helper-function-name@^7.21.0":
+"@babel/helper-function-name@^7.21.0":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
   integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
@@ -319,6 +385,14 @@
     "@babel/template" "^7.20.7"
     "@babel/types" "^7.21.0"
 
+"@babel/helper-function-name@^7.22.5", "@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
+
 "@babel/helper-hoist-variables@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
@@ -326,6 +400,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-hoist-variables@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
+  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-member-expression-to-functions@^7.20.7", "@babel/helper-member-expression-to-functions@^7.21.0":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz#319c6a940431a133897148515877d2f3269c3ba5"
@@ -333,6 +414,13 @@
   dependencies:
     "@babel/types" "^7.21.0"
 
+"@babel/helper-member-expression-to-functions@^7.22.15":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz#9263e88cc5e41d39ec18c9a3e0eced59a3e7d366"
+  integrity sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==
+  dependencies:
+    "@babel/types" "^7.23.0"
+
 "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
@@ -347,7 +435,14 @@
   dependencies:
     "@babel/types" "^7.21.4"
 
-"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.21.0", "@babel/helper-module-transforms@^7.21.2":
+"@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
+  integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
+  dependencies:
+    "@babel/types" "^7.22.15"
+
+"@babel/helper-module-transforms@^7.21.0", "@babel/helper-module-transforms@^7.21.2":
   version "7.21.2"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz#160caafa4978ac8c00ac66636cb0fa37b024e2d2"
   integrity sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==
@@ -375,6 +470,17 @@
     "@babel/traverse" "^7.22.1"
     "@babel/types" "^7.22.0"
 
+"@babel/helper-module-transforms@^7.22.5", "@babel/helper-module-transforms@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz#3ec246457f6c842c0aee62a01f60739906f7047e"
+  integrity sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-simple-access" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/helper-validator-identifier" "^7.22.20"
+
 "@babel/helper-optimise-call-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
@@ -382,22 +488,33 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+"@babel/helper-optimise-call-expression@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz#f21531a9ccbff644fdd156b4077c16ff0c3f609e"
+  integrity sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.20.2"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629"
   integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
 
-"@babel/helper-remap-async-to-generator@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
-  integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
+"@babel/helper-plugin-utils@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
+  integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
+
+"@babel/helper-remap-async-to-generator@^7.22.20", "@babel/helper-remap-async-to-generator@^7.22.5":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz#7b68e1cb4fa964d2996fd063723fb48eca8498e0"
+  integrity sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-wrap-function" "^7.18.9"
-    "@babel/types" "^7.18.9"
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-wrap-function" "^7.22.20"
 
-"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7":
+"@babel/helper-replace-supers@^7.20.7":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz#243ecd2724d2071532b2c8ad2f0f9f083bcae331"
   integrity sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==
@@ -409,6 +526,15 @@
     "@babel/traverse" "^7.20.7"
     "@babel/types" "^7.20.7"
 
+"@babel/helper-replace-supers@^7.22.5", "@babel/helper-replace-supers@^7.22.9":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793"
+  integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-member-expression-to-functions" "^7.22.15"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
+
 "@babel/helper-simple-access@^7.20.2":
   version "7.20.2"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9"
@@ -423,6 +549,13 @@
   dependencies:
     "@babel/types" "^7.21.5"
 
+"@babel/helper-simple-access@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de"
+  integrity sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
   version "7.20.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
@@ -430,6 +563,13 @@
   dependencies:
     "@babel/types" "^7.20.0"
 
+"@babel/helper-skip-transparent-expression-wrappers@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz#007f15240b5751c537c40e77abb4e89eeaaa8847"
+  integrity sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-split-export-declaration@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
@@ -437,6 +577,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-split-export-declaration@^7.22.6":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
+  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-string-parser@^7.19.4":
   version "7.19.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
@@ -447,25 +594,39 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz#2b3eea65443c6bdc31c22d037c65f6d323b6b2bd"
   integrity sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==
 
+"@babel/helper-string-parser@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
+  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
+
 "@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
   version "7.19.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
 "@babel/helper-validator-option@^7.18.6", "@babel/helper-validator-option@^7.21.0":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180"
   integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==
 
-"@babel/helper-wrap-function@^7.18.9":
-  version "7.20.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz#75e2d84d499a0ab3b31c33bcfe59d6b8a45f62e3"
-  integrity sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==
+"@babel/helper-validator-option@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040"
+  integrity sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==
+
+"@babel/helper-wrap-function@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz#15352b0b9bfb10fc9c76f79f6342c00e3411a569"
+  integrity sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==
   dependencies:
-    "@babel/helper-function-name" "^7.19.0"
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.20.5"
-    "@babel/types" "^7.20.5"
+    "@babel/helper-function-name" "^7.22.5"
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.22.19"
 
 "@babel/helpers@^7.21.0":
   version "7.21.0"
@@ -485,6 +646,15 @@
     "@babel/traverse" "^7.22.1"
     "@babel/types" "^7.22.3"
 
+"@babel/helpers@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.2.tgz#2832549a6e37d484286e15ba36a5330483cac767"
+  integrity sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.23.0"
+
 "@babel/highlight@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
@@ -494,7 +664,16 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.13.16", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.21.0", "@babel/parser@^7.21.2", "@babel/parser@^7.7.0", "@babel/parser@~7.21.2":
+"@babel/highlight@^7.22.13":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
+  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.1.0", "@babel/parser@^7.13.16", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.21.0", "@babel/parser@^7.21.2", "@babel/parser@^7.7.0":
   version "7.21.2"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.2.tgz#dacafadfc6d7654c3051a66d6fe55b6cb2f2a0b3"
   integrity sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==
@@ -504,33 +683,28 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.4.tgz#a770e98fd785c231af9d93f6459d36770993fb32"
   integrity sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
-  integrity sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+"@babel/parser@^7.22.15", "@babel/parser@^7.22.7", "@babel/parser@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
+  integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.9", "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz#d9c85589258539a22a901033853101a6198d4ef1"
-  integrity sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.15.tgz#02dc8a03f613ed5fdc29fb2f728397c78146c962"
+  integrity sha512-FB9iYlz7rURmRJyXRKEnalYPPdn87H5no108cyuQQyMwlpJ2SJtpIUBI27kdTin956pz+LPypkPVPUTlxOmrsg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.20.7"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-proposal-async-generator-functions@^7.20.1", "@babel/plugin-proposal-async-generator-functions@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz#bfb7276d2d573cb67ba379984a2334e262ba5326"
-  integrity sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.15.tgz#2aeb91d337d4e1a1e7ce85b76a37f5301781200f"
+  integrity sha512-Hyph9LseGvAeeXzikV88bczhsrLrIZqDPxO+sSmAunMPaGrBGhfMWzCPYTtiW9t+HzSE2wtV8e5cc5P6r1xMDQ==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-remap-async-to-generator" "^7.18.9"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/plugin-transform-optional-chaining" "^7.22.15"
 
-"@babel/plugin-proposal-class-properties@^7.13.0", "@babel/plugin-proposal-class-properties@^7.18.6":
+"@babel/plugin-proposal-class-properties@^7.13.0":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
   integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
@@ -538,48 +712,7 @@
     "@babel/helper-create-class-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-class-static-block@^7.18.6", "@babel/plugin-proposal-class-static-block@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz#77bdd66fb7b605f3a61302d224bdfacf5547977d"
-  integrity sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.21.0"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-
-"@babel/plugin-proposal-dynamic-import@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz#72bcf8d408799f547d759298c3c27c7e7faa4d94"
-  integrity sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-
-"@babel/plugin-proposal-export-namespace-from@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
-  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-
-"@babel/plugin-proposal-json-strings@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz#7e8788c1811c393aff762817e7dbf1ebd0c05f0b"
-  integrity sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-
-"@babel/plugin-proposal-logical-assignment-operators@^7.18.9", "@babel/plugin-proposal-logical-assignment-operators@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz#dfbcaa8f7b4d37b51e8bfb46d94a5aea2bb89d83"
-  integrity sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8", "@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
   integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
@@ -587,34 +720,7 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
-"@babel/plugin-proposal-numeric-separator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
-  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-
-"@babel/plugin-proposal-object-rest-spread@^7.20.2", "@babel/plugin-proposal-object-rest-spread@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
-  integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
-  dependencies:
-    "@babel/compat-data" "^7.20.5"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.20.7"
-
-"@babel/plugin-proposal-optional-catch-binding@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz#f9400d0e6a3ea93ba9ef70b09e72dd6da638a2cb"
-  integrity sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-
-"@babel/plugin-proposal-optional-chaining@^7.13.12", "@babel/plugin-proposal-optional-chaining@^7.18.9", "@babel/plugin-proposal-optional-chaining@^7.20.7", "@babel/plugin-proposal-optional-chaining@^7.21.0":
+"@babel/plugin-proposal-optional-chaining@^7.13.12":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
   integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
@@ -623,31 +729,10 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
-"@babel/plugin-proposal-private-methods@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
-  integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
-"@babel/plugin-proposal-private-property-in-object@^7.18.6", "@babel/plugin-proposal-private-property-in-object@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz#19496bd9883dd83c23c7d7fc45dcd9ad02dfa1dc"
-  integrity sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-create-class-features-plugin" "^7.21.0"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-
-"@babel/plugin-proposal-unicode-property-regex@^7.18.6", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz#af613d2cd5e643643b65cded64207b15c85cb78e"
-  integrity sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+"@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
+  version "7.21.0-placeholder-for-preset-env.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
+  integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
 
 "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
@@ -698,14 +783,21 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-syntax-import-assertions@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz#bb50e0d4bea0957235390641209394e87bdb9cc4"
-  integrity sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==
+"@babel/plugin-syntax-import-assertions@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.22.5.tgz#07d252e2aa0bc6125567f742cd58619cb14dce98"
+  integrity sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-syntax-import-meta@^7.8.3":
+"@babel/plugin-syntax-import-attributes@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.22.5.tgz#ab840248d834410b829f569f5262b9e517555ecb"
+  integrity sha512-KwvoWDeNKPETmozyFE0P2rOLqh39EoQHNjqizrI5B8Vt0ZNS7M56s7dAiAqbYfiAYOuIzIh96z3iR2ktgu3tEg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-syntax-import-meta@^7.10.4", "@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
   integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
@@ -719,13 +811,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
-  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@@ -789,95 +874,139 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.19.0"
 
-"@babel/plugin-transform-arrow-functions@^7.18.6", "@babel/plugin-transform-arrow-functions@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz#bea332b0e8b2dab3dafe55a163d8227531ab0551"
-  integrity sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==
+"@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
+  integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-async-to-generator@^7.18.6", "@babel/plugin-transform-async-to-generator@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz#dfee18623c8cb31deb796aa3ca84dda9cea94354"
-  integrity sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==
+"@babel/plugin-transform-arrow-functions@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.22.5.tgz#e5ba566d0c58a5b2ba2a8b795450641950b71958"
+  integrity sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==
   dependencies:
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-remap-async-to-generator" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-block-scoped-functions@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz#9187bf4ba302635b9d70d986ad70f038726216a8"
-  integrity sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==
+"@babel/plugin-transform-async-generator-functions@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.2.tgz#054afe290d64c6f576f371ccc321772c8ea87ebb"
+  integrity sha512-BBYVGxbDVHfoeXbOwcagAkOQAm9NxoTdMGfTqghu1GrvadSaw6iW3Je6IcL5PNOw8VwjxqBECXy50/iCQSY/lQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-remap-async-to-generator" "^7.22.20"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
 
-"@babel/plugin-transform-block-scoping@^7.20.2", "@babel/plugin-transform-block-scoping@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz#e737b91037e5186ee16b76e7ae093358a5634f02"
-  integrity sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==
+"@babel/plugin-transform-async-to-generator@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.22.5.tgz#c7a85f44e46f8952f6d27fe57c2ed3cc084c3775"
+  integrity sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-module-imports" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-remap-async-to-generator" "^7.22.5"
 
-"@babel/plugin-transform-classes@^7.20.2", "@babel/plugin-transform-classes@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz#f469d0b07a4c5a7dbb21afad9e27e57b47031665"
-  integrity sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==
+"@babel/plugin-transform-block-scoped-functions@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.22.5.tgz#27978075bfaeb9fa586d3cb63a3d30c1de580024"
+  integrity sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.21.0"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-replace-supers" "^7.20.7"
-    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-block-scoping@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.0.tgz#8744d02c6c264d82e1a4bc5d2d501fd8aff6f022"
+  integrity sha512-cOsrbmIOXmf+5YbL99/S49Y3j46k/T16b9ml8bm9lP6N9US5iQ2yBK7gpui1pg0V/WMcXdkfKbTb7HXq9u+v4g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-class-properties@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.5.tgz#97a56e31ad8c9dc06a0b3710ce7803d5a48cca77"
+  integrity sha512-nDkQ0NfkOhPTq8YCLiWNxp1+f9fCobEjCb0n8WdbNUBc4IB5V7P1QnX9IjpSoquKrXF5SKojHleVNs2vGeHCHQ==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-class-static-block@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.11.tgz#dc8cc6e498f55692ac6b4b89e56d87cec766c974"
+  integrity sha512-GMM8gGmqI7guS/llMFk1bJDkKfn3v3C4KHK9Yg1ey5qcHcOlKb0QvcMrgzvxo+T03/4szNh5lghY+fEC98Kq9g==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.22.11"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+
+"@babel/plugin-transform-classes@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.15.tgz#aaf4753aee262a232bbc95451b4bdf9599c65a0b"
+  integrity sha512-VbbC3PGjBdE0wAWDdHM9G8Gm977pnYI0XpqMd6LrKISj8/DJXEsWqgRuTYaNE9Bv0JGhTZUzHDlMk18IpOuoqw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-compilation-targets" "^7.22.15"
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-function-name" "^7.22.5"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.9"
+    "@babel/helper-split-export-declaration" "^7.22.6"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.18.9", "@babel/plugin-transform-computed-properties@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz#704cc2fd155d1c996551db8276d55b9d46e4d0aa"
-  integrity sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==
+"@babel/plugin-transform-computed-properties@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.22.5.tgz#cd1e994bf9f316bd1c2dafcd02063ec261bb3869"
+  integrity sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/template" "^7.20.7"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/template" "^7.22.5"
 
-"@babel/plugin-transform-destructuring@^7.20.2":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.7.tgz#8bda578f71620c7de7c93af590154ba331415454"
-  integrity sha512-Xwg403sRrZb81IVB79ZPqNQME23yhugYVqgTxAhT99h485F4f+GMELFhhOsscDUB7HCswepKeCKLn/GZvUKoBA==
+"@babel/plugin-transform-destructuring@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.23.0.tgz#6447aa686be48b32eaf65a73e0e2c0bd010a266c"
+  integrity sha512-vaMdgNXFkYrB+8lbgniSYWHsgqK5gjaMNcc84bMIOMRLH0L9AqYq3hwMdvnyqj1OPqea8UtjPEuS/DCenah1wg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-destructuring@^7.21.3":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz#73b46d0fd11cd6ef57dea8a381b1215f4959d401"
-  integrity sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==
+"@babel/plugin-transform-dotall-regex@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.22.5.tgz#dbb4f0e45766eb544e193fb00e65a1dd3b2a4165"
+  integrity sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-dotall-regex@^7.18.6", "@babel/plugin-transform-dotall-regex@^7.4.4":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz#b286b3e7aae6c7b861e45bed0a2fafd6b1a4fef8"
-  integrity sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==
+"@babel/plugin-transform-duplicate-keys@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.22.5.tgz#b6e6428d9416f5f0bba19c70d1e6e7e0b88ab285"
+  integrity sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-duplicate-keys@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz#687f15ee3cdad6d85191eb2a372c4528eaa0ae0e"
-  integrity sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==
+"@babel/plugin-transform-dynamic-import@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.11.tgz#2c7722d2a5c01839eaf31518c6ff96d408e447aa"
+  integrity sha512-g/21plo58sfteWjaO0ZNVb+uEOkJNjAaHhbejrnBmu011l/eNDScmkbjCC3l4FKb10ViaGU4aOkFznSu2zRHgA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
 
-"@babel/plugin-transform-exponentiation-operator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz#421c705f4521888c65e91fdd1af951bfefd4dacd"
-  integrity sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==
+"@babel/plugin-transform-exponentiation-operator@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.22.5.tgz#402432ad544a1f9a480da865fda26be653e48f6a"
+  integrity sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g==
   dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-export-namespace-from@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.11.tgz#b3c84c8f19880b6c7440108f8929caf6056db26c"
+  integrity sha512-xa7aad7q7OiT8oNZ1mU7NrISjlSkVdMbNxn9IuLZyL9AJEhs1Apba3I+u5riX1dIkdptP5EKDG5XDPByWxtehw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
 "@babel/plugin-transform-flow-strip-types@^7.18.6":
   version "7.21.0"
@@ -887,45 +1016,61 @@
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-flow" "^7.18.6"
 
-"@babel/plugin-transform-for-of@^7.18.8", "@babel/plugin-transform-for-of@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.0.tgz#964108c9988de1a60b4be2354a7d7e245f36e86e"
-  integrity sha512-LlUYlydgDkKpIY7mcBWvyPPmMcOphEyYA27Ef4xpbh1IiDNLr0kZsos2nf92vz3IccvJI25QUwp86Eo5s6HmBQ==
+"@babel/plugin-transform-for-of@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.15.tgz#f64b4ccc3a4f131a996388fae7680b472b306b29"
+  integrity sha512-me6VGeHsx30+xh9fbDLLPi0J1HzmeIIyenoOQHuw2D4m2SAU3NrspX5XxJLBpqn5yrLzrlw2Iy3RA//Bx27iOA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-function-name@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz#cc354f8234e62968946c61a46d6365440fc764e0"
-  integrity sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==
+"@babel/plugin-transform-function-name@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.22.5.tgz#935189af68b01898e0d6d99658db6b164205c143"
+  integrity sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.18.9"
-    "@babel/helper-function-name" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-compilation-targets" "^7.22.5"
+    "@babel/helper-function-name" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-literals@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz#72796fdbef80e56fba3c6a699d54f0de557444bc"
-  integrity sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==
+"@babel/plugin-transform-json-strings@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.11.tgz#689a34e1eed1928a40954e37f74509f48af67835"
+  integrity sha512-CxT5tCqpA9/jXFlme9xIBCc5RPtdDq3JpkkhgHQqtDdiTnTI0jtZ0QzXhr5DILeYifDPp2wvY2ad+7+hLMW5Pw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-transform-member-expression-literals@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz#ac9fdc1a118620ac49b7e7a5d2dc177a1bfee88e"
-  integrity sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==
+"@babel/plugin-transform-literals@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.22.5.tgz#e9341f4b5a167952576e23db8d435849b1dd7920"
+  integrity sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-logical-assignment-operators@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.11.tgz#24c522a61688bde045b7d9bc3c2597a4d948fc9c"
+  integrity sha512-qQwRTP4+6xFCDV5k7gZBF3C31K34ut0tbEcTKxlX/0KXxm9GLcO14p570aWxFvVzx6QAfPgq7gaeIHXJC8LswQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/plugin-transform-modules-amd@^7.19.6", "@babel/plugin-transform-modules-amd@^7.20.11":
-  version "7.20.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz#3daccca8e4cc309f03c3a0c4b41dc4b26f55214a"
-  integrity sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==
+"@babel/plugin-transform-member-expression-literals@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.22.5.tgz#4fcc9050eded981a468347dd374539ed3e058def"
+  integrity sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew==
   dependencies:
-    "@babel/helper-module-transforms" "^7.20.11"
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-modules-commonjs@^7.13.8", "@babel/plugin-transform-modules-commonjs@^7.19.6", "@babel/plugin-transform-modules-commonjs@^7.21.2":
+"@babel/plugin-transform-modules-amd@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.23.0.tgz#05b2bc43373faa6d30ca89214731f76f966f3b88"
+  integrity sha512-xWT5gefv2HGSm4QHtgc1sYPbseOyf+FFDo2JbpE25GWl5BqTGO9IMwTYJRoIdjsF85GE+VegHxSCUt5EvoYTAw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.23.0"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-modules-commonjs@^7.13.8":
   version "7.21.2"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz#6ff5070e71e3192ef2b7e39820a06fb78e3058e7"
   integrity sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==
@@ -934,67 +1079,131 @@
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/helper-simple-access" "^7.20.2"
 
-"@babel/plugin-transform-modules-systemjs@^7.19.6", "@babel/plugin-transform-modules-systemjs@^7.20.11":
-  version "7.20.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz#467ec6bba6b6a50634eea61c9c232654d8a4696e"
-  integrity sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==
+"@babel/plugin-transform-modules-commonjs@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.0.tgz#b3dba4757133b2762c00f4f94590cf6d52602481"
+  integrity sha512-32Xzss14/UVc7k9g775yMIvkVK8xwKE0DPdP5JTapr3+Z9w4tzeOuLNY6BXDQR6BdnzIlXnCGAzsk/ICHBLVWQ==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-module-transforms" "^7.20.11"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/helper-module-transforms" "^7.23.0"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-simple-access" "^7.22.5"
 
-"@babel/plugin-transform-modules-umd@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz#81d3832d6034b75b54e62821ba58f28ed0aab4b9"
-  integrity sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==
+"@babel/plugin-transform-modules-systemjs@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.0.tgz#77591e126f3ff4132a40595a6cccd00a6b60d160"
+  integrity sha512-qBej6ctXZD2f+DhlOC9yO47yEYgUh5CZNz/aBoH4j/3NOlRfJXJbY7xDQCqQVf9KbrqGzIWER1f23doHGrIHFg==
   dependencies:
-    "@babel/helper-module-transforms" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.23.0"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.19.1", "@babel/plugin-transform-named-capturing-groups-regex@^7.20.5":
-  version "7.20.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz#626298dd62ea51d452c3be58b285d23195ba69a8"
-  integrity sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==
+"@babel/plugin-transform-modules-umd@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.22.5.tgz#4694ae40a87b1745e3775b6a7fe96400315d4f98"
+  integrity sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.20.5"
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-new-target@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz#d128f376ae200477f37c4ddfcc722a8a1b3246a8"
-  integrity sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==
+"@babel/plugin-transform-named-capturing-groups-regex@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz#67fe18ee8ce02d57c855185e27e3dc959b2e991f"
+  integrity sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-object-super@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
-  integrity sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==
+"@babel/plugin-transform-new-target@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.5.tgz#1b248acea54ce44ea06dfd37247ba089fcf9758d"
+  integrity sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/helper-replace-supers" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-parameters@^7.20.1", "@babel/plugin-transform-parameters@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.7.tgz#0ee349e9d1bc96e78e3b37a7af423a4078a7083f"
-  integrity sha512-WiWBIkeHKVOSYPO0pWkxGPfKeWrCJyD3NJ53+Lrp/QMSZbsVPovrVl2aWZ19D/LTVnaDv5Ap7GJ/B2CTOZdrfA==
+"@babel/plugin-transform-nullish-coalescing-operator@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.11.tgz#debef6c8ba795f5ac67cd861a81b744c5d38d9fc"
+  integrity sha512-YZWOw4HxXrotb5xsjMJUDlLgcDXSfO9eCmdl1bgW4+/lAGdkjaEvOnQ4p5WKKdUgSzO39dgPl0pTnfxm0OAXcg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
-"@babel/plugin-transform-parameters@^7.21.3":
-  version "7.21.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz#18fc4e797cf6d6d972cb8c411dbe8a809fa157db"
-  integrity sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ==
+"@babel/plugin-transform-numeric-separator@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.11.tgz#498d77dc45a6c6db74bb829c02a01c1d719cbfbd"
+  integrity sha512-3dzU4QGPsILdJbASKhF/V2TVP+gJya1PsueQCxIPCEcerqF21oEcrob4mzjsp2Py/1nLfF5m+xYNMDpmA8vffg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-transform-property-literals@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz#e22498903a483448e94e032e9bbb9c5ccbfc93a3"
-  integrity sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==
+"@babel/plugin-transform-object-rest-spread@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.15.tgz#21a95db166be59b91cde48775310c0df6e1da56f"
+  integrity sha512-fEB+I1+gAmfAyxZcX1+ZUwLeAuuf8VIg67CTznZE0MqVFumWkh8xWtn58I4dxdVf080wn7gzWoF8vndOViJe9Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/compat-data" "^7.22.9"
+    "@babel/helper-compilation-targets" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.22.15"
+
+"@babel/plugin-transform-object-super@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.22.5.tgz#794a8d2fcb5d0835af722173c1a9d704f44e218c"
+  integrity sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.5"
+
+"@babel/plugin-transform-optional-catch-binding@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.11.tgz#461cc4f578a127bb055527b3e77404cad38c08e0"
+  integrity sha512-rli0WxesXUeCJnMYhzAglEjLWVDF6ahb45HuprcmQuLidBJFWjNnOzssk2kuc6e33FlLaiZhG/kUIzUMWdBKaQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
+"@babel/plugin-transform-optional-chaining@^7.22.15", "@babel/plugin-transform-optional-chaining@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.0.tgz#73ff5fc1cf98f542f09f29c0631647d8ad0be158"
+  integrity sha512-sBBGXbLJjxTzLBF5rFWaikMnOGOk/BmK6vVByIdEggZ7Vn6CvWXZyRkkLFK6WE0IF8jSliyOkUN6SScFgzCM0g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
+"@babel/plugin-transform-parameters@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.15.tgz#719ca82a01d177af358df64a514d64c2e3edb114"
+  integrity sha512-hjk7qKIqhyzhhUvRT683TYQOFa/4cQKwQy7ALvTpODswN40MljzNDa0YldevS6tGbxwaEKVn502JmY0dP7qEtQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-private-methods@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.22.5.tgz#21c8af791f76674420a147ae62e9935d790f8722"
+  integrity sha512-PPjh4gyrQnGe97JTalgRGMuU4icsZFnWkzicB/fUtzlKUqvsWBKEpPPfr5a2JiyirZkHxnAqkQMO5Z5B2kK3fA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-private-property-in-object@^7.22.11":
+  version "7.22.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.11.tgz#ad45c4fc440e9cb84c718ed0906d96cf40f9a4e1"
+  integrity sha512-sSCbqZDBKHetvjSwpyWzhuHkmW5RummxJBVbYLkGkaiTOWGxml7SXt0iWa03bzxFIx7wOj3g/ILRd0RcJKBeSQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.22.11"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
+"@babel/plugin-transform-property-literals@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.22.5.tgz#b5ddabd73a4f7f26cd0e20f5db48290b88732766"
+  integrity sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/plugin-transform-react-jsx-self@^7.18.6":
   version "7.21.0"
@@ -1010,67 +1219,56 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.19.0"
 
-"@babel/plugin-transform-react-jsx@^7.19.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.21.0.tgz#656b42c2fdea0a6d8762075d58ef9d4e3c4ab8a2"
-  integrity sha512-6OAWljMvQrZjR2DaNhVfRz6dkCAVV+ymcLUmaf8bccGOHn2v5rHJK3tTpij0BuhdYWP4LLaqj5lwcdlpAAPuvg==
+"@babel/plugin-transform-regenerator@^7.22.10":
+  version "7.22.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.10.tgz#8ceef3bd7375c4db7652878b0241b2be5d0c3cca"
+  integrity sha512-F28b1mDt8KcT5bUyJc/U9nwzw6cV+UmTeRlXYIl2TNqMMJif0Jeey9/RQ3C4NOd2zp0/TRsDns9ttj2L523rsw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-jsx" "^7.18.6"
-    "@babel/types" "^7.21.0"
-
-"@babel/plugin-transform-regenerator@^7.18.6", "@babel/plugin-transform-regenerator@^7.20.5":
-  version "7.20.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.20.5.tgz#57cda588c7ffb7f4f8483cc83bdcea02a907f04d"
-  integrity sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    regenerator-transform "^0.15.1"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    regenerator-transform "^0.15.2"
 
-"@babel/plugin-transform-reserved-words@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz#b1abd8ebf8edaa5f7fe6bbb8d2133d23b6a6f76a"
-  integrity sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==
+"@babel/plugin-transform-reserved-words@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.22.5.tgz#832cd35b81c287c4bcd09ce03e22199641f964fb"
+  integrity sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-shorthand-properties@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9"
-  integrity sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==
+"@babel/plugin-transform-shorthand-properties@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.22.5.tgz#6e277654be82b5559fc4b9f58088507c24f0c624"
+  integrity sha512-vM4fq9IXHscXVKzDv5itkO1X52SmdFBFcMIBZ2FRn2nqVYqw6dBexUgMvAjHW+KXpPPViD/Yo3GrDEBaRC0QYA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-spread@^7.19.0", "@babel/plugin-transform-spread@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz#c2d83e0b99d3bf83e07b11995ee24bf7ca09401e"
-  integrity sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==
+"@babel/plugin-transform-spread@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.22.5.tgz#6487fd29f229c95e284ba6c98d65eafb893fea6b"
+  integrity sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
 
-"@babel/plugin-transform-sticky-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz#c6706eb2b1524028e317720339583ad0f444adcc"
-  integrity sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==
+"@babel/plugin-transform-sticky-regex@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.22.5.tgz#295aba1595bfc8197abd02eae5fc288c0deb26aa"
+  integrity sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-template-literals@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e"
-  integrity sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==
+"@babel/plugin-transform-template-literals@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.22.5.tgz#8f38cf291e5f7a8e60e9f733193f0bcc10909bff"
+  integrity sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-typeof-symbol@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz#c8cea68263e45addcd6afc9091429f80925762c0"
-  integrity sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==
+"@babel/plugin-transform-typeof-symbol@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.22.5.tgz#5e2ba478da4b603af8673ff7c54f75a97b716b34"
+  integrity sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/plugin-transform-typescript@^7.21.0":
   version "7.21.0"
@@ -1081,134 +1279,57 @@
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-typescript" "^7.20.0"
 
-"@babel/plugin-transform-unicode-escapes@^7.18.10":
-  version "7.18.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz#1ecfb0eda83d09bbcb77c09970c2dd55832aa246"
-  integrity sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-
-"@babel/plugin-transform-unicode-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz#194317225d8c201bbae103364ffe9e2cea36cdca"
-  integrity sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
-"@babel/preset-env@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.20.2.tgz#9b1642aa47bb9f43a86f9630011780dab7f86506"
-  integrity sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==
-  dependencies:
-    "@babel/compat-data" "^7.20.1"
-    "@babel/helper-compilation-targets" "^7.20.0"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-validator-option" "^7.18.6"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9"
-    "@babel/plugin-proposal-async-generator-functions" "^7.20.1"
-    "@babel/plugin-proposal-class-properties" "^7.18.6"
-    "@babel/plugin-proposal-class-static-block" "^7.18.6"
-    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
-    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
-    "@babel/plugin-proposal-json-strings" "^7.18.6"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.18.9"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
-    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
-    "@babel/plugin-proposal-object-rest-spread" "^7.20.2"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
-    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
-    "@babel/plugin-proposal-private-methods" "^7.18.6"
-    "@babel/plugin-proposal-private-property-in-object" "^7.18.6"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-class-properties" "^7.12.13"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-import-assertions" "^7.20.0"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-    "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-transform-arrow-functions" "^7.18.6"
-    "@babel/plugin-transform-async-to-generator" "^7.18.6"
-    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
-    "@babel/plugin-transform-block-scoping" "^7.20.2"
-    "@babel/plugin-transform-classes" "^7.20.2"
-    "@babel/plugin-transform-computed-properties" "^7.18.9"
-    "@babel/plugin-transform-destructuring" "^7.20.2"
-    "@babel/plugin-transform-dotall-regex" "^7.18.6"
-    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
-    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
-    "@babel/plugin-transform-for-of" "^7.18.8"
-    "@babel/plugin-transform-function-name" "^7.18.9"
-    "@babel/plugin-transform-literals" "^7.18.9"
-    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
-    "@babel/plugin-transform-modules-amd" "^7.19.6"
-    "@babel/plugin-transform-modules-commonjs" "^7.19.6"
-    "@babel/plugin-transform-modules-systemjs" "^7.19.6"
-    "@babel/plugin-transform-modules-umd" "^7.18.6"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.19.1"
-    "@babel/plugin-transform-new-target" "^7.18.6"
-    "@babel/plugin-transform-object-super" "^7.18.6"
-    "@babel/plugin-transform-parameters" "^7.20.1"
-    "@babel/plugin-transform-property-literals" "^7.18.6"
-    "@babel/plugin-transform-regenerator" "^7.18.6"
-    "@babel/plugin-transform-reserved-words" "^7.18.6"
-    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
-    "@babel/plugin-transform-spread" "^7.19.0"
-    "@babel/plugin-transform-sticky-regex" "^7.18.6"
-    "@babel/plugin-transform-template-literals" "^7.18.9"
-    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
-    "@babel/plugin-transform-unicode-escapes" "^7.18.10"
-    "@babel/plugin-transform-unicode-regex" "^7.18.6"
-    "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.20.2"
-    babel-plugin-polyfill-corejs2 "^0.3.3"
-    babel-plugin-polyfill-corejs3 "^0.6.0"
-    babel-plugin-polyfill-regenerator "^0.4.1"
-    core-js-compat "^3.25.1"
-    semver "^6.3.0"
-
-"@babel/preset-env@~7.21.0":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.21.4.tgz#a952482e634a8dd8271a3fe5459a16eb10739c58"
-  integrity sha512-2W57zHs2yDLm6GD5ZpvNn71lZ0B/iypSdIeq25OurDKji6AdzV07qp4s3n1/x5BqtiGaTrPN3nerlSCaC5qNTw==
-  dependencies:
-    "@babel/compat-data" "^7.21.4"
-    "@babel/helper-compilation-targets" "^7.21.4"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-validator-option" "^7.21.0"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.20.7"
-    "@babel/plugin-proposal-async-generator-functions" "^7.20.7"
-    "@babel/plugin-proposal-class-properties" "^7.18.6"
-    "@babel/plugin-proposal-class-static-block" "^7.21.0"
-    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
-    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
-    "@babel/plugin-proposal-json-strings" "^7.18.6"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.20.7"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
-    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
-    "@babel/plugin-proposal-object-rest-spread" "^7.20.7"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
-    "@babel/plugin-proposal-optional-chaining" "^7.21.0"
-    "@babel/plugin-proposal-private-methods" "^7.18.6"
-    "@babel/plugin-proposal-private-property-in-object" "^7.21.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
+"@babel/plugin-transform-unicode-escapes@^7.22.10":
+  version "7.22.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.10.tgz#c723f380f40a2b2f57a62df24c9005834c8616d9"
+  integrity sha512-lRfaRKGZCBqDlRU3UIFovdp9c9mEvlylmpod0/OatICsSfuQ9YFthRo1tpTkGsklEefZdqlEFdY4A2dwTb6ohg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-unicode-property-regex@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.22.5.tgz#098898f74d5c1e86660dc112057b2d11227f1c81"
+  integrity sha512-HCCIb+CbJIAE6sXn5CjFQXMwkCClcOfPCzTlilJ8cUatfzwHlWQkbtV0zD338u9dZskwvuOYTuuaMaA8J5EI5A==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-unicode-regex@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.22.5.tgz#ce7e7bb3ef208c4ff67e02a22816656256d7a183"
+  integrity sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/plugin-transform-unicode-sets-regex@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.5.tgz#77788060e511b708ffc7d42fdfbc5b37c3004e91"
+  integrity sha512-lhMfi4FC15j13eKrh3DnYHjpGj6UKQHtNKTbtc1igvAhRy4+kLhV07OpLcsN0VgDEw/MjAvJO4BdMJsHwMhzCg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.22.5"
+
+"@babel/preset-env@^7.22.9":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.23.2.tgz#1f22be0ff0e121113260337dbc3e58fafce8d059"
+  integrity sha512-BW3gsuDD+rvHL2VO2SjAUNTBe5YrjsTiDyqamPDWY723na3/yPQ65X5oQkFVJZ0o50/2d+svm1rkPoJeR1KxVQ==
+  dependencies:
+    "@babel/compat-data" "^7.23.2"
+    "@babel/helper-compilation-targets" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-validator-option" "^7.22.15"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.22.15"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.22.15"
+    "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
     "@babel/plugin-syntax-class-properties" "^7.12.13"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-import-assertions" "^7.20.0"
+    "@babel/plugin-syntax-import-assertions" "^7.22.5"
+    "@babel/plugin-syntax-import-attributes" "^7.22.5"
+    "@babel/plugin-syntax-import-meta" "^7.10.4"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
@@ -1218,45 +1339,62 @@
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
     "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-transform-arrow-functions" "^7.20.7"
-    "@babel/plugin-transform-async-to-generator" "^7.20.7"
-    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
-    "@babel/plugin-transform-block-scoping" "^7.21.0"
-    "@babel/plugin-transform-classes" "^7.21.0"
-    "@babel/plugin-transform-computed-properties" "^7.20.7"
-    "@babel/plugin-transform-destructuring" "^7.21.3"
-    "@babel/plugin-transform-dotall-regex" "^7.18.6"
-    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
-    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
-    "@babel/plugin-transform-for-of" "^7.21.0"
-    "@babel/plugin-transform-function-name" "^7.18.9"
-    "@babel/plugin-transform-literals" "^7.18.9"
-    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
-    "@babel/plugin-transform-modules-amd" "^7.20.11"
-    "@babel/plugin-transform-modules-commonjs" "^7.21.2"
-    "@babel/plugin-transform-modules-systemjs" "^7.20.11"
-    "@babel/plugin-transform-modules-umd" "^7.18.6"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.20.5"
-    "@babel/plugin-transform-new-target" "^7.18.6"
-    "@babel/plugin-transform-object-super" "^7.18.6"
-    "@babel/plugin-transform-parameters" "^7.21.3"
-    "@babel/plugin-transform-property-literals" "^7.18.6"
-    "@babel/plugin-transform-regenerator" "^7.20.5"
-    "@babel/plugin-transform-reserved-words" "^7.18.6"
-    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
-    "@babel/plugin-transform-spread" "^7.20.7"
-    "@babel/plugin-transform-sticky-regex" "^7.18.6"
-    "@babel/plugin-transform-template-literals" "^7.18.9"
-    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
-    "@babel/plugin-transform-unicode-escapes" "^7.18.10"
-    "@babel/plugin-transform-unicode-regex" "^7.18.6"
-    "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.21.4"
-    babel-plugin-polyfill-corejs2 "^0.3.3"
-    babel-plugin-polyfill-corejs3 "^0.6.0"
-    babel-plugin-polyfill-regenerator "^0.4.1"
-    core-js-compat "^3.25.1"
-    semver "^6.3.0"
+    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.22.5"
+    "@babel/plugin-transform-async-generator-functions" "^7.23.2"
+    "@babel/plugin-transform-async-to-generator" "^7.22.5"
+    "@babel/plugin-transform-block-scoped-functions" "^7.22.5"
+    "@babel/plugin-transform-block-scoping" "^7.23.0"
+    "@babel/plugin-transform-class-properties" "^7.22.5"
+    "@babel/plugin-transform-class-static-block" "^7.22.11"
+    "@babel/plugin-transform-classes" "^7.22.15"
+    "@babel/plugin-transform-computed-properties" "^7.22.5"
+    "@babel/plugin-transform-destructuring" "^7.23.0"
+    "@babel/plugin-transform-dotall-regex" "^7.22.5"
+    "@babel/plugin-transform-duplicate-keys" "^7.22.5"
+    "@babel/plugin-transform-dynamic-import" "^7.22.11"
+    "@babel/plugin-transform-exponentiation-operator" "^7.22.5"
+    "@babel/plugin-transform-export-namespace-from" "^7.22.11"
+    "@babel/plugin-transform-for-of" "^7.22.15"
+    "@babel/plugin-transform-function-name" "^7.22.5"
+    "@babel/plugin-transform-json-strings" "^7.22.11"
+    "@babel/plugin-transform-literals" "^7.22.5"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.22.11"
+    "@babel/plugin-transform-member-expression-literals" "^7.22.5"
+    "@babel/plugin-transform-modules-amd" "^7.23.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.23.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.23.0"
+    "@babel/plugin-transform-modules-umd" "^7.22.5"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.5"
+    "@babel/plugin-transform-new-target" "^7.22.5"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.22.11"
+    "@babel/plugin-transform-numeric-separator" "^7.22.11"
+    "@babel/plugin-transform-object-rest-spread" "^7.22.15"
+    "@babel/plugin-transform-object-super" "^7.22.5"
+    "@babel/plugin-transform-optional-catch-binding" "^7.22.11"
+    "@babel/plugin-transform-optional-chaining" "^7.23.0"
+    "@babel/plugin-transform-parameters" "^7.22.15"
+    "@babel/plugin-transform-private-methods" "^7.22.5"
+    "@babel/plugin-transform-private-property-in-object" "^7.22.11"
+    "@babel/plugin-transform-property-literals" "^7.22.5"
+    "@babel/plugin-transform-regenerator" "^7.22.10"
+    "@babel/plugin-transform-reserved-words" "^7.22.5"
+    "@babel/plugin-transform-shorthand-properties" "^7.22.5"
+    "@babel/plugin-transform-spread" "^7.22.5"
+    "@babel/plugin-transform-sticky-regex" "^7.22.5"
+    "@babel/plugin-transform-template-literals" "^7.22.5"
+    "@babel/plugin-transform-typeof-symbol" "^7.22.5"
+    "@babel/plugin-transform-unicode-escapes" "^7.22.10"
+    "@babel/plugin-transform-unicode-property-regex" "^7.22.5"
+    "@babel/plugin-transform-unicode-regex" "^7.22.5"
+    "@babel/plugin-transform-unicode-sets-regex" "^7.22.5"
+    "@babel/preset-modules" "0.1.6-no-external-plugins"
+    "@babel/types" "^7.23.0"
+    babel-plugin-polyfill-corejs2 "^0.4.6"
+    babel-plugin-polyfill-corejs3 "^0.8.5"
+    babel-plugin-polyfill-regenerator "^0.5.3"
+    core-js-compat "^3.31.0"
+    semver "^6.3.1"
 
 "@babel/preset-flow@^7.13.13":
   version "7.18.6"
@@ -1267,14 +1405,12 @@
     "@babel/helper-validator-option" "^7.18.6"
     "@babel/plugin-transform-flow-strip-types" "^7.18.6"
 
-"@babel/preset-modules@^0.1.5":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.5.tgz#ef939d6e7f268827e1841638dc6ff95515e115d9"
-  integrity sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==
+"@babel/preset-modules@0.1.6-no-external-plugins":
+  version "0.1.6-no-external-plugins"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz#ccb88a2c49c817236861fee7826080573b8a923a"
+  integrity sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
-    "@babel/plugin-transform-dotall-regex" "^7.4.4"
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
@@ -1318,6 +1454,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.13.10":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.22.10":
   version "7.22.11"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4"
@@ -1325,7 +1468,7 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
+"@babel/template@^7.20.7", "@babel/template@^7.3.3":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
   integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
@@ -1343,7 +1486,16 @@
     "@babel/parser" "^7.21.9"
     "@babel/types" "^7.21.5"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.1.6", "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.7.0", "@babel/traverse@~7.21.2":
+"@babel/template@^7.22.15", "@babel/template@^7.22.5":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
+  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
+  dependencies:
+    "@babel/code-frame" "^7.22.13"
+    "@babel/parser" "^7.22.15"
+    "@babel/types" "^7.22.15"
+
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.7.0":
   version "7.21.2"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.2.tgz#ac7e1f27658750892e815e60ae90f382a46d8e75"
   integrity sha512-ts5FFU/dSUPS13tv8XiEObDu9K+iagEKME9kAbaP7r0Y9KtZJZ+NGndDvWoRAYNpeWafbpFeki3q9QoMD6gxyw==
@@ -1359,6 +1511,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.18.9", "@babel/traverse@^7.22.8", "@babel/traverse@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8"
+  integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==
+  dependencies:
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.0"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/parser" "^7.23.0"
+    "@babel/types" "^7.23.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/traverse@^7.22.1":
   version "7.22.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.4.tgz#c3cf96c5c290bd13b55e29d025274057727664c0"
@@ -1375,7 +1543,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.2.0", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.5", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@~7.21.2":
+"@babel/types@^7.0.0", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.21.2"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.2.tgz#92246f6e00f91755893c2876ad653db70c8310d1"
   integrity sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==
@@ -1402,6 +1570,15 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb"
+  integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
 "@base2/pretty-print-object@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@@ -1750,11 +1927,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.11.tgz#52c3e6cabc19c5e4c1c0c01cb58f0442338e1c14"
   integrity sha512-QnK4d/zhVTuV4/pRM4HUjcsbl43POALU2zvBynmrrqZt9LPcLA3x1fTZPBg2RRguBQnJcnU059yKr+bydkntjg==
 
-"@esbuild/android-arm64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.17.tgz#164b054d58551f8856285f386e1a8f45d9ba3a31"
-  integrity sha512-jaJ5IlmaDLFPNttv0ofcwy/cfeY4bh/n705Tgh+eLObbGtQBK3EPAu+CzL95JVE4nFAliyrnEu0d32Q5foavqg==
-
 "@esbuild/android-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
@@ -1765,11 +1937,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.17.11.tgz#f3fc768235aecbeb840d0049fdf13cd28592105f"
   integrity sha512-CdyX6sRVh1NzFCsf5vw3kULwlAhfy9wVt8SZlrhQ7eL2qBjGbFhRBWkkAzuZm9IIEOCKJw4DXA6R85g+qc8RDw==
 
-"@esbuild/android-arm@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.17.17.tgz#1b3b5a702a69b88deef342a7a80df4c894e4f065"
-  integrity sha512-E6VAZwN7diCa3labs0GYvhEPL2M94WLF8A+czO8hfjREXxba8Ng7nM5VxV+9ihNXIY1iQO1XxUU4P7hbqbICxg==
-
 "@esbuild/android-arm@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
@@ -1780,11 +1947,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.17.11.tgz#443ed47771a7e917e4282469ba350d117473550c"
   integrity sha512-3PL3HKtsDIXGQcSCKtWD/dy+mgc4p2Tvo2qKgKHj9Yf+eniwFnuoQ0OUhlSfAEpKAFzF9N21Nwgnap6zy3L3MQ==
 
-"@esbuild/android-x64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.17.17.tgz#6781527e3c4ea4de532b149d18a2167f06783e7f"
-  integrity sha512-446zpfJ3nioMC7ASvJB1pszHVskkw4u/9Eu8s5yvvsSDTzYh4p4ZIRj0DznSl3FBF0Z/mZfrKXTtt0QCoFmoHA==
-
 "@esbuild/android-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
@@ -1795,11 +1957,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.17.11.tgz#0e8c78d94d5759a48521dbfd83189d2ed3499a16"
   integrity sha512-pJ950bNKgzhkGNO3Z9TeHzIFtEyC2GDQL3wxkMApDEghYx5Qers84UTNc1bAxWbRkuJOgmOha5V0WUeh8G+YGw==
 
-"@esbuild/darwin-arm64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.17.17.tgz#c5961ef4d3c1cc80dafe905cc145b5a71d2ac196"
-  integrity sha512-m/gwyiBwH3jqfUabtq3GH31otL/0sE0l34XKpSIqR7NjQ/XHQ3lpmQHLHbG8AHTGCw8Ao059GvV08MS0bhFIJQ==
-
 "@esbuild/darwin-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
@@ -1810,11 +1967,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.17.11.tgz#2405cfdf70eb961c7cf973463ca7263dc2004c88"
   integrity sha512-iB0dQkIHXyczK3BZtzw1tqegf0F0Ab5texX2TvMQjiJIWXAfM4FQl7D909YfXWnB92OQz4ivBYQ2RlxBJrMJOw==
 
-"@esbuild/darwin-x64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.17.17.tgz#b81f3259cc349691f67ae30f7b333a53899b3c20"
-  integrity sha512-4utIrsX9IykrqYaXR8ob9Ha2hAY2qLc6ohJ8c0CN1DR8yWeMrTgYFjgdeQ9LIoTOfLetXjuCu5TRPHT9yKYJVg==
-
 "@esbuild/darwin-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
@@ -1825,11 +1977,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.11.tgz#d5138e873e15f87bd4564c024dfa00ef37e623fd"
   integrity sha512-7EFzUADmI1jCHeDRGKgbnF5sDIceZsQGapoO6dmw7r/ZBEKX7CCDnIz8m9yEclzr7mFsd+DyasHzpjfJnmBB1Q==
 
-"@esbuild/freebsd-arm64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.17.tgz#db846ad16cf916fd3acdda79b85ea867cb100e87"
-  integrity sha512-4PxjQII/9ppOrpEwzQ1b0pXCsFLqy77i0GaHodrmzH9zq2/NEhHMAMJkJ635Ns4fyJPFOlHMz4AsklIyRqFZWA==
-
 "@esbuild/freebsd-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
@@ -1840,11 +1987,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.17.11.tgz#e850b58b8fabf8e9ef0e125af3c25229ad2d6c38"
   integrity sha512-iPgenptC8i8pdvkHQvXJFzc1eVMR7W2lBPrTE6GbhR54sLcF42mk3zBOjKPOodezzuAz/KSu8CPyFSjcBMkE9g==
 
-"@esbuild/freebsd-x64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.17.17.tgz#4dd99acbaaba00949d509e7c144b1b6ef9e1815b"
-  integrity sha512-lQRS+4sW5S3P1sv0z2Ym807qMDfkmdhUYX30GRBURtLTrJOPDpoU0kI6pVz1hz3U0+YQ0tXGS9YWveQjUewAJw==
-
 "@esbuild/freebsd-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
@@ -1855,11 +1997,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.17.11.tgz#2bfb93d0809ec2357c12ebb27736b750c9ae0aa5"
   integrity sha512-Qxth3gsWWGKz2/qG2d5DsW/57SeA2AmpSMhdg9TSB5Svn2KDob3qxfQSkdnWjSd42kqoxIPy3EJFs+6w1+6Qjg==
 
-"@esbuild/linux-arm64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.17.17.tgz#7f9274140b2bb9f4230dbbfdf5dc2761215e30f6"
-  integrity sha512-2+pwLx0whKY1/Vqt8lyzStyda1v0qjJ5INWIe+d8+1onqQxHLLi3yr5bAa4gvbzhZqBztifYEu8hh1La5+7sUw==
-
 "@esbuild/linux-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
@@ -1870,11 +2007,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.17.11.tgz#e56fb3b76828317a704f4a167c5bd790fe5314e7"
   integrity sha512-M9iK/d4lgZH0U5M1R2p2gqhPV/7JPJcRz+8O8GBKVgqndTzydQ7B2XGDbxtbvFkvIs53uXTobOhv+RyaqhUiMg==
 
-"@esbuild/linux-arm@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.17.17.tgz#5c8e44c2af056bb2147cf9ad13840220bcb8948b"
-  integrity sha512-biDs7bjGdOdcmIk6xU426VgdRUpGg39Yz6sT9Xp23aq+IEHDb/u5cbmu/pAANpDB4rZpY/2USPhCA+w9t3roQg==
-
 "@esbuild/linux-arm@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
@@ -1885,11 +2017,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.17.11.tgz#59fa1c49b271793d14eb5effc757e8c0d0cb2cab"
   integrity sha512-dB1nGaVWtUlb/rRDHmuDQhfqazWE0LMro/AIbT2lWM3CDMHJNpLckH+gCddQyhhcLac2OYw69ikUMO34JLt3wA==
 
-"@esbuild/linux-ia32@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.17.17.tgz#18a6b3798658be7f46e9873fa0c8d4bec54c9212"
-  integrity sha512-IBTTv8X60dYo6P2t23sSUYym8fGfMAiuv7PzJ+0LcdAndZRzvke+wTVxJeCq4WgjppkOpndL04gMZIFvwoU34Q==
-
 "@esbuild/linux-ia32@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
@@ -1900,11 +2027,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.17.11.tgz#89575bc189099c03a36daa54f3f481780c7fd502"
   integrity sha512-aCWlq70Q7Nc9WDnormntGS1ar6ZFvUpqr8gXtO+HRejRYPweAFQN615PcgaSJkZjhHp61+MNLhzyVALSF2/Q0g==
 
-"@esbuild/linux-loong64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.17.17.tgz#a8d93514a47f7b4232716c9f02aeb630bae24c40"
-  integrity sha512-WVMBtcDpATjaGfWfp6u9dANIqmU9r37SY8wgAivuKmgKHE+bWSuv0qXEFt/p3qXQYxJIGXQQv6hHcm7iWhWjiw==
-
 "@esbuild/linux-loong64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
@@ -1915,11 +2037,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.17.11.tgz#0e18ca039dc7e4645efd8edc1b10952933eb6b1b"
   integrity sha512-cGeGNdQxqY8qJwlYH1BP6rjIIiEcrM05H7k3tR7WxOLmD1ZxRMd6/QIOWMb8mD2s2YJFNRuNQ+wjMhgEL2oCEw==
 
-"@esbuild/linux-mips64el@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.17.17.tgz#4784efb1c3f0eac8133695fa89253d558149ee1b"
-  integrity sha512-2kYCGh8589ZYnY031FgMLy0kmE4VoGdvfJkxLdxP4HJvWNXpyLhjOvxVsYjYZ6awqY4bgLR9tpdYyStgZZhi2A==
-
 "@esbuild/linux-mips64el@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
@@ -1930,11 +2047,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.17.11.tgz#2d152cb3a253afb8c100a165ad132dc96f36cb11"
   integrity sha512-BdlziJQPW/bNe0E8eYsHB40mYOluS+jULPCjlWiHzDgr+ZBRXPtgMV1nkLEGdpjrwgmtkZHEGEPaKdS/8faLDA==
 
-"@esbuild/linux-ppc64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.17.17.tgz#ef6558ec5e5dd9dc16886343e0ccdb0699d70d3c"
-  integrity sha512-KIdG5jdAEeAKogfyMTcszRxy3OPbZhq0PPsW4iKKcdlbk3YE4miKznxV2YOSmiK/hfOZ+lqHri3v8eecT2ATwQ==
-
 "@esbuild/linux-ppc64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
@@ -1945,11 +2057,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.17.11.tgz#c6ac494a81221d53d65b33e665c7df1747952d3c"
   integrity sha512-MDLwQbtF+83oJCI1Cixn68Et/ME6gelmhssPebC40RdJaect+IM+l7o/CuG0ZlDs6tZTEIoxUe53H3GmMn8oMA==
 
-"@esbuild/linux-riscv64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.17.17.tgz#13a87fdbcb462c46809c9d16bcf79817ecf9ce6f"
-  integrity sha512-Cj6uWLBR5LWhcD/2Lkfg2NrkVsNb2sFM5aVEfumKB2vYetkA/9Uyc1jVoxLZ0a38sUhFk4JOVKH0aVdPbjZQeA==
-
 "@esbuild/linux-riscv64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
@@ -1960,11 +2067,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.17.11.tgz#4bad33894bc7415cea4be8fa90fe456226a424ad"
   integrity sha512-4N5EMESvws0Ozr2J94VoUD8HIRi7X0uvUv4c0wpTHZyZY9qpaaN7THjosdiW56irQ4qnJ6Lsc+i+5zGWnyqWqQ==
 
-"@esbuild/linux-s390x@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.17.17.tgz#83cb16d1d3ac0dca803b3f031ba3dc13f1ec7ade"
-  integrity sha512-lK+SffWIr0XsFf7E0srBjhpkdFVJf3HEgXCwzkm69kNbRar8MhezFpkIwpk0qo2IOQL4JE4mJPJI8AbRPLbuOQ==
-
 "@esbuild/linux-s390x@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
@@ -1975,11 +2077,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.17.11.tgz#903fda743459f530a16a6c6ee8d2c0f6c1a12fc7"
   integrity sha512-rM/v8UlluxpytFSmVdbCe1yyKQd/e+FmIJE2oPJvbBo+D0XVWi1y/NQ4iTNx+436WmDHQBjVLrbnAQLQ6U7wlw==
 
-"@esbuild/linux-x64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.17.17.tgz#7bc400568690b688e20a0c94b2faabdd89ae1a79"
-  integrity sha512-XcSGTQcWFQS2jx3lZtQi7cQmDYLrpLRyz1Ns1DzZCtn898cWfm5Icx/DEWNcTU+T+tyPV89RQtDnI7qL2PObPg==
-
 "@esbuild/linux-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
@@ -1990,11 +2087,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.17.11.tgz#b589239fe7d9b16ee03c5e191f3f5b640f1518a1"
   integrity sha512-4WaAhuz5f91h3/g43VBGdto1Q+X7VEZfpcWGtOFXnggEuLvjV+cP6DyLRU15IjiU9fKLLk41OoJfBFN5DhPvag==
 
-"@esbuild/netbsd-x64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.17.17.tgz#1b5dcfbc4bfba80e67a11e9148de836af5b58b6c"
-  integrity sha512-RNLCDmLP5kCWAJR+ItLM3cHxzXRTe4N00TQyQiimq+lyqVqZWGPAvcyfUBM0isE79eEZhIuGN09rAz8EL5KdLA==
-
 "@esbuild/netbsd-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
@@ -2005,11 +2097,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.17.11.tgz#b355019754116bef39ec688f8fd2fe6471b9779b"
   integrity sha512-UBj135Nx4FpnvtE+C8TWGp98oUgBcmNmdYgl5ToKc0mBHxVVqVE7FUS5/ELMImOp205qDAittL6Ezhasc2Ev/w==
 
-"@esbuild/openbsd-x64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.17.17.tgz#e275098902291149a5dcd012c9ea0796d6b7adff"
-  integrity sha512-PAXswI5+cQq3Pann7FNdcpSUrhrql3wKjj3gVkmuz6OHhqqYxKvi6GgRBoaHjaG22HV/ZZEgF9TlS+9ftHVigA==
-
 "@esbuild/openbsd-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
@@ -2020,11 +2107,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.17.11.tgz#2ea47fb592e68406e5025a7696dc714fc6a115dc"
   integrity sha512-1/gxTifDC9aXbV2xOfCbOceh5AlIidUrPsMpivgzo8P8zUtczlq1ncFpeN1ZyQJ9lVs2hILy1PG5KPp+w8QPPg==
 
-"@esbuild/sunos-x64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.17.17.tgz#10603474866f64986c0370a2d4fe5a2bb7fee4f5"
-  integrity sha512-V63egsWKnx/4V0FMYkr9NXWrKTB5qFftKGKuZKFIrAkO/7EWLFnbBZNM1CvJ6Sis+XBdPws2YQSHF1Gqf1oj/Q==
-
 "@esbuild/sunos-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
@@ -2035,11 +2117,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.17.11.tgz#47e6fdab17c4c52e6e0d606dd9cb843b29826325"
   integrity sha512-vtSfyx5yRdpiOW9yp6Ax0zyNOv9HjOAw8WaZg3dF5djEHKKm3UnoohftVvIJtRh0Ec7Hso0RIdTqZvPXJ7FdvQ==
 
-"@esbuild/win32-arm64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.17.17.tgz#521a6d97ee0f96b7c435930353cc4e93078f0b54"
-  integrity sha512-YtUXLdVnd6YBSYlZODjWzH+KzbaubV0YVd6UxSfoFfa5PtNJNaW+1i+Hcmjpg2nEe0YXUCNF5bkKy1NnBv1y7Q==
-
 "@esbuild/win32-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
@@ -2050,11 +2127,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.17.11.tgz#a97273aa3164c8d8f501899f55cc75a4a79599a3"
   integrity sha512-GFPSLEGQr4wHFTiIUJQrnJKZhZjjq4Sphf+mM76nQR6WkQn73vm7IsacmBRPkALfpOCHsopSvLgqdd4iUW2mYw==
 
-"@esbuild/win32-ia32@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.17.17.tgz#56f88462ebe82dad829dc2303175c0e0ccd8e38e"
-  integrity sha512-yczSLRbDdReCO74Yfc5tKG0izzm+lPMYyO1fFTcn0QNwnKmc3K+HdxZWLGKg4pZVte7XVgcFku7TIZNbWEJdeQ==
-
 "@esbuild/win32-ia32@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
@@ -2065,11 +2137,6 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.11.tgz#9be796d93ae27b636da32d960899a4912bca27a1"
   integrity sha512-N9vXqLP3eRL8BqSy8yn4Y98cZI2pZ8fyuHx6lKjiG2WABpT2l01TXdzq5Ma2ZUBzfB7tx5dXVhge8X9u0S70ZQ==
 
-"@esbuild/win32-x64@0.17.17":
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.17.tgz#2b577b976e6844106715bbe0cdc57cd1528063f9"
-  integrity sha512-FNZw7H3aqhF9OyRQbDDnzUApDXfC1N6fgBhkqEO2jvYCJ+DxMTfZVqg3AX0R1khg1wHTBRD5SdcibSJ+XF6bFg==
-
 "@esbuild/win32-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
@@ -2117,7 +2184,7 @@
     "@floating-ui/core" "^1.4.1"
     "@floating-ui/utils" "^0.1.1"
 
-"@floating-ui/react-dom@^2.0.1":
+"@floating-ui/react-dom@^2.0.0", "@floating-ui/react-dom@^2.0.1":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
   integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
@@ -2171,7 +2238,7 @@
     js-yaml "^3.13.1"
     resolve-from "^5.0.0"
 
-"@istanbuljs/schema@^0.1.2", "@istanbuljs/schema@^0.1.3":
+"@istanbuljs/schema@^0.1.2":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
   integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
@@ -2421,10 +2488,10 @@
     "@types/yargs" "^17.0.8"
     chalk "^4.0.0"
 
-"@joshwooding/vite-plugin-react-docgen-typescript@0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@joshwooding/vite-plugin-react-docgen-typescript/-/vite-plugin-react-docgen-typescript-0.2.1.tgz#930f6f0382520e4ba349eea1b152f9ae49364516"
-  integrity sha512-ou4ZJSXMMWHqGS4g8uNRbC5TiTWxAgQZiVucoUrOCWuPrTbkpJbmVyIi9jU72SBry7gQtuMEDp4YR8EEXAg7VQ==
+"@joshwooding/vite-plugin-react-docgen-typescript@0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@joshwooding/vite-plugin-react-docgen-typescript/-/vite-plugin-react-docgen-typescript-0.3.0.tgz#67599fca260c2eafdaf234a944f9d471e6d53b08"
+  integrity sha512-2D6y7fNvFmsLmRt6UCOFJPvFoPMJGT0Uh1Wg0RaigUp7kdQPs6yYn8Dmx6GZkOH/NW0yMTwRz/p0SRMMRo50vA==
   dependencies:
     glob "^7.2.0"
     glob-promise "^4.2.0"
@@ -2463,7 +2530,12 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.15", "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/sourcemap-codec@^1.4.15":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@jridgewell/trace-mapping@^0.3.15", "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.17"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
   integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
@@ -2685,6 +2757,296 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@radix-ui/number@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.1.tgz#644161a3557f46ed38a042acf4a770e826021674"
+  integrity sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/primitive@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
+  integrity sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-arrow@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d"
+  integrity sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-collection@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.3.tgz#9595a66e09026187524a36c6e7e9c7d286469159"
+  integrity sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+
+"@radix-ui/react-compose-refs@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
+  integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-context@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
+  integrity sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-direction@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.1.tgz#9cb61bf2ccf568f3421422d182637b7f47596c9b"
+  integrity sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-dismissable-layer@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz#883a48f5f938fa679427aa17fcba70c5494c6978"
+  integrity sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-escape-keydown" "1.0.3"
+
+"@radix-ui/react-focus-guards@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz#1ea7e32092216b946397866199d892f71f7f98ad"
+  integrity sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-focus-scope@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz#9c2e8d4ed1189a1d419ee61edd5c1828726472f9"
+  integrity sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-id@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0"
+  integrity sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/react-popper@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.2.tgz#4c0b96fcd188dc1f334e02dba2d538973ad842e9"
+  integrity sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-rect" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+    "@radix-ui/rect" "1.0.1"
+
+"@radix-ui/react-portal@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.3.tgz#ffb961244c8ed1b46f039e6c215a6c4d9989bda1"
+  integrity sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-primitive@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
+  integrity sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.2"
+
+"@radix-ui/react-roving-focus@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974"
+  integrity sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
+"@radix-ui/react-select@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-1.2.2.tgz#caa981fa0d672cf3c1b2a5240135524e69b32181"
+  integrity sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/number" "1.0.1"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.4"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.3"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.2"
+    "@radix-ui/react-portal" "1.0.3"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-visually-hidden" "1.0.3"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
+"@radix-ui/react-separator@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.0.3.tgz#be5a931a543d5726336b112f465f58585c04c8aa"
+  integrity sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-slot@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
+  integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+
+"@radix-ui/react-toggle-group@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz#f5b5c8c477831b013bec3580c55e20a68179d6ec"
+  integrity sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-roving-focus" "1.0.4"
+    "@radix-ui/react-toggle" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
+"@radix-ui/react-toggle@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz#aecb2945630d1dc5c512997556c57aba894e539e"
+  integrity sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
+"@radix-ui/react-toolbar@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toolbar/-/react-toolbar-1.0.4.tgz#3211a105567fa016e89921b5b514877f833de559"
+  integrity sha512-tBgmM/O7a07xbaEkYJWYTXkIdU/1pW4/KZORR43toC/4XWyBCURK0ei9kMUdp+gTPPKBgYLxXmRSH1EVcIDp8Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-roving-focus" "1.0.4"
+    "@radix-ui/react-separator" "1.0.3"
+    "@radix-ui/react-toggle-group" "1.0.4"
+
+"@radix-ui/react-use-callback-ref@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
+  integrity sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-controllable-state@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
+  integrity sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-use-escape-keydown@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755"
+  integrity sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-use-layout-effect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399"
+  integrity sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-previous@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz#b595c087b07317a4f143696c6a01de43b0d0ec66"
+  integrity sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-rect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2"
+  integrity sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/rect" "1.0.1"
+
+"@radix-ui/react-use-size@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz#1c5f5fea940a7d7ade77694bb98116fb49f870b2"
+  integrity sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/react-visually-hidden@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz#51aed9dd0fe5abcad7dee2a234ad36106a6984ac"
+  integrity sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/rect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.1.tgz#bf8e7d947671996da2e30f4904ece343bc4a883f"
+  integrity sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@reach/auto-id@0.10.5":
   version "0.10.5"
   resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.10.5.tgz#fa78c71ce2f565ebed1ad91a8d9a685176d23c48"
@@ -2721,14 +3083,6 @@
     tslib "^2.0.0"
     warning "^4.0.3"
 
-"@rollup/pluginutils@^4.2.0":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
-  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
-  dependencies:
-    estree-walker "^2.0.1"
-    picomatch "^2.2.2"
-
 "@rollup/pluginutils@^5.0.2":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
@@ -2821,97 +3175,97 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@storybook/addon-actions@~7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-7.0.24.tgz#6bdbd8118acfc46f140207a108a5a35cc980d948"
-  integrity sha512-sIPY6uH8I26KBWUb5fMYBB9xCKB02oSM8gIHzqPZ0DnW8zl+p6+dX3tAdX+XQvb9YOLJihxZ1GF1tOxFduc3Pw==
+"@storybook/addon-actions@~7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-7.5.2.tgz#8b692a4c4d62115ed3b93f9fd2aeecdc0a02e3f5"
+  integrity sha512-jKF3rrMEu42TgZ5AEszADpVdASDu1S4Ozp1Ymf4akHLkaMOv+yzzD7LV6YGjJz8S2IryndZqE47e6stF0T99uA==
   dependencies:
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/components" "7.0.24"
-    "@storybook/core-events" "7.0.24"
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/components" "7.5.2"
+    "@storybook/core-events" "7.5.2"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "7.0.24"
-    "@storybook/preview-api" "7.0.24"
-    "@storybook/theming" "7.0.24"
-    "@storybook/types" "7.0.24"
+    "@storybook/manager-api" "7.5.2"
+    "@storybook/preview-api" "7.5.2"
+    "@storybook/theming" "7.5.2"
+    "@storybook/types" "7.5.2"
     dequal "^2.0.2"
     lodash "^4.17.21"
     polished "^4.2.2"
     prop-types "^15.7.2"
     react-inspector "^6.0.0"
-    telejson "^7.0.3"
+    telejson "^7.2.0"
     ts-dedent "^2.0.0"
     uuid "^9.0.0"
 
-"@storybook/addon-controls@~7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-7.0.24.tgz#3899664baf72d3af112aafd009a35ad5eb7745cd"
-  integrity sha512-x05Ng4wyBRkrupgSkBHKZSGPyUbvIDGiBseA/AjA/BNAMUMWy3t8ll9f7tlKzyDPaUeBSv8peP21r/Ry26Eqhw==
-  dependencies:
-    "@storybook/blocks" "7.0.24"
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/components" "7.0.24"
-    "@storybook/core-common" "7.0.24"
-    "@storybook/manager-api" "7.0.24"
-    "@storybook/node-logger" "7.0.24"
-    "@storybook/preview-api" "7.0.24"
-    "@storybook/theming" "7.0.24"
-    "@storybook/types" "7.0.24"
+"@storybook/addon-controls@~7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-7.5.2.tgz#02c35855151cac989df7dee3b76a9eb0b09d7d1d"
+  integrity sha512-f04VcBSfm3yMT1hvaFEwCRbdwiXQbddfEwhwjEVsqd+CA0s600W4L7B8tT4daXMsU6NsZyibev910IKTnDw6xQ==
+  dependencies:
+    "@storybook/blocks" "7.5.2"
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/components" "7.5.2"
+    "@storybook/core-common" "7.5.2"
+    "@storybook/core-events" "7.5.2"
+    "@storybook/manager-api" "7.5.2"
+    "@storybook/node-logger" "7.5.2"
+    "@storybook/preview-api" "7.5.2"
+    "@storybook/theming" "7.5.2"
+    "@storybook/types" "7.5.2"
     lodash "^4.17.21"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@~7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-7.0.24.tgz#b437172433787b702eba411a3e6eb9e3c36cfd34"
-  integrity sha512-O5S+E6+8c/EHEQc5WcrNQ8dOVg9Q2ONIOYxlbSAcfMUA/d+tRR9xXTZog7nv1tj4U0G29+Vr4pKgsGh3Ya5qcw==
+"@storybook/addon-docs@~7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-7.5.2.tgz#58a55912751167dfcf998ae5207d0c300e17991d"
+  integrity sha512-KxX4XuxK6YcI2mUosFkAlueMon/nby6mp3GRHenuK+nobY0ecfILqSTbsOeO1wqPxALBoq7fLnrgYhdDlandgQ==
   dependencies:
-    "@babel/core" "^7.20.2"
-    "@babel/plugin-transform-react-jsx" "^7.19.0"
     "@jest/transform" "^29.3.1"
     "@mdx-js/react" "^2.1.5"
-    "@storybook/blocks" "7.0.24"
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/components" "7.0.24"
-    "@storybook/csf-plugin" "7.0.24"
-    "@storybook/csf-tools" "7.0.24"
+    "@storybook/blocks" "7.5.2"
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/components" "7.5.2"
+    "@storybook/csf-plugin" "7.5.2"
+    "@storybook/csf-tools" "7.5.2"
     "@storybook/global" "^5.0.0"
     "@storybook/mdx2-csf" "^1.0.0"
-    "@storybook/node-logger" "7.0.24"
-    "@storybook/postinstall" "7.0.24"
-    "@storybook/preview-api" "7.0.24"
-    "@storybook/react-dom-shim" "7.0.24"
-    "@storybook/theming" "7.0.24"
-    "@storybook/types" "7.0.24"
+    "@storybook/node-logger" "7.5.2"
+    "@storybook/postinstall" "7.5.2"
+    "@storybook/preview-api" "7.5.2"
+    "@storybook/react-dom-shim" "7.5.2"
+    "@storybook/theming" "7.5.2"
+    "@storybook/types" "7.5.2"
     fs-extra "^11.1.0"
     remark-external-links "^8.0.0"
     remark-slug "^6.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-measure@~7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-7.0.24.tgz#4f409b9539a9bfaa25d9e591ff90484194c487a9"
-  integrity sha512-4VNs4rjdz+YFiJCz9DfCmBJwFuoa3pLhcEsAAdT3B+Hrkae+hvLtnQWIvAMsOlSWdl4tiuEWssDf4cjCEne87w==
+"@storybook/addon-measure@~7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-7.5.2.tgz#7908589225bcab26a27e636d02fce0edb4c2621f"
+  integrity sha512-fkvORLaYVC/yNMFzHRHmzlvniY7sWtpFxaRW+e4++hGXYV4VQjOBlXzdMxQhAg1DCVWD6QV8xnUQPBGrsEklog==
   dependencies:
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/components" "7.0.24"
-    "@storybook/core-events" "7.0.24"
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/components" "7.5.2"
+    "@storybook/core-events" "7.5.2"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "7.0.24"
-    "@storybook/preview-api" "7.0.24"
-    "@storybook/types" "7.0.24"
-
-"@storybook/addon-viewport@~7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-7.0.24.tgz#4f6777589e2484a7dad56f57982ca586bde9000b"
-  integrity sha512-bc3TR+feemGxVP1QQT6OsFSldHjLToJNuQAGd5EEBsDFhcMTsmitiGVoxIylqIhfioL9zauLIsk5eLZ/TYxuXQ==
-  dependencies:
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/components" "7.0.24"
-    "@storybook/core-events" "7.0.24"
+    "@storybook/manager-api" "7.5.2"
+    "@storybook/preview-api" "7.5.2"
+    "@storybook/types" "7.5.2"
+    tiny-invariant "^1.3.1"
+
+"@storybook/addon-viewport@~7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-7.5.2.tgz#f85136ec35445a9c310c73ec248173a1ef401f79"
+  integrity sha512-qN5X9vgp0v+WGXyFBHQ/CqjdtmnCoHhUjqXmBxEGBziJz/tZwWwtTGWeUUZpuTjCGiZutLrizOFl5MqQAI+ipg==
+  dependencies:
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/components" "7.5.2"
+    "@storybook/core-events" "7.5.2"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "7.0.24"
-    "@storybook/preview-api" "7.0.24"
-    "@storybook/theming" "7.0.24"
+    "@storybook/manager-api" "7.5.2"
+    "@storybook/preview-api" "7.5.2"
+    "@storybook/theming" "7.5.2"
     memoizerific "^1.11.3"
     prop-types "^15.7.2"
 
@@ -2924,14 +3278,14 @@
     "@storybook/preview-api" "7.0.7"
     "@storybook/types" "7.0.7"
 
-"@storybook/addons@~7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-7.0.24.tgz#7834401931d3a15b43895ca714514e356a9b027a"
-  integrity sha512-e15hORnOD0ugvOVOTyZyLJhbDTWa4G1OHVUlboazy8O4TSvAXNBdLV1wOdY5RGoGD6Z5A4iR/gZXM0qc6Fh9xg==
+"@storybook/addons@~7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-7.5.2.tgz#749c597d669ae090864c30c795203e6e04607a46"
+  integrity sha512-hRiy56zQbz72Pwa4F40srUWXKGNIriNkZ1R0j5KPd8ZqoMk1hIeW0S8E7s1vuM/MplnUE/jFJZqu6HQCvbqmGg==
   dependencies:
-    "@storybook/manager-api" "7.0.24"
-    "@storybook/preview-api" "7.0.24"
-    "@storybook/types" "7.0.24"
+    "@storybook/manager-api" "7.5.2"
+    "@storybook/preview-api" "7.5.2"
+    "@storybook/types" "7.5.2"
 
 "@storybook/api@^7.0.0":
   version "7.0.7"
@@ -2941,22 +3295,22 @@
     "@storybook/client-logger" "7.0.7"
     "@storybook/manager-api" "7.0.7"
 
-"@storybook/blocks@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-7.0.24.tgz#43696ea35ca2d4b20feb9837a0663333aec21da5"
-  integrity sha512-76pe4QC3WZBVxBt/RomGubW5xzbh4uF7LVn1Vonfujf4GaHgIDzu7KtLIjgM3NmDJCsp3PNfbgA1EKzWrPQz2A==
+"@storybook/blocks@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-7.5.2.tgz#625105555911ebb1415a3e5f4aeedf38e608a340"
+  integrity sha512-Tf6XE/YcnWQVBJRcJWJzhkahjSymv6QZuxMAiKFD8v48QRJ8kTxz1tBN9676Ux+l1WwtVWxwvd/0kRKKxE70wQ==
   dependencies:
-    "@storybook/channels" "7.0.24"
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/components" "7.0.24"
-    "@storybook/core-events" "7.0.24"
+    "@storybook/channels" "7.5.2"
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/components" "7.5.2"
+    "@storybook/core-events" "7.5.2"
     "@storybook/csf" "^0.1.0"
-    "@storybook/docs-tools" "7.0.24"
+    "@storybook/docs-tools" "7.5.2"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "7.0.24"
-    "@storybook/preview-api" "7.0.24"
-    "@storybook/theming" "7.0.24"
-    "@storybook/types" "7.0.24"
+    "@storybook/manager-api" "7.5.2"
+    "@storybook/preview-api" "7.5.2"
+    "@storybook/theming" "7.5.2"
+    "@storybook/types" "7.5.2"
     "@types/lodash" "^4.14.167"
     color-convert "^2.0.1"
     dequal "^2.0.2"
@@ -2965,25 +3319,26 @@
     memoizerific "^1.11.3"
     polished "^4.2.2"
     react-colorful "^5.1.2"
-    telejson "^7.0.3"
+    telejson "^7.2.0"
+    tocbot "^4.20.1"
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/builder-manager@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-manager/-/builder-manager-7.0.24.tgz#0a88b6583de68d9cfc3107c4a5250a193f454ad8"
-  integrity sha512-qSehfB1yS1ch/XSUdqNaTXitboNry4aKASte+kFhM5wSJcAgGBeB5akz8pc+JiRPWozqyceYkIdTG/KcRDeojg==
+"@storybook/builder-manager@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-manager/-/builder-manager-7.5.2.tgz#326fb75298b0bd534e2adfc28cfe860cc5db1759"
+  integrity sha512-s4gOudrft/E4lQ19YNrzL2VJwMEpdY6z319fTlc16J1F6XZSytw6CIZPs3x9yX5CKf4/leWnN5etODaOx7NajQ==
   dependencies:
     "@fal-works/esbuild-plugin-global-externals" "^2.1.2"
-    "@storybook/core-common" "7.0.24"
-    "@storybook/manager" "7.0.24"
-    "@storybook/node-logger" "7.0.24"
+    "@storybook/core-common" "7.5.2"
+    "@storybook/manager" "7.5.2"
+    "@storybook/node-logger" "7.5.2"
     "@types/ejs" "^3.1.1"
     "@types/find-cache-dir" "^3.2.1"
     "@yarnpkg/esbuild-plugin-pnp" "^3.0.0-rc.10"
     browser-assert "^1.2.1"
     ejs "^3.1.8"
-    esbuild "^0.17.0"
+    esbuild "^0.18.0"
     esbuild-plugin-alias "^0.2.1"
     express "^4.17.3"
     find-cache-dir "^3.0.0"
@@ -2991,44 +3346,28 @@
     process "^0.11.10"
     util "^0.12.4"
 
-"@storybook/builder-vite@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-vite/-/builder-vite-7.0.24.tgz#a0e9f29de4ab8dd05e6da1bea593a7069dab916f"
-  integrity sha512-pdCHtAe8XhEIajp8s59nzaAJH026ExoRPgBcIuL+H3GyB5xlqf3GbXosFx82X7q1z1HNkGDMoPDiNP9JA2n40g==
-  dependencies:
-    "@storybook/channel-postmessage" "7.0.24"
-    "@storybook/channel-websocket" "7.0.24"
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/core-common" "7.0.24"
-    "@storybook/csf-plugin" "7.0.24"
-    "@storybook/mdx2-csf" "^1.0.0"
-    "@storybook/node-logger" "7.0.24"
-    "@storybook/preview" "7.0.24"
-    "@storybook/preview-api" "7.0.24"
-    "@storybook/types" "7.0.24"
+"@storybook/builder-vite@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-vite/-/builder-vite-7.5.2.tgz#af144e71ea07e137650212bcc0af060fae62fdd5"
+  integrity sha512-j96m5K0ahlAjQY6uUxEbybvmRFc3eMpQ3wiosuunc8NkXtfohXZeRVQowAcVrfPktKMufRNGY86RTYxe7sMABw==
+  dependencies:
+    "@storybook/channels" "7.5.2"
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/core-common" "7.5.2"
+    "@storybook/csf-plugin" "7.5.2"
+    "@storybook/node-logger" "7.5.2"
+    "@storybook/preview" "7.5.2"
+    "@storybook/preview-api" "7.5.2"
+    "@storybook/types" "7.5.2"
+    "@types/find-cache-dir" "^3.2.1"
     browser-assert "^1.2.1"
     es-module-lexer "^0.9.3"
     express "^4.17.3"
+    find-cache-dir "^3.0.0"
     fs-extra "^11.1.0"
-    glob "^8.1.0"
-    glob-promise "^6.0.2"
-    magic-string "^0.27.0"
-    remark-external-links "^8.0.0"
-    remark-slug "^6.0.0"
+    magic-string "^0.30.0"
     rollup "^2.25.0 || ^3.3.0"
 
-"@storybook/channel-postmessage@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-7.0.24.tgz#789bd121cf64e306737ec0f3b096ea0ac6f47bf5"
-  integrity sha512-QLtLXjEeTEwBN/7pB888mBaykmRU9Jy2BitvZuLJWyHHygTYm3vYZOaGR37DT+q/6Ob5GaZ0tURZmCSNDe8IIA==
-  dependencies:
-    "@storybook/channels" "7.0.24"
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/core-events" "7.0.24"
-    "@storybook/global" "^5.0.0"
-    qs "^6.10.0"
-    telejson "^7.0.3"
-
 "@storybook/channel-postmessage@7.0.7":
   version "7.0.7"
   resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-7.0.7.tgz#8b00a45f3a078946169f7222c320d8d1e17b67c2"
@@ -3041,42 +3380,43 @@
     qs "^6.10.0"
     telejson "^7.0.3"
 
-"@storybook/channel-websocket@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-7.0.24.tgz#8c58698eda89e1b4dfee822e5f9106453b637e6c"
-  integrity sha512-GKSlWx5FgMQM0TKRCSGNTxLh0YU7xmg7m6FH8b/mvhH0Uido487qcJap2Ma/WOLe8aRiZo9jJpfcbUsKBWhuMg==
-  dependencies:
-    "@storybook/channels" "7.0.24"
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/global" "^5.0.0"
-    telejson "^7.0.3"
-
-"@storybook/channels@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.0.24.tgz#fcfe7a1a5599265506f07fe81d03b0585303fc15"
-  integrity sha512-NZVLwMhtzy6cZrNRjshFvMAD9mQTmJDNwhohodSkM/YFCDVFhmxQk9tgizVGh9MwY3CYGJ1SI96RUejGosb49Q==
-
 "@storybook/channels@7.0.7":
   version "7.0.7"
   resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.0.7.tgz#3f3962be97b447752db99a78ef7beea9f94d75a4"
   integrity sha512-Om4ovBLNw8pVrBu83MpOKgAuGO9Dpr1Coh2qp8t64WRPkejX1mxOY9IgH723//zH3igx8LCkf9rvBvcrsyaScQ==
 
-"@storybook/cli@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-7.0.24.tgz#8b01bb5b59aff34742d71e145c0f577ae20271fa"
-  integrity sha512-TmHPJrcqUMAGpPKqw0PHI82m+Tyh6J8LgWjyZENpOGJlQH6SJ5caA/ho9R3pqVuMRRcnGgWt0xq1YJtDlYBN9g==
+"@storybook/channels@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-7.5.2.tgz#f5ea597a799e13b7307fe79067faede5e13e6619"
+  integrity sha512-3SgqWq9NS0XX1QxK3riuaOLrReHWwVhI63u6q1ryDD3SttpmAezZETibOAtzDuk2FKgsyHTmAlmcGQf4ZxhOJA==
   dependencies:
-    "@babel/core" "^7.20.2"
-    "@babel/preset-env" "^7.20.2"
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/core-events" "7.5.2"
+    "@storybook/global" "^5.0.0"
+    qs "^6.10.0"
+    telejson "^7.2.0"
+    tiny-invariant "^1.3.1"
+
+"@storybook/cli@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-7.5.2.tgz#f5ef6edfecd048856b4fc9d89e4dfacc610562e5"
+  integrity sha512-8JPvA/K66zBmRFpRRwsD0JLqZUODRrGmNuAWx+Bj1K8wqbg68MYnOflbkSIxIVxrfhd39OrffV0h8CwKNL9gAg==
+  dependencies:
+    "@babel/core" "^7.22.9"
+    "@babel/preset-env" "^7.22.9"
+    "@babel/types" "^7.22.5"
     "@ndelangen/get-tarball" "^3.0.7"
-    "@storybook/codemod" "7.0.24"
-    "@storybook/core-common" "7.0.24"
-    "@storybook/core-server" "7.0.24"
-    "@storybook/csf-tools" "7.0.24"
-    "@storybook/node-logger" "7.0.24"
-    "@storybook/telemetry" "7.0.24"
-    "@storybook/types" "7.0.24"
+    "@storybook/codemod" "7.5.2"
+    "@storybook/core-common" "7.5.2"
+    "@storybook/core-events" "7.5.2"
+    "@storybook/core-server" "7.5.2"
+    "@storybook/csf-tools" "7.5.2"
+    "@storybook/node-logger" "7.5.2"
+    "@storybook/telemetry" "7.5.2"
+    "@storybook/types" "7.5.2"
     "@types/semver" "^7.3.4"
+    "@yarnpkg/fslib" "2.10.3"
+    "@yarnpkg/libzip" "2.3.0"
     chalk "^4.1.0"
     commander "^6.2.1"
     cross-spawn "^7.0.3"
@@ -3098,27 +3438,19 @@
     puppeteer-core "^2.1.1"
     read-pkg-up "^7.0.1"
     semver "^7.3.7"
-    shelljs "^0.8.5"
-    simple-update-notifier "^1.0.0"
+    simple-update-notifier "^2.0.0"
     strip-json-comments "^3.0.1"
     tempy "^1.0.1"
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/client-api@~7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-7.0.24.tgz#873d4ce9e46ef7f790063166b69490a763656d58"
-  integrity sha512-D9brib29aET1peRq6Nu7iBFgE+9W7ia3KCua5/AS980RFnXgGPE9x07knTbaAOuiHxHFrmQpdFF9BvVms1GS4A==
-  dependencies:
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/preview-api" "7.0.24"
-
-"@storybook/client-logger@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.0.24.tgz#7be57ce1f90e65c6e9da7a88ed9ca7c5ce3c6536"
-  integrity sha512-4zRTb+QQ1hWaRqad/UufZNRfi2d/cf5a40My72Ct97VwjhJFE6aQ3K+hl1Xt6hh8dncDL2JK3cgziw6ElqjT0w==
+"@storybook/client-api@~7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-7.5.2.tgz#ccfd86baacfedd74d4e81a3fe5ca3a85ddb75118"
+  integrity sha512-GXNCtW3itUux++q2m6cuyA3Lys27sp1RvQqpd6njkN2zGRSmvUdSrHphmyRiilYxsqNiRfFcm7H4hb6hNrgsJQ==
   dependencies:
-    "@storybook/global" "^5.0.0"
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/preview-api" "7.5.2"
 
 "@storybook/client-logger@7.0.7":
   version "7.0.7"
@@ -3127,18 +3459,26 @@
   dependencies:
     "@storybook/global" "^5.0.0"
 
-"@storybook/codemod@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-7.0.24.tgz#5cc64eb45b3d46cbd7cd6d66899b5538b7a64bad"
-  integrity sha512-PukV4GRPIISuVxpMMlTilwlGXdZ7E+JZWHNVb1tTwntmxMNcby8UxyWSHjbOpA2fxXGeUCjgCpcfTymJ+hxoYw==
+"@storybook/client-logger@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.5.2.tgz#ffe6fd3cb336fc7dac6670412c4c8bf70e89c1d1"
+  integrity sha512-7YgLItlmiYDzWYexTaRNuHhtFarh9krsI+8l7Yjn9ryoHSTJUcTWx+yPJm1II+PQR8v/x5UgsxzultjgEurfRQ==
   dependencies:
-    "@babel/core" "~7.21.0"
-    "@babel/preset-env" "~7.21.0"
-    "@babel/types" "~7.21.2"
+    "@storybook/global" "^5.0.0"
+
+"@storybook/codemod@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-7.5.2.tgz#d59942fb6d86cdf1c482ddc7a8450d58bfbbbca2"
+  integrity sha512-PxZg0w4OlmFB4dBzB+sCgwmHNke0n1N8vNooxtcuusrLKlbUfmssYRnQn6yRSJw0WfkUYgI10CWxGaamaOFekA==
+  dependencies:
+    "@babel/core" "^7.22.9"
+    "@babel/preset-env" "^7.22.9"
+    "@babel/types" "^7.22.5"
     "@storybook/csf" "^0.1.0"
-    "@storybook/csf-tools" "7.0.24"
-    "@storybook/node-logger" "7.0.24"
-    "@storybook/types" "7.0.24"
+    "@storybook/csf-tools" "7.5.2"
+    "@storybook/node-logger" "7.5.2"
+    "@storybook/types" "7.5.2"
+    "@types/cross-spawn" "^6.0.2"
     cross-spawn "^7.0.3"
     globby "^11.0.2"
     jscodeshift "^0.14.0"
@@ -3146,16 +3486,18 @@
     prettier "^2.8.0"
     recast "^0.23.1"
 
-"@storybook/components@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-7.0.24.tgz#0676fa8d2085217786ccf994bc890dab0fa3d9c2"
-  integrity sha512-Pu7zGurCyWyiuFl2Pb5gybHA0f4blmHuVqccbMqnUw4Ew80BRu8AqfhNqN2hNdxFCx0mmy0baRGVftx76rNZ0w==
+"@storybook/components@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-7.5.2.tgz#5409236b5b1b5d0189707cd76ea99220e3673884"
+  integrity sha512-OP+o6AoxoQDbqjk/jdQ1arlc1T8601eCL+rS1dJY9EtAFq7Z0LEFtafhEW/Lx8FotfVGjfCNptH9ODhHU6e5Jw==
   dependencies:
-    "@storybook/client-logger" "7.0.24"
+    "@radix-ui/react-select" "^1.2.2"
+    "@radix-ui/react-toolbar" "^1.0.4"
+    "@storybook/client-logger" "7.5.2"
     "@storybook/csf" "^0.1.0"
     "@storybook/global" "^5.0.0"
-    "@storybook/theming" "7.0.24"
-    "@storybook/types" "7.0.24"
+    "@storybook/theming" "7.5.2"
+    "@storybook/types" "7.5.2"
     memoizerific "^1.11.3"
     use-resize-observer "^9.1.0"
     util-deprecate "^1.0.2"
@@ -3174,32 +3516,34 @@
     use-resize-observer "^9.1.0"
     util-deprecate "^1.0.2"
 
-"@storybook/core-client@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-7.0.24.tgz#eb1e6f239ca8bc3a9cce77295463c6712a2b9829"
-  integrity sha512-uToMHbi5EnOk+8Z941j0hrRE1h9u/QWqCmqS2FBIWrBOeREwy0AAib1/hqihzhO7OzekY5mtLTANiCpIpLHAHQ==
+"@storybook/core-client@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-7.5.2.tgz#52f4b680273fdf1d3afe98a5adbbdee882ca7c44"
+  integrity sha512-mMDSBxc7esMCu0FOkama9XYHzIHYGhBj8roX+XaTaLDYXaw/UajcCuzcO7fFBHNn3Vdqh2ufIxlI7359v3IqPw==
   dependencies:
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/preview-api" "7.0.24"
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/preview-api" "7.5.2"
 
-"@storybook/core-common@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-7.0.24.tgz#2828323f9e0de2cec093f42773324ab0826fa1f3"
-  integrity sha512-FHjL2dpwDHnicLTePkiZMfO5eFxJxpTP2xmGWFQnWFTyEgh+ipcWnLVoYYXiKcc6EzKED0yebk8rAIalbzpICg==
+"@storybook/core-common@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-7.5.2.tgz#7fef2bdb0c9d83ead2a9b5e1f479edb3106c6098"
+  integrity sha512-js7fIH4wHS08dBuIVsr3JnwMtKn5O1Izc/Zor4t6PntLWkGGX4X/GxbOkasGX5SkCT1qUtB9RpdPd1sUkLhIgw==
   dependencies:
-    "@storybook/node-logger" "7.0.24"
-    "@storybook/types" "7.0.24"
-    "@types/node" "^16.0.0"
+    "@storybook/core-events" "7.5.2"
+    "@storybook/node-logger" "7.5.2"
+    "@storybook/types" "7.5.2"
+    "@types/find-cache-dir" "^3.2.1"
+    "@types/node" "^18.0.0"
     "@types/node-fetch" "^2.6.4"
     "@types/pretty-hrtime" "^1.0.0"
     chalk "^4.1.0"
-    esbuild "^0.17.0"
-    esbuild-register "^3.4.0"
+    esbuild "^0.18.0"
+    esbuild-register "^3.5.0"
     file-system-cache "2.3.0"
+    find-cache-dir "^3.0.0"
     find-up "^5.0.0"
     fs-extra "^11.1.0"
-    glob "^8.1.0"
-    glob-promise "^6.0.2"
+    glob "^10.0.0"
     handlebars "^4.7.7"
     lazy-universal-dotenv "^4.0.0"
     node-fetch "^2.0.0"
@@ -3209,41 +3553,43 @@
     resolve-from "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/core-events@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.0.24.tgz#3fa4b2b3af64a86525b4cf07f49a7410125ef810"
-  integrity sha512-xkf/rihCkhqMeh5EA8lVp90/mzbb2gcg6I3oeFWw2hognVcTnPXg6llhWdU4Spqd0cals7GEFmQugIILCmH8GA==
-
 "@storybook/core-events@7.0.7", "@storybook/core-events@^7.0.0":
   version "7.0.7"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.0.7.tgz#9acb6425d0a2a3d25becc21980c2c678c6c5548e"
   integrity sha512-XNsR2RgaL2vBwuqsu+KA1DzGmB1UFfrAhpxhmyWTKDCniwtTLlaXgfKbqwcrOrPu/o1YswgIup/9UHepRHaf4A==
 
-"@storybook/core-server@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-7.0.24.tgz#f1f5f223fc0bc40eff15495450b4fc8bf544f644"
-  integrity sha512-FJgdbtLgppFMd/RedF728I+v45TRG7s5/3RJfwgRgbq4ZEhKFzZN66MwWFeq3i5Q8ETHVwAxyVvC/JrRqAJxoA==
+"@storybook/core-events@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-7.5.2.tgz#e5185e39fdcb7ab93510f6174798d5f242e1041b"
+  integrity sha512-DV8bFEFVKDEvaH87KYPXDE0YEV+Y9yjFv2xxmC9pF8l+MWCtVW72RBLhB+gU5NM1bkHrRDNb0lOJfVGKlhxOog==
+  dependencies:
+    ts-dedent "^2.0.0"
+
+"@storybook/core-server@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-7.5.2.tgz#c87e49f7109d82d389a927127ed673e3eaade4b2"
+  integrity sha512-4oXpy1L/NyHiz/OXNUFnSeMLA/+lTgQAlVx86pRbEBDj6snt1/NSx2+yZyFtZ/XTnJ22BPpM8IIrgm95ZlQKmA==
   dependencies:
-    "@aw-web-design/x-default-browser" "1.4.88"
+    "@aw-web-design/x-default-browser" "1.4.126"
     "@discoveryjs/json-ext" "^0.5.3"
-    "@storybook/builder-manager" "7.0.24"
-    "@storybook/core-common" "7.0.24"
-    "@storybook/core-events" "7.0.24"
+    "@storybook/builder-manager" "7.5.2"
+    "@storybook/channels" "7.5.2"
+    "@storybook/core-common" "7.5.2"
+    "@storybook/core-events" "7.5.2"
     "@storybook/csf" "^0.1.0"
-    "@storybook/csf-tools" "7.0.24"
+    "@storybook/csf-tools" "7.5.2"
     "@storybook/docs-mdx" "^0.1.0"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager" "7.0.24"
-    "@storybook/node-logger" "7.0.24"
-    "@storybook/preview-api" "7.0.24"
-    "@storybook/telemetry" "7.0.24"
-    "@storybook/types" "7.0.24"
+    "@storybook/manager" "7.5.2"
+    "@storybook/node-logger" "7.5.2"
+    "@storybook/preview-api" "7.5.2"
+    "@storybook/telemetry" "7.5.2"
+    "@storybook/types" "7.5.2"
     "@types/detect-port" "^1.3.0"
-    "@types/node" "^16.0.0"
-    "@types/node-fetch" "^2.5.7"
+    "@types/node" "^18.0.0"
     "@types/pretty-hrtime" "^1.0.0"
     "@types/semver" "^7.3.4"
-    better-opn "^2.1.1"
+    better-opn "^3.0.2"
     chalk "^4.1.0"
     cli-table3 "^0.6.1"
     compression "^1.7.4"
@@ -3253,38 +3599,38 @@
     globby "^11.0.2"
     ip "^2.0.0"
     lodash "^4.17.21"
-    node-fetch "^2.6.7"
     open "^8.4.0"
     pretty-hrtime "^1.0.3"
     prompts "^2.4.0"
     read-pkg-up "^7.0.1"
     semver "^7.3.7"
-    serve-favicon "^2.5.0"
-    telejson "^7.0.3"
+    telejson "^7.2.0"
+    tiny-invariant "^1.3.1"
     ts-dedent "^2.0.0"
+    util "^0.12.4"
     util-deprecate "^1.0.2"
     watchpack "^2.2.0"
     ws "^8.2.3"
 
-"@storybook/csf-plugin@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-plugin/-/csf-plugin-7.0.24.tgz#e312d032f7a7b107246cacfda305dcb967cb7e30"
-  integrity sha512-+oIZCIhrRFbvplXUwJn671ZM0kgNqZ59jM9RmehJGgu5N5h1JSbBcz1edXgStNsMk9e2NJopuOKrzZGTGyi0XA==
+"@storybook/csf-plugin@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-plugin/-/csf-plugin-7.5.2.tgz#fe4b78d7e913e4666c924f98d48cb7e8f8d9030b"
+  integrity sha512-ndjn1ia2rQLO1r1z6mXv6nipLzJMwWJp31h16lQUXIBQEOiGKjGGvObiuKaad3nNHxWHpGra4zUg7R+54Yw0Hw==
   dependencies:
-    "@storybook/csf-tools" "7.0.24"
-    unplugin "^0.10.2"
+    "@storybook/csf-tools" "7.5.2"
+    unplugin "^1.3.1"
 
-"@storybook/csf-tools@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-7.0.24.tgz#ba35a537a2d6cca46f9c5ac9c0c6bdf5e3d0aa7b"
-  integrity sha512-RBNiXY3ht6XpcIyVgxBo7mK2t32tJuC93OO/HgcoRFClcdA8HUnlva297XpJpMqCgrcF8fPqRo+ZcLeC7vjzvw==
+"@storybook/csf-tools@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-7.5.2.tgz#204532b78740f5a3af399f304dbcb8b4ca856957"
+  integrity sha512-yXaEDREc2wvkjYkQqDMatJw23f0fEFhMIf/zBNF7YljeYw0j8jAg/7XI5WJJSN2KTxD/feD/yD+6eaLUXvrneQ==
   dependencies:
-    "@babel/generator" "~7.21.1"
-    "@babel/parser" "~7.21.2"
-    "@babel/traverse" "~7.21.2"
-    "@babel/types" "~7.21.2"
+    "@babel/generator" "^7.22.9"
+    "@babel/parser" "^7.22.7"
+    "@babel/traverse" "^7.22.8"
+    "@babel/types" "^7.22.5"
     "@storybook/csf" "^0.1.0"
-    "@storybook/types" "7.0.24"
+    "@storybook/types" "7.5.2"
     fs-extra "^11.1.0"
     recast "^0.23.1"
     ts-dedent "^2.0.0"
@@ -3308,15 +3654,14 @@
   resolved "https://registry.yarnpkg.com/@storybook/docs-mdx/-/docs-mdx-0.1.0.tgz#33ba0e39d1461caf048b57db354b2cc410705316"
   integrity sha512-JDaBR9lwVY4eSH5W8EGHrhODjygPd6QImRbwjAuJNEnY0Vw4ie3bPkeGfnacB3OBW6u/agqPv2aRlR46JcAQLg==
 
-"@storybook/docs-tools@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-7.0.24.tgz#388a0bab7c2d179b571045929f264a2b984e38ee"
-  integrity sha512-vmDHmHB1B5CWsYQ7CEtfz4vdf36VK/EZdNQUox9kdN935Dks7KSuGcDdXiRlWc78e94/A9+1mJQpyfwtn3E8fQ==
+"@storybook/docs-tools@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-7.5.2.tgz#ae59ac6b061c5471ed70f461f61d4d24c8fd8c51"
+  integrity sha512-mBiZFhzMA2ub7wX0ho3UqKqKXO+xUi/rqb4KV4PihLKlhThEdzKyYrIZO4W90NOmlp1yUJJcjG8D8SUPuHQoTw==
   dependencies:
-    "@babel/core" "^7.12.10"
-    "@storybook/core-common" "7.0.24"
-    "@storybook/preview-api" "7.0.24"
-    "@storybook/types" "7.0.24"
+    "@storybook/core-common" "7.5.2"
+    "@storybook/preview-api" "7.5.2"
+    "@storybook/types" "7.5.2"
     "@types/doctrine" "^0.0.3"
     doctrine "^3.0.0"
     lodash "^4.17.21"
@@ -3326,27 +3671,6 @@
   resolved "https://registry.yarnpkg.com/@storybook/global/-/global-5.0.0.tgz#b793d34b94f572c1d7d9e0f44fac4e0dbc9572ed"
   integrity sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==
 
-"@storybook/manager-api@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.0.24.tgz#29a357a35c661a0e86567ef6f0f8afeca3b3bced"
-  integrity sha512-cBpgDWq8reFgyrv4fBZlZJQyWYb9cDW0LDe476rWn/29uXNvYMNsHRwveLNgSA8Oy1NdyQCgf4ZgcYvY3wpvMA==
-  dependencies:
-    "@storybook/channels" "7.0.24"
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/core-events" "7.0.24"
-    "@storybook/csf" "^0.1.0"
-    "@storybook/global" "^5.0.0"
-    "@storybook/router" "7.0.24"
-    "@storybook/theming" "7.0.24"
-    "@storybook/types" "7.0.24"
-    dequal "^2.0.2"
-    lodash "^4.17.21"
-    memoizerific "^1.11.3"
-    semver "^7.3.7"
-    store2 "^2.14.2"
-    telejson "^7.0.3"
-    ts-dedent "^2.0.0"
-
 "@storybook/manager-api@7.0.7":
   version "7.0.7"
   resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.0.7.tgz#0b3a839f4c48c84424ce0462739afb5c7e08d1b7"
@@ -3368,43 +3692,59 @@
     telejson "^7.0.3"
     ts-dedent "^2.0.0"
 
-"@storybook/manager@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/manager/-/manager-7.0.24.tgz#7c9420d448a88574b696d2bd9c2ae11e7d33de22"
-  integrity sha512-LsQd2cFJViwoPJ7K0A/XBWrBBhJv7F0J6+aa7qHszNmIZHVbMXyZfiX7JS3RHVs4I2kLuNpSk4X+iDG0QAafEQ==
+"@storybook/manager-api@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-7.5.2.tgz#bb22c4d92fa8e31223a09e6ea089b03eda7db45e"
+  integrity sha512-WX8GjBkITRQzhQ08WEAVjdDW8QqqIQhWOpFzXUYCxCNzt1eSALI31QQ+M1/MYymw+TOkotC/SMcn/puIAm4rdA==
+  dependencies:
+    "@storybook/channels" "7.5.2"
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/core-events" "7.5.2"
+    "@storybook/csf" "^0.1.0"
+    "@storybook/global" "^5.0.0"
+    "@storybook/router" "7.5.2"
+    "@storybook/theming" "7.5.2"
+    "@storybook/types" "7.5.2"
+    dequal "^2.0.2"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    semver "^7.3.7"
+    store2 "^2.14.2"
+    telejson "^7.2.0"
+    ts-dedent "^2.0.0"
+
+"@storybook/manager@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/manager/-/manager-7.5.2.tgz#9ca25f9e57058c55bd517c3e13770ad772d6fd8f"
+  integrity sha512-5l1z9SpCFQBcHjC5mbfWQ8mPTYFxD8GQ9mNZ6PPrj47yu9TyCRYSQj7A8ZXJiIY1ZEg4a2BCW7fPUYG+lX6Drw==
 
 "@storybook/mdx2-csf@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@storybook/mdx2-csf/-/mdx2-csf-1.0.0.tgz#ce4b2e44c9082bf382db835eef611b0097b7d771"
   integrity sha512-dBAnEL4HfxxJmv7LdEYUoZlQbWj9APZNIbOaq0tgF8XkxiIbzqvgB0jhL/9UOrysSDbQWBiCRTu2wOVxedGfmw==
 
-"@storybook/node-logger@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-7.0.24.tgz#dc260cbce5cd5187b131e4d1d08fe750f748f5ad"
-  integrity sha512-gjcYnreYBBtZVF6p/cHMas4FEafPddjsLMrAfB+0lLGoRdUwWVto46BZTHQ9seY5gPW0JQydAdDGHko8/kEOXA==
-  dependencies:
-    "@types/npmlog" "^4.1.2"
-    chalk "^4.1.0"
-    npmlog "^5.0.1"
-    pretty-hrtime "^1.0.3"
+"@storybook/node-logger@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-7.5.2.tgz#4ed36afac7b784eebaf11f4ebf657744b42a7458"
+  integrity sha512-VIBuwPJOylu8vJofk1VfmqxlhXgbBgV0pCTo/UzdQAbc3w5y+qNRemf8goWxYEY+L9p6oUXqm/i9+bNGyX7/Mw==
 
-"@storybook/postinstall@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-7.0.24.tgz#c24e8ba032313d7776d2501435fa3c9a6685e055"
-  integrity sha512-UYMXyEU4nVIKyrlUdIs3NHQmILzrN+EkEDbmeQC2WMMPw+t4GY2cDVmpx90JYYZcn7gY+cNDgQ55iiqbvlamLQ==
+"@storybook/postinstall@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-7.5.2.tgz#0a4924f7b2919e698626c3dfa3ee6c8e948beb42"
+  integrity sha512-fKgyV1fAgckDoxQkUGJl5uzjzGC5esC/nITiCjccZFrqxt9mgmz4VAUkMeseD5tfWQ5oFA0Xdgtrrcl39+chnw==
 
-"@storybook/preview-api@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.0.24.tgz#93634c060aa43bb10fb233f28ae83b7d74b98aad"
-  integrity sha512-psycU07tuB5nyJvfAJiDN/9e8cjOdJ+5lrCSYC3vPzH86LxADDIN0/8xFb1CaQWcXZsADEFJGpHKWbRhjym5ew==
+"@storybook/preview-api@7.0.7":
+  version "7.0.7"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.0.7.tgz#8f8da37418d91dd3d9009df914cb26add87a8e67"
+  integrity sha512-R5pmGTodpu6hbwEg2RM2ulWtW3d426YzsisHrZJ+FT9lecWauN1y9xHCz7HdNzEFhT8r4YOa24L9ZS3mosZ7hA==
   dependencies:
-    "@storybook/channel-postmessage" "7.0.24"
-    "@storybook/channels" "7.0.24"
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/core-events" "7.0.24"
+    "@storybook/channel-postmessage" "7.0.7"
+    "@storybook/channels" "7.0.7"
+    "@storybook/client-logger" "7.0.7"
+    "@storybook/core-events" "7.0.7"
     "@storybook/csf" "^0.1.0"
     "@storybook/global" "^5.0.0"
-    "@storybook/types" "7.0.24"
+    "@storybook/types" "7.0.7"
     "@types/qs" "^6.9.5"
     dequal "^2.0.2"
     lodash "^4.17.21"
@@ -3414,18 +3754,17 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/preview-api@7.0.7":
-  version "7.0.7"
-  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.0.7.tgz#8f8da37418d91dd3d9009df914cb26add87a8e67"
-  integrity sha512-R5pmGTodpu6hbwEg2RM2ulWtW3d426YzsisHrZJ+FT9lecWauN1y9xHCz7HdNzEFhT8r4YOa24L9ZS3mosZ7hA==
+"@storybook/preview-api@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-7.5.2.tgz#72512c11369975904894c6f50036f10d3c329e59"
+  integrity sha512-rpmHR/09UBSnorDBTcE7JgHUQjZLO146NCI+vbI7Pqfb4QX/8lhwkFr4cuHRAR16mv6DAJbDVoPETO0Z/CH9aw==
   dependencies:
-    "@storybook/channel-postmessage" "7.0.7"
-    "@storybook/channels" "7.0.7"
-    "@storybook/client-logger" "7.0.7"
-    "@storybook/core-events" "7.0.7"
+    "@storybook/channels" "7.5.2"
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/core-events" "7.5.2"
     "@storybook/csf" "^0.1.0"
     "@storybook/global" "^5.0.0"
-    "@storybook/types" "7.0.7"
+    "@storybook/types" "7.5.2"
     "@types/qs" "^6.9.5"
     dequal "^2.0.2"
     lodash "^4.17.21"
@@ -3435,66 +3774,56 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/preview@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-7.0.24.tgz#2657c36f7de9c13958333b25b395a798f5be3e43"
-  integrity sha512-rej4Wz8Qy4gVuyvg4cpQGkR4wJc3b+0Uv6EYylbmpdj2585cOhFtRBykagDVZteVU4xaLMT7YHIZRnoLmJKIgw==
-
-"@storybook/react-dom-shim@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-7.0.24.tgz#987378ef01a550778ac8c6b16c89ad5271ad02ef"
-  integrity sha512-YOP1C3dWTLYP5mPb7hNuDRIhADzz+ppfb+S22JNJ3kqm+tsyE/YtAbRf80k6QIG1LzukMpGoEnjjOPOsWsyvFQ==
-
-"@storybook/react-vite@^7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/react-vite/-/react-vite-7.0.24.tgz#cef5e08b39a31ab49f2909aa689a528f296d119c"
-  integrity sha512-+a01kqBOfH7U5Vd6bFHow3hIvsSMwcmEOnLCNrzuwHwiQxqxMEQLPQ5C7PgqCQl5M1OgR+AjL0dx1g03CqwqRQ==
-  dependencies:
-    "@joshwooding/vite-plugin-react-docgen-typescript" "0.2.1"
-    "@rollup/pluginutils" "^4.2.0"
-    "@storybook/builder-vite" "7.0.24"
-    "@storybook/react" "7.0.24"
+"@storybook/preview@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/preview/-/preview-7.5.2.tgz#85c35c0931bb6f096f1fc6ed2e2b25eb55f8a0d0"
+  integrity sha512-dA5VpHp0D9nh9/wOzWP8At1wtz/SiaMBbwaiEOFTFUGcPerrkroEWadIlSSB7vgQJ9yWiD4l3KDaS8ANzHWtPQ==
+
+"@storybook/react-dom-shim@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-7.5.2.tgz#0f937849d2e208d40e7086bd4e872670184f328d"
+  integrity sha512-x7h3TTLRLs8mrsCBKXbvjBRFms73XrNlm0Lo5Tu/Tf//+pwOFq+2sGBkqbRkYd54jNHhpqNF7+UUdzA93ESnbQ==
+
+"@storybook/react-vite@^7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/react-vite/-/react-vite-7.5.2.tgz#b011e96bf2ebcb9ff252ff568330dbcac4ba7c1c"
+  integrity sha512-faYGER/qU/jeaMEf5kgx4dNeKno+HkCEviXo/bgRswRg7odW5XydlGGSATOYLYxLhWG6jztaYHYIaDk21KoOVA==
+  dependencies:
+    "@joshwooding/vite-plugin-react-docgen-typescript" "0.3.0"
+    "@rollup/pluginutils" "^5.0.2"
+    "@storybook/builder-vite" "7.5.2"
+    "@storybook/react" "7.5.2"
     "@vitejs/plugin-react" "^3.0.1"
-    ast-types "^0.14.2"
-    magic-string "^0.27.0"
-    react-docgen "6.0.0-alpha.3"
+    magic-string "^0.30.0"
+    react-docgen "^6.0.2"
 
-"@storybook/react@7.0.24", "@storybook/react@~7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-7.0.24.tgz#21ce8a0b09dceac7193bb0f1463b3cb9bd13ead6"
-  integrity sha512-JAgSs8ANysBl3+cOAjFSVG3bA2V/wP6jyu7oK0jSATRQhHRjRS/tHFMA82j0j98G2sr3JXQUxNt55Qq3k2mUcg==
+"@storybook/react@7.5.2", "@storybook/react@~7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-7.5.2.tgz#42afff95f8ff65d404282336a018c1fb59a5f2fa"
+  integrity sha512-7X8GtqvRjWmVS112ifChJMxfD15rMVg5m3t6apZqi0uui1S/DImAveHwz8M4FhsElW6MIHs5xK0uJhR9rVQgTA==
   dependencies:
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/core-client" "7.0.24"
-    "@storybook/docs-tools" "7.0.24"
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/core-client" "7.5.2"
+    "@storybook/docs-tools" "7.5.2"
     "@storybook/global" "^5.0.0"
-    "@storybook/preview-api" "7.0.24"
-    "@storybook/react-dom-shim" "7.0.24"
-    "@storybook/types" "7.0.24"
+    "@storybook/preview-api" "7.5.2"
+    "@storybook/react-dom-shim" "7.5.2"
+    "@storybook/types" "7.5.2"
     "@types/escodegen" "^0.0.6"
     "@types/estree" "^0.0.51"
-    "@types/node" "^16.0.0"
+    "@types/node" "^18.0.0"
     acorn "^7.4.1"
     acorn-jsx "^5.3.1"
     acorn-walk "^7.2.0"
-    escodegen "^2.0.0"
+    escodegen "^2.1.0"
     html-tags "^3.1.0"
     lodash "^4.17.21"
     prop-types "^15.7.2"
     react-element-to-jsx-string "^15.0.0"
     ts-dedent "^2.0.0"
-    type-fest "^2.19.0"
+    type-fest "~2.19"
     util-deprecate "^1.0.2"
 
-"@storybook/router@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.0.24.tgz#510b91d161d822f276300fded7b254ed3e2594f3"
-  integrity sha512-SRCV+srCZUbko/V0phVN8jY8ilrxQWWAY/gegwNlIYaNqLJSyYqIj739VDmX+deXl6rOEpFLZreClVXWiDU9+w==
-  dependencies:
-    "@storybook/client-logger" "7.0.24"
-    memoizerific "^1.11.3"
-    qs "^6.10.0"
-
 "@storybook/router@7.0.7":
   version "7.0.7"
   resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.0.7.tgz#9f60dc63f083b3a24e40e2461cc18eb531dfd451"
@@ -3504,31 +3833,29 @@
     memoizerific "^1.11.3"
     qs "^6.10.0"
 
-"@storybook/telemetry@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-7.0.24.tgz#bc5e510559e02fe85449ab48388feacf43911d57"
-  integrity sha512-mLGwm3yeWlM9Srrcecrpce4m8uyazIMkHIYcBC0cD2L/JzIRzeRS3Na8QlLKz4/+Hxawm7K/pE/DBrVjvBbm8A==
+"@storybook/router@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-7.5.2.tgz#d01d52f541b2fe817873660ba1e6cce5e4ab93f3"
+  integrity sha512-jlh48TVUlqvGkU8MnkVp9SrCHomWGtQGx1WMK94NMyOPVPTLWzM6LjIybgmHz0MTe4lpzmbiIOfSlU3pPX054w==
+  dependencies:
+    "@storybook/client-logger" "7.5.2"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+
+"@storybook/telemetry@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-7.5.2.tgz#b64b833b161ef890d91222f332045119a10f21b3"
+  integrity sha512-tUgrcIx1vTMhTySp11JbBnWLsaMUNlil5yuOWEJy5i71E4Xy/2hYUtLfxzgXWd/0W7eTl4p2tjUk9uS8AP+S0Q==
   dependencies:
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/core-common" "7.0.24"
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/core-common" "7.5.2"
+    "@storybook/csf-tools" "7.5.2"
     chalk "^4.1.0"
     detect-package-manager "^2.0.1"
     fetch-retry "^5.0.2"
     fs-extra "^11.1.0"
-    isomorphic-unfetch "^3.1.0"
-    nanoid "^3.3.1"
     read-pkg-up "^7.0.1"
 
-"@storybook/theming@7.0.24", "@storybook/theming@~7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.0.24.tgz#5e74f20bda1cdb9ba2a4a0c7a96ca014cdee5532"
-  integrity sha512-CMeCCfqffJ/D5rBl1HpAM/e5Vw0h7ucT+CLzP0ALtLrguz9ZzOiIZYgMj17KpfvWqje7HT+DwEtNkSrnJ01FNQ==
-  dependencies:
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
-    "@storybook/client-logger" "7.0.24"
-    "@storybook/global" "^5.0.0"
-    memoizerific "^1.11.3"
-
 "@storybook/theming@7.0.7", "@storybook/theming@^7.0.0":
   version "7.0.7"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.0.7.tgz#263c162825e3c0ff4eb53e204e586077e596037e"
@@ -3539,15 +3866,15 @@
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
 
-"@storybook/types@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.0.24.tgz#22b2f6658f9a091ff584e1a0643ee1ea9a54ed39"
-  integrity sha512-SZh/XBHP1TT5bmEk0W52nT0v6fUnYwmZVls3da5noutdgOAiwL7TANtl41XrNjG+UDr8x0OE3PVVJi+LhwUaNA==
+"@storybook/theming@7.5.2", "@storybook/theming@~7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.5.2.tgz#0608912cf0b8817d9c53d7e3c378e6a99c147444"
+  integrity sha512-DZBTcYErSYvmTYsGz7lKtiIcBe8flBw5Ojp52r3O4GcRYG4AbuUwwVvehz+O1cWaS+UW3HavrcgapERH7ZHd1A==
   dependencies:
-    "@storybook/channels" "7.0.24"
-    "@types/babel__core" "^7.0.0"
-    "@types/express" "^4.7.0"
-    file-system-cache "2.3.0"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@storybook/client-logger" "7.5.2"
+    "@storybook/global" "^5.0.0"
+    memoizerific "^1.11.3"
 
 "@storybook/types@7.0.7":
   version "7.0.7"
@@ -3559,6 +3886,16 @@
     "@types/express" "^4.7.0"
     file-system-cache "^2.0.0"
 
+"@storybook/types@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.5.2.tgz#38f2e4a4cb0bb402b840d9e7f7762c0d113dc63b"
+  integrity sha512-RDKHo6WUES+4nt7uZMfankjxdpYX2EI2GpJ2n2RPcnhzmb/ub1huNTjbzDEYMqY24SppljZeIN57m3Ar6L6f9A==
+  dependencies:
+    "@storybook/channels" "7.5.2"
+    "@types/babel__core" "^7.0.0"
+    "@types/express" "^4.7.0"
+    file-system-cache "2.3.0"
+
 "@svgr/babel-plugin-add-jsx-attribute@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-7.0.0.tgz#80856c1b7a3b7422d232f6e079f0beb90c4a13e9"
@@ -3893,6 +4230,17 @@
     "@types/babel__template" "*"
     "@types/babel__traverse" "*"
 
+"@types/babel__core@^7.18.0":
+  version "7.20.3"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.3.tgz#d5625a50b6f18244425a1359a858c73d70340778"
+  integrity sha512-54fjTSeSHwfan8AyHWrKbfBWiEUrNTZsUwPTDSNaaP1QDQIZbeNUg3a59E9D+375MzUw/x1vx2/0F5LBz+AeYA==
+  dependencies:
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
 "@types/babel__generator@*":
   version "7.6.4"
   resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.4.tgz#1f20ce4c5b1990b37900b63f050182d28c2439b7"
@@ -3915,6 +4263,13 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/babel__traverse@^7.18.0":
+  version "7.20.3"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.3.tgz#a971aa47441b28ef17884ff945d0551265a2d058"
+  integrity sha512-Lsh766rGEFbaxMIDH7Qa+Yha8cMVI3qAK6CHt3OR0YfxOIn5Z54iHiyDRycHrBqeIiqGa20Kpsv1cavfBKkRSw==
+  dependencies:
+    "@babel/types" "^7.20.7"
+
 "@types/body-parser@*":
   version "1.19.2"
   resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0"
@@ -3964,6 +4319,13 @@
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d"
   integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==
 
+"@types/cross-spawn@^6.0.2":
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/@types/cross-spawn/-/cross-spawn-6.0.4.tgz#e658d29e2308a01f48b7b30fd8cdf07aeb2e5a82"
+  integrity sha512-GGLpeThc2Bu8FBGmVn76ZU3lix17qZensEI4/MPty0aZpm2CHfgEMis31pf5X5EiudYKcPAsWciAsCALoPo5dw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/css-mediaquery@^0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@types/css-mediaquery/-/css-mediaquery-0.1.1.tgz#0902ee5849b89a45390c2c9dccbb536a75a88511"
@@ -3979,11 +4341,21 @@
   resolved "https://registry.yarnpkg.com/@types/doctrine/-/doctrine-0.0.3.tgz#e892d293c92c9c1d3f9af72c15a554fbc7e0895a"
   integrity sha512-w5jZ0ee+HaPOaX25X2/2oGR/7rgAQSYII7X7pp0m9KgBfMP7uKfMfTvcpl5Dj+eDBbpxKGiqE+flqDr6XTd2RA==
 
+"@types/doctrine@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@types/doctrine/-/doctrine-0.0.6.tgz#12ede1f7cd3797be5856277c85f031299ccd2641"
+  integrity sha512-KlEqPtaNBHBJ2/fVA4yLdD0Tc8zw34pKU4K5SHBIEwtLJ8xxumIC1xeG+4S+/9qhVj2MqC7O3Ld8WvDG4HqlgA==
+
 "@types/ejs@^3.1.1":
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/@types/ejs/-/ejs-3.1.2.tgz#75d277b030bc11b3be38c807e10071f45ebc78d9"
   integrity sha512-ZmiaE3wglXVWBM9fyVC17aGPkLo/UgaOjEiI2FXQfyczrCefORPxIe+2dVmnmk3zkVIbizjrlQzmPGhSYGXG5g==
 
+"@types/emscripten@^1.39.6":
+  version "1.39.9"
+  resolved "https://registry.yarnpkg.com/@types/emscripten/-/emscripten-1.39.9.tgz#cbe73a8d153fc714a2e3177fbda2d7332d45efa7"
+  integrity sha512-ILdWj4XYtNOqxJaW22NEQx2gJsLfV5ncxYhhGX1a1H1lXl2Ta0gUz7QOnOoF1xQbJwWDjImi8gXN9mKdIf6n9g==
+
 "@types/enzyme@^3.9.3":
   version "3.10.12"
   resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.12.tgz#ac4494801b38188935580642f772ad18f72c132f"
@@ -4039,14 +4411,6 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/glob@^8.0.0":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-8.1.0.tgz#b63e70155391b0584dce44e7ea25190bbc38f2fc"
-  integrity sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==
-  dependencies:
-    "@types/minimatch" "^5.1.2"
-    "@types/node" "*"
-
 "@types/googlepay@*":
   version "0.6.4"
   resolved "https://registry.yarnpkg.com/@types/googlepay/-/googlepay-0.6.4.tgz#e0b06ae1f12496c4fa43e52d35e76411dbbee135"
@@ -4212,7 +4576,7 @@
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
   integrity sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==
 
-"@types/minimatch@*", "@types/minimatch@^5.1.2":
+"@types/minimatch@*":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca"
   integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
@@ -4222,14 +4586,6 @@
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.2.tgz#96d63314255540a36bf24da094cce7a13668d73b"
   integrity sha512-NaHL0+0lLNhX6d9rs+NSt97WH/gIlRHmszXbQ/8/MV/eVcFNdeJ/GYhrFuUc8K7WuPhRhTSdMkCp8VMzhUq85w==
 
-"@types/node-fetch@^2.5.7":
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.2.tgz#d1a9c5fd049d9415dce61571557104dec3ec81da"
-  integrity sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==
-  dependencies:
-    "@types/node" "*"
-    form-data "^3.0.0"
-
 "@types/node-fetch@^2.6.4":
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.4.tgz#1bc3a26de814f6bf466b25aeb1473fa1afe6a660"
@@ -4248,26 +4604,23 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
   integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
 
-"@types/node@^16.0.0":
-  version "16.18.14"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.14.tgz#5465ce598486a703caddbefe8603f8a2cffa3461"
-  integrity sha512-wvzClDGQXOCVNU4APPopC2KtMYukaF1MN/W3xAmslx22Z4/IF1/izDMekuyoUlwfnDHYCIZGaj7jMwnJKBTxKw==
-
 "@types/node@^16.18.39":
   version "16.18.39"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.39.tgz#aa39a1a87a40ef6098ee69689a1acb0c1b034832"
   integrity sha512-8q9ZexmdYYyc5/cfujaXb4YOucpQxAV4RMG0himLyDUOEr8Mr79VrqsFI+cQ2M2h89YIuy95lbxuYjxT4Hk4kQ==
 
+"@types/node@^18.0.0":
+  version "18.18.8"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.8.tgz#2b285361f2357c8c8578ec86b5d097c7f464cfd6"
+  integrity sha512-OLGBaaK5V3VRBS1bAkMVP2/W9B+H8meUfl866OrMNQqt7wDgdpWPp5o6gmIc9pB+lIQHSq4ZL8ypeH1vPxcPaQ==
+  dependencies:
+    undici-types "~5.26.4"
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
   integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
-"@types/npmlog@^4.1.2":
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/@types/npmlog/-/npmlog-4.1.4.tgz#30eb872153c7ead3e8688c476054ddca004115f6"
-  integrity sha512-WKG4gTr8przEZBiJ5r3s8ZIAoMXNbOgQ+j/d5O4X3x6kZJRLNvyUJuUK/KoG3+8BaOHPhp2m7WC6JKKeovDSzQ==
-
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -4466,6 +4819,11 @@
   dependencies:
     redux "^4.0.5"
 
+"@types/resolve@^1.20.2":
+  version "1.20.4"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.4.tgz#d2df996a35695c843dbf180e26bc2c7a0f1a3e12"
+  integrity sha512-BKGK0T1VgB1zD+PwQR4RRf0ais3NyvH1qjLUrHI5SEiccYaJrhLstLuoXFWJ+2Op9whGizSPUMGPJY/Qtb/A2w==
+
 "@types/sanitize-html@^2.9.1":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.9.1.tgz#6e4b232916cfb3ec0c4733c9899c99e1697ef953"
@@ -4798,6 +5156,22 @@
   dependencies:
     tslib "^2.4.0"
 
+"@yarnpkg/fslib@2.10.3":
+  version "2.10.3"
+  resolved "https://registry.yarnpkg.com/@yarnpkg/fslib/-/fslib-2.10.3.tgz#a8c9893df5d183cf6362680b9f1c6d7504dd5717"
+  integrity sha512-41H+Ga78xT9sHvWLlFOZLIhtU6mTGZ20pZ29EiZa97vnxdohJD2AF42rCoAoWfqUz486xY6fhjMH+DYEM9r14A==
+  dependencies:
+    "@yarnpkg/libzip" "^2.3.0"
+    tslib "^1.13.0"
+
+"@yarnpkg/libzip@2.3.0", "@yarnpkg/libzip@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@yarnpkg/libzip/-/libzip-2.3.0.tgz#fe1e762e47669f6e2c960fc118436608d834e3be"
+  integrity sha512-6xm38yGVIa6mKm/DUCF2zFFJhERh/QWp1ufm4cNUvxsONBmfPg8uZ9pZBdOmF6qFGr/HlT6ABBkCSx/dlEtvWg==
+  dependencies:
+    "@types/emscripten" "^1.39.6"
+    tslib "^1.13.0"
+
 "@yarnpkg/lockfile@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
@@ -4844,6 +5218,11 @@ acorn@^7.1.1, acorn@^7.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
+acorn@^8.10.0:
+  version "8.11.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
+  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
+
 acorn@^8.2.4, acorn@^8.8.0:
   version "8.8.2"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
@@ -5023,24 +5402,11 @@ app-root-dir@^1.0.2:
   resolved "https://registry.yarnpkg.com/app-root-dir/-/app-root-dir-1.0.2.tgz#38187ec2dea7577fff033ffcb12172692ff6e118"
   integrity sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==
 
-"aproba@^1.0.3 || ^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
-  integrity sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==
-
 arch@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
   integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
 
-are-we-there-yet@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz#372e0e7bd279d8e94c653aaa1f67200884bf3e1c"
-  integrity sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^3.6.0"
-
 arg@5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
@@ -5058,6 +5424,13 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-hidden@^1.1.1:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
+  integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
+  dependencies:
+    tslib "^2.0.0"
+
 aria-query@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@@ -5210,13 +5583,6 @@ ast-types@0.15.2:
   dependencies:
     tslib "^2.0.1"
 
-ast-types@^0.14.2:
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.14.2.tgz#600b882df8583e3cd4f2df5fa20fa83759d4bdfd"
-  integrity sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==
-  dependencies:
-    tslib "^2.0.1"
-
 ast-types@^0.16.1:
   version "0.16.1"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.16.1.tgz#7a9da1617c9081bc121faafe91711b4c8bb81da2"
@@ -5397,29 +5763,29 @@ babel-plugin-macros@^3.1.0:
     cosmiconfig "^7.0.0"
     resolve "^1.19.0"
 
-babel-plugin-polyfill-corejs2@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
-  integrity sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==
+babel-plugin-polyfill-corejs2@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.6.tgz#b2df0251d8e99f229a8e60fc4efa9a68b41c8313"
+  integrity sha512-jhHiWVZIlnPbEUKSSNb9YoWcQGdlTLq7z1GHL4AjFxaoOUMuuEVJ+Y4pAaQUGOGk93YsVCKPbqbfw3m0SM6H8Q==
   dependencies:
-    "@babel/compat-data" "^7.17.7"
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
-    semver "^6.1.1"
+    "@babel/compat-data" "^7.22.6"
+    "@babel/helper-define-polyfill-provider" "^0.4.3"
+    semver "^6.3.1"
 
-babel-plugin-polyfill-corejs3@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz#56ad88237137eade485a71b52f72dbed57c6230a"
-  integrity sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==
+babel-plugin-polyfill-corejs3@^0.8.5:
+  version "0.8.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.6.tgz#25c2d20002da91fe328ff89095c85a391d6856cf"
+  integrity sha512-leDIc4l4tUgU7str5BWLS2h8q2N4Nf6lGZP6UrNDxdtfF2g69eJ5L0H7S8A5Ln/arfFAfHor5InAdZuIOwZdgQ==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
-    core-js-compat "^3.25.1"
+    "@babel/helper-define-polyfill-provider" "^0.4.3"
+    core-js-compat "^3.33.1"
 
-babel-plugin-polyfill-regenerator@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz#390f91c38d90473592ed43351e801a9d3e0fd747"
-  integrity sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==
+babel-plugin-polyfill-regenerator@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.3.tgz#d4c49e4b44614607c13fb769bcd85c72bb26a4a5"
+  integrity sha512-8sHeDOmXC8csczMrYEOf0UTNa4yE2SxV5JGeT/LP1n0OYVDUUFPxG9vdk2AlDlIit4t+Kf0xCtpgXPBwnn/9pw==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
+    "@babel/helper-define-polyfill-provider" "^0.4.3"
 
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
@@ -5487,12 +5853,12 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
-better-opn@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/better-opn/-/better-opn-2.1.1.tgz#94a55b4695dc79288f31d7d0e5f658320759f7c6"
-  integrity sha512-kIPXZS5qwyKiX/HcRvDYfmBQUa8XP17I0mYZZ0y4UhpYOSvtsLHDYqmomS+Mj20aDvD3knEiQ0ecQy2nhio3yA==
+better-opn@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/better-opn/-/better-opn-3.0.2.tgz#f96f35deaaf8f34144a4102651babcf00d1d8817"
+  integrity sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==
   dependencies:
-    open "^7.0.3"
+    open "^8.0.4"
 
 big-integer@^1.6.16, big-integer@^1.6.44:
   version "1.6.51"
@@ -5648,7 +6014,7 @@ browserify-zlib@^0.1.4:
   dependencies:
     pako "~0.2.0"
 
-browserslist@^4.21.3, browserslist@^4.21.5:
+browserslist@^4.21.3:
   version "4.21.5"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
   integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
@@ -5658,6 +6024,16 @@ browserslist@^4.21.3, browserslist@^4.21.5:
     node-releases "^2.0.8"
     update-browserslist-db "^1.0.10"
 
+browserslist@^4.21.9, browserslist@^4.22.1:
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619"
+  integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==
+  dependencies:
+    caniuse-lite "^1.0.30001541"
+    electron-to-chromium "^1.4.535"
+    node-releases "^2.0.13"
+    update-browserslist-db "^1.0.13"
+
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -5705,24 +6081,6 @@ bytes@3.1.2:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
-c8@^7.6.0:
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/c8/-/c8-7.13.0.tgz#a2a70a851278709df5a9247d62d7f3d4bcb5f2e4"
-  integrity sha512-/NL4hQTv1gBL6J6ei80zu3IiTrmePDKXKXOTLpHvcIWZTVYQlDhVWjjWvkhICylE8EwwnMVzDZugCvdx0/DIIA==
-  dependencies:
-    "@bcoe/v8-coverage" "^0.2.3"
-    "@istanbuljs/schema" "^0.1.3"
-    find-up "^5.0.0"
-    foreground-child "^2.0.0"
-    istanbul-lib-coverage "^3.2.0"
-    istanbul-lib-report "^3.0.0"
-    istanbul-reports "^3.1.4"
-    rimraf "^3.0.2"
-    test-exclude "^6.0.0"
-    v8-to-istanbul "^9.0.0"
-    yargs "^16.2.0"
-    yargs-parser "^20.2.9"
-
 cac@^6.7.12:
   version "6.7.14"
   resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
@@ -5800,6 +6158,11 @@ caniuse-lite@^1.0.30001449:
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz"
   integrity sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==
 
+caniuse-lite@^1.0.30001541:
+  version "1.0.30001559"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001559.tgz#95a982440d3d314c471db68d02664fb7536c5a30"
+  integrity sha512-cPiMKZgqgkg5LY3/ntGeLFUpi6tzddBNS58A4tnTgQw1zON7u2sZMU7SzOeVH4tj20++9ggL+V6FDOFMTaFFYA==
+
 canvg@^3.0.6:
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/canvg/-/canvg-3.0.10.tgz#8e52a2d088b6ffa23ac78970b2a9eebfae0ef4b3"
@@ -6092,15 +6455,6 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
-cliui@^7.0.2:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
-  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-    wrap-ansi "^7.0.0"
-
 clone-deep@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
@@ -6172,11 +6526,6 @@ color-name@^1.0.0, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-support@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
-  integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
-
 colorette@^2.0.16, colorette@^2.0.19:
   version "2.0.19"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
@@ -6269,11 +6618,6 @@ concurrently@^4.1.1:
     tree-kill "^1.2.1"
     yargs "^12.0.5"
 
-console-control-strings@^1.0.0, console-control-strings@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-  integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
-
 "consolidated-events@^1.1.0 || ^2.0.0":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/consolidated-events/-/consolidated-events-2.0.2.tgz#da8d8f8c2b232831413d9e190dc11669c79f4a91"
@@ -6333,12 +6677,12 @@ copy-to-clipboard@^3.0.8:
   dependencies:
     toggle-selection "^1.0.6"
 
-core-js-compat@^3.25.1:
-  version "3.28.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.28.0.tgz#c08456d854608a7264530a2afa281fadf20ecee6"
-  integrity sha512-myzPgE7QodMg4nnd3K1TDoES/nADRStM8Gpz0D6nhkwbmwEnE0ZGJgoWsvQ722FR8D7xS0n0LV556RcEicjTyg==
+core-js-compat@^3.31.0, core-js-compat@^3.33.1:
+  version "3.33.2"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.33.2.tgz#3ea4563bfd015ad4e4b52442865b02c62aba5085"
+  integrity sha512-axfo+wxFVxnqf8RvxTzoAlzW4gRoacrHeoFlc9n0x50+7BEyZL/Rt3hicaED1/CEd7I6tPCPVUYcJwCMO5XUYw==
   dependencies:
-    browserslist "^4.21.5"
+    browserslist "^4.22.1"
 
 core-js-pure@^3.25.1:
   version "3.28.0"
@@ -6798,11 +7142,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-delegates@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
-  integrity sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==
-
 depd@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -6828,6 +7167,11 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 detect-node@^2.0.4, detect-node@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
@@ -6989,6 +7333,11 @@ electron-to-chromium@^1.4.284:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.309.tgz#82158606da135ffffc16a2e1eb853fa0a10955e7"
   integrity sha512-U7DTiKe4h+irqBG6h4EZ0XXaZuJj4md3xIXXaGSYhwiumPZ4BSc6rgf9UD0hVUMaeP/jB0q5pKWCPxvhO8fvZA==
 
+electron-to-chromium@^1.4.535:
+  version "1.4.572"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.572.tgz#ed9876658998138fe9e3aa47ecfa0bf914192a86"
+  integrity sha512-RlFobl4D3ieetbnR+2EpxdzFl9h0RAJkPK3pfiwMug2nhBin2ZCsGIAJWdpNniLz43sgXam/CgipOmvTA+rUiA==
+
 emittery@^0.7.1:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
@@ -7213,41 +7562,13 @@ esbuild-plugin-alias@^0.2.1:
   resolved "https://registry.yarnpkg.com/esbuild-plugin-alias/-/esbuild-plugin-alias-0.2.1.tgz#45a86cb941e20e7c2bc68a2bea53562172494fcb"
   integrity sha512-jyfL/pwPqaFXyKnj8lP8iLk6Z0m099uXR45aSN8Av1XD4vhvQutxxPzgA2bTcAwQpa1zCXDcWOlhFgyP3GKqhQ==
 
-esbuild-register@^3.4.0:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/esbuild-register/-/esbuild-register-3.4.2.tgz#1e39ee0a77e8f320a9790e68c64c3559620b9175"
-  integrity sha512-kG/XyTDyz6+YDuyfB9ZoSIOOmgyFCH+xPRtsCa8W85HLRV5Csp+o3jWVbOSHgSLfyLc5DmP+KFDNwty4mEjC+Q==
+esbuild-register@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/esbuild-register/-/esbuild-register-3.5.0.tgz#449613fb29ab94325c722f560f800dd946dc8ea8"
+  integrity sha512-+4G/XmakeBAsvJuDugJvtyF1x+XJT4FMocynNpxrvEBViirpfUn2PgNpCHedfWhF4WokNsO/OvMKrmJOIJsI5A==
   dependencies:
     debug "^4.3.4"
 
-esbuild@^0.17.0:
-  version "0.17.17"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.17.tgz#fa906ab11b11d2ed4700f494f4f764229b25c916"
-  integrity sha512-/jUywtAymR8jR4qsa2RujlAF7Krpt5VWi72Q2yuLD4e/hvtNcFQ0I1j8m/bxq238pf3/0KO5yuXNpuLx8BE1KA==
-  optionalDependencies:
-    "@esbuild/android-arm" "0.17.17"
-    "@esbuild/android-arm64" "0.17.17"
-    "@esbuild/android-x64" "0.17.17"
-    "@esbuild/darwin-arm64" "0.17.17"
-    "@esbuild/darwin-x64" "0.17.17"
-    "@esbuild/freebsd-arm64" "0.17.17"
-    "@esbuild/freebsd-x64" "0.17.17"
-    "@esbuild/linux-arm" "0.17.17"
-    "@esbuild/linux-arm64" "0.17.17"
-    "@esbuild/linux-ia32" "0.17.17"
-    "@esbuild/linux-loong64" "0.17.17"
-    "@esbuild/linux-mips64el" "0.17.17"
-    "@esbuild/linux-ppc64" "0.17.17"
-    "@esbuild/linux-riscv64" "0.17.17"
-    "@esbuild/linux-s390x" "0.17.17"
-    "@esbuild/linux-x64" "0.17.17"
-    "@esbuild/netbsd-x64" "0.17.17"
-    "@esbuild/openbsd-x64" "0.17.17"
-    "@esbuild/sunos-x64" "0.17.17"
-    "@esbuild/win32-arm64" "0.17.17"
-    "@esbuild/win32-ia32" "0.17.17"
-    "@esbuild/win32-x64" "0.17.17"
-
 esbuild@^0.17.6:
   version "0.17.11"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.11.tgz#9f3122643b21d7e7731e42f18576c10bfa28152b"
@@ -7276,7 +7597,7 @@ esbuild@^0.17.6:
     "@esbuild/win32-ia32" "0.17.11"
     "@esbuild/win32-x64" "0.17.11"
 
-esbuild@^0.18.10:
+esbuild@^0.18.0, esbuild@^0.18.10:
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
   integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
@@ -7341,6 +7662,17 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
+escodegen@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.1.0.tgz#ba93bbb7a43986d29d6041f99f5262da773e2e17"
+  integrity sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^5.2.0"
+    esutils "^2.0.2"
+  optionalDependencies:
+    source-map "~0.6.1"
+
 eslint-config-prettier@~8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.1.0.tgz#4ef1eaf97afe5176e6a75ddfb57c335121abc5a6"
@@ -7469,10 +7801,10 @@ eslint-plugin-sonarjs@^0.5.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-sonarjs/-/eslint-plugin-sonarjs-0.5.0.tgz#ce17b2daba65a874c2862213a9e38e8986ad7d7d"
   integrity sha512-XW5MnzlRjhXpIdbULC/qAdJYHWw3rRLws/DyawdlPU/IdVr9AmRK1r2LaCvabwKOAW2XYYSo3kDX58E4MrB7PQ==
 
-eslint-plugin-storybook@^0.6.12:
-  version "0.6.12"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.12.tgz#7bdb3392bb03bebde40ed19accfd61246e9d6301"
-  integrity sha512-XbIvrq6hNVG6rpdBr+eBw63QhOMLpZneQVSooEDow8aQCWGCk/5vqtap1yxpVydNfSxi3S/3mBBRLQqKUqQRww==
+eslint-plugin-storybook@^0.6.15:
+  version "0.6.15"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.15.tgz#8a091605b0a90974ec8e62d8112db6c4bd3a6faa"
+  integrity sha512-lAGqVAJGob47Griu29KXYowI4G7KwMoJDOkEip8ujikuDLxU+oWJ1l0WL6F2oDO4QiyUFXvtDkEkISMOPzo+7w==
   dependencies:
     "@storybook/csf" "^0.0.1"
     "@typescript-eslint/utils" "^5.45.0"
@@ -7680,16 +8012,7 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
-estree-to-babel@^3.1.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/estree-to-babel/-/estree-to-babel-3.2.1.tgz#82e78315275c3ca74475fdc8ac1a5103c8a75bf5"
-  integrity sha512-YNF+mZ/Wu2FU/gvmzuWtYc8rloubL7wfXCTgouFrnjGVXPA/EeYYA7pupXWrb3Iv1cTBeSSxxJIbK23l4MRNqg==
-  dependencies:
-    "@babel/traverse" "^7.1.6"
-    "@babel/types" "^7.2.0"
-    c8 "^7.6.0"
-
-estree-walker@^2.0.1, estree-walker@^2.0.2:
+estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@@ -8219,14 +8542,6 @@ for-in@^1.0.2:
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==
 
-foreground-child@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-2.0.0.tgz#71b32800c9f15aa8f2f83f4a6bd9bff35d861a53"
-  integrity sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==
-  dependencies:
-    cross-spawn "^7.0.0"
-    signal-exit "^3.0.2"
-
 foreground-child@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.1.1.tgz#1d173e776d75d2772fed08efe4a0de1ea1b12d0d"
@@ -8351,6 +8666,11 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
 function.prototype.name@^1.1.2, function.prototype.name@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
@@ -8371,21 +8691,6 @@ functions-have-names@^1.2.2:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
-gauge@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-3.0.2.tgz#03bf4441c044383908bcfa0656ad91803259b395"
-  integrity sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==
-  dependencies:
-    aproba "^1.0.3 || ^2.0.0"
-    color-support "^1.1.2"
-    console-control-strings "^1.0.0"
-    has-unicode "^2.0.1"
-    object-assign "^4.1.1"
-    signal-exit "^3.0.0"
-    string-width "^4.2.3"
-    strip-ansi "^6.0.1"
-    wide-align "^1.1.2"
-
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -8396,7 +8701,7 @@ get-caller-file@^1.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
   integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
 
-get-caller-file@^2.0.1, get-caller-file@^2.0.5:
+get-caller-file@^2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -8410,6 +8715,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@
     has "^1.0.3"
     has-symbols "^1.0.3"
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-npm-tarball-url@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/get-npm-tarball-url/-/get-npm-tarball-url-2.0.3.tgz#67dff908d699e9e2182530ae6e939a93e5f8dfdb"
@@ -8508,13 +8818,6 @@ glob-promise@^4.2.0:
   dependencies:
     "@types/glob" "^7.1.3"
 
-glob-promise@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/glob-promise/-/glob-promise-6.0.2.tgz#7c7f2a223e3aaa8f7bd7ff5f24d0ab2352724b31"
-  integrity sha512-Ni2aDyD1ekD6x8/+K4hDriRDbzzfuK4yKpqSymJ4P7IxbtARiOOuU+k40kbHM0sLIlbf1Qh0qdMkAHMZYE6XJQ==
-  dependencies:
-    "@types/glob" "^8.0.0"
-
 glob-to-regexp@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
@@ -8532,7 +8835,7 @@ glob@7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@>=7, glob@^8.1.0:
+glob@>=7:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
   integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
@@ -8543,6 +8846,17 @@ glob@>=7, glob@^8.1.0:
     minimatch "^5.0.1"
     once "^1.3.0"
 
+glob@^10.0.0:
+  version "10.3.10"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b"
+  integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^2.3.5"
+    minimatch "^9.0.1"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+    path-scurry "^1.10.1"
+
 glob@^10.3.1:
   version "10.3.1"
   resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.1.tgz#9789cb1b994515bedb811a6deca735b5c37d2bf4"
@@ -8554,7 +8868,7 @@ glob@^10.3.1:
     minipass "^5.0.0 || ^6.0.2"
     path-scurry "^1.10.0"
 
-glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0:
+glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -8706,11 +9020,6 @@ has-tostringtag@^1.0.0:
   dependencies:
     has-symbols "^1.0.2"
 
-has-unicode@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
-  integrity sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==
-
 has-value@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
@@ -8749,6 +9058,13 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hasown@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
+  integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==
+  dependencies:
+    function-bind "^1.1.2"
+
 he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -9069,11 +9385,6 @@ internal-slot@^1.0.3, internal-slot@^1.0.4:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-interpret@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
-  integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
-
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -9200,6 +9511,13 @@ is-core-module@^2.12.1:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.13.0:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
+  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
+  dependencies:
+    hasown "^2.0.0"
+
 is-core-module@^2.9.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
@@ -9558,14 +9876,6 @@ isomorphic-fetch@^2.1.1:
     node-fetch "^1.0.1"
     whatwg-fetch ">=0.10.0"
 
-isomorphic-unfetch@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz#87341d5f4f7b63843d468438128cb087b7c3e98f"
-  integrity sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==
-  dependencies:
-    node-fetch "^2.6.1"
-    unfetch "^4.2.0"
-
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -9615,7 +9925,7 @@ istanbul-lib-source-maps@^4.0.0:
     istanbul-lib-coverage "^3.0.0"
     source-map "^0.6.1"
 
-istanbul-reports@^3.0.2, istanbul-reports@^3.1.4:
+istanbul-reports@^3.0.2:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.5.tgz#cc9a6ab25cb25659810e4785ed9d9fb742578bae"
   integrity sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==
@@ -9632,6 +9942,15 @@ jackspeak@^2.0.3:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
+jackspeak@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
+  integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
 jake@^10.8.5:
   version "10.8.5"
   resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.5.tgz#f2183d2c59382cb274226034543b9c03b8164c46"
@@ -10760,6 +11079,13 @@ magic-string@^0.27.0:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.13"
 
+magic-string@^0.30.0:
+  version "0.30.5"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.5.tgz#1994d980bd1c8835dc6e78db7cbd4ae4f24746f9"
+  integrity sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -10983,7 +11309,7 @@ mimic-fn@^4.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
   integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
 
-min-indent@^1.0.0:
+min-indent@^1.0.0, min-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
@@ -11025,6 +11351,11 @@ minipass@^4.0.0:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-6.0.2.tgz#542844b6c4ce95b202c0995b0a471f1229de4c81"
   integrity sha512-MzWSV5nYVT7mVyWCwn2o7JH13w2TBRmmSqSRCKzTw+lmft9X4z+3wjvs06Tzijo5z4W/kahUCDpRXTF+ZrmF/w==
 
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0":
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c"
+  integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==
+
 minizlib@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
@@ -11078,11 +11409,6 @@ ms@2.0.0:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
 
-ms@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
-  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
-
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -11136,11 +11462,6 @@ nanoclone@^0.2.1:
   resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
   integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
 
-nanoid@^3.3.1:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
-  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
-
 nanoid@^3.3.6:
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
@@ -11188,7 +11509,7 @@ negotiator@0.6.3:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
-neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
+neo-async@^2.5.0, neo-async@^2.6.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
@@ -11198,7 +11519,7 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-node-dir@^0.1.10, node-dir@^0.1.17:
+node-dir@^0.1.17:
   version "0.1.17"
   resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.17.tgz#5f5665d93351335caabef8f1c554516cf5f1e4e5"
   integrity sha512-tmPX422rYgofd4epzrNoOXiE8XFZYOcCq1vD7MAXCDO+O+zndlA2ztdKKMa+EeuBG5tHETpr4ml4RGgpqDCCAg==
@@ -11210,7 +11531,7 @@ node-fetch-native@^1.0.2:
   resolved "https://registry.yarnpkg.com/node-fetch-native/-/node-fetch-native-1.0.2.tgz#de3651399fda89a1a7c0bf6e7c4e9c239e8d0697"
   integrity sha512-KIkvH1jl6b3O7es/0ShyCgWLcfXxlBrLBbP3rOr23WArC66IMcU4DeZEeYEOwnopYhawLTn7/y+YtmASe8DFVQ==
 
-node-fetch@^1.0.1, node-fetch@^2.0.0, node-fetch@^2.6.0, node-fetch@^2.6.1, node-fetch@^2.6.7:
+node-fetch@^1.0.1, node-fetch@^2.0.0, node-fetch@^2.6.0, node-fetch@^2.6.7:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.9.tgz#7c7f744b5cc6eb5fd404e0c7a9fec630a55657e6"
   integrity sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==
@@ -11239,6 +11560,11 @@ node-notifier@^8.0.0:
     uuid "^8.3.0"
     which "^2.0.2"
 
+node-releases@^2.0.13:
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
+  integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==
+
 node-releases@^2.0.8:
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
@@ -11319,16 +11645,6 @@ npm-run-path@^5.1.0:
   dependencies:
     path-key "^4.0.0"
 
-npmlog@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-5.0.1.tgz#f06678e80e29419ad67ab964e0fa69959c1eb8b0"
-  integrity sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==
-  dependencies:
-    are-we-there-yet "^2.0.0"
-    console-control-strings "^1.1.0"
-    gauge "^3.0.0"
-    set-blocking "^2.0.0"
-
 nth-check@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
@@ -11475,7 +11791,7 @@ onetime@^6.0.0:
   dependencies:
     mimic-fn "^4.0.0"
 
-open@^7.0.3, open@^7.4.2:
+open@^7.4.2:
   version "7.4.2"
   resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
   integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
@@ -11483,7 +11799,7 @@ open@^7.0.3, open@^7.4.2:
     is-docker "^2.0.0"
     is-wsl "^2.1.1"
 
-open@^8.4.0:
+open@^8.0.4, open@^8.4.0:
   version "8.4.2"
   resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
   integrity sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==
@@ -11677,7 +11993,7 @@ parse5@^7.0.0:
   dependencies:
     entities "^4.4.0"
 
-parseurl@~1.3.2, parseurl@~1.3.3:
+parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
@@ -11755,6 +12071,14 @@ path-scurry@^1.10.0:
     lru-cache "^9.1.1 || ^10.0.0"
     minipass "^5.0.0 || ^6.0.2"
 
+path-scurry@^1.10.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.10.1.tgz#9ba6bf5aa8500fe9fd67df4f0d9483b2b0bfc698"
+  integrity sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==
+  dependencies:
+    lru-cache "^9.1.1 || ^10.0.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
 path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
@@ -11813,7 +12137,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -12263,21 +12587,21 @@ react-docgen-typescript@^2.2.2:
   resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c"
   integrity sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==
 
-react-docgen@6.0.0-alpha.3:
-  version "6.0.0-alpha.3"
-  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-6.0.0-alpha.3.tgz#4d8a4916b45de4aadb90eb5f3a6f923edf447928"
-  integrity sha512-DDLvB5EV9As1/zoUsct6Iz2Cupw9FObEGD3DMcIs3EDFIoSKyz8FZtoWj3Wj+oodrU4/NfidN0BL5yrapIcTSA==
+react-docgen@^6.0.2:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-6.0.4.tgz#85eeebac5fdeb781dbf610fdc429c20a4f06131c"
+  integrity sha512-gF+p+1ZwC2eO66bt763Tepmh5q9kDiFIrqW3YjUV/a+L96h0m5+/wSFQoOHL2cffyrPMZMxP03IgbggJ11QbOw==
   dependencies:
-    "@babel/core" "^7.7.5"
-    "@babel/generator" "^7.12.11"
-    ast-types "^0.14.2"
-    commander "^2.19.0"
+    "@babel/core" "^7.18.9"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+    "@types/babel__core" "^7.18.0"
+    "@types/babel__traverse" "^7.18.0"
+    "@types/doctrine" "^0.0.6"
+    "@types/resolve" "^1.20.2"
     doctrine "^3.0.0"
-    estree-to-babel "^3.1.0"
-    neo-async "^2.6.1"
-    node-dir "^0.1.10"
-    resolve "^1.17.0"
-    strip-indent "^3.0.0"
+    resolve "^1.22.1"
+    strip-indent "^4.0.0"
 
 react-dom@^17.0.2:
   version "17.0.2"
@@ -12400,6 +12724,25 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
+react-remove-scroll-bar@^2.3.3:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
+  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
+react-remove-scroll@2.5.5:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
+  integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-router-dom@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
@@ -12450,6 +12793,15 @@ react-select@~3.1.0:
     react-input-autosize "^2.2.2"
     react-transition-group "^4.3.0"
 
+react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
 react-test-renderer@^16.0.0-0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
@@ -12542,7 +12894,7 @@ readable-stream@^2.0.0, readable-stream@^2.2.2, readable-stream@~2.3.6:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
+readable-stream@^3.1.1, readable-stream@^3.4.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.1.tgz#f9f9b5f536920253b3d26e7660e7da4ccff9bb62"
   integrity sha512-+rQmrWMYGA90yenhTYsLWAsLsqVC8osOw6PKE1HDYiO0gdPeKe/xDHNzIAIn4C91YQ6oenEhfYqqc1883qHbjQ==
@@ -12579,13 +12931,6 @@ recast@^0.23.1:
     source-map "~0.6.1"
     tslib "^2.0.1"
 
-rechoir@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
-  integrity sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==
-  dependencies:
-    resolve "^1.1.6"
-
 recompose@^0.30.0:
   version "0.30.0"
   resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0"
@@ -12652,10 +12997,10 @@ regenerator-runtime@^0.14.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
   integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
 
-regenerator-transform@^0.15.1:
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
-  integrity sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==
+regenerator-transform@^0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz#5bbae58b522098ebdf09bca2f83838929001c7a4"
+  integrity sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==
   dependencies:
     "@babel/runtime" "^7.8.4"
 
@@ -12863,7 +13208,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==
 
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.19.0:
+resolve@^1.10.0, resolve@^1.10.1, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.19.0:
   version "1.22.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
   integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
@@ -12872,6 +13217,15 @@ resolve@^1.1.6, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.12.0, resolve@^1.14
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.22.1:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.4:
   version "2.0.0-next.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
@@ -13002,11 +13356,6 @@ rxjs@^7.5.1, rxjs@^7.8.0:
   dependencies:
     tslib "^2.1.0"
 
-safe-buffer@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
-  integrity sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==
-
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -13106,7 +13455,7 @@ semver-compare@^1.0.0:
   resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
   integrity sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==
 
-"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1, semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0, semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.5.2, semver@^7.5.3, semver@~7.0.0:
+"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1, semver@^6.0.0, semver@^6.1.0, semver@^6.1.2, semver@^6.3.0, semver@^6.3.1, semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.5.2, semver@^7.5.3:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
@@ -13132,17 +13481,6 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-serve-favicon@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/serve-favicon/-/serve-favicon-2.5.0.tgz#935d240cdfe0f5805307fdfe967d88942a2cbcf0"
-  integrity sha512-FMW2RvqNr03x+C0WxTyu6sOv21oOjkq5j8tjquWccwa6ScNyGFOGJVpuS1NmTVGBAHS07xnSKotgf2ehQmf9iA==
-  dependencies:
-    etag "~1.8.1"
-    fresh "0.5.2"
-    ms "2.1.1"
-    parseurl "~1.3.2"
-    safe-buffer "5.1.1"
-
 serve-handler@6.1.5:
   version "6.1.5"
   resolved "https://registry.yarnpkg.com/serve-handler/-/serve-handler-6.1.5.tgz#a4a0964f5c55c7e37a02a633232b6f0d6f068375"
@@ -13245,15 +13583,6 @@ shell-quote@^1.6.1:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.0.tgz#20d078d0eaf71d54f43bd2ba14a1b5b9bfa5c8ba"
   integrity sha512-QHsz8GgQIGKlRi24yFc6a6lN69Idnx634w49ay6+jA5yFh7a1UY+4Rp6HPx/L/1zcEDPEij8cIsiqR6bQsE5VQ==
 
-shelljs@^0.8.5:
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.5.tgz#de055408d8361bed66c669d2f000538ced8ee20c"
-  integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==
-  dependencies:
-    glob "^7.0.0"
-    interpret "^1.0.0"
-    rechoir "^0.6.2"
-
 shellwords@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
@@ -13287,12 +13616,12 @@ simple-git@^3.19.0:
     "@kwsites/promise-deferred" "^1.1.1"
     debug "^4.3.4"
 
-simple-update-notifier@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz#67694c121de354af592b347cdba798463ed49c82"
-  integrity sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==
+simple-update-notifier@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz#d70b92bdab7d6d90dfd73931195a30b6e3d7cebb"
+  integrity sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==
   dependencies:
-    semver "~7.0.0"
+    semver "^7.5.3"
 
 sisteransi@^1.0.5:
   version "1.0.5"
@@ -13533,10 +13862,10 @@ store2@^2.14.2:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068"
   integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==
 
-storybook-dark-mode@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/storybook-dark-mode/-/storybook-dark-mode-3.0.0.tgz#4c9d59de28c84a0c159ddc3d18e4e8e33db779a9"
-  integrity sha512-aeAvqP/mmdccEiCsvx6aw3M0i7mZSiXROsrAsEQN8vl1lAg3FZN+y3Xu/f+ye59wLMRuKJC/JBp7E3/H7vLBRQ==
+storybook-dark-mode@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/storybook-dark-mode/-/storybook-dark-mode-3.0.1.tgz#b79e8809fc89da9c06edb5d2d20cba163c256adc"
+  integrity sha512-3V6XBhkUq63BF6KzyDBbfV5/8sYtF4UtVccH1tK+Lrd4p0tF8k7yHOvVDhFL9hexnKXcLEnbC+42YDTPvjpK+A==
   dependencies:
     "@storybook/addons" "^7.0.0"
     "@storybook/api" "^7.0.0"
@@ -13547,12 +13876,12 @@ storybook-dark-mode@^3.0.0:
     fast-deep-equal "^3.1.3"
     memoizerific "^1.11.3"
 
-storybook@~7.0.24:
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/storybook/-/storybook-7.0.24.tgz#5194d7b72964669985b8c2227772e882e6ae2563"
-  integrity sha512-ilQDM4+KaNO8s5jU4EnS68JWb9KaLR0+xTNa/BEXQa18SnSt/qZYORXtqispwkyuL/9xwaMVwtS+st7JOucNWA==
+storybook@~7.5.2:
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/storybook/-/storybook-7.5.2.tgz#73cb6e4f607be09e5000a8d4c7d21d9ed42dcacb"
+  integrity sha512-wuB5VdmI6teU2z5iiBEZ2ziNeP6g6Da/dGM7+tWQVUl8bmfOmpEgzgEyS1/XqdOfm+HoZplspwM0XMHOLo/Now==
   dependencies:
-    "@storybook/cli" "7.0.24"
+    "@storybook/cli" "7.5.2"
 
 stream-shift@^1.0.0:
   version "1.0.1"
@@ -13572,7 +13901,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -13747,6 +14076,13 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
+strip-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-4.0.0.tgz#b41379433dd06f5eae805e21d631e07ee670d853"
+  integrity sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==
+  dependencies:
+    min-indent "^1.0.1"
+
 strip-json-comments@^3.0.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
@@ -13900,6 +14236,13 @@ telejson@^7.0.3:
   dependencies:
     memoizerific "^1.11.3"
 
+telejson@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/telejson/-/telejson-7.2.0.tgz#3994f6c9a8f8d7f2dba9be2c7c5bbb447e876f32"
+  integrity sha512-1QTEcJkJEhc8OnStBx/ILRu5J2p0GjvWsBx56bmZRqnrkdBMUe+nX92jxV+p3dB4CP6PZCdJMQJwCggkNBMzkQ==
+  dependencies:
+    memoizerific "^1.11.3"
+
 temp-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
@@ -13994,7 +14337,7 @@ through@^2.3.6, through@^2.3.8:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
-tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
+tiny-invariant@^1.0.2, tiny-invariant@^1.0.6, tiny-invariant@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
   integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
@@ -14060,6 +14403,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+tocbot@^4.20.1:
+  version "4.21.6"
+  resolved "https://registry.yarnpkg.com/tocbot/-/tocbot-4.21.6.tgz#64e3685a3cb41e23841a06eedba9ad807270190f"
+  integrity sha512-bAnyV6SU2n1AvuBvEgi8t7KiIn5rRiEmwFp4+elx/1ueuncAUyubITfXDMwOqStgUwh8pDzLdWgDKLicsJPikw==
+
 toggle-selection@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
@@ -14119,7 +14467,7 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
-tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.10.0, tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -14226,7 +14574,7 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
-type-fest@^2.13.0, type-fest@^2.19.0:
+type-fest@^2.13.0, type-fest@^2.19.0, type-fest@~2.19:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
   integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
@@ -14300,10 +14648,10 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
-unfetch@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be"
-  integrity sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
@@ -14390,15 +14738,15 @@ unpipe@1.0.0, unpipe@~1.0.0:
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
 
-unplugin@^0.10.2:
-  version "0.10.2"
-  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.10.2.tgz#0f7089c3666f592cc448d746e39e7f41e9afb01a"
-  integrity sha512-6rk7GUa4ICYjae5PrAllvcDeuT8pA9+j5J5EkxbMFaV+SalHhxZ7X2dohMzu6C3XzsMT+6jwR/+pwPNR3uK9MA==
+unplugin@^1.3.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.5.0.tgz#8938ae84defe62afc7757df9ca05d27160f6c20c"
+  integrity sha512-9ZdRwbh/4gcm1JTOkp9lAkIDrtOyOxgHmY7cjuwI8L/2RTikMcVG25GsZwNAgRuap3iDw2jeq7eoqtAsz5rW3A==
   dependencies:
-    acorn "^8.8.0"
+    acorn "^8.10.0"
     chokidar "^3.5.3"
     webpack-sources "^3.2.3"
-    webpack-virtual-modules "^0.4.5"
+    webpack-virtual-modules "^0.5.0"
 
 unset-value@^1.0.0:
   version "1.0.0"
@@ -14421,6 +14769,14 @@ update-browserslist-db@^1.0.10:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+update-browserslist-db@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 update-check@1.5.4:
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/update-check/-/update-check-1.5.4.tgz#5b508e259558f1ad7dbc8b4b0457d4c9d28c8743"
@@ -14449,6 +14805,13 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-callback-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
+  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+  dependencies:
+    tslib "^2.0.0"
+
 use-memo-one@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
@@ -14461,6 +14824,14 @@ use-resize-observer@^9.1.0:
   dependencies:
     "@juggle/resize-observer" "^3.3.1"
 
+use-sidecar@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -14523,15 +14894,6 @@ v8-to-istanbul@^7.0.0:
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
-v8-to-istanbul@^9.0.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.1.0.tgz#1b83ed4e397f58c85c266a570fc2558b5feb9265"
-  integrity sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==
-  dependencies:
-    "@jridgewell/trace-mapping" "^0.3.12"
-    "@types/istanbul-lib-coverage" "^2.0.1"
-    convert-source-map "^1.6.0"
-
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -14647,10 +15009,10 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack-virtual-modules@^0.4.5:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.6.tgz#3e4008230731f1db078d9cb6f68baf8571182b45"
-  integrity sha512-5tyDlKLqPfMqjT3Q9TAqf2YqjwmnUleZwzJi1A5qXnlBCdj2AtOJ6wAWdglTIDOPgOiOrXeBeFcsQ8+aGQ6QbA==
+webpack-virtual-modules@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz#362f14738a56dae107937ab98ea7062e8bdd3b6c"
+  integrity sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==
 
 whatwg-encoding@^1.0.5:
   version "1.0.5"
@@ -14747,13 +15109,6 @@ which@^2.0.1, which@^2.0.2:
   dependencies:
     isexe "^2.0.0"
 
-wide-align@^1.1.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.5.tgz#df1d4c206854369ecf3c9a4898f1b23fbd9d15d3"
-  integrity sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==
-  dependencies:
-    string-width "^1.0.2 || 2 || 3 || 4"
-
 widest-line@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-4.0.1.tgz#a0fc673aaba1ea6f0a0d35b3c2795c9a9cc2ebf2"
@@ -14892,11 +15247,6 @@ xterm@^4.2.0:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
   integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
 
-y18n@^5.0.5:
-  version "5.0.8"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
-  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
-
 yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
@@ -14912,7 +15262,7 @@ yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2, yaml@^2.2.2, yaml@^2.3.0:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.3.tgz#01f6d18ef036446340007db8e016810e5d64aad9"
   integrity sha512-zw0VAJxgeZ6+++/su5AFoqBbZbrEakwu+X0M5HmcwUiBL7AzcuPKjj5we4xfQLp78LkEMpD0cOnUhmgOVy3KdQ==
 
-yargs-parser@^11.1.1, yargs-parser@^18.1.2, yargs-parser@^18.1.3, yargs-parser@^20.2.2, yargs-parser@^20.2.9:
+yargs-parser@^11.1.1, yargs-parser@^18.1.2, yargs-parser@^18.1.3:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
   integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
@@ -14955,19 +15305,6 @@ yargs@^15.4.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
-yargs@^16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
-  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
-  dependencies:
-    cliui "^7.0.2"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.0"
-    y18n "^5.0.5"
-    yargs-parser "^20.2.2"
-
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"

From 979c1f54005d2bb745aa467c7ffbaf6f7b02c143 Mon Sep 17 00:00:00 2001
From: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
Date: Mon, 6 Nov 2023 08:26:40 -0800
Subject: [PATCH 28/43] feat: [M3-7043] - Improve layout of support ticket
 breadcrumb and status details (#9855)

* Initial UI change to match mockup

* Fix broken wrapping on mobile

* Update test

* Clean up and break into new component file

* Display all three ticket statuses

* Update test

* Fix console error from Typography

* Clean up Breadcrumb - remove subtitle

* Added changeset: Improve layout of breadcrumb for support tickets

* Improve test coverage

* Improve test coverage

* Update imports and address feedback - status color contrast

* Address feedback - clean up component render

* Add aria-label to status icon

* Update Storybook for StatusIcon
---
 .../pr-9855-changed-1698780397426.md          |  5 ++
 .../src/components/Breadcrumb/FinalCrumb.tsx  |  7 --
 .../src/components/Breadcrumb/types.ts        |  1 -
 .../StatusIcon/StatusIcon.stories.mdx         | 29 -------
 .../StatusIcon/StatusIcon.stories.tsx         | 24 +++++
 .../src/components/StatusIcon/StatusIcon.tsx  | 26 ++++--
 .../SupportTicketDetail.test.tsx              | 61 +++++++++++--
 .../SupportTicketDetail.tsx                   | 87 +------------------
 .../SupportTicketDetail/TicketStatus.tsx      | 84 ++++++++++++++++++
 9 files changed, 190 insertions(+), 134 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9855-changed-1698780397426.md
 delete mode 100644 packages/manager/src/components/StatusIcon/StatusIcon.stories.mdx
 create mode 100644 packages/manager/src/components/StatusIcon/StatusIcon.stories.tsx
 create mode 100644 packages/manager/src/features/Support/SupportTicketDetail/TicketStatus.tsx

diff --git a/packages/manager/.changeset/pr-9855-changed-1698780397426.md b/packages/manager/.changeset/pr-9855-changed-1698780397426.md
new file mode 100644
index 00000000000..9d8af5769aa
--- /dev/null
+++ b/packages/manager/.changeset/pr-9855-changed-1698780397426.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Improve layout of breadcrumb for support tickets ([#9855](https://github.com/linode/manager/pull/9855))
diff --git a/packages/manager/src/components/Breadcrumb/FinalCrumb.tsx b/packages/manager/src/components/Breadcrumb/FinalCrumb.tsx
index ec9242f5d91..bcc92e6bf53 100644
--- a/packages/manager/src/components/Breadcrumb/FinalCrumb.tsx
+++ b/packages/manager/src/components/Breadcrumb/FinalCrumb.tsx
@@ -5,7 +5,6 @@ import * as React from 'react';
 
 import { EditableText } from 'src/components/EditableText/EditableText';
 import { H1Header } from 'src/components/H1Header/H1Header';
-import { Typography } from 'src/components/Typography';
 
 import { EditableProps, LabelProps } from './types';
 
@@ -34,7 +33,6 @@ interface Props {
   crumb: string;
   labelOptions?: LabelProps;
   onEditHandlers?: EditableProps;
-  subtitle?: string;
 }
 
 export const FinalCrumb = React.memo((props: Props) => {
@@ -65,11 +63,6 @@ export const FinalCrumb = React.memo((props: Props) => {
         dataQaEl={crumb}
         title={crumb}
       />
-      {labelOptions && labelOptions.subtitle && (
-        <Typography data-qa-label-subtitle variant="body1">
-          {labelOptions.subtitle}
-        </Typography>
-      )}
     </div>
   );
 });
diff --git a/packages/manager/src/components/Breadcrumb/types.ts b/packages/manager/src/components/Breadcrumb/types.ts
index 72bc5d03dd3..b3daee93837 100644
--- a/packages/manager/src/components/Breadcrumb/types.ts
+++ b/packages/manager/src/components/Breadcrumb/types.ts
@@ -5,7 +5,6 @@ export interface LabelProps {
   noCap?: boolean;
   prefixComponent?: JSX.Element | null;
   prefixStyle?: CSSProperties;
-  subtitle?: string;
   suffixComponent?: JSX.Element | null;
 }
 
diff --git a/packages/manager/src/components/StatusIcon/StatusIcon.stories.mdx b/packages/manager/src/components/StatusIcon/StatusIcon.stories.mdx
deleted file mode 100644
index 188b9a0b515..00000000000
--- a/packages/manager/src/components/StatusIcon/StatusIcon.stories.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { StatusIcon } from './StatusIcon';
-
-<Meta title="Components/Status Icons" component={StatusIcon} />
-
-export const StatusIconTemplate = (args) => <StatusIcon {...args} />;
-
-# Status Icons
-
-<Canvas>
-  <Story
-    name="Status Icons"
-    args={{
-      status: 'active',
-      pulse: false,
-    }}
-    argTypes={{
-      status: {
-        description: 'Status of the icon',
-        options: ['error', 'other', 'active', 'inactive'],
-        control: { type: 'radio' },
-      },
-    }}
-  >
-    {StatusIconTemplate.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Status Icons" sort="requiredFirst"/>
diff --git a/packages/manager/src/components/StatusIcon/StatusIcon.stories.tsx b/packages/manager/src/components/StatusIcon/StatusIcon.stories.tsx
new file mode 100644
index 00000000000..efa2956860c
--- /dev/null
+++ b/packages/manager/src/components/StatusIcon/StatusIcon.stories.tsx
@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { StatusIcon } from './StatusIcon';
+
+const meta: Meta<typeof StatusIcon> = {
+  component: StatusIcon,
+  title: 'Components/StatusIcon',
+};
+
+type Story = StoryObj<typeof StatusIcon>;
+
+export const Default: Story = {
+  args: {
+    pulse: false,
+    status: 'active',
+  },
+  parameters: {
+    controls: { include: ['pulse', 'status', 'ariaLabel'] },
+  },
+  render: (args) => <StatusIcon {...args} />,
+};
+
+export default meta;
diff --git a/packages/manager/src/components/StatusIcon/StatusIcon.tsx b/packages/manager/src/components/StatusIcon/StatusIcon.tsx
index 78bd4ddea51..fab623fe350 100644
--- a/packages/manager/src/components/StatusIcon/StatusIcon.tsx
+++ b/packages/manager/src/components/StatusIcon/StatusIcon.tsx
@@ -8,12 +8,23 @@ import { Box, BoxProps } from '../Box';
 export type Status = 'active' | 'error' | 'inactive' | 'other';
 
 export interface StatusProps extends BoxProps {
+  /**
+   * Optional property can override the value of the default aria label for status.
+   * This is useful when the status is not descriptive enough.
+   */
+  ariaLabel?: string;
+  /**
+   * When true, displays the icon with a pulsing animation.
+   */
   pulse?: boolean;
+  /**
+   * Status of the icon.
+   */
   status: Status;
 }
 
-const StatusIcon = React.memo((props: StatusProps) => {
-  const { pulse, status, ...rest } = props;
+export const StatusIcon = React.memo((props: StatusProps) => {
+  const { ariaLabel, pulse, status, ...rest } = props;
 
   const shouldPulse =
     pulse === undefined
@@ -21,11 +32,16 @@ const StatusIcon = React.memo((props: StatusProps) => {
         !['active', 'error', 'inactive'].includes(status)
       : pulse;
 
-  return <StyledDiv pulse={shouldPulse} status={status} {...rest} />;
+  return (
+    <StyledDiv
+      aria-label={ariaLabel ?? `Status is ${status}`}
+      pulse={shouldPulse}
+      status={status}
+      {...rest}
+    />
+  );
 });
 
-export { StatusIcon };
-
 const StyledDiv = styled(Box, {
   shouldForwardProp: omittedProps(['pulse', 'status']),
 })<StatusProps>(({ theme, ...props }) => ({
diff --git a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.test.tsx b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.test.tsx
index 6bb1c386f3a..0b3d63acd23 100644
--- a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.test.tsx
+++ b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.test.tsx
@@ -7,13 +7,13 @@ import {
 } from 'src/factories/support';
 import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { rest, server } from 'src/mocks/testServer';
-import { wrapWithTheme } from 'src/utilities/testHelpers';
+import { renderWithTheme, wrapWithTheme } from 'src/utilities/testHelpers';
 
 import { SupportTicketDetail } from './SupportTicketDetail';
 
 describe('Support Ticket Detail', () => {
   it('should display a loading spinner', () => {
-    render(wrapWithTheme(<SupportTicketDetail />));
+    renderWithTheme(<SupportTicketDetail />);
     expect(screen.getByTestId('circle-progress')).toBeInTheDocument();
   });
 
@@ -36,7 +36,7 @@ describe('Support Ticket Detail', () => {
     expect(await findByText(/TEST Support Ticket body/i)).toBeInTheDocument();
   });
 
-  it("should display a 'new' icon and 'updated by' messaging", async () => {
+  it("should display a 'new' status and 'updated by' messaging", async () => {
     server.use(
       rest.get('*/support/tickets/:ticketId', (req, res, ctx) => {
         const ticket = supportTicketFactory.build({
@@ -47,8 +47,26 @@ describe('Support Ticket Detail', () => {
         return res(ctx.json(ticket));
       })
     );
-    render(wrapWithTheme(<SupportTicketDetail />));
-    expect(await screen.findByText(/new/)).toBeInTheDocument();
+    renderWithTheme(<SupportTicketDetail />);
+    expect(await screen.findByText(/New/)).toBeInTheDocument();
+    expect(
+      await screen.findByText(/updated by test-account/i)
+    ).toBeInTheDocument();
+  });
+
+  it("should display an 'open' status and 'updated by' messaging", async () => {
+    server.use(
+      rest.get('*/support/tickets/:ticketId', (req, res, ctx) => {
+        const ticket = supportTicketFactory.build({
+          id: req.params.ticketId,
+          status: 'open',
+          updated_by: 'test-account',
+        });
+        return res(ctx.json(ticket));
+      })
+    );
+    renderWithTheme(<SupportTicketDetail />);
+    expect(await screen.findByText(/Open/)).toBeInTheDocument();
     expect(
       await screen.findByText(/updated by test-account/i)
     ).toBeInTheDocument();
@@ -64,13 +82,40 @@ describe('Support Ticket Detail', () => {
         return res(ctx.json(ticket));
       })
     );
-    render(wrapWithTheme(<SupportTicketDetail />));
-    expect(await screen.findByText(/closed/)).toBeInTheDocument();
+    renderWithTheme(<SupportTicketDetail />);
+    expect(await screen.findByText('Closed')).toBeInTheDocument();
     expect(
       await screen.findByText(/closed by test-account/i)
     ).toBeInTheDocument();
   });
 
+  it('should display an entity in the status details if the ticket has one', async () => {
+    const mockEntity = {
+      id: 1,
+      label: 'my-linode-entity',
+      type: 'linode',
+      url: '/',
+    };
+    server.use(
+      rest.get('*/support/tickets/:ticketId', (req, res, ctx) => {
+        const ticket = supportTicketFactory.build({
+          entity: mockEntity,
+          id: req.params.ticketId,
+        });
+        return res(ctx.json(ticket));
+      })
+    );
+    renderWithTheme(<SupportTicketDetail />);
+    const entity = await screen.findByText(mockEntity.label, { exact: false });
+    const entityTextLink = entity.closest('a');
+
+    expect(entity).toBeInTheDocument();
+    expect(entityTextLink).toBeInTheDocument();
+    expect(entityTextLink?.getAttribute('aria-label')).toContain(
+      mockEntity.label
+    );
+  });
+
   it('should display replies', async () => {
     server.use(
       rest.get('*/support/tickets/:ticketId/replies', (req, res, ctx) => {
@@ -90,7 +135,7 @@ describe('Support Ticket Detail', () => {
         return res(ctx.json(ticket));
       })
     );
-    render(wrapWithTheme(<SupportTicketDetail />));
+    renderWithTheme(<SupportTicketDetail />);
     expect(
       await screen.findByText(
         'Hi, this is lindoe support! OMG, sorry your Linode is broken!'
diff --git a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx
index c30b3730892..2cc136d468a 100644
--- a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx
+++ b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx
@@ -1,59 +1,26 @@
 import { SupportReply } from '@linode/api-v4/lib/support';
-import { Stack } from 'src/components/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
 import { isEmpty } from 'ramda';
 import * as React from 'react';
-import { Link, useHistory, useLocation, useParams } from 'react-router-dom';
+import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { Waypoint } from 'react-waypoint';
-import { makeStyles } from 'tss-react/mui';
 
-import { Chip } from 'src/components/Chip';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { EntityIcon } from 'src/components/EntityIcon/EntityIcon';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
-import { Notice } from 'src/components/Notice/Notice';
-import { Typography } from 'src/components/Typography';
 import { useProfile } from 'src/queries/profile';
 import {
   useInfiniteSupportTicketRepliesQuery,
   useSupportTicketQuery,
 } from 'src/queries/support';
-import { capitalize } from 'src/utilities/capitalize';
-import { formatDate } from 'src/utilities/formatDate';
-import { getLinkTargets } from 'src/utilities/getEventsActionLink';
 import { sanitizeHTML } from 'src/utilities/sanitizeHTML';
 
 import { ExpandableTicketPanel } from '../ExpandableTicketPanel';
 import TicketAttachmentList from '../TicketAttachmentList';
 import AttachmentError from './AttachmentError';
 import { ReplyContainer } from './TabbedReply/ReplyContainer';
-
-import type { EntityVariants } from 'src/components/EntityIcon/EntityIcon';
-
-const useStyles = makeStyles()((theme: Theme) => ({
-  closed: {
-    backgroundColor: theme.color.red,
-  },
-  open: {
-    backgroundColor: theme.color.green,
-  },
-  status: {
-    color: theme.color.white,
-    marginLeft: theme.spacing(1),
-    marginTop: 5,
-  },
-  ticketLabel: {
-    position: 'relative',
-    top: -3,
-  },
-  title: {
-    alignItems: 'center',
-    display: 'flex',
-  },
-}));
+import { TicketStatus } from './TicketStatus';
 
 export interface AttachmentError {
   error: string;
@@ -66,8 +33,6 @@ export const SupportTicketDetail = () => {
   const { ticketId } = useParams<{ ticketId: string }>();
   const id = Number(ticketId);
 
-  const { classes, cx } = useStyles();
-
   const attachmentErrors = history.location.state?.attachmentErrors;
 
   const { data: profile } = useProfile();
@@ -95,47 +60,6 @@ export const SupportTicketDetail = () => {
     return null;
   }
 
-  const formattedDate = formatDate(ticket.updated, {
-    timezone: profile?.timezone,
-  });
-
-  const status = ticket.status === 'closed' ? 'Closed' : 'Last updated';
-
-  const renderEntityLabelWithIcon = () => {
-    const entity = ticket?.entity;
-
-    if (!entity) {
-      return null;
-    }
-
-    const target = getLinkTargets(entity);
-
-    return (
-      <Notice spacingTop={12} variant="success">
-        <Stack alignItems="center" direction="row" spacing={1}>
-          <EntityIcon size={20} variant={entity.type as EntityVariants} />
-          <Typography>
-            This ticket is associated with your {capitalize(entity.type)}{' '}
-            {target ? <Link to={target}>{entity.label}</Link> : entity.label}
-          </Typography>
-        </Stack>
-      </Notice>
-    );
-  };
-
-  const _Chip = () => (
-    <Chip
-      className={cx({
-        [classes.closed]: ticket.status === 'closed',
-        [classes.open]: ticket.status === 'open' || ticket.status === 'new',
-        [classes.status]: true,
-      })}
-      component="div"
-      label={ticket.status}
-      role="term"
-    />
-  );
-
   const ticketTitle = sanitizeHTML({
     disallowedTagsMode: 'discard',
     sanitizingTier: 'none',
@@ -162,14 +86,11 @@ export const SupportTicketDetail = () => {
               position: 2,
             },
           ],
-          labelOptions: {
-            subtitle: `${status} by ${ticket.updated_by} at ${formattedDate}`,
-            suffixComponent: <_Chip />,
-          },
           pathname: location.pathname,
         }}
         title={ticketTitle}
       />
+      <TicketStatus {...ticket} />
 
       {/* If a user attached files when creating the ticket and was redirected here, display those errors. */}
       {attachmentErrors !== undefined &&
@@ -182,8 +103,6 @@ export const SupportTicketDetail = () => {
           />
         ))}
 
-      {ticket.entity && renderEntityLabelWithIcon()}
-
       <Grid container spacing={2}>
         <Grid xs={12}>
           {/* If the ticket isn't blank, display it, followed by replies (if any). */}
diff --git a/packages/manager/src/features/Support/SupportTicketDetail/TicketStatus.tsx b/packages/manager/src/features/Support/SupportTicketDetail/TicketStatus.tsx
new file mode 100644
index 00000000000..8d82d055a47
--- /dev/null
+++ b/packages/manager/src/features/Support/SupportTicketDetail/TicketStatus.tsx
@@ -0,0 +1,84 @@
+import { SupportTicket } from '@linode/api-v4/lib/support/types';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+
+import { Link } from 'src/components/Link';
+import { Stack } from 'src/components/Stack';
+import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
+import { Typography } from 'src/components/Typography';
+import { useProfile } from 'src/queries/profile';
+import { capitalize } from 'src/utilities/capitalize';
+import { formatDate } from 'src/utilities/formatDate';
+import { getLinkTargets } from 'src/utilities/getEventsActionLink';
+
+type Props = Pick<
+  SupportTicket,
+  'entity' | 'status' | 'updated' | 'updated_by'
+>;
+
+export const TicketStatus = (props: Props) => {
+  const { entity, status, updated, updated_by } = props;
+
+  const { data: profile } = useProfile();
+
+  const formattedDate = formatDate(updated, {
+    timezone: profile?.timezone,
+  });
+  const statusUpdateText = status === 'closed' ? 'Closed' : 'Last updated';
+
+  const renderEntityLabel = () => {
+    if (!entity) {
+      return null;
+    }
+
+    const target = getLinkTargets(entity);
+
+    return (
+      <Typography>
+        | Regarding:{' '}
+        {target ? <Link to={target}>{entity.label}</Link> : entity.label}
+      </Typography>
+    );
+  };
+
+  return (
+    <Stack
+      sx={(theme) => ({
+        flexFlow: 'row wrap',
+        marginBottom: theme.spacing(3),
+        [theme.breakpoints.down('md')]: {
+          marginLeft: theme.spacing(1),
+        },
+      })}
+    >
+      <Stack
+        sx={{
+          display: 'inline-flex',
+          flexDirection: 'row',
+        }}
+      >
+        <StyledStatusIcon
+          ariaLabel={`Ticket status is ${status}`}
+          status={status === 'closed' ? 'inactive' : 'active'}
+        />
+        {capitalize(status)}
+      </Stack>
+      &nbsp;
+      <Typography>
+        | {statusUpdateText} by {updated_by} at {formattedDate}
+      </Typography>
+      &nbsp;
+      {renderEntityLabel()}
+    </Stack>
+  );
+};
+
+const StyledStatusIcon = styled(StatusIcon, {
+  label: 'StyledStatusIcon',
+})(({ theme, ...props }) => ({
+  alignSelf: 'center',
+  ...(props.status === 'inactive' &&
+    theme.name === 'light' && {
+      backgroundColor: theme.color.grey3,
+    }),
+}));

From 07dd5fd85a554eed4b5b3593047a716cc04917e9 Mon Sep 17 00:00:00 2001
From: Hana Xu <115299789+hana-linode@users.noreply.github.com>
Date: Mon, 6 Nov 2023 12:40:57 -0500
Subject: [PATCH 29/43] fix: [M3-7356] - VPC IPv4 checkboxes in Linode Config
 dialog (#9865)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description 📝
Fix VPC IPv4 checkbox and input display when editing a config that already has ipv4 data

## Changes  🔄
1. The "Assign a public IPv4 address" checkbox is now checked in the Edit Config dialog upon opening if a VPC interface has already been 1:1 NAT’ed (i.e., if the `ipv4.nat_1_1` field is populated)
2. The "Auto-assign a VPC IPv4 address" is now unchecked in the Edit Config dialog if the `ipv4.vpc` field is already populated and we just expose the VPC IPv4 input field (pre-filled with the `ipv4.vpc` value)

## How to test 🧪

### Prerequisites
- Point to the dev env and ensure your account has vpc customer tags
- Create a VPC and Subnet if you don't already have one
- Click on Add Configuration in the Linode details -> Configuration tab
  - Provide a label and scroll down to the Networking section
  - Add a VPC, Subnet, and check both of the checkboxes

### Reproduction steps
- Be on the develop branch or go to the remote dev environment
- Filter your Network requests by `config` and notice how the `ipv4.vpc` and `ipv4.nat_1_1` fields of the interface are populated
- Click on Edit Configuration. The "Auto-assign a VPC IPv4 address" checkbox is checked and the VPC IPv4 input field is not exposed despite the field being populated. And the "Assign a public IPv4 address" checkbox is unchecked

### Verification steps
- Filter your Network requests by `config` and notice how the `ipv4.vpc` and `ipv4.nat_1_1` fields of the interface are populated
- Click on Edit Configuration. The "Auto-assign a VPC IPv4 address" checkbox should be unchecked and the VPC IPv4 input field is now exposed and populated with the `ipv4.vpc` value. And the "Assign a public IPv4 address" checkbox is now checked
 ```
yarn test VPCPanel
```
---
 ...pr-9865-upcoming-features-1698871946268.md |  5 ++
 .../Linodes/LinodesCreate/VPCPanel.test.tsx   | 69 +++++++++++++++++++
 .../LinodeConfigs/LinodeConfigDialog.tsx      |  1 +
 .../LinodeSettings/InterfaceSelect.tsx        | 10 ++-
 4 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9865-upcoming-features-1698871946268.md

diff --git a/packages/manager/.changeset/pr-9865-upcoming-features-1698871946268.md b/packages/manager/.changeset/pr-9865-upcoming-features-1698871946268.md
new file mode 100644
index 00000000000..3b7021c54cb
--- /dev/null
+++ b/packages/manager/.changeset/pr-9865-upcoming-features-1698871946268.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Fix IPv4 checkboxes for VPC interfaces in Linode Config dialog ([#9865](https://github.com/linode/manager/pull/9865))
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx
index fd453d40353..389dee24359 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx
@@ -128,6 +128,7 @@ describe('VPCPanel', () => {
       expect(wrapper.getAllByRole('checkbox')[0]).toBeChecked();
     });
   });
+
   it('should display helper text if there are no vpcs in the selected region and "from" is "linodeCreate"', async () => {
     server.use(
       rest.get('*/regions', (req, res, ctx) => {
@@ -155,6 +156,7 @@ describe('VPCPanel', () => {
       ).toBeInTheDocument();
     });
   });
+
   it('should not display helper text if there are no vpcs in the selected region and "from" is "linodeConfig"', async () => {
     server.use(
       rest.get('*/regions', (req, res, ctx) => {
@@ -185,4 +187,71 @@ describe('VPCPanel', () => {
       ).not.toBeInTheDocument();
     });
   });
+
+  it('should display an unchecked VPC IPv4 auto-assign checkbox and display the VPC IPv4 input field if there is already a value', async () => {
+    const _props = {
+      ...props,
+      autoassignIPv4WithinVPC: false,
+      region: 'us-east',
+      selectedVPCId: 5,
+      vpcIPv4AddressOfLinode: '10.0.4.3',
+    };
+
+    server.use(
+      rest.get('*/regions', (req, res, ctx) => {
+        const usEast = regionFactory.build({
+          capabilities: ['VPCs'],
+          id: 'us-east',
+        });
+        const regions = regionFactory.buildList(5);
+        return res(ctx.json(makeResourcePage([usEast, ...regions])));
+      })
+    );
+
+    const wrapper = renderWithTheme(<VPCPanel {..._props} />, {
+      flags: { vpc: true },
+      queryClient,
+    });
+
+    await waitFor(() => {
+      expect(
+        wrapper.getByLabelText(
+          'Auto-assign a VPC IPv4 address for this Linode in the VPC'
+        )
+      ).not.toBeChecked();
+      // Using regex here to account for the "(required)" indicator.
+      expect(wrapper.getByLabelText(/^VPC IPv4.*/)).toHaveValue('10.0.4.3');
+    });
+  });
+
+  it('should check the Assign a public IPv4 address checkbox if assignPublicIPv4Address is true', async () => {
+    const _props = {
+      ...props,
+      assignPublicIPv4Address: true,
+      region: 'us-east',
+      selectedVPCId: 5,
+    };
+
+    server.use(
+      rest.get('*/regions', (req, res, ctx) => {
+        const usEast = regionFactory.build({
+          capabilities: ['VPCs'],
+          id: 'us-east',
+        });
+        const regions = regionFactory.buildList(5);
+        return res(ctx.json(makeResourcePage([usEast, ...regions])));
+      })
+    );
+
+    const wrapper = renderWithTheme(<VPCPanel {..._props} />, {
+      flags: { vpc: true },
+      queryClient,
+    });
+
+    await waitFor(() => {
+      expect(
+        wrapper.getByLabelText('Assign a public IPv4 address for this Linode')
+      ).toBeChecked();
+    });
+  });
 });
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
index 3b55047488a..fe241e9930a 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
@@ -1008,6 +1008,7 @@ export const LinodeConfigDialog = (props: Props) => {
                       ipamAddress={thisInterface.ipam_address}
                       key={`eth${idx}-interface`}
                       label={thisInterface.label}
+                      nattedIPv4Address={thisInterface.ipv4?.nat_1_1}
                       purpose={thisInterface.purpose}
                       readOnly={isReadOnly}
                       region={linode?.region}
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
index bcb3bc49603..9b19b4c1b8d 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
@@ -40,6 +40,7 @@ interface VPCStateErrors {
 
 interface VPCState {
   errors: VPCStateErrors;
+  nattedIPv4Address?: string;
   subnetId?: null | number;
   vpcIPv4?: string;
   vpcId?: null | number;
@@ -61,6 +62,7 @@ export const InterfaceSelect = (props: CombinedProps) => {
     handleChange,
     ipamAddress,
     label,
+    nattedIPv4Address,
     purpose,
     readOnly,
     region,
@@ -102,8 +104,12 @@ export const InterfaceSelect = (props: CombinedProps) => {
     vlanOptions.push({ label: newVlan, value: newVlan });
   }
 
-  const [autoAssignVPCIPv4, setAutoAssignVPCIPv4] = React.useState(true);
-  const [autoAssignLinodeIPv4, setAutoAssignLinodeIPv4] = React.useState(false);
+  const [autoAssignVPCIPv4, setAutoAssignVPCIPv4] = React.useState(
+    !Boolean(vpcIPv4)
+  );
+  const [autoAssignLinodeIPv4, setAutoAssignLinodeIPv4] = React.useState(
+    Boolean(nattedIPv4Address)
+  );
 
   const handlePurposeChange = (selected: Item<InterfacePurpose>) => {
     const purpose = selected.value;

From d43602f68ceb1eeb382915d01934e9682d4ff732 Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Mon, 6 Nov 2023 14:42:48 -0500
Subject: [PATCH 30/43] fix: `ScheduleSettings.test.tsx` failing due to
 daylight savings time ending (#9876)

* use utc for unit test

* more strict assertion

* support est and edt

* fix comment

* improve mocks and tests

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
---
 .../LinodeBackup/ScheduleSettings.test.tsx    | 93 ++++++++++++++++++-
 1 file changed, 88 insertions(+), 5 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/ScheduleSettings.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/ScheduleSettings.test.tsx
index 81540879a34..808a720cb6b 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/ScheduleSettings.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/ScheduleSettings.test.tsx
@@ -1,3 +1,4 @@
+import { Settings } from 'luxon';
 import * as React from 'react';
 
 import { profileFactory } from 'src/factories';
@@ -27,7 +28,7 @@ describe('ScheduleSettings', () => {
     );
   });
 
-  it('renders with the linode schedule taking into account the user timezone', async () => {
+  it('renders with the linode schedule taking into account the user timezone (UTC)', async () => {
     server.use(
       rest.get('*/linode/instances/1', (req, res, ctx) => {
         return res(
@@ -37,7 +38,42 @@ describe('ScheduleSettings', () => {
                 enabled: true,
                 schedule: {
                   day: 'Monday',
-                  window: 'W4',
+                  window: 'W10',
+                },
+              },
+              id: 1,
+            })
+          )
+        );
+      }),
+      rest.get('*/profile', (req, res, ctx) => {
+        return res(ctx.json(profileFactory.build({ timezone: 'utc' })));
+      })
+    );
+
+    const { findByText } = renderWithTheme(
+      <ScheduleSettings isReadOnly={false} linodeId={1} />
+    );
+
+    await findByText('Monday');
+
+    // W10 indicates that your backups should be taken between 10:00 and 12:00
+    await findByText('10:00 - 12:00');
+
+    await findByText('Time displayed in utc');
+  });
+
+  it('renders with the linode schedule taking into account the user timezone (America/New_York) (EDT)', async () => {
+    server.use(
+      rest.get('*/linode/instances/1', (req, res, ctx) => {
+        return res(
+          ctx.json(
+            linodeFactory.build({
+              backups: {
+                enabled: true,
+                schedule: {
+                  day: 'Wednesday',
+                  window: 'W10',
                 },
               },
               id: 1,
@@ -52,13 +88,60 @@ describe('ScheduleSettings', () => {
       })
     );
 
+    // Mock that today's date is May 25th, 2018 so that it is daylight savings time
+    Settings.now = () => new Date(2018, 4, 25).valueOf();
+
     const { findByText } = renderWithTheme(
       <ScheduleSettings isReadOnly={false} linodeId={1} />
     );
 
-    await findByText('Monday');
-    await findByText('00:00 - 02:00');
+    await findByText('Wednesday');
+
+    // W10 indicates that your backups should be taken between 10:00 and 12:00 UTC.
+    // W10 in America/New_York during daylight savings is 06:00 - 08:00 EDT (UTC-4).
+    await findByText(`06:00 - 08:00`);
+
+    await findByText('Time displayed in America/New York');
+  });
+
+  it('renders with the linode schedule taking into account the user timezone (America/New_York) (EST)', async () => {
+    server.use(
+      rest.get('*/linode/instances/1', (req, res, ctx) => {
+        return res(
+          ctx.json(
+            linodeFactory.build({
+              backups: {
+                enabled: true,
+                schedule: {
+                  day: 'Wednesday',
+                  window: 'W10',
+                },
+              },
+              id: 1,
+            })
+          )
+        );
+      }),
+      rest.get('*/profile', (req, res, ctx) => {
+        return res(
+          ctx.json(profileFactory.build({ timezone: 'America/New_York' }))
+        );
+      })
+    );
+
+    // Mock that today's date is Nov 7th, 2023 so that it is *not* daylight savings time
+    Settings.now = () => new Date(2023, 11, 7).valueOf();
+
+    const { findByText } = renderWithTheme(
+      <ScheduleSettings isReadOnly={false} linodeId={1} />
+    );
+
+    await findByText('Wednesday');
+
+    // W10 indicates that your backups should be taken between 10:00 and 12:00 UTC.
+    // W10 in America/New_York when it is not daylight savings is 05:00 - 07:00 EST (UTC-5).
+    await findByText(`05:00 - 07:00`);
 
-    await findByText('America/New York', { exact: false });
+    await findByText('Time displayed in America/New York');
   });
 });

From 19e873ed1b6975db96c09e18e53dd2efb27d31de Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Mon, 6 Nov 2023 17:02:00 -0500
Subject: [PATCH 31/43] fix: [M3-7369] - Safari Launch Darkly MSW Errors
 (#9863)

* fix safari launch darly

* remove broken mock data changer

* add changeset

* update the msw

* remove unneeded change

* fix a unit test

* fix more unit tests

* Update packages/manager/.changeset/pr-9863-tech-stories-1698862384325.md

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
---
 package.json                                  |   2 +-
 .../pr-9863-tech-stories-1698862384325.md     |   5 +
 packages/manager/package.json                 |   2 +-
 packages/manager/public/mockServiceWorker.js  | 412 +++++++++++-------
 .../src/dev-tools/EnvironmentToggleTool.tsx   |   4 +-
 .../manager/src/dev-tools/FeatureFlagTool.tsx |   6 +-
 .../manager/src/dev-tools/MockDataTool.tsx    |  52 +--
 .../src/dev-tools/ServiceWorkerTool.tsx       |  37 +-
 packages/manager/src/dev-tools/dev-tools.tsx  |   8 +-
 packages/manager/src/dev-tools/load.ts        |  12 +-
 .../src/dev-tools/mockDataController.ts       |  57 ---
 .../DatabaseBackupTableRow.tsx                |  13 +-
 .../DatabaseBackups/DatabaseBackups.test.tsx  |  19 +-
 .../DatabaseBackups/DatabaseBackups.tsx       |   4 +-
 .../SupportTicketDetail.test.tsx              |  12 +-
 .../VPCs/VPCDetail/SubnetLinodeRow.test.tsx   |  10 +
 packages/manager/src/mocks/serverHandlers.ts  |  57 +--
 packages/manager/src/mocks/testBrowser.ts     |  24 +-
 yarn.lock                                     | 252 +++++++++--
 19 files changed, 538 insertions(+), 450 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9863-tech-stories-1698862384325.md
 delete mode 100644 packages/manager/src/dev-tools/mockDataController.ts

diff --git a/package.json b/package.json
index d28c4b37ef0..875e610b018 100644
--- a/package.json
+++ b/package.json
@@ -70,4 +70,4 @@
     "node": "18.14.1"
   },
   "dependencies": {}
-}
+}
\ No newline at end of file
diff --git a/packages/manager/.changeset/pr-9863-tech-stories-1698862384325.md b/packages/manager/.changeset/pr-9863-tech-stories-1698862384325.md
new file mode 100644
index 00000000000..36c35e58910
--- /dev/null
+++ b/packages/manager/.changeset/pr-9863-tech-stories-1698862384325.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Fix Safari Launch Darkly MSW Errors ([#9863](https://github.com/linode/manager/pull/9863))
diff --git a/packages/manager/package.json b/packages/manager/package.json
index d1166ad3944..cba86894ada 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -198,7 +198,7 @@
     "jest-sonar-reporter": "^2.0.0",
     "jest_workaround": "^0.1.10",
     "lint-staged": "^13.2.2",
-    "msw": "~0.20.5",
+    "msw": "~1.3.2",
     "prettier": "~2.2.1",
     "redux-mock-store": "^1.5.3",
     "reselect-tools": "^0.0.7",
diff --git a/packages/manager/public/mockServiceWorker.js b/packages/manager/public/mockServiceWorker.js
index 9704362b77a..a3dbcdd184b 100644
--- a/packages/manager/public/mockServiceWorker.js
+++ b/packages/manager/public/mockServiceWorker.js
@@ -1,228 +1,308 @@
+/* eslint-disable */
+/* tslint:disable */
+
 /**
- * Mock Service Worker.
+ * Mock Service Worker (1.3.2).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
-/* eslint-disable */
-/* tslint:disable */
 
-const INTEGRITY_CHECKSUM = 'ca2c3cd7453d8c614e2c19db63ede1a1';
-const bypassHeaderName = 'x-msw-bypass';
+const INTEGRITY_CHECKSUM = '3d6b9f06410d179a7f7404d4bf4c3c70'
+const activeClientIds = new Set()
+
+self.addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener('message', async function (event) {
+  const clientId = event.source.id
 
-let clients = {};
+  if (!clientId || !self.clients) {
+    return
+  }
 
-self.addEventListener('install', function() {
-  return self.skipWaiting();
-});
+  const client = await self.clients.get(clientId)
 
-self.addEventListener('activate', async function(event) {
-  return self.clients.claim();
-});
+  if (!client) {
+    return
+  }
 
-self.addEventListener('message', async function(event) {
-  const clientId = event.source.id;
-  const client = await event.currentTarget.clients.get(clientId);
-  const allClients = await self.clients.matchAll();
-  const allClientIds = allClients.map(client => client.id);
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
 
   switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
     case 'INTEGRITY_CHECK_REQUEST': {
       sendToClient(client, {
         type: 'INTEGRITY_CHECK_RESPONSE',
-        payload: INTEGRITY_CHECKSUM
-      });
-      break;
+        payload: INTEGRITY_CHECKSUM,
+      })
+      break
     }
 
     case 'MOCK_ACTIVATE': {
-      clients = ensureKeys(allClientIds, clients);
-      clients[clientId] = true;
+      activeClientIds.add(clientId)
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true
-      });
-      break;
+        payload: true,
+      })
+      break
     }
 
     case 'MOCK_DEACTIVATE': {
-      clients = ensureKeys(allClientIds, clients);
-      clients[clientId] = false;
-      break;
+      activeClientIds.delete(clientId)
+      break
     }
 
     case 'CLIENT_CLOSED': {
-      const remainingClients = allClients.filter(client => {
-        return client.id !== clientId;
-      });
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
 
       // Unregister itself when there are no more clients
       if (remainingClients.length === 0) {
-        self.registration.unregister();
+        self.registration.unregister()
       }
 
-      break;
+      break
     }
   }
-});
+})
+
+self.addEventListener('fetch', function (event) {
+  const { request } = event
+  const accept = request.headers.get('accept') || ''
+
+  // Bypass launch darkly
+  if (request.url.includes("launchdarkly.com")) {
+    return
+  }
+
+  // Bypass server-sent events.
+  if (accept.includes('text/event-stream')) {
+    return
+  }
 
-self.addEventListener('fetch', async function(event) {
-  const { clientId, request } = event;
-  const requestClone = request.clone();
-  const getOriginalResponse = () => fetch(requestClone);
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
 
   // Opening the DevTools triggers the "only-if-cached" request
   // that cannot be handled by the worker. Bypass such requests.
   if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
-    return;
+    return
   }
 
-  event.respondWith(
-    new Promise(async (resolve, reject) => {
-      const client = await event.target.clients.get(clientId);
-
-      if (
-        // Bypass mocking when no clients active
-        !client ||
-        // Bypass mocking if the current client has mocking disabled
-        !clients[clientId] ||
-        // Bypass mocking for navigation requests
-        request.mode === 'navigate'
-      ) {
-        return resolve(getOriginalResponse());
-      }
-
-      // Bypass requests with the explicit bypass header
-      if (requestClone.headers.get(bypassHeaderName) === 'true') {
-        const modifiedHeaders = serializeHeaders(requestClone.headers);
-        // Remove the bypass header to comply with the CORS preflight check
-        delete modifiedHeaders[bypassHeaderName];
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
 
-        const originalRequest = new Request(requestClone, {
-          headers: new Headers(modifiedHeaders)
-        });
+  // Generate unique request ID.
+  const requestId = Math.random().toString(16).slice(2)
 
-        return resolve(fetch(originalRequest));
+  event.respondWith(
+    handleRequest(event, requestId).catch((error) => {
+      if (error.name === 'NetworkError') {
+        console.warn(
+          '[MSW] Successfully emulated a network error for the "%s %s" request.',
+          request.method,
+          request.url,
+        )
+        return
       }
 
-      const reqHeaders = serializeHeaders(request.headers);
-      const body = await request.text();
-
-      const rawClientMessage = await sendToClient(client, {
-        type: 'REQUEST',
-        payload: {
-          url: request.url,
-          method: request.method,
-          headers: reqHeaders,
-          cache: request.cache,
-          mode: request.mode,
-          credentials: request.credentials,
-          destination: request.destination,
-          integrity: request.integrity,
-          redirect: request.redirect,
-          referrer: request.referrer,
-          referrerPolicy: request.referrerPolicy,
-          body,
-          bodyUsed: request.bodyUsed,
-          keepalive: request.keepalive
-        }
-      });
-
-      const clientMessage = rawClientMessage;
-
-      switch (clientMessage.type) {
-        case 'MOCK_SUCCESS': {
-          setTimeout(
-            resolve.bind(this, createResponse(clientMessage)),
-            clientMessage.payload.delay
-          );
-          break;
-        }
-
-        case 'MOCK_NOT_FOUND': {
-          return resolve(getOriginalResponse());
-        }
-
-        case 'NETWORK_ERROR': {
-          const { name, message } = clientMessage.payload;
-          const networkError = new Error(message);
-          networkError.name = name;
-
-          // Rejecting a request Promise emulates a network error.
-          return reject(networkError);
-        }
-
-        case 'INTERNAL_ERROR': {
-          const parsedBody = JSON.parse(clientMessage.payload.body);
-
-          console.error(
-            `\
-[MSW] Request handler function for "%s %s" has thrown the following exception:
-
-${parsedBody.errorType}: ${parsedBody.message}
-(see more detailed error stack trace in the mocked response body)
-
-This exception has been gracefully handled as a 500 response, however, it's strongly recommended to resolve this error.
-If you wish to mock an error response, please refer to this guide: https://mswjs.io/docs/recipes/mocking-error-responses\
-  `,
-            request.method,
-            request.url
-          );
-
-          return resolve(createResponse(clientMessage));
-        }
-      }
-    }).catch(error => {
+      // At this point, any exception indicates an issue with the original request/response.
       console.error(
-        '[MSW] Failed to mock a "%s" request to "%s": %s',
+        `\
+[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
         request.method,
         request.url,
-        error
-      );
+        `${error.name}: ${error.message}`,
+      )
+    }),
+  )
+})
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event)
+  const response = await getResponse(event, client, requestId)
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    ;(async function () {
+      const clonedResponse = response.clone()
+      sendToClient(client, {
+        type: 'RESPONSE',
+        payload: {
+          requestId,
+          type: clonedResponse.type,
+          ok: clonedResponse.ok,
+          status: clonedResponse.status,
+          statusText: clonedResponse.statusText,
+          body:
+            clonedResponse.body === null ? null : await clonedResponse.text(),
+          headers: Object.fromEntries(clonedResponse.headers.entries()),
+          redirected: clonedResponse.redirected,
+        },
+      })
+    })()
+  }
+
+  return response
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
     })
-  );
-});
-
-function serializeHeaders(headers) {
-  const reqHeaders = {};
-  headers.forEach((value, name) => {
-    reqHeaders[name] = reqHeaders[name]
-      ? [].concat(reqHeaders[name]).concat(value)
-      : value;
-  });
-  return reqHeaders;
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event
+  const clonedRequest = request.clone()
+
+  function passthrough() {
+    // Clone the request because it might've been already used
+    // (i.e. its body has been read and sent to the client).
+    const headers = Object.fromEntries(clonedRequest.headers.entries())
+
+    // Remove MSW-specific request headers so the bypassed requests
+    // comply with the server's CORS preflight check.
+    // Operate with the headers as an object because request "Headers"
+    // are immutable.
+    delete headers['x-msw-bypass']
+
+    return fetch(clonedRequest, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Bypass requests with the explicit bypass header.
+  // Such requests can be issued by "ctx.fetch()".
+  if (request.headers.get('x-msw-bypass') === 'true') {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const clientMessage = await sendToClient(client, {
+    type: 'REQUEST',
+    payload: {
+      id: requestId,
+      url: request.url,
+      method: request.method,
+      headers: Object.fromEntries(request.headers.entries()),
+      cache: request.cache,
+      mode: request.mode,
+      credentials: request.credentials,
+      destination: request.destination,
+      integrity: request.integrity,
+      redirect: request.redirect,
+      referrer: request.referrer,
+      referrerPolicy: request.referrerPolicy,
+      body: await request.text(),
+      bodyUsed: request.bodyUsed,
+      keepalive: request.keepalive,
+    },
+  })
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'MOCK_NOT_FOUND': {
+      return passthrough()
+    }
+
+    case 'NETWORK_ERROR': {
+      const { name, message } = clientMessage.data
+      const networkError = new Error(message)
+      networkError.name = name
+
+      // Rejecting a "respondWith" promise emulates a network error.
+      throw networkError
+    }
+  }
+
+  return passthrough()
 }
 
 function sendToClient(client, message) {
   return new Promise((resolve, reject) => {
-    const channel = new MessageChannel();
+    const channel = new MessageChannel()
 
-    channel.port1.onmessage = event => {
+    channel.port1.onmessage = (event) => {
       if (event.data && event.data.error) {
-        reject(event.data.error);
-      } else {
-        resolve(event.data);
+        return reject(event.data.error)
       }
-    };
 
-    client.postMessage(JSON.stringify(message), [channel.port2]);
-  });
-}
+      resolve(event.data)
+    }
 
-function createResponse(clientMessage) {
-  return new Response(clientMessage.payload.body, {
-    ...clientMessage.payload,
-    headers: clientMessage.payload.headers
-  });
+    client.postMessage(message, [channel.port2])
+  })
 }
 
-function ensureKeys(keys, obj) {
-  return Object.keys(obj).reduce((acc, key) => {
-    if (keys.includes(key)) {
-      acc[key] = obj[key];
-    }
+function sleep(timeMs) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, timeMs)
+  })
+}
 
-    return acc;
-  }, {});
+async function respondWithMock(response) {
+  await sleep(response.delay)
+  return new Response(response.body, response)
 }
diff --git a/packages/manager/src/dev-tools/EnvironmentToggleTool.tsx b/packages/manager/src/dev-tools/EnvironmentToggleTool.tsx
index bfe6c2924f9..d7713089e56 100644
--- a/packages/manager/src/dev-tools/EnvironmentToggleTool.tsx
+++ b/packages/manager/src/dev-tools/EnvironmentToggleTool.tsx
@@ -48,7 +48,7 @@ const options = getOptions(import.meta.env);
 
 // This component works by setting local storage values that override the API_ROOT, LOGIN_ROOT,
 // and CLIENT_ID environment variables, giving client-side control over the environment.
-const EnvironmentToggleTool: React.FC<{}> = () => {
+export const EnvironmentToggleTool = () => {
   const [selectedOption, setSelectedOption] = React.useState(0);
 
   const localStorageEnv = storage.devToolsEnv.get();
@@ -97,5 +97,3 @@ const EnvironmentToggleTool: React.FC<{}> = () => {
     </Grid>
   );
 };
-
-export default React.memo(EnvironmentToggleTool);
diff --git a/packages/manager/src/dev-tools/FeatureFlagTool.tsx b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
index 942ccdfe6ad..20897fab9eb 100644
--- a/packages/manager/src/dev-tools/FeatureFlagTool.tsx
+++ b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
@@ -24,7 +24,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'soldOutTokyo', label: 'Sold Out Tokyo' },
 ];
 
-const FeatureFlagTool: React.FC<{}> = () => {
+export const FeatureFlagTool = withFeatureFlagProvider(() => {
   const dispatch: Dispatch = useDispatch();
   const flags = useFlags();
 
@@ -78,6 +78,4 @@ const FeatureFlagTool: React.FC<{}> = () => {
       </Grid>
     </Grid>
   );
-};
-
-export default withFeatureFlagProvider(FeatureFlagTool);
+});
diff --git a/packages/manager/src/dev-tools/MockDataTool.tsx b/packages/manager/src/dev-tools/MockDataTool.tsx
index 0d7db3860f8..eab11ae37d8 100644
--- a/packages/manager/src/dev-tools/MockDataTool.tsx
+++ b/packages/manager/src/dev-tools/MockDataTool.tsx
@@ -1,65 +1,17 @@
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
-import ServiceWorkerTool from './ServiceWorkerTool';
-import { MockData, mockDataController } from './mockDataController';
-
-const options: { key: keyof MockData; label: string }[] = [
-  { key: 'linode', label: 'Linodes' },
-  { key: 'nodeBalancer', label: 'NodeBalancers' },
-  { key: 'domain', label: 'Domains' },
-  { key: 'volume', label: 'Volumes' },
-];
-
-const MockDataTool: React.FC<{}> = () => {
-  // Keep track of mockData state locally to this component, so it can be referenced during render.
-  const [localMockData, setLocalMockData] = React.useState<MockData>(
-    mockDataController.mockData
-  );
-
-  const handleInputChange = (key: keyof MockData, quantity: number) => {
-    const newMockData: MockData = { [key]: { mocked: true, quantity } };
-    mockDataController.updateMockData(newMockData);
-  };
-
-  React.useEffect(() => {
-    // Subscribe to mockData changes so this components local copy can be updated.
-    const token = mockDataController.subscribe((newMockData) => {
-      setLocalMockData(newMockData);
-    });
-    return () => mockDataController.unsubscribe(token);
-  }, []);
-
-  // @todo: The MockData interface has a `template` field, which could be used to allow entry of
-  // specific fields, like label, region, etc. (via <input /> or even JSON entry?)
+import { ServiceWorkerTool } from './ServiceWorkerTool';
 
+export const MockDataTool = () => {
   return (
     <Grid container>
       <Grid xs={12}>
         <h4 style={{ marginBottom: 8, marginTop: 0 }}>Mock Data</h4>
       </Grid>
-      <Grid xs={12}>
-        {options.map((thisOption) => {
-          return (
-            <div key={thisOption.key} style={{ marginTop: 4 }}>
-              <label style={{ marginRight: 4 }}>{thisOption.label}: </label>
-              <input
-                onChange={(e) =>
-                  handleInputChange(thisOption.key, Number(e.target.value))
-                }
-                min="0"
-                type="number"
-                value={localMockData[thisOption.key]?.quantity ?? 0}
-              />
-            </div>
-          );
-        })}
-      </Grid>
       <Grid xs={12}>
         <ServiceWorkerTool />
       </Grid>
     </Grid>
   );
 };
-
-export default MockDataTool;
diff --git a/packages/manager/src/dev-tools/ServiceWorkerTool.tsx b/packages/manager/src/dev-tools/ServiceWorkerTool.tsx
index b08f487266c..38190d8ccf0 100644
--- a/packages/manager/src/dev-tools/ServiceWorkerTool.tsx
+++ b/packages/manager/src/dev-tools/ServiceWorkerTool.tsx
@@ -1,43 +1,28 @@
 import * as React from 'react';
 
-import { worker } from '../mocks/testBrowser';
+const LOCAL_STORAGE_KEY = 'msw';
 
-export const ServiceWorkerTool: React.FC<{}> = (_) => {
-  const _workerActive =
-    localStorage.getItem('devTools/mock-service-worker-enabled') ?? 'disabled';
-  const workerActive = _workerActive === 'enabled';
+export const isMSWEnabled =
+  localStorage.getItem(LOCAL_STORAGE_KEY) === 'enabled';
 
-  React.useEffect(() => {
-    if (workerActive) {
-      worker.start();
-    } else {
-      worker.stop();
-    }
-  }, [workerActive]);
-
-  const handleToggleWorker = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const checked = e.target.checked;
-    localStorage.setItem(
-      'devTools/mock-service-worker-enabled',
-      checked ? 'enabled' : 'disabled'
-    );
-    window.location.reload();
-  };
+export const setMSWEnabled = (enabled: boolean) => {
+  localStorage.setItem(LOCAL_STORAGE_KEY, enabled ? 'enabled' : 'disabled');
+  window.location.reload();
+};
 
+export const ServiceWorkerTool = () => {
   return (
     <>
       <span style={{ marginRight: 8 }}>
         <span style={{ marginRight: 8 }}>Mock Service Worker:</span>
-        {workerActive ? 'Enabled' : 'Disabled'}
+        {isMSWEnabled ? 'Enabled' : 'Disabled'}
       </span>
       <input
-        checked={workerActive}
-        onChange={(e) => handleToggleWorker(e)}
+        checked={isMSWEnabled}
+        onChange={(e) => setMSWEnabled(e.target.checked)}
         style={{ margin: 0 }}
         type="checkbox"
       />
     </>
   );
 };
-
-export default ServiceWorkerTool;
diff --git a/packages/manager/src/dev-tools/dev-tools.tsx b/packages/manager/src/dev-tools/dev-tools.tsx
index bf7900c3da2..d24f54ad37b 100644
--- a/packages/manager/src/dev-tools/dev-tools.tsx
+++ b/packages/manager/src/dev-tools/dev-tools.tsx
@@ -6,14 +6,12 @@ import { Provider } from 'react-redux';
 import { ENABLE_DEV_TOOLS, isProductionBuild } from 'src/constants';
 import { ApplicationStore } from 'src/store';
 
-import EnvironmentToggleTool from './EnvironmentToggleTool';
-import FeatureFlagTool from './FeatureFlagTool';
-import MockDataTool from './MockDataTool';
+import { EnvironmentToggleTool } from './EnvironmentToggleTool';
+import { FeatureFlagTool } from './FeatureFlagTool';
+import { MockDataTool } from './MockDataTool';
 import './dev-tools.css';
 
 function install(store: ApplicationStore) {
-  (window as any).devToolsEnabled = true;
-
   function DevTools() {
     return (
       <div id="dev-tools">
diff --git a/packages/manager/src/dev-tools/load.ts b/packages/manager/src/dev-tools/load.ts
index 3bb024d0866..9b0703ff810 100644
--- a/packages/manager/src/dev-tools/load.ts
+++ b/packages/manager/src/dev-tools/load.ts
@@ -1,13 +1,23 @@
 import { ENABLE_DEV_TOOLS } from 'src/constants';
 import { ApplicationStore } from 'src/store';
 
+import { isMSWEnabled } from './ServiceWorkerTool';
+
 /**
  * Use this to dynamicly import our custom dev-tools ONLY when they
  * are needed.
  * @param store Redux store to control
  */
 export async function loadDevTools(store: ApplicationStore) {
-  await import('./dev-tools').then((devTools) => devTools.install(store));
+  const devTools = await import('./dev-tools');
+
+  if (isMSWEnabled) {
+    const { worker } = await import('../mocks/testBrowser');
+
+    await worker.start({ onUnhandledRequest: 'bypass' });
+  }
+
+  devTools.install(store);
 }
 
 /**
diff --git a/packages/manager/src/dev-tools/mockDataController.ts b/packages/manager/src/dev-tools/mockDataController.ts
deleted file mode 100644
index 4f266f2ea31..00000000000
--- a/packages/manager/src/dev-tools/mockDataController.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Domain } from '@linode/api-v4/lib/domains/types';
-import { Linode } from '@linode/api-v4/lib/linodes/types';
-import { NodeBalancer } from '@linode/api-v4/lib/nodebalancers/types';
-import { Volume } from '@linode/api-v4/lib/volumes/types';
-import { v4 } from 'uuid';
-
-// Simple pub/sub class to keep track of mock data for the local dev tools. This allows subscription
-// from the mock service worker, so the handlers can be updated whenever the mock data changes.
-export type MockDataType = 'domain' | 'linode' | 'nodeBalancer' | 'volume';
-
-export interface MockDataEntity<T> {
-  mocked: boolean;
-  quantity: number;
-  template?: Partial<T>;
-}
-
-export interface MockData {
-  domain?: MockDataEntity<Domain>;
-  linode?: MockDataEntity<Linode>;
-  nodeBalancer?: MockDataEntity<NodeBalancer>;
-  volume?: MockDataEntity<Volume>;
-}
-
-export type SubscribeFunction = (mockData: MockData) => void;
-
-export class MockDataController {
-  constructor() {
-    this.subscribers = {};
-    this.mockData = {};
-  }
-  private notifySubscribers() {
-    Object.values(this.subscribers).forEach((thisSubscriber) => {
-      thisSubscriber(this.mockData);
-    });
-  }
-
-  subscribe(fn: SubscribeFunction) {
-    const id = v4();
-    this.subscribers[id] = fn;
-    return id;
-  }
-
-  unsubscribe(token: string) {
-    delete this.subscribers[token];
-  }
-
-  updateMockData(newMockData: MockData) {
-    this.mockData = { ...this.mockData, ...newMockData };
-    this.notifySubscribers();
-  }
-
-  mockData: MockData;
-
-  subscribers: Record<string, SubscribeFunction>;
-}
-
-export const mockDataController = new MockDataController();
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackupTableRow.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackupTableRow.tsx
index 1f179a3e338..5de90fb3b78 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackupTableRow.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackupTableRow.tsx
@@ -1,11 +1,10 @@
 import { DatabaseBackup } from '@linode/api-v4/lib/databases';
 import * as React from 'react';
 
+import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
-import { useProfile } from 'src/queries/profile';
 import { parseAPIDate } from 'src/utilities/date';
-import { formatDate } from 'src/utilities/formatDate';
 
 import DatabaseBackupActionMenu from './DatabaseBackupActionMenu';
 
@@ -14,17 +13,13 @@ interface Props {
   onRestore: (id: number) => void;
 }
 
-const BackupTableRow: React.FC<Props> = ({ backup, onRestore }) => {
+export const BackupTableRow = ({ backup, onRestore }: Props) => {
   const { created, id } = backup;
 
-  const { data: profile } = useProfile();
-
   return (
     <TableRow key={id}>
       <TableCell>
-        {formatDate(created, {
-          timezone: profile?.timezone,
-        })}
+        <DateTimeDisplay value={created} />
       </TableCell>
       <TableCell>{parseAPIDate(created).toRelative()}</TableCell>
       <TableCell>
@@ -33,5 +28,3 @@ const BackupTableRow: React.FC<Props> = ({ backup, onRestore }) => {
     </TableRow>
   );
 };
-
-export default BackupTableRow;
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.test.tsx
index 38a6c1c5dc2..3753848e790 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.test.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.test.tsx
@@ -2,7 +2,11 @@ import { waitForElementToBeRemoved } from '@testing-library/react';
 import * as React from 'react';
 import { QueryClient } from 'react-query';
 
-import { databaseBackupFactory, databaseFactory } from 'src/factories';
+import {
+  databaseBackupFactory,
+  databaseFactory,
+  profileFactory,
+} from 'src/factories';
 import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { rest, server } from 'src/mocks/testServer';
 import { formatDate } from 'src/utilities/formatDate';
@@ -33,13 +37,12 @@ describe('Database Backups', () => {
 
     // Mock the Database because the Backups Details page requires it to be loaded
     server.use(
+      rest.get('*/profile', (req, res, ctx) => {
+        return res(ctx.json(profileFactory.build({ timezone: 'utc' })));
+      }),
       rest.get('*/databases/:engine/instances/:id', (req, res, ctx) => {
         return res(ctx.json(databaseFactory.build()));
-      })
-    );
-
-    // Mock a list of 7 backups
-    server.use(
+      }),
       rest.get('*/databases/:engine/instances/:id/backups', (req, res, ctx) => {
         return res(ctx.json(makeResourcePage(backups)));
       })
@@ -57,7 +60,9 @@ describe('Database Backups', () => {
 
     for (const backup of backups) {
       // Check to see if all 7 backups are rendered
-      expect(getByText(formatDate(backup.created))).toBeInTheDocument();
+      expect(
+        getByText(formatDate(backup.created, { timezone: 'utc' }))
+      ).toBeInTheDocument();
     }
   });
 
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx
index 8fced026345..79b8915a2e3 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx
@@ -19,8 +19,8 @@ import {
   useDatabaseQuery,
 } from 'src/queries/databases';
 
-import DatabaseBackupTableRow from './DatabaseBackupTableRow';
 import RestoreFromBackupDialog from './RestoreFromBackupDialog';
+import { BackupTableRow } from './DatabaseBackupTableRow';
 
 export const DatabaseBackups = () => {
   const { databaseId, engine } = useParams<{
@@ -85,7 +85,7 @@ export const DatabaseBackups = () => {
       return backups.data
         .sort(sorter)
         .map((backup) => (
-          <DatabaseBackupTableRow
+          <BackupTableRow
             backup={backup}
             key={backup.id}
             onRestore={onRestore}
diff --git a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.test.tsx b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.test.tsx
index 0b3d63acd23..bd91cd7da9a 100644
--- a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.test.tsx
+++ b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.test.tsx
@@ -22,7 +22,7 @@ describe('Support Ticket Detail', () => {
       rest.get('*/support/tickets/:ticketId', (req, res, ctx) => {
         const ticket = supportTicketFactory.build({
           description: 'TEST Support Ticket body',
-          id: req.params.ticketId,
+          id: Number(req.params.ticketId),
           status: 'open',
           summary: '#0: TEST Support Ticket',
         });
@@ -40,7 +40,7 @@ describe('Support Ticket Detail', () => {
     server.use(
       rest.get('*/support/tickets/:ticketId', (req, res, ctx) => {
         const ticket = supportTicketFactory.build({
-          id: req.params.ticketId,
+          id: Number(req.params.ticketId),
           status: 'new',
           updated_by: 'test-account',
         });
@@ -58,7 +58,7 @@ describe('Support Ticket Detail', () => {
     server.use(
       rest.get('*/support/tickets/:ticketId', (req, res, ctx) => {
         const ticket = supportTicketFactory.build({
-          id: req.params.ticketId,
+          id: Number(req.params.ticketId),
           status: 'open',
           updated_by: 'test-account',
         });
@@ -76,7 +76,7 @@ describe('Support Ticket Detail', () => {
     server.use(
       rest.get('*/support/tickets/:ticketId', (req, res, ctx) => {
         const ticket = supportTicketFactory.build({
-          id: req.params.ticketId,
+          id: Number(req.params.ticketId),
           status: 'closed',
         });
         return res(ctx.json(ticket));
@@ -100,7 +100,7 @@ describe('Support Ticket Detail', () => {
       rest.get('*/support/tickets/:ticketId', (req, res, ctx) => {
         const ticket = supportTicketFactory.build({
           entity: mockEntity,
-          id: req.params.ticketId,
+          id: Number(req.params.ticketId),
         });
         return res(ctx.json(ticket));
       })
@@ -128,7 +128,7 @@ describe('Support Ticket Detail', () => {
       rest.get('*/support/tickets/:ticketId', (req, res, ctx) => {
         const ticket = supportTicketFactory.build({
           description: 'this ticket should have a reply on it',
-          id: req.params.ticketId,
+          id: Number(req.params.ticketId),
           status: 'open',
           summary: 'My Linode is broken :(',
         });
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.test.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.test.tsx
index d2d63b543ec..a602576fe87 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.test.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.test.tsx
@@ -14,6 +14,7 @@ import {
 } from 'src/utilities/testHelpers';
 
 import { SubnetLinodeRow } from './SubnetLinodeRow';
+import { firewallFactory } from 'src/factories';
 
 const queryClient = new QueryClient();
 
@@ -31,6 +32,15 @@ describe('SubnetLinodeRow', () => {
       rest.get('*/linodes/instances/:linodeId', (req, res, ctx) => {
         return res(ctx.json(linodeFactory1));
       }),
+      rest.get('*/linode/instances/:id/firewalls', (req, res, ctx) => {
+        return res(
+          ctx.json(
+            makeResourcePage(
+              firewallFactory.buildList(1, { label: 'mock-firewall-0' })
+            )
+          )
+        );
+      }),
       rest.get('*/instances/*/configs', async (req, res, ctx) => {
         const configs = linodeConfigFactory.buildList(3);
         return res(ctx.json(makeResourcePage(configs)));
diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts
index 08797753526..6ed97d102d6 100644
--- a/packages/manager/src/mocks/serverHandlers.ts
+++ b/packages/manager/src/mocks/serverHandlers.ts
@@ -5,10 +5,9 @@ import {
   VolumeStatus,
 } from '@linode/api-v4';
 import { DateTime } from 'luxon';
-import { RequestHandler, rest } from 'msw';
+import { rest } from 'msw';
 
 import cachedRegions from 'src/cachedData/regions.json';
-import { MockData } from 'src/dev-tools/mockDataController';
 import {
   VLANFactory,
   abuseTicketNotificationFactory,
@@ -220,8 +219,8 @@ const databases = [
   rest.get('*/databases/:engine/instances/:id', (req, res, ctx) => {
     const database = databaseFactory.build({
       compression_type: req.params.engine === 'mongodb' ? 'none' : undefined,
-      engine: req.params.engine,
-      id: req.params.id,
+      engine: req.params.engine as 'mysql',
+      id: Number(req.params.id),
       label: `database-${req.params.id}`,
       replication_commit_type:
         req.params.engine === 'postgresql' ? 'local' : undefined,
@@ -273,7 +272,7 @@ const databases = [
     return res(
       ctx.json({
         ...databaseFactory.build({
-          engine: req.params.engine,
+          engine: req.params.engine as 'mysql',
           label: payload?.label ?? 'Database',
         }),
       })
@@ -333,7 +332,7 @@ const aglb = [
     return res(
       ctx.json(
         loadbalancerFactory.build({
-          id: req.params.loadbalancerId,
+          id: Number(req.params.loadbalancerId),
           label: `aglb-${req.params.loadbalancerId}`,
         })
       )
@@ -732,7 +731,7 @@ export const handlers = [
   }),
   rest.put('*/lke/clusters/:clusterId', async (req, res, ctx) => {
     const id = Number(req.params.clusterId);
-    const k8s_version = req.params.k8s_version;
+    const k8s_version = req.params.k8s_version as string;
     const cluster = kubernetesAPIResponse.build({
       id,
       k8s_version,
@@ -786,13 +785,13 @@ export const handlers = [
   }),
   rest.get('*/nodebalancers/:nodeBalancerID', (req, res, ctx) => {
     const nodeBalancer = nodeBalancerFactory.build({
-      id: req.params.nodeBalancerID,
+      id: Number(req.params.nodeBalancerID),
     });
     return res(ctx.json(nodeBalancer));
   }),
   rest.get('*/nodebalancers/:nodeBalancerID/configs', (req, res, ctx) => {
     const configs = nodeBalancerConfigFactory.buildList(2, {
-      nodebalancer_id: req.params.nodeBalancerID,
+      nodebalancer_id: Number(req.params.nodeBalancerID),
     });
     return res(ctx.json(makeResourcePage(configs)));
   }),
@@ -800,7 +799,7 @@ export const handlers = [
     '*/nodebalancers/:nodeBalancerID/configs/:configID/nodes',
     (req, res, ctx) => {
       const configs = nodeBalancerConfigNodeFactory.buildList(2, {
-        nodebalancer_id: req.params.nodeBalancerID,
+        nodebalancer_id: Number(req.params.nodeBalancerID),
       });
       return res(ctx.json(makeResourcePage(configs)));
     }
@@ -1228,7 +1227,9 @@ export const handlers = [
     return res(ctx.json(ticket));
   }),
   rest.get('*/support/tickets/:ticketId', (req, res, ctx) => {
-    const ticket = supportTicketFactory.build({ id: req.params.ticketId });
+    const ticket = supportTicketFactory.build({
+      id: Number(req.params.ticketId),
+    });
     return res(ctx.json(ticket));
   }),
   rest.get('*/support/tickets/:ticketId/replies', (req, res, ctx) => {
@@ -1595,7 +1596,9 @@ export const handlers = [
   }),
   rest.get('*/account/betas/:id', (req, res, ctx) => {
     if (req.params.id !== 'undefined') {
-      return res(ctx.json(accountBetaFactory.build({ id: req.params.id })));
+      return res(
+        ctx.json(accountBetaFactory.build({ id: req.params.id as string }))
+      );
     }
     return res(ctx.status(404));
   }),
@@ -1604,7 +1607,7 @@ export const handlers = [
   }),
   rest.get('*/betas/:id', (req, res, ctx) => {
     if (req.params.id !== 'undefined') {
-      return res(ctx.json(betaFactory.build({ id: req.params.id })));
+      return res(ctx.json(betaFactory.build({ id: req.params.id as string })));
     }
     return res(ctx.status(404));
   }),
@@ -1617,31 +1620,3 @@ export const handlers = [
   ...aglb,
   ...vpc,
 ];
-
-// Generator functions for dynamic handlers, in use by mock data dev tools.
-export const mockDataHandlers: Record<
-  keyof MockData,
-  (count: number) => RequestHandler
-> = {
-  domain: (count) =>
-    rest.get('*/domains', (req, res, ctx) => {
-      const domains = domainFactory.buildList(count);
-      return res(ctx.json(makeResourcePage(domains)));
-    }),
-  linode: (count) =>
-    rest.get('*/linode/instances', async (req, res, ctx) => {
-      linodeFactory.resetSequenceNumber();
-      const linodes = linodeFactory.buildList(count);
-      return res(ctx.json(makeResourcePage(linodes)));
-    }),
-  nodeBalancer: (count) =>
-    rest.get('*/nodebalancers', (req, res, ctx) => {
-      const nodeBalancers = nodeBalancerFactory.buildList(count);
-      return res(ctx.json(makeResourcePage(nodeBalancers)));
-    }),
-  volume: (count) =>
-    rest.get('*/volumes', (req, res, ctx) => {
-      const volumes = volumeFactory.buildList(count);
-      return res(ctx.json(makeResourcePage(volumes)));
-    }),
-};
diff --git a/packages/manager/src/mocks/testBrowser.ts b/packages/manager/src/mocks/testBrowser.ts
index e3757038157..43c81b340b6 100644
--- a/packages/manager/src/mocks/testBrowser.ts
+++ b/packages/manager/src/mocks/testBrowser.ts
@@ -1,25 +1,5 @@
 import { setupWorker } from 'msw';
-import { SetupWorkerApi } from 'msw/lib/types/setupWorker/setupWorker';
 
-import { ENABLE_DEV_TOOLS, isProductionBuild } from 'src/constants';
-import { mockDataController } from 'src/dev-tools/mockDataController';
+import { handlers } from './serverHandlers';
 
-import { handlers, mockDataHandlers } from './serverHandlers';
-
-let worker: SetupWorkerApi;
-
-if (!isProductionBuild || ENABLE_DEV_TOOLS) {
-  worker = setupWorker(...handlers);
-
-  // Subscribe to changes from the mockDataController, which is updated by local dev tools.
-  mockDataController.subscribe((mockData) => {
-    const mockHandlers = Object.keys(mockData).map((thisKey) => {
-      const handlerGenerator = mockDataHandlers[thisKey];
-      return handlerGenerator(mockData[thisKey].quantity);
-    });
-
-    worker.resetHandlers(...mockHandlers);
-  });
-}
-
-export { worker };
+export const worker = setupWorker(...handlers);
diff --git a/yarn.lock b/yarn.lock
index 58ef8956017..b79baf1c7b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2573,6 +2573,28 @@
     "@types/mdx" "^2.0.0"
     "@types/react" ">=16"
 
+"@mswjs/cookies@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@mswjs/cookies/-/cookies-0.2.2.tgz#b4e207bf6989e5d5427539c2443380a33ebb922b"
+  integrity sha512-mlN83YSrcFgk7Dm1Mys40DLssI1KdJji2CMKN8eOlBqsTADYzj2+jWzsANsUTFbxDMWPD5e9bfA1RGqBpS3O1g==
+  dependencies:
+    "@types/set-cookie-parser" "^2.4.0"
+    set-cookie-parser "^2.4.6"
+
+"@mswjs/interceptors@^0.17.10":
+  version "0.17.10"
+  resolved "https://registry.yarnpkg.com/@mswjs/interceptors/-/interceptors-0.17.10.tgz#857b41f30e2b92345ed9a4e2b1d0a08b8b6fcad4"
+  integrity sha512-N8x7eSLGcmUFNWZRxT1vsHvypzIRgQYdG0rJey/rZCy6zT/30qDt8Joj7FxzGNLSwXbeZqJOMqDurp7ra4hgbw==
+  dependencies:
+    "@open-draft/until" "^1.0.3"
+    "@types/debug" "^4.1.7"
+    "@xmldom/xmldom" "^0.8.3"
+    debug "^4.3.3"
+    headers-polyfill "3.2.5"
+    outvariant "^1.2.1"
+    strict-event-emitter "^0.2.4"
+    web-encoding "^1.1.5"
+
 "@mui/base@5.0.0-beta.13":
   version "5.0.0-beta.13"
   resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.13.tgz#3bae94c39752546d84a67d4ca73486b7c4923a89"
@@ -4314,7 +4336,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/cookie@^0.4.0":
+"@types/cookie@^0.4.1":
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d"
   integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==
@@ -4331,6 +4353,13 @@
   resolved "https://registry.yarnpkg.com/@types/css-mediaquery/-/css-mediaquery-0.1.1.tgz#0902ee5849b89a45390c2c9dccbb536a75a88511"
   integrity sha512-JQ+sPiPlRUHmlL4e3DBUNbxVEb6p7dis78/uSDbQpkeCKVoepChZMWGPIVA2JIH0ylfkA9S+TZUdShlgDpFKrw==
 
+"@types/debug@^4.1.7":
+  version "4.1.10"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.10.tgz#f23148a6eb771a34c466a4fc28379d8101e84494"
+  integrity sha512-tOSCru6s732pofZ+sMv9o4o3Zc+Sa8l3bxd/tweTQudFn06vAzb13ZX46Zi6m6EJ+RUbRTHvgQJ1gBtSgkaUYA==
+  dependencies:
+    "@types/ms" "*"
+
 "@types/detect-port@^1.3.0":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@types/detect-port/-/detect-port-1.3.2.tgz#8c06a975e472803b931ee73740aeebd0a2eb27ae"
@@ -4511,6 +4540,11 @@
     jest-diff "^26.0.0"
     pretty-format "^26.0.0"
 
+"@types/js-levenshtein@^1.1.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@types/js-levenshtein/-/js-levenshtein-1.1.2.tgz#e88f365d6a34beeaff9654706b99a790b5a5aabd"
+  integrity sha512-/NCbMABw2uacuyE16Iwka1EzREDD50/W2ggRBad0y1WHBvAkvR9OEINxModVY7D428gXBe0igeVX7bUc9GaslQ==
+
 "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.7":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@@ -4586,6 +4620,11 @@
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-10.0.2.tgz#96d63314255540a36bf24da094cce7a13668d73b"
   integrity sha512-NaHL0+0lLNhX6d9rs+NSt97WH/gIlRHmszXbQ/8/MV/eVcFNdeJ/GYhrFuUc8K7WuPhRhTSdMkCp8VMzhUq85w==
 
+"@types/ms@*":
+  version "0.7.33"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.33.tgz#80bf1da64b15f21fd8c1dc387c31929317d99ee9"
+  integrity sha512-AuHIyzR5Hea7ij0P9q7vx7xu4z0C28ucwjAZC0ja7JhINyCnOw8/DnvAPQQ9TfOlCtZAmCERKQX9+o1mgQhuOQ==
+
 "@types/node-fetch@^2.6.4":
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.4.tgz#1bc3a26de814f6bf466b25aeb1473fa1afe6a660"
@@ -4854,6 +4893,13 @@
     "@types/mime" "*"
     "@types/node" "*"
 
+"@types/set-cookie-parser@^2.4.0":
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/@types/set-cookie-parser/-/set-cookie-parser-2.4.5.tgz#f08fc44f9ab0bb136b7a73bc4e73de7c0c747cf3"
+  integrity sha512-ZPmztaAQ4rbnW/WTUnT1dwSENQo4bjGqxCSeyK+gZxmd+zJl/QAeF6dpEXcS5UEJX22HwiggFSaY8nE1nRmkbg==
+  dependencies:
+    "@types/node" "*"
+
 "@types/sinonjs__fake-timers@8.1.1":
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz#b49c2c70150141a15e0fa7e79cf1f92a72934ce3"
@@ -5149,6 +5195,11 @@
     magic-string "^0.27.0"
     react-refresh "^0.14.0"
 
+"@xmldom/xmldom@^0.8.3":
+  version "0.8.10"
+  resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz#a1337ca426aa61cef9fe15b5b28e340a72f6fa99"
+  integrity sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==
+
 "@yarnpkg/esbuild-plugin-pnp@^3.0.0-rc.10":
   version "3.0.0-rc.15"
   resolved "https://registry.yarnpkg.com/@yarnpkg/esbuild-plugin-pnp/-/esbuild-plugin-pnp-3.0.0-rc.15.tgz#4e40e7d2eb28825c9a35ab9d04c363931d7c0e67"
@@ -5182,6 +5233,11 @@
   resolved "https://registry.yarnpkg.com/@zeit/schemas/-/schemas-2.29.0.tgz#a59ae6ebfdf4ddc66a876872dd736baa58b6696c"
   integrity sha512-g5QiLIfbg3pLuYUJPlisNKY+epQJTcMDsOnVNkscrDP1oi7vmJnzOANYJI/1pZcVJ6umUkBv3aFtlg1UvUHGzA==
 
+"@zxing/text-encoding@0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
+  integrity sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==
+
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -6235,7 +6291,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2:
+chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -6321,7 +6377,7 @@ cheerio@^1.0.0-rc.3:
     parse5 "^7.0.0"
     parse5-htmlparser2-tree-adapter "^7.0.0"
 
-chokidar@^3.5.1, chokidar@^3.5.3:
+chokidar@^3.4.2, chokidar@^3.5.1, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -6455,6 +6511,15 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
 clone-deep@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
@@ -6660,7 +6725,7 @@ cookie@0.5.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
-cookie@^0.4.1:
+cookie@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
@@ -6996,7 +7061,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -8032,6 +8097,11 @@ eventemitter2@6.4.7:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
   integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==
 
+events@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
 exec-sh@^0.3.2:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.6.tgz#ff264f9e325519a60cb5e273692943483cca63bc"
@@ -8701,7 +8771,7 @@ get-caller-file@^1.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
   integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
 
-get-caller-file@^2.0.1:
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -8942,10 +9012,10 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
-graphql@^15.3.0:
-  version "15.8.0"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.8.0.tgz#33410e96b012fa3bdb1091cc99a94769db212b38"
-  integrity sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw==
+graphql@^16.8.1:
+  version "16.8.1"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.8.1.tgz#1930a965bef1170603702acdb68aedd3f3cf6f07"
+  integrity sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==
 
 growly@^1.3.0:
   version "1.3.0"
@@ -9070,10 +9140,10 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-headers-utils@^1.2.0:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/headers-utils/-/headers-utils-1.2.5.tgz#899d6a76b21bcbe18d6108f56136fdbd4f30c404"
-  integrity sha512-DAzV5P/pk3wTU/8TLZN+zFTDv4Xa1QDTU8pRvovPetcOMbmqq8CwsAvZBLPZHH6usxyy31zMp7I4aCYb6XIf6w==
+headers-polyfill@3.2.5:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/headers-polyfill/-/headers-polyfill-3.2.5.tgz#6e67d392c9d113d37448fe45014e0afdd168faed"
+  integrity sha512-tUCGvt191vNSQgttSyJoibR+VO+I6+iCHIUdhzEMJKE+EAL8BwCN7fUOZlY4ofOelNHsK+gEjxB/B+9N3EWtdA==
 
 hi-base32@^0.5.0:
   version "0.5.1"
@@ -9376,6 +9446,27 @@ inquirer@^7.0.0:
     strip-ansi "^6.0.0"
     through "^2.3.6"
 
+inquirer@^8.2.0:
+  version "8.2.6"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-8.2.6.tgz#733b74888195d8d400a67ac332011b5fae5ea562"
+  integrity sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    chalk "^4.1.1"
+    cli-cursor "^3.1.0"
+    cli-width "^3.0.0"
+    external-editor "^3.0.3"
+    figures "^3.0.0"
+    lodash "^4.17.21"
+    mute-stream "0.0.8"
+    ora "^5.4.1"
+    run-async "^2.4.0"
+    rxjs "^7.5.5"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+    through "^2.3.6"
+    wrap-ansi "^6.0.1"
+
 internal-slot@^1.0.3, internal-slot@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
@@ -9678,6 +9769,11 @@ is-negative-zero@^2.0.2:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
   integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
 
+is-node-process@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-node-process/-/is-node-process-1.2.0.tgz#ea02a1b90ddb3934a19aea414e88edef7e11d134"
+  integrity sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==
+
 is-number-object@^1.0.4:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
@@ -10475,6 +10571,11 @@ joycon@^3.0.1:
   resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03"
   integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==
 
+js-levenshtein@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
+  integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==
+
 js-sdsl@^4.1.4:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.3.0.tgz#aeefe32a451f7af88425b11fdb5f58c90ae1d711"
@@ -11419,22 +11520,30 @@ ms@2.1.3, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-msw@~0.20.5:
-  version "0.20.5"
-  resolved "https://registry.yarnpkg.com/msw/-/msw-0.20.5.tgz#b6141080c0d8b17c451d9ca36c28cc47b4ac487a"
-  integrity sha512-hmEsey5BbVicMGt7aOh/GZ9ltga5N3tK6NiJXnbfCkAGKgnAVnjASr3i7Z+sWlZyY5uuMUFyLCEcqrlXxC6qIA==
+msw@~1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/msw/-/msw-1.3.2.tgz#35e0271293e893fc3c55116e90aad5d955c66899"
+  integrity sha512-wKLhFPR+NitYTkQl5047pia0reNGgf0P6a1eTnA5aNlripmiz0sabMvvHcicE8kQ3/gZcI0YiPFWmYfowfm3lA==
   dependencies:
+    "@mswjs/cookies" "^0.2.2"
+    "@mswjs/interceptors" "^0.17.10"
     "@open-draft/until" "^1.0.3"
-    "@types/cookie" "^0.4.0"
-    chalk "^4.1.0"
-    cookie "^0.4.1"
-    graphql "^15.3.0"
-    headers-utils "^1.2.0"
-    node-fetch "^2.6.0"
-    node-match-path "^0.4.4"
-    node-request-interceptor "^0.3.5"
-    statuses "^2.0.0"
-    yargs "^15.4.1"
+    "@types/cookie" "^0.4.1"
+    "@types/js-levenshtein" "^1.1.1"
+    chalk "^4.1.1"
+    chokidar "^3.4.2"
+    cookie "^0.4.2"
+    graphql "^16.8.1"
+    headers-polyfill "3.2.5"
+    inquirer "^8.2.0"
+    is-node-process "^1.2.0"
+    js-levenshtein "^1.1.6"
+    node-fetch "^2.6.7"
+    outvariant "^1.4.0"
+    path-to-regexp "^6.2.0"
+    strict-event-emitter "^0.4.3"
+    type-fest "^2.19.0"
+    yargs "^17.3.1"
 
 mute-stream@0.0.8:
   version "0.0.8"
@@ -11531,7 +11640,7 @@ node-fetch-native@^1.0.2:
   resolved "https://registry.yarnpkg.com/node-fetch-native/-/node-fetch-native-1.0.2.tgz#de3651399fda89a1a7c0bf6e7c4e9c239e8d0697"
   integrity sha512-KIkvH1jl6b3O7es/0ShyCgWLcfXxlBrLBbP3rOr23WArC66IMcU4DeZEeYEOwnopYhawLTn7/y+YtmASe8DFVQ==
 
-node-fetch@^1.0.1, node-fetch@^2.0.0, node-fetch@^2.6.0, node-fetch@^2.6.7:
+node-fetch@^1.0.1, node-fetch@^2.0.0, node-fetch@^2.6.7:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.9.tgz#7c7f744b5cc6eb5fd404e0c7a9fec630a55657e6"
   integrity sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==
@@ -11543,11 +11652,6 @@ node-int64@^0.4.0:
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
   integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
 
-node-match-path@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/node-match-path/-/node-match-path-0.4.4.tgz#516a10926093c0cc6f237d020685b593b19baebb"
-  integrity sha512-pBq9gp7TG0r0VXuy/oeZmQsjBSnYQo7G886Ly/B3azRwZuEtHCY155dzmfoKWcDPGgyfIGD8WKVC7h3+6y7yTg==
-
 node-notifier@^8.0.0:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-8.0.2.tgz#f3167a38ef0d2c8a866a83e318c1ba0efeb702c5"
@@ -11570,15 +11674,6 @@ node-releases@^2.0.8:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
   integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==
 
-node-request-interceptor@^0.3.5:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/node-request-interceptor/-/node-request-interceptor-0.3.6.tgz#c411065a424b17a17503ecfce11a6a2a2f5d9a87"
-  integrity sha512-pN8Tt43XuLamN+bspAZ9tEMGDp1bOfaxluYop1/qmNRQmM5BOelFqr4jRvARD6y/7iuhLjOEjMQgy5HweXN7Kg==
-  dependencies:
-    "@open-draft/until" "^1.0.3"
-    debug "^4.1.1"
-    headers-utils "^1.2.0"
-
 normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -11871,6 +11966,11 @@ ospath@^1.2.2:
   resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"
   integrity sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==
 
+outvariant@^1.2.1, outvariant@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.0.tgz#e742e4bda77692da3eca698ef5bfac62d9fba06e"
+  integrity sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==
+
 p-defer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
@@ -12096,6 +12196,11 @@ path-to-regexp@^1.7.0:
   dependencies:
     isarray "0.0.1"
 
+path-to-regexp@^6.2.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.1.tgz#d54934d6798eb9e5ef14e7af7962c945906918e5"
+  integrity sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==
+
 path-type@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
@@ -13356,6 +13461,13 @@ rxjs@^7.5.1, rxjs@^7.8.0:
   dependencies:
     tslib "^2.1.0"
 
+rxjs@^7.5.5:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -13527,6 +13639,11 @@ set-blocking@^2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
+set-cookie-parser@^2.4.6:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz#131921e50f62ff1a66a461d7d62d7b21d5d15a51"
+  integrity sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==
+
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -13845,7 +13962,7 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-statuses@2.0.1, statuses@^2.0.0:
+statuses@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
   integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
@@ -13888,6 +14005,18 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
   integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
 
+strict-event-emitter@^0.2.4:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/strict-event-emitter/-/strict-event-emitter-0.2.8.tgz#b4e768927c67273c14c13d20e19d5e6c934b47ca"
+  integrity sha512-KDf/ujU8Zud3YaLtMCcTI4xkZlZVIYxTLr+XIULexP+77EEVWixeXroLUXQXiVtH4XH2W7jr/3PT1v3zBuvc3A==
+  dependencies:
+    events "^3.3.0"
+
+strict-event-emitter@^0.4.3:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz#ff347c8162b3e931e3ff5f02cfce6772c3b07eb3"
+  integrity sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==
+
 string-argv@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
@@ -13901,7 +14030,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -14842,7 +14971,7 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-util@^0.12.0, util@^0.12.4:
+util@^0.12.0, util@^0.12.3, util@^0.12.4:
   version "0.12.5"
   resolved "https://registry.yarnpkg.com/util/-/util-0.12.5.tgz#5f17a6059b73db61a875668781a1c2b136bd6fbc"
   integrity sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==
@@ -14984,6 +15113,15 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+web-encoding@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/web-encoding/-/web-encoding-1.1.5.tgz#fc810cf7667364a6335c939913f5051d3e0c4864"
+  integrity sha512-HYLeVCdJ0+lBYV2FvNZmv3HJ2Nt0QYXqZojk3d9FJOLkwnuhzM9tmamh8d7HPM8QqjKH8DeHkFTx+CFlWpZZDA==
+  dependencies:
+    util "^0.12.3"
+  optionalDependencies:
+    "@zxing/text-encoding" "0.9.0"
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
@@ -15143,7 +15281,7 @@ wrap-ansi@^2.0.0:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
 
-wrap-ansi@^6.2.0:
+wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
   integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
@@ -15247,6 +15385,11 @@ xterm@^4.2.0:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
   integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
 
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
 yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
@@ -15262,7 +15405,7 @@ yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2, yaml@^2.2.2, yaml@^2.3.0:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.3.tgz#01f6d18ef036446340007db8e016810e5d64aad9"
   integrity sha512-zw0VAJxgeZ6+++/su5AFoqBbZbrEakwu+X0M5HmcwUiBL7AzcuPKjj5we4xfQLp78LkEMpD0cOnUhmgOVy3KdQ==
 
-yargs-parser@^11.1.1, yargs-parser@^18.1.2, yargs-parser@^18.1.3:
+yargs-parser@^11.1.1, yargs-parser@^18.1.2, yargs-parser@^18.1.3, yargs-parser@^21.1.1:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
   integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
@@ -15305,6 +15448,19 @@ yargs@^15.4.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
+yargs@^17.3.1:
+  version "17.7.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"
+
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"

From 8b7cb3a66d1f44538e0de717bf3dd2d57b8fef0e Mon Sep 17 00:00:00 2001
From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
Date: Tue, 7 Nov 2023 10:27:54 -0500
Subject: [PATCH 32/43] feat: [M3-7284, M3-7361] - Create VPC drawer in Linode
 Create flow; Update widths for Create VPC and Create Firewall buttons (#9847)

* update api types and fix resulting errors

* add changesets

* increase timeout of specific test?

* Update packages/manager/.changeset/pr-9824-upcoming-features-1697827056392.md

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

* Update packages/api-v4/.changeset/pr-9824-upcoming-features-1697827003419.md

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

* address feedback for factories

* fix array size for subnet factories, update naming

* remove extra timeout

* fix cypress test: make mock subnet start with 0 linodes

* initial commit

* initial commit v2

* undo some changes, looking around

* need to fix styling and abstract everything but functionality exists

* fix VPCCreate styling as per ticket

* update spacing drawer

* create custom hook to abstract create VPC logic

* update custom useCreateVPC hook logic

* first of the form abstractions

* abstract form components

* styling of drawer

* changeset + some tests

* tests + update naming

* ensure that at least 1 subnet must be created for createVPC drawer

* some cleanup

* hide create link if vpc is not supported in region

* fix label that caused cypress failure

* address feedback p1

* feedback pt2

* small bit of cleanup

* Update packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

* feedback p1

* renamed file + updated imports

* update test comments

* remove bottom margin (see m3-7361)

* vpc panel unit tests

* Update pr-9847-upcoming-features-1698425054230.md

* fix: `ScheduleSettings.test.tsx` failing due to daylight savings time ending (#9876)

* use utc for unit test

* more strict assertion

* support est and edt

* fix comment

* improve mocks and tests

---------

Co-authored-by: Banks Nussman <banks@nussman.us>

* remove refetch on windows focus for vpc query

* update comment

---------

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Co-authored-by: Banks Nussman <banks@nussman.us>
---
 ...pr-9847-upcoming-features-1698425054230.md |   5 +
 .../SelectFirewallPanel.tsx                   |  23 +-
 .../LinodesCreate/VPCCreateDrawer.test.tsx    |  43 +++
 .../Linodes/LinodesCreate/VPCCreateDrawer.tsx |  92 +++++
 .../Linodes/LinodesCreate/VPCPanel.test.tsx   |  42 ++-
 .../Linodes/LinodesCreate/VPCPanel.tsx        | 336 ++++++++++--------
 .../CannotCreateVPCNotice.test.tsx            |  13 +
 .../FormComponents/CannotCreateVPCNotice.tsx  |  14 +
 .../FormComponents/SubnetContent.test.tsx     |  28 ++
 .../FormComponents/SubnetContent.tsx          |  55 +++
 .../FormComponents/VPCCreateForm.styles.ts    |  28 ++
 .../VPCTopSectionContent.test.tsx             |  22 ++
 .../FormComponents/VPCTopSectionContent.tsx   |  63 ++++
 .../VPCs/VPCCreate/MultipleSubnetInput.tsx    |  14 +-
 .../features/VPCs/VPCCreate/SubnetNode.tsx    |  79 ++--
 .../VPCs/VPCCreate/VPCCreate.styles.ts        |  19 -
 .../src/features/VPCs/VPCCreate/VPCCreate.tsx | 289 ++-------------
 .../manager/src/features/VPCs/constants.ts    |   7 +
 packages/manager/src/hooks/useCreateVPC.ts    | 226 ++++++++++++
 packages/manager/src/queries/vpcs.ts          |   4 +-
 20 files changed, 922 insertions(+), 480 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9847-upcoming-features-1698425054230.md
 create mode 100644 packages/manager/src/features/Linodes/LinodesCreate/VPCCreateDrawer.test.tsx
 create mode 100644 packages/manager/src/features/Linodes/LinodesCreate/VPCCreateDrawer.tsx
 create mode 100644 packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.test.tsx
 create mode 100644 packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.tsx
 create mode 100644 packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.test.tsx
 create mode 100644 packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.tsx
 create mode 100644 packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCCreateForm.styles.ts
 create mode 100644 packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.test.tsx
 create mode 100644 packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.tsx
 delete mode 100644 packages/manager/src/features/VPCs/VPCCreate/VPCCreate.styles.ts
 create mode 100644 packages/manager/src/hooks/useCreateVPC.ts

diff --git a/packages/manager/.changeset/pr-9847-upcoming-features-1698425054230.md b/packages/manager/.changeset/pr-9847-upcoming-features-1698425054230.md
new file mode 100644
index 00000000000..25b63ab20a1
--- /dev/null
+++ b/packages/manager/.changeset/pr-9847-upcoming-features-1698425054230.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Create VPC drawer to Linode Create flow and update Create Firewall button width ([#9847](https://github.com/linode/manager/pull/9847))
diff --git a/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx b/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx
index ceeb04e7dea..9d69c29f55b 100644
--- a/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx
+++ b/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx
@@ -1,8 +1,10 @@
 import { Firewall } from '@linode/api-v4';
-import { Stack } from 'src/components/Stack';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
+import { Box } from 'src/components/Box';
 import { Paper } from 'src/components/Paper';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 import { CreateFirewallDrawer } from 'src/features/Firewalls/FirewallLanding/CreateFirewallDrawer';
 import { useFirewallsQuery } from 'src/queries/firewalls';
@@ -71,12 +73,11 @@ export const SelectFirewallPanel = (props: Props) => {
           placeholder={'None'}
           value={selectedFirewall}
         />
-        <LinkButton
-          onClick={handleCreateFirewallClick}
-          style={{ marginBottom: 16, marginTop: 12, textAlign: 'left' }}
-        >
-          Create Firewall
-        </LinkButton>
+        <StyledLinkButtonBox>
+          <LinkButton onClick={handleCreateFirewallClick}>
+            Create Firewall
+          </LinkButton>
+        </StyledLinkButtonBox>
         <CreateFirewallDrawer
           label={createFirewallLabel}
           onClose={() => setIsDrawerOpen(false)}
@@ -87,3 +88,11 @@ export const SelectFirewallPanel = (props: Props) => {
     </Paper>
   );
 };
+
+export const StyledLinkButtonBox = styled(Box, {
+  label: 'StyledLinkButtonBox',
+})({
+  display: 'flex',
+  justifyContent: 'flex-start',
+  marginTop: '12px',
+});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VPCCreateDrawer.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VPCCreateDrawer.test.tsx
new file mode 100644
index 00000000000..233c79173bb
--- /dev/null
+++ b/packages/manager/src/features/Linodes/LinodesCreate/VPCCreateDrawer.test.tsx
@@ -0,0 +1,43 @@
+import { fireEvent, screen } from '@testing-library/react';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { VPCCreateDrawer } from './VPCCreateDrawer';
+
+const props = {
+  handleSelectVPC: jest.fn(),
+  onClose: jest.fn(),
+  open: true,
+};
+
+describe('VPC Create Drawer', () => {
+  it('should render the vpc and subnet sections', () => {
+    const { getAllByText } = renderWithTheme(<VPCCreateDrawer {...props} />);
+
+    getAllByText('Region');
+    getAllByText('VPC Label');
+    getAllByText('Select a Region');
+    getAllByText('Description');
+    getAllByText('Subnets');
+    getAllByText('Subnet Label');
+    getAllByText('Subnet IP Address Range');
+    getAllByText('Add another Subnet');
+    getAllByText('Cancel');
+    getAllByText('Create VPC');
+  });
+
+  it('should not be able to remove the first subnet', () => {
+    renderWithTheme(<VPCCreateDrawer {...props} />);
+
+    const deleteSubnet = screen.queryByTestId('delete-subnet-0');
+    expect(deleteSubnet).not.toBeInTheDocument();
+  });
+
+  it('should close the drawer', () => {
+    renderWithTheme(<VPCCreateDrawer {...props} />);
+    const cancelButton = screen.getByText('Cancel');
+    fireEvent.click(cancelButton);
+    expect(props.onClose).toHaveBeenCalled();
+  });
+});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VPCCreateDrawer.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VPCCreateDrawer.tsx
new file mode 100644
index 00000000000..160727c7b4c
--- /dev/null
+++ b/packages/manager/src/features/Linodes/LinodesCreate/VPCCreateDrawer.tsx
@@ -0,0 +1,92 @@
+import Grid from '@mui/material/Unstable_Grid2';
+import { useTheme } from '@mui/material/styles';
+import * as React from 'react';
+
+import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { Box } from 'src/components/Box';
+import { Drawer } from 'src/components/Drawer';
+import { Notice } from 'src/components/Notice/Notice';
+import { CannotCreateVPCNotice } from 'src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice';
+import { SubnetContent } from 'src/features/VPCs/VPCCreate/FormComponents/SubnetContent';
+import { VPCTopSectionContent } from 'src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent';
+import { useCreateVPC } from 'src/hooks/useCreateVPC';
+
+interface Props {
+  handleSelectVPC: (vpcId: number) => void;
+  onClose: () => void;
+  open: boolean;
+  selectedRegion?: string;
+}
+
+export const VPCCreateDrawer = (props: Props) => {
+  const theme = useTheme();
+  const { handleSelectVPC, onClose, open, selectedRegion } = props;
+
+  const {
+    formik,
+    generalAPIError,
+    generalSubnetErrorsFromAPI,
+    isLoadingCreateVPC,
+    onChangeField,
+    onCreateVPC,
+    regionsWithVPCCapability,
+    setGeneralAPIError,
+    setGeneralSubnetErrorsFromAPI,
+    userCannotAddVPC,
+  } = useCreateVPC({ handleSelectVPC, onDrawerClose: onClose, selectedRegion });
+
+  const { errors, handleSubmit, resetForm, setFieldValue, values } = formik;
+
+  React.useEffect(() => {
+    if (open) {
+      resetForm();
+      setGeneralSubnetErrorsFromAPI([]);
+      setGeneralAPIError(undefined);
+    }
+  }, [open, resetForm, setGeneralAPIError, setGeneralSubnetErrorsFromAPI]);
+
+  return (
+    <Drawer onClose={onClose} open={open} title={'Create VPC'}>
+      {userCannotAddVPC && CannotCreateVPCNotice}
+      <Grid>
+        {generalAPIError ? (
+          <Notice text={generalAPIError} variant="error" />
+        ) : null}
+        <form onSubmit={handleSubmit}>
+          <Box sx={{ marginTop: theme.spacing(3) }}>
+            <VPCTopSectionContent
+              disabled={userCannotAddVPC}
+              errors={errors}
+              isDrawer
+              onChangeField={onChangeField}
+              regions={regionsWithVPCCapability}
+              values={values}
+            />
+          </Box>
+          <SubnetContent
+            disabled={userCannotAddVPC}
+            isDrawer
+            onChangeField={setFieldValue}
+            subnetErrors={generalSubnetErrorsFromAPI}
+            subnets={values.subnets}
+          />
+          <ActionsPanel
+            primaryButtonProps={{
+              'data-testid': 'submit',
+              disabled: userCannotAddVPC,
+              label: 'Create VPC',
+              loading: isLoadingCreateVPC,
+              onClick: onCreateVPC,
+            }}
+            secondaryButtonProps={{
+              'data-testid': 'cancel',
+              label: 'Cancel',
+              onClick: onClose,
+            }}
+            style={{ marginTop: theme.spacing(3) }}
+          />
+        </form>
+      </Grid>
+    </Drawer>
+  );
+};
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx
index 389dee24359..c244efb8839 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.test.tsx
@@ -187,7 +187,48 @@ describe('VPCPanel', () => {
       ).not.toBeInTheDocument();
     });
   });
+  it('shows helper text for when "from" = "linodeCreate" if the selected region does not support VPCs', async () => {
+    server.use(
+      rest.get('*/regions', (req, res, ctx) => {
+        const usEast = regionFactory.build({
+          capabilities: [],
+          id: 'us-east',
+        });
+        return res(ctx.json(makeResourcePage([usEast])));
+      })
+    );
 
+    const wrapper = renderWithTheme(<VPCPanel {...props} />, {
+      flags: { vpc: true },
+      queryClient,
+    });
+
+    await waitFor(() => {
+      expect(
+        wrapper.queryByText('VPC is not available in the selected region.')
+      ).toBeInTheDocument();
+    });
+  });
+  it('should show the "Create VPC" drawer link when from = "linodeCreate" and a region that supports VPCs is selected', async () => {
+    server.use(
+      rest.get('*/regions', (req, res, ctx) => {
+        const usEast = regionFactory.build({
+          capabilities: ['VPCs'],
+          id: 'us-east',
+        });
+        return res(ctx.json(makeResourcePage([usEast])));
+      })
+    );
+
+    const wrapper = renderWithTheme(<VPCPanel {...props} />, {
+      flags: { vpc: true },
+      queryClient,
+    });
+
+    await waitFor(() => {
+      expect(wrapper.queryByText('Create VPC')).toBeInTheDocument();
+    });
+  });
   it('should display an unchecked VPC IPv4 auto-assign checkbox and display the VPC IPv4 input field if there is already a value', async () => {
     const _props = {
       ...props,
@@ -223,7 +264,6 @@ describe('VPCPanel', () => {
       expect(wrapper.getByLabelText(/^VPC IPv4.*/)).toHaveValue('10.0.4.3');
     });
   });
-
   it('should check the Assign a public IPv4 address checkbox if assignPublicIPv4Address is true', async () => {
     const _props = {
       ...props,
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
index 4392df6585a..3bf183f457e 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/VPCPanel.tsx
@@ -7,12 +7,13 @@ import { Checkbox } from 'src/components/Checkbox';
 import Select, { Item } from 'src/components/EnhancedSelect';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
+import { LinkButton } from 'src/components/LinkButton';
 import { Paper } from 'src/components/Paper';
+import { StyledLinkButtonBox } from 'src/components/SelectFirewallPanel/SelectFirewallPanel';
 import { Stack } from 'src/components/Stack';
 import { TextField } from 'src/components/TextField';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
-import { APP_ROOT } from 'src/constants';
 import { VPC_AUTO_ASSIGN_IPV4_TOOLTIP } from 'src/features/VPCs/constants';
 import { useAccountManagement } from 'src/hooks/useAccountManagement';
 import { useFlags } from 'src/hooks/useFlags';
@@ -23,7 +24,7 @@ import { doesRegionSupportFeature } from 'src/utilities/doesRegionSupportFeature
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
 
-import { StyledCreateLink } from './LinodeCreate.styles';
+import { VPCCreateDrawer } from './VPCCreateDrawer';
 import { REGION_CAVEAT_HELPER_TEXT } from './constants';
 
 export interface VPCPanelProps {
@@ -82,19 +83,20 @@ export const VPCPanel = (props: VPCPanelProps) => {
     'VPCs'
   );
 
+  const [isVPCCreateDrawerOpen, setIsVPCCreateDrawerOpen] = React.useState(
+    false
+  );
+
   const displayVPCPanel = isFeatureEnabled(
     'VPCs',
     Boolean(flags.vpc),
     account?.capabilities ?? []
   );
 
-  /* To prevent unnecessary API calls, pass the displayVPCPanel boolean to determine
-     whether the query is enabled and whether it should refetchOnWindowFocus
-  */
+  // To prevent unnecessary API calls, pass the displayVPCPanel boolean to determine whether the query is enabled
   const { data: vpcData, error, isLoading } = useVPCsQuery(
     {},
     {},
-    displayVPCPanel,
     displayVPCPanel
   );
 
@@ -157,167 +159,185 @@ export const VPCPanel = (props: VPCPanelProps) => {
   };
 
   return (
-    <Paper
-      sx={(theme) => ({
-        ...(fromLinodeCreate && {
-          marginTop: theme.spacing(3),
-        }),
-        ...(fromLinodeConfig && {
-          padding: 0,
-        }),
-      })}
-      data-testid="vpc-panel"
-    >
-      {fromLinodeCreate && (
-        <Typography
-          sx={(theme) => ({ marginBottom: theme.spacing(2) })}
-          variant="h2"
-        >
-          VPC
-        </Typography>
-      )}
-      <Stack>
-        <Typography>{getMainCopyVPC()}</Typography>
-        <Select
-          onChange={(selectedVPC: Item<number, string>) => {
-            handleSelectVPC(selectedVPC.value);
-          }}
-          textFieldProps={{
-            tooltipText: REGION_CAVEAT_HELPER_TEXT,
-          }}
-          value={vpcDropdownOptions.find(
-            (option) => option.value === selectedVPCId
-          )}
-          defaultValue={fromLinodeConfig ? null : vpcDropdownOptions[0]} // If we're in the Config dialog, there is no "None" option at index 0
-          disabled={!regionSupportsVPCs}
-          errorText={vpcIdError ?? vpcError}
-          isClearable={false}
-          isLoading={isLoading}
-          label={from === 'linodeCreate' ? 'Assign VPC' : 'VPC'}
-          noOptionsMessage={() => `No VPCs exist in this Linode's region.`}
-          options={vpcDropdownOptions}
-          placeholder={'Select a VPC'}
-        />
-        {from === 'linodeCreate' &&
-          vpcDropdownOptions.length <= 1 &&
-          regionSupportsVPCs && (
-            <Typography sx={(theme) => ({ paddingTop: theme.spacing(1.5) })}>
-              No VPCs exist in the selected region. Click Create VPC to create
-              one.
-            </Typography>
-          )}
-
-        {from === 'linodeCreate' && (
-          <StyledCreateLink to={`${APP_ROOT}/vpcs/create`}>
-            Create VPC
-          </StyledCreateLink>
+    <>
+      <Paper
+        sx={(theme) => ({
+          ...(fromLinodeCreate && {
+            marginTop: theme.spacing(3),
+          }),
+          ...(fromLinodeConfig && {
+            padding: 0,
+          }),
+        })}
+        data-testid="vpc-panel"
+      >
+        {fromLinodeCreate && (
+          <Typography
+            sx={(theme) => ({ marginBottom: theme.spacing(2) })}
+            variant="h2"
+          >
+            VPC
+          </Typography>
         )}
+        <Stack>
+          <Typography>{getMainCopyVPC()}</Typography>
+          <Select
+            onChange={(selectedVPC: Item<number, string>) => {
+              handleSelectVPC(selectedVPC.value);
+            }}
+            textFieldProps={{
+              tooltipText: REGION_CAVEAT_HELPER_TEXT,
+            }}
+            value={vpcDropdownOptions.find(
+              (option) => option.value === selectedVPCId
+            )}
+            defaultValue={fromLinodeConfig ? null : vpcDropdownOptions[0]} // If we're in the Config dialog, there is no "None" option at index 0
+            disabled={!regionSupportsVPCs}
+            errorText={vpcIdError ?? vpcError}
+            isClearable={false}
+            isLoading={isLoading}
+            label={from === 'linodeCreate' ? 'Assign VPC' : 'VPC'}
+            noOptionsMessage={() => `No VPCs exist in this Linode's region.`}
+            options={vpcDropdownOptions}
+            placeholder={'Select a VPC'}
+          />
+          {from === 'linodeCreate' &&
+            vpcDropdownOptions.length <= 1 &&
+            regionSupportsVPCs && (
+              <Typography sx={(theme) => ({ paddingTop: theme.spacing(1.5) })}>
+                No VPCs exist in the selected region. Click Create VPC to create
+                one.
+              </Typography>
+            )}
+          {from === 'linodeCreate' &&
+            (regionSupportsVPCs ? (
+              <StyledLinkButtonBox>
+                <LinkButton onClick={() => setIsVPCCreateDrawerOpen(true)}>
+                  Create VPC
+                </LinkButton>
+              </StyledLinkButtonBox>
+            ) : (
+              region && (
+                <Typography
+                  sx={(theme) => ({ paddingTop: theme.spacing(1.5) })}
+                >
+                  VPC is not available in the selected region.
+                </Typography>
+              )
+            ))}
 
-        {selectedVPCId !== -1 && regionSupportsVPCs && (
-          <Stack data-testid="subnet-and-additional-options-section">
-            <Select
-              onChange={(selectedSubnet: Item<number, string>) =>
-                handleSubnetChange(selectedSubnet.value)
-              }
-              value={
-                subnetDropdownOptions.find(
-                  (option) => option.value === selectedSubnetId
-                ) || null
-              }
-              errorGroup={ERROR_GROUP_STRING}
-              errorText={subnetError}
-              isClearable={false}
-              label="Subnet"
-              options={subnetDropdownOptions}
-              placeholder="Select Subnet"
-            />
-            <Box
-              sx={(theme) => ({
-                marginLeft: '2px',
-                paddingTop: theme.spacing(),
-              })}
-              alignItems="center"
-              display="flex"
-              flexDirection="row"
-            >
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    checked={autoassignIPv4WithinVPC}
-                    onChange={toggleAutoassignIPv4WithinVPCEnabled}
-                  />
+          {selectedVPCId !== -1 && regionSupportsVPCs && (
+            <Stack data-testid="subnet-and-additional-options-section">
+              <Select
+                onChange={(selectedSubnet: Item<number, string>) =>
+                  handleSubnetChange(selectedSubnet.value)
                 }
-                label={
-                  <Box
-                    alignItems="center"
-                    display="flex"
-                    flexDirection="row"
-                    sx={{}}
-                  >
-                    <Typography noWrap={!isSmallBp && from === 'linodeConfig'}>
-                      Auto-assign a VPC IPv4 address for this Linode in the VPC
-                    </Typography>
-                    <TooltipIcon
-                      status="help"
-                      text={VPC_AUTO_ASSIGN_IPV4_TOOLTIP}
-                    />
-                  </Box>
+                value={
+                  subnetDropdownOptions.find(
+                    (option) => option.value === selectedSubnetId
+                  ) || null
                 }
-                data-testid="vpc-ipv4-checkbox"
-              />
-            </Box>
-            {!autoassignIPv4WithinVPC && (
-              <TextField
                 errorGroup={ERROR_GROUP_STRING}
-                errorText={vpcIPv4Error}
-                label="VPC IPv4"
-                onChange={(e) => handleVPCIPv4Change(e.target.value)}
-                required={!autoassignIPv4WithinVPC}
-                value={vpcIPv4AddressOfLinode}
+                errorText={subnetError}
+                isClearable={false}
+                label="Subnet"
+                options={subnetDropdownOptions}
+                placeholder="Select Subnet"
               />
-            )}
-            <Box
-              sx={(theme) => ({
-                marginLeft: '2px',
-                marginTop: !autoassignIPv4WithinVPC ? theme.spacing() : 0,
-              })}
-              alignItems="center"
-              display="flex"
-            >
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    checked={assignPublicIPv4Address}
-                    onChange={toggleAssignPublicIPv4Address}
-                  />
-                }
-                label={
-                  <Box alignItems="center" display="flex" flexDirection="row">
-                    <Typography>
-                      Assign a public IPv4 address for this Linode
-                    </Typography>
-                    <TooltipIcon
-                      text={
-                        'Assign a public IP address for this VPC via 1:1 static NAT.'
-                      }
-                      status="help"
+              <Box
+                sx={(theme) => ({
+                  marginLeft: '2px',
+                  paddingTop: theme.spacing(),
+                })}
+                alignItems="center"
+                display="flex"
+                flexDirection="row"
+              >
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={autoassignIPv4WithinVPC}
+                      onChange={toggleAutoassignIPv4WithinVPCEnabled}
                     />
-                  </Box>
-                }
-              />
-            </Box>
-            {assignPublicIPv4Address && publicIPv4Error && (
-              <Typography
+                  }
+                  label={
+                    <Box alignItems="center" display="flex" flexDirection="row">
+                      <Typography
+                        noWrap={!isSmallBp && from === 'linodeConfig'}
+                      >
+                        Auto-assign a VPC IPv4 address for this Linode in the
+                        VPC
+                      </Typography>
+                      <TooltipIcon
+                        status="help"
+                        text={VPC_AUTO_ASSIGN_IPV4_TOOLTIP}
+                      />
+                    </Box>
+                  }
+                  data-testid="vpc-ipv4-checkbox"
+                />
+              </Box>
+              {!autoassignIPv4WithinVPC && (
+                <TextField
+                  errorGroup={ERROR_GROUP_STRING}
+                  errorText={vpcIPv4Error}
+                  label="VPC IPv4"
+                  onChange={(e) => handleVPCIPv4Change(e.target.value)}
+                  required={!autoassignIPv4WithinVPC}
+                  value={vpcIPv4AddressOfLinode}
+                />
+              )}
+              <Box
                 sx={(theme) => ({
-                  color: theme.color.red,
+                  marginLeft: '2px',
+                  marginTop: !autoassignIPv4WithinVPC ? theme.spacing() : 0,
                 })}
+                alignItems="center"
+                display="flex"
               >
-                {publicIPv4Error}
-              </Typography>
-            )}
-          </Stack>
-        )}
-      </Stack>
-    </Paper>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={assignPublicIPv4Address}
+                      onChange={toggleAssignPublicIPv4Address}
+                    />
+                  }
+                  label={
+                    <Box alignItems="center" display="flex" flexDirection="row">
+                      <Typography>
+                        Assign a public IPv4 address for this Linode
+                      </Typography>
+                      <TooltipIcon
+                        text={
+                          'Assign a public IP address for this VPC via 1:1 static NAT.'
+                        }
+                        status="help"
+                      />
+                    </Box>
+                  }
+                />
+              </Box>
+              {assignPublicIPv4Address && publicIPv4Error && (
+                <Typography
+                  sx={(theme) => ({
+                    color: theme.color.red,
+                  })}
+                >
+                  {publicIPv4Error}
+                </Typography>
+              )}
+            </Stack>
+          )}
+        </Stack>
+      </Paper>
+      {isVPCCreateDrawerOpen && (
+        <VPCCreateDrawer
+          handleSelectVPC={(vpcId: number) => handleSelectVPC(vpcId)}
+          onClose={() => setIsVPCCreateDrawerOpen(false)}
+          open={isVPCCreateDrawerOpen}
+          selectedRegion={region}
+        />
+      )}
+    </>
   );
 };
diff --git a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.test.tsx b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.test.tsx
new file mode 100644
index 00000000000..5c5bf0b70ec
--- /dev/null
+++ b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.test.tsx
@@ -0,0 +1,13 @@
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { CANNOT_CREATE_VPC_MESSAGE } from '../../constants';
+import { CannotCreateVPCNotice } from './CannotCreateVPCNotice';
+
+describe('Cannot create VPC notice', () => {
+  it('renders the cannot create vpc notice', () => {
+    const { getByText } = renderWithTheme(CannotCreateVPCNotice);
+
+    const notice = getByText(`${CANNOT_CREATE_VPC_MESSAGE}`);
+    expect(notice).toBeInTheDocument();
+  });
+});
diff --git a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.tsx b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.tsx
new file mode 100644
index 00000000000..66f379fc05c
--- /dev/null
+++ b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { Notice } from 'src/components/Notice/Notice';
+
+import { CANNOT_CREATE_VPC_MESSAGE } from '../../constants';
+
+export const CannotCreateVPCNotice = (
+  <Notice
+    important
+    spacingTop={16}
+    text={`${CANNOT_CREATE_VPC_MESSAGE}`}
+    variant="error"
+  />
+);
diff --git a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.test.tsx b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.test.tsx
new file mode 100644
index 00000000000..1a18558a0d0
--- /dev/null
+++ b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.test.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { SubnetContent } from './SubnetContent';
+
+const props = {
+  disabled: false,
+  onChangeField: jest.fn(),
+  subnets: [
+    {
+      ip: { ipv4: '', ipv4Error: '' },
+      label: '',
+      labelError: '',
+    },
+  ],
+};
+
+describe('Subnet form content', () => {
+  it('renders the subnet content correctly', () => {
+    const { getByText } = renderWithTheme(<SubnetContent {...props} />);
+
+    getByText('Subnets');
+    getByText('Subnet Label');
+    getByText('Subnet IP Address Range');
+    getByText('Add another Subnet');
+  });
+});
diff --git a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.tsx b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.tsx
new file mode 100644
index 00000000000..58a5c34a1a6
--- /dev/null
+++ b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.tsx
@@ -0,0 +1,55 @@
+import { APIError } from '@linode/api-v4';
+import * as React from 'react';
+
+import { Link } from 'src/components/Link';
+import { Notice } from 'src/components/Notice/Notice';
+import { SubnetFieldState } from 'src/utilities/subnets';
+
+import { MultipleSubnetInput } from '../MultipleSubnetInput';
+import {
+  StyledBodyTypography,
+  StyledHeaderTypography,
+} from './VPCCreateForm.styles';
+
+import { VPC_CREATE_FORM_SUBNET_HELPER_TEXT } from '../../constants';
+
+interface Props {
+  disabled?: boolean;
+  isDrawer?: boolean;
+  onChangeField: (field: string, value: SubnetFieldState[]) => void;
+  subnetErrors?: APIError[];
+  subnets: SubnetFieldState[];
+}
+
+export const SubnetContent = (props: Props) => {
+  const { disabled, isDrawer, onChangeField, subnetErrors, subnets } = props;
+
+  return (
+    <>
+      <StyledHeaderTypography isDrawer={isDrawer} variant="h2">
+        Subnets
+      </StyledHeaderTypography>
+      <StyledBodyTypography isDrawer={isDrawer} variant="body1">
+        {VPC_CREATE_FORM_SUBNET_HELPER_TEXT}
+        <Link to="#"> Learn more</Link>.
+        {/* @TODO VPC: subnet learn more link here */}
+      </StyledBodyTypography>
+      {subnetErrors
+        ? subnetErrors.map((apiError: APIError) => (
+            <Notice
+              key={apiError.reason}
+              spacingBottom={8}
+              text={apiError.reason}
+              variant="error"
+            />
+          ))
+        : null}
+      <MultipleSubnetInput
+        disabled={disabled}
+        isDrawer={isDrawer}
+        onChange={(subnets) => onChangeField('subnets', subnets)}
+        subnets={subnets}
+      />
+    </>
+  );
+};
diff --git a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCCreateForm.styles.ts b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCCreateForm.styles.ts
new file mode 100644
index 00000000000..183f8941b8e
--- /dev/null
+++ b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCCreateForm.styles.ts
@@ -0,0 +1,28 @@
+import { styled } from '@mui/material/styles';
+
+import { Typography } from 'src/components/Typography';
+import { omittedProps } from 'src/utilities/omittedProps';
+
+type StyledVPCFormProps = {
+  isDrawer?: boolean;
+};
+
+export const StyledBodyTypography = styled(Typography, {
+  label: 'StyledBodyTypography',
+  shouldForwardProp: omittedProps(['isDrawer']),
+})<StyledVPCFormProps>(({ isDrawer, theme }) => ({
+  marginBottom: theme.spacing(1),
+  marginTop: theme.spacing(2),
+  ...(!isDrawer && {
+    [theme.breakpoints.up('sm')]: {
+      maxWidth: '80%',
+    },
+  }),
+}));
+
+export const StyledHeaderTypography = styled(Typography, {
+  label: 'StyledHeaderTypography',
+  shouldForwardProp: omittedProps(['isDrawer']),
+})<StyledVPCFormProps>(({ isDrawer, theme }) => ({
+  marginTop: isDrawer ? theme.spacing(3) : theme.spacing(1),
+}));
diff --git a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.test.tsx b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.test.tsx
new file mode 100644
index 00000000000..1c5a7ed5d42
--- /dev/null
+++ b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.test.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { VPCTopSectionContent } from './VPCTopSectionContent';
+
+const props = {
+  errors: {},
+  onChangeField: jest.fn(),
+  regions: [],
+  values: { description: '', label: '', region: '', subnets: [] },
+};
+
+describe('VPC Top Section form content', () => {
+  it('renders the vpc top section form content correctly', () => {
+    const { getByText } = renderWithTheme(<VPCTopSectionContent {...props} />);
+
+    getByText('Region');
+    getByText('VPC Label');
+    getByText('Description');
+  });
+});
diff --git a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.tsx b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.tsx
new file mode 100644
index 00000000000..a6841ebcc87
--- /dev/null
+++ b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent.tsx
@@ -0,0 +1,63 @@
+import { Region } from '@linode/api-v4';
+import { FormikErrors } from 'formik';
+import * as React from 'react';
+
+import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
+import { Link } from 'src/components/Link';
+import { TextField } from 'src/components/TextField';
+import { CreateVPCFieldState } from 'src/hooks/useCreateVPC';
+
+import { VPC_CREATE_FORM_VPC_HELPER_TEXT } from '../../constants';
+import { StyledBodyTypography } from './VPCCreateForm.styles';
+
+interface Props {
+  disabled?: boolean;
+  errors: FormikErrors<CreateVPCFieldState>;
+  isDrawer?: boolean;
+  onChangeField: (field: string, value: string) => void;
+  regions: Region[];
+  values: CreateVPCFieldState;
+}
+
+export const VPCTopSectionContent = (props: Props) => {
+  const { disabled, errors, isDrawer, onChangeField, regions, values } = props;
+  return (
+    <>
+      <StyledBodyTypography isDrawer={isDrawer} variant="body1">
+        {VPC_CREATE_FORM_VPC_HELPER_TEXT}
+        <Link to="#"> Learn more</Link>.{/* @TODO VPC: learn more link here */}
+      </StyledBodyTypography>
+      <RegionSelect
+        aria-label="Choose a region"
+        disabled={isDrawer ? true : disabled}
+        errorText={errors.region}
+        handleSelection={(region: string) => onChangeField('region', region)}
+        isClearable
+        regions={regions}
+        selectedID={values.region}
+      />
+      <TextField
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+          onChangeField('label', e.target.value)
+        }
+        aria-label="Enter a label"
+        disabled={disabled}
+        errorText={errors.label}
+        label="VPC Label"
+        value={values.label}
+      />
+      <TextField
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+          onChangeField('description', e.target.value)
+        }
+        disabled={disabled}
+        errorText={errors.description}
+        label="Description"
+        maxRows={1}
+        multiline
+        optional
+        value={values.description}
+      />
+    </>
+  );
+};
diff --git a/packages/manager/src/features/VPCs/VPCCreate/MultipleSubnetInput.tsx b/packages/manager/src/features/VPCs/VPCCreate/MultipleSubnetInput.tsx
index e99f4fe8f2b..874821a4914 100644
--- a/packages/manager/src/features/VPCs/VPCCreate/MultipleSubnetInput.tsx
+++ b/packages/manager/src/features/VPCs/VPCCreate/MultipleSubnetInput.tsx
@@ -1,5 +1,4 @@
 import Grid from '@mui/material/Unstable_Grid2';
-import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Button } from 'src/components/Button/Button';
@@ -13,13 +12,13 @@ import { SubnetNode } from './SubnetNode';
 
 interface Props {
   disabled?: boolean;
+  isDrawer?: boolean;
   onChange: (subnets: SubnetFieldState[]) => void;
   subnets: SubnetFieldState[];
 }
 
 export const MultipleSubnetInput = (props: Props) => {
-  const theme = useTheme();
-  const { disabled, onChange, subnets } = props;
+  const { disabled, isDrawer, onChange, subnets } = props;
 
   const addSubnet = () => {
     onChange([
@@ -49,24 +48,27 @@ export const MultipleSubnetInput = (props: Props) => {
   return (
     <Grid>
       {subnets.map((subnet, subnetIdx) => (
-        <Grid key={`subnet-${subnetIdx}`} data-qa-subnet-node={subnetIdx}>
+        <Grid data-qa-subnet-node={subnetIdx} key={`subnet-${subnetIdx}`}>
+          {subnetIdx !== 0 && (
+            <Divider sx={(theme) => ({ marginTop: theme.spacing(2.5) })} />
+          )}
           <SubnetNode
             onChange={(subnet, subnetIdx, removable) =>
               handleSubnetChange(subnet, subnetIdx ?? 0, !!removable)
             }
             disabled={disabled}
             idx={subnetIdx}
+            isCreateVPCDrawer={isDrawer}
             isRemovable={true}
             subnet={subnet}
           />
-          <Divider sx={{ marginTop: theme.spacing(3) }} />
         </Grid>
       ))}
       <Button
         buttonType="outlined"
         disabled={disabled}
         onClick={addSubnet}
-        sx={{ marginTop: theme.spacing(2) }}
+        sx={(theme) => ({ marginTop: theme.spacing(3) })}
       >
         Add {subnets.length > 0 ? 'another' : 'a'} Subnet
       </Button>
diff --git a/packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx b/packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx
index 11a77bbc396..ac3eb4b7b11 100644
--- a/packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx
+++ b/packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx
@@ -1,4 +1,5 @@
 import Close from '@mui/icons-material/Close';
+import Stack from '@mui/material/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
@@ -17,6 +18,7 @@ interface Props {
   // extra props enable SubnetNode to be an independent component or be part of MultipleSubnetInput
   // potential refactor - isRemoveable, and subnetIdx & remove in onChange prop
   idx?: number;
+  isCreateVPCDrawer?: boolean;
   isRemovable?: boolean;
   onChange: (
     subnet: SubnetFieldState,
@@ -28,7 +30,14 @@ interface Props {
 
 // @TODO VPC: currently only supports IPv4, must update when/if IPv6 is also supported
 export const SubnetNode = (props: Props) => {
-  const { disabled, idx, isRemovable, onChange, subnet } = props;
+  const {
+    disabled,
+    idx,
+    isCreateVPCDrawer,
+    isRemovable,
+    onChange,
+    subnet,
+  } = props;
 
   const onLabelChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newSubnet = {
@@ -52,49 +61,55 @@ export const SubnetNode = (props: Props) => {
     onChange(subnet, idx, isRemovable);
   };
 
+  const showRemoveButton = isCreateVPCDrawer
+    ? idx !== 0 && isRemovable
+    : isRemovable;
+
   return (
     <Grid key={idx} sx={{ maxWidth: 460 }}>
       <Grid container direction="row" spacing={2}>
         <Grid
-          sx={{ ...(!isRemovable && { width: '100%' }) }}
-          xs={isRemovable ? 11 : 12}
+          sx={{ ...(!showRemoveButton && { width: '100%' }), flexGrow: 1 }}
+          xs={showRemoveButton ? 11 : 12}
         >
-          <TextField
-            disabled={disabled}
-            errorText={subnet.labelError}
-            inputId={`subnet-label-${idx}`}
-            label="Subnet Label"
-            onChange={onLabelChange}
-            placeholder="Enter a subnet label"
-            value={subnet.label}
-          />
+          <Stack>
+            <TextField
+              aria-label="Enter a subnet label"
+              disabled={disabled}
+              errorText={subnet.labelError}
+              inputId={`subnet-label-${idx}`}
+              label="Subnet Label"
+              onChange={onLabelChange}
+              placeholder="Enter a subnet label"
+              value={subnet.label}
+            />
+            <TextField
+              aria-label="Enter an IPv4"
+              disabled={disabled}
+              errorText={subnet.ip.ipv4Error}
+              inputId={`subnet-ipv4-${idx}`}
+              label="Subnet IP Address Range"
+              onChange={onIpv4Change}
+              value={subnet.ip.ipv4}
+            />
+            {subnet.ip.availIPv4s && (
+              <FormHelperText>
+                Number of Available IP Addresses:{' '}
+                {subnet.ip.availIPv4s > 4
+                  ? (subnet.ip.availIPv4s - RESERVED_IP_NUMBER).toLocaleString()
+                  : 0}
+              </FormHelperText>
+            )}
+          </Stack>
         </Grid>
-        {isRemovable && (
+        {showRemoveButton && (
           <Grid xs={1}>
-            <StyledButton onClick={removeSubnet} aria-label="Remove Subnet">
+            <StyledButton aria-label="Remove Subnet" onClick={removeSubnet}>
               <Close data-testid={`delete-subnet-${idx}`} />
             </StyledButton>
           </Grid>
         )}
       </Grid>
-      <Grid xs={isRemovable ? 11 : 12}>
-        <TextField
-          disabled={disabled}
-          errorText={subnet.ip.ipv4Error}
-          inputId={`subnet-ipv4-${idx}`}
-          label="Subnet IP Address Range"
-          onChange={onIpv4Change}
-          value={subnet.ip.ipv4}
-        />
-        {subnet.ip.availIPv4s && (
-          <FormHelperText>
-            Number of Available IP Addresses:{' '}
-            {subnet.ip.availIPv4s > 4
-              ? (subnet.ip.availIPv4s - RESERVED_IP_NUMBER).toLocaleString()
-              : 0}
-          </FormHelperText>
-        )}
-      </Grid>
     </Grid>
   );
 };
diff --git a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.styles.ts b/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.styles.ts
deleted file mode 100644
index 20ff948d961..00000000000
--- a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.styles.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-import { Typography } from 'src/components/Typography';
-
-export const StyledBodyTypography = styled(Typography, {
-  label: 'StyledBodyTypography',
-})(({ theme }) => ({
-  marginBottom: theme.spacing(1),
-  marginTop: theme.spacing(2),
-  [theme.breakpoints.up('sm')]: {
-    maxWidth: '80%',
-  },
-}));
-
-export const StyledHeaderTypography = styled(Typography, {
-  label: 'StyledHeaderTypography',
-})(({ theme }) => ({
-  marginTop: theme.spacing(1),
-}));
diff --git a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx b/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx
index cf7c0a33bbe..9976adc1c70 100644
--- a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx
+++ b/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx
@@ -1,201 +1,32 @@
-import {
-  APIError,
-  CreateSubnetPayload,
-  CreateVPCPayload,
-} from '@linode/api-v4';
-import { createVPCSchema } from '@linode/validation';
 import Grid from '@mui/material/Unstable_Grid2';
-import { useTheme } from '@mui/material/styles';
-import { useFormik } from 'formik';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
 import { LandingHeader } from 'src/components/LandingHeader';
-import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
-import { TextField } from 'src/components/TextField';
-import { useGrants, useProfile } from 'src/queries/profile';
-import { useRegionsQuery } from 'src/queries/regions';
-import { useCreateVPCMutation } from 'src/queries/vpcs';
-import {
-  SubnetError,
-  handleVPCAndSubnetErrors,
-} from 'src/utilities/formikErrorUtils';
-import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
-import {
-  DEFAULT_SUBNET_IPV4_VALUE,
-  SubnetFieldState,
-} from 'src/utilities/subnets';
+import { SubnetContent } from 'src/features/VPCs/VPCCreate/FormComponents/SubnetContent';
+import { useCreateVPC } from 'src/hooks/useCreateVPC';
 
-import { MultipleSubnetInput } from './MultipleSubnetInput';
-import {
-  StyledBodyTypography,
-  StyledHeaderTypography,
-} from './VPCCreate.styles';
+import { CannotCreateVPCNotice } from './FormComponents/CannotCreateVPCNotice';
+import { StyledHeaderTypography } from './FormComponents/VPCCreateForm.styles';
+import { VPCTopSectionContent } from './FormComponents/VPCTopSectionContent';
 
 const VPCCreate = () => {
-  const theme = useTheme();
-  const history = useHistory();
-  const { data: profile } = useProfile();
-  const { data: grants } = useGrants();
-  const { data: regions } = useRegionsQuery();
-  const regionsWithVPCCapability =
-    regions?.filter((region) => region.capabilities.includes('VPCs')) ?? [];
-  const { isLoading, mutateAsync: createVPC } = useCreateVPCMutation();
-  const [
-    generalSubnetErrorsFromAPI,
-    setGeneralSubnetErrorsFromAPI,
-  ] = React.useState<APIError[]>();
-  const [generalAPIError, setGeneralAPIError] = React.useState<
-    string | undefined
-  >();
-
-  const userCannotAddVPC = profile?.restricted && !grants?.global.add_vpcs;
-
-  // When creating the subnet payloads, we also create a mapping of the indexes of the subnets that appear on
-  // the UI to the indexes of the subnets that the API will receive. This enables users to leave subnets blank
-  // on the UI and still have any errors returned by the API correspond to the correct subnet
-  const createSubnetsPayloadAndMapping = () => {
-    const subnetsPayload: CreateSubnetPayload[] = [];
-    const subnetIdxMapping = {};
-    let apiSubnetIdx = 0;
-
-    for (let i = 0; i < values.subnets.length; i++) {
-      const { ip, label } = values.subnets[i];
-      if (ip.ipv4 || label) {
-        subnetsPayload.push({ ipv4: ip.ipv4, label });
-        subnetIdxMapping[i] = apiSubnetIdx;
-        apiSubnetIdx++;
-      }
-    }
-
-    return {
-      subnetsPayload,
-      visualToAPISubnetMapping: subnetIdxMapping,
-    };
-  };
-
-  const combineErrorsAndSubnets = (
-    errors: {},
-    visualToAPISubnetMapping: {}
-  ) => {
-    return values.subnets.map((subnet, idx) => {
-      const apiSubnetIdx: number | undefined = visualToAPISubnetMapping[idx];
-      // If the subnet has errors associated with it, include those errors in its state
-      if ((apiSubnetIdx || apiSubnetIdx === 0) && errors[apiSubnetIdx]) {
-        const errorData: SubnetError = errors[apiSubnetIdx];
-        return {
-          ...subnet,
-          // @TODO VPC: IPv6 error handling
-          ip: {
-            ...subnet.ip,
-            ipv4Error: errorData.ipv4 ?? '',
-          },
-          labelError: errorData.label ?? '',
-        };
-      } else {
-        return subnet;
-      }
-    });
-  };
-
-  const onCreateVPC = async () => {
-    setSubmitting(true);
-    setGeneralAPIError(undefined);
-
-    const {
-      subnetsPayload,
-      visualToAPISubnetMapping,
-    } = createSubnetsPayloadAndMapping();
-
-    const createVPCPayload: CreateVPCPayload = {
-      ...values,
-      subnets: subnetsPayload,
-    };
-
-    try {
-      const response = await createVPC(createVPCPayload);
-      history.push(`/vpcs/${response.id}`);
-    } catch (errors) {
-      const generalSubnetErrors = errors.filter(
-        (error: APIError) =>
-          // Both general and specific subnet errors include 'subnets' in their error field.
-          // General subnet errors come in as { field: subnets.some_field, ...}, whereas
-          // specific subnet errors come in as { field: subnets[some_index].some_field, ...}. So,
-          // to avoid specific subnet errors, we filter out errors with a field that includes '['
-          error.field &&
-          error.field.includes('subnets') &&
-          !error.field.includes('[')
-      );
-
-      if (generalSubnetErrors) {
-        setGeneralSubnetErrorsFromAPI(generalSubnetErrors);
-      }
-      const indivSubnetErrors = handleVPCAndSubnetErrors(
-        errors.filter(
-          // ignore general subnet errors: !(the logic of filtering for only general subnet errors)
-          (error: APIError) =>
-            !error.field?.includes('subnets') ||
-            !error.field ||
-            error.field.includes('[')
-        ),
-        setFieldError,
-        setGeneralAPIError
-      );
-
-      // must combine errors and subnet data to avoid indexing weirdness when deleting a subnet
-      const subnetsAndErrors = combineErrorsAndSubnets(
-        indivSubnetErrors,
-        visualToAPISubnetMapping
-      );
-      setFieldValue('subnets', subnetsAndErrors);
-
-      scrollErrorIntoView();
-    }
-
-    setSubmitting(false);
-  };
-
   const {
-    errors,
-    handleSubmit,
-    setFieldError,
-    setFieldValue,
-    setSubmitting,
-    values,
-  } = useFormik({
-    initialValues: {
-      description: '',
-      label: '',
-      region: '',
-      subnets: [
-        {
-          ip: {
-            availIPv4s: 256,
-            ipv4: DEFAULT_SUBNET_IPV4_VALUE,
-            ipv4Error: '',
-          },
-          label: '',
-          labelError: '',
-        },
-      ] as SubnetFieldState[],
-    },
-    onSubmit: onCreateVPC,
-    validateOnChange: false,
-    validationSchema: createVPCSchema,
-  });
+    formik,
+    generalAPIError,
+    generalSubnetErrorsFromAPI,
+    isLoadingCreateVPC,
+    onChangeField,
+    onCreateVPC,
+    regionsWithVPCCapability,
+    userCannotAddVPC,
+  } = useCreateVPC({ pushToVPCPage: true });
 
-  // Helper method to set a field's value and clear existing errors
-  const onChangeField = (field: string, value: string) => {
-    setFieldValue(field, value);
-    if (errors[field]) {
-      setFieldError(field, undefined);
-    }
-  };
+  const { errors, handleSubmit, setFieldValue, values } = formik;
 
   return (
     <>
@@ -214,16 +45,7 @@ const VPCCreate = () => {
         docsLink="#" // @TODO VPC: add correct docs link
         title="Create"
       />
-      {userCannotAddVPC && (
-        <Notice
-          text={
-            "You don't have permissions to create a new VPC. Please contact an account administrator for details."
-          }
-          important
-          spacingTop={16}
-          variant="error"
-        />
-      )}
+      {userCannotAddVPC && CannotCreateVPCNotice}
       <Grid>
         {generalAPIError ? (
           <Notice text={generalAPIError} variant="error" />
@@ -231,79 +53,30 @@ const VPCCreate = () => {
         <form onSubmit={handleSubmit}>
           <Paper>
             <StyledHeaderTypography variant="h2">VPC</StyledHeaderTypography>
-            <StyledBodyTypography variant="body1">
-              A virtual private cloud (VPC) is an isolated network which allows
-              for control over how resources are networked and can communicate.
-              <Link to="#"> Learn more</Link>.
-              {/* @TODO VPC: learn more link here */}
-            </StyledBodyTypography>
-            <RegionSelect
-              handleSelection={(region: string) =>
-                onChangeField('region', region)
-              }
+            <VPCTopSectionContent
               disabled={userCannotAddVPC}
-              errorText={errors.region}
-              isClearable
+              errors={errors}
+              onChangeField={onChangeField}
               regions={regionsWithVPCCapability}
-              selectedID={values.region}
-            />
-            <TextField
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                onChangeField('label', e.target.value)
-              }
-              disabled={userCannotAddVPC}
-              errorText={errors.label}
-              label="VPC Label"
-              value={values.label}
-            />
-            <TextField
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                onChangeField('description', e.target.value)
-              }
-              disabled={userCannotAddVPC}
-              errorText={errors.description}
-              label="Description"
-              multiline
-              optional
-              value={values.description}
+              values={values}
             />
           </Paper>
-          <Paper sx={{ marginTop: theme.spacing(2.5) }}>
-            <StyledHeaderTypography variant="h2">
-              Subnets
-            </StyledHeaderTypography>
-            <StyledBodyTypography variant="body1">
-              A subnet divides a VPC into multiple logically defined networks to
-              allow for controlled access to VPC resources. Subnets within a VPC
-              are routable regardless of the address spaces they are in.
-              <Link to="#"> Learn more</Link>.
-              {/* @TODO VPC: subnet learn more link here */}
-            </StyledBodyTypography>
-            {generalSubnetErrorsFromAPI
-              ? generalSubnetErrorsFromAPI.map((apiError: APIError) => (
-                  <Notice
-                    key={apiError.reason}
-                    spacingBottom={8}
-                    text={apiError.reason}
-                    variant="error"
-                  />
-                ))
-              : null}
-            <MultipleSubnetInput
+          <Paper sx={(theme) => ({ marginTop: theme.spacing(2.5) })}>
+            <SubnetContent
               disabled={userCannotAddVPC}
-              onChange={(subnets) => setFieldValue('subnets', subnets)}
+              onChangeField={setFieldValue}
+              subnetErrors={generalSubnetErrorsFromAPI}
               subnets={values.subnets}
             />
           </Paper>
-          <ActionsPanel
+          <StyledActionsPanel
             primaryButtonProps={{
               'data-testid': 'submit',
               disabled: userCannotAddVPC,
               label: 'Create VPC',
-              loading: isLoading,
+              loading: isLoadingCreateVPC,
               onClick: onCreateVPC,
             }}
-            style={{ marginTop: theme.spacing(1) }}
           />
         </form>
       </Grid>
@@ -311,4 +84,12 @@ const VPCCreate = () => {
   );
 };
 
+const StyledActionsPanel = styled(ActionsPanel, {
+  label: 'StyledActionsPanel',
+})(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'right',
+  marginTop: theme.spacing(2),
+}));
+
 export default VPCCreate;
diff --git a/packages/manager/src/features/VPCs/constants.ts b/packages/manager/src/features/VPCs/constants.ts
index 411e7de937a..a894e253f46 100644
--- a/packages/manager/src/features/VPCs/constants.ts
+++ b/packages/manager/src/features/VPCs/constants.ts
@@ -17,3 +17,10 @@ export const VPC_LABEL = 'Virtual Private Cloud (VPC)';
 
 export const VPC_AUTO_ASSIGN_IPV4_TOOLTIP =
   'A VPC IPv4 is the private IP address for this Linode in the VPC.';
+
+export const CANNOT_CREATE_VPC_MESSAGE = `You don't have permissions to create a new VPC. Please contact an account administrator for details`;
+
+export const VPC_CREATE_FORM_SUBNET_HELPER_TEXT = `A subnet divides a VPC into multiple logically defined networks to allow for controlled access to VPC resources. Subnets within a VPC are routable regardless of the address spaces they are in.`;
+
+export const VPC_CREATE_FORM_VPC_HELPER_TEXT =
+  'A virtual private cloud (VPC) is an isolated network which allows for control over how resources are networked and can communicate.';
diff --git a/packages/manager/src/hooks/useCreateVPC.ts b/packages/manager/src/hooks/useCreateVPC.ts
new file mode 100644
index 00000000000..8b3351193d0
--- /dev/null
+++ b/packages/manager/src/hooks/useCreateVPC.ts
@@ -0,0 +1,226 @@
+import {
+  APIError,
+  CreateSubnetPayload,
+  CreateVPCPayload,
+} from '@linode/api-v4';
+import { createVPCSchema } from '@linode/validation';
+import { useFormik } from 'formik';
+import * as React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { useGrants, useProfile } from 'src/queries/profile';
+import { useRegionsQuery } from 'src/queries/regions';
+import { useCreateVPCMutation } from 'src/queries/vpcs';
+import {
+  SubnetError,
+  handleVPCAndSubnetErrors,
+} from 'src/utilities/formikErrorUtils';
+import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
+import {
+  DEFAULT_SUBNET_IPV4_VALUE,
+  SubnetFieldState,
+} from 'src/utilities/subnets';
+
+// Custom hook to consolidate shared logic between VPCCreate.tsx and VPCCreateDrawer.tsx
+
+export interface CreateVPCFieldState {
+  description: string;
+  label: string;
+  region: string;
+  subnets: SubnetFieldState[];
+}
+
+export interface UseCreateVPCInputs {
+  handleSelectVPC?: (vpcId: number) => void;
+  onDrawerClose?: () => void;
+  pushToVPCPage?: boolean;
+  selectedRegion?: string;
+}
+
+export const useCreateVPC = (inputs: UseCreateVPCInputs) => {
+  const {
+    handleSelectVPC,
+    onDrawerClose,
+    pushToVPCPage,
+    selectedRegion,
+  } = inputs;
+
+  const history = useHistory();
+  const { data: profile } = useProfile();
+  const { data: grants } = useGrants();
+  const userCannotAddVPC = profile?.restricted && !grants?.global.add_vpcs;
+
+  const { data: regions } = useRegionsQuery();
+  const regionsWithVPCCapability =
+    regions?.filter((region) => region.capabilities.includes('VPCs')) ?? [];
+
+  const [
+    generalSubnetErrorsFromAPI,
+    setGeneralSubnetErrorsFromAPI,
+  ] = React.useState<APIError[]>();
+  const [generalAPIError, setGeneralAPIError] = React.useState<
+    string | undefined
+  >();
+
+  const {
+    isLoading: isLoadingCreateVPC,
+    mutateAsync: createVPC,
+  } = useCreateVPCMutation();
+
+  // When creating the subnet payloads, we also create a mapping of the indexes of the subnets that appear on
+  // the UI to the indexes of the subnets that the API will receive. This enables users to leave subnets blank
+  // on the UI and still have any errors returned by the API correspond to the correct subnet
+  const createSubnetsPayloadAndMapping = () => {
+    const subnetsPayload: CreateSubnetPayload[] = [];
+    const subnetIdxMapping = {};
+    let apiSubnetIdx = 0;
+
+    for (let i = 0; i < formik.values.subnets.length; i++) {
+      const { ip, label } = formik.values.subnets[i];
+      // if we are inside the VPCCreateDrawer, we force the first subnet to always be included in the payload,
+      // even if its fields are empty. This is for validation purposes - so that errors can be surfaced on the
+      // first subnet's label and ipv4 field if applicable.
+      if ((onDrawerClose && i === 0) || ip.ipv4 || label) {
+        subnetsPayload.push({ ipv4: ip.ipv4, label });
+        subnetIdxMapping[i] = apiSubnetIdx;
+        apiSubnetIdx++;
+      }
+    }
+
+    return {
+      subnetsPayload,
+      visualToAPISubnetMapping: subnetIdxMapping,
+    };
+  };
+
+  const combineErrorsAndSubnets = (
+    errors: {},
+    visualToAPISubnetMapping: {}
+  ) => {
+    return formik.values.subnets.map((subnet, idx) => {
+      const apiSubnetIdx: number | undefined = visualToAPISubnetMapping[idx];
+      // If the subnet has errors associated with it, include those errors in its state
+      if ((apiSubnetIdx || apiSubnetIdx === 0) && errors[apiSubnetIdx]) {
+        const errorData: SubnetError = errors[apiSubnetIdx];
+        return {
+          ...subnet,
+          // @TODO VPC: IPv6 error handling
+          ip: {
+            ...subnet.ip,
+            ipv4Error: errorData.ipv4 ?? '',
+          },
+          labelError: errorData.label ?? '',
+        };
+      } else {
+        return subnet;
+      }
+    });
+  };
+
+  const onCreateVPC = async () => {
+    formik.setSubmitting(true);
+    setGeneralAPIError(undefined);
+
+    const {
+      subnetsPayload,
+      visualToAPISubnetMapping,
+    } = createSubnetsPayloadAndMapping();
+
+    const createVPCPayload: CreateVPCPayload = {
+      ...formik.values,
+      subnets: subnetsPayload,
+    };
+
+    try {
+      const response = await createVPC(createVPCPayload);
+      if (pushToVPCPage) {
+        history.push(`/vpcs/${response.id}`);
+      } else {
+        if (handleSelectVPC && onDrawerClose) {
+          handleSelectVPC(response.id);
+          onDrawerClose();
+        }
+      }
+    } catch (errors) {
+      const generalSubnetErrors = errors.filter(
+        (error: APIError) =>
+          // Both general and specific subnet errors include 'subnets' in their error field.
+          // General subnet errors come in as { field: subnets.some_field, ...}, whereas
+          // specific subnet errors come in as { field: subnets[some_index].some_field, ...}. So,
+          // to avoid specific subnet errors, we filter out errors with a field that includes '['
+          error.field &&
+          error.field.includes('subnets') &&
+          !error.field.includes('[')
+      );
+
+      if (generalSubnetErrors) {
+        setGeneralSubnetErrorsFromAPI(generalSubnetErrors);
+      }
+      const indivSubnetErrors = handleVPCAndSubnetErrors(
+        errors.filter(
+          // ignore general subnet errors: !(the logic of filtering for only general subnet errors)
+          (error: APIError) =>
+            !error.field?.includes('subnets') ||
+            !error.field ||
+            error.field.includes('[')
+        ),
+        formik.setFieldError,
+        setGeneralAPIError
+      );
+
+      // must combine errors and subnet data to avoid indexing weirdness when deleting a subnet
+      const subnetsAndErrors = combineErrorsAndSubnets(
+        indivSubnetErrors,
+        visualToAPISubnetMapping
+      );
+      formik.setFieldValue('subnets', subnetsAndErrors);
+
+      scrollErrorIntoView();
+    }
+
+    formik.setSubmitting(false);
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      description: '',
+      label: '',
+      region: selectedRegion ?? '',
+      subnets: [
+        {
+          ip: {
+            availIPv4s: 256,
+            ipv4: DEFAULT_SUBNET_IPV4_VALUE,
+            ipv4Error: '',
+          },
+          label: '',
+          labelError: '',
+        },
+      ] as SubnetFieldState[],
+    } as CreateVPCFieldState,
+    onSubmit: onCreateVPC,
+    validateOnChange: false,
+    validationSchema: createVPCSchema,
+  });
+
+  // Helper method to set a field's value and clear existing errors
+  const onChangeField = (field: string, value: string) => {
+    formik.setFieldValue(field, value);
+    if (formik.errors[field]) {
+      formik.setFieldError(field, undefined);
+    }
+  };
+
+  return {
+    formik,
+    generalAPIError,
+    generalSubnetErrorsFromAPI,
+    isLoadingCreateVPC,
+    onChangeField,
+    onCreateVPC,
+    regionsWithVPCCapability,
+    setGeneralAPIError,
+    setGeneralSubnetErrorsFromAPI,
+    userCannotAddVPC,
+  };
+};
diff --git a/packages/manager/src/queries/vpcs.ts b/packages/manager/src/queries/vpcs.ts
index bdd185c51f3..10175e32a41 100644
--- a/packages/manager/src/queries/vpcs.ts
+++ b/packages/manager/src/queries/vpcs.ts
@@ -31,8 +31,7 @@ export const subnetQueryKey = 'subnets';
 export const useVPCsQuery = (
   params: Params,
   filter: Filter,
-  enabled: boolean = true,
-  alwaysRefetch: boolean = false
+  enabled: boolean = true
 ) => {
   return useQuery<ResourcePage<VPC>, APIError[]>(
     [vpcQueryKey, 'paginated', params, filter],
@@ -40,7 +39,6 @@ export const useVPCsQuery = (
     {
       enabled,
       keepPreviousData: true,
-      refetchOnWindowFocus: alwaysRefetch ? 'always' : false,
     }
   );
 };

From ab55d6a752f435df59e8523d42ae2d9eab71cd58 Mon Sep 17 00:00:00 2001
From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
Date: Tue, 7 Nov 2023 10:56:54 -0500
Subject: [PATCH 33/43] upcoming: [M3-7365] - New endpoints, query, types and
 mock data for Sold Out Plans (#9878)

* initial commit

* endpoints, types, react query queries, and mock data

* update mock

* changesets

* use getAll for availability query

* add small todo comment
---
 ...pr-9878-upcoming-features-1699304438796.md |  5 +++
 packages/api-v4/src/regions/regions.ts        | 38 ++++++++++++++++---
 packages/api-v4/src/regions/types.ts          |  6 +++
 ...pr-9878-upcoming-features-1699304466665.md |  5 +++
 packages/manager/src/factories/regions.ts     | 20 +++++++++-
 packages/manager/src/mocks/serverHandlers.ts  | 12 +++++-
 packages/manager/src/queries/regions.ts       | 35 ++++++++++++++++-
 7 files changed, 112 insertions(+), 9 deletions(-)
 create mode 100644 packages/api-v4/.changeset/pr-9878-upcoming-features-1699304438796.md
 create mode 100644 packages/manager/.changeset/pr-9878-upcoming-features-1699304466665.md

diff --git a/packages/api-v4/.changeset/pr-9878-upcoming-features-1699304438796.md b/packages/api-v4/.changeset/pr-9878-upcoming-features-1699304438796.md
new file mode 100644
index 00000000000..ac808708a05
--- /dev/null
+++ b/packages/api-v4/.changeset/pr-9878-upcoming-features-1699304438796.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add `getRegionAvailabilities` and `getRegionAvailability` endpoints and related types for Sold Out Plans initiative ([#9878](https://github.com/linode/manager/pull/9878))
diff --git a/packages/api-v4/src/regions/regions.ts b/packages/api-v4/src/regions/regions.ts
index a2aaa0a0dd4..736e0623d34 100644
--- a/packages/api-v4/src/regions/regions.ts
+++ b/packages/api-v4/src/regions/regions.ts
@@ -1,7 +1,7 @@
 import { API_ROOT } from '../constants';
-import Request, { setMethod, setParams, setURL } from '../request';
-import { Params, ResourcePage as Page } from '../types';
-import { Region } from './types';
+import Request, { setMethod, setParams, setURL, setXFilter } from '../request';
+import { Filter, Params, ResourcePage as Page } from '../types';
+import { Region, RegionAvailability } from './types';
 
 /**
  * getRegions
@@ -27,13 +27,39 @@ export const getRegions = (params?: Params) =>
  *
  * Return detailed information about a particular region.
  *
- * @param regionID { string } The region to be retrieved.
+ * @param regionId { string } The region to be retrieved.
  *
  */
-export const getRegion = (regionID: string) =>
+export const getRegion = (regionId: string) =>
   Request<Region>(
-    setURL(`${API_ROOT}/regions/${encodeURIComponent(regionID)}`),
+    setURL(`${API_ROOT}/regions/${encodeURIComponent(regionId)}`),
     setMethod('GET')
   );
 
 export { Region };
+
+/**
+ * getRegionAvailabilities
+ *
+ * Returns the availability status for all Linode plans for all regions.
+ */
+export const getRegionAvailabilities = (params?: Params, filter?: Filter) =>
+  Request<Page<RegionAvailability>>(
+    setURL(`${API_ROOT}/regions/availability`),
+    setMethod('GET'),
+    setParams(params),
+    setXFilter(filter)
+  );
+
+/**
+ * getRegionAvailability
+ *
+ * Return the availability status of Linode plans for the given region.
+ *
+ * @param regionId { string } The region to get the availabilities for
+ */
+export const getRegionAvailability = (regionId: string) =>
+  Request<RegionAvailability[]>(
+    setURL(`${API_ROOT}/regions/${encodeURIComponent(regionId)}/availability`),
+    setMethod('GET')
+  );
diff --git a/packages/api-v4/src/regions/types.ts b/packages/api-v4/src/regions/types.ts
index e9bab3df5bf..b5893bce3a0 100644
--- a/packages/api-v4/src/regions/types.ts
+++ b/packages/api-v4/src/regions/types.ts
@@ -28,3 +28,9 @@ export interface Region {
   status: RegionStatus;
   resolvers: DNSResolvers;
 }
+
+export interface RegionAvailability {
+  available: boolean;
+  plan: string;
+  region: string;
+}
diff --git a/packages/manager/.changeset/pr-9878-upcoming-features-1699304466665.md b/packages/manager/.changeset/pr-9878-upcoming-features-1699304466665.md
new file mode 100644
index 00000000000..b42930f8f0d
--- /dev/null
+++ b/packages/manager/.changeset/pr-9878-upcoming-features-1699304466665.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add RQ queries and mock data for Sold Out Plans ([#9878](https://github.com/linode/manager/pull/9878))
diff --git a/packages/manager/src/factories/regions.ts b/packages/manager/src/factories/regions.ts
index 8e0dd022843..8d3475e9dc1 100644
--- a/packages/manager/src/factories/regions.ts
+++ b/packages/manager/src/factories/regions.ts
@@ -1,6 +1,12 @@
-import { DNSResolvers, Region } from '@linode/api-v4/lib/regions/types';
+import {
+  DNSResolvers,
+  Region,
+  RegionAvailability,
+} from '@linode/api-v4/lib/regions/types';
 import * as Factory from 'factory.ts';
 
+import { pickRandom } from 'src/utilities/random';
+
 export const resolverFactory = Factory.Sync.makeFactory<DNSResolvers>({
   ipv4: '1.1.1.1',
   ipv6: '2600:3c03::',
@@ -34,3 +40,15 @@ export const regionWithDynamicPricingFactory = Factory.Sync.makeFactory<Region>(
     status: 'ok',
   }
 );
+
+export const regionAvailabilityFactory = Factory.Sync.makeFactory<RegionAvailability>(
+  {
+    available: false,
+    // TODO SOLD OUT PLANS - Remove this comment once the API is changed: Note that the mock data below doesn't match what the API
+    // currently returns for plans; however, the API will be changing soon to match the below labels (ex: g7-premium-#, g1-gpu-rtx-6000-#)
+    plan: Factory.each((id) =>
+      pickRandom([`g7-premium-${id}`, `g1-gpu-rtx6000-${id}`])
+    ),
+    region: Factory.each((id) => `us-${id}`),
+  }
+);
diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts
index 6ed97d102d6..6c70df3928e 100644
--- a/packages/manager/src/mocks/serverHandlers.ts
+++ b/packages/manager/src/mocks/serverHandlers.ts
@@ -77,6 +77,7 @@ import {
   proDedicatedTypeFactory,
   profileFactory,
   promoFactory,
+  regionAvailabilityFactory,
   routeFactory,
   securityQuestionsFactory,
   serviceTargetFactory,
@@ -1059,7 +1060,6 @@ export const handlers = [
     });
     return res(ctx.json(linodeInvoice));
   }),
-
   rest.get('*/account/maintenance', (req, res, ctx) => {
     accountMaintenanceFactory.resetSequenceNumber();
     const page = Number(req.url.searchParams.get('page') || 1);
@@ -1614,6 +1614,16 @@ export const handlers = [
   rest.get('*/betas', (_req, res, ctx) => {
     return res(ctx.json(makeResourcePage(betaFactory.buildList(5))));
   }),
+  rest.get('*regions/availability', (_req, res, ctx) => {
+    return res(
+      ctx.json(makeResourcePage(regionAvailabilityFactory.buildList(10)))
+    );
+  }),
+  rest.get('*regions/:regionId/availability', (_req, res, ctx) => {
+    return res(
+      ctx.json(regionAvailabilityFactory.buildList(5, { region: 'us-east' }))
+    );
+  }),
   ...entityTransfers,
   ...statusPage,
   ...databases,
diff --git a/packages/manager/src/queries/regions.ts b/packages/manager/src/queries/regions.ts
index d0e5da58a28..721b72632e6 100644
--- a/packages/manager/src/queries/regions.ts
+++ b/packages/manager/src/queries/regions.ts
@@ -1,4 +1,10 @@
-import { Region, getRegions } from '@linode/api-v4/lib/regions';
+import {
+  Region,
+  RegionAvailability,
+  getRegionAvailabilities,
+  getRegionAvailability,
+  getRegions,
+} from '@linode/api-v4/lib/regions';
 import { APIError } from '@linode/api-v4/lib/types';
 import { useQuery } from 'react-query';
 
@@ -8,6 +14,7 @@ import { getAll } from 'src/utilities/getAll';
 import { queryPresets } from './base';
 
 const cachedData = data.data as Region[];
+const queryKey = 'region-availability';
 
 export const useRegionsQuery = () =>
   useQuery<Region[], APIError[]>('regions', getAllRegionsRequest, {
@@ -17,3 +24,29 @@ export const useRegionsQuery = () =>
 
 const getAllRegionsRequest = () =>
   getAll<Region>((params) => getRegions(params))().then((data) => data.data);
+
+// Region Availability queries
+
+export const useRegionsAvailabilitiesQuery = () =>
+  useQuery<RegionAvailability[], APIError[]>(
+    queryKey,
+    getAllRegionAvailabilitiesRequest
+  );
+
+const getAllRegionAvailabilitiesRequest = () =>
+  getAll<RegionAvailability>((params, filters) =>
+    getRegionAvailabilities(params, filters)
+  )().then((data) => data.data);
+
+export const useRegionsAvailabilityQuery = (
+  id: string,
+  enabled: boolean = true
+) => {
+  return useQuery<RegionAvailability[], APIError[]>(
+    [queryKey, 'regionAvailability', id],
+    () => getRegionAvailability(id),
+    {
+      enabled,
+    }
+  );
+};

From a549b51575ee206fa7170c1c6f4256f73b94c45d Mon Sep 17 00:00:00 2001
From: corya-akamai <136115382+corya-akamai@users.noreply.github.com>
Date: Tue, 7 Nov 2023 12:55:51 -0500
Subject: [PATCH 34/43] fix: [UIE-6977] - Remove sort on region column on DBaaS
 landing page (#9861)

* fix [UIE-6977]: Remove region sort on DBaaS landing page

* TODO to add back sort once API is updated

* Added changeset: Remove region sorting on DBaaS landing page
---
 .../manager/.changeset/pr-9861-fixed-1698947793164.md |  5 +++++
 .../Databases/DatabaseLanding/DatabaseLanding.tsx     | 11 +++--------
 2 files changed, 8 insertions(+), 8 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9861-fixed-1698947793164.md

diff --git a/packages/manager/.changeset/pr-9861-fixed-1698947793164.md b/packages/manager/.changeset/pr-9861-fixed-1698947793164.md
new file mode 100644
index 00000000000..f7d92d68452
--- /dev/null
+++ b/packages/manager/.changeset/pr-9861-fixed-1698947793164.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Remove region sorting on DBaaS landing page ([#9861](https://github.com/linode/manager/pull/9861))
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
index 159eac886f7..447d0f189d7 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
@@ -9,6 +9,7 @@ import { LandingHeader } from 'src/components/LandingHeader';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
+import { TableCell } from 'src/components/TableCell';
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
@@ -111,14 +112,8 @@ const DatabaseLanding = () => {
               Engine
             </TableSortCell>
             <Hidden mdDown>
-              <TableSortCell
-                active={orderBy === 'region'}
-                direction={order}
-                handleClick={handleOrderChange}
-                label="region"
-              >
-                Region
-              </TableSortCell>
+              {/* TODO add back TableSortCell once API is updated to support sort by Region */}
+              <TableCell>Region</TableCell>
             </Hidden>
             <Hidden lgDown>
               <TableSortCell

From eb81e5046203fc3e1f2c856e017093517b137dd7 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 7 Nov 2023 12:21:25 -0600
Subject: [PATCH 35/43] =?UTF-8?q?feat:=20[M3-7399]=20-=20Linode=20Details?=
 =?UTF-8?q?=20-=20VPC=20Subnets=20Not=20Associated=20with=20VP=E2=80=A6=20?=
 =?UTF-8?q?(#9872)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: [M3-7399] - Linode Details - VPC Subnets Not Associated with VPC IP Address Are Displayed

* Added changeset: Linode Details: VPC Subnets Not Associated with VPC IP Address Are Displayed

* Update LinodeEntityDetail.tsx
---
 .../.changeset/pr-9872-upcoming-features-1699039576510.md  | 5 +++++
 .../manager/src/features/Linodes/LinodeEntityDetail.tsx    | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 packages/manager/.changeset/pr-9872-upcoming-features-1699039576510.md

diff --git a/packages/manager/.changeset/pr-9872-upcoming-features-1699039576510.md b/packages/manager/.changeset/pr-9872-upcoming-features-1699039576510.md
new file mode 100644
index 00000000000..6c455e8fe15
--- /dev/null
+++ b/packages/manager/.changeset/pr-9872-upcoming-features-1699039576510.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Linode Details: VPC Subnets Not Associated with VPC IP Address Are Displayed ([#9872](https://github.com/linode/manager/pull/9872))
diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx
index fc5c88fedec..fdb1c367f1a 100644
--- a/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx
+++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx
@@ -374,6 +374,11 @@ export const Body = React.memo((props: BodyProps) => {
     );
   });
 
+  // Filter and retrieve subnets associated with a specific Linode ID
+  const linodeAssociatedSubnets = vpcLinodeIsAssignedTo?.subnets.filter(
+    (subnet) => subnet.linodes.some((linode) => linode.id === linodeId)
+  );
+
   const { data: configs } = useAllLinodeConfigsQuery(
     linodeId,
     Boolean(vpcLinodeIsAssignedTo) // only grab configs if necessary
@@ -524,7 +529,7 @@ export const Body = React.memo((props: BodyProps) => {
                 <StyledLabelBox component="span" data-testid="subnets-string">
                   Subnets:
                 </StyledLabelBox>{' '}
-                {getSubnetsString(vpcLinodeIsAssignedTo.subnets)}
+                {getSubnetsString(linodeAssociatedSubnets ?? [])}
               </StyledListItem>
             </StyledVPCBox>
             <StyledVPCBox>

From 6486dfc0afaa34a28f1898f2cf01847377dfe3d9 Mon Sep 17 00:00:00 2001
From: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
Date: Tue, 7 Nov 2023 14:05:40 -0500
Subject: [PATCH 36/43] change: [M3-7350] Display `Network
 Interfaces`/`Networking` section unconditionally & conditionally display
 "unavailable in region" helper text (#9868)

---
 .../pr-9868-changed-1699046588424.md          |   5 +
 .../LinodeConfigs/LinodeConfigDialog.tsx      | 155 +++++++++---------
 .../LinodeSettings/InterfaceSelect.test.tsx   |  63 +++++++
 .../LinodeSettings/InterfaceSelect.tsx        |  33 +++-
 4 files changed, 174 insertions(+), 82 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9868-changed-1699046588424.md
 create mode 100644 packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.test.tsx

diff --git a/packages/manager/.changeset/pr-9868-changed-1699046588424.md b/packages/manager/.changeset/pr-9868-changed-1699046588424.md
new file mode 100644
index 00000000000..603ef66d6b0
--- /dev/null
+++ b/packages/manager/.changeset/pr-9868-changed-1699046588424.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Display 'Network Interfaces'/'Networking' section in Linode Config dialog unconditionally and conditionally display 'unavailable in region' helper text for VPC and VLAN interfaces ([#9868](https://github.com/linode/manager/pull/9868))
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
index fe241e9930a..8682446a82f 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
@@ -281,8 +281,6 @@ export const LinodeConfigDialog = (props: Props) => {
       thisRegion.capabilities.includes('VPCs')
   );
 
-  const showVlans = regionHasVLANS;
-
   // @TODO VPC: remove once VPC is fully rolled out
   const vpcEnabled = isFeatureEnabled(
     'VPCs',
@@ -941,86 +939,85 @@ export const LinodeConfigDialog = (props: Props) => {
 
             <StyledDivider />
 
-            {showVlans ? (
-              <Grid xs={12}>
-                <Box alignItems="center" display="flex">
-                  <Typography variant="h3">
-                    {vpcEnabled ? 'Networking' : 'Network Interfaces'}
-                  </Typography>
-                  <TooltipIcon
-                    sxTooltipIcon={{
-                      paddingBottom: 0,
-                      paddingTop: 0,
+            <Grid xs={12}>
+              <Box alignItems="center" display="flex">
+                <Typography variant="h3">
+                  {vpcEnabled ? 'Networking' : 'Network Interfaces'}
+                </Typography>
+                <TooltipIcon
+                  sxTooltipIcon={{
+                    paddingBottom: 0,
+                    paddingTop: 0,
+                  }}
+                  interactive
+                  status="help"
+                  sx={{ tooltip: { maxWidth: 350 } }}
+                  text={networkInterfacesHelperText}
+                />
+              </Box>
+              {formik.errors.interfaces && (
+                <Notice
+                  text={formik.errors.interfaces as string}
+                  variant="error"
+                />
+              )}
+              {vpcEnabled && (
+                <>
+                  <Select
+                    defaultValue={
+                      primaryInterfaceOptions[primaryInterfaceIndex ?? 0]
+                    }
+                    data-testid="primary-interface-dropdown"
+                    disabled={isReadOnly}
+                    isClearable={false}
+                    label="Primary Interface (Default Route)"
+                    onChange={handlePrimaryInterfaceChange}
+                    options={getPrimaryInterfaceOptions(values.interfaces)}
+                  />
+                  <Divider
+                    sx={{
+                      margin: `${theme.spacing(
+                        4.5
+                      )} ${theme.spacing()} ${theme.spacing(1.5)} `,
+                      width: `calc(100% - ${theme.spacing(2)})`,
                     }}
-                    interactive
-                    status="help"
-                    sx={{ tooltip: { maxWidth: 350 } }}
-                    text={networkInterfacesHelperText}
                   />
-                </Box>
-                {formik.errors.interfaces && (
-                  <Notice
-                    text={formik.errors.interfaces as string}
-                    variant="error"
+                </>
+              )}
+              {values.interfaces.map((thisInterface, idx) => {
+                return (
+                  <InterfaceSelect
+                    errors={{
+                      ipamError:
+                        formik.errors[`interfaces[${idx}].ipam_address`],
+                      labelError: formik.errors[`interfaces[${idx}].label`],
+                      publicIPv4Error:
+                        formik.errors[`interfaces[${idx}].ipv4.nat_1_1`],
+                      subnetError:
+                        formik.errors[`interfaces[${idx}].subnet_id`],
+                      vpcError: formik.errors[`interfaces[${idx}].vpc_id`],
+                      vpcIPv4Error:
+                        formik.errors[`interfaces[${idx}].ipv4.vpc`],
+                    }}
+                    handleChange={(newInterface: Interface) =>
+                      handleInterfaceChange(idx, newInterface)
+                    }
+                    ipamAddress={thisInterface.ipam_address}
+                    key={`eth${idx}-interface`}
+                    label={thisInterface.label}
+                    purpose={thisInterface.purpose}
+                    readOnly={isReadOnly}
+                    region={linode?.region}
+                    slotNumber={idx}
+                    subnetId={thisInterface.subnet_id}
+                    vpcIPv4={thisInterface.ipv4?.vpc}
+                    vpcId={thisInterface.vpc_id}
+                    regionHasVLANs={regionHasVLANS}
+                    regionHasVPCs={regionHasVPCs}
                   />
-                )}
-                {vpcEnabled && (
-                  <>
-                    <Select
-                      defaultValue={
-                        primaryInterfaceOptions[primaryInterfaceIndex ?? 0]
-                      }
-                      data-testid="primary-interface-dropdown"
-                      disabled={isReadOnly}
-                      isClearable={false}
-                      label="Primary Interface (Default Route)"
-                      onChange={handlePrimaryInterfaceChange}
-                      options={getPrimaryInterfaceOptions(values.interfaces)}
-                    />
-                    <Divider
-                      sx={{
-                        margin: `${theme.spacing(
-                          4.5
-                        )} ${theme.spacing()} ${theme.spacing(1.5)} `,
-                        width: `calc(100% - ${theme.spacing(2)})`,
-                      }}
-                    />
-                  </>
-                )}
-                {values.interfaces.map((thisInterface, idx) => {
-                  return (
-                    <InterfaceSelect
-                      errors={{
-                        ipamError:
-                          formik.errors[`interfaces[${idx}].ipam_address`],
-                        labelError: formik.errors[`interfaces[${idx}].label`],
-                        publicIPv4Error:
-                          formik.errors[`interfaces[${idx}].ipv4.nat_1_1`],
-                        subnetError:
-                          formik.errors[`interfaces[${idx}].subnet_id`],
-                        vpcError: formik.errors[`interfaces[${idx}].vpc_id`],
-                        vpcIPv4Error:
-                          formik.errors[`interfaces[${idx}].ipv4.vpc`],
-                      }}
-                      handleChange={(newInterface: Interface) =>
-                        handleInterfaceChange(idx, newInterface)
-                      }
-                      ipamAddress={thisInterface.ipam_address}
-                      key={`eth${idx}-interface`}
-                      label={thisInterface.label}
-                      nattedIPv4Address={thisInterface.ipv4?.nat_1_1}
-                      purpose={thisInterface.purpose}
-                      readOnly={isReadOnly}
-                      region={linode?.region}
-                      slotNumber={idx}
-                      subnetId={thisInterface.subnet_id}
-                      vpcIPv4={thisInterface.ipv4?.vpc}
-                      vpcId={thisInterface.vpc_id}
-                    />
-                  );
-                })}
-              </Grid>
-            ) : null}
+                );
+              })}
+            </Grid>
 
             <Grid xs={12}>
               <Typography variant="h3">Filesystem/Boot Helpers</Typography>
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.test.tsx
new file mode 100644
index 00000000000..0de63d58fff
--- /dev/null
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.test.tsx
@@ -0,0 +1,63 @@
+import { waitFor } from '@testing-library/react';
+import * as React from 'react';
+
+import { InterfacePurpose } from '@linode/api-v4';
+import { InterfaceSelect } from './InterfaceSelect';
+
+import { queryClientFactory } from 'src/queries/base';
+import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
+
+const queryClient = queryClientFactory();
+
+beforeAll(() => mockMatchMedia());
+afterEach(() => {
+  queryClient.clear();
+});
+
+const unavailableInRegionTextTestId = 'unavailable-in-region-text';
+
+describe('InterfaceSelect', () => {
+  const props = {
+    fromAddonsPanel: false,
+    handleChange: jest.fn(),
+    ipamAddress: null,
+    label: null,
+    readOnly: false,
+    region: 'us-east',
+    slotNumber: 0,
+    regionHasVLANs: true,
+    errors: {},
+  };
+
+  it('should display helper text regarding VPCs not being available in the region in the Linode Add/Edit Config dialog if applicable', async () => {
+    const _props = {
+      ...props,
+      purpose: 'vpc' as InterfacePurpose,
+      regionHasVPCs: false,
+    };
+
+    const { queryByTestId } = renderWithTheme(<InterfaceSelect {..._props} />, {
+      flags: { vpc: true },
+    });
+
+    await waitFor(() => {
+      expect(queryByTestId(unavailableInRegionTextTestId)).toBeInTheDocument();
+    });
+  });
+
+  it('should display helper text regarding VLANs not being available in the region in the Linode Add/Edit Config dialog if applicable', async () => {
+    const _props = {
+      ...props,
+      purpose: 'vlan' as InterfacePurpose,
+      regionHasVLANs: false,
+    };
+
+    const { queryByTestId } = renderWithTheme(<InterfaceSelect {..._props} />, {
+      flags: { vpc: false },
+    });
+
+    await waitFor(() => {
+      expect(queryByTestId(unavailableInRegionTextTestId)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
index 9b19b4c1b8d..0ca6633a984 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx
@@ -17,8 +17,9 @@ import { useAccount } from 'src/queries/account';
 import { useVlansQuery } from 'src/queries/vlans';
 import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
 import { sendLinodeCreateDocsEvent } from 'src/utilities/analytics';
+import { Typography } from 'src/components/Typography';
 
-export interface Props {
+interface Props {
   fromAddonsPanel?: boolean;
   handleChange: (updatedInterface: ExtendedInterface) => void;
   ipamAddress?: null | string;
@@ -27,6 +28,8 @@ export interface Props {
   readOnly: boolean;
   region?: string;
   slotNumber: number;
+  regionHasVLANs?: boolean;
+  regionHasVPCs?: boolean;
 }
 
 interface VPCStateErrors {
@@ -70,6 +73,8 @@ export const InterfaceSelect = (props: CombinedProps) => {
     subnetId,
     vpcIPv4,
     vpcId,
+    regionHasVLANs,
+    regionHasVPCs,
   } = props;
 
   const theme = useTheme();
@@ -323,13 +328,30 @@ export const InterfaceSelect = (props: CombinedProps) => {
     );
   };
 
+  const displayUnavailableInRegionTextVPC =
+    purpose === 'vpc' && regionHasVPCs === false;
+  const displayUnavailableInRegionTextVLAN =
+    purpose === 'vlan' && regionHasVLANs === false;
+
+  const unavailableInRegionHelperTextJSX =
+    !displayUnavailableInRegionTextVPC &&
+    !displayUnavailableInRegionTextVLAN ? null : (
+      <Typography
+        data-testid="unavailable-in-region-text"
+        sx={{ marginTop: theme.spacing() }}
+      >
+        {displayUnavailableInRegionTextVPC ? 'VPC ' : 'VLAN '}{' '}
+        {unavailableInRegionHelperTextSegment}
+      </Typography>
+    );
+
   return (
     <Grid container>
       {fromAddonsPanel ? null : (
         <Grid xs={isSmallBp ? 12 : 6}>
           <Select
             options={
-              // Do not display "None" as an option for eth0 (must be either Public Internet or a VLAN).
+              // Do not display "None" as an option for eth0 (must be Public Internet, VLAN, or VPC).
               slotNumber > 0
                 ? purposeOptions
                 : purposeOptions.filter(
@@ -344,11 +366,13 @@ export const InterfaceSelect = (props: CombinedProps) => {
             label={`eth${slotNumber}`}
             onChange={handlePurposeChange}
           />
+          {unavailableInRegionHelperTextJSX}
         </Grid>
       )}
       {purpose === 'vlan' &&
+        regionHasVLANs !== false &&
         enclosingJSXForVLANFields(jsxSelectVLAN, jsxIPAMForVLAN)}
-      {purpose === 'vpc' && (
+      {purpose === 'vpc' && regionHasVPCs !== false && (
         <Grid xs={isSmallBp ? 12 : 6}>
           <VPCPanel
             toggleAssignPublicIPv4Address={() =>
@@ -416,3 +440,6 @@ const getPurposeOptions = (showVPCs: boolean) => {
 
   return purposeOptions;
 };
+
+const unavailableInRegionHelperTextSegment =
+  "is not available in this Linode's region";

From 8b2da7b8562149696eae65edbc492f55b552bf18 Mon Sep 17 00:00:00 2001
From: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>
Date: Tue, 7 Nov 2023 14:45:37 -0500
Subject: [PATCH 37/43] test: [M3-7075] - Upgrade to Cypress 13.4.x (#9874)

* Upgrade to Cypress 13.4.x
---
 .../.changeset/pr-9874-tests-1699284798043.md |  5 +
 packages/manager/package.json                 |  6 +-
 yarn.lock                                     | 93 ++++++++++---------
 3 files changed, 55 insertions(+), 49 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9874-tests-1699284798043.md

diff --git a/packages/manager/.changeset/pr-9874-tests-1699284798043.md b/packages/manager/.changeset/pr-9874-tests-1699284798043.md
new file mode 100644
index 00000000000..d2022c34601
--- /dev/null
+++ b/packages/manager/.changeset/pr-9874-tests-1699284798043.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Upgrade Cypress to v13.x ([#9874](https://github.com/linode/manager/pull/9874))
diff --git a/packages/manager/package.json b/packages/manager/package.json
index cba86894ada..155b20f3ae2 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -121,7 +121,7 @@
     "@storybook/theming": "~7.5.2",
     "@swc/core": "^1.3.1",
     "@swc/jest": "^0.2.22",
-    "@testing-library/cypress": "^9.0.0",
+    "@testing-library/cypress": "^10.0.0",
     "@testing-library/jest-dom": "~5.11.3",
     "@testing-library/react": "~10.4.9",
     "@testing-library/react-hooks": "~3.4.1",
@@ -166,10 +166,10 @@
     "chai-string": "^1.5.0",
     "chalk": "^5.2.0",
     "css-mediaquery": "^0.1.2",
-    "cypress": "^12.17.3",
+    "cypress": "^13.4.0",
     "cypress-axe": "^1.0.0",
     "cypress-file-upload": "^5.0.7",
-    "cypress-real-events": "^1.7.0",
+    "cypress-real-events": "^1.11.0",
     "cypress-vite": "^1.4.2",
     "dotenv": "^16.0.3",
     "enzyme": "^3.10.0",
diff --git a/yarn.lock b/yarn.lock
index b79baf1c7b0..fe74cd8545a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1644,10 +1644,10 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@cypress/request@^2.88.11":
-  version "2.88.12"
-  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.12.tgz#ba4911431738494a85e93fb04498cb38bc55d590"
-  integrity sha512-tOn+0mDZxASFM+cuAP9szGUGPI1HwWVSvdzm7V4cCsPdFTx6qMj29CwaQmRAMIEhORIUBFBsYROYJcveK4uOjA==
+"@cypress/request@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-3.0.1.tgz#72d7d5425236a2413bd3d8bb66d02d9dc3168960"
+  integrity sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.8.0"
@@ -1662,7 +1662,7 @@
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.19"
     performance-now "^2.1.0"
-    qs "~6.10.3"
+    qs "6.10.4"
     safe-buffer "^5.1.2"
     tough-cookie "^4.1.3"
     tunnel-agent "^0.6.0"
@@ -4153,13 +4153,13 @@
   resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.5.tgz#043b731d4f56a79b4897a3de1af35e75d56bc63a"
   integrity sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==
 
-"@testing-library/cypress@^9.0.0":
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/cypress/-/cypress-9.0.0.tgz#3facad49c4654a99bbd138f83f33b415d2d6f097"
-  integrity sha512-c1XiCGeHGGTWn0LAU12sFUfoX3qfId5gcSE2yHode+vsyHDWraxDPALjVnHd4/Fa3j4KBcc5k++Ccy6A9qnkMA==
+"@testing-library/cypress@^10.0.0":
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/cypress/-/cypress-10.0.1.tgz#15abae0edb83237316ec6d07e152b71a50b38387"
+  integrity sha512-e8uswjTZIBhaIXjzEcrQQ8nHRWHgZH7XBxKuIWxZ/T7FxfWhCR48nFhUX5nfPizjVOKSThEfOSv67jquc1ASkw==
   dependencies:
     "@babel/runtime" "^7.14.6"
-    "@testing-library/dom" "^8.1.0"
+    "@testing-library/dom" "^9.0.0"
 
 "@testing-library/dom@^7.22.3":
   version "7.31.2"
@@ -4175,18 +4175,18 @@
     lz-string "^1.4.4"
     pretty-format "^26.6.2"
 
-"@testing-library/dom@^8.1.0":
-  version "8.20.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.0.tgz#914aa862cef0f5e89b98cc48e3445c4c921010f6"
-  integrity sha512-d9ULIT+a4EXLX3UU8FBjauG9NnsZHkHztXoIcTsOKoOw030fyjheN9svkTULjJxtYag9DZz5Jz5qkWZDPxTFwA==
+"@testing-library/dom@^9.0.0":
+  version "9.3.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.3.tgz#108c23a5b0ef51121c26ae92eb3179416b0434f5"
+  integrity sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
     "@types/aria-query" "^5.0.1"
-    aria-query "^5.0.0"
+    aria-query "5.1.3"
     chalk "^4.1.0"
     dom-accessibility-api "^0.5.9"
-    lz-string "^1.4.4"
+    lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
 "@testing-library/jest-dom@~5.11.3":
@@ -4643,12 +4643,7 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
   integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
 
-"@types/node@^16.18.39":
-  version "16.18.39"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.39.tgz#aa39a1a87a40ef6098ee69689a1acb0c1b034832"
-  integrity sha512-8q9ZexmdYYyc5/cfujaXb4YOucpQxAV4RMG0himLyDUOEr8Mr79VrqsFI+cQ2M2h89YIuy95lbxuYjxT4Hk4kQ==
-
-"@types/node@^18.0.0":
+"@types/node@^18.0.0", "@types/node@^18.17.5":
   version "18.18.8"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.8.tgz#2b285361f2357c8c8578ec86b5d097c7f464cfd6"
   integrity sha512-OLGBaaK5V3VRBS1bAkMVP2/W9B+H8meUfl866OrMNQqt7wDgdpWPp5o6gmIc9pB+lIQHSq4ZL8ypeH1vPxcPaQ==
@@ -5487,6 +5482,13 @@ aria-hidden@^1.1.1:
   dependencies:
     tslib "^2.0.0"
 
+aria-query@5.1.3, aria-query@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
+  integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
+  dependencies:
+    deep-equal "^2.0.5"
+
 aria-query@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@@ -5495,13 +5497,6 @@ aria-query@^4.2.2:
     "@babel/runtime" "^7.10.2"
     "@babel/runtime-corejs3" "^7.10.2"
 
-aria-query@^5.0.0, aria-query@^5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
-  integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
-  dependencies:
-    deep-equal "^2.0.5"
-
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -6962,10 +6957,10 @@ cypress-file-upload@^5.0.7:
   resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-5.0.8.tgz#d8824cbeaab798e44be8009769f9a6c9daa1b4a1"
   integrity sha512-+8VzNabRk3zG6x8f8BWArF/xA/W0VK4IZNx3MV0jFWrJS/qKn8eHfa5nU73P9fOQAgwHFJx7zjg4lwOnljMO8g==
 
-cypress-real-events@^1.7.0:
-  version "1.7.6"
-  resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.7.6.tgz#6f17e0b2ceea1d6dc60f6737d8f84cc517bbbb4c"
-  integrity sha512-yP6GnRrbm6HK5q4DH6Nnupz37nOfZu/xn1xFYqsE2o4G73giPWQOdu6375QYpwfU1cvHNCgyD2bQ2hPH9D7NMw==
+cypress-real-events@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.11.0.tgz#292fe5281c5b6e955524e766ab7fec46930c7763"
+  integrity sha512-4LXVRsyq+xBh5TmlEyO1ojtBXtN7xw720Pwb9rEE9rkJuXmeH3VyoR1GGayMGr+Itqf11eEjfDewtDmcx6PWPQ==
 
 cypress-vite@^1.4.2:
   version "1.4.2"
@@ -6975,14 +6970,14 @@ cypress-vite@^1.4.2:
     chokidar "^3.5.3"
     debug "^4.3.4"
 
-cypress@^12.17.3:
-  version "12.17.3"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.17.3.tgz#1e2b19037236fc60e4a4b3a14f0846be17a1fc0e"
-  integrity sha512-/R4+xdIDjUSLYkiQfwJd630S81KIgicmQOLXotFxVXkl+eTeVO+3bHXxdi5KBh/OgC33HWN33kHX+0tQR/ZWpg==
+cypress@^13.4.0:
+  version "13.4.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.4.0.tgz#7d91069983ba7c664c505abde84d3e3e20484344"
+  integrity sha512-KeWNC9xSHG/ewZURVbaQsBQg2mOKw4XhjJZFKjWbEjgZCdxpPXLpJnfq5Jns1Gvnjp6AlnIfpZfWFlDgVKXdWQ==
   dependencies:
-    "@cypress/request" "^2.88.11"
+    "@cypress/request" "^3.0.0"
     "@cypress/xvfb" "^1.2.4"
-    "@types/node" "^16.18.39"
+    "@types/node" "^18.17.5"
     "@types/sinonjs__fake-timers" "8.1.1"
     "@types/sizzle" "^2.3.2"
     arch "^2.2.0"
@@ -7015,6 +7010,7 @@ cypress@^12.17.3:
     minimist "^1.2.8"
     ospath "^1.2.2"
     pretty-bytes "^5.6.0"
+    process "^0.11.10"
     proxy-from-env "1.0.0"
     request-progress "^3.0.0"
     semver "^7.5.3"
@@ -11173,6 +11169,11 @@ lz-string@^1.4.4:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
   integrity sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==
 
+lz-string@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
+  integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
+
 magic-string@^0.27.0:
   version "0.27.0"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"
@@ -12570,6 +12571,13 @@ qrcode.react@^0.8.0:
     prop-types "^15.6.0"
     qr.js "0.0.0"
 
+qs@6.10.4:
+  version "6.10.4"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.4.tgz#6a3003755add91c0ec9eacdc5f878b034e73f9e7"
+  integrity sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g==
+  dependencies:
+    side-channel "^1.0.4"
+
 qs@6.11.0, qs@^6.10.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
@@ -12577,13 +12585,6 @@ qs@6.11.0, qs@^6.10.0:
   dependencies:
     side-channel "^1.0.4"
 
-qs@~6.10.3:
-  version "6.10.5"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.5.tgz#974715920a80ff6a262264acd2c7e6c2a53282b4"
-  integrity sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==
-  dependencies:
-    side-channel "^1.0.4"
-
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"

From 2a863b573fdc62042d8f2386cf474f636f1188bc Mon Sep 17 00:00:00 2001
From: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
Date: Tue, 7 Nov 2023 15:43:53 -0800
Subject: [PATCH 38/43] test, upcoming: [M3-7134, M3-7314] - Add integration
 test for AGLB Edit Certificate flow and improve form validation (#9880)

* WIP

* Add label validation to Edit Cert Drawer

* Add label validation check to test

* Clean up after rebase

* Add changesets

* Address feedback: scroll error into view

* Make Create drawer error handling and drawer width consistent

* Missed an import; fix failing typecheck
---
 .../.changeset/pr-9880-tests-1699311124062.md |   5 +
 ...pr-9880-upcoming-features-1699311064702.md |   5 +
 .../load-balancer-certificates.spec.ts        | 222 +++++++++++++++++-
 .../support/intercepts/load-balancers.ts      |  18 ++
 .../Certificates/CreateCertificateDrawer.tsx  |  37 +--
 .../Certificates/EditCertificateDrawer.tsx    |  49 ++--
 ...pr-9880-upcoming-features-1699311177462.md |   5 +
 .../validation/src/loadbalancers.schema.ts    |   2 +-
 8 files changed, 303 insertions(+), 40 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9880-tests-1699311124062.md
 create mode 100644 packages/manager/.changeset/pr-9880-upcoming-features-1699311064702.md
 create mode 100644 packages/validation/.changeset/pr-9880-upcoming-features-1699311177462.md

diff --git a/packages/manager/.changeset/pr-9880-tests-1699311124062.md b/packages/manager/.changeset/pr-9880-tests-1699311124062.md
new file mode 100644
index 00000000000..db416179f58
--- /dev/null
+++ b/packages/manager/.changeset/pr-9880-tests-1699311124062.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add integration tests for AGLB Edit Certificate flow ([#9880](https://github.com/linode/manager/pull/9880))
diff --git a/packages/manager/.changeset/pr-9880-upcoming-features-1699311064702.md b/packages/manager/.changeset/pr-9880-upcoming-features-1699311064702.md
new file mode 100644
index 00000000000..c2f285eb304
--- /dev/null
+++ b/packages/manager/.changeset/pr-9880-upcoming-features-1699311064702.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add missing label field validation in AGLB Edit Certificate drawer ([#9880](https://github.com/linode/manager/pull/9880))
diff --git a/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-certificates.spec.ts b/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-certificates.spec.ts
index ed7cbe40634..ddd7bfe51e5 100644
--- a/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-certificates.spec.ts
+++ b/packages/manager/cypress/e2e/core/loadBalancers/load-balancer-certificates.spec.ts
@@ -7,7 +7,11 @@ import {
   mockGetFeatureFlagClientstream,
 } from 'support/intercepts/feature-flags';
 import { makeFeatureFlagData } from 'support/util/feature-flags';
-import { loadbalancerFactory, certificateFactory } from '@src/factories';
+import {
+  loadbalancerFactory,
+  certificateFactory,
+  mockCertificate,
+} from '@src/factories';
 import { ui } from 'support/ui';
 import { randomItem, randomLabel, randomString } from 'support/util/random';
 import {
@@ -15,6 +19,7 @@ import {
   mockDeleteLoadBalancerCertificateError,
   mockGetLoadBalancer,
   mockGetLoadBalancerCertificates,
+  mockUpdateLoadBalancerCertificate,
   mockUploadLoadBalancerCertificate,
 } from 'support/intercepts/load-balancers';
 import { Loadbalancer, Certificate } from '@linode/api-v4/types';
@@ -241,6 +246,221 @@ describe('Akamai Global Load Balancer certificates page', () => {
     cy.findByText(mockLoadBalancerCertServiceTarget.label).should('be.visible');
   });
 
+  /*
+   * - Confirms Load Balancer certificate edit UI flow using mocked API requests.
+   * - Confirms that TLS and Service Target certificates can be edited.
+   * - Confirms that certificates table updates to reflect edited certificates.
+   */
+  it('can update a TLS certificate', () => {
+    const mockLoadBalancer = loadbalancerFactory.build();
+    const mockLoadBalancerCertTls = certificateFactory.build({
+      label: randomLabel(),
+      type: 'downstream',
+      certificate: mockCertificate.trim(),
+    });
+    const mockNewLoadBalancerCertTls = certificateFactory.build({
+      label: 'my-updated-tls-cert',
+      certificate: 'mock-new-cert',
+      key: 'mock-new-key',
+      type: 'downstream',
+    });
+
+    mockAppendFeatureFlags({
+      aglb: makeFeatureFlagData(true),
+    }).as('getFeatureFlags');
+    mockGetFeatureFlagClientstream().as('getClientStream');
+    mockGetLoadBalancer(mockLoadBalancer).as('getLoadBalancer');
+    mockGetLoadBalancerCertificates(
+      mockLoadBalancer.id,
+      mockLoadBalancerCertTls
+    ).as('getCertificates');
+
+    cy.visitWithLogin(`/loadbalancers/${mockLoadBalancer.id}/certificates`);
+    cy.wait([
+      '@getFeatureFlags',
+      '@getClientStream',
+      '@getLoadBalancer',
+      '@getCertificates',
+    ]);
+
+    // Edit a TLS certificate.
+    ui.actionMenu
+      .findByTitle(
+        `Action Menu for certificate ${mockLoadBalancerCertTls.label}`
+      )
+      .should('be.visible')
+      .click();
+    ui.actionMenuItem.findByTitle('Edit').should('be.visible').click();
+
+    mockUpdateLoadBalancerCertificate(
+      mockLoadBalancer.id,
+      mockLoadBalancerCertTls
+    ).as('updateCertificate');
+
+    mockGetLoadBalancerCertificates(mockLoadBalancer.id, [
+      mockNewLoadBalancerCertTls,
+    ]).as('getCertificates');
+
+    ui.drawer
+      .findByTitle(`Edit ${mockLoadBalancerCertTls.label}`)
+      .should('be.visible')
+      .within(() => {
+        // Confirm that drawer displays certificate data or indicates where data is redacted for security.
+        cy.findByLabelText('Certificate Label')
+          .should('be.visible')
+          .should('have.value', mockLoadBalancerCertTls.label);
+
+        cy.findByLabelText('TLS Certificate')
+          .should('be.visible')
+          .should('have.value', mockLoadBalancerCertTls.certificate);
+
+        cy.findByLabelText('Private Key')
+          .should('be.visible')
+          .should('have.value', '')
+          .invoke('attr', 'placeholder')
+          .should('contain', 'Private key is redacted for security.');
+
+        // Attempt to submit an incorrect form without a label or a new cert key.
+        cy.findByLabelText('Certificate Label').clear();
+        cy.findByLabelText('TLS Certificate').clear().type('my-new-cert');
+
+        ui.buttonGroup
+          .findButtonByTitle('Update Certificate')
+          .scrollIntoView()
+          .should('be.visible')
+          .should('be.enabled')
+          .click();
+
+        // Confirm that validation errors appear when drawer is not filled out correctly.
+        cy.findAllByText('Label must not be empty.').should('be.visible');
+        cy.findAllByText('Private Key is required').should('be.visible');
+
+        // Fix errors.
+        cy.findByLabelText('Certificate Label')
+          .click()
+          .type(mockNewLoadBalancerCertTls.label);
+
+        cy.findByLabelText('TLS Certificate')
+          .click()
+          .type(mockNewLoadBalancerCertTls.certificate);
+
+        cy.findByLabelText('Private Key')
+          .click()
+          .type(mockNewLoadBalancerCertTls.key);
+
+        ui.buttonGroup
+          .findButtonByTitle('Update Certificate')
+          .scrollIntoView()
+          .click();
+      });
+
+    cy.wait(['@updateCertificate', '@getCertificates']);
+
+    // Confirm that new certificate is listed in the table with expected info.
+    cy.findByText(mockNewLoadBalancerCertTls.label).should('be.visible');
+  });
+
+  it('can update a service target certificate', () => {
+    const mockLoadBalancer = loadbalancerFactory.build();
+    const mockLoadBalancerCertServiceTarget = certificateFactory.build({
+      label: randomLabel(),
+      type: 'ca',
+      certificate: mockCertificate.trim(),
+    });
+    const mockNewLoadBalancerCertServiceTarget = certificateFactory.build({
+      label: 'my-updated-ca-cert',
+      certificate: 'mock-new-cert',
+      type: 'ca',
+    });
+
+    mockAppendFeatureFlags({
+      aglb: makeFeatureFlagData(true),
+    }).as('getFeatureFlags');
+    mockGetFeatureFlagClientstream().as('getClientStream');
+    mockGetLoadBalancer(mockLoadBalancer).as('getLoadBalancer');
+    mockGetLoadBalancerCertificates(
+      mockLoadBalancer.id,
+      mockLoadBalancerCertServiceTarget
+    ).as('getCertificates');
+
+    cy.visitWithLogin(`/loadbalancers/${mockLoadBalancer.id}/certificates`);
+    cy.wait([
+      '@getFeatureFlags',
+      '@getClientStream',
+      '@getLoadBalancer',
+      '@getCertificates',
+    ]);
+
+    // Edit a CA certificate.
+    ui.actionMenu
+      .findByTitle(
+        `Action Menu for certificate ${mockLoadBalancerCertServiceTarget.label}`
+      )
+      .should('be.visible')
+      .click();
+    ui.actionMenuItem.findByTitle('Edit').should('be.visible').click();
+
+    mockUpdateLoadBalancerCertificate(
+      mockLoadBalancer.id,
+      mockLoadBalancerCertServiceTarget
+    ).as('updateCertificate');
+
+    mockGetLoadBalancerCertificates(mockLoadBalancer.id, [
+      mockNewLoadBalancerCertServiceTarget,
+    ]).as('getCertificates');
+
+    ui.drawer
+      .findByTitle(`Edit ${mockLoadBalancerCertServiceTarget.label}`)
+      .should('be.visible')
+      .within(() => {
+        // Confirm that drawer displays certificate data or indicates where data is redacted for security.
+        cy.findByLabelText('Certificate Label')
+          .should('be.visible')
+          .should('have.value', mockLoadBalancerCertServiceTarget.label);
+
+        cy.findByLabelText('Server Certificate')
+          .should('be.visible')
+          .should('have.value', mockLoadBalancerCertServiceTarget.certificate);
+
+        cy.findByLabelText('Private Key').should('not.exist');
+
+        // Attempt to submit an incorrect form without a label.
+        cy.findByLabelText('Certificate Label').clear();
+
+        ui.buttonGroup
+          .findButtonByTitle('Update Certificate')
+          .scrollIntoView()
+          .should('be.visible')
+          .should('be.enabled')
+          .click();
+
+        // Confirm that validation error appears when drawer is not filled out correctly.
+        cy.findAllByText('Label must not be empty.').should('be.visible');
+
+        // Fix error.
+        cy.findByLabelText('Certificate Label')
+          .click()
+          .type(mockNewLoadBalancerCertServiceTarget.label);
+
+        // Update certificate.
+        cy.findByLabelText('Server Certificate')
+          .click()
+          .type(mockNewLoadBalancerCertServiceTarget.certificate);
+
+        ui.buttonGroup
+          .findButtonByTitle('Update Certificate')
+          .scrollIntoView()
+          .click();
+      });
+
+    cy.wait(['@updateCertificate', '@getCertificates']);
+
+    // Confirm that new certificate is listed in the table with expected info.
+    cy.findByText(mockNewLoadBalancerCertServiceTarget.label).should(
+      'be.visible'
+    );
+  });
+
   /*
    * - Confirms Load Balancer certificate delete UI flow using mocked API requests.
    * - Confirms that TLS and Service Target certificates can be deleted.
diff --git a/packages/manager/cypress/support/intercepts/load-balancers.ts b/packages/manager/cypress/support/intercepts/load-balancers.ts
index 19cf0a5b884..c79b257c2db 100644
--- a/packages/manager/cypress/support/intercepts/load-balancers.ts
+++ b/packages/manager/cypress/support/intercepts/load-balancers.ts
@@ -139,6 +139,24 @@ export const mockDeleteLoadBalancerCertificateError = (
   );
 };
 
+/**
+ * Intercepts PUT request to update an AGLB load balancer certificate and mocks a success response.
+ *
+ * @param loadBalancerId - ID of load balancer for which to mock certificates.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockUpdateLoadBalancerCertificate = (
+  loadBalancerId: number,
+  certificate: Certificate
+) => {
+  return cy.intercept(
+    'PUT',
+    apiMatcher(`/aglb/${loadBalancerId}/certificates/${certificate.id}`),
+    makeResponse(certificate)
+  );
+};
+
 /**
  * Intercepts GET request to retrieve AGLB service targets and mocks response.
  *
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/CreateCertificateDrawer.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/CreateCertificateDrawer.tsx
index d5521bcaf5a..87e113a9ee0 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/CreateCertificateDrawer.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/CreateCertificateDrawer.tsx
@@ -7,7 +7,8 @@ import { Notice } from 'src/components/Notice/Notice';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
 import { useLoadBalancerCertificateCreateMutation } from 'src/queries/aglb/certificates';
-import { getErrorMap } from 'src/utilities/errorUtils';
+import { getFormikErrorsFromAPIErrors } from 'src/utilities/formikErrorUtils';
+import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
 
 import { labelMap } from './EditCertificateDrawer';
 
@@ -66,33 +67,38 @@ export const CreateCertificateDrawer = (props: Props) => {
       type,
     },
     async onSubmit(values) {
-      await createCertificate(values);
-      onClose();
+      try {
+        await createCertificate(values);
+        onClose();
+      } catch (errors) {
+        formik.setErrors(getFormikErrorsFromAPIErrors(errors));
+        scrollErrorIntoView();
+      }
     },
+    // Disabling validateOnBlur and validateOnChange when an API error is shown prevents
+    // all API errors from disappearing when one field is changed.
+    validateOnBlur: !error,
+    validateOnChange: !error,
   });
 
-  const errorFields = ['label', 'certificate'];
-
-  if (type === 'downstream') {
-    errorFields.push('key');
-  }
-
-  const errorMap = getErrorMap(errorFields, error);
+  const generalError = error?.find((e) => !e.field)?.reason;
 
   return (
-    <Drawer onClose={onClose} open={open} title={titleMap[type] ?? ''}>
+    <Drawer onClose={onClose} open={open} title={titleMap[type] ?? ''} wide>
       <form onSubmit={formik.handleSubmit}>
-        {errorMap.none && <Notice text={errorMap.none} variant="error" />}
+        {generalError && <Notice text={generalError} variant="error" />}
         <Typography>{descriptionMap[type]}</Typography>
         <TextField
-          errorText={errorMap.label}
+          errorText={formik.errors.label}
+          expand
           label="Label"
           name="label"
           onChange={formik.handleChange}
           value={formik.values.label}
         />
         <TextField
-          errorText={errorMap.certificate}
+          errorText={formik.errors.certificate}
+          expand
           label={labelMap[type]}
           labelTooltipText="TODO"
           multiline
@@ -104,7 +110,8 @@ export const CreateCertificateDrawer = (props: Props) => {
         />
         {type === 'downstream' && (
           <TextField
-            errorText={errorMap.key}
+            errorText={formik.errors.key}
+            expand
             label="Private Key"
             labelTooltipText="TODO"
             multiline
diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/EditCertificateDrawer.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/EditCertificateDrawer.tsx
index 768e6331a56..a3d60ab65a2 100644
--- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/EditCertificateDrawer.tsx
+++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/EditCertificateDrawer.tsx
@@ -9,7 +9,8 @@ import { Notice } from 'src/components/Notice/Notice';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
 import { useLoadBalancerCertificateMutation } from 'src/queries/aglb/certificates';
-import { getErrorMap } from 'src/utilities/errorUtils';
+import { getFormikErrorsFromAPIErrors } from 'src/utilities/formikErrorUtils';
+import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
 
 interface Props {
   certificate: Certificate | undefined;
@@ -55,26 +56,29 @@ export const EditCertificateDrawer = (props: Props) => {
         certificate?.certificate.trim() === values.certificate &&
         values.key === '';
 
-      await updateCertificate({
-        certificate:
-          values.certificate && !shouldIgnoreField
-            ? values.certificate
-            : undefined,
-        key: values.key && !shouldIgnoreField ? values.key : undefined,
-        label: values.label,
-        type: values.type,
-      });
-      onClose();
+      try {
+        await updateCertificate({
+          certificate:
+            values.certificate && !shouldIgnoreField
+              ? values.certificate
+              : undefined,
+          key: values.key && !shouldIgnoreField ? values.key : undefined,
+          label: values.label,
+          type: values.type,
+        });
+        onClose();
+      } catch (errors) {
+        formik.setErrors(getFormikErrorsFromAPIErrors(errors));
+        scrollErrorIntoView();
+      }
     },
+    // Disabling validateOnBlur and validateOnChange when an API error is shown prevents
+    // all API errors from disappearing when one field is changed.
+    validateOnBlur: !error,
+    validateOnChange: !error,
   });
 
-  const errorFields = ['label', 'certificate'];
-
-  if (certificate?.type === 'downstream') {
-    errorFields.push('key');
-  }
-
-  const errorMap = getErrorMap(errorFields, error);
+  const generalError = error?.find((e) => !e.field)?.reason;
 
   const onClose = () => {
     formik.resetForm();
@@ -89,17 +93,16 @@ export const EditCertificateDrawer = (props: Props) => {
       title={`Edit ${certificate?.label ?? 'Certificate'}`}
       wide
     >
-      {errorMap.none && <Notice variant="error">{errorMap.none}</Notice>}
+      {generalError && <Notice variant="error">{generalError}</Notice>}
       {!certificate ? (
         <Notice variant="error">Error loading certificate.</Notice>
       ) : (
         <form onSubmit={formik.handleSubmit}>
-          {errorMap.none && <Notice text={errorMap.none} variant="error" />}
           <Typography sx={{ marginBottom: theme.spacing(2) }}>
             {descriptionMap[certificate.type]}
           </Typography>
           <TextField
-            errorText={errorMap.label}
+            errorText={formik.errors.label}
             expand
             label="Certificate Label"
             name="label"
@@ -107,7 +110,7 @@ export const EditCertificateDrawer = (props: Props) => {
             value={formik.values.label}
           />
           <TextField
-            errorText={errorMap.certificate}
+            errorText={formik.errors.certificate}
             expand
             label={labelMap[certificate.type]}
             labelTooltipText="TODO: AGLB"
@@ -119,7 +122,7 @@ export const EditCertificateDrawer = (props: Props) => {
           />
           {certificate?.type === 'downstream' && (
             <TextField
-              errorText={errorMap.key}
+              errorText={formik.errors.key}
               expand
               label="Private Key"
               labelTooltipText="TODO: AGLB"
diff --git a/packages/validation/.changeset/pr-9880-upcoming-features-1699311177462.md b/packages/validation/.changeset/pr-9880-upcoming-features-1699311177462.md
new file mode 100644
index 00000000000..6a56959dc6c
--- /dev/null
+++ b/packages/validation/.changeset/pr-9880-upcoming-features-1699311177462.md
@@ -0,0 +1,5 @@
+---
+"@linode/validation": Upcoming Features
+---
+
+Add missing label validation to `UpdateCertificateSchema` ([#9880](https://github.com/linode/manager/pull/9880))
diff --git a/packages/validation/src/loadbalancers.schema.ts b/packages/validation/src/loadbalancers.schema.ts
index 5a52f616115..9b34385396b 100644
--- a/packages/validation/src/loadbalancers.schema.ts
+++ b/packages/validation/src/loadbalancers.schema.ts
@@ -20,7 +20,7 @@ export const UpdateCertificateSchema = object().shape(
         type === 'downstream' && certificate,
       then: string().required('Private Key is required'),
     }),
-    label: string(),
+    label: string().min(1, 'Label must not be empty.'),
     type: string().oneOf(['downstream', 'ca']),
   },
   [['certificate', 'key']]

From dddde6ce37ad6d56d737891b328308d765e8cb4d Mon Sep 17 00:00:00 2001
From: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
Date: Wed, 8 Nov 2023 16:16:01 -0500
Subject: [PATCH 39/43] =?UTF-8?q?feat:=20[M3-7209]=20=E2=80=93=20VPC=20BET?=
 =?UTF-8?q?A=20Feedback=20button=20(#9879)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pr-9879-upcoming-features-1699306308229.md   |  5 +++++
 .../manager/src/assets/icons/icon-feedback.svg   |  5 +++++
 .../manager/src/components/DocsLink/DocsLink.tsx |  6 ++++--
 .../components/LandingHeader/LandingHeader.tsx   | 16 ++++++++++++++++
 .../src/features/VPCs/VPCDetail/VPCDetail.tsx    |  3 +++
 .../src/features/VPCs/VPCLanding/VPCLanding.tsx  |  3 +++
 packages/manager/src/features/VPCs/constants.ts  |  3 +++
 7 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9879-upcoming-features-1699306308229.md
 create mode 100644 packages/manager/src/assets/icons/icon-feedback.svg

diff --git a/packages/manager/.changeset/pr-9879-upcoming-features-1699306308229.md b/packages/manager/.changeset/pr-9879-upcoming-features-1699306308229.md
new file mode 100644
index 00000000000..e043f81d349
--- /dev/null
+++ b/packages/manager/.changeset/pr-9879-upcoming-features-1699306308229.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add VPC BETA Feedback link to VPC landing and detail pages ([#9879](https://github.com/linode/manager/pull/9879))
diff --git a/packages/manager/src/assets/icons/icon-feedback.svg b/packages/manager/src/assets/icons/icon-feedback.svg
new file mode 100644
index 00000000000..aa987d40471
--- /dev/null
+++ b/packages/manager/src/assets/icons/icon-feedback.svg
@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <g fill="currentColor">
+        <path d="M3.77946 16.3L6.45731 13.8712C6.55137 13.7782 6.67807 13.7256 6.81035 13.7247H16.5051C16.5816 13.7247 16.655 13.6949 16.7097 13.6415C16.7645 13.5881 16.7962 13.5155 16.7981 13.4391V1.30377C16.7962 1.22734 16.7645 1.15469 16.7097 1.10132C16.655 1.04795 16.5816 1.01809 16.5051 1.01811H1.30377C1.22928 1.02002 1.15849 1.05096 1.1065 1.10432C1.0545 1.15769 1.02541 1.22926 1.02544 1.30377V13.442C1.02542 13.4801 1.03305 13.5179 1.04786 13.553C1.06267 13.5882 1.08437 13.62 1.11167 13.6466C1.13898 13.6732 1.17134 13.6941 1.20685 13.708C1.24236 13.722 1.28029 13.7286 1.31842 13.7276H3.27114C3.40609 13.728 3.53538 13.7819 3.63067 13.8775C3.72595 13.973 3.77946 14.1025 3.77946 14.2374V16.3ZM3.95086 9.70794C3.81487 9.70794 3.68446 9.76196 3.58831 9.85811C3.49216 9.95427 3.43814 10.0847 3.43814 10.2207C3.43814 10.3566 3.49216 10.4871 3.58831 10.5832C3.68446 10.6794 3.81487 10.7334 3.95086 10.7334H9.96137C10.0974 10.7334 10.2278 10.6794 10.3239 10.5832C10.4201 10.4871 10.4741 10.3566 10.4741 10.2207C10.4741 10.0847 10.4201 9.95427 10.3239 9.85811C10.2278 9.76196 10.0974 9.70794 9.96137 9.70794H3.95086ZM3.95086 3.86882C3.81487 3.86882 3.68446 3.92284 3.58831 4.01899C3.49216 4.11515 3.43814 4.24556 3.43814 4.38154C3.43814 4.51752 3.49216 4.64793 3.58831 4.74408C3.68446 4.84024 3.81487 4.89426 3.95086 4.89426H13.8712C13.9404 4.89797 14.0095 4.88755 14.0745 4.86364C14.1395 4.83974 14.1989 4.80284 14.2492 4.75521C14.2995 4.70757 14.3395 4.6502 14.3669 4.58658C14.3942 4.52297 14.4083 4.45445 14.4083 4.3852C14.4083 4.31595 14.3942 4.24743 14.3669 4.18382C14.3395 4.1202 14.2995 4.06283 14.2492 4.01519C14.1989 3.96756 14.1395 3.93066 14.0745 3.90676C14.0095 3.88285 13.9404 3.87243 13.8712 3.87614L3.95086 3.86882ZM3.95086 6.78838C3.82057 6.79537 3.69792 6.85205 3.60817 6.94675C3.51841 7.04145 3.46839 7.16696 3.46839 7.29744C3.46839 7.42791 3.51841 7.55342 3.60817 7.64812C3.69792 7.74282 3.82057 7.7995 3.95086 7.80649H12.8414C12.9717 7.7995 13.0943 7.74282 13.1841 7.64812C13.2738 7.55342 13.3238 7.42791 13.3238 7.29744C13.3238 7.16696 13.2738 7.04145 13.1841 6.94675C13.0943 6.85205 12.9717 6.79537 12.8414 6.78838H3.95086ZM7.01251 14.7458L3.64322 17.8323C3.57424 17.9085 3.48383 17.9621 3.38385 17.986C3.28388 18.0099 3.17901 18.0031 3.08301 17.9663C2.98701 17.9296 2.90436 17.8646 2.84591 17.7801C2.78746 17.6955 2.75594 17.5953 2.75549 17.4925V14.7458H1.30377C0.958106 14.7454 0.626713 14.6079 0.382293 14.3635C0.137873 14.119 0.000387731 13.7877 0 13.442L0 1.30377C0.000387731 0.958106 0.137873 0.626713 0.382293 0.382293C0.626713 0.137873 0.958106 0.000387731 1.30377 0L16.5051 0C16.8508 0.00077225 17.1821 0.138335 17.4267 0.382629C17.6712 0.626924 17.8092 0.95809 17.8103 1.30377V13.442C17.8092 13.7877 17.6712 14.1188 17.4267 14.3631C17.1821 14.6074 16.8508 14.745 16.5051 14.7458H7.01251Z"/>
+    </g>
+</svg>
diff --git a/packages/manager/src/components/DocsLink/DocsLink.tsx b/packages/manager/src/components/DocsLink/DocsLink.tsx
index d3f11c2c8b8..405a483f46c 100644
--- a/packages/manager/src/components/DocsLink/DocsLink.tsx
+++ b/packages/manager/src/components/DocsLink/DocsLink.tsx
@@ -17,6 +17,8 @@ export interface DocsLinkProps {
   label?: string;
   /** A callback function when the link is clicked */
   onClick?: () => void;
+  /*  */
+  icon?: JSX.Element;
 }
 
 /**
@@ -25,7 +27,7 @@ export interface DocsLinkProps {
  * - Consider displaying the title of a key guide or product document as the link instead of the generic “Docs”.
  */
 export const DocsLink = (props: DocsLinkProps) => {
-  const { analyticsLabel, href, label, onClick } = props;
+  const { analyticsLabel, href, label, onClick, icon } = props;
 
   return (
     <StyledDocsLink
@@ -39,7 +41,7 @@ export const DocsLink = (props: DocsLinkProps) => {
       className="docsButton"
       to={href}
     >
-      <DocsIcon />
+      {icon ?? <DocsIcon />}
       {label ?? 'Docs'}
     </StyledDocsLink>
   );
diff --git a/packages/manager/src/components/LandingHeader/LandingHeader.tsx b/packages/manager/src/components/LandingHeader/LandingHeader.tsx
index 09da70cb8ae..37dbf1aaa00 100644
--- a/packages/manager/src/components/LandingHeader/LandingHeader.tsx
+++ b/packages/manager/src/components/LandingHeader/LandingHeader.tsx
@@ -2,6 +2,7 @@ import Grid from '@mui/material/Unstable_Grid2';
 import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
+import BetaFeedbackIcon from 'src/assets/icons/icon-feedback.svg';
 import {
   Breadcrumb,
   BreadcrumbProps,
@@ -11,6 +12,7 @@ import { DocsLink } from 'src/components/DocsLink/DocsLink';
 
 export interface LandingHeaderProps {
   analyticsLabel?: string;
+  betaFeedbackLink?: string;
   breadcrumbDataAttrs?: { [key: string]: boolean };
   breadcrumbProps?: BreadcrumbProps;
   buttonDataAttrs?: { [key: string]: boolean | string };
@@ -35,6 +37,7 @@ export interface LandingHeaderProps {
  */
 export const LandingHeader = ({
   analyticsLabel,
+  betaFeedbackLink,
   breadcrumbDataAttrs,
   breadcrumbProps,
   buttonDataAttrs,
@@ -86,6 +89,19 @@ export const LandingHeader = ({
       {!shouldHideDocsAndCreateButtons && (
         <Grid>
           <Grid alignItems="center" container justifyContent="flex-end">
+            {betaFeedbackLink && (
+              <span
+                style={{
+                  marginRight: `${theme.spacing(2)}`,
+                }}
+              >
+                <DocsLink
+                  href={betaFeedbackLink}
+                  label="BETA Feedback"
+                  icon={<BetaFeedbackIcon />}
+                />
+              </span>
+            )}
             {docsLink ? (
               <DocsLink
                 analyticsLabel={docsAnalyticsLabel}
diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx
index 400d2b5dc22..0d7d8d94f3f 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx
@@ -15,6 +15,8 @@ import { useRegionsQuery } from 'src/queries/regions';
 import { useVPCQuery } from 'src/queries/vpcs';
 import { truncate } from 'src/utilities/truncate';
 
+import { VPC_FEEDBACK_FORM_URL } from 'src/features/VPCs/constants';
+
 import { VPCDeleteDialog } from '../VPCLanding/VPCDeleteDialog';
 import { VPCEditDrawer } from '../VPCLanding/VPCEditDrawer';
 import { REBOOT_LINODE_WARNING_VPCDETAILS } from '../constants';
@@ -97,6 +99,7 @@ const VPCDetail = () => {
     <>
       <DocumentTitleSegment segment={vpc.label} />
       <LandingHeader
+        betaFeedbackLink={VPC_FEEDBACK_FORM_URL}
         breadcrumbProps={{
           crumbOverrides: [
             {
diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
index 480a60a2a89..8953649cc56 100644
--- a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
+++ b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
@@ -19,6 +19,8 @@ import { usePagination } from 'src/hooks/usePagination';
 import { useVPCsQuery } from 'src/queries/vpcs';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
+import { VPC_FEEDBACK_FORM_URL } from 'src/features/VPCs/constants';
+
 import { VPCDeleteDialog } from './VPCDeleteDialog';
 import { VPCEditDrawer } from './VPCEditDrawer';
 import { VPCEmptyState } from './VPCEmptyState';
@@ -96,6 +98,7 @@ const VPCLanding = () => {
         docsLink="#" // @TODO VPC: Add docs link
         onButtonClick={createVPC}
         title={VPC_LABEL}
+        betaFeedbackLink={VPC_FEEDBACK_FORM_URL}
       />
       <Table>
         <TableHead>
diff --git a/packages/manager/src/features/VPCs/constants.ts b/packages/manager/src/features/VPCs/constants.ts
index a894e253f46..0bbc03f0cc4 100644
--- a/packages/manager/src/features/VPCs/constants.ts
+++ b/packages/manager/src/features/VPCs/constants.ts
@@ -24,3 +24,6 @@ export const VPC_CREATE_FORM_SUBNET_HELPER_TEXT = `A subnet divides a VPC into m
 
 export const VPC_CREATE_FORM_VPC_HELPER_TEXT =
   'A virtual private cloud (VPC) is an isolated network which allows for control over how resources are networked and can communicate.';
+
+export const VPC_FEEDBACK_FORM_URL =
+  'https://docs.google.com/forms/d/e/1FAIpQLScvWbTupCNsBF5cz5YEsv5oErHM4ONBZodDYi8KuOgC8fyfag/viewform';

From 821b2efd23ea128846386ad34e47921f77390376 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Wed, 8 Nov 2023 16:55:22 -0500
Subject: [PATCH 40/43] Cloud version 1.107.0, API v4 version 0.105.0, and
 Validation version 0.35.0

---
 ...pr-9853-upcoming-features-1698871909714.md |  5 --
 ...pr-9860-upcoming-features-1698852464578.md |  5 --
 ...pr-9878-upcoming-features-1699304438796.md |  5 --
 packages/api-v4/CHANGELOG.md                  |  9 +++
 packages/api-v4/package.json                  |  2 +-
 ...pr-9820-upcoming-features-1698170376454.md |  5 --
 ...pr-9825-upcoming-features-1698093221284.md |  5 --
 ...pr-9827-upcoming-features-1698091273479.md |  5 --
 ...pr-9832-upcoming-features-1698162070035.md |  5 --
 .../.changeset/pr-9833-tests-1698335199212.md |  5 --
 .../pr-9834-changed-1698111109868.md          |  5 --
 .../.changeset/pr-9836-fixed-1698158641264.md |  5 --
 ...pr-9839-upcoming-features-1698180186838.md |  5 --
 .../pr-9840-tech-stories-1698181491257.md     |  5 --
 .../pr-9841-tech-stories-1698261567678.md     |  5 --
 .../.changeset/pr-9843-fixed-1698352407030.md |  5 --
 .../pr-9844-tech-stories-1698347210181.md     |  5 --
 ...pr-9845-upcoming-features-1698349552302.md |  5 --
 .../.changeset/pr-9846-added-1699023355495.md |  5 --
 ...pr-9847-upcoming-features-1698425054230.md |  5 --
 ...pr-9848-upcoming-features-1698675578462.md |  5 --
 ...pr-9851-upcoming-features-1698695391804.md |  5 --
 ...pr-9853-upcoming-features-1698705643963.md |  5 --
 .../.changeset/pr-9854-fixed-1698764756434.md |  5 --
 .../pr-9855-changed-1698780397426.md          |  5 --
 ...pr-9856-upcoming-features-1698773808066.md |  5 --
 ...pr-9857-upcoming-features-1698788535458.md |  5 --
 ...pr-9859-upcoming-features-1698850082776.md |  5 --
 ...pr-9860-upcoming-features-1698852576816.md |  5 --
 .../.changeset/pr-9861-fixed-1698947793164.md |  5 --
 .../.changeset/pr-9862-fixed-1698853596745.md |  5 --
 .../pr-9863-tech-stories-1698862384325.md     |  5 --
 .../pr-9864-tech-stories-1698867933388.md     |  5 --
 ...pr-9865-upcoming-features-1698871946268.md |  5 --
 ...pr-9866-upcoming-features-1698872557988.md |  5 --
 .../.changeset/pr-9867-tests-1698944917115.md |  5 --
 .../pr-9868-changed-1699046588424.md          |  5 --
 ...pr-9872-upcoming-features-1699039576510.md |  5 --
 .../.changeset/pr-9874-tests-1699284798043.md |  5 --
 ...pr-9878-upcoming-features-1699304466665.md |  5 --
 ...pr-9879-upcoming-features-1699306308229.md |  5 --
 .../.changeset/pr-9880-tests-1699311124062.md |  5 --
 ...pr-9880-upcoming-features-1699311064702.md |  5 --
 packages/manager/CHANGELOG.md                 | 59 +++++++++++++++++++
 packages/manager/package.json                 |  2 +-
 ...pr-9848-upcoming-features-1698944870213.md |  5 --
 ...pr-9853-upcoming-features-1698871976111.md |  5 --
 ...pr-9880-upcoming-features-1699311177462.md |  5 --
 packages/validation/CHANGELOG.md              |  9 +++
 packages/validation/package.json              |  2 +-
 50 files changed, 80 insertions(+), 223 deletions(-)
 delete mode 100644 packages/api-v4/.changeset/pr-9853-upcoming-features-1698871909714.md
 delete mode 100644 packages/api-v4/.changeset/pr-9860-upcoming-features-1698852464578.md
 delete mode 100644 packages/api-v4/.changeset/pr-9878-upcoming-features-1699304438796.md
 delete mode 100644 packages/manager/.changeset/pr-9820-upcoming-features-1698170376454.md
 delete mode 100644 packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md
 delete mode 100644 packages/manager/.changeset/pr-9827-upcoming-features-1698091273479.md
 delete mode 100644 packages/manager/.changeset/pr-9832-upcoming-features-1698162070035.md
 delete mode 100644 packages/manager/.changeset/pr-9833-tests-1698335199212.md
 delete mode 100644 packages/manager/.changeset/pr-9834-changed-1698111109868.md
 delete mode 100644 packages/manager/.changeset/pr-9836-fixed-1698158641264.md
 delete mode 100644 packages/manager/.changeset/pr-9839-upcoming-features-1698180186838.md
 delete mode 100644 packages/manager/.changeset/pr-9840-tech-stories-1698181491257.md
 delete mode 100644 packages/manager/.changeset/pr-9841-tech-stories-1698261567678.md
 delete mode 100644 packages/manager/.changeset/pr-9843-fixed-1698352407030.md
 delete mode 100644 packages/manager/.changeset/pr-9844-tech-stories-1698347210181.md
 delete mode 100644 packages/manager/.changeset/pr-9845-upcoming-features-1698349552302.md
 delete mode 100644 packages/manager/.changeset/pr-9846-added-1699023355495.md
 delete mode 100644 packages/manager/.changeset/pr-9847-upcoming-features-1698425054230.md
 delete mode 100644 packages/manager/.changeset/pr-9848-upcoming-features-1698675578462.md
 delete mode 100644 packages/manager/.changeset/pr-9851-upcoming-features-1698695391804.md
 delete mode 100644 packages/manager/.changeset/pr-9853-upcoming-features-1698705643963.md
 delete mode 100644 packages/manager/.changeset/pr-9854-fixed-1698764756434.md
 delete mode 100644 packages/manager/.changeset/pr-9855-changed-1698780397426.md
 delete mode 100644 packages/manager/.changeset/pr-9856-upcoming-features-1698773808066.md
 delete mode 100644 packages/manager/.changeset/pr-9857-upcoming-features-1698788535458.md
 delete mode 100644 packages/manager/.changeset/pr-9859-upcoming-features-1698850082776.md
 delete mode 100644 packages/manager/.changeset/pr-9860-upcoming-features-1698852576816.md
 delete mode 100644 packages/manager/.changeset/pr-9861-fixed-1698947793164.md
 delete mode 100644 packages/manager/.changeset/pr-9862-fixed-1698853596745.md
 delete mode 100644 packages/manager/.changeset/pr-9863-tech-stories-1698862384325.md
 delete mode 100644 packages/manager/.changeset/pr-9864-tech-stories-1698867933388.md
 delete mode 100644 packages/manager/.changeset/pr-9865-upcoming-features-1698871946268.md
 delete mode 100644 packages/manager/.changeset/pr-9866-upcoming-features-1698872557988.md
 delete mode 100644 packages/manager/.changeset/pr-9867-tests-1698944917115.md
 delete mode 100644 packages/manager/.changeset/pr-9868-changed-1699046588424.md
 delete mode 100644 packages/manager/.changeset/pr-9872-upcoming-features-1699039576510.md
 delete mode 100644 packages/manager/.changeset/pr-9874-tests-1699284798043.md
 delete mode 100644 packages/manager/.changeset/pr-9878-upcoming-features-1699304466665.md
 delete mode 100644 packages/manager/.changeset/pr-9879-upcoming-features-1699306308229.md
 delete mode 100644 packages/manager/.changeset/pr-9880-tests-1699311124062.md
 delete mode 100644 packages/manager/.changeset/pr-9880-upcoming-features-1699311064702.md
 delete mode 100644 packages/validation/.changeset/pr-9848-upcoming-features-1698944870213.md
 delete mode 100644 packages/validation/.changeset/pr-9853-upcoming-features-1698871976111.md
 delete mode 100644 packages/validation/.changeset/pr-9880-upcoming-features-1699311177462.md

diff --git a/packages/api-v4/.changeset/pr-9853-upcoming-features-1698871909714.md b/packages/api-v4/.changeset/pr-9853-upcoming-features-1698871909714.md
deleted file mode 100644
index 41eec7f5620..00000000000
--- a/packages/api-v4/.changeset/pr-9853-upcoming-features-1698871909714.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/api-v4": Upcoming Features
----
-
-Add `UpdateConfigurationPayload` ([#9853](https://github.com/linode/manager/pull/9853))
diff --git a/packages/api-v4/.changeset/pr-9860-upcoming-features-1698852464578.md b/packages/api-v4/.changeset/pr-9860-upcoming-features-1698852464578.md
deleted file mode 100644
index 4d571d8014c..00000000000
--- a/packages/api-v4/.changeset/pr-9860-upcoming-features-1698852464578.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/api-v4": Upcoming Features
----
-
-Add `getAccountAvailabilities` and `getAccountAvailability` methods for DC Get Well initiative ([#9860](https://github.com/linode/manager/pull/9860))
diff --git a/packages/api-v4/.changeset/pr-9878-upcoming-features-1699304438796.md b/packages/api-v4/.changeset/pr-9878-upcoming-features-1699304438796.md
deleted file mode 100644
index ac808708a05..00000000000
--- a/packages/api-v4/.changeset/pr-9878-upcoming-features-1699304438796.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/api-v4": Upcoming Features
----
-
-Add `getRegionAvailabilities` and `getRegionAvailability` endpoints and related types for Sold Out Plans initiative ([#9878](https://github.com/linode/manager/pull/9878))
diff --git a/packages/api-v4/CHANGELOG.md b/packages/api-v4/CHANGELOG.md
index c9711ef28bb..03da879534f 100644
--- a/packages/api-v4/CHANGELOG.md
+++ b/packages/api-v4/CHANGELOG.md
@@ -1,3 +1,12 @@
+## [2023-11-13] - v0.105.0
+
+
+### Upcoming Features:
+
+- Add `UpdateConfigurationPayload` ([#9853](https://github.com/linode/manager/pull/9853))
+- Add `getAccountAvailabilities` and `getAccountAvailability` methods for DC Get Well initiative ([#9860](https://github.com/linode/manager/pull/9860))
+- Add `getRegionAvailabilities` and `getRegionAvailability` endpoints and related types for Sold Out Plans initiative ([#9878](https://github.com/linode/manager/pull/9878))
+
 ## [2023-10-30] - v0.104.0
 
 ### Upcoming Features:
diff --git a/packages/api-v4/package.json b/packages/api-v4/package.json
index 20411c535ef..40b7618db27 100644
--- a/packages/api-v4/package.json
+++ b/packages/api-v4/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@linode/api-v4",
-  "version": "0.104.0",
+  "version": "0.105.0",
   "homepage": "https://github.com/linode/manager/tree/develop/packages/api-v4",
   "bugs": {
     "url": "https://github.com/linode/manager/issues"
diff --git a/packages/manager/.changeset/pr-9820-upcoming-features-1698170376454.md b/packages/manager/.changeset/pr-9820-upcoming-features-1698170376454.md
deleted file mode 100644
index 11c50366776..00000000000
--- a/packages/manager/.changeset/pr-9820-upcoming-features-1698170376454.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Fix Unassign multiple Linodes from Subnet ([#9820](https://github.com/linode/manager/pull/9820))
diff --git a/packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md b/packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md
deleted file mode 100644
index b11a0b1b6bf..00000000000
--- a/packages/manager/.changeset/pr-9825-upcoming-features-1698093221284.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Add AGLB create page with Actions buttons ([#9825](https://github.com/linode/manager/pull/9825))
diff --git a/packages/manager/.changeset/pr-9827-upcoming-features-1698091273479.md b/packages/manager/.changeset/pr-9827-upcoming-features-1698091273479.md
deleted file mode 100644
index 7b5861003ea..00000000000
--- a/packages/manager/.changeset/pr-9827-upcoming-features-1698091273479.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Update `RemovableSelectionsList` default maximum height to cut off last list item and indicate scrolling ([#9827](https://github.com/linode/manager/pull/9827))
diff --git a/packages/manager/.changeset/pr-9832-upcoming-features-1698162070035.md b/packages/manager/.changeset/pr-9832-upcoming-features-1698162070035.md
deleted file mode 100644
index 204313ac97b..00000000000
--- a/packages/manager/.changeset/pr-9832-upcoming-features-1698162070035.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-VPC UX feedback ([#9832](https://github.com/linode/manager/pull/9832))
diff --git a/packages/manager/.changeset/pr-9833-tests-1698335199212.md b/packages/manager/.changeset/pr-9833-tests-1698335199212.md
deleted file mode 100644
index 9049e95d0e2..00000000000
--- a/packages/manager/.changeset/pr-9833-tests-1698335199212.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tests
----
-
-Add DBaaS test coverage for disk metrics ([#9833](https://github.com/linode/manager/pull/9833))
diff --git a/packages/manager/.changeset/pr-9834-changed-1698111109868.md b/packages/manager/.changeset/pr-9834-changed-1698111109868.md
deleted file mode 100644
index b9ea3861022..00000000000
--- a/packages/manager/.changeset/pr-9834-changed-1698111109868.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Changed
----
-
-Logic governing inclusion of public interfaces in Linode Create payload ([#9834](https://github.com/linode/manager/pull/9834))
diff --git a/packages/manager/.changeset/pr-9836-fixed-1698158641264.md b/packages/manager/.changeset/pr-9836-fixed-1698158641264.md
deleted file mode 100644
index bccebf54927..00000000000
--- a/packages/manager/.changeset/pr-9836-fixed-1698158641264.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Linodes Landing flickering ([#9836](https://github.com/linode/manager/pull/9836))
diff --git a/packages/manager/.changeset/pr-9839-upcoming-features-1698180186838.md b/packages/manager/.changeset/pr-9839-upcoming-features-1698180186838.md
deleted file mode 100644
index 464cd8a5880..00000000000
--- a/packages/manager/.changeset/pr-9839-upcoming-features-1698180186838.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Remove temporary code for surfacing VPC interface errors and fix formatting of error in Linode Config dialog ([#9839](https://github.com/linode/manager/pull/9839))
diff --git a/packages/manager/.changeset/pr-9840-tech-stories-1698181491257.md b/packages/manager/.changeset/pr-9840-tech-stories-1698181491257.md
deleted file mode 100644
index 22d0fcf56e9..00000000000
--- a/packages/manager/.changeset/pr-9840-tech-stories-1698181491257.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tech Stories
----
-
-Tag Component v7 Story ([#9840](https://github.com/linode/manager/pull/9840))
diff --git a/packages/manager/.changeset/pr-9841-tech-stories-1698261567678.md b/packages/manager/.changeset/pr-9841-tech-stories-1698261567678.md
deleted file mode 100644
index 9c822a88838..00000000000
--- a/packages/manager/.changeset/pr-9841-tech-stories-1698261567678.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tech Stories
----
-
-MUI Migration - SRC > Components > Crumbs ([#9841](https://github.com/linode/manager/pull/9841))
diff --git a/packages/manager/.changeset/pr-9843-fixed-1698352407030.md b/packages/manager/.changeset/pr-9843-fixed-1698352407030.md
deleted file mode 100644
index 24997be5f6c..00000000000
--- a/packages/manager/.changeset/pr-9843-fixed-1698352407030.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Faux-bold font rendering ([#9843](https://github.com/linode/manager/pull/9843))
diff --git a/packages/manager/.changeset/pr-9844-tech-stories-1698347210181.md b/packages/manager/.changeset/pr-9844-tech-stories-1698347210181.md
deleted file mode 100644
index 71b77317950..00000000000
--- a/packages/manager/.changeset/pr-9844-tech-stories-1698347210181.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tech Stories
----
-
-Clean up app entrypoint render logic ([#9844](https://github.com/linode/manager/pull/9844))
diff --git a/packages/manager/.changeset/pr-9845-upcoming-features-1698349552302.md b/packages/manager/.changeset/pr-9845-upcoming-features-1698349552302.md
deleted file mode 100644
index 51dc3cf071f..00000000000
--- a/packages/manager/.changeset/pr-9845-upcoming-features-1698349552302.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Refine payload in subnet "Assign Linodes" drawer ([#9845](https://github.com/linode/manager/pull/9845))
diff --git a/packages/manager/.changeset/pr-9846-added-1699023355495.md b/packages/manager/.changeset/pr-9846-added-1699023355495.md
deleted file mode 100644
index ff4d9565c33..00000000000
--- a/packages/manager/.changeset/pr-9846-added-1699023355495.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Added
----
-
-Add integration tests for AGLB certificate delete flow ([#9846](https://github.com/linode/manager/pull/9846))
diff --git a/packages/manager/.changeset/pr-9847-upcoming-features-1698425054230.md b/packages/manager/.changeset/pr-9847-upcoming-features-1698425054230.md
deleted file mode 100644
index 25b63ab20a1..00000000000
--- a/packages/manager/.changeset/pr-9847-upcoming-features-1698425054230.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Add Create VPC drawer to Linode Create flow and update Create Firewall button width ([#9847](https://github.com/linode/manager/pull/9847))
diff --git a/packages/manager/.changeset/pr-9848-upcoming-features-1698675578462.md b/packages/manager/.changeset/pr-9848-upcoming-features-1698675578462.md
deleted file mode 100644
index 027f79ae372..00000000000
--- a/packages/manager/.changeset/pr-9848-upcoming-features-1698675578462.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Create Load Balancer flow - manage state ([#9848](https://github.com/linode/manager/pull/9848))
diff --git a/packages/manager/.changeset/pr-9851-upcoming-features-1698695391804.md b/packages/manager/.changeset/pr-9851-upcoming-features-1698695391804.md
deleted file mode 100644
index 32078ac44d1..00000000000
--- a/packages/manager/.changeset/pr-9851-upcoming-features-1698695391804.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Only unassign linodes in the 'Linodes to be Unassigned from Subnet' list for Subnet Unassign Drawer ([#9851](https://github.com/linode/manager/pull/9851))
diff --git a/packages/manager/.changeset/pr-9853-upcoming-features-1698705643963.md b/packages/manager/.changeset/pr-9853-upcoming-features-1698705643963.md
deleted file mode 100644
index 5d32aeb6ef1..00000000000
--- a/packages/manager/.changeset/pr-9853-upcoming-features-1698705643963.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-AGLB Configurations Add Route Drawer and other refinements ([#9853](https://github.com/linode/manager/pull/9853))
diff --git a/packages/manager/.changeset/pr-9854-fixed-1698764756434.md b/packages/manager/.changeset/pr-9854-fixed-1698764756434.md
deleted file mode 100644
index 42b01f39a30..00000000000
--- a/packages/manager/.changeset/pr-9854-fixed-1698764756434.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Incorrect docs links for Main Concept and Simplex Marketplace apps ([#9854](https://github.com/linode/manager/pull/9854))
diff --git a/packages/manager/.changeset/pr-9855-changed-1698780397426.md b/packages/manager/.changeset/pr-9855-changed-1698780397426.md
deleted file mode 100644
index 9d8af5769aa..00000000000
--- a/packages/manager/.changeset/pr-9855-changed-1698780397426.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Changed
----
-
-Improve layout of breadcrumb for support tickets ([#9855](https://github.com/linode/manager/pull/9855))
diff --git a/packages/manager/.changeset/pr-9856-upcoming-features-1698773808066.md b/packages/manager/.changeset/pr-9856-upcoming-features-1698773808066.md
deleted file mode 100644
index fac379a8c39..00000000000
--- a/packages/manager/.changeset/pr-9856-upcoming-features-1698773808066.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Add basic AGLB create page and feature flag ([#9856](https://github.com/linode/manager/pull/9856))
diff --git a/packages/manager/.changeset/pr-9857-upcoming-features-1698788535458.md b/packages/manager/.changeset/pr-9857-upcoming-features-1698788535458.md
deleted file mode 100644
index 8b861b7c0fb..00000000000
--- a/packages/manager/.changeset/pr-9857-upcoming-features-1698788535458.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Clear subnet errors in Linode Create flow and VPC label errors in VPC Edit flow upon input change ([#9857](https://github.com/linode/manager/pull/9857))
diff --git a/packages/manager/.changeset/pr-9859-upcoming-features-1698850082776.md b/packages/manager/.changeset/pr-9859-upcoming-features-1698850082776.md
deleted file mode 100644
index 9da6ffb831d..00000000000
--- a/packages/manager/.changeset/pr-9859-upcoming-features-1698850082776.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Add `dcGetWell` feature flag ([#9859](https://github.com/linode/manager/pull/9859))
diff --git a/packages/manager/.changeset/pr-9860-upcoming-features-1698852576816.md b/packages/manager/.changeset/pr-9860-upcoming-features-1698852576816.md
deleted file mode 100644
index f8f9ca47aab..00000000000
--- a/packages/manager/.changeset/pr-9860-upcoming-features-1698852576816.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Add RQ queries and mock data for DC Get Well ([#9860](https://github.com/linode/manager/pull/9860))
diff --git a/packages/manager/.changeset/pr-9861-fixed-1698947793164.md b/packages/manager/.changeset/pr-9861-fixed-1698947793164.md
deleted file mode 100644
index f7d92d68452..00000000000
--- a/packages/manager/.changeset/pr-9861-fixed-1698947793164.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Remove region sorting on DBaaS landing page ([#9861](https://github.com/linode/manager/pull/9861))
diff --git a/packages/manager/.changeset/pr-9862-fixed-1698853596745.md b/packages/manager/.changeset/pr-9862-fixed-1698853596745.md
deleted file mode 100644
index 77a4a2fe65d..00000000000
--- a/packages/manager/.changeset/pr-9862-fixed-1698853596745.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Select backup grid layout ([#9862](https://github.com/linode/manager/pull/9862))
diff --git a/packages/manager/.changeset/pr-9863-tech-stories-1698862384325.md b/packages/manager/.changeset/pr-9863-tech-stories-1698862384325.md
deleted file mode 100644
index 36c35e58910..00000000000
--- a/packages/manager/.changeset/pr-9863-tech-stories-1698862384325.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tech Stories
----
-
-Fix Safari Launch Darkly MSW Errors ([#9863](https://github.com/linode/manager/pull/9863))
diff --git a/packages/manager/.changeset/pr-9864-tech-stories-1698867933388.md b/packages/manager/.changeset/pr-9864-tech-stories-1698867933388.md
deleted file mode 100644
index 82e9f350687..00000000000
--- a/packages/manager/.changeset/pr-9864-tech-stories-1698867933388.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tech Stories
----
-
-BetaChip V7 story migration ([#9864](https://github.com/linode/manager/pull/9864))
diff --git a/packages/manager/.changeset/pr-9865-upcoming-features-1698871946268.md b/packages/manager/.changeset/pr-9865-upcoming-features-1698871946268.md
deleted file mode 100644
index 3b7021c54cb..00000000000
--- a/packages/manager/.changeset/pr-9865-upcoming-features-1698871946268.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Fix IPv4 checkboxes for VPC interfaces in Linode Config dialog ([#9865](https://github.com/linode/manager/pull/9865))
diff --git a/packages/manager/.changeset/pr-9866-upcoming-features-1698872557988.md b/packages/manager/.changeset/pr-9866-upcoming-features-1698872557988.md
deleted file mode 100644
index de429e189b3..00000000000
--- a/packages/manager/.changeset/pr-9866-upcoming-features-1698872557988.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Fix incorrectly displayed error text in Linode Edit/Add config flow and prevent subnet section from incorrectly clearing in Linode Edit/Add Config and Linode Create flow ([#9866](https://github.com/linode/manager/pull/9866))
diff --git a/packages/manager/.changeset/pr-9867-tests-1698944917115.md b/packages/manager/.changeset/pr-9867-tests-1698944917115.md
deleted file mode 100644
index 89ad48a6f42..00000000000
--- a/packages/manager/.changeset/pr-9867-tests-1698944917115.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tests
----
-
-Improve Cypress rescue and rebuild test stability ([#9867](https://github.com/linode/manager/pull/9867))
diff --git a/packages/manager/.changeset/pr-9868-changed-1699046588424.md b/packages/manager/.changeset/pr-9868-changed-1699046588424.md
deleted file mode 100644
index 603ef66d6b0..00000000000
--- a/packages/manager/.changeset/pr-9868-changed-1699046588424.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Changed
----
-
-Display 'Network Interfaces'/'Networking' section in Linode Config dialog unconditionally and conditionally display 'unavailable in region' helper text for VPC and VLAN interfaces ([#9868](https://github.com/linode/manager/pull/9868))
diff --git a/packages/manager/.changeset/pr-9872-upcoming-features-1699039576510.md b/packages/manager/.changeset/pr-9872-upcoming-features-1699039576510.md
deleted file mode 100644
index 6c455e8fe15..00000000000
--- a/packages/manager/.changeset/pr-9872-upcoming-features-1699039576510.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Linode Details: VPC Subnets Not Associated with VPC IP Address Are Displayed ([#9872](https://github.com/linode/manager/pull/9872))
diff --git a/packages/manager/.changeset/pr-9874-tests-1699284798043.md b/packages/manager/.changeset/pr-9874-tests-1699284798043.md
deleted file mode 100644
index d2022c34601..00000000000
--- a/packages/manager/.changeset/pr-9874-tests-1699284798043.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tests
----
-
-Upgrade Cypress to v13.x ([#9874](https://github.com/linode/manager/pull/9874))
diff --git a/packages/manager/.changeset/pr-9878-upcoming-features-1699304466665.md b/packages/manager/.changeset/pr-9878-upcoming-features-1699304466665.md
deleted file mode 100644
index b42930f8f0d..00000000000
--- a/packages/manager/.changeset/pr-9878-upcoming-features-1699304466665.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Add RQ queries and mock data for Sold Out Plans ([#9878](https://github.com/linode/manager/pull/9878))
diff --git a/packages/manager/.changeset/pr-9879-upcoming-features-1699306308229.md b/packages/manager/.changeset/pr-9879-upcoming-features-1699306308229.md
deleted file mode 100644
index e043f81d349..00000000000
--- a/packages/manager/.changeset/pr-9879-upcoming-features-1699306308229.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Add VPC BETA Feedback link to VPC landing and detail pages ([#9879](https://github.com/linode/manager/pull/9879))
diff --git a/packages/manager/.changeset/pr-9880-tests-1699311124062.md b/packages/manager/.changeset/pr-9880-tests-1699311124062.md
deleted file mode 100644
index db416179f58..00000000000
--- a/packages/manager/.changeset/pr-9880-tests-1699311124062.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tests
----
-
-Add integration tests for AGLB Edit Certificate flow ([#9880](https://github.com/linode/manager/pull/9880))
diff --git a/packages/manager/.changeset/pr-9880-upcoming-features-1699311064702.md b/packages/manager/.changeset/pr-9880-upcoming-features-1699311064702.md
deleted file mode 100644
index c2f285eb304..00000000000
--- a/packages/manager/.changeset/pr-9880-upcoming-features-1699311064702.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Add missing label field validation in AGLB Edit Certificate drawer ([#9880](https://github.com/linode/manager/pull/9880))
diff --git a/packages/manager/CHANGELOG.md b/packages/manager/CHANGELOG.md
index d0af3479fe5..9fea3a88509 100644
--- a/packages/manager/CHANGELOG.md
+++ b/packages/manager/CHANGELOG.md
@@ -4,6 +4,65 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2023-11-13] - v1.107.0
+
+
+### Added:
+
+- Add integration tests for AGLB certificate delete flow ([#9846](https://github.com/linode/manager/pull/9846))
+
+### Changed:
+
+- Logic governing inclusion of public interfaces in Linode Create payload ([#9834](https://github.com/linode/manager/pull/9834))
+- Improve layout of breadcrumb for support tickets ([#9855](https://github.com/linode/manager/pull/9855))
+- Display 'Network Interfaces'/'Networking' section in Linode Config dialog unconditionally and conditionally display 'unavailable in region' helper text for VPC and VLAN interfaces ([#9868](https://github.com/linode/manager/pull/9868))
+
+### Fixed:
+
+- Linodes Landing flickering ([#9836](https://github.com/linode/manager/pull/9836))
+- Faux-bold font rendering ([#9843](https://github.com/linode/manager/pull/9843))
+- Incorrect docs links for Main Concept and Simplex Marketplace apps ([#9854](https://github.com/linode/manager/pull/9854))
+- Remove region sorting on DBaaS landing page ([#9861](https://github.com/linode/manager/pull/9861))
+- Select backup grid layout ([#9862](https://github.com/linode/manager/pull/9862))
+
+### Tech Stories:
+
+- Tag Component v7 Story ([#9840](https://github.com/linode/manager/pull/9840))
+- MUI Migration - SRC > Components > Crumbs ([#9841](https://github.com/linode/manager/pull/9841))
+- Clean up app entrypoint render logic ([#9844](https://github.com/linode/manager/pull/9844))
+- Fix Safari Launch Darkly MSW Errors ([#9863](https://github.com/linode/manager/pull/9863))
+- BetaChip V7 story migration ([#9864](https://github.com/linode/manager/pull/9864))
+
+### Tests:
+
+- Add DBaaS test coverage for disk metrics ([#9833](https://github.com/linode/manager/pull/9833))
+- Improve Cypress rescue and rebuild test stability ([#9867](https://github.com/linode/manager/pull/9867))
+- Upgrade Cypress to v13.x ([#9874](https://github.com/linode/manager/pull/9874))
+- Add integration tests for AGLB Edit Certificate flow ([#9880](https://github.com/linode/manager/pull/9880))
+
+### Upcoming Features:
+
+- Fix Unassign multiple Linodes from Subnet ([#9820](https://github.com/linode/manager/pull/9820))
+- Add AGLB create page with Actions buttons ([#9825](https://github.com/linode/manager/pull/9825))
+- Update `RemovableSelectionsList` default maximum height to cut off last list item and indicate scrolling ([#9827](https://github.com/linode/manager/pull/9827))
+- VPC UX feedback ([#9832](https://github.com/linode/manager/pull/9832))
+- Remove temporary code for surfacing VPC interface errors and fix formatting of error in Linode Config dialog ([#9839](https://github.com/linode/manager/pull/9839))
+- Refine payload in subnet "Assign Linodes" drawer ([#9845](https://github.com/linode/manager/pull/9845))
+- Add Create VPC drawer to Linode Create flow and update Create Firewall button width ([#9847](https://github.com/linode/manager/pull/9847))
+- Create Load Balancer flow - manage state ([#9848](https://github.com/linode/manager/pull/9848))
+- Only unassign linodes in the 'Linodes to be Unassigned from Subnet' list for Subnet Unassign Drawer ([#9851](https://github.com/linode/manager/pull/9851))
+- AGLB Configurations Add Route Drawer and other refinements ([#9853](https://github.com/linode/manager/pull/9853))
+- Add basic AGLB create page and feature flag ([#9856](https://github.com/linode/manager/pull/9856))
+- Clear subnet errors in Linode Create flow and VPC label errors in VPC Edit flow upon input change ([#9857](https://github.com/linode/manager/pull/9857))
+- Add `dcGetWell` feature flag ([#9859](https://github.com/linode/manager/pull/9859))
+- Add RQ queries and mock data for DC Get Well ([#9860](https://github.com/linode/manager/pull/9860))
+- Fix IPv4 checkboxes for VPC interfaces in Linode Config dialog ([#9865](https://github.com/linode/manager/pull/9865))
+- Fix incorrectly displayed error text in Linode Edit/Add config flow and prevent subnet section from incorrectly clearing in Linode Edit/Add Config and Linode Create flow ([#9866](https://github.com/linode/manager/pull/9866))
+- Linode Details: VPC Subnets Not Associated with VPC IP Address Are Displayed ([#9872](https://github.com/linode/manager/pull/9872))
+- Add RQ queries and mock data for Sold Out Plans ([#9878](https://github.com/linode/manager/pull/9878))
+- Add VPC BETA Feedback link to VPC landing and detail pages ([#9879](https://github.com/linode/manager/pull/9879))
+- Add missing label field validation in AGLB Edit Certificate drawer ([#9880](https://github.com/linode/manager/pull/9880))
+
 ## [2023-10-30] - v1.106.0
 
 ### Added:
diff --git a/packages/manager/package.json b/packages/manager/package.json
index 155b20f3ae2..001a6b6019d 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -2,7 +2,7 @@
   "name": "linode-manager",
   "author": "Linode",
   "description": "The Linode Manager website",
-  "version": "1.106.0",
+  "version": "1.107.0",
   "private": true,
   "bugs": {
     "url": "https://github.com/Linode/manager/issues"
diff --git a/packages/validation/.changeset/pr-9848-upcoming-features-1698944870213.md b/packages/validation/.changeset/pr-9848-upcoming-features-1698944870213.md
deleted file mode 100644
index a9d70004239..00000000000
--- a/packages/validation/.changeset/pr-9848-upcoming-features-1698944870213.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/validation": Upcoming Features
----
-
-Create Load Balancer flow - manage state ([#9848](https://github.com/linode/manager/pull/9848))
diff --git a/packages/validation/.changeset/pr-9853-upcoming-features-1698871976111.md b/packages/validation/.changeset/pr-9853-upcoming-features-1698871976111.md
deleted file mode 100644
index fd32affac19..00000000000
--- a/packages/validation/.changeset/pr-9853-upcoming-features-1698871976111.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/validation": Upcoming Features
----
-
-Add `UpdateConfigurationSchema` for AGLB ([#9853](https://github.com/linode/manager/pull/9853))
diff --git a/packages/validation/.changeset/pr-9880-upcoming-features-1699311177462.md b/packages/validation/.changeset/pr-9880-upcoming-features-1699311177462.md
deleted file mode 100644
index 6a56959dc6c..00000000000
--- a/packages/validation/.changeset/pr-9880-upcoming-features-1699311177462.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/validation": Upcoming Features
----
-
-Add missing label validation to `UpdateCertificateSchema` ([#9880](https://github.com/linode/manager/pull/9880))
diff --git a/packages/validation/CHANGELOG.md b/packages/validation/CHANGELOG.md
index 4f8d503c94f..88722244a79 100644
--- a/packages/validation/CHANGELOG.md
+++ b/packages/validation/CHANGELOG.md
@@ -1,3 +1,12 @@
+## [2023-11-13] - v0.35.0
+
+
+### Upcoming Features:
+
+- Create Load Balancer flow - manage state ([#9848](https://github.com/linode/manager/pull/9848))
+- Add `UpdateConfigurationSchema` for AGLB ([#9853](https://github.com/linode/manager/pull/9853))
+- Add missing label validation to `UpdateCertificateSchema` ([#9880](https://github.com/linode/manager/pull/9880))
+
 ## [2023-10-30] - v0.34.0
 
 ### Changed:
diff --git a/packages/validation/package.json b/packages/validation/package.json
index d736dadd1ef..f159d0516a3 100644
--- a/packages/validation/package.json
+++ b/packages/validation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@linode/validation",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "Yup validation schemas for use with the Linode APIv4",
   "type": "module",
   "main": "lib/index.cjs",

From bbd58e2d2161a9ed450fe6c4fd9c9c29ecd53a6c Mon Sep 17 00:00:00 2001
From: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
Date: Mon, 13 Nov 2023 12:17:54 -0500
Subject: [PATCH 41/43] fix: Restore nattedIPv4Address prop passed from
 LinodeConfigDialog --> InterfaceSelect (#9896)

---
 .../LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx       | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
index 8682446a82f..066dcaddff8 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
@@ -1005,15 +1005,16 @@ export const LinodeConfigDialog = (props: Props) => {
                     ipamAddress={thisInterface.ipam_address}
                     key={`eth${idx}-interface`}
                     label={thisInterface.label}
+                    nattedIPv4Address={thisInterface.ipv4?.nat_1_1}
                     purpose={thisInterface.purpose}
                     readOnly={isReadOnly}
                     region={linode?.region}
+                    regionHasVLANs={regionHasVLANS}
+                    regionHasVPCs={regionHasVPCs}
                     slotNumber={idx}
                     subnetId={thisInterface.subnet_id}
                     vpcIPv4={thisInterface.ipv4?.vpc}
                     vpcId={thisInterface.vpc_id}
-                    regionHasVLANs={regionHasVLANS}
-                    regionHasVPCs={regionHasVPCs}
                   />
                 );
               })}

From 168d04ee75e4125faf21853f2d2ad1ab5767a903 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Mon, 13 Nov 2023 12:55:53 -0500
Subject: [PATCH 42/43] Update CM changelog

---
 packages/manager/CHANGELOG.md | 40 +++++++++++++++++------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/manager/CHANGELOG.md b/packages/manager/CHANGELOG.md
index 9fea3a88509..88f79fb213b 100644
--- a/packages/manager/CHANGELOG.md
+++ b/packages/manager/CHANGELOG.md
@@ -7,62 +7,62 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ## [2023-11-13] - v1.107.0
 
 
-### Added:
-
-- Add integration tests for AGLB certificate delete flow ([#9846](https://github.com/linode/manager/pull/9846))
-
 ### Changed:
 
 - Logic governing inclusion of public interfaces in Linode Create payload ([#9834](https://github.com/linode/manager/pull/9834))
 - Improve layout of breadcrumb for support tickets ([#9855](https://github.com/linode/manager/pull/9855))
-- Display 'Network Interfaces'/'Networking' section in Linode Config dialog unconditionally and conditionally display 'unavailable in region' helper text for VPC and VLAN interfaces ([#9868](https://github.com/linode/manager/pull/9868))
+- Logic governing display of Network Interfaces/Networking section in Linode Config dialog ([#9868](https://github.com/linode/manager/pull/9868))
+- Temporarily remove region sorting on DBaaS landing page ([#9861](https://github.com/linode/manager/pull/9861))
+
 
 ### Fixed:
 
 - Linodes Landing flickering ([#9836](https://github.com/linode/manager/pull/9836))
 - Faux-bold font rendering ([#9843](https://github.com/linode/manager/pull/9843))
 - Incorrect docs links for Main Concept and Simplex Marketplace apps ([#9854](https://github.com/linode/manager/pull/9854))
-- Remove region sorting on DBaaS landing page ([#9861](https://github.com/linode/manager/pull/9861))
-- Select backup grid layout ([#9862](https://github.com/linode/manager/pull/9862))
+- Select Backup grid layout ([#9862](https://github.com/linode/manager/pull/9862))
 
 ### Tech Stories:
 
-- Tag Component v7 Story ([#9840](https://github.com/linode/manager/pull/9840))
-- MUI Migration - SRC > Components > Crumbs ([#9841](https://github.com/linode/manager/pull/9841))
+- `Tag` Component v7 story migration ([#9840](https://github.com/linode/manager/pull/9840))
+- `BetaChip` Component v7 story migration ([#9864](https://github.com/linode/manager/pull/9864))
+- MUI Migration - `SRC > Components > Crumbs` ([#9841](https://github.com/linode/manager/pull/9841))
 - Clean up app entrypoint render logic ([#9844](https://github.com/linode/manager/pull/9844))
-- Fix Safari Launch Darkly MSW Errors ([#9863](https://github.com/linode/manager/pull/9863))
-- BetaChip V7 story migration ([#9864](https://github.com/linode/manager/pull/9864))
+- Fix Safari LaunchDarkly MSW Errors ([#9863](https://github.com/linode/manager/pull/9863))
 
 ### Tests:
 
 - Add DBaaS test coverage for disk metrics ([#9833](https://github.com/linode/manager/pull/9833))
 - Improve Cypress rescue and rebuild test stability ([#9867](https://github.com/linode/manager/pull/9867))
 - Upgrade Cypress to v13.x ([#9874](https://github.com/linode/manager/pull/9874))
-- Add integration tests for AGLB Edit Certificate flow ([#9880](https://github.com/linode/manager/pull/9880))
+- Add integration tests for AGLB certificate edit flow ([#9880](https://github.com/linode/manager/pull/9880))
+- Add integration tests for AGLB certificate delete flow ([#9846](https://github.com/linode/manager/pull/9846))
+
 
 ### Upcoming Features:
 
 - Fix Unassign multiple Linodes from Subnet ([#9820](https://github.com/linode/manager/pull/9820))
-- Add AGLB create page with Actions buttons ([#9825](https://github.com/linode/manager/pull/9825))
-- Update `RemovableSelectionsList` default maximum height to cut off last list item and indicate scrolling ([#9827](https://github.com/linode/manager/pull/9827))
+- `RemovableSelectionsList` default maximum height and overflow scroll ([#9827](https://github.com/linode/manager/pull/9827))
 - VPC UX feedback ([#9832](https://github.com/linode/manager/pull/9832))
 - Remove temporary code for surfacing VPC interface errors and fix formatting of error in Linode Config dialog ([#9839](https://github.com/linode/manager/pull/9839))
 - Refine payload in subnet "Assign Linodes" drawer ([#9845](https://github.com/linode/manager/pull/9845))
 - Add Create VPC drawer to Linode Create flow and update Create Firewall button width ([#9847](https://github.com/linode/manager/pull/9847))
-- Create Load Balancer flow - manage state ([#9848](https://github.com/linode/manager/pull/9848))
 - Only unassign linodes in the 'Linodes to be Unassigned from Subnet' list for Subnet Unassign Drawer ([#9851](https://github.com/linode/manager/pull/9851))
-- AGLB Configurations Add Route Drawer and other refinements ([#9853](https://github.com/linode/manager/pull/9853))
-- Add basic AGLB create page and feature flag ([#9856](https://github.com/linode/manager/pull/9856))
 - Clear subnet errors in Linode Create flow and VPC label errors in VPC Edit flow upon input change ([#9857](https://github.com/linode/manager/pull/9857))
-- Add `dcGetWell` feature flag ([#9859](https://github.com/linode/manager/pull/9859))
-- Add RQ queries and mock data for DC Get Well ([#9860](https://github.com/linode/manager/pull/9860))
 - Fix IPv4 checkboxes for VPC interfaces in Linode Config dialog ([#9865](https://github.com/linode/manager/pull/9865))
 - Fix incorrectly displayed error text in Linode Edit/Add config flow and prevent subnet section from incorrectly clearing in Linode Edit/Add Config and Linode Create flow ([#9866](https://github.com/linode/manager/pull/9866))
 - Linode Details: VPC Subnets Not Associated with VPC IP Address Are Displayed ([#9872](https://github.com/linode/manager/pull/9872))
-- Add RQ queries and mock data for Sold Out Plans ([#9878](https://github.com/linode/manager/pull/9878))
 - Add VPC BETA Feedback link to VPC landing and detail pages ([#9879](https://github.com/linode/manager/pull/9879))
+- Add `dcGetWell` feature flag ([#9859](https://github.com/linode/manager/pull/9859))
+- Add RQ queries and mock data for DC Get Well ([#9860](https://github.com/linode/manager/pull/9860))
+- Add RQ queries and mock data for Sold Out Plans ([#9878](https://github.com/linode/manager/pull/9878))
+- Add basic AGLB create page and feature flag ([#9856](https://github.com/linode/manager/pull/9856))
+- Add AGLB create page with Actions buttons ([#9825](https://github.com/linode/manager/pull/9825))
+- Manage state in Create Load Balancer flow ([#9848](https://github.com/linode/manager/pull/9848))
+- AGLB Configurations Add Route Drawer and other refinements ([#9853](https://github.com/linode/manager/pull/9853))
 - Add missing label field validation in AGLB Edit Certificate drawer ([#9880](https://github.com/linode/manager/pull/9880))
 
+
 ## [2023-10-30] - v1.106.0
 
 ### Added:

From 4ce79c9764d157b45e1d4725882b1700c467a57b Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Mon, 13 Nov 2023 13:04:34 -0500
Subject: [PATCH 43/43] Update V changelog

---
 packages/validation/CHANGELOG.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/validation/CHANGELOG.md b/packages/validation/CHANGELOG.md
index 88722244a79..dda84301d86 100644
--- a/packages/validation/CHANGELOG.md
+++ b/packages/validation/CHANGELOG.md
@@ -3,9 +3,10 @@
 
 ### Upcoming Features:
 
-- Create Load Balancer flow - manage state ([#9848](https://github.com/linode/manager/pull/9848))
+- Add `CreateLoadBalancerEndpointSchema`, `CreateLoadBalancerServiceTargetSchema`, `CreateLoadBalancerRuleSchema`, `ConfigurationSchema`, and `CreateLoadBalancerSchema` for AGLB ([#9848](https://github.com/linode/manager/pull/9848))
 - Add `UpdateConfigurationSchema` for AGLB ([#9853](https://github.com/linode/manager/pull/9853))
-- Add missing label validation to `UpdateCertificateSchema` ([#9880](https://github.com/linode/manager/pull/9880))
+- Add missing label validation to `UpdateCertificateSchema` for AGLB ([#9880](https://github.com/linode/manager/pull/9880))
+
 
 ## [2023-10-30] - v0.34.0